/**
 * 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:
 * - /modules/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;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

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

.stm-swatches__list{
  display:flex;
  flex-wrap:wrap;
  gap:var(--stm-space-2);
  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;
  }

  /* 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%;
    padding-left:0;
  }
}

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

  /* size controlled by PHP-injected variables */
  width:var(--stm-swatch-size);
  height:var(--stm-swatch-height);

  border-radius:var(--stm-swatch-radius);
  transition:transform 0.12s ease, border-color 0.12s ease;
}

.stm-swatch:hover{
  transform:translateY(-1px);
  border-color:var(--stm-color-border-strong);
}

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

/* focus ring */
.stm-swatch:focus-visible{
  
}

/* Active */
.stm-swatch.is-active{
  border-color:var(--stm-color-border-strong);
  transform:translateY(-1px);
  
}

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

/* Label swatch (non-color attributes) */
.stm-swatch__label{
  font-size:var(--stm-font-size-small);
  font-weight:var(--stm-weight-bold);
  padding:0 var(--stm-space-2);
  line-height:1;
  white-space:nowrap;
}

/* Color swatch */
.stm-swatch__color{
  width:22px;
  height:22px;
  border-radius:var(--stm-radius-pill);
  border:1px solid var(--stm-color-border-strong);
  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:var(--stm-color-border-strong);
  
}

.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,
    var(--stm-color-overlay-soft) 0px,
    var(--stm-color-overlay-soft) 3px,
    transparent 3px,
    transparent 7px
  );
}

/* Image swatch */
.stm-swatch__img{
  width:22px;
  height:22px;
  border-radius:var(--stm-radius-pill);
  border:1px solid var(--stm-color-border-strong);
  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:var(--stm-space-2);
}

/* 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:var(--stm-space-2);
  flex:1 1 auto;
  min-width:0;
}

/* Selected label (Color only) */
.stm-swatches__selected{
  display:inline-flex;
  align-items:center;
  gap:var(--stm-space-1);
  padding:var(--stm-space-1) var(--stm-space-2);
  border:1px solid var(--stm-color-border-strong);
  background:var(--stm-color-surface);
  border-radius:var(--stm-radius-lg);
  font-size:var(--stm-font-size-small);
  line-height:1;
  max-width:100%;
}

.stm-swatches__selected-prefix{
  font-weight:var(--stm-weight-bold);
  color:var(--stm-color-ink);
  opacity:0.7;
}

.stm-swatches__selected-value{
  font-weight:var(--stm-weight-bold);
  color:var(--stm-color-ink);
  white-space:nowrap;
}

/* ================================
   5) Clear button
================================ */
.stm-swatches__clear{
  appearance:none;
  border:1px solid var(--stm-color-border-strong);
  background:var(--stm-color-surface);
  color:var(--stm-color-ink);
  cursor:pointer;
  padding:var(--stm-space-2) var(--stm-space-3);
  border-radius:var(--stm-radius-lg);
  font-weight:var(--stm-weight-bold);
  font-size:var(--stm-font-size-small);
  width:max-content;
  transition:transform 0.12s ease, border-color 0.12s ease;
}

.stm-swatches__clear:hover{
  transform:translateY(-1px);
  border-color:var(--stm-color-border-strong);
}

/* ================================
   6) Responsive sizing (mobile)
================================ */

  html[data-stm-layout="mobile"] .stm-swatch{
    width:var(--stm-swatch-size-mobile);
    height:calc(var(--stm-swatch-size-mobile) - 8px);
  }

  html[data-stm-layout="mobile"] .stm-swatch__label{
    font-size:var(--stm-font-size-label);
  }

  html[data-stm-layout="mobile"] .stm-swatches__selected{
    font-size:var(--stm-font-size-label);
    padding:var(--stm-space-1) var(--stm-space-2);
  }

  html[data-stm-layout="mobile"] .stm-swatches__meta{
    gap:var(--stm-space-2);
  }