:root {
    --coffee-900: #1b0f0a;
    --coffee-800: #3e2723;
    --coffee-700: #5c3a2e;
    --coffee-600: #7a5240;
    --coffee-500: #9c6b44;
    --coffee-300: #c8a27a;
    --cream-100: #f7efe5;
    --cream-200: #eadfcf;
    --accent: #f0a03c;
    --accent-deep: #c27a1f;
    --accent-text: #9c5f14;
    --ember: #b04530;
    --ember-deep: #963a27;
    --moss: #2f5d50;
    --moss-soft: #e3efe9;
    --text: #3e2723;
    --muted: #7a6a5c;
    --surface-header: #1b0f0a;
    --surface-footer: #1b0f0a;
    --shadow-sm: 0 3px 12px rgba(27,15,10,.07);
    --shadow-md: 0 8px 24px rgba(27,15,10,.10);
    --shadow-lg: 0 16px 40px rgba(27,15,10,.16);
    --font-body: 'Estedad', 'Vazirmatn', Tahoma, system-ui, sans-serif;
    --font-display: 'Playfair Display', 'Estedad', Georgia, serif;
}

@font-face {
    font-family: 'Estedad';
    src: url('fonts/Estedad-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/PlayfairDisplay-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+2010-2027, U+2030-205E;
}

* { box-sizing: border-box; }

html, body {
    font-family: var(--font-body);
    background: var(--cream-100);
    color: var(--text);
    margin: 0;
    font-size: 16px;
    word-spacing: -1px;
    line-height: 1.85;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* شبکه‌ی محافظ: اگر جایی محتوا از عرض صفحه بیرون بزند، حداقل اسکرول افقی کل صفحه رخ ندهد. */
    /* clip مانند hidden جلوی اسکرول افقی را می‌گیرد، اما scroll-container نمی‌سازد؛
       در نتیجه header و نوارهای position:sticky واقعاً چسبان می‌مانند. */
    overflow-x: clip;
}

h1, h2, h3, h4 { line-height: 1.35; font-weight: 800; }
strong, b { font-weight: 700; }
button, input, select, textarea { font-family: inherit; }
small, .muted, .hint { font-weight: 400; }

a { text-decoration: none; color: inherit; }

/* ---------- Navbar ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface-header);
    color: var(--cream-100);
    box-shadow: 0 2px 16px rgba(0,0,0,.28);
    border-bottom: 1px solid rgba(240,160,60,.18);
}
.site-header .nav-inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 66px;
    padding: .62rem clamp(1rem, 2vw, 1.5rem);
    gap: clamp(.6rem, 1.2vw, 1.15rem);
}
.brand { display: flex; flex:0 0 auto; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.35rem; color: var(--cream-100); order: 1; }
.brand .logo { font-size: 1.6rem; }
.main-nav { display: flex; flex:0 0 auto; gap: .2rem; flex-wrap: nowrap; order: 2; }
.main-nav a {
    padding: .45rem .95rem;
    border-radius: .6rem;
    color: var(--cream-200);
    font-weight: 500;
    position: relative;
    transition: background .15s, color .15s;
}
.main-nav a::after { content:''; position:absolute; inset-inline:.95rem; bottom:.25rem; height:2px; border-radius:2px; background:var(--accent); transform:scaleX(0); transition:transform .2s ease; }
.main-nav a:hover { color: #fff; }
.main-nav a:hover::after { transform:scaleX(1); }
.main-nav a.active { background: var(--accent); color: var(--coffee-900); font-weight: 600; }
.main-nav a.active::after { display:none; }
.nav-toggle { display: none; background: none; border: 1px solid transparent; color: var(--cream-100); width:40px; height:40px; border-radius:.7rem; font-size: 1.35rem; line-height:1; cursor: pointer; order: 5; transition:background .15s, border-color .15s; }
.nav-toggle:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); }
.nav-dismiss { display:none; }
.nav-search { order: 3; flex: 1; max-width: 250px; margin: 0; }
.nav-search input { width: 100%; padding: .45rem .95rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: var(--cream-100); font-family: inherit; font-size: .9rem; transition: background .15s, border-color .15s; }
.nav-search input::placeholder { color: #b6a290; }
.nav-search input:focus { outline: 0; border-color: var(--accent); background: rgba(255,255,255,.13); }
@media (max-width: 1180px) { .nav-search { display: none; } }

@media (max-width: 960px) and (min-width:761px) {
    .site-header .nav-inner { gap:.45rem; }
    .main-nav a { padding-inline:.62rem; font-size:.88rem; }
    .brand { font-size:1.2rem; }
}

@media (max-width: 760px) {
    .nav-toggle { display: block; position:relative; z-index:72; }
    .main-nav { display: none; position: absolute; z-index:70; top: 100%; inset-inline-start: 0; inset-inline-end: 0; background: var(--coffee-800); flex-direction: column; padding: .65rem 1rem 1rem; border-top:1px solid rgba(255,255,255,.08); box-shadow:0 12px 24px rgba(0,0,0,.22); }
    .main-nav.open { display: flex; }
    .main-nav.open + .nav-dismiss { display:block; position:fixed; inset:0; z-index:69; width:100vw; height:100dvh; padding:0; border:0; background:transparent; cursor:default; }
    .site-header .nav-inner { flex-wrap: nowrap; min-height:62px; padding:.6rem .85rem; gap:.4rem; }
    .brand { font-size:1.15rem; margin-inline-end:auto; }
}

/* ---------- Slider ---------- */
.hero-slider { position: relative; max-width: 1200px; margin: 1.2rem auto; border-radius: 1.25rem; overflow: hidden; box-shadow: var(--shadow-lg); }
.slides { position: relative; height: 420px; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.slide.active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide .caption {
    position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0;
    background: linear-gradient(to top, rgba(27,15,10,.94) 0%, rgba(74,42,28,.72) 45%, rgba(107,74,53,.25) 75%, transparent);
    color: var(--cream-100); padding: 3.2rem 2.2rem 1.8rem; font-size: 2rem; font-weight: 800; line-height: 1.3;
    text-shadow: 0 2px 12px rgba(0,0,0,.35); text-wrap: balance;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
}
.caption-cta { font-size: 1rem; padding: .7rem 1.5rem; flex: none; text-shadow: none; line-height: 1.5; }
.slider-dots { position: absolute; bottom: .9rem; inset-inline-start: 50%; transform: translateX(50%); display: flex; gap: .4rem; }
.slider-dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; background: rgba(255,255,255,.5); cursor: pointer; transition: width .2s, background .2s; }
.slider-dots button.active { background: var(--accent); width: 24px; }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(27,15,10,.45); color:#fff; border:1px solid rgba(255,255,255,.18); width:42px; height:42px; border-radius:50%; font-size:1.2rem; cursor:pointer; backdrop-filter: blur(4px); transition: background .15s; }
.slider-arrow:hover { background: var(--accent); color: var(--coffee-900); border-color: var(--accent); }
.slider-arrow.prev { inset-inline-start: .8rem; }
.slider-arrow.next { inset-inline-end: .8rem; }
@media (max-width: 600px) { .slides { height: 240px; } .slide .caption { font-size: 1.1rem; padding: 1.4rem 1rem 1rem; gap: .6rem; } .caption-cta { font-size: .85rem; padding: .5rem 1rem; } }

/* ---------- Layout sections ---------- */
.container-page { max-width: 1200px; margin: 1.5rem auto 0; padding: 1.5rem 1.2rem 3rem; background-color: #fff; border-radius: 1.25rem; border: 1px solid rgba(200,162,122,.25); box-shadow: var(--shadow-sm); }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 2rem 0 1rem; }
.section-head h2 { font-size: 1.75rem; font-weight: 800; color: var(--coffee-900); margin: 0; display:flex; align-items:center; gap:.6rem; }
.section-head h2::before { content:''; width:6px; height:1.4rem; border-radius:3px; background:var(--accent); }
.section-head a { color: var(--ember); font-weight: 600; font-size: .95rem; white-space: nowrap; }
.section-head a:hover { color: var(--ember-deep); }
/* دکمه‌های واقعی (btn-coffee/btn-ghost) که به‌جای لینک ساده در section-head استفاده می‌شوند
   نباید رنگ متن‌شان توسط قانون بالا (که برای لینک‌های متنی است) بازنویسی شود. */
.section-head a.btn-coffee, .section-head a.btn-coffee:hover { color: var(--cream-100); }
.section-head a.btn-ghost, .section-head a.btn-ghost:hover { color: var(--coffee-800); }
@media (max-width: 600px) { .section-head h2 { font-size: 1.3rem; } .section-head h2::before { height: 1.1rem; width: 5px; } }

/* ---------- Cards grid ---------- */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.2rem; }
.shop-card { background: #fff; border-radius: 1.1rem; overflow: hidden; border: 1px solid rgba(200,162,122,.35); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s; display:flex; flex-direction:column; }
.shop-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.shop-card .thumb { height: 175px; background: var(--cream-200); position: relative; overflow: hidden; }
.shop-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.shop-card:hover .thumb img { transform: scale(1.06); }
.shop-card .rating-badge { position:absolute; top:.65rem; inset-inline-end:.65rem; background: rgba(27,15,10,.82); color:var(--accent); padding:.22rem .6rem; border-radius:999px; font-size:.82rem; font-weight:700; font-variant-numeric: tabular-nums; backdrop-filter: blur(4px); }
.shop-card .body { padding: .95rem 1.1rem 1.15rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.shop-card h3 { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--coffee-900); }
.shop-card .loc { color: var(--muted); font-size: .9rem; display:flex; align-items:center; gap:.3rem; }
.shop-card .meta { margin-top:auto; display:flex; align-items:center; justify-content:space-between; font-size:.85rem; color:var(--muted); font-variant-numeric: tabular-nums; }
.stars { color: var(--accent); letter-spacing: 1px; }

/* ---------- Filters ---------- */
.filters { background:#fff; border-radius:1rem; padding:1rem 1.2rem; border:1px solid rgba(200,162,122,.35); box-shadow:var(--shadow-sm); display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:.8rem; margin-bottom:1.4rem; }
.filters label { display:block; font-size:.85rem; font-weight:600; color:var(--coffee-700); margin-bottom:.3rem; }
.filters select, .filters input { width:100%; padding:.6rem .75rem; border:1px solid var(--coffee-300); border-radius:.6rem; background:var(--cream-100); font-family:inherit; color:var(--text); transition:border-color .15s, box-shadow .15s; }
.filters select:focus, .filters input:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(240,160,60,.25); }

/* ---------- States ---------- */
.loader { text-align:center; padding:2rem; color:var(--muted); }
.empty { text-align:center; padding:3rem 1rem; color:var(--muted); }
.spinner { width:34px; height:34px; border:3px solid var(--cream-200); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto .6rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Detail page ---------- */
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:.4rem 0 0; font-size:.88rem; color:var(--muted); }
.crumbs a { color:var(--coffee-700); }
.crumbs a:hover { color:var(--ember); text-decoration:underline; }
.crumbs [aria-current="page"] { color:var(--coffee-900); font-weight:600; }

/* ستون اطلاعات تا ۱۰۲۴px باریک‌تر از یک موبایل ۳۶۰px می‌شد — نقطه‌ی شکست بالا آمد. */
/* چیدمان با grid-template-areas تعیین می‌شود نه ترتیب DOM: در راست‌به‌چپ ستون اول = راست، ستون دوم = چپ. */
.detail-hero {
    display:grid;
    grid-template-columns: minmax(320px,1fr) minmax(0,1.5fr);
    grid-template-areas: "panel gallery";
    gap:1.5rem; margin:1.2rem 0 2rem; align-items:stretch;
}
/* هر دو ستون هم‌ارتفاع‌اند (align-items:stretch)؛ محتوا بالا می‌ماند و فضای اضافه پایین جمع می‌شود. */
.detail-gallery { grid-area:gallery; display:flex; flex-direction:column; }
.detail-panel { grid-area:panel; display:flex; flex-direction:column; }
@media (max-width: 1024px) {
    /* روی موبایل، پنل اطلاعات پیش از گالری نمایش داده می‌شود. */
    .detail-hero { grid-template-columns: 1fr; grid-template-areas: "panel" "gallery"; gap:1.1rem; }
}

/* گالری اسلایدری: عکس اصلی + فلش قبلی/بعدی + نقطه‌ها روی خود تصویر. */
.gallery-viewport { position:relative; }
.detail-gallery .main-img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:1.1rem; background:var(--cream-200); box-shadow:var(--shadow-sm); }
.img-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; font-size:2.6rem; color:var(--coffee-300); border:1px dashed var(--coffee-300); }
.img-placeholder .ph-text { font-size:.9rem; color:var(--muted); }

