/* v5.1.0 — Visual refresh + mobile polish */
:root{
  --m24-sky:#0ea5e9;         /* accent */
  --m24-sky-600:#0284c7;
  --m24-chip:#e0f2fe;
  --m24-danger:#ef4444;
  --m24-sale:#dc2626;
  --m24-shadow:0 6px 18px rgba(0,0,0,.12);
}
.variations_form .mah24v5-wrap{font-family:inherit;margin-top:14px}
.variations_form .mah24v5-title{display:flex;align-items:center;gap:8px;margin:6px 0 10px;font-weight:800}
.variations_form .mah24v5-title .step{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:var(--m24-sky);color:#fff;font-size:12px;box-shadow:0 1px 2px rgba(2,132,199,.35)}
.variations_form .mah24v5-title .guide{margin-right:auto;background:var(--m24-chip);color:var(--m24-sky-600);padding:4px 10px;border-radius:999px;font-weight:800}

.variations_form .mah24v5-items{list-style:none;margin:0;padding:0;display:grid;grid-gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.variations_form .mah24v5-item{position:relative}
.variations_form .mah24v5-item .card{
  width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:6px;background:#fff;border:1px solid rgba(0,0,0,.18)!important;border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.08)!important;
  cursor:pointer;min-height:58px;text-align:center;transition:box-shadow .18s ease,border-color .18s ease,transform .08s ease;
  outline: none;
}
.variations_form .mah24v5-item .card:hover{box-shadow:var(--m24-shadow)!important;transform:translateY(-1px);border-color:rgba(14,165,233,.55)!important}
.variations_form .mah24v5-item .card:focus{box-shadow:0 0 0 3px rgba(14,165,233,.35)!important;border-color:var(--m24-sky)!important}
.variations_form .mah24v5-item .name{font-weight:900!important; letter-spacing:.2px}
.variations_form .mah24v5-item.is-selected .card{border-color:var(--m24-sky)!important;box-shadow:0 0 0 3px rgba(14,165,233,.30)!important}
.variations_form .mah24v5-item.is-disabled .card{opacity:.45;filter:grayscale(100%);cursor:not-allowed}

.variations_form .corner-sale-slot{position:absolute;top:0;left:0;pointer-events:none}
.variations_form .sale-ribbon{position:absolute;top:-10px;left:-10px;transform:translate(-20%,-20%);background:var(--m24-sale);color:#fff;font-weight:900;font-size:11px;padding:4px 8px;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.variations_form .corner-badge-slot{position:absolute;top:0;right:0;pointer-events:none}
.variations_form .badge.corner{position:absolute;top:-10px;right:-10px;transform:translate(20%,-20%);padding:4px 10px;border-radius:999px;font-size:11px;color:#fff;font-weight:900;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.variations_form .badge-recommend{background:var(--m24-danger)}

.variations_form .mah24v5-grade.is-hidden{display:none!important}
.variations_form .mah24v5-actions{display:flex;justify-content:flex-end;margin-top:10px}
.variations_form .mah24v5-clear{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px dashed var(--m24-sky);background:rgba(14,165,233,.06);color:var(--m24-sky-600);font-weight:800;cursor:pointer}
.variations_form .mah24v5-clear .x{font-size:16px;line-height:1;transform:translateY(-1px)}
.variations_form .mah24v5-clear:hover{box-shadow:0 3px 10px rgba(2,132,199,.18)}

/* ---------- Responsive -----------*/
@media (max-width: 768px){
  .variations_form .mah24v5-items{grid-template-columns:repeat(2,1fr);grid-gap:10px}
  .variations_form .mah24v5-item .card{min-height:80px;padding:12px;border-radius:14px}
  .variations_form .sale-ribbon,.variations_form .badge.corner{font-size:10px;padding:3px 7px}
}
@media (max-width: 480px){
  .variations_form .mah24v5-items{grid-template-columns:repeat(2,1fr);grid-gap:8px}
  .variations_form .mah24v5-item .card{min-height:58px;padding:6px;border-radius:12px}
  .variations_form .mah24v5-item .name{font-size:12.5px}
  .variations_form .sale-ribbon,.variations_form .badge.corner{font-size:9.5px;padding:3px 6px;top:-8px;left:-8px;right:-8px}
  .variations_form .mah24v5-clear{padding:6px 10px;font-size:12px}
}
@media (max-width: 360px){
  .variations_form .mah24v5-items{grid-template-columns:repeat(1,1fr)}
}

/* v5.2.0 fixes */
.variations_form .sale-ribbon,
.variations_form .badge.corner{
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  direction: rtl !important;
  display: inline-block !important;
  max-width: none !important;
}
/* tighter mobile cards if very small width */
@media (max-width: 420px){
  .variations_form .mah24v5-items{grid-template-columns:repeat(2,1fr);grid-gap:4px}
  .variations_form .mah24v5-item .card{min-height:64px;padding:9px 10px}
  .variations_form .mah24v5-item .name{font-size:12px}
}


/* v5.2.1 visibility control */
.variations_form .sale-ribbon.is-hidden,
.variations_form .badge-recommend.is-hidden{ display:none !important; }

/* ensure titles chip keeps its own style, not confused with badges */
.variations_form .mah24v5-title .guide{ background: var(--m24-chip); color: var(--m24-sky-600); }

/* tiny mobiles */
@media (max-width: 400px){
  .variations_form .mah24v5-items{ grid-template-columns:repeat(2,1fr); grid-gap:4px; }
  .variations_form .mah24v5-item .card{ min-height:62px; padding:8px 9px; }
  .variations_form .mah24v5-item .name{ font-size:11.5px; }
}

/* v5.3.0 — polish discount badge + guided flow pulses */
.variations_form .sale-ribbon,
.variations_form .badge.corner{
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  direction: rtl !important;
  display: inline-block !important;
  text-transform: none !important;
  font-variant-numeric: normal !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  font-family: inherit !important;
}
.mah24v5-pulse{
  animation: m24pulse 1.2s ease-out 0s 1;
  position: relative;
}
@keyframes m24pulse{
  0%{ box-shadow: 0 0 0 0 rgba(14,165,233,.45); }
  100%{ box-shadow: 0 0 0 10px rgba(14,165,233,0); }
}

/* v5.5.0 sections spacing */
.variations_form .mah24v5-group{ margin-bottom: 12px; }
.variations_form .mah24v5-addons .mah24v5-addons-slot,
.variations_form .mah24v5-qty .mah24v5-qty-slot{ padding:8px 0 }
.mah24v5-pulse{ animation: m24pulse 1.0s ease-out 0s 1; }
@keyframes m24pulse{ 0%{ box-shadow:0 0 0 0 rgba(14,165,233,.45);} 100%{ box-shadow:0 0 0 10px rgba(14,165,233,0);} }

/* v5.5.1 – hide 'پیشنهاد ما' badge completely */
.mah24v5-grade .badge.rec,
.mah24v5-grade .corner-badge{ display:none !important; }


/* v5.5.2.4 – UI polish (smaller cards, better contrast, qty fix) */
.variations_form .mah24v5-item .card{ background: #fdfefe; }
.variations_form .mah24v5-item .card:hover{ background:#f7fbff; }
.variations_form .mah24v5-item.is-selected .card{ background: var(--m24-chip); border-color: var(--m24-sky-600)!important; }

/* Quantity input overflow fix */
.mah24v5-qty input[type="number"],
.mah24v5-qty input.qty {
  max-width: 140px;
  width: 100%;
  box-sizing: border-box;
}

/* Make action buttons a bit smaller too (clear button) */
.variations_form .mah24v5-clear{
  padding:6px 10px !important;
  border-radius:10px !important;
  font-size: 12px !important;
}


/* v5.5.2.5 – more robust qty & layout guards */
.mah24v5 * { box-sizing: border-box; }
.variations_form .mah24v5-item .card{ padding:6px !important; min-height:58px !important; }
.variations_form .mah24v5-items{ grid-gap:10px !important; gap:10px !important; }
.mah24v5-qty .quantity, .mah24v5-qty .qty, .mah24v5-qty input[type="number"]{
  max-width: 160px !important; width: 100% !important; min-width: 0 !important;
}
.mah24v5-qty { overflow: hidden; }


/* v5.5.2.6 – smaller buttons/cards */
.variations_form .mah24v5-item .card{
  padding:6px !important;
  min-height:58px !important;
}
.variations_form .mah24v5-clear{
  padding:4px 8px !important;
  font-size:11px !important;
  border-radius:8px !important;
}


/* v5.5.2.6 – tighter buttons */
.variations_form .mah24v5-item .card{ padding:6px !important; min-height:58px !important; }
.variations_form .mah24v5-clear{ padding:4px 8px !important; font-size:11px !important; border-radius:10px !important; }


/* v5.5.2.7 – smaller variant selection buttons (company/grade) */
.variations_form .mah24v5-company .mah24v5-item .card,
.variations_form .mah24v5-grade .mah24v5-item .card {
  padding:4px 6px !important;
  min-height:46px !important;
  font-size:13px !important;
}


/* v5.5.2.8 – larger text inside variable buttons */
.variations_form .mah24v5-company .mah24v5-item .card,
.variations_form .mah24v5-grade .mah24v5-item .card {
  font-size:15px !important;
  font-weight:500;
}


/* v5.5.2.9 – soft red highlight, better mobile spacing, polished discounts */

/* 1) Replace blue focus/hover/pulse with soft red */
.variations_form .mah24v5-item .card:hover{
  border-color: rgba(239,68,68,.45) !important; /* soft red */
  background:#fffafa !important;
}
.variations_form .mah24v5-item .card:focus{
  box-shadow: 0 0 0 3px rgba(239,68,68,.28) !important;
  border-color: #ef4444 !important;
}
.variations_form .mah24v5-item.is-selected .card{
  box-shadow: 0 0 0 3px rgba(239,68,68,.22) !important;
  border-color: #ef4444 !important;
}
/* Pulse ring color when jumping to next step */
@keyframes m24pulse{ 0%{ box-shadow:0 0 0 0 rgba(239,68,68,.35);} 100%{ box-shadow:0 0 0 10px rgba(239,68,68,0);} }
.mah24v5-pulse{ animation: m24pulse 0.9s ease-out 0s 1 !important; }

/* 2) Mobile spacing between steps (titles & groups) */
.variations_form .mah24v5-group + .mah24v5-group{ margin-top: 12px !important; }
@media (max-width: 560px){
  .variations_form .mah24v5-title{ margin: 10px 0 8px !important; }
  .variations_form .mah24v5-group{ margin-bottom: 16px !important; }
  .variations_form .mah24v5-group + .mah24v5-group{ margin-top: 14px !important; }
}

/* 3) Discount ribbon/tags: clearer, compact, red theme */
.variations_form .sale-ribbon{
  background: #fee2e2 !important;     /* light red */
  color: #b91c1c !important;           /* deep red text */
  border: 1px solid #fecaca !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.10) !important;
}
.variations_form .sale-ribbon .pct{ font-weight: 900 !important; }


/* v5.5.2.10 – more space between variable buttons and guide texts */
.variations_form .mah24v5-guide{
  margin-top: 10px !important;
}

/* v5.5.2.11 – spacing & mobile discount polish */
/* Increase space between guide text and the buttons above it */
.variations_form .mah24v5-title .guide{
  margin-top: 12px !important;
  align-self: flex-start;
}

/* Mobile: ensure sale ribbon is visible and compact */
@media (max-width: 560px){
  .variations_form .mah24v5-item .card{ padding-top: 10px !important; }
  .variations_form .sale-ribbon{ font-size: 11px !important; padding: 2px 6px !important; top: -6px !important; left: -6px !important; }
}


/* v5.5.2.12 – robust mobile discount ribbon fix */

/* Ensure ribbon isn't clipped by rounded corners */
.variations_form .mah24v5-item,
.variations_form .mah24v5-item .card{ overflow: visible !important; }

/* Base ribbon look (desktop stays cornered) */
.variations_form .corner-sale-slot{ position:absolute; top:0; left:0; pointer-events:none; z-index: 2; }
.variations_form .sale-ribbon{ position:absolute; top:-8px; left:-8px; white-space:nowrap; z-index:3; }

/* Mobile: convert corner ribbon to inline chip above name */
@media (max-width: 560px){
  .variations_form .corner-sale-slot{
    position: static !important;
    display: block !important;
    width: 100%;
    text-align: center;
    pointer-events: none;
    margin-bottom: 4px;
  }
  .variations_form .sale-ribbon{
    position: relative !important;
    top: 0 !important; left: 0 !important;
    display: inline-block !important;
    white-space: nowrap !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    transform: none !important;
  }
  /* Give the card a bit more breathing room for the chip */
  .variations_form .mah24v5-item .card{ padding-top: 10px !important; }
}


/* v5.5.2.13 – remove red side pulse & increase spacing */

/* Remove the red pulse ring that could look like a side bar */
.mah24v5-pulse{ animation: none !important; box-shadow: none !important; }

/* More space between guide texts and the above buttons/titles */
.variations_form .mah24v5-title .guide{ margin-top: 16px !important; }
.variations_form .mah24v5-group{ margin-bottom: 18px !important; }
.variations_form .mah24v5-group + .mah24v5-group{ margin-top: 16px !important; }

@media (max-width: 560px){
  .variations_form .mah24v5-title{ margin: 14px 0 10px !important; }
  .variations_form .mah24v5-group{ margin-bottom: 20px !important; }
  .variations_form .mah24v5-group + .mah24v5-group{ margin-top: 18px !important; }
}