/* MapCafe public map page – ported from WordPress (mapcafe-page-styles) + responsive/mobile hardening. */
:root {
    --bg: #f5f5f0;
    --primary: #c0392b;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

* {
    -webkit-tap-highlight-color: transparent;
}

/* آیکون‌های SVG داخلی */
.mi {
    vertical-align: -3px;
    flex: none;
}

.locate-btn .mi,
.custom-popup-close .mi,
.nav-modal-close .mi,
.story-viewer-close .mi,
.story-map-btn .mi {
    vertical-align: middle;
}

.recent-card .stars,
.story-card-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.follow-btn,
.story-follow-btn-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Vazirmatn, Tahoma, sans-serif;
    direction: rtl;
    background: var(--bg);
    overflow: hidden;
    overscroll-behavior: none;
}

#mapcafe-offline-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#mapcafe-offline-map {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* دکمهٔ لوکیشن – کنار پنل اخیر، سمت راست */
.locate-btn {
    position: fixed;
    bottom: calc(30vh + 12px + var(--safe-bottom));
    right: calc(15px + var(--safe-right));
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    z-index: 501;
    border: none;
    transition: transform 0.2s;
}

.locate-btn:active {
    transform: scale(0.92);
}

/* دکمهٔ استوری – کنار پنل اخیر، سمت چپ */
#story-icon-btn {
    position: fixed;
    bottom: calc(30vh + 12px + var(--safe-bottom));
    left: calc(15px + var(--safe-left));
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
    border: none;
    font-size: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 501;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

#story-icon-btn:active {
    transform: scale(0.92);
}

/* مارکرهای ترکیبی */
.composite-marker {
    /* باید همانند `.maplibregl-marker` مطلق بماند؛ در غیر این صورت در چیدمان
       راست‌به‌چپ مارکر به لبهٔ راست پرت می‌شود و با زوم/تغییر عرض جابه‌جا می‌شود. */
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    width: 60px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.marker-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    transform-origin: bottom center;
}

/* اجزای نشان نباید فشرده شوند؛ با بزرگ‌ترشدن محتوا (ستاره/تاج) فقط رو به بالا
   رشد می‌کند و لنگر پایین (مختصات) ثابت می‌ماند. بدون این، دایره بیضی می‌شد. */
.marker-emblem,
.marker-stars,
.marker-main {
    flex: 0 0 auto;
}

.marker-main {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* دایرهٔ سفید پشت مارکرها برداشته شد (درخواست کاربر): آیکون/عکس بدون
       پس‌زمینهٔ سفید می‌ماند. پله‌های ستاره‌دار (tier-1..6) پس‌زمینهٔ اختصاصی
       خود را از قواعد پایین‌تر می‌گیرند و دست‌نخورده می‌مانند. */
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    position: relative;
    z-index: 2;
}

/* سایهٔ ملایم شناور فقط برای مارکرهای بدون پله (پله‌های ستاره‌دار سیستمِ
   سایه/هالهٔ خود را دارند). سایه روی خودِ عنصر اعمال می‌شود تا `.marker-face`
   (با overflow:hidden) آن را نبرد و شکل آیکون/عکس را دنبال کند. */
