/* ===================================
   Levon.bg – Product Buy Block
   FINAL VERSION 4.6.1 (Pixel-Stable • Ultra-Fine • Safe Edition) — Single-Truth Build
   Filename: custom-product-buttons.css

   Goals:
   - Single Source of Truth (CSS vars only at .button-group-page)
   - Ultra-fine UI (1px borders, subtle shadows)
   - Mobile-safe (never overflow, tight layout)
   - Scoped safety only (no global selectors outside the block)
   - Zero Duplication (no patch layers)
   - Stepper buttons ALWAYS glued to the right (supports both .levon-qty-up/down and .levon-qty-btn markup)
   - No red spinner/loader on Add to Cart
   - Hide Stepper + Buy button when out of stock (.product-info.out-of-stock)
   =================================== */

/* ========================================
   0) SCOPE + VARIABLES (Single Truth)
   ======================================== */
.product-info .button-group-page{
  box-sizing: border-box;

  /* Brand */
  --levon-accent:#238CD2;
  --levon-accent-dark:#1a6ca8;

  /* Ultra-fine neutrals */
  --levon-border:#e1e8ed;
  --levon-border-strong:#d6dde3;
  --levon-surface:#ffffff;
  --levon-surface-soft:#f8f9fa;
  --levon-text:#222;
  --levon-muted:#5b6268;
  --levon-icon:#88929b;

  /* Geometry */
  --divider-w:1px;

  --stepper-h:58px;
  --stepper-radius:12px;
  --controls-w:64px; /* Desktop/tablet default */

  --btn-h:58px;
  --btn-radius:14px;

  /* Shadows (soft) */
  --shadow-wrap:0 2px 10px rgba(0,0,0,.05);
  --shadow-wrap-hover:0 4px 14px rgba(0,0,0,.08);
  --shadow-focus:0 0 0 3px rgba(35,140,210,.10);

  /* Motion */
  --ease:cubic-bezier(.4,0,.2,1);
}

/* Desktop overrides (only variables) */
@media (min-width:769px){
  .product-info .button-group-page{
    --stepper-h:52px;
    --stepper-radius:10px;
    --controls-w:42px;

    --btn-h:52px;
    --btn-radius:10px;
  }
}

/* Mobile overrides (tight but touch-friendly) */
@media (max-width:480px){
  .product-info .button-group-page{
    --stepper-h:56px;
    --stepper-radius:14px;
    --controls-w:86px; /* Touch width */
  }
}

/* Tiny screens */
@media (max-width:360px){
  .product-info .button-group-page{
    --controls-w:78px;
  }
}

.product-info .button-group-page *,
.product-info .button-group-page *::before,
.product-info .button-group-page *::after{
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   1) WRAPPER CONTAINER
   ======================================== */
.product-info .button-group-page .buttons-wrapper{
  background: var(--levon-surface-soft);
  padding: 16px;
  border-radius: 12px;
  box-shadow: var(--shadow-wrap);
  margin: 0;
  width: 100%;
  transition: box-shadow .3s var(--ease);
}

@media (min-width:769px){
  .product-info .button-group-page .buttons-wrapper{
    padding: 20px;
  }
}

@media (hover:hover){
  .product-info .button-group-page .buttons-wrapper:hover{
    box-shadow: var(--shadow-wrap-hover);
  }
}

/* ========================================
   2) LAYOUT
   ======================================== */
.product-info .button-group-page .stepper-group{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
  margin-bottom:12px;
}

@media (min-width:481px){
  .product-info .button-group-page .stepper-group{
    flex-direction:row;
  }
}

@media (min-width:769px){
  .product-info .button-group-page .stepper-group{
    margin-bottom:15px;
  }
}

/* ========================================
   2.1) OUT OF STOCK — hide qty + buy button (as requested)
   Requires theme/body marker: .product-info.out-of-stock
   ======================================== */
.product-info.out-of-stock .button-group-page .stepper-group,
.product-info.out-of-stock .button-group-page #button-cart,
.product-info.out-of-stock .button-group-page .btn.btn-cart{
  display:none !important;
}

