/* =============================================================
   Variant Selector Buttons — Frontend Styles
   ============================================================= */

:root {
  --vsb-accent:      #1a1a2e;
  --vsb-accent-hover:#16213e;
  --vsb-text:        #1a1a2e;
  --vsb-text-inv:    #ffffff;
  --vsb-muted:       #6b7280;
  --vsb-border:      #e5e7eb;
  --vsb-bg:          #ffffff;
  --vsb-disabled-bg: #f3f4f6;
  --vsb-disabled-txt:#b0b7c3;
  --vsb-sale:        #ef4444;
  --vsb-radius:      10px;        /* overridden per style */
  --vsb-gap:         8px;
  --vsb-transition:  0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --vsb-shadow:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --vsb-shadow-active: 0 0 0 3px color-mix(in srgb, var(--vsb-accent) 25%, transparent);
}

/* Hide the native <select> without removing it from the DOM
   (WooCommerce still needs it to submit the form). */
.variations select {
  position: absolute !important;
  width:    1px !important;
  height:   1px !important;
  padding:  0   !important;
  margin:   -1px !important;
  overflow: hidden !important;
  clip:     rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border:   0   !important;
}

/* ---- Container ---- */
.vsb-options {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--vsb-gap);
  margin:    6px 0 16px;
}

/* ---- Single button ---- */
.vsb-btn {
  display:         inline-flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             2px;
  min-width:       64px;
  padding:         9px 16px 8px;
  background:      var(--vsb-bg);
  border:          1.5px solid var(--vsb-border);
  border-radius:   var(--vsb-radius);
  cursor:          pointer;
  user-select:     none;
  transition:
    border-color var(--vsb-transition),
    background   var(--vsb-transition),
    color        var(--vsb-transition),
    box-shadow   var(--vsb-transition),
    transform    var(--vsb-transition);
  box-shadow: var(--vsb-shadow);
  position:   relative;
  overflow:   hidden;
}

/* Hover */
.vsb-btn:hover:not(.vsb-disabled) {
  border-color: var(--vsb-accent);
  box-shadow:   var(--vsb-shadow-active);
  transform:    translateY(-1px);
}

/* Active / selected */
.vsb-btn.vsb-active {
  background:   var(--vsb-accent);
  border-color: var(--vsb-accent);
  box-shadow:   var(--vsb-shadow-active);
  color:        var(--vsb-text-inv);
}
.vsb-btn.vsb-active .vsb-label {
  color: var(--vsb-text-inv);
}
.vsb-btn.vsb-active .vsb-price {
  color: rgba(255,255,255,.75);
}
.vsb-btn.vsb-active .vsb-price-sale {
  color: #fca5a5;
}

/* Disabled / out of stock */
.vsb-btn.vsb-disabled {
  background:   var(--vsb-disabled-bg);
  border-color: var(--vsb-border);
  color:        var(--vsb-disabled-txt);
  cursor:       not-allowed;
  box-shadow:   none;
}
.vsb-btn.vsb-disabled .vsb-label {
  color: var(--vsb-disabled-txt);
}
.vsb-btn.vsb-disabled .vsb-price {
  color: var(--vsb-disabled-txt);
}

/* Strikethrough line for disabled */
.vsb-btn.vsb-disabled::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.7px),
    var(--vsb-disabled-txt) calc(50% - 0.7px),
    var(--vsb-disabled-txt) calc(50% + 0.7px),
    transparent calc(50% + 0.7px)
  );
  opacity: 0.45;
}

/* ---- Label text ---- */
.vsb-label {
  font-size:   0.875rem;
  font-weight: 500;
  color:       var(--vsb-text);
  line-height: 1.2;
  white-space: nowrap;
}

/* ---- Price hint beneath label (od XX zł) ---- */
.vsb-price {
  font-size:   0.68rem;
  color:       var(--vsb-muted);
  line-height: 1;
  white-space: nowrap;
  opacity:     0.75;
}
.vsb-price-hint {
  font-style: italic;
}

