/* =========================================
   Passport Section Specific Styles
   (Strictly Scoped to #passport-section)
   ========================================= */

#passport-section .passport-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 6px;
    width: fit-content;
}

.mobile-scroll-flag {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

.mobile-scroll-flag img {
    height: 18px;
    width: auto;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.1);
    display: block;
}

@media (max-width: 768px) {
    .header-container {
        position: relative;
    }

    .mobile-scroll-flag.active {
        opacity: 1;
        visibility: visible;
    }

    .passport-page-stats .stat-sub {
        justify-content: center;
    }
}

/* Tiers styles moved to core.css for global usage */

/* Country Tag */
.country-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
    margin-bottom: 4px;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85rem;
    color: var(--text-main);
}

/* Regional Stats */
.region-name {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.region-rank {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    width: 70px;
    text-align: right;
}

/* Dark Mode Overrides */

[data-theme="dark"] .passport-rank-badge {
    background-color: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

[data-theme="dark"] .rank-nav-btn {
    background: #1f2937;
    border-color: #374151;
    color: var(--text-main);
}

[data-theme="dark"] .rank-nav-btn:hover {
    background: #374151;
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

[data-theme="dark"] .mobile-back-btn,
[data-theme="dark"] .mobile-scroll-top-btn {
    background: rgba(31, 41, 55, 0.95);
    border-color: #374151;
    color: var(--text-main);
}

[data-theme="dark"] .mobile-back-btn:hover,
[data-theme="dark"] .mobile-scroll-top-btn:hover {
    background: #374151;
}

[data-theme="dark"] .share-btn {
    color: var(--text-muted);
    border-color: var(--border-color);
}

[data-theme="dark"] .passport-page-stats .stat-card {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: var(--text-main) !important;
}
[data-theme="dark"] .passport-page-stats .stat-value {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .passport-page-stats .stat-label {
    color: #94a3b8 !important;
}
[data-theme="dark"] .passport-page-stats .stat-sub {
    color: #60a5fa !important;
}

[data-theme="dark"] .home-card {
    background: #1f2937;
    border-color: #374151;
    color: var(--text-main);
}

[data-theme="dark"] .home-card .home-card-title {
    color: var(--heading-color);
    border-bottom-color: #374151;
}

[data-theme="dark"] .home-card .data-table th {
    background: #1f2937;
    color: var(--text-main);
    border-bottom-color: #374151;
}

[data-theme="dark"] .home-card .data-table td {
    color: var(--text-main);
    border-bottom-color: #374151;
}

[data-theme="dark"] .country-tag {
    background: #374151;
    color: var(--text-main);
}

[data-theme="dark"] .region-name {
    color: var(--text-main); /* Lighter than secondary */
}

[data-theme="dark"] .region-rank {
    color: var(--text-muted); /* Still muted but readable */
}

/* Embed Mode */
body.embed-mode .site-header, body.embed-mode .site-footer, body.embed-mode .hero-section, body.embed-mode .home-bottom-grid, body.embed-mode #insights-banner { display: none !important; }
body.embed-mode { background: transparent; padding: 0; margin: 0; }
body.embed-mode .main-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body.embed-mode .container { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100%; }
#embed-section { max-width: 350px; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; font-family: var(--font-main); position: relative; }

@media (max-width: 768px) {
    body.route-passport #passport-section .passport-header {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: -15px;
        padding-top: 0;
        padding-right: 0;
    }

    body.route-passport #passport-section .passport-header .share-btn {
        position: absolute;
        top: 0;
        right: 0;
        margin-left: 0 !important;
        z-index: 95;
    }

    body.route-passport #passport-section .passport-header .section-title {
        font-size: 1.5rem !important;
        text-align: center;
        margin-top: 12px;
    }

    body.route-passport #passport-section .passport-header-info {
        text-align: center;
        width: 100%;
    }

    #passport-section .passport-intro-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        width: 100%;
    }

    #passport-section .passport-intro-cta .primary-btn {
        margin-right: 0 !important;
    }
}

/* =========================================
   Mobile Back Button Styles
   ========================================= */

.mobile-back-bar {
    display: none; /* Hidden by default on desktop */
}

.mobile-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    color: var(--dark-blue);
    padding: 0;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.mobile-back-btn:hover {
    background: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.mobile-back-btn:active {
    transform: scale(0.95);
}

@media (max-width: 768px) {
    .mobile-back-bar {
        display: block;
        position: absolute;
        top: 72px;
        left: 12px;
        z-index: 90;
        pointer-events: none;
        width: auto;
    }

    body.route-passport .mobile-back-bar {
        top: 64px;
    }
    
    .mobile-back-bar.hidden {
        display: none !important;
    }

    .mobile-back-btn {
        pointer-events: auto; /* Enable clicks on the button itself */
    }

    /* Add spacing when back button is visible */
    body.has-mobile-back .main-content {
        padding-top: 40px;
    }

    /* Hide the inline back button on mobile to avoid duplication */
    .inline-back-btn {
        display: none !important;
    }

    .mobile-scroll-top-btn {
        display: flex;
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translate(-50%, 20px);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid var(--border-color);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        color: var(--dark-blue);
        align-items: center;
        justify-content: center;
        z-index: 1000;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
    }

    .mobile-scroll-top-btn.visible {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
    
    .mobile-scroll-top-btn:active {
        transform: translate(-50%, 0) scale(0.95);
    }
    
    .mobile-scroll-top-btn.hidden {
        display: none !important;
    }

    #compare-section .compare-header-row {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        padding-right: 16px;
        padding-left: 72px;
        box-sizing: border-box;
        justify-content: center;
        gap: 8px;
        pointer-events: none;
    }

    #compare-section .compare-header-row .section-title {
        text-align: center;
        flex: 1 1 auto;
    }

    #compare-section #compare-share-btn {
        margin-left: 0;
        pointer-events: auto;
    }

    #compare-section .compare-header {
        margin-top: 64px;
    }
}

