/**
 * ==========================================================================
 * HEADER, TOPBAR & NAVIGATION MENU - BẢO TRƯƠNG LIMOUSINE
 * Thiết kế hiện đại, sang trọng, tương thích hoàn hảo mọi độ phân giải
 * ==========================================================================
 */

#site-header,
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

/* ---------- 1. Topbar (Xanh Đen Sang Trọng) ---------- */
#pd-topbar,
.topbar {
    background: var(--bt-navy-dark, #0F2440);
    font-size: 0.775rem;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

#site-header.is-scrolled #pd-topbar,
.site-header.is-scrolled .topbar {
    transform: translateY(-100%);
    margin-bottom: -2.25rem;
    opacity: 0;
    pointer-events: none;
}

#pd-topbar .topbar-inner,
.topbar .header-container,
.topbar .topbar-inner {
    max-width: 85rem;
    margin: 0 auto;
    padding: 0.45rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#pd-topbar a:not(#affiliate-user-dropdown-menu *),
.topbar a:not(#affiliate-user-dropdown-menu *) {
    color: rgba(255, 255, 255, 0.9);
    transition: color 0.2s ease;
}

#pd-topbar a:not(#affiliate-user-dropdown-menu *):hover,
.topbar a:not(#affiliate-user-dropdown-menu *):hover {
    color: var(--bt-yellow, #F5A623);
}

.phone-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bt-yellow, #F5A623);
    box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.45);
    animation: pd-pulse 1.8s infinite;
    display: inline-block;
}

@keyframes pd-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.45); }
    70%  { box-shadow: 0 0 0 6px rgba(245, 166, 35, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); }
}

/* ---------- 2. Main Navigation Bar (Kính mờ Glassmorphism) ---------- */
#pd-mainbar,
.mainbar {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
    transition: all 0.35s ease;
}

#site-header.is-scrolled #pd-mainbar,
.site-header.is-scrolled .mainbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

#pd-mainbar .mainbar-inner,
.mainbar .header-container,
.mainbar .mainbar-inner {
    max-width: 85rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.75rem;
    transition: height 0.35s ease;
}

#site-header.is-scrolled #pd-mainbar .mainbar-inner,
.site-header.is-scrolled .mainbar .header-container {
    height: 4rem;
}

/* Logo Brand */
.logo-block img {
    height: 3.25rem;
    max-height: 52px;
    width: auto;
    object-fit: contain;
    transition: all 0.35s ease;
}

#site-header.is-scrolled .logo-block img {
    height: 2.75rem;
    max-height: 44px;
}

/* ---------- 3. Menu điều hướng Desktop ---------- */
.nav-link,
.nav-item {
    position: relative;
    color: var(--bt-navy, #183B68);
    font-size: 0.825rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

@media (min-width: 1280px) {
    .nav-link,
    .nav-item {
        font-size: 0.875rem;
        padding: 0.5rem 0.85rem;
    }
}

.nav-link:hover,
.nav-item:hover {
    color: var(--bt-orange, #E26A20);
    background: rgba(226, 106, 32, 0.07);
}

.nav-link.is-active,
.nav-item.is-active {
    color: var(--bt-orange, #E26A20);
    background: rgba(226, 106, 32, 0.09);
    font-weight: 800;
}

/* ---------- 4. Nút Đặt Vé Nổi Bật (CTA Button) ---------- */
.booking-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: linear-gradient(135deg, #E26A20 0%, #EA580C 100%);
    color: #ffffff !important;
    border-radius: 50px;
    padding: 0.6rem 1.35rem;
    font-weight: 800;
    font-size: 0.825rem;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 14px rgba(226, 106, 32, 0.3);
    transition: all 0.25s ease;
    white-space: nowrap;
    text-decoration: none;
}

@media (min-width: 1280px) {
    .booking-btn {
        padding: 0.65rem 1.6rem;
        font-size: 0.875rem;
    }
}

.booking-btn:hover {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(226, 106, 32, 0.4);
}

.booking-btn:active {
    transform: translateY(0);
}

/* ---------- 5. Dropdown Menu CTV ---------- */
#affiliate-user-dropdown-menu {
    z-index: 1050 !important;
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

#affiliate-user-dropdown-menu a {
    color: #334155 !important; /* slate-700 */
    text-decoration: none !important;
    transition: all 0.15s ease;
}

#affiliate-user-dropdown-menu a:hover {
    color: #0d3f8d !important;
    background-color: #f8fafc !important;
}

#affiliate-user-dropdown-menu a.aff-withdraw-link {
    color: #d97706 !important; /* amber-600 */
    background-color: transparent !important;
}

#affiliate-user-dropdown-menu a.aff-withdraw-link:hover {
    color: #b45309 !important; /* amber-700 */
    text-decoration: underline !important;
}

#affiliate-user-dropdown-menu a.aff-logout-link {
    color: #e11d48 !important; /* rose-600 */
}

#affiliate-user-dropdown-menu a.aff-logout-link:hover {
    color: #be123c !important;
    background-color: #fff1f2 !important;
}

/* ---------- 6. Drawer Navigation (Mobile & Tablet) ---------- */
#site-drawer {
    z-index: 99990 !important;
}

#site-drawer-backdrop {
    z-index: 99991 !important;
}

#site-drawer > div:last-child {
    z-index: 99992 !important;
}

/* ---------- 7. Khoảng trống Body tránh bị che khuất nội dung ---------- */
body {
    padding-top: 4.75rem;
}

@media (min-width: 768px) {
    body {
        padding-top: 7rem;
    }
}

@media (min-width: 1024px) {
    body {
        padding-top: 7.25rem;
    }
}