.gallery-photo-btn { display:block; width:100%; padding:0; margin:0; border:0; background:none; cursor:zoom-in; }
.gallery-photo-btn .main-img { transition:transform .3s ease; }
.gallery-photo-btn:hover .main-img { transform:scale(1.015); }

.gallery-count { position:absolute; bottom:.7rem; inset-inline-end:.7rem; background:rgba(27,15,10,.6); color:#fff; font-size:.8rem; font-variant-numeric:tabular-nums; padding:.2rem .6rem; border-radius:999px; backdrop-filter:blur(4px); pointer-events:none; }
.gallery-dots { position:absolute; bottom:.8rem; inset-inline-start:50%; transform:translateX(-50%); display:flex; gap:.4rem; }
.gallery-dots button { width:8px; height:8px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.55); cursor:pointer; transition:width .2s, background .2s; }
.gallery-dots button.active { background:var(--accent); width:22px; }

/* ریل افقی به‌جای چند سطر تصویر کوچک روی موبایل. */
.detail-thumbs { display:flex; gap:.6rem; margin-top:.6rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.3rem; scrollbar-width:thin; }
.thumb-btn { flex:0 0 auto; padding:0; border:2px solid transparent; border-radius:.6rem; background:none; cursor:pointer; line-height:0; scroll-snap-align:start; transition:border-color .15s, transform .15s; }
.thumb-btn img { width:84px; height:64px; object-fit:cover; border-radius:.45rem; display:block; }
.thumb-btn:hover { transform:translateY(-2px); }
.thumb-btn.sel { border-color:var(--accent); }

