/* =========================================================================
   دیزاین‌سیستم درکاپی — توکن‌ها و کامپوننت‌های مشترکِ همه‌ی صفحه‌های رزرو.
   ========================================================================= */

/* فونت‌ها داخل خود پروژه‌اند (public/assets/fonts) — هیچ CDN‌ای لازم نیست */
@font-face{
    font-family:'Peyda';
    src:url('fonts/peyda_medium.woff2') format('woff2'),
        url('fonts/peyda_medium.woff') format('woff');
    font-weight:400 500; font-style:normal; font-display:swap;
}
@font-face{
    font-family:'Peyda';
    src:url('fonts/PeydaWeb-Bold-1.woff2') format('woff2'),
        url('fonts/PeydaWeb-Bold-1.woff') format('woff');
    font-weight:600 800; font-style:normal; font-display:swap;
}
@font-face{
    font-family:'Vazirmatn';
    src:url('fonts/Vazirmatn-400.woff2') format('woff2');
    font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
    font-family:'Vazirmatn';
    src:url('fonts/Vazirmatn-500.woff2') format('woff2');
    font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
    font-family:'Vazirmatn';
    src:url('fonts/Vazirmatn-700.woff2') format('woff2');
    font-weight:600 800; font-style:normal; font-display:swap;
}

:root{
    --bg:#F6F7F8; --surface:#FFFFFF; --primary:#F4720B; --primary-hover:#DD6303; --primary-tint:#FFF3E8;
    --secondary:#2E5252; --secondary-deep:#24403F; --secondary-tint:#EAF1F1;
    --text-strong:#111827; --text:#374151; --text-muted:#6B7280; --border:#E7EAEC;
    --success:#16A34A; --success-tint:#E8F7EE; --warning:#F59E0B; --warning-tint:#FEF6E7;
    --error:#DC2626; --error-tint:#FDECEC;
    --wall:#C7CDD4;
    --r-8:8px; --r-12:12px; --r-16:16px; --r-24:24px;
    --shadow-sm:0 1px 2px rgba(17,24,39,.05),0 1px 4px rgba(17,24,39,.04);
    --shadow-md:0 4px 12px rgba(17,24,39,.07),0 2px 4px rgba(17,24,39,.04);
    --shadow-lg:0 16px 40px rgba(17,24,39,.12),0 4px 12px rgba(17,24,39,.06);
    --t-fast:200ms cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; font-family:'Peyda','Vazirmatn',Tahoma,sans-serif; direction:rtl; }
body{ margin:0; background:var(--bg); color:var(--text); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3,h4{ color:var(--text-strong); line-height:1.4; margin:0; }
a{ color:inherit; text-decoration:none; }

.container{ max-width:1200px; margin-inline:auto; padding-inline:24px; }
.wide{ max-width:1500px; margin-inline:auto; padding-inline:24px; }
@media (max-width:640px){ .container,.wide{ padding-inline:16px; } }

.icon{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.icon-sm{ width:16px; height:16px; }

/* ------------------------------------------------------------------ دکمه‌ها */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:var(--r-12);
    border:1.5px solid transparent; font-size:.875rem; font-weight:600; cursor:pointer; background:none; color:inherit;
    transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast); }
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-lg{ padding:16px 32px; font-size:1rem; border-radius:var(--r-16); }
.btn-sm{ padding:8px 14px; font-size:.8rem; border-radius:var(--r-8); }
.btn-block{ width:100%; }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 4px 14px rgba(244,114,11,.3); }
.btn-primary:hover:not(:disabled){ background:var(--primary-hover); box-shadow:0 6px 18px rgba(244,114,11,.38); }
.btn-outline{ background:var(--surface); color:var(--text-strong); border-color:var(--border); }
.btn-outline:hover:not(:disabled){ border-color:var(--primary); color:var(--primary); }
.btn-text{ background:none; color:var(--primary); }
.btn-text:hover{ color:var(--primary-hover); }
.btn-danger{ background:var(--error-tint); color:var(--error); border-color:#F5C6C6; }
.btn-danger:hover:not(:disabled){ background:var(--error); color:#fff; }

/* ------------------------------------------------------------------ فرم‌ها */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-16); box-shadow:var(--shadow-sm); }
.panel-pad{ padding:20px; }
.input,.select{ width:100%; padding:12px 16px; border:1.5px solid var(--border); border-radius:var(--r-12); background:var(--surface);
    color:var(--text-strong); font:inherit; transition:border-color var(--t-fast),box-shadow var(--t-fast); }
.input::placeholder{ color:var(--text-muted); }
.input:focus,.select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-tint); }
.input.is-invalid{ border-color:var(--error); }
.field{ display:flex; flex-direction:column; gap:8px; }
.field-label{ font-size:.875rem; font-weight:600; color:var(--text-strong); }
.field-error{ font-size:.75rem; font-weight:600; color:var(--error); }

