/**
 * ── העגלה והצ׳קאאוט ────────────────────────────────────────────────────────
 * המגירה הצפה, שורות הפריטים, שדה קוד ההנחה, הסיכום ודיאלוג פרטי המשלוח.
 * ⚠️ תלוי ב-`tokens.css` וב-`base.css`.
 *
 * ⭐ **למה מודול נפרד מ-`style.css`.** זו יחידה עצמאית: היא מופיעה רק
 * בדף החנות, יש לה גבול נקי (הכול תלוי ב-`#cart` וב-`#checkout`),
 * ⛔ והיא דחפה את `style.css` מעל תקרת 500 השורות.
 *
 * ⛔ **חוזה ה-DOM עם `shop.js` נשמר:** הסקריפט מייצר `.line`, `.qty`,
 * `.step`, `.sum` ו-`.coupon-msg`, ומחפש את המזהים `#cart` `#totals`
 * `#toCheckout` `#cartFab` `#couponMsg` ו-`#checkoutErr`.
 */

/**
 * ⭐ **כפתור העגלה הצף.** ⚠️ `env(safe-area-inset-bottom)` חוזר כאן:
 * `body` כבר מרפד, אבל `position: fixed` יוצא מזרימת המסמך, ⛔ ובלי
 * הריפוד הזה הכפתור יושב מתחת לסרגל הבית באייפון.
 */
.cart-fab {
  position: fixed;
  inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom));
  inset-inline-end: var(--space-4);
  z-index: var(--z-overlay);
  /* 🔴 `--cta-*` ולא `--primary`, מאותה סיבה שב-`.btn-premium`. */
  background: linear-gradient(135deg, var(--cta-from), var(--cta-to));
  color: var(--cta-ink);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-5);
  font-weight: 700;
  font-size: var(--btn-cta-font);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.cart-fab[hidden] { display: none; }
.cart-fab span {
  background: var(--gold);
  color: var(--gold-foreground);
  border-radius: var(--radius-full);
  padding: 0 var(--space-2);
  font-variant-numeric: tabular-nums;
  min-width: 1.6em;
  text-align: center;
}

.cart {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(420px, 100%);
  z-index: var(--z-modal);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-lg);
  padding: calc(var(--space-6) + env(safe-area-inset-top)) var(--space-5)
           calc(var(--space-6) + env(safe-area-inset-bottom));
  overflow-y: auto;
  border-start-start-radius: var(--radius-3xl);
  border-end-start-radius: var(--radius-3xl);
}
.cart[hidden] { display: none; }
.cart h2 { font-size: var(--text-xl); margin-bottom: var(--space-5); }
.cart-close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + var(--space-3));
  inset-inline-start: var(--space-3);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--muted-foreground);
  border-radius: var(--radius-full);
}
.cart-close:hover { background: var(--accent); color: var(--foreground); }

/*
  ⚠️ חריג מכוון לכלל «אין קו»: שורות עגלה בלי מפריד נקראות כגוש אחד,
  ⛔ והקונה מאבדת איזו כמות שייכת לאיזה פריט.
*/
.line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--outline-variant);
  font-size: var(--text-sm);
}
.qty { display: flex; align-items: center; gap: var(--space-3); }
.qty span {
  min-width: 1.6em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.step {
  width: 40px; height: 40px;
  min-height: 40px; min-width: 40px;
  background: var(--surface-inset);
  color: var(--foreground);
  border-radius: var(--radius-md);
  font-size: var(--text-lg);
  line-height: 1;
  transition: background var(--dur-fast) ease;
}
.step:hover { background: var(--accent); }

.nudge {
  background: var(--gold);
  color: var(--gold-foreground);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  margin: var(--space-4) 0 0;
}
.nudge[hidden] { display: none; }

/* ── ⭐ שמירת המלאי של הקונה ── */
.hold {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  background: var(--gold);
  color: var(--gold-foreground);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0 0;
}
.hold[hidden] { display: none; }
.hold__text { margin: 0; font-size: var(--text-sm); font-weight: 600; flex: 1; min-width: 0; }
/* ⭐ `tabular-nums` כדי שהספרות לא ירקדו בכל שנייה. */
.hold__clock, .held-clock { font-variant-numeric: tabular-nums; }
.hold__extend {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  background: var(--surface-elevated);
  color: var(--foreground);
  border-radius: var(--radius-md);
  white-space: nowrap;
}
.hold__extend[hidden] { display: none; }

/* ── קוד הנחה ── */
.coupon { margin: var(--space-5) 0 0; }
.coupon label { color: var(--muted-foreground); margin-bottom: var(--space-2); }
/* ⭐ `gap` ולא `margin`: עובד זהה ב-RTL וב-LTR בלי כלל נפרד. */
.coupon-row { display: flex; gap: var(--space-2); }
.coupon-row input { flex: 1; min-width: 0; }
.coupon-row button { white-space: nowrap; flex: 0 0 auto; }
/*
  ⚠️ הצבע אינו הסימן היחיד: הטקסט עצמו אומר אם הקוד התקבל או נדחה.
  ⛔ הסתמכות על צבע בלבד נכשלת ב-WCAG 1.4.1 ואצל עיוורי צבעים.
*/
.coupon-msg { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.coupon-msg[hidden] { display: none; }
.coupon-msg.good { color: var(--primary); font-weight: 600; }
.coupon-msg.bad  { color: var(--destructive); font-weight: 600; }

.totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-5) 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--outline-variant);
}
.totals dt { color: var(--muted-foreground); font-size: var(--text-sm); margin: 0; }
.totals dd { margin: 0; text-align: start; font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.totals .sum {
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--foreground);
  font-family: var(--font-heading);
}

