:root {
    /* Darak palette — navy + gold (matching the logo) */
    --c-primary: #1B3A55;          /* الكحلي الغامق من الشعار */
    --c-primary-dark: #102538;     /* درجة أعمق للـ hover */
    --c-primary-soft: #2c5375;     /* للخلفيات الناعمة */
    --c-accent: #C8A55B;           /* الذهبي الزيتي من المفتاح */
    --c-accent-dark: #a88840;
    --c-dark: #1f2937;
    --c-muted: #6b7280;
    --c-bg: #faf8f3;               /* خلفية كريمي ناعمة بدل الرمادي */
    --c-card: #ffffff;
    --c-border: #e8e3d7;
    --c-success: #15803d;
    --c-danger: #b91c1c;
    --radius: 10px;
    --shadow: 0 2px 8px rgba(27,58,85,0.08);
    --shadow-lg: 0 8px 24px rgba(27,58,85,0.15);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    background: var(--c-bg);
    color: var(--c-dark);
    line-height: 1.6;
    font-size: 15px;
}
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { color: var(--c-dark); margin: 0 0 .5em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
.muted { color: var(--c-muted); font-size: .9rem; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.link { color: var(--c-primary); font-weight: 600; }
.section { padding: 40px 20px; }
.section.narrow { max-width: 720px; margin: 0 auto; }

/* Public FX info bar (just above the footer — visible on every page) */
.fx-bar {
    background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-soft) 100%);
    color: #fff;
    font-size: .88rem;
    border-top: 1px solid rgba(0,0,0,0.1);
    margin-top: 30px;       /* breathing room from main content */
}
.fx-bar-inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 6px 20px; min-height: 32px;
}
.fx-bar-icon { font-size: 1rem; line-height: 1; }
.fx-bar-rate { display: inline-flex; align-items: baseline; gap: 4px; }
.fx-bar-eq { opacity: .75; margin: 0 2px; }
.fx-bar-syp { color: var(--c-accent); font-weight: 800; font-size: 1.02rem; }
.fx-bar-unit { opacity: .9; font-size: .85rem; }
.fx-bar-sep { opacity: .5; }
.fx-bar-meta { display: inline-flex; align-items: center; gap: 6px; opacity: .92; }
.fx-bar-time { font-weight: 600; }
.fx-bar-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74,222,128,0.7);
    animation: fxPulse 2s infinite;
}
@keyframes fxPulse {
    0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
.fx-bar-source { opacity: .85; font-size: .82rem; }
@media (max-width: 700px) {
    .fx-only-wide { display: none; }
    .fx-bar-inner { padding: 5px 12px; font-size: .82rem; gap: 6px; }
    .fx-bar-syp { font-size: .96rem; }
}
@media (max-width: 420px) {
    .fx-bar-meta { font-size: .76rem; }
}

/* Header */
.site-header {
    background: #fff;
    border-bottom: 1px solid var(--c-border);
    position: sticky; top: 0; z-index: 100;
    box-shadow: var(--shadow);
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    /* Tight header so the map below gets more screen */
    padding: 6px 20px; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; color: var(--c-primary); text-decoration: none; line-height: 1.1; }
.brand small { color: var(--c-accent); font-size: .72rem; font-weight: 700; display: block; margin-top: 1px; white-space: nowrap; }
.brand-logo { font-size: 1.9rem; }
.brand-img { height: 42px; width: auto; max-width: 64px; object-fit: contain; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; }
.site-header { padding-block: 8px; }

/* Hero — big prominent logo */
.hero-logo {
    display: block; margin: 0 auto 18px;
    height: 140px; width: auto; max-width: 320px;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.25));
    background: rgba(255,255,255,0.95);
    padding: 14px 28px; border-radius: 18px;
}
.hero-logo-fallback {
    margin: 0 auto 18px; padding: 18px 32px;
    background: rgba(255,255,255,0.95); border-radius: 18px;
    display: inline-block; text-align: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.hero-emoji { font-size: 3.5rem; line-height: 1; margin-bottom: 6px; }
.hero-brand-text {
    font-size: 2rem; font-weight: 800; color: var(--c-primary);
    line-height: 1.1;
}
.hero-brand-text span {
    display: block; font-size: 1.5rem; color: var(--c-accent);
    margin-top: 2px;
}

/* Hero tagline ribbon */
.hero-tagline {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.45);
    padding: 6px 18px; border-radius: 999px;
    color: #fff; font-weight: 700; font-size: .95rem;
    margin-bottom: 14px; letter-spacing: .5px;
    backdrop-filter: blur(6px);
}

/* Footer tagline */
.tagline { color: var(--c-accent); font-weight: 700; margin: 4px 0 8px; font-size: 1.05rem; }

/* Contract brand header/footer */
.contract-brand-header {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 16px; margin-bottom: 18px;
    border-bottom: 2px solid var(--c-primary);
}
.contract-brand-header strong { display: block; font-size: 1.1rem; color: var(--c-primary); }
.contract-brand-footer {
    margin-top: 28px; padding-top: 14px;
    border-top: 1px dashed var(--c-border);
    text-align: center;
}
.brand-img-small { height: 48px; width: auto; max-width: 60px; }
.tagline-inline { color: var(--c-muted); font-size: .9rem; font-weight: 600; }
.main-nav { display: flex; gap: 14px; flex: 1; justify-content: center; font-size: .9rem; align-items: center; }
.main-nav a { color: var(--c-dark); font-weight: 600; white-space: nowrap; }
.main-nav a:hover { color: var(--c-primary); text-decoration: none; }
.header-actions { display: flex; gap: 6px; align-items: center; }
.header-actions .btn {
    padding: 5px 9px; font-size: .82rem;
    white-space: nowrap;        /* prevent multi-line wrap on Arabic labels */
}