.composite-marker.tier-0 .marker-main {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* در تم شبانهٔ نقشه، آیکونِ بدون دایره باید روشن باشد تا روی بوم تیره خوانا
   بماند و با هالهٔ ملایم از پس‌زمینه جدا شود (دایرهٔ سفید پیش‌تر همین کنتراست
   را می‌داد). صفت تم روی ظرف نقشه گذاشته می‌شود و مارکرها فرزند آن‌اند. */
[data-mapcafe-theme="dark"] .marker-glyph { color: #e7e3dc; }
[data-mapcafe-theme="dark"] .composite-marker.tier-0 .marker-main {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
}

.marker-type {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 3;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==================== نشان ستاره‌دارها (پله‌های ۱ تا ۵ + تاجدار) ============
   هدف: حس «ویژه‌بودن» و «ستاره‌دار بودن»؛ پلهٔ ۵ پرتجمل‌ترین حالت عادی است
   (هالهٔ چرخان، درخشش نبضی و جرقه) و «۵ ستارهٔ تاجدار» (سطح ۶) بالاترین مقام
   است که تاج جای دایره می‌نشیند و لوگو داخل تاج قرار می‌گیرد. همهٔ انیمیشن‌ها
   فقط روی transform/opacity/filter هستند و با prefers-reduced-motion خاموش
   می‌شوند. */
.composite-marker.is-starred .marker-main {
    border-style: solid;
}

.composite-marker.is-starred .marker-glyph,
.composite-marker.is-starred .marker-logo {
    filter: drop-shadow(0 1px 2px rgba(120, 72, 0, 0.35));
}

.marker-glyph {
    display: inline-flex;
    color: #334155;
}

.marker-logo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

/* صورت داخلی دایره: نگه‌دارندهٔ لوگو/آیکون با ماسک برای درخشش کشویی. */
.marker-face {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── پلهٔ ۱: برنزی، ظریف ── */
.composite-marker.tier-1 .marker-main {
    border-width: 2.5px;
    border-color: #b0752a;
    background: #fffdf7;
    box-shadow: 0 0 6px rgba(176, 117, 42, 0.35), 0 2px 7px rgba(0, 0, 0, 0.25);
}
.composite-marker.tier-1 .marker-glyph { color: #7a4d14; }
.composite-marker.tier-1 .marker-star { color: #b0752a; }

/* ── پلهٔ ۲: طلایی روشن ── */
.composite-marker.tier-2 .marker-main {
    width: 42px;
    height: 42px;
    border-width: 2px;
    border-color: #d9a93b;
    background: #fffdf4;
    box-shadow: 0 0 8px rgba(217, 169, 59, 0.45), 0 2px 8px rgba(0, 0, 0, 0.28);
}
.composite-marker.tier-2 .marker-glyph { color: #8a6a12; }
.composite-marker.tier-2 .marker-star { color: #d9a93b; }

/* ── پلهٔ ۳: طلایی پررنگ با هالهٔ گرم ── */
.composite-marker.tier-3 .marker-main {
    width: 44px;
    height: 44px;
    border-width: 3px;
    border-color: #e8b923;
    background: #fffcef;
    box-shadow: 0 0 12px rgba(232, 185, 35, 0.55), 0 2px 10px rgba(0, 0, 0, 0.3);
}
.composite-marker.tier-3 .marker-glyph { color: #7a5c08; }
.composite-marker.tier-3 .marker-star { color: #e0a800; }

/* ── پلهٔ ۴: پریمیوم (صورت تیره + حلقهٔ طلایی + هالهٔ ملایم) ── */
.composite-marker.tier-4 .marker-main {
    width: 46px;
    height: 46px;
    border-width: 3px;
    border-color: #f2c14e;
    background: linear-gradient(160deg, #232838 0%, #12151d 100%);
    box-shadow: 0 0 16px rgba(242, 193, 78, 0.55), 0 3px 12px rgba(0, 0, 0, 0.4);
}
.composite-marker.tier-4 .marker-glyph { color: #ffd970; }
.composite-marker.tier-4 .marker-star { color: #f7d774; }

/* ── پلهٔ ۵: استثنایی (هالهٔ چرخان + نبض + درخشش + جرقه) ── */
.composite-marker.tier-5 .marker-main {
    width: 48px;
    height: 48px;
    border-width: 3px;
    border-color: #ffe08a;
    background: linear-gradient(155deg, #2a3046 0%, #10131c 55%, #241c07 100%);
    box-shadow: 0 0 22px rgba(255, 208, 84, 0.7), 0 0 46px rgba(255, 190, 40, 0.35), 0 3px 14px rgba(0, 0, 0, 0.45);
    animation: starPulse 2.6s ease-in-out infinite;
}

/* پرتوهای چرخان پشت دایره (فقط پلهٔ ۵): پره‌های نازک و درخشان. */
.composite-marker.tier-5 .marker-main::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 92px;
    height: 92px;
    margin: -46px 0 0 -46px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 216, 110, 0.72) 0deg 2.2deg,
        rgba(255, 216, 110, 0) 2.2deg 12deg
    );
    /* فقط نوک پرتوها می‌ماند؛ مرکز پوشیده می‌شود تا زیر دایره پنهان بماند. */
    -webkit-mask: radial-gradient(circle, transparent 24px, #000 28px, rgba(0, 0, 0, 0.55) 37px, transparent 45px);
    mask: radial-gradient(circle, transparent 24px, #000 28px, rgba(0, 0, 0, 0.55) 37px, transparent 45px);
    z-index: 0;
    pointer-events: none;
    animation: starRays 8s linear infinite;
}
.composite-marker.tier-5 .marker-glyph { color: #ffe9a8; }
.composite-marker.tier-5 .marker-star { color: #ffe066; }

/* درخشش کشویی روی صورت نشان (پلهٔ ۴ و ۵). */
.composite-marker.tier-4 .marker-face::after,
.composite-marker.tier-5 .marker-face::after {
    content: '';
    position: absolute;
    inset: -10%;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);
    transform: translateX(-130%);
    pointer-events: none;
}
.composite-marker.tier-5 .marker-face::after {
    animation: starShine 3.4s ease-in-out infinite;
}
.composite-marker.tier-4 .marker-face::after {
    transform: translateX(-40%);
    opacity: 0.5;
}

/* ردیف ستاره‌ها بالای نشان، با کمان ملایم (هر ستاره با --drop تنظیم می‌شود). */
.marker-stars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
    margin-bottom: 1px;
    line-height: 0;
}

.marker-star {
    display: inline-flex;
    transform: translateY(var(--drop, 0px));
    filter: drop-shadow(0 1px 2px rgba(120, 72, 0, 0.5));
}

.composite-marker.tier-5 .marker-star {
    filter: drop-shadow(0 0 4px rgba(255, 214, 84, 0.95));
    /* فقط درخشش نبضی؛ transform دست‌نخورده می‌ماند تا کمان ستاره‌ها نلرزد. */
    animation: starGlow 2.2s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

/* جرقه‌های تزئینی (در تاجدار). */
.marker-sparkle {
    display: inline-flex;
    color: #ffe9a8;
    filter: drop-shadow(0 0 4px rgba(255, 224, 128, 0.95));
    animation: starTwinkle 1.9s ease-in-out infinite;
}
.marker-sparkle--l { animation-delay: 0s; }
.marker-sparkle--r { animation-delay: 0.95s; }

/* ── سطح ۶: «۵ ستارهٔ تاجدار» ──
   تاج جای دایره می‌نشیند، لوگو به‌صورت نگین داخل تاج قرار می‌گیرد و هالهٔ
   خورشیدی چرخان + درخشش کشویی + جرقه، حس «بالاترین مقام» را می‌دهد. */
.composite-marker.tier-6 .marker-main {
    width: 112px;
    height: 112px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

/* هالهٔ نور نرم پشت تاج — با opacity/scale انیمیت می‌شود (ارزان، بدون repaint). */
.composite-marker.tier-6 .marker-crown-halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 226, 130, 0.55) 0%,
        rgba(255, 200, 64, 0.32) 34%,
        rgba(255, 190, 40, 0.12) 58%,
        rgba(255, 190, 40, 0) 72%);
    z-index: 0;
    pointer-events: none;
    animation: crownHaloPulse 3s ease-in-out infinite;
}

/* پرتوهای چرخان خورشیدی پشت تاج. چرخش transform روی لایهٔ کامپوزیت‌شده
   انجام می‌شود؛ گرادیان یک‌بار رستر می‌شود و هر فریم بازرسم نمی‌شود. */
.composite-marker.tier-6 .marker-crown-rays {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 190px;
    height: 190px;
    margin: -95px 0 0 -95px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 224, 130, 0.95) 0deg 1.6deg,
        rgba(255, 200, 60, 0) 1.6deg 10deg
    );
    -webkit-mask: radial-gradient(circle, transparent 30px, #000 36px, rgba(0, 0, 0, 0.5) 58px, transparent 94px);
    mask: radial-gradient(circle, transparent 30px, #000 36px, rgba(0, 0, 0, 0.5) 58px, transparent 94px);
    z-index: 0;
    pointer-events: none;
    will-change: transform;
    animation: starRays 9s linear infinite;
}

/* خود تاج: گرادیان طلا از خودِ SVG می‌آید؛ اینجا فقط عمق و درخشش ایستا. */
.composite-marker.tier-6 .marker-crown {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    color: #ffcf3f;
    filter: drop-shadow(0 2px 3px rgba(90, 55, 0, 0.6)) drop-shadow(0 0 8px rgba(255, 206, 74, 0.75));
    z-index: 1;
}

/* حلقهٔ نگین: قاب طلایی نقش‌دار دور نگین. */
.composite-marker.tier-6 .marker-gem-ring {
    position: absolute;
    left: 50%;
    /* نگین در «تنهٔ» تاج می‌نشیند، نه روی نوک‌های تاج؛ پس کمی به پایین جابه‌جا
       می‌شود تا تاج بالای آن دیده شود. */
    top: calc(50% - 7px);
    box-sizing: border-box;
    /* اندازهٔ نگین = بیشترین اندازهٔ مارکرهای عادی (۴۸px) تا سلسله‌مراتب
       «تاج بزرگ‌تر از همه» حفظ شود. */
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        #fff4c8 0deg, #f0b32a 60deg, #8a5606 120deg, #ffdf80 180deg,
        #e0a018 240deg, #fff0bc 300deg, #c98a12 360deg);
    box-shadow: 0 0 10px rgba(255, 210, 90, 0.7);
    z-index: 1;
}

/* نگین تاج: لوگو/آیکون داخل تاج. */
.composite-marker.tier-6 .marker-face {
    position: absolute;
    left: 50%;
    top: calc(50% - 7px);
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: radial-gradient(circle at 35% 28%, #3a3020 0%, #17120a 58%, #0a0805 100%);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.9), 0 0 12px rgba(255, 214, 96, 0.55);
    z-index: 2;
    overflow: hidden;
}
.composite-marker.tier-6 .marker-gem {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.composite-marker.tier-6 .marker-logo { width: 36px; height: 36px; }
.composite-marker.tier-6 .marker-glyph { color: #ffe9a8; }
.composite-marker.tier-6 .marker-star {
    color: #ffe066;
    filter: drop-shadow(0 0 4px rgba(255, 214, 84, 0.9));
    animation: starGlow 2.4s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

/* درخشش کشویی نگین تاج. */
.composite-marker.tier-6 .marker-face::after {
    content: '';
    position: absolute;
    inset: -10%;
    background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, 0.8) 50%, transparent 64%);
    transform: translateX(-130%);
    pointer-events: none;
    animation: starShine 3.2s ease-in-out infinite;
}

/* جرقه‌های سه‌گانه پیرامون تاج. */
.composite-marker.tier-6 .marker-sparkle {
    position: absolute;
    top: 50%;
    z-index: 3;
}
.composite-marker.tier-6 .marker-sparkle--l { left: 2px; margin-top: -44px; }
.composite-marker.tier-6 .marker-sparkle--r { right: 2px; margin-top: -32px; }
.composite-marker.tier-6 .marker-sparkle--t { left: 50%; margin-left: -6px; margin-top: -56px; }

@keyframes starPulse {
    0%, 100% { box-shadow: 0 0 18px rgba(255, 208, 84, 0.55), 0 0 38px rgba(255, 190, 40, 0.25), 0 3px 14px rgba(0, 0, 0, 0.45); }
    50% { box-shadow: 0 0 28px rgba(255, 214, 96, 0.95), 0 0 60px rgba(255, 196, 48, 0.5), 0 3px 14px rgba(0, 0, 0, 0.45); }
}

@keyframes starRays {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes starShine {
    0% { transform: translateX(-130%); }
    55%, 100% { transform: translateX(130%); }
}

@keyframes starTwinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.62; transform: scale(0.86); }
}

@keyframes starGlow {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 3px rgba(255, 214, 84, 0.7)); }
    50% { opacity: 0.82; filter: drop-shadow(0 0 7px rgba(255, 224, 128, 1)); }
}

/* هاله فقط opacity/scale را عوض می‌کند تا هر فریم بازرسم تحمیل نشود. */
@keyframes crownHaloPulse {
    0%, 100% { opacity: 0.75; transform: scale(0.94); }
    50% { opacity: 1; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .composite-marker.tier-5 .marker-main,
    .composite-marker.tier-5 .marker-main::before,
    .composite-marker.tier-5 .marker-face::after,
    .composite-marker.tier-5 .marker-star,
    .composite-marker.tier-6 .marker-crown-halo,
    .composite-marker.tier-6 .marker-crown-rays,
    .composite-marker.tier-6 .marker-face::after,
    .composite-marker.tier-6 .marker-star,
    .marker-sparkle {
        animation: none !important;
    }
}

/* پاپ‌آپ کافه */
.custom-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: calc(20px + var(--safe-top)) calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left));
    box-sizing: border-box;
    flex-direction: column;
}

.custom-popup-overlay.active {
    display: flex;
}

.custom-popup-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #e74c3c;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    margin-bottom: -16px;
    z-index: 11;
    position: relative;
}

.custom-popup {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    width: 100%;
    max-width: 340px;
    max-height: 80vh;
    max-height: 80dvh;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    position: relative;
    direction: rtl;
    text-align: right;
    color: #2c3e50;
    font-family: Vazirmatn, Tahoma, sans-serif;
    z-index: 10;
}

.popup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.popup-header .cafe-name {
    font-size: 16px;
    font-weight: bold;
    color: #c0392b;
    flex: 1;
}

/* نشان ستارهٔ کارت پاپ‌آپ (هماهنگ با پله‌های مارکر). */
.star-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1.7;
    border: 1px solid transparent;
}

/* نشان سیاست جنسیتی کسب‌وکار (بانوان/آقایان) در کارت پاپ‌آپ؛ شفافیت پین. */
.gender-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1.7;
}

.gender-badge.is-women {
    background: #fde7f0;
    color: #9b2c5e;
    border: 1px solid #f3a6be;
}

.gender-badge.is-men {
    background: #e3edf8;
    color: #1e4e79;
    border: 1px solid #9dc0e0;
}

.star-badge-crown,
.star-badge-icons,
.star-badge-label {
    position: relative;
    z-index: 1;
}

.star-badge-crown {
    display: inline-flex;
    color: #b8860b;
}

.star-badge-icons {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    line-height: 0;
}

.star-badge.tier-1 {
    background: #fbf3e4;
    border-color: #e0c294;
    color: #8a5a1c;
}
.star-badge.tier-1 .star-badge-icons { color: #b0752a; }

.star-badge.tier-2 {
    background: #fdf6e0;
    border-color: #ead494;
    color: #8a6a12;
}
.star-badge.tier-2 .star-badge-icons { color: #d9a93b; }

.star-badge.tier-3 {
    background: #fdf3d1;
    border-color: #e8c860;
    color: #7a5c08;
}
.star-badge.tier-3 .star-badge-icons { color: #e0a800; }

/* پله‌های ۴ و ۵: نشان طلایی تیره (بدون تاج؛ تاج فقط برای سطح ۶). */
.star-badge.tier-4 {
    background: linear-gradient(135deg, #3a3218 0%, #1f1b0d 100%);
    border-color: #f2c14e;
    color: #ffe9a8;
    box-shadow: 0 1px 6px rgba(242, 193, 78, 0.4);
}
.star-badge.tier-4 .star-badge-icons { color: #ffd970; }

.star-badge.tier-5 {
    background: linear-gradient(135deg, #4a3b12 0%, #1a1508 55%, #2c2409 100%);
    border-color: #ffe08a;
    color: #fff3cf;
    box-shadow: 0 0 12px rgba(255, 208, 84, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}
.star-badge.tier-5 .star-badge-icons { color: #ffe066; }

/* درخشش کشویی روی نشان ۵ ستاره. */
.star-badge.tier-5::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
    transform: translateX(-130%);
    pointer-events: none;
    animation: starShine 3.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .star-badge.tier-5::after { animation: none !important; }
}

/* سطح ۶: نشان ویژهٔ «۵ ستاره تاجدار» — تاج + درخشش ممتاز. */
.star-badge.tier-6 {
    background: linear-gradient(135deg, #6a5414 0%, #211a08 50%, #3f3109 100%);
    border-color: #ffe9a8;
    color: #fff8de;
    box-shadow: 0 0 16px rgba(255, 208, 84, 0.8), 0 2px 9px rgba(0, 0, 0, 0.38);
    position: relative;
    overflow: hidden;
}
.star-badge.tier-6 .star-badge-crown { color: #ffd75e; }
.star-badge.tier-6 .star-badge-icons { color: #ffe066; }

.star-badge.tier-6::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, 0.6) 50%, transparent 64%);
    transform: translateX(-130%);
    pointer-events: none;
    animation: starShine 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .star-badge.tier-6::after { animation: none !important; }
}

.popup-info {
    font-size: 12px;
    color: #555;
    margin-bottom: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.popup-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.popup-open-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: bold;
}

.popup-open-chip.is-open {
    background: #e4f7ee;
    color: #1f9d63;
}

.popup-open-chip.is-closed {
    background: #fdecea;
    color: #c0392b;
}

.popup-hours-today {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #666;
}

.popup-business-link {
    margin-top: 10px;
    width: 100%;
    padding: 10px;
    background: #fff;
    color: #c0392b;
    border: 1px solid #e0b7b1;
    border-radius: 8px;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    box-sizing: border-box;
}

.popup-info .address {
    flex: 1;
}

.popup-info .phone {
    direction: ltr;
    font-weight: bold;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
}

.popup-info .feature-tag {
    background: #f5e6d3;
    color: #8B4513;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
}

.popup-menu-title {
    font-weight: bold;
    font-size: 13px;
    margin: 10px 0 5px;
    color: #c0392b;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 4px;
}

.popup-menu-list {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
    font-size: 12px;
}

.popup-menu-list li {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px dotted #f0f0f0;
}

.popup-menu-list .price {
    color: #27ae60;
    font-weight: bold;
}

.popup-menu-list .mi-name {
    display: flex;
    align-items: center;
    gap: 6px;
}

.popup-menu-list .menu-item-thumb {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    flex: 0 0 auto;
}

.popup-gallery {
    margin-top: 10px;
}

.popup-gallery .main-image-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 8px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-gallery .main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popup-gallery .nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    z-index: 5;
    transition: background 0.2s;
    color: #2c3e50;
    pointer-events: auto;
}

.popup-gallery .nav-arrow:hover {
    background: #fff;
}

.popup-gallery .nav-arrow.prev {
    left: 6px;
}

.popup-gallery .nav-arrow.next {
    right: 6px;
}

.popup-gallery .thumbnails {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.popup-gallery .thumbnails img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.popup-gallery .thumbnails img.active {
    border-color: #c0392b;
    transform: scale(1.05);
}

/* پنل کافه‌های اخیر */
#recent-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30vh;
    height: 30dvh;
    min-height: 150px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 500;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s;
    transform: translateY(0);
    padding-bottom: var(--safe-bottom);
}

#recent-panel.collapsed {
    transform: translateY(85%);
}

.panel-toggle {
    text-align: center;
    padding: 6px;
    cursor: pointer;
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    color: #555;
    user-select: none;
}

.panel-scroll {
    flex: 1;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
    -webkit-overflow-scrolling: touch;
}

.recent-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 8px;
    min-width: 100px;
    cursor: pointer;
    transition: transform 0.2s;
    white-space: normal;
    text-align: center;
}

.recent-card:active {
    transform: scale(0.95);
}

.recent-card img.logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 4px;
}

.recent-card .stars {
    color: #F4A460;
    font-size: 12px;
}

.recent-card .cafe-name {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 2px;
}

.recent-card .time {
    font-size: 10px;
    color: #888;
}

.recent-card .recent-open {
    font-size: 10px;
    font-weight: bold;
    border-radius: 999px;
    padding: 1px 7px;
    margin-top: 2px;
}

.recent-card .recent-open.is-open {
    background: #e4f7ee;
    color: #1f9d63;
}

.recent-card .recent-open.is-closed {
    background: #fdecea;
    color: #c0392b;
}

/* مودال مسیریابی */
.nav-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
}

.nav-modal-overlay.active {
    display: flex;
}

.nav-modal-content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    border-radius: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.nav-modal-close {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: calc(10px + var(--safe-left));
    z-index: 20001;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #e74c3c;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.nav-modal-iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
}

/* === Story Viewer (فید عمودی) === */
#story-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: #000;
    z-index: 30000;
    display: none;
    flex-direction: column;
}

#story-viewer-overlay.active {
    display: flex;
}

.story-viewer-close {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: calc(10px + var(--safe-right));
    z-index: 11;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
}

.story-viewer-progress,
.story-viewer-header,
.story-nav {
    display: none !important;
}

#story-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y mandatory;
}

.story-feed-card {
    position: relative;
    min-height: 80vh;
    min-height: 80dvh;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #000;
    margin-bottom: 1px;
}

.story-card-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
    color: #fff;
    z-index: 2;
}

.story-card-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    margin-left: 10px;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
}

.story-card-name {
    font-size: 16px;
    font-weight: bold;
    flex: 1;
}

.story-card-stars {
    color: #FFD700;
    font-size: 14px;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
    margin-right: 6px;
    white-space: nowrap;
}

.story-card-footer {
    position: absolute;
    bottom: calc(15px + var(--safe-bottom));
    left: calc(15px + var(--safe-left));
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 3;
}

.story-map-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.story-follow-btn-inline {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.story-follow-btn-inline.following {
    background: rgba(39, 174, 96, 0.7);
}

/* گزارش تخلف محتوای استوری (اکسپلور) روی هر عکس/ویدئو */
.story-report-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(192, 57, 43, 0.85);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.story-report-btn:active {
    background: rgba(150, 40, 30, 0.95);
}

/* ==== ریسپانسیو موبایل (۳۲۰ تا ۱۰۲۴+) ==== */
@media (max-width: 480px) {
    .custom-popup {
        max-width: 100%;
        max-height: 86dvh;
        border-radius: 18px;
    }

    .custom-popup-overlay {
        padding: calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));
        align-items: flex-end;
    }

    .popup-gallery .main-image-wrapper {
        height: 150px;
    }

    #recent-panel {
        height: 28dvh;
        min-height: 140px;
    }

    .locate-btn,
    #story-icon-btn {
        bottom: calc(28dvh + 10px + var(--safe-bottom));
        width: 46px;
        height: 46px;
    }

    .story-feed-card {
        min-height: 84dvh;
    }
}