/* ========================================
   3) BUY BUTTON (Main) — keep theme icon, kill loaders
   ======================================== */
.product-info .button-group-page #button-cart,
.product-info .button-group-page .btn.btn-cart{
  background: linear-gradient(135deg, var(--levon-accent) 0%, var(--levon-accent-dark) 100%) !important;
  height: var(--btn-h) !important;
  width: 100%;
  border-radius: var(--btn-radius) !important;
  border: none !important;

  font-size: 17px !important;
  font-weight: 600 !important;
  color: #fff !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px;

  cursor:pointer;
  box-shadow: 0 4px 14px rgba(35,140,210,.30) !important;

  transition: transform .2s var(--ease),
              box-shadow .2s var(--ease);
}

@media (min-width:769px){
  .product-info .button-group-page #button-cart{
    min-width: 180px;
  }
}

/* DO NOT inject custom glyphs (prevents "weird" icon). Keep theme-provided icon if any. */
.product-info .button-group-page #button-cart .btn-text::before{
  content: none !important;
}

/* Remove any spinner element inside the button (scoped) */
.product-info .button-group-page #button-cart i.fa-spinner,
.product-info .button-group-page #button-cart i.fa-circle-o-notch,
.product-info .button-group-page #button-cart i.fa-refresh,
.product-info .button-group-page #button-cart i.fa-spin,
.product-info .button-group-page #button-cart .fa-spin,
.product-info .button-group-page #button-cart .spinner,
.product-info .button-group-page #button-cart .loading-spinner,
.product-info .button-group-page .btn.btn-cart i.fa-spinner,
.product-info .button-group-page .btn.btn-cart i.fa-circle-o-notch,
.product-info .button-group-page .btn.btn-cart i.fa-refresh,
.product-info .button-group-page .btn.btn-cart i.fa-spin,
.product-info .button-group-page .btn.btn-cart .fa-spin,
.product-info .button-group-page .btn.btn-cart .spinner,
.product-info .button-group-page .btn.btn-cart .loading-spinner{
  display:none !important;
}

/* Themes often use pseudo-elements for loading (including red spinners) */
.product-info .button-group-page #button-cart::after,
.product-info .button-group-page #button-cart::before,
.product-info .button-group-page #button-cart.loading::after,
.product-info .button-group-page #button-cart.loading::before,
.product-info .button-group-page #button-cart.button-loading::after,
.product-info .button-group-page #button-cart.button-loading::before,
.product-info .button-group-page #button-cart.is-loading::after,
.product-info .button-group-page #button-cart.is-loading::before,
.product-info .button-group-page .btn.btn-cart::after,
.product-info .button-group-page .btn.btn-cart::before,
.product-info .button-group-page .btn.btn-cart.loading::after,
.product-info .button-group-page .btn.btn-cart.loading::before,
.product-info .button-group-page .btn.btn-cart.button-loading::after,
.product-info .button-group-page .btn.btn-cart.button-loading::before,
.product-info .button-group-page .btn.btn-cart.is-loading::after,
.product-info .button-group-page .btn.btn-cart.is-loading::before{
  content: none !important;
  animation: none !important;
  background: none !important;
  box-shadow: none !important;
}

@media (hover:hover){
  .product-info .button-group-page #button-cart:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(35,140,210,.38) !important;
  }
}

.product-info .button-group-page #button-cart:active{
  transform: scale(.98);
}

.product-info .button-group-page #button-cart:focus-visible{
  outline: 3px solid rgba(26,108,168,.45);
  outline-offset: 2px;
}

/* ========================================
   4) SECONDARY BUTTONS (Wishlist + Compare) — no duplicates
   ======================================== */
.product-info .button-group-page .wishlist-compare{
  display:flex;
  gap:10px;
  margin-top:0;
}

@media (max-width:480px){
  .product-info .button-group-page .wishlist-compare{
    flex-direction:column;
    gap:8px;
  }
}

