/*
 * WTT City Guide === Concept A Stylesheet
 * File: /wp-content/themes/wheretotravel/assets/css/city-guide.css
 *
 * Builds on the global variables already defined in assets/css/main.css.
 * This file handles ONLY city-guide-specific layout and components.
 *
 * Load order (set in functions.php):
 *   1. generatepress/style.css
 *   2. assets/css/main.css        === global tokens, buttons
 *   3. assets/css/city-guide.css  === this file
 *   4. assets/js/city-guide.js
 */

/* === 0. WRAPPER === */

.city-guide-wrap {
    /* Strip any default GeneratePress page padding */
    margin-top: 0;
}

/* Tell GeneratePress to give this template full-width */
.city-guide-wrap .site-main,
.city-guide-wrap .content-area {
    max-width: 100%;
    padding: 0;
}


/* === 1. HERO === */

.city-hero {
    position: relative;
    min-height: 420px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    padding-bottom: 0;
}

.city-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(26, 58, 42, 0.25) 0%,
        rgba(26, 58, 42, 0.55) 55%,
        rgba(26, 58, 42, 0.88) 100%
    );
    pointer-events: none;
}

.city-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 32px 48px 36px;
    max-width: 1100px;
    margin: 0 auto;
}

.city-eyebrow {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.city-eyebrow-sep {
    opacity: 0.4;
}

.city-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 10px;
}

.city-sub {
    font-family: var(--font-body);
    font-size: 16px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 24px;
    max-width: 560px;
}


/* === Persona bar === */

.persona-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.persona-bar-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    flex-shrink: 0;
}

.persona-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Mobile: single scrollable row */


.persona-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 24px;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.persona-pill:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.persona-pill.active {
    background: var(--wtt-terracotta);
    border-color: var(--wtt-terracotta);
    color: #fff;
}

.pp-emoji {
    font-size: 14px;
    line-height: 1;
}

.pp-label {
    line-height: 1;
}


/* === 2. STICKY TAB NAVIGATION === */

.city-nav {
    background: #fff;
    border-bottom: 1px solid var(--wtt-border);
    position: sticky;
    top: 0;
    z-index: 90;
    transition: box-shadow 0.2s;
}

/* Shadow appears once the hero has scrolled away */
.city-nav.is-sticky {
    box-shadow: 0 2px 12px rgba(26, 58, 42, 0.1);
}

.city-nav-inner {
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 48px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.city-nav-inner::-webkit-scrollbar {
    display: none;
}

.city-nav-link {
    display: block;
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--wtt-text-mid);
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    line-height: 1;
}

.city-nav-link:hover {
    color: var(--wtt-green);
}

.city-nav-link.active {
    color: var(--wtt-green);
    border-bottom-color: var(--wtt-terracotta);
}


/* === 3. QUICK FACTS STRIP === */

.city-facts-strip {
    display: flex;
    gap: 0;
    background: var(--wtt-sand);
    border-bottom: 1px solid var(--wtt-sand-dark);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.city-facts-strip::-webkit-scrollbar {
    display: none;
}

.fact-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 16px 24px;
    border-right: 1px solid var(--wtt-sand-dark);
    flex-shrink: 0;
    min-width: 130px;
}

.fact-card:last-child {
    border-right: none;
}

.fact-icon {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 2px;
}

.fact-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--wtt-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.fact-value {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--wtt-green);
    white-space: nowrap;
}


/* === 4. TWO-COLUMN LAYOUT === */

.city-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 48px;
    align-items: start;
}


/* === Main content column === */

.city-main {
    padding: 36px 40px 60px 0;
    min-width: 0; /* prevent grid blowout */
    border-right: 1px solid var(--wtt-border);
}


/* === Sidebar column === */

.city-sidebar {
    padding: 32px 0 60px 36px;
    position: sticky;
    top: calc(56px + 16px); /* city-nav height + breathing room */
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    scrollbar-width: thin;
}


/* === 5. TAB SECTIONS === */

.city-tab-content {
    display: block;
}

.city-tab-content[hidden] {
    display: none;
}