@media (max-width: 360px) {
    .panel-toggle {
        font-size: 12px;
        padding: 5px;
    }

    .recent-card {
        min-width: 88px;
        padding: 6px;
    }
}

/* صفحه‌های کوتاه (لنداسکیپ موبایل): کارت بلندتر می‌شود و حاشیهٔ عمودی کم */
@media (max-height: 480px) {
    .custom-popup {
        max-height: 94dvh;
    }

    .custom-popup-overlay {
        padding-top: calc(8px + var(--safe-top));
        padding-bottom: calc(8px + var(--safe-bottom));
    }
}

@media (min-width: 768px) {
    .custom-popup {
        max-width: 420px;
    }

    .popup-gallery .main-image-wrapper {
        height: 220px;
    }

    .story-feed-card {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .nav-modal-content {
        width: 90%;
        height: 90%;
        border-radius: 16px;
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* نظرهای عمومی کافه در پنجرهٔ پاپ‌آپ */
.popup-reviews {
    margin-top: 12px;
}

.popup-reviews-loading {
    font-size: 12px;
    color: #95a5a6;
    text-align: center;
    padding: 6px 0;
}

.popup-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.popup-review {
    background: #faf8f4;
    border: 1px solid #efeae0;
    border-radius: 10px;
    padding: 8px 10px;
}

.popup-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.popup-review-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: bold;
    color: #b8860b;
}

.popup-review-date {
    font-size: 11px;
    color: #95a5a6;
}

.popup-review-comment {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.8;
    color: #2c3e50;
}

.popup-review-reply {
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #eef7ef;
    border: 1px solid #d8ecda;
    font-size: 12px;
    line-height: 1.8;
    color: #2c3e50;
}

/* گزارش تخلف محتوای عمومی از داخل پاپ‌آپ کافه */
.popup-report-btn {
    margin-top: 10px;
    width: 100%;
    padding: 9px;
    background: #fff;
    color: #c0392b;
    border: 1px solid #eccfca;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.popup-report-btn:active {
    background: #fdf3f2;
}

.popup-report-btn.active {
    background: #c0392b;
    color: #fff;
    border-color: #c0392b;
}

.popup-chat-btn {
    margin-top: 10px;
    width: 100%;
    padding: 9px;
    background: #1E88E5;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    text-decoration: none;
}

.popup-chat-btn:active {
    background: #1565C0;
}

.popup-report-hint {
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.8;
    color: #95a5a6;
}

/* ==== حالت انتخاب مورد گزارش (تیک‌زدن بخش‌های قابل گزارش) ==== */
.report-mode-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 10px 12px calc(10px + var(--safe-bottom, 0px));
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
    direction: rtl;
    text-align: right;
    z-index: 20;
    box-sizing: border-box;
}

.report-mode-info {
    font-size: 12.5px;
    color: #55606b;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}

.report-mode-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-mode-submit {
    flex: 1;
    padding: 10px;
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 13.5px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.report-mode-submit[disabled] {
    opacity: 0.55;
    cursor: default;
}

.report-mode-cancel {
    padding: 10px 14px;
    background: #f4f4f4;
    color: #55606b;
    border: none;
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.report-mode-hint {
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.8;
    color: #95a5a6;
}

.custom-popup.report-mode-on {
    padding-bottom: 130px;
}

.custom-popup.report-mode-on .popup-report-hint {
    display: none;
}

/* نشان‌های انتخاب روی بخش‌های قابل گزارش */
.report-candidate {
    position: relative;
}

.popup-header .cafe-name.report-candidate,
.popup-info .address.report-candidate,
.popup-menu-list li.report-candidate {
    padding-left: 30px;
    border-radius: 8px;
    transition: background 0.15s;
}

.popup-menu-list li.report-candidate {
    padding: 4px 6px 4px 30px;
}

.report-candidate.report-picked {
    background: #fdf1f0;
    box-shadow: inset 0 0 0 1.5px #e6a9a3;
}

.report-pick {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #eccfca;
    background: #fff;
    color: #c0392b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 4;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.report-pick.active {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
}

.popup-gallery .main-image-wrapper .report-pick {
    top: 6px;
    left: 6px;
    width: 30px;
    height: 30px;
}

.report-thumb-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.report-thumb-wrap .report-pick {
    top: -4px;
    left: -4px;
    width: 20px;
    height: 20px;
}

.popup-reviews-list .popup-review.report-candidate {
    padding-left: 30px;
}

.report-picked-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.report-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fdf1f0;
    border: 1px solid #eccfca;
    color: #a5322a;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
}

.report-fail-list {
    margin: 6px 0 0;
    padding-right: 18px;
    font-size: 12px;
    line-height: 1.9;
}

.report-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 40000;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}

.report-sheet-overlay.active {
    display: flex;
}

.report-sheet {
    background: #fff;
    width: 100%;
    max-width: 420px;
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25);
    padding: 16px;
    padding-bottom: calc(16px + var(--safe-bottom, 0px));
    box-sizing: border-box;
    direction: rtl;
    text-align: right;
    color: #2c3e50;
    font-family: Vazirmatn, Tahoma, sans-serif;
}

@media (min-width: 640px) {
    .report-sheet-overlay {
        align-items: center;
        padding: 20px;
    }

    .report-sheet {
        border-radius: 18px;
    }
}

.report-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.report-sheet-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    color: #c0392b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.report-sheet-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f4f4f4;
    border: none;
    cursor: pointer;
    color: #7f8c8d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.report-field {
    margin-bottom: 12px;
}

