/* =============================================================================
   فایل:  public.css      | استایل صفحات عمومی رزرو مشتری
   شرح:   این فایل جدا از site.css است، چون صفحات عمومی مخاطب متفاوتی دارند:
          مشتری عادی که شاید اولین بارش باشد. پس ظاهر گرم‌تر، رنگی‌تر و
          راهنماتر است — برخلاف پنل که ابزار کاری روزمره است.

   🎨 رنگ برند هر کسب‌وکار از متغیر --brand می‌آید که در Code-Behind روی
      تگ body تنظیم می‌شود. همه رنگ‌های این فایل از همان مشتق می‌شوند.
   ============================================================================= */

:root {
    /* مقادیر پیش‌فرض — با رنگ اختصاصی کسب‌وکار بازنویسی می‌شوند */
    --brand:        #0F9B8E;
    --brand-dark:   #0B7A70;
    --brand-soft:   #E6F5F3;

    --ink:          #1B2227;
    --muted:        #6B7780;
    --faint:        #9AA5AC;
    --page:         #F6F7F8;
    --surface:      #FFFFFF;
    --border:       #E3E7EA;
    --border-soft:  #EDEFF1;

    --ok:           #14663F;
    --ok-bg:        #EAF7F0;
    --ok-border:    #A8DCC2;
    --busy:         #B4635C;
    --busy-bg:      #FBEDEC;
    --busy-border:  #F0CDCA;
    --last:         #8A5B10;
    --last-bg:      #FDF6EA;
    --last-border:  #E8A33D;

    --r-lg: 20px;
    --r-md: 16px;
    --r-sm: 13px;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500; font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html { direction: rtl; }

body {
    margin: 0;
    font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
    font-size: 14px;
    line-height: 1.75;
    color: var(--ink);
    background: var(--page);
    -webkit-font-smoothing: antialiased;
}

/* تصویر پس‌زمینه اختصاصی کسب‌وکار (اگر تنظیم شده باشد) */
body.has-bg {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
body.has-bg::before {
    content: "";
    position: fixed; inset: 0;
    background: rgba(246, 247, 248, .92);
    z-index: 0;
}

a { color: var(--brand); text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.45; }

.num, input { font-variant-numeric: tabular-nums; }

/* ═══ چیدمان کلی ══════════════════════════════════════════════════════════ */
.pub-wrap {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: 0 auto;
    padding: 0 0 40px;
    min-height: 100vh;
}

/* ═══ سربرگ با رنگ برند ═══════════════════════════════════════════════════ */
.pub-header {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    padding: 30px 26px 52px;
    color: #fff;
    position: relative;
    z-index: 1;              /* پایین‌تر از کارت شناور */
    overflow: hidden;
}
/* دایره‌های تزئینی — عمق می‌دهند بدون اینکه شلوغ کنند */
.pub-header::before,
.pub-header::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
}
.pub-header::before { top: -46px; left: -34px; width: 160px; height: 160px; }
.pub-header::after  { bottom: -56px; left: 64px; width: 118px; height: 118px; background: rgba(255,255,255,.05); }

.pub-brand {
    display: flex; align-items: center; gap: 14px;
    position: relative;
    z-index: 1;              /* بالاتر از دایره‌های تزئینی */
}
.pub-logo {
    width: 58px; height: 58px;
    flex-shrink: 0;
    border-radius: 18px;
    background: #fff;
    color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 25px; font-weight: 700;
    overflow: hidden;
}
.pub-logo img { width: 100%; height: 100%; object-fit: cover; }
.pub-name { font-size: 20px; font-weight: 700; line-height: 1.5; }
.pub-sub  { font-size: 12.5px; opacity: .9; }

/* نوار کاربر وارد‌شده */
.pub-user {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    padding: 10px 14px;
    background: rgba(255,255,255,.15);
    border-radius: 12px;
    font-size: 12.5px;
}
.pub-user a { color: #fff; opacity: .85; text-decoration: underline; }

/* ═══ بدنه ════════════════════════════════════════════════════════════════ */
.pub-body {
    position: relative;
    z-index: 2;
    padding: 0 14px;
}

/* کارت اول که روی سربرگ سوار می‌شود */
.pub-card {
    background: var(--surface);
    border-radius: var(--r-md);
    padding: 18px;
    margin-top: 12px;
}
/* ⚠️ رفع باگ: کارت شناور با margin منفی روی سربرگ می‌آید، ولی بدون
   position:relative و z-index، مرورگر آن را «پشت» پس‌زمینه سربرگ می‌کشد
   و محتوا به‌هم‌ریخته دیده می‌شود. */
.pub-card.is-lifted {
    position: relative;
    z-index: 2;
    margin-top: -30px;
    box-shadow: 0 4px 22px rgba(0,0,0,.08);
}
.pub-card-title { font-size: 14.5px; font-weight: 700; margin-bottom: 12px; }
.pub-card-sub { font-size: 12.5px; color: var(--muted); margin: -6px 0 14px; }

/* ═══ نوار مراحل ══════════════════════════════════════════════════════════ */
.steps { display: flex; gap: 8px; margin-bottom: 18px; }
.step { flex: 1; text-align: center; }
.step-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--border-soft);
    color: var(--faint);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    margin: 0 auto 5px;
    transition: background .2s ease, color .2s ease;
}
.step-label { font-size: 11px; color: var(--faint); }
.step.is-done .step-dot,
.step.is-active .step-dot { background: var(--brand); color: #fff; }
.step.is-done .step-label,
.step.is-active .step-label { color: var(--brand); font-weight: 500; }

/* ═══ گزینه‌های انتخابی (خدمت، کارمند) ════════════════════════════════════ */
.opt {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: right;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--r-sm);
    padding: 13px;
    margin-bottom: 9px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
    font-family: inherit;
    color: var(--ink);
}
.opt:hover { border-color: var(--brand); transform: translateY(-1px); text-decoration: none; }
.opt.is-selected {
    border: 2px solid var(--brand);
    background: var(--brand-soft);
}