/* Tab section header */
.tab-section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--wtt-border);
}

.tab-section-header h2 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--wtt-green);
    margin-bottom: 6px;
}

.tab-intro {
    font-size: 15px;
    color: var(--wtt-text-mid);
    line-height: 1.6;
}

/* Tab body === prose content from shortcodes or the_content() */
.tab-body {
    font-size: 15px;
    line-height: 1.75;
    color: var(--wtt-text-mid);
}

.tab-body h2 { font-family: var(--font-display); font-size: 22px; color: var(--wtt-green); margin: 28px 0 12px; }
.tab-body h3 { font-family: var(--font-display); font-size: 18px; color: var(--wtt-green); margin: 22px 0 10px; }
.tab-body p  { margin-bottom: 14px; }
.tab-body ul, .tab-body ol { padding-left: 20px; margin-bottom: 14px; }
.tab-body li { margin-bottom: 6px; }
.tab-body a  { color: var(--wtt-green-mid); }


/* ==================================================================
   6. PERSONA TIP BOXES
   Each persona has its own accent colour.
================================================================== */

.persona-content {
    margin-bottom: 20px;
}
/* Hide non-active persona content by default; JS toggles on click */
.persona-content:not([data-persona="budget"]) {
    display: none;
}

.persona-tip-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    border-left: 4px solid transparent;
}

/* Budget === green */
.ptip-budget {
    background: #edf7f0;
    border-left-color: var(--wtt-green-light);
}
.ptip-budget .ptip-heading { color: var(--wtt-green); }