.report-field label {
    display: block;
    font-size: 12.5px;
    font-weight: bold;
    color: #55606b;
    margin-bottom: 5px;
}

.report-field select,
.report-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    border: 1px solid #dfe4e8;
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    color: #2c3e50;
    background: #fbfbfb;
    direction: rtl;
}

.report-field textarea {
    min-height: 74px;
    resize: vertical;
    line-height: 1.8;
}

.report-hint {
    font-size: 11.5px;
    color: #95a5a6;
    line-height: 1.8;
    margin-top: 4px;
}

.report-submit {
    width: 100%;
    padding: 11px;
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 14px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.report-submit[disabled] {
    opacity: 0.6;
    cursor: default;
}

.report-msg {
    border-radius: 9px;
    padding: 9px 11px;
    font-size: 12.5px;
    line-height: 1.9;
    margin-bottom: 12px;
}

.report-msg.ok {
    background: #eef7ef;
    border: 1px solid #d8ecda;
    color: #256b32;
}

.report-msg.err {
    background: #fdf1f0;
    border: 1px solid #f2d5d2;
    color: #a5322a;
}

.report-msg.info {
    background: #f2f6fb;
    border: 1px solid #d9e3f0;
    color: #33587f;
}

.report-login-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    width: 100%;
    padding: 10px;
    background: #1E88E5;
    color: #fff;
    border-radius: 9px;
    font-size: 13.5px;
    text-decoration: none;
    font-weight: bold;
}