/* ------------------------------------------------------------------ سربرگ */
.page-head{ background:linear-gradient(180deg,#FFF 0%,var(--bg) 100%); border-bottom:1px solid var(--border); padding-block:32px; }
.page-title{ font-size:2rem; }
@media (max-width:640px){ .page-title{ font-size:1.5rem; } }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:.875rem; color:var(--text-muted); flex-wrap:wrap; }
.breadcrumb [aria-current]{ color:var(--text-strong); font-weight:600; }
.badge{ display:inline-flex; align-items:center; gap:8px; padding:4px 12px; border-radius:999px; font-size:.875rem; font-weight:600; }
.badge-success{ background:var(--success-tint); color:var(--success); }
.badge-warning{ background:var(--warning-tint); color:#B45309; }
.badge-error{ background:var(--error-tint); color:var(--error); }
.badge-muted{ background:var(--bg); color:var(--text-muted); border:1px solid var(--border); }
.pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 0 rgba(22,163,74,.45); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)} 70%{box-shadow:0 0 0 7px rgba(22,163,74,0)} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0)} }

.alert{ border-radius:var(--r-12); padding:12px 16px; font-size:.875rem; margin-bottom:16px; border:1px solid transparent; }
.alert-error{ border-color:#F5C6C6; background:var(--error-tint); color:var(--error); }
.alert-success{ border-color:#BBE7CC; background:var(--success-tint); color:#15803D; }
.alert-info{ border-color:#FADCC0; background:var(--primary-tint); color:var(--primary-hover); }

/* --------------------------------------------------- خلاصه‌ی مبلغ / فاکتور */
.summary-lines{ display:flex; flex-direction:column; gap:12px; margin:0; }
.summary-line{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.875rem; color:var(--text-muted); }
.summary-line dd{ margin:0; color:var(--text-strong); font-weight:600; }
.summary-total{ padding-top:12px; border-top:1px dashed var(--border); font-weight:700; color:var(--text-strong); }
.summary-total dd{ font-size:1.25rem; font-weight:800; }
.summary-total small{ font-size:.75rem; font-weight:500; color:var(--text-muted); }

/* یادداشت «مبلغ از صورتحساب کم می‌شود» */
.deposit-note{ display:flex; align-items:flex-start; gap:8px; margin-top:12px; padding:12px 14px;
    background:var(--success-tint); border:1px solid #BBE7CC; border-radius:var(--r-12);
    font-size:.75rem; line-height:1.9; color:#15803D; font-weight:600; }
.deposit-note .icon{ width:18px; height:18px; margin-top:4px; }

/* ------------------------------------------------- انتخاب روز و سانس (step 1) */
.steps{ display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--text-muted); flex-wrap:wrap; margin-bottom:20px; }
.step{ display:inline-flex; align-items:center; gap:8px; }
.step-num{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--border); color:var(--text-muted); font-size:.75rem; font-weight:800; }
.step.is-active{ color:var(--text-strong); font-weight:700; }
.step.is-active .step-num{ background:var(--primary); color:#fff; }
.step.is-done .step-num{ background:var(--success); color:#fff; }

.day-list{ display:flex; flex-direction:column; gap:16px; }
.day-card{ overflow:hidden; }
.day-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.day-name{ display:flex; flex-direction:column; gap:2px; }
.day-name b{ font-size:1.125rem; color:var(--text-strong); font-weight:800; }
.day-meta{ font-size:.75rem; color:var(--text-muted); }
.day-meta.is-full{ color:var(--error); }

.session-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; padding:16px 20px; }
.session-card{ display:flex; flex-direction:column; gap:8px; padding:14px 16px; border:1.5px solid var(--border); border-radius:var(--r-12);
    background:var(--surface); text-align:start; cursor:pointer; transition:var(--t-fast); font:inherit; color:inherit; }
.session-card:hover:not(.is-disabled){ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint); }
.session-card.is-disabled{ cursor:not-allowed; background:var(--bg); opacity:.75; }
.session-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.session-title{ font-size:.9rem; font-weight:700; color:var(--text-strong); }
.session-time{ display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--text-muted); }
.session-free{ font-size:.75rem; font-weight:700; }
.session-free.ok{ color:var(--success); }
.session-free.low{ color:var(--warning); }
.session-free.none{ color:var(--error); }

.empty-state{ text-align:center; padding:32px 0; color:var(--text-muted); font-size:.875rem; }
.empty-state .big{ font-size:2rem; margin-bottom:8px; opacity:.6; }

/* ------------------------------------------------------------ نقشه‌ی سالن */
.book-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start; }
@media (max-width:1100px){ .book-layout{ grid-template-columns:1fr; } }
.book-aside{ position:sticky; top:16px; display:flex; flex-direction:column; gap:16px; }
@media (max-width:1100px){ .book-aside{ position:static; } }
.plan-card{ background:var(--bg); border:1px solid var(--border); border-radius:var(--r-24); padding:14px; box-shadow:var(--shadow-sm); }
@media (max-width:1100px){
    .plan-card{ width:100vw; margin-inline:calc(50% - 50vw); padding:0; border-radius:0; border-inline:0; }
}

