/**
 * Custom Attribute Swatches Frontend Styles
 */

/* Base wrapper styles */
.cas-attribute-wrapper {
  margin: 20px 0;
  font-family: inherit;
}

/* Multi-attribute wrapper styles */
.cas-multi-attribute-wrapper {
  margin: 20px 0;
  font-family: inherit;
}

/* Group style: separated */
.cas-multi-attribute-wrapper.cas-group-style-separated .cas-attribute-wrapper {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.cas-multi-attribute-wrapper.cas-group-style-separated .cas-attribute-wrapper:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Group style: compact */
.cas-multi-attribute-wrapper.cas-group-style-compact .cas-attribute-wrapper {
  margin-bottom: 15px;
}

.cas-multi-attribute-wrapper.cas-group-style-compact .cas-attribute-wrapper:last-child {
  margin-bottom: 0;
}

.cas-attribute-label {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}

.cas-swatches-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Layout variations */
.cas-layout-horizontal .cas-swatches-container {
  flex-direction: row;
}

.cas-layout-vertical .cas-swatches-container {
  flex-direction: column;
  align-items: flex-start;
}

.cas-layout-grid .cas-swatches-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap: 10px;
}

/* Swatch item base styles */
.cas-swatch-item {
  cursor: pointer;
  border: 1px solid #dddddd6b;
  border-radius: 4px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Loading state */
.cas-swatch-item.loading {
  opacity: 0.5;
  pointer-events: none;
  cursor: wait;
}

/* Disabled state */
.cas-swatch-item.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Override base styles for color swatches */
.cas-swatch-item.cas-color-swatch {
  border: none !important;
  border-radius: 50% !important;
  overflow: visible !important;
}

.cas-swatch-item:hover {
  border-color: #999;
  transform: scale(1.05);
}

.cas-swatch-item.selected {
  border-color: #000;
  box-shadow: 0 0 0 2px #000;
  transform: scale(1.05);
}

/* Checkmark for selected swatches (except color swatches) */
.cas-swatch-item.selected:not(.cas-color-swatch)::after {
  content: '✓';
  position: absolute;
  top: -8px;
  right: -8px;
  background: #000;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  z-index: 10;
  line-height: 1;
  padding-top: 2px;
}

/* Override hover and selected for color swatches */
.cas-color-swatch:hover {
  border-color: transparent !important;
}

.cas-color-swatch.selected {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Size variations */
.cas-size-small .cas-swatch-item {
  width: 30px;
  height: 30px;
}

.cas-size-medium .cas-swatch-item {
  width: 40px;
  height: 40px;
}

.cas-size-large .cas-swatch-item {
  width: 100px;
  height: 100px;
}

/* Color swatch specific styles - Radio button style */
.cas-color-swatch {
  border-radius: 50% !important;
  border: 3px solid transparent !important;
  background: transparent !important;
  padding: 3px;
  position: relative;
  overflow: visible !important;
}

.cas-color-swatch .cas-swatch-color {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50% !important;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Radio button outer ring effect */
.cas-color-swatch::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 3px solid transparent;
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* Selected state - show the ring with same color as the swatch */
.cas-color-swatch.selected::before {
  border-color: var(--swatch-color, #007cba);
}

/* Override default selected styles for color swatches */
.cas-color-swatch.selected {
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Hover effect */
.cas-color-swatch:hover {
  transform: scale(1.05) !important;
  border-color: transparent !important;
}

.cas-color-swatch:hover::before {
  border-color: rgba(0, 0, 0, 0.4);
}

.cas-color-swatch.selected:hover::before {
  border-color: var(--swatch-color, #007cba);
}

/* Ensure proper sizing for radio button style - Override base styles */
.cas-size-small .cas-color-swatch {
  width: 32px !important;
  height: 32px !important;
}

.cas-size-medium .cas-color-swatch {
  width: 42px !important;
  height: 42px !important;
}

.cas-size-large .cas-color-swatch {
  width: 52px !important;
  height: 52px !important;
}

/* Image swatch specific styles */
.cas-image-swatch .cas-swatch-image {
  display: block;
  width: 100%;
  height: 100%;
}

.cas-image-swatch .cas-swatch-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.cas-image-swatch.selected {
  border-color: #000;
  border-width: 3px;
  transform: scale(1.1);
}

/* Checkmark for image swatches */
.cas-image-swatch.selected::after {
  background: rgba(0, 0, 0, 0.8);
}

/* Button/Text swatch specific styles */
.cas-button-swatch {
  width: auto !important;
  height: auto;
  padding: 8px 12px;
  background: #f8f8f8;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cas-button-swatch .cas-swatch-text {
  font-size: 12px;
  font-weight: 500;
  color: #333;
  line-height: 1.2;
  word-break: break-word;
}

.cas-button-swatch:hover {
  background: #e8e8e8;
}

.cas-button-swatch.selected {
  background: #000;
  border-color: #000;
  transform: scale(1.05);
}

.cas-button-swatch.selected .cas-swatch-text {
  color: white;
}

/* No checkmark for button swatches - the background change is enough */
.cas-button-swatch.selected::after {
  display: none;
}

/* Vertical layout adjustments */
.cas-layout-vertical .cas-button-swatch {
  width: 100%;
  max-width: 200px;
  justify-content: flex-start;
}

/* Error message styles */
.cas-error {
  color: #d63638;
  font-style: italic;
  margin: 10px 0;
}

/* Widget title styles */
.cas-widget-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 15px 0;
  color: #333;
  line-height: 1.3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cas-layout-grid .cas-swatches-container {
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  }

  .cas-size-large .cas-swatch-item {
    width: 45px;
    height: 45px;
  }

  .cas-size-medium .cas-swatch-item {
    width: 35px;
    height: 35px;
  }

  .cas-button-swatch {
    min-width: 50px;
    padding: 6px 10px;
  }

  .cas-button-swatch .cas-swatch-text {
    font-size: 11px;
  }
}

/* Smart Image swatch placeholder (no variation image found) */
.cas-swatch-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg,
      #f0f0f0,
      #f0f0f0 4px,
      #e0e0e0 4px,
      #e0e0e0 8px);
  color: #999;
  font-size: 18px;
  font-weight: bold;
  border-radius: 2px;
  cursor: help;
}

.cas-smart-image-missing {
  opacity: 0.6;
}

/* Smart Image swatch: zoom into top-left 1/4 of the image */
.cas-smart-image-swatch .cas-swatch-image {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: white;
}

.cas-smart-image-swatch .cas-swatch-image img {
  width: 170%;
  height: 170%;
  object-fit: cover;
  object-position: 6px -32px;
}

/* Skeleton Loading for Gallery */
.cas-gallery-loading .flex-viewport,
.cas-gallery-loading .woocommerce-product-gallery__wrapper {
  position: relative;
  overflow: hidden;
}

.cas-gallery-loading .zoomImg {
  opacity: 0 !important;
  pointer-events: none !important;
}

.cas-gallery-loading .flex-viewport::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: #333;
  border-radius: 50%;
  animation: cas-spinner 0.7s linear infinite;
  z-index: 10;
  pointer-events: none;
}

.cas-gallery-loading .flex-viewport img,
.cas-gallery-loading .woocommerce-product-gallery__image img {
  filter: blur(6px);
  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.cas-gallery-loading .flex-control-thumbs img {
  filter: blur(3px);
  opacity: 0.5;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Gallery thumbnails: fixed size with horizontal scroll */
.woocommerce-product-gallery .flex-control-thumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 8px;
  padding: 8px 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 150px !important;
  width: 150px !important;
  height: 150px !important;
  margin: 0 !important;
}

.woocommerce-product-gallery .flex-control-thumbs li img {
  width: 150px !important;
  height: 150px !important;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.woocommerce-product-gallery .flex-control-thumbs li img:hover {
  opacity: 0.85;
}

.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  opacity: 1;
}

/* Hide scrollbar but keep functionality */
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
  height: 4px;
}

.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-track {
  background: transparent;
}

.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* Individual image loading state */
.cas-img-loading {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

@keyframes cas-spinner {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cas-skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}