/* ==================== مکان‌های پایهٔ نقشه (بذر OSM) ====================
   قواعد: docs/map-places-ownership.md §۳. مارکر پایه همیشه کم‌رنگ و بدون
   ستاره است تا از کافه‌های ثبت‌شده متمایز بماند؛ پررنگی در چهار پله. */

/* مارکر پایه: خودِ لنگر دقیقاً روی مختصات است و برچسب بیرون از جریان و پایین
   آیکون می‌نشیند (هم‌رفتار با `.marker-type` کافه‌های خودمان). */
.base-marker {
    /* همانند `.maplibregl-marker` مطلق می‌ماند تا در RTL به لبهٔ راست پرت نشود
       و با تغییر زوم/عرض، جابه‌جا نشود. */
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    width: 46px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.base-marker-pin {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eceff1;
    border: 2px solid #90a4ae;
    color: #546e7a;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.base-marker:hover .base-marker-pin {
    transform: scale(1.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 4;
}

/* پلهٔ ۱: فقط بذر OSM (کم‌رنگ‌ترین) */
.base-marker.state-seed .base-marker-pin { opacity: 0.45; }

/* پلهٔ ۲: رأی مثبت گرفته (کمی پررنگ‌تر) */
.base-marker.state-positive .base-marker-pin { opacity: 0.65; }

/* پلهٔ ۳: تأییدشدهٔ اجتماعی (پررنگ) */
.base-marker.state-confirmed .base-marker-pin {
    opacity: 0.9;
    border-color: #607d8b;
    color: #37474f;
}

/* پلهٔ ۴: ادعای تأییدشده (پررنگ کامل؛ اتصال به پنل از این لایه حذف می‌شود) */
.base-marker.state-claimed .base-marker-pin {
    opacity: 1;
    border-color: #37474f;
    color: #263238;
}

.base-marker-label {
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 110px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    font-size: 9px;
    font-weight: bold;
    color: #546e7a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

/* ذکر سراسری منبع OSM؛ همیشه روی نقشه دیده می‌شود (§۲-۸). */
.map-osm-attribution {
    position: absolute;
    bottom: 4px;
    left: 6px;
    z-index: 5;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.82);
    color: #455a64;
    font-size: 10px;
    direction: ltr;
    pointer-events: none;
}

#mapcafe-offline-container { position: relative; }

/* کارت مکان پایه در همان پاپ‌آپ مشترک */
.base-place-card { padding: 4px 2px 10px; }

.base-place-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.base-place-head .base-place-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eceff1;
    border: 2px solid #90a4ae;
    color: #546e7a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.base-place-title {
    font-size: 16px;
    font-weight: bold;
    color: #263238;
}

.base-place-chip {
    display: inline-block;
    margin-inline-start: 6px;
    margin-top: 3px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eceff1;
    color: #546e7a;
    font-size: 10.5px;
    font-weight: bold;
}

.base-place-chip.is-state {
    background: #fff4e5;
    color: #a2680a;
}

.base-place-rows {
    border: 1px solid #eceff1;
    border-radius: 10px;
    overflow: hidden;
}

.base-place-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 9px;
    border-bottom: 1px solid #eceff1;
    font-size: 12.5px;
    color: #37474f;
}

