/* ‎tickets — חלון הראווה.
 *
 * **כל צבע, מידה ופונט מגיעים מ-tokens.css.** ערך שנכתב כאן ישירות הוא
 * הערך שיישכח כשמשנים את הערכה, והוא זה שייראה שבור.
 *
 * ‎tokens.css נטען לפני הקובץ הזה בתבנית — לא ב-@import, שהוא בקשה
 * שנייה סדרתית ואסור לפי חוק ברזל 10 ממילא.
 */

/* ═══ פריסה ═════════════════════════════════════════════════════════ */

.page { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; max-width: 62rem; margin: 0 auto;
       padding: var(--s-5) var(--s-4) var(--s-8); }

/* מסך רכישה מקבל רוחב צר יותר — עמודת קריאה, לא לוח */
main.narrow { max-width: 44rem; }

.top {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: var(--s-3) var(--s-4);
}
.top-inner {
  max-width: 62rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
}
.brand {
  font-size: var(--t-md); font-weight: var(--w-semibold);
  color: var(--ink); text-decoration: none;
}
.top nav a {
  min-height: var(--touch); display: inline-flex; align-items: center;
  font-size: var(--t-sm); text-decoration: none;
}

.seller {
  border-top: 1px solid var(--line); background: var(--surface);
  padding: var(--s-5) var(--s-4) var(--s-6);
}
.seller-inner { max-width: 62rem; margin: 0 auto; color: var(--muted);
                font-size: var(--t-sm); display: flex; flex-direction: column; gap: var(--s-1); }
.seller-line { color: var(--ink); }
.fine { color: var(--muted); font-size: var(--t-xs); }
.meta { color: var(--muted); font-size: var(--t-sm); }
.empty { color: var(--muted); padding: var(--s-6) 0; }
.prose { max-width: 38rem; }
.prose p { margin: 0 0 var(--s-3); }

/* ═══ הודעות ════════════════════════════════════════════════════════ */