.stage-wrap{ position:relative; width:100%; overflow-x:auto; overflow-y:hidden; direction:ltr;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.stage-wrap::-webkit-scrollbar{ height:8px; }
.stage-wrap::-webkit-scrollbar-thumb{ background:#d7dbe0; border-radius:8px; }
.stage-sizer{ position:relative; }
.stage{ position:absolute; top:0; left:0; width:1200px; height:1160px; transform-origin:top left; }
.scroll-hint{ display:none; text-align:center; font-size:.9rem; color:var(--text-muted); margin-top:8px; padding:0 12px 4px; }
@media (max-width:1100px){ .scroll-hint.show{ display:block; } }
.grid-bg{ position:absolute; inset:0;
    background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
    background-size:40px 40px; opacity:.55; mask-image:radial-gradient(circle at 50% 45%,#000 60%,transparent 100%); }

.tbl{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:#fff; border:1.5px solid var(--border); box-shadow:var(--shadow-sm); cursor:pointer; transition:var(--t-fast); z-index:2; }
.tbl::before{ content:""; position:absolute; inset:6px; border-radius:inherit; border:1px dashed #eef1f3; pointer-events:none; }
.tbl:hover{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint),var(--shadow-md); }
.tbl .tid{ font-size:27px; font-weight:800; color:var(--text-strong); }
.tbl .tsub{ font-size:22px; color:var(--text-muted); margin-top:2px; }
.tbl.locked{ cursor:not-allowed; background:#fafbfc; border-color:var(--border); }
.tbl.locked:hover{ box-shadow:var(--shadow-sm); }
.tbl.tsel{ border-color:var(--primary); background:var(--primary-tint); box-shadow:0 0 0 3px rgba(244,114,11,.28),var(--shadow-md); }
.tbl.tsel .tid{ color:var(--primary-hover); }

.seat{ position:absolute; width:44px; height:44px; transform:translate(-50%,-50%); z-index:3; cursor:pointer; }
.seat .chair{ width:100%; height:100%; display:block; transition:var(--t-fast); }
.chair-svg{ width:100%; height:100%; }
.seat .c-seat{ fill:#fff; }
.seat.s-free   .chair{ color:var(--success); }
.seat.s-free:hover .chair{ color:var(--primary); filter:drop-shadow(0 2px 6px rgba(244,114,11,.4)); }
.seat.s-pending .chair{ color:var(--warning); }
.seat.s-pending .c-seat{ fill:var(--warning-tint); }
.seat.s-reserved .chair{ color:var(--error); }
.seat.s-reserved .c-seat{ fill:var(--error-tint); }
.seat.s-pending, .seat.s-reserved{ cursor:not-allowed; }
.seat.sel .chair{ color:var(--primary); filter:drop-shadow(0 3px 7px rgba(244,114,11,.5)); }
.seat.sel .c-seat{ fill:var(--primary); }
.seat.sel .c-back, .seat.sel .c-arm{ stroke:var(--primary); }
.stool .chair{ color:#B7C0CB; } .stool{ cursor:default; }
.wall{ fill:none; stroke:var(--wall); }

.legend-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; font-size:.75rem; color:var(--text); }
.legend-grid > div{ display:flex; align-items:center; gap:8px; }
.legend-grid .sw{ width:14px; height:14px; border-radius:5px; border:2px solid; flex:none; }
.cart-list{ display:flex; flex-direction:column; gap:8px; max-height:280px; overflow-y:auto; }
.cart-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-12); padding:8px 12px; }
.cart-row .t{ font-size:.875rem; font-weight:700; color:var(--text-strong); }
.cart-row .s{ font-size:.7rem; color:var(--text-muted); }

/* سربرگ سانسِ انتخاب‌شده روی صفحه‌ی نقشه */
.session-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    padding:12px 16px; background:var(--secondary-tint); border:1px solid #CBDCDC; border-radius:var(--r-12); margin-bottom:16px; }
.session-bar .info{ display:flex; align-items:center; gap:10px; font-size:.875rem; color:var(--secondary-deep); font-weight:700; }

/* ------------------------------------------------------------------ مودال */
.modal{ position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center; padding:16px; }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(17,24,39,.55); backdrop-filter:blur(4px); }
.modal-card{ position:relative; width:min(460px,100%); max-height:calc(100vh - 32px); overflow-y:auto;
    background:var(--surface); border-radius:var(--r-24); padding:40px 32px 32px; box-shadow:var(--shadow-lg); }
.modal-close{ position:absolute; top:16px; inset-inline-start:16px; display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border:0; background:none; border-radius:50%; color:var(--text-muted); cursor:pointer; }
.modal-close:hover{ background:var(--bg); color:var(--text-strong); }
.modal-title{ font-size:1.5rem; }
.modal-sub{ color:var(--text-muted); font-size:.875rem; margin-block:8px 24px; }

/* ------------------------------------------------------------------ جدول */
.table{ width:100%; border-collapse:collapse; font-size:.875rem; }
.table th,.table td{ padding:12px 14px; text-align:start; border-bottom:1px solid var(--border); }
.table th{ font-size:.75rem; font-weight:700; color:var(--text-muted); background:var(--bg); }
.table tbody tr:hover{ background:var(--bg); }
.table-wrap{ overflow-x:auto; }