.base-place-row:last-child { border-bottom: 0; }

.base-place-row.is-empty {
    justify-content: center;
    color: #90a4ae;
    font-size: 12px;
    text-align: center;
}

.base-place-row-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f0f4f6;
    color: #607d8b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.base-place-row-label {
    flex: 0 0 auto;
    min-width: 62px;
    color: #78909c;
    font-size: 11.5px;
}

.base-place-row .base-place-value {
    flex: 1;
    color: #263238;
    word-break: break-word;
}

.base-place-row .base-place-value a {
    color: #1E88E5;
    text-decoration: none;
}

.osm-field-badge {
    flex: 0 0 auto;
    font-size: 10px;
    color: #607d8b;
    background: #eceff1;
    border-radius: 6px;
    padding: 1px 6px;
}

.base-place-source {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 11px;
    color: #607d8b;
    background: #f5f7f8;
    border: 1px solid #e0e5e8;
    border-radius: 8px;
    padding: 6px 9px;
}

.base-place-source p {
    flex: 1 0 100%;
    margin: 2px 0 0;
    color: #90a4ae;
    font-size: 10.5px;
}

.base-place-actions { margin-top: 12px; }

.base-place-actions button {
    width: 100%;
    padding: 10px;
    border: 0;
    border-radius: 9px;
    background: #1E88E5;
    color: #fff;
    font-size: 13.5px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

/* ==================== بازخورد اجتماعی مکان‌های پایه (§۴) ====================
   قواعد: docs/map-places-ownership.md §۴. کارت پیش‌فرض بسته است و شمارش‌ها با
   وزن اعتبار نمایش داده می‌شوند. */

.base-feedback-card {
    margin-top: 12px;
    border: 1px solid #e0e5e8;
    border-radius: 12px;
    background: #fbfcfd;
    overflow: hidden;
}

.base-feedback-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 11px;
}