/* Luxury === warm gold */
.ptip-luxury {
    background: #fdf6ed;
    border-left-color: #c48a2d;
}
.ptip-luxury .ptip-heading { color: #8a5e10; }

/* Business === slate blue */
.ptip-business {
    background: #eef2fb;
    border-left-color: #4a6fa5;
}
.ptip-business .ptip-heading { color: #2d4a7a; }

/* Family === soft teal */
.ptip-family {
    background: #edf6f6;
    border-left-color: #2d8a8a;
}
.ptip-family .ptip-heading { color: #1a5f5f; }

/* Adventure === terracotta */
.ptip-adventure {
    background: #fdf0ea;
    border-left-color: var(--wtt-terracotta);
}
.ptip-adventure .ptip-heading { color: #8a3515; }

.ptip-emoji {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.ptip-heading {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.ptip-text {
    font-size: 14px;
    color: var(--wtt-text-mid);
    line-height: 1.6;
    margin: 0;
}


/* === 7. SAFETY OVERVIEW CARDS (Safety tab) === */

.safety-overview-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.safety-score-card {
    background: var(--wtt-cream);
    border: 1px solid var(--wtt-border);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sc-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--wtt-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sc-bar-wrap {
    width: 100%;
    height: 8px;
    background: var(--wtt-sand-dark);
    border-radius: 4px;
    overflow: hidden;
}

.sc-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.sc-good     { background: var(--wtt-green-light); }
.sc-moderate { background: #e07a45; }
.sc-low      { background: #c0392b; }

.sc-val {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 700;
    color: var(--wtt-green);
    line-height: 1;
}

.sc-unit {
    font-size: 13px;
    font-weight: 400;
    color: var(--wtt-text-light);
}


/* === 8. SIDEBAR WIDGETS === */

.sidebar-widget {
    background: #fff;
    border: 1px solid var(--wtt-border);
    border-radius: 12px;
    padding: 20px;
    flex-shrink: 0;
}

.sw-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.sw-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.sw-title {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--wtt-green);
    margin: 0;
}

.sw-note {
    font-size: 13px;
    color: var(--wtt-text-mid);
    margin-bottom: 12px;
    line-height: 1.5;
}

/* Booking form */
.booking-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.bf-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bf-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--wtt-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bf-input,
.bf-select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--wtt-border);
    border-radius: 7px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--wtt-text);
    background: var(--wtt-cream);
    transition: border-color 0.15s;
    appearance: auto;
}

.bf-input:focus,
.bf-select:focus {
    outline: none;
    border-color: var(--wtt-green-light);
    background: #fff;
}

/* Full-width button variant */
.wtt-btn-full {
    width: 100%;
    text-align: center;
    display: block;
    margin-top: 4px;
}

/* Affiliate disclaimer */
.affiliate-note {
    font-size: 11px;
    color: var(--wtt-text-light);
    text-align: center;
    margin-top: 8px;
}


/* === Sidebar safety bars === */

.safety-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.sb-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sb-label {
    font-size: 12px;
    color: var(--wtt-text-mid);
    width: 90px;
    flex-shrink: 0;
    line-height: 1;
}

.sb-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--wtt-sand-dark);
    border-radius: 3px;
    overflow: hidden;
}

.sb-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.sb-good     { background: var(--wtt-green-light); }
.sb-moderate { background: #e07a45; }
.sb-low      { background: #c0392b; }

.sb-score {
    font-size: 12px;
    font-weight: 600;
    color: var(--wtt-text-mid);
    width: 26px;
    text-align: right;
    flex-shrink: 0;
}

/* "Full safety guide ===" link button inside sidebar */
.sw-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wtt-green);
    background: var(--wtt-sand);
    border: 1px solid var(--wtt-border);
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: var(--font-body);
    text-decoration: none;
}

.sw-link:hover {
    background: var(--wtt-sand-dark);
}


/* === 9. RESPONSIVE === tablet and mobile === */

@media (max-width: 1024px) {
    .city-hero-content {
        padding: 28px 32px 32px;
    }
    .city-layout {
        padding: 0 32px;
        grid-template-columns: 1fr 280px;
    }
    .city-nav-inner {
        padding: 0 32px;
    }
}



@media (max-width: 480px) {
    .city-hero-content {
        padding: 20px 16px 24px;
    }
    .city-layout {
        display: block !important;
        padding: 0 16px;
    }
    .city-main {
        display: block !important;
        width: 100% !important;
        padding: 20px 0 24px 0;
        border-right: none;
        min-width: 0;
    }
    .city-sidebar {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding: 20px 0 0 0;
    }
    .tab-section-header h2 {
        font-size: 22px;
    }
}

/* === Travelstart fallback flight search form === */

.ts-fallback {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.ts-fw-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ts-fw-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--wtt-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ts-fw-select,
.ts-fw-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--wtt-border);
    border-radius: 7px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--wtt-text);
    background: var(--wtt-cream);
    transition: border-color 0.15s;
    appearance: auto;
}

.ts-fw-select:focus,
.ts-fw-input:focus {
    outline: none;
    border-color: var(--wtt-green-light);
    background: #fff;
}

.ts-iframe-wrap iframe {
    display: block;
    border: none;
}

/* === Kiwi.com secondary flight search link === */

.ts-alt-btn {
    display: block;
    text-align: center;
    margin-top: 8px;
    padding: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--wtt-green-mid);
    border: 1px solid var(--wtt-border);
    border-radius: 7px;
    text-decoration: none;
    background: var(--wtt-cream);
    transition: background 0.15s, border-color 0.15s;
}

.ts-alt-btn:hover {
    background: var(--wtt-sand);
    border-color: var(--wtt-green-light);
    color: var(--wtt-green);
}

/* === Flight search optgroup styling === */

.ts-flight-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.ts-fw-select optgroup {
    font-size: 11px;
    font-weight: 600;
    color: var(--wtt-text-light);
    background: var(--wtt-cream);
}

.ts-fw-select option {
    font-size: 13px;
    color: var(--wtt-text);
    background: #fff;
    padding: 4px 0;
}

.ts-fw-select option:disabled {
    color: var(--wtt-text-light);
    font-style: italic;
}

/* === AI input text color override === */
input.ai-input,
input.ai-input:focus {
    color: #1a1a1a !important;
    background: #ffffff !important;
    -webkit-text-fill-color: #1a1a1a !important;
    caret-color: #1a1a1a !important;
}

