/**
 * Location: /assets/css/stm-variation-swatches.css
 * Purpose:
 * - Premium Variation Swatches UI (frontend)
 * - Hide Woo native selects safely (NOT display:none)
 * - Active/disabled/hover states + responsive sizing (via CSS variables injected by PHP)
 * - ✅ Color selected label (single) placed BEFORE Clear button (same row, clean)
 * - ✅ Light color chips (data-light="1") get premium border + subtle pattern overlay
 * - ✅ FIX: Remove duplicate Woo left label ("color") ONLY for color swatches row (via :has())
 *
 * Related PHP:
 * - /inc/features/woocommerce/variation-swatches/variation-swatches.php
 *
 * Related JS:
 * - /assets/js/stm-variation-swatches.js
 *
 * Linkage/Loader:
 * - Enqueued conditionally on single variable products by the PHP module.
 */

/* ================================
   0) Wrapper (CSS variables)
================================ */
.stm-swatches-wrap{
  position:relative;
}

/* ================================
   1) Hide native select safely
   (keep it in DOM for Woo logic)
================================ */
.stm-swatches-wrap .stm-swatches__native-select{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* ================================
   2) Base swatches block
================================ */
.stm-swatches{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.stm-swatches__list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

/* ================================
   2.1) ✅ Remove duplicate Woo label
   - Woo prints left label: <td class="label"><label>color</label></td>
   - We hide ONLY when this row contains our color swatches group.
   - Uses :has() (supported in modern Chrome).
================================ */
@supports selector(tr:has(.x)) {
  form.variations_form table.variations tr:has(.stm-swatches[data-is-color="1"]) > td.label{
    display:none !important;
  }

  /* Optional: give value cell full width when label hidden */
  form.variations_form table.variations tr:has(.stm-swatches[data-is-color="1"]) > td.value{
    width:100% !important;
    padding-left:0 !important;
  }
}

/* ================================
   3) Swatch button (premium)
================================ */
.stm-swatch{
  -webkit-tap-highlight-color: transparent;
  appearance:none;
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  color:#111;
  cursor:pointer;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* size controlled by PHP-injected variables */
  width: var(--stm-swatch-size, 40px);
  height: calc(var(--stm-swatch-size, 40px) - 8px);

  border-radius:10px;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.stm-swatch:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.18);
}

.stm-swatch:focus{
  outline:none;
}

/* focus ring */
.stm-swatch:focus-visible{
  box-shadow: 0 0 0 3px rgba(0,0,0,0.12);
}

/* Active */
.stm-swatch.is-active{
  border-color: rgba(0,0,0,0.75);
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
}

/* Disabled */
.stm-swatch.is-disabled,
.stm-swatch:disabled{
  opacity:0.38;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}

/* Label swatch (non-color attributes) */
.stm-swatch__label{
  font-size:13px;
  font-weight:700;
  padding:0 10px;
  line-height:1;
  white-space:nowrap;
}

/* Color swatch */
.stm-swatch__color{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.10);
  position:relative;
  overflow:hidden; /* for overlay pattern */
}

/* ✅ Light colors: premium visibility (border + subtle stripes overlay) */
.stm-swatch[data-light="1"] .stm-swatch__color{
  border-color: rgba(0,0,0,0.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

.stm-swatch[data-light="1"] .stm-swatch__color::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.35;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.10) 0px,
    rgba(0,0,0,0.10) 3px,
    rgba(255,255,255,0) 3px,
    rgba(255,255,255,0) 7px
  );
}

/* Image swatch */
.stm-swatch__img{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.10);
  background-size:cover;
  background-position:center;
}

/* ================================
   4) ✅ Color mode layout
   Goal:
   - Chips inline
   - Selected label inline (before Clear)
   - Clear inline
================================ */
.stm-swatches--color{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

/* keep chips row */
.stm-swatches--color .stm-swatches__list{
  flex:0 0 auto;
}

/* meta row: selected + clear on same line */
.stm-swatches__meta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  min-width: 0;
}

/* Selected label (Color only) */
.stm-swatches__selected{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid rgba(0,0,0,0.10);
  background:#fff;
  border-radius:12px;
  font-size:13px;
  line-height:1;
  max-width: 100%;
}

.stm-swatches__selected-prefix{
  font-weight:700;
  color:#111;
  opacity:0.7;
}

.stm-swatches__selected-value{
  font-weight:800;
  color:#111;
  white-space:nowrap;
}

/* ================================
   5) Clear button
================================ */
.stm-swatches__clear{
  appearance:none;
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  color:#111;
  cursor:pointer;
  padding:8px 12px;
  border-radius:12px;
  font-weight:700;
  font-size:13px;
  width:max-content;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.stm-swatches__clear:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.18);
}

/* ================================
   6) Responsive sizing (mobile)
================================ */
@media (max-width: 520px){
  .stm-swatch{
    width: var(--stm-swatch-size-mobile, 36px);
    height: calc(var(--stm-swatch-size-mobile, 36px) - 8px);
  }

  .stm-swatch__label{
    font-size:12px;
  }

  .stm-swatches__selected{
    font-size:12px;
    padding:6px 9px;
  }

  .stm-swatches__meta{
    gap:8px;
  }
}