/* =========================================================================
   بای‌بلیط — تمِ روشن + شیشه‌ای، با مشکی به‌عنوان رنگ مکمل
   (سبز #124932 فقط به‌عنوان اکسنت؛ ساختار روی مشکی/خنثی)
   ========================================================================= */
:root {
    --brand:#124932; --brand-2:#0d3826; --brand-soft:#eaf3ee; --brand-tint:#f2f8f5;
    --accent:#1f9d5f; --gold:#c99a2e; --hot:#e0483d;
    --ink-dark:#14181b; --ink-dark-2:#0e1214;
    --bg:#eef1f0; --card:#ffffff; --ink:#17211c; --ink-2:#3a4a42; --muted:#7c8a83; --line:#e6ebe8;
    --r:16px; --r-sm:12px; --maxw:1180px;
    --glass:rgba(255,255,255,.62); --glass-strong:rgba(255,255,255,.8);
    --glass-brd:rgba(255,255,255,.65); --blur:blur(16px) saturate(1.4);
    /* نگاشتِ متغیرهای «متن روی تیره»ی قدیمی به مقادیرِ روشن (صفحات خرید) */
    --on-dark:#17211c; --on-dark-soft:#3a4a42; --on-dark-dim:#7c8a83;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); min-height:100vh;
    font-family:'Pinar',Tahoma,Arial,sans-serif; -webkit-text-size-adjust:100%;
    background:
        radial-gradient(1100px 620px at 100% -8%, rgba(18,73,50,.10), transparent 60%),
        radial-gradient(900px 520px at -5% 6%, rgba(20,24,27,.08), transparent 55%),
        var(--bg);
    background-attachment:fixed; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }

/* --- هدر شیشه‌ای --- */
.site-header { position:sticky; top:0; z-index:40;
    background:var(--glass-strong); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
    border-bottom:1px solid var(--glass-brd); box-shadow:0 4px 22px rgba(20,24,27,.06); }
.header-inner { max-width:var(--maxw); margin:0 auto; padding:11px 18px; display:flex; align-items:center; gap:14px;
    position:relative; z-index:2; }
.logo { display:flex; align-items:center; gap:11px; flex-shrink:0; }
.logo-mark { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--ink-dark),#26302b);
    display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;
    box-shadow:0 6px 16px rgba(20,24,27,.22); }
.logo-mark svg { width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.7; }
.logo-mark svg path:first-child { stroke:var(--accent); }
.logo-text h1 { font-size:17px; font-weight:800; margin:0; color:var(--ink); line-height:1.2; }
.logo-text span { font-size:11px; color:var(--muted); }

.nav { display:flex; align-items:center; gap:4px; margin-inline-start:8px; }
.nav a { font-size:14px; font-weight:700; color:var(--ink-2); padding:8px 12px; border-radius:10px; transition:.15s; }
.nav a:hover, .nav a.active { color:var(--ink); background:rgba(20,24,27,.06); }

.header-actions { margin-inline-start:auto; display:flex; align-items:center; gap:8px; }
.icon-btn { width:42px; height:42px; border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.6);
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-2); transition:.15s; flex:none; }
.icon-btn:hover { border-color:var(--ink-dark); color:var(--ink); }
.icon-btn svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; }
.menu-btn { display:none; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer;
    font-family:inherit; font-weight:800; font-size:14px; padding:10px 16px; border-radius:var(--r-sm);
    white-space:nowrap; transition:transform .12s, box-shadow .12s, background .12s; }
.btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; flex:none; }
.btn-dark { background:var(--ink-dark); color:#fff; box-shadow:0 6px 16px rgba(20,24,27,.22); }
.btn-dark:hover { transform:translateY(-1px); background:var(--ink-dark-2); }
.btn-primary { background:var(--brand); color:#fff; box-shadow:0 6px 16px rgba(18,73,50,.20); }
.btn-primary:hover { transform:translateY(-1px); background:var(--brand-2); }
.btn-primary:disabled { background:#c3ccc7; color:#fff; cursor:not-allowed; box-shadow:none; transform:none; }
.btn-outline { background:rgba(255,255,255,.5); color:var(--ink); border:1.5px solid var(--ink-dark); }
.btn-outline:hover { background:var(--ink-dark); color:#fff; }
.btn-block { display:flex; width:100%; }

/* --- منوی حساب کاربری (پس از ورود) --- */
.account { position:relative; }
.account-btn { display:inline-flex; align-items:center; gap:7px; cursor:pointer; }
.account-menu { position:absolute; inset-inline-end:0; top:calc(100% + 8px); min-width:180px; z-index:60;
    background:var(--glass-strong); backdrop-filter:var(--blur); border:1px solid var(--glass-brd);
    border-radius:12px; padding:6px; box-shadow:0 16px 40px rgba(0,0,0,.14); display:none; }
.account-menu.open { display:block; }
.account-menu a, .account-menu button { display:flex; align-items:center; gap:8px; width:100%; text-align:start;
    font-family:inherit; font-size:13.5px; font-weight:700; color:var(--ink-2); background:none; border:none;
    padding:9px 11px; border-radius:9px; cursor:pointer; }
.account-menu a:hover, .account-menu button:hover { background:rgba(20,24,27,.06); color:var(--ink); }

/* --- ردیف دوم: دسته‌بندی (راست) + دراپ‌داون شهر (چپ) — روشن --- */
.catbar { background:#fff; border-bottom:1px solid var(--line); box-shadow:0 2px 10px rgba(20,24,27,.03); }
.catbar-inner { max-width:var(--maxw); margin:0 auto; padding:0 18px; display:flex; align-items:stretch; gap:10px; }
.cats { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; flex:1 1 auto; min-width:0; }
.cats::-webkit-scrollbar { display:none; }
.cat { white-space:nowrap; color:var(--ink-2); font-size:13.5px; font-weight:700;
    padding:13px 15px; border-bottom:3px solid transparent; transition:.15s; }
.cat:hover { color:var(--ink); }
.cat.active { color:var(--ink); border-bottom-color:var(--brand); }

.citydrop { flex:none; display:flex; align-items:center; position:relative; }
.citydrop::before { content:""; position:absolute; inset-inline-start:12px; top:50%;
    width:15px; height:15px; transform:translateY(-50%); pointer-events:none; z-index:1;
    background:no-repeat center/contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23124932' stroke-width='1.8'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.citydrop::after { content:""; position:absolute; inset-inline-end:12px; top:50%;
    width:10px; height:10px; transform:translateY(-60%) rotate(45deg); pointer-events:none;
    border-inline-end:2px solid var(--muted); border-bottom:2px solid var(--muted); }
.citydrop select { appearance:none; -webkit-appearance:none; -moz-appearance:none;
    font-family:inherit; font-size:13px; font-weight:700; color:var(--ink); cursor:pointer;
    background:#fff; border:1px solid var(--line); border-radius:20px;
    padding:8px 34px 8px 34px; margin:7px 0; max-width:180px; transition:.15s; }
.citydrop select:hover { border-color:var(--brand); }
.citydrop select option { color:var(--ink); background:#fff; }

/* --- بدنه --- */
.container { max-width:var(--maxw); margin:0 auto; padding:22px 18px 60px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:26px 2px 16px; }
.section-head h2 { font-size:19px; font-weight:800; margin:0; color:var(--ink); }
.section-head .bar { flex:1; height:1px; background:var(--line); }

/* --- گرید: دسکتاپ ۴ ستون، تبلت ۳، موبایل ۲ --- */
.grid { display:grid; gap:16px; grid-template-columns:repeat(4, 1fr); }

/* کارتِ روشنِ فشرده (شبیه بلیطِ نمونه، دکمهٔ مشکی به‌عنوان اکسنت) */
.card { position:relative; display:flex; flex-direction:column; background:var(--card); color:var(--ink);
    border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:0 8px 24px rgba(20,24,27,.08);
    transition:transform .16s, box-shadow .16s; }
.card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(20,24,27,.16); border-color:#d7ded9; }
.card-poster { aspect-ratio:4/3; background:var(--brand-tint); overflow:hidden; position:relative; }
.card-poster img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.card:hover .card-poster img { transform:scale(1.05); }
.card-poster .ph { width:100%; height:100%; background:linear-gradient(150deg,var(--brand),#1f7a55); }

.card-tag { position:absolute; top:9px; inset-inline-end:9px; z-index:2; background:rgba(20,24,27,.72); color:#fff;
    font-size:10.5px; font-weight:800; padding:4px 9px; border-radius:20px; backdrop-filter:blur(4px); }
.presale-badge { position:absolute; top:9px; inset-inline-end:9px; z-index:2; background:var(--hot); color:#fff;
    font-size:10.5px; font-weight:800; padding:4px 9px; border-radius:20px; box-shadow:0 3px 10px rgba(224,72,61,.4); }

.card-body { padding:12px 13px 13px; display:flex; flex-direction:column; flex:1; }
.card-title { font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.6; margin:0 0 9px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.9em; }
.card-row { display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-2); margin-top:4px; }
.card-row svg { flex:0 0 14px; width:14px; height:14px; stroke:var(--brand); fill:none; stroke-width:1.8; }
.card-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-cta { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:12px; width:100%;
    font-size:12.5px; font-weight:800; color:#fff; background:var(--ink-dark);
    border:1px solid var(--ink-dark); border-radius:10px; padding:10px; transition:.15s; }
.card:hover .card-cta { background:var(--brand); border-color:var(--brand); }
.card-cta svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; }

/* حالتِ پیش‌فروش (شمارشگرِ معکوس، روی کارتِ روشن) */
.card-countdown { margin-top:12px; padding-top:11px; border-top:1px dashed var(--line);
    display:flex; align-items:center; gap:7px; }
.cd-label { font-size:10.5px; font-weight:800; color:var(--hot); flex:none; }
.cd-clock { display:flex; gap:3px; direction:ltr; margin-inline-start:auto; }
.cd-clock b { min-width:26px; text-align:center; background:var(--brand-soft); color:var(--brand);
    font-size:12px; font-weight:800; border-radius:7px; padding:3px 2px; font-variant-numeric:tabular-nums; }
.cd-clock b small { display:block; font-size:8px; font-weight:700; color:var(--muted); margin-top:1px; }

/* --- حالت خالی --- */
.empty { text-align:center; color:var(--muted); background:var(--glass); backdrop-filter:var(--blur);
    border:1px dashed var(--line); border-radius:var(--r); padding:48px 22px; font-size:14px; line-height:2; }

/* --- فوتر (روشن) --- */
.site-footer { background:#f4f7f5; color:var(--ink-2); border-top:1px solid var(--line); margin-top:40px; }
.footer-inner { max-width:var(--maxw); margin:0 auto; padding:38px 18px 20px;
    display:grid; gap:26px; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); }
.footer-col h4 { font-size:14px; font-weight:800; color:var(--ink); margin:0 0 14px; }
.footer-col a, .footer-col p { display:block; color:var(--ink-2); font-size:12.5px; line-height:2.2; margin:0; }
.footer-col a:hover { color:var(--brand); }
.footer-brand .logo-text h1 { color:var(--ink); } .footer-brand .logo-text span { color:var(--muted); }
.footer-social { display:flex; gap:10px; margin-top:12px; }
.footer-social a { width:38px; height:38px; border-radius:10px; background:var(--brand-soft);
    display:flex; align-items:center; justify-content:center; }
.footer-social svg { width:19px; height:19px; stroke:var(--brand); fill:none; stroke-width:1.7; }
.footer-bottom { border-top:1px solid var(--line); text-align:center; color:var(--muted); font-size:11.5px; padding:16px; }

/* --- پاپ‌آپ‌ها (شیشه‌ای) --- */
.modal { position:fixed; inset:0; z-index:70; display:none; align-items:flex-start; justify-content:center;
    background:rgba(14,18,20,.45); backdrop-filter:blur(4px); padding:12vh 18px 18px; }
.modal.open { display:flex; }
.modal-box { width:100%; max-width:560px; background:var(--glass-strong); backdrop-filter:var(--blur);
    border:1px solid var(--glass-brd); border-radius:var(--r); box-shadow:0 24px 60px rgba(0,0,0,.28);
    padding:16px; animation:pop .16s ease; }
@keyframes pop { from { transform:translateY(-8px); opacity:.6; } to { transform:none; opacity:1; } }
.search-field { display:flex; align-items:center; gap:10px; border:1.5px solid var(--ink-dark); border-radius:var(--r-sm);
    padding:12px 14px; background:rgba(255,255,255,.6); }
.search-field svg { width:20px; height:20px; stroke:var(--ink-dark); fill:none; stroke-width:1.8; flex:none; }
.search-field input { border:none; outline:none; font-family:inherit; font-size:16px; width:100%; color:var(--ink); background:transparent; }
.search-results { margin-top:12px; max-height:44vh; overflow:auto; }
.search-results a { display:flex; align-items:center; gap:11px; padding:10px; border-radius:10px; }
.search-results a:hover { background:rgba(20,24,27,.05); }
.search-results img, .search-results .sr-ph { width:44px; height:58px; border-radius:8px; object-fit:cover; flex:none; background:var(--brand-soft); }
.search-hint { color:var(--muted); font-size:12.5px; text-align:center; padding:18px; }

/* فرمِ ورود OTP */
.otp-head { text-align:center; margin-bottom:14px; }
.otp-head .ic { width:56px; height:56px; border-radius:50%; background:rgba(20,24,27,.08); display:flex;
    align-items:center; justify-content:center; margin:2px auto 12px; }
.otp-head .ic svg { width:28px; height:28px; stroke:var(--ink-dark); fill:none; stroke-width:1.7; }
.otp-head h3 { margin:0 0 6px; font-size:17px; color:var(--ink); }
.otp-head p { margin:0; color:var(--muted); font-size:13px; line-height:1.9; }
.field { display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:var(--r-sm);
    padding:12px 14px; background:rgba(255,255,255,.65); margin-bottom:12px; }
.field:focus-within { border-color:var(--ink-dark); }
.field input { border:none; outline:none; font-family:inherit; font-size:16px; width:100%; color:var(--ink); background:transparent; letter-spacing:.5px; }
.field input.otp-digits { text-align:center; letter-spacing:8px; font-weight:800; direction:ltr; }
.form-msg { font-size:12.5px; text-align:center; margin:0 0 10px; min-height:1em; }
.form-msg.err { color:var(--hot); }
.form-msg.ok { color:var(--brand); }
.form-alt { text-align:center; margin-top:12px; font-size:12.5px; color:var(--muted); }
.form-alt button { background:none; border:none; color:var(--ink-dark); font-family:inherit; font-weight:800; cursor:pointer; font-size:12.5px; }
.form-alt button:disabled { color:var(--muted); cursor:default; }

/* --- سفارش‌های من --- */
.orders { display:flex; flex-direction:column; gap:14px; }
.order-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px;
    display:flex; align-items:center; gap:14px; flex-wrap:wrap; box-shadow:0 6px 18px rgba(20,24,27,.06); }
.order-poster { width:56px; height:56px; border-radius:12px; object-fit:cover; background:var(--brand-soft); flex:none; }
.order-main { flex:1 1 200px; min-width:0; }
.order-main h3 { margin:0 0 5px; font-size:15px; font-weight:800; color:var(--ink); }
.order-meta { font-size:12px; color:var(--muted); line-height:1.9; }
.order-meta b { color:var(--ink-2); font-weight:700; }

/* =========================================================================
   پوستهٔ صفحاتِ خرید (روشن) — کلاس‌های مشترکِ checkout/thanks/tickets
   ========================================================================= */
/* ⚠️ نامِ `.stage` در صفحهٔ رویداد هم برای جعبهٔ کوچکِ «صحنه/پرده» استفاده می‌شود؛
   پس اینجا هیچ ارتفاعی تحمیل نکن (body خودش min-height:100vh دارد). */
.stage { position:relative; }
.backdrop, .veil { display:none; }
.wrap { position:relative; z-index:2; max-width:960px; margin:0 auto; padding:24px 18px 48px; }
.wrap.narrow { max-width:560px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; }
.brand { font-size:15px; font-weight:800; color:var(--brand); text-decoration:none; }
.brand .dot { color:var(--brand); }
.flash { background:#fdecec; color:#a3271c; border:1px solid #f4c9c4; border-radius:12px; padding:11px 14px; font-size:13px; }

/* =========================================================================
   ریسپانسیو
   ========================================================================= */
@media (max-width:980px) {
    .grid { grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:720px) {
    .menu-btn { display:flex; }
    /* منوی ناوبری روی موبایل، بالای همه (نه زیرِ ردیف دوم) */
    .nav { position:absolute; top:calc(100% + 8px); inset-inline-end:10px; flex-direction:column; align-items:stretch;
        gap:2px; background:var(--glass-strong); backdrop-filter:var(--blur); border:1px solid var(--glass-brd);
        border-radius:14px; padding:8px; min-width:190px; box-shadow:0 16px 40px rgba(0,0,0,.18);
        margin:0; display:none; z-index:80; }
    .nav.open { display:flex; }
    .header-inner { gap:8px; }
    .logo-text h1 { font-size:15px; }
    .logo-text span { display:none; }
    .logo-mark { width:38px; height:38px; border-radius:10px; }
    .header-actions .btn-label { display:none; }
    .header-actions .btn { padding:10px; width:42px; height:42px; }
    .btn svg { width:19px; height:19px; }
    .catbar-inner { padding:0 10px; }
    .citydrop select { max-width:135px; font-size:12px; padding:7px 30px; }
    .container { padding:16px 12px 48px; }
}
@media (max-width:640px) {
    .grid { grid-template-columns:repeat(2, 1fr); gap:12px; }
    .card-title { font-size:13.5px; }
}