/* Currency selector */
.currency-dropdown { position: relative; }
.currency-btn {
    display: flex; align-items: center; gap: 6px;
    background: var(--c-bg); border: 1px solid var(--c-border);
    padding: 6px 12px; border-radius: 8px; cursor: pointer;
    font-family: inherit; font-weight: 600; font-size: .9rem;
    color: var(--c-dark);
}
.currency-btn:hover { background: #fff; border-color: var(--c-accent); }
.currency-btn .caret { font-size: .7rem; color: var(--c-muted); }
.currency-menu {
    position: absolute; top: calc(100% + 6px); left: 0;
    background: #fff; border: 1px solid var(--c-border);
    border-radius: 10px; box-shadow: var(--shadow-lg);
    min-width: 200px; padding: 6px; z-index: 200;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: all .15s;
}
.currency-dropdown:hover .currency-menu,
.currency-dropdown:focus-within .currency-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.currency-option {
    display: grid; grid-template-columns: 28px 50px 1fr 30px; gap: 8px;
    align-items: center; padding: 8px 10px; border-radius: 6px;
    color: var(--c-dark); font-size: .9rem; text-decoration: none;
}
.currency-option:hover { background: var(--c-bg); text-decoration: none; }
.currency-option.active { background: var(--c-primary); color: #fff; }
.currency-option.active .cur-name { color: rgba(255,255,255,0.85); }
.cur-flag { font-size: 1.2rem; }
.cur-code { font-weight: 700; }
.cur-name { color: var(--c-muted); font-size: .82rem; }
.cur-sym { text-align: left; font-weight: 700; color: var(--c-accent); }
.currency-option.active .cur-sym { color: var(--c-accent); }
.price-original { font-size: .82rem; margin-top: 4px; }
.currency-foot {
    margin-top: 6px; padding: 8px 10px;
    border-top: 1px dashed var(--c-border);
    font-size: .78rem; color: var(--c-muted); line-height: 1.6;
}
.currency-foot a { color: var(--c-primary); font-weight: 700; }

/* Price offers */
.offer-form {
    background: linear-gradient(135deg, #fff8f0, #fef3c7);
    border: 1px solid var(--c-accent);
    padding: 14px 16px !important;
}
.offer-form h4 { color: var(--c-accent-dark); margin-top: 0; }
.offer-form input, .offer-form select, .offer-form textarea {
    width: 100%; padding: 8px 10px; border: 1px solid var(--c-border);
    border-radius: 6px; font-family: inherit; margin-top: 4px;
}
.card-soft { background: var(--c-bg); border-radius: var(--radius); padding: 12px; }
.offers-list { display: flex; flex-direction: column; gap: 14px; }
.offer-card { padding: 16px !important; border-right: 4px solid var(--c-border); }
.offer-card.status-pending { border-right-color: var(--c-accent); background: #fffbeb; }
.offer-card.status-accepted { border-right-color: var(--c-success); background: #f0fdf4; }
.offer-card.status-rejected { border-right-color: var(--c-danger); background: #fef2f2; opacity: .85; }
.offer-card.status-countered { border-right-color: #8b5cf6; background: #f5f3ff; }
.offer-row { display: flex; justify-content: space-between; gap: 14px; }
.offer-info h3 { margin: 0 0 4px; font-size: 1.1rem; }
.offer-info h3 a { color: var(--c-dark); }
.offer-price { font-size: 1.4rem; font-weight: 800; color: var(--c-primary); margin: 6px 0; }
.offer-price small { font-size: .8rem; font-weight: 400; color: var(--c-muted); margin-right: 6px; }
.offer-msg {
    border-right: 3px solid var(--c-muted); padding: 6px 12px; margin: 8px 0;
    font-style: italic; color: var(--c-dark); background: rgba(0,0,0,0.03);
    border-radius: 4px;
}
.offer-msg.seller { border-right-color: var(--c-success); background: rgba(21,128,61,0.05); font-style: normal; }
.offer-status { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.offer-actions { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--c-border); }
.offer-actions textarea {
    width: 100%; padding: 8px 10px; border: 1px solid var(--c-border);
    border-radius: 6px; font-family: inherit; margin-bottom: 8px;
}
.offer-counter-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.offer-counter-row input {
    flex: 1; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: 6px;
}
.offer-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.offer-btn-row button { flex: 1; min-width: 100px; }

/* Expiry info box on property detail (owner only) */
.expiry-info {
    padding: 10px 14px; margin-top: 10px;
    border-radius: 8px; font-size: .92rem;
    line-height: 1.7; border-right: 4px solid var(--c-border);
}
.expiry-info.fresh { background: #f0fdf4; border-right-color: var(--c-success); }
.expiry-info.warning { background: #fef3c7; border-right-color: #d97706; }
.expiry-info.critical { background: #fee2e2; border-right-color: var(--c-danger); animation: pulse 2s infinite; }
.expiry-info.expired { background: #f3f4f6; border-right-color: #6b7280; }
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Moderation notice — shown on top of /properties/new */
.moderation-notice {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-right: 5px solid #d97706;
    border-radius: var(--radius);
    padding: 16px 20px; margin: 14px 0 22px;
    line-height: 1.9;
}
.moderation-notice h3 {
    margin: 0 0 6px;
    color: #92400e;
    font-size: 1.15rem;
}
.moderation-notice p { margin: 6px 0; }
.moderation-notice strong { color: #7c2d12; }
.moderation-notice-cta {
    background: rgba(255,255,255,0.6);
    padding: 8px 12px; border-radius: 8px;
    margin-top: 10px !important;
}
.moderation-notice-cta a {
    color: var(--c-primary); text-decoration: none;
}
.moderation-notice-cta a:hover { text-decoration: underline; }

.moderation-notice.success {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-right-color: #059669;
}
.moderation-notice.success h3 { color: #065f46; }
.moderation-notice.success strong { color: #064e3b; }

/* Allow newlines + HTML in flash messages */
.flash { line-height: 1.8; }

/* ============================================================
   Partner ecosystem pages
   ============================================================ */

/* Services landing hero */
.services-hero {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-soft) 60%, var(--c-accent) 100%);
    color: #fff; padding: 60px 20px 50px; text-align: center;
}
.services-hero h1 { color: #fff; font-size: 2.4rem; margin: 14px 0 8px; }
.services-hero .hero-sub { color: rgba(255,255,255,0.92); max-width: 720px; margin: 0 auto 22px; font-size: 1.05rem; }
.services-hero-badge {
    display: inline-block; background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.4); padding: 6px 18px; border-radius: 999px;
    color: #fff; font-weight: 700; font-size: .92rem; backdrop-filter: blur(8px);
}
.services-hero-stats {
    display: flex; justify-content: center; gap: 36px; margin-top: 16px; flex-wrap: wrap;
}
.services-hero-stats > div { text-align: center; }
.services-hero-stats strong { display: block; font-size: 2rem; font-weight: 800; color: #fff; }
.services-hero-stats small { color: rgba(255,255,255,0.85); font-size: .85rem; }

/* Category grid on landing */
.services-cat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px; margin: 22px 0;
}
.service-cat-card {
    color: #fff; padding: 26px 22px; border-radius: 14px;
    text-decoration: none; transition: transform .2s, box-shadow .2s;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow);
}
.service-cat-card:hover {
    transform: translateY(-3px); text-decoration: none; color: #fff;
    box-shadow: var(--shadow-lg);
}
.service-cat-card::after {
    content: ""; position: absolute; top: -40px; left: -40px;
    width: 120px; height: 120px; background: rgba(255,255,255,0.1);
    border-radius: 50%;
}
.service-cat-icon { font-size: 3rem; margin-bottom: 6px; }
.service-cat-card h3 { color: #fff; margin: 8px 0 4px; font-size: 1.2rem; }
.service-cat-count { color: rgba(255,255,255,0.85); font-size: .9rem; }
.service-cat-arrow { position: absolute; bottom: 16px; left: 22px; font-size: 1.4rem; }

/* Category page hero */
.category-hero {
    color: #fff; padding: 40px 20px 36px; margin-bottom: 24px;
}
.category-hero-inner { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.category-hero-icon { font-size: 5rem; line-height: 1; }
.category-hero h1 { color: #fff; margin-bottom: 4px; }
.category-hero p { color: rgba(255,255,255,0.95); margin: 4px 0; }
.muted-light { color: rgba(255,255,255,0.8); font-size: .9rem; }
.crumbs.light a, .crumbs.light span { color: rgba(255,255,255,0.85); }
.crumbs.light a:hover { color: #fff; }

/* Partner grid */
.partner-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
}
.partner-card {
    background: #fff; border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow); transition: all .2s;
    color: var(--c-dark); text-decoration: none; display: flex; flex-direction: column;
}
.partner-card:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-lg);
    text-decoration: none; color: var(--c-dark);
}
.partner-card.featured { border: 2px solid var(--c-accent); }
.partner-card-head {
    padding: 22px; text-align: center; position: relative;
    min-height: 110px; display: flex; align-items: center; justify-content: center;
}
.partner-card-head.small { min-height: 80px; padding: 14px; }
.partner-card-icon { font-size: 3rem; color: rgba(255,255,255,0.9); }
.partner-card-head.small .partner-card-icon { font-size: 2.4rem; }
.partner-logo-thumb {
    position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
    width: 56px; height: 56px; background: #fff; padding: 6px; border-radius: 12px;
    object-fit: contain; box-shadow: var(--shadow);
}
.featured-ribbon {
    position: absolute; top: 8px; right: 8px;
    background: var(--c-accent); color: #fff; padding: 3px 10px;
    border-radius: 999px; font-size: .72rem; font-weight: 700;
}
.partner-card-body { padding: 32px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.partner-card-body h3 { margin: 0 0 4px; font-size: 1.1rem; }
.partner-cat-tag {
    display: inline-block; background: var(--c-bg); color: var(--c-muted);
    padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700;
    margin-bottom: 6px;
}
.partner-cat-tag.light { background: rgba(255,255,255,0.2); color: #fff; }
.partner-services-mini {
    list-style: none; padding: 0; margin: 8px 0; font-size: .85rem; color: var(--c-muted);
}
.partner-services-mini li { padding: 2px 0; }
.partner-card-meta {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-top: auto; padding-top: 10px;
    font-size: .85rem; color: var(--c-muted);
}
.partner-card-cta {
    margin-top: 8px; color: var(--c-primary); font-weight: 700; font-size: .9rem;
}

/* Partner detail */
.partner-hero {
    color: #fff; padding: 50px 20px 40px; margin-bottom: 28px;
    background-color: var(--c-primary);
}
.partner-hero-inner { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.partner-hero-logo {
    width: 130px; height: 130px; background: #fff; padding: 12px;
    border-radius: 18px; flex-shrink: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.partner-hero-logo img { width: 100%; height: 100%; object-fit: contain; }
.partner-hero-icon { font-size: 5.5rem; line-height: 1; }
.partner-hero-text { flex: 1; min-width: 240px; }
.partner-hero h1 { color: #fff; margin: 6px 0; font-size: 2rem; }
.partner-tagline { color: rgba(255,255,255,0.95); font-size: 1.1rem; margin: 6px 0; }
.partner-hero-meta {
    display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px;
    color: rgba(255,255,255,0.9); font-size: .92rem;
}
.featured-badge {
    background: var(--c-accent); color: #fff; padding: 3px 12px;
    border-radius: 999px; font-weight: 700;
}

.partner-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; }
.partner-content > .card { margin-bottom: 16px; }
.partner-content h2 { color: var(--c-primary); margin-bottom: 12px; }
.partner-description { line-height: 1.9; white-space: pre-line; }
.partner-services { list-style: none; padding: 0; }
.partner-services li {
    padding: 10px 12px; background: var(--c-bg); border-radius: 8px;
    margin-bottom: 6px; display: flex; align-items: center; gap: 10px;
}
.service-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; background: var(--c-success); color: #fff;
    border-radius: 50%; flex-shrink: 0; font-weight: 700;
}
.commission-display {
    display: flex; gap: 16px; align-items: center;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    padding: 16px 20px; border-radius: var(--radius);
    border-right: 4px solid var(--c-accent);
}
.commission-icon { font-size: 2.6rem; }
.commission-amount { font-size: 1.3rem; font-weight: 800; color: var(--c-accent-dark); }
.city-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.city-chip {
    background: var(--c-bg); color: var(--c-dark);
    padding: 5px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600;
}
.guarantee-card { background: linear-gradient(135deg, #f0fdf4, #d1fae5); border-right: 4px solid var(--c-success); }
.guarantee-card h2 { color: #065f46; }
.guarantee-list { list-style: none; padding: 0; }
.guarantee-list li { padding: 6px 0; color: #064e3b; font-weight: 600; }

/* Partner aside */
.partner-aside > .card { margin-bottom: 14px; }
.partner-contact h3 { margin-bottom: 10px; }
.contact-row {
    display: flex; gap: 12px; align-items: center; padding: 10px 0;
    border-bottom: 1px solid var(--c-border); color: var(--c-dark);
    text-decoration: none;
}
.contact-row:last-child { border-bottom: none; }
.contact-row:hover { text-decoration: none; color: var(--c-primary); }
.contact-icon { font-size: 1.5rem; }
.contact-row strong { display: block; font-size: .82rem; color: var(--c-muted); }
.partner-request-form input, .partner-request-form textarea {
    width: 100%; padding: 10px 12px; margin: 6px 0;
    border: 1px solid var(--c-border); border-radius: 6px; font-family: inherit;
}

/* Services CTA band */
.services-cta-band {
    background: linear-gradient(135deg, var(--c-dark), #374151);
    color: #fff; padding: 50px 20px; margin-top: 40px; text-align: center;
}
.services-cta-band h2 { color: #fff; }
.services-cta-band p { color: #d1d5db; margin-bottom: 18px; }

@media (max-width: 900px) {
    .partner-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .services-hero h1 { font-size: 1.7rem; }
    .services-hero-stats { gap: 18px; }
    .partner-hero h1 { font-size: 1.4rem; }
    .partner-hero-logo { width: 90px; height: 90px; }
}

/* Inline neighbourhood chip in the personalised "in your city" section */
.chip-inline {
    display: inline-block;
    background: #fef3c7;
    color: var(--c-accent-dark);
    border: 1px solid var(--c-accent);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    margin: 0 3px;
}
.link-muted { color: var(--c-muted); font-size: .85rem; }
.link-muted:hover { color: var(--c-primary); }

/* Quick-reply chips — shown below the welcome message and as clarifying
   follow-ups when the user's question was too vague to answer directly. */
.ai-suggested:empty { display: none; }
.ai-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 8px 0 4px;
}
.ai-chip {
    background: #fff;
    border: 1px solid var(--c-primary);
    color: var(--c-primary);
    padding: 7px 12px; border-radius: 999px;
    font-family: inherit; font-size: .85rem; font-weight: 600;
    cursor: pointer; line-height: 1.3;
    transition: all .12s;
    max-width: 100%; text-align: right;
}
.ai-chip:hover {
    background: var(--c-primary); color: #fff;
    transform: translateY(-1px);
}
.ai-chips-followup {
    margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed var(--c-border);
}
.ai-chips-followup .ai-chip {
    background: #fef3c7; border-color: var(--c-accent); color: var(--c-accent-dark);
}
.ai-chips-followup .ai-chip:hover {
    background: var(--c-accent); color: #fff;
}
/* Call-to-action chip: "🔍 اعرض النتائج" — emphasised so it stands out */
.ai-chip-cta {
    background: var(--c-success) !important;
    border-color: var(--c-success) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(21,128,61,0.25);
    order: -1;          /* always first inside its flex container */
}
.ai-chip-cta:hover {
    background: #0c5e2a !important;
}

/* AI-suggested partners inside chat widget */
.ai-partners {
    margin: 8px 0; display: flex; flex-direction: column; gap: 6px;
}
.ai-partner-card {
    display: flex; gap: 10px; align-items: center;
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    border: 1px solid #c4b5fd; border-radius: 10px;
    padding: 10px 12px; text-decoration: none; color: var(--c-dark);
    transition: all .15s;
}
.ai-partner-card:hover {
    transform: translateX(-2px); box-shadow: var(--shadow);
    text-decoration: none; color: var(--c-dark);
}
.ai-partner-icon { font-size: 1.8rem; flex-shrink: 0; }
.ai-partner-info { flex: 1; min-width: 0; line-height: 1.4; }
.ai-partner-info strong { display: block; font-size: .92rem; color: #6d28d9; }
.ai-partner-info small { color: var(--c-muted); font-size: .78rem; }
.ai-partner-tagline { font-size: .8rem; color: var(--c-muted); margin-top: 2px; }

/* Partner FAQ section */
.faq-card { background: linear-gradient(135deg, #fdf4ff, #faf5ff); border-right: 4px solid #a855f7; }
.faq-card h2 { color: #6d28d9; }
.faq-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.faq-item {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 12px 16px;
}
.faq-item summary {
    cursor: pointer; font-weight: 700; color: var(--c-dark);
    line-height: 1.6; user-select: none;
}
.faq-item summary:hover { color: #7c3aed; }
.faq-item.ai-generated { border-color: #c4b5fd; background: #faf5ff; }
.faq-item.ai-generated summary { color: #7c3aed; }
.faq-answer { padding-top: 10px; line-height: 1.8; color: var(--c-dark); border-top: 1px dashed var(--c-border); margin-top: 8px; }

/* Service transparency cards on partner detail */
.transparency-card { border-right: 4px solid var(--c-border); }
.transparency-card.pricing { background: linear-gradient(135deg, #fef9c3, #fef3c7); border-right-color: var(--c-accent); }
.transparency-card.pricing h2 { color: var(--c-accent-dark); }
.transparency-card.timeline { background: linear-gradient(135deg, #dbeafe, #bfdbfe); border-right-color: #1e40af; }
.transparency-card.timeline h2 { color: #1e3a8a; }
.transparency-card.documents { background: linear-gradient(135deg, #ffedd5, #fed7aa); border-right-color: #ea580c; }
.transparency-card.documents h2 { color: #7c2d12; }
.transparency-card.guarantees { background: linear-gradient(135deg, #d1fae5, #a7f3d0); border-right-color: var(--c-success); }
.transparency-card.guarantees h2 { color: #064e3b; }
.transparency-list { list-style: none; padding: 0; margin: 0; }
.transparency-list li {
    padding: 10px 12px; background: rgba(255,255,255,0.7);
    border-radius: 8px; margin-bottom: 6px; line-height: 1.7;
}
.transparency-list.checks li { display: flex; gap: 10px; align-items: flex-start; }
.transparency-steps {
    list-style: none; counter-reset: stepcount; padding: 0; margin: 0;
}
.transparency-steps li {
    counter-increment: stepcount;
    padding: 10px 14px 10px 50px; background: rgba(255,255,255,0.7);
    border-radius: 8px; margin-bottom: 6px; position: relative; line-height: 1.7;
}
.transparency-steps li::before {
    content: counter(stepcount);
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; background: #1e40af; color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .9rem;
}
.doc-check, .guarantee-check { flex-shrink: 0; font-size: 1.1rem; }
.guarantee-check { color: var(--c-success); font-weight: 700; }

.partner-gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.partner-gallery img {
    width: 100%; aspect-ratio: 4/3; object-fit: cover;
    border-radius: 8px; transition: transform .15s;
}
.partner-gallery a:hover img { transform: scale(1.04); }

/* Transparency bar on admin form */
.transparency-bar {
    background: #fff; padding: 14px 18px; border-radius: var(--radius);
    margin-bottom: 18px; box-shadow: var(--shadow);
}
.transparency-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.transparency-pct { font-size: 1.4rem; font-weight: 800; color: var(--c-primary); }
.transparency-progress {
    width: 100%; height: 10px; background: var(--c-bg);
    border-radius: 999px; overflow: hidden;
}
.transparency-fill { height: 100%; border-radius: 999px; transition: width .3s; }

/* Pricing tiers grid */
.pricing-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px; margin: 24px 0;
}
.pricing-card {
    background: #fff; border: 2px solid var(--c-border); border-radius: var(--radius);
    overflow: hidden; position: relative; transition: all .2s;
}
.pricing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pricing-card.recommended {
    border-color: var(--c-primary);
    box-shadow: 0 8px 24px rgba(27,58,85,0.2);
    transform: scale(1.04);
}
.pricing-ribbon {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    background: var(--c-primary); color: #fff; padding: 4px 14px;
    border-radius: 999px; font-size: .75rem; font-weight: 700; z-index: 2;
}
.pricing-head { padding: 30px 20px 20px; text-align: center; color: #fff; }
.pricing-head h3 { color: #fff; margin: 0 0 12px; font-size: 1.3rem; }
.pricing-free      { background: linear-gradient(135deg, #6b7280, #9ca3af); }
.pricing-standard  { background: linear-gradient(135deg, #1e40af, #3b82f6); }
.pricing-premium   { background: linear-gradient(135deg, var(--c-primary), var(--c-primary-soft)); }
.pricing-sponsored { background: linear-gradient(135deg, var(--c-accent-dark), var(--c-accent)); }
.pricing-amount strong { font-size: 2.4rem; font-weight: 800; }
.pricing-amount span { font-size: .9rem; opacity: .9; }
.pricing-annual { font-size: .82rem; opacity: .85; margin-top: 4px; }
.pricing-body { padding: 18px; }
.pricing-perks { list-style: none; padding: 0; margin: 0 0 14px; }
.pricing-perks li { padding: 6px 0; color: var(--c-dark); font-size: .92rem; }
.pricing-limits {
    display: flex; gap: 12px; padding: 10px;
    background: var(--c-bg); border-radius: 6px; margin-bottom: 14px;
    font-size: .85rem; color: var(--c-muted);
}

/* Benefits grid + apply form */
.benefits-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.benefit-card {
    background: #fff; padding: 24px 20px; border-radius: var(--radius);
    text-align: center; box-shadow: var(--shadow);
}
.benefit-icon { font-size: 2.6rem; margin-bottom: 10px; }
.benefit-card h3 { color: var(--c-primary); }
.apply-form-wrap { max-width: 720px; margin: 0 auto; }

/* Subscription status card */
.sub-status-card { padding: 18px; display: flex; gap: 18px; justify-content: space-between; flex-wrap: wrap; }
.sub-current-tier { line-height: 1.8; }
.sub-stats { display: flex; gap: 18px; }
.sub-stats > div { text-align: center; }
.sub-stats strong { display: block; font-size: 1.4rem; color: var(--c-primary); font-weight: 800; }
.sub-stats small { color: var(--c-muted); font-size: .82rem; }
.sub-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.sub-actions .btn { flex: 1; min-width: 180px; }
.tier-free .badge       { background: #6b7280; }
.tier-standard .badge   { background: #1e40af; }
.tier-premium .badge    { background: var(--c-primary); }
.tier-sponsored .badge  { background: var(--c-accent-dark); }
.mrr-card .kpi-num { color: var(--c-success); }

/* Service suggestions sidebar on property detail */
.services-suggest { padding: 14px 16px !important; }
.services-suggest h4 { margin: 0 0 10px; color: var(--c-primary); font-size: 1rem; }
.srv-link {
    display: block; padding: 8px 12px; margin: 4px 0;
    background: var(--c-bg); border-radius: 6px;
    color: var(--c-dark); text-decoration: none;
    font-size: .9rem; font-weight: 600;
    transition: all .15s;
}
.srv-link:hover {
    background: var(--c-primary); color: #fff;
    text-decoration: none; transform: translateX(-3px);
}

/* AI polish (rewrite) box on /properties/new */
.polish-box {
    background: linear-gradient(135deg, #fdf4ff, #fae8ff);
    border: 1px dashed #a855f7;
    padding: 14px 16px; border-radius: var(--radius);
    margin: 10px 0 14px;
}
.polish-box .btn-secondary { background: #a855f7; }
.polish-box .btn-secondary:hover { background: #9333ea; }
.polish-output {
    background: #fff; border: 1px solid var(--c-border);
    border-radius: 8px; padding: 14px; margin-top: 12px;
}
.polish-compare {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 14px; margin-bottom: 12px;
}
.polish-col h4 { margin: 0 0 8px; font-size: .95rem; }
.polish-col.original h4 { color: var(--c-muted); }
.polish-col.polished h4 { color: #7c3aed; }
.polish-col input, .polish-col textarea {
    width: 100%; padding: 8px 10px; margin-top: 4px;
    border: 1px solid var(--c-border); border-radius: 6px;
    font-family: inherit; font-size: .9rem; line-height: 1.7;
    box-sizing: border-box;
}
.polish-col.original input, .polish-col.original textarea {
    background: #f9fafb; color: var(--c-muted);
}
.polish-col.polished input, .polish-col.polished textarea {
    background: #faf5ff; border-color: #c4b5fd;
}
.polish-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    border-top: 1px dashed var(--c-border); padding-top: 12px;
}
.polish-actions .btn { flex: 1; min-width: 180px; }
.polish-applied {
    background: #f0fdf4; border-right: 4px solid var(--c-success);
    padding: 12px 14px; border-radius: 6px;
    color: #065f46; font-weight: 700;
}
@media (max-width: 700px) {
    .polish-compare { grid-template-columns: 1fr; }
}

/* AI review box on /properties/new */
.ai-review-box {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    border: 1px dashed #8b5cf6;
    padding: 14px 16px !important;
    margin: 14px 0;
}
.ai-review-box .btn-secondary { background: #8b5cf6; }
.ai-review-box .btn-secondary:hover { background: #7c3aed; }
.ai-review-output {
    background: #fff; border: 1px solid var(--c-border);
    border-radius: 8px; padding: 14px 18px; margin-top: 12px;
    line-height: 1.8;
}
.ai-review-output h4 { color: var(--c-primary); margin: 14px 0 6px; font-size: 1rem; }
.ai-review-output h4:first-child { margin-top: 0; }
.review-issues li { color: #92400e; }
.review-suggestions li { color: #1e40af; }
.review-ai-block {
    background: linear-gradient(135deg,#ede9fe,#ddd6fe);
    border-right: 3px solid #7c3aed;
    padding: 10px 14px; border-radius: 6px; margin-top: 10px;
}
.review-clean { color: var(--c-success); font-weight: 700; }

/* Fraud badges in admin */
.badge.fraud-high {
    background: var(--c-danger); color: #fff;
    animation: pulse 2s infinite;
}
.badge.fraud-med { background: #d97706; color: #fff; }
.fraud-flags-box {
    background: #fef2f2; border-right: 4px solid var(--c-danger);
    padding: 10px 14px; border-radius: 6px; margin: 10px 0;
    font-size: .9rem; line-height: 1.7;
}
.fraud-flags-box ul { padding-right: 20px; margin: 6px 0; }
.fraud-flags-box li { margin: 4px 0; }
.fraud-flags-box a { color: var(--c-primary); font-weight: 700; }

/* Moderation queue cards */
.moderation-list { display: flex; flex-direction: column; gap: 14px; }
.moderation-card { padding: 16px !important; border-right: 4px solid var(--c-accent); }
.moderation-grid { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: start; }
.moderation-thumb {
    width: 120px; height: 90px; border-radius: 8px; overflow: hidden;
    background: #eee; display: block; flex-shrink: 0;
}
.moderation-thumb img { width: 100%; height: 100%; object-fit: cover; }
.moderation-thumb .image-placeholder { font-size: 2.4rem; }
.moderation-info h3 { margin: 0 0 4px; font-size: 1.1rem; }
.moderation-info h3 a { color: var(--c-dark); }
.moderation-meta {
    display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0;
    font-size: .88rem; color: var(--c-muted);
}
.moderation-meta span { white-space: nowrap; }
.moderation-desc { color: var(--c-dark); line-height: 1.7; margin: 8px 0 0; }
.moderation-actions {
    display: flex; gap: 8px; margin-top: 12px; padding-top: 12px;
    border-top: 1px dashed var(--c-border);
}
@media (max-width: 700px) {
    .moderation-grid { grid-template-columns: 80px 1fr; }
    .moderation-thumb { width: 80px; height: 60px; }
    .moderation-actions { flex-wrap: wrap; }
}

/* Pending/rejected banner on property detail */
.moderation-banner {
    background: linear-gradient(135deg, #fef3c7, #fef9c3);
    border-right: 4px solid #d97706;
    border-radius: var(--radius); padding: 14px 18px;
    margin-bottom: 16px; line-height: 1.8;
}
.moderation-banner strong { color: #92400e; font-size: 1.05rem; }
.moderation-banner.rejected {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-right-color: var(--c-danger);
}
.moderation-banner.rejected strong { color: var(--c-danger); }

/* Agent agreement page */
.agent-agreement-banner {
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-soft));
    color: #fff; padding: 22px 24px; border-radius: var(--radius);
    margin-bottom: 24px; border-right: 6px solid var(--c-accent);
}
.agent-agreement-banner h1 { color: #fff; }
.legal-page .urgent {
    background: #fef2f2; border-right: 4px solid var(--c-danger);
    padding: 12px 16px; border-radius: 6px; margin: 12px 0;
}
.legal-page h3 { color: var(--c-primary); margin-top: 22px; border-bottom: 2px solid var(--c-border); padding-bottom: 4px; }
.text-center { text-align: center; }

/* Abuse policy banner — top of register page */
.abuse-mini-banner {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid var(--c-danger);
    border-radius: var(--radius); padding: 14px 18px;
    margin: 0 auto 18px; max-width: 420px;
    font-size: .92rem; line-height: 1.7; color: #7f1d1d;
}
.abuse-mini-banner a { color: var(--c-danger); font-weight: 700; text-decoration: underline; }

/* Cadastral (land-registry) number line on property detail */
.cadastral-line {
    background: #fef3c7; border-right: 4px solid #d97706;
    padding: 8px 12px; border-radius: 6px;
    margin: 8px 0; line-height: 1.7;
    display: inline-block;
}
.cadastral-line code {
    background: #fff; padding: 2px 8px; border-radius: 4px;
    font-weight: 700; color: #92400e;
}
.cadastral-note { margin-right: 8px; }

/* External-location hint card — shown on /properties/ when the user
   searched for an unknown street and we found it on Google Maps / OSM. */
.external-hint-card {
    display: flex; gap: 14px; align-items: flex-start;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid #1e40af;
    border-radius: var(--radius);
    padding: 16px 18px;
    margin: 14px 0 22px;
    line-height: 1.75;
}
.external-hint-card .hint-icon {
    font-size: 2.4rem; line-height: 1; flex-shrink: 0;
}
.external-hint-card .hint-body { flex: 1; min-width: 0; }
.external-hint-card .hint-label {
    font-weight: 700; color: #1e3a8a;
    margin: 6px 0 2px;
    word-break: break-word;
}
.external-hint-card .hint-coords {
    font-family: monospace; margin-bottom: 10px;
}
.external-hint-card .hint-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 10px;
}
.external-hint-card .hint-actions .btn { padding: 10px 16px; }

/* Privacy pledge banner — top of /auth/register, reassures the user
   that their data is confidential before they hand it over. */
.privacy-pledge-banner {
    display: flex; gap: 14px; align-items: flex-start;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 2px solid var(--c-success);
    border-radius: var(--radius); padding: 14px 18px;
    margin: 0 auto 14px; max-width: 420px;
    line-height: 1.75; color: #064e3b;
}
.privacy-pledge-banner .pledge-icon {
    font-size: 2rem; line-height: 1; flex-shrink: 0;
}
.privacy-pledge-banner .pledge-text {
    font-size: .9rem;
}
.privacy-pledge-banner a {
    color: var(--c-success); font-weight: 700; text-decoration: underline;
}

/* Consent row inside the registration form */
.consent-row {
    display: flex !important;
    gap: 10px;
    align-items: flex-start;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 14px 0 !important;
    font-size: .88rem;
    line-height: 1.7;
    color: #14532d;
    cursor: pointer;
}
.consent-row input[type="checkbox"] {
    width: 18px; height: 18px;
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--c-success);
    cursor: pointer;
}
.consent-row a { color: var(--c-primary); font-weight: 700; }

/* ── Email optional block on registration ──────────────────────────────── */
.email-opt-block {
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 16px 18px;
    margin: 14px 0;
}
.email-opt-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}
.email-opt-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.email-opt-title-wrap { display: flex; flex-direction: column; gap: 3px; }
.email-opt-title { font-size: .93rem; color: #1e3a8a; }
.email-opt-badge {
    display: inline-block;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: .72rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 99px;
    border: 1px solid #bfdbfe;
    width: fit-content;
}
.email-benefits-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.email-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .85rem;
    color: #1e3a5f;
    line-height: 1.5;
}
.eb-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.email-opt-note {
    font-size: .82rem;
    color: #475569;
    background: rgba(255,255,255,0.65);
    border-radius: 8px;
    padding: 9px 12px;
    margin: 0 0 10px;
    line-height: 1.6;
    border: 1px solid #e2e8f0;
}

/* Optional-field toggle row (email opt-in on register, email login on login) */
.auth-opt-row {
    display: flex !important;
    gap: 10px;
    align-items: flex-start;
    background: #f8faff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 10px 0 !important;
    font-size: .86rem;
    line-height: 1.6;
    color: #1e3a8a;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.auth-opt-row:hover { background: #eff6ff; border-color: #93c5fd; }
.auth-opt-row input[type="checkbox"] {
    width: 17px; height: 17px;
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--c-primary);
    cursor: pointer;
}

.req-star { color: #dc2626; margin-right: 2px; }
.field-hint { font-size: .80rem; color: var(--c-muted); margin: -6px 0 8px; padding: 0 2px; line-height: 1.5; }

/* ── Login-method marker (🔑 badge above username / email) ───────── */
.has-login-marker { position: relative; }
.login-marker {
    display: inline-flex; align-items: center; gap: 4px;
    background: linear-gradient(90deg,#16a34a,#22c55e);
    color: #fff;
    font-size: .70rem; font-weight: 700;
    padding: 3px 10px; border-radius: 999px;
    margin: 0 4px 4px 0; vertical-align: middle;
    box-shadow: 0 1px 3px rgba(16,185,129,.35);
    letter-spacing: .2px;
}
.login-marker-alt {
    background: linear-gradient(90deg,#2563eb,#3b82f6);
    box-shadow: 0 1px 3px rgba(37,99,235,.35);
}

/* ── WhatsApp option row (under phone) ──────────────────────────── */
.wa-opt-row {
    display: flex !important; align-items: center; gap: 8px;
    background: #f0fdf4; border: 1px solid #86efac;
    border-radius: 8px; padding: 8px 12px;
    margin: -4px 0 12px !important;
    font-size: .86rem; color: #14532d;
    cursor: pointer; transition: background .15s, border-color .15s, opacity .2s;
}
.wa-opt-row:hover { background: #dcfce7; border-color: #4ade80; }
.wa-opt-row input[type="checkbox"] {
    width: 17px; height: 17px; flex-shrink: 0;
    accent-color: #22c55e; cursor: pointer;
}
.wa-opt-row--dim { opacity: .55; }
.wa-icon { color: #22c55e; font-size: 1.05rem; }

/* ── Confirmation modal (review-before-submit) ──────────────────── */
.reg-confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(2px);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: rc-fadein .15s ease-out;
}
@keyframes rc-fadein { from { opacity: 0; } to { opacity: 1; } }
.reg-confirm-card {
    background: #fff;
    border-radius: 14px;
    padding: 22px 24px;
    width: 100%; max-width: 520px;
    max-height: 92vh; overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
    animation: rc-slidein .2s ease-out;
}
@keyframes rc-slidein { from { transform: translateY(15px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.reg-confirm-card h3 {
    margin: 0 0 6px; font-size: 1.15rem;
    color: var(--c-text);
}
.rc-intro {
    margin: 0 0 14px;
    font-size: .88rem;
    color: var(--c-muted);
    line-height: 1.6;
}
.rc-list {
    margin: 0; padding: 0;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    overflow: hidden;
}
.rc-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-border);
    font-size: .88rem;
}
.rc-row:last-child { border-bottom: none; }
.rc-row:nth-child(even) { background: #f9fafb; }
.rc-row dt {
    margin: 0;
    color: var(--c-muted);
    font-weight: 600;
}
.rc-row dd {
    margin: 0;
    color: var(--c-text);
    font-weight: 500;
    word-break: break-word;
}
.rc-actions {
    display: flex; gap: 10px;
    margin-top: 16px;
}
.rc-actions .btn { flex: 1; }
@media (max-width: 480px) {
    .rc-row { grid-template-columns: 100px 1fr; gap: 8px; font-size: .82rem; }
    .rc-actions { flex-direction: column-reverse; }
}

/* Privacy policy page styling */
.privacy-page .privacy-summary {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-right: 4px solid var(--c-success);
    padding: 14px 18px; margin: 14px 0 22px;
    line-height: 1.8; color: #064e3b;
}
.privacy-page .callout {
    background: #fef3c7; border-right: 4px solid #d97706;
    padding: 12px 16px; border-radius: 6px;
    margin: 12px 0; line-height: 1.8;
}
.privacy-page h2 {
    margin-top: 24px; color: var(--c-primary);
    border-bottom: 2px solid var(--c-border); padding-bottom: 4px;
}
.privacy-page ul { padding-right: 22px; line-height: 2; }

/* Abuse policy full page */
.abuse-banner {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-soft) 100%);
    color: #fff; padding: 28px 24px; border-radius: var(--radius);
    margin-bottom: 24px;
    border-right: 6px solid var(--c-danger);
}
.abuse-banner h1 { color: #fff; }
.abuse-summary { font-size: 1.05rem; line-height: 1.9; margin: 0; }
.abuse-summary strong { color: #fef3c7; }
.abuse-list { list-style: none; padding: 0; }
.abuse-list li {
    padding: 10px 14px; margin: 8px 0;
    background: #fef2f2; border-right: 3px solid var(--c-danger);
    border-radius: 6px; line-height: 1.8;
}
.abuse-action-box {
    background: #fef2f2; border: 2px solid var(--c-danger);
    padding: 16px 20px; border-radius: var(--radius); margin: 14px 0;
}
.abuse-action-box ol { padding-right: 22px; }
.abuse-action-box li { margin: 6px 0; line-height: 1.8; }

/* Contact form bits */
.contact-cards { margin-bottom: 18px; }
.contact-info-card {
    background: var(--c-bg); border-right: 4px solid var(--c-accent);
    padding: 14px 18px; border-radius: var(--radius); margin-bottom: 16px;
}
.contact-info-card h3 { margin-top: 0; }
.contact-form textarea { resize: vertical; min-height: 140px; }

/* Admin messages list */
.row-unread { background: #fff8f0; font-weight: 600; }
.msg-card { padding: 18px; }
.msg-header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.msg-body { white-space: pre-wrap; line-height: 1.8; }
.msg-reply-card {
    background: #f0fdf4; border-right: 4px solid var(--c-success);
    padding: 14px 18px; border-radius: var(--radius); margin: 14px 0;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: var(--radius);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    font-size: .95rem;
    transition: all .15s;
}
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-dark); text-decoration: none; color: #fff; }
.btn-secondary { background: var(--c-accent); color: #fff; }
.btn-outline { background: #fff; color: var(--c-primary); border-color: var(--c-primary); }
.btn-outline:hover { background: var(--c-primary); color: #fff; text-decoration: none; }
.btn-ghost { background: transparent; color: var(--c-dark); }
.btn-ghost:hover { background: var(--c-bg); text-decoration: none; }
.btn-light { background: #fff; color: var(--c-primary); }
.btn-block { display: block; width: 100%; text-align: center; margin-top: 8px; }
.btn-lg { padding: 14px 28px; font-size: 1.05rem; }

/* Flash */
.flash-area { padding-top: 12px; }
.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 8px; }
.flash-success { background: #dcfce7; color: var(--c-success); }
.flash-danger { background: #fee2e2; color: var(--c-danger); }
.flash-info { background: #dbeafe; color: #1e40af; }

/* Hero */
.hero {
    background: linear-gradient(135deg, #1B3A55 0%, #2c5375 60%, #C8A55B 100%);
    color: #fff;
    padding: 70px 20px 60px;
    text-align: center;
}
.hero h1 { color: #fff; font-size: 2.6rem; margin-bottom: 8px; }
.hero-sub { color: rgba(255,255,255,.9); font-size: 1.15rem; margin-bottom: 28px; }
.hero-search {
    background: #fff;
    border-radius: var(--radius);
    padding: 18px;
    max-width: 880px;
    margin: 0 auto;
    box-shadow: var(--shadow-lg);
    color: var(--c-dark);
}
.search-tabs { display: flex; gap: 16px; margin-bottom: 12px; }
.search-tabs label { display: flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }

/* Big pill-style tabs for buy / rent in the hero */
.search-tabs.big {
    display: flex; gap: 8px; margin-bottom: 16px;
    background: #f3f4f6; padding: 6px; border-radius: 999px; width: fit-content;
}
.search-tabs.big .search-tab {
    cursor: pointer; padding: 0; margin: 0;
}
.search-tabs.big .search-tab input { display: none; }
.search-tabs.big .search-tab span {
    display: inline-block; padding: 10px 28px; border-radius: 999px;
    font-weight: 700; font-size: 1rem; color: var(--c-muted);
    transition: all .2s;
}
.search-tabs.big .search-tab input:checked + span {
    background: var(--c-primary); color: #fff;
    box-shadow: 0 4px 12px rgba(27,58,85,0.3);
}
.search-tabs.big .search-tab:hover span { color: var(--c-dark); }
.search-tabs.big .search-tab input:checked + span:hover { color: #fff; }

/* Top-nav action pills (شراء / إيجار) */
.main-nav a.nav-action {
    padding: 5px 12px; border-radius: 999px;
    font-weight: 700; font-size: .9rem;
    transition: all .15s;
}
/* .nav-buy and .nav-rent rules were removed alongside the nav buttons
   themselves (see base.html). Kept .nav-sell because بيع/تأجير remains. */
.nav-sell { background: var(--c-success); color: #fff !important; }
.nav-sell:hover { background: #14532d; text-decoration: none; }
/* Tour nav link — subtle gold pill */
a.nav-tour-link {
    background: rgba(200,165,91,.12);
    color: #92400e !important;
    border: 1px solid rgba(200,165,91,.35);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: .82rem;
    transition: background .2s;
}
a.nav-tour-link:hover { background: rgba(200,165,91,.25); color: #78350f !important; }

/* Section title (centered, no flex) */
.section-title-center {
    text-align: center; font-size: 1.7rem; margin-bottom: 24px;
}

/* Three big action cards: شراء / إيجار / بيع */
.action-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.action-card {
    background: #fff; border-radius: 16px; padding: 32px 24px;
    text-align: center; color: var(--c-dark);
    box-shadow: var(--shadow);
    transition: all .25s; position: relative; overflow: hidden;
    border: 2px solid transparent;
}
.action-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.action-card.buy::before { background: var(--c-primary); }
.action-card.rent::before { background: #1e40af; }
.action-card.sell::before { background: var(--c-success); }
.action-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
}
.action-card.buy:hover { border-color: var(--c-primary); }
.action-card.rent:hover { border-color: #1e40af; }
.action-card.sell:hover { border-color: var(--c-success); }
.action-icon { font-size: 3.5rem; margin-bottom: 12px; }
.action-card h3 { font-size: 1.35rem; margin: 8px 0; color: var(--c-dark); }
.action-card p { color: var(--c-muted); font-size: .95rem; line-height: 1.6; margin: 8px 0 16px; }
.action-cta { display: inline-block; font-weight: 700; color: var(--c-primary); }
.action-card.rent .action-cta { color: #1e40af; }
.action-card.sell .action-cta { color: var(--c-success); }

@media (max-width: 700px) {
    .action-cards { grid-template-columns: 1fr; }
    .search-tabs.big .search-tab span { padding: 10px 18px; font-size: .92rem; }
}
.search-fields { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; }
.search-fields select, .search-fields input {
    padding: 12px; border: 1px solid var(--c-border); border-radius: var(--radius);
    font-family: inherit; font-size: .95rem; background: #fff;
}
.smart-search-row {
    display: flex; gap: 8px; align-items: center;
    max-width: 880px; margin: 14px auto 0; padding: 12px;
    background: rgba(255,255,255,0.15); border-radius: var(--radius);
    backdrop-filter: blur(6px);
}
.smart-badge { background: #fff; color: var(--c-primary); padding: 6px 10px; border-radius: 6px; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.smart-search-row input {
    flex: 1; padding: 10px; border: none; border-radius: 6px; font-family: inherit;
}

.hero-sell-cta {
    display: flex; gap: 14px; align-items: center; justify-content: center;
    max-width: 880px; margin: 14px auto 0; padding: 12px 18px;
    background: rgba(0,0,0,0.18); border: 1px dashed rgba(255,255,255,0.4);
    border-radius: var(--radius); color: #fff; font-weight: 600;
    flex-wrap: wrap;
}
.hero-sell-cta .btn { background: #fff; color: var(--c-success); font-weight: 700; }
.hero-sell-cta .btn:hover { background: #f0fdf4; }
.action-section { padding-top: 36px; }

/* Cards & Grids */
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.city-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.city-card {
    background: #fff; padding: 18px; border-radius: var(--radius);
    text-align: center; color: var(--c-dark);
    box-shadow: var(--shadow); transition: all .2s;
}
.city-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none; color: var(--c-primary); }
.city-name { font-weight: 700; font-size: 1.1rem; }
.city-count { color: var(--c-muted); font-size: .85rem; }

.property-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;
}
/* Honor the `hidden` attribute even on elements with an explicit `display`. */
[hidden] { display: none !important; }

/* Reserve space for the sticky header (fx-bar + site-header ≈ 100px)
   so scrollIntoView doesn't park the map under it. */
#results-map { scroll-margin-top: 110px; }
.results-head { scroll-margin-top: 110px; }
.property-card {
    background: var(--c-card); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow);
    transition: all .2s;
}
.property-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.property-image { position: relative; display: block; aspect-ratio: 16/10; background: #eee; overflow: hidden; }
.property-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.property-card:hover .property-image img { transform: scale(1.05); }
.image-placeholder {
    background: linear-gradient(135deg, #e5e7eb, #f3f4f6);
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: var(--c-muted);
}
.image-placeholder.big { aspect-ratio: 16/9; font-size: 5rem; }
.badge {
    position: absolute; top: 12px;
    padding: 4px 10px; border-radius: 6px;
    font-size: .75rem; font-weight: 700; color: #fff;
}
/* Listing-type badge (للبيع / للإيجار) — physical RIGHT side of the
   image. The other badges (featured/promoted/fresh/stale/expired) stack
   BELOW it on the same right side so they don't collide with the
   interest button (.interest-btn) which lives on the physical LEFT. */
.badge-sale  { background: var(--c-success); right: 12px; }
.badge-rent  { background: #1e40af; right: 12px; }
.badge-featured { background: var(--c-accent); right: 12px; top: 44px; }
.badge-promoted {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    right: 12px; top: 76px; font-size: .72rem;
}
.badge-fresh   { background: #16a34a; right: 12px; top: 44px; }
.badge-stale   { background: #9ca3af; right: 12px; top: 44px; }
.badge-expired { background: #6b7280; right: 12px; top: 44px; }
/* Cadastral verified badge — also right side, deeper down */
.cadastral-badge { right: 12px; top: 108px; background: #0f766e; }

/* My Listings table */
.listings-table { display: flex; flex-direction: column; gap: 12px; }
.listing-row {
    display: grid; grid-template-columns: 110px 1fr auto;
    gap: 14px; align-items: center; padding: 12px;
}
.listing-thumb { display: block; width: 110px; height: 80px; border-radius: 8px; overflow: hidden; background: #eee; }
.listing-thumb img { width: 100%; height: 100%; object-fit: cover; }
.listing-thumb .image-placeholder { font-size: 1.6rem; }
.listing-info h3 { margin: 0 0 4px; font-size: 1.05rem; }
.listing-info h3 a { color: var(--c-dark); }
.listing-status { margin-top: 6px; }
.listing-status .badge { position: static; padding: 2px 8px; font-size: .72rem; }
.listing-actions { display: flex; flex-direction: column; gap: 6px; }
.listing-actions form { margin: 0; }
@media (max-width: 700px) {
    .listing-row { grid-template-columns: 80px 1fr; }
    .listing-thumb { width: 80px; height: 60px; }
    .listing-actions { grid-column: 1 / -1; flex-direction: row; }
}

.property-body { padding: 14px 16px; }
.property-body .price { font-size: 1.3rem; font-weight: 800; color: var(--c-primary); }
.property-body .price small { color: var(--c-muted); font-weight: 400; font-size: .8rem; }
.price-per-m2 { font-size: .82rem; color: var(--c-muted); font-weight: 600; margin-top: 2px; }
.price-per-m2.big { font-size: 1rem; color: var(--c-dark); margin-top: 4px; }
.property-title { font-size: 1rem; margin: 6px 0; }
.property-title a { color: var(--c-dark); }
.property-location { color: var(--c-muted); font-size: .88rem; margin-bottom: 8px; }
.property-specs {
    display: flex; gap: 14px; padding-top: 10px; border-top: 1px solid var(--c-border);
    font-size: .9rem; color: var(--c-muted);
}

/* Agents */
.agent-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.agent-card {
    background: #fff; border-radius: var(--radius); padding: 16px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: var(--shadow); color: var(--c-dark);
}
.agent-card:hover { box-shadow: var(--shadow-lg); text-decoration: none; }
.agent-card.big { flex-direction: column; text-align: center; }
.agent-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--c-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.4rem; flex-shrink: 0;
}
.agent-avatar.big { width: 80px; height: 80px; font-size: 2rem; }
.agent-avatar.huge { width: 120px; height: 120px; font-size: 3rem; }
.agent-name { font-weight: 700; }
.agent-meta { font-size: .85rem; color: var(--c-muted); }
.agent-rating { color: var(--c-accent); font-weight: 600; font-size: .9rem; }
.agent-rating.big { font-size: 1.1rem; }
.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.agent-header { display: flex; gap: 24px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }

/* Search Page */
.search-page { display: grid; grid-template-columns: 280px 1fr; gap: 24px; padding: 24px 20px; }
.filters-panel { background: #fff; border-radius: var(--radius); padding: 18px; height: fit-content; position: sticky; top: 80px; box-shadow: var(--shadow); }
.filters-panel h3 { font-size: 1.1rem; margin-bottom: 12px; }
.filters-form label { display: block; margin-bottom: 10px; font-weight: 600; font-size: .88rem; }
.filters-form input, .filters-form select {
    width: 100%; padding: 8px 10px; margin-top: 4px;
    border: 1px solid var(--c-border); border-radius: 6px;
    font-family: inherit; font-size: .9rem;
}
.range-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Street filter chips */
.streets-filter { display: block; }
.streets-chips {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 4px;
}
.street-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--c-primary); color: #fff;
    padding: 4px 10px; border-radius: 999px;
    font-size: .8rem; font-weight: 600;
}
.street-chip button {
    background: rgba(255,255,255,0.25); color: #fff;
    border: none; cursor: pointer;
    width: 18px; height: 18px; border-radius: 50%;
    line-height: 1; font-size: .9rem; font-weight: 700;
    padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.street-chip button:hover { background: rgba(255,255,255,0.5); }
.results-panel { min-width: 0; }
.results-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.view-toggle { display: flex; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.view-toggle button {
    padding: 8px 16px; border: none; background: transparent;
    cursor: pointer; font-family: inherit; font-weight: 600;
}
.view-toggle button.active { background: var(--c-primary); color: #fff; }
.sort-form select { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--c-border); font-family: inherit; }
.results-map { height: 600px; border-radius: var(--radius); overflow: hidden; }

/* Home page: search-strip → interactive map block. Tighter spacing than the
   dedicated /search page since the map is the page's "hero" here. */
.home-map-section {
    margin-top: 14px;
    margin-bottom: 24px;
}
.home-map-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.home-map-title {
    margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--c-text);
}
/* The map + the live area-list sit side-by-side in a flex row.
   On mobile the list stacks below the map and is collapsible. */
.home-map-wrap {
    display: flex; gap: 12px; align-items: stretch;
    position: relative;   /* anchor for floating .map-toast-host */
}
.home-map {                /* slightly shorter than /search to keep things below visible */
    height: 540px;
    box-shadow: var(--shadow);
    border: 1px solid var(--c-border);
    flex: 1; min-width: 0;
}
.home-map-grid { margin-top: 14px; }

/* /auth/my-properties — per-property management dashboard. Compact list
   format with stats at a glance and quick-reply buttons on each row. */
.my-props-dash .mp-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 14px; flex-wrap: wrap;
    margin-bottom: 18px; padding-bottom: 14px;
    border-bottom: 2px solid var(--c-border);
}
.my-props-dash .mp-head h1 { margin: 0 0 4px; font-size: 1.4rem; }

.mp-kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px; margin-bottom: 20px;
}
.mp-kpi {
    background: #fff; padding: 14px; border-radius: 12px;
    box-shadow: var(--shadow);
    border-right: 4px solid var(--c-primary);
}
.mp-kpi-blue   { border-right-color: #2563eb; }
.mp-kpi-green  { border-right-color: #16a34a; }
.mp-kpi-orange { border-right-color: #f59e0b; }
.mp-kpi-purple { border-right-color: #9333ea; }
.mp-kpi-blue   { border-right-color: #2563eb; }
.mp-kpi-num   { font-size: 1.7rem; font-weight: 900; line-height: 1; }
.mp-kpi-label { color: #6b7280; font-size: .86rem; margin-top: 4px; }

.mp-shortcuts {
    display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px;
}
.mp-shortcuts a {
    padding: 6px 14px; border-radius: 999px; font-weight: 700;
    background: #eff6ff; color: #1e3a8a; text-decoration: none;
    border: 1px solid #bfdbfe; font-size: .88rem;
}
.mp-shortcuts a:hover { background: #dbeafe; }

.mp-list {
    display: flex; flex-direction: column; gap: 12px;
}
.mp-row {
    display: flex; gap: 14px; align-items: stretch;
    background: #fff; border: 1px solid var(--c-border);
    border-radius: 12px; padding: 12px;
    box-shadow: var(--shadow);
    border-right: 4px solid #d1d5db;
}
.mp-row.mp-needs-action { border-right-color: #f59e0b; background: #fffbeb; }

.mp-thumb {
    flex-shrink: 0; display: block;
    width: 110px; height: 110px;
    border-radius: 8px; overflow: hidden;
    background: #f3f4f6;
}
.mp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mp-thumb-placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; font-size: 2.5rem;
}

.mp-body { flex: 1; min-width: 0; }
.mp-title { margin: 0 0 4px; font-size: 1rem; }
.mp-title a { color: var(--c-text); }

.mp-stats {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin: 8px 0;
}
.mp-stat {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px;
    background: #f1f5f9; color: #475569;
    font-size: .85rem; font-weight: 700;
}
.mp-stat.mp-active {
    background: #fef3c7; color: #92400e;
    box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.4);
    animation: mpPulse 2s ease-in-out infinite;
}
@keyframes mpPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.5); }
    50%     { box-shadow: 0 0 0 6px rgba(251, 146, 60, 0); }
}
.mp-status-row {
    display: flex; gap: 10px; align-items: center;
    flex-wrap: wrap; margin-top: 4px;
}
.mp-actions {
    display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
    min-width: 160px;
}
.mp-actions .btn { white-space: nowrap; }

@media (max-width: 700px) {
    .mp-row { flex-direction: column; }
    .mp-thumb { width: 100%; height: 180px; }
    .mp-actions { flex-direction: row; flex-wrap: wrap; }
}

/* Agent/owner inbox — list of incoming inquiries with reply form per card. */
.inquiry-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    border-right: 4px solid #d1d5db;
}
.inquiry-card.inq-pending { border-right-color: #f59e0b; }
.inq-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.inq-prop { font-size: .9rem; color: #475569; margin-bottom: 8px; }
.inq-message {
    background: #f8fafc; border-inline-start: 3px solid #94a3b8;
    border-radius: 6px; padding: 8px 12px; margin: 6px 0 10px;
    font-style: italic; color: #1f2937;
}
.inq-response {
    background: #ecfdf5; border-inline-start: 3px solid #16a34a;
    border-radius: 6px; padding: 8px 12px;
    color: #065f46;
}
.inq-reply-form {
    display: flex; flex-direction: column; gap: 8px; margin-top: 8px;
}
.inq-reply-form textarea {
    width: 100%; padding: 9px 12px; border: 1px solid var(--c-border);
    border-radius: 8px; font-family: inherit; font-size: .92rem;
}

/* Property-card engagement badge — small chip on cards where the current
   logged-in user has any open relationship with the property. */
.prop-engagement-tag {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 8px;
    background: #dbeafe;
    color: #1e3a8a;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}

/* "Your engagement" card on /properties/<id> — summarizes every inquiry,
   viewing request, and price offer the current visitor has submitted on
   this property. Helps the buyer remember they already reached out and
   reassures them their message was received. */
.my-engagement-card {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-right: 5px solid #2563eb;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.my-engagement-card h4 {
    margin: 0 0 10px;
    color: #1e3a8a;
    font-size: 1rem;
}
.me-row {
    display: flex; gap: 10px; align-items: flex-start;
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
}
.me-row:last-of-type { margin-bottom: 0; }
.me-icon {
    flex-shrink: 0;
    width: 26px; height: 26px;
    background: #dbeafe;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
}
.me-body { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.55; }
.me-meta { color: #475569; font-size: .82rem; margin-top: 2px; }
.me-response {
    margin-top: 6px;
    padding: 6px 10px;
    background: #ecfdf5;
    border-inline-start: 3px solid #16a34a;
    border-radius: 6px;
    font-style: italic;
    color: #065f46;
}
.me-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}
.me-status.me-ok   { background: #d1fae5; color: #065f46; }
.me-status.me-wait { background: #fef3c7; color: #92400e; }
.me-status.me-mute { background: #e5e7eb; color: #4b5563; }
.me-foot {
    margin-top: 8px;
    text-align: center;
    border-top: 1px dashed #cbd5e1;
    padding-top: 6px;
}

/* Admin review card — collapsible list of the agent's submitted properties. */
.moderation-props {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 10px 0;
}
.moderation-props summary {
    cursor: pointer;
    font-size: .92rem;
    line-height: 1.8;
}
.moderation-props summary > .badge { margin-inline-start: 6px; }
.moderation-props .props-list {
    margin: 8px 0 0;
    padding-inline-start: 22px;
    font-family: ui-monospace, monospace;
    font-size: .88rem;
    line-height: 1.7;
    max-height: 260px;
    overflow-y: auto;
}
.moderation-props .props-list li { margin-bottom: 3px; color: #1f2937; }

/* Agent application — properties portfolio fieldset (20-minimum requirement). */
.properties-fieldset {
    background: #fef9c3;
    border: 1px solid #facc15;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.properties-fieldset legend {
    background: #fef3c7;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 800;
    color: #78350f;
}
.properties-fieldset textarea {
    width: 100%;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: .92rem;
    line-height: 1.7;
}
.properties-fieldset pre.example-block {
    background: #fff;
    border: 1px dashed #facc15;
    border-radius: 6px;
    padding: 8px 10px;
    margin: 6px 0 10px;
    color: #422006;
    font-size: .82rem;
    white-space: pre-wrap;
}
#app-props-counter {
    display: inline-block;
    margin-top: 4px;
    font-family: ui-monospace, monospace;
}

/* ============================================================
   Admin → agent contract page (printable onboarding contract)
   ============================================================ */
.agent-contract-wrap { max-width: 880px; margin: 0 auto; }
.contract-toolbar {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-bottom: 14px; flex-wrap: wrap;
}
.contract-paper {
    background: #fff;
    padding: 36px 44px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    box-shadow: var(--shadow);
    color: #111;
    line-height: 1.75;
    font-size: .96rem;
}
.contract-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 24px;
    border-bottom: 2px solid var(--c-primary);
    padding-bottom: 18px; margin-bottom: 22px;
    flex-wrap: wrap;
}
.contract-brand h1 { margin: 0 0 4px; font-size: 1.7rem; color: var(--c-primary); }
.contract-brand p  { margin: 0; color: #4b5563; font-size: .88rem; max-width: 380px; }
.contract-meta {
    font-size: .82rem; color: #475569; text-align: end;
}
.contract-meta div { margin-bottom: 3px; }
.contract-title {
    text-align: center;
    font-size: 1.35rem;
    margin: 0 0 28px;
    padding: 10px 0;
    border-top: 1px dashed #d1d5db;
    border-bottom: 1px dashed #d1d5db;
}
.contract-section { margin-bottom: 22px; }
.contract-section h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    color: var(--c-primary);
    border-inline-start: 4px solid var(--c-accent);
    padding-inline-start: 10px;
}
.parties, .credentials {
    width: 100%; border-collapse: collapse;
    border: 1px solid #e5e7eb;
}
.parties th, .credentials th {
    background: #f9fafb; font-weight: 700;
    padding: 9px 12px; text-align: right;
    border: 1px solid #e5e7eb;
    width: 38%;
}
.parties td, .credentials td {
    padding: 9px 12px;
    border: 1px solid #e5e7eb;
    vertical-align: top;
}
.pw-token {
    display: inline-block;
    background: #fef3c7; color: #92400e;
    border: 1px dashed #d97706;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 1.1rem; font-weight: 800;
    letter-spacing: 1px;
    margin-inline-end: 8px;
}
.usage-steps, .duties, .rights {
    padding-inline-start: 22px;
    margin: 6px 0 0;
}
.usage-steps li, .duties li, .rights li { margin-bottom: 6px; }

.signatures {
    display: flex; gap: 36px; justify-content: space-between;
    margin: 38px 0 14px;
}
.sig { flex: 1; text-align: center; }
.sig-label { font-size: .85rem; color: #6b7280; margin-bottom: 38px; }
.sig-line {
    border-bottom: 1.5px solid #111;
    margin: 0 12px 6px;
}
.sig-name { font-size: .88rem; color: #1f2937; }

.contract-foot {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px dashed #d1d5db;
    display: flex; justify-content: space-between;
    font-size: .78rem; color: #6b7280;
    flex-wrap: wrap; gap: 8px;
}

/* "الشروط القانونية الكاملة" divider title — separates the operational
   summary from the binding 10-clause legal block. */
.contract-terms-title {
    margin-top: 36px;
    background: #f8fafc;
    color: #111;
    font-size: 1.2rem;
}
.contract-section p.urgent {
    background: #fef2f2;
    border-inline-start: 4px solid #dc2626;
    padding: 8px 12px;
    border-radius: 6px;
    color: #7f1d1d;
}
.contract-section ol,
.contract-section ul { padding-inline-start: 22px; }
.contract-section ol li,
.contract-section ul li { margin-bottom: 4px; }

/* Print: keep each clause on a single page if possible. */
@media print {
    .contract-terms-title {
        page-break-before: always;
        background: transparent !important;
    }
    .contract-section { page-break-inside: avoid; }
    .signatures { page-break-before: avoid; }
}

/* Print rules — hide everything outside the paper, fit A4 cleanly. */
@media print {
    body * { visibility: hidden; }
    .contract-paper, .contract-paper * { visibility: visible; }
    .contract-paper {
        position: absolute; inset: 0;
        padding: 18mm 16mm;
        margin: 0; border: 0; box-shadow: none;
        width: 100%;
    }
    .no-print { display: none !important; }
    .pw-token {
        background: #fff !important;          /* save toner */
        color: #000 !important;
        border-color: #000 !important;
    }
}

/* Live area list (.map-area-list) — right-side panel that fills with
   the properties currently visible inside the map's viewport. Hidden
   until the user actually drags / zooms the map. */
.map-area-list {
    width: 320px;
    max-width: 40%;
    min-width: 260px;
    height: 540px;
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    animation: malSlideIn 220ms ease-out;
}
@keyframes malSlideIn {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}
.mal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-soft) 100%);
    color: #fff;
}
.mal-title {
    margin: 0; font-size: .95rem; font-weight: 700;
    display: flex; align-items: center; gap: 6px;
    /* Override the global "h1,h2,h3,h4 { color: var(--c-dark) }" rule —
       the .mal-head background is dark navy, so the text must be the
       INVERSE: white. Without this, the text becomes dark-on-dark and
       essentially invisible. */
    color: #fff !important;
}
.mal-title span { color: #fff; }
#mal-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 22px; padding: 0 8px;
    background: rgba(255,255,255,0.25);
    border-radius: 999px;
    font-weight: 800;
    color: #fff;                /* same inverse-on-dark logic */
}
.mal-close {
    background: rgba(255,255,255,0.2); border: 0;
    color: #fff; padding: 0 10px; height: 26px;
    border-radius: 6px; cursor: pointer;
    font-size: .85rem; font-weight: 800;
}
.mal-close:hover { background: rgba(255,255,255,0.35); }
.mal-items {
    flex: 1; overflow-y: auto;
    padding: 8px;
}
.mal-item {
    display: flex; gap: 10px; align-items: center;
    padding: 8px;
    /* Extra inline-end padding so the absolutely-positioned ⭐ button
       at the top-end corner doesn't overlap the title text. */
    padding-inline-end: 36px;
    margin-bottom: 6px;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    text-decoration: none;
    color: var(--c-text);
    transition: background-color 120ms, border-color 120ms;
    /* Anchor for the .mal-star-btn absolute positioning. Without this
       the button would float relative to the panel, not its own card. */
    position: relative;
}
.mal-item:hover {
    background: #f8fafc; border-color: #bfdbfe;
    text-decoration: none;
}
.mal-item img,
.mal-img-placeholder {
    width: 56px; height: 56px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f3f4f6;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}
.mal-meta { flex: 1; min-width: 0; }
.mal-price {
    font-weight: 800; font-size: .92rem; color: var(--c-primary);
    white-space: nowrap;
}
.mal-ttl {
    font-size: .8rem; color: #475569;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px;
}
/* Specs (currently just area_m2). Kept on its own line so it stays
   instantly scannable — buyers shop by m² and this is the first
   detail they look for after price. Bold + slightly darker so it
   sits between title (medium) and address (light) in visual weight. */
.mal-spec {
    font-size: .78rem;
    font-weight: 700;
    color: #1B3A55;                            /* Darak navy */
    margin-top: 3px;
}
.mal-more {
    text-align: center; padding: 8px;
    color: #64748b; font-size: .82rem;
    border-top: 1px dashed #e5e7eb;
    margin-top: 4px;
}
.mal-empty {
    padding: 18px 14px; color: #6b7280; font-size: .88rem;
    text-align: center; line-height: 1.7;
}

/* ⭐ Star toggle inside each area-list card.
   --------------------------------------------------------------
   Lives in the top-END corner of the card so it stays in the
   same physical spot regardless of title length. Click is caught
   by the global .interest-btn delegated handler at the top of
   main.js — that handler:
     1. preventDefault's the click so the enclosing <a> never
        navigates (the user wanted the star, not a page change).
     2. POSTs /me/interest/toggle and flips data-active.
     3. Calls __darakUpdatePinInterest(propId, active) which
        re-paints the matching map pin with the gold halo + ⭐
        overlay instantly. No page reload, zero perceived delay.

   Three visual states:
     default          — outlined ☆ on a faint cream background
     hover            — gentle scale + amber border (CTA affordance)
     data-active="1"  — solid gold gradient + glow (the "saved" state).
                        Animation `ib-pulse` fires for 600ms on toggle
                        as visible feedback that the click landed. */
.mal-star-btn {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;          /* RTL: left-side; LTR: right-side */
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff8e1;             /* faint cream so it's findable */
    border: 1.5px solid #fbbf24;     /* warm amber outline */
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    color: #92400e;                  /* amber-800 ☆ glyph */
    cursor: pointer;
    transition: transform 120ms, background 120ms, box-shadow 120ms;
    z-index: 2;                      /* sits above .mal-item image */
}
.mal-star-btn:hover {
    transform: scale(1.10);
    background: #fef3c7;             /* amber-100 */
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}
.mal-star-btn:active { transform: scale(0.96); }

/* Saved state — strong gold pop so the user instantly sees which
   listings are already in their interests as they scan the panel. */
.mal-star-btn[data-active="1"] {
    background: linear-gradient(135deg, #fbbf24 0%, #C8A55B 100%);
    border-color: #C8A55B;
    color: #fff;                     /* ⭐ glyph reads white over gold */
    box-shadow:
        0 0 0 2px rgba(251, 191, 36, 0.30),
        0 2px 6px rgba(200, 165, 91, 0.45);
    transform: scale(1.05);
}
.mal-star-btn[data-active="1"]:hover {
    transform: scale(1.12);
    box-shadow:
        0 0 0 3px rgba(251, 191, 36, 0.40),
        0 3px 9px rgba(200, 165, 91, 0.55);
}

/* Click feedback — reused from the property-card .interest-btn so
   the visual language stays consistent across all star instances. */
.mal-star-btn.ib-pulse {
    animation: malStarPulse 600ms ease-out;
}
@keyframes malStarPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.30); }
    100% { transform: scale(1.05); }
}

@media (max-width: 900px) {
    .home-map-wrap { flex-direction: column; }
    .map-area-list {
        width: 100%; max-width: 100%;
        height: 280px;
    }
}

/* Inline toggle inside the map-controls bar (after we removed the title row).
   Tighter, icon-only on small screens, sits at the end of the flex row. */
.map-controls-with-toggle { align-items: center; }
.view-toggle-inline {
    margin-inline-start: auto;          /* push to the end of the bar */
    flex-shrink: 0;
}
.view-toggle-inline button {
    padding: 8px 12px;
    font-size: 1rem;
    line-height: 1;
}
@media (max-width: 700px) {
    .view-toggle-inline { margin-inline-start: 0; }
}

@media (max-width: 700px) {
    .home-map { height: 420px; }
    .home-map-head { justify-content: stretch; }
    .home-map-head .view-toggle { width: 100%; }
    .home-map-head .view-toggle button { flex: 1; }
}
.map-controls {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    background: #fff; padding: 12px; border-radius: var(--radius);
    margin-bottom: 12px; box-shadow: var(--shadow);
}
.map-controls .address-search-row { flex: 1; display: flex; gap: 6px; min-width: 240px; }
.map-controls input { flex: 1; padding: 9px 12px; border: 1px solid var(--c-border); border-radius: 6px; font-family: inherit; font-size: .92rem; }
.address-search-row { display: flex; gap: 6px; margin-bottom: 10px; }
.address-search-row input { flex: 1; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 6px; font-family: inherit; }
.small { font-size: .85rem; }

/* New Listing Form */
.listing-form .listing-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: start; }
.listing-form .card { padding: 18px; }
.listing-form label { display: block; margin: 8px 0; font-weight: 600; font-size: .9rem; }
.listing-form input, .listing-form select, .listing-form textarea {
    width: 100%; padding: 9px 11px; margin-top: 4px;
    border: 1px solid var(--c-border); border-radius: 6px;
    font-family: inherit; font-size: .92rem; box-sizing: border-box;
}
.features-fieldset { border: 1px solid var(--c-border); border-radius: 8px; padding: 12px 16px; margin: 12px 0; }
.features-fieldset legend { padding: 0 8px; font-weight: 700; color: var(--c-dark); }
.features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.feature-check { display: flex; align-items: center; gap: 6px; font-weight: 500 !important; cursor: pointer; margin: 0 !important; }
.feature-check input { width: auto !important; margin: 0 !important; }

@media (max-width: 900px) {
    .listing-form .listing-grid { grid-template-columns: 1fr; }
}
.empty { padding: 24px; text-align: center; color: var(--c-muted); background: #fff; border-radius: var(--radius); grid-column: 1/-1; }
.empty-inline {
    color: var(--c-muted);
    font-weight: 500;
    font-size: .9rem;
    margin-right: 6px;
}
.pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 30px; }
.pagination a { padding: 8px 16px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.filters-bar { margin-bottom: 18px; }

/* ============================================================
   Property Detail — redesigned for a magazine-like feel:
   bold hero header, glossy gallery, clean info cards, prominent
   open-house slot card on the right, sticky back-bar above all.
   ============================================================ */
.property-detail { padding: 16px 20px 32px; }
.crumbs {
    color: var(--c-muted); font-size: .85rem;
    margin-bottom: 10px;
    opacity: 0.85;
}
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--c-primary); text-decoration: underline; }

/* Hero header — title + key meta on the left, BIG price card on the right.
   The price card now reads like a polished "deal sheet" panel with a
   subtle gold accent + drop shadow. */
.detail-head {
    display: flex; justify-content: space-between;
    gap: 24px; margin-bottom: 22px; flex-wrap: wrap;
    align-items: flex-start;
}
.detail-head > div:first-child { flex: 1; min-width: 240px; }
.detail-head h1 {
    font-size: 1.75rem;
    line-height: 1.25;
    color: #1B3A55;
    margin: 0 0 8px;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.detail-head .muted { font-size: .92rem; margin-bottom: 4px; }

.detail-price {
    flex-shrink: 0;
    min-width: 260px;
    background: linear-gradient(135deg, #ffffff 0%, #fdfaf3 100%);
    border: 1px solid #e7d9bc;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 20px rgba(200, 165, 91, .15);
    position: relative;
}
.detail-price::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #C8A55B, #D4B97A, #C8A55B);
    border-radius: 14px 14px 0 0;
}
.detail-price .price-big {
    font-size: 2.4rem;
    font-weight: 900;
    color: #1B3A55;
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.detail-price .price-original {
    font-size: .82rem;
    margin-top: 2px;
}
.detail-price .price-per-m2 {
    color: #6b7280;
    font-size: .82rem;
    font-weight: 600;
    margin-top: 4px;
    padding: 4px 9px;
    background: rgba(200, 165, 91, .1);
    border-radius: 7px;
    display: inline-block;
}
.detail-price .badge {
    /* Override the generic .badge { position:absolute; top/right:12px }
       — inside the price card we want the للبيع/للإيجار pill to flow
       BELOW the price as an inline chip, NOT cover the price big-text. */
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    display: inline-block;
    margin: 10px 0 0;
    font-size: .82rem;
    padding: 5px 12px;
    border-radius: 999px;
}
.detail-price form { margin-top: 8px; }

/* Cadastral chip — small but clearly visible "official record" element */
.cadastral-line {
    margin-top: 6px;
    padding: 4px 10px;
    background: #f0fdf4;
    border-inline-start: 3px solid #16a34a;
    border-radius: 6px;
    font-size: .85rem;
    color: #166534;
}
.cadastral-line code {
    background: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid #bbf7d0;
    font-weight: 700;
}

/* Gallery — bigger main image, polished thumbs */
/* ============================================================
   Property gallery — compact + elegant.
   Previously the main image used aspect-ratio:16/9 with no height
   cap → on wide screens the image dominated 60% of the viewport.
   Now we cap the height to ~420px and side-pair thumbs as a vertical
   strip on desktop (so thumbs share the visible area, no scroll).
   ============================================================ */
.gallery {
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: 1fr 100px;
    gap: 10px;
    align-items: start;
}
.gallery-main {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .10);
    max-height: 420px;
    aspect-ratio: 4/3;             /* less tall than 16/9 */
    cursor: zoom-in;
}
.gallery-main img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s ease;
}
.gallery-main:hover img { transform: scale(1.03); }
/* Image counter overlay (e.g. "1 / 8") — placed bottom-right */
.gallery-counter {
    position: absolute;
    bottom: 10px;
    inset-inline-end: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    backdrop-filter: blur(6px);
}

/* Thumbnails — vertical strip on desktop (less wasted space) */
.gallery-thumbs {
    display: flex; flex-direction: column;
    gap: 6px;
    max-height: 420px;
    overflow-y: auto;
    padding: 0 2px;
    scroll-behavior: smooth;
}
.gallery-thumbs::-webkit-scrollbar { width: 4px; }
.gallery-thumbs::-webkit-scrollbar-thumb {
    background: #d1d5db; border-radius: 2px;
}
.gallery-thumbs img {
    width: 100px; height: 75px; object-fit: cover;
    border-radius: 8px; cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .15s, transform .12s, box-shadow .15s;
    flex-shrink: 0;
    opacity: 0.78;
}
.gallery-thumbs img:hover, .gallery-thumbs img.active {
    border-color: var(--c-accent, #C8A55B);
    transform: scale(1.03);
    box-shadow: 0 3px 8px rgba(200, 165, 91, .35);
    opacity: 1;
}

/* On phones, thumbs go back to horizontal strip below the main image */
@media (max-width: 720px) {
    .gallery {
        grid-template-columns: 1fr;
    }
    .gallery-main {
        max-height: 320px;
        aspect-ratio: 4/3;
    }
    .gallery-thumbs {
        flex-direction: row;
        max-height: none;
        overflow-y: hidden;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .gallery-thumbs::-webkit-scrollbar { height: 4px; width: auto; }
    .gallery-thumbs img { width: 80px; height: 60px; }
}

/* Two-column layout — content on left, sticky sidebar on right */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
}
.detail-grid > aside { position: sticky; top: 80px; align-self: start; }

.detail-block {
    background: #fff;
    padding: 22px;
    border-radius: 14px;
    margin-bottom: 18px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
    border: 1px solid #f1f5f9;
}
.detail-block h2, .detail-block h3, .detail-block h4 {
    color: #1B3A55;
    margin-top: 0;
}
.specs-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.specs-row > div {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-weight: 700;
    color: #1B3A55;
    transition: border-color .15s, transform .15s;
}
.specs-row > div:hover {
    border-color: var(--c-accent, #C8A55B);
    transform: translateY(-1px);
}
.specs-row span:first-child {
    font-size: 1.5rem;
    color: var(--c-accent, #C8A55B);
}
.features-list {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}
.features-list li {
    padding: 7px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    color: #166534;
    font-size: .88rem;
    font-weight: 600;
}
.features-list li { color: var(--c-success); font-weight: 600; }
.property-map { height: 350px; border-radius: var(--radius); }

/* ============================================================
   Radius circle control on the property detail map.
   Lets the visitor draw a circle of N meters around the property
   to understand "what's within walking distance / a short drive".
   ============================================================ */
.prop-radius-control {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
}
.prc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.prc-label {
    color: #92400e;
    font-weight: 600;
    font-size: .92rem;
}
.prc-label strong {
    color: #1B3A55;
    background: rgba(200, 165, 91, .25);
    padding: 2px 8px;
    border-radius: 6px;
    margin-inline-start: 4px;
    font-family: 'Cairo', sans-serif;
    font-size: .95rem;
}
.prc-quick {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.prc-quick button {
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid #fcd34d;
    background: #fff;
    color: #92400e;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, transform .1s;
}
.prc-quick button:hover { background: #fef3c7; }
.prc-quick button.active {
    background: #1B3A55;
    color: #fff;
    border-color: #1B3A55;
}
.prc-quick button.prc-off {
    background: #fff;
    color: #6b7280;
    border-color: #d1d5db;
}
.prc-quick button.prc-off:hover { background: #f3f4f6; }
.prc-quick button:active { transform: scale(.96); }

/* The slider itself — re-styled for both browsers */
#prop-radius-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to left, #C8A55B, #f59e0b);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}
#prop-radius-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1B3A55;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    cursor: grab;
    transition: transform .12s;
}
#prop-radius-slider::-webkit-slider-thumb:active {
    transform: scale(1.15);
    cursor: grabbing;
}
#prop-radius-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1B3A55;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    cursor: grab;
}

/* On phones — stack vertically + bigger touch targets */
@media (max-width: 600px) {
    .prc-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .prc-quick { justify-content: center; }
    .prc-quick button { padding: 5px 12px; font-size: .9rem; }
}
.contact-side > div, .contact-side > form { background: #fff; padding: 18px; border-radius: var(--radius); margin-bottom: 14px; box-shadow: var(--shadow); }
.agent-box { text-align: center; }
.inquiry-form input, .inquiry-form textarea {
    width: 100%; padding: 10px; margin: 6px 0; border: 1px solid var(--c-border); border-radius: 6px; font-family: inherit;
}
.description { white-space: pre-line; }

/* Auth */
.auth-page {
    display: flex;
    flex-direction: column;          /* stack banners + form vertically */
    align-items: center;
    padding: 30px 20px;
}
.auth-card { width: 100%; max-width: 420px; padding: 32px; }
.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; padding: 12px 20px; margin-bottom: 12px;
    background: #fff; color: #3c4043; font-weight: 600; font-family: inherit; font-size: 1rem;
    border: 1px solid #dadce0; border-radius: 10px; text-decoration: none;
    transition: all .15s;
}
.btn-google:hover {
    background: #f8faff; border-color: #c8d0e7;
    box-shadow: 0 2px 8px rgba(60,64,67,0.12);
    text-decoration: none; color: #3c4043;
}
.btn-google svg { flex-shrink: 0; }
.auth-divider {
    display: flex; align-items: center; gap: 10px;
    color: var(--c-muted); font-size: .85rem;
    margin: 14px 0;
}
.auth-divider::before, .auth-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--c-border);
}
.auth-divider span { padding: 0 4px; }
.card { background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.card label { display: block; margin-bottom: 12px; font-weight: 600; font-size: .9rem; }
.card label input, .card label select, .card label textarea {
    width: 100%; padding: 10px; margin-top: 4px;
    border: 1px solid var(--c-border); border-radius: 6px;
    font-family: inherit; font-size: .95rem;
}
.result-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--c-border); }
.result-row strong { color: var(--c-primary); font-size: 1.1rem; }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.dashboard-card { color: var(--c-dark); transition: all .2s; }
.dashboard-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; }

/* Footer */
.site-footer { background: var(--c-dark); color: #d1d5db; padding: 40px 20px 20px; margin-top: 50px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.footer-grid h4, .footer-grid h5 { color: #fff; margin-bottom: 12px; }
/* Official Darak positioning shown under the brand in the footer.
   Slightly emphasized — line-height + max-width for readability. */
.footer-positioning {
    font-size: .9rem;
    line-height: 1.75;
    max-width: 32em;
    color: #d1d5db;
    margin: 4px 0 0;
}
.footer-grid a { display: block; color: #d1d5db; padding: 4px 0; font-size: .9rem; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #374151; margin-top: 24px; padding-top: 16px; text-align: center; font-size: .85rem; color: #9ca3af; }

/* CTA Band */
.cta-band { background: linear-gradient(135deg, var(--c-dark) 0%, #374151 100%); color: #fff; padding: 50px 20px; margin-top: 30px; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #d1d5db; margin-bottom: 20px; }

/* AI Chat Widget */
.ai-launcher {
    /* Standard chat-widget position: bottom-LEFT of the viewport
       (in RTL this is the start-side; Google/Facebook/Intercom all use
       this same anchor). Compact circular icon — no text label. */
    position: fixed; bottom: 24px; left: 24px; z-index: 1500;
}
.ai-toggle {
    background: var(--c-primary); color: #fff; border: none;
    width: 56px; height: 56px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(27, 58, 85, .35);
    font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    transition: transform .15s, box-shadow .15s, background .15s;
}
.ai-toggle:hover {
    background: var(--c-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(27, 58, 85, .45);
}
.ai-toggle:active { transform: scale(.94); }
/* Hide the text label entirely — icon-only by design now */
.ai-toggle-label { display: none !important; }
.ai-dismiss {
    position: absolute; top: -8px; right: -8px;
    width: 24px; height: 24px; border-radius: 50%;
    background: #fff; color: var(--c-dark); border: 1px solid var(--c-border);
    cursor: pointer; font-size: .75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow); padding: 0; line-height: 1;
}
.ai-dismiss:hover { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.ai-restore {
    position: fixed; bottom: 24px; left: 24px; z-index: 200;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--c-primary); color: #fff; border: none;
    cursor: pointer; font-size: 1.5rem;
    box-shadow: 0 6px 20px rgba(27, 58, 85, .35);
}
.ai-restore:hover { background: var(--c-primary-dark); }
.ai-header-actions { display: flex; gap: 8px; align-items: center; }
.ai-header-actions button {
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
    color: #fff; cursor: pointer; font-family: inherit;
    font-size: 1rem; font-weight: 700;
    width: 32px; height: 32px; padding: 0;
    border-radius: 6px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.ai-header-actions button:hover { background: rgba(255,255,255,0.35); }
.ai-header-actions button:active { transform: scale(.95); }
.ai-panel {
    /* Panel opens UPWARD from the bottom-anchored launcher */
    position: fixed; bottom: 92px; left: 24px; z-index: 200;
    width: 360px; max-width: calc(100vw - 48px); height: 480px; max-height: 70vh;
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; overflow: hidden;
}
.ai-header { background: var(--c-primary); color: #fff; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; }
.ai-header strong { flex: 1; }
.ai-messages { flex: 1; overflow-y: auto; padding: 14px; background: #f9fafb; }
.ai-msg { padding: 10px 14px; border-radius: 12px; margin-bottom: 10px; max-width: 85%; font-size: .92rem; line-height: 1.5; }
.ai-bot { background: #fff; border: 1px solid var(--c-border); }
.ai-user { background: var(--c-primary); color: #fff; margin-right: auto; margin-left: 0; }
.ai-form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--c-border); }
.ai-form input { flex: 1; padding: 10px; border: 1px solid var(--c-border); border-radius: 6px; font-family: inherit; }

/* Promotion Page (owner pays to boost) */
.promote-grid {
    display: grid; grid-template-columns: repeat(3, 1fr) 1fr;
    gap: 14px; margin-top: 16px; align-items: stretch;
}
.promote-active {
    background: linear-gradient(135deg, #f0fdf4, #ecfeff);
    border-right: 4px solid var(--c-success); padding: 18px; margin-bottom: 16px;
}
.promote-plan {
    position: relative; cursor: pointer; text-align: center; padding: 22px 16px !important;
    border: 2px solid var(--c-border); transition: all .2s;
}
.promote-plan input[type="radio"] { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; }
.promote-plan h3 { margin: 0 0 8px; color: var(--c-dark); }
.promote-price { font-size: 2rem; font-weight: 800; color: var(--c-primary); margin: 6px 0; }
.promote-price small { font-size: .8rem; color: var(--c-muted); font-weight: 600; }
.promote-perks { color: var(--c-muted); font-size: .9rem; line-height: 1.5; margin-top: 12px; }
.promote-plan:has(input:checked) {
    border-color: var(--c-primary); background: #fef2f2;
    box-shadow: 0 0 0 3px rgba(27,58,85,0.1);
}
.promote-plan.recommended { border-color: var(--c-accent); }
.promote-plan .ribbon {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--c-accent); color: #fff; padding: 4px 14px;
    border-radius: 20px; font-size: .75rem; font-weight: 700;
}
.promote-checkout { grid-column: 1 / -1; }

.ad-type-tag {
    display: inline-block; font-size: .72rem; font-weight: 700;
    padding: 2px 8px; border-radius: 4px; margin-left: 4px;
    background: #ede9fe; color: #6d28d9;
}
.ad-type-tag.banner { background: #fef3c7; color: #92400e; }

@media (max-width: 700px) {
    .promote-grid { grid-template-columns: 1fr; }
}

/* Knowledge center / News */
.news-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.news-layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
.news-sidebar { background: #fff; border-radius: var(--radius); padding: 16px; height: fit-content; box-shadow: var(--shadow); position: sticky; top: 80px; }
.news-sidebar h3 { font-size: 1rem; margin-bottom: 10px; }
.cat-link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; border-radius: 8px; color: var(--c-dark);
    text-decoration: none; margin-bottom: 4px; font-weight: 600; font-size: .92rem;
}
.cat-link:hover { background: var(--c-bg); text-decoration: none; }
.cat-link.active { background: var(--c-primary); color: #fff; }
.cat-count { background: rgba(0,0,0,0.08); padding: 1px 8px; border-radius: 10px; font-size: .75rem; }
.cat-link.active .cat-count { background: rgba(255,255,255,0.25); color: #fff; }

.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.article-card { padding: 0 !important; overflow: hidden; transition: all .2s; }
.article-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.article-card.pinned { border-right: 4px solid var(--c-accent); }
.article-cover { display: block; aspect-ratio: 16/9; overflow: hidden; background: #eee; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-body { padding: 16px; }
.article-body h2, .article-body h3 { font-size: 1.1rem; margin: 8px 0; }
.article-body h2 a, .article-body h3 a { color: var(--c-dark); }
.article-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; font-size: .82rem; }

.cat-tag {
    display: inline-block; padding: 2px 10px; border-radius: 12px;
    font-size: .75rem; font-weight: 700;
}
.cat-law_rent     { background: #dbeafe; color: #1e40af; }
.cat-law_sale     { background: #fef3c7; color: #92400e; }
.cat-law_purchase { background: #ede9fe; color: #6d28d9; }
.cat-news         { background: #fee2e2; color: #b91c1c; }
.cat-guide        { background: #d1fae5; color: #065f46; }
.pinned-tag { background: var(--c-accent); color: #fff; }

/* Article detail page */
.article-header { margin-bottom: 20px; }
.article-header h1 { margin: 10px 0 6px; }
.article-hero { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--radius); margin-bottom: 16px; }
.article-summary {
    background: #fef3c7; border-right: 4px solid var(--c-accent);
    padding: 14px 18px; border-radius: var(--radius); margin: 16px 0; line-height: 1.7;
}
.article-toolbar { margin: 16px 0; }
.ai-summary-out {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    border-right: 4px solid #7c3aed; border-radius: var(--radius);
    padding: 16px 20px; margin: 12px 0;
}
.ai-summary-out h4 { margin-top: 0; color: #6d28d9; }
.ai-summary-out ul { padding-right: 20px; margin: 0; }
.ai-summary-out li { padding: 6px 0; line-height: 1.7; }

.article-body { line-height: 1.9; font-size: 1.02rem; }
.article-body h3 { color: var(--c-primary); margin-top: 24px; padding-bottom: 4px; border-bottom: 2px solid var(--c-border); }
.article-body ul, .article-body ol { padding-right: 22px; }
.article-body li { margin: 6px 0; }
.article-body a { color: var(--c-primary); }
.article-body code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; }
.admin-controls { display: flex; gap: 10px; align-items: center; margin-top: 24px; padding: 12px 16px; }

@media (max-width: 900px) {
    .news-layout { grid-template-columns: 1fr; }
    .news-sidebar { position: static; }
}

/* User management tables */
.users-table, .audit-table {
    width: 100%; background: #fff; border-radius: var(--radius);
    border-collapse: collapse; box-shadow: var(--shadow); overflow: hidden;
}
.users-table th, .audit-table th { background: #f3f4f6; padding: 10px 12px; text-align: right; font-size: .88rem; }
.users-table td, .audit-table td { padding: 10px 12px; border-top: 1px solid var(--c-border); font-size: .9rem; }
.users-table tr.row-suspended { background: #fef2f2; }
.role-tag {
    display: inline-block; padding: 2px 10px; border-radius: 12px;
    font-size: .75rem; font-weight: 700;
}
.role-user      { background: #e5e7eb; color: #374151; }
.role-agent     { background: #dbeafe; color: #1e40af; }
.role-manager_l2 { background: #fef3c7; color: #92400e; }
.role-manager_l1 { background: linear-gradient(135deg,#fde047,#f97316); color: #7c2d12; }
.audit-action { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: .8rem; }
.audit-details { max-width: 360px; font-size: .85rem; }

/* Contract drafting */
.contract-type-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0;
}
.contract-type-option {
    cursor: pointer; text-align: center; padding: 22px 16px !important;
    border: 2px solid var(--c-border); transition: all .15s;
    position: relative;
}
.contract-type-option input[type="radio"] { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; }
.contract-type-option:has(input:checked) { border-color: var(--c-primary); background: #fef2f2; }
.contract-type-icon { font-size: 3rem; margin-bottom: 8px; }

.contract-upload-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px; margin: 16px 0; }
.docs-list { display: flex; flex-direction: column; gap: 10px; }
.doc-card { display: flex; gap: 12px; align-items: flex-start; padding: 10px !important; }
.doc-thumb { width: 90px; height: 70px; object-fit: cover; border-radius: 6px; flex-shrink: 0; border: 1px solid var(--c-border); }
.ocr-data summary { cursor: pointer; color: var(--c-primary); font-size: .85rem; margin-top: 6px; }
.ocr-table { width: 100%; margin-top: 6px; font-size: .8rem; border-collapse: collapse; }
.ocr-table th { text-align: right; padding: 3px 8px; color: var(--c-muted); font-weight: 600; width: 40%; }
.ocr-table td { padding: 3px 8px; border-bottom: 1px solid var(--c-border); }

.contract-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.party-card label { display: block; margin-bottom: 8px; font-weight: 600; font-size: .88rem; }
.party-card input { width: 100%; padding: 8px 10px; margin-top: 4px; border: 1px solid var(--c-border); border-radius: 6px; font-family: inherit; }
.contract-edit-form .card { margin-bottom: 12px; }

.contracts-list { display: flex; flex-direction: column; gap: 10px; }
.contract-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; }

.contract-paper {
    background: #fff; padding: 40px; border-radius: var(--radius);
    box-shadow: var(--shadow-lg); max-width: 800px; margin: 0 auto;
    line-height: 1.9; font-size: 1rem;
}
.contract-paper h1 { text-align: center; color: var(--c-primary); }
.contract-paper h3 { color: var(--c-dark); margin-top: 24px; border-bottom: 1px solid var(--c-border); padding-bottom: 4px; }
.contract-paper .clause { margin: 12px 0; }
.contract-paper .meta { text-align: center; color: var(--c-muted); margin-bottom: 24px; }
.contract-paper .sig-row { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.contract-paper .sig-block { width: 45%; text-align: center; }
.contract-paper .sig-line { border-top: 1px solid #000; margin-top: 40px; padding-top: 4px; color: var(--c-muted); font-size: .85rem; }

@media (max-width: 900px) {
    .contract-type-grid { grid-template-columns: 1fr; }
    .contract-upload-grid { grid-template-columns: 1fr; }
    .contract-parties { grid-template-columns: 1fr; }
    .contract-paper { padding: 20px; }
    .users-table, .audit-table { font-size: .8rem; }
}

/* Advertisements */
.ad-row { margin: 18px 0; padding: 0 20px; }
.ad-slot {
    display: flex; gap: 14px; align-items: center;
    background: #fff; border: 1px solid var(--c-border);
    border-radius: var(--radius); padding: 12px 14px;
    text-decoration: none; color: var(--c-dark);
    box-shadow: var(--shadow); transition: all .15s;
    overflow: hidden;
}
.ad-slot:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); text-decoration: none; }
.ad-image { width: 200px; height: 110px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.ad-body { flex: 1; min-width: 0; }
.ad-label {
    display: inline-block; font-size: .7rem; font-weight: 700;
    background: #fef3c7; color: #92400e; padding: 2px 8px;
    border-radius: 4px; margin-bottom: 6px;
}
.ad-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; }
.ad-desc { color: var(--c-muted); font-size: .9rem; }

/* Sidebar variant — vertical */
.ad-slot-search_sidebar, .ad-slot-detail_sidebar {
    flex-direction: column; align-items: stretch; margin-bottom: 14px;
}
.ad-slot-search_sidebar .ad-image, .ad-slot-detail_sidebar .ad-image {
    width: 100%; height: 150px;
}

/* Wide hero variant */
.ad-slot-home_hero .ad-image { width: 320px; height: 140px; }
.ad-slot-home_hero { padding: 16px; }
.ad-slot-home_hero .ad-title { font-size: 1.2rem; }

@media (max-width: 700px) {
    .ad-slot { flex-direction: column; align-items: stretch; }
    .ad-image, .ad-slot-home_hero .ad-image { width: 100%; height: 160px; }
}

/* Admin panel */
.admin-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.kpi-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin-bottom: 24px;
}
.kpi {
    background: #fff; padding: 16px; border-radius: var(--radius);
    text-align: center; box-shadow: var(--shadow);
}
.kpi-num { font-size: 1.8rem; font-weight: 800; color: var(--c-primary); }
.kpi.kpi-danger { border: 2px solid var(--c-danger); background: #fef2f2; }
.kpi.kpi-danger .kpi-num { color: var(--c-danger); }
.security-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.security-by-type { list-style: none; padding: 0; }
.security-by-type li { display: flex; justify-content: space-between; padding: 10px 12px; background: var(--c-bg); border-radius: 6px; margin-bottom: 4px; }
.security-by-type strong { color: var(--c-danger); font-size: 1.2rem; }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { background: #991b1b; color: #fff; text-decoration: none; }
@media (max-width:900px) { .security-grid { grid-template-columns: 1fr; } }
.kpi-lbl { color: var(--c-muted); font-size: .85rem; margin-top: 4px; }
.admin-nav { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.admin-ads-list { display: flex; flex-direction: column; gap: 12px; }
.admin-ad-row {
    display: grid; grid-template-columns: 120px 1fr auto auto;
    gap: 16px; align-items: center; padding: 14px;
}
.admin-ad-thumb { width: 120px; height: 80px; border-radius: 8px; overflow: hidden; background: #eee; }
.admin-ad-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-ad-thumb .image-placeholder { font-size: 2rem; }
.admin-ad-info h3 { margin: 0 0 4px; font-size: 1.05rem; }
.admin-ad-status { margin-top: 6px; }
.admin-ad-status .badge { position: static; padding: 2px 8px; font-size: .72rem; }
.admin-ad-stats { display: flex; flex-direction: column; gap: 4px; min-width: 100px; text-align: center; }
.admin-ad-stats div { line-height: 1.2; }
.admin-ad-stats strong { font-size: 1.1rem; color: var(--c-primary); display: block; }
.admin-ad-stats small { color: var(--c-muted); font-size: .75rem; }
.admin-ad-actions { display: flex; flex-direction: column; gap: 6px; }
.admin-ad-actions form { margin: 0; }
.ad-preview { padding: 16px; background: #f9fafb; border-radius: var(--radius); margin-top: 10px; }

@media (max-width: 900px) {
    .admin-ad-row { grid-template-columns: 80px 1fr; }
    .admin-ad-thumb { width: 80px; height: 60px; }
    .admin-ad-stats, .admin-ad-actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-around; }
}

/* Pros & Cons */
.proscons-fieldset { background: #fafafa; }
.proscons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.proscons-grid label { margin: 0 !important; }
.proscons-grid .lbl-pros { color: var(--c-success); font-weight: 700; display: block; margin-bottom: 4px; }
.proscons-grid .lbl-cons { color: var(--c-danger); font-weight: 700; display: block; margin-bottom: 4px; }
.proscons-grid textarea { width: 100%; line-height: 1.7; font-family: inherit; resize: vertical; }
.proscons-grid label:has(.lbl-pros) textarea { border-color: #86efac; background: #f0fdf4; }
.proscons-grid label:has(.lbl-cons) textarea { border-color: #fca5a5; background: #fef2f2; }
@media (max-width: 700px) {
    .proscons-grid { grid-template-columns: 1fr; }
}

.proscons-display { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.proscons-col { padding: 14px 18px; border-radius: var(--radius); }
.proscons-col h4 { margin: 0 0 8px; font-size: 1rem; }
.proscons-col ul { list-style: none; padding: 0; margin: 0; }
.proscons-col li { padding: 6px 0; border-bottom: 1px dashed rgba(0,0,0,0.08); line-height: 1.6; }
.proscons-col li:last-child { border-bottom: none; }
.proscons-col.pros { background: #f0fdf4; border-right: 4px solid var(--c-success); }
.proscons-col.pros h4 { color: var(--c-success); }
.proscons-col.cons { background: #fef2f2; border-right: 4px solid var(--c-danger); }
.proscons-col.cons h4 { color: var(--c-danger); }
@media (max-width: 700px) {
    .proscons-display { grid-template-columns: 1fr; }
}

/* Legal Terms Box */
.legal-box {
    background: #fffbeb; border: 1px solid #f59e0b;
    border-radius: var(--radius); padding: 14px 18px; margin: 14px 0;
}
.legal-box summary {
    font-weight: 700; cursor: pointer; color: #92400e;
    padding: 6px 0; user-select: none; list-style: none;
}
.legal-box summary::-webkit-details-marker { display: none; }
.legal-box summary::before { content: "▾ "; }
.legal-box[open] summary::before { content: "▴ "; }
.legal-terms { line-height: 1.8; font-size: .92rem; }
.legal-terms h3 { color: var(--c-primary); border-bottom: 2px solid var(--c-primary); padding-bottom: 6px; }
.legal-list { padding-right: 24px; }
.legal-list li { margin-bottom: 12px; }
.legal-list strong { color: var(--c-dark); }
.legal-finalnote {
    background: #fef2f2; border-right: 4px solid var(--c-primary);
    padding: 12px 14px; margin-top: 16px; font-weight: 500;
}
.terms-check {
    display: flex; gap: 10px; align-items: flex-start;
    background: #f0fdf4; border: 1px solid #16a34a;
    padding: 12px 14px; border-radius: var(--radius);
    margin: 12px 0; font-weight: 600;
}
.terms-check input[type="checkbox"] {
    width: 20px !important; height: 20px;
    margin: 2px 0 0 !important; flex-shrink: 0; cursor: pointer;
}

/* Notifications + Saved Searches */
.notif-bell { position: relative; padding: 8px 12px !important; font-size: 1.1rem; }
.notif-badge {
    position: absolute; top: -4px; left: -4px;
    background: var(--c-primary); color: #fff;
    border-radius: 10px; padding: 1px 6px;
    font-size: .7rem; font-weight: 700; min-width: 18px; text-align: center;
}
.notif-list, .saved-list { display: flex; flex-direction: column; gap: 12px; }
.notif-row { display: flex; gap: 14px; align-items: flex-start; }
.notif-row.unread { border-right: 4px solid var(--c-primary); background: #fff8f8; }
.notif-icon { font-size: 1.6rem; }
.notif-body { flex: 1; }
.notif-body p { margin: 0 0 4px; font-weight: 600; }
.btn-sm { padding: 6px 12px; font-size: .85rem; }
.saved-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.save-search-form { display: inline; }

/* Image upload — big tile drop zone */
.upload-label { font-weight: 700; display: block; margin-top: 8px; }
.upload-zone {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin: 8px 0;
}
.upload-zone input[type="file"] { display: none; }
.upload-tile {
    display: flex !important; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 22px 14px !important; border-radius: 12px;
    border: 2px dashed var(--c-border) !important;
    background: var(--c-bg);
    cursor: pointer; transition: all .15s;
    text-align: center; min-height: 130px;
    margin: 0 !important; width: 100%;
}
.upload-tile:hover {
    border-color: var(--c-primary) !important;
    background: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.upload-tile.camera { border-color: var(--c-primary-soft) !important; }
.upload-tile.gallery { border-color: var(--c-accent) !important; }
.upload-icon { font-size: 2.6rem; line-height: 1; margin-bottom: 8px; }
.upload-tile strong { font-size: 1rem; color: var(--c-dark); }
.upload-tile small { color: var(--c-muted); font-size: .82rem; margin-top: 4px; }

.muted-details {
    margin-top: 12px; padding: 10px 14px;
    background: var(--c-bg); border-radius: 8px;
    font-size: .9rem;
}
.muted-details summary { cursor: pointer; color: var(--c-muted); }

/* Image upload preview — with remove button */
.img-preview {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px; margin-top: 12px;
}
.img-preview-item {
    position: relative; aspect-ratio: 1;
    border-radius: 8px; overflow: hidden;
    border: 2px solid var(--c-border);
}
.img-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.img-preview-remove {
    position: absolute; top: 4px; left: 4px;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(0,0,0,0.7); color: #fff;
    border: none; cursor: pointer;
    font-size: 1.1rem; font-weight: 700; line-height: 1;
    padding: 0; display: flex; align-items: center; justify-content: center;
}
.img-preview-remove:hover { background: var(--c-danger); }

/* GPS button */
.geo-btn { margin-top: 8px; }
.geo-btn:hover { background: #f0f9ff; border-color: #1e40af; color: #1e40af; }

/* Sticky submit on mobile */
@media (max-width: 700px) {
    .upload-zone { grid-template-columns: 1fr 1fr; gap: 8px; }
    .upload-tile { padding: 18px 8px !important; min-height: 110px; }
    .upload-icon { font-size: 2rem; }
    .upload-tile strong { font-size: .9rem; }

    .listing-form button[type="submit"] {
        position: sticky; bottom: 12px;
        z-index: 90;
        box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }
    /* Bigger map on mobile so dragging is comfortable */
    #new-map { height: 320px !important; }
}

/* Mobile nav toggle */
.nav-toggle {
    display: none;
    background: transparent; border: none; cursor: pointer;
    padding: 8px; gap: 4px; flex-direction: column;
    width: 40px; height: 40px; justify-content: center; align-items: center;
}
.nav-toggle span {
    display: block; width: 22px; height: 2.5px;
    background: var(--c-dark); border-radius: 2px;
    transition: all .25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile filters toggle */
.filters-toggle {
    display: none;
    width: 100%; padding: 12px; margin-bottom: 12px;
    background: #fff; border: 1px solid var(--c-border);
    border-radius: var(--radius); font-weight: 700; font-family: inherit;
    cursor: pointer; font-size: 1rem;
}

/* Responsive — Tablet (<= 900px) */
@media (max-width: 900px) {
    .nav-toggle { display: flex; }
    .main-nav {
        display: none;
        position: absolute; top: 100%; right: 0; left: 0;
        background: #fff; flex-direction: column;
        box-shadow: var(--shadow-lg); padding: 8px 0;
        border-top: 1px solid var(--c-border);
    }
    .main-nav.open { display: flex; }
    .main-nav a {
        padding: 14px 20px; border-bottom: 1px solid var(--c-border);
    }
    .main-nav a:last-child { border-bottom: none; }

    .header-inner { position: relative; gap: 8px; }
    .brand-text small { display: none; }

    .search-page { grid-template-columns: 1fr; }
    .filters-panel { position: static; }
    .filters-toggle { display: block; }
    .filters-form { display: none; }
    .filters-panel.open .filters-form { display: block; }

    .detail-grid { grid-template-columns: 1fr; }
    .search-fields { grid-template-columns: 1fr; }
    .hero { padding: 40px 16px; }
    .hero h1 { font-size: 1.8rem; }
    .hero-search { padding: 14px; }

    .header-actions .btn { padding: 8px 12px; font-size: .88rem; }
}

/* ── Nav overflow fix: hamburger on medium screens (901 – 1200 px) ─────
   On viewports < 1200 px the full inline nav can be wider than the header.
   We reuse the same absolute-dropdown behaviour as the ≤ 900 px mobile rule
   so the nav is always accessible via the hamburger in that range.
   Other tablet-layout rules (search grid, detail grid, etc.) intentionally
   stay in the 900 px block above so they don't apply at 901–1200 px.     */
@media (min-width: 901px) and (max-width: 1200px) {
    .nav-toggle { display: flex; }
    .main-nav {
        display: none;
        position: absolute; top: 100%; right: 0; left: 0;
        background: #fff; flex-direction: column;
        box-shadow: var(--shadow-lg); padding: 8px 0;
        border-top: 1px solid var(--c-border);
        z-index: 110;           /* above page content, below modals */
    }
    .main-nav.open { display: flex; }
    .main-nav a    { padding: 14px 20px; border-bottom: 1px solid var(--c-border); }
    .main-nav a:last-child { border-bottom: none; }
    .header-inner  { position: relative; gap: 8px; }
}

/* Responsive — Mobile (<= 600px) */
@media (max-width: 600px) {
    body { font-size: 14px; }
    .container { padding: 0 14px; }
    .section { padding: 24px 14px; }

    /* Header: compact brand + scrollable actions row to prevent overlap */
    .brand-img { height: 40px; max-width: 50px; }
    .brand-text { font-size: 1.05rem; }
    .brand-text small { display: none; }
    .header-inner { padding: 8px 12px; gap: 6px; }

    .header-actions {
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .header-actions::-webkit-scrollbar { display: none; }
    .header-actions .btn { flex-shrink: 0; }
    .header-actions .btn-ghost { padding: 6px 8px; }
    .header-actions .btn-ghost:not(.notif-bell):not([title]) span { display: none; }

    .property-grid { grid-template-columns: 1fr; }
    .city-grid { grid-template-columns: repeat(2, 1fr); }
    .agent-row, .agent-grid { grid-template-columns: 1fr; }

    .results-head { flex-direction: column; align-items: stretch; }
    .view-toggle { justify-content: center; }
    .pagination { flex-wrap: wrap; }

    .detail-head { flex-direction: column; }
    .gallery-thumbs img { width: 60px; height: 50px; }
    .specs-row { grid-template-columns: 1fr 1fr; }
    .features-list { grid-template-columns: 1fr 1fr; }

    /* Bigger tap targets on forms */
    input, select, textarea, button { font-size: 16px !important; min-height: 44px; }
    .btn { padding: 12px 20px; }
    .btn-sm { padding: 8px 14px; min-height: 36px; }

    .ai-launcher { bottom: 16px; left: 16px; top: auto; }
    .ai-toggle { width: 52px; height: 52px; font-size: 1.4rem; }
    .ai-panel { bottom: 80px; left: 12px; right: 12px; top: auto;
                width: auto; height: 70vh; }

    /* Compact admin */
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .kpi-num { font-size: 1.4rem; }
}

/* ============================================================
   Mobile polish (added 2026-05-15)
   - Horizontal-scroll on wide admin tables
   - Extra-small viewport breakpoint (<= 420px, iPhone SE / older Android)
   - Tap-target sizing + iOS zoom fix
   - Safe-area padding for notched phones
   ============================================================ */

/* Smooth horizontal scroll for wide tables — prevents layout breakage */
@media (max-width: 760px) {
    .users-table,
    .audit-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        max-width: 100%;
        scrollbar-width: thin;
    }
    .users-table thead, .users-table tbody,
    .audit-table thead, .audit-table tbody {
        display: table;
        width: max-content;
        min-width: 100%;
    }
    .users-table td, .audit-table td { white-space: normal; }
    /* Hint there's more to scroll (subtle right shadow) */
    .users-table, .audit-table {
        background-image:
            linear-gradient(to left, rgba(255,255,255,0), #fff 70%),
            linear-gradient(to left, rgba(0,0,0,0.06), rgba(0,0,0,0) 20px);
        background-position: left center, left center;
        background-repeat: no-repeat;
        background-size: 30px 100%, 30px 100%;
        background-attachment: local, scroll;
    }
}

/* Filters bar on admin pages should wrap, not overflow */
@media (max-width: 700px) {
    .filters-bar {
        display: flex; flex-wrap: wrap; gap: 8px;
    }
    .filters-bar select,
    .filters-bar input { flex: 1 1 140px; min-width: 0; }
    .filters-bar button { flex: 1 1 100%; }
}

/* Make every primary action at least the WCAG-recommended 44×44px tap area */
@media (hover: none) and (pointer: coarse) {
    .btn, .btn-sm,
    .header-actions a,
    .nav-toggle,
    .currency-btn,
    .nav-action,
    .filters-toggle { min-height: 44px; }
    /* Prevent iOS from auto-zooming on input focus */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="tel"], input[type="url"],
    input[type="search"], textarea, select { font-size: 16px; }
}

/* Notched-iPhone safe areas (env() works on iOS 11+) */
@supports (padding: max(0px)) {
    .site-header { padding-right: max(0px, env(safe-area-inset-right));
                   padding-left:  max(0px, env(safe-area-inset-left)); }
    .site-footer { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
    .ai-launcher { left: max(24px, env(safe-area-inset-left));
                   bottom: max(24px, env(safe-area-inset-bottom));
                   top: auto; }
    .ai-restore  { left: max(24px, env(safe-area-inset-left));
                   bottom: max(24px, env(safe-area-inset-bottom));
                   top: auto; }
}

/* Extra-small viewports — iPhone SE 1st gen (320px) and old Android */
@media (max-width: 420px) {
    .container { padding: 0 12px; }
    .section { padding: 18px 12px; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.2rem; }
    /* Header: hide the brand sub-text + tighten gap */
    .brand-text small { display: none; }
    .brand-img { height: 36px; max-width: 44px; }
    .brand-text { font-size: .95rem; }
    .header-inner { gap: 4px; padding: 8px 10px; }
    .header-actions { gap: 2px; }
    .header-actions .btn { padding: 6px 8px; font-size: .82rem; }
    /* Currency button: show flag only, hide the code+caret */
    .currency-btn strong, .currency-btn .caret { display: none; }
    .currency-btn { padding: 6px 8px; }
    /* Single-column specs/features on the tiniest screens */
    .specs-row, .features-list { grid-template-columns: 1fr; }
    /* Cities grid: 1 col on the very smallest, but 2 between 360–420 */
    .city-grid { grid-template-columns: 1fr; }
    /* AI panel near-fullscreen so the keyboard doesn't squash it */
    .ai-panel { left: 6px; right: 6px; bottom: 70px; top: auto; height: 75vh; }
    .ai-launcher { bottom: 12px; left: 12px; top: auto; }
    .ai-toggle { padding: 10px 14px; font-size: 1rem; }
    /* Tap-target friendly pagination */
    .pagination a, .pagination span { min-width: 40px; text-align: center; padding: 10px 12px; }
    /* KPIs: still 2 per row but smaller numbers */
    .kpi { padding: 12px 10px; }
    .kpi-num { font-size: 1.2rem; }
    .kpi-lbl { font-size: .78rem; }
    /* Contracts type cards stack */
    .contract-type-grid { grid-template-columns: 1fr; }
    /* Modal/confirm prompts use full width */
    .moderation-actions { flex-direction: column; }
    .moderation-actions .btn { width: 100%; }
}

/* Tiny viewports — Galaxy Fold / iPhone SE 1st gen (≤ 360px) */
@media (max-width: 360px) {
    .brand-img { display: none; }
    .brand-text { font-size: .9rem; }
    .header-actions .btn-primary { padding: 5px 7px; font-size: .78rem; }
    .header-actions .btn-ghost { padding: 5px 6px; font-size: .78rem; }
    .currency-btn { padding: 5px 6px; }
    .hero h1 { font-size: 1.4rem; }
    .hero { padding: 28px 12px; }
}

/* Tablet landscape — Pad mini, iPad portrait split */
@media (max-width: 1024px) and (min-width: 901px) {
    .property-grid { grid-template-columns: repeat(2, 1fr); }
    .partner-grid  { grid-template-columns: repeat(2, 1fr); }
}

/* Sticky CTA on /properties/<id> so users can always reach "Contact" / "Make offer" */
@media (max-width: 700px) {
    .detail-actions-sticky {
        position: sticky; bottom: 0; left: 0; right: 0;
        background: #fff; padding: 10px 14px;
        border-top: 1px solid var(--c-border);
        box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
        z-index: 40;
        display: flex; gap: 8px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
    .detail-actions-sticky .btn { flex: 1; }
}

/* ============================================================
   Serious-offer pledge box — shown when submitting / responding to offers
   ============================================================ */
.serious-pledge-box {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #d97706;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 14px 0;
    line-height: 1.85;
    color: #7c2d12;
}
.serious-pledge-box.small {
    padding: 10px 12px;
    font-size: .88rem;
}
.serious-pledge-box strong { color: #92400e; display: block; margin-bottom: 6px; }
.serious-pledge-box ul {
    margin: 6px 0;
    padding-right: 20px;
    line-height: 1.7;
}
.serious-pledge-box.small ul { font-size: .85rem; }
.serious-pledge-box a { color: var(--c-primary); font-weight: 700; }

.serious-checkbox-row {
    display: flex !important; gap: 10px; align-items: flex-start;
    background: rgba(255, 255, 255, 0.7);
    padding: 10px 12px; border-radius: 6px;
    margin-top: 10px !important;
    cursor: pointer;
    color: #7c2d12;
    font-weight: 600;
}
.serious-checkbox-row input[type="checkbox"] {
    width: 20px; height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #d97706;
    cursor: pointer;
}
.serious-checkbox-row span { font-size: .9rem; line-height: 1.7; font-weight: 600; }

/* Compact top search strip — replaces the old hero on home */
.search-strip {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-soft) 100%);
    padding: 14px 0;
    border-bottom: 3px solid var(--c-accent);
    box-shadow: var(--shadow);
}
.search-strip .container {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
}
.strip-form {
    display: flex; align-items: center; gap: 8px;
    flex: 1; flex-wrap: wrap; min-width: 320px;
    margin: 0;
}
.strip-tabs {
    display: flex; gap: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 3px;
}
.strip-tabs label {
    cursor: pointer; padding: 6px 12px; border-radius: 6px;
    color: #fff; font-weight: 700; font-size: .88rem;
    transition: background .15s;
    margin: 0 !important;
}
.strip-tabs label:has(input:checked) {
    background: #fff; color: var(--c-primary);
}
.strip-tabs input { display: none; }

.strip-form select,
.strip-form input[type="number"] {
    padding: 7px 10px; border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px; background: #fff;
    font-family: inherit; font-size: .9rem;
    min-width: 120px;
    margin: 0 !important;
}
.strip-form input[type="number"] { width: 110px; }
.strip-form .btn { padding: 8px 16px; margin: 0; }


/* ============================================================
   Smart bar — merges the old search-strip + map-controls into ONE
   row above the map, giving the map maximum vertical space.
   ============================================================ */
.smart-bar {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-soft) 100%);
    /* Trimmed vertical padding — every pixel saved here is a pixel
       gained for the map below. */
    padding: 4px 0;
    border-bottom: 2px solid var(--c-accent);
    box-shadow: var(--shadow);
}
.smart-bar-inner {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
}

/* Section 1: search filters (city/type/price + search button) */
.sb-search {
    display: flex; align-items: center; gap: 4px;
    flex-wrap: wrap; margin: 0;
}
/* Note: the .sb-tabs (🏠 للبيع / 🔑 للإيجار) styles were removed when
   that toggle was deleted from the smart-bar — it duplicated the header
   nav's "شراء" / "إيجار" links. Listing-type filtering now flows
   through the URL via those nav links. */
.sb-search select,
.sb-search input[type="number"] {
    padding: 3px 8px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 5px;
    background: #fff;
    font-family: inherit; font-size: .78rem;
    margin: 0;
    height: 26px;
    /* Auto-grow to content where supported; min-width below is the
       fallback for older browsers. */
    field-sizing: content;
    width: auto;
}
/* Per-control min-widths chosen to fit the longest expected Arabic
   label/value with the dropdown chevron AND a couple of px of breathing
   room — so the placeholder never clips. Tightened with the rest of the bar. */
.sb-search select#sb-city     { min-width: 115px; }
.sb-search select#sb-type     { min-width: 115px; }
.sb-search input#sb-maxprice  { min-width: 92px; width: 92px; }
/* In RTL the native select chevron sits on the left edge — reserve
   space there so the visible text doesn't slide under it. */
.sb-search select { padding-inline-start: 22px; }
.sb-search-btn { padding: 3px 10px; margin: 0; font-size: .78rem; white-space: nowrap; height: 26px; line-height: 1; }

/* Vertical separator between the two halves of the bar */
.sb-search::after {
    content: "";
    width: 1px; height: 22px;
    background: rgba(255,255,255,0.25);
    margin-inline-start: 3px;
}

/* Section 2: map-specific controls (address search, area, toggle) */
.sb-map-controls {
    display: flex; align-items: center; gap: 4px;
    flex: 1; flex-wrap: wrap; min-width: 240px;
}
.sb-map-controls input[type="text"] {
    flex: 1;
    /* Long Arabic placeholder ("ابحث بالعنوان (شارع، حي، معلم...)") needs
       breathing room before it clips. */
    min-width: 180px;
    padding: 3px 8px; border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.3);
    background: #fff;
    font-family: inherit; font-size: .78rem;
    height: 26px;
}
/* Buttons in the map-control row never clip their label — keep them
   wide enough for the longest one. */
.sb-btn { padding: 3px 9px; margin: 0; font-size: .76rem;
          white-space: nowrap; height: 26px; line-height: 1; }
/* Icon-only variant — tight square with no text. Used for buttons whose
   meaning is obvious from the emoji alone (📏 قياس, ⏱ التنقّل). The
   full label remains in `title` + `aria-label` for accessibility. */
.sb-icon-btn {
    width: 30px; min-width: 30px;
    padding: 0 !important;
    font-size: .98rem !important;
    display: inline-flex; align-items: center; justify-content: center;
}
.sb-map-controls .view-toggle-inline {
    margin-inline-start: 0;
    background: rgba(255,255,255,0.95);
    border-radius: 6px;
}
.sb-map-controls .view-toggle-inline button { padding: 2px 7px; font-size: .82rem; height: 26px; }

/* The dropdown for ambiguous-place candidates needs to sit BELOW the bar,
   not inside it. We render it as a full-width row that pushes the map down
   only when it's visible. */
.smart-bar .addr-candidates,
.smart-bar .map-addr-error {
    flex-basis: 100%;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .smart-bar-inner { gap: 8px; }
    .sb-search::after { display: none; }
    .sb-map-controls { width: 100%; flex: none; }
}
@media (max-width: 540px) {
    .sb-search,
    .sb-map-controls { width: 100%; }
    .sb-search-btn,
    .sb-btn { flex: 1; }
}

.strip-view-toggle {
    display: flex; gap: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 3px;
}
.strip-view {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    font-family: inherit;
    text-decoration: none;
    transition: background .15s;
}
.strip-view:hover { background: rgba(255,255,255,0.1); color: #fff; }
.strip-view.active {
    background: #fff;
    color: var(--c-primary);
}

/* Welcome strip — one line greeting for logged-in users */
.welcome-strip {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px;
    font-size: .95rem;
    margin: 14px auto 0;
}
.welcome-strip strong { color: var(--c-primary); }

@media (max-width: 700px) {
    .search-strip { padding: 10px 0; }
    .search-strip .container { flex-direction: column; align-items: stretch; gap: 8px; }
    .strip-form { width: 100%; }
    .strip-form select, .strip-form input[type="number"] { flex: 1 1 140px; min-width: 0; }
    .strip-form .btn { width: 100%; }
    .strip-view-toggle { align-self: center; }
}

/* .archive-map-hint + .registry-card-head CSS REMOVED — registry
   feature deleted (0 records in production). Selectors no longer
   reference anything in the codebase. */

/* Owner toolbar on /properties/<id> when viewed by the owner */
/* ============================================================
   Open-house card on the property detail page — the ONLY entry
   point for scheduling/RSVP now that the nav link was removed.
   Designed to draw the eye: gradient header, calendar-style date
   chip, today highlight, single-tap RSVP.
   ============================================================ */
.oh-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
    margin-bottom: 14px;
}
.oh-card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #1B3A55 0%, #2c5378 100%);
    color: #fff;
}
.oh-card-icon { font-size: 1.6rem; line-height: 1; }
.oh-card-headline { display: flex; flex-direction: column; line-height: 1.3; }
.oh-card-headline strong { font-size: 1rem; font-weight: 800; }
.oh-card-headline small { font-size: .76rem; opacity: 0.85; margin-top: 2px; }

.oh-events { list-style: none; padding: 0; margin: 0; }
.oh-event {
    display: flex; gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
}
.oh-event:last-child { border-bottom: 0; }
.oh-event:hover { background: #fafbfc; }
.oh-event-today { background: #fffbeb; }
.oh-event-today:hover { background: #fef3c7; }

.oh-event-date {
    flex-shrink: 0;
    width: 52px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    text-align: center;
    padding: 5px 0 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    height: fit-content;
}
.oh-event-today .oh-event-date {
    background: #C8A55B;
    border-color: #b89149;
    color: #1B3A55;
}
.oh-day-num {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: #1B3A55;
    line-height: 1;
}
.oh-event-today .oh-day-num { color: #1B3A55; }
.oh-day-month {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    margin-top: 1px;
    letter-spacing: 0.5px;
}
.oh-event-today .oh-day-month { color: #1B3A55; }

.oh-event-body { flex: 1; min-width: 0; }
.oh-event-when {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.oh-event-when strong { color: #1B3A55; font-size: .92rem; }
.oh-time {
    background: #eff6ff; color: #1e40af;
    padding: 2px 8px; border-radius: 999px;
    font-size: .78rem; font-weight: 700;
    font-family: 'Courier New', monospace;
}
.oh-today-pill {
    background: #dc2626; color: #fff;
    padding: 2px 9px; border-radius: 999px;
    font-size: .72rem; font-weight: 800;
    animation: ohTodayPulse 1.6s ease-in-out infinite;
}
@keyframes ohTodayPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}
.oh-event-note {
    color: #92400e;
    font-size: .82rem;
    background: #fef3c7;
    border-inline-start: 3px solid #f59e0b;
    padding: 4px 8px;
    border-radius: 6px;
    margin: 4px 0 6px;
}
.oh-event-rsvp {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: 6px;
}
.oh-event-rsvp input {
    flex: 1; min-width: 100px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font-family: inherit; font-size: .85rem;
}
.oh-event-rsvp button {
    flex: 1; min-width: 90px;
    font-weight: 700;
}

.owner-tools {
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
    border: 1px solid var(--c-primary);
    padding: 14px 16px;
    margin: 0 0 14px;
    border-radius: 10px;
}
.owner-tools h4 { margin: 0 0 8px; color: var(--c-primary); font-size: 1rem; }
.owner-tools .btn { margin-bottom: 6px; }
.owner-tools small { display: block; color: var(--c-muted); }

/* Weekly viewing-schedule editor */
.schedule-form .schedule-grid {
    display: flex; flex-direction: column; gap: 8px;
    margin: 14px 0;
}
.schedule-row {
    display: grid;
    grid-template-columns: 140px 1fr 1fr;
    gap: 12px; align-items: center;
    padding: 10px 14px;
    background: #fafaf7;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    transition: background .15s, border-color .15s;
}
.schedule-row.active {
    background: #ecfdf5;
    border-color: var(--c-success);
}
.schedule-day {
    display: flex !important; gap: 8px; align-items: center;
    margin: 0 !important; cursor: pointer;
}
.schedule-day input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--c-success);
}
.schedule-day span { font-weight: 700; font-size: 1rem; }
.schedule-time {
    display: flex !important; align-items: center; gap: 6px;
    margin: 0 !important;
}
.schedule-time span { font-size: .85rem; color: var(--c-muted); }
.schedule-time input[type="time"] {
    padding: 4px 8px; border: 1px solid var(--c-border);
    border-radius: 4px; font-family: inherit;
}
.schedule-tip {
    background: #fef3c7;
    border: 1px solid #d97706;
    padding: 10px 14px;
    border-radius: 6px;
    margin: 14px 0;
    font-size: .9rem; color: #7c2d12;
}

/* Skip-viewing acknowledgment box inside the offer form */
.skip-viewing-box {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid #1e40af;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 14px 0;
    line-height: 1.85;
    color: #1e3a8a;
}
.skip-viewing-box strong { color: #1e40af; display: block; margin-bottom: 6px; }
.skip-viewing-box a { color: var(--c-primary); font-weight: 700; }

.skip-checkbox-row {
    display: flex !important; gap: 10px; align-items: flex-start;
    background: rgba(255,255,255,0.6);
    padding: 10px 12px; border-radius: 6px;
    margin-top: 10px !important;
    cursor: pointer;
    color: #1e3a8a;
    font-weight: 600;
}
.skip-checkbox-row input[type="checkbox"] {
    width: 20px; height: 20px; margin-top: 2px;
    flex-shrink: 0; accent-color: #1e40af; cursor: pointer;
}
.skip-checkbox-row span { font-size: .9rem; line-height: 1.7; font-weight: 600; }

@media (max-width: 700px) {
    .schedule-row { grid-template-columns: 1fr; }
}

/* Viewing-request form — the safe non-binding step before an offer */
.viewing-form {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 2px solid var(--c-success);
    padding: 16px 18px;
    margin: 0 0 14px;
    border-radius: 10px;
    line-height: 1.85;
}
.viewing-form h4 { color: #065f46; margin: 0 0 6px; font-size: 1.05rem; }
.viewing-form p { color: #065f46; margin-bottom: 8px; }
.viewing-form label {
    display: block; margin: 8px 0; color: #065f46; font-weight: 600;
}
.viewing-form input, .viewing-form textarea {
    width: 100%; padding: 8px 10px; margin-top: 4px;
    border: 1px solid #86efac; border-radius: 6px; background: #fff;
    font-family: inherit;
}
.viewing-form .btn-success {
    background: var(--c-success); color: #fff;
    border: none; padding: 10px;
}
.viewing-form .btn-success:hover { background: #0c5e2a; color: #fff; }
.viewing-form small { display: block; text-align: center; color: #065f46; margin-top: 6px; font-weight: 600; }

/* Banner shown when arriving at /properties/<id>?from_viewing=N */
.from-viewing-banner {
    background: #d1fae5; border: 1px solid var(--c-success);
    border-right: 4px solid var(--c-success);
    padding: 10px 14px; border-radius: 6px;
    margin: 10px 0; line-height: 1.7; color: #065f46;
}

/* List pages for viewings — sent + received */
.viewings-list { display: flex; flex-direction: column; gap: 12px; }
.viewing-card {
    display: grid; grid-template-columns: 1fr auto; gap: 16px;
    background: #fff; border: 1px solid var(--c-border);
    border-radius: var(--radius); padding: 14px 16px;
    transition: box-shadow .15s;
}
.viewing-card:hover { box-shadow: var(--shadow); }
.viewing-card.status-accepted  { border-right: 4px solid var(--c-success); }
.viewing-card.status-completed { border-right: 4px solid var(--c-primary); }
.viewing-card.status-cancelled { background: #fafafa; opacity: .85; }
.viewing-card.status-converted { background: linear-gradient(135deg, #fef3c7, #fff); }

.viewing-info h3 { margin: 0 0 4px; font-size: 1.05rem; }
.viewing-info h3 a { color: var(--c-dark); text-decoration: none; }
.viewing-info h3 a:hover { color: var(--c-primary); }
.viewing-times { margin: 6px 0; }
.viewing-confirmed {
    background: #ecfdf5; color: #065f46;
    padding: 6px 10px; border-radius: 6px;
    margin: 6px 0; font-size: .9rem;
    border-right: 3px solid var(--c-success);
}
.viewing-actions {
    display: flex; flex-direction: column; gap: 6px;
    min-width: 180px;
    align-items: stretch; justify-content: center;
}
.viewing-actions label { font-size: .85rem; margin: 4px 0 0; }
.viewing-actions input, .viewing-actions textarea {
    width: 100%; padding: 6px 8px; border: 1px solid var(--c-border);
    border-radius: 4px; font-family: inherit;
}

@media (max-width: 700px) {
    .viewing-card { grid-template-columns: 1fr; }
    .viewing-actions { border-top: 1px solid var(--c-border); padding-top: 10px; }
}

/* Seller liability note — embedded inside the honesty warning */
.liability-note {
    background: rgba(255, 255, 255, 0.6);
    border-right: 4px solid var(--c-primary);
    padding: 10px 14px;
    margin: 12px 0 6px;
    border-radius: 6px;
    font-size: .92rem;
    line-height: 1.8;
    color: #1f2937;
}
.liability-note strong { color: var(--c-primary); }

/* Buyer disclaimer banner on /properties/<id> — verify before committing */
.buyer-disclaimer {
    display: flex; gap: 14px; align-items: flex-start;
    background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);
    border: 1px solid #1e40af;
    border-right: 4px solid #1e3a8a;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 16px 0;
    line-height: 1.85;
    color: #1e3a8a;
}
.buyer-disclaimer .bd-icon {
    font-size: 1.8rem; line-height: 1;
    flex-shrink: 0;
}
.buyer-disclaimer .bd-body { flex: 1; min-width: 0; font-size: .92rem; }
.buyer-disclaimer strong { color: #1e3a8a; }
.buyer-disclaimer a { color: var(--c-primary); font-weight: 700; }

/* Honesty warning banner on /properties/new — anti-fraud reminder */
.honesty-warning {
    background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
    border: 2px solid #d97706;
    border-radius: 10px;
    padding: 18px 22px;
    margin: 18px 0;
    line-height: 1.9;
    color: #7c2d12;
}
.honesty-warning .hw-head {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.1rem; margin-bottom: 8px;
}
.honesty-warning .hw-icon { font-size: 1.6rem; }
.honesty-warning .hw-head strong { color: #b45309; font-size: 1.15rem; }
.honesty-warning p { margin: 6px 0; }
.honesty-warning strong { color: #92400e; }
.honesty-warning em { font-style: normal; color: #b45309; font-weight: 700; }
.honesty-warning .hw-link a {
    color: var(--c-primary); font-weight: 700;
    text-decoration: underline;
}

/* Strengths/weaknesses cells styled to keep them visually distinct */
.honest-proscons {
    border: 2px solid var(--c-border);
    background: #fafaf7;
}
.honest-proscons legend {
    background: #fff; padding: 4px 12px;
    border: 1px solid var(--c-border); border-radius: 6px;
    font-weight: 800;
}
.honest-proscons legend em {
    font-style: normal; color: var(--c-danger);
}
.honest-proscons .proscons-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.proscons-cell { display: flex; flex-direction: column; gap: 4px; }
.pros-cell .lbl-pros { color: var(--c-success); font-weight: 800; }
.cons-cell .lbl-cons { color: var(--c-danger); font-weight: 800; }
.cons-cell .cons-must {
    background: var(--c-danger); color: #fff;
    padding: 2px 8px; border-radius: 10px;
    font-size: .75rem; margin-right: 6px;
}
.pros-cell textarea {
    border: 2px solid #86efac;
    background: #f0fdf4;
}
.cons-cell textarea {
    border: 2px solid #fca5a5;
    background: #fef2f2;
}
.pros-cell textarea:focus { outline: none; border-color: var(--c-success); background: #fff; }
.cons-cell textarea:focus { outline: none; border-color: var(--c-danger); background: #fff; }

.honest-pledge-row {
    display: flex !important;
    gap: 10px; align-items: flex-start;
    background: #fef3c7;
    border: 1px solid #d97706;
    padding: 12px 14px;
    border-radius: 8px;
    margin-top: 14px !important;
    font-size: .9rem;
    line-height: 1.7;
    color: #7c2d12;
    cursor: pointer;
}
.honest-pledge-row input[type="checkbox"] {
    width: 18px; height: 18px; margin-top: 3px;
    flex-shrink: 0; accent-color: #d97706; cursor: pointer;
}
.honest-pledge-row a { color: var(--c-primary); font-weight: 700; }

@media (max-width: 700px) {
    .honest-proscons .proscons-grid { grid-template-columns: 1fr; }
}

/* Marketing-email consent card on /auth/dashboard */
.marketing-consent-card {
    margin-top: 24px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid #1e40af;
    padding: 22px 26px;
    line-height: 1.85;
}
.marketing-consent-card h3 {
    color: #1e3a8a;
    margin-bottom: 8px;
}
.marketing-consent-card p { color: #1e3a8a; margin-bottom: 12px; }
.marketing-features {
    list-style: none; padding: 0; margin: 10px 0 16px;
    background: rgba(255,255,255,0.5);
    border-radius: 8px;
    padding: 12px 16px;
}
.marketing-features li { padding: 4px 0; font-size: .95rem; color: #1e3a8a; }
.consent-toggle-form {
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.consent-status {
    padding: 6px 14px; border-radius: 20px;
    font-weight: 800; font-size: .9rem;
}
.consent-status.on  { background: var(--c-success); color: #fff; }
.consent-status.off { background: #e5e7eb; color: var(--c-muted); }

/* Pre-offer hard warning — above the binding-offer form */
.pre-offer-warning {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid var(--c-danger);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 14px 0;
    line-height: 1.85;
    color: #7f1d1d;
}
.pre-offer-warning strong {
    display: block; font-size: 1.05rem; color: var(--c-danger);
    margin-bottom: 8px;
}
.pre-offer-warning .ban-ladder {
    font-size: .9rem;
    margin: 10px 0 6px;
    background: rgba(255, 255, 255, 0.65);
    padding: 8px 12px; border-radius: 6px;
}
.pre-offer-warning .ask-first-btn {
    background: #fff; color: var(--c-primary);
    border: 2px solid var(--c-primary);
    margin-top: 10px;
}
.pre-offer-warning .ask-first-btn:hover {
    background: var(--c-primary); color: #fff;
}

/* Inline ladder tags shown both on warning + policy table */
.bl-tag {
    display: inline-block;
    background: var(--c-danger); color: #fff;
    padding: 3px 10px; border-radius: 12px;
    font-size: .8rem; font-weight: 700;
    margin: 0 3px;
}
.bl-tag.bl-final {
    background: #000;
    box-shadow: 0 0 0 2px var(--c-danger);
}

/* Collapse the binding form behind a <details> until user expands */
.offer-form-toggle {
    background: #fafaf7;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 0;
    margin: 10px 0;
}
.offer-form-toggle > summary {
    cursor: pointer;
    padding: 12px 16px;
    font-weight: 700;
    color: var(--c-primary);
    user-select: none;
}
.offer-form-toggle > summary:hover { background: #f0f4f8; }
.offer-form-toggle[open] > summary {
    border-bottom: 1px solid var(--c-border);
}
.offer-form-toggle .offer-form {
    margin: 0; border: none; box-shadow: none;
    background: transparent;
}

/* Penalty ladder table on the offers-policy page */
.penalty-ladder {
    width: 100%; border-collapse: collapse;
    margin: 14px 0;
    background: #fff;
    border-radius: 8px; overflow: hidden;
    box-shadow: var(--shadow);
}
.penalty-ladder th, .penalty-ladder td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-border);
    text-align: right;
}
.penalty-ladder thead {
    background: var(--c-primary); color: #fff;
}
.penalty-ladder tbody tr:last-child td { border-bottom: none; }
.penalty-ladder tbody tr:last-child {
    background: #fef2f2;
}

/* Pledge timestamp badge on offers_received */
.pledge-badge {
    display: inline-block;
    background: #ecfdf5; color: var(--c-success);
    padding: 4px 10px; border-radius: 6px;
    font-size: .82rem; font-weight: 700;
    margin: 6px 0;
    border: 1px solid #86efac;
}

/* ============================================================
   Investment Portfolio — /portfolio/
   ============================================================ */
.portfolio-page .portfolio-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap; gap: 14px; margin-bottom: 20px;
}
.portfolio-page .portfolio-head h1 { font-size: 1.9rem; margin-bottom: 6px; }
.portfolio-page .portfolio-head p { max-width: 700px; }

/* Tab strip */
.portfolio-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 2px solid var(--c-border);
    margin: 24px 0 18px;
}
.port-tab {
    padding: 12px 18px;
    background: transparent; color: var(--c-muted);
    font-weight: 700; font-size: .95rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color .15s, border-color .15s;
}
.port-tab:hover {
    color: var(--c-primary); text-decoration: none;
    border-bottom-color: var(--c-border);
}
.port-tab.active {
    color: var(--c-primary);
    border-bottom-color: var(--c-accent);
    background: linear-gradient(180deg, transparent 0%, rgba(200,165,91,0.06) 100%);
}
.port-tab-count {
    background: #fef3c7; color: var(--c-accent-dark);
    padding: 2px 8px; border-radius: 999px; font-size: .8rem;
}
.port-tab.active .port-tab-count {
    background: var(--c-primary); color: #fff;
}

/* Empty state */
.empty-state {
    text-align: center; padding: 60px 20px;
    background: linear-gradient(135deg, #faf8f3 0%, #fff 100%);
    border: 2px dashed var(--c-border);
    border-radius: var(--radius);
}
.empty-state .empty-icon { font-size: 4rem; margin-bottom: 10px; }
.empty-state h3 { font-size: 1.3rem; }
.empty-state p { color: var(--c-muted); margin-bottom: 18px; }

/* Asset card list */
.portfolio-list {
    display: flex; flex-direction: column; gap: 14px;
}
.asset-card {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    gap: 16px; align-items: stretch;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
}
.asset-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--c-accent);
}
.asset-card.is-sold     { background: linear-gradient(135deg,#f0fdf4 0%, #fff 60%); }
.asset-card.is-hidden   { background: linear-gradient(135deg,#f3f4f6 0%, #fff 60%); opacity: .92; }
.asset-card.buy-card    { grid-template-columns: 1fr auto; padding: 14px 16px; }

.asset-thumb {
    display: block; min-height: 140px;
    overflow: hidden;
}
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-thumb-placeholder {
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: var(--c-muted);
    background: var(--c-bg);
}

.asset-body {
    padding: 14px 16px 14px 0; min-width: 0;
}
.asset-headline {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.asset-headline h3 { margin: 0; font-size: 1.1rem; line-height: 1.4; }
.asset-headline h3 a { color: var(--c-dark); text-decoration: none; }
.asset-headline h3 a:hover { color: var(--c-primary); }

.status-badge {
    padding: 3px 10px; border-radius: 12px;
    font-size: .78rem; font-weight: 800;
    white-space: nowrap;
}
.status-badge.active { background: #d1fae5; color: #065f46; }
.status-badge.hidden { background: #e5e7eb; color: #374151; }
.status-badge.sold   { background: #fef3c7; color: #92400e; }

.asset-meta { margin: 4px 0 10px; }

/* Finance grid inside asset card */
.asset-finance {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
    gap: 8px;
    padding: 8px 12px;
    background: var(--c-bg);
    border-radius: 8px;
    margin: 8px 0;
}
.fin-cell { display: flex; flex-direction: column; gap: 2px; }
.fin-cell small { color: var(--c-muted); font-size: .72rem; }
.fin-cell strong { font-size: .95rem; }
.fin-cell.fin-warn { background: #fee2e2; padding: 4px 8px; border-radius: 6px; }
.fin-cell.fin-warn strong { color: var(--c-danger); }
.fin-cell.fin-cta-cell { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.fin-min { color: var(--c-accent-dark); }

.asset-hint {
    padding: 8px 12px; border-radius: 6px; margin-top: 8px;
    font-size: .88rem; line-height: 1.6;
}
.asset-hint.warn { background: #fee2e2; color: #7f1d1d; border-right: 3px solid var(--c-danger); }
.asset-hint.good { background: #ecfdf5; color: #065f46; border-right: 3px solid var(--c-success); }

/* Right-side action column */
.asset-actions {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px;
    justify-content: center;
    border-right: 1px solid var(--c-border);
    background: #fafaf7;
    min-width: 130px;
}
.asset-actions .btn { width: 100%; justify-content: center; }
.asset-actions form.inline-form { margin: 0; }

/* Finance edit page preview */
.finance-preview {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid var(--c-accent);
    padding: 12px 16px; border-radius: 8px;
    margin: 14px 0; line-height: 1.85;
}
.finance-preview code {
    background: rgba(255,255,255,0.7); padding: 2px 6px; border-radius: 4px;
    font-weight: 700; color: var(--c-accent-dark);
}
.finance-preview .fin-target {
    font-size: 1.15rem; color: var(--c-accent-dark);
}

.form-actions {
    display: flex; gap: 10px; margin-top: 14px;
}

@media (max-width: 700px) {
    .asset-card { grid-template-columns: 1fr; }
    .asset-thumb { min-height: 180px; }
    .asset-actions { flex-direction: row; flex-wrap: wrap; border-right: none; border-top: 1px solid var(--c-border); }
    .asset-actions .btn { width: auto; flex: 1 1 100px; }
    .portfolio-head { flex-direction: column; align-items: stretch; }
    .port-tab { padding: 10px 12px; font-size: .85rem; }
}

/* Remembered-city bar on /properties/new — shown when the user's city is
   already known (from preferences) and the form pre-selected it for them. */
.remembered-city-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid var(--c-success);
    border-radius: var(--radius);
    padding: 12px 18px;
    margin: 14px 0 22px;
    line-height: 1.6;
    color: #064e3b;
}
.remembered-city-bar .rc-icon { font-size: 1.4rem; line-height: 1; }
.remembered-city-bar .rc-text { flex: 1; min-width: 200px; font-size: .96rem; }
.remembered-city-bar .rc-text strong { color: var(--c-success); font-size: 1.05rem; }
.remembered-city-bar .rc-change {
    color: var(--c-primary);
    font-weight: 700;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--c-primary);
    background: #fff;
    font-size: .9rem;
    white-space: nowrap;
}
.remembered-city-bar .rc-change:hover {
    background: var(--c-primary); color: #fff; text-decoration: none;
}

/* Governorate picker — first step of /properties/new */
.city-picker-head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 28px;
}
.city-picker-head h1 { font-size: 2rem; margin-bottom: 10px; }
.city-picker-head p { font-size: 1.05rem; line-height: 1.8; color: var(--c-muted); }

.city-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin: 20px auto;
    max-width: 1100px;
}
.city-picker-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #ffffff 0%, #faf8f3 100%);
    border: 2px solid var(--c-border);
    border-radius: var(--radius);
    padding: 24px 16px;
    text-decoration: none;
    color: var(--c-dark);
    font-weight: 700;
    font-size: 1.15rem;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    min-height: 130px;
}
.city-picker-card:hover {
    transform: translateY(-3px);
    border-color: var(--c-primary);
    box-shadow: 0 8px 20px rgba(27, 58, 85, 0.12);
    text-decoration: none;
    color: var(--c-primary);
    background: linear-gradient(135deg, #ffffff 0%, #f0f4f8 100%);
}
.city-picker-emoji {
    font-size: 2.4rem;
    line-height: 1;
}
.city-picker-foot {
    text-align: center;
    margin-top: 24px;
}

@media (max-width: 600px) {
    .city-picker-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .city-picker-card { padding: 18px 12px; min-height: 110px; font-size: 1rem; }
    .city-picker-emoji { font-size: 2rem; }
    .city-picker-head h1 { font-size: 1.5rem; }
}

/* Tile contrast/saturation filter was REMOVED for performance.
   --------------------------------------------------------------
   Earlier we filtered every `.leaflet-tile` with
       contrast(1.35) saturate(1.65) brightness(0.93)
   to compensate for CartoDB Voyager's washed-out palette. Two
   things changed that made the filter both unnecessary and costly:

     1. We switched the tile source to OSM HOT, whose rendering
        is already high-contrast and saturated by default (it's
        designed for outdoor humanitarian field use, where map
        clarity matters more than aesthetic restraint).
     2. The filter ran on EVERY visible tile on EVERY redraw —
        GPU-expensive especially on mobile, and the cost stacked
        on top of the per-pin halos, animations and the radius
        circle. User reported the map became noticeably slower.

   The filter is left out intentionally. If we ever revert to a
   washed-out tile source, re-introduce the filter ONLY with
   `will-change: filter` on `.leaflet-tile-container` to hint
   the GPU to keep a compositor layer, and use modest values
   (contrast 1.10 / saturate 1.15). */

/* Searched-place boundary label — bright tooltip pinned on the polygon */
.leaflet-tooltip.boundary-label {
    background: rgba(234, 88, 12, 0.95);    /* orange-600 */
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 6px 14px;
    font-family: 'Cairo', system-ui, sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.30);
    white-space: nowrap;
}
.leaflet-tooltip.boundary-label::before { display: none; }   /* hide arrow */

/* Searched-area pin — replaces the old polygon outline. Just a single
   teardrop-shaped pin at the area's center with the name above it. */
.area-pin > div {
    width: 34px; height: 34px;
    background: #ea580c;                       /* matches the old highlight orange */
    color: #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
    font-size: 1.05rem;
}
.area-pin > div::before { transform: rotate(45deg); }
/* Always-visible label above the area pin */
.leaflet-tooltip.area-pin-label {
    background: rgba(234, 88, 12, 0.95);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 4px 12px;
    font-family: 'Cairo', system-ui, sans-serif;
    font-weight: 800;
    font-size: .85rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
    white-space: nowrap;
}
.leaflet-tooltip.area-pin-label::before { display: none; }   /* hide arrow */

/* Governorate variant — slightly bigger, navy color to feel "official" */
.area-pin-gov > div {
    background: #1B3A55;
    width: 36px; height: 36px;
    font-size: 1.1rem;
}

/* ============================================================
   Custom map pins (price-bubbles, realtor.ca / Zillow style)
   Rendered by L.divIcon — see tileLayer / renderMap in main.js
   ============================================================ */
.darak-pin {
    background: transparent !important;
    border: 0 !important;
    width: auto !important;
    height: auto !important;
}
.darak-pin .pin-body {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 18px;
    font-family: 'Cairo', system-ui, sans-serif;
    font-weight: 800;
    font-size: 0.86rem;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    box-shadow:
        0 3px 10px rgba(0,0,0,0.30),
        0 0 0 2px rgba(255,255,255,0.95) inset;
    transition: transform .12s ease, box-shadow .12s ease;
    cursor: pointer;
}
.darak-pin .pin-tail {
    width: 0; height: 0;
    margin: -1px auto 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid currentColor;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
}

/* SALE — Darak navy + gold accent */
.darak-pin.pin-sale {
    color: var(--c-primary);             /* drives the tail color */
}
.darak-pin.pin-sale .pin-body {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-soft) 100%);
}
.darak-pin.pin-sale:hover .pin-body {
    box-shadow:
        0 6px 14px rgba(0,0,0,0.4),
        0 0 0 2px var(--c-accent) inset;
    transform: translateY(-2px);
}

/* RENT — vivid green */
.darak-pin.pin-rent {
    color: var(--c-success);
}
.darak-pin.pin-rent .pin-body {
    background: linear-gradient(135deg, var(--c-success) 0%, #16a34a 100%);
}
.darak-pin.pin-rent:hover .pin-body {
    box-shadow:
        0 6px 14px rgba(0,0,0,0.4),
        0 0 0 2px #fef3c7 inset;
    transform: translateY(-2px);
}

/* ============================================================
   "I'm interested" pin variant — applied via .pin-interested
   when the logged-in user has marked this property as ⭐. The pin
   gets a permanent gold halo + a small ⭐ overlay so users find
   their saved properties at a glance among hundreds on the map.
   ============================================================ */
.darak-pin.pin-interested .pin-body {
    /* Gold outer ring + warm glow — stays on (no hover needed) */
    box-shadow:
        0 0 0 3px #fbbf24,
        0 0 0 5px rgba(251, 191, 36, 0.35),
        0 4px 14px rgba(245, 158, 11, 0.45);
    border-radius: 8px;
}
.darak-pin.pin-interested:hover .pin-body {
    /* Hover amplifies the halo without removing the persistent state */
    box-shadow:
        0 0 0 3px #f59e0b,
        0 0 0 6px rgba(245, 158, 11, 0.45),
        0 6px 18px rgba(245, 158, 11, 0.55);
    transform: translateY(-2px);
}
/* The ⭐ overlay — small floating star on the top-end corner of the pin */
.darak-pin.pin-interested .pin-star {
    position: absolute;
    top: -8px;
    inset-inline-end: -6px;
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 2;
    /* Subtle pulse so it draws the eye without being distracting */
    animation: pinStarPulse 2.4s ease-in-out infinite;
}
@keyframes pinStarPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}

/* ============================================================
   "I made a price offer" pin variant — applied via .pin-offered
   when the user has submitted a PriceOffer on this property.

   Uses EMERALD GREEN (not gold) on purpose: money/deal-in-flight
   is conceptually different from "saved for later", so the visual
   signal must be different too. The user should glance at the
   map and instantly count their open deals separately from their
   wishlist.

   Both classes (.pin-interested + .pin-offered) can apply at
   once — in that case the halos LAYER (gold inner + green outer)
   and BOTH icons show on opposite corners. That is the strongest
   buyer-engagement signal: they liked it AND bid on it.
   ============================================================ */
.darak-pin.pin-offered .pin-body {
    box-shadow:
        0 0 0 3px #10b981,                        /* emerald-500 ring */
        0 0 0 5px rgba(16, 185, 129, 0.35),       /* soft outer glow  */
        0 4px 14px rgba(16, 185, 129, 0.45);
    border-radius: 8px;
}
.darak-pin.pin-offered:hover .pin-body {
    box-shadow:
        0 0 0 3px #059669,                        /* emerald-600 on hover */
        0 0 0 6px rgba(5, 150, 105, 0.45),
        0 6px 18px rgba(5, 150, 105, 0.55);
    transform: translateY(-2px);
}

/* Both halos at once: gold inner + emerald outer. We keep the gold
   in the same physical position it was when used alone (closest to
   the pin body) and add green further out — the user perceives the
   pin as "wrapped twice", reinforcing the strength of engagement. */
.darak-pin.pin-interested.pin-offered .pin-body {
    box-shadow:
        0 0 0 3px #fbbf24,                        /* gold inner ring */
        0 0 0 6px #10b981,                        /* emerald outer ring */
        0 0 0 8px rgba(16, 185, 129, 0.30),
        0 4px 14px rgba(245, 158, 11, 0.40);
}
.darak-pin.pin-interested.pin-offered:hover .pin-body {
    box-shadow:
        0 0 0 3px #f59e0b,
        0 0 0 7px #059669,
        0 0 0 9px rgba(5, 150, 105, 0.40),
        0 6px 18px rgba(245, 158, 11, 0.50);
    transform: translateY(-2px);
}

/* The 💰 overlay — small floating money-bag on the top-START corner.
   Placed OPPOSITE to .pin-star (which sits on the END corner) so
   that when both are active they sit side-by-side, not stacked
   on top of each other. */
.darak-pin.pin-offered .pin-offer-tag {
    position: absolute;
    top: -8px;
    inset-inline-start: -6px;       /* opposite side of pin-star */
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 2;
    /* Same pulse cadence as pin-star — visually unified rhythm */
    animation: pinStarPulse 2.4s ease-in-out infinite;
}

/* ============================================================
   Centered property marker — ONLY on the property detail page.
   The home-map pins anchor on their tail tip (so the tail points
   at the location), but on the detail page we ALSO draw a radius
   circle around the same lat/lng, and a tail-anchored pin would
   sit ABOVE the circle's center — visually misleading.

   This round-badge style is anchored at its visual center, so:
       marker_center  ==  lat/lng  ==  circle_center
   the property is unambiguously "in the middle" of the circle
   the visitor is exploring.
   ============================================================ */
.prop-center-marker-wrap {
    background: transparent;
    border: 0;
}
.prop-center-marker {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #C8A55B 0%, #B08C42 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    box-shadow:
        0 0 0 3px #fff,                            /* white halo, lifts off tiles */
        0 0 0 5px rgba(200, 165, 91, 0.30),         /* faint outer Darak-gold glow */
        0 4px 12px rgba(0, 0, 0, 0.30);
    border: 0;
    /* Subtle breathing pulse so it draws the eye even when the
       radius circle is hidden (r=0). Same cadence as map ⭐ overlay. */
    animation: propCenterPulse 2.8s ease-in-out infinite;
}
@keyframes propCenterPulse {
    0%, 100% {
        box-shadow:
            0 0 0 3px #fff,
            0 0 0 5px rgba(200, 165, 91, 0.30),
            0 4px 12px rgba(0, 0, 0, 0.30);
    }
    50% {
        box-shadow:
            0 0 0 3px #fff,
            0 0 0 7px rgba(200, 165, 91, 0.55),
            0 6px 16px rgba(0, 0, 0, 0.35);
    }
}

/* ============================================================
   Hover-link highlight — applied via .pin-highlighted when the
   user hovers a card in the side "X عقار في هذه المنطقة" list.

   Visual goal: instantly tell the user "THAT pin = this card" so
   they can scan the list with their eyes anchored on the map.

   Color choice: CYAN (#06b6d4) — deliberately different from
   gold (.pin-interested) and emerald (.pin-offered) so the hover
   cue can never be mistaken for one of the persistent engagement
   states. Reads as a "spotlight" rather than a status.

   Specificity: the rule lists every possible combination of
   .pin-interested / .pin-offered so the highlight halo wins over
   the persistent halos for the duration of the hover.
   ============================================================ */
.darak-pin.pin-highlighted .pin-body,
.darak-pin.pin-interested.pin-highlighted .pin-body,
.darak-pin.pin-offered.pin-highlighted .pin-body,
.darak-pin.pin-interested.pin-offered.pin-highlighted .pin-body {
    transform: scale(1.20);
    box-shadow:
        0 0 0 4px #06b6d4,                        /* cyan-500 inner ring */
        0 0 0 8px rgba(6, 182, 212, 0.45),        /* halo */
        0 10px 26px rgba(6, 182, 212, 0.55);      /* drop  */
    transition: transform 0.15s ease-out,
                box-shadow 0.15s ease-out;
    z-index: 1000;
}

/* Card side: subtle highlight on the list item so the hover feels
   bidirectional — the card glows AT THE SAME TIME the pin glows.
   Without this the user could lose track of which row they're on. */
.mal-item:hover {
    background: rgba(6, 182, 212, 0.08);
    box-shadow: inset 4px 0 0 #06b6d4;            /* cyan rail on start edge */
}

/* "💰 لديك عرض سعر" tag inside the map popup — shown only when the
   user has a price offer on the listing. Same emerald palette as the
   pin halo so the two cues read as a single signal across hovers. */
.map-popup-offer-tag {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    color: #047857;                                /* emerald-700 */
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1.4;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

/* Benefits blocks — used on /agents (user-side) and /agents/apply (agent-side).
   Same visual language; semantics differ by which content they wrap. */
.benefits-block {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 18px 22px;
    margin: 14px 0 22px;
    box-shadow: var(--shadow);
}
.benefits-block h2 {
    margin: 0 0 12px;
    font-size: 1.18rem;
    color: var(--c-primary);
}
.benefits-list {
    list-style: none;
    padding: 0; margin: 0;
    display: grid; gap: 10px;
}
.benefits-list li {
    line-height: 1.7;
    padding-inline-start: 6px;
    border-inline-start: 3px solid #d1d5db;
    padding-inline: 12px;
    background: #f9fafb;
    border-radius: 6px;
    padding-block: 8px;
}
.benefits-list li strong { color: var(--c-text); }
.users-benefits  { border-right: 4px solid #2563eb; }
.agent-benefits  { border-right: 4px solid #16a34a; }
.agent-pledge-note {
    margin-top: 14px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #6ee7b7;
    border-right: 4px solid #16a34a;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: .92rem;
    line-height: 1.6;
}

/* "Darak is free" notice — used at the top of the home page and the
   new-listing form so users see it before they engage with anything. */
.free-banner {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #6ee7b7;
    border-right: 5px solid #16a34a;
    color: #065f46;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .95rem;
    line-height: 1.55;
    margin: 0 0 12px;
}
.free-banner strong { color: #064e3b; }
@media (max-width: 540px) {
    .free-banner { font-size: .88rem; padding: 9px 12px; }
}

/* Small persistent footer badge so users see "مجاني" on every page. */
.footer-free-badge {
    display: inline-block;
    margin-right: 10px;
    background: rgba(34, 197, 94, 0.18);
    color: #065f46;
    border: 1px solid rgba(34, 197, 94, 0.4);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
}

/* ---------- Custom hover tooltips (.has-tip + data-tip="...") ----------
   Instant-show (no native 500ms delay), themed, RTL-aware, multi-line OK.
   On touch devices the hover doesn't fire so the native `title` attribute
   on the same element provides the fallback. */
.has-tip {
    position: relative;          /* tooltip is positioned to this anchor */
}
.has-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);    /* sits above the button */
    right: 50%;
    transform: translateX(50%) translateY(4px);
    background: #1f2937;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease-out, transform 140ms ease-out;
    z-index: 200;
}
.has-tip::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    right: 50%;
    transform: translateX(50%);
    border: 6px solid transparent;
    border-top-color: #1f2937;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease-out;
    z-index: 200;
}
.has-tip:hover::after,
.has-tip:focus-visible::after {
    opacity: 1;
    transform: translateX(50%) translateY(0);
}
.has-tip:hover::before,
.has-tip:focus-visible::before {
    opacity: 1;
}
/* Hide tooltips on touch devices — they'd trigger on tap & block interaction.
   The native `title` attribute on the same element is the touch fallback. */
@media (hover: none) {
    .has-tip::after, .has-tip::before { display: none; }
}

/* "Smart-locate" hint — shown briefly when the LLM bridged a fuzzy
   query (e.g. "ضيعتنا قرب كسب") to a known place on the map. */
.smart-locate-hint {
    margin: 8px 0;
    padding: 8px 12px;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-right: 4px solid #16a34a;
    border-radius: 8px;
    color: #065f46;
    font-size: .9rem;
    line-height: 1.55;
    animation: hint-fade-in 250ms ease-out;
}
.smart-locate-hint strong { color: #064e3b; }
@keyframes hint-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* /agents/ page — prominent city-chip filter at the top. Replaces the
   small dropdown that was buried below the benefits block. Each chip
   shows the city name + agent count, and the active one is highlighted. */
.agents-city-filter {
    background: #f8fafc;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 12px 0 18px;
}
.acf-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.acf-label { font-weight: 700; color: var(--c-text); }
.acf-clear {
    color: #b91c1c; font-weight: 600; font-size: .9rem;
    text-decoration: none;
}
.acf-clear:hover { text-decoration: underline; }
.acf-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.acf-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    color: var(--c-text);
    font-weight: 600; font-size: .9rem;
    text-decoration: none;
    transition: all 150ms;
}
.acf-chip:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    text-decoration: none;
}
.acf-chip.active {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}
.acf-chip .acf-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px;
    padding: 0 6px;
    background: rgba(0,0,0,0.08);
    border-radius: 999px;
    font-size: .76rem; font-weight: 800;
}
.acf-chip.active .acf-count {
    background: rgba(255,255,255,0.25); color: #fff;
}

/* "Listed by agent" badge on property cards — only renders when the
   property has an approved agent. Clickable: opens the agent's profile. */
.prop-agent-tag {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px;
    padding: 6px 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1e3a8a;
    font-size: .85rem;
    text-decoration: none;
    transition: background-color 120ms;
}
.prop-agent-tag:hover {
    background: #dbeafe;
    text-decoration: none;
}
.prop-agent-tag .pa-avatar {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .9rem;
}
.prop-agent-tag .pa-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prop-agent-tag .pa-name strong { color: #1e3a8a; }
.prop-agent-tag .pa-agency {
    color: #64748b;
    font-size: .78rem;
    margin-inline-start: 4px;
}
.prop-agent-tag .pa-rating {
    flex-shrink: 0;
    background: #fef3c7; color: #92400e;
    padding: 2px 8px; border-radius: 999px;
    font-size: .78rem; font-weight: 800;
}

/* Geocoder disambiguation dropdown — shown when Nominatim returns
   multiple places matching the user's typed query (e.g. "كسب" exists
   as a village in Latakia AND as smaller hamlets elsewhere). */
.addr-candidates {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 10px 12px;
    margin: 8px 0 12px;
}
.addr-candidates-head {
    font-weight: 700;
    color: var(--c-primary);
    margin-bottom: 8px;
    font-size: .92rem;
}
.addr-candidate {
    /* Single horizontal line per candidate. Flex pins the rank + coord
       chip to the edges and lets the middle content truncate with ellipsis
       so coords never overflow the dropdown. */
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    margin: 3px 0;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    text-align: right;
    font-family: inherit;
    transition: background-color 120ms;
    overflow: hidden;
}
.addr-candidate:hover {
    background: #eff6ff;
    border-color: #93c5fd;
}
.addr-candidate .ac-main {
    /* Flexible middle column — truncates with ellipsis when too long */
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
    color: #374151;
    line-height: 1.4;
}
.addr-candidate .ac-sep {
    margin: 0 4px;
    color: #9ca3af;
    font-weight: 700;
}
.addr-candidate .ac-coords {
    /* Coord chip — flex-shrink:0 so it's NEVER cut off + always inside
       the dropdown's right edge (RTL: visually at the start of the row). */
    flex-shrink: 0;
    padding: 2px 8px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    color: #166534;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
    font-family: 'Courier New', monospace;
}
.addr-candidate .ac-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    background: var(--c-primary, #1B3A55);
    color: #fff;
    border-radius: 50%;
    font-weight: 800;
    font-size: .85rem;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(27, 58, 85, .25);
}
.addr-candidate:hover .ac-rank {
    background: var(--c-accent, #C8A55B);
    color: #1B3A55;
}
.addr-candidate .ac-label {
    font-weight: 700;
    color: var(--c-primary, #1B3A55);
}
.addr-candidate .ac-full {
    color: #6b7280;
    font-weight: 400;
    /* Now sits inline inside .ac-main — no separate block, no second row */
}
.addr-candidate-close {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 10px;
    background: transparent;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    color: #6b7280;
    cursor: pointer;
    font-family: inherit;
    font-size: .85rem;
}
.addr-candidate-close:hover {
    background: #f3f4f6;
}
@media (max-width: 540px) {
    /* On phones, drop the coord chip to save horizontal room and let
       the address text expand. The pin on the map confirms the location. */
    .addr-candidate { padding: 6px 8px; gap: 6px; }
    .addr-candidate .ac-main { font-size: .78rem; }
    .addr-candidate .ac-coords { display: none; }
}

/* ============================================================
   LLM-assisted disambiguation — extra chips + note rendering on
   candidates that came from the AI interpreter (vs raw Nominatim).
   ============================================================ */
.addr-candidate.approx {
    border-color: #fde68a;
    background: #fffbeb;
}
.addr-candidate.approx:hover {
    background: #fef3c7;
}
.addr-candidate .ac-tag {
    display: inline-block;
    font-size: 0.72rem;
    padding: 1px 7px;
    border-radius: 999px;
    margin-inline-start: 4px;
    vertical-align: middle;
    font-weight: 700;
}
.ac-tag.ac-conf-high   { background: #dcfce7; color: #166534; }
.ac-tag.ac-conf-medium { background: #fef3c7; color: #92400e; }
.ac-tag.ac-conf-low    { background: #fee2e2; color: #b91c1c; }
.ac-tag.ac-cat         { background: #e0e7ff; color: #3730a3; }
.ac-tag.ac-approx      { background: #fde68a; color: #78350f; }
.addr-candidate .ac-note {
    grid-column: 2 / -1;
    color: #92400e;
    font-size: 0.82rem;
    margin-top: 2px;
    line-height: 1.4;
}

/* Inline error message shown under the address search bar (replaces
   blocking alert() for "address not found / search failed"). */
.map-addr-error {
    flex-basis: 100%;
    width: 100%;
    padding: 6px 12px;
    margin: 4px 0 0;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    color: #991b1b;
    font-size: .82rem;
    line-height: 1.4;
}

/* Short marketing taglines placed across the site. Each variant gets a
   slightly different visual treatment matched to its host page. */
.strip-tagline {
    margin: 0 0 10px;
    font-size: .98rem;
    color: #1e3a8a;
    font-weight: 600;
    text-align: center;
}
.contact-tagline {
    margin: 0 0 10px;
    padding: 8px 12px;
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-size: .92rem;
    font-weight: 600;
    text-align: center;
}
.hero-tag {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--c-primary);
    margin: 8px 0 4px;
}
.hero-sub {
    font-size: 1.05rem;
    color: #475569;
    margin: 0 0 14px;
}

/* Smart per-type form (property_new) — one block per property type, only
   the active one is visible. JS toggles via the [hidden] attribute. */
.type-attrs-stack { margin-top: 14px; }
.type-attrs-block {
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 14px 18px 18px;
    margin: 12px 0;
    background: #f9fafb;
}
.type-attrs-block legend {
    padding: 0 8px;
    font-weight: 700;
    color: var(--c-primary);
    font-size: .95rem;
}
.type-attrs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 14px;
}
.type-attrs-grid label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: .9rem; font-weight: 600;
}
.type-attrs-grid .bool-cell {
    flex-direction: row; align-items: center; gap: 8px;
    background: #fff; padding: 8px 10px; border-radius: 6px;
    border: 1px solid #e5e7eb; cursor: pointer;
}
.type-attrs-grid .bool-cell input { margin: 0; }
.type-attrs-grid input[type=number],
.type-attrs-grid input[type=text],
.type-attrs-grid select {
    padding: 7px 9px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    font-family: inherit; font-size: .9rem;
}

/* Type-attributes block on the detail page */
.type-attrs-display {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px 14px;
}
.type-attrs-display li {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 6px 10px;
    background: #f9fafb; border-radius: 6px;
    border-right: 3px solid var(--c-primary);
    font-size: .92rem;
}
.type-attrs-display .ta-label { color: #4b5563; }
.type-attrs-display .ta-value { font-weight: 700; color: var(--c-text); }

/* Address-field → map sync (property_new form) */
.addr-input-row {
    display: flex; gap: 6px; align-items: stretch;
}
.addr-input-row input {
    flex: 1; min-width: 0;
}
.addr-input-row button {
    flex-shrink: 0; white-space: nowrap; padding: 0 14px;
    font-size: .9rem;
}
.addr-hint {
    display: block; margin-top: 4px; line-height: 1.5;
}
.addr-locate-badge {
    margin-top: 6px; display: inline-block;
    background: #ecfdf5; color: #065f46;
    border: 1px solid #6ee7b7; border-radius: 6px;
    padding: 4px 10px; font-size: .82rem; font-weight: 700;
}
@media (max-width: 540px) {
    .addr-input-row { flex-direction: column; }
    .addr-input-row button { width: 100%; padding: 9px 14px; }
}

/* Leaflet built-in Shift+drag boxZoom rectangle — restyle to match
   Darak's purple/orange accents (Leaflet's default is a faint dotted
   gray that's nearly invisible on our soft tile background). */
.leaflet-zoom-box {
    border: 2px dashed #7c3aed !important;     /* purple dashed */
    background: rgba(124, 58, 237, 0.18) !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
}

/* Discoverability hint toast — bottom-center, dismissible, one-time. */
.boxzoom-hint {
    position: absolute;
    bottom: 16px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 700;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    padding: 9px 16px 9px 36px;
    border-radius: 999px;
    font-size: .92rem;
    line-height: 1.5;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
    display: flex; align-items: center; gap: 10px;
    animation: bzhFadeIn 250ms ease-out;
    max-width: 92%;
}
.boxzoom-hint strong { color: #fbbf24; }
.boxzoom-hint button {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    font-weight: 800;
}
.boxzoom-hint button:hover { background: rgba(255,255,255,0.35); }
@keyframes bzhFadeIn {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Draw-polygon toolbar — floats on top of the map (top-right). */
.draw-toolbar {
    position: absolute;
    top: 12px;
    /* Physical RIGHT (not inset-inline-end which becomes LEFT in RTL and
       collides with Leaflet's zoom + layer controls). */
    right: 12px;
    left: auto;
    z-index: 600;
    display: flex; gap: 6px; flex-wrap: wrap;
    background: rgba(255,255,255,0.96);
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.draw-toolbar .btn { white-space: nowrap; }
/* Pencil-only draw button — icon square (no label), tight, easy target.
   When drawing is active, JS swaps in instruction text so we let it grow
   naturally then. */
.draw-toolbar .draw-pencil {
    width: 34px; min-width: 34px;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.draw-toolbar .draw-pencil.btn-warning {
    /* Active state — instruction text — restore normal pill sizing */
    width: auto; min-width: 0;
    padding: 4px 12px;
    font-size: .82rem;
}
/* Crosshair cursor while user is laying down polygon corners */
.darak-drawing .leaflet-grab,
.darak-drawing .leaflet-interactive { cursor: crosshair !important; }

/* /auth/saved-areas — list of polygons the user has saved */
.saved-areas-page .sa-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
    padding-bottom: 12px; border-bottom: 2px solid var(--c-border);
}
/* Pencil-only "draw a new area" link — same circular icon-button feel as
   the map's ✏ pencil so the user mentally connects the two. */
.saved-areas-page .sa-draw-icon {
    width: 44px; height: 44px;
    min-width: 44px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.35rem; line-height: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary, #1B3A55) 0%,
                                          var(--c-primary-soft, #2c5378) 100%);
    color: #fff !important;
    border: 1px solid var(--c-primary, #1B3A55);
    box-shadow: 0 3px 10px rgba(27, 58, 85, .22);
    text-decoration: none;
    transition: transform .12s, box-shadow .15s, background .15s;
}
.saved-areas-page .sa-draw-icon:hover {
    background: linear-gradient(135deg, var(--c-accent, #C8A55B) 0%, #b89149 100%);
    color: #1B3A55 !important;
    transform: scale(1.06);
    box-shadow: 0 5px 14px rgba(200, 165, 91, .35);
}
.saved-areas-page .sa-draw-icon:active { transform: scale(.95); }
/* Inline "kbd-style" icon chip used inside running text to reference a UI
   button — small monospace-look pill so "اضغط زرّ ✏" reads as a key. */
.kbd-icon {
    display: inline-block;
    padding: 1px 7px;
    margin: 0 2px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: .95em;
    box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.sa-list { display: flex; flex-direction: column; gap: 10px; }
.sa-row {
    display: flex; gap: 14px; align-items: center;
    background: #fff; border: 1px solid var(--c-border);
    border-radius: 10px; padding: 14px;
    box-shadow: var(--shadow);
}
.sa-icon { font-size: 2rem; flex-shrink: 0; }
.sa-body { flex: 1; min-width: 0; }
.sa-name { margin: 0; font-size: 1.05rem; }
.sa-meta { margin-top: 6px; }
.sa-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
@media (max-width: 600px) {
    .sa-row { flex-wrap: wrap; }
    .sa-actions { width: 100%; }
}

/* Toast shown when the user toggles on a stub layer that has no data yet.
   Lets them know the layer is intentional infrastructure, not a bug. */
.stub-layer-toast {
    position: fixed;
    bottom: 90px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    max-width: 92%;
    width: 360px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-inline-start: 4px solid #ea580c;
    border-radius: 10px;
    padding: 12px 16px;
    color: #7c2d12;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    font-size: .92rem;
    line-height: 1.55;
    animation: stubToastIn 220ms ease-out;
}
.stub-layer-toast strong { color: #431407; display: block; margin-bottom: 4px; }
.stub-layer-toast span   { color: #7c2d12; }
@keyframes stubToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Toast shown when user tries to activate an amenity layer without
   selecting a city first — navy/blue palette to read as informational. */
.city-req-toast {
    position: fixed;
    bottom: 90px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    max-width: 92%;
    width: 380px;
    background: #eff6ff;
    border: 1.5px solid #93c5fd;
    border-radius: 10px;
    padding: 12px 16px;
    color: #1e3a5f;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    font-size: .92rem;
    line-height: 1.55;
    animation: stubToastIn 220ms ease-out;
}
.city-req-toast strong { color: #1B3A55; display: block; margin-bottom: 4px; }
.city-req-toast span   { color: #1e40af; }

/* "خدمات ما بعد التعاقد" page — staged hub for the new owner / tenant */
.after-deal-page .ad-head { text-align: center; margin-bottom: 24px; }
.after-deal-page .ad-head h1 { margin: 0 0 8px; }
.ad-stage {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: var(--shadow);
}
.ad-stage-head { margin-bottom: 14px; }
.ad-stage-head h2 { margin: 0 0 4px; font-size: 1.15rem; color: var(--c-primary); }
.ad-stage-head .ad-stage-hint { margin: 0 0 6px; }

.ad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.ad-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--c-text);
    text-decoration: none;
    transition: border-color 120ms, background 120ms;
}
.ad-card:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    text-decoration: none;
}
.ad-card-head { display: flex; gap: 10px; align-items: flex-start; }
.ad-card-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 8px;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.ad-card-name { margin: 0; font-size: .98rem; }
.ad-card-meta {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-top: 10px;
}
.ad-card-rating { color: #f59e0b; font-weight: 700; font-size: .85rem; }

.ad-utilities { background: #fef9c3; border-color: #facc15; }
.ad-utility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.ad-util {
    display: flex; gap: 10px; align-items: center;
    background: #fff;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--c-text);
    text-decoration: none;
    transition: border-color 120ms, transform 120ms;
}
.ad-util:hover {
    border-color: #f59e0b;
    transform: translateY(-1px);
    text-decoration: none;
}
.ad-util-icon {
    flex-shrink: 0;
    font-size: 1.6rem;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
}
.ad-util-name { margin: 0; font-size: .95rem; font-weight: 700; }
.ad-util-arrow { color: #f59e0b; font-weight: 800; flex-shrink: 0; }
.ad-util-note { text-align: center; margin: 12px 0 0; }

/* In-app user manuals — /help/admin, /help/agent, /help/partner */
.help-index .help-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 18px 0 24px;
}
.help-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 22px;
    text-decoration: none;
    color: var(--c-text);
    box-shadow: var(--shadow);
    transition: transform 150ms, border-color 150ms;
    display: flex; flex-direction: column; gap: 6px;
}
.help-card:hover { transform: translateY(-2px); text-decoration: none; }
.help-card-admin   { border-top: 4px solid #dc2626; }
.help-card-agent   { border-top: 4px solid #2563eb; }
.help-card-partner { border-top: 4px solid #16a34a; }
.help-card .hc-icon { font-size: 2.6rem; }
.help-card h2 { margin: 0; font-size: 1.15rem; }
.help-card p { margin: 4px 0 8px; line-height: 1.65; color: #475569; }
.help-card .hc-cta { color: var(--c-primary); font-weight: 700; }

/* The actual manual page (admin/agent/partner) */
.help-doc .hd-head {
    border-bottom: 2px solid var(--c-border);
    padding-bottom: 14px; margin-bottom: 18px;
}
.help-doc .hd-actions {
    display: flex; gap: 8px; margin-top: 10px;
}
.help-doc .hd-section {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 16px 22px;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
}
.help-doc .hd-section h2 {
    margin: 0 0 12px;
    font-size: 1.18rem;
    color: var(--c-primary);
    border-bottom: 1px dashed var(--c-border);
    padding-bottom: 6px;
}
.help-doc .hd-section ul,
.help-doc .hd-section ol { padding-inline-start: 22px; line-height: 1.85; }
.help-doc .hd-section li { margin-bottom: 4px; }
.help-doc .hd-section code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .9em;
    direction: ltr; display: inline-block;
}
.help-doc details {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 6px 0;
}
.help-doc details > summary { cursor: pointer; font-weight: 600; }
.help-doc details[open] > summary { color: var(--c-primary); }
.help-doc details p { margin: 6px 0 0; padding-inline-start: 18px; color: #475569; }
.help-doc .hd-table {
    width: 100%; border-collapse: collapse; margin: 8px 0;
}
.help-doc .hd-table th,
.help-doc .hd-table td {
    padding: 8px 12px; text-align: right;
    border-bottom: 1px solid #f1f5f9;
}
.help-doc .hd-table th {
    background: #f8fafc; font-weight: 700;
}
.help-doc .hd-foot { text-align: center; margin-top: 24px; }

@media print {
    /* Strip site chrome — print only the manual content */
    .site-header, .site-footer, .ai-launcher, .fx-bar,
    .hd-actions { display: none !important; }
    .help-doc .hd-section { page-break-inside: avoid; box-shadow: none; }
    body { background: #fff; }
}

/* AI insight panel on /properties/<id> — generated by Llama 4 Scout
   using the 56 map-layer context. Renders as a coloured card-grid
   beneath the property description. Hidden by default until the
   async fetch returns. */
.ai-insight-panel {
    background: linear-gradient(135deg, #faf5ff 0%, #eff6ff 100%);
    border: 1px solid #c4b5fd;
    border-right: 4px solid #7c3aed;
    border-radius: 14px;
    padding: 18px 22px;
    margin: 18px 0;
    animation: aiFadeIn 240ms ease-out;
}
.ai-insight-head {
    margin: 0 0 14px;
    color: #5b21b6;
    display: flex; align-items: center; gap: 10px;
    font-size: 1.12rem;
    flex-wrap: wrap;
}
.ai-regen {
    margin-inline-start: auto;
    font-size: 0.82rem !important;
    padding: 4px 10px !important;
    color: #5b21b6 !important;
    border-color: #c4b5fd !important;
}
.ai-regen:hover:not(:disabled) {
    background: #f3e8ff !important;
    border-color: #7c3aed !important;
}
.ai-regen:disabled { opacity: 0.6; cursor: wait; }
.ai-insight-status {
    background: rgba(255, 255, 255, 0.6);
    border: 1px dashed #c4b5fd;
    border-radius: 10px;
    padding: 14px 16px;
    color: #6d28d9;
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 10px;
    /* Soft pulse so the user knows it's working */
    animation: aiPulse 1.6s ease-in-out infinite;
}
@keyframes aiPulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}
.ai-badge {
    background: linear-gradient(135deg, #7c3aed 0%, #4338ca 100%);
    color: #fff;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
}
.ai-insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}
.ai-card {
    background: #fff;
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 10px;
    padding: 10px 14px;
}
.ai-card h4 {
    margin: 0 0 6px;
    font-size: .9rem;
    color: #4338ca;
}
.ai-card p {
    margin: 0;
    line-height: 1.65;
    color: var(--c-text);
    font-size: .92rem;
}
.ai-card.ai-summary { grid-column: 1 / -1; background: #f5f3ff; }
.ai-card.ai-watch   { border-right: 3px solid #f59e0b; }
.ai-card.ai-price   { border-right: 3px solid #16a34a; }
.ai-card.ai-area    { border-right: 3px solid #2563eb; }
.ai-card.ai-fit     { border-right: 3px solid #ec4899; }
.ai-disclaimer { margin-top: 10px; text-align: center; }

@keyframes aiFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Commercial-partner pins — tier-ring style. Gold > Silver > Bronze > none.
   Reuses .amenity-pin's base look but adds a graded outer ring + glow. */
.partner-pin {
    background: #fff;
    border-radius: 50%;
    width: 32px !important; height: 32px !important;
    display: flex !important; align-items: center; justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    border: 2px solid currentColor;
}
.partner-pin:hover { transform: scale(1.18); cursor: pointer; }
.partner-tier-gold     { border: 3px solid #fbbf24 !important;
                         box-shadow: 0 0 0 3px rgba(251,191,36,0.45),
                                     0 2px 6px rgba(0,0,0,0.4); }
.partner-tier-silver   { border: 3px solid #94a3b8 !important;
                         box-shadow: 0 0 0 3px rgba(148,163,184,0.45),
                                     0 2px 6px rgba(0,0,0,0.4); }
.partner-tier-bronze   { border: 3px solid #b45309 !important;
                         box-shadow: 0 0 0 3px rgba(180,83,9,0.40),
                                     0 2px 6px rgba(0,0,0,0.4); }
.partner-tier-free     { border: 2px solid #94a3b8 !important; }

/* Popup elements for partner pins */
.partner-tier-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
}
.partner-tier-tag.tier-gold   { background: #fef3c7; color: #92400e; }
.partner-tier-tag.tier-silver { background: #e2e8f0; color: #334155; }
.partner-tier-tag.tier-bronze { background: #fef3c7; color: #78350f; }
.partner-stars { color: #f59e0b; font-weight: 700; }

/* Neighborhood-amenity pins (schools, hospitals, mosques, banks, …) */
.amenity-pin {
    background: #fff;
    border-radius: 50%;
    width: 28px !important; height: 28px !important;
    display: flex !important; align-items: center; justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    border: 2px solid currentColor;
}
.amenity-pin:hover { transform: scale(1.15); }

/* /auth/map-preferences — checkbox grid per group */
.map-prefs h1 { margin-bottom: 6px; }
.prefs-form { margin-top: 18px; }
.prefs-group {
    background: #f8fafc;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.prefs-group legend {
    background: var(--c-primary);
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
}
.prefs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.prefs-cell {
    display: flex; align-items: center; gap: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
}
.prefs-cell:hover { border-color: #93c5fd; background: #f1f5f9; }
.prefs-cell input { margin: 0; }
.prefs-cell input:checked + .prefs-icon {
    transform: scale(1.15);
}
.prefs-cell .prefs-icon { font-size: 1.25rem; }
.prefs-cell .prefs-name { font-size: .9rem; font-weight: 600; }
.prefs-actions {
    display: flex; gap: 10px; align-items: center;
    margin-top: 16px; flex-wrap: wrap;
}

/* Rural land-parcel numeric labels (LandParcel layer) */
.parcel-label {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #6b7280;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: .70rem;
    font-weight: 800;
    color: var(--c-primary);
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    direction: ltr;
}
/* Hide the labels at low zoom to avoid clutter — Leaflet adds these classes
   on the map container, so we can read the current zoom from there. */
.leaflet-container[data-zoom="6"] .parcel-label,
.leaflet-container[data-zoom="7"] .parcel-label,
.leaflet-container[data-zoom="8"] .parcel-label,
.leaflet-container[data-zoom="9"] .parcel-label,
.leaflet-container[data-zoom="10"] .parcel-label { display: none; }

/* Make the popup itself look on-brand */
.leaflet-popup-content-wrapper {
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.leaflet-popup-content { margin: 10px 12px; line-height: 1.6; }

/* Touch-friendly map controls (Leaflet zoom buttons too small by default) */
@media (max-width: 700px) {
    .leaflet-touch .leaflet-bar a {
        width: 36px !important; height: 36px !important; line-height: 36px !important;
    }
}

/* Prevent horizontal page overflow caused by long Arabic words / dir-ltr emails */
body { overflow-x: hidden; }
.users-table td span[dir="ltr"],
.audit-table td span[dir="ltr"] { word-break: break-all; }


/* ============================================================
   Company dashboard (real-estate agency management)
   ============================================================ */
.company-dashboard { color: var(--c-text); }
.company-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 14px; margin-bottom: 18px;
    padding-bottom: 14px; border-bottom: 2px solid var(--c-border);
}
.company-head h1 { margin: 0 0 4px; font-size: 1.5rem; }
.company-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.company-nav a {
    padding: 8px 14px; border-radius: 8px; font-weight: 600;
    background: #f3f4f6; color: var(--c-text); text-decoration: none;
}
.company-nav a:hover { background: #e5e7eb; }
.company-nav a.active { background: var(--c-primary); color: #fff; }

/* KPI cards */
.kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px; margin: 18px 0 24px;
}
.kpi-card {
    background: #fff; padding: 16px 14px; border-radius: 12px;
    box-shadow: var(--shadow); border-right: 4px solid var(--c-primary);
}
.kpi-card.kpi-green  { border-right-color: #16a34a; }
.kpi-card.kpi-orange { border-right-color: #f59e0b; }
.kpi-card.kpi-blue   { border-right-color: #2563eb; }
.kpi-num   { font-size: 1.9rem; font-weight: 900; line-height: 1; }
.kpi-label { color: #6b7280; font-size: .88rem; margin-top: 4px; }

.section-h { margin: 22px 0 10px; font-size: 1.15rem; }

/* Property table */
.company-table-wrap { overflow-x: auto; }
.company-props {
    width: 100%; border-collapse: collapse;
    background: #fff; border-radius: 10px; overflow: hidden;
    box-shadow: var(--shadow); font-size: .92rem;
}
.company-props th,
.company-props td {
    padding: 11px 12px; text-align: right; border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.company-props th {
    background: #f8fafc; font-weight: 700; font-size: .85rem; color: #475569;
}
.company-props tr.has-offers { background: #fff7ed; }
.company-props tr.has-offers:hover { background: #ffedd5; }
.company-props tr:hover { background: #f9fafb; }
.company-props small.block { display: block; }

/* Pulsing pill highlighting unanswered offers */
.offer-pill {
    display: inline-block; background: #fb923c; color: #fff;
    padding: 3px 10px; border-radius: 999px; font-weight: 800; font-size: .82rem;
}
.offer-pill.pulse { animation: offerPulse 2s ease-in-out infinite; }
@keyframes offerPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.6); }
    50%      { box-shadow: 0 0 0 8px rgba(251, 146, 60, 0); }
}

/* Status badges shared across company tables */
.badge { display: inline-block; padding: 3px 9px; border-radius: 6px;
         font-size: .8rem; font-weight: 700; }
.badge.ok   { background: #d1fae5; color: #065f46; }
.badge.wait { background: #fef3c7; color: #92400e; }
.badge.bad  { background: #fee2e2; color: #991b1b; }
.badge.mute { background: #e5e7eb; color: #4b5563; }

/* Offer cards (on /company/properties/<id>/offers) */
.offer-card {
    background: #fff; border-radius: 10px; box-shadow: var(--shadow);
    padding: 14px 16px; margin-bottom: 14px; border-right: 4px solid #d1d5db;
}
.offer-card.is-dismissed { opacity: .55; border-right-color: #9ca3af; }
.offer-head { display: flex; justify-content: space-between; gap: 10px;
              flex-wrap: wrap; margin-bottom: 8px; }
.offer-price { font-size: 1.15rem; margin-bottom: 6px; }
.offer-price strong { font-size: 1.25rem; color: var(--c-primary); }
.offer-price .diff.neg { color: #b91c1c; font-weight: 700; }
.offer-price .diff.pos { color: #047857; font-weight: 700; }
.offer-msg { background: #f8fafc; padding: 10px 12px; border-radius: 6px;
             margin: 8px 0; font-style: italic; }
.offer-meta { margin: 6px 0 10px; }
.offer-actions { margin-top: 8px; }
.offer-actions summary { cursor: pointer; }
.respond-form { margin-top: 10px; padding: 12px; background: #fafafa;
                border-radius: 8px; display: flex; flex-direction: column;
                gap: 10px; }
.respond-form textarea, .respond-form input[type=number] {
    width: 100%; padding: 9px 10px; border: 1px solid var(--c-border);
    border-radius: 6px; font-family: inherit;
}
.respond-form .pledge-check {
    display: flex; gap: 8px; align-items: flex-start; font-size: .9rem;
    padding: 8px 10px; background: #fef3c7; border-radius: 6px;
}
.respond-row { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form { display: inline-flex; gap: 6px; align-items: center;
               margin-top: 6px; flex-wrap: wrap; }
.inline-form input[type=text] {
    padding: 6px 9px; border: 1px solid var(--c-border); border-radius: 6px;
    font-family: inherit; font-size: .85rem; min-width: 180px;
}
.seller-response { margin-top: 8px; padding: 8px 12px; background: #ecfdf5;
                   border-right: 3px solid #16a34a; border-radius: 6px; }

.status-pill {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .78rem; font-weight: 700;
}
.st-pending   { background: #fef3c7; color: #92400e; }
.st-accepted  { background: #d1fae5; color: #065f46; }
.st-rejected  { background: #fee2e2; color: #991b1b; }
.st-countered { background: #dbeafe; color: #1e40af; }
.st-expired   { background: #e5e7eb; color: #4b5563; }
.st-withdrawn { background: #e5e7eb; color: #4b5563; }
.st-dismissed { background: #f3f4f6; color: #6b7280;
                border: 1px dashed #9ca3af; }

/* Filter chip row */
.filter-bar-inline { display: flex; gap: 8px; margin: 10px 0 16px; }
.filter-bar-inline .chip {
    padding: 6px 14px; background: #f3f4f6; border-radius: 999px;
    text-decoration: none; color: var(--c-text); font-weight: 600;
    font-size: .88rem;
}
.filter-bar-inline .chip.active { background: var(--c-primary); color: #fff; }

/* Apply form */
.company-apply { max-width: 720px; }
.apply-form { display: flex; flex-direction: column; gap: 14px;
              margin-top: 16px; }
.apply-form label { display: flex; flex-direction: column; gap: 4px;
                    font-weight: 600; }
.apply-form input, .apply-form textarea, .apply-form select {
    padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 8px;
    font-family: inherit; font-size: .95rem;
}
.apply-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.apply-form .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 700px) {
    .apply-form .row-2,
    .apply-form .row-3 { grid-template-columns: 1fr; }
}

/* Invite form (members page) */
.invite-form {
    display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
    background: #fff; padding: 14px; border-radius: 10px;
    box-shadow: var(--shadow); margin-bottom: 18px;
}
.invite-form label { flex: 1; min-width: 240px; display: flex;
                     flex-direction: column; gap: 4px; }
.invite-form input { padding: 9px 12px; border: 1px solid var(--c-border);
                     border-radius: 6px; font-family: inherit; }

.company-state-card {
    background: #fff; padding: 28px; border-radius: 12px; text-align: center;
    box-shadow: var(--shadow); max-width: 640px; margin: 30px auto;
}
.company-state-card h1 { margin: 0 0 12px; }

/* Callouts for status messages on apply form */
.callout {
    padding: 10px 14px; border-radius: 8px; margin: 8px 0;
    background: #eff6ff; color: #1e3a8a; border-right: 3px solid #2563eb;
}
.callout.warn   { background: #fffbeb; color: #92400e; border-right-color: #f59e0b; }
.callout.danger { background: #fef2f2; color: #991b1b; border-right-color: #dc2626; }

/* ============================================================
   Device-aware overrides driven by html.is-phone / .is-tablet / .is-desktop
   (set by server User-Agent + corrected client-side in base.html)
   ============================================================ */

/* On touch devices :hover and :focus-within stay "sticky" after a tap, so we
   disable them and drive the dropdown from a .open class set by main.js. */
html.has-touch .currency-dropdown:hover .currency-menu,
html.has-touch .currency-dropdown:focus-within .currency-menu {
    opacity: 0; visibility: hidden; transform: translateY(-4px);
}
html.has-touch .currency-dropdown.open .currency-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}

/* Bigger AI launcher on phones so it's easier to tap with a thumb */
html.is-phone .ai-toggle {
    width: 56px; height: 56px;
    padding: 0;
    border-radius: 50%;
    font-size: 1.55rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
html.is-phone .ai-toggle-label { display: none !important; }

/* On phones, "Call agent" tel: links get a sticky FAB style — quick contact */
html.is-phone .agent-phone-fab {
    position: fixed; bottom: 84px; right: 16px;
    background: var(--c-success); color: #fff;
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; box-shadow: var(--shadow-lg); z-index: 60;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Desktop-only niceties: hover lift on cards, keyboard-shortcut hints */
html.is-desktop .property-card:hover { transform: translateY(-2px); }
html.is-mobile  .property-card:hover { transform: none; }   /* no jiggle on tap */

/* Hide tooltips with "press X" on touch devices (no keyboard) */
html.is-mobile .kbd-hint { display: none; }

/* On phones, map controls + property gallery thumbs need more room */
html.is-phone .leaflet-control-zoom a { width: 38px !important; height: 38px !important; line-height: 38px !important; }
html.is-phone .gallery-thumbs { gap: 6px; }
html.is-phone .gallery-thumbs img { width: 64px; height: 50px; }

/* Tablets: hybrid — use desktop-ish nav layout but bigger tap zones */
html.is-tablet .btn, html.is-tablet a.nav-action { min-height: 44px; }
html.is-tablet .header-actions .btn-ghost span { display: inline; } /* keep labels */

/* ============================================================
   RAG search panel — natural-language map query.
   Floats over the map (top-left on desktop, full-width on phones).
   ============================================================ */
.rag-panel {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    padding: 14px 16px;
    width: 380px;
    max-width: calc(100% - 24px);
    z-index: 760;
    border: 1px solid #c4b5fd;
    border-right: 4px solid #7c3aed;
    font-size: 0.92rem;
    max-height: 85vh;
    overflow-y: auto;
}
.rag-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.rag-head h4 { margin: 0; color: #5b21b6; font-size: 1.02rem; }
.rag-close {
    background: none; border: 0; color: #6b7280;
    font-size: 1.1rem; cursor: pointer;
    padding: 2px 6px; border-radius: 4px;
}
.rag-close:hover { background: #f3f4f6; color: #1f2937; }
.rag-form {
    display: flex; gap: 6px; margin-bottom: 10px;
}
.rag-form input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.92rem;
    direction: rtl;
}
.rag-form input:focus {
    outline: none; border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, .15);
}
.rag-status {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(124, 58, 237, .08);
    color: #5b21b6;
    margin-bottom: 8px;
}
.rag-status.busy { animation: aiPulse 1.6s ease-in-out infinite; }
.rag-answer {
    background: linear-gradient(135deg, #faf5ff 0%, #eff6ff 100%);
    border-radius: 10px;
    padding: 10px 12px;
    color: #1f2937;
    line-height: 1.55;
    margin-bottom: 10px;
}
.rag-pins-list {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    max-height: 240px;
    overflow-y: auto;
}
.rag-pin-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s;
}
.rag-pin-row:hover { background: #f3e8ff; }
.rpr-rank {
    color: #fff;
    border-radius: 50%;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 0.82rem;
}
.rpr-name { font-weight: 700; color: #1f2937; }
.rpr-meta { font-size: 0.78rem; }
.rag-hint { margin-top: 4px; line-height: 1.5; }

/* Numbered pins drawn on the map */
.rag-pin > div {
    width: 28px; height: 28px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,.35);
}

html.is-phone .rag-panel {
    width: calc(100% - 24px);
    max-height: 70vh;
}

/* ============================================================
   Distance-measurement tool — floats over the map top-left.
   Three input modes work in any combination:
     - type both place names
     - type one + click the other on the map
     - click both points on the map
   ============================================================ */
.measure-panel {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    padding: 12px 14px;
    width: 320px;
    max-width: calc(100% - 24px);
    z-index: 750;
    font-size: 0.92rem;
    border: 1px solid #e5e7eb;
}
.measure-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.measure-head h4 { margin: 0; font-size: 1rem; color: #1f2937; }
.measure-close {
    background: none;
    border: 0;
    font-size: 1.15rem;
    cursor: pointer;
    color: #6b7280;
    padding: 2px 6px;
    border-radius: 4px;
}
.measure-close:hover { background: #f3f4f6; color: #1f2937; }
.measure-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.measure-tag {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.measure-tag.tag-a { background: #2563eb; }
.measure-tag.tag-b { background: #dc2626; }
.measure-row input {
    flex: 1;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    direction: rtl;
}
.measure-row input:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124, 58, 237, .15); }
.measure-pick {
    padding: 5px 9px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all .12s;
    flex-shrink: 0;
}
.measure-pick:hover { background: #e5e7eb; }
.measure-pick.picking {
    background: #7c3aed;
    color: #fff;
    border-color: #6d28d9;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .25);
}
.measure-status {
    font-size: 0.78rem;
    color: #6b7280;
    min-height: 16px;
    margin: 0 32px 8px;
    text-align: start;
}
.measure-status.ok    { color: #15803d; }
.measure-status.err   { color: #b91c1c; }
.measure-status.busy  { color: #6b7280; }
.measure-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
}
.measure-distance {
    font-weight: 800;
    color: #7c3aed;
    font-size: 1.2rem;
}
.measure-hint {
    margin-top: 8px;
    line-height: 1.45;
    color: #6b7280;
}
/* Pin icons drawn on the map */
.measure-pin {
    background: transparent;
    border: 0;
}
.measure-pin > div {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0,0,0,.35);
    border: 2px solid #fff;
}
.measure-pin.pin-a > div { background: #2563eb; }
.measure-pin.pin-b > div { background: #dc2626; }
/* When in "pick from map" mode, cursor turns into crosshair */
.darak-picking, .darak-picking .leaflet-grab { cursor: crosshair !important; }

/* On phones the panel takes a hair less width so it doesn't crowd the
   layer-toggle in the opposite corner. */
html.is-phone .measure-panel { width: calc(100% - 24px); }

/* ============================================================
   Device-cache panel — same floating-panel pattern as the
   measure tool. Shows cache size + lets user pre-download all
   layers for offline use.
   ============================================================ */
.cache-panel {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    padding: 14px 16px;
    width: 320px;
    max-width: calc(100% - 24px);
    z-index: 760;     /* one above measure-panel so it sits on top if both open */
    font-size: 0.92rem;
    border: 1px solid #e5e7eb;
}
.cache-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.cache-head h4 { margin: 0; font-size: 1rem; color: #1f2937; }
.cache-close {
    background: none;
    border: 0;
    font-size: 1.15rem;
    cursor: pointer;
    color: #6b7280;
    padding: 2px 6px;
    border-radius: 4px;
}
.cache-close:hover { background: #f3f4f6; color: #1f2937; }
.cache-stats {
    background: #f9fafb;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.cache-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.88rem;
    color: #4b5563;
}
.cache-val { font-weight: 800; color: #1f2937; }
.cache-progress { margin-bottom: 12px; }
.cache-progress-bar {
    height: 10px;
    background: #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}
.cache-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
    transition: width .2s ease-out;
}
.cache-progress-text {
    margin-top: 6px;
    font-size: 0.82rem;
    color: #6b7280;
    text-align: center;
}
.cache-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.cache-actions .btn { flex: 1; }
.cache-hint { line-height: 1.55; color: #6b7280; }

html.is-phone .cache-panel { width: calc(100% - 24px); }

/* ============================================================
   PWA install chip — small toast at bottom-center inviting the
   user to install Darak. Captured beforeinstallprompt only.
   ============================================================ */
.darak-install-chip {
    position: fixed;
    bottom: 16px;
    inset-inline-start: 50%;
    transform: translateX(50%);   /* RTL: shift back toward center */
    background: #fff;
    border: 1px solid #c4b5fd;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1500;
    max-width: 92%;
    width: 380px;
    animation: dicSlideUp .3s ease-out;
}
html[dir="rtl"] .darak-install-chip {
    transform: translateX(-50%);
}
.darak-install-chip .dic-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.darak-install-chip .dic-body strong {
    color: #1f2937;
    font-size: .95rem;
}
.darak-install-chip .dic-body small {
    color: #6b7280;
    font-size: .8rem;
    line-height: 1.35;
}
.darak-install-chip .dic-install {
    flex-shrink: 0;
    white-space: nowrap;
}
.darak-install-chip .dic-close {
    background: none;
    border: 0;
    font-size: 1rem;
    color: #9ca3af;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    align-self: flex-start;
}
.darak-install-chip .dic-close:hover { color: #1f2937; background: #f3f4f6; }
@keyframes dicSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
html.is-phone .darak-install-chip {
    width: calc(100% - 24px);
    bottom: 12px;
}

/* ============================================================
   Trust / verification badges — T6 (triple identity check) + T7
   (cadastral verification). Together they're the social-proof
   that separates Darak from classified-ad competitors.
   ============================================================ */
.verif-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: #ecfdf5;
    color: #065f46;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid #a7f3d0;
    line-height: 1.1;
    white-space: nowrap;
}
.verif-badge.verif-3 {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #34d399;
    color: #065f46;
}
.verif-badge.verif-2 { background: #fefce8; border-color: #fde047; color: #854d0e; }
.verif-badge.verif-1 { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.verif-badge .vb-tick { font-size: 0.85em; }
.verif-badge .vb-tick.vb-off { opacity: 0.25; filter: grayscale(1); }
.verif-badge .vb-text { font-weight: 800; margin-inline-start: 2px; }
.verif-badge .vb-text.vb-partial { color: #92400e; }
/* Compact pill — for tight spaces like property cards */
.verif-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.4;
    background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0;
}
.verif-pill.verif-3 { background: #34d399; color: #fff; border-color: #10b981; }
.verif-pill.verif-2 { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.verif-pill.verif-1 { background: #fed7aa; color: #9a3412; border-color: #fdba74; }

/* Cadastral verified badge — gold, with the temple icon */
.cadastral-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 800;
    border: 1px solid #f59e0b;
    line-height: 1.1;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(245, 158, 11, .25);
}
.cadastral-badge::before { content: "🏛"; font-size: 0.95em; }

/* Commute-time filter panel — same floating pattern as the measure tool */
.commute-panel {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    padding: 12px 14px;
    width: 300px;
    max-width: calc(100% - 24px);
    z-index: 740;
    font-size: 0.92rem;
    border: 1px solid #e5e7eb;
}
.commute-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.commute-head h4 { margin: 0; font-size: 1rem; color: #1f2937; }
.commute-close {
    background: none; border: 0; font-size: 1.15rem; cursor: pointer;
    color: #6b7280; padding: 2px 6px; border-radius: 4px;
}
.commute-close:hover { background: #f3f4f6; }
.commute-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.commute-pick.picking {
    background: #1B3A55 !important; color: #fff !important;
    border-color: #1B3A55 !important;
}
.commute-status { font-size: 0.82rem; color: #475569; }
.commute-time-row {
    display: flex; align-items: center; gap: 8px;
    margin: 8px 0; font-size: 0.9rem;
}
.commute-time-row select {
    padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 6px;
    flex: 1;
}
.commute-result {
    background: #eff6ff; color: #1e40af;
    padding: 6px 10px; border-radius: 8px;
    font-weight: 700; font-size: 0.92rem;
    text-align: center; margin: 4px 0;
}
.commute-actions { display: flex; gap: 6px; margin: 6px 0; }
.commute-pin > div {
    background: #1B3A55; color: #fff;
    border-radius: 50%;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 8px rgba(0,0,0,.35);
    border: 2px solid #fff;
}

/* Voice search button — pulsing red while recording */
.voice-btn { padding: 6px 10px !important; font-size: 1.1rem; }
.voice-btn.recording {
    background: #dc2626 !important;
    color: #fff !important;
    animation: voicePulse 1s ease-in-out infinite;
}
@keyframes voicePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .6); }
    50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

/* WhatsApp CTA — the brand green that every Arab user instantly trusts. */
.btn-whatsapp {
    background: #25D366;
    color: #fff !important;
    border: 1px solid #25D366;
    font-weight: 700;
    transition: background .15s ease;
}
.btn-whatsapp:hover {
    background: #1ebd5c;
    border-color: #1ebd5c;
    color: #fff !important;
}

/* ============================================================
   Compare bar — floats at bottom-center when 1-4 properties are
   selected for side-by-side comparison.
   ============================================================ */
.compare-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #1B3A55;
    color: #fff;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 1200;
    box-shadow: 0 -8px 20px rgba(0,0,0,.2);
    flex-wrap: wrap;
}
.cb-count strong {
    font-size: 1.3rem;
    color: #C8A55B;
    margin-inline-end: 4px;
}
.cb-chips {
    flex: 1; min-width: 0;
    display: flex; gap: 6px; flex-wrap: wrap;
}
.cb-chip {
    background: rgba(255,255,255,.12);
    border-radius: 999px;
    padding: 4px 4px 4px 10px;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.82rem;
    max-width: 200px;
}
.cb-chip > span:first-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cb-chip-x {
    background: rgba(255,255,255,.18);
    color: #fff;
    border: 0;
    width: 20px; height: 20px;
    border-radius: 50%;
    cursor: pointer; font-size: 0.7rem;
    display: flex; align-items: center; justify-content: center;
}
.cb-chip-x:hover { background: #dc2626; }
.cb-actions { display: flex; gap: 8px; flex-shrink: 0; }
#cb-go.disabled { pointer-events: none; opacity: 0.5; }

/* Per-card compare checkbox — small chip at top-corner */
.prop-compare-toggle {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    background: rgba(255,255,255,.92);
    border-radius: 999px;
    padding: 4px 10px;
    display: flex; align-items: center; gap: 4px;
    font-size: 0.78rem;
    cursor: pointer;
    user-select: none;
    z-index: 4;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    color: #1B3A55;
    font-weight: 700;
    transition: background .15s;
}
.prop-compare-toggle:hover { background: #fff; }
.prop-compare-toggle input { margin: 0; cursor: pointer; }
.prop-compare-toggle input:checked + span { color: #7c3aed; }
.property-card { position: relative; }   /* anchor for the toggle */
html.is-phone .compare-bar { padding: 8px 12px; }
html.is-phone .cb-chip { max-width: 120px; font-size: 0.75rem; }

/* AI price estimator on the new-listing form — soft amber card. */
.price-estimate {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #fefce8 0%, #fffbeb 100%);
    border: 1px solid #fde68a;
    border-right: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 8px 0 12px;
}
.price-estimate .pe-icon { font-size: 1.5rem; flex-shrink: 0; }
.price-estimate .pe-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.price-estimate .pe-body strong { color: #78350f; font-size: 0.92rem; }
.price-estimate .pe-range {
    font-size: 1.05rem; font-weight: 800; color: #92400e;
    display: flex; align-items: center; gap: 4px;
}
.price-estimate .pe-sep { color: #d97706; }
.price-estimate #pe-cur { font-weight: 600; color: #92400e; }
.price-estimate #pe-accept { white-space: nowrap; flex-shrink: 0; }

/* Ensure [hidden] always overrides display rules — used by various
   floating panels (RAG / measure / commute / candidates / etc.). */
[hidden] { display: none !important; }

/* =====================================================================
   MOBILE-FIRST PROFESSIONAL REDESIGN
   ---------------------------------------------------------------------
   Everything below applies ONLY on phones (html.is-phone). Desktop and
   tablet layouts are untouched. The strategy:

     1. STICKY BOTTOM NAV — universal 5-tab pattern
     2. BOTTOM-SHEET PANELS — measure/commute/RAG slide up
     3. FULL-VIEWPORT MAP — fills the available space minus header + nav
     4. COLLAPSIBLE SMART-BAR — only essentials visible at first
     5. LARGER TAP TARGETS — 44px min, generous spacing
     6. SINGLE-COLUMN CARDS — bigger images, less density
     7. SAFE-AREA INSETS — respect notch / home-bar on iOS
   ===================================================================== */

/* --- Hide bottom nav on desktop / tablet --- */
.mobile-bottom-nav { display: none; }

html.is-phone .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    z-index: 1400;
    /* iOS home indicator: respect safe-area */
    padding-bottom: env(safe-area-inset-bottom, 0);
    height: calc(64px + env(safe-area-inset-bottom, 0));
}
.mbn-tab {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 8px 4px;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
}
.mbn-tab:active { background: #f3f4f6; }
.mbn-tab.is-active { color: var(--c-accent, #C8A55B); }
.mbn-icon { font-size: 1.45rem; line-height: 1; }
.mbn-label { font-size: 0.7rem; }
/* Big plus CTA — Darak gold, lifted with a subtle shadow */
.mbn-tab-cta .mbn-icon-plus {
    background: var(--c-accent, #C8A55B);
    color: #fff;
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 4px 12px rgba(200, 165, 91, .45);
    margin-top: -22px;             /* lift above the bar */
}
.mbn-tab-cta .mbn-label { color: var(--c-accent); font-weight: 800; }

/* Push body content above the bottom nav so the footer/last items don't
   hide behind it. Adds breathing room equal to the nav height. */
html.is-phone body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)) !important;
}

/* --- Smart-bar mobile redesign --- */
html.is-phone .smart-bar {
    padding: 8px 0;
    /* Stickier — survives scroll on the home page */
    position: sticky; top: 0; z-index: 800;
}
html.is-phone .smart-bar-inner {
    gap: 6px;
    padding-inline: 10px;
}
html.is-phone .sb-search,
html.is-phone .sb-map-controls { width: 100%; }
html.is-phone .sb-search select,
html.is-phone .sb-search input[type="number"],
html.is-phone .sb-map-controls input[type="text"] {
    height: 40px;
    font-size: 0.95rem;
    min-width: 0;
}
html.is-phone .sb-search select { flex: 1; }
html.is-phone .sb-search input#sb-maxprice { flex: 1; width: auto; }
html.is-phone .sb-btn {
    height: 40px; padding: 8px 12px;
    font-size: 0.85rem;
}

/* Collapsible secondary buttons — hidden until "⋯ المزيد" tapped.
   We mark which buttons are "primary" (always visible) vs "secondary"
   (hidden until expanded) by ID + add a toggle. */
html.is-phone .sb-map-controls {
    flex-wrap: wrap;
    position: relative;
}
html.is-phone .sb-map-controls #map-measure-btn,
html.is-phone .sb-map-controls #map-commute-btn,
html.is-phone .sb-map-controls #map-reset-btn {
    /* Hide by default — revealed when .sb-more-open is on the controls */
    display: none;
}
html.is-phone .sb-map-controls.sb-more-open #map-measure-btn,
html.is-phone .sb-map-controls.sb-more-open #map-commute-btn,
html.is-phone .sb-map-controls.sb-more-open #map-reset-btn {
    display: inline-flex;
}
html.is-phone .sb-more-toggle {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2rem;
    color: #475569;
}
.sb-more-toggle { display: none; }   /* hidden on desktop */

/* --- Map fills available viewport on phones — ONLY when map view is
       active. In grid mode the wrap MUST collapse to its content height
       (cards) instead of stealing the whole viewport. The :has() selector
       reacts automatically to the toggle flipping #results-map[hidden]. --- */
html.is-phone .home-map-section { padding: 0; }
html.is-phone .home-map-wrap { position: relative; }
html.is-phone .home-map-wrap:has(#results-map:not([hidden])) {
    height: calc(100vh - 220px - env(safe-area-inset-bottom, 0));
    min-height: 320px;
}
html.is-phone .results-map.home-map { height: 100% !important; }
html.is-phone .map-area-list {
    /* Side panel becomes a slide-up sheet bottom-anchored */
    position: absolute !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-height: 50vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(0);
    box-shadow: 0 -8px 24px rgba(0,0,0,.15);
}

/* --- Bottom-sheet pattern for floating panels (measure/commute/RAG) --- */
html.is-phone .measure-panel,
html.is-phone .commute-panel,
html.is-phone .rag-panel {
    position: fixed;
    inset-inline-start: 0;
    bottom: calc(64px + env(safe-area-inset-bottom, 0));   /* above bottom nav */
    top: auto;
    left: 0; right: 0;
    width: 100%;
    max-width: 100%;
    max-height: 70vh;
    border-radius: 16px 16px 0 0;
    margin: 0;
    box-shadow: 0 -10px 28px rgba(0,0,0,.22);
    z-index: 1500;
    transform: translateY(0);
    animation: sheetSlideUp .25s ease-out;
}
@keyframes sheetSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
/* Add a "drag handle" indicator at the top of mobile sheets */
html.is-phone .measure-panel::before,
html.is-phone .commute-panel::before,
html.is-phone .rag-panel::before {
    content: "";
    display: block;
    width: 44px; height: 4px;
    background: #cbd5e1;
    border-radius: 2px;
    margin: 4px auto 8px;
}

/* --- Header tightens on phones --- */
html.is-phone .site-header {
    padding: 6px 10px;
}
html.is-phone .nav-action {
    padding: 6px 10px;
    font-size: 0.82rem;
}
html.is-phone .nav-action span:not(.nav-action-emoji) {
    /* Compact: emoji only for the buy/rent/sell shortcuts */
    display: none;
}

/* --- Single-column property cards on phones --- */
html.is-phone .property-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
}
html.is-phone .property-card {
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
html.is-phone .property-image img,
html.is-phone .property-image .image-placeholder {
    height: 220px;
    object-fit: cover;
}
html.is-phone .property-body { padding: 12px; }
html.is-phone .property-title { font-size: 1.05rem; line-height: 1.4; }
html.is-phone .price { font-size: 1.3rem !important; }

/* --- Touch-friendly forms --- */
html.is-phone input, html.is-phone select, html.is-phone textarea {
    font-size: 16px;     /* prevents iOS zoom on focus */
    min-height: 44px;
}
html.is-phone textarea { min-height: 110px; }
html.is-phone .btn { min-height: 44px; padding: 10px 16px; }
html.is-phone .btn-sm { min-height: 36px; padding: 6px 12px; }

/* --- Mobile-friendly tables → card-like rows on small screens --- */
html.is-phone .cmp-table { font-size: 0.9rem; }
html.is-phone .cmp-table th { width: auto; padding: 6px 8px; }

/* --- Hide secondary chrome (FX bar, tip floaters) on phones to declutter --- */
html.is-phone .fx-bar { font-size: 0.78rem; padding: 4px 0; }
html.is-phone .fx-only-wide { display: none; }
html.is-phone .has-tip[data-tip]::after,
html.is-phone .has-tip[data-tip]::before { display: none; }
/* Phones don't have hover — tip floaters add no value, just visual noise */

/* --- Floating Action Button slot for the home page (top-right of map) --- */
html.is-phone .map-fab {
    position: absolute;
    bottom: 16px;
    inset-inline-end: 16px;
    z-index: 700;
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 0;
    background: var(--c-accent, #C8A55B);
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    cursor: pointer;
}

/* Generic mobile fix: long button text gets ellipsis instead of wrapping */
html.is-phone .nav-action,
html.is-phone .sb-btn,
html.is-phone .mbn-label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* ============================================================
   📱 MOBILE UX POLISH v2 — denser, smaller, more practical
   Goal: more content per screen + smaller tap chrome without
   sacrificing the 40px+ touch target floor.
   ============================================================ */

/* --- Compact button sizes on phone (still tappable, less bulk) --- */
html.is-phone .btn          { min-height: 40px; padding: 8px 14px; font-size: .92rem; }
html.is-phone .btn-sm       { min-height: 32px; padding: 5px 10px; font-size: .82rem; }
html.is-phone .btn-lg       { min-height: 46px; padding: 10px 18px; font-size: 1rem; }
html.is-phone .btn-block    { padding: 10px 14px; }

/* --- Smart-bar buttons: tighter padding + smaller chip-like feel --- */
html.is-phone .sb-btn {
    min-height: 38px;
    padding: 6px 10px;
    font-size: .85rem;
    border-radius: 8px;
}
html.is-phone .smart-bar select,
html.is-phone .smart-bar input[type="number"],
html.is-phone .smart-bar input[type="text"] {
    min-height: 40px;
    font-size: .92rem;
}

/* --- Property card: tighter for more cards per scroll --- */
html.is-phone .property-image img,
html.is-phone .property-image .image-placeholder {
    height: 180px;
}
html.is-phone .property-body         { padding: 10px 12px 12px; }
html.is-phone .property-title        { font-size: 1rem; line-height: 1.35; margin: 4px 0 6px; }
html.is-phone .price                 { font-size: 1.2rem !important; margin: 0 0 4px; }
html.is-phone .price-per-m2          { font-size: .78rem; }
html.is-phone .property-location     { font-size: .82rem; margin-top: 4px; }
html.is-phone .property-specs        { font-size: .82rem; gap: 8px; }
html.is-phone .property-specs span   { padding: 2px 0; }
html.is-phone .prop-stats-row        { gap: 6px; font-size: .76rem; margin-top: 6px; }
html.is-phone .ps-pill               { padding: 2px 7px; }

/* --- Star + compare chips tighter on phone --- */
html.is-phone .interest-btn {
    width: 34px; height: 34px;
    font-size: 1.1rem;
}
html.is-phone .prop-compare-toggle {
    padding: 3px 7px;
    font-size: .72rem;
}

/* --- Top header: tighter padding, smaller logo --- */
html.is-phone .site-header   { padding: 4px 8px; }
html.is-phone .brand,
html.is-phone .brand-text    { font-size: 1.05rem; }
html.is-phone .brand-logo    { width: 32px; height: 32px; }

/* --- Welcome strip + section heads: denser --- */
html.is-phone .welcome-strip { padding: 6px 12px; font-size: .85rem; gap: 6px; }
html.is-phone .section-head h2,
html.is-phone .container h2  { font-size: 1.1rem; margin: 14px 0 8px; }
html.is-phone .section       { padding: 10px 0 14px; }

/* --- City grid: 3 columns of compact chips on phone (was 2) --- */
html.is-phone .city-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px;
}
html.is-phone .city-card {
    padding: 10px 4px;
    font-size: .82rem;
    border-radius: 10px;
}

/* --- Hide the property-grid gap a bit (denser stack) --- */
html.is-phone .property-grid { gap: 12px; }

/* --- Map area-list (when visible on mobile) uses bottom sheet pattern --- */
html.is-phone .map-area-list {
    border-radius: 14px 14px 0 0;
    max-height: 60vh;
}

/* --- The home-view-toggle is the primary scene switcher: make it stand out --- */
html.is-phone #home-view-toggle {
    background: #fff;
    color: var(--c-primary);
    border: 2px solid var(--c-primary);
    font-weight: 700;
}

/* --- Bottom-nav tabs: slightly smaller icons for breathing room --- */
html.is-phone .mbn-icon  { font-size: 1.25rem; }
html.is-phone .mbn-label { font-size: .68rem; margin-top: 2px; }

/* ============================================================
   Share-a-point — popup + modal that fires on right-click /
   long-press of any map point.
   ============================================================ */
.share-pin > div {
    width: 32px; height: 32px;
    background: var(--c-accent, #C8A55B);
    color: #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,.35);
    font-size: 1rem;
}
.share-pin > div::before { transform: rotate(45deg); }
.share-pin-incoming > div {
    background: #dc2626;
    width: 40px; height: 40px;
    font-size: 1.2rem;
    animation: sharePulse 1.4s ease-in-out infinite;
}
@keyframes sharePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .6); }
    50%      { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); }
}

/* Floating "My location" FAB anchored to the bottom-right of the map.
   Standard placement in any map app (Google Maps, Apple Maps, Leaflet
   examples) so users find it instantly. RTL-safe: uses physical `right`
   (NOT `inset-inline-end` which flips to LEFT in RTL and would clash with
   Leaflet's attribution + zoom controls). */
.map-fab {
    position: absolute;
    bottom: 22px;
    right: 18px;
    left: auto;
    z-index: 600;
    background: #fff;
    color: #1B3A55;
    border: 1px solid rgba(27, 58, 85, 0.12);
    border-radius: 28px;                /* pill */
    padding: 9px 16px 9px 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1;
    transition: transform .12s, box-shadow .15s, background .15s;
}
.map-fab:hover {
    background: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.map-fab:active { transform: scale(.96); box-shadow: 0 2px 8px rgba(0,0,0,.20); }
.map-fab:disabled { opacity: 0.7; cursor: wait; }
.map-fab .fab-icon { font-size: 1.1rem; }
.map-fab .fab-label { font-weight: 700; }

/* "My location" flavour — blue accent on hover to echo the blue pin */
.map-fab-mylocation:hover {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #93c5fd;
}

/* "Measure" flavour — amber accent so the three FABs are visually
   distinct from each other. Sits BETWEEN موقعي and الطريق in the stack. */
.map-fab-measure:hover {
    background: #fffbeb;
    color: #b45309;
    border-color: #fcd34d;
}

/* "Route" flavour — purple/indigo accent to top off the stack. */
.map-fab-route:hover {
    background: #eef2ff;
    color: #4338ca;
    border-color: #a5b4fc;
}

/* Icon-only FAB variant — perfect circle, no label. Stacked vertically
   at the bottom-right of the map. The stacking is done with `bottom`
   offsets so the bottom-most FAB (موقعي) sits closest to the corner. */
.map-fab-icon {
    width: 46px; height: 46px;
    min-width: 46px;
    padding: 0;
    border-radius: 50%;
    font-size: 1.35rem;
    line-height: 1;
    /* override the default pill padding inherited from .map-fab */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.map-fab-mylocation.map-fab-icon { bottom: 22px;  }  /* bottom of stack */
.map-fab-measure.map-fab-icon    { bottom: 78px;  }  /* middle */
.map-fab-route.map-fab-icon      { bottom: 134px; }  /* top of stack */

/* Phone offsets — sit a bit higher to clear the bottom-nav and stack
   closer together to save vertical space. */
html.is-phone .map-fab-mylocation.map-fab-icon { bottom: 14px;  }
html.is-phone .map-fab-measure.map-fab-icon    { bottom: 66px;  }
html.is-phone .map-fab-route.map-fab-icon      { bottom: 118px; }

/* ============================================================
   Smart routing-agent panel
   ============================================================ */
.route-panel {
    position: absolute;
    top: 12px;
    left: 12px;             /* physical LEFT (no inset-inline flipping) */
    right: auto;
    z-index: 650;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    padding: 12px;
    direction: rtl;
    animation: routeSlideIn .25s cubic-bezier(.22, 1, .36, 1);
}
@keyframes routeSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.route-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}
.route-head h4 {
    margin: 0; font-size: 1rem; font-weight: 800;
    color: #1B3A55;
}
.route-close {
    background: transparent; border: 0;
    font-size: 1.1rem; cursor: pointer;
    color: #6b7280; padding: 2px 6px; border-radius: 6px;
}
.route-close:hover { background: #f3f4f6; color: #111827; }

/* Quick shortcut buttons — bold "start/end at my location" CTAs at the
   very top of the panel so the most common patterns are 1-click. */
.route-quick {
    display: flex; gap: 6px;
    margin-bottom: 8px;
}
.route-quick-btn {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #c4b5fd;
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    color: #4338ca;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    text-align: center;
    transition: transform .12s, box-shadow .15s, background .15s;
}
.route-quick-btn:hover {
    background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
    box-shadow: 0 3px 10px rgba(99, 102, 241, .25);
    transform: translateY(-1px);
}
.route-quick-btn:active { transform: scale(.97); }

/* Kind chips — purely informational row showing every targetable type.
   Helps users discover that they can enter a property, neighborhood,
   street, village, governorate, or service. */
.route-kinds-hint {
    display: flex; flex-wrap: wrap; gap: 3px;
    margin-bottom: 10px;
    padding: 6px 8px;
    background: #f9fafb;
    border-radius: 7px;
    font-size: .72rem;
    color: #475569;
    align-items: center;
}
.route-kinds-hint .rk-label {
    color: #6b7280;
    margin-inline-end: 2px;
    font-weight: 700;
}
.route-kinds-hint .rk-chip {
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 1px 7px;
    border-radius: 999px;
    white-space: nowrap;
    font-weight: 600;
}

.route-row {
    display: grid;
    /* 24px tag | flexible input | 3 × 30px action buttons (🏠 🎯 📍) */
    grid-template-columns: 22px 1fr 30px 30px 30px;
    gap: 4px; align-items: center;
    margin-bottom: 4px;
}
/* Input wrapper so the autocomplete dropdown anchors to the input width */
.route-input-wrap { position: relative; min-width: 0; }
.route-input-wrap input { width: 100%; }
/* Autocomplete dropdown — appears below an input as user types ≥2 chars.
   Click a row → slot is filled. Closes on blur, Esc, or selection. */
.route-suggest {
    position: absolute;
    top: calc(100% + 2px);
    left: 0; right: 0;
    margin: 0; padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    z-index: 700;
    max-height: 240px;
    overflow-y: auto;
}
.route-suggest .rsg-item {
    display: flex; gap: 8px; align-items: center;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .1s;
}
.route-suggest .rsg-item:hover { background: #f3f4f6; }
.route-suggest .rsg-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
    width: 22px; text-align: center;
}
.route-suggest .rsg-body {
    display: flex; flex-direction: column;
    min-width: 0; line-height: 1.3;
}
.route-suggest .rsg-name {
    font-weight: 700; color: #111827;
    font-size: .88rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.route-suggest .rsg-meta {
    font-size: .72rem; color: #6b7280;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.route-tag {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    font-weight: 800; font-size: .78rem;
    color: #fff;
}
.route-tag.tag-a { background: #16a34a; }
.route-tag.tag-b { background: #dc2626; }
.route-panel input[type="text"] {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font-family: inherit; font-size: .88rem;
    background: #fff;
}
.route-panel input[type="text"]:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}
.route-pick, .route-here, .route-prop {
    width: 30px; height: 30px;
    border: 1px solid #e5e7eb; background: #f8fafc;
    border-radius: 7px; cursor: pointer;
    font-size: .95rem; line-height: 1;
    padding: 0;
    transition: background .12s, border-color .12s, transform .1s;
}
.route-pick:hover { background: #ede9fe; border-color: #c4b5fd; }
.route-here:hover { background: #dbeafe; border-color: #93c5fd; }
.route-prop:hover { background: #fef3c7; border-color: #fcd34d; }
.route-pick:active, .route-here:active, .route-prop:active { transform: scale(.94); }

/* While picking a property, give the property markers a gentle pulse
   so the user knows they're the click targets (vs. picking a free point
   anywhere on the map). */
.route-picking-property .leaflet-grab,
.route-picking-property .leaflet-interactive {
    cursor: pointer !important;
}
.route-picking-property .darak-pin {
    animation: routePropPulse 1.2s ease-in-out infinite;
    z-index: 700 !important;
}
@keyframes routePropPulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(245, 158, 11, 0)); }
    50%      { filter: drop-shadow(0 0 8px rgba(245, 158, 11, .9)); }
}
.route-status {
    font-size: .78rem;
    color: #6b7280;
    margin: 0 30px 6px;
    min-height: 1em;
}
.route-status.err  { color: #b91c1c; }
.route-status.ok   { color: #15803d; }
.route-status.busy { color: #6366f1; font-style: italic; }

.route-mode-row {
    display: flex; gap: 4px;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 3px;
    margin: 8px 0 10px;
}
.route-mode {
    flex: 1;
    text-align: center;
    cursor: pointer;
    padding: 5px 4px;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 600;
    color: #374151;
    transition: background .12s, color .12s;
}
.route-mode input { position: absolute; opacity: 0; pointer-events: none; }
.route-mode:has(input:checked) {
    background: #1B3A55;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

.route-actions {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 8px;
}
.route-actions .btn { flex: 1; min-width: 0; }
#route-go-btn { flex: 2; font-weight: 700; }

.route-result { margin-top: 8px; }
.route-numbers {
    display: flex; gap: 14px;
    background: #f0f9ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    font-weight: 700;
    color: #1e40af;
}
.route-num { display: inline-flex; align-items: center; gap: 5px; }
.route-num .rn-icon { font-size: 1rem; }
.route-narrative {
    background: #fefce8;
    border-inline-start: 3px solid #eab308;
    padding: 8px 11px;
    border-radius: 6px;
    font-size: .88rem;
    line-height: 1.6;
    color: #422006;
    margin-bottom: 8px;
}
.route-steps-details summary {
    cursor: pointer;
    padding: 5px 0;
    font-weight: 600;
    color: #1B3A55;
    font-size: .85rem;
}
.route-steps {
    margin: 6px 0 0;
    padding-inline-start: 22px;
    max-height: 180px;
    overflow-y: auto;
    font-size: .82rem;
    line-height: 1.7;
    color: #374151;
}
.route-steps li { margin-bottom: 3px; }
.route-steps .step-meta { color: #9ca3af; font-size: .76rem; }

.route-error {
    background: #fee2e2;
    color: #991b1b;
    padding: 7px 10px;
    border-radius: 6px;
    margin-top: 6px;
    font-weight: 600;
}
.route-hint { margin-top: 8px; }

/* While picking a point on the map, the cursor becomes a crosshair so the
   user knows their next click will set the slot — not a regular map click. */
.route-picking .leaflet-grab,
.route-picking .leaflet-interactive {
    cursor: crosshair !important;
}

/* Endpoint markers for the route — green A, red B circles */
.route-endpoint > div {
    width: 28px; height: 28px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
    font-size: .85rem;
}

/* Mobile: panel becomes a slide-up sheet from the top */
html.is-phone .route-panel {
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
}

/* On phones, push the FAB up a bit so it clears the bottom nav */
html.is-phone .map-fab {
    bottom: 14px;
    right: 14px;
    padding: 11px 18px 11px 16px;
    font-size: 0.95rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* "أنت هنا" — distinct blue pulsing pin (different colour than the
   share-a-point pin so the user always tells them apart). */
.my-location-pin > div {
    width: 36px; height: 36px;
    background: #2563eb;
    color: #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 3px 10px rgba(37, 99, 235, .55);
    font-size: 1.05rem;
    animation: myLocPulse 1.6s ease-in-out infinite;
}
.my-location-pin > div::before { transform: rotate(45deg); }
@keyframes myLocPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .55); }
    50%      { box-shadow: 0 0 0 14px rgba(37, 99, 235, 0); }
}

/* Tiny floating toast over the map — used by the my-location button when
   permission is denied / unavailable / times out. Stacks vertically. */
.map-toast-host {
    position: absolute;
    top: 14px; left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    pointer-events: none;
    display: flex; flex-direction: column; gap: 6px;
    align-items: center;
}
.map-toast {
    background: rgba(17, 24, 39, 0.92);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease;
    max-width: 92vw;
    text-align: center;
    direction: rtl;
}
.map-toast.show { opacity: 1; transform: translateY(0); }
.map-toast-err  { background: rgba(153, 27, 27, 0.95); }
.map-toast-info { background: rgba(30, 58, 85, 0.95); }
.share-popup .sp-title {
    font-weight: 800;
    color: #1B3A55;
    margin-bottom: 4px;
    line-height: 1.4;
}
.share-popup .sp-coords {
    color: #6b7280;
    font-size: 0.78rem;
    direction: ltr; text-align: end;
    margin-bottom: 8px;
}
.share-popup .sp-status {
    color: #6b7280;
    font-style: italic;
    padding: 6px 0;
}
/* New compact layout: three icon-only buttons on top row (📋 🔗 💬),
   "send to user" pill below as a full-width row. */
.share-popup .sp-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.share-popup .sp-actions-row {
    display: flex;
    gap: 6px;
    justify-content: flex-start;
}
.share-popup .sp-act {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1f2937;
    cursor: pointer;
    transition: background .12s, transform .1s, color .12s, border-color .12s;
    text-align: center;
    font-family: inherit;
}
.share-popup .sp-act:hover { background: #e5e7eb; }
.share-popup .sp-act:active { transform: scale(.96); }
/* Icon-only variant — tight square button used for 📋 🔗 💬. The text
   label lives in `title` + `aria-label`. */
.share-popup .sp-icon {
    width: 42px; height: 42px;
    min-width: 42px;
    padding: 0;
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
/* Copy-success flash — when user clicks 📋 or 🔗, the icon swaps to ✓
   and the button briefly turns green so they see the action took. */
.share-popup .sp-icon.sp-icon-ok {
    background: #16a34a !important;
    color: #fff !important;
    border-color: #16a34a !important;
}
.share-popup .sp-wa {
    background: #25D366; color: #fff; border-color: #25D366;
}
.share-popup .sp-wa:hover { background: #1ebd5c; border-color: #1ebd5c; }
/* Full-width "send to user" pill below the icon row */
.share-popup .sp-send-user,
.share-popup .sp-act[data-act="send-user"] {
    background: #1B3A55; color: #fff; border-color: #1B3A55;
    padding: 9px 12px;
}
.share-popup .sp-send-user:hover,
.share-popup .sp-act[data-act="send-user"]:hover {
    background: #2c5378; border-color: #2c5378;
}

/* Modal — full-screen overlay with a centered sheet */
.share-modal {
    position: fixed; inset: 0;
    z-index: 2000;
    display: none;
    align-items: center; justify-content: center;
    pointer-events: none;
}
.share-modal.open { display: flex; pointer-events: auto; }
.share-modal .sm-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    animation: smFadeIn .2s ease-out;
}
.share-modal .sm-sheet {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 16px 18px 18px;
    width: 92%;
    max-width: 440px;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    animation: smSlideUp .25s cubic-bezier(.22, 1, .36, 1);
}
@keyframes smFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes smSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.share-modal .sm-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.share-modal .sm-head h3 { margin: 0; color: #1B3A55; font-size: 1.05rem; }
.share-modal .sm-close {
    background: #f3f4f6; border: 0; width: 32px; height: 32px;
    border-radius: 50%; cursor: pointer; font-size: 0.95rem;
    color: #475569;
}
.share-modal .sm-info {
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-right: 3px solid var(--c-accent, #C8A55B);
}
.share-modal .sm-addr { font-weight: 700; color: #1f2937; line-height: 1.45; }
.share-modal .sm-coords { direction: ltr; text-align: end; margin-top: 2px; }
.share-modal .sm-form label {
    display: block; margin-bottom: 10px;
    font-size: 0.88rem; color: #475569;
}
.share-modal .sm-form input,
.share-modal .sm-form textarea {
    width: 100%;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: inherit;
}
.share-modal .sm-form input:focus,
.share-modal .sm-form textarea:focus {
    outline: none;
    border-color: var(--c-accent, #C8A55B);
}
.share-modal .sm-actions {
    display: flex; gap: 8px;
}
.share-modal .sm-actions .btn { flex: 1; }
.share-modal .sm-status {
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 8px;
}
.share-modal .sm-status.ok  { background: #dcfce7; color: #166534; }
.share-modal .sm-status.err { background: #fee2e2; color: #b91c1c; }
html.is-phone .share-modal .sm-sheet { width: calc(100% - 24px); }

/* Contacts autocomplete dropdown for the share-location modal */
.share-modal .sm-recipient-wrap { position: relative; }
.share-modal .sm-suggest {
    position: absolute;
    top: calc(100% + 4px); left: 0; right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    max-height: 260px;
    overflow-y: auto;
    z-index: 2100;
    margin: 0; padding: 4px;
    list-style: none;
}
.share-modal .sm-suggest-item {
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: background .12s;
}
.share-modal .sm-suggest-item:hover { background: #f3f4f6; }
.share-modal .sm-sg-name {
    font-weight: 700; color: #1B3A55; font-size: .92rem;
}
.share-modal .sm-sg-meta { color: #6b7280; font-size: .76rem; }
.share-modal .sm-sg-tag {
    display: inline-block;
    background: #1B3A55; color: #fff;
    font-size: .68rem; font-weight: 700;
    padding: 1px 6px; border-radius: 999px;
    margin-inline-start: 4px;
}

/* Selected-contact chip (replaces input once a contact is picked) */
.share-modal .sm-selected-chip {
    display: flex; align-items: center; gap: 8px;
    background: #ecfdf5;
    border: 1px solid #86efac;
    border-radius: 10px;
    padding: 8px 10px;
    margin-top: 4px;
}
.share-modal .sm-sel-name {
    flex: 1; color: #065f46; font-weight: 700; font-size: .92rem;
}
.share-modal .sm-sel-clear {
    background: transparent; border: 0; cursor: pointer;
    color: #065f46; font-size: 1rem; padding: 2px 8px;
    border-radius: 6px;
}
.share-modal .sm-sel-clear:hover { background: #d1fae5; }

/* ============================================================
   Global back button — appears in base.html on every non-home page.
   FIXED to the physical LEFT edge of the viewport, below the header,
   so it doesn't claim a full row in the page flow. Uses the existing
   data-back-btn click hijack: history.back() when previous page was
   on darak, else falls back to href="/" (home).
   ============================================================ */
.global-back-wrap {
    /* Zero-height container — no padding, no flex row, doesn't push
       page content down. The button inside is position:fixed so it
       floats over whatever is below. */
    height: 0;
    padding: 0;
    margin: 0;
    position: relative;
}
.global-back-btn {
    position: fixed;
    top: 70px;                      /* below the sticky header */
    left: 16px;                     /* physical LEFT — opposite of brand logo */
    z-index: 120;                   /* above content, below modal/overlay */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(27, 58, 85, 0.15);
    color: #1B3A55;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
    transition: transform .12s, box-shadow .15s, background .15s, color .15s;
}
.global-back-btn:hover {
    background: linear-gradient(135deg, #C8A55B 0%, #b89149 100%);
    color: #1B3A55;
    border-color: #C8A55B;
    transform: translateX(-2px);    /* drift left toward the arrow */
    box-shadow: 0 4px 12px rgba(200, 165, 91, .35);
    text-decoration: none;
}
.global-back-btn:active { transform: scale(.97); }
.global-back-btn .gb-arrow { font-size: 1.05rem; line-height: 1; }
/* Phone — slightly higher anchor since the mobile header is taller and
   the bottom-nav is at the other edge. Touch target ≥ 40px. */
html.is-phone .global-back-btn {
    top: 60px;
    left: 12px;
    padding: 8px 14px;
    font-size: .9rem;
    min-height: 40px;
    min-width: 40px;
}

/* ============================================================
   Back-bar — used above + below long detail pages (property_detail).
   The TOP one is fixed-floating on the physical LEFT (matches the
   global back button pattern, no dedicated row). The BOTTOM one is
   a normal-flow pill centered after the page content.
   ============================================================ */
.back-bar {
    display: flex;
    margin: 12px 0;
}
.back-bar-top {
    /* Float at top-left of the viewport — same anchor as .global-back-btn,
       but with a sticky pill style so it remains accessible while
       scrolling through the long property page. Zero-height container
       keeps the page layout untouched. */
    position: fixed;
    top: 70px;
    left: 16px;
    z-index: 90;
    margin: 0;
    padding: 0;
    background: transparent;
    width: auto;
}
.back-bar-bottom { justify-content: center; margin: 24px 0 12px; }
.back-bar .back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .12s, box-shadow .15s;
}
.back-bar-top .back-btn {
    /* Bold, unmistakable button — navy gradient on white sticky bar so the
       user spots "← العودة" instantly. */
    background: linear-gradient(135deg, var(--c-primary, #1B3A55) 0%,
                                          var(--c-primary-soft, #2c5378) 100%);
    color: #fff !important;
    border: 1px solid var(--c-primary, #1B3A55);
    box-shadow: 0 3px 10px rgba(27, 58, 85, .22);
    font-weight: 700;
    padding: 8px 16px;
}
.back-bar-top .back-btn:hover {
    background: linear-gradient(135deg, var(--c-accent, #C8A55B) 0%, #b89149 100%);
    color: #1B3A55 !important;
    border-color: var(--c-accent, #C8A55B);
    /* The button now lives on the physical LEFT — drift LEFT toward
       the ← arrow on hover (was +2px when it was on the right side). */
    transform: translateX(-2px);
}
.back-bar-top .back-btn:active { transform: scale(.97); }
.back-bar-bottom .back-btn {
    min-width: 260px;
    box-shadow: 0 4px 14px rgba(27, 58, 85, .25);
}
.back-bar-bottom .back-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(27, 58, 85, .35);
}
.back-bar-bottom .back-btn:active {
    transform: scale(.98);
    box-shadow: 0 2px 6px rgba(27, 58, 85, .25);
}
/* On mobile both bars become full-width chunky pills */
html.is-phone .back-bar { margin: 10px 0; }
html.is-phone .back-bar .back-btn {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
}

/* =====================================================================
   MOBILE SHEET — collapse smart-bar to a single pill + slide-up sheet.
   On phones the bar (~224px tall) is replaced by a single 52px pill at
   the top + a bottom sheet that appears on demand.
   ===================================================================== */

/* Desktop: hide all the mobile-only pieces */
.sb-mobile-trigger { display: none; }
.sb-mobile-backdrop { display: none; }
.sb-sheet-head { display: none; }

html.is-phone .smart-bar {
    background: var(--c-primary);
    padding: 0;
    border-bottom: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
/* ───────────────────────────────────────────────────────────────
   📱 INLINE MOBILE SMART-BAR — no more "filters" button + sheet.
   Everything users need is visible up-front; sliding modals are
   ceremony, not function. The bar sits sticky right under the header.
   ─────────────────────────────────────────────────────────────── */
html.is-phone .sb-mobile-trigger,
html.is-phone .sb-mobile-backdrop,
html.is-phone .sb-sheet-head {
    display: none !important;        /* kill the old sheet pattern */
}
html.is-phone .smart-bar > .container.smart-bar-inner {
    /* Plain inline container — no more position:fixed sheet. */
    position: static !important;
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px 10px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
    max-height: none;
    overflow: visible;
}
/* The form is the primary filter row: city + type + price on one line */
html.is-phone .smart-bar .sb-search {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
}
html.is-phone .smart-bar .sb-search > select,
html.is-phone .smart-bar .sb-search > input {
    flex: 1 1 auto;
    min-width: 0;             /* allow shrinking to fit row */
    height: 38px;
    min-height: 38px;
    font-size: .88rem;
    padding: 0 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--c-border, #e5e7eb);
}
html.is-phone .smart-bar .sb-search > input#sb-maxprice {
    flex: 0 0 90px;            /* price is narrow */
    text-align: center;
}
/* Second row: address-search input + listing-type + view-toggle, no wrap.
   `flex-wrap: wrap` was creating overlap because absolute children dropped
   below their siblings without pushing them. Now everything is `flex-shrink`
   ordered: input shrinks first, icon buttons keep their size. */
html.is-phone .smart-bar #map-controls {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    align-items: center;
    margin: 0;
}
html.is-phone .smart-bar #map-controls > * { margin: 0; }
html.is-phone .smart-bar #map-controls > input#map-addr-search {
    flex: 1 1 0;
    min-width: 80px;
    height: 38px;
    font-size: .88rem;
    padding: 0 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--c-border, #e5e7eb);
}
html.is-phone .smart-bar #map-controls > .sb-btn {
    flex: 0 0 auto;
    height: 38px;
    min-height: 38px;
    padding: 0 10px;
    font-size: .82rem;
    border-radius: 10px;
    white-space: nowrap;
}
/* Hide the secondary "عنوان 🔍" button on mobile — the input
   auto-filters as the user types (see runMapAddressSearch in main.js),
   so the button is redundant chrome that crowds the row. */
html.is-phone .smart-bar #map-addr-btn { display: none !important; }
/* Make the view-toggle (📋/🗺) icon-only on mobile — the user already
   knows which view they're in; the next-state preview is enough. */
html.is-phone .smart-bar #home-view-toggle {
    min-width: 44px;
    padding: 0 8px;
    font-size: 1rem;
    line-height: 1;
}
/* Listing-type pill (🔑 للإيجار / 🏠 للبيع): chip-shaped, stand out as the
   primary segmenter. Override the floating-fixed positioning further
   down (line ~9141) that was designed for the map-top-right overlay
   — now that the button is inline in the smart-bar we want normal
   flex flow. */
html.is-phone .smart-bar #map-listingtype-btn {
    position: static !important;
    top: auto !important;
    inset-inline-end: auto !important;
    inset-inline-start: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    background: var(--c-accent, #C8A55B) !important;
    color: #1B3A55 !important;
    border: 0 !important;
    min-width: 84px;
    padding: 0 12px;
    height: 38px;
    min-height: 38px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
}
/* Hide secondary "more" toggles + any empty trailing button — everything is on screen */
html.is-phone .smart-bar .sb-more-toggle { display: none !important; }
html.is-phone .smart-bar #map-controls > button:empty { display: none !important; }

/* The compact trigger pill — single line, always visible, top of screen */
html.is-phone .sb-mobile-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: var(--c-primary);
    color: #fff;
    border: 0;
    text-align: start;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    min-height: 52px;
    transition: background .15s;
}
html.is-phone .sb-mobile-trigger:active {
    background: var(--c-primary-soft, #2c4d6e);
}
.sbm-icon { font-size: 1.15rem; flex-shrink: 0; }
.sbm-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    opacity: 0.95;
}
.sbm-chevron {
    opacity: 0.7;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Backdrop overlay shown behind the sheet */
html.is-phone .sb-mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease-out;
    z-index: 1550;
}
html.is-phone .smart-bar.sheet-open ~ .sb-mobile-backdrop,
html.is-phone .sb-mobile-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

/* Sheet header inside the smart-bar-inner — only shows on mobile */
html.is-phone .sb-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px 10px;
    border-bottom: 1px solid #f1f5f9;
    margin: -2px 0 4px;
    position: relative;
}
.sb-sheet-grip {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 2px;
}
html.is-phone .sb-sheet-head h3 {
    margin: 12px 0 0;
    color: #1B3A55;
    font-size: 1.05rem;
    font-weight: 700;
}
html.is-phone .sb-sheet-close {
    background: #f3f4f6;
    border: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    margin-top: 8px;
    font-size: 1rem;
    color: #475569;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
html.is-phone .sb-sheet-close:active { background: #e5e7eb; }

/* Inside the sheet, lay out controls full-width and big */
html.is-phone .sb-search,
html.is-phone .sb-map-controls {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
    flex: none;
    padding: 0;
}
html.is-phone .sb-search::after { display: none; }

html.is-phone .sb-search select,
html.is-phone .sb-search input[type="number"],
html.is-phone .sb-map-controls input[type="text"] {
    /* Override desktop's `field-sizing: content` + `width: auto` so the
       dropdowns ALWAYS fill the sheet width — labels never get clipped. */
    width: 100% !important;
    min-width: 0 !important;
    field-sizing: revert;
    box-sizing: border-box;
    height: 48px;
    /* Symmetric padding — desktop reserves 26px on the start side for an
       inline chevron, but on mobile the native select renders its own
       chevron OUTSIDE the text box. Reserving extra start padding clips
       Arabic text like "جميع المدن" / "كل الأنواع". */
    padding: 12px 14px;
    padding-inline-start: 14px !important;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    font-size: 16px;
    color: #1f2937;
    /* Hide native arrow on iOS so we can render a clean chevron via
       background-image — gives consistent spacing across iOS/Android. */
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    background-size: 10px 7px;
}
/* Numbers + free-text inputs don't need the chevron */
html.is-phone .sb-search input[type="number"],
html.is-phone .sb-map-controls input[type="text"] {
    background-image: none !important;
}
html.is-phone .sb-search select:focus,
html.is-phone .sb-search input:focus,
html.is-phone .sb-map-controls input:focus {
    border-color: var(--c-accent, #C8A55B);
    outline: none;
    box-shadow: 0 0 0 3px rgba(200, 165, 91, .2);
}

/* All buttons inside the sheet — compact tap targets (was 50px = bulky) */
html.is-phone .smart-bar-inner .btn,
html.is-phone .smart-bar-inner .sb-btn {
    height: 42px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    transition: transform .12s, box-shadow .15s;
}
html.is-phone .smart-bar-inner .btn:active,
html.is-phone .smart-bar-inner .sb-btn:active {
    transform: scale(0.97);
    box-shadow: 0 0 0 transparent;
}
/* Hide the now-redundant ⋯ more-toggle inside the sheet (everything is visible) */
html.is-phone .smart-bar-inner .sb-more-toggle { display: none !important; }
html.is-phone .sb-map-controls #map-measure-btn,
html.is-phone .sb-map-controls #map-commute-btn,
html.is-phone .sb-map-controls #map-reset-btn {
    display: inline-flex !important;
}

/* The view-toggle (🗺/📋) stays at the bottom of the sheet as a 2-button row */
html.is-phone .smart-bar-inner .view-toggle-inline {
    display: flex !important;
    width: 100%;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 4px;
}
html.is-phone .smart-bar-inner .view-toggle-inline button {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 10px;
    font-size: 1.15rem;
    color: #475569;
    border-radius: 7px;
    cursor: pointer;
}
html.is-phone .smart-bar-inner .view-toggle-inline button.active {
    background: #fff;
    color: var(--c-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

/* The map-controls section gets a subtle divider above it inside the sheet */
html.is-phone .sb-map-controls {
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

/* On mobile, give the map FULL height — but ONLY when map is visible.
   In grid mode the wrap collapses (see :has() rule near line 6957). */
html.is-phone .home-map-wrap:has(#results-map:not([hidden])) {
    height: calc(100vh - 52px - 64px - env(safe-area-inset-bottom, 0));
    min-height: 400px;
}
html.is-phone .home-map-section { padding: 0; }

/* Lock background scroll when sheet is open */
html.is-phone.sheet-locked body { overflow: hidden; }

/* ============================================================
   "اختر مدينة" hint — surfaces when the user picks a property
   type from the smart-bar dropdown BEFORE picking a city. Soft
   amber banner that points to the city dropdown + a pulsing
   ring on the city select to draw the eye.
   ============================================================ */
.sb-city-hint {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-inline-start: 4px solid #f59e0b;
    color: #92400e;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 700;
    margin: 8px 0 0;
    box-shadow: 0 2px 8px rgba(245, 158, 11, .25);
    animation: hintFadeIn .25s cubic-bezier(.22, 1, .36, 1);
    flex-basis: 100%;
    width: 100%;
    direction: rtl;
}
@keyframes hintFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.city-needed-pulse {
    animation: cityPulse 1s ease-in-out 2;
    border-radius: 6px;
}
@keyframes cityPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
        outline: 2px solid transparent;
    }
    50% {
        box-shadow: 0 0 0 5px rgba(245, 158, 11, .4);
        outline: 2px solid #f59e0b;
    }
}
/* Mobile: hint sits inside the bottom-sheet, slightly bigger touch */
html.is-phone .sb-city-hint {
    padding: 10px 14px;
    font-size: .9rem;
    margin: 10px 0 4px;
}

/* ============================================================
   Unified Dashboard System — /me/* pages
   Buyer dashboard (5 tabs) + seller dashboard (listings + KPIs)
   + per-listing interaction detail + messages inbox + thread.
   ============================================================ */

.dashboard-page {
    padding: 18px 16px 60px;
    max-width: 1100px;
}
.dash-head {
    margin-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 12px;
}
.dash-head h1 {
    margin: 0 0 4px;
    font-size: 1.6rem;
    color: var(--c-primary, #1B3A55);
}
.dash-head-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap; gap: 12px;
}

/* ---- 5-tab nav for buyer dashboard ---- */
.dash-tabs {
    display: flex; gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 4px;
}
.dash-tab {
    flex: 1; min-width: 140px;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #374151;
    text-decoration: none;
    font-weight: 600;
    transition: background .12s, color .12s, transform .12s;
}
.dash-tab:hover {
    background: #fff;
    color: var(--c-primary);
}
.dash-tab.active {
    background: var(--c-primary, #1B3A55);
    color: #fff;
    box-shadow: 0 3px 8px rgba(27, 58, 85, .25);
}
.dash-tab-ico  { font-size: 1.1rem; line-height: 1; }
.dash-tab-label { flex: 1; }
.dash-tab-count {
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    min-width: 22px;
    text-align: center;
}
.dash-tab:not(.active) .dash-tab-count {
    background: #e5e7eb;
    color: #374151;
}

.dash-seller-link {
    margin: -6px 0 14px;
}

/* ---- Empty state ---- */
.dash-empty {
    background: #fafbfc;
    border: 2px dashed #e5e7eb;
    border-radius: 14px;
    padding: 36px 24px;
    text-align: center;
}
.dash-empty .empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}
.dash-empty h3 {
    margin: 0 0 6px;
    color: #1B3A55;
    font-size: 1.15rem;
}
.dash-empty p { margin: 6px 0 16px; }
.dash-empty .btn { margin: 0 4px; }

/* ---- Table layout for tab rows ---- */
.dash-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    border: 1px solid #f1f5f9;
}
.dash-table thead th {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    text-align: start;
    padding: 10px 12px;
    font-size: .85rem;
    border-bottom: 1px solid #e5e7eb;
}
.dash-table tbody td {
    padding: 11px 12px;
    border-bottom: 1px solid #f1f5f9;
    font-size: .9rem;
    vertical-align: middle;
}
.dash-table tbody tr:last-child td { border-bottom: 0; }
.dash-table tbody tr:hover { background: #f9fafb; }

.dash-prop-link {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: inherit;
    font-weight: 700;
}
.dash-prop-link:hover { color: var(--c-primary); }
.dash-thumb {
    width: 44px; height: 44px;
    border-radius: 8px;
    object-fit: cover;
    background: #f1f5f9;
}
.dash-snippet {
    color: #475569;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Status pills ---- */
.status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}
.status-ok    { background: #d1fae5; color: #065f46; }
.status-wait  { background: #fef3c7; color: #92400e; }
.status-warn  { background: #fed7aa; color: #9a3412; }
.status-bad   { background: #fee2e2; color: #991b1b; }
.status-muted { background: #e5e7eb; color: #4b5563; }

/* ---- Complaint form (collapsed by default) ---- */
.dash-complaint-form-wrap { margin-bottom: 14px; }
.dash-complaint-form {
    margin-top: 12px;
    padding: 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.dash-complaint-form label {
    display: flex; flex-direction: column; gap: 4px;
    font-weight: 600; color: #92400e;
    font-size: .88rem;
}
.dash-complaint-form input,
.dash-complaint-form select,
.dash-complaint-form textarea {
    padding: 8px 10px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
}

/* ============================================================
   Seller dashboard — KPI strip + property cards
   ============================================================ */
.seller-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.seller-kpis .kpi {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}
.seller-kpis .kpi-ico {
    font-size: 1.5rem; flex-shrink: 0;
}
.seller-kpis .kpi strong {
    display: block;
    font-size: 1.3rem;
    color: var(--c-primary);
    line-height: 1.1;
}
.seller-kpis .kpi small {
    color: #6b7280;
    font-size: .78rem;
}

.seller-listings {
    display: flex; flex-direction: column;
    gap: 14px;
}
.seller-card {
    display: flex; gap: 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .05);
    transition: transform .15s, box-shadow .15s;
}
.seller-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}
.seller-card-thumb {
    position: relative;
    width: 180px; flex-shrink: 0;
    background: #f3f4f6;
}
.seller-card-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.seller-card-thumb .placeholder {
    height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: #9ca3af;
}
.seller-card-thumb .sold-badge,
.seller-card-thumb .pending-badge,
.seller-card-thumb .expired-badge {
    position: absolute; top: 8px; inset-inline-start: 8px;
    padding: 4px 10px; border-radius: 999px;
    font-size: .76rem; font-weight: 800;
    color: #fff;
}
.seller-card-thumb .sold-badge { background: #16a34a; }
.seller-card-thumb .pending-badge { background: #d97706; }
.seller-card-thumb .expired-badge { background: #6b7280; }

.seller-card-body {
    flex: 1; min-width: 0;
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 6px;
}
.seller-card-body h3 { margin: 0; font-size: 1.05rem; }
.seller-card-body h3 a { color: inherit; text-decoration: none; }
.xsmall { font-size: .76rem; }

.seller-stats {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin: 6px 0;
}
.stat-pill {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    background: #f3f4f6;
    color: #475569;
    border: 1px solid #e5e7eb;
}
.stat-interest { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.stat-msg      { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.stat-offer    { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.stat-view     { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }

.seller-card-actions {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: auto; padding-top: 6px;
}

/* ============================================================
   Per-listing detail — sub-tabs + timeline
   ============================================================ */
.ld-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin: 16px 0 14px;
    border-bottom: 2px solid #e5e7eb;
}
.ld-tab {
    padding: 8px 14px;
    color: #6b7280;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .12s, border-color .12s;
}
.ld-tab:hover { color: var(--c-primary); }
.ld-tab.active {
    color: var(--c-primary);
    border-color: var(--c-accent, #C8A55B);
}
.ld-panel { margin-bottom: 24px; }

.timeline {
    list-style: none; padding: 0; margin: 0;
    border-inline-start: 2px dashed #e5e7eb;
    padding-inline-start: 18px;
}
.timeline-item {
    position: relative;
    padding: 8px 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.tl-date {
    color: #6b7280;
    font-family: 'Courier New', monospace;
    font-size: .82rem;
    min-width: 96px;
}
.tl-bullet {
    color: var(--c-accent, #C8A55B);
    font-size: 1.2rem;
    margin-inline-end: -8px;
}
.tl-text { font-weight: 600; color: #1f2937; }
.tl-ago { margin-inline-start: auto; }

/* ============================================================
   Messages inbox + thread
   ============================================================ */
.msg-inbox {
    list-style: none; padding: 0; margin: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}
.msg-thread-row { border-bottom: 1px solid #f1f5f9; }
.msg-thread-row:last-child { border-bottom: 0; }
.msg-thread-link {
    display: flex; gap: 12px; align-items: center;
    padding: 12px 14px;
    text-decoration: none; color: inherit;
    transition: background .12s;
}
.msg-thread-link:hover { background: #f9fafb; }
.msg-thread-row.unread { background: #eff6ff; }
.msg-thread-row.unread .msg-thread-link:hover { background: #dbeafe; }

.msg-thumb {
    width: 56px; height: 56px;
    border-radius: 10px;
    object-fit: cover;
    background: #f3f4f6;
}
.msg-thumb.placeholder {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: #9ca3af;
}
.msg-meta { flex: 1; min-width: 0; }
.msg-meta strong { display: block; color: #1B3A55; font-size: .95rem; }
.msg-unread-badge {
    background: #dc2626; color: #fff;
    padding: 2px 9px; border-radius: 999px;
    font-size: .78rem; font-weight: 800;
}

.msg-thread-head {
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 12px; padding: 12px;
    margin-bottom: 14px;
}
.msg-thread-prop {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: inherit;
}
.msg-thread-prop img {
    width: 50px; height: 50px;
    border-radius: 8px; object-fit: cover;
}
.msg-list {
    list-style: none; padding: 0; margin: 0 0 14px;
    display: flex; flex-direction: column; gap: 8px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px;
}
.msg-bubble {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 14px;
    line-height: 1.5;
    font-size: .92rem;
}
.msg-mine {
    background: var(--c-primary, #1B3A55);
    color: #fff;
    align-self: flex-end;
    border-bottom-end-radius: 4px;
}
.msg-theirs {
    background: #f3f4f6;
    color: #1f2937;
    align-self: flex-start;
    border-bottom-start-radius: 4px;
}
.msg-foot {
    margin-top: 4px;
    font-size: .7rem;
    opacity: 0.8;
}
.msg-mine .muted { color: rgba(255, 255, 255, 0.75); }
.msg-send-form {
    display: flex; gap: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px;
}
.msg-send-form textarea {
    flex: 1; min-width: 0;
    border: 0; resize: vertical;
    padding: 8px 10px;
    font-family: inherit;
    font-size: .95rem;
    outline: none;
}

/* ============================================================
   Interest button — small (cards) + big (property detail)
   ============================================================ */
.interest-btn {
    /* Place on the OPPOSITE corner from "⚖ قارن" — the compare chip
       uses inset-inline-start, so the star must use inset-inline-end.
       Previously they overlapped and the wider "قارن" pill swallowed
       every click on the star, leaving the button visually present
       but functionally dead. */
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 34px; height: 34px;
    background: rgba(255, 255, 255, 0.95);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    transition: transform .12s, background .12s, box-shadow .15s;
    z-index: 5;
}
.interest-btn:hover {
    background: #fffbeb;
    transform: scale(1.12);
    box-shadow: 0 4px 12px rgba(200, 165, 91, .35);
}
.interest-btn:active { transform: scale(.95); }
.interest-btn[data-active="1"] {
    /* Active state — bright gold gradient + glow + white star inside.
       Previously the active background was solid gold but the same
       ⭐ emoji on a white circle blended visually with the active
       state, making the toggle look like it didn't change anything.
       Now the contrast is unmissable. */
    background: linear-gradient(135deg, #f59e0b 0%, #C8A55B 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(245, 158, 11, .55),
                0 0 0 2px rgba(245, 158, 11, .25);
    transform: scale(1.05);
}
.interest-btn[data-active="1"]:hover {
    background: linear-gradient(135deg, #ea580c 0%, #d97706 100%);
    transform: scale(1.12);
}
/* Pulse animation on toggle (added by JS in main.js for ~600ms) */
.interest-btn.ib-pulse {
    animation: ibPulse .6s cubic-bezier(.22, 1, .36, 1);
}

/* Variant: star inside a Leaflet popup on the home/search map.
   The popup body is small, so we override the absolute positioning
   to sit flush in the start-side corner (RTL: right) WITHOUT relying
   on a .property-card parent like the grid version does. */
.map-popup-interest-btn {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    /* The Leaflet popup has its own padding (~12px); pull the button
       in slightly so it sits inside the rounded corner cleanly. */
    margin: 4px;
    width: 32px; height: 32px;
    font-size: 1.05rem;
    z-index: 10;
}
@keyframes ibPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* Price + star on the same line, opposite ends (RTL: price right, star left) */
.detail-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.detail-price-row .price-big { margin: 0; }

.interest-btn-big {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0;
    flex-shrink: 0;
    background: #fff;
    color: #6b7280;
    border: 2px solid var(--c-border, #e5e7eb);
    border-radius: 50%;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    transition: transform .12s, box-shadow .15s, border-color .15s, background .15s;
}
.interest-btn-big .ibb-star {
    font-size: 1.85rem;
    line-height: 1;
    transition: transform .12s;
}
.interest-btn-big:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(200, 165, 91, .35);
    border-color: var(--c-accent, #C8A55B);
}
.interest-btn-big:hover .ibb-star { transform: scale(1.08); }
.interest-btn-big:active { transform: scale(.94); }
.interest-btn-big.is-active {
    background: #fffbeb;
    border-color: #fbbf24;
    box-shadow: 0 3px 10px rgba(251, 191, 36, .4);
}
.interest-btn-big.is-active .ibb-star {
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, .65));
}
.interest-link {
    display: block;
    text-align: center;
    margin: 4px 0 12px;
    color: #6b7280;
    text-decoration: none;
    font-size: .85rem;
}
.interest-link:hover { color: var(--c-primary); text-decoration: underline; }

@keyframes ibPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}
.ib-pulse { animation: ibPulse .35s ease-out; }

/* ============================================================
   Property card stats row — ⭐ N · 💬 N · 💰 N
   ============================================================ */
.prop-stats-row {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e5e7eb;
}
.ps-pill {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    background: #f3f4f6;
    color: #475569;
}
.ps-interest { background: #fef3c7; color: #92400e; }
.ps-msg      { background: #dbeafe; color: #1e40af; }
.ps-offer    { background: #d1fae5; color: #065f46; }

/* QR fallback page */
.qr-fallback-link {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    margin: 12px 0;
    word-break: break-all;
}

/* ============================================================
   Mobile dashboard polish
   ============================================================ */
@media (max-width: 700px) {
    .dashboard-page { padding: 12px 10px 80px; }
    .dash-head h1 { font-size: 1.3rem; }

    .dash-tabs { gap: 4px; padding: 3px; }
    .dash-tab { min-width: auto; padding: 8px 10px; font-size: .85rem; }
    .dash-tab-label { display: none; }
    .dash-tab.active .dash-tab-label { display: inline; }
    .dash-tab-ico { font-size: 1.3rem; }

    /* Tables become stacked cards on phones */
    .dash-table, .dash-table thead, .dash-table tbody,
    .dash-table tr, .dash-table td { display: block; width: 100%; }
    .dash-table thead { display: none; }
    .dash-table tr {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 10px 12px;
        margin-bottom: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
    }
    .dash-table td {
        padding: 4px 0;
        border: 0;
        display: flex; justify-content: space-between; gap: 12px;
    }
    .dash-prop-link { font-size: .95rem; }
    .dash-thumb { width: 36px; height: 36px; }

    .seller-kpis { grid-template-columns: repeat(2, 1fr); }
    .seller-card { flex-direction: column; }
    .seller-card-thumb { width: 100%; height: 180px; }

    .ld-tabs { gap: 0; overflow-x: auto; }
    .ld-tab { white-space: nowrap; padding: 8px 12px; font-size: .85rem; }
}

/* ============================================================
   Mobile polish pass — world-class app feel
   Adds: refined pill triggers, sheet backdrop-blur, FAB stagger,
   touch ripples, safer status-bar handling, animated active states.
   ============================================================ */

/* --- Refined smart-bar trigger pill ----------------------------- */
html.is-phone .sb-mobile-trigger {
    margin: 8px 12px;
    width: calc(100% - 24px);
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    background: linear-gradient(135deg, #1B3A55 0%, #2c5378 100%);
    min-height: 56px;
    padding: 14px 18px;
    gap: 12px;
    font-weight: 600;
    letter-spacing: 0.1px;
    transition: transform .15s, box-shadow .2s;
}
html.is-phone .sb-mobile-trigger:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
html.is-phone .sbm-icon {
    font-size: 1.25rem;
    background: rgba(255, 255, 255, 0.15);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
html.is-phone .smart-bar.sheet-open .sbm-chevron {
    transform: rotate(180deg);
}
html.is-phone .sbm-chevron {
    transition: transform .25s ease;
}

/* --- Sheet backdrop with blur ----------------------------------- */
@supports (backdrop-filter: blur(8px)) {
    html.is-phone .sb-mobile-backdrop {
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}

/* --- Sheet drag handle look (grip bar) -------------------------- */
html.is-phone .sb-sheet-grip {
    display: block !important;
    width: 44px; height: 5px;
    border-radius: 999px;
    background: #d1d5db;
    margin: 6px auto 10px;
    grid-column: 1 / -1;
}
html.is-phone .sb-sheet-head h3 {
    font-size: 1.05rem;
    color: #1B3A55;
    font-weight: 800;
}

/* --- Touch feedback for all big buttons ------------------------- */
html.is-phone .btn:active,
html.is-phone .sb-btn:active,
html.is-phone .map-fab:active {
    transform: scale(0.96);
}

/* --- Map FABs entrance animation on first paint ----------------- */
@keyframes fabFadeIn {
    from { opacity: 0; transform: translateY(8px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
html.is-phone .map-fab-icon {
    animation: fabFadeIn .35s cubic-bezier(.22, 1, .36, 1) backwards;
}
html.is-phone .map-fab-mylocation.map-fab-icon { animation-delay: .05s; }
html.is-phone .map-fab-measure.map-fab-icon    { animation-delay: .12s; }
html.is-phone .map-fab-route.map-fab-icon      { animation-delay: .19s; }

/* --- Map FABs slightly larger on mobile for thumb tap ----------- */
html.is-phone .map-fab-icon {
    width: 52px; height: 52px;
    font-size: 1.5rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    border: 0;            /* cleaner edge on mobile, the shadow defines it */
}

/* --- Floating listing-type chip overlay on mobile ---------------
   On phones the smart-bar is hidden behind the trigger pill, so the
   rent/sale toggle has to live where the user's thumb can reach it.
   We pin it as a floating chip on the map's TOP-RIGHT corner so it's
   ALWAYS one tap away — and it doesn't compete with the FABs on the
   bottom-right. */
html.is-phone #map-listingtype-btn {
    position: fixed;
    top: max(64px, env(safe-area-inset-top, 64px));
    inset-inline-end: 14px;
    inset-inline-start: auto;
    z-index: 700;
    background: rgba(255, 255, 255, 0.95);
    color: #1B3A55;
    border: 1px solid rgba(27, 58, 85, 0.15);
    border-radius: 999px;
    padding: 8px 14px;
    height: auto;
    min-height: 38px;
    font-size: .85rem;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .15s, box-shadow .2s, background .15s;
}
html.is-phone #map-listingtype-btn:active {
    transform: scale(0.96);
    background: #f3f4f6;
}

/* --- Bottom-nav: animated active pill --------------------------- */
html.is-phone .mobile-bottom-nav .mbn-tab {
    position: relative;
    transition: color .15s;
}
html.is-phone .mobile-bottom-nav .mbn-tab.active::before {
    content: "";
    position: absolute;
    top: 6px;
    inset-inline: 18%;
    height: 3px;
    background: var(--c-accent, #C8A55B);
    border-radius: 999px;
    animation: mbnPillIn .25s cubic-bezier(.22, 1, .36, 1);
}
@keyframes mbnPillIn {
    from { opacity: 0; transform: scaleX(0.4); }
    to   { opacity: 1; transform: scaleX(1); }
}
html.is-phone .mobile-bottom-nav .mbn-tab:active .mbn-icon {
    transform: scale(0.9);
}
html.is-phone .mobile-bottom-nav .mbn-icon {
    transition: transform .15s;
}

/* --- Area-list panel polish on mobile --------------------------- */
html.is-phone .map-area-list {
    border-radius: 16px 16px 0 0;
    border: 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    background: #fff;
}
html.is-phone .mal-head {
    border-radius: 16px 16px 0 0;
    padding: 14px 16px;
}
html.is-phone .mal-title { font-size: 1rem; }

/* --- Selects + inputs inside the mobile sheet ------------------- */
html.is-phone .sb-search select,
html.is-phone .sb-search input[type="number"],
html.is-phone .sb-map-controls input[type="text"] {
    background: #f8fafc;
    border-color: #e5e7eb;
    border-radius: 12px;
    height: 50px;
    font-size: 16px;       /* prevents iOS Safari zoom-in on focus */
    transition: border-color .15s, background .15s, box-shadow .15s;
}
html.is-phone .sb-search select:focus,
html.is-phone .sb-search input[type="number"]:focus,
html.is-phone .sb-map-controls input[type="text"]:focus {
    background: #fff;
    border-color: #C8A55B;
    box-shadow: 0 0 0 3px rgba(200, 165, 91, 0.15);
    outline: none;
}

/* --- AI chat icon: subtle bounce on idle (only once on load) ---- */
@keyframes aiIdleBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
html.is-phone .ai-toggle {
    animation: aiIdleBounce 1.2s ease-in-out 1.5s 2;
}

/* --- Header polish for mobile ---------------------------------- */
html.is-phone .site-header {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* --- Smoother safe-area handling for the map area --------------- */
html.is-phone .home-map-wrap {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* --- Scrollbar refinement (mobile rare but tablets see them) ---- */
html.is-phone *::-webkit-scrollbar { width: 4px; height: 4px; }
html.is-phone *::-webkit-scrollbar-thumb {
    background: rgba(27, 58, 85, 0.25);
    border-radius: 2px;
}

/* --- Animated map toast (used by موقعي error states) ------------ */
html.is-phone .map-toast {
    border-radius: 14px;
    padding: 12px 18px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    max-width: 88vw;
}

/* --- Buttons inside the route panel — touch friendly ------------ */
html.is-phone .route-panel { font-size: 0.95rem; }
html.is-phone .route-panel input[type="text"] {
    height: 44px;
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 10px;
}
html.is-phone .route-pick,
html.is-phone .route-here,
html.is-phone .route-prop {
    width: 40px; height: 40px;
    font-size: 1.15rem;
    border-radius: 10px;
}
html.is-phone .route-quick-btn {
    padding: 12px 14px;
    font-size: .9rem;
    border-radius: 12px;
}

/* --- Address-candidate dropdown on mobile ---------------------- */
html.is-phone .addr-candidates {
    border-radius: 14px;
    margin: 10px 0 14px;
    padding: 10px 12px;
}
html.is-phone .addr-candidate {
    padding: 10px 12px;
    border-radius: 10px;
    min-height: 48px;
}

/* --- Property card grid on mobile ------------------------------ */
html.is-phone .property-grid {
    gap: 14px;
    padding: 14px 12px;
}
html.is-phone .property-card {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border: 0;
    transition: transform .2s, box-shadow .2s;
}
html.is-phone .property-card:active {
    transform: scale(0.985);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   Admin password-reset card — only on /admin/users/<id>/edit
   right after a reset POST. Shows the new password ONCE so the
   admin can copy & deliver out-of-band (WhatsApp / call). The
   amber palette signals "sensitive, write this down NOW".
   ============================================================ */
.pw-reset-card {
    border: 2px solid #f59e0b;                /* amber-500 — sensitive */
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
}
.pw-reset-head {
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 12px;
    color: #92400e;                           /* amber-800 */
}
.pw-reset-body {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}
.pw-reset-value {
    flex: 1;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 10px 14px;
    border: 2px dashed #C8A55B;
    border-radius: 8px;
    background: #fff;
    color: #1B3A55;
    letter-spacing: 1.5px;
    user-select: all;                          /* one click selects whole string */
}
.pw-reset-warn {
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(245, 158, 11, 0.12);
    border-radius: 6px;
    color: #78350f;                            /* amber-900 */
    line-height: 1.7;
}

/* The "manual mode" details/summary inside the reset form.
   We keep it collapsed by default — auto-generation is the
   recommended path, manual is the escape hatch. */
.pw-reset-manual {
    margin-top: 14px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.pw-reset-manual > summary {
    cursor: pointer;
    font-weight: 600;
    color: #475569;
    padding: 4px 0;
}
.pw-reset-manual > summary:hover { color: var(--c-primary); }
.pw-reset-manual label {
    display: block;
    margin: 10px 0;
}
.pw-reset-manual input[type="text"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 1rem;
}

/* ── Tour banner (homepage) ── */
.tour-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #0d1f35 0%, #1e3a5f 100%);
    border: 1px solid rgba(200,165,91,.35);
    border-radius: 16px;
    padding: 18px 22px;
    margin: 18px 0;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .25s, transform .2s;
}
.tour-banner:hover {
    box-shadow: 0 6px 28px rgba(200,165,91,.2);
    transform: translateY(-2px);
    text-decoration: none;
}
.tour-banner-icon {
    font-size: 2.6rem;
    flex-shrink: 0;
    animation: ticon 2.5s ease-in-out infinite;
}
@keyframes ticon { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
.tour-banner-body { flex: 1; }
.tour-banner-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #C8A55B;
    margin-bottom: 4px;
}
.tour-banner-sub {
    font-size: .82rem;
    color: rgba(248,250,252,.65);
    line-height: 1.5;
}
.tour-banner-cta {
    flex-shrink: 0;
    background: #C8A55B;
    color: #000;
    font-weight: 700;
    font-size: .85rem;
    padding: 9px 18px;
    border-radius: 10px;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .tour-banner { flex-wrap: wrap; }
    .tour-banner-cta { width: 100%; text-align: center; }
}