.product-info .button-group-page .wishlist-compare .btn{
  height: 48px;
  border-radius: 10px !important;

  border: 1px solid var(--levon-border) !important;
  background: var(--levon-surface) !important;
  color: var(--levon-muted) !important;

  font-size: 14px;
  font-weight: 500;

  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;

  transition: transform .2s var(--ease),
              border-color .2s var(--ease),
              color .2s var(--ease),
              background-color .2s var(--ease);
  white-space: nowrap;
}

/* Stop pseudo icon injections (prevents duplicates) */
.product-info .button-group-page .wishlist-compare .btn::before,
.product-info .button-group-page .wishlist-compare .btn::after{
  content: none !important;
}

/* If theme injects multiple icons inside button, keep only the first */
.product-info .button-group-page .wishlist-compare .btn i + i,
.product-info .button-group-page .wishlist-compare .btn svg + svg,
.product-info .button-group-page .wishlist-compare .btn .icon + .icon{
  display:none !important;
}

@media (hover:hover){
  .product-info .button-group-page .wishlist-compare .btn:hover{
    border-color: rgba(35,140,210,.45) !important;
    color: var(--levon-accent) !important;
    transform: translateY(-1px);
    background: #fbfcfd !important;
  }
}

/* ========================================
   5) EXTRA BUTTONS OFF
   ======================================== */
.product-info .button-group-page .extra-group{
  display:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* ========================================
   6) STEPPER (Quantity) — RIGHT-GLUED RAIL (v4.3 behavior, v4.6 visuals)
   - Rail is absolute and glued to the right edge
   - Input reserves rail width
   - Native number spinners hard-removed (scoped)
   - Supports BOTH markups:
       A) .levon-qty-up / .levon-qty-down
       B) .levon-qty-btn (first = up, last = down)
   ======================================== */
.product-info .button-group-page .stepper{
  background: var(--levon-surface);
  border: 1px solid var(--levon-border);
  width: 100%;
  height: var(--stepper-h);
  border-radius: var(--stepper-radius);

  position: relative !important;  /* anchor for absolute rail */
  display:flex !important;
  align-items: stretch !important;

  overflow:hidden !important;     /* hard clip for any active/focus effects */

  transition: border-color .25s var(--ease),
              box-shadow .25s var(--ease);
}

@media (min-width:769px){
  .product-info .button-group-page .stepper{
    min-width:140px;
    max-width:160px;
  }
}

.product-info .button-group-page .stepper:hover,
.product-info .button-group-page .stepper:focus-within{
  border-color: rgba(35,140,210,.55);
  box-shadow: var(--shadow-focus);
}