.checkout { width: 100%; }

/* ══ צ׳קאאוט ════════════════════════════════════════════════════════════ */

dialog form { padding: var(--space-6); }
dialog h2 { font-size: var(--text-xl); margin-bottom: var(--space-5); }
dialog label { margin-bottom: var(--space-4); color: var(--muted-foreground); }
dialog input, dialog textarea { margin-top: var(--space-2); }

.confirm-total {
  background: var(--surface-inset);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
}
.confirm-total strong {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}
/**
 * ⭐ **תיבת ההסכמה לתנאים.** ⚠️ יעד המגע הוא התווית כולה ולא רק הריבוע:
 * `label[for]` הופך את כל המשפט ללחיץ, וזה ההבדל בין החטאה להצלחה במובייל.
 * ⛔ והתיבה עצמה נשארת 44px לפי הכלל ב-`base.css`.
 */
.consent {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface-inset);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0 var(--space-2);
}
/* ⛔ `width:auto` דורס את ה-100% של שדות הטופס. תיבה אינה שדה טקסט. */
.consent input {
  width: auto;
  min-width: auto;
  flex: 0 0 auto;
  accent-color: var(--primary);
  /* ⭐ ריבוע גדול יותר מברירת המחדל. ⚠️ 44px היה ענק, 22px הוא איזון. */
  inline-size: 22px;
  block-size: 22px;
  min-height: 22px;
}
.consent label {
  margin: 0;
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  /*
    ⛔ **`--foreground` ולא `--muted-foreground`.** ⚠️ נמדד: מתוך
    `dialog label` הוא ירש את הצבע המעומעם, וזה נתן **4.50:1** בדיוק,
    על הסף. ⭐ משפט שהחוק דורש שייקרא לא נמסר בניגודיות גבולית.
  */
  color: var(--foreground);
  /* ⭐ שטח מגע אנכי מלא בלי להגדיל את הריבוע. */
  padding-block: var(--space-2);
}
/* ⚠️ הדגשה כשהדפדפן חוסם את השליחה, כדי שהעין תמצא את הסיבה. */
.consent input:invalid { outline: 2px solid var(--destructive); outline-offset: 3px; }

.legal { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.6; }
.legal a { font-weight: 600; }

.actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.actions .checkout { flex: 1; }

/* ══ אימות הזכאות ═══════════════════════════════════════════════════════ */

/**
 * ⭐ **שתי הלשוניות.** ⛔ הן כפתורים אמיתיים ולא `div` עם `onclick`:
 * ⚠️ כפתור מגיע במקלדת, נקרא כ«לחצן» בקורא מסך, ומקבל את יעד המגע של 44
 * פיקסלים מ-`.btn` בלי שנצטרך לחזור עליו.
 */
.elig-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.elig-tabs .btn { flex: 1; }

/**
 * ⛔ **הלשונית הפעילה מסומנת גם בלי צבע.** ⚠️ הסתמכות על צבע בלבד נכשלת
 * ב-WCAG 1.4.1, ⭐ ולכן המשקל והמשטח זזים יחד עם ה-`aria-selected`,
 * שהוא גם מה שקורא המסך מכריז.
 */
.elig-tabs [aria-selected="true"] {
  background: var(--surface-elevated);
  color: var(--foreground);
  font-weight: 700;
}

/**
 * ⭐ **בורר המסלול.** ⛔ בלי מסגרת שמגדירה מקטע: המשטח הוא מה שמגדיר אותו.
 * ⚠️ `fieldset` נשאר כי הוא מה שקושר את שתי האפשרויות לכותרת אחת בקורא מסך.
 */
.elig-track {
  border: 0;
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--surface-inset);
  border-radius: var(--radius-lg);
}
.elig-track legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
/**
 * ⛔ **התווית היא שורה שלמה ולא טקסט צמוד לעיגול.** ⚠️ יעד מגע של 44
 * פיקסלים, ובלעדיו הבחירה במסלול היא החטאה חוזרת במובייל.
 */
.elig-track label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  margin: 0;
  color: var(--foreground);
  cursor: pointer;
}
.elig-track input { margin: 0; inline-size: 20px; block-size: 20px; accent-color: var(--primary); }

/* ⭐ שורת הקוד נפתחת רק אחרי שנשלח, ולכן היא צריכה מרווח משלה. */
#eligCodeRow { margin-top: var(--space-5); }

/**
 * ⚠️ **הקוד עצמו: חד-רווח ומרווח.** ⭐ שש ספרות שמועתקות מהמייל נקראות
 * הרבה יותר טוב כשהן אינן נדבקות זו לזו.
 */
#eligCode {
  font-family: "SF Mono", ui-monospace, "Courier New", monospace;
  font-size: var(--text-lg);
  letter-spacing: 4px;
}

/**
 * ⛔ **שדה הקובץ מקבל יעד מגע מפורש.** ⚠️ ברירת המחדל של הדפדפן נמוכה
 * מ-44 פיקסלים ברוב הפלטפורמות, וזה פקד שאי אפשר לפספס בו.
 */
#eligFile { min-height: 44px; padding: var(--space-3); }

/* ══ מובייל ═════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .cart {
    width: 100%;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
  /* ⭐ הכפתור נפרש לרוחב במובייל: יעד גדול יותר, ופחות החטאות. */
  .cart-fab { inset-inline: var(--space-4); }
}