.base-feedback-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: bold;
    color: #37474f;
}

.base-feedback-toggle {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #dbe3e7;
    background: #fff;
    color: #546e7a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#base-feedback-content,
#base-suggestion-content {
    padding: 0 11px 12px;
}

.base-feedback-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 4px;
    color: #90a4ae;
    font-size: 12px;
}

.base-feedback-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.base-feedback-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11.5px;
    background: #eceff1;
    color: #455a64;
}

.base-feedback-stat em {
    font-style: normal;
    font-size: 10.5px;
    opacity: 0.8;
}

.base-feedback-stat.is-pos {
    background: #e9f6ec;
    color: #256b32;
}

.base-feedback-stat.is-neg {
    background: #fdeeec;
    color: #a5322a;
}

.base-feedback-stat.is-photo {
    background: #eef3fa;
    color: #33587f;
}

.base-feedback-notice {
    border-radius: 9px;
    padding: 8px 11px;
    font-size: 12.5px;
    line-height: 1.9;
    margin-bottom: 10px;
}

.base-feedback-notice.is-ok {
    background: #eef7ef;
    border: 1px solid #d8ecda;
    color: #256b32;
}

.base-feedback-notice.is-err {
    background: #fdf1f0;
    border: 1px solid #f2d5d2;
    color: #a5322a;
}

.base-feedback-notice.is-info {
    background: #f2f6fb;
    border: 1px solid #d9e3f0;
    color: #33587f;
}

.base-vote-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 11px;
}