/* City guide hero - allow persona pills to scroll without clipping */
.city-hero,
.city-hero-content,
.city-hero-overlay {
    overflow: visible !important;
}
/* Ensure the persona bar has correct containing behaviour */


    .persona-bar-label {
        font-size: 11px !important;
        font-weight: 700;
        color: rgba(255,255,255,.6) !important;
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: 8px !important;
        display: block;
    }



/* -------------------------------------------------------
   PERSONA PILLS MOBILE  mirrors city-nav-inner pattern
   Label stacks above. Pills container owns full width.
   Exact same overflow-x approach as the working tab nav.
   ------------------------------------------------------- */
@media (max-width: 768px) {

    .persona-bar {
        display: block;
        width: 100%;
    }

    .persona-bar-label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.65);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 8px;
    }

    /* Mirror of .city-nav-inner */
    .persona-pills {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 7px;
        padding-bottom: 4px;
        width: 100%;
    }

    .persona-pills::-webkit-scrollbar {
        display: none;
    }

    /* Mirror of .city-nav-link */
    .persona-pill {
        display: inline-flex;
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 12px;
        padding: 6px 13px;
    }
}

/* -- Johannesburg long city name mobile fix ----------------- */
@media (max-width: 480px) {
    .city-title {
        font-size: clamp(28px, 7vw, 42px) !important;
        word-break: break-word;
        hyphens: auto;
    }
}

/* -- Persona pills scroll - ensure no clipping from parent --- */
.city-hero-content {
    overflow: visible;
}
@media (max-width: 768px) {
    .city-hero-content {
        overflow: visible;
        padding-left: 16px;
        padding-right: 16px;
    }
    .persona-bar {
        width: calc(100% + 0px);
    }
    .persona-pills {
        /* Ensure it does NOT inherit any width constraints */
        min-width: 0;
        max-width: 100%;
    }
}

