/* ═══════════════════════════════════════════════════════════════
   CivisRank - Stylesheet Principal v1.0
   Stack: CSS3 vanilla, variables CSS, responsive mobile-first
   ═══════════════════════════════════════════════════════════════ */

/* ─── Variables de diseño ──────────────────────────────────── */
:root {
    --color-primary:    #1a56db;
    --color-primary-d:  #1443a6;
    --color-primary-l:  #e8effc;
    --color-gold:       #f59e0b;
    --color-gold-text:  #946200;
    --color-gold-bg:    #fef3c7;
    --color-silver:     #6b7280;
    --color-silver-text:#585e6a;
    --color-silver-bg:  #f3f4f6;
    --color-bronze:     #b45309;
    --color-bronze-bg:  #fef3c7;
    --color-success:    #059669;
    --color-warning:    #d97706;
    --color-danger:     #dc2626;
    --color-bg:         #f8fafc;
    --color-surface:    #ffffff;
    --color-text:       #1e293b;
    --color-text-muted: #64748b;
    --color-border:     #e2e8f0;
    --radius:           12px;
    --radius-sm:        8px;
    --shadow:           0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --shadow-lg:        0 10px 25px rgba(0,0,0,.1);
    --transition:       .2s ease;
    --max-width:        1200px;
    --font:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── Reset + base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-d); }
img { max-width: 100%; height: auto; }
ul { list-style: none; }

/* Fix Leaflet tiles broken by global img rule */
.leaflet-container img { max-width: none !important; height: auto !important; }
.leaflet-tile { width: 256px !important; height: 256px !important; }
.leaflet-container { z-index: 1; }
.leaflet-pane { z-index: 400; }
.leaflet-tile-pane { z-index: 200; }

/* ─── Container ────────────────────────────────────────────── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

/* ═══════════════════════════════════════════════════════════════
   HEADER / NAVBAR
   ═══════════════════════════════════════════════════════════════ */
.navbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    padding: 0 20px;
}
.navbar .container {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px;
}
.navbar-brand {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.5rem; font-weight: 800; color: var(--color-primary);
}
.navbar-brand .logo-icon {
    width: 36px; height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 8px;
    filter: drop-shadow(0 2px 6px rgba(30, 58, 138, .35));
}
.navbar-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.navbar-links a {
    font-size: .925rem; font-weight: 500;
    color: var(--color-text-muted);
    transition: color var(--transition);
}
.navbar-links a:hover, .navbar-links a.active { color: var(--color-primary); }
.navbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.btn-lang {
    padding: 6px 14px; border-radius: 20px;
    background: var(--color-primary-l); color: var(--color-primary);
    font-weight: 600; font-size: .85rem;
    border: none; cursor: pointer;
    transition: all var(--transition);
}
.btn-lang:hover { background: var(--color-primary); color: #fff; }

/* Language Dropdown */
.lang-dropdown { position: relative; }
.lang-dropdown .btn-lang {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 20px;
    background: var(--color-primary-l); color: var(--color-primary);
    font-weight: 600; font-size: .85rem;
    border: none; cursor: pointer; transition: all var(--transition);
}
.lang-dropdown .btn-lang:hover { background: var(--color-primary); color: #fff; }
.lang-dropdown .btn-lang i { font-size: .8rem; }
.lang-dropdown-menu {
    display: none; position: absolute; top: 100%; right: 0;
    background: #fff; border: 1px solid var(--color-border);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.12);
    min-width: 170px; padding: 8px 0; z-index: 200;
    padding-top: 16px; margin-top: 0;
    animation: langFadeIn .15s ease;
}
.lang-dropdown-menu::before {
    content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 16px;
}
@keyframes langFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.lang-dropdown:hover .lang-dropdown-menu,
.lang-dropdown:focus-within .lang-dropdown-menu,
.lang-dropdown.open .lang-dropdown-menu { display: block; }
.lang-dropdown-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px; font-size: .9rem; font-weight: 500;
    color: var(--color-text); text-decoration: none;
    transition: background .15s;
}
.lang-dropdown-menu a:hover { background: var(--color-primary-l); color: var(--color-primary); }

/* Hamburger (mobile) */
.navbar-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.navbar-toggle span {
    display: block; width: 24px; height: 2px;
    background: var(--color-text); margin: 5px 0;
    transition: var(--transition);
}

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════ */
.hero {
    color: #fff;
    padding: 80px 20px 100px;
    text-align: center;
    position: relative;
    overflow: visible;
    min-height: 480px;
}

/* ── Slideshow background images (JS-driven crossfade) ── */
.hero-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
    will-change: opacity;
    overflow: hidden;
}
.hero-slide--active {
    opacity: 1;
}

/* ── Dark overlay for readability ── */
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,.7) 0%, rgba(30,58,138,.65) 50%, rgba(15,23,42,.75) 100%);
    z-index: 1;
}
.hero::before {
    content: ''; position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: .5;
    z-index: 2;
}
.hero-content { position: relative; z-index: 3; max-width: 750px; margin: 0 auto; }
.hero h1 { font-size: 2.8rem; font-weight: 900; line-height: 1.15; margin-bottom: 20px; text-shadow: 0 2px 20px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); }
.hero p { font-size: 1.15rem; opacity: .95; margin-bottom: 36px; line-height: 1.7; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.hero-text-fade { transition: opacity .6s ease; }
.hero-text-fade--out { opacity: 0 !important; }
.hero-cta {
    display: inline-block;
    padding: 16px 40px; border-radius: 50px;
    background: #fff; color: var(--color-primary);
    font-weight: 700; font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,.15);
    transition: transform var(--transition), box-shadow var(--transition);
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,.2); color: var(--color-primary-d); }

/* Search bar in hero */
.hero-search {
    margin-top: 28px; max-width: 500px; margin-left: auto; margin-right: auto;
    position: relative;
}
.hero-search input {
    width: 100%; padding: 16px 20px 16px 50px;
    border: none; border-radius: 50px;
    font-size: 1rem; box-shadow: 0 4px 15px rgba(0,0,0,.15);
    outline: none;
}
.hero-search .search-icon {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    color: var(--color-text-muted); font-size: 1.1rem;
}
.hero-search .search-results {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: #fff; border-radius: var(--radius);
    box-shadow: var(--shadow-lg); max-height: 300px; overflow-y: auto;
    display: none; z-index: 999;
}
.hero-search .search-results.visible { display: block; }
.hero-search .search-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px; cursor: pointer; color: var(--color-text);
    transition: background var(--transition);
}
.hero-search .search-item:hover { background: var(--color-primary-l); }
.hero-search .search-item .city-name { font-weight: 600; }
.hero-search .search-item .city-country { color: var(--color-text-muted); font-size: .85rem; }

/* Proximity Search — "¿Dónde debería vivir?" */
.proximity-toggle { margin-top: 18px; text-align: center; }
.proximity-toggle-btn {
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
    color: #fff; padding: 10px 22px; border-radius: 50px; font-size: .95rem;
    cursor: pointer; transition: all var(--transition); backdrop-filter: blur(6px);
}
.proximity-toggle-btn:hover, .proximity-toggle-btn.active {
    background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.5);
}
.proximity-toggle-btn i { margin-right: 6px; }

.proximity-panel {
    margin-top: 16px; max-width: 640px; margin-left: auto; margin-right: auto;
    background: rgba(255,255,255,.12); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.2); border-radius: 20px;
    padding: 24px 22px 20px; animation: proxFadeIn .3s ease;
}
@keyframes proxFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.proximity-input-row { display: flex; gap: 16px; flex-wrap: wrap; }
.proximity-field { flex: 1; min-width: 220px; }
.proximity-field label {
    display: block; color: rgba(255,255,255,.9); font-size: .85rem;
    font-weight: 600; margin-bottom: 8px; white-space: nowrap;
}
.proximity-field label i { margin-right: 4px; }

.proximity-address-wrap { position: relative; }
.proximity-address-wrap input {
    width: 100%; padding: 12px 44px 12px 14px; border: none; border-radius: 12px;
    font-size: .95rem; background: rgba(255,255,255,.92); outline: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.proximity-address-wrap input:focus { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.15); }

.prox-geo-btn {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: var(--color-primary); color: #fff; border: none; border-radius: 8px;
    width: 34px; height: 34px; cursor: pointer; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--transition);
}
.prox-geo-btn:hover { background: var(--color-primary-d); }

.prox-addr-search-btn {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: var(--color-primary); color: #fff; border: none; border-radius: 8px;
    width: 34px; height: 34px; cursor: pointer; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--transition);
}
.prox-addr-search-btn:hover { background: var(--color-primary-d); }



.prox-suggestions {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.15);
    max-height: 220px; overflow-y: auto; display: none; z-index: 999;
}
.prox-suggestion {
    padding: 11px 14px; cursor: pointer; font-size: .9rem; color: var(--color-text);
    transition: background var(--transition); border-bottom: 1px solid #f1f5f9;
}
.prox-suggestion:last-child { border-bottom: none; }
.prox-suggestion:hover { background: var(--color-primary-l); }