/* 6.1 HARD KILL native number spinners (target the actual input inside .stepper) */
.product-info .button-group-page .stepper input[type="number"],
.product-info .button-group-page .stepper .form-control[type="number"]{
  -webkit-appearance: textfield !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

.product-info .button-group-page .stepper input[type="number"]::-webkit-inner-spin-button,
.product-info .button-group-page .stepper input[type="number"]::-webkit-outer-spin-button,
.product-info .button-group-page .stepper .form-control[type="number"]::-webkit-inner-spin-button,
.product-info .button-group-page .stepper .form-control[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
}

/* 6.2 Input — reserve EXACT rail width on the right */
.product-info .button-group-page .stepper .form-control{
  width: 100% !important;
  height: 100% !important;

  border: none !important;
  background: transparent !important;
  text-align: center !important;

  font-size:18px !important;
  font-weight:700 !important;
  color: var(--levon-text);

  padding: 0 calc(var(--controls-w) + 6px) 0 10px !important; /* reserve rail width */
  outline: none !important;
  box-shadow: none !important;

  font-variant-numeric: tabular-nums;
  min-width: 0 !important;
}

@media (min-width:769px){
  .product-info .button-group-page .stepper .form-control{
    font-size:16px !important;
  }
}

/* 6.3 Right rail — glued to the right edge */
.product-info .button-group-page .stepper .levon-qty-controls{
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;

  width: var(--controls-w) !important;
  height: 100% !important;

  display:flex !important;
  flex-direction: column !important;

  border-left: var(--divider-w) solid var(--levon-border) !important;
  background: var(--levon-surface) !important;

  overflow: hidden !important; /* ensures arrows never escape */
}

/* Mobile: rail becomes horizontal, still glued right */
@media (max-width:480px){
  .product-info .button-group-page .stepper .levon-qty-controls{
    flex-direction: row !important;
    border-left: 0 !important;
  }
}

/* 6.4 Buttons — support BOTH markup variants */

/* Variant A: explicit classes */
.product-info .button-group-page .stepper .levon-qty-up,
.product-info .button-group-page .stepper .levon-qty-down,
.product-info .button-group-page .stepper .levon-qty-controls .levon-qty-up,
.product-info .button-group-page .stepper .levon-qty-controls .levon-qty-down,
/* Variant B: generic .levon-qty-btn (as in v4.3) */
.product-info .button-group-page .stepper .levon-qty-controls .levon-qty-btn{
  position: relative !important;
  flex: 1 1 0 !important;
  height: 100% !important;

  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;

  -webkit-appearance: none !important;
  appearance: none !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  cursor: pointer;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  touch-action: manipulation;

  color: var(--levon-icon) !important;

  font-size: 0 !important;
  line-height: 0 !important;

  transition: background-color .18s var(--ease),
              color .18s var(--ease),
              transform .08s ease;
  outline: none !important;
}

/* Never show injected inner icons */
.product-info .button-group-page .stepper .levon-qty-up i,
.product-info .button-group-page .stepper .levon-qty-down i,
.product-info .button-group-page .stepper .levon-qty-controls .levon-qty-btn i{
  display:none !important;
}

/* Divider desktop: between up/down (explicit + generic fallback) */
@media (min-width:481px){
  .product-info .button-group-page .stepper .levon-qty-up{
    border-bottom: var(--divider-w) solid var(--levon-border) !important;
  }
  .product-info .button-group-page .stepper .levon-qty-controls > :first-child{
    border-bottom: var(--divider-w) solid var(--levon-border) !important;
  }
}

/* Divider mobile: between left/right (explicit + generic fallback) */
@media (max-width:480px){
  .product-info .button-group-page .stepper .levon-qty-up{
    border-bottom: 0 !important;
    border-right: var(--divider-w) solid var(--levon-border) !important;
  }
  .product-info .button-group-page .stepper .levon-qty-controls > :first-child{
    border-bottom: 0 !important;
    border-right: var(--divider-w) solid var(--levon-border) !important;
  }
}

/* 6.5 Chevrons — explicit classes */
.product-info .button-group-page .stepper .levon-qty-up::before,
.product-info .button-group-page .stepper .levon-qty-down::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;

  width:8px !important;
  height:8px !important;

  border-right:2px solid currentColor !important;
  border-top:2px solid currentColor !important;

  transform-origin: 50% 50% !important;
}

.product-info .button-group-page .stepper .levon-qty-up::before{
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.product-info .button-group-page .stepper .levon-qty-down::before{
  transform: translate(-50%, -50%) rotate(135deg) !important;
}

/* 6.6 Chevrons — generic .levon-qty-btn fallback (first=up, last=down) */
.product-info .button-group-page .stepper .levon-qty-controls .levon-qty-btn::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;

  width:8px !important;
  height:8px !important;

  border-right:2px solid currentColor !important;
  border-top:2px solid currentColor !important;

  transform-origin: 50% 50% !important;
}