/* -- City Articles Section ----------------------------------- */
.city-articles-section {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--wtt-border);
}
.city-articles-title {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--wtt-green);
    margin-bottom: 16px;
    font-weight: 600;
}
.city-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.city-article-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--wtt-border);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
    background: #fff;
}
.city-article-card:hover {
    box-shadow: 0 4px 16px rgba(26,58,42,.1);
    transform: translateY(-2px);
}
.ca-thumb {
    height: 110px;
    background-size: cover;
    background-position: center;
    background-color: var(--wtt-sand);
}
.ca-body {
    padding: 12px 14px;
}
.ca-cat {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 6px;
    background: var(--wtt-sand);
    color: var(--wtt-green);
}
.ca-cat--safety     { background: #fee2e2; color: #b91c1c; }
.ca-cat--itineraries { background: #dbeafe; color: #1e40af; }
.ca-cat--food-drink { background: #fef9c3; color: #854d0e; }
.ca-cat--budget-travel { background: #dcfce7; color: #15803d; }
.ca-cat--accommodation { background: #f3e8ff; color: #6d28d9; }
.ca-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--wtt-text);
    line-height: 1.4;
    margin-bottom: 5px;
}
.ca-meta {
    font-size: 11.5px;
    color: var(--wtt-text-light);
}
@media (max-width: 768px) {
    .city-articles-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* -- CRITICAL MOBILE FIX: city-layout stack on small screens -- */
@media (max-width: 768px) {
    .city-layout {
        display: block !important;
        padding: 0 16px;
    }
    .city-main {
        display: block !important;
        width: 100% !important;
        padding: 24px 0 28px 0;
        border-right: none;
        border-bottom: 1px solid var(--wtt-border);
        min-width: 0;
    }
    .city-sidebar {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding: 24px 0 0 0;
    }
    .city-articles-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .city-articles-title {
        font-size: 17px;
    }
}

/* ============================================================
   WTT ANIMATIONS + WOMEN PERSONA + MAP STYLES
   ============================================================ */

/* -- KEYFRAMES ------------------------------------------------ */
@keyframes wttFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes wttFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes wttPopIn {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes wttSlideRight {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes wttPillBounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.08); }
    70%  { transform: scale(.97); }
    100% { transform: scale(1); }
}

/* -- SCROLL REVEAL ------------------------------------------- */
.wtt-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease-out, transform .5s ease-out;
}
.wtt-reveal.wtt-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .wtt-reveal, .wtt-stagger-in { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* -- STAGGER ENTRANCE ---------------------------------------- */
.wtt-stagger-in {
    opacity: 0;
    animation: wttFadeUp 0.45s ease-out both;
}

/* -- TAB CONTENT ANIMATION ----------------------------------- */
.city-tab-content.active {
    animation: wttFadeIn 0.25s ease-out both;
}

/* -- PERSONA PILL ACTIVE ANIMATION --------------------------- */
.persona-pill.active {
    animation: wttPillBounce 0.28s ease-out both;
}

/* -- WOMEN PERSONAS ------------------------------------------ */
.persona-group-sep {
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #9333ea;
    padding: 0 4px;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: .8;
}
.persona-group-sep::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 20px;
    background: rgba(147,51,234,.25);
    margin-right: 8px;
}

.persona-pill--women {
    border-color: rgba(147,51,234,.4) !important;
    color: #7e22ce !important;
}
.persona-pill--women.active {
    background: #9333ea !important;
    border-color: #9333ea !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(147,51,234,.35) !important;
}
.persona-pill--women:hover:not(.active) {
    background: #faf5ff !important;
    border-color: #9333ea !important;
}

/* -- WOMEN MODE BANNER --------------------------------------- */
.women-mode-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #faf5ff, #f3e8ff);
    border-bottom: 2px solid #9333ea;
    padding: 10px 48px;
    font-size: 13.5px;
    font-weight: 500;
    color: #6b21a8;
    animation: wttSlideRight .3s ease-out both;
}
.women-banner-icon { font-size: 18px; }
@media (max-width: 768px) {
    .women-mode-banner { padding: 10px 16px; font-size: 12.5px; }
}

/* -- MAP TAB -------------------------------------------------- */
.wtt-map-wrap {
    margin: 0 -40px -60px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--wtt-border);
    animation: wttFadeIn 0.4s ease-out both;
}
.wtt-map-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 14px 20px;
    background: var(--wtt-cream);
    border-bottom: 1px solid var(--wtt-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.wtt-map-filters::-webkit-scrollbar { display: none; }
.map-filter-btn {
    padding: 5px 14px;
    border-radius: 16px;
    border: 1.5px solid var(--wtt-border);
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
    font-family: var(--font-body, sans-serif);
}
.map-filter-btn:hover { border-color: var(--wtt-green); color: var(--wtt-green); }
.map-filter-btn.active { background: var(--wtt-green); border-color: var(--wtt-green); color: #fff; }
.map-filter-btn--women { border-color: rgba(147,51,234,.4); color: #7e22ce; }
.map-filter-btn--women.active { background: #9333ea; border-color: #9333ea; color: #fff; }
.wtt-leaflet-map {
    height: 420px;
    width: 100%;
    z-index: 1;
    background: #e8f0e9;
}
.wtt-map-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: var(--wtt-cream);
    border-top: 1px solid var(--wtt-border);
    font-size: 11.5px;
    color: var(--wtt-text-mid);
}
.map-leg-item { display: flex; align-items: center; gap: 5px; }
.map-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.map-leg-safe      { background: #2d5c42; }
.map-leg-tourist   { background: #c4622d; }
.map-leg-transport { background: #1d4ed8; }
.map-leg-caution   { background: #dc2626; }
.map-leg-women     { background: #9333ea; }

/* Mobile map */
@media (max-width: 768px) {
    .wtt-map-wrap { margin: 0 -16px -28px; }
    .wtt-leaflet-map { height: 320px; }
    .wtt-map-legend { gap: 10px; padding: 8px 14px; }
    .women-mode-banner { padding: 10px 16px; }
}

/* -- CITY HERO ENTRANCE -------------------------------------- */
.city-title {
    animation: wttFadeUp 0.6s .1s ease-out both;
}
.city-sub {
    animation: wttFadeUp 0.6s .25s ease-out both;
}
.city-eyebrow {
    animation: wttFadeUp 0.5s 0s ease-out both;
}
.persona-bar {
    animation: wttFadeUp 0.5s .35s ease-out both;
}
.city-facts-strip {
    animation: wttFadeUp 0.5s .1s ease-out both;
}

/* -- SAFETY BAR ANIMATION ------------------------------------ */
.sc-bar, .sb-bar {
    transition: width 1s ease-out;
}

/* -- FACT CARD ENTRANCE -------------------------------------- */
.fact-card {
    animation: wttPopIn 0.4s ease-out both;
}

/* ============================================================
   WOMEN PERSONA CONTENT STYLING -- distinct, premium, not generic
   ============================================================ */

/* Women group persona-content: unique background + typography */
.persona-content--women {
    background: linear-gradient(135deg, #fdf4ff 0%, #f3e8ff 60%, #fce7f3 100%);
    border: 1px solid rgba(147,51,234,.15);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.persona-content--women::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147,51,234,.08), transparent 70%);
    pointer-events: none;
}

/* Women tip box inside women persona content */
.persona-content--women .persona-tip-box {
    background: transparent;
    border: none;
    padding: 0;
}
.persona-content--women .ptip-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    color: #3b0764;
    letter-spacing: -.01em;
}
.persona-content--women .ptip-text {
    color: #4a1d78;
    font-size: 14px;
    line-height: 1.68;
}
.persona-content--women .ptip-emoji {
    background: linear-gradient(135deg, #f3e8ff, #fce7f3);
    border-radius: 10px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(147,51,234,.15);
}

/* Women pill active state -- shimmer */
.persona-pill--women.active {
    background: linear-gradient(135deg, #9333ea, #c026d3) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(147,51,234,.4) !important;
}

/* Women mode banner upgrade */
.women-mode-banner {
    background: linear-gradient(90deg, #f3e8ff 0%, #fce7f3 50%, #f3e8ff 100%);
    background-size: 200% auto;
    animation: womenBannerShimmer 3s linear infinite, wttSlideRight .3s ease-out both;
    border-bottom: 2px solid #c026d3;
    border-top: none;
    color: #6b21a8;
    font-weight: 600;
}
@keyframes womenBannerShimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}
.women-banner-icon {
    font-size: 20px;
    filter: drop-shadow(0 2px 4px rgba(147,51,234,.3));
}

/* Women group separator in pill bar -- more polished */
.persona-group-sep {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
    color: rgba(147,51,234,.7);
    padding: 0 6px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}
.persona-group-sep::before {
    content: '';
    width: 1px;
    height: 22px;
    background: linear-gradient(to bottom, transparent, rgba(147,51,234,.3), transparent);
    flex-shrink: 0;
}
.persona-group-sep::after {
    content: '♀';
    font-size: 12px;
}

/* City guide tab content fade-in on switch */
.city-tab-content.active {
    animation: wttFadeIn .22s ease-out both;
}

/* Persona pill hover micro-interaction */
.persona-pill {
    transition: all .2s cubic-bezier(.22,1,.36,1);
}
.persona-pill:hover:not(.active) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.persona-pill.active {
    transform: translateY(-1px);
    animation: wttPillBounce .28s ease-out both;
}

/* Map wrapper improved border radius */
.wtt-leaflet-map {
    border-radius: 0;
}
.wtt-map-wrap {
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}
.wtt-map-filters {
    border-radius: 0;
}

/* Smooth tab transition */
.city-nav-link {
    transition: all .2s cubic-bezier(.22,1,.36,1);
    border-radius: 6px 6px 0 0;
}

/* Safety bar smooth */
.sc-bar, .sb-bar {
    transition: width 1.1s cubic-bezier(.22,1,.36,1);
    transform-origin: left;
}

/* Fact card entrance animation */
@keyframes factPop {
    from { opacity:0; transform: scale(.9) translateY(10px); }
    to   { opacity:1; transform: none; }
}
.fact-card {
    animation: factPop .45s cubic-bezier(.22,1,.36,1) both;
    border-radius: 12px;
    transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.fact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26,58,42,.12);
}