.base-vote-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 6px;
    border-radius: 9px;
    border: 1px solid #dbe3e7;
    background: #fff;
    color: #455a64;
    font-size: 12.5px;
    font-weight: bold;
    cursor: pointer;
}

.base-vote-btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

.base-vote-btn.is-positive.active {
    background: #e9f6ec;
    border-color: #b7dfc0;
    color: #1f5f2c;
}

.base-vote-btn.is-negative.active {
    background: #fdeeec;
    border-color: #ecc6c1;
    color: #8f2a22;
}

.base-vote-btn.is-neutral.active {
    background: #f2f6fb;
    border-color: #c8d8ea;
    color: #33587f;
}

.base-feedback-photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 11px;
}

.base-feedback-photo {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #eceff1;
}

.base-feedback-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.base-feedback-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border: 1px dashed #dbe3e7;
    border-radius: 9px;
    color: #90a4ae;
    font-size: 12px;
    margin-bottom: 11px;
}

.base-photo-box {
    border: 1px solid #e0e5e8;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    margin-bottom: 10px;
}

.base-photo-pick-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.base-photo-pick {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 9px;
    border: 1px dashed #b0bec5;
    background: #f7f9fa;
    color: #546e7a;
    font-size: 12.5px;
    font-weight: bold;
    cursor: pointer;
}

.base-photo-input {
    display: none;
}

.base-photo-name {
    flex: 1;
    color: #90a4ae;
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.base-photo-caption {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #dbe3e7;
    border-radius: 9px;
    font-size: 12.5px;
    margin-bottom: 8px;
    font-family: inherit;
}

.base-photo-gallery {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11.5px;
    color: #607d8b;
    line-height: 1.8;
    margin-bottom: 9px;
}

.base-photo-submit {
    width: 100%;
    padding: 9px;
    border: 0;
    border-radius: 9px;
    background: #1E88E5;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.base-photo-submit[disabled] {
    opacity: 0.6;
    cursor: default;
}

.base-feedback-quota {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    color: #78909c;
    font-size: 11px;
    line-height: 1.9;
    margin-bottom: 10px;
}

.base-feedback-gate {
    text-align: center;
    margin-bottom: 10px;
}

.base-feedback-gate p {
    margin: 0 0 2px;
    color: #546e7a;
    font-size: 12.5px;
    line-height: 1.9;
}

.base-feedback-legal {
    color: #90a4ae;
    font-size: 10.5px;
    line-height: 1.9;
}

/* ==================== تکمیل دادهٔ مکان توسط مشتریان (§۲۳) ====================
   نامِ اصلاحی کاربران زیر نام اصلی می‌آید، نه جای آن؛ کارت پیش‌فرض بسته است و
   همهٔ اعداد در جاوااسکریپت فارسی‌سازی می‌شوند (قاعدهٔ اعداد فارسی). */

.base-place-name-suggestions {
    margin: 8px 0 2px;
}

.base-place-name-suggestion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px dashed #cdd8d3;
    border-radius: 10px;
    background: #f4f8f5;
    font-size: 12px;
    color: #37474f;
}

.base-place-name-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #607d8b;
}

.base-place-name-value {
    font-weight: bold;
    color: #256b32;
}

.base-place-name-votes {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
    color: #78909c;
    font-size: 10.5px;
}

.base-suggestion-form {
    margin-bottom: 12px;
}

.base-suggestion-hint {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin: 0 0 9px;
    color: #78909c;
    font-size: 11px;
    line-height: 1.9;
}

.base-suggestion-label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    color: #546e7a;
}

.base-suggestion-select {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 8px 10px;
    border: 1px solid #dbe3e7;
    border-radius: 9px;
    background: #fff;
    color: #37474f;
    font-size: 12.5px;
}

.base-suggestion-input-row {
    display: flex;
    gap: 7px;
    align-items: stretch;
}

.base-suggestion-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid #dbe3e7;
    border-radius: 9px;
    background: #fff;
    color: #37474f;
    font-size: 12.5px;
    font-family: inherit;
    resize: vertical;
}

.base-suggestion-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 13px;
    border: none;
    border-radius: 9px;
    background: #256b32;
    color: #fff;
    font-size: 12.5px;
    cursor: pointer;
}

.base-suggestion-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.base-suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 11px;
}

.base-suggestion-item {
    border: 1px solid #e0e5e8;
    border-radius: 10px;
    padding: 8px 10px;
    background: #fff;
}

.base-suggestion-item.is-replace {
    border-color: #e6ddc8;
    background: #fdfbf5;
}

.base-suggestion-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 3px;
}

.base-suggestion-field {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #37474f;
}

.base-suggestion-mode {
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10.5px;
    background: #eceff1;
    color: #546e7a;
}

.base-suggestion-mode.is-replace {
    background: #f6ecd6;
    color: #8a6d1f;
}

.base-suggestion-value {
    font-size: 12.5px;
    color: #263238;
    line-height: 1.9;
    word-break: break-word;
}

.base-suggestion-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    color: #90a4ae;
    font-size: 10.5px;
}

.base-suggestion-votes {
    display: flex;
    gap: 6px;
    margin-top: 7px;
}

.base-suggestion-vote {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #dbe3e7;
    background: #fff;
    color: #546e7a;
    font-size: 11.5px;
    cursor: pointer;
}

.base-suggestion-vote.is-pos.active {
    border-color: #b6dcc0;
    background: #e9f6ec;
    color: #256b32;
}

.base-suggestion-vote.is-neg.active {
    border-color: #f0cbc7;
    background: #fdeeec;
    color: #a5322a;
}

.base-suggestion-status {
    display: inline-block;
    margin-top: 7px;
    font-size: 11px;
    color: #78909c;
}

.base-suggestion-status.is-accepted {
    color: #256b32;
}

.base-suggestion-status.is-rejected {
    color: #a5322a;
}