/* ============================================================
   Bizinoo — Public design system
   Brand: sky-to-royal blue (#00b9fb → #0032d8) with yellow
   (#fcc102) and teal (#02dbaf) accent dashes, matching the
   official bizinoo.com logo mark (the "b" with a cart glyph).
   Soft lavender-white canvas, rounded cards, light shadows;
   dark surfaces (footer, promo/CTA blocks) use the same blue
   gradient as the logo rather than flat ink.
   ============================================================ */

:root {
    /* --- ink (chrome / text) --- */
    --ink: #0a1428;
    --ink-soft: #33415c;
    --muted: #7c8291;

    /* --- paper (canvas) --- */
    --paper: #f5f8fd;
    --card-bg: #ffffff;
    --border: #e7edf7;

    /* --- primary: Bizinoo blue --- */
    --primary: #0064fb;
    --primary-dark: #0048c4;
    --primary-light: #eaf2ff;
    --primary-gradient: linear-gradient(145deg, #00b9fb, #0032d8);

    /* --- pin: Bizinoo yellow accent (badges, stars, featured markers) --- */
    --pin: #fcc102;
    --pin-dark: #d9a400;
    --pin-light: #fff6dc;

    /* --- status colours --- */
    --success: #2f8f4e;
    --success-light: #eaf7ee;
    --error: #c1432e;
    --error-light: #fbeae7;
    --gold: var(--pin);
    --gold-light: var(--pin-light);
    --accent: #02b894;

    --bg: var(--paper);
    --text: var(--ink);

    --radius: 18px;
    --radius-sm: 11px;
    --shadow: 0 8px 20px rgba(57,20,140,.06);
    --shadow-lg: 0 20px 45px rgba(57,20,140,.14);
}
* { box-sizing: border-box; }
/* تگ <picture> (برای تصاویر ریسپانسیو دسکتاپ/موبایل) هیچ جعبه بصری خودش تولید نمی‌کند تا
   دقیقا مثل قبل (وقتی فقط یک <img> بود) با تمام چیدمان‌های flex/grid موجود سازگار بماند */
picture { display: contents; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
}
.container { max-width: 1180px; margin: 0 auto; padding: 0 1.2rem; }
a { color: var(--primary); text-decoration: none; transition: color .15s ease; }
h1, h2, h3 { line-height: 1.35; font-weight: 800; letter-spacing: -.01em; }
img { max-width: 100%; }

/* ===================== Header ===================== */
.site-header {
    background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 16px rgba(0,100,251,.05);
}
.header-inner { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.2rem; }
.logo {
    display: flex; align-items: center; gap: .55rem;
}
.logo-img { height: 34px; width: auto; display: block; }
#siteNav { display: flex; align-items: center; gap: 1.5rem; }
#siteNav a { color: var(--muted); font-weight: 500; font-size: .95rem; }
#siteNav a:hover { color: var(--primary); }

/* ===================== منوی کشویی «دسته‌بندی‌ها» در نوار بالای سایت ===================== */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
    background: none; border: none; font: inherit; color: var(--muted); cursor: pointer;
    display: flex; align-items: center; gap: .35rem; padding: 0;
}
.nav-dropdown-trigger:hover { color: var(--primary); }
.nav-dropdown-trigger i { font-size: .68rem; transition: transform .15s ease; }
.nav-dropdown.is-open .nav-dropdown-trigger { color: var(--primary); }
.nav-dropdown.is-open .nav-dropdown-trigger i { transform: rotate(180deg); }
.nav-dropdown-panel {
    position: absolute; top: calc(100% + 16px); right: -1rem; background: #fff; border-radius: 14px;
    box-shadow: var(--shadow-lg); border: 1px solid var(--border); padding: .9rem;
    display: none; grid-template-columns: repeat(3, 190px); gap: .15rem;
    z-index: 60; max-height: 70vh; overflow-y: auto;
}
.nav-dropdown.is-open .nav-dropdown-panel { display: grid; }
.nav-dropdown-panel a {
    display: flex; align-items: center; gap: .55rem; padding: .55rem .65rem; border-radius: 9px;
    font-size: .84rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-dropdown-panel a:hover { background: var(--primary-light); color: var(--primary-dark); }
.nav-dropdown-icon { flex-shrink: 0; font-size: 1rem; }
.nav-cta {
    background: var(--primary); color: #fff !important; padding: .55rem 1.25rem; border-radius: 999px;
    font-weight: 700 !important; box-shadow: 0 8px 20px rgba(0,100,251,.28);
}
.nav-cta:hover { background: var(--primary-dark); }
.nav-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--ink); }

/* ===================== Mobile bottom tab bar (Behtarino-style quick nav) ===================== */
.mobile-tabbar { display: none; }

/* ===================== Layout ===================== */
main.container { padding: 2.2rem 1.2rem 4rem; min-height: 70vh; }

/* ===================== Hero ===================== */
/* ===================== Hero image slider (real banner slides) ===================== */
.hero-slider {
    position: relative; border-radius: var(--radius); overflow: hidden; margin-bottom: 1.6rem;
    aspect-ratio: 1536 / 335; background: #061024;
}
.hero-slider-track { position: relative; width: 100%; height: 100%; }
.hero-slide { display: none; position: absolute; inset: 0; }
.hero-slide.active { display: block; animation: heroFade .5s ease; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
.hero-slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.85); border: none; font-size: 1.3rem; cursor: pointer; color: var(--ink);
    display: flex; align-items: center; justify-content: center; z-index: 3;
}
.hero-slider-arrow:hover { background: #fff; }
.hero-slider-arrow.prev { right: 14px; }
.hero-slider-arrow.next { left: 14px; }
.hero-slider-dots { position: absolute; bottom: 14px; right: 50%; transform: translateX(50%); display: flex; gap: .4rem; z-index: 3; }
.hero-slider-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; }
.hero-slider-dots button.active { background: var(--pin); width: 22px; border-radius: 5px; }
@media (max-width: 720px) {
    .hero-slider { aspect-ratio: 4 / 3; }
    .hero-slider-arrow { width: 32px; height: 32px; font-size: 1.1rem; }
}

/* ===================== Search bar section (below slider) ===================== */
.hero-search-bar { text-align: center; padding: 1.6rem 1rem 2.2rem; margin-bottom: 1.6rem; }
.hero-search-bar h1 { font-size: 1.7rem; font-weight: 900; margin: 0 0 .5rem; color: var(--ink); }
.hero-search-bar h1 .accent { color: var(--primary); }
.hero-search-bar p.subtitle { color: var(--muted); font-size: .95rem; margin-bottom: 1.4rem; }
.hero-search-bar .search-form { margin: 0 auto; }
.hero-v2-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; align-items: center; margin-top: 1.3rem; font-size: .82rem; }
.hero-v2-tags span { color: var(--muted); }
.hero-v2-tags a { background: var(--card-bg); border: 1px solid var(--border); color: var(--ink-soft); padding: .35rem .9rem; border-radius: 999px; }
.hero-v2-tags a:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); }