.product-info .button-group-page .stepper .levon-qty-controls .levon-qty-btn:first-child::before{
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.product-info .button-group-page .stepper .levon-qty-controls .levon-qty-btn:last-child::before{
  transform: translate(-50%, -50%) rotate(135deg) !important;
}

/* Hover / Active: NEVER overflow because parent clips */
@media (hover:hover){
  .product-info .button-group-page .stepper .levon-qty-up:hover,
  .product-info .button-group-page .stepper .levon-qty-down:hover,
  .product-info .button-group-page .stepper .levon-qty-controls .levon-qty-btn:hover{
    background:#f1f5f9;
    color: var(--levon-accent) !important;
  }
}

.product-info .button-group-page .stepper .levon-qty-up:active,
.product-info .button-group-page .stepper .levon-qty-down:active,
.product-info .button-group-page .stepper .levon-qty-controls .levon-qty-btn:active{
  background: var(--levon-accent-dark) !important;
  color: #fff !important;
  transform: scale(.97); /* clipped safely */
}

/* Focus-visible */
.product-info .button-group-page .stepper .levon-qty-up:focus-visible,
.product-info .button-group-page .stepper .levon-qty-down:focus-visible,
.product-info .button-group-page .stepper .levon-qty-controls .levon-qty-btn:focus-visible{
  outline: 3px solid rgba(35,140,210,.28) !important;
  outline-offset: -3px !important;
  border-radius: 6px;
}

/* Fallback for browsers without :focus-visible */
@supports not selector(:focus-visible){
  .product-info .button-group-page .stepper .levon-qty-up:focus,
  .product-info .button-group-page .stepper .levon-qty-down:focus,
  .product-info .button-group-page .stepper .levon-qty-controls .levon-qty-btn:focus{
    outline: 3px solid rgba(35,140,210,.28) !important;
    outline-offset: -3px !important;
    border-radius: 6px;
  }
}

/* Disabled */
.product-info .button-group-page .stepper .levon-qty-up.is-disabled,
.product-info .button-group-page .stepper .levon-qty-up:disabled,
.product-info .button-group-page .stepper .levon-qty-down.is-disabled,
.product-info .button-group-page .stepper .levon-qty-down:disabled,
.product-info .button-group-page .stepper .levon-qty-controls .levon-qty-btn.is-disabled,
.product-info .button-group-page .stepper .levon-qty-controls .levon-qty-btn:disabled{
  opacity: .45;
  cursor: not-allowed;
  pointer-events:none;
}

/* Error state */
.product-info .button-group-page .stepper.quantity-error{
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.10);
}

.product-info .button-group-page .stepper.quantity-error .levon-qty-controls{
  border-left-color:#ef4444 !important;
}

@media (min-width:481px){
  .product-info .button-group-page .stepper.quantity-error .levon-qty-up,
  .product-info .button-group-page .stepper.quantity-error .levon-qty-controls > :first-child{
    border-bottom-color:#ef4444 !important;
  }
}

@media (max-width:480px){
  .product-info .button-group-page .stepper.quantity-error .levon-qty-controls{
    border-left:0 !important;
    box-shadow: inset var(--divider-w) 0 0 rgba(239,68,68,.85);
  }
  .product-info .button-group-page .stepper.quantity-error .levon-qty-up,
  .product-info .button-group-page .stepper.quantity-error .levon-qty-controls > :first-child{
    border-right-color:#ef4444 !important;
  }
}

/* ========================================
   7) SMALL SCREENS REFINEMENTS
   ======================================== */
@media (max-width:360px){
  .product-info .button-group-page .buttons-wrapper{
    padding: 12px;
  }
  .product-info .button-group-page #button-cart{
    font-size: 15px !important;
  }
}

/* ========================================
   8) REDUCED MOTION (SCOPED ONLY)
   ======================================== */
@media (prefers-reduced-motion: reduce){
  .product-info .button-group-page .buttons-wrapper,
  .product-info .button-group-page #button-cart,
  .product-info .button-group-page .btn.btn-cart,
  .product-info .button-group-page .wishlist-compare .btn,
  .product-info .button-group-page .stepper,
  .product-info .button-group-page .stepper *{
    transition: none !important;
    animation: none !important;
  }
}

/* ========================================
   END • Version 4.6.1 FINAL (Single-Truth)
   ======================================== */