.proximity-field--radius { min-width: 200px; flex: 0 0 auto; }
.prox-radius-options { display: flex; gap: 6px; }
.prox-radius-btn {
    flex: 1; padding: 10px 6px; border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.1); color: #fff; border-radius: 10px;
    font-size: .85rem; font-weight: 600; cursor: pointer;
    transition: all var(--transition); text-align: center;
}
.prox-radius-btn:hover { background: rgba(255,255,255,.2); }
.prox-radius-btn.active {
    background: var(--color-primary); border-color: var(--color-primary);
    color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.prox-search-btn {
    margin-top: 16px; width: 100%; padding: 14px; border: none;
    background: var(--color-primary); color: #fff; border-radius: 12px;
    font-size: 1rem; font-weight: 700; cursor: pointer;
    transition: all var(--transition); box-shadow: 0 4px 15px rgba(0,0,0,.15);
}
.prox-search-btn:hover:not(:disabled) { background: var(--color-primary-d); transform: translateY(-1px); }
.prox-search-btn:disabled { opacity: .5; cursor: not-allowed; }
.prox-search-btn i { margin-right: 8px; }

/* Proximity results section */
.proximity-results-section .proximity-sort-bar {
    display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap;
}
.proximity-results-section .proximity-sort-bar select {
    padding: 8px 14px; border: 1px solid #e2e8f0; border-radius: 8px;
    font-size: .9rem; background: #fff;
}
.prox-clear-btn {
    padding: 8px 16px; border: 1px solid #e2e8f0; border-radius: 8px;
    background: #fff; color: var(--color-text-muted); font-size: .85rem;
    cursor: pointer; transition: all var(--transition);
}
.prox-clear-btn:hover { border-color: #ef4444; color: #ef4444; }

.prox-dist-cell { text-align: center; }
.prox-dist-time { display: block; font-weight: 600; font-size: .9rem; color: var(--color-primary); }
.prox-dist-time i { margin-right: 3px; font-size: .8rem; }
.prox-dist-km { display: block; font-size: .75rem; color: var(--color-text-muted); }

/* ═══════════════════════════════════════════════════════════════
   SECTION TITLES
   ═══════════════════════════════════════════════════════════════ */
.section { padding: 80px 20px; }
.section-header { text-align: center; margin-bottom: 50px; }
.section-header h2 { font-size: 2rem; font-weight: 800; margin-bottom: 12px; }
.section-header p { color: var(--color-text-muted); font-size: 1.05rem; max-width: 600px; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════════
   HOW IT WORKS - 20 metric cards
   ═══════════════════════════════════════════════════════════════ */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
.metric-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 28px 24px;
    transition: transform var(--transition), box-shadow var(--transition);
}
.metric-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.metric-card .metric-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--color-primary-l); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; margin-bottom: 16px;
}
.metric-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.metric-card p { font-size: .88rem; color: var(--color-text-muted); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════
   INTERACTIVE MAP
   ═══════════════════════════════════════════════════════════════ */
.cr-map-section { background: linear-gradient(180deg, #f0f4ff 0%, #f8fafc 100%); padding-top: 40px; border-top: 1px solid #e2e8f0; }
.cr-map-wrap {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.06);
    border: 1px solid var(--color-border);
}
.cr-map {
    width: 100%;
    height: 520px;
    background: #f1f5f9;
}
@media (max-width: 768px) {
    .cr-map { height: 380px; }
}

/* Legend */
.cr-map-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 10px 16px;
    background: #fff;
    border-top: 1px solid var(--color-border);
    font-size: .8rem;
    color: var(--color-text-muted);
    font-weight: 500;
}
.cr-map-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cr-lg-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}
.cr-lg-gold   { background: linear-gradient(135deg, #FFD700, #C49A2A, #F5CF6B, #AB8520); }
.cr-lg-silver { background: linear-gradient(135deg, #E8E8E8, #A8A9AD, #D4D4D8, #808590); }
.cr-lg-bronze { background: linear-gradient(135deg, #CD7F32, #A0622A, #D4955A, #8B5220); }
.cr-lg-none   { background: #94a3b8; }

/* Score marker */
.cr-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    font-size: .72rem;
    font-family: var(--font);
    box-shadow: 0 1px 6px rgba(0,0,0,.25);
    border: 2px solid #fff;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    line-height: 1;
    margin: 0; padding: 0; /* Reset any inherited offset */
    position: absolute; top: 0; left: 0; /* Anchor precisely */
}
.cr-marker:hover {
    transform: scale(1.3);
    box-shadow: 0 3px 12px rgba(0,0,0,.3);
    z-index: 1000 !important;
}
.cr-marker-gold {
    background: linear-gradient(145deg, #FFD700 0%, #C8A415 30%, #F5CF6B 55%, #AB8520 100%);
    box-shadow: 0 1px 6px rgba(180,145,20,.45), inset 0 1px 2px rgba(255,255,255,.35);
    border-color: #dbb934;
}
.cr-marker-silver {
    background: linear-gradient(145deg, #E8E8E8 0%, #A8A9AD 30%, #D4D4D8 55%, #808590 100%);
    box-shadow: 0 1px 6px rgba(120,120,130,.45), inset 0 1px 2px rgba(255,255,255,.4);
    border-color: #c0c0c4;
}
.cr-marker-bronze {
    background: linear-gradient(145deg, #D4955A 0%, #A0622A 30%, #CD7F32 55%, #8B5220 100%);
    box-shadow: 0 1px 6px rgba(140,80,30,.45), inset 0 1px 2px rgba(255,255,255,.3);
    border-color: #c07830;
}
.cr-marker-none {
    background: linear-gradient(145deg, #94a3b8 0%, #64748b 50%, #94a3b8 100%);
    border-color: #94a3b8;
}

/* Popup */
.cr-popup {
    font-family: var(--font);
    text-align: center;
    min-width: 150px;
}
.cr-popup-name {
    font-weight: 700;
    font-size: .92rem;
    color: var(--color-text);
    margin-bottom: 2px;
}
.cr-popup-region {
    font-size: .75rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}
.cr-popup-score {
    display: inline-block;
    padding: 3px 14px;
    border-radius: 20px;
    color: #fff;
    font-weight: 800;
    font-size: .85rem;
    margin-bottom: 6px;
}
.cr-popup-pop {
    font-size: .73rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}
.cr-popup-link {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 20px;
    background: #1e293b;
    color: #fff !important;
    font-weight: 700;
    font-size: .8rem;
    text-decoration: none !important;
    transition: background .2s;
    letter-spacing: .02em;
}
.cr-popup-link:hover {
    background: #0f172a;
    color: #fff !important;
}
.leaflet-popup-content-wrapper {
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
    padding: 4px !important;
}
.leaflet-popup-tip {
    box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
}

/* ═══════════════════════════════════════════════════════════════
   RANKING TABLE
   ═══════════════════════════════════════════════════════════════ */
.ranking-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ranking-table th {
    text-align: left; padding: 14px 16px;
    font-size: .8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
}
.ranking-table td {
    padding: 16px; border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.ranking-table tbody tr { transition: background var(--transition); }
.ranking-table tbody tr:hover { background: var(--color-primary-l); }
.ranking-table tbody tr:hover .city-region,
.ranking-table tbody tr:hover .seal-none { color: #4b5c73; }

.rank-number {
    font-weight: 800; font-size: 1.2rem; color: var(--color-primary);
    width: 40px; text-align: center;
}
.city-info { display: flex; align-items: center; gap: 14px; }
.city-info .city-name { font-weight: 700; font-size: 1rem; }
.city-info .city-region { color: var(--color-text-muted); font-size: .82rem; }

/* CCAA flag cell */
.ccaa-cell { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.ccaa-flag { border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.15); vertical-align: middle; object-fit: cover; width: 28px; height: 20px; }

/* Population cell */
.pop-cell { font-size: .88rem; color: #475569; white-space: nowrap; }

/* Ranking controls: toggle + sort aligned */
.ranking-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ranking-sort-bar select { padding: 10px 16px; border: 1px solid #e2e8f0; border-radius: 10px; font-size: .9rem; color: #334155; background: #fff; cursor: pointer; min-width: 180px; }
.ranking-sort-bar select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

/* Ranking type toggle */
.ranking-type-toggle { display: flex; gap: 0; background: #f1f5f9; border-radius: 12px; padding: 4px; width: fit-content; }
.ranking-type-toggle .type-btn { padding: 10px 22px; border: none; background: transparent; color: #64748b; font-size: .92rem; font-weight: 600; border-radius: 10px; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 8px; }
.ranking-type-toggle .type-btn:hover { color: #334155; }
.ranking-type-toggle .type-btn.active { background: #fff; color: var(--color-primary); box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* Score badge — aligned with medal system */
.score-badge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 14px; border-radius: 20px;
    font-weight: 800; font-size: .95rem;
}
.score-excellent { background: #fef3c7; color: #92400e; }
.score-good      { background: #f3f4f6; color: #475569; }
.score-average   { background: #fde8d0; color: #7c2d12; }
.score-poor      { background: #fee2e2; color: #991b1b; }

/* Seal badges */
.seal-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 20px;
    font-size: .8rem; font-weight: 700;
}
.seal-gold   { background: var(--color-gold-bg);   color: var(--color-gold-text); }
.seal-silver { background: var(--color-silver-bg);  color: var(--color-silver-text); }
.seal-bronze { background: var(--color-bronze-bg);  color: var(--color-bronze); }
.seal-none   { background: #f1f5f9; color: #5e6b7a; }
.seal-score-only { background: #f1f5f9; color: #334155; font-size: .95rem; }

/* ═══ Mini CivisRank badge (ranking table) ═══ */
.cr-badge-mini {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px 6px 6px;
    border-radius: 10px; text-decoration: none;
    border: 2px solid; font-family: Inter, system-ui, sans-serif;
    transition: box-shadow .2s, transform .15s;
    max-width: 220px;
}
.cr-badge-mini:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.cr-badge-mini.cr-badge-gold   { background: #fffbeb; border-color: #F59E0B; }
.cr-badge-mini.cr-badge-silver { background: #f8fafc; border-color: #94A3B8; }
.cr-badge-mini.cr-badge-bronze { background: #fef7ed; border-color: #CD7F32; }
.cr-badge-mini .cr-badge-score-circle {
    display: flex; align-items: baseline; gap: 1px;
    padding: 5px 7px; border-radius: 7px;
    color: #fff; line-height: 1; flex-shrink: 0;
}
.cr-badge-mini.cr-badge-gold .cr-badge-score-circle { background: #F59E0B; }
.cr-badge-mini.cr-badge-silver .cr-badge-score-circle { background: #64748b; }
.cr-badge-mini.cr-badge-bronze .cr-badge-score-circle { background: #CD7F32; }
.cr-badge-mini .cr-badge-score { font-size: 1rem; font-weight: 900; }
.cr-badge-mini .cr-badge-max { font-size: .6rem; font-weight: 600; opacity: .8; }
.cr-badge-mini .cr-badge-body {
    display: flex; flex-direction: column; gap: 0; min-width: 0;
}
.cr-badge-mini .cr-badge-level {
    font-size: .72rem; font-weight: 800; line-height: 1.2;
}
.cr-badge-mini.cr-badge-gold .cr-badge-level { color: #92400e; }
.cr-badge-mini.cr-badge-silver .cr-badge-level { color: #334155; }
.cr-badge-mini.cr-badge-bronze .cr-badge-level { color: #7c2d12; }
.cr-badge-mini .cr-badge-stars {
    font-size: .65rem; letter-spacing: .5px;
}
.cr-badge-mini.cr-badge-gold .cr-badge-stars { color: #F59E0B; }
.cr-badge-mini.cr-badge-silver .cr-badge-stars { color: #94a3b8; }
.cr-badge-mini.cr-badge-bronze .cr-badge-stars { color: #CD7F32; }
.cr-badge-mini .cr-badge-brand {
    display: flex; flex-direction: column; align-items: flex-end;
    margin-left: auto; flex-shrink: 0;
}
.cr-badge-mini .cr-badge-logo {
    font-size: .6rem; font-weight: 800; color: var(--color-primary);
    letter-spacing: -.2px;
}
.cr-badge-mini .cr-badge-year {
    font-size: .5rem; color: #94a3b8; font-weight: 600;
}

.btn-detail {
    padding: 8px 18px; border-radius: 8px;
    background: var(--color-primary-l); color: var(--color-primary);
    font-weight: 600; font-size: .85rem;
    transition: all var(--transition);
    display: inline-block;
}
.btn-detail:hover { background: var(--color-primary); color: #fff; }

/* Pagination */
.ranking-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.ranking-pagination button {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    font-weight: 600;
    font-size: .88rem;
    font-family: var(--font);
    cursor: pointer;
    transition: all .15s ease;
}
.ranking-pagination button:hover {
    background: var(--color-primary-l);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.ranking-pagination button.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    pointer-events: none;
}
.ranking-pagination button:disabled {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}
.ranking-pagination .pg-info {
    font-size: .82rem;
    color: #6b7280;
    margin: 0 8px;
}

/* ═══════════════════════════════════════════════════════════════
   CITY DETAIL PAGE
   ═══════════════════════════════════════════════════════════════ */
.city-hero {
    padding: 60px 20px 80px; text-align: center;
    color: #fff;
    position: relative; overflow: hidden;
    min-height: 220px;
}
.city-hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1.8s ease-in-out;
    will-change: opacity;
}
.city-hero-slide--active { opacity: 1; }
.city-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(26,86,219,.7) 0%, rgba(37,99,235,.6) 100%);
    z-index: 1;
}
.city-hero-content { position: relative; z-index: 2; }
.city-hero h1 { font-size: 2.4rem; font-weight: 900; }
.city-hero .hero-flag { width: 48px; height: 34px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.3); vertical-align: middle; margin-right: 10px; }
.city-hero .city-meta {
    display: flex; justify-content: center; gap: 30px;
    margin-top: 16px; flex-wrap: wrap;
}
.city-hero .city-meta span { opacity: .9; font-size: 1rem; }

.city-score-card {
    background: var(--color-surface); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 40px;
    margin: -50px auto 40px; max-width: 800px;
    text-align: center; position: relative; z-index: 2;
}
.city-score-number { font-size: 4rem; font-weight: 900; line-height: 1; }
.city-score-number.score-excellent,
.city-score-number.score-good,
.city-score-number.score-average,
.city-score-number.score-poor { background: none; }
.city-score-label { color: var(--color-text-muted); font-size: 1rem; margin-top: 8px; }

/* Metrics breakdown */
.metrics-breakdown {
    max-width: 800px; margin: 0 auto 60px;
}
.metric-row {
    display: grid; grid-template-columns: 180px 1fr 60px 70px 36px;
    align-items: center; gap: 16px;
    padding: 16px 0; border-bottom: 1px solid var(--color-border);
}
.metric-info-placeholder { width: 26px; }
.metric-row:last-child { border-bottom: none; }
.metric-label {
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: .92rem;
}
.metric-label i { color: var(--color-primary); width: 20px; text-align: center; }
.metric-bar-container {
    height: 10px; background: #e2e8f0; border-radius: 5px; overflow: hidden;
}
.metric-bar {
    height: 100%; border-radius: 5px;
    transition: width .8s ease;
}
.bar-excellent { background: linear-gradient(90deg, #059669, #34d399); }
.bar-good      { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.bar-average   { background: linear-gradient(90deg, #d97706, #fbbf24); }
.bar-poor      { background: linear-gradient(90deg, #dc2626, #f87171); }
.metric-value { font-weight: 800; font-size: .95rem; text-align: right; }
.metric-weight { font-size: .8rem; color: var(--color-text-muted); text-align: right; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer {
    background: #0f172a; color: #94a3b8; padding: 50px 20px 30px;
}
.footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr;
    gap: 40px; margin-bottom: 40px;
}
.footer h3 { color: #fff; font-size: 1rem; margin-bottom: 16px; }
.footer p { font-size: .88rem; line-height: 1.7; }
.footer-links a { display: block; color: #94a3b8; font-size: .88rem; margin-bottom: 10px; }
.footer-links a:hover { color: #fff; }
.footer-bottom {
    border-top: 1px solid #1e293b; padding-top: 20px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: .82rem; flex-wrap: wrap; gap: 12px;
}
.footer-bottom a { color: #94a3b8; }
.footer-bottom a:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .navbar-links { 
        display: none; flex-direction: column;
        position: absolute; top: 64px; left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--color-border);
        padding: 20px; gap: 16px;
    }
    .navbar-links.open { display: flex; }
    .navbar-toggle { display: block; }
    .navbar-right { gap: 8px; }
    .navbar-right .btn-login span { display: none; }
    .navbar-right .btn-login { padding: 6px 10px; }
    
    .hero { padding: 50px 20px 70px; }
    .hero h1 { font-size: 1.8rem; }
    .hero p { font-size: .95rem; }
    
    .metrics-grid { grid-template-columns: 1fr; }
    
    .ranking-table { font-size: .85rem; }
    .ranking-table th:nth-child(3),
    .ranking-table td:nth-child(3) { display: none; }
    
    .city-hero h1 { font-size: 1.6rem; }
    .city-hero .hero-flag { width: 36px; height: 26px; margin-right: 8px; }
    .city-score-number { font-size: 3rem; }
    .metric-row { grid-template-columns: 120px 1fr 50px 30px; }
    .metric-weight { display: none; }
    
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }

    /* Proximity responsive */
    .proximity-input-row { flex-direction: column; gap: 14px; }
    .proximity-panel { padding: 18px 16px; }
    .prox-radius-options { gap: 4px; }
    .prox-radius-btn { padding: 9px 4px; font-size: .8rem; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 1.5rem; }
    .section { padding: 50px 16px; }
    .city-score-card { margin: -30px 16px 30px; padding: 24px; }
}

/* ─── Loader spinner ───────────────────────────────────────── */
.loader {
    display: flex; justify-content: center; padding: 40px;
}
.loader::after {
    content: ''; width: 36px; height: 36px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   ADMIN PANEL — FREEMIUM SECTION (city.php)
   ═══════════════════════════════════════════════════════════════ */
.admin-panel-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.admin-panel-section::before {
    content: ''; position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}
.admin-panel-section > .container { position: relative; z-index: 1; }

.admin-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    margin-bottom: 50px;
}

.admin-feature-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius);
    padding: 28px 24px;
    backdrop-filter: blur(8px);
    transition: transform var(--transition), border-color var(--transition);
}
.admin-feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, .4);
}
.admin-feature-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: rgba(37, 99, 235, .2); color: #60a5fa;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; margin-bottom: 16px;
}
.admin-feature-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; color: #fff; }
.admin-feature-card p { font-size: .88rem; color: #94a3b8; line-height: 1.6; margin-bottom: 16px; }

/* Blurred preview boxes in city.php admin section */
.admin-preview-box {
    position: relative; border-radius: var(--radius-sm);
    overflow: hidden; min-height: 100px;
}
.admin-blur-overlay {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    background: rgba(15, 23, 42, .4);
    backdrop-filter: blur(4px);
    color: #94a3b8; font-size: .8rem; text-align: center;
    padding: 10px;
    cursor: pointer;
    transition: background var(--transition);
}
.admin-blur-overlay:hover { background: rgba(15, 23, 42, .6); }
.admin-blur-overlay i { font-size: 1.4rem; color: #60a5fa; }
.admin-blur-content {
    filter: blur(3px);
    padding: 16px;
    background: rgba(255,255,255,.04);
    border-radius: var(--radius-sm);
}

/* RRSS items */
.admin-rrss-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0; font-size: .82rem; color: #cbd5e1;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.admin-rrss-item:last-child { border-bottom: none; }
.admin-rrss-item .admin-rrss-icon { color: #ff6600; font-size: .9rem; flex-shrink: 0; margin-top: 2px; }
.admin-rrss-item.negative { border-left: 3px solid #ef4444; padding-left: 10px; }
.admin-rrss-item.positive { border-left: 3px solid #22c55e; padding-left: 10px; }
.admin-rrss-item.neutral  { border-left: 3px solid #f59e0b; padding-left: 10px; }

/* Incident items */
.admin-incident-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; font-size: .82rem; color: #cbd5e1;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.admin-incident-item:last-child { border-bottom: none; }
.admin-incident-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.admin-incident-item.high .admin-incident-dot   { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.admin-incident-item.medium .admin-incident-dot  { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.admin-incident-item.low .admin-incident-dot     { background: #22c55e; box-shadow: 0 0 6px #22c55e; }

/* Data rows */
.admin-data-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; font-size: .85rem; color: #cbd5e1;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.admin-data-row:last-child { border-bottom: none; }
.admin-data-val { font-weight: 800; color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   INDEX — ADMIN CTA BANNER
   ═══════════════════════════════════════════════════════════════ */
.admin-cta-banner {
    padding: 60px 20px;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #fff;
}
.admin-banner-content {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 30px;
}
.admin-banner-text h2 {
    font-size: 1.6rem; font-weight: 800; margin-bottom: 10px;
    display: flex; align-items: center; gap: 12px;
}
.admin-banner-text p { color: #94a3b8; font-size: 1rem; max-width: 550px; }
.admin-banner-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 36px; border-radius: 50px;
    background: linear-gradient(135deg, #2563eb, #1a56db);
    color: #fff; font-weight: 700; font-size: 1rem;
    box-shadow: 0 4px 15px rgba(37, 99, 235, .3);
    transition: transform var(--transition), box-shadow var(--transition);
    white-space: nowrap;
}
.admin-banner-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, .5);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN LANDING PAGE (admin.php)
   ═══════════════════════════════════════════════════════════════ */
.admin-hero {
    padding: 100px 20px 80px;
    background: #0f172a;
    color: #fff; text-align: center;
    position: relative; overflow: hidden;
}
.admin-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(37, 99, 235, .15) 0%, transparent 60%);
    z-index: 2;
}
.admin-hero-content { position: relative; z-index: 3; max-width: 750px; margin: 0 auto; }
.admin-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 24px; border-radius: 50px;
    background: rgba(255,255,255,.1); color: #e2e8f0;
    font-size: .9rem; font-weight: 600; margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,.15);
}
.admin-hero h1 { font-size: 3rem; font-weight: 900; line-height: 1.15; margin-bottom: 20px; }
.admin-hero p { font-size: 1.15rem; color: #cbd5e1; margin-bottom: 36px; line-height: 1.7; }

/* Features list (alternating rows) */
.admin-features-list { max-width: 900px; margin: 0 auto; }
.admin-feature-row {
    display: flex; align-items: center; gap: 40px;
    margin-bottom: 60px;
}
.admin-feature-row--reverse { flex-direction: row-reverse; }
.admin-feature-info { flex: 1; }
.admin-feature-num {
    font-size: .8rem; font-weight: 800;
    color: var(--color-primary); letter-spacing: .1em;
    margin-bottom: 8px;
}
.admin-feature-info h3 {
    font-size: 1.3rem; font-weight: 800; margin-bottom: 12px;
    display: flex; align-items: center; gap: 10px;
}
.admin-feature-info h3 i { color: var(--color-primary); }
.admin-feature-info p { color: var(--color-text-muted); line-height: 1.7; }
.admin-feature-visual { flex: 1; max-width: 380px; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — ADMIN SECTIONS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .admin-features-grid { grid-template-columns: 1fr; }
    .admin-hero h1 { font-size: 2rem; }
    .admin-banner-content { flex-direction: column; text-align: center; }
    .admin-banner-text h2 { justify-content: center; font-size: 1.3rem; }
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN LANDING v2 — admin.php
   ═══════════════════════════════════════════════════════════════ */
.admin-landing-page .admin-hero {
    background: #0f172a;
    padding: 140px 0 80px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 480px;
}
.admin-hero .hero-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
    will-change: opacity;
    z-index: 0;
}
.admin-hero .hero-slide--active {
    opacity: 1;
}
.admin-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(15,23,42,.75) 0%, rgba(49,46,129,.65) 100%);
    z-index: 1;
}
.admin-hero-content { max-width: 700px; margin: 0 auto; position: relative; z-index: 2; }
.admin-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(37, 99, 235, .25); color: #93c5fd;
    padding: 8px 18px; border-radius: 999px;
    font-size: .85rem; font-weight: 600; margin-bottom: 24px;
}
.admin-hero h1 { font-size: 2.8rem; font-weight: 800; line-height: 1.15; margin-bottom: 20px; }
.admin-hero-sub { font-size: 1.15rem; color: #94a3b8; line-height: 1.7; margin-bottom: 32px; }
.admin-hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.btn-primary-lg {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--color-primary); color: #fff;
    padding: 14px 28px; border-radius: 10px;
    font-weight: 700; font-size: 1rem;
    text-decoration: none; border: none; cursor: pointer;
    transition: all .2s;
}
.btn-primary-lg:hover { background: #1d4ed8; transform: translateY(-2px); }
.btn-outline-lg {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; color: #93c5fd;
    padding: 14px 28px; border-radius: 10px;
    border: 2px solid rgba(196,181,253,.3);
    font-weight: 600; font-size: 1rem;
    text-decoration: none; cursor: pointer;
    transition: all .2s;
}
.btn-outline-lg:hover { border-color: #93c5fd; background: rgba(37,99,235,.1); }
.btn-login {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-primary); font-weight: 600;
    text-decoration: none;
}

/* Features Grid */
.admin-features-section { background: #0f172a; color: #fff; padding: 80px 0; }
.admin-features-section .section-header h2 { color: #fff; }
.admin-features-section .section-header p { color: #94a3b8; }

/* Seal Banner Preview */
.admin-seal-section { background: #0f172a; color: #fff; padding: 80px 0; }
.admin-seal-section .section-header h2 { color: #fff; }
.admin-seal-section .section-header p { color: #94a3b8; }

.seal-banner-preview { max-width: 520px; margin: 0 auto; text-align: center; }
.seal-banner-demo {
    border-radius: 14px; padding: 3px; margin-bottom: 20px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
}
.seal-banner-demo.seal-silver { background: linear-gradient(135deg, #cbd5e1, #94a3b8, #64748b); }
.seal-banner-demo.seal-bronze { background: linear-gradient(135deg, #d4a574, #cd7f32, #a0522d); }
.seal-banner-inner {
    background: #1e293b; border-radius: 12px;
    padding: 24px 32px; display: flex; align-items: center; gap: 20px;
}
.seal-banner-icon i { font-size: 2.2rem; color: #fbbf24; }
.seal-banner-demo.seal-silver .seal-banner-icon i { color: #94a3b8; }
.seal-banner-demo.seal-bronze .seal-banner-icon i { color: #cd7f32; }
.seal-banner-info { flex: 1; text-align: left; }
.seal-banner-label { display: block; font-size: .85rem; font-weight: 700; color: #fbbf24; text-transform: uppercase; letter-spacing: .5px; }
.seal-banner-demo.seal-silver .seal-banner-label { color: #cbd5e1; }
.seal-banner-demo.seal-bronze .seal-banner-label { color: #d4a574; }
.seal-banner-city { display: block; font-size: 1.2rem; font-weight: 800; color: #fff; margin: 2px 0; }
.seal-banner-score { display: block; font-size: .9rem; color: #94a3b8; }
.seal-banner-brand { text-align: right; }
.seal-banner-cr { display: block; font-size: .85rem; font-weight: 700; color: #64748b; }
.seal-banner-year { display: block; font-size: .75rem; color: #475569; }
.seal-banner-caption { font-size: .9rem; color: #64748b; }
.seal-banner-caption i { margin-right: 6px; }

/* Plan Cards */
.admin-plan-section { padding: 80px 0; }
.admin-plans-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px; max-width: 1200px; margin: 0 auto;
    align-items: start;
}
.admin-plan-card {
    background: #fff; border-radius: 20px;
    border: 2px solid var(--color-primary);
    overflow: hidden; box-shadow: 0 20px 50px rgba(37,99,235,.12);
}
.plan-card-pol {
    border-color: #334155;
    box-shadow: 0 20px 50px rgba(51,65,85,.15);
}
.plan-card-legal {
    border-color: #059669;
    box-shadow: 0 20px 50px rgba(5,150,105,.15);
}
.plan-header {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    padding: 40px 32px; text-align: center; color: #fff;
}
.plan-header-pol {
    background: linear-gradient(135deg, #1e293b, #334155);
}
.plan-cta-pol {
    background: linear-gradient(135deg, #1e293b, #334155) !important;
    box-shadow: 0 4px 20px rgba(30,41,59,.4) !important;
}
.plan-cta-pol:hover {
    box-shadow: 0 8px 30px rgba(30,41,59,.5) !important;
}
.plan-badge {
    display: inline-block; padding: 4px 16px; border-radius: 999px;
    background: rgba(255,255,255,.2); font-size: .8rem; font-weight: 800;
    letter-spacing: 1px; margin-bottom: 12px;
}
.plan-header h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: 6px; }
.plan-desc { font-size: .95rem; color: #bfdbfe; margin-bottom: 20px; }
.plan-price { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.plan-amount { font-size: 3.5rem; font-weight: 900; }
.plan-features { padding: 32px; }
.plan-features ul { list-style: none; padding: 0; }
.plan-features li {
    padding: 10px 0; border-bottom: 1px solid #f1f5f9;
    display: flex; align-items: center; gap: 10px;
    font-size: .95rem; color: var(--color-text);
}
.plan-features li:last-child { border-bottom: none; }
.plan-features li i { color: var(--color-success); font-size: .9rem; }
.plan-footer { padding: 0 32px 32px; text-align: center; }
.plan-cta { width: 100%; justify-content: center; }
.plan-trial { display: block; margin-top: 12px; font-size: .85rem; color: var(--color-text-muted); }

/* How it Works Steps */

/* ── 20 Indicators Grid (admin.php) ── */
.admin-indicators-section { padding: 80px 0; background: #0f172a; color: #fff; }
.admin-indicators-section .section-header h2 { color: #fff; }
.admin-indicators-section .section-header p { color: #94a3b8; }
.admin-indicators-grid {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
    max-width: 900px; margin: 0 auto;
}
.admin-indicator-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 50px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: #e2e8f0; font-size: .88rem; font-weight: 500;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.admin-indicator-chip:hover {
    background: rgba(37, 99, 235, .18);
    border-color: rgba(37, 99, 235, .4);
    transform: translateY(-2px);
}
.admin-indicator-chip i { color: #60a5fa; font-size: .95rem; }

/* ── Comparativa Gratis vs PRO (admin.php) ── */
.admin-compare-section { padding: 80px 0; background: #fff; }
.admin-compare-table-wrap {
    max-width: 720px; margin: 0 auto;
    border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.admin-compare-table {
    width: 100%; border-collapse: collapse; font-size: .92rem;
}
.admin-compare-table thead th {
    padding: 16px 20px; font-weight: 700; text-align: center;
    background: #f8fafc; color: #334155; border-bottom: 2px solid #e2e8f0;
}
.admin-compare-table thead th:first-child { text-align: left; }
.admin-compare-table thead th.compare-pro {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
}
.admin-compare-table thead th.compare-pol {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #fff;
}
.admin-compare-table td.compare-pol { background: rgba(30,41,59,.03); }
.admin-compare-table thead th.compare-legal {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
}
.admin-compare-table td.compare-legal { background: rgba(5,150,105,.03); }
.admin-compare-table tbody td {
    padding: 14px 20px; border-bottom: 1px solid #f1f5f9;
    text-align: center; color: #475569;
}
.admin-compare-table tbody td:first-child { text-align: left; font-weight: 500; color: #1e293b; }
.admin-compare-table tbody tr:last-child td { border-bottom: none; }
.admin-compare-table tbody tr:hover { background: #f8fafc; }

.admin-steps-section { padding: 80px 0; background: #fff; }
.admin-steps-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
    max-width: 1100px; margin: 0 auto;
}
.admin-step-card {
    text-align: center; padding: 32px 24px;
    border-radius: 16px; background: #f8fafc;
    border: 1px solid var(--color-border);
    position: relative; transition: transform .2s, box-shadow .2s;
}
.admin-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.admin-step-num {
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #1a56db);
    color: #fff; font-size: .85rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.admin-step-icon {
    width: 56px; height: 56px; border-radius: 16px;
    background: var(--color-primary-l); color: var(--color-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin-bottom: 16px;
}
.admin-step-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
.admin-step-card p { font-size: .9rem; color: var(--color-text-muted); line-height: 1.5; }

/* Contact Form */
.admin-contact-section { background: #f8fafc; padding: 80px 0; }
.admin-contact-form {
    max-width: 640px; margin: 0 auto;
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 36px;
    box-shadow: var(--shadow);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; }
.form-group label { font-size: .85rem; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.form-group input, .form-group textarea, .form-group select {
    width: 100%; padding: 12px 16px; border: 1px solid var(--color-border);
    border-radius: 8px; font-size: .95rem; font-family: inherit;
    transition: border-color .2s; outline: none;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline: none; border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.form-group-full { margin-bottom: 20px; }
.form-submit { width: 100%; justify-content: center; font-size: 1.05rem; }
.form-error {
    background: #fef2f2; color: #dc2626; padding: 12px 16px;
    border-radius: 8px; margin-bottom: 20px; font-size: .9rem;
    display: flex; align-items: center; gap: 8px;
}
.admin-form-success {
    text-align: center; padding: 60px 20px;
    background: #fff; border-radius: var(--radius);
    border: 1px solid var(--color-border);
}
.admin-form-success i { font-size: 3rem; color: var(--color-success); margin-bottom: 16px; }
.admin-form-success h3 { font-size: 1.3rem; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
.admin-form-success p { font-size: 1.1rem; font-weight: 600; color: var(--color-text); }

/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════════ */
.login-page {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.login-container { width: 100%; max-width: 420px; }
.login-card {
    background: #fff; border-radius: 20px; padding: 48px 36px;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    text-align: center;
    position: relative;
}
.login-close {
    position: absolute; top: 16px; right: 20px;
    font-size: 1.8rem; line-height: 1; color: #94a3b8;
    text-decoration: none; font-weight: 300;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: all .2s;
}
.login-close:hover { background: #f1f5f9; color: #334155; }

/* Floating lang selector on login pages */
.login-lang-float {
    position: fixed; top: 20px; right: 20px; z-index: 200;
}
.login-lang-float .btn-lang {
    background: rgba(255,255,255,.15); color: #fff;
    backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2);
}
.login-lang-float .btn-lang:hover {
    background: rgba(255,255,255,.25); color: #fff;
}

/* Panel nav lang button */
.btn-lang-panel {
    background: var(--color-primary-l) !important; color: var(--color-primary) !important;
    padding: 6px 14px !important; font-size: .9rem !important; font-weight: 600 !important;
}
.btn-lang-panel:hover { background: var(--color-primary) !important; color: #fff !important; }
.login-brand {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 1.3rem; font-weight: 800; color: var(--color-dark);
    text-decoration: none; margin-bottom: 24px;
}
.login-brand .logo-icon {
    width: 42px; height: 42px; object-fit: contain;
    border-radius: 9px;
    filter: drop-shadow(0 3px 8px rgba(30, 58, 138, .35));
}
.login-card h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 28px; color: var(--color-dark); }
.login-form .form-group { text-align: left; margin-bottom: 16px; }
.login-submit { width: 100%; justify-content: center; margin-top: 8px; }
.login-remember { display:flex; align-items:center; gap:8px; font-size:.88rem; color:#475569; cursor:pointer; margin-top:4px; user-select:none; }
.login-remember input[type="checkbox"] { width:16px; height:16px; accent-color:#2563eb; cursor:pointer; }
.login-footer { margin-top: 20px; font-size: .85rem; }
.login-footer a { color: var(--color-primary); text-decoration: none; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   PANEL DASHBOARD
   ═══════════════════════════════════════════════════════════════ */
.panel-page { background: #f8fafc; min-height: 100vh; }
.panel-nav {
    background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    padding: 0 20px; position: sticky; top: 0; z-index: 100;
}
.panel-nav .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.panel-badge-nav {
    background: var(--color-primary); color: #fff; font-size: .65rem;
    padding: 2px 8px; border-radius: 4px; font-weight: 800; margin-left: 8px;
    vertical-align: middle;
}
.sa-badge { background: #dc2626; }
.panel-nav-right { display: flex; align-items: center; gap: 16px; }
.panel-user { color: var(--color-text-muted); font-size: .9rem; font-weight: 500; }
.btn-logout {
    color: #ef4444; font-size: .9rem; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
}
.btn-logout:hover { color: #dc2626; }

.panel-main { padding: 0; }

/* ═══ Embed mode (inside superadmin iframe) ═══ */
.panel-embed-mode { background: #fff; margin: 0; }
.panel-embed-mode .panel-main { padding: 0; }
.panel-embed-mode .panel-hero { min-height: 100px; padding: 24px 24px 20px; margin-bottom: 16px; }
.panel-embed-mode .panel-hero-content h1 { font-size: 1.25rem; }
.panel-embed-mode .panel-hero-actions .btn-export-pdf { display: none; }

/* ═══ Panel Hero with slideshow ═══ */
.panel-hero {
    position: relative;
    overflow: hidden;
    padding: 48px 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    min-height: 160px;
    margin-bottom: 32px;
}
.panel-hero-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
    will-change: opacity;
}
.panel-hero-slide--active {
    opacity: 1;
}
.panel-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(26,86,219,.72) 0%, rgba(37,99,235,.60) 100%);
    z-index: 1;
}
.panel-hero-content {
    position: relative; z-index: 2;
}
.panel-hero-content h1 {
    font-size: 1.6rem; font-weight: 800; color: #fff;
    margin: 0 0 4px;
}
.panel-hero-content .panel-subtitle {
    color: rgba(255,255,255,.85); font-size: .95rem; margin-top: 4px;
}
.panel-hero-content .panel-subtitle strong { color: #fff; }
.panel-hero-actions {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.panel-hero-actions .panel-seal { background: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(6px); }
.panel-hero-actions .btn-export-pdf {
    background: rgba(255,255,255,.2); color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    backdrop-filter: blur(6px);
}
.panel-hero-actions .btn-export-pdf:hover {
    background: rgba(255,255,255,.35);
}

.panel-subtitle { color: var(--color-text-muted); font-size: .95rem; margin-top: 4px; }
.panel-seal {
    display: flex; align-items: center; gap: 8px; padding: 10px 20px;
    border-radius: 12px; font-weight: 700; font-size: .95rem;
}
.panel-seal.seal-gold { background: #fef3c7; color: #92400e; }
.panel-seal.seal-silver { background: #f1f5f9; color: #475569; }
.panel-seal.seal-bronze { background: #fde8d0; color: #7c2d12; }

/* CivisRank Badge — TripAdvisor style */
.cr-badge-wrap {
    margin-bottom: 28px;
}
.cr-badge {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 14px 22px 14px 14px;
    border-radius: 14px; text-decoration: none;
    transition: box-shadow .25s, transform .15s;
    border: 2px solid;
}
.cr-badge:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.cr-badge-gold { background: #fffbeb; border-color: #F59E0B; }
.cr-badge-silver { background: #f8fafc; border-color: #94A3B8; }
.cr-badge-bronze { background: #fef7ed; border-color: #CD7F32; }

.cr-badge-score-circle {
    display: flex; align-items: baseline; gap: 2px;
    padding: 10px 14px; border-radius: 10px;
    color: #fff; line-height: 1; flex-shrink: 0;
}
.cr-badge-gold .cr-badge-score-circle { background: #F59E0B; }
.cr-badge-silver .cr-badge-score-circle { background: #64748b; }
.cr-badge-bronze .cr-badge-score-circle { background: #CD7F32; }
.cr-badge-score { font-size: 1.8rem; font-weight: 900; }
.cr-badge-max { font-size: .85rem; font-weight: 600; opacity: .8; }

.cr-badge-body {
    display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.cr-badge-level {
    font-size: 1rem; font-weight: 800; line-height: 1.2;
}
.cr-badge-gold .cr-badge-level { color: #92400e; }
.cr-badge-silver .cr-badge-level { color: #334155; }
.cr-badge-bronze .cr-badge-level { color: #7c2d12; }
.cr-badge-stars {
    font-size: .95rem; letter-spacing: 1px;
}
.cr-badge-gold .cr-badge-stars { color: #F59E0B; }
.cr-badge-silver .cr-badge-stars { color: #94a3b8; }
.cr-badge-bronze .cr-badge-stars { color: #CD7F32; }
.cr-badge-city {
    font-size: .78rem; color: #64748b; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cr-badge-brand {
    display: flex; flex-direction: column; align-items: flex-end;
    margin-left: auto; flex-shrink: 0;
}
.cr-badge-logo {
    font-size: .9rem; font-weight: 800; color: var(--color-primary);
    letter-spacing: -.3px;
}
.cr-badge-year {
    font-size: .7rem; color: #94a3b8; font-weight: 600;
}

.cr-badge-meta {
    display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap;
}
.cr-badge-update {
    font-size: .78rem; color: #64748b;
    display: flex; align-items: center; gap: 5px;
}
.cr-badge-note {
    font-size: .72rem; color: #94a3b8; font-style: italic;
}

/* Date filter bar */
.panel-date-filter {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 28px; padding: 12px 18px;
    background: #f8fafc; border: 1px solid var(--color-border);
    border-radius: 12px;
}
.panel-date-filter-label {
    font-size: .85rem; font-weight: 600; color: var(--color-text-muted);
    margin-right: 4px; display: flex; align-items: center; gap: 6px;
}
.panel-period-btn {
    padding: 6px 16px; border-radius: 8px; font-size: .85rem; font-weight: 600;
    color: var(--color-text); background: #fff; border: 1px solid var(--color-border);
    text-decoration: none; transition: all .2s; cursor: pointer; font-family: inherit;
}
.panel-period-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.panel-period-btn.active {
    background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}

.panel-section {
    background: #fff; border-radius: 16px; padding: 28px;
    border: 1px solid var(--color-border); margin-bottom: 24px;
    transition: background .3s ease, padding .3s ease, border-color .3s ease;
}
.panel-section.panel-section-collapsed {
    background: #f8fafc; padding: 18px 28px;
    border-color: #e2e8f0;
}
.panel-section.panel-section-collapsed .panel-section-header { margin-bottom: 0; }
.panel-section.panel-section-collapsed .panel-section-sub { display: none; }
.panel-section.panel-section-expanded {
    background: #fff; padding: 28px;
    border-color: var(--color-border);
}
.panel-section h2 {
    font-size: 1.15rem; font-weight: 700; margin-bottom: 20px;
    display: flex; align-items: center; gap: 8px;
}
.panel-section h2 i { color: var(--color-primary); }

.panel-metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.panel-metric-card {
    padding: 16px; border: 1px solid #f1f5f9; border-radius: 10px;
    transition: border-color .2s;
}
.panel-metric-card:hover { border-color: var(--color-primary); }
.panel-metric-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.panel-metric-header i { color: var(--color-primary); font-size: .9rem; }
.panel-metric-name { flex: 1; font-size: .9rem; font-weight: 600; }
.panel-metric-value { font-size: 1.1rem; font-weight: 800; color: var(--color-primary); }
.panel-metric-header .panel-info-btn { margin-left: 4px; }
.panel-metric-info-panel { margin-top: 10px; }
.panel-metric-bar-bg { height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden; }
.panel-metric-bar { height: 100%; border-radius: 3px; transition: width .5s ease; }
.panel-metric-weight { font-size: .75rem; color: var(--color-text-muted); margin-top: 6px; }

.panel-coming-soon {
    text-align: center; color: var(--color-text-muted); padding: 40px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.panel-no-city { text-align: center; padding: 80px 20px; color: var(--color-text-muted); }
.panel-no-city i { font-size: 3rem; margin-bottom: 16px; color: #cbd5e1; }

/* Seal banner inside panel */
.panel-embed-code { margin-top: 16px; text-align: left; }
.panel-embed-code label { font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.panel-embed-code textarea {
    width: 100%; padding: 12px; border: 1px solid var(--color-border);
    border-radius: 8px; font-family: monospace; font-size: .8rem;
    background: #f8fafc; resize: vertical;
}

/* ═══════════════════════════════════════════════════════════════
   SUPERADMIN
   ═══════════════════════════════════════════════════════════════ */
.sa-nav { background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); }
.sa-msg {
    padding: 12px 16px; border-radius: 8px; margin-bottom: 20px;
    background: #f0fdf4; color: #166534; font-weight: 600; font-size: .9rem;
}
.sa-tabs { display: flex; gap: 4px; margin-bottom: 24px; }
.sa-tab {
    padding: 10px 20px; border-radius: 8px 8px 0 0;
    background: #e2e8f0; color: var(--color-text-muted);
    text-decoration: none; font-weight: 600; font-size: .9rem;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all .2s;
}
.sa-tab.active { background: #fff; color: var(--color-dark); border-bottom: 2px solid var(--color-primary); }
.sa-badge-count {
    background: #dc2626; color: #fff; font-size: .7rem;
    padding: 2px 8px; border-radius: 999px; font-weight: 800;
}
.sa-section { margin-bottom: 24px; }
.sa-form-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
    align-items: end;
}
.sa-form-grid input, .sa-form-grid select {
    padding: 10px 12px; border: 1px solid var(--color-border);
    border-radius: 8px; font-size: .9rem; font-family: inherit;
}
.btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--color-primary); color: #fff;
    padding: 10px 18px; border-radius: 8px; border: none;
    font-weight: 700; font-size: .9rem; cursor: pointer;
    transition: all .2s;
}
.btn-primary:hover { background: #1d4ed8; }

.sa-table-wrap { overflow-x: auto; }
.sa-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.sa-table th {
    text-align: left; padding: 10px 12px; background: #f8fafc;
    font-weight: 700; color: var(--color-text-muted); font-size: .8rem;
    text-transform: uppercase; letter-spacing: .5px;
    border-bottom: 2px solid var(--color-border);
}
.sa-table td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.sa-role-badge {
    padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700;
    text-transform: uppercase; display: inline-block; white-space: nowrap;
}
.sa-role-superadmin { background: #fef3c7; color: #92400e; }
.sa-role-admin { background: #dbeafe; color: #1d4ed8; }
.sa-status-active { color: #059669; font-weight: 600; }
.sa-status-inactive { color: #dc2626; font-weight: 600; }
.sa-owner-badge { color: #f59e0b; font-size: 1.1rem; }
.sa-actions-cell { display: flex; gap: 6px; }
.sa-btn-sm {
    width: 32px; height: 32px; border-radius: 6px; border: none;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .8rem; transition: all .2s;
}
.sa-btn-ok { background: #d1fae5; color: #059669; }
.sa-btn-ok:hover { background: #a7f3d0; }
.sa-btn-warn { background: #fef3c7; color: #d97706; }
.sa-btn-warn:hover { background: #fde68a; }
.sa-btn-danger { background: #fee2e2; color: #dc2626; }
.sa-btn-danger:hover { background: #fecaca; }

.sa-req-status { padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.sa-req-status-pending { background: #fef3c7; color: #92400e; }
.sa-req-status-contacted { background: #dbeafe; color: #1e40af; }
.sa-req-status-approved { background: #d1fae5; color: #065f46; }
.sa-req-status-rejected { background: #fee2e2; color: #991b1b; }

.sa-req-form { display: flex; gap: 8px; align-items: center; }
.sa-req-form select { padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 6px; font-size: .8rem; }
.sa-notes-input { padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 6px; font-size: .8rem; width: 120px; }
.sa-req-msg-row td { font-size: .85rem; color: var(--color-text-muted); background: #fafafa; }

/* ═══════════════════════════════════════════════════════════════
   OPINIONS — admin.php Google Opinions section
   ═══════════════════════════════════════════════════════════════ */
.opinions-stats-bar {
    display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
    justify-content: center;
}
.opinion-stat {
    text-align: center; padding: 16px 24px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); min-width: 100px;
    box-shadow: var(--shadow);
}
.opinion-stat-num { display: block; font-size: 1.5rem; font-weight: 800; color: var(--color-text); }
.opinion-stat-label { display: block; font-size: .75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.opinion-stat.positive .opinion-stat-num { color: #059669; }
.opinion-stat.negative .opinion-stat-num { color: #DC2626; }

.opinion-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 20px;
    box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s;
    border-left: 4px solid var(--color-border);
}
.opinion-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.opinion-card.opinion-positive { border-left-color: #10B981; }
.opinion-card.opinion-negative { border-left-color: #EF4444; }
.opinion-card.opinion-neutral  { border-left-color: #F59E0B; }

.opinion-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.opinion-author { display: flex; align-items: center; gap: 8px; }
.opinion-source-icon { font-size: 1.1rem; color: var(--color-text-muted); }
.opinion-stars { color: #F59E0B; font-size: .9rem; letter-spacing: 1px; }
.opinion-text { font-size: .9rem; color: var(--color-text); line-height: 1.5; margin-bottom: 12px; }
.opinion-sentiment { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: .75rem; }
.opinion-sentiment-positive { background: #D1FAE5; color: #065F46; }
.opinion-sentiment-negative { background: #FEE2E2; color: #991B1B; }
.opinion-sentiment-neutral  { background: #FEF3C7; color: #92400E; }
.opinion-date { font-size: .78rem; }

/* ═══════════════════════════════════════════════════════════════
   INCIDENT MAP — admin.php
   ═══════════════════════════════════════════════════════════════ */
.incident-stats-bar {
    display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
    justify-content: center;
}
.incident-stat {
    text-align: center; padding: 14px 20px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); min-width: 90px;
    box-shadow: var(--shadow);
}
.incident-stat-num { display: block; font-size: 1.4rem; font-weight: 800; }
.incident-stat-label { display: block; font-size: .72rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.incident-stat.open .incident-stat-num { color: #F59E0B; }
.incident-stat.progress .incident-stat-num { color: var(--color-primary); }
.incident-stat.high .incident-stat-num { color: #DC2626; }

.incident-map-container {
    width: 100%; height: 420px; border-radius: var(--radius);
    border: 1px solid var(--color-border); margin-bottom: 20px;
    overflow: hidden;
}

.incident-list { display: flex; flex-direction: column; gap: 8px; }
.incident-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    cursor: pointer; transition: all .2s;
}
.incident-row:hover { background: var(--color-primary-l); border-color: var(--color-primary); transform: translateX(4px); }
.incident-icon { font-size: 1.3rem; flex-shrink: 0; width: 36px; text-align: center; }
.incident-info { flex: 1; min-width: 0; }
.incident-info strong { display: block; font-size: .9rem; color: var(--color-text); }
.incident-address { display: block; font-size: .78rem; color: var(--color-text-muted); margin-top: 2px; }
.incident-meta { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.incident-severity {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; color: #fff; text-transform: uppercase;
}
.incident-status {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .72rem; font-weight: 600; background: #E2E8F0; color: #475569;
}
.incident-status-open { background: #FEF3C7; color: #92400E; }
.incident-status-in_progress { background: #DBEAFE; color: #1E40AF; }
.incident-status-resolved { background: #D1FAE5; color: #065F46; }

/* ═══════════════════════════════════════════════════════════════
   METRIC INFO TOOLTIPS — city.php (i) buttons
   ═══════════════════════════════════════════════════════════════ */
.metric-info-btn {
    background: none; border: 1.5px solid var(--color-border);
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-text-muted); font-size: .75rem;
    transition: all .2s; flex-shrink: 0; margin: 0;
    justify-self: center;
}
.metric-info-btn:hover, .metric-info-btn.active {
    background: var(--color-primary); color: #fff;
    border-color: var(--color-primary);
}
.metric-info-panel {
    display: none; padding: 16px 20px; margin: 8px 0 4px;
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    font-size: .85rem; line-height: 1.6; color: var(--color-text);
    animation: infoSlideDown .25s ease;
}
.metric-info-panel.visible { display: block; }
@keyframes infoSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.metric-info-content { margin-bottom: 6px; }
.metric-info-content > i { margin-right: 6px; }

/* ═══════════════════════════════════════════════════════════════
   PANEL PRO — Opinions & Incidents full sections
   ═══════════════════════════════════════════════════════════════ */
.panel-section-header { margin-bottom: 16px; transition: margin .3s ease; }
.panel-section-header h2 { margin-bottom: 4px; }
.panel-section-sub { font-size: .88rem; color: var(--color-text-muted); margin: 0; }

.panel-rrss-section, .panel-incidents-section {
    margin-bottom: 24px;
}

/* Stats pills */
.panel-opinion-stats {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.panel-stat-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600;
    background: #F1F5F9; color: #475569;
}
.panel-stat-pill.total    { background: #EFF6FF; color: var(--color-primary); }
.panel-stat-pill.positive { background: #D1FAE5; color: #065F46; }
.panel-stat-pill.neutral  { background: #FEF3C7; color: #92400E; }
.panel-stat-pill.negative { background: #FEE2E2; color: #991B1B; }
.panel-stat-pill.rating   { background: #FEF3C7; color: #92400E; }
.panel-stat-pill.open     { background: #FEF3C7; color: #92400E; }
.panel-stat-pill.progress { background: #DBEAFE; color: #1E40AF; }
.panel-stat-pill.high     { background: #FEE2E2; color: #991B1B; }

/* Source filter tabs */
.panel-source-filter {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.source-tab {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 16px; border-radius: 999px; border: 1.5px solid var(--color-border);
    background: var(--color-surface); color: var(--color-text-muted);
    font-size: .82rem; font-weight: 600; cursor: pointer;
    transition: all .2s; font-family: inherit;
}
.source-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.source-tab.active {
    background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}

/* Panel opinion items */
.panel-opinions-list { display: flex; flex-direction: column; gap: 10px; }
.panel-opinion-item {
    padding: 16px; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    border-left: 4px solid var(--color-border);
    transition: all .2s;
}
.panel-opinion-item:hover { box-shadow: var(--shadow); }
.panel-opinion-positive { border-left-color: #10B981; }
.panel-opinion-negative { border-left-color: #EF4444; }
.panel-opinion-neutral  { border-left-color: #F59E0B; }

.panel-opinion-head {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
}
.panel-opinion-author {
    display: flex; align-items: center; gap: 8px; font-size: .88rem;
}
.panel-opinion-src-icon { font-size: 1rem; color: var(--color-text-muted); }
.panel-opinion-source-tag {
    font-size: .7rem; padding: 2px 8px; border-radius: 999px;
    background: #F1F5F9; color: var(--color-text-muted); font-weight: 600;
}
.panel-opinion-meta {
    display: flex; align-items: center; gap: 8px;
}
.panel-opinion-stars { color: #F59E0B; font-size: .85rem; letter-spacing: 1px; }
.panel-opinion-sentiment {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600;
}
.panel-sentiment-positive { background: #D1FAE5; color: #065F46; }
.panel-sentiment-negative { background: #FEE2E2; color: #991B1B; }
.panel-sentiment-neutral  { background: #FEF3C7; color: #92400E; }

.panel-opinion-text { font-size: .88rem; line-height: 1.5; color: var(--color-text); margin-bottom: 8px; }
.panel-opinion-foot {
    display: flex; gap: 16px; font-size: .75rem; color: var(--color-text-muted);
}
.panel-opinion-date i, .panel-opinion-loc i { margin-right: 3px; }

/* Panel incident map */
.panel-incident-map {
    width: 100%; height: 350px; border-radius: var(--radius);
    border: 1px solid var(--color-border); margin-bottom: 16px;
    position: relative; z-index: 1;
}

/* Panel incident list */
.panel-incident-list { display: flex; flex-direction: column; gap: 8px; }
.panel-incident-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    cursor: pointer; transition: all .2s;
}
.panel-incident-row:hover { background: var(--color-primary-l); border-color: var(--color-primary); transform: translateX(3px); }
.panel-incident-icon { font-size: 1.2rem; flex-shrink: 0; width: 32px; text-align: center; }
.panel-incident-info { flex: 1; min-width: 0; }
.panel-incident-info strong { display: block; font-size: .88rem; }
.panel-incident-desc { display: block; font-size: .78rem; color: var(--color-text-muted); margin-top: 2px; }
.panel-incident-addr { display: block; font-size: .75rem; color: var(--color-text-muted); margin-top: 2px; }
.panel-incident-date { display: block; font-size: .72rem; color: var(--color-text-muted); margin-top: 2px; opacity: .7; }
.panel-incident-date i { margin-right: 3px; }
.panel-incident-badges { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }

/* Inline date filter for incidents section */
.panel-incident-date-filter {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-bottom: 16px; padding: 10px 14px;
    background: #f1f5f9; border: 1px solid var(--color-border);
    border-radius: 10px;
}
.panel-incident-date-label {
    font-size: .8rem; font-weight: 600; color: var(--color-text-muted);
    margin-right: 2px; display: flex; align-items: center; gap: 5px;
}
.panel-period-btn-sm {
    padding: 4px 12px; font-size: .78rem;
}
.panel-incident-severity {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .7rem; font-weight: 700; color: #fff; text-transform: uppercase;
}
.panel-incident-status {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .7rem; font-weight: 600; background: #E2E8F0; color: #475569;
}
.panel-incident-status-open { background: #FEF3C7; color: #92400E; }
.panel-incident-status-in_progress { background: #DBEAFE; color: #1E40AF; }
.panel-incident-status-resolved { background: #D1FAE5; color: #065F46; }

/* ═══════════════════════════════════════════════════════════════
   RTL — Arabic Support
   ═══════════════════════════════════════════════════════════════ */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] .navbar-links { flex-direction: row-reverse; }
html[dir="rtl"] .lang-dropdown-menu { right: auto; left: 0; }
html[dir="rtl"] .lang-dropdown-menu a { flex-direction: row-reverse; }
html[dir="rtl"] .seal-banner-info { text-align: right; }
html[dir="rtl"] .seal-banner-brand { text-align: left; }
html[dir="rtl"] .seal-banner-caption i { margin-right: 0; margin-left: 6px; }
html[dir="rtl"] .plan-features li { flex-direction: row-reverse; }
html[dir="rtl"] .plan-features li i { margin-left: 0; }
html[dir="rtl"] .panel-nav-right { flex-direction: row-reverse; }
html[dir="rtl"] .panel-metric-header { flex-direction: row-reverse; }
html[dir="rtl"] .sa-actions-cell { flex-direction: row-reverse; }
html[dir="rtl"] .form-group { text-align: right; }
html[dir="rtl"] .admin-hero-actions { flex-direction: row-reverse; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE v2
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .admin-plans-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .admin-hero h1 { font-size: 2rem; }
    .admin-hero-sub { font-size: 1rem; }
    .admin-hero-actions { flex-direction: column; align-items: center; }
    .plan-amount { font-size: 2.6rem; }
    .admin-plans-grid { grid-template-columns: 1fr; max-width: 480px; }
    .form-grid { grid-template-columns: 1fr; }
    .admin-steps-grid { grid-template-columns: repeat(2, 1fr); max-width: 500px; }
    .admin-indicators-grid { gap: 8px; }
    .admin-indicator-chip { padding: 8px 14px; font-size: .82rem; }
    .admin-compare-table { font-size: .82rem; }
    .admin-compare-table thead th,
    .admin-compare-table tbody td { padding: 10px 12px; }
    .panel-metrics-grid { grid-template-columns: 1fr; }
    .panel-hero { flex-direction: column; align-items: flex-start; padding: 32px 20px; }
    .panel-hero-content h1 { font-size: 1.3rem; }
    .sa-form-grid { grid-template-columns: 1fr; }
    .sa-req-form { flex-direction: column; align-items: stretch; }
    .sa-notes-input { width: 100%; }
    .seal-banner-inner { flex-direction: column; text-align: center; padding: 20px; }
    .seal-banner-info { text-align: center; }
    .cr-badge { flex-wrap: wrap; gap: 10px; padding: 12px; }
    .cr-badge-brand { flex-direction: row; gap: 6px; margin-left: 0; }
    .opinions-stats-bar, .incident-stats-bar { justify-content: flex-start; }
    .opinion-stat, .incident-stat { min-width: 70px; padding: 10px 14px; }
    .incident-map-container { height: 280px; }
    .panel-incident-map { height: 250px; }
    .incident-row { flex-wrap: wrap; }
    .incident-meta { width: 100%; justify-content: flex-end; }
    .panel-opinion-head { flex-direction: column; align-items: flex-start; }
    .panel-incident-row { flex-wrap: wrap; }
    .panel-incident-badges { width: 100%; justify-content: flex-end; }
    .panel-source-filter { gap: 4px; }
    .source-tab { padding: 5px 12px; font-size: .78rem; }
}

/* ═══════════════════════════════════════════════════════════════
   PANEL — WORD CLOUD & SENTIMENT ANALYSIS
   ═══════════════════════════════════════════════════════════════ */

.panel-wordcloud-section { margin-top: 24px; }

/* Word cloud container */
.wordcloud-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 12px;
    padding: 32px 24px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    min-height: 180px;
    position: relative;
}

.wordcloud-word {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 600;
    cursor: default;
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    position: relative;
}

.wordcloud-word:hover {
    transform: scale(1.12);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 2;
}

/* Sizes based on data-size (1-5) */
.wordcloud-word[data-size="1"] { font-size: 0.75rem; opacity: 0.75; }
.wordcloud-word[data-size="2"] { font-size: 0.88rem; opacity: 0.85; }
.wordcloud-word[data-size="3"] { font-size: 1.05rem; }
.wordcloud-word[data-size="4"] { font-size: 1.25rem; font-weight: 700; }
.wordcloud-word[data-size="5"] { font-size: 1.5rem; font-weight: 800; }

/* Sentiment colors */
.wordcloud-word.wc-positive {
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}
.wordcloud-word.wc-negative {
    background: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FECACA;
}
.wordcloud-word.wc-neutral {
    background: #F8FAFC;
    color: #475569;
    border: 1px solid #E2E8F0;
}

/* Word count badge */
.wordcloud-count {
    font-size: 0.65em;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 2px;
    opacity: 0.7;
}
.wc-positive .wordcloud-count { background: #D1FAE5; color: #065F46; }
.wc-negative .wordcloud-count { background: #FEE2E2; color: #991B1B; }
.wc-neutral  .wordcloud-count { background: #E2E8F0; color: #475569; }

/* Tooltip on hover */
.wordcloud-word .wc-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1E293B;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.wordcloud-word .wc-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1E293B;
}
.wordcloud-word:hover .wc-tooltip { display: block; }

/* Sentiment summary bar */
.wc-sentiment-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    margin: 16px 0 12px;
    background: #E2E8F0;
}
.wc-sentiment-bar .wc-bar-pos { background: #10B981; }
.wc-sentiment-bar .wc-bar-neu { background: #F59E0B; }
.wc-sentiment-bar .wc-bar-neg { background: #EF4444; }

/* Legend */
.wc-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 16px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}
.wc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.wc-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.wc-legend-dot.pos { background: #10B981; }
.wc-legend-dot.neg { background: #EF4444; }
.wc-legend-dot.neu { background: #F59E0B; }

/* Topic pills */
.wc-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}
.wc-topic-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    background: #EFF6FF;
    color: var(--color-primary);
    border: 1px solid #BFDBFE;
}
.wc-topic-pill i { font-size: 0.75rem; }
.wc-topic-count {
    font-size: 0.7rem;
    background: #BFDBFE;
    color: var(--color-primary-dark);
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 700;
}

/* Filter tabs for word cloud */
.wc-filter-tabs {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 16px;
}
.wc-filter-tab {
    padding: 5px 14px;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.wc-filter-tab:hover { background: #F1F5F9; }
.wc-filter-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

@media (max-width: 640px) {
    .wordcloud-container { padding: 20px 12px; gap: 6px 8px; }
    .wordcloud-word { padding: 4px 10px; }
    .wordcloud-word[data-size="5"] { font-size: 1.2rem; }
    .wc-legend { flex-wrap: wrap; gap: 10px; }
    .wc-filter-tabs { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════
   SUPERADMIN — Locations Management
   ═══════════════════════════════════════════════════════════ */

.sa-form-grid-loc {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.sa-form-grid-loc textarea {
    grid-column: span 2;
    resize: vertical;
    min-height: 50px;
    padding: 10px 14px;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    font-family: inherit;
    font-size: .92rem;
}
.sa-loc-actions { white-space: nowrap; }
.sa-loc-actions form { margin-right: 4px; }

/* Danger zone — mass delete panel */
.sa-danger-zone {
    border: 1.5px solid #FECACA;
    border-radius: 10px;
    margin-bottom: 1rem;
    background: #FFF5F5;
    overflow: hidden;
}
.sa-danger-summary {
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 700;
    font-size: .9rem;
    color: #991B1B;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sa-danger-summary::-webkit-details-marker { display: none; }
.sa-danger-summary::before {
    content: '▸';
    font-size: .8rem;
    transition: transform .2s;
}
.sa-danger-zone[open] > .sa-danger-summary::before {
    transform: rotate(90deg);
}
.sa-danger-body {
    padding: 0 16px 16px;
}
.sa-delete-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sa-delete-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: .85rem;
    color: #7F1D1D;
    transition: background .15s;
}
.sa-delete-opt:hover {
    background: #FEE2E2;
}
.sa-delete-opt input[type="radio"] {
    accent-color: #DC2626;
    margin: 0;
}
.sa-delete-opt strong {
    color: #991B1B;
}
@media (max-width: 640px) {
    .sa-delete-opt { flex-wrap: wrap; }
    .sa-delete-opt select { margin-left: 0 !important; margin-top: 4px; width: 100%; }
}
.sa-btn-info {
    background: #EFF6FF;
    color: #2563EB;
    border: 1px solid #BFDBFE;
}
.sa-btn-info:hover { background: #DBEAFE; }

/* Settings cards */
.sa-settings-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* Progress bar for CCAA creation */
.sa-progress-bar {
    width: 100%;
    height: 10px;
    background: #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}
.sa-progress-fill {
    height: 100%;
    border-radius: 8px;
    transition: width .5s ease;
    position: relative;
}
.sa-progress-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    animation: saProgressShimmer 1.5s ease-in-out infinite;
}
@keyframes saProgressShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.sa-edit-row td {
    background: #F8FAFC;
    border-top: 2px solid #E2E8F0;
}
.sa-edit-form { margin-bottom: 12px; }
.sa-metrics-summary {
    padding: 10px 0 4px;
    border-top: 1px solid #E2E8F0;
    margin-top: 8px;
    color: #64748B;
    font-size: .82rem;
    line-height: 1.8;
}
.sa-score {
    color: #2563EB;
    font-size: 1.05rem;
}
.sa-seal {
    font-size: .88rem;
    font-weight: 600;
}
.sa-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .9rem;
    font-weight: 500;
}
.sa-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #2563EB;
}
.hidden { display: none !important; }
.text-muted { color: #94A3B8; }

/* ─── SA Location Search Autocomplete ────────────────────── */
.sa-loc-search-wrap { max-width: 700px; }
.sa-search-box { position: relative; }
.sa-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--color-text-muted); font-size: .95rem; pointer-events: none;
}
.sa-search-input {
    width: 100%; padding: 12px 16px 12px 40px;
    border: 2px solid var(--color-border); border-radius: var(--radius);
    font-size: 1rem; background: var(--color-surface);
    transition: border-color var(--transition);
}
.sa-search-input:focus {
    outline: none; border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}
.sa-search-results {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    max-height: 320px; overflow-y: auto; z-index: 100;
}
.sa-search-item {
    padding: 10px 16px; cursor: pointer; display: flex; flex-wrap: wrap;
    align-items: baseline; gap: 6px;
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition);
}
.sa-search-item:last-child { border-bottom: none; }
.sa-search-item:hover { background: var(--color-primary-l); }
.sa-search-item strong { font-size: .95rem; }
.sa-search-detail { font-size: .82rem; color: var(--color-text-muted); }
.sa-search-coords { font-size: .75rem; color: var(--color-text-muted); margin-left: auto; font-family: monospace; }
.sa-search-loading, .sa-search-empty {
    padding: 14px 16px; color: var(--color-text-muted); font-size: .9rem; text-align: center;
}

/* Location preview card */
.sa-loc-preview { margin: 16px 0 8px; }
.sa-loc-preview-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: var(--color-primary-l);
    border: 1px solid #c7d8f7; border-radius: var(--radius);
}
.sa-loc-preview-card i { font-size: 1.4rem; color: var(--color-primary); }
.sa-loc-preview-card small { color: var(--color-text-muted); }

/* Simplified form grid */
.sa-form-grid-loc-simple {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px;
}
.sa-field label { display: block; font-size: .8rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }
.sa-field input, .sa-field select, .sa-field textarea {
    width: 100%; padding: 8px 12px; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); font-size: .9rem;
}
.sa-form-actions { display: flex; gap: 10px; margin-top: 16px; }
.btn-secondary {
    padding: 10px 20px; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
    background: var(--color-surface); color: var(--color-text); font-size: .9rem;
    font-weight: 600; cursor: pointer; transition: all var(--transition);
}
.btn-secondary:hover { background: #f1f5f9; }

/* Toast notifications */
.sa-toast-container {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    display: flex; flex-direction: column; gap: 8px;
}
.sa-toast {
    padding: 12px 20px; border-radius: var(--radius-sm);
    font-size: .9rem; font-weight: 500; box-shadow: var(--shadow-lg);
    animation: slideInRight .3s ease; transition: opacity .3s;
    max-width: 420px;
}
.sa-toast-ok { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
.sa-toast-err { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
@keyframes slideInRight { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ─── Superadmin Pagination ──────────────────────────────── */
.sa-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; padding: 16px 0; margin-top: 8px;
}
.sa-page-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px; border-radius: var(--radius);
    background: var(--color-primary); color: #fff;
    font-size: .85rem; font-weight: 600; text-decoration: none;
    transition: background .2s;
}
.sa-page-btn:hover { background: #1d4ed8; }
.sa-page-info { font-size: .85rem; color: var(--color-text-muted); }

/* ─── Collapsible sections ───────────────────────────────── */
.sa-collapse-toggle,
.panel-collapse-toggle {
    cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 8px;
}
.sa-collapse-toggle:hover,
.panel-collapse-toggle:hover { color: var(--color-primary); }
.sa-chevron,
.panel-chevron {
    margin-left: auto; font-size: .75rem; color: #94a3b8;
    transition: transform .25s ease;
}
.sa-chevron-open,
.panel-chevron-open { transform: rotate(180deg); }

/* ─── Searchable checkbox grid ───────────────────────────── */
.sa-filter-input {
    width: 100%; padding: 6px 10px; margin-bottom: 8px;
    border: 1px solid var(--color-border); border-radius: var(--radius);
    font-size: .85rem; background: #fff;
}
.sa-checkbox-scrollable {
    max-height: 200px; overflow-y: auto;
    border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 8px;
}

/* ─── Traffic Map Section ────────────────────────────────── */
.panel-traffic-section { overflow: visible; }
.panel-traffic-map {
    width: 100%; height: 420px; border-radius: var(--radius);
    border: 1px solid var(--color-border); margin: 12px 0;
}
.panel-traffic-legend {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px;
}
.traffic-legend-item {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .78rem; font-weight: 600; color: var(--color-text-muted);
}
.traffic-dot {
    width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.panel-traffic-loading {
    text-align: center; color: var(--color-primary); font-size: .9rem;
    padding: 8px 0;
}
.panel-traffic-stats { margin-top: 14px; }
.traffic-stats-grid {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.traffic-stat-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 20px; font-size: .8rem;
    background: var(--color-bg); border: 1.5px solid #ddd;
}
.traffic-stat-dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}

/* ─── Traffic congestion summary bar ─── */
.panel-traffic-summary { margin-top: 14px; }
.traffic-summary-bar {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
    padding: 14px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: var(--radius); border: 1px solid var(--color-border);
    margin-bottom: 12px;
}
.traffic-summary-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 18px; border-radius: var(--radius-sm);
    background: #fff; border: 1.5px solid var(--color-border);
    min-width: 90px;
}
.traffic-summary-value {
    font-size: 1.4rem; font-weight: 800; color: var(--color-text);
    line-height: 1.2;
}
.traffic-summary-label {
    font-size: .7rem; font-weight: 600; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: .3px; text-align: center;
}

/* Legend title */
.panel-traffic-legend-title {
    font-size: .82rem; font-weight: 700; color: var(--color-text);
    display: inline-flex; align-items: center; gap: 5px;
}

@media (max-width: 768px) {
    .sa-form-grid-loc { grid-template-columns: 1fr; }
    .sa-form-grid-loc textarea { grid-column: span 1; }
    .sa-form-grid-loc-simple { grid-template-columns: 1fr; }
    .sa-toast-container { left: 12px; right: 12px; bottom: 12px; }
    .panel-traffic-map { height: 300px; }
}

/* ═══ CITY SWITCHER DROPDOWN ═══ */
.city-switcher-dropdown { position: relative; }
.btn-city-switch {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 8px;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
    color: #fff; font-size: .85rem; font-weight: 600;
    cursor: pointer; transition: background .2s;
    white-space: nowrap; max-width: 240px;
}
.btn-city-switch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-city-switch:hover { background: rgba(255,255,255,0.22); }
.city-switcher-menu {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 260px; max-height: 360px; overflow-y: auto;
    background: #fff; border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18); z-index: 999;
    padding: 6px 0;
}
.city-switcher-dropdown:hover .city-switcher-menu,
.city-switcher-dropdown:focus-within .city-switcher-menu { display: block; }
.city-switcher-item {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; color: #334155; text-decoration: none;
    font-size: .85rem; transition: background .15s;
}
.city-switcher-item:hover { background: #f1f5f9; }
.city-switcher-item.active { background: #eff6ff; color: #2563eb; font-weight: 600; }
.city-switcher-item .fa-check { margin-left: auto; font-size: .7rem; color: #2563eb; }
.city-switcher-name { flex: 1; }
.city-switcher-region { font-size: .75rem; color: #94a3b8; }
.city-switcher-filter-wrap { padding: 8px 12px 4px; position: sticky; top: 0; background: #fff; z-index: 1; }
.city-switcher-filter {
    width: 100%; padding: 6px 10px; border: 1px solid #e2e8f0;
    border-radius: 8px; font-size: .82rem; outline: none;
}
.city-switcher-filter:focus { border-color: var(--color-primary); }
.city-switcher-list { max-height: 300px; overflow-y: auto; }
@media (max-width: 768px) {
    .btn-city-switch { max-width: 160px; padding: 5px 10px; font-size: .78rem; }
    .city-switcher-menu { min-width: 220px; right: -20px; }
}

/* ═══ SUPERADMIN: MULTI-LOCATION TAGS & MODAL ═══ */
.sa-loc-tag {
    display: inline-block; padding: 2px 8px; margin: 2px 3px;
    border-radius: 6px; font-size: .75rem; font-weight: 500;
    background: #f1f5f9; color: #475569; white-space: nowrap;
}
.sa-loc-tag.sa-loc-primary { background: #dbeafe; color: #1d4ed8; font-weight: 600; }
.sa-btn-edit-locs {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 6px;
    background: #f1f5f9; border: 1px solid #e2e8f0; color: #64748b;
    cursor: pointer; font-size: .7rem; margin-left: 4px; vertical-align: middle;
}
.sa-btn-edit-locs:hover { background: #dbeafe; color: #1d4ed8; }
.sa-checkbox-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px;
    max-height: 280px; overflow-y: auto; padding: 8px;
    background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0;
}
.sa-checkbox-label {
    display: flex; align-items: center; gap: 6px;
    font-size: .82rem; color: #334155; padding: 4px 6px;
    border-radius: 4px; cursor: pointer;
}
.sa-checkbox-label:hover { background: #dbeafe; }
.sa-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.sa-modal {
    background: #fff; border-radius: 16px; width: 90%; max-width: 560px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    max-height: 90vh; display: flex; flex-direction: column;
}
.sa-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #e2e8f0;
}
.sa-modal-header h3 { margin: 0; font-size: 1rem; color: #1e293b; }
.sa-modal-close {
    background: none; border: none; font-size: 1.4rem; color: #94a3b8;
    cursor: pointer; line-height: 1;
}
.sa-modal-close:hover { color: #ef4444; }
.sa-modal-body { padding: 16px 20px; overflow-y: auto; flex: 1 1 auto; }
.sa-modal-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 12px 20px; border-top: 1px solid #e2e8f0;
}
.sa-btn-cancel {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f1f5f9; color: #475569;
    padding: 10px 18px; border-radius: 8px; border: 1px solid #e2e8f0;
    font-weight: 600; font-size: .9rem; cursor: pointer;
    transition: all .2s; font-family: inherit;
}
.sa-btn-cancel:hover { background: #e2e8f0; color: #1e293b; }

/* Income history table */
.sa-income-table th.sa-year-col,
.sa-income-table td.sa-year-col { text-align: right; white-space: nowrap; min-width: 90px; }
.sa-income-gross { font-weight: 600; color: #1e293b; }


/* Collapsible history sections */
.sa-history-collapsible { border: none; }
.sa-history-collapsible summary {
    display: flex; align-items: center; gap: 8px;
    font-size: 1.1rem; font-weight: 700; color: #1e293b;
    cursor: pointer; padding: 4px 0; list-style: none;
    user-select: none;
}
.sa-history-collapsible summary::-webkit-details-marker { display: none; }
.sa-history-collapsible summary::before {
    content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: .75rem; color: #94a3b8; transition: transform .2s;
    display: inline-block; width: 16px; text-align: center;
}
.sa-history-collapsible[open] summary::before { transform: rotate(90deg); }
.sa-history-collapsible summary .sa-collapse-hint {
    font-size: .78rem; font-weight: 400; color: #94a3b8; margin-left: auto;
}
.sa-history-collapsible summary:hover { color: var(--color-primary); }
.sa-history-collapsible summary:hover::before { color: var(--color-primary); }

/* Superadmin — Edit user modal & loc selector */
.sa-modal-wide { max-width: 720px; }
.sa-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
.sa-edit-field label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 4px;
}
.sa-edit-field label small { font-weight: 400; color: #94a3b8; }
.sa-edit-field input[type="text"],
.sa-edit-field input[type="email"],
.sa-edit-field input[type="password"] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: .88rem;
}

.sa-badge-political {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    color: #2563eb;
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 4px;
    vertical-align: middle;
}
.sa-badge-political i { font-size: .65rem; }
.sa-badge-legal {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #d1fae5, #ecfdf5);
    color: #065f46;
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 4px;
    vertical-align: middle;
}
.sa-badge-legal i { font-size: .65rem; }
.sa-loc-assign-label {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}
.sa-loc-region {
    font-size: .72rem;
    color: #94a3b8;
    margin-left: 2px;
}
.sa-primary-radio {
    accent-color: #f59e0b;
    width: 14px;
    height: 14px;
    cursor: pointer;
}
.sa-primary-star {
    color: #f59e0b;
    font-size: .9rem;
    cursor: pointer;
    margin-left: auto;
}
.sa-hint {
    font-size: .78rem;
    color: #94a3b8;
    margin: 6px 0 0;
}
.sa-hint i { color: #cbd5e1; margin-right: 3px; }
@media (max-width: 768px) {
    .sa-edit-grid { grid-template-columns: 1fr 1fr; }
    .sa-modal-wide { max-width: 95vw; }
}
@media (max-width: 480px) {
    .sa-edit-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   POLITICAL REPORT v2 — Premium visual redesign
   ═══════════════════════════════════════════════════════════════ */
/* Keep legacy styles for old cached reports */
.pol-report-container {
    padding: .5rem 0;
}
.pol-report {
    font-family: 'Inter', sans-serif;
}

/* ─── NEW v2 Report Design ─── */
.pol-v2 {
    font-family: 'Inter', -apple-system, sans-serif;
    color: #1e293b;
    line-height: 1.6;
}

/* Cover */
.pol-v2-cover {
    text-align: center;
    padding: 2rem 1.5rem 1.5rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #0c1929 0%, #1e3a8a 40%, #2563eb 100%);
    border-radius: 16px;
    color: #fff;
}
.pol-v2-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(4px);
    font-size: .78rem;
    font-weight: 700;
    padding: 5px 18px;
    border-radius: 20px;
    margin-bottom: 12px;
    letter-spacing: .3px;
}
.pol-v2-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -.01em;
}
.pol-v2-meta {
    font-size: .82rem;
    opacity: .75;
}

/* Executive summary */
.pol-v2-executive {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
}
.pol-v2-exec-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #2563eb;
    margin-bottom: .5rem;
}
.pol-v2-executive p {
    font-size: .95rem;
    line-height: 1.7;
    color: #172554;
    margin: 0;
}

/* Sections */
.pol-v2-section {
    margin-bottom: 1.5rem;
    padding: 1.3rem 1.5rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
}
.pol-v2-h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 1rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #1e293b;
}
.pol-v2-h2 i {
    color: #2563eb;
    font-size: .95rem;
}
.pol-v2-text {
    font-size: .93rem;
    line-height: 1.7;
    color: #334155;
    margin: 0 0 1rem;
}
.pol-v2-text-sub {
    color: #475569;
    font-size: .9rem;
    padding: .6rem .8rem;
    background: #f8fafc;
    border-radius: 8px;
}

/* Sentiment badge */
.pol-v2-sentiment-bar {
    margin-bottom: .6rem;
}
.pol-v2-sent-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #f8fafc;
    padding: .45rem 1rem;
    border-radius: 20px;
    font-size: .88rem;
    border: 1px solid #e2e8f0;
}

/* Topic cards */
.pol-v2-topics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem;
    margin-top: .8rem;
}
.pol-v2-topic-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: .75rem 1rem;
}
.pol-v2-topic-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .3rem;
}
.pol-v2-topic-head strong {
    font-size: .88rem;
    color: #1e293b;
}
.pol-v2-impact-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pol-v2-topic-card p {
    font-size: .82rem;
    color: #64748b;
    margin: 0;
    line-height: 1.45;
}

/* Two-column layout */
.pol-v2-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: .8rem 0;
}
.pol-v2-col {
    border-radius: 10px;
    padding: 1rem;
}
.pol-v2-col h3 {
    font-size: .9rem;
    font-weight: 700;
    margin: 0 0 .6rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.pol-v2-col ul, .pol-v2-col ol {
    margin: 0;
    padding-left: 1.2rem;
}
.pol-v2-col li {
    font-size: .86rem;
    line-height: 1.55;
    margin-bottom: .4rem;
    color: inherit;
}
.pol-v2-col-green {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}
.pol-v2-col-green h3 { color: #166534; }
.pol-v2-col-green li { color: #15803d; }
.pol-v2-col-red {
    background: #fef2f2;
    border: 1px solid #fecaca;
}
.pol-v2-col-red h3 { color: #991b1b; }
.pol-v2-col-red li { color: #b91c1c; }
.pol-v2-col-amber {
    background: #fffbeb;
    border: 1px solid #fde68a;
}
.pol-v2-col-amber h3 { color: #92400e; }
.pol-v2-col-amber li { color: #a16207; }
.pol-v2-col-blue {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}
.pol-v2-col-blue h3 { color: #1e40af; }
.pol-v2-col-blue li { color: #1d4ed8; }

/* Recommendations */
.pol-v2-recs {
    margin-top: .8rem;
    background: #f8fafc;
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
}
.pol-v2-recs h3 {
    font-size: .9rem;
    font-weight: 700;
    color: #2563eb;
    margin: 0 0 .5rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.pol-v2-recs ol {
    margin: 0;
    padding-left: 1.2rem;
}
.pol-v2-recs li {
    font-size: .86rem;
    line-height: 1.55;
    margin-bottom: .4rem;
    color: #334155;
}

/* Alerts */
.pol-v2-alerts .pol-v2-h2 i { color: #dc2626; }
.pol-v2-alert {
    border-left: 4px solid #f59e0b;
    padding: .7rem 1rem;
    margin-bottom: .6rem;
    background: #fffbeb;
    border-radius: 0 8px 8px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.pol-v2-alert strong {
    font-size: .9rem;
    color: #1e293b;
}
.pol-v2-urgency {
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    padding: 2px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pol-v2-alert p {
    width: 100%;
    font-size: .85rem;
    color: #64748b;
    margin: .2rem 0 0;
    line-height: 1.5;
}

/* ─── ELECTION CHARTS ─── */
.pol-v2-elections .pol-v2-h2 i { color: #2563eb; }
.pol-v2-prediction .pol-v2-h2 i { color: #2563eb; }

.pol-v2-participation {
    font-size: .88rem;
    color: #64748b;
    margin-bottom: .4rem;
}
.pol-v2-participation i { color: #2563eb; margin-right: .3rem; }
.pol-v2-gov-label {
    font-size: .88rem;
    color: #1e293b;
    font-weight: 600;
    margin-bottom: 1rem;
    padding: .5rem .8rem;
    background: #eff6ff;
    border-radius: 8px;
    display: inline-block;
}
.pol-v2-gov-label i { color: #2563eb; margin-right: .3rem; }

/* Bar chart */
.pol-v2-chart, .pol-v2-compare {
    margin: 1rem 0;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
.pol-v2-chart-title {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    margin-bottom: .8rem;
}
.pol-v2-bar-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .5rem;
}
.pol-v2-bar-label {
    min-width: 70px;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.pol-v2-bar-siglas {
    font-weight: 800;
    font-size: .85rem;
    letter-spacing: .02em;
}
.pol-v2-gov-tag {
    font-size: .6rem;
    font-weight: 700;
    background: #2563eb;
    color: #fff;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: .04em;
}
.pol-v2-bar-track {
    flex: 1;
    height: 22px;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}
.pol-v2-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width .6s ease;
    min-width: 2px;
}
.pol-v2-bar-prev { opacity: .55; }
.pol-v2-bar-est { opacity: 1; }
.pol-v2-bar-value {
    min-width: 100px;
    font-size: .82rem;
    font-weight: 600;
    color: #1e293b;
    text-align: right;
}
.pol-v2-bar-value small {
    font-weight: 400;
    color: #94a3b8;
}

/* Seats visual */
.pol-v2-seats {
    margin: 1rem 0;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
.pol-v2-seats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    margin-bottom: .8rem;
}
.pol-v2-seat {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.7);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.pol-v2-seats-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
}
.pol-v2-legend-item {
    font-size: .78rem;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.pol-v2-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Comparison chart */
.pol-v2-cmp-row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .8rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid #e2e8f0;
}
.pol-v2-cmp-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.pol-v2-cmp-label {
    min-width: 60px;
    display: flex;
    align-items: center;
    padding-top: .3rem;
}
.pol-v2-cmp-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.pol-v2-cmp-bar-row {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.pol-v2-cmp-year {
    font-size: .7rem;
    font-weight: 600;
    color: #94a3b8;
    min-width: 30px;
    text-align: right;
}
.pol-v2-cmp-pct {
    font-size: .8rem;
    min-width: 90px;
    text-align: right;
}
.pol-v2-cmp-pct small {
    font-weight: 400;
    font-size: .72rem;
}

/* Scenario & Surprise */
.pol-v2-scenario {
    background: linear-gradient(135deg, #eff6ff, #e8eaf6);
    padding: 1rem 1.2rem;
    border-radius: 10px;
    margin-top: 1rem;
}
.pol-v2-scenario-label {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #2563eb;
    margin-bottom: .4rem;
}
.pol-v2-scenario p {
    font-size: .92rem;
    line-height: 1.6;
    color: #172554;
    margin: 0;
}
.pol-v2-surprise {
    background: linear-gradient(135deg, #fef3c7, #fde68a33);
    padding: 1rem 1.2rem;
    border-radius: 10px;
    margin-top: .8rem;
    border: 1px solid #fde68a;
}
.pol-v2-surprise-label {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #b45309;
    margin-bottom: .4rem;
}
.pol-v2-surprise p {
    font-size: .9rem;
    line-height: 1.6;
    color: #78350f;
    margin: 0;
}

/* News cards */
.pol-v2-news { display:flex; flex-direction:column; gap:10px; }
.pol-v2-news-item {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: .9rem 1.1rem;
}
.pol-v2-news-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin-bottom: 4px;
}
.pol-v2-news-title { font-size: .88rem; color: #1e293b; line-height: 1.4; }
.pol-v2-news-meta { font-size: .72rem; color: #92400e; white-space: nowrap; }
.pol-v2-news-meta i { margin-right: 2px; }
.pol-v2-news-rel { font-size: .82rem; color: #78716c; margin: 2px 0 0; line-height: 1.5; }

/* Conclusion */
.pol-v2-conclusion {
    background: linear-gradient(135deg, #f8fafc, #eff6ff);
    border-left: 4px solid #3b82f6;
    padding: 1.2rem 1.5rem;
    border-radius: 0 12px 12px 0;
    margin: 1.5rem 0;
    font-size: .93rem;
    line-height: 1.7;
    color: #334155;
}
.pol-v2-conclusion i {
    color: #3b82f6;
    margin-right: .5rem;
}

/* Footer */
.pol-v2-footer {
    text-align: center;
    padding: 1.2rem 0 .5rem;
    border-top: 2px solid #e2e8f0;
    margin-top: 1rem;
}
.pol-v2-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 16px;
    margin-bottom: .4rem;
}
.pol-v2-footer p {
    font-size: .8rem;
    color: #94a3b8;
    margin: .3rem 0 0;
}
.pol-v2-footer small {
    font-size: .72rem;
    color: #cbd5e1;
}

/* Responsive */
@media (max-width: 768px) {
    .pol-v2-cover   { padding: 1.5rem 1rem; }
    .pol-v2-title   { font-size: 1.1rem; }
    .pol-v2-section { padding: 1rem; }
    .pol-v2-two-col { grid-template-columns: 1fr; }
    .pol-v2-topics  { grid-template-columns: 1fr; }
    .pol-v2-bar-label { min-width: 48px; }
    .pol-v2-bar-value { min-width: 70px; font-size: .75rem; }
    .pol-v2-cmp-label { min-width: 45px; }
    .pol-v2-cmp-pct   { min-width: 65px; font-size: .72rem; }
    .pol-v2-seat    { width: 20px; height: 20px; }
}
.panel-political-section {
    border-left: 3px solid #2563eb;
}



/* Superadmin political checkbox inline */
.sa-checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
}
.sa-checkbox-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   CRISIS ALERT BANNER
   ═══════════════════════════════════════════════════════════════ */
.panel-crisis-alert {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: linear-gradient(135deg, #fef2f2, #fff1f2);
    border: 2px solid #fca5a5;
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    animation: crisisFlash 2s ease-in-out infinite alternate;
}
@keyframes crisisFlash {
    0% { border-color: #fca5a5; }
    100% { border-color: #ef4444; }
}
.panel-crisis-icon {
    font-size: 2rem;
    color: #ef4444;
    flex-shrink: 0;
    animation: crisisShake .5s ease-in-out infinite alternate;
}
@keyframes crisisShake {
    0% { transform: rotate(-5deg); }
    100% { transform: rotate(5deg); }
}
.panel-crisis-body h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #991b1b;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel-crisis-body p {
    font-size: .9rem;
    color: #b91c1c;
    margin: 0 0 8px;
    line-height: 1.5;
}
.panel-crisis-samples {
    list-style: none;
    padding: 0;
    margin: 0;
}
.panel-crisis-samples li {
    font-size: .82rem;
    color: #7f1d1d;
    padding: 4px 0;
    border-bottom: 1px solid rgba(252,165,165,.3);
    font-style: italic;
}
.panel-crisis-samples li:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════
   PDF EXPORT BUTTON
   ═══════════════════════════════════════════════════════════════ */
.btn-export-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all .2s;
}
.btn-export-pdf:hover {
    background: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(220,38,38,.3);
}
.btn-export-pdf i { font-size: .9rem; }

/* ═══════════════════════════════════════════════════════════════
   PRINT STYLES — Executive report export
   ═══════════════════════════════════════════════════════════════ */
@media print {
    body { background: #fff !important; }
    .panel-nav, .panel-date-filter, .btn-export-pdf, .btn-logout,
    .panel-nav-right, .panel-embed-code, .cr-badge-meta a,
    .panel-collapse-toggle .panel-chevron,
    .panel-crisis-icon { display: none !important; }
    .panel-collapse-body { display: block !important; }
    .panel-main { padding: 0 !important; }
    .panel-section { page-break-inside: avoid; }
    .panel-crisis-alert { animation: none !important; border-color: #ef4444 !important; }
    @page { margin: 1.5cm; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Crisis
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .panel-crisis-alert { flex-direction: column; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   SKELETON LOADERS (ranking table placeholder)
   ═══════════════════════════════════════════════════════════════ */
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
    background-size: 800px 100%;
    animation: shimmer 1.6s infinite linear;
    border-radius: 6px;
}

.skeleton-text {
    height: 14px;
    display: inline-block;
}

.skeleton-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-badge {
    width: 48px;
    height: 28px;
    border-radius: 14px;
}

.skeleton-row td {
    padding: 14px 12px;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL FADE-IN ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}

.animate-on-scroll.animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children inside metric cards */
.animate-visible .metric-card {
    opacity: 0;
    animation: fadeInUp .5s ease forwards;
}
.animate-visible .metric-card:nth-child(1) { animation-delay: .05s; }
.animate-visible .metric-card:nth-child(2) { animation-delay: .1s; }
.animate-visible .metric-card:nth-child(3) { animation-delay: .15s; }
.animate-visible .metric-card:nth-child(4) { animation-delay: .2s; }
.animate-visible .metric-card:nth-child(5) { animation-delay: .25s; }
.animate-visible .metric-card:nth-child(6) { animation-delay: .3s; }
.animate-visible .metric-card:nth-child(7) { animation-delay: .35s; }
.animate-visible .metric-card:nth-child(8) { animation-delay: .4s; }
.animate-visible .metric-card:nth-child(9) { animation-delay: .45s; }
.animate-visible .metric-card:nth-child(10) { animation-delay: .5s; }
.animate-visible .metric-card:nth-child(11) { animation-delay: .55s; }
.animate-visible .metric-card:nth-child(12) { animation-delay: .6s; }
.animate-visible .metric-card:nth-child(13) { animation-delay: .65s; }
.animate-visible .metric-card:nth-child(14) { animation-delay: .7s; }
.animate-visible .metric-card:nth-child(15) { animation-delay: .75s; }
.animate-visible .metric-card:nth-child(16) { animation-delay: .8s; }
.animate-visible .metric-card:nth-child(17) { animation-delay: .85s; }

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

/* ═══════════════════════════════════════════════════════════════
   SOCIAL PROOF COUNTERS
   ═══════════════════════════════════════════════════════════════ */
.social-proof-section {
    background: #f0f4ff;
    border-top: 1px solid #e2e8f0;
}

.social-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}

.social-proof-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.social-proof-number {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
}

.social-proof-icon {
    font-size: 2.4rem;
    color: var(--color-primary);
    line-height: 1;
}

.social-proof-label {
    font-size: .92rem;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .social-proof-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .social-proof-number {
        font-size: 2.2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   REVIEW CARDS (city.php)
   ═══════════════════════════════════════════════════════════════ */
.review-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    transition: box-shadow var(--transition);
}

.review-card:hover {
    box-shadow: var(--shadow);
}

.review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.review-card-text {
    color: var(--color-text-muted);
    font-size: .93rem;
    line-height: 1.6;
    margin: 0 0 10px;
}

.review-card-date {
    color: var(--color-text-muted);
    font-size: .82rem;
}

.empty-state-text {
    text-align: center;
    color: var(--color-text-muted);
    padding: 40px 20px;
}

.back-to-ranking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: background var(--transition), transform .15s;
}

.back-to-ranking:hover {
    background: var(--color-primary-d);
    color: #fff;
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGES (privacy / terms)
   ═══════════════════════════════════════════════════════════════ */
.legal-page {
    padding-top: 100px;
}

.legal-page h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 28px 0 10px;
    color: var(--color-text);
}

.legal-page p {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 12px;
}

.legal-page ul {
    list-style: disc;
    padding-left: 24px;
    margin-bottom: 12px;
}

.legal-page ul li {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 4px;
}

.legal-page a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   COOKIE CONSENT BANNER
   ═══════════════════════════════════════════════════════════════ */
.cr-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #1e293b;
    color: #e2e8f0;
    padding: 14px 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,.2);
    font-size: .9rem;
    animation: crCookieSlideUp .4s ease;
}
@keyframes crCookieSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.cr-cookie-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.cr-cookie-text {
    flex: 1;
    line-height: 1.5;
}
.cr-cookie-text a {
    color: #60a5fa;
    text-decoration: underline;
    font-weight: 600;
}
.cr-cookie-text a:hover {
    color: #93c5fd;
}
.cr-cookie-btn {
    background: #1d4ed8;
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 8px;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
.cr-cookie-btn:hover {
    background: #2563eb;
}

/* ═══ Form consent checkbox ═══ */
.form-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0 4px;
    font-size: .85rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}
.form-consent input[type="checkbox"] {
    margin-top: 3px;
    accent-color: #1d4ed8;
    min-width: 16px;
}
.form-consent a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ═══ CITY DETAIL MODAL ═══ */
.cr-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 30px 20px;
    overflow-y: auto;
    animation: crModalFadeIn 0.2s ease;
}
@keyframes crModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.cr-modal {
    background: #fff;
    border-radius: 20px;
    max-width: 860px;
    width: 100%;
    position: relative;
    box-shadow: 0 25px 80px rgba(0,0,0,0.3);
    animation: crModalSlideUp 0.3s ease;
    margin: auto;
}
@keyframes crModalSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.cr-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: rgba(0,0,0,0.4);
    border: none;
    font-size: 1.6rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    z-index: 10;
}
.cr-modal-close:hover {
    background: rgba(0,0,0,0.65);
}
.cr-modal-body {
    padding: 0;
}

/* Modal hero with photo carousel */
.cr-modal-hero {
    position: relative;
    height: 260px;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}
.cr-modal-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.cr-modal-hero-slide--active {
    opacity: 1;
}
.cr-modal-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.65) 100%);
    z-index: 1;
}
.cr-modal-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 30px;
    z-index: 2;
    color: #fff;
}
.cr-modal-hero-content h2 {
    font-size: 1.7rem;
    font-weight: 800;
    margin: 0 0 8px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
}
.cr-modal-meta {
    display: flex;
    gap: 18px;
    color: rgba(255,255,255,0.9);
    font-size: 0.9rem;
}
.cr-modal-meta i {
    margin-right: 4px;
    opacity: 0.8;
}

/* Score section */
.cr-modal-score-section {
    text-align: center;
    padding: 8px 30px 4px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border-bottom: 1px solid #f1f5f9;
}
.cr-modal-score-section .seal-badge {
    margin: 6px auto;
}
.cr-modal-score-section .city-score-label {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 4px;
}
.score-color-gold { color: #C49A2A; }
.score-color-silver { color: #7B8794; }
.score-color-bronze { color: #A0622A; }

/* Metrics in modal */
.cr-modal-metrics {
    padding: 20px 30px 16px;
}
.cr-modal-metrics h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #334155;
    margin: 0 0 14px;
}
.cr-modal-metrics h3 i {
    color: var(--color-primary);
    margin-right: 6px;
}
.cr-modal-metrics .metrics-breakdown {
    gap: 4px;
}
.cr-modal-metrics .metric-row {
    padding: 5px 0;
}

/* Actions */
.cr-modal-actions {
    padding: 16px 30px 24px;
    text-align: center;
    border-top: 1px solid #f1f5f9;
}
.cr-modal-full-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--color-primary);
    color: #fff !important;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.15s;
}
.cr-modal-full-link:hover {
    background: #1d4ed8;
}

/* Modal responsive */
@media (max-width: 900px) {
    .cr-modal-overlay { padding: 16px 10px; }
    .cr-modal { max-width: 100%; border-radius: 16px; }
    .cr-modal-hero { height: 200px; border-radius: 16px 16px 0 0; }
    .cr-modal-hero-content { padding: 18px 20px; }
    .cr-modal-hero-content h2 { font-size: 1.35rem; }
    .cr-modal-score-section,
    .cr-modal-metrics,
    .cr-modal-actions { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 480px) {
    .cr-modal-hero { height: 160px; }
    .cr-modal-hero-content h2 { font-size: 1.15rem; }
    .cr-modal-meta { flex-wrap: wrap; gap: 8px; font-size: 0.82rem; }
    .cr-modal-metrics .metric-label { min-width: 90px; font-size: 0.78rem; }
}

/* ═══════════════════════════════════════════════════════════════
   SHARE BUTTON
   ═══════════════════════════════════════════════════════════════ */
.btn-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-share:hover { background: #e2e8f0; }
.btn-share.shared { background: #dcfce7; color: #16a34a; border-color: #bbf7d0; }
.cr-modal-share { margin-left: 10px; }
.cr-modal-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════
   COMPARE BUTTON (in table rows)
   ═══════════════════════════════════════════════════════════════ */
.compare-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    font-size: 0.85rem;
    margin-left: 8px;
    transition: all 0.15s;
    vertical-align: middle;
}
.compare-btn:hover { background: #e0e7ff; color: #4f46e5; border-color: #c7d2fe; }
.compare-btn.active { background: #4f46e5; color: #fff; border-color: #4f46e5; }

/* ═══════════════════════════════════════════════════════════════
   COMPARE BAR (bottom sticky)
   ═══════════════════════════════════════════════════════════════ */
.compare-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: #1e293b;
    color: #f1f5f9;
    font-size: 0.92rem;
    font-weight: 500;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
    gap: 16px;
}
.compare-bar span { display: flex; align-items: center; gap: 8px; }
.compare-bar-actions { display: flex; align-items: center; gap: 10px; }
.compare-go-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.15s;
}
.compare-go-btn:hover { background: #1d4ed8; }
.compare-hint { color: #94a3b8; font-size: 0.85rem; font-style: italic; }
.compare-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    color: #94a3b8;
    border: 1px solid #475569;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s;
}
.compare-clear-btn:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

/* ═══════════════════════════════════════════════════════════════
   COMPARATOR MODAL
   ═══════════════════════════════════════════════════════════════ */
.compare-header {
    text-align: center;
    padding: 24px 24px 8px;
}
.compare-header h2 {
    font-size: 1.3rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.compare-cities-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 16px 24px 24px;
}
.compare-city {
    text-align: center;
    cursor: pointer;
    flex: 1;
    max-width: 200px;
    transition: opacity 0.15s;
}
.compare-city:hover { opacity: 0.8; }
.compare-city h3 {
    font-size: 1.1rem;
    color: #1e293b;
    margin: 0 0 2px;
}
.compare-city-region {
    font-size: 0.82rem;
    color: #64748b;
}
.compare-overall {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    margin: 10px 0 4px;
    border: 2px solid #e2e8f0;
}
.compare-overall.compare-winner-card {
    background: linear-gradient(135deg, #fef9c3, #fde68a);
    color: #92400e;
    border-color: #fbbf24;
}
.compare-overall.compare-loser-card {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #dc2626;
    border-color: #f87171;
}
.compare-pop {
    font-size: 0.8rem;
    color: #94a3b8;
}
.compare-vs {
    font-size: 1.4rem;
    font-weight: 800;
    color: #cbd5e1;
    text-transform: uppercase;
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.compare-row td {
    padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
}
.compare-row:last-child td { border-bottom: none; }
.compare-metric {
    text-align: center;
    color: #64748b;
    white-space: nowrap;
    font-size: 0.82rem !important;
}
.compare-metric i { margin-right: 4px; color: #94a3b8; }
.compare-val {
    text-align: center;
    font-weight: 600;
    color: #475569;
    min-width: 50px;
}
.compare-val.compare-winner {
    color: #16a34a;
    font-weight: 700;
}
.compare-val.compare-loser {
    color: #dc2626;
    font-weight: 600;
}

/* Comparator responsive */
@media (max-width: 600px) {
    .compare-bar { padding: 10px 14px; font-size: 0.82rem; flex-wrap: wrap; }
    .compare-cities-header { padding: 12px 12px 16px; gap: 12px; }
    .compare-city h3 { font-size: 0.95rem; }
    .compare-overall { width: 44px; height: 44px; font-size: 1rem; }
    .compare-row td { padding: 8px 10px; }
    .compare-metric { font-size: 0.75rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PROXIMITY MAP OVERLAY
   ═══════════════════════════════════════════════════════════════ */
.prox-map-reset-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000;
    padding: 6px 14px;
    background: #fff;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.15s;
}
.prox-map-reset-btn:hover { background: #f1f5f9; }

/* Dark mode removed — light theme only */