.messages { max-width: 62rem; margin: var(--s-4) auto 0; padding: 0 var(--s-4);
            list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.msg { padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
       background: var(--surface); border-inline-start: 3px solid var(--muted);
       font-size: var(--t-sm); }
.msg.error { border-inline-start-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.msg.success { border-inline-start-color: var(--accent); color: var(--accent); }

/* ═══ קטלוג ═════════════════════════════════════════════════════════
 * סדר: פוסטר 3:4 · שם · תאריך · "החל מ־" · תווית מלאי
 */

.cards {
  list-style: none; padding: 0; margin: var(--s-5) 0 0;
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
/* הכרטיסייה כולה לחיצה, בלי לעטוף את הכל ב-<a> ולשבור את הסמנטיקה */
.card a.card-link { text-decoration: none; color: inherit; display: block; }
.card a.card-link:focus-visible { outline-offset: -3px; }

/* ★ 3:4 לאורך. ‎object-fit: contain ולא cover — במגזר הזה כל המידע
 * כתוב **בתוך** התמונה, וחיתוך מוחק שורות טקסט. */
.poster {
  aspect-ratio: var(--poster-ratio);
  background: var(--poster-bg);
  display: block; width: 100%;
  object-fit: var(--poster-fit);
}
/* תמונה לרוחב: לא כופים עליה 3:4 — מוצגת מלאה ביחס שלה */
.poster.landscape { aspect-ratio: 16 / 9; }

/* ★ ללא פוסטר — כרטיסייה טיפוגרפית, לא ריבוע אפור.
 * ריבוע אפור נראה כמו תקלה; טיפוגרפיה נראית כמו החלטה. */
.poster-none {
  aspect-ratio: var(--poster-ratio);
  background: var(--accent-soft); color: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--s-2); padding: var(--s-5); text-align: center;
}
.poster-none b { font-size: var(--t-md); font-weight: var(--w-semibold);
                 line-height: var(--lh-tight); }
.poster-none span { font-size: var(--t-sm); color: var(--muted); }

.card-body { padding: var(--s-3) var(--s-4) var(--s-4);
             display: flex; flex-direction: column; gap: var(--s-1); flex: 1; }
.card-title { font-size: var(--t-md); font-weight: var(--w-semibold);
              line-height: var(--lh-tight); }
.card-foot { margin-top: auto; padding-top: var(--s-3);
             display: flex; align-items: center; justify-content: space-between;
             gap: var(--s-2); flex-wrap: wrap; }
.price { font-weight: var(--w-medium); }

/* ═══ תוויות ════════════════════════════════════════════════════════ */

.tag { display: inline-block; font-size: var(--t-xs); font-weight: var(--w-medium);
       padding: 2px 0.55rem; border-radius: var(--r-pill); white-space: nowrap; }
/* ★ כתום **רק** כשנשארו מעט. תווית שתמיד שם מפסיקה להיות סימן,
 * והקונה מפסיק להאמין לה — ואז היא לא עובדת גם כשהיא נכונה. */
.tag-low { background: var(--warn-bg); color: var(--warn); }
.tag-soft { background: var(--accent-soft); color: var(--accent); }
.tag-out { background: var(--bg); color: var(--muted); }

/* ═══ דף אירוע ══════════════════════════════════════════════════════
 * סדר: פוסטר מלא ← כותרת ותאריך ← טקסט ← קישור ← אזורים ← פס דביק
 */

.event-poster { border-radius: var(--r-lg); overflow: hidden;
                background: var(--poster-bg); margin-bottom: var(--s-5);
                box-shadow: var(--shadow-card); }
.event-poster img { display: block; width: 100%; height: auto; }
/* בטלפון הפוסטר **הוא** התוכן, ולכן הוא גדול — אבל לא מסך שלם:
 * תקרה של 70vh משאירה רמז שיש המשך מתחת. */
.event-poster.portrait img { max-height: 70vh; object-fit: contain; margin-inline: auto; }

.event-head { display: flex; flex-direction: column; gap: var(--s-2);
              margin-bottom: var(--s-5); }
.event-tags { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ★ בדסקטופ — שתי עמודות, לא פוסטר שבולע את המסך.
 *
 * במסך רחב הקונה ראה תמונה בלבד ונדרש לגלול כדי לדעת מה זה. תקרת
 * גובה לבדה לא פותרת: הפוסטר עדיין תופס את מלוא רוחב העמודה ודוחף
 * הכל למטה. הפתרון הוא **פריסה**, לא מידה — פוסטר בעמודה צדדית,
 * וכותרת, תאריך, טקסט ותחילת המופעים לצידו בלי גלילה.
 *
 * בטלפון נשאר מוערם, והפוסטר ראשון. שם הוא באמת התוכן. */
@media (min-width: 56rem) {
  main.narrow.event-page { max-width: 62rem; }
  .event-layout {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
  }
  /* ‎sticky: הפוסטר נשאר בעין בזמן שקוראים את המופעים לצידו */
  .event-layout > .event-poster {
    position: sticky; top: var(--s-4); margin-bottom: 0;
  }
  .event-poster.portrait img { max-height: none; }
}

/* ★ קישור, לא תגית.
 *
 * הוא היה מעוצב זהה ל-.tag-soft — אותו רקע, אותה פינה — ולכן
 * "מידע לצרכן" נראה כמו "מוזיקה והופעות". אחד קטגוריה, השני פעולה
 * שהקונה יכול לבחור. עכשיו: טקסט מבטא מודגש עם קו תחתון, וחץ שאומר
 * שהוא יוצא מהאתר. בלי רקע ובלי מסגרת — כדי שלא יתחרה בכפתור הרכישה. */
.link-out {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--touch);          /* מטרת מגע, גם בלי רקע */
  color: var(--accent); font-weight: var(--w-medium);
  text-decoration: underline; text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  margin: var(--s-2) 0 var(--s-5);
}
.link-out::after {
  content: '↗'; font-size: 0.85em; text-decoration: none;
  /* ‎inline-block כדי שהקו התחתון לא ימשך מתחת לחץ */
  display: inline-block;
}
.link-out:hover { text-decoration-thickness: 2px; }

/* ═══ מופעים וכרטיסים ═══════════════════════════════════════════════ */

.shows { list-style: none; padding: 0; margin: 0;
         display: flex; flex-direction: column; gap: var(--s-3); }
.show-row {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.show-row a { min-height: var(--touch); display: inline-flex; align-items: center; }
.show-when { font-weight: var(--w-medium); }

.sections { display: flex; flex-direction: column; gap: var(--s-4); margin: var(--s-4) 0; }
.section-block { background: var(--surface); border: 1px solid var(--line);
                 border-radius: var(--r-md); overflow: hidden; }
.section-head { padding: var(--s-3) var(--s-4); background: var(--bg);
                border-bottom: 1px solid var(--line);
                display: flex; align-items: center; justify-content: space-between;
                gap: var(--s-2); flex-wrap: wrap; }
.section-name { font-weight: var(--w-semibold); }

.ticket-row { padding: var(--s-3) var(--s-4); display: flex; align-items: center;
              gap: var(--s-3); flex-wrap: wrap;
              border-bottom: 1px solid var(--line); }
.ticket-row:last-child { border-bottom: 0; }
.ticket-name { flex: 1 1 9rem; }
.ticket-price { font-weight: var(--w-medium); }
.ticket-qty { margin-inline-start: auto; }

/* ═══ טפסים ═════════════════════════════════════════════════════════ */

label { display: block; font-size: var(--t-sm); }
label > span { display: block; margin-bottom: var(--s-1); }

input, select, button {
  font: inherit; color: var(--ink);
  border-radius: var(--r-md);
  background: var(--surface);
}
input, select {
  min-height: var(--touch); padding: 0 var(--s-3);
  /* ★ ‎--line-field ולא ‎--line: WCAG 1.4.11 דורש 3:1 לגבול שמזהה
   * רכיב, ו-‎--line נותן 1.24 על לבן. שדה עם גבול חלש הוא שדה
   * שמשתמש בעל ראייה חלשה לא מוצא. */
  border: 1px solid var(--line-field);
  width: 100%; max-width: 22rem;
}
input[type=number] { width: 4.75rem; min-width: 4.75rem; text-align: center; }

fieldset { border: 1px solid var(--line); border-radius: var(--r-md);
           padding: var(--s-4); margin: var(--s-5) 0; background: var(--surface);
           display: flex; flex-direction: column; gap: var(--s-3); }
legend { font-weight: var(--w-semibold); padding: 0 var(--s-2); }

.btn { min-height: var(--touch); display: inline-flex; align-items: center;
       justify-content: center; padding: 0 var(--s-5); border-radius: var(--r-md);
       font-weight: var(--w-medium); border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--line-field); }
.btn-row { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ═══ פס סיכום דביק ═════════════════════════════════════════════════
 * בטלפון הוא מה שמונע גלילה חזרה למעלה כדי למצוא את הכפתור.
 */
.summary-bar {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: var(--shadow-stuck);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-5) calc(var(--s-4) * -1) 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.summary-bar .btn { flex: 0 0 auto; }

/* ═══ טבלאות (הזמנה, תשלום) ═════════════════════════════════════════ */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--surface);
        border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
th, td { text-align: right; padding: var(--s-2) var(--s-3);
         border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
thead th { background: var(--bg); font-weight: var(--w-semibold); font-size: var(--t-xs); }
tfoot th { background: var(--bg); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: left; direction: ltr; }

/* ═══ סטטוס הזמנה ═══════════════════════════════════════════════════ */

.status { padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
          background: var(--surface); border-inline-start: 3px solid var(--muted);
          margin-bottom: var(--s-4); }
.status-paid { border-inline-start-color: var(--accent); color: var(--accent); }
.status-pending { border-inline-start-color: var(--warn);
                  background: var(--warn-bg); color: var(--warn); }

.mock-notice { background: var(--warn-bg); color: var(--warn);
               border: 1px dashed var(--warn); border-radius: var(--r-md);
               padding: var(--s-3) var(--s-4); margin: var(--s-4) 0;
               font-size: var(--t-sm); }