/* ---- Color swatch variant ---- */
.vsb-btn.vsb-swatch-btn {
  min-width:  44px;
  width:      44px;
  height:     44px;
  padding:    0;
  border-radius: 50%;
  position:   relative;
}
.vsb-swatch-circle {
  width:        32px;
  height:       32px;
  border-radius: 50%;
  border:       2px solid rgba(0,0,0,.1);
  display:      block;
  flex-shrink:  0;
}
.vsb-btn.vsb-swatch-btn.vsb-active {
  background: transparent;
  box-shadow: 0 0 0 3px var(--vsb-bg),
              0 0 0 5px var(--vsb-accent);
}
.vsb-btn.vsb-swatch-btn:hover:not(.vsb-disabled) {
  background: transparent;
  box-shadow: 0 0 0 3px var(--vsb-bg),
              0 0 0 5px color-mix(in srgb, var(--vsb-accent) 60%, transparent);
}

/* ---- Button shapes ---- */
body.vsb-style-pill .vsb-btn         { --vsb-radius: 999px; }
body.vsb-style-square .vsb-btn       { --vsb-radius: 4px;  }
body.vsb-style-rounded .vsb-btn      { --vsb-radius: 10px; }

/* If body class not set, default radius is already 10px */

/* ---- "Brak" badge overlay ---- */
.vsb-out-badge {
  position:    absolute;
  bottom:      3px;
  left:        50%;
  transform:   translateX(-50%);
  font-size:   0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color:       var(--vsb-disabled-txt);
  text-transform: uppercase;
}

/* ---- Entrance animation ---- */
@keyframes vsb-pop-in {
  from { opacity: 0; transform: scale(0.85) translateY(4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}
.vsb-options .vsb-btn {
  animation: vsb-pop-in 0.25s ease both;
}
.vsb-options .vsb-btn:nth-child(1)  { animation-delay: 0.00s; }
.vsb-options .vsb-btn:nth-child(2)  { animation-delay: 0.04s; }
.vsb-options .vsb-btn:nth-child(3)  { animation-delay: 0.08s; }
.vsb-options .vsb-btn:nth-child(4)  { animation-delay: 0.12s; }
.vsb-options .vsb-btn:nth-child(5)  { animation-delay: 0.16s; }
.vsb-options .vsb-btn:nth-child(6)  { animation-delay: 0.20s; }
.vsb-options .vsb-btn:nth-child(n+7){ animation-delay: 0.24s; }

/* ---- Active ripple effect ---- */
@keyframes vsb-ripple {
  from { transform: scale(0); opacity: 0.35; }
  to   { transform: scale(3); opacity: 0; }
}
.vsb-btn .vsb-ripple {
  position:      absolute;
  border-radius: 50%;
  background:    rgba(255,255,255,.5);
  width:         48px;
  height:        48px;
  margin-top:    -24px;
  margin-left:   -24px;
  pointer-events: none;
  animation:     vsb-ripple 0.45s ease-out forwards;
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
  .vsb-btn {
    min-width: 54px;
    padding:   8px 12px 7px;
  }
  .vsb-label { font-size: 0.82rem; }
  .vsb-price  { font-size: 0.68rem; }
}

/* ---- Natywna cena WooCommerce ----
   Ukrywamy ją wizualnie TYLKO gdy obok jest aktywny blok „Do zapłaty"
   (tj. .wc-dde-express-price-preview ma dziecko).
   Dla produktów prostych bez załadowanego express bloku cena pozostaje
   dostępna w DOM (potrzebna jako fallback do odczytu JS).
   Ukrycie realizujemy klasą .vsb-hide-native-price dodawaną przez JS
   gdy blok „Do zapłaty" jest gotowy.
   ------------------------------------------------------------------- */
.single-product .vsb-hide-native-price .product > .price,
.single-product .vsb-hide-native-price .summary > .price,
.single-product .vsb-hide-native-price .woocommerce-variation-price {
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---- Cena wybranego wariantu (NIEUŻYWANA - zastąpiona przez blok "Do zapłaty") ---- */
.vsb-selected-price,
.vsb-selected-price--visible {
  display: none !important;
}