/* ============================================
   SHARED: HEADER
   Version: 10.2 — Soft Aurora Fade
   
   CHANGES v10.2 (from v9.4):
   - REPLACED: aggressive gradient (50% solid + hard edge)
     with soft 4-stop fade in aurora violet-black (8, 5, 18)
   - Max opacity 0.85 (was 1.0) — never fully opaque
   - Fade extends 32px below header for gentle dissolve
   - NO backdrop-filter, NO blur — pure gradient
   - No scroll detection needed — always soft fade
   ============================================ */

/* ============================================
   CRITICAL: HEADER VISIBILITY BY SCREEN
   ============================================ */

.app-header {
    display: none !important;
}

body[data-screen="searchScreen"] .app-header,
body[data-screen="operatorsScreen"] .app-header,
body[data-screen="joinupSearchScreen"] .app-header,
body[data-screen="joinupResultsScreen"] .app-header,
body[data-screen="joinupDetailsScreen"] .app-header,
body[data-screen="historyScreen"] .app-header {
    display: flex !important;
}

/* ============================================
   BASE STYLES
   ============================================ */

body[data-screen="searchScreen"] .app-header,
body[data-screen="operatorsScreen"] .app-header,
body[data-screen="joinupSearchScreen"] .app-header,
body[data-screen="joinupResultsScreen"] .app-header,
body[data-screen="joinupDetailsScreen"] .app-header,
body[data-screen="historyScreen"] .app-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header, 100);
    
    height: var(--header-total-height, 64px);
    max-width: var(--app-max-width, 520px);
    margin: 0 auto;
    
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md, 16px);
    
    padding-top: calc(var(--top-offset, 0px) + var(--spacing-sm, 8px));
    padding-bottom: var(--spacing-sm, 8px);
    padding-left: var(--screen-padding-x, 20px);
    padding-right: var(--screen-padding-x, 20px);
    
    /* Transparent — aurora shows through */
    background: transparent;
    
    /* Smooth transition */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ============================================
   HEADER CONTENT MASK — Soft fade into aurora
   
   Color: deep violet-black (8, 5, 18) matching aurora bg
   4-stop gradient for smooth dissolve, NO hard edge
   Extends 32px below header for gentle fade
   ============================================ */

body[data-screen="searchScreen"] .app-header::before,
body[data-screen="operatorsScreen"] .app-header::before,
body[data-screen="joinupSearchScreen"] .app-header::before,
body[data-screen="joinupResultsScreen"] .app-header::before,
body[data-screen="joinupDetailsScreen"] .app-header::before,
body[data-screen="historyScreen"] .app-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -32px;
    z-index: -1;
    background: linear-gradient(
        to bottom,
        rgba(8, 5, 18, 0.95) 0%,
        rgba(8, 5, 18, 0.72) 40%,
        rgba(8, 5, 18, 0.3) 70%,
        transparent 100%
    );
    pointer-events: none;
}

/* Mobile: fixed for keyboard handling */
@media (max-width: 519px) {
    body[data-screen="searchScreen"] .app-header,
    body[data-screen="operatorsScreen"] .app-header,
    body[data-screen="joinupSearchScreen"] .app-header,
    body[data-screen="joinupResultsScreen"] .app-header,
    body[data-screen="joinupDetailsScreen"] .app-header,
    body[data-screen="historyScreen"] .app-header {
        position: fixed;
    }
}

/* ============================================
   HIDDEN STATE
   ============================================ */

.app-header.header--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ============================================
   DESKTOP (>=520px)
   ============================================ */

@media (min-width: 520px) {
    body[data-screen="searchScreen"] .app-header,
    body[data-screen="operatorsScreen"] .app-header,
    body[data-screen="joinupSearchScreen"] .app-header,
    body[data-screen="joinupResultsScreen"] .app-header,
    body[data-screen="joinupDetailsScreen"] .app-header,
    body[data-screen="historyScreen"] .app-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        max-width: none;
        margin: 0;
        border-radius: 0;
    }
}

/* TG Desktop */
body.tg-desktop .app-header {
    --tg-header-height: 0px;
}

/* ============================================
   HEADER SECTIONS
   ============================================ */

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 16px);
    min-width: 0;
    flex: 1;
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    flex-shrink: 0;
}

/* ============================================
   BRAND — "enjoy." WORDMARK
   ============================================ */

.header-brand {
    display: flex;
    align-items: center;
    min-width: 0;
}

.brand-logo {
    display: none !important;
}

.brand-text {
    display: none !important;
}

.brand-wordmark {
    font-family: var(--font-family);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary, #fff);
    display: flex;
    align-items: baseline;
    user-select: none;
    cursor: default;
}

.brand-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--accent-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    border-radius: 50%;
    margin-left: 2px;
    position: relative;
    top: -2px;
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.6);
    animation: dotPulse 2.5s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
        box-shadow: 0 0 12px rgba(102, 126, 234, 0.6);
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.15);
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.8);
    }
}

/* ============================================
   HEADER BUTTONS
   ============================================ */

.header-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary, #fff);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.header-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.12);
}

.header-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.14);
}

.header-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
}

/* ============================================
   LANGUAGE SWITCHER
   ============================================ */

.lang-switcher {
    position: relative;
}

.lang-current {
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0 12px;
    width: auto;
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 60px;
    background: rgba(18, 18, 24, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md, 12px);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.2s ease;
    z-index: 110;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.lang-switcher.open .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.lang-option {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 8px);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, rgba(255,255,255,0.7));
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lang-option:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #fff);
}

.lang-option.active {
    background: var(--accent-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    color: #fff;
}

/* ============================================
   BACK BUTTON
   ============================================ */

.header-back {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md, 12px);
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--text-primary, #fff);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: var(--spacing-sm, 8px);
}

.header-back:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.14);
}

.header-back svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.app-header[data-screen="results"] .header-back,
.app-header[data-screen="comparison"] .header-back,
.app-header[data-screen="details"] .header-back,
.app-header[data-screen="booking"] .header-back {
    display: flex;
}

/* ============================================
   STATUS PILL
   ============================================ */

.status-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(102, 126, 234, 0.15);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 20px;
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 500;
    color: var(--accent-primary, #667eea);
    letter-spacing: 0.02em;
}

.status-pill__dot {
    width: 6px;
    height: 6px;
    background: var(--accent-primary, #667eea);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-primary, #667eea);
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.9); }
}

/* ============================================
   BRAND ICON (Club Datour logo)
   ============================================ */
.brand-icon {
    height: 70px;
    width: auto;
    display: block;
}