.opt-title { font-size: 14px; font-weight: 500; }
.opt.is-selected .opt-title { font-weight: 700; }
.opt-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.opt-side { text-align: left; flex-shrink: 0; }
.opt-price { font-size: 14px; font-weight: 700; }
.opt.is-selected .opt-price { color: var(--brand); }
.opt-deposit {
    display: inline-block;
    font-size: 10.5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 8px;
    margin-top: 3px;
    color: var(--muted);
}
.opt.is-selected .opt-deposit { border-color: var(--brand); color: var(--brand-dark); }

/* ═══ فرم ═════════════════════════════════════════════════════════════════ */
.pub-field { margin-bottom: 14px; }
.pub-label { display: block; font-size: 12.5px; margin-bottom: 6px; }
.pub-input {
    width: 100%;
    padding: 13px 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pub-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.pub-hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

/* فیلد کد تایید — بزرگ و وسط‌چین */
.otp-input {
    text-align: center;
    font-size: 26px;
    letter-spacing: 10px;
    font-weight: 700;
    padding: 15px 14px;
    direction: ltr;
}

/* ═══ دکمه ════════════════════════════════════════════════════════════════ */
.pub-btn {
    display: block;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: var(--r-sm);
    background: var(--brand);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: background .15s ease, transform .08s ease;
}
.pub-btn:hover { background: var(--brand-dark); color: #fff; text-decoration: none; }
.pub-btn:active { transform: scale(.99); }
.pub-btn[disabled] { opacity: .5; cursor: not-allowed; }

.pub-btn-ghost {
    background: var(--surface);
    color: var(--muted);
    border: 1px solid var(--border);
    font-weight: 500;
    padding: 12px;
}
.pub-btn-ghost:hover { background: var(--page); color: var(--ink); }

.pub-btn-link {
    display: block;
    text-align: center;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 14px;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
}

/* ═══ پیام‌ها ═════════════════════════════════════════════════════════════ */
.pub-alert {
    border-radius: var(--r-sm);
    padding: 12px 14px;
    font-size: 13px;
    margin-bottom: 14px;
}
.pub-alert-error { background: var(--busy-bg); color: var(--busy); }
.pub-alert-ok    { background: var(--ok-bg); color: var(--ok); }
.pub-alert-info  { background: var(--brand-soft); color: var(--brand-dark); }
.pub-alert-warn  { background: var(--last-bg); color: var(--last); }

/* جعبه کد تایید در حالت توسعه */
.dev-code {
    background: var(--last-bg);
    border: 1.5px dashed var(--last-border);
    border-radius: var(--r-sm);
    padding: 14px;
    text-align: center;
    margin-bottom: 14px;
}
.dev-code-value {
    font-size: 27px; font-weight: 700;
    letter-spacing: 7px;
    color: var(--last);
    direction: ltr;
}
.dev-code-note { font-size: 11px; color: var(--last); opacity: .85; }

/* ═══ ساعت‌ها ═════════════════════════════════════════════════════════════ */
.pub-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 9px;
}
.pub-slot {
    position: relative;
    text-align: center;
    padding: 12px 0;
    border-radius: 12px;
    background: var(--ok-bg);
    border: 1.5px solid var(--ok-border);
    color: var(--ok);
    font-size: 14px; font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: transform .1s ease, box-shadow .15s ease;
}
.pub-slot:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(20,102,63,.13); text-decoration: none; color: var(--ok); }