/* نمایش تمام‌صفحه‌ی تصویر با ناوبری قبلی/بعدی. */
.lightbox { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; background:rgba(15,8,5,.94); cursor:zoom-out; animation:toastIn .15s ease-out; }
.lightbox-img { max-width:min(92vw,1100px); max-height:82vh; object-fit:contain; border-radius:.5rem; cursor:default; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox-close { position:absolute; top:1rem; inset-inline-end:1.2rem; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-size:1.2rem; cursor:pointer; backdrop-filter:blur(4px); transition:background .15s; }
.lightbox-close:hover { background:var(--accent); color:var(--coffee-900); border-color:var(--accent); }
.lightbox-count { position:absolute; bottom:1.2rem; inset-inline-start:50%; transform:translateX(-50%); color:#fff; background:rgba(255,255,255,.1); font-size:.85rem; font-variant-numeric:tabular-nums; padding:.3rem .8rem; border-radius:999px; backdrop-filter:blur(4px); }
.slider-arrow.lg { width:52px; height:52px; font-size:1.6rem; }
@media (prefers-reduced-motion: reduce) { .lightbox { animation:none; } }
@media (max-width: 600px) { .lightbox-close { top:.6rem; inset-inline-end:.6rem; } .slider-arrow.lg { width:42px; height:42px; font-size:1.3rem; } }

/* پنل تصمیم‌گیری: هویت ← اعتماد ← مکان ← اقدام. */
.detail-panel { background:#fff; border:1px solid rgba(200,162,122,.35); border-radius:1.1rem; padding:1.4rem; box-shadow:var(--shadow-sm); position:sticky; top:5rem; }
@media (max-width: 1024px) { .detail-panel { position:static; } }
.shop-title { font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem); font-weight:800; margin:0 0 .5rem; color:var(--coffee-900); line-height:1.3; text-wrap:balance; }
.shop-trust { display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; }
.rating-badge.lg { position:static; background:var(--coffee-900); color:var(--accent); padding:.3rem .75rem; border-radius:999px; font-size:1rem; font-weight:700; font-variant-numeric:tabular-nums; }
.rating-count { background:none; border:0; padding:0; font:inherit; cursor:pointer; color:var(--muted); font-size:.9rem; border-bottom:1px dashed var(--coffee-300); }
.rating-count:hover { color:var(--ember); }
.shop-loc { display:flex; align-items:center; gap:.35rem; margin:0 0 .2rem; color:var(--coffee-700); font-size:.95rem; }
.shop-address { margin:0 0 .9rem; color:var(--muted); font-size:.9rem; line-height:1.8; }

/* نگاه سریع: ساعت کاری امروز + تعداد نظرات — درست زیر آدرس. */
.quick-meta { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.qm-item { display:inline-flex; align-items:center; gap:.35rem; background:var(--moss-soft); color:var(--moss); border-radius:.6rem; padding:.35rem .8rem; font-size:.85rem; font-weight:600; }
button.qm-item { border:0; font:inherit; cursor:pointer; }
button.qm-item:hover { background:var(--cream-200); }
.shop-facts { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.fact-chip { background:var(--cream-100); border:1px solid var(--cream-200); color:var(--coffee-700); border-radius:.6rem; padding:.3rem .7rem; font-size:.84rem; font-variant-numeric:tabular-nums; }

.panel-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:.5rem; }
.act-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; min-height:56px; padding:.5rem .4rem; background:var(--cream-100); border:1px solid var(--cream-200); border-radius:.7rem; color:var(--coffee-800); font-family:inherit; font-size:.88rem; font-weight:600; cursor:pointer; transition:background .15s, border-color .15s, transform .15s; }
.act-btn:hover { background:#fff; border-color:var(--accent); transform:translateY(-1px); }
.act-sub { font-size:.78rem; color:var(--muted); font-weight:400; font-variant-numeric:tabular-nums; }

/* margin-top:auto هر فضای اضافه‌ی ناشی از هم‌ارتفاعی با گالری را به همین بخش می‌دهد. */
.order-summary { margin-top:auto; padding-top:1rem; border-top:1px solid var(--cream-200); }
.os-line { display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; color:var(--coffee-700); font-size:.95rem; }
.os-line strong { color:var(--accent-text); font-variant-numeric:tabular-nums; }
.os-cta { display:block; text-align:center; }

/* اسکلت هم‌شکل صفحه‌ی نهایی — جای اسپینر وسط صفحه. */
.skel { background:linear-gradient(90deg,var(--cream-200) 25%,#f3e9dc 37%,var(--cream-200) 63%); background-size:400% 100%; animation:skelShimmer 1.4s ease infinite; border-radius:.6rem; }
.skel-img { width:100%; aspect-ratio:16/9; border-radius:1.1rem; }
.skel-thumb { width:84px; height:64px; }
.skel-line { height:1rem; margin-bottom:.7rem; }
.skel-line.lg { height:2rem; width:70%; }
.skel-line.sm { height:.9rem; width:40%; }
.skel-btn { height:56px; margin-top:1rem; border-radius:.7rem; }
@keyframes skelShimmer { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }
@media (prefers-reduced-motion: reduce) { .skel { animation:none; } }

.state-error p { margin:0 0 1rem; }
.empty .btn-ghost, .empty .btn-coffee { display:inline-block; margin-top:.8rem; }

/* پیمایش دسته‌های منو — همان ایدیوم .city-chips در صفحه‌ی اصلی. */
/* یک سطح پایین‌تر از .page-subnav چسبان می‌ماند تا روی هم نیفتند. */
.cat-chips { display:flex; gap:.5rem; overflow-x:auto; padding:.6rem 0; margin-bottom:.4rem; position:sticky; top:9.2rem; background:var(--cream-100); z-index:20; scrollbar-width:thin; border-radius:1rem; }
.cat-chips button { flex:0 0 auto; display:inline-flex; align-items:center; gap:.35rem; background:#fff; border:1px solid var(--cream-200); color:var(--coffee-700); border-radius:999px; padding:.4rem .9rem; font-size:.9rem; font-weight:600; font-family:inherit; cursor:pointer; transition:border-color .15s, color .15s; }
.cat-chips button:hover { border-color:var(--accent); color:var(--coffee-900); }
.cat-chips .c-count { color:var(--muted); font-size:.8rem; font-weight:400; font-variant-numeric:tabular-nums; }

/* ---------- ناوبری چسبان بخش‌های صفحه‌ی جزئیات ---------- */
.page-subnav { display:flex; gap:.4rem; overflow-x:auto; padding:.7rem 0; margin:1.4rem 0 0; position:sticky; top:4.6rem; background:var(--cream-100); z-index:25; scrollbar-width:thin; border-bottom:1px solid var(--cream-200); border-radius:1rem; }
.page-subnav button { flex:0 0 auto; background:none; border:0; font-family:inherit; cursor:pointer; color:var(--coffee-700); font-weight:600; font-size:.92rem; padding:.4rem .9rem; border-radius:999px; transition:background .15s, color .15s; }
.page-subnav button:hover { background:#fff; color:var(--ember); }

/* هر بخشی که هدف پرش است باید از زیر نوارهای چسبان بیرون بیاید. */
#about, #amenities, #hours, #menu, #reviews, #location { scroll-margin-top: 9.2rem; }

/* ---------- درباره ---------- */
.about-text { margin:0; color:var(--coffee-700); line-height:2; font-size:.98rem; }

/* ---------- امکانات / نوع فضا ---------- */
.tag-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; }
.tag-chip { background:#fff; border:1px solid rgba(200,162,122,.35); color:var(--coffee-700); border-radius:.6rem; padding:.45rem .9rem; font-size:.88rem; font-weight:600; box-shadow:var(--shadow-sm); }

/* حالت خالی برای بخش‌هایی که هنوز از بک‌اند داده نمی‌گیرند (امکانات/ساعت کاری) — هم‌لحن با .map-placeholder. */
.empty-note { margin:0; color:var(--muted); font-size:.92rem; }

/* ---------- ساعت کاری ---------- */
.hours-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.6rem; }
.hours-row { display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--cream-200); border-radius:.7rem; padding:.65rem 1rem; color:var(--coffee-700); font-size:.92rem; }
.hours-row.today { border-color:var(--accent); background:var(--cream-100); font-weight:700; color:var(--coffee-900); }
.hours-time { font-variant-numeric:tabular-nums; color:var(--muted); }
.hours-row.today .hours-time { color:var(--accent-text); }

/* ---------- لوکیشن و مسیریابی ---------- */
.shop-map { width:100%; height:320px; border-radius:1rem; overflow:hidden; box-shadow:var(--shadow-sm); background:var(--cream-200); z-index:1; }
.map-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; height:220px; border:1px dashed var(--coffee-300); border-radius:1rem; color:var(--muted); font-size:.92rem; }
.map-placeholder span { font-size:2rem; }
.direction-links { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.direction-links a { display:inline-flex; align-items:center; gap:.4rem; background:#fff; border:1px solid rgba(200,162,122,.35); color:var(--coffee-800); border-radius:.7rem; padding:.55rem 1.1rem; font-weight:600; font-size:.9rem; transition:border-color .15s, background .15s; }
.direction-links a:hover { border-color:var(--accent); background:var(--cream-100); }
@media (max-width: 600px) { .shop-map { height:240px; } }
.head-meta { color:var(--muted); font-size:.9rem; font-variant-numeric:tabular-nums; }
.menu-cat { scroll-margin-top:13.7rem; }

/* نوار سفارش چسبان — مسیر همیشگی به پرداخت. */
.order-bar { position:fixed; inset-inline:0; bottom:0; z-index:55; display:none; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 1.1rem calc(.7rem + env(safe-area-inset-bottom)); background:var(--coffee-900); color:var(--cream-100); box-shadow:0 -6px 24px rgba(27,15,10,.3); }
.order-bar .ob-info { display:flex; align-items:center; gap:.5rem; font-size:.92rem; }
.order-bar .ob-info strong { color:var(--accent); font-variant-numeric:tabular-nums; }
@media (max-width: 1024px) {
    .order-bar { display:flex; }
    /* فضای نوار ثابت فقط در صفحه‌ای لازم است که خود نوار واقعاً وجود دارد. */
    body:has(.order-bar) { padding-bottom:4.5rem; }
}

/* گفت‌وگوی تایید پیش از پاک شدن سبد. */
.modal-backdrop { position:fixed; inset:0; background:rgba(27,15,10,.55); z-index:70; }
.modal-card { position:fixed; z-index:71; top:50%; left:50%; transform:translate(-50%,-50%); width:min(92vw,440px); background:#fff; border-radius:1rem; padding:1.5rem; box-shadow:var(--shadow-lg); }
.modal-card h3 { margin:0 0 .7rem; color:var(--coffee-900); font-size:1.15rem; }
.modal-card p { margin:0 0 1.2rem; color:var(--coffee-700); font-size:.95rem; line-height:1.9; }
.modal-actions { display:flex; gap:.7rem; flex-wrap:wrap; }

.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; }

/* یک حلقه‌ی فوکوس واحد برای کل برنامه (پیش‌تر هیچ :focus-visible وجود نداشت). */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
    outline:3px solid var(--accent);
    outline-offset:2px;
    border-radius:.4rem;
}

/* ---------- Footer ---------- */
.site-footer { position:relative; isolation:isolate; margin-top:6rem; border-top:1px solid rgba(240,160,60,.3); background:radial-gradient(circle at 85% 20%,rgba(176,69,48,.16),transparent 28%),linear-gradient(145deg,#21110c 0%,var(--surface-footer) 58%,#140a07 100%); color:var(--cream-200); }
.site-footer::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.055; background-image:radial-gradient(var(--cream-100) 1px,transparent 1px); background-size:24px 24px; mask-image:linear-gradient(to bottom,#000,transparent 70%); }
.footer-wrap { width:min(1200px,calc(100% - 2.4rem)); margin:0 auto; }
.footer-cta { position:relative; transform:translateY(-50%); margin-bottom:-3rem; padding:1.25rem 1.4rem; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.1rem; overflow:hidden; border:1px solid rgba(240,160,60,.35); border-radius:1.25rem; background:linear-gradient(115deg,#6b3423,#462218 58%,#321812); box-shadow:0 20px 45px rgba(13,6,4,.35); }
.footer-cta::after { content:""; position:absolute; inset-inline-end:-55px; top:-80px; width:220px; height:220px; border:42px solid rgba(240,160,60,.07); border-radius:50%; }
.footer-cta-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:1rem; background:var(--accent); color:var(--coffee-900); box-shadow:0 8px 22px rgba(240,160,60,.22); }
.footer-cta-icon svg,.footer-contact-icon svg,.footer-cta-button svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.footer-cta-icon svg { width:27px; height:27px; }
.footer-cta-copy { position:relative; z-index:1; }
.footer-cta-copy > span { display:block; margin-bottom:.1rem; color:var(--accent); font-size:.7rem; font-weight:750; }
.footer-cta h2 { margin:0; color:#fff9f2; font-size:1.15rem; font-weight:800; }
.footer-cta p { margin:.2rem 0 0; color:#cdb7a9; font-size:.78rem; line-height:1.7; }
.footer-cta-button { position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:46px; padding:.65rem 1.05rem; border-radius:.8rem; background:var(--accent); color:var(--coffee-900); font-size:.8rem; font-weight:800; white-space:nowrap; box-shadow:0 8px 22px rgba(240,160,60,.2); transition:transform .18s,background .18s; }
.footer-cta-button:hover { color:var(--coffee-900); background:#ffb252; transform:translateY(-2px); }
.footer-cta-button svg { width:17px; height:17px; transform:rotate(180deg); }
.footer-main { display:grid; grid-template-columns:1.45fr .7fr .85fr 1fr; grid-template-areas:"about discover account contact"; gap:clamp(1.5rem,3vw,3.5rem); padding:4.8rem 0 3rem; }
.footer-about { grid-area:about; }
.footer-about > p { max-width:360px; margin:1rem 0 1.1rem; color:#bda89b; font-size:.84rem; line-height:2; }
.footer-features { display:flex; flex-wrap:wrap; gap:.5rem 1rem; color:#d8c8bd; font-size:.72rem; }
.footer-features span { display:inline-flex; align-items:center; gap:.35rem; }
.footer-features i { display:grid; place-items:center; width:17px; height:17px; border-radius:50%; background:rgba(47,93,80,.45); color:#a9d7c4; font-style:normal; font-size:.62rem; font-weight:800; }
.footer-column h3,.footer-contact h3 { margin:0 0 .9rem; color:#fff8ef; font-size:.88rem; font-weight:750; }
.footer-discover { grid-area:discover; }.footer-account { grid-area:account; }
.footer-column a { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.34rem 0; color:#bda99c; font-size:.78rem; transition:color .15s,transform .15s; }
.footer-column a i { color:var(--accent); font-style:normal; opacity:0; transform:translateX(5px); transition:opacity .15s,transform .15s; }
.footer-column a:hover { color:#fff; transform:translateX(-3px); }
.footer-column a:hover i { opacity:1; transform:translateX(0); }
.footer-contact { grid-area:contact; align-self:start; display:grid; grid-template-columns:auto 1fr; gap:.7rem; padding:1rem; border:1px solid rgba(255,255,255,.09); border-radius:1rem; background:rgba(255,255,255,.045); }
.footer-contact-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:.7rem; background:rgba(240,160,60,.12); color:var(--accent); }
.footer-contact-icon svg { width:20px; height:20px; }
.footer-contact h3 { margin:.05rem 0 .1rem; }
.footer-contact p { margin:0; color:#a99488; font-size:.68rem; line-height:1.7; }
.footer-contact > a { grid-column:1/-1; display:block; padding:.48rem .7rem; border:1px solid rgba(240,160,60,.35); border-radius:.65rem; color:var(--accent); font-size:.74rem; font-weight:700; text-align:center; transition:background .15s,color .15s; }
.footer-contact > a:hover { background:var(--accent); color:var(--coffee-900); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:1200px; margin:0 auto; padding:1rem 1.2rem; border-top:1px solid rgba(255,255,255,.08); color:#8f786b; font-size:.7rem; }
.footer-bottom-links { display:flex; align-items:center; gap:.55rem; }
.footer-bottom-links b { color:#594239; }
.footer-bottom a { color:#a99386; transition:color .15s; }.footer-bottom a:hover { color:var(--accent); }
@media (max-width:900px) { .footer-main { grid-template-columns:1.2fr .8fr .8fr; grid-template-areas:"about discover account" "about contact contact"; } }
@media (max-width:650px) {
    .site-footer { margin-top:7.5rem; }
    .footer-wrap { width:min(100% - 2rem,520px); }
    .footer-cta { transform:translateY(-28%); margin-bottom:-4rem; grid-template-columns:auto 1fr; padding:1.1rem; }
    .footer-cta-icon { width:46px; height:46px; }.footer-cta-icon svg { width:23px; height:23px; }
    .footer-cta h2 { font-size:1rem; }.footer-cta p { font-size:.72rem; }
    .footer-cta-button { grid-column:1/-1; width:100%; min-height:44px; }
    .footer-main { grid-template-columns:1fr 1fr; grid-template-areas:"about about" "discover account" "contact contact"; gap:2rem 1.5rem; padding:5rem 0 2.2rem; }
    .footer-about { text-align:center; }.foot-brand { justify-content:center; margin-inline:auto; }.footer-about > p { margin-inline:auto; }.footer-features { justify-content:center; }
    .footer-contact { margin-top:.2rem; }
    .footer-bottom { flex-direction:column; gap:.4rem; padding:1rem; text-align:center; }
}
@media (max-width:370px) { .footer-main { grid-template-columns:1fr; grid-template-areas:"about" "discover" "account" "contact"; } }

/* ---------- Buttons ---------- */
.btn-coffee { background:var(--ember); color:var(--cream-100); border:0; border-radius:.7rem; padding:.6rem 1.3rem; font-weight:700; cursor:pointer; font-family:inherit; box-shadow:0 4px 14px rgba(200,85,61,.35); transition:background .15s, transform .15s, box-shadow .15s; }
.btn-coffee:hover { background:var(--ember-deep); transform:translateY(-1px); box-shadow:0 6px 18px rgba(200,85,61,.45); }
.btn-coffee:active { transform:translateY(0); }
.btn-ghost { background:#fff; border:1px solid var(--coffee-300); color:var(--coffee-800); border-radius:.7rem; padding:.55rem 1.1rem; cursor:pointer; font-family:inherit; font-weight:600; transition:border-color .15s, background .15s; }
.btn-ghost:hover { border-color:var(--coffee-800); background:var(--cream-100); }

/* ---------- Auth / forms ---------- */
.auth-card { background:#fff; border-radius:1rem; padding:1.8rem; box-shadow:0 6px 22px rgba(60,36,23,.1); margin-top:1.5rem; }
.auth-card h1 { font-size:1.5rem; margin:0 0 .3rem; color:var(--coffee-900); }
.auth-sub { color:var(--muted); margin:0 0 1.2rem; font-size:.92rem; }
.auth-input { width:100%; padding:.65rem .85rem; border:1px solid var(--coffee-300); border-radius:.7rem; background:var(--cream-100); font-family:inherit; color:var(--text); font-size:1rem; transition:border-color .15s, box-shadow .15s; }
.auth-input:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(240,160,60,.25); }
.auth-input.code { letter-spacing:.5rem; text-align:center; font-size:1.3rem; }
.auth-btn { width:100%; margin-top:1rem; padding:.7rem; font-size:1rem; }
.auth-error { background:#fde8e8; color:#a23b3b; padding:.6rem .9rem; border-radius:.6rem; margin-top:1rem; font-size:.9rem; }
.auth-error.inline { background:transparent; padding:0; }
.auth-mobile-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; color:var(--coffee-700); }
.link-btn { background:none; border:0; color:var(--ember); cursor:pointer; font-family:inherit; font-size:.9rem; margin-top:.6rem; font-weight:600; }
label { display:block; font-size:.88rem; font-weight:600; color:var(--coffee-700); margin:.7rem 0 .3rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem 1rem; }
.form-grid .full { grid-column:1 / -1; }
@media (max-width:600px){ .form-grid { grid-template-columns:1fr; } }
.saved-ok { color:var(--moss); font-weight:600; font-size:.9rem; }
.hint { color:var(--muted); font-size:.88rem; margin:0 0 .8rem; }

/* ---------- Status badge ---------- */
.status-badge { padding:.3rem .8rem; border-radius:.6rem; font-size:.85rem; font-weight:600; }
.status-badge.draft { background:var(--cream-200); color:var(--coffee-700); }
.status-badge.pending { background:#fdebcf; color:#8a5a0c; }
.status-badge.ok { background:var(--moss-soft); color:var(--moss); }
.status-badge.rejected { background:#fde8e8; color:#a23b3b; }

/* ---------- Image gallery (owner) ---------- */
.upload-btn { display:inline-block; background:var(--coffee-700); color:#fff; padding:.55rem 1.1rem; border-radius:.6rem; cursor:pointer; font-weight:600; font-size:.9rem; }
.upload-btn:hover { background:var(--coffee-600); }
.img-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; margin-top:1rem; }
.img-tile { position:relative; border-radius:.7rem; overflow:hidden; border:2px solid transparent; background:var(--cream-200); }
.img-tile.main { border-color:var(--accent); }
.img-tile img { width:100%; height:120px; object-fit:cover; display:block; }
.main-tag { position:absolute; top:.4rem; inset-inline-start:.4rem; background:var(--accent); color:var(--coffee-900); font-size:.72rem; font-weight:700; padding:.15rem .5rem; border-radius:.4rem; }
.tile-btn { position:absolute; border:0; cursor:pointer; font-family:inherit; font-size:.72rem; padding:.2rem .5rem; border-radius:.4rem; }
.tile-btn.set-main { bottom:.4rem; inset-inline-start:.4rem; background:rgba(255,255,255,.92); color:var(--coffee-800); }
.tile-btn.del { bottom:.4rem; inset-inline-end:.4rem; background:rgba(180,40,40,.92); color:#fff; }

/* ---------- Admin panel ---------- */
.admin-nav { display:flex; gap:.4rem; flex-wrap:wrap; background:#fff; padding:.6rem; border-radius:.8rem; box-shadow:0 4px 14px rgba(60,36,23,.08); margin:1rem 0; }
.admin-nav a { padding:.45rem .9rem; border-radius:.6rem; color:var(--coffee-700); font-weight:500; font-size:.92rem; }
.admin-nav a:hover { background:var(--cream-100); }
.admin-nav a.active { background:var(--coffee-800); color:#fff; }

.stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:1rem; }
.stat-card { background:#fff; border-radius:.9rem; padding:1.1rem; text-align:center; box-shadow:0 4px 14px rgba(60,36,23,.08); display:flex; flex-direction:column; gap:.3rem; }
.stat-card .num { font-size:1.8rem; font-weight:800; color:var(--coffee-800); font-variant-numeric: tabular-nums; }
.stat-card span:last-child { color:var(--muted); font-size:.85rem; }
.stat-card.pending { background:#fff8e8; }
.stat-card.pending .num { color:#b8860b; }

.admin-table { display:flex; flex-direction:column; gap:.6rem; margin-top:.6rem; }
.admin-row { display:flex; align-items:center; gap:.9rem; background:#fff; border-radius:.8rem; padding:.7rem .9rem; box-shadow:0 3px 12px rgba(60,36,23,.06); flex-wrap:wrap; }
.row-thumb { width:54px; height:54px; border-radius:.6rem; object-fit:cover; background:var(--cream-200); flex-shrink:0; }
.row-main { display:flex; flex-direction:column; gap:.2rem; flex:1; min-width:140px; }
.row-main strong { color:var(--coffee-800); }
.row-main span { color:var(--muted); font-size:.85rem; }
.row-actions { display:flex; gap:.4rem; flex-wrap:wrap; }
.btn-coffee.sm, .btn-ghost.sm, .btn-reject.sm { padding:.35rem .75rem; font-size:.82rem; }
.btn-reject { background:#fde8e8; color:#a23b3b; border:0; border-radius:.6rem; padding:.5rem 1rem; cursor:pointer; font-family:inherit; font-weight:600; }
.btn-reject:hover { background:#f9d5d5; }

.filter-tabs { display:flex; gap:.4rem; margin:.6rem 0 1rem; flex-wrap:wrap; }
.filter-tabs button { background:#fff; border:1px solid var(--cream-200); color:var(--coffee-700); border-radius:.6rem; padding:.4rem .9rem; cursor:pointer; font-family:inherit; font-size:.88rem; }
.filter-tabs button.active { background:var(--coffee-800); color:#fff; border-color:var(--coffee-800); }

.admin-detail { background:var(--cream-100); border-radius:.7rem; padding:.9rem 1.1rem; margin:-.2rem 0 .4rem; }

.form-title { font-size:1.05rem; color:var(--coffee-800); margin:0 0 .8rem; }
.form-actions { margin-top:1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.upload-row { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.upload-preview { width:70px; height:70px; object-fit:cover; border-radius:.5rem; }
.upload-preview.wide { width:160px; height:70px; }
.switch { display:flex; align-items:center; gap:.4rem; font-weight:400; color:var(--coffee-700); }

.geo-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:760px){ .geo-cols { grid-template-columns:1fr; } }
.geo-col { background:#fff; border-radius:.8rem; padding:1rem; box-shadow:0 3px 12px rgba(60,36,23,.06); }
.geo-col h3 { margin:0 0 .7rem; color:var(--coffee-800); font-size:1.05rem; }
.geo-add { display:flex; gap:.4rem; margin-bottom:.7rem; }
.geo-add .auth-input { padding:.4rem .6rem; }
.geo-item { display:flex; align-items:center; justify-content:space-between; padding:.45rem .6rem; border-radius:.5rem; cursor:pointer; }
.geo-item:hover { background:var(--cream-100); }
.geo-item.sel { background:var(--cream-200); font-weight:600; }
.geo-item small { color:var(--muted); }
.geo-item .x { background:none; border:0; color:#b04848; cursor:pointer; font-size:.9rem; }
.empty.sm { padding:1rem; font-size:.85rem; }

.role-tags { display:flex; gap:.3rem; flex-wrap:wrap; }
.role-tag { background:var(--cream-200); color:var(--coffee-700); border-radius:.5rem; padding:.2rem .6rem; font-size:.78rem; }

/* ---------- Public menu ---------- */
.menu-cat { font-size:1.15rem; color:var(--coffee-800); margin:1.4rem 0 .8rem; padding-bottom:.4rem; border-bottom:2px solid var(--cream-200); }
/* ۲۴۰px باعث می‌شد نام آیتم روی دسکتاپ (~۱۰۲px) جا کمتر از موبایل (~۱۴۶px) بگیرد. */
.menu-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1rem; }
@media (max-width: 420px) { .menu-grid { grid-template-columns:1fr; } }
.menu-item { display:flex; align-items:center; gap:.8rem; background:#fff; border:1px solid rgba(200,162,122,.35); border-radius:.8rem; padding:.7rem; box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s, transform .15s; }
.menu-item:hover { border-color:var(--accent); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.menu-item img { width:64px; height:64px; border-radius:.6rem; object-fit:cover; background:var(--cream-200); flex-shrink:0; }
.mi-placeholder { width:64px; height:64px; border-radius:.6rem; background:var(--cream-200); color:var(--coffee-300); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
/* min-width:0 لازم است وگرنه یک نام بلند دکمه را از کارت بیرون می‌راند. */
.menu-item-body { display:flex; flex-direction:column; gap:.25rem; flex:1; min-width:0; }
.menu-item-name { font-weight:600; color:var(--coffee-800); overflow-wrap:anywhere; }
.menu-item-price { color:var(--accent-text); font-weight:700; font-size:.9rem; font-variant-numeric: tabular-nums; }
/* بدون opacity — پیش‌تر ۰٫۶ بود که نسبت کنتراست را به ۲٫۴۴:۱ می‌رساند و دکمه غیرفعال به نظر می‌آمد. */
.add-cart { white-space:nowrap; flex-shrink:0; min-height:44px; padding-inline:1rem; }

/* ---------- Owner menu management ---------- */
.add-menu-row { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.add-menu-row .auth-input { flex:1; min-width:150px; }
.menu-row { gap:.7rem; }
.price-edit { display:flex; align-items:center; gap:.3rem; }
.price-edit .auth-input { width:110px; padding:.4rem .5rem; }
.price-edit .unit { font-size:.8rem; color:var(--muted); }
.switch.sm { font-size:.82rem; gap:.25rem; }
.upload-inline { cursor:pointer; }

/* ---------- Reviews ---------- */
.review-form { background:#fff; border-radius:.9rem; padding:1.2rem; box-shadow:0 4px 16px rgba(60,36,23,.08); margin-bottom:1.2rem; }
.skel-review { height:86px; margin-bottom:.8rem; border-radius:.8rem; }
.star-input { display:flex; align-items:center; gap:.2rem; margin-bottom:.7rem; }
/* پیش‌تر ~۳۰×۲۷px بود — زیر حداقل ۴۴px لمسی، با فاصله‌ی ۳px بین پنج هدف. */
.star-input .star { background:none; border:0; font-size:1.7rem; color:var(--cream-200); cursor:pointer; padding:0; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; line-height:1; transition:color .1s; }
.star-input .star.on { color:var(--accent); }
.star-input .rating-hint { margin-inline-start:.6rem; color:var(--muted); font-size:.85rem; }
.review-login { background:var(--cream-100); border-radius:.7rem; padding:1rem; text-align:center; color:var(--coffee-700); margin-bottom:1rem; }
.review-login a { color:var(--ember); font-weight:600; }
.review-list { display:flex; flex-direction:column; gap:.8rem; }
.review-item { background:#fff; border-radius:.8rem; padding:.9rem 1.1rem; box-shadow:0 3px 12px rgba(60,36,23,.06); }
.review-head { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.review-author { font-weight:600; color:var(--coffee-800); }
.review-date { color:var(--muted); font-size:.8rem; margin-inline-start:auto; }
.review-text { margin:.5rem 0 0; color:var(--coffee-700); line-height:1.9; }

/* ---------- Cart / toast ---------- */
/* inset-inline-start:50% عرض شناور را به نصف viewport محدود می‌کرد (۱۸۰px روی ۳۶۰px). */
.cart-toast { position:fixed; bottom:calc(1rem + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:max-content; max-width:min(92vw,440px); background:var(--coffee-800); color:#fff; padding:.7rem 1.1rem; border-radius:.8rem; display:flex; align-items:center; gap:1rem; box-shadow:var(--shadow-lg); z-index:60; animation:toastIn .2s ease-out; }
.cart-toast.err { background:#7d2a2a; }
.cart-toast a { color:var(--accent); font-weight:600; white-space:nowrap; }
.toast-x { min-width:32px; min-height:32px; }
@keyframes toastIn { from { opacity:0; transform:translate(-50%,8px); } to { opacity:1; transform:translate(-50%,0); } }
@media (prefers-reduced-motion: reduce) { .cart-toast { animation:none; } }
/* روی موبایل، فقط در صفحه‌ی دارای نوار سفارش، شناور بالای آن بنشیند. */
@media (max-width: 1024px) { body:has(.order-bar) .cart-toast { bottom:calc(4.6rem + env(safe-area-inset-bottom)); } }
.toast-x { background:none; border:0; color:inherit; cursor:pointer; font-size:1rem; opacity:.7; }
.toast-x:hover { opacity:1; }
.cart-shop { color:var(--muted); margin-bottom:.8rem; }
.cart-items { display:flex; flex-direction:column; gap:.6rem; }
.cart-item { display:flex; align-items:center; gap:.8rem; background:#fff; border-radius:.8rem; padding:.6rem .8rem; box-shadow:0 3px 12px rgba(60,36,23,.06); }
.cart-item img { width:52px; height:52px; border-radius:.5rem; object-fit:cover; background:var(--cream-200); }
.cart-item-main { display:flex; flex-direction:column; flex:1; gap:.2rem; }
.cart-item-main .name { font-weight:600; color:var(--coffee-800); }
.cart-item-main .unit { color:var(--muted); font-size:.82rem; }
.qty { display:flex; align-items:center; gap:.5rem; }
.qty button { width:28px; height:28px; border-radius:.5rem; border:1px solid var(--cream-200); background:var(--cream-100); cursor:pointer; font-size:1rem; color:var(--coffee-700); }
.line-total { font-weight:700; color:var(--coffee-800); min-width:70px; text-align:start; }
.cart-footer { display:flex; align-items:center; justify-content:space-between; margin-top:1.2rem; flex-wrap:wrap; gap:1rem; }
.cart-total { font-size:1.05rem; color:var(--coffee-800); }
.cart-total strong { color:var(--accent-text); }

/* ---------- Payment ---------- */
.pay-card { background:#fff; border-radius:1rem; padding:2rem 1.6rem; box-shadow:0 6px 22px rgba(60,36,23,.1); text-align:center; margin-top:1.5rem; }
.pay-card h1 { font-size:1.4rem; color:var(--coffee-900); margin:.6rem 0; }
.pay-badge { display:inline-block; background:#fff3cd; color:#9a7d00; border-radius:.6rem; padding:.3rem .9rem; font-size:.85rem; font-weight:600; }
.pay-order { color:var(--muted); font-size:.9rem; }
.pay-amount { font-size:2rem; font-weight:800; color:var(--coffee-800); margin:.8rem 0; font-variant-numeric: tabular-nums; }
.pay-amount span { font-size:1rem; color:var(--muted); }
.pay-actions { display:flex; gap:1rem; justify-content:center; margin-top:1.2rem; flex-wrap:wrap; }
.pay-actions .btn-coffee, .pay-actions .btn-reject, .pay-actions .btn-ghost { padding:.7rem 1.4rem; }
.pay-fail-icon { width:64px; height:64px; border-radius:50%; background:#fde8e8; color:#a23b3b; font-size:2rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }

/* ---------- Order ---------- */
.order-success { background:#fff; border-radius:1rem; padding:1.8rem; text-align:center; box-shadow:0 6px 22px rgba(60,36,23,.1); margin:1.2rem 0; border:2px solid #d8f0d8; }
.order-success.delivered { border-color:var(--accent); }
.order-success .check { width:60px; height:60px; border-radius:50%; background:var(--moss-soft); color:var(--moss); font-size:1.8rem; display:flex; align-items:center; justify-content:center; margin:0 auto .8rem; }
.order-success h2 { color:var(--coffee-900); margin:0 0 .6rem; }
.pickup-code { font-size:2.4rem; font-weight:900; letter-spacing:.4rem; color:var(--ember); background:var(--cream-100); border:2px dashed var(--coffee-300); border-radius:.8rem; padding:.6rem; margin:.6rem auto; display:inline-block; min-width:200px; }
.order-table { width:100%; border-collapse:collapse; margin-top:1rem; }
.order-table th, .order-table td { padding:.55rem .4rem; text-align:start; border-bottom:1px solid var(--cream-200); font-size:.9rem; }
.order-table thead th { color:var(--muted); font-weight:600; }
.order-table tfoot td { font-weight:700; color:var(--coffee-800); border-bottom:0; }
.order-link { text-decoration:none; }

/* ---------- Settlements ---------- */
.settle-amounts { display:flex; flex-direction:column; gap:.15rem; font-size:.85rem; text-align:start; }
.settle-amounts .payable { color:var(--moss); }
.muted { color:var(--muted); font-size:.85rem; }

/* ---------- Order realtime / shop orders ---------- */
.order-success.ready-pulse { border-color:var(--accent); animation:pulse 1.4s ease-in-out infinite; }
.order-success.ready-pulse .check { background:#fff3cd; color:#b8860b; }
@keyframes pulse {
    0%, 100% { box-shadow:0 6px 22px rgba(60,36,23,.1); }
    50% { box-shadow:0 6px 30px rgba(240,160,60,.5); }
}
.shop-order .order-items-line { color:var(--coffee-600); font-size:.84rem; }
.deliver-code { width:140px; padding:.4rem .6rem; letter-spacing:.2rem; text-align:center; }

/* ---------- Brand logo ---------- */
.brand { min-height:44px; }
.brand-logo, .footer-brand-logo { display:block; height:auto; flex-shrink:0; transition:opacity .2s ease, transform .25s ease; }
.brand-logo { width:186px; }
.footer-brand-logo { width:218px; }
.brand:hover .brand-logo, .foot-brand:hover .footer-brand-logo { transform:translateY(-1px); opacity:.9; }
.foot-brand { display:flex; align-items:center; width:fit-content; color:var(--cream-100); }
@media (max-width:960px) { .brand-logo { width:166px; } }
@media (max-width:760px) {
    .brand-logo { width:156px; }
    .footer-brand-logo { width:206px; }
}
@media (max-width:360px) { .brand-logo { width:136px; } }

/* ---------- Steam C loading signature: stable cup, rising steam ---------- */
#app-loader {
    position:fixed; inset:0; z-index:9999;
    display:grid; place-items:center;
    overflow:hidden;
    background:radial-gradient(ellipse at 50% 48%, #2c1910 0, #20110c 30%, #1b0f0a 64%);
    opacity:1; visibility:visible;
    transition:opacity .42s cubic-bezier(.2,.65,.3,1), visibility .42s;
    /* CSS fallback also releases the page if the lifecycle script cannot load. */
    animation:steam-loader-safety .01s 6s forwards;
}
#app-loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.app-loader-inner { position:relative; display:grid; width:260px; height:280px; place-items:center; isolation:isolate; }
.loader-aura { position:absolute; z-index:-1; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(240,160,60,.15), rgba(240,160,60,.035) 43%, transparent 69%); animation:steam-aura-breathe 3.4s ease-in-out infinite; }
.loader-pedestal { position:absolute; bottom:24px; width:94px; height:8px; border-radius:50%; background:radial-gradient(ellipse, rgba(240,160,60,.25), transparent 70%); animation:steam-pedestal-breathe 3.4s ease-in-out infinite; }
.loader-mark { position:relative; display:block; width:220px; height:auto; overflow:visible; color:var(--accent); }
.loader-emblem { transform-origin:140px 190px; animation:steam-emblem-arrive .8s cubic-bezier(.16,1,.3,1) both; }
.loader-cup-reveal { transform-origin:140px 265px; animation:steam-cup-reveal .75s cubic-bezier(.22,.8,.2,1) both; }
.loader-steam-core { transform-origin:172px 148px; animation:steam-core-breathe 2.8s ease-in-out infinite; }
.loader-steam-echo { opacity:0; transform-origin:172px 148px; animation:steam-vapor-rise 2.8s cubic-bezier(.2,.6,.4,1) infinite; }
.loader-steam-echo--second { animation-delay:1.4s; }
.loader-glint { opacity:0; animation:steam-gold-pass 3.4s .5s ease-in-out infinite; }
#app-loader.hidden .app-loader-inner { transform:translateY(-8px) scale(1.025); transition:transform .42s cubic-bezier(.2,.65,.3,1); }
@keyframes steam-emblem-arrive {
    from { opacity:0; transform:translateY(12px) scale(.91); }
    to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes steam-cup-reveal {
    from { clip-path:inset(100% 0 0 0); }
    to { clip-path:inset(0 0 0 0); }
}
@keyframes steam-core-breathe {
    0%, 100% { opacity:.86; transform:translateY(1px) scale(.98,1); }
    50% { opacity:1; transform:translate(2px,-4px) scale(1.035,1.035); }
}
@keyframes steam-vapor-rise {
    0%, 12% { opacity:0; transform:translate(0,3px) scale(.9,.96); }
    35% { opacity:.22; }
    78%, 100% { opacity:0; transform:translate(9px,-48px) scale(1.1,1.2); }
}
@keyframes steam-gold-pass {
    0%, 8% { opacity:0; transform:translateX(-290px); }
    18% { opacity:.5; }
    42% { opacity:0; transform:translateX(290px); }
    100% { opacity:0; transform:translateX(290px); }
}
@keyframes steam-aura-breathe {
    0%, 100% { opacity:.6; transform:scale(.92); }
    50% { opacity:1; transform:scale(1.08); }
}
@keyframes steam-pedestal-breathe {
    0%, 100% { opacity:.45; transform:scaleX(.82); }
    50% { opacity:.8; transform:scaleX(1.1); }
}
@keyframes steam-loader-safety { to { opacity:0; visibility:hidden; pointer-events:none; } }
@media (max-width:560px) {
    .app-loader-inner { width:220px; height:250px; }
    .loader-mark { width:194px; }
    .loader-aura { width:228px; height:228px; }
    .loader-pedestal { bottom:23px; width:80px; }
}
@media (prefers-reduced-motion: reduce) {
    #app-loader, #app-loader.hidden .app-loader-inner { transition:none; }
    #app-loader .app-loader-inner, #app-loader .app-loader-inner * { animation:none; transform:none; }
    .loader-emblem, .loader-steam-core { opacity:1; }
    .loader-cup-reveal { clip-path:none; }
    .loader-steam-echo, .loader-glint { display:none; }
    .loader-aura { opacity:.6; }
    .loader-pedestal { opacity:.45; }
    .brand-logo, .footer-brand-logo { transition:none; }
    .brand:hover .brand-logo, .foot-brand:hover .footer-brand-logo { transform:none; }
}

/* ---------- Home: hero ---------- */
.hero { background:linear-gradient(180deg, #fbf6ee 0%, var(--cream-100) 100%); border-bottom:1px solid rgba(200,162,122,.25); }
.hero-inner { max-width:1200px; margin:0 auto; padding:2.4rem 1.2rem 2.2rem; display:grid; grid-template-columns:1.05fr 1fr; gap:2.4rem; align-items:center; }
.hero-copy h1 { font-size:2.6rem; font-weight:900; line-height:1.25; margin:0 0 .6rem; color:var(--coffee-900); text-wrap:balance; }
.hero-copy h1 b { color:var(--ember); font-weight:900; }
.hero-sub { color:var(--muted); font-size:1.05rem; margin:0 0 1.2rem; max-width:44ch; }
/* جعبه‌ی جستجو، لنگر بصری هیرو است: پهن‌تر، برجسته‌تر و با فیلدهای جادار. */
.hero-search { display:grid; grid-template-columns:1.1fr 1fr 1.5fr auto; gap:.55rem; background:#fff; border:1px solid rgba(200,162,122,.45); border-radius:1.25rem; padding:.65rem; box-shadow:var(--shadow-lg); }
.hero-search select, .hero-search input { min-width:0; padding:.78rem .9rem; border:1px solid rgba(200,162,122,.55); border-radius:.85rem; background:#fff; font-family:inherit; font-size:1rem; color:var(--text); transition:border-color .15s, box-shadow .15s; }
.hero-search select:focus, .hero-search input:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(240,160,60,.25); }
.hero-search select:disabled { opacity:.55; }
.hero-search .btn-coffee { padding:.78rem 1.6rem; white-space:nowrap; border-radius:.85rem; font-size:1rem; }
/* اعداد به‌عنوان «اثبات اجتماعی»: سه کاشی کوچک به‌جای یک ردیف لخت. */
.hero-stats { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.7rem; margin-top:1.4rem; }
.hero-stats div { display:flex; flex-direction:column; gap:.1rem; background:rgba(255,255,255,.7); border:1px solid rgba(200,162,122,.35); border-radius:.9rem; padding:.7rem .95rem; }
.hero-stats b { font-size:1.75rem; font-weight:900; color:var(--ember); line-height:1.15; font-variant-numeric:tabular-nums; }
.hero-stats span { color:var(--muted); font-size:.84rem; line-height:1.4; }
.hero-visual { position:relative; }
.hero-visual::before { content:''; position:absolute; inset:0; border-radius:1.25rem; background:linear-gradient(160deg, var(--coffee-300), var(--coffee-600)); transform:rotate(-4deg) translate(-10px, 12px); opacity:.35; }
.hero-visual .hero-slider { margin:0; position:relative; }
.hero-visual .slides { height:360px; }
/* اسلایدر در هیرو فقط تصویر است؛ عنوانش یک برچسب کوچک است، نه تیتر/CTA رقیبِ ستون متن. */
.hero-visual .slide .caption { inset-inline-start:1rem; inset-inline-end:auto; bottom:1rem; padding:.45rem .95rem; font-size:.95rem; font-weight:700; line-height:1.4; background:rgba(27,15,10,.55); border:1px solid rgba(255,255,255,.14); border-radius:999px; backdrop-filter:blur(6px); text-shadow:none; display:inline-flex; }
/* نقطه‌ها به سمت مقابلِ برچسب می‌روند تا روی هم نیفتند. */
.hero-visual .slider-dots { inset-inline-start:auto; inset-inline-end:1.1rem; transform:none; bottom:1.35rem; }
.hero-skel { position:relative; height:360px; border-radius:1.25rem; background:linear-gradient(90deg, var(--cream-200) 25%, #f3e9dd 50%, var(--cream-200) 75%); background-size:200% 100%; animation:shimmer 1.2s linear infinite; }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
/* زیر ~۱۱۰۰px ستون متن به‌اندازه‌ی چهار فیلد کنار هم جا ندارد (انتخاب‌ها بریده می‌شدند) → ۲×۲. */
@media (max-width: 1100px) {
    .hero-search { grid-template-columns:1fr 1fr; }
    .hero-search input, .hero-search .btn-coffee { grid-column:1 / -1; }
}
@media (max-width: 900px) {
    .hero-inner { grid-template-columns:1fr; gap:1.3rem; padding:1.5rem 1rem 1.4rem; }
    .hero-copy h1 { font-size:1.9rem; }
    .hero-stats { gap:.5rem; }
    .hero-stats div { padding:.55rem .7rem; }
    .hero-stats b { font-size:1.35rem; }
    .hero-stats span { font-size:.76rem; }
    /* روی موبایل، اسلایدر زیر متن+جستجو+آمار می‌افتد؛ کوتاه‌تر می‌شود تا صفحه‌ی اول خیلی بلند نشود. */
    .hero-visual .slides, .hero-skel { height:220px; }
    .hero-visual::before { display:none; }
}
@media (max-width: 600px) {
    .hero-visual .slides, .hero-skel { height:190px; }
    .hero-visual .slide .caption { font-size:.85rem; padding:.35rem .8rem; }
}

/* ---------- Home: انتخاب استان (نقشه‌ی جغرافیایی روی دسکتاپ، کاشی‌ها روی موبایل) ---------- */
.only-desktop { display:block; }
.only-mobile { display:none; }
@media (max-width: 900px) { .only-desktop { display:none; } .only-mobile { display:block; } }

.province-pick { margin-top:2.4rem; }
/* دسکتاپ: نقشه (راست) + مراحل «همین الان شروع کن!» به‌صورت عمودی (چپ). روی موبایل این بلوک پنهان است. */
/* نقشه ارتفاع ثابت و عرض متناسب (نسبت viewBox حفظ می‌شود)؛ ستون مراحل هم‌ارتفاع نقشه کشیده می‌شود و کل بلوک وسط‌چین است. */
.map-with-steps { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:1.2rem; align-items:stretch; }
.map-with-steps .iran-map svg { width:100%; height:auto; aspect-ratio:1000 / 905; max-height:none; }
.steps-aside { display:flex; flex-direction:column; gap:.9rem; }
.steps-aside .steps.steps--vertical { flex:1; grid-auto-rows:1fr; }
.steps-aside .step { align-items:center; padding:1.2rem 1.4rem; gap:1.1rem; }
.steps-aside .step i { width:46px; height:46px; font-size:1.2rem; }
.steps-aside .step h3 { font-size:1.2rem; margin-bottom:.35rem; }
.steps-aside .step p { font-size:.98rem; }
/* آیکون بزرگ سمت چپ کاشی‌های مرحله — فقط در ستون کنار نقشه (دسکتاپ)؛ روی موبایل پنهان. */
.step .step-icon { display:none; }
.steps-aside .step .step-icon { display:block; flex:none; margin-inline-start:auto; font-size:2.9rem; color:var(--coffee-300); opacity:.85; transition:color .2s, transform .2s; }
.steps-aside .step:hover .step-icon { color:var(--ember); transform:scale(1.08) rotate(-6deg); }
.steps-aside-title { margin:0; font-size:1.25rem; font-weight:800; color:var(--coffee-900); display:flex; align-items:center; gap:.5rem; }
.steps-aside-title::before { content:''; width:5px; height:1.1rem; border-radius:3px; background:var(--accent); }
.steps.steps--vertical { grid-template-columns:1fr; align-content:start; gap:.9rem; }
.province-pick .section-head { margin-bottom:.9rem; }

/* --- IranMap.razor: نقشه‌ی SVG --- */
.iran-map { background:#fff; border:1px solid rgba(200,162,122,.35); border-radius:1.25rem; padding:1rem 1.2rem .5rem; box-shadow:var(--shadow-sm); }
.iran-map svg { width:100%; height:auto; max-height:600px; display:block; margin:0 auto; overflow:visible; }
.im-prov { fill:var(--cream-200); stroke:#fff; stroke-width:1.8; stroke-linejoin:round; cursor:pointer; outline:none; transition:fill .15s; }
.im-prov--n1 { fill:#f3d9a8; }
.im-prov--n2 { fill:#eab866; }
.im-prov--n3 { fill:#dd9538; }
.im-prov--hover, .im-prov:hover, .im-prov:focus-visible { fill:var(--accent); }
.im-prov--selected, .im-prov--selected.im-prov--hover, .im-prov--selected:hover { fill:var(--ember); }
.im-label { font-family:inherit; font-size:19px; font-weight:700; fill:var(--coffee-800); text-anchor:middle; dominant-baseline:middle; pointer-events:none; paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round; }
.im-label--selected { fill:#fff; stroke:var(--ember); }
.im-caption { display:flex; gap:.4rem; align-items:baseline; justify-content:center; min-height:1.6rem; margin-top:.4rem; font-size:.92rem; color:var(--coffee-800); }
.im-caption .muted { color:var(--muted); }

/* --- ProvinceTiles.razor: کارتوگرام کاشی‌ای --- */
.ptiles { background:#fff; border:1px solid rgba(200,162,122,.35); border-radius:1.25rem; padding:1rem; box-shadow:var(--shadow-sm); }
.ptiles-head { display:flex; gap:.5rem; margin-bottom:.9rem; }
.ptiles-search { flex:1; min-width:0; display:flex; align-items:center; gap:.4rem; border:1px solid var(--cream-200); border-radius:999px; padding:.45rem .85rem; background:#fff; }
.ptiles-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(240,160,60,.2); }
.ptiles-search span { font-size:.85rem; opacity:.55; }
.ptiles-search input { border:0; outline:0; font-family:inherit; font-size:.95rem; color:var(--text); width:100%; min-width:0; padding:0; }
.ptiles-clear { flex:none; width:20px; height:20px; border-radius:50%; border:0; background:var(--cream-200); color:var(--coffee-800); cursor:pointer; font-size:.7rem; display:flex; align-items:center; justify-content:center; padding:0; }
.ptiles-toggle { flex:none; border:1px solid var(--coffee-300); background:#fff; color:var(--coffee-800); border-radius:999px; padding:.45rem .9rem; font-family:inherit; font-weight:700; font-size:.85rem; cursor:pointer; white-space:nowrap; transition:background .15s, color .15s; }
.ptiles-toggle.active { background:var(--coffee-800); color:var(--cream-100); border-color:var(--coffee-800); }
.ptiles-flat { display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:.5rem; }
.ptiles-grid { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:.3rem; direction:ltr; }
.ptile { aspect-ratio:1; border:1px solid var(--cream-200); border-radius:.75rem; background:var(--cream-100); color:var(--coffee-800); font-family:inherit; font-weight:700; font-size:.85rem; line-height:1.25; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; padding:.25rem; cursor:pointer; direction:rtl; text-align:center; transition:background .15s, color .15s, border-color .15s, transform .15s; }
.ptiles-flat .ptile { aspect-ratio:auto; min-height:64px; }
.ptiles-grid .ptile { font-size:.66rem; border-radius:.5rem; padding:.1rem; }
.ptile span { font-size:.7rem; font-weight:500; color:var(--muted); }
.ptile--n1 { background:#f8e9cc; }
.ptile--n2 { background:#f3d29a; }
.ptile--n3 { background:#ecb862; }
.ptile:hover { border-color:var(--accent); transform:translateY(-1px); }
.ptile--selected, .ptile--selected:hover { background:var(--ember); border-color:var(--ember); color:#fff; }
.ptile--selected span { color:var(--cream-100); }
.ptiles-empty { color:var(--muted); font-size:.9rem; padding:.5rem 0; text-align:center; }

/* --- نتیجه‌ی انتخاب استان روی صفحه‌ی اصلی --- */
.province-empty { background:#fff; border:1px dashed var(--coffee-300); border-radius:1.25rem; padding:2rem 1.5rem; text-align:center; }
.province-empty p { margin:0 0 1rem; font-size:1.05rem; line-height:1.9; color:var(--coffee-800); }
.province-empty p b { color:var(--ember); }

/* ---------- Home: chips, rail, bento, steps, owner band ---------- */
.city-chips { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:1.4rem 0 .2rem; }
.city-chips .lbl { color:var(--muted); font-size:.9rem; }
.city-chips a { background:#fff; border:1px solid rgba(200,162,122,.5); border-radius:999px; padding:.32rem .95rem; font-size:.9rem; color:var(--coffee-800); font-weight:500; transition:background .15s, color .15s, border-color .15s, transform .15s; }
.city-chips a:hover { background:var(--coffee-900); color:var(--accent); border-color:var(--coffee-900); transform:translateY(-1px); }

.rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px, 1fr); gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.3rem .2rem 1rem; scrollbar-width:thin; scrollbar-color:var(--coffee-300) transparent; }

/* --- CardRail.razor: فلش‌های چپ/راست ریل — فقط با hover ظاهر می‌شوند و در لبه‌ها پنهان --- */
.rail-wrap { position:relative; }
.rail-arrow {
    position:absolute; top:calc(50% - .5rem); z-index:3;
    width:46px; height:46px; border-radius:50%; padding:0;
    background:#fff; border:1px solid var(--cream-200); color:var(--coffee-800);
    box-shadow:0 6px 18px rgba(27,15,10,.18); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none;
    transform:translateY(-50%) scale(.7);
    transition:opacity .22s ease, transform .22s cubic-bezier(.22,1,.36,1), background .15s, border-color .15s, color .15s;
}
.rail-arrow--left { left:-.7rem; }
.rail-arrow--right { right:-.7rem; }
.rail-wrap:hover .rail-arrow, .rail-wrap:focus-within .rail-arrow { opacity:1; pointer-events:auto; transform:translateY(-50%) scale(1); }
.rail-arrow:hover { background:var(--accent); border-color:var(--accent); color:var(--coffee-900); }
.rail-arrow:active { transform:translateY(-50%) scale(.94); }
.rail-wrap--at-start .rail-arrow--right,
.rail-wrap--at-end .rail-arrow--left,
.rail-wrap--no-scroll .rail-arrow { opacity:0 !important; pointer-events:none !important; transform:translateY(-50%) scale(.7) !important; }
@media (max-width: 900px), (hover: none) { .rail-arrow { display:none; } }
.rail > * { scroll-snap-align:start; }
.rail::-webkit-scrollbar { height:6px; }
.rail::-webkit-scrollbar-thumb { background:var(--coffee-300); border-radius:3px; }
@media (max-width: 560px) { .rail { grid-auto-columns:80%; } }

.bento { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.2rem; }
.bento > .shop-card:first-child { grid-column:span 2; grid-row:span 2; }
.bento > .shop-card:first-child .thumb { flex:1; height:auto; min-height:280px; }
.bento > .shop-card:first-child h3 { font-size:1.4rem; }
.bento > .shop-card:first-child .body { flex:0 0 auto; }
@media (max-width: 900px) {
    .bento { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .bento > .shop-card:first-child { grid-column:span 2; grid-row:auto; }
    .bento > .shop-card:first-child .thumb { min-height:210px; }
}
@media (max-width: 560px) { .bento { grid-template-columns:1fr; } .bento > .shop-card:first-child { grid-column:auto; } }

.steps { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.2rem; }
.step { background:#fff; border:1px solid rgba(200,162,122,.35); border-radius:1rem; padding:1.2rem 1.1rem; display:flex; gap:.9rem; align-items:flex-start; box-shadow:var(--shadow-sm); }
.step i { flex:none; width:38px; height:38px; border-radius:50%; background:var(--accent); color:var(--coffee-900); font-style:normal; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.step h3 { margin:0 0 .2rem; font-size:1.05rem; font-weight:700; color:var(--coffee-900); }
.step p { margin:0; color:var(--muted); font-size:.92rem; line-height:1.75; }
@media (max-width: 760px) { .steps { grid-template-columns:1fr; } }

.owner-band { margin:2.6rem 0 0; background:linear-gradient(120deg, var(--ember) 0%, #7a2e1f 100%); color:var(--cream-100); border-radius:1.25rem; padding:1.7rem 1.9rem; display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; box-shadow:var(--shadow-md); }
.owner-band h2 { margin:0 0 .2rem; font-size:1.5rem; font-weight:800; color:#fff; }
.owner-band p { margin:0; opacity:.9; }
.owner-band .btn-coffee { background:var(--accent); color:var(--coffee-900); box-shadow:none; padding:.7rem 1.5rem; }
.owner-band .btn-coffee:hover { background:var(--accent-deep); }

/* --- MudBlazor (پنل ادمین/پروفایل): افزایش فاصله‌ی برچسب از ورودی + تعویض اندازه‌ی برچسب و متن ---
   پیش‌فرض MudBlazor برچسب را کوچک‌تر و چسبیده به ورودی نشان می‌داد؛ طبق درخواست این دو معکوس شد. */
.mud-input-control-input-container { padding-top: 16px; }
.mud-input-label.mud-input-label-inputcontrol {
    transform: translate(0, -14px) scale(1) !important;
    font-size: 1rem !important;
}
.mud-input-root, .mud-input-slot.mud-input-root {
    font-size: 0.8rem !important;
}

/* --- کل سایت: پس‌زمینه‌ی سفید برای همه‌ی عناصر ورودی فرم ---
   !important چون کلاس‌هایی مثل .auth-input/.filters input/.hero-search select
   خودشان background ست می‌کنند و به‌خاطر specificity بالاتر (کلاس > تگ) رول ساده‌ی
   input/select/textarea را override می‌کردند. */
input, select, textarea,
input[type="date"], input[type="time"], input[type="datetime-local"],
.auth-input, .filters input, .filters select, .hero-search input, .hero-search select {
    background-color: #fff !important;
}

/* --- کلماتی که به لاتین (Waze, Coffee, ایمیل و ...) وسط متن فارسی می‌آیند ---
   letter-spacing منفی سراسری برای حروف فارسی خوب است اما حروف لاتین را روی هم می‌اندازد؛
   این کلاس فقط همان بخش لاتین را به letter-spacing عادی برمی‌گرداند. */
.ltr-text {
    letter-spacing: normal;
    unicode-bidi: isolate;
    direction: ltr;
    display: inline-block;
}

/* ================= Modal (کامپوننت عمومی Shared/Modal.razor) ─────────────────
   نام کلاس‌ها عمداً modal-overlay/modal-panel است، نه modal-backdrop/modal-card —
   آن دو نام قبلاً برای دیالوگ تاییدِ ساده‌ی CoffeeShopDetail.razor استفاده شده‌اند
   و هم‌نام کردن باعث تداخل استایل (position:fixed/top:50%/left:50% آن روی این
   کامپوننت هم اعمال می‌شد و در حالت موبایل کارت را نصفه از صفحه بیرون می‌انداخت). */
.modal-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(27,15,10,.55);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.modal-overlay--in { animation: modalBackdropIn .25s ease-out both; }
.modal-overlay--out { animation: modalBackdropOut .18s ease-in both; }
@keyframes modalBackdropIn { from { opacity:0; } to { opacity:1; } }
@keyframes modalBackdropOut { from { opacity:1; } to { opacity:0; } }

.modal-panel {
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(200,162,122,.15);
    width: 100%;
    max-height: calc(100vh - 2rem);
    display: flex; flex-direction: column;
    overflow: hidden;
    outline: none;
}
.modal-panel--sm { max-width: 420px; }
.modal-panel--md { max-width: 620px; }
.modal-panel--lg { max-width: 880px; }

.modal-panel--in { animation: modalCardIn .32s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.modal-panel--out { animation: modalCardOut .18s ease-in both; }
@keyframes modalCardIn { from { opacity:0; transform: translateY(18px) scale(.94); } to { opacity:1; transform: translateY(0) scale(1); } }
@keyframes modalCardOut { from { opacity:1; transform: translateY(0) scale(1); } to { opacity:0; transform: translateY(10px) scale(.96); } }

.modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.3rem;
    background: linear-gradient(120deg, var(--ember) 0%, var(--ember-deep) 100%);
    color: #fff;
    flex-shrink: 0;
}
.modal-head-text { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.modal-head-text h3 { margin: 0; font-size: 1.15rem; font-weight: 800; color: #fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modal-icon { font-size: 1.4rem; line-height: 1; }
.modal-close {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 0;
    background: rgba(255,255,255,.16); color: #fff; font-size: 1rem; cursor: pointer;
    display:flex; align-items:center; justify-content:center;
    transition: background .15s, transform .15s;
}
.modal-close:hover { background: rgba(255,255,255,.28); transform: rotate(90deg); }

.modal-body { padding: 1.3rem; overflow-y: auto; flex: 1 1 auto; }
.modal-foot { padding: 1rem 1.3rem; border-top: 1px solid var(--cream-200); display:flex; align-items:center; justify-content:flex-end; gap:.7rem; flex-wrap:wrap; flex-shrink:0; background:var(--cream-100); }

@media (max-width: 600px) {
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal-panel { max-width: 100% !important; max-height: 92vh; border-radius: 1.25rem 1.25rem 0 0; }
    .modal-panel--in { animation: modalCardInMobile .3s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .modal-panel--out { animation: modalCardOutMobile .2s ease-in both; }
}
@keyframes modalCardInMobile { from { opacity:0; transform: translateY(100%); } to { opacity:1; transform: translateY(0); } }
@keyframes modalCardOutMobile { from { transform: translateY(0); opacity:1; } to { transform: translateY(60px); opacity:0; } }

/* ================= DataTable (کامپوننت عمومی Shared/DataTable.razor) ================= */
.dtable {
    --dtable-border: rgba(122,82,64,.16);
    --dtable-hover: #fffaf4;
    --dtable-focus: rgba(240,160,60,.2);
    width:100%; min-width:0;
}
.dtable-selection-bar {
    position:relative; z-index:6;
    display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
    margin-bottom:.7rem; padding:.62rem .75rem;
    border:1px solid rgba(47,93,80,.2); border-radius:.9rem;
    background:linear-gradient(135deg,#f3faf6,#fff); box-shadow:0 7px 20px rgba(27,15,10,.045);
}
.dtable-selection-count { display:flex; align-items:center; gap:.35rem; color:var(--muted); font-size:.78rem; }
.dtable-selection-count svg { width:20px; height:20px; fill:none; stroke:var(--moss); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dtable-selection-count strong { color:var(--moss); font-size:.92rem; }
.dtable-selection-actions { display:flex; align-items:center; gap:.45rem; margin-inline-start:auto; }
.dtable-selection-clear { min-height:36px; padding:.35rem .65rem; border:0; border-radius:.6rem; background:transparent; color:var(--muted); font:600 .75rem/1.5 inherit; cursor:pointer; }
.dtable-selection-clear:hover { background:var(--cream-100); color:var(--coffee-800); }
.dtable-actions-row {
    position:relative; z-index:5;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:.75rem; direction:ltr; margin-bottom:.85rem;
    padding:.7rem; background:rgba(255,255,255,.72); border:1px solid var(--dtable-border);
    border-radius:1rem; box-shadow:0 8px 25px rgba(27,15,10,.045); backdrop-filter:blur(8px);
}
.dtable-toolbar {
    display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
    direction:rtl; flex:1 1 440px; min-width:0;
}
.dtable-search {
    display:flex; align-items:center; gap:.55rem; margin:0;
    min-height:44px; padding:.45rem .75rem; min-width:210px; flex:1 1 220px; max-width:310px;
    background:#fff; border:1px solid var(--dtable-border); border-radius:.75rem;
    transition:border-color .18s, box-shadow .18s, background .18s;
}
.dtable-search:hover { border-color:rgba(122,82,64,.34); }
.dtable-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px var(--dtable-focus); }
.dtable-search--active { border-color:rgba(176,69,48,.5); background:#fffdf9; }
.dtable-search-icon { width:19px; height:19px; flex-shrink:0; fill:none; stroke:var(--muted); stroke-width:1.9; stroke-linecap:round; }
.dtable-search input { border:0; outline:0; background:transparent; font-family:inherit; font-size:.88rem; color:var(--text); width:100%; min-width:0; }
.dtable-search input::placeholder { color:#9b8d81; opacity:1; }
.dtable-search-clear { flex-shrink:0; width:26px; height:26px; border-radius:.5rem; border:0; background:var(--cream-100); color:var(--coffee-700); cursor:pointer; display:grid; place-items:center; padding:0; transition:background .15s, color .15s; }
.dtable-search-clear svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.dtable-search-clear:hover { background:#f7e3de; color:var(--ember); }
.dtable-clear-filters { border:0; background:transparent; color:var(--ember); padding:.35rem .45rem; font:600 .78rem/1.5 inherit; cursor:pointer; white-space:nowrap; }
.dtable-clear-filters:hover { color:var(--ember-deep); text-decoration:underline; }
.dtable-count { margin-inline-start:auto; display:inline-flex; align-items:baseline; gap:.3rem; min-height:34px; padding:.3rem .7rem; border-radius:999px; background:var(--cream-100); color:var(--muted); white-space:nowrap; font-size:.76rem; }
.dtable-count strong { color:var(--coffee-800); font-size:.9rem; font-variant-numeric:tabular-nums; }

/* --- DataTable: حالت جدولی با هدر ستون‌ها (وقتی Headers داده شود) --- */
/* جدول وقتی ستون‌ها از عرض صفحه بیشتر شوند افقی اسکرول می‌شود؛ min-width واقعی روی
   .dtable-inner از جمع حداقل عرض ستون‌ها در DataTable.razor محاسبه و inline گذاشته می‌شود. */
.dtable-grid {
    position:relative; z-index:1;
    background:#fff; border:1px solid var(--dtable-border); border-radius:1rem; box-shadow:0 10px 30px rgba(27,15,10,.055);
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scrollbar-color:var(--coffee-300) transparent;
}
.dtable-grid::-webkit-scrollbar { height:8px; }
.dtable-grid::-webkit-scrollbar-thumb { background:var(--coffee-300); border-radius:999px; }
.dtable-inner { display:grid; width:100%; column-gap:.75rem; }
.dtable-head { display:grid; grid-column:1 / -1; grid-template-columns:subgrid; padding:.78rem 1rem; background:linear-gradient(180deg,#fcf8f3 0%,#f7efe5 100%); border-bottom:1px solid var(--dtable-border); }
.dtable-th { display:flex; align-items:center; min-height:24px; font-size:.75rem; font-weight:750; color:var(--coffee-700); letter-spacing:-.01em; }
.dtable-select-cell { display:flex; align-items:center; justify-content:center; overflow:visible; }
.dtable-select-cell input {
    appearance:none; display:grid; place-content:center; width:19px; height:19px; margin:0;
    border:1.5px solid var(--coffee-300); border-radius:.38rem; background:#fff; cursor:pointer;
    transition:background .15s, border-color .15s, box-shadow .15s;
}
.dtable-select-cell input::before { content:''; width:9px; height:5px; border:solid #fff; border-width:0 0 2px 2px; transform:rotate(-45deg) scale(0); transition:transform .12s; }
.dtable-select-cell input:checked {
    border-color:var(--moss);
    /* The site-wide form rule forces every input background to white with !important.
       Override it only for selected DataTable checkboxes so the white tick stays visible. */
    background-color:var(--moss) !important;
}
.dtable-select-cell input:checked::before { transform:rotate(-45deg) scale(1); }
.dtable-select-cell input[aria-checked="mixed"] { border-color:var(--moss); background:linear-gradient(var(--moss),var(--moss)) center/9px 2px no-repeat #fff; }
.dtable-select-cell input:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(47,93,80,.2); }
.dtable-rows { display:contents; }
.dtable-row { display:grid; grid-column:1 / -1; grid-template-columns:subgrid; align-items:center; min-height:68px; padding:.7rem 1rem; border-bottom:1px solid var(--dtable-border); transition:background .16s, box-shadow .16s; }
.dtable-row:last-child { border-bottom:0; }
.dtable-row:hover { background:var(--dtable-hover); box-shadow:inset -3px 0 0 var(--accent); }
.dtable-row--selected { background:#f5faf7; box-shadow:inset -3px 0 0 var(--moss); }
.dtable-row--selected:hover { background:#f0f8f4; box-shadow:inset -3px 0 0 var(--moss); }
.dtable-td { min-width:0; color:var(--text); font-size:.86rem; overflow:hidden; text-overflow:ellipsis; line-height:1.7; }
.dtable-td strong { color:var(--coffee-800); }
.dtable-td--img img { width:46px; height:46px; border-radius:.7rem; object-fit:cover; background:var(--cream-200); display:block; box-shadow:0 2px 8px rgba(27,15,10,.12); }
.dtable-td--actions { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; overflow:visible; }
.dtable-td--actions .sm { min-height:34px; display:inline-flex; align-items:center; justify-content:center; margin:0; white-space:nowrap; }

/* ستون آخر (دکمه‌ها) هنگام اسکرول افقی سمت چپ ثابت می‌ماند (سایت RTL است، پس انتهای ردیف = چپ). */
.dtable-grid--sticky-end .dtable-head > :last-child,
.dtable-grid--sticky-end .dtable-row > :last-child {
    position:sticky; left:0; z-index:2; align-self:stretch;
    display:flex; align-items:center; padding-inline:.5rem;
}
.dtable-grid--sticky-end .dtable-head > :last-child {
    z-index:3;
    justify-content:center;
    text-align:center;
    background:linear-gradient(180deg,#fcf8f3 0%,#f7efe5 100%);
    background-clip:padding-box;
}
.dtable-grid--sticky-end .dtable-row > :last-child { background:#fff; transition:background .15s; }
.dtable-grid--sticky-end .dtable-row:hover > :last-child { background:var(--dtable-hover); }
.dtable-grid--sticky-end .dtable-row--selected > :last-child { background:#f5faf7; }
.dtable-grid--sticky-end .dtable-row--selected:hover > :last-child { background:#f0f8f4; }

/* زیر ۷۰۰px: هدر مخفی می‌شود و هر ردیف به کارت عمودی تبدیل می‌شود؛ برچسب هر سلول
   از data-label (که در RowTemplate روی خودِ سلول گذاشته می‌شود) با ::before ساخته می‌شود. */
@media (max-width:700px) {
    .dtable-actions-row { padding:.65rem; border-radius:.9rem; background:#fff; }
    .dtable-toolbar { flex-basis:100%; }
    .dtable-search { min-width:100%; max-width:none; }
    .dtable-count { margin-inline-start:0; }
    .dtable-clear-filters { margin-inline-start:auto; }
    .dtable-grid { overflow:visible; background:transparent; border:0; border-radius:0; box-shadow:none; }
    .dtable-inner { display:block; min-width:0 !important; }
    .dtable-rows { display:flex; flex-direction:column; }
    .dtable-grid--sticky-end .dtable-row > :last-child { position:static; box-shadow:none; background:transparent; padding-inline:0; }
    .dtable-head { display:none; }
    .dtable-rows { gap:.75rem; }
    .dtable-row { position:relative; grid-template-columns:1fr !important; gap:0; min-height:0; padding:.85rem 1rem; border:1px solid var(--dtable-border); border-radius:1rem; background:#fff; box-shadow:0 7px 22px rgba(27,15,10,.06); overflow:hidden; }
    .dtable-row:hover { background:#fff; box-shadow:0 9px 26px rgba(27,15,10,.09); }
    .dtable-row--selected, .dtable-row--selected:hover { background:#f5faf7; border-color:rgba(47,93,80,.28); box-shadow:0 8px 24px rgba(47,93,80,.1); }
    .dtable-row::after { content:''; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:linear-gradient(var(--accent),var(--ember)); opacity:.75; }
    .dtable-td { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; width:100%; padding:.56rem 0; border-bottom:1px dashed rgba(122,82,64,.14); overflow:visible; text-align:end; }
    .dtable-select-cell { justify-content:flex-start; width:auto; padding:.08rem 0 .5rem; border-bottom:0; }
    .dtable-td[data-label]::before { content:attr(data-label); min-width:34%; max-width:44%; font-size:.74rem; font-weight:650; color:var(--muted); flex-shrink:0; text-align:start; }
    .dtable-td--img { justify-content:flex-start; border-bottom:0; padding:.1rem 0 .65rem; }
    .dtable-td--img img { width:64px; height:64px; border-radius:.85rem; }
    .dtable-td--actions { justify-content:flex-start; gap:.5rem; margin-top:.28rem; padding:.75rem 0 .08rem; border-top:1px solid var(--dtable-border); border-bottom:0; }
    .dtable-td--actions .sm { flex:1 1 auto; min-height:40px; padding-inline:.7rem; }
    .dtable-td:not(.dtable-td--actions):last-child { border-bottom:0; }
    .dtable-td--img::before, .dtable-td--actions::before { display:none; }
}

@media (max-width:600px) {
    .dtable-selection-bar { align-items:stretch; }
    .dtable-selection-count { width:100%; }
    .dtable-selection-actions { flex:1; margin-inline-start:0; }
    .dtable-selection-actions > * { flex:1; }
    .dtable-selection-clear { flex:0 0 auto; }
}

/* Empty state */
.dtable-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:250px; padding:2.25rem 1rem; text-align:center; background:#fff; border:1px dashed rgba(122,82,64,.28); border-radius:1rem; color:var(--muted); }
.dtable-empty-icon { display:grid; place-items:center; width:58px; height:58px; margin-bottom:.8rem; border-radius:1rem; background:var(--cream-100); color:var(--coffee-500); }
.dtable-empty-icon svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.dtable-empty strong { color:var(--coffee-800); font-size:1rem; }
.dtable-empty p { max-width:520px; margin:.3rem 0 0; font-size:.86rem; }
.dtable-empty-reset { margin-top:.9rem; padding:.48rem .9rem; border:1px solid var(--coffee-300); border-radius:.65rem; background:#fff; color:var(--coffee-800); font:650 .82rem/1.5 inherit; cursor:pointer; }
.dtable-empty-reset:hover { background:var(--cream-100); }

/* --- DataTable: دکمه‌ی گزارش‌گیری (خروجی Excel/CSV) --- */
.dtable-export { position: relative; flex-shrink: 0; }
.dtable-export-btn {
    display:flex; align-items:center; gap:.5rem; min-height:44px;
    background:var(--coffee-800); border:1px solid var(--coffee-800); border-radius:.75rem;
    padding:.5rem .8rem; font-family:inherit; font-size:.84rem; font-weight:650;
    color:#fff; cursor:pointer; transition:background .15s, border-color .15s, transform .15s;
}
.dtable-export-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dtable-export-btn .dtable-export-chevron { width:15px; height:15px; opacity:.7; margin-inline-start:.15rem; }
.dtable-export-btn:hover { border-color:var(--coffee-700); background:var(--coffee-700); transform:translateY(-1px); }
.dtable-export-backdrop { position: fixed; inset: 0; z-index: 30; background: transparent; }
.dtable-export-menu {
    position:absolute; top:calc(100% + .45rem); left:0; z-index:31;
    background:#fff; border:1px solid var(--dtable-border); border-radius:.85rem;
    box-shadow:0 14px 34px rgba(27,15,10,.16); overflow:hidden; min-width:170px;
    display:flex; flex-direction:column; padding:.35rem; direction:rtl;
}
.dtable-export-menu-title { padding:.3rem .6rem .4rem; font-size:.7rem; color:var(--muted); font-weight:600; }
.dtable-export-menu button {
    display:flex; align-items:center; gap:.55rem; background:none; border:0; border-radius:.55rem; padding:.55rem .6rem; text-align:start; direction:ltr;
    font-family:inherit; font-size:.84rem; font-weight:600; color:var(--text); cursor:pointer;
}
.dtable-export-menu button:hover { background: var(--cream-100); color: var(--coffee-800); }
.dtable-file-icon { display:grid; place-items:center; width:24px; height:24px; border-radius:.4rem; background:var(--moss-soft); color:var(--moss); font:bold .7rem/1 system-ui; }
@media (max-width:600px) { .dtable-actions-row { flex-direction:column; align-items:stretch; } .dtable-export, .dtable-export-btn { width:100%; } .dtable-export-btn { justify-content:center; } .dtable-export-menu { width:100%; } }

/* --- DataTable: صفحه‌بندی --- */
.dtable-pager {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem;
    margin-top:.85rem; padding:.65rem .75rem; background:#fff; border:1px solid var(--dtable-border); border-radius:.9rem;
    box-shadow:0 7px 22px rgba(27,15,10,.045);
}
.dtable-pager-info { font-size: .85rem; color: var(--muted); font-weight: 600; }
.dtable-pager-nav { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.dtable-page-btn {
    min-width:36px; height:36px; padding:0 .55rem; border-radius:.65rem;
    border:1px solid var(--dtable-border); background:#fff; color:var(--coffee-800);
    font-family:inherit; font-size:.84rem; font-weight:700; cursor:pointer;
    transition:background .15s, border-color .15s, color .15s, transform .15s;
}
.dtable-page-btn:hover:not(:disabled):not(.active) { border-color:var(--coffee-300); background:var(--cream-100); transform:translateY(-1px); }
.dtable-page-btn.active { background: var(--ember); border-color: var(--ember); color: #fff; }
.dtable-page-btn:disabled { opacity: .4; cursor: default; }
.dtable-page-gap { padding: 0 .2rem; color: var(--muted); }
.dtable-pager-size { display:flex; align-items:center; gap:.45rem; margin:0; font-size:.8rem; color:var(--muted); font-weight:600; }
.dtable-pager-size select {
    min-height:36px; border:1px solid var(--dtable-border); border-radius:.6rem; padding:.3rem .55rem;
    background:#fff; font-family:inherit; font-size:.82rem; color:var(--coffee-800); cursor:pointer;
}
@media (max-width:600px) {
    .dtable-pager { justify-content:center; padding:.75rem .6rem; }
    .dtable-pager-info { width:100%; text-align:center; order:1; }
    .dtable-pager-nav { order:2; justify-content:center; }
    .dtable-pager-size { order:3; width:100%; justify-content:center; padding-top:.15rem; }
}

/* --- تب‌های ادمین (مثلاً تسویه‌نشده/تسویه‌شده در AdminSettlements.razor) ---
   در عرض کم تب‌ها نمی‌شکنند و ردیف افقی اسکرول می‌شود. خط زیرین با inset box-shadow کشیده شده
   (نه border + margin منفی) چون overflow-x:auto هر چیزِ بیرون‌زده از پایین را هم می‌بُرد. */
.admin-tabs {
    display: flex; flex-wrap: nowrap; gap: .5rem; margin-bottom: 1.2rem;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    box-shadow: inset 0 -2px 0 var(--cream-200);
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab {
    flex-shrink: 0; white-space: nowrap;
    background: none; border: 0; padding: .8rem 1.3rem;
    font-family: inherit; font-size: .95rem; font-weight: 700; color: var(--muted);
    cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
@media (max-width:600px) { .admin-tab { padding: .7rem 1rem; font-size: .9rem; } }
.admin-tab:hover { color: var(--coffee-800); }
.admin-tab.active { color: var(--coffee-800); border-bottom-color: var(--ember); }

/* --- دکمه‌ی متنی شبیه لینک (مثلاً عدد «تعداد سفارش» که مودال جزئیات را باز می‌کند) --- */
.link-btn {
    background: none; border: 0; padding: 0; margin: 0; font-family: inherit;
    color: var(--ember); font-weight: 700; text-decoration: underline; cursor: pointer; font-size: inherit;
}
.link-btn:hover { color: var(--coffee-800); }

/* --- ردیف‌های admin-row که خودشان یک <button> کلیک‌پذیرند (مثلاً لیست کافی‌شاپ‌های یک کاربر در مودال) --- */
.shop-link-row {
    width: 100%; border: 0; cursor: pointer; font-family: inherit; text-align: inherit;
    justify-content: space-between; transition: background .15s, box-shadow .15s;
}
.shop-link-row:hover { background: var(--cream-100); box-shadow: 0 4px 16px rgba(60,36,23,.1); }