/* ===================== Hero v2 (headline + search card + app mockup) ===================== */
.hero-v2 {
    background: var(--primary-gradient, linear-gradient(145deg, #00b9fb, #0032d8));
    background-color: #061a45;
    border-radius: var(--radius);
    padding: 2.6rem 2rem 4rem;
    margin-bottom: 1.6rem;
    overflow: hidden;
    position: relative;
}
.hero-v2-grid {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.4rem; align-items: center;
    max-width: 1180px; margin: 0 auto;
}
.hero-v2-text h1 { color: #fff; font-size: 1.9rem; font-weight: 900; line-height: 1.5; margin: 0 0 .7rem; }
.hero-v2-text h1 .accent { color: #7fd3ff; }
.hero-v2-text p.subtitle { color: rgba(255,255,255,.78); font-size: .96rem; margin-bottom: 1.4rem; }

.hero-v2-search-card {
    background: #fff; border-radius: var(--radius-sm); padding: 1rem; box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; gap: .6rem;
}
.hero-v2-field {
    display: flex; align-items: center; gap: .5rem; border: 1px solid var(--border, #e3e8f2);
    border-radius: 10px; padding: .1rem .8rem; background: #fafbff;
}
.hero-v2-field-icon { font-size: 1rem; flex-shrink: 0; }
.hero-v2-field input, .hero-v2-field select {
    border: none; background: transparent; padding: .7rem 0; width: 100%; font: inherit; color: var(--ink);
    outline: none;
}
.hero-v2-search-card .btn-block { width: 100%; margin-top: .2rem; }

.hero-v2 .detect-city-btn {
    display: block; margin: 1rem auto 0; background: rgba(255,255,255,.12); color: #fff;
    border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: .5rem 1.1rem;
    font-size: .85rem; cursor: pointer;
}
.hero-v2 .detect-city-btn:hover { background: rgba(255,255,255,.22); }
.hero-v2 .detect-city-status { color: #fff; text-align: center; font-size: .82rem; margin-top: .5rem; min-height: 1.2em; }

.hero-v2 .hero-v2-tags { justify-content: flex-start; margin-top: 1.2rem; }
.hero-v2 .hero-v2-tags span { color: rgba(255,255,255,.75); }
.hero-v2 .hero-v2-tags a { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.hero-v2 .hero-v2-tags a:hover { background: rgba(255,255,255,.22); border-color: #fff; color: #fff; }

/* --- ستون تصویر: پلیس‌هولدر موکاپ اپلیکیشن + کارت‌های شناور --- */
.hero-v2-visual { position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; }
.hero-mockup-placeholder {
    width: 100%; max-width: 300px; aspect-ratio: 3 / 5.2; border-radius: 32px;
    border: 2px dashed rgba(255,255,255,.45); background: rgba(255,255,255,.06);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
    color: rgba(255,255,255,.75); font-size: .82rem; text-align: center; padding: 1rem;
}
.hero-mockup-placeholder-icon { font-size: 2.2rem; }

.hero-float-card {
    position: absolute; display: flex; align-items: center; gap: .6rem; background: #fff;
    border-radius: 14px; padding: .6rem .8rem; box-shadow: var(--shadow-lg); max-width: 210px;
}
.hero-float-card strong { display: block; font-size: .8rem; color: var(--ink); }
.hero-float-card .muted { display: block; font-size: .7rem; color: var(--muted); margin: .1rem 0; }
.hero-float-card .hero-float-rating { font-size: .72rem; color: var(--ink-soft); }
.hero-float-avatar {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--primary-light);
    color: var(--primary-dark); font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.hero-float-card.card-1 { top: 6%; right: -4%; }
.hero-float-card.card-2 { bottom: 14%; left: -8%; }

.hero-graph-card {
    position: absolute; bottom: -4%; right: 8%; background: #fff; border-radius: 14px; padding: .7rem .9rem;
    box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: .15rem; width: 140px;
}
.hero-graph-card .muted { font-size: .68rem; color: var(--muted); }
.hero-graph-value { color: #16a34a; font-size: 1rem; font-weight: 800; }
.hero-graph-svg { color: #16a34a; width: 100%; height: 26px; margin-top: .2rem; }

@media (max-width: 900px) {
    .hero-v2 { padding: 2rem 1.2rem 3.4rem; }
    .hero-v2-grid { grid-template-columns: 1fr; gap: 2rem; }
    .hero-v2-visual { order: -1; min-height: 280px; }
    .hero-mockup-placeholder { max-width: 220px; }
    .hero-float-card { max-width: 170px; padding: .5rem .6rem; }
    .hero-float-card.card-1 { top: 2%; right: 0; }
    .hero-float-card.card-2 { bottom: 8%; left: 0; }
    .hero-graph-card { right: 4%; bottom: -6%; width: 120px; }
    .hero-v2-text h1 { font-size: 1.5rem; text-align: center; }
    .hero-v2-text p.subtitle { text-align: center; }
    .hero-v2 .hero-v2-tags { justify-content: center; }
}

/* ===================== Feature strip ===================== */
.feature-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; background: var(--card-bg);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem; margin: -1.6rem 1rem 2rem;
    position: relative; z-index: 2;
}
.feature-strip-item { display: flex; align-items: center; gap: .7rem; }
.feature-strip-icon {
    width: 42px; height: 42px; border-radius: 10px; background: var(--primary-light); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.feature-strip-item strong { font-size: .88rem; display: block; margin-bottom: .15rem; }
.feature-strip-item p { font-size: .75rem; color: var(--muted); margin: 0; }
@media (max-width: 900px) {
    .feature-strip { grid-template-columns: 1fr 1fr; margin: 0 0 2rem; }
}
@media (max-width: 560px) {
    .feature-strip { grid-template-columns: 1fr; }
}

.section-subtitle { color: var(--muted); font-size: .88rem; margin: -.8rem 0 1.3rem; }

/* ===================== Popular categories v2 ===================== */
.category-grid-v2 { grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }
.category-card-v2 {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 1rem;
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.category-card-v2:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.category-card-v2 .icon {
    font-size: 1.5rem; width: 50px; height: 50px; border-radius: 12px; background: var(--primary-light);
    display: flex; align-items: center; justify-content: center;
}
.category-card-v2 .name { font-weight: 700; font-size: .92rem; }
.category-card-v2 .count { font-size: .74rem; color: var(--muted); }
.category-card-v2 .btn { margin-top: .3rem; width: 100%; }
.category-card-viewall {
    background: var(--primary-light); border: 1px dashed var(--primary); justify-content: center; color: var(--primary-dark);
}
.category-card-viewall .icon { background: #fff; }
.category-card-viewall .name { color: var(--primary-dark); }

/* ===================== Nearby map + top businesses split ===================== */
.nearby-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; margin-bottom: 2rem; align-items: stretch; }
.nearby-map { height: 420px; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; }
.top-businesses { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.top-businesses-head { font-weight: 800; font-size: 1rem; margin-bottom: .5rem; }
.top-biz-item { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.top-biz-item:last-child { border-bottom: none; }
.top-businesses-ad { margin-top: .8rem; }
.top-biz-item img, .top-biz-item .thumb-placeholder { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.top-biz-item .thumb-placeholder { display: flex; align-items: center; justify-content: center; background: var(--primary-light); font-size: 1.1rem; }
.top-biz-item strong { display: block; font-size: .88rem; }
.top-biz-item .muted { font-size: .74rem; }
.top-biz-item .stars { font-size: .78rem; }
.nearby-num-marker span {
    display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--primary); color: #fff; font-size: .76rem; font-weight: 800; box-shadow: 0 3px 8px rgba(0,72,196,.4);
    border: 2px solid #fff;
}
.nearby-subtitle { color: var(--muted); font-size: .85rem; margin: -.6rem 0 1rem; display: flex; align-items: center; gap: .35rem; }
.nearby-subtitle i { color: var(--primary); }

/* --- کارت‌های تازه‌ی کسب‌وکار نزدیک (هم در صفحه اصلی، هم در «کسب‌وکارهای مشابه» صفحه کسب‌وکار) --- */
.nearby-biz-card {
    display: flex; align-items: center; gap: .7rem; padding: .7rem .3rem; border-bottom: 1px solid var(--border);
    transition: background .15s ease;
}
.nearby-biz-card:last-child { border-bottom: none; }
.nearby-biz-card:hover { background: var(--primary-light); border-radius: 10px; }
.nearby-biz-main { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0; }
.nearby-biz-thumb { width: 50px; height: 50px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--primary-light); }
.nearby-biz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nearby-biz-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1.15rem; }
.nearby-biz-info { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.nearby-biz-name { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nearby-biz-meta { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nearby-biz-distance { font-size: .74rem; color: var(--primary-dark); font-weight: 600; }
.nearby-biz-distance i { margin-left: .2rem; }
.nearby-biz-card .stars { font-size: .78rem; }
.nearby-biz-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.nearby-biz-action {
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--primary-light); color: var(--primary-dark); font-size: .85rem; flex-shrink: 0; transition: transform .12s ease, background .12s ease;
}
.nearby-biz-action:hover { background: var(--primary); color: #fff; transform: scale(1.07); }

@media (max-width: 900px) {
    .nearby-split { grid-template-columns: 1fr; }
    .nearby-map { height: 300px; }
}

/* ===================== Fancy select (منوی کشویی شیک برای فیلدهای فرم جستجوی هدر) ===================== */
.fancy-select { position: relative; }
.fancy-select-native {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; z-index: 1;
}
.fancy-select-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: .4rem; width: 100%; flex: 1;
    background: transparent; border: none; font: inherit; color: var(--ink); padding: .7rem 0; cursor: pointer; text-align: right;
}
.fancy-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fancy-select-chevron { color: var(--muted); font-size: .75rem; transition: transform .15s ease; flex-shrink: 0; }
.fancy-select.is-open .fancy-select-chevron { transform: rotate(180deg); color: var(--primary); }
.fancy-select-panel {
    position: absolute; top: calc(100% + 8px); right: 0; left: 0; background: #fff; border-radius: 14px;
    box-shadow: var(--shadow-lg); border: 1px solid var(--border); opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease; z-index: 30; max-height: 280px; overflow-y: auto;
    padding: .4rem;
}
.fancy-select.is-open .fancy-select-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.fancy-select-list { list-style: none; margin: 0; padding: 0; }
.fancy-select-option {
    padding: .6rem .8rem; border-radius: 10px; font-size: .86rem; cursor: pointer; color: var(--ink);
    display: flex; align-items: center; justify-content: space-between; transition: background .12s ease;
}
.fancy-select-option:hover { background: var(--primary-light); }
.fancy-select-option.is-selected { background: var(--primary); color: #fff; font-weight: 700; }
.fancy-select-option.is-selected::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .75rem; }

/* ===================== CTA banner ===================== */
.cta-banner {
    background: linear-gradient(115deg, #0048c4, #00b9fb); border-radius: var(--radius); padding: 2.4rem 2rem;
    margin-bottom: 2rem; position: relative; overflow: hidden; min-height: 160px; display: flex; align-items: center;
}
.cta-banner-text { position: relative; z-index: 2; max-width: 560px; }
.cta-banner-text h2 { color: #fff; font-size: 1.4rem; margin: 0 0 .5rem; }
.cta-banner-text p { color: rgba(255,255,255,.82); font-size: .9rem; margin-bottom: 1.2rem; }
.cta-banner-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.btn-outline-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); }
.btn-outline-light:hover { background: rgba(255,255,255,.22); }
.cta-banner-shop { position: absolute; left: 2rem; top: 50%; transform: translateY(-50%); font-size: 5rem; opacity: .9; z-index: 1; }
.cta-banner-icon-1, .cta-banner-icon-2 { position: absolute; font-size: 1.6rem; opacity: .5; z-index: 1; }
.cta-banner-icon-1 { left: 8rem; top: 20%; }
.cta-banner-icon-2 { left: 6.5rem; bottom: 18%; }
@media (max-width: 720px) {
    .cta-banner-shop, .cta-banner-icon-1, .cta-banner-icon-2 { display: none; }
}

/* ===================== Stats bar ===================== */
.stats-bar {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; background: var(--card-bg);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1rem; margin-bottom: 2.2rem; text-align: center;
}
.stats-bar-item span { font-size: 1.4rem; display: block; margin-bottom: .3rem; }
.stats-bar-item strong { display: block; font-size: 1.3rem; color: var(--primary); }
.stats-bar-item small { color: var(--muted); font-size: .78rem; }
@media (max-width: 720px) {
    .stats-bar { grid-template-columns: 1fr 1fr; }
}

.promo {
    background: linear-gradient(110deg, #0048c4, #00b9fb); border-radius: var(--radius); padding: 1.5rem 1.8rem;
    color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap;
    box-shadow: 0 20px 45px rgba(0,72,196,.18); margin: 1.2rem 0 0;
}
.promo h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.promo p { margin: 0; color: #dbeeff; font-size: .82rem; }
.promo-slot { margin: 1.2rem 0 0; }
.promo-slot .ad-unit { border-style: solid; }
.search-cta-promo { margin: 1rem 0 1.4rem; }

.search-form {
    display: flex; gap: .5rem; max-width: 640px; margin: 2rem auto 0; background: #fff; padding: .45rem;
    border-radius: 999px; box-shadow: var(--shadow-lg);
}
.search-form input { flex: 1; padding: .8rem 1.2rem; border: none; border-radius: 999px; font-family: inherit; font-size: 1rem; background: transparent; min-width: 0; }
.search-form input:focus { outline: none; }
.search-form button { border-radius: 999px; flex-shrink: 0; }
.search-city-select {
    border: none; border-inline-end: 1px solid var(--border); background: transparent; font-family: inherit;
    font-size: .9rem; font-weight: 700; color: var(--ink-soft); padding: .8rem 1rem .8rem 1.4rem; border-radius: 0 999px 999px 0;
    flex-shrink: 0; max-width: 130px; cursor: pointer;
}
.search-city-select:focus { outline: none; }
.detect-city-btn {
    display: block; margin: .9rem auto 0; background: none; border: none; color: var(--primary);
    font-family: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; text-decoration: underline;
}
.detect-city-btn:hover { color: var(--primary-dark); }
.detect-city-status { text-align: center; color: var(--muted); font-size: .82rem; margin: .4rem 0 0; min-height: 1.2em; }
.search-form-compact { max-width: 480px; margin: 0 0 1.4rem; background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow); }
.filter-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; background: var(--card-bg);
    border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1.2rem;
}
.filter-bar select { padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 7px; font-family: inherit; font-size: .85rem; }
.filter-check { display: flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 500; white-space: nowrap; }

/* ===================== Section headers ===================== */
.section-head {
    display: flex; justify-content: space-between; align-items: baseline; margin: 3.2rem 0 1.3rem;
    position: relative;
}
.section-head h2 { font-size: 1.4rem; margin: 0; position: relative; padding-inline-start: .9rem; }
.section-head h2::before {
    content: ''; position: absolute; inset-inline-start: 0; top: .15em; bottom: .15em; width: 4px;
    border-radius: 3px; background: var(--primary-gradient);
}
.section-head a.see-all { font-size: .88rem; font-weight: 700; color: var(--primary); }

/* ===================== Category grid (homepage top) ===================== */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 1rem; }
.category-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.5rem 1rem 1.2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.category-card .icon {
    font-size: 1.5rem; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    background: var(--primary-light); border-radius: 50% 50% 50% 4px;
}
.category-card .name { font-weight: 700; font-size: .92rem; color: var(--text); }
.category-card .count { font-size: .75rem; color: var(--muted); }

.chip-list { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { background: var(--card-bg); border: 1px solid var(--border); padding: .5rem 1.1rem; border-radius: 999px; font-size: .88rem; font-weight: 500; color: var(--text); }
.chip:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ===================== Buttons ===================== */
.btn {
    display: inline-flex; align-items: center; gap: .35rem; padding: .68rem 1.3rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--card-bg); color: var(--text);
    cursor: pointer; font-size: .93rem; font-weight: 700; font-family: inherit;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(0,100,251,.28); border-color: transparent; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-sm { padding: .42rem .9rem; font-size: .82rem; border-radius: 7px; }
.btn-success { background: var(--success); color: #fff;; border-color: transparent; }
.btn-error { background: var(--error); color: #fff;; border-color: transparent; }
.btn-call { background: var(--success); color: #fff;; border-color: transparent; }
.btn-directions { background: var(--accent); color: #fff;; border-color: transparent; }
.btn-gold { background: var(--pin); color: var(--ink); border-color: transparent; }
.btn-gold:hover { background: var(--pin-dark); color: #fff; }
.btn-yellow { background: var(--pin); color: var(--ink); border-color: transparent; font-weight: 800; }
.btn-yellow:hover { background: var(--pin-dark); }
.btn-outline { background: #fff; border: 1px solid var(--border); color: var(--text); }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===================== Alerts ===================== */
.alert { padding: .9rem 1.1rem; border-radius: var(--radius-sm); margin: 1rem 0; font-size: .92rem; border-inline-start: 4px solid transparent; }
.alert-error { background: var(--error-light); color: var(--error); border-color: var(--error); }
.alert-success { background: var(--success-light); color: var(--success); border-color: var(--success); }

/* ===================== Auth ===================== */
.auth-box { max-width: 400px; margin: 3rem auto; background: var(--card-bg); padding: 2.2rem; border-radius: var(--radius); text-align: center; box-shadow: var(--shadow); }
.auth-box h1 { font-size: 1.4rem; }
.auth-box input { width: 100%; padding: .85rem; margin: .9rem 0; border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: center; font-size: 1.05rem; font-family: inherit; }
.auth-box input:focus { outline: 2px solid var(--primary-light); border-color: var(--primary); }

/* ===================== Forms ===================== */
.business-form { max-width: 760px; background: var(--card-bg); padding: 1.8rem; border-radius: var(--radius); box-shadow: var(--shadow); }
.business-form label { display: block; margin-top: 1.1rem; font-weight: 700; font-size: .92rem; }
.business-form input, .business-form select, .business-form textarea {
    width: 100%; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: .35rem;
    font-family: inherit; font-size: .95rem; background: #fbfbf8;
}
.business-form input:focus, .business-form select:focus, .business-form textarea:focus { outline: 2px solid var(--primary-light); border-color: var(--primary); background: #fff; }
.form-row { display: flex; gap: 1rem; }
.form-row > div { flex: 1; }
.field-hint { color: var(--muted); font-size: .8rem; }

/* ===================== Image upload dropzone + live preview ===================== */
.upload-dropzone {
    position: relative; border: 2px dashed var(--border); border-radius: var(--radius-sm); padding: 1.6rem 1rem;
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; cursor: pointer;
    color: var(--muted); font-size: .85rem; transition: border-color .15s ease, background .15s ease; margin-top: .4rem;
}
.upload-dropzone:hover, .upload-dropzone.is-dragover { border-color: var(--primary); background: var(--primary-light); }
.upload-dropzone-icon { font-size: 1.8rem; }
.upload-dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-preview-grid { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.upload-preview-item { width: 84px; height: 84px; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow); }
.upload-preview-item img { width: 100%; height: 100%; object-fit: cover; }

/* ===================== Business cards / list ===================== */
.business-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 1.1rem; margin-top: 1rem; }
.business-list.stacked { grid-template-columns: 1fr; }
.business-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.1rem; display: flex; gap: 1rem; align-items: flex-start; box-shadow: var(--shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.business-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.business-card.featured { border: 2px solid var(--pin); background: linear-gradient(180deg, var(--pin-light), #fff 40%); position: relative; }
.business-card.featured::before {
    content: '⭐ آگهی ویژه'; position: absolute; top: -.6rem; right: 1rem; background: var(--pin); color: var(--ink);
    font-size: .7rem; font-weight: 700; padding: .2rem .7rem; border-radius: 999px;
}
.business-card .thumb { width: 104px; height: 104px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.business-card .thumb-placeholder {
    display: flex; align-items: center; justify-content: center; font-size: 2rem;
    background: var(--primary-light); color: var(--primary-dark);
}
.business-card { min-width: 0; }
.business-card-body { width: 100%; min-width: 0; }
.business-list.stacked .business-card,
.dashboard-list .business-card { flex-direction: column; align-items: stretch; }
.business-card-header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.business-card-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.business-card h2, .business-card h3 { margin: 0 0 .3rem; font-size: 1.05rem; }

.badge { font-size: .72rem; padding: .28rem .68rem; border-radius: 999px; background: #eee; font-weight: 700; }
.badge-approved { background: var(--success-light); color: var(--success); }
.badge-pending { background: #fdf2df; color: #a4670c; }
.badge-rejected { background: var(--error-light); color: var(--error); }
.badge-disabled { background: #f1f2ee; color: var(--muted); }
.badge-error { background: var(--error-light); color: var(--error); }
.badge-gold, .badge-plan-paid { background: var(--gold-light); color: var(--gold-dark, var(--pin-dark)); }
.badge-plan-free { background: var(--border); color: var(--muted); }

/* Ads row above listing results */
.ads-row-title { font-size: .85rem; font-weight: 700; color: var(--pin-dark); margin: 1.5rem 0 .6rem; display: flex; align-items: center; gap: .4rem; }

/* ===================== Stats (shared primitive; also used in admin) ===================== */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px,1fr)); gap: .8rem; margin: 1.1rem 0; }
.stat-box { background: var(--primary-light); border-radius: var(--radius-sm); padding: .9rem; text-align: center; }
.stat-box strong { display: block; font-size: 1.5rem; color: var(--primary-dark); }
.stat-box span { color: var(--muted); font-size: .78rem; }

/* ===================== Business detail / tabs ===================== */
.business-hero { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem; margin-bottom: 1.2rem; }
.business-hero h1 { margin: 0 0 .3rem; font-size: 1.6rem; }
.breadcrumbs { font-size: .82rem; color: var(--muted); margin-bottom: 1rem; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs span { color: var(--ink); font-weight: 600; }

/* ---- کاور، آواتار و چیدمان دوستونه صفحه کسب‌وکار ---- */
.biz-cover { border-radius: var(--radius); overflow: hidden; margin-bottom: -48px; }
.biz-cover-img { width: 100%; height: 220px; object-fit: cover; display: block; }
.biz-cover-fallback { background: var(--primary-gradient); }
.biz-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.4rem; align-items: start; position: relative; z-index: 1; }
.biz-main { min-width: 0; }
.biz-identity-card { position: relative; z-index: 2; }
.biz-identity { display: flex; gap: 1.1rem; align-items: flex-end; }
.biz-avatar {
    width: 84px; height: 84px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0;
    border: 4px solid var(--card-bg); box-shadow: var(--shadow); background: var(--card-bg);
}
.biz-avatar-placeholder {
    display: flex; align-items: center; justify-content: center; font-size: 2rem;
    background: var(--primary-light); color: var(--primary-dark);
}
.biz-identity-text { flex: 1; min-width: 0; padding-top: 44px; }
@media (max-width: 900px) {
    .biz-layout { grid-template-columns: 1fr; }
    .biz-cover-img, .biz-cover-fallback { height: 150px; }
    .biz-avatar { width: 66px; height: 66px; }
    .biz-identity-text { padding-top: 26px; }
}

/* ---- ستون کناری: تماس سریع، نقشه، اشتراک‌گذاری ---- */
.biz-sidebar { display: flex; flex-direction: column; gap: 1.1rem; position: sticky; top: 88px; }
.biz-contact-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem; }
.biz-contact-card h3 { font-size: .95rem; margin: 0 0 1rem; }
.biz-contact-card .action-bar { position: static; box-shadow: none; border: none; padding: 0; margin: 0; flex-direction: column; }
.biz-contact-row { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem 0; border-top: 1px solid var(--border); font-size: .86rem; }
.biz-contact-row:first-of-type { border-top: none; padding-top: 0; }
.biz-contact-row span:first-child { flex-shrink: 0; }
.biz-sidebar-map { height: 200px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }

.business-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }

/* نشان تایید هویت — نشان درخشان و متمایز به‌جای پیل ساده رنگی، تا واقعا حس «تایید رسمی» بدهد */
.badge-verified {
    display: inline-flex; align-items: center; gap: .3em;
    background: var(--primary-gradient);
    color: #fff;
    padding: .32rem .8rem .32rem .6rem;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(0,100,251,.35), inset 0 1px 0 rgba(255,255,255,.35);
    position: relative;
    overflow: hidden;
}
.badge-verified i { font-size: 1.05em; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.badge-verified::after {
    /* یک درخشش ملایم مورب که ثابت است (بدون انیمیشن، برای حس براق/فویلی) */
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 35%);
    pointer-events: none;
}
.badge-verified-sm { padding: .1rem .1rem; width: 1.5rem; height: 1.5rem; justify-content: center; border-radius: 50%; }

.business-rating-summary { display: flex; align-items: center; gap: .8rem; font-size: .88rem; margin-top: .3rem; }
.stars { color: var(--pin); display: inline-flex; align-items: center; gap: .15em; }
.stars i { font-size: .82em; }
.rating-count { color: var(--muted); font-size: .82rem; }
.open-status { font-weight: 700; font-size: .82rem; }

/* دکمه‌های شبکه‌های اجتماعی خودِ کسب‌وکار (اینستاگرام، تلگرام و ...) در صفحه کسب‌وکار */
.biz-social-links { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }
.biz-social-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: var(--paper); color: var(--ink-soft);
    font-size: 1.05rem; border: 1px solid var(--border);
    transition: transform .15s, color .15s, background .15s, box-shadow .15s;
}
.biz-social-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: #fff; }
.biz-social-btn.social-instagram:hover { background: linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); }
.biz-social-btn.social-telegram:hover  { background: #26a5e4; }
.biz-social-btn.social-whatsapp:hover  { background: #25d366; }
.biz-social-btn.social-aparat:hover    { background: #ff5722; }
.biz-social-btn.social-youtube:hover   { background: #ff0000; }
.biz-social-btn.social-linkedin:hover  { background: #0a66c2; }
.biz-social-btn.social-twitter:hover   { background: #000; }
.open-status.is-open { color: var(--success); }
.open-status.is-closed { color: var(--error); }
.favorite-btn { flex-shrink: 0; }
.favorite-btn.is-fav { background: var(--error-light); color: var(--error); border-color: var(--error-light); }

.share-bar { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: .6rem; font-size: .85rem; }
.share-bar a, .share-bar .link-btn { color: var(--ink-soft); font-weight: 600; }
.share-bar .link-btn { background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; font-size: .85rem; }
.share-bar .report-link { color: var(--error); margin-inline-start: auto; }

.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: .55rem .3rem; border-bottom: 1px solid var(--border); font-size: .9rem; }
.hours-table tr.today td { font-weight: 700; color: var(--primary-dark); }

.hours-edit-table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.hours-edit-table td { padding: .5rem .3rem; border-bottom: 1px solid var(--border); font-size: .88rem; vertical-align: middle; }
.hours-edit-table input[type=time] { padding: .4rem; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; }
.hours-closed-label { display: flex; align-items: center; gap: .35rem; font-weight: 500; white-space: nowrap; }

.review-form { background: var(--paper); border-radius: var(--radius-sm); padding: 1.1rem; margin-bottom: 1.3rem; }
.review-form label { display: block; margin-top: .8rem; font-weight: 700; font-size: .88rem; }
.review-form label:first-child { margin-top: 0; }
.review-form textarea {
    width: 100%; padding: .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    margin-top: .35rem; font-family: inherit; font-size: .92rem; resize: vertical;
}
.review-form button { margin-top: .8rem; }
.star-select { display: inline-flex; flex-direction: row-reverse; gap: .15rem; font-size: 1.6rem; }
.star-select input { display: none; }
.star-select label { color: #d9dccf; cursor: pointer; }
.star-select input:checked ~ label,
.star-select label:hover,
.star-select label:hover ~ label { color: var(--pin); }
/* ===================== نظرات کسب‌وکار: کارت‌های پیشرفته‌تر ===================== */
.reviews-summary-bar { background: var(--paper); border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin-bottom: 1rem; }
.reviews-summary-score { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.reviews-summary-score strong { font-size: 1.7rem; color: var(--ink); }
.review-pending-badge { display: inline-flex; align-items: center; gap: .3rem; margin-inline-start: .7rem; }
.review-item { border-bottom: 1px solid var(--border); padding: 1rem 0; }
.review-card { display: flex; gap: .8rem; align-items: flex-start; }
.review-card-body { flex: 1; min-width: 0; }
.review-avatar {
    width: 40px; height: 40px; border-radius: 50%; background: var(--primary-light); color: var(--primary-dark);
    display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; font-size: 1rem;
}
.review-item-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; flex-wrap: wrap; }
.review-item .comment-date { color: var(--muted); font-size: .75rem; }
.review-card-foot { display: flex; align-items: center; gap: .9rem; margin-top: .5rem; flex-wrap: wrap; }
.review-helpful-btn, .review-flag-btn {
    display: inline-flex; align-items: center; gap: .35rem; background: none; border: 1px solid var(--border);
    border-radius: 999px; padding: .3rem .8rem; font-size: .78rem; font-weight: 600; color: var(--muted);
    cursor: pointer; font-family: inherit; transition: all .15s ease;
}
.review-helpful-btn:hover { border-color: var(--primary); color: var(--primary); }
.review-helpful-btn.is-active { background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); }
.review-flag-btn:hover { border-color: var(--error); color: var(--error); }
.review-helpful-count { font-size: .78rem; color: var(--muted); display: inline-flex; align-items: center; gap: .3rem; }
.owner-reply {
    background: var(--primary-light); border-radius: var(--radius-sm); padding: .7rem .9rem;
    margin-top: .6rem; font-size: .88rem;
}
.owner-reply strong { color: var(--primary-dark); font-size: .8rem; display: flex; align-items: center; gap: .35rem; margin-bottom: .2rem; }
.owner-reply p { margin: 0; }
.owner-reply-form { display: flex; gap: .5rem; margin-top: .6rem; align-items: flex-start; }
.owner-reply-form textarea {
    flex: 1; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: inherit; font-size: .85rem; resize: vertical;
}

/* ===================== اسکرول بی‌نهایت (صفحه نتایج) ===================== */
.infinite-scroll-sentinel {
    display: flex; align-items: center; justify-content: center; gap: .6rem; color: var(--muted);
    font-size: .85rem; padding: 1.4rem 0;
}
.infinite-scroll-spinner {
    width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--primary);
    animation: infiniteScrollSpin .7s linear infinite;
}
@keyframes infiniteScrollSpin { to { transform: rotate(360deg); } }

/* ===================== ابر کلمات کلیدی سئو (صفحه اصلی / نتایج / کسب‌وکار) ===================== */
.keyword-cloud { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem 1.4rem; margin-top: 1.8rem; }
.keyword-cloud-title { margin: 0 0 .9rem; font-size: 1rem; display: flex; align-items: center; gap: .4rem; color: var(--ink); }
.keyword-cloud-title i { color: var(--primary); }
.keyword-cloud-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.keyword-cloud-list a {
    background: var(--paper); border: 1px solid var(--border); color: var(--ink-soft); font-size: .8rem;
    padding: .4rem 1rem; border-radius: 999px; transition: all .15s ease;
}
.keyword-cloud-list a:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.keyword-cloud-home-wrap { margin: 2rem 0; }
.keyword-cloud-hub-link { display: inline-block; margin-top: .8rem; }

/* ===================== صفحه هاب کلمات کلیدی (/keywords) ===================== */
.keyword-hub-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 1rem; margin-bottom: 2rem; }
.keyword-hub-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; transition: all .15s ease;
}
.keyword-hub-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.keyword-hub-card .icon { font-size: 1.5rem; width: 46px; height: 46px; border-radius: 12px; background: var(--primary-light); display: flex; align-items: center; justify-content: center; color: var(--primary); }
.keyword-hub-card .name { font-weight: 700; color: var(--ink); }
.keyword-hub-card .count { font-size: .76rem; color: var(--muted); }
.keyword-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: .7rem; margin-bottom: 1.5rem; }
.keyword-hub-item {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem 1rem;
    display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; color: var(--ink-soft); transition: all .15s ease;
}
.keyword-hub-item:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }
.keyword-hub-pager { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.5rem 0; }
.keyword-hub-pager a {
    display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 .5rem;
    border-radius: 8px; border: 1px solid var(--border); font-size: .84rem; color: var(--ink-soft);
}
.keyword-hub-pager a.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }

.comment-item { border-bottom: 1px solid var(--border); padding: .9rem 0; }
.comment-item strong { display: block; font-size: .9rem; }
.comment-item .comment-date { color: var(--muted); font-size: .75rem; }
.tab-nav { display: flex; gap: .4rem; border-bottom: 1px solid var(--border); margin: 1.2rem 0 0; flex-wrap: wrap; }
.tab-btn {
    padding: .7rem 1.2rem; border: none; background: none; cursor: pointer; font-family: inherit;
    font-size: .92rem; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-panel { display: none; padding: 1.3rem 0; }
.tab-panel.active { display: block; }
.action-bar {
    position: sticky; bottom: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 1rem; margin-top: 1.3rem; display: flex; gap: .7rem; flex-wrap: wrap;
}
.gallery { display: flex; flex-wrap: wrap; gap: .6rem; }
.gallery img { width: 150px; height: 150px; object-fit: cover; border-radius: var(--radius-sm); }
.mag-post-gallery { margin: 1.6rem 0; }
.mag-post-gallery-title { font-size: 1.05rem; margin-bottom: .8rem; }
.contact-box { background: var(--card-bg); border-radius: var(--radius); padding: 1.1rem; }
.contact-box .btn { margin-inline-end: .5rem; margin-top: .5rem; }
.contact-box input, .contact-box textarea {
    width: 100%; padding: .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    margin-top: .35rem; font-family: inherit; font-size: .92rem;
}
.contact-box label { display: block; margin-top: 1rem; font-weight: 700; font-size: .9rem; }
.contact-box p a { color: var(--ink-soft); }
.contact-intro-text { color: var(--ink-soft); margin: -.5rem 0 1.3rem; line-height: 1.9; }
.contact-social-row { margin-top: .9rem; }
.contact-social-row a { background: var(--paper); color: var(--ink-soft); }
.contact-social-row a:hover { background: var(--primary); color: #fff; }
.contact-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1.3rem; margin-bottom: 2rem; }
.contact-layout:has(> .contact-box:only-child) { grid-template-columns: 1fr; max-width: 640px; }
.contact-map { height: 100%; min-height: 340px; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; }
@media (max-width: 800px) {
    .contact-layout { grid-template-columns: 1fr; }
    .contact-map { min-height: 260px; }
}

#detail-map, #results-map, #picker-map { border: 1px solid var(--border); }

/* پین ثابت وسط نقشه برای انتخاب موقعیت با جابه‌جا کردن خود نقشه (به‌جای کلیک) */
.picker-map-wrap { position: relative; }
.picker-center-pin {
    position: absolute; top: 50%; left: 50%; width: 36px; height: 46px; margin: -46px 0 0 -18px;
    background: url('../icons/picker-pin.png') center bottom / contain no-repeat;
    pointer-events: none; z-index: 1000; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
}

/* سبک‌تر و مدرن‌تر کردن ظاهر نقشه رایگان OpenStreetMap با فیلتر CSS
   (بدون نیاز به هیچ سرویس نقشه پولی یا کلید API) */
#detail-map .leaflet-tile-pane, #results-map .leaflet-tile-pane, #picker-map .leaflet-tile-pane {
    filter: saturate(0.75) brightness(1.05) contrast(0.95);
}
#detail-map, #results-map, #picker-map { border-radius: var(--radius); overflow: hidden; }

/* ===================== Modernized Leaflet popups (Bizinoo brand) ===================== */
.leaflet-popup-content-wrapper {
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-family: 'Vazirmatn', Tahoma, sans-serif;
}
.leaflet-popup-content { margin: .8rem 1rem; font-size: .88rem; color: var(--ink); line-height: 1.8; }
.leaflet-popup-content strong { color: var(--primary); font-size: .95rem; }
.leaflet-popup-tip { box-shadow: var(--shadow); }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--error); }
.leaflet-bar a { color: var(--ink) !important; }
.leaflet-bar a:hover { background: var(--primary-light) !important; color: var(--primary) !important; }

/* ===================== Ad units ===================== */
.ad-unit { background: var(--card-bg); border: 1px dashed var(--border); border-radius: var(--radius); padding: .8rem; text-align: center; }
.ad-unit img { border-radius: var(--radius-sm); width: 100%; }
.ad-unit .ad-label { font-size: .68rem; color: var(--muted); margin-bottom: .4rem; display: block; }
.ad-slot-sidebar { max-width: 300px; }

/* ===================== Magazine ===================== */

/* --- Magazine-specific header (search + icons + nav row, matches reference exactly) --- */
.mag-site-header { background: #fff; border-bottom: 1px solid var(--border); }
.mag-header-top { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; gap: 1rem; flex-wrap: wrap; }
.mag-header-tools { display: flex; align-items: center; gap: .7rem; }
.mag-header-search {
    display: flex; align-items: center; gap: .5rem; background: var(--paper); border-radius: 999px;
    padding: .55rem 1.1rem; min-width: 260px;
}
.mag-header-search input { border: none; background: transparent; outline: none; font-family: inherit; font-size: .88rem; flex: 1; }
.mag-icon-btn {
    width: 38px; height: 38px; border-radius: 50%; background: var(--paper); border: none; cursor: pointer;
    font-size: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mag-icon-btn:hover { background: var(--primary-light); }
.mag-header-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 1.2rem 1rem; gap: 1rem; flex-wrap: wrap; }
.mag-nav-links { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.mag-nav-links a { color: var(--ink-soft); font-size: .92rem; font-weight: 500; padding-bottom: .3rem; border-bottom: 2px solid transparent; }
.mag-nav-links a.active { color: var(--primary); font-weight: 700; border-bottom-color: var(--primary); }
.mag-nav-links a:hover { color: var(--primary); }
.mag-membership-btn { border-radius: 999px; padding: .55rem 1.6rem; }
@media (max-width: 900px) {
    .mag-header-search { min-width: 0; flex: 1; }
    .mag-nav-links { gap: .9rem; overflow-x: auto; }
}

/* --- Hero carousel (illustration + content, two-column like the reference) --- */
.mag-hero {
    position: relative; border-radius: var(--radius); overflow: hidden; margin-bottom: 1.6rem;
    background: linear-gradient(120deg, #061024, #0a1f4d 55%, #0048c4); min-height: 280px;
}
.mag-hero-track { position: relative; min-height: 280px; }
.mag-slide { display: none; position: relative; z-index: 1; height: 100%; }
.mag-slide.active { display: flex; align-items: center; animation: magFade .4s ease; min-height: 280px; }
@keyframes magFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.mag-slide-visual {
    width: 42%; flex-shrink: 0; height: 100%; min-height: 280px; display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
}
.mag-slide-visual img { max-width: 100%; max-height: 220px; object-fit: contain; }
.mag-slide-content { flex: 1; padding: 2rem 2.2rem 2rem 1rem; max-width: 620px; }
.mag-slide-content h1 { font-size: 1.6rem; margin: .8rem 0 .6rem; line-height: 1.55; }
.mag-slide-content h1 a { color: #fff; }
.mag-slide-content p { color: rgba(255,255,255,.78); font-size: .92rem; margin-bottom: 1.2rem; line-height: 1.9; }
.badge-mag-cat { background: var(--primary); color: #fff; border: none; }
.mag-hero-dots { position: absolute; bottom: 1.1rem; left: 2rem; display: flex; gap: .4rem; z-index: 2; }
.mag-hero-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,.35); cursor: pointer; padding: 0; }
.mag-hero-dots button.active { background: #fff; width: 22px; border-radius: 5px; }
.mag-hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.16); border: none; color: #fff; font-size: 1.3rem; cursor: pointer; z-index: 3;
    display: flex; align-items: center; justify-content: center;
}
.mag-hero-arrow:hover { background: rgba(255,255,255,.3); }
.mag-hero-arrow.prev { right: 1rem; }
.mag-hero-arrow.next { left: 1rem; }
.mag-image-placeholder {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 120px;
    background: repeating-linear-gradient(45deg, var(--paper), var(--paper) 10px, var(--border) 10px, var(--border) 11px);
    color: var(--muted); font-size: .78rem; border-radius: var(--radius-sm); text-align: center; padding: .5rem;
}
@media (max-width: 720px) {
    .mag-slide.active { flex-direction: column; }
    .mag-slide-visual { width: 100%; min-height: 140px; }
    .mag-slide-content { padding: 1.2rem; max-width: 100%; }
    .mag-hero-arrow { display: none; }
}

/* --- Category icon row (line-style icons, matches reference) --- */
.mag-cat-icon-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-bottom: 2rem; }
.mag-cat-icon-card {
    background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem .6rem;
    display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
.mag-cat-icon-card:hover, .mag-cat-icon-card.active { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.mag-cat-icon { color: var(--primary); display: flex; }
.mag-cat-icon-label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
@media (max-width: 900px) {
    .mag-cat-icon-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .mag-cat-icon-row { grid-template-columns: repeat(2, 1fr); }
}

/* --- Category pills row --- */
.mag-cat-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.8rem; }
.mag-search-bar {
    display: flex; align-items: center; gap: .6rem; background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 999px; padding: .5rem .6rem .5rem 1.2rem; margin-bottom: 1.4rem; max-width: 480px; box-shadow: var(--shadow);
}
.mag-search-icon { color: var(--muted); }
.mag-search-bar input { flex: 1; border: none; outline: none; font-family: inherit; font-size: .9rem; background: transparent; min-width: 0; }
.mag-search-bar button { border-radius: 999px; flex-shrink: 0; }
.mag-cat-pill {
    display: inline-flex; align-items: center; gap: .4rem; background: var(--card-bg); border: 1px solid var(--border);
    padding: .55rem 1.1rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--ink-soft);
}
.mag-cat-pill small { color: var(--muted); font-weight: 500; }
.mag-cat-pill:hover, .mag-cat-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.mag-cat-pill.active small, .mag-cat-pill:hover small { color: rgba(255,255,255,.75); }

/* --- Two-column layout: main + sidebar --- */
.mag-layout { display: grid; grid-template-columns: 2.2fr 1fr; gap: 1.8rem; align-items: start; }
.mag-main { min-width: 0; }

.magazine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 1.2rem; }
.post-card { background: var(--card-bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; display: block; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.post-card-media { position: relative; height: 150px; background: var(--primary-light); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.post-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--primary-dark); }
.post-card-badge { position: absolute; top: .6rem; right: .6rem; font-size: .68rem; }
.post-card .post-body { padding: 1rem; }
.post-card h3 { font-size: 1.02rem; margin: 0 0 .4rem; color: var(--ink); }
.post-card p { color: var(--ink-soft); font-size: .85rem; margin: 0 0 .6rem; }
.post-meta { color: var(--muted); font-size: .74rem; display: flex; justify-content: space-between; gap: .5rem; }
.post-content { line-height: 2; font-size: 1.02rem; color: var(--ink-soft); }
.post-content img { border-radius: var(--radius-sm); margin: 1.3rem 0; width: 100%; }
.post-content h2, .post-content h3, .post-content h4 { color: var(--ink); margin: 1.8rem 0 .8rem; }
.post-content h2 { font-size: 1.35rem; }
.post-content h3 { font-size: 1.15rem; }
.post-content p { margin: 0 0 1.1rem; }
.post-content a { text-decoration: underline; text-underline-offset: 3px; }
.post-content ul, .post-content ol { padding-inline-start: 1.6rem; margin: 0 0 1.1rem; }
.post-content li { margin-bottom: .4rem; }
.post-content blockquote {
    border-inline-start: 4px solid var(--primary); background: var(--primary-light); margin: 1.3rem 0;
    padding: 1rem 1.3rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink); font-style: normal;
}
.post-content table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; }
.post-content th, .post-content td { border: 1px solid var(--border); padding: .6rem .8rem; text-align: right; }
.post-content th { background: var(--paper); }

/* ---- چیدمان صفحه مقاله: محتوا + ستون کناری ---- */
.mag-post-layout { display: grid; grid-template-columns: 2.1fr 1fr; gap: 1.6rem; align-items: start; }
.mag-post-main { min-width: 0; }
.mag-post-cover { position: relative; border-radius: var(--radius); overflow: hidden; margin-bottom: 1.3rem; }
.mag-post-cover img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.mag-post-cover-badge { position: absolute; top: 1rem; right: 1rem; }
.mag-post-title { font-size: 1.7rem; line-height: 1.6; margin: 0 0 .8rem; }
.mag-post-meta { display: flex; flex-wrap: wrap; gap: 1.1rem; color: var(--muted); font-size: .82rem; margin-bottom: 1.5rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--border); }
.mag-post-author { font-weight: 700; color: var(--ink-soft); }
.mag-post-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.mag-post-tags a { background: var(--paper); border: 1px solid var(--border); color: var(--ink-soft); font-size: .8rem; padding: .35rem .9rem; border-radius: 999px; }
.mag-post-tags a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.mag-post-share { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.mag-cta-card { background: linear-gradient(120deg, #0048c4, #00b9fb); color: #fff; }
.mag-cta-card h3, .mag-cta-card p { color: #fff; }
.mag-cta-card p { font-size: .85rem; opacity: .92; margin: .5rem 0 1rem; }

.comment-item { display: flex; gap: .8rem; align-items: flex-start; border-bottom: 1px solid var(--border); padding: 1rem 0; }
.comment-item:last-child { border-bottom: none; }
.comment-item-body { flex: 1; min-width: 0; }
.comment-item-body strong { display: inline-block; font-size: .9rem; }
.comment-avatar {
    width: 38px; height: 38px; border-radius: 50%; background: var(--primary-light); color: var(--primary-dark);
    display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; font-size: .95rem;
}
.comment-item-admin .comment-avatar { background: var(--primary); color: #fff; }
.comment-admin-badge { margin-inline-start: .3rem; }
.comment-item .comment-date { color: var(--muted); font-size: .75rem; margin-inline-start: .5rem; }
.comment-item-actions { display: flex; align-items: center; gap: .8rem; margin-top: .5rem; }
.comment-like-form { display: inline-flex; }
.comment-like-btn, .comment-reply-btn {
    display: inline-flex; align-items: center; gap: .3rem; background: none; border: 1px solid var(--border);
    border-radius: 999px; padding: .28rem .75rem; font-size: .76rem; font-weight: 600; color: var(--muted);
    cursor: pointer; font-family: inherit; transition: all .15s ease;
}
.comment-like-btn:hover, .comment-like-btn.is-active { border-color: var(--error); color: var(--error); }
.comment-like-btn:disabled { cursor: default; }
.comment-reply-btn:hover { border-color: var(--primary); color: var(--primary); }
.comment-replies { margin-top: .8rem; padding-inline-start: 1.4rem; border-inline-start: 2px solid var(--border); }
.comment-replies .comment-item { padding: .8rem 0; }
.comment-reply-form { margin-top: .6rem; gap: .5rem; }
.comment-form { display: flex; flex-direction: column; }
.comment-form label { display: block; margin-top: 1rem; font-weight: 700; font-size: .88rem; }
.comment-form input, .comment-form textarea {
    width: 100%; padding: .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: .4rem;
    font-family: inherit; font-size: .92rem;
}
.comment-form button { margin-top: 1rem; align-self: flex-start; }

@media (max-width: 900px) {
    .mag-post-layout { grid-template-columns: 1fr; }
    .mag-post-title { font-size: 1.4rem; }
}
.comment-box { background: var(--card-bg); border-radius: var(--radius); padding: 1.2rem; margin-top: 1.5rem; }

/* --- Editor's picks --- */
.editor-picks { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.1rem; }
.editor-picks .editor-pick-card:not(.is-main) { display: none; }
.editor-pick-card { background: var(--card-bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.editor-pick-card.is-main .post-card-media { height: 220px; }
@media (min-width: 720px) {
    .editor-picks .editor-pick-card:not(.is-main) { display: block; }
    .editor-picks { grid-template-rows: 1fr 1fr; }
    .editor-picks .editor-pick-card.is-main { grid-row: 1 / 3; }
    .editor-picks .editor-pick-card:not(.is-main) .post-card-media { height: 90px; }
}

/* --- Sidebar widgets --- */
.mag-sidebar { display: flex; flex-direction: column; gap: 1.2rem; }
.mag-widget { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem; }
.mag-widget h3 { font-size: .98rem; margin: 0 0 1rem; }
.mag-popular-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.mag-popular-list li { display: flex; align-items: flex-start; gap: .7rem; }
.mag-popular-rank {
    width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--primary-light); color: var(--primary-dark);
    font-size: .78rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.mag-popular-list a { display: flex; flex-direction: column; gap: .15rem; }
.mag-popular-list strong { font-size: .87rem; color: var(--ink); line-height: 1.5; }
.mag-popular-list .muted { font-size: .74rem; }

.mag-newsletter { background: linear-gradient(120deg, #0048c4, #00b9fb); color: #fff; text-align: center; }
.mag-newsletter-icon {
    display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%;
    background: rgba(255,255,255,.18); font-size: 1.4rem; margin: 0 auto .8rem;
}
.mag-newsletter h3, .mag-newsletter p { color: #fff; }
.mag-newsletter p { font-size: .82rem; opacity: .88; margin-bottom: 1rem; }
.mag-newsletter input { width: 100%; padding: .7rem .9rem; border: none; border-radius: var(--radius-sm); margin-bottom: .6rem; font-family: inherit; }
.newsletter-message { background: rgba(255,255,255,.18); padding: .5rem .8rem; border-radius: var(--radius-sm); font-size: .82rem; margin-bottom: .8rem; }

.mag-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.mag-cat-list a { display: flex; justify-content: space-between; align-items: center; padding: .55rem .3rem; border-radius: 8px; color: var(--ink-soft); font-size: .88rem; }
.mag-cat-list a:hover, .mag-cat-list a.active { background: var(--primary-light); color: var(--primary-dark); }
.mag-cat-count { background: var(--border); color: var(--muted); font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; }
.mag-cat-list a.active .mag-cat-count, .mag-cat-list a:hover .mag-cat-count { background: #fff; }
.mag-cat-viewall { display: block; text-align: center; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border); font-size: .84rem; font-weight: 600; color: var(--primary); }
.mag-tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; }
.mag-tag-cloud a { background: var(--paper); border: 1px solid var(--border); color: var(--ink-soft); font-size: .78rem; padding: .3rem .8rem; border-radius: 999px; }
.mag-tag-cloud a:hover, .mag-tag-cloud a.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* --- Magazine footer (light, matches reference exactly) --- */
.mag-site-footer { background: #fff; border-top: 1px solid var(--border); margin-top: 3.5rem; padding-top: 2.6rem; }
.mag-footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 2rem; padding-bottom: 2rem; }
.mag-footer-col h4 { font-size: .92rem; margin: 0 0 1rem; color: var(--ink); }
.mag-footer-col a { display: block; color: var(--muted); font-size: .86rem; margin-bottom: .7rem; }
.mag-footer-col a:hover { color: var(--primary); }
.mag-footer-brand .footer-logo { height: 28px; margin-bottom: 1rem; }
.mag-footer-col p { color: var(--muted); font-size: .84rem; line-height: 1.9; margin: 0; }
.mag-footer-social { display: flex; gap: .55rem; }
.mag-footer-social a {
    width: 34px; height: 34px; border-radius: 50%; background: var(--paper); display: flex; align-items: center;
    justify-content: center; margin: 0; font-size: .9rem;
}
.mag-footer-social a:hover { background: var(--primary-light); }
.mag-footer-bottom { border-top: 1px solid var(--border); padding: 1.1rem 0; text-align: center; font-size: .82rem; color: var(--muted); }
@media (max-width: 900px) {
    .mag-footer-grid { grid-template-columns: 1fr 1fr; }
    .mag-layout { grid-template-columns: 1fr; }
}
/* ===================== Wallet / Ads manage ===================== */
.wallet-card {
    background: linear-gradient(110deg, #0048c4, #00b9fb); color: #fff; border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.wallet-card .balance { font-size: 2rem; font-weight: 800; color: var(--pin); }
.campaign-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; margin-bottom: 1rem; }
.campaign-card-body { display: flex; gap: 1rem; align-items: flex-start; }
.campaign-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.campaign-thumb-placeholder {
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
    background: var(--primary-light); color: var(--primary-dark);
}
.campaign-info { flex: 1; min-width: 0; }
.campaign-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.campaign-edit-form { display: none; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.campaign-edit-form.open { display: block; }
.campaign-stats-grid { margin-top: .9rem; grid-template-columns: repeat(auto-fit, minmax(90px,1fr)); }
.campaign-stats-grid .stat-box { padding: .6rem .5rem; }
.campaign-stats-grid .stat-box strong { font-size: 1.15rem; }
.campaign-stats-grid .stat-box span { font-size: .68rem; }
.stat-box-highlight { background: var(--primary); }
.stat-box-highlight strong, .stat-box-highlight span { color: #fff; }
.wallet-topup-btn { margin-top: 1rem; background: #fff; }
.campaign-card .campaign-stats { display: flex; gap: 1.2rem; margin-top: .6rem; font-size: .85rem; color: var(--muted); }

/* ===================== Plans ===================== */
.plans-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; }
.plan-option { background: var(--card-bg); border: 1px solid var(--border); padding: 1rem; border-radius: var(--radius-sm); cursor: pointer; }
.plan-option:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }

/* ===================== Footer ===================== */
/* ===================== Footer (multi-column) ===================== */
.site-footer-v2 { background: var(--ink); color: rgba(255,255,255,.7); margin-top: 3.5rem; padding-top: 3rem; }
.footer-v2-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.4rem; }
.footer-col h4 { color: #fff; font-size: .95rem; margin: 0 0 1rem; }
.footer-col a { display: block; color: rgba(255,255,255,.65); font-size: .87rem; margin-bottom: .7rem; }
.footer-col a:hover { color: var(--pin); }
.footer-col-brand p { font-size: .85rem; line-height: 1.9; margin: .9rem 0 1.1rem; color: rgba(255,255,255,.6); }
.footer-contact-line { font-size: .83rem !important; margin: 0 0 .5rem !important; color: rgba(255,255,255,.65) !important; }
.footer-contact-line a { display: inline; color: rgba(255,255,255,.65); }
.footer-contact-line a:hover { color: var(--pin); }
.footer-logo { height: 30px; filter: brightness(0) invert(1); }
.footer-social { display: flex; gap: .6rem; }
.footer-social a {
    width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex;
    align-items: center; justify-content: center; margin: 0; font-size: .95rem;
}
.footer-social a:hover { background: var(--primary); }

/* ردیف نمادهای اعتماد (نماد اعتماد الکترونیکی، ساماندهی و مشابه) در فوتر */
.footer-trust-seals {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.2rem;
    padding: 1.1rem 0; border-top: 1px solid rgba(255,255,255,.1);
}
.footer-trust-seals img { height: 56px; width: auto; max-width: 110px; object-fit: contain; border-radius: 6px; background: #fff; padding: 4px; }
.footer-trust-seals a { display: inline-flex; opacity: .92; transition: opacity .15s, transform .15s; }
.footer-trust-seals a:hover { opacity: 1; transform: translateY(-2px); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 1.1rem 0; text-align: center; font-size: .82rem; color: rgba(255,255,255,.5); }

.scroll-top-wrap { position: relative; }
.scroll-top-btn {
    position: fixed; bottom: 1.4rem; left: 1.4rem; width: 44px; height: 44px; border-radius: 50%;
    background: var(--primary); color: #fff; border: none; font-size: 1.2rem; cursor: pointer; z-index: 90;
    box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease;
}
.scroll-top-btn.visible { opacity: 1; visibility: visible; }
.scroll-top-btn:hover { transform: translateY(-3px); }

@media (max-width: 720px) {
    .footer-v2-grid { grid-template-columns: 1fr 1fr; }
}

/* ===================== Dashboard hero (user panel) ===================== */
.dash-hero {
    background: linear-gradient(120deg, #0048c4, #00b9fb); color: #fff; border-radius: var(--radius); padding: 2.4rem 2rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    position: relative; overflow: hidden; margin-bottom: 0;
}
.dash-hero-text { flex: 1; min-width: 240px; }
.dash-hero-eyebrow {
    display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--pin);
    background: rgba(252,193,2,.16); padding: .25rem .8rem; border-radius: 999px; margin-bottom: .7rem;
}
.dash-hero h1 { color: #fff; font-size: 1.7rem; margin: 0 0 .4rem; }
.dash-hero .subtitle { color: rgba(255,255,255,.68); margin: 0; max-width: 460px; }
.btn-lg { padding: .9rem 1.7rem; font-size: 1rem; border-radius: 999px; flex-shrink: 0; }

.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 1rem; margin: 1.4rem 0 2.6rem; }
.dash-stats .stat-box { padding: 1.2rem 1rem; }
.dash-stats .stat-box strong { font-size: 1.7rem; }

.dash-chart-card {
    background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 1.4rem; margin-bottom: 2.2rem;
}
.dash-chart-head { margin-bottom: 1rem; }
.dash-chart-head h2 { font-size: 1.05rem; margin: 0 0 .2rem; }
.dash-chart-head .muted { color: var(--muted); font-size: .85rem; margin: 0; }
.dash-chart-wrap { position: relative; height: 260px; }

/* ===================== Empty state ===================== */
.empty-state {
    text-align: center; background: var(--card-bg); border: 1px dashed var(--border); border-radius: var(--radius);
    padding: 3rem 1.5rem; margin-bottom: 2rem;
}
.empty-state-badge {
    display: inline-block; width: 44px; height: 44px; margin-bottom: 1rem; position: relative;
    background: var(--pin-light); border-radius: 50% 50% 50% 4px; transform: rotate(45deg);
}
.empty-state-badge::before {
    content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px;
    background: var(--pin); border-radius: 50%; transform: translate(-50%,-50%);
}
.empty-state h3 { margin: 0 0 .4rem; }
.empty-state p { color: var(--muted); max-width: 380px; margin: 0 auto 1.3rem; }

/* ===================== Site features (homepage) ===================== */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 1.2rem; }
.feature-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: .8rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.feature-card .feature-icon {
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
    background: var(--primary-light); border-radius: 50% 50% 50% 4px; flex-shrink: 0;
}
.feature-card h3 { margin: 0; font-size: 1.05rem; }
.feature-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.8; }

.muted { color: var(--muted); }
.text-error { color: var(--error); }

/* ===================== Responsive ===================== */
@media (max-width: 720px) {
    .nav-toggle { display: block; }
    #siteNav {
        display: none; position: absolute; top: 100%; right: 0; left: 0; background: #fff;
        border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
        flex-direction: column; padding: 1rem 1.2rem; gap: 1rem; align-items: flex-start;
    }
    #siteNav a { color: var(--ink-soft); }
    #siteNav.open { display: flex; }
    .nav-dropdown { width: 100%; }
    .nav-dropdown-trigger { color: var(--ink-soft); width: 100%; justify-content: space-between; }
    .nav-dropdown-panel {
        position: static; grid-template-columns: 1fr 1fr; box-shadow: none; border: none;
        padding: .3rem 0 .3rem .8rem; margin-top: .5rem; max-height: none; width: 100%;
    }
    .hero h1 { font-size: 1.7rem; }
    .dash-hero { padding: 1.8rem 1.4rem; }
    .dash-hero .btn-lg { width: 100%; justify-content: center; }
    .form-row { flex-direction: column; }
    .business-list { grid-template-columns: 1fr; }

    .mobile-tabbar {
        display: flex; position: fixed; bottom: 0; right: 0; left: 0; z-index: 150;
        background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(0,50,216,.12);
        padding: .5rem .3rem calc(.4rem + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
    }
    .mobile-tabbar::before {
        content: ''; position: absolute; top: 0; right: 16px; left: 16px; height: 3px; border-radius: 0 0 3px 3px;
        background: var(--primary-gradient);
    }
    .mobile-tabbar a {
        position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem;
        font-size: .66rem; color: var(--muted); font-weight: 600; padding: .35rem 0 .3rem; border-radius: 14px;
        transition: color .15s ease;
    }
    /* آیکون‌های ناوبری سریع: قاب گرد با پس‌زمینه ملایم، به‌جای ایموجی ساده قبلی */
    .mobile-tabbar-icon {
        width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
        font-size: 1.02rem; border-radius: 10px; color: var(--muted);
        background: transparent; transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .18s ease, color .15s ease;
    }
    .mobile-tabbar a.active .mobile-tabbar-icon {
        background: var(--primary-light); color: var(--primary); transform: translateY(-1px) scale(1.08);
    }
    .mobile-tabbar a.active { color: var(--primary); }
    .mobile-tabbar a:active .mobile-tabbar-icon { transform: scale(.9); }
    .mobile-tabbar-main {
        margin-top: -1.9rem;
    }
    .mobile-tabbar-main .mobile-tabbar-icon {
        width: 54px; height: 54px; border-radius: 50%;
        background: var(--primary-gradient); color: #fff; font-size: 1.35rem;
        box-shadow: 0 10px 22px rgba(0,72,196,.45), 0 0 0 5px #fff;
    }
    .mobile-tabbar-main:active .mobile-tabbar-icon { transform: scale(.92); }
    body { padding-bottom: 68px; }
    .scroll-top-btn { bottom: 4.9rem; }
}