.pub-slot.is-selected {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.pub-slot.is-selected::after {
    content: "✓";
    position: absolute; top: -7px; left: -7px;
    width: 19px; height: 19px;
    border-radius: 50%;
    background: var(--brand-dark);
    color: #fff; font-size: 11px; line-height: 19px;
}
.pub-slot.is-last {
    background: var(--last-bg);
    border-color: var(--last-border);
    color: var(--last);
}
.pub-slot.is-taken {
    background: var(--busy-bg);
    border-color: var(--busy-border);
    color: var(--busy);
    cursor: not-allowed;
    font-weight: 400;
}
.pub-slot.is-taken::after {
    content: "پر";
    display: block; font-size: 9.5px; margin-top: 1px; opacity: .8;
}

/* ═══ تقویم ═══════════════════════════════════════════════════════════════ */
.pub-cal-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.pub-cal-title { font-size: 15px; font-weight: 700; }
.pub-cal-nav {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font-size: 17px;
    cursor: pointer;
}
.pub-cal-nav:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.pub-cal-nav.is-off { opacity: .35; pointer-events: none; }

.pub-week {
    display: grid; grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}
.pub-week span {
    text-align: center; font-size: 11.5px; color: var(--muted); padding: 4px 0;
}
.pub-week span:last-child { color: var(--busy); }

.pub-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.pub-day {
    aspect-ratio: 1;
    min-height: 42px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    border-radius: 11px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    transition: background .13s ease, border-color .13s ease;
}
.pub-day:hover { border-color: var(--brand); text-decoration: none; color: var(--ink); }
.pub-day.is-blank { background: transparent; border-color: transparent; pointer-events: none; }
.pub-day.is-free::after {
    content: ""; width: 5px; height: 5px; border-radius: 50%; background: #2FA36B;
}
.pub-day.is-full { background: var(--busy-bg); border-color: var(--busy-border); color: var(--busy); pointer-events: none; }
.pub-day.is-closed { background: var(--page); color: var(--faint); pointer-events: none; border-color: transparent; }
.pub-day.is-today { border: 2px solid var(--brand); font-weight: 700; }
.pub-day.is-selected { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.pub-day.is-selected::after { background: #fff; }

/* ═══ خلاصه ═══════════════════════════════════════════════════════════════ */
.sum-row {
    display: flex; justify-content: space-between;
    font-size: 13px; padding: 6px 0;
    color: var(--muted);
}
.sum-row span:last-child { color: var(--ink); font-weight: 500; }
.sum-row.is-total {
    border-top: 1px solid var(--border-soft);
    margin-top: 6px; padding-top: 11px;
}
.sum-row.is-total span:last-child { color: var(--brand); font-weight: 700; font-size: 15px; }

/* ═══ نوبت‌های من ═════════════════════════════════════════════════════════ */
.appt {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 13px;
    margin-bottom: 9px;
}
.appt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.appt-service { font-size: 14px; font-weight: 700; }
.appt-when { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.appt-badge {
    font-size: 11px; border-radius: 20px; padding: 3px 10px;
    flex-shrink: 0; font-weight: 500;
}
.badge-wait { background: var(--last-bg); color: var(--last); }
.badge-ok   { background: var(--brand-soft); color: var(--brand-dark); }
.badge-done { background: var(--ok-bg); color: var(--ok); }
.badge-off  { background: var(--page); color: var(--muted); }

/* ═══ حالت خالی ═══════════════════════════════════════════════════════════ */
.pub-empty { text-align: center; padding: 30px 16px; }
.pub-empty-title { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.pub-empty-text { font-size: 13px; color: var(--muted); }

/* ═══ پانویس ══════════════════════════════════════════════════════════════ */
.pub-foot {
    text-align: center;
    font-size: 11.5px;
    color: var(--faint);
    padding: 20px 14px 0;
}

/* ═══ دسترس‌پذیری ═════════════════════════════════════════════════════════ */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- کارت کسب‌وکار در فهرست عمومی --- */
.biz-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 15px;
    margin-top: 10px;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
    color: var(--ink);
}

    .biz-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 18px rgba(0,0,0,.09);
        border-color: var(--brand);
        text-decoration: none;
        color: var(--ink);
    }

.biz-logo {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 16px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    overflow: hidden;
}

    .biz-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.biz-info {
    flex: 1;
    min-width: 0;
}

.biz-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.biz-type {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 1px;
}

.biz-meta {
    display: block;
    font-size: 11.5px;
    color: var(--faint);
    margin-top: 3px;
}

.biz-arrow {
    flex-shrink: 0;
    font-size: 22px;
    color: var(--faint);
    line-height: 1;
}

.biz-card:hover .biz-arrow {
    color: var(--brand);
}