/* Mobile Region Select */
@media (max-width: 691px) {
    .desktop-only-flex {
        display: none !important;
    }
    .region-select {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        background: var(--white);
        margin-bottom: 20px;
    }
}

/* =========================================
   Mobile Header Centering Fix (User Request)
   ========================================= */
@media (max-width: 900px) {
    /* 1. Generic Title Centering for pages with Back Button (except passport pages) */
    body.has-mobile-back:not(.route-passport) .section-title {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        text-align: center;
        z-index: 91;
        pointer-events: none;
        padding-left: 72px;
        padding-right: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 0 !important;
        box-sizing: border-box;
        min-height: 40px;
    }

    /* Passport visa-free pages: keep their own header layout */
    body.has-mobile-back #passport-section .passport-header .section-title {
        position: static;
        padding-left: 0;
        padding-right: 0;
        margin: 0;
        pointer-events: auto;
    }

    /* 2. Exclude Compare Section (already handled by its own CSS) */
    #compare-section .section-title {
        position: static;
        padding: 0;
        display: block;
        height: auto;
        margin: 0;
    }

    /* 3. Content Spacing Adjustments (Push content down, but keep compact) */
    /* Synergy */
    body.has-mobile-back #synergy-section .synergy-header-group {
        padding-top: 32px;
    }
    
    /* VFE, Regional, Rankings */
    body.has-mobile-back #vfe-section,
    body.has-mobile-back #regional-power-section,
    body.has-mobile-back #rankings-section {
        padding-top: 32px;
    }
    
    /* About */
    body.has-mobile-back #about-section .about-block {
        padding-top: 8px;
    }

    /* 4. Hide Inline Back Buttons (if any) */
    body.has-mobile-back .inline-back-btn {
        display: none !important;
    }

    /* 5. Reset Share Button Position (non-passport pages only) */
    body.has-mobile-back:not(.route-passport) .share-btn {
        position: static !important;
        margin-left: 8px !important;
        top: auto !important;
        right: auto !important;
    }
}

/* Hide back button on desktop for visa-free pages */
@media (min-width: 1024px) {
    .mobile-only-back-btn {
        display: none !important;
    }
}

/* Passport Profile Header and CTA Styles */
.passport-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    position: relative;
}

.passport-header-info {
    flex: 1;
    min-width: 0;
}

.share-btn {
    margin-left: auto;
    padding: 6px 12px;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
}

.share-btn:hover {
    background: var(--white);
    color: var(--primary-blue);
    box-shadow: var(--shadow-hover);
}

.passport-intro-cta {
    max-width: 800px;
    margin: 0 auto 20px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Passport Rank Navigation */
.passport-rank-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 6px;
    position: relative;
    width: 100%;
}

.rank-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0 12px;
    height: 40px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    color: var(--dark-blue);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    gap: 8px;
}

.rank-nav-flag {
    width: 20px;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    display: block;
    border: 1px solid rgba(0,0,0,0.15);
}

.rank-nav-btn:hover {
    background: var(--light-blue-bg);
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.rank-nav-placeholder {
    width: 40px;
    height: 40px;
}

/* Desktop Centering for Passport Header */
@media (min-width: 1024px) {
    .passport-header {
        position: relative;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .passport-header-info {
        flex: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Position share button absolutely on desktop */
    .passport-header .share-btn {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
    }

    /* Desktop Navigation Buttons Sizing */
    .rank-nav-btn {
        height: 56px;
        padding: 0 24px;
        font-size: 1.1rem;
        border-radius: 12px;
        gap: 12px;
    }

    .rank-nav-btn .rank-nav-flag {
        width: 36px;
        padding: 0;
        border-radius: 4px;
    }

    /* Desktop Navigation Buttons Positioning */
    /* Left aligned with PQI Score */
    .rank-nav-btn.prev {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Right aligned with Visa-Free */
    .rank-nav-btn.next {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    
    /* Hide placeholder on desktop as buttons are absolute */
    .rank-nav-placeholder {
        display: none;
    }

    .passport-intro-cta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: center;
    }

    .passport-intro-cta a:first-child {
        justify-self: end;
    }

    .passport-intro-cta a:last-child {
        justify-self: start;
    }
}

/* =========================================
   Desktop Split Layout for Passport Details
   ========================================= */
.passport-grid-split {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Global override for passport page stats cards (Mobile + Desktop base) */
.passport-page-stats .stat-card {
    justify-content: flex-start !important; /* Forces top alignment in column mode (mobile) */
}

@media (min-width: 1024px) {
    .passport-grid-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: stretch;
    }
    
    .passport-grid-split .home-card {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .passport-grid-split .home-card .table-container {
        flex: 1;
    }

    /* Compact Stats Grid for Desktop (PQI, Destinations, VFE) */
    .passport-page-stats {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .passport-page-stats .stat-card {
        padding: 12px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: relative !important;
        text-align: center !important;
        min-height: 90px !important;
    }

    .passport-page-stats .stat-icon {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        font-size: 1.4rem !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    .passport-page-stats .stat-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center !important;
        gap: 4px !important;
    }

    .passport-page-stats .stat-label {
        margin-bottom: 0 !important;
        font-size: 0.65rem !important;
    }

    .passport-page-stats .stat-value {
        font-size: 1.2rem !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    .passport-page-stats .stat-sub {
        margin-top: 0 !important;
        font-size: 0.7rem !important;
    }
    
    .passport-page-stats .neutral-rank-badge {
        margin-top: 2px !important;
        padding: 0 6px !important;
        font-size: 0.7rem !important;
    }
}