/* ============================================================
   KENYA YETU - Futuristic 2030-2040 Luxury Safari Theme
   Branding: 60% Ivory | 25% Safari Blue | 10% Kenya Red | 5% Safari Gold
   ============================================================ */

/* --- 1. BASE RESET & DEFAULTS --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: radial-gradient(circle at top center, rgba(27, 58, 140, 0.1), transparent 26%), linear-gradient(180deg, #FBF8F2 0%, #F3EEE5 100%);
    background-attachment: fixed;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
    letter-spacing: -0.006em;
}

/* Card labels are intentionally not document headings. This keeps the homepage
   outline focused on its real sections without changing the visual hierarchy. */
.seo-card-title {
    display: block;
    margin: 0 0 8px;
    color: inherit;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
}

.package-content .seo-card-title { font-size: 1.25rem; }
.destination-overlay .seo-card-title { margin-bottom: 3px; font-size: 1.2rem; }
.footer-col .seo-card-title { margin-bottom: 16px; color: white; font-family: 'Inter', sans-serif; font-size: 0.95rem; }
.smart-result-copy .seo-card-title { margin: 3px 0; color: var(--text); font-size: 0.98rem; }
.review-modal-header .seo-card-title { margin: 0 0 8px; font-size: 1.65rem; }
.agent-modal-header .seo-card-title { margin: 0; font-size: 1.1rem; }
.agent-modal-agent .agent-info .seo-card-title { margin: 0; color: var(--text); font-size: 0.92rem; }
.experts-section .expert-card .seo-card-title { margin: 0 0 6px; font-size: 1.1rem; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* CRM dashboard: premium spacing and reliable responsive chat composer */
body.page-agent-dashboard {
    --crm-space-1: 6px;
    --crm-space-2: 10px;
    --crm-space-3: 14px;
    --crm-space-4: 18px;
    --crm-space-5: 24px;
    --crm-surface: #ffffff;
    --crm-canvas: #f4f7fb;
    --crm-line: #dfe6f0;
    --crm-shadow: 0 10px 30px rgba(15, 35, 75, 0.07);
    background: var(--crm-canvas);
    color: #17233b;
}

body.page-agent-dashboard .content { padding: clamp(16px, 2.2vw, 30px); background: var(--crm-canvas); }
body.page-agent-dashboard .page-header { gap: var(--crm-space-4); margin-bottom: var(--crm-space-5); }
body.page-agent-dashboard .page-header > * { min-width: 0; }
body.page-agent-dashboard .page-header h1 { margin: 0 0 5px; font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -.025em; }
body.page-agent-dashboard .page-header p { max-width: 720px; line-height: 1.55; }
body.page-agent-dashboard .page-header .btn { min-height: 42px; }

body.page-agent-dashboard .stats-grid,
body.page-agent-dashboard .stats-row { gap: var(--crm-space-4); }
body.page-agent-dashboard .dashboard-grid { gap: var(--crm-space-5); }
body.page-agent-dashboard .card,
body.page-agent-dashboard .stat-card,
body.page-agent-dashboard .table-card { border: 1px solid var(--crm-line); border-radius: 16px; box-shadow: var(--crm-shadow); }
body.page-agent-dashboard .card { padding: clamp(18px, 2vw, 26px); }
body.page-agent-dashboard .stat-card { padding: clamp(17px, 1.8vw, 22px); }
body.page-agent-dashboard .card-header { gap: var(--crm-space-3); margin-bottom: var(--crm-space-4); }
body.page-agent-dashboard .activity-list,
body.page-agent-dashboard .task-list { display: flex; flex-direction: column; gap: var(--crm-space-2); }

body.page-agent-dashboard .form-grid { gap: var(--crm-space-4); }
body.page-agent-dashboard .form-group { min-width: 0; margin-bottom: var(--crm-space-4); }
body.page-agent-dashboard .form-group label { margin-bottom: 7px; color: #344258; font-size: .78rem; font-weight: 750; }
body.page-agent-dashboard .form-group input,
body.page-agent-dashboard .form-group select,
body.page-agent-dashboard .form-group textarea,
body.page-agent-dashboard .topbar-search input { width: 100%; min-height: 44px; box-sizing: border-box; border: 1px solid var(--crm-line); border-radius: 11px; background: #fbfcfe; padding: 10px 13px; color: #17233b; }
body.page-agent-dashboard .form-group textarea { min-height: 104px; line-height: 1.5; }
body.page-agent-dashboard .form-group input:focus,
body.page-agent-dashboard .form-group select:focus,
body.page-agent-dashboard .form-group textarea:focus { border-color: #1b3a8c; background: #fff; box-shadow: 0 0 0 4px rgba(27,58,140,.09); outline: none; }
body.page-agent-dashboard .form-actions { gap: var(--crm-space-2); margin-top: var(--crm-space-5); }
body.page-agent-dashboard .modal { border-radius: 18px; box-shadow: 0 24px 70px rgba(8,20,48,.22); }
body.page-agent-dashboard .modal-header,
body.page-agent-dashboard .modal-body,
body.page-agent-dashboard .modal-footer { padding-left: clamp(18px, 3vw, 28px); padding-right: clamp(18px, 3vw, 28px); }
body.page-agent-dashboard .data-table th,
body.page-agent-dashboard .data-table td { padding: 14px 16px; vertical-align: middle; }
body.page-agent-dashboard .tabs { gap: var(--crm-space-1); margin-bottom: var(--crm-space-5); padding-bottom: 2px; }

body.page-agent-dashboard .crm-chat-shell { height: calc(100dvh - 190px); min-height: 540px; }
body.page-agent-dashboard .crm-chat-board,
body.page-agent-dashboard .crm-chat-thread { min-height: 0; overflow: hidden; }
body.page-agent-dashboard .crm-chat-thread { position: relative; }
body.page-agent-dashboard .crm-chat-messages { min-height: 0; overscroll-behavior: contain; }
body.page-agent-dashboard .crm-chat-input { position: relative; z-index: 5; flex: 0 0 auto; padding-bottom: max(14px, env(safe-area-inset-bottom)); box-shadow: 0 -10px 24px rgba(15,35,75,.06); }
body.page-agent-dashboard .crm-chat-input-row textarea { min-width: 0; min-height: 48px; max-height: 144px; line-height: 1.45; }
body.page-agent-dashboard .crm-chat-input-row button { width: 48px; height: 48px; }
body.page-agent-dashboard .crm-thread-mobile-back { display: none; flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid var(--crm-line); border-radius: 10px; background: #fff; color: #1b3a8c; cursor: pointer; }

body.page-agent-dashboard #chatSidebar .chat-input-area,
body.page-agent-dashboard #chatSidebar .wa-send-form { position: relative; z-index: 3; flex: 0 0 auto; padding-bottom: max(12px, env(safe-area-inset-bottom)); box-shadow: 0 -8px 22px rgba(15,35,75,.07); }

@media (max-width: 1100px) {
    body.page-agent-dashboard .crm-chat-shell { display: block; height: calc(100dvh - 176px); min-height: 520px; }
    body.page-agent-dashboard .crm-chat-board,
    body.page-agent-dashboard .crm-chat-thread { width: 100%; height: 100%; max-height: none; }
    body.page-agent-dashboard .crm-chat-thread { display: none; }
    body.page-agent-dashboard .crm-chat-shell.thread-open .crm-chat-board { display: none; }
    body.page-agent-dashboard .crm-chat-shell.thread-open .crm-chat-thread { display: flex; }
    body.page-agent-dashboard .crm-thread-mobile-back { display: inline-grid; place-items: center; }
}

@media (max-width: 767px) {
    body.page-agent-dashboard .main { padding: 0; }
    body.page-agent-dashboard .content { padding: 14px; }
    body.page-agent-dashboard .page-header { align-items: stretch; flex-direction: column; margin-bottom: 16px; }
    body.page-agent-dashboard .page-header > div:last-child { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; }
    body.page-agent-dashboard .page-header .btn { width: 100%; justify-content: center; padding: 10px 12px; }
    body.page-agent-dashboard .dashboard-grid,
    body.page-agent-dashboard .form-grid { grid-template-columns: 1fr; gap: 14px; }
    body.page-agent-dashboard .card { padding: 17px; border-radius: 14px; }
    body.page-agent-dashboard .table-card { border-radius: 14px; }
    body.page-agent-dashboard .crm-chat-shell { height: calc(100dvh - 218px); min-height: 430px; margin: 0 -14px -14px; }
    body.page-agent-dashboard .crm-chat-toolbar { grid-template-columns: 1fr; }
    body.page-agent-dashboard .crm-chat-tabs { display: grid; grid-template-columns: 1fr 1fr; }
    body.page-agent-dashboard .crm-thread-header { position: relative; z-index: 6; }
    body.page-agent-dashboard .crm-thread-heading { min-width: 0; flex: 1; }
    body.page-agent-dashboard .crm-thread-heading h3,
    body.page-agent-dashboard .crm-thread-heading p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    body.page-agent-dashboard .crm-thread-actions { gap: 5px; }
    body.page-agent-dashboard .crm-thread-actions select { max-width: 105px; }
    body.page-agent-dashboard .crm-chat-messages .chat-msg { max-width: 94%; }
    body.page-agent-dashboard .crm-chat-input { padding: 11px 12px max(11px, env(safe-area-inset-bottom)); }
    body.page-agent-dashboard .crm-chat-input-row { gap: 8px; }
}

@media (max-width: 430px) {
    body.page-agent-dashboard .page-header > div:last-child { grid-template-columns: 1fr; }
    body.page-agent-dashboard .crm-chat-shell { height: calc(100dvh - 254px); }
    body.page-agent-dashboard .crm-thread-header { flex-wrap: wrap; }
    body.page-agent-dashboard .crm-thread-actions { width: 100%; padding-left: 48px; overflow-x: auto; }
    body.page-agent-dashboard .crm-thread-actions select { flex: 1; max-width: none; }
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}
a { text-decoration: none; color: inherit; transition: color var(--transition); }
ul { list-style: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--primary); color: white; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-warm); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

/* --- 2. DESIGN SYSTEM (2030-2040 Futuristic Safari) --- */
:root {
    --primary: #1B3A8C;
    --primary-dark: #0E1F5C;
    --primary-light: #2E5BBF;
    --primary-glow: rgba(27, 58, 140, 0.35);
    --primary-subtle: rgba(27, 58, 140, 0.06);
    --accent: #E63946;
    --accent-dark: #C5283D;
    --accent-light: #FF4D5A;
    --accent-glow: rgba(230, 57, 70, 0.3);
    --secondary: #D4A843;
    --secondary-dark: #B8922F;
    --secondary-light: #F0D27C;
    --secondary-glow: rgba(212, 168, 67, 0.3);
    --text: #0F172A;
    --text-light: #475569;
    --text-muted: #94A3B8;
    --bg: #FFFFFF;
    --bg-warm: #FAF9F6;
    --bg-cream: #F5F3EE;
    --bg-light: #F0EDE8;
    --bg-frost: rgba(255, 255, 255, 0.72);
    --border: #E2E4E9;
    --border-light: #EEF0F4;
    --success: #22C55E;
    --danger: #E63946;
    --warning: #F59E0B;
    --info: #3B82F6;
    --shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 20px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.1);
    --shadow-glow: 0 0 24px rgba(27, 58, 140, 0.12);
    --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 16px;
    --radius-pill: 50px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --transition: 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.25);
    --glass-blur: blur(16px);
}
/* --- 3. SHARED COMPONENTS --- */

/* Buttons */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: var(--radius-sm);
    font-weight: 600; font-size: 0.88rem; cursor: pointer;
    border: 1.5px solid transparent; transition: all var(--transition);
    font-family: 'Inter', sans-serif; letter-spacing: -0.01em;
    position: relative; overflow: hidden;
}
.btn::after {
    content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
    opacity: 0; transition: opacity var(--transition-fast);
}
.btn:hover::after { opacity: 1; }
.btn-primary { background: var(--primary); color: white; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 16px var(--primary-glow); }
.btn-primary:active { transform: translateY(0); }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--border); }
.btn-outline:hover { border-color: var(--primary); background: var(--primary-subtle); color: var(--primary); transform: translateY(-1px); }
.btn-accent { background: var(--accent); color: white; border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 4px 16px var(--accent-glow); }
.btn-secondary { background: var(--secondary); color: var(--text); border-color: var(--secondary); }
.btn-secondary:hover { background: var(--secondary-dark); color: white; }
.btn-ghost { background: transparent; color: var(--primary); border-color: transparent; }
.btn-ghost:hover { background: var(--primary-subtle); }
.btn-white { background: white; color: var(--primary); border-color: white; }
.btn-white:hover { background: var(--bg-warm); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline-white { background: transparent; color: white; border-color: rgba(255,255,255,0.3); }
.btn-outline-white:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }
.btn-sm { padding: 8px 14px; font-size: 0.82rem; }
.btn-lg { padding: 14px 28px; font-size: 0.95rem; }
.btn-full { width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Container & Section */
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section-alt { background: var(--bg-warm); }
.section-header { text-align: center; margin-bottom: 36px; }
.section-header h2 { font-size: 2rem; margin-bottom: 10px; color: var(--text); }
.section-header p { color: var(--text-light); font-size: 1rem; max-width: 540px; margin: 0 auto; line-height: 1.6; }
.section-title { font-size: 1.8rem; text-align: center; margin-bottom: 10px; }
.section-subtitle { text-align: center; color: var(--text-light); margin-bottom: 32px; }

/* Header */
.header {
    position: sticky; top: 0; z-index: 1000;
    background: linear-gradient(180deg, rgba(255,250,250,0.92) 0%, rgba(255,255,255,0.88) 100%); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid transparent; transition: all var(--transition);
}
.header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 33%, var(--primary) 33%, var(--primary) 66%, var(--secondary) 66%, var(--secondary) 100%);
}
.header.scrolled { border-bottom-color: var(--border-light); box-shadow: 0 1px 12px rgba(15, 23, 42, 0.06); }
.header.scrolled::before { box-shadow: 0 1px 6px rgba(230, 57, 70, 0.3); }

/* Mobile nav open - lower header z-index so nav can overlay */
body.mobile-nav-open .header { z-index: 998; }

.header-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; gap: 12px; font-family: 'Playfair Display', serif; font-size: 1.55rem; font-weight: 700; color: var(--text); letter-spacing: -0.03em; }
.logo-icon { height: 52px; width: auto; filter: drop-shadow(0 2px 8px rgba(27, 58, 140, 0.15)); }
.logo-text span { color: var(--primary); }

/* Navigation */
.nav { display: flex; gap: 28px; }
.nav a { font-size: 0.88rem; font-weight: 500; color: var(--text-light); transition: color var(--transition-fast); padding: 6px 0; position: relative; }
.nav a:hover, .nav a.active { color: var(--primary); }
.nav a.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--primary); border-radius: 1px; }
.nav-links { display: flex; gap: 28px; }
.nav-links li a { font-size: 0.88rem; font-weight: 500; color: var(--text-light); transition: color var(--transition-fast); }
.nav-links li a:hover, .nav-links li a.active { color: var(--primary); }
.nav-cta { background: var(--primary) !important; color: white !important; padding: 9px 18px !important; border-radius: var(--radius-sm); }
.hamburger, .mobile-toggle { display: none; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--text); padding: 8px; }

/* Mega Menu */
.nav-desktop { display: flex; gap: 2px; align-items: center; }
.mobile-menu-heading,
.mobile-portal-links {
    display: none;
}
.nav-item { position: relative; padding: 6px 12px; font-size: 0.84rem; font-weight: 500; color: var(--text-light); cursor: pointer; transition: all var(--transition-fast); border-radius: var(--radius-sm); letter-spacing: -0.005em; }
.nav-item:hover { color: var(--primary); background: var(--primary-subtle); }
.mega-menu {
    display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: linear-gradient(145deg, #0d1f4a 0%, #1b3a8c 100%); border-radius: var(--radius-lg); padding: 20px; border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25); min-width: 640px; max-width: 95vw; z-index: 1001;
}
.nav-item:hover .mega-menu { display: block; }
.mega-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mega-menu-col .mega-menu-heading { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,0.55); margin-bottom: 10px; font-family: 'Inter', sans-serif; }
.mega-menu-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 0.85rem; color: rgba(255,255,255,0.92); transition: all var(--transition-fast); }
.mega-menu-link:hover { background: rgba(255,255,255,0.12); color: #fff; }
.mega-menu-link i { width: 18px; text-align: center; color: rgba(255,255,255,0.7); font-size: 0.82rem; }
.header-actions { display: flex; align-items: center; gap: 10px; }

/* ── Site Header Placeholder ── */
#site-header { position: relative; z-index: 1000; }
/* ── Top Utility Bar ── */
.topbar {
    background: #ffffff; /* solid white bar */
    color: #222222;
    font-size: 0.75rem;
    border-bottom: 2px solid var(--accent);
    position: relative;
    z-index: 1001;
}
.topbar-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center;
    height: 42px;
}

/* Left side contact info */
.topbar-left {
    display: flex; align-items: center; gap: 6px;
    flex: 1.9; /* take left space */
}
.topbar-item {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    color: #222222 !important;
    text-shadow: none;
}
.topbar-item i {
    font-size: 0.75rem;
    color: #444444 !important;
    opacity: 1;
}
.topbar-divider { width: 1px; height: 12px; background: rgba(0,0,0,0.2); margin: 0 4px; }

/* Kenyan flag centered */
.topbar-flag {
    flex-shrink: 0;
    margin: 70px 170px; /* spacing around flag */
}
.topbar-flag img {
    height: 24px;
    display: block;
}

/* Right side links pushed far right */
.topbar-right {
    display: flex; align-items: center; gap: 3px;
    margin-left: 50px; /* push to far right */
}

.topbar-link {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--radius-sm);
    color: #222222; font-weight: 600; letter-spacing: -0.005em;
    transition: all var(--transition-fast);
}
.topbar-link i { font-size: 0.7rem; color: #444444; }
.topbar-link:hover { color: #000000; background: rgba(0,0,0,0.05); }

/* Traveller link → solid black */
.topbar-link-kenya-black {
    color: #000000 !important;
    text-shadow: none !important;
}
.topbar-link-kenya-black i { color: #000000 !important; }
.topbar-link-kenya-black:hover {
    background: rgba(0,0,0,0.1) !important;
    color: #000000 !important;
}

/* Kenyan Flag Coloured Topbar Links */
.topbar-link-kenya-red {
    color: #BB1405 !important;
    text-shadow: none;
}
.topbar-link-kenya-red i { color: #000000; }
.topbar-link-kenya-red:hover {
    background: rgba(187,20,5,0.1) !important;
    color: #FF3333 !important;
}
.topbar-link-kenya-green {
    color: #006600 !important;
    text-shadow: none;
}
.topbar-link-kenya-green i { color: #006600; }
.topbar-link-kenya-green:hover {
    background: rgba(0,102,0,0.1) !important;
    color: #33DD44 !important;
}


/* ── Active Nav State ── */
.nav-desktop > .nav-item.nav-active,
.nav-desktop > .nav-item.nav-active:hover {
    color: var(--primary);
    background: var(--primary-subtle);
}
.nav-desktop > .nav-item.nav-active::after {
    content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
    width: 16px; height: 2px; background: var(--primary); border-radius: 1px;
}

/* ── Header Breadcrumb ── */
.header-breadcrumb {
    max-width: 1280px; margin: 0 auto; padding: 0 24px;
    border-top: 1px solid var(--border-light);
}
.breadcrumb-inner {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 0; font-size: 0.73rem; color: var(--text-muted);
}
.breadcrumb-inner a {
    color: var(--text-muted); transition: color var(--transition-fast);
    display: inline-flex; align-items: center;
}
.breadcrumb-inner a:hover { color: var(--primary); }
.breadcrumb-sep { font-size: 0.55rem; opacity: 0.4; }
.breadcrumb-section { color: var(--text-muted); }
.breadcrumb-current { color: var(--text); font-weight: 500; }

/* ── Responsive: Topbar ── */
@media (max-width: 768px) {
    .topbar { display: none; }
    .header-breadcrumb { display: none; }
    .header-inner { padding: 0 16px; }
    
    /* CRM Dashboard topbar must stay visible */
    body.page-agent-dashboard .main .topbar,
    body.page-partner-portal .main .topbar,
    body.page-visitor-portal .main .topbar,
    body.page-visitor-portal .portal-main .portal-topbar {
        display: flex !important;
    }
.nav-desktop {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        background: white; flex-direction: column; padding: 80px 24px 24px;
        transform: translateX(100%); transition: transform 0.3s var(--ease);
        z-index: 1100; overflow-y: auto;
    }
    .nav-desktop.mobile-open { transform: translateX(0); }
    .nav-desktop .nav-item { padding: 12px 16px; border-radius: var(--radius-sm); width: 100%; }
    .nav-desktop .mega-menu {
        position: static; transform: none; min-width: 100% !important;
        box-shadow: none; border: none; padding: 0 0 0 16px; display: block !important;
    }
    .hamburger {
        display: block !important; width: 36px; height: 36px;
        position: relative; cursor: pointer; background: none; border: none; padding: 0;
    }
    .hamburger span {
        display: block; width: 20px; height: 2px; background: var(--text);
        position: absolute; left: 8px; transition: all 0.25s var(--ease);
    }
    .hamburger span:nth-child(1) { top: 11px; }
    .hamburger span:nth-child(2) { top: 17px; }
    .hamburger span:nth-child(3) { top: 23px; }
    .hamburger.active span:nth-child(1) { top: 17px; transform: rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { top: 17px; transform: rotate(-45deg); }
}

/* Hero */
.hero {
    position: relative; padding: 96px 24px 72px; text-align: center;
    background:
        linear-gradient(145deg, rgba(10,22,40,0.82) 0%, rgba(14,31,92,0.7) 35%, rgba(27,58,140,0.44) 65%, rgba(46,91,191,0.26) 100%),
        url("images/generated/home-hero-kenya-panorama.png") center/cover no-repeat;
    color: white; overflow: hidden;
}
.hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,168,67,0.08) 0%, transparent 60%),
                radial-gradient(ellipse 60% 50% at 80% 100%, rgba(230,57,70,0.06) 0%, transparent 50%);
}
.hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(212,168,67,0.20), transparent 18%),
                radial-gradient(circle at 80% 30%, rgba(255,255,255,0.10), transparent 25%),
                radial-gradient(circle at 50% 80%, rgba(27,58,140,0.16), transparent 28%);
    opacity: 1;
    mix-blend-mode: screen;
    filter: blur(1px);
}
.hero-pattern { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(255,255,255,0.015) 80px, rgba(255,255,255,0.015) 81px); }
.hero-content { position: relative; max-width: 720px; margin: 0 auto; }

.anchor-target { display: block; position: relative; top: -110px; visibility: hidden; height: 0; overflow: hidden; }
.hero h1 { font-size: 2.8rem; margin-bottom: 14px; letter-spacing: -0.025em; font-weight: 800; }
.hero h1 span { color: var(--secondary-light); }
.hero p { font-size: 1.05rem; opacity: 0.85; margin-bottom: 28px; max-width: 540px; margin-left: auto; margin-right: auto; line-height: 1.65; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); backdrop-filter: blur(12px); padding: 7px 18px; border-radius: var(--radius-pill); font-size: 0.82rem; margin-bottom: 18px; border: 1px solid rgba(255,255,255,0.12); }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 40px; justify-content: center; margin-top: 40px; }
.hero-stat { text-align: center; }
.hero-stat-number, .hero-stat .num { display: block; font-size: 1.8rem; font-weight: 700; font-family: 'Playfair Display', serif; }
.hero-stat-label, .hero-stat .label { font-size: 0.78rem; opacity: 0.7; letter-spacing: 0.02em; }

/* ── Hero Interactive Topic Images ── */
.hero-images {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.hero-images .hero-float-card {
    position: absolute;
    border-radius: var(--radius-lg);
    overflow: hidden;
    pointer-events: auto;
    cursor: default;
    opacity: 0;
    transform: translateY(30px) scale(0.92);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), box-shadow 0.35s var(--ease);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.15);
    will-change: transform, opacity;
}
.hero-images .hero-float-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.hero-images .hero-float-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--ease), filter 0.35s var(--ease);
}
.hero-images .hero-float-card:hover img {
    transform: scale(1.08);
    filter: brightness(1.1);
}
.hero-images .hero-float-card:hover {
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}
.hero-images .hero-float-card .float-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 14px 12px;
    background: linear-gradient(transparent, rgba(8, 14, 31, 0.82));
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    transform: translateY(8px);
    opacity: 0;
    transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
    display: flex;
    align-items: center;
    gap: 6px;
}
.hero-images .hero-float-card:hover .float-label {
    transform: translateY(0);
    opacity: 1;
}
.hero-images .hero-float-card .float-label i {
    font-size: 0.7rem;
    color: var(--secondary-light);
}

/* Float animation keyframes */
@keyframes heroFloat1 {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-8px) translateX(3px); }
    50% { transform: translateY(-4px) translateX(-2px); }
    75% { transform: translateY(-10px) translateX(1px); }
}
@keyframes heroFloat2 {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-6px) translateX(-4px); }
    50% { transform: translateY(-10px) translateX(2px); }
    75% { transform: translateY(-3px) translateX(-1px); }
}
@keyframes heroFloat3 {
    0%, 100% { transform: translateY(0) translateX(0); }
    33% { transform: translateY(-12px) translateX(2px); }
    66% { transform: translateY(-5px) translateX(-3px); }
}
.hero-images .hero-float-card.visible.anim-1 { animation: heroFloat1 6s ease-in-out infinite; }
.hero-images .hero-float-card.visible.anim-2 { animation: heroFloat2 7s ease-in-out infinite 0.5s; }
.hero-images .hero-float-card.visible.anim-3 { animation: heroFloat3 8s ease-in-out infinite 1s; }

/* Pause float on hover */
.hero-images .hero-float-card:hover { animation-play-state: paused; }

/* Position presets for desktop */
.hero-float-card.float-tl { top: 15%; left: 6%; width: 160px; height: 120px; }
.hero-float-card.float-tr { top: 12%; right: 6%; width: 180px; height: 130px; }
.hero-float-card.float-bl { bottom: 18%; left: 8%; width: 150px; height: 110px; }
.hero-float-card.float-br { bottom: 15%; right: 8%; width: 170px; height: 125px; }
.hero-float-card.float-ml { top: 40%; left: 4%; width: 140px; height: 105px; }
.hero-float-card.float-mr { top: 35%; right: 4%; width: 155px; height: 115px; }

/* Sub-hero (smaller cards) */
.hero.sub-hero .hero-float-card.float-tl { top: 12%; left: 4%; width: 120px; height: 90px; }
.hero.sub-hero .hero-float-card.float-tr { top: 10%; right: 4%; width: 130px; height: 95px; }
.hero.sub-hero .hero-float-card.float-bl { bottom: 16%; left: 6%; width: 110px; height: 82px; }
.hero.sub-hero .hero-float-card.float-br { bottom: 14%; right: 6%; width: 125px; height: 88px; }
.hero.sub-hero .hero-float-card.float-ml { top: 38%; left: 3%; width: 105px; height: 78px; }
.hero.sub-hero .hero-float-card.float-mr { top: 33%; right: 3%; width: 115px; height: 85px; }

/* Animate-in entrance classes */
.animate-in {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.animate-in.delay-1 { transition-delay: 0.12s; }
.animate-in.delay-2 { transition-delay: 0.24s; }
.animate-in.delay-3 { transition-delay: 0.36s; }
.animate-in.delay-4 { transition-delay: 0.48s; }
.hero .animate-in,
.hero-about .animate-in,
.hero-destinations .animate-in,
.hero-experiences .animate-in {
    opacity: 0;
    transform: translateY(18px);
}
.hero .animate-in.visible,
.hero-about .animate-in.visible,
.hero-destinations .animate-in.visible,
.hero-experiences .animate-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive: Hero Images */
@media (max-width: 900px) {
    .hero-float-card.float-tl,
    .hero-float-card.float-tr,
    .hero-float-card.float-bl,
    .hero-float-card.float-br,
    .hero-float-card.float-ml,
    .hero-float-card.float-mr {
        width: 110px;
        height: 82px;
    }
    .hero-float-card.float-tl { top: 8%; left: 2%; }
    .hero-float-card.float-tr { top: 6%; right: 2%; }
    .hero-float-card.float-bl { bottom: 12%; left: 3%; }
    .hero-float-card.float-br { bottom: 10%; right: 3%; }
    .hero-float-card.float-ml { top: 30%; left: 1%; }
    .hero-float-card.float-mr { top: 28%; right: 1%; }
}
@media (max-width: 600px) {
    .hero-images .hero-float-card {
        width: 80px !important;
        height: 60px !important;
        border-radius: var(--radius);
        border-width: 1.5px;
    }
    .hero-float-card.float-tl { top: 6%; left: 2%; }
    .hero-float-card.float-tr { top: 5%; right: 2%; }
    .hero-float-card.float-bl { display: none; }
    .hero-float-card.float-br { display: none; }
    .hero-float-card.float-ml { top: 25%; left: 1%; }
    .hero-float-card.float-mr { top: 22%; right: 1%; }
    .hero-float-card .float-label { display: none; }
}

/* Reviews + Experts */
.reviews-section { background: var(--bg-warm); padding: 100px 0; }
.reviews-section .container { padding-top: 18px; padding-bottom: 18px; }
.reviews-section .review-panel-card { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: 22px; align-items: center; background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(248,248,246,0.96)); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08); padding: 28px; margin-bottom: 28px; }
.reviews-section .review-panel-card h3 { margin-bottom: 10px; font-size: 2rem; }
.reviews-section .review-rating-card { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }

.agent-intro-section { padding: 56px 0 32px; }
.agent-intro-card { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: center; background: linear-gradient(180deg, rgba(255,255,255,1), rgba(247,248,252,1)); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 30px; }
.agent-intro-card h2 { font-size: 2rem; margin-top: 8px; }
.agent-intro-card p { color: var(--text-muted); line-height: 1.75; max-width: 560px; }
.agent-intro-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
.agent-intro-actions .btn { min-width: 180px; }

.quick-links-section { padding: 56px 0 32px; }
.quick-links-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.quick-link-card { display: grid; gap: 10px; padding: 24px; border-radius: var(--radius-lg); background: white; border: 1px solid var(--border-light); box-shadow: var(--shadow-card); transition: transform var(--transition), box-shadow var(--transition); color: var(--text); }
.quick-link-card:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08); }
.quick-link-card i { font-size: 1.2rem; color: var(--primary); }
.quick-link-card strong { display: block; font-size: 1rem; margin-top: 6px; }
.quick-link-card span { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; }
.reviews-section .rating-badge { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 24px; background: var(--primary); color: white; font-size: 1.8rem; font-weight: 700; box-shadow: 0 14px 30px rgba(27,58,140,0.18); }
.reviews-section .review-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.reviews-section .review-actions p { flex: 1 1 420px; color: var(--text-muted); font-size: 0.95rem; line-height: 1.75; }
.reviews-section .review-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.reviews-section .review-card { background: white; border-radius: 8px; padding: 22px; border: 1px solid #E6E8EE; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05); display: grid; gap: 14px; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.reviews-section .review-card:hover { transform: translateY(-2px); border-color: rgba(27,58,140,0.18); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); }
.reviews-section .review-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.reviews-section .review-card-author { display: flex; align-items: center; gap: 14px; }
.reviews-section .review-avatar { width: 44px; height: 44px; border-radius: 50%; background: #EAF0FF; color: var(--primary); display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; border: 1px solid rgba(27,58,140,0.12); box-shadow: none; }
.reviews-section .review-card-author h4 { margin: 0; font-size: 1rem; }
.reviews-section .review-card-author p { margin: 3px 0 0; color: var(--text-muted); font-size: 0.88rem; }
.reviews-section .review-trip { background: #F4F6FA; color: #334155; padding: 7px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.reviews-section .review-stars { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--secondary); }
.reviews-section .review-stars .stars { display: inline-flex; gap: 3px; color: #E3B341; }
.reviews-section .review-card > p { margin-bottom: 0; color: #334155; line-height: 1.65; font-size: 0.95rem; }
.reviews-section .review-card-image { display: none !important; }
.reviews-section .review-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid #EEF0F4; color: var(--text-muted); font-size: 0.82rem; }
.reviews-section .review-card-footer button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #DCE1EA; background: white; color: #334155; border-radius: 999px; padding: 6px 10px; cursor: pointer; font: inherit; font-weight: 700; }
.reviews-section .review-card-footer button:hover { border-color: var(--primary); color: var(--primary); }
.reviews-section .review-footer { margin-top: 24px; display: flex; justify-content: center; }
.reviews-section .review-footer .btn { min-width: 170px; }

.reviews-section .review-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.reviews-section .review-sort-group { display: flex; gap: 6px; background: #F4F6FA; padding: 4px; border-radius: 10px; }
.reviews-section .review-sort-btn { border: none; background: transparent; padding: 8px 16px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 0.88rem; font-weight: 600; color: #64748B; display: inline-flex; align-items: center; gap: 6px; transition: all var(--transition); }
.reviews-section .review-sort-btn:hover { color: var(--primary); }
.reviews-section .review-sort-btn.active { background: white; color: var(--primary); box-shadow: 0 2px 8px rgba(15,23,42,0.08); }
.reviews-section .review-filter-select { border: 1px solid #DCE1EA; border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 0.88rem; color: #334155; background: white; cursor: pointer; min-width: 140px; }
.reviews-section .review-filter-select:focus { outline: none; border-color: var(--primary); }
.reviews-section .review-featured-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; color: var(--secondary); background: rgba(227,179,65,0.12); padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.reviews-section .review-featured-badge i { font-size: 0.65rem; }
.reviews-section .review-footer-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.reviews-section .review-card-footer button.voted { border-color: var(--primary); background: rgba(27,58,140,0.06); color: var(--primary); }

.experts-section { padding: 100px 0; }
.experts-section .expert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.experts-section .expert-card { background: white; border-radius: var(--radius-lg); padding: 32px 26px 28px; border: 1px solid var(--border-light); box-shadow: var(--shadow-card); text-align: center; transition: transform var(--transition), box-shadow var(--transition); display: grid; gap: 18px; justify-items: center; }
.experts-section .expert-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12); }
.experts-section .expert-photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin: 0; border: 4px solid rgba(27,58,140,0.16); }
.experts-section .expert-card h4 { margin: 0; font-size: 1.15rem; }
.experts-section .agent-chat-btn { margin-top: 12px; width: 100%; justify-content: center; }
.experts-section .agent-chat-btn.btn-outline { color: var(--primary); border-color: var(--primary); }.experts-section .expert-card h4 { margin: 0 0 6px; font-size: 1.1rem; }
.experts-section .expert-card p { margin: 0; color: var(--text-muted); font-size: 0.94rem; line-height: 1.6; }
.experts-section .expert-card .expert-bio { margin: 14px 0 0; color: var(--text-light); font-size: 0.92rem; line-height: 1.65; }
.experts-section .expert-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.experts-section .expert-tags span { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 999px; background: var(--bg-warm); color: var(--text); font-size: 0.8rem; }

.smart-assistant-section { background: linear-gradient(180deg, #F7F8FC 0%, #FFFFFF 100%); padding: 90px 0; }
.smart-assistant-card { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 30px; align-items: start; background: white; border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 34px; }
.assistant-copy h2 { margin: 14px 0 14px; font-size: 2rem; line-height: 1.1; }

.viewed-recently-section .recently-viewed-grid,
.trending-grid,
.deal-grid,
.resource-grid,
.event-grid,
.article-grid,
.category-grid,
.partner-logos {
    display: grid;
    gap: 20px;
}

.category-grid,
.resource-grid,
.article-grid,
.partner-logos {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.package-grid,
.event-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.category-card,
.resource-card,
.deal-card,
.article-card,
.event-card,
.map-card,
.partner-logo,
.recently-card,
.package-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-card);
    padding: 24px;
    transition: transform var(--transition), box-shadow var(--transition);
}

.category-card:hover,
.resource-card:hover,
.deal-card:hover,
.article-card:hover,
.event-card:hover,
.map-card:hover,
.partner-logo:hover,
.recently-card:hover,
.package-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.1);
}

.category-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    background: var(--primary-subtle);
    color: var(--primary);
    font-size: 1.4rem;
}

.category-card h3,
.resource-card h3,
.deal-card h3,
.article-card h3,
.event-card h3,
.recently-card h3 {
    margin-bottom: 12px;
}

.card-title {
    margin-bottom: 12px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.4;
}

.package-card {
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
}

.package-media {
    position: relative;
    min-height: 240px;
    overflow: hidden;
}

.package-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s var(--ease);
}

.package-card:hover .package-media img {
    transform: scale(1.05);
}

.package-activity {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    background: rgba(8, 14, 31, 0.9);
    border-radius: 16px;
    padding: 14px 16px;
    color: white;
    font-size: 0.9rem;
    line-height: 1.4;
}

.package-content {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.package-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.package-badges .badge {
    background: rgba(27, 58, 140, 0.08);
    color: var(--primary);
    border-radius: var(--radius-pill);
}

.package-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.package-footer {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.package-price strong {
    display: block;
    font-size: 1.45rem;
    margin-bottom: 4px;
}

.package-price small {
    color: var(--text-muted);
}

.package-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.package-actions .btn-full {
    width: 100%;
}

.map-section .map-grid {
    grid-template-columns: 1.5fr 1fr;
    align-items: stretch;
}

.map-card {
    padding: 32px;
}

.map-placeholder {
    min-height: 260px;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 16px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 30px;
    background: var(--bg-warm);
}

.map-placeholder i {
    font-size: 2rem;
    color: var(--primary);
}

.map-highlights {
    display: grid;
    gap: 10px;
    margin-top: 24px;
    color: var(--text-muted);
}

.resource-card ul {
    margin: 18px 0 0;
    padding-left: 20px;
    color: var(--text-muted);
    list-style: disc;
}

.event-card {
    padding: 28px;
}

.event-card .badge {
    background: rgba(230, 57, 70, 0.1);
    color: var(--accent);
    margin-bottom: 14px;
}

.article-card {
    padding: 28px;
}

.article-meta {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 18px;
    display: block;
}

.article-card p {
    color: var(--text-muted);
    margin-bottom: 18px;
    min-height: 80px;
}

.article-card .btn-sm {
    padding: 8px 16px;
    font-size: 0.82rem;
}

.blog-modal-overlay { position: fixed; inset: 0; z-index: 10010; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, 0.68); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); }
.blog-modal-overlay.active { opacity: 1; visibility: visible; }
body.modal-open { overflow: hidden; }
.blog-modal { position: relative; width: min(940px, 100%); max-height: min(88vh, 860px); overflow: auto; border-radius: 18px; background: white; box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28); border: 1px solid rgba(255,255,255,0.2); }
.blog-modal-close { position: sticky; top: 14px; float: right; z-index: 2; width: 42px; height: 42px; margin: 14px 14px -56px 0; border: 1px solid rgba(15,23,42,0.08); border-radius: 50%; background: rgba(255,255,255,0.94); color: var(--text); cursor: pointer; box-shadow: 0 10px 24px rgba(15,23,42,0.12); }
.blog-modal-close:hover { color: var(--accent); transform: translateY(-1px); }
.blog-modal-hero { height: 250px; overflow: hidden; background: linear-gradient(135deg, var(--primary), var(--accent)); }
.blog-modal-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-modal-content { padding: 30px clamp(22px, 4vw, 46px) 36px; }
.blog-modal-tag { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 12px; background: rgba(27,58,140,0.08); color: var(--primary); font-weight: 800; font-size: 0.78rem; margin-bottom: 12px; }
.blog-modal h2 { margin: 0 52px 10px 0; font-size: clamp(1.7rem, 3vw, 2.45rem); line-height: 1.1; color: var(--text); }
.blog-modal-meta { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 18px; }
.blog-modal-intro { color: #334155; font-size: 1.02rem; line-height: 1.75; padding: 18px 20px; border-left: 4px solid var(--accent); background: #F8FAFC; border-radius: 0 10px 10px 0; }
.blog-modal-sections { display: grid; gap: 18px; margin-top: 24px; }
.blog-modal-sections section { border-bottom: 1px solid #EEF0F4; padding-bottom: 16px; }
.blog-modal-sections h3 { margin: 0 0 8px; font-family: 'Inter', sans-serif; font-size: 1.04rem; color: var(--primary); }
.blog-modal-sections p { margin: 0; color: #475569; line-height: 1.72; }
.blog-modal-takeaway { margin-top: 24px; padding: 18px 20px; border-radius: 12px; background: linear-gradient(135deg, rgba(27,58,140,0.08), rgba(212,168,67,0.12)); border: 1px solid rgba(27,58,140,0.08); }
.blog-modal-takeaway strong { display: block; margin-bottom: 6px; color: var(--primary); }
.blog-modal-takeaway p { margin: 0; color: #334155; line-height: 1.65; }
.blog-modal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
[data-blog-key] { cursor: pointer; }
.page-blog .nav-desktop .mega-menu {
    background: linear-gradient(145deg, #0d1f4a 0%, #1b3a8c 100%) !important;
    color: rgba(255,255,255,0.92) !important;
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: 0 18px 48px rgba(15,35,78,.25) !important;
}
.page-blog .nav-desktop .mega-menu-col .mega-menu-heading { color: rgba(255,255,255,0.55) !important; }
.page-blog .nav-desktop .mega-menu-link { color: rgba(255,255,255,0.92) !important; background: transparent; }
.page-blog .nav-desktop .mega-menu-link:hover { color: #fff !important; background: rgba(255,255,255,0.12) !important; }
.page-blog .hero-cta .btn-outline-white { color:#fff; border-color:rgba(255,255,255,.72); background:rgba(5,18,50,.18); backdrop-filter:blur(8px); }
.page-blog .hero-cta .btn-outline-white:hover { color:#fff; border-color:#fff; background:rgba(255,255,255,.14); }
.story-card[data-blog-key]:focus-visible,
[data-blog-key]:focus-visible { outline: 3px solid rgba(27,58,140,0.28); outline-offset: 4px; }
@media (max-width: 640px) {
    .blog-modal-overlay { padding: 12px; align-items: flex-end; }
    .blog-modal { max-height: 92vh; border-radius: 16px 16px 0 0; }
    .blog-modal-hero { height: 180px; }
    .blog-modal h2 { margin-right: 38px; }
    .blog-modal-actions .btn { width: 100%; justify-content: center; }
}

.ky-saveable-card { position: relative; }
.ky-save-trip-btn { position: absolute; top: 12px; right: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 8px 11px; border: 1px solid rgba(15,23,42,0.1); border-radius: 999px; background: rgba(255,255,255,0.92); color: #1e293b; font: inherit; font-size: 0.78rem; font-weight: 800; cursor: pointer; box-shadow: 0 10px 24px rgba(15,23,42,0.1); backdrop-filter: blur(10px); transition: transform var(--transition-fast), color var(--transition-fast), background var(--transition-fast); }
.ky-save-trip-btn:hover { transform: translateY(-1px); color: var(--primary); }
.ky-save-trip-btn.saved { background: var(--primary); color: white; border-color: var(--primary); }
.ky-trip-tray { position: fixed; right: 22px; bottom: 24px; z-index: 10020; pointer-events: none; }
.ky-trip-fab { pointer-events: auto; position: relative; width: 62px; height: 62px; display: grid; place-items: center; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #0F766E); color: white; font-size: 1.25rem; cursor: pointer; box-shadow: 0 18px 42px rgba(15,23,42,0.26); transition: transform var(--transition), box-shadow var(--transition); }
.ky-trip-fab:hover { transform: translateY(-2px); box-shadow: 0 24px 56px rgba(15,23,42,0.3); }
.ky-trip-count { position: absolute; top: -5px; right: -4px; min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: white; border: 2px solid white; font-size: 0.75rem; font-weight: 900; }
.ky-trip-panel { pointer-events: auto; position: absolute; right: 0; bottom: 78px; width: min(420px, calc(100vw - 28px)); max-height: min(680px, calc(100vh - 120px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: white; border: 1px solid rgba(15,23,42,0.1); box-shadow: 0 28px 90px rgba(15,23,42,0.28); opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.98); transition: opacity var(--transition), visibility var(--transition), transform var(--transition); }
.ky-trip-tray.open .ky-trip-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.ky-trip-qty { display: inline-flex; align-items: center; gap: 7px; margin: 7px 0; font-size: .75rem; }
.ky-trip-qty button { width: 24px; height: 24px; border: 1px solid var(--border-light); border-radius: 6px; background: white; color: var(--primary); cursor: pointer; font-weight: 700; }
.ky-booking-added[hidden] { display: none; }
.ky-booking-added { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; padding: 20px; }
.ky-booking-added-backdrop { position: absolute; inset: 0; background: rgba(8, 14, 31, .76); backdrop-filter: blur(5px); }
.ky-booking-added-card { position: relative; width: min(560px, 100%); background: linear-gradient(180deg, #fff 0%, #f8f9ff 100%); border-radius: 22px; padding: 30px; text-align: center; box-shadow: 0 28px 90px rgba(4, 10, 28, .38); border-top: 5px solid var(--secondary); animation: kyBookingAddedIn .28s ease-out; }
@keyframes kyBookingAddedIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.ky-booking-added-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #eef2ff; color: var(--primary); cursor: pointer; }
.ky-booking-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-size: .72rem; letter-spacing: .16em; font-weight: 800; }
.ky-booking-brand img { width: 30px; height: 30px; object-fit: contain; }
.ky-booking-added-icon { width: 70px; height: 70px; margin: 18px auto 12px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #16a34a, #22c55e); color: white; font-size: 1.6rem; box-shadow: 0 10px 25px rgba(34,197,94,.25); }
.ky-booking-eyebrow { color: var(--secondary-dark); text-transform: uppercase; letter-spacing: .09em; font-size: .7rem; font-weight: 800; }
.ky-booking-added-card h2 { margin: 7px 0 10px; color: var(--text-dark); font-size: 1.65rem; }
.ky-booking-added-card > p { color: var(--text-muted); line-height: 1.65; font-size: .92rem; }
.ky-booking-added-card > p strong { color: var(--primary); }
.ky-booking-added-summary { display: inline-flex; align-items: center; gap: 9px; margin: 18px 0; padding: 9px 14px; border-radius: var(--radius-pill); background: var(--primary-subtle); color: var(--primary); font-size: .82rem; }
.ky-booking-added-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 5px; }
.ky-booking-added-actions .btn { justify-content: center; }
.ky-booking-added-card > small { display: block; margin-top: 16px; color: var(--text-light); line-height: 1.5; }
body.ky-booking-dialog-open { overflow: hidden; }
@media (max-width: 560px) { .ky-booking-added-card { padding: 25px 18px 20px; } .ky-booking-added-card h2 { font-size: 1.35rem; } .ky-booking-added-actions { grid-template-columns: 1fr; } }
.ky-trip-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 18px 14px; border-bottom: 1px solid #EEF0F4; background: linear-gradient(135deg, rgba(27,58,140,0.08), rgba(212,168,67,0.12)); }
.ky-trip-panel-header span { display: block; color: var(--primary); font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; }
.ky-trip-panel-header strong { display: block; margin-top: 3px; font-size: 1.15rem; color: var(--text); }
.ky-trip-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(15,23,42,0.1); background: white; color: #334155; cursor: pointer; }
.ky-trip-panel-body { flex: 1; overflow: auto; padding: 14px; display: grid; gap: 12px; }
.ky-trip-empty { text-align: center; padding: 28px 18px; color: var(--text-muted); }
.ky-trip-empty i { font-size: 1.7rem; color: var(--primary); margin-bottom: 12px; }
.ky-trip-empty h4 { margin: 0 0 8px; color: var(--text); }
.ky-trip-empty p { margin: 0; line-height: 1.6; }
.ky-trip-item { position: relative; display: grid; grid-template-columns: 82px 1fr; gap: 12px; padding: 12px 38px 12px 12px; border: 1px solid #E6E8EE; border-radius: 12px; background: #fff; }
.ky-trip-item img,
.ky-trip-item-fallback { width: 82px; height: 82px; border-radius: 10px; object-fit: cover; background: #EEF2FF; color: var(--primary); display: grid; place-items: center; }
.ky-trip-item h4 { margin: 0 0 5px; font-size: 0.94rem; line-height: 1.25; color: var(--text); }
.ky-trip-item p { margin: 0 0 6px; color: #64748b; font-size: 0.8rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ky-trip-item strong { display: inline-flex; margin-bottom: 7px; color: var(--primary); font-size: 0.84rem; }
.ky-trip-benefits { display: flex; flex-wrap: wrap; gap: 5px; }
.ky-trip-benefits span { padding: 4px 7px; border-radius: 999px; background: #F4F6FA; color: #475569; font-size: 0.7rem; font-weight: 700; }
.ky-trip-remove { position: absolute; top: 10px; right: 8px; width: 28px; height: 28px; border: none; border-radius: 50%; background: transparent; color: #94a3b8; cursor: pointer; }
.ky-trip-remove:hover { background: #FEF2F2; color: var(--accent); }
.ky-trip-panel-footer { padding: 14px; border-top: 1px solid #EEF0F4; background: #FAFBFD; display: grid; gap: 10px; }
.ky-trip-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: 0.86rem; }
.ky-trip-total strong { color: var(--text); font-size: 1rem; }
.ky-trip-builder-btn,
.ky-trip-clear-btn { width: 100%; justify-content: center; }
.ky-trip-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); z-index: 10030; padding: 12px 16px; border-radius: 999px; background: #0F172A; color: white; font-size: 0.86rem; font-weight: 800; box-shadow: 0 18px 46px rgba(15,23,42,0.28); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition), transform var(--transition); }
.ky-trip-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.saved-trip-seed-card { margin: 0 0 22px; padding: 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(27,58,140,0.08), rgba(212,168,67,0.12)); border: 1px solid rgba(27,58,140,0.12); }
.saved-trip-seed-card h3 { margin: 0 0 8px; font-family: 'Inter', sans-serif; color: var(--primary); }
.saved-trip-seed-card p { margin: 0 0 12px; color: #475569; line-height: 1.6; }
.saved-trip-seed-list { display: flex; flex-wrap: wrap; gap: 8px; }
.saved-trip-seed-list span { padding: 7px 10px; border-radius: 999px; background: white; color: #334155; border: 1px solid rgba(15,23,42,0.08); font-size: 0.82rem; font-weight: 700; }
@media (max-width: 640px) {
    .ky-trip-tray { right: 12px; bottom: 14px; }
    .ky-trip-panel { position: fixed; left: 10px; right: 10px; bottom: 86px; width: auto; max-height: calc(100vh - 112px); }
    .ky-save-trip-btn { top: 10px; right: 10px; font-size: 0.72rem; }
    .ky-trip-toast { width: calc(100vw - 28px); text-align: center; }
}

.partner-logos {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-items: center;
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    color: var(--text);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.88));
}

.recently-card {
    display: grid;
    gap: 14px;
}

.recently-card img {
    width: 100%;
    height: 175px;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.portal-checkbox label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    font-size: 0.95rem;
}

.portal-checkbox input {
    width: 18px;
    height: 18px;
}

@media (max-width: 900px) {
    .map-section .map-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .category-grid,
    .resource-grid,
    .article-grid,
    .partner-logos,
    .package-grid,
    .event-grid,
    .viewed-recently-grid {
        grid-template-columns: 1fr;
    }
}
.assistant-copy p { font-size: 1rem; color: var(--text-muted); max-width: 520px; line-height: 1.75; }
.assistant-badge { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 14px 16px; border-radius: 16px; background: rgba(27,58,140,0.08); color: var(--text); }
.assistant-badge i { font-size: 1.25rem; color: var(--primary); }
.smart-assistant-form { display: grid; gap: 18px; }
.smart-assistant-form label { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.smart-assistant-form textarea { min-height: 140px; width: 100%; padding: 18px; font-size: 0.95rem; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--bg); color: var(--text); resize: vertical; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.smart-assistant-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27, 58, 140, 0.08); }
.assistant-suggestion-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.assistant-suggest-label { color: var(--text-muted); font-size: 0.9rem; white-space: nowrap; }
.smart-assistant-suggest { display: flex; flex-wrap: wrap; gap: 10px; }
.smart-assistant-chip { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border-light); background: var(--bg); color: var(--text); font-size: 0.9rem; cursor: pointer; transition: all var(--transition-fast); }
.smart-assistant-chip:hover { border-color: var(--primary); background: var(--primary-subtle); color: var(--primary-dark); }
.smart-assistant-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.smart-assistant-note { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; }

.whatsapp-chat-button { position: fixed; right: 22px; bottom: 22px; z-index: 3000; display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 999px; background: #25D366; color: white; font-weight: 700; box-shadow: 0 20px 50px rgba(37,211,102,0.25); border: 1px solid rgba(255,255,255,0.3); transition: transform var(--transition), box-shadow var(--transition); }
.whatsapp-chat-button:hover { transform: translateY(-2px); box-shadow: 0 24px 60px rgba(37,211,102,0.28); }
.whatsapp-chat-button i { font-size: 1.05rem; }
.whatsapp-chat-button span { white-space: nowrap; }
body.page-index .whatsapp-chat-button { left: 22px; right: auto; border-radius: 999px; }
body.page-index .whatsapp-chat-button { width: 54px; height: 54px; padding: 0; justify-content: center; gap: 0; }
body.page-index .whatsapp-chat-button span { display: none; }
@media (max-width: 768px) {
    body.page-index .whatsapp-chat-button { left: 16px; right: auto; bottom: 16px; width: 50px; height: 50px; }
}

@media (max-width: 980px) {
    .reviews-section .review-panel-card { grid-template-columns: 1fr; }
    .experts-section .expert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .agent-intro-card { grid-template-columns: 1fr; }
    .agent-intro-actions { justify-content: flex-start; }
}
@media (max-width: 720px) {
    .reviews-section .review-list { grid-template-columns: 1fr; }
    .reviews-section .review-actions { flex-direction: column; align-items: stretch; }
    .experts-section .expert-grid { grid-template-columns: 1fr; }
    .smart-assistant-card { grid-template-columns: 1fr; }
    .assistant-suggestion-row { flex-direction: column; align-items: stretch; }
    .quick-links-grid { grid-template-columns: 1fr; }
    .agent-intro-card { grid-template-columns: 1fr; }
    .whatsapp-chat-button { width: calc(100% - 36px); right: 18px; left: 18px; bottom: 18px; justify-content: center; }
}

/* Footer */
.footer { background: #080E1F; color: #A0B0CB; padding: 64px 0 0; }
.footer-grid { max-width: 1140px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 2.3fr 1fr 1fr 1fr; gap: 36px; }
.footer-brand p { margin-top: 14px; font-size: 0.92rem; line-height: 1.85; color: #C9D2E3; }
.footer-brand .logo-text { color: white; font-size: 1.45rem; letter-spacing: 0.02em; }
.footer-col h4 { color: white; font-size: 0.95rem; margin-bottom: 16px; font-family: 'Inter', sans-serif; letter-spacing: -0.01em; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 0.88rem; color: #B8C2D5; transition: color var(--transition-fast); }
.footer-col ul li a:hover { color: white; }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); color: #A0B0CB; border: 1px solid rgba(255,255,255,0.08); }
.footer-social a:hover { background: var(--primary); color: white; border-color: var(--primary); transform: translateY(-2px); }
.footer-bottom { max-width: 1140px; margin: 0 auto; padding: 26px 20px 16px; margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; font-size: 0.84rem; color: #8CA0C0; }
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-bottom-links a { color: #A0B0CB; }
.footer-bottom-links a:hover { color: white; }
.footer-signature {
    margin: 6px 0 0;
    color: rgba(255,255,255,0.68);
    font-size: 0.75rem;
    letter-spacing: 0.01em;
}
.footer-signature a {
    color: #8de1c2;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.footer-signature a:hover,
.footer-signature a:focus-visible {
    color: white;
    text-decoration: underline;
}
.personal-data-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid #dbe7f4;
    border-radius: 10px;
    background: #f5f9fd;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}
.personal-data-disclaimer i { color: var(--primary); margin-top: 2px; }
.personal-data-disclaimer a { color: var(--primary); font-weight: 700; }
.portal-forgot-link { display:block; margin:14px auto 0; border:0; background:none; color:#1B3A8C; font-weight:700; font-size:.8rem; cursor:pointer; }
.portal-reset-panel { margin-top:14px; padding:14px; border:1px solid #dbe7f4; border-radius:12px; background:#f7faff; }
.portal-reset-panel p { color:#64748b; font-size:.78rem; line-height:1.5; margin:0 0 10px; }
.portal-reset-panel input { width:100%; margin:5px 0; padding:10px; border:1px solid #dbe3ef; border-radius:8px; }
.portal-reset-panel .login-btn { width:100%; margin-top:7px; }
.policy-page { max-width: 860px; }
.policy-page h1 { margin: 10px 0 12px; color: var(--primary-dark); }
.policy-page h2 { margin: 30px 0 8px; color: var(--primary); font-size: 1.2rem; }
.policy-page p { max-width: 760px; line-height: 1.75; color: var(--text-muted); }
.policy-page .lead { font-size: 1.05rem; color: var(--text); }
.policy-page a { color: var(--primary); font-weight: 700; }
.policy-updated { margin-top: 36px; font-size: 0.8rem; }
.filter-result-status { flex: 1 0 100%; margin: 4px 0 0; color: var(--text-muted); font-size: 0.78rem; font-weight: 600; }
body.page-agent-dashboard { visibility: hidden; }
body.page-agent-dashboard.auth-ready { visibility: visible; }
.page-experiences .destination-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 280px)); justify-content: center; justify-items: stretch; }
.page-experiences .section { scroll-margin-top: 118px; }
.page-experiences .destination-card { height: auto !important; min-height: 0 !important; overflow: visible !important; opacity: 1 !important; transform: none !important; }
.page-experiences .destination-card-img { display: block !important; height: 200px !important; min-height: 200px !important; flex: 0 0 200px !important; }
.page-experiences .destination-card-img img { display: block !important; width: 100% !important; height: 100% !important; min-height: 100% !important; object-fit: cover !important; }
.page-experiences .destination-card-content { height: auto !important; min-height: 0 !important; overflow: visible !important; }
.smart-search-overlay { position: fixed; inset: 0; z-index: 6000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8, 14, 31, 0.62); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.smart-search-overlay.active { opacity: 1; pointer-events: auto; }
.smart-search-modal { width: min(760px, 100%); max-height: min(760px, 90vh); overflow-y: auto; background: white; border-radius: 20px; box-shadow: 0 24px 70px rgba(8,14,31,.28); padding: 24px; }
.smart-search-header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--border-light); }
.smart-search-header h2 { margin: 6px 0; color: var(--primary-dark); }
.smart-search-header p { margin: 0; color: var(--text-muted); font-size: .86rem; }
.smart-search-close { width: 38px; height: 38px; border: 1px solid var(--border-light); border-radius: 50%; background: var(--bg-warm); color: var(--text); cursor: pointer; flex: 0 0 auto; }
.smart-search-results { display: grid; gap: 12px; padding-top: 18px; }
.smart-result-card { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--border-light); border-radius: 14px; background: #fbfcfe; }
.smart-result-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--primary-subtle); color: var(--primary); }
.smart-result-copy span { color: var(--primary); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.smart-result-copy h3 { margin: 3px 0; font-size: .98rem; color: var(--text); }
.smart-result-copy p { margin: 0; color: var(--text-muted); font-size: .76rem; }
.smart-result-price { color: var(--primary-dark); font-size: .86rem; }
.smart-result-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.smart-empty { text-align: center; padding: 30px 12px; color: var(--text-muted); }
.smart-empty > i { color: var(--primary); font-size: 2rem; }
.smart-empty h3 { color: var(--text); margin: 10px 0 4px; }
@media (max-width: 600px) { .smart-search-modal { padding: 18px; } .smart-result-card { grid-template-columns: 38px minmax(0,1fr); } .smart-result-actions { grid-column: 1 / -1; justify-content: stretch; } .smart-result-actions .btn { flex: 1; justify-content: center; } }

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
    .footer-bottom-links { justify-content: flex-start; }
}

/* Forms */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 5px; color: var(--text); letter-spacing: -0.01em; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    font-size: 0.88rem; font-family: 'Inter', sans-serif; transition: all var(--transition-fast);
    background: white; color: var(--text); letter-spacing: -0.005em;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-subtle);
}
.form-group textarea { resize: vertical; min-height: 88px; }
.form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.form-error { display: none; font-size: 0.78rem; color: var(--danger); margin-top: 3px; }
.form-group.error .form-error { display: block; }
.form-group.error input, .form-group.error select, .form-group.error textarea { border-color: var(--danger); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.input-wrapper { position: relative; }
.input-wrapper i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.88rem; }
.input-wrapper input { padding-left: 38px; }
.input-icon { position: relative; }
.input-icon i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.88rem; }
.input-icon input { padding-left: 38px; }
.req { color: var(--danger); }

/* Cards */
.card { background: white; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); }
.card h3 { margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }

/* Tables */
.table-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; border: 1px solid var(--border-light); }
.table-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-light); }
.table-header h3 { font-size: 1rem; display: flex; align-items: center; gap: 10px; }
.table-filters { display: flex; gap: 8px; align-items: center; }
.table-filters input, .table-filters select { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.82rem; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 10px 14px; text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); border-bottom: 1px solid var(--border-light); font-family: 'Inter', sans-serif; font-weight: 600; }
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-light); font-size: 0.85rem; }
.data-table tbody tr { transition: background var(--transition-fast); }
.data-table tbody tr:hover { background: var(--bg-warm); }
.text-muted { color: var(--text-muted); }

/* Status Badges */
.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 600; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.status-badge.confirmed, .status-badge.completed { background: rgba(34,197,94,0.1); color: #16A34A; }
.status-badge.confirmed .status-dot, .status-badge.completed .status-dot { background: #16A34A; }
.status-badge.pending { background: rgba(245,158,11,0.1); color: #D97706; }
.status-badge.pending .status-dot { background: #D97706; }
.status-badge.cancelled { background: rgba(230,57,70,0.08); color: var(--accent); }
.status-badge.cancelled .status-dot { background: var(--accent); }

/* Action Buttons */
.action-btns { display: flex; gap: 4px; }
.action-btn { width: 30px; height: 30px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); color: var(--text-muted); font-size: 0.78rem; }
.action-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-subtle); }
.action-btn.danger:hover { border-color: var(--danger); color: var(--danger); background: rgba(230,57,70,0.05); }

/* Tabs */
.tabs { display: flex; gap: 0; border-bottom: 1.5px solid var(--border-light); margin-bottom: 28px; overflow-x: auto; }
.tab { padding: 10px 18px; border: none; background: none; cursor: pointer; font-weight: 500; color: var(--text-muted); font-size: 0.85rem; border-bottom: 2px solid transparent; margin-bottom: -1.5px; transition: all var(--transition-fast); white-space: nowrap; font-family: 'Inter', sans-serif; }
.tab.active, .tab:hover { color: var(--primary); border-bottom-color: var(--primary); }
.tabs a { color: inherit; text-decoration: none; display: flex; }
.tab-btn { min-height: 52px; padding: 0 16px; border: none; border-bottom: 3px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 700; white-space: nowrap; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); }
.tab-btn:hover,
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: var(--primary-subtle); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Modals */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(8, 14, 31, 0.6); z-index: 2000; backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.28s var(--ease);
}
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal {
    background: white; border-radius: var(--radius-lg); padding: 28px;
    max-width: 460px; width: 90%; max-height: 90vh; overflow-y: auto;
    transform: translateY(16px) scale(0.98); transition: transform 0.3s var(--ease);
}
.modal-overlay.active .modal { transform: translateY(0) scale(1); }
.modal h2 { font-size: 1.2rem; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* Toast */
.toast {
    position: fixed; bottom: 20px; right: 20px; z-index: 3000;
    padding: 12px 20px; border-radius: var(--radius-sm);
    background: var(--success); color: white; font-weight: 600; font-size: 0.85rem;
    display: flex; align-items: center; gap: 8px;
    transform: translateY(80px); opacity: 0; transition: all 0.35s var(--ease);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { background: var(--danger); }

/* Pagination */
.pagination { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border-light); }
.pagination-info { font-size: 0.82rem; color: var(--text-muted); }
.pagination-btns { display: flex; gap: 3px; }
.page-btn { width: 34px; height: 34px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: white; cursor: pointer; font-size: 0.82rem; transition: all var(--transition-fast); }
.page-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
.page-btn:hover:not(.active) { border-color: var(--primary); color: var(--primary); }

/* Loading & Empty States */
.loading { text-align: center; padding: 52px 20px; color: var(--text-muted); }
.loading i { font-size: 1.8rem; margin-bottom: 10px; display: block; color: var(--primary); }
.empty-state { text-align: center; padding: 52px 20px; color: var(--text-muted); }
.empty-state i { font-size: 2.5rem; margin-bottom: 14px; display: block; color: var(--border); }
.empty-state h3 { color: var(--text-light); margin-bottom: 6px; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; background: var(--primary-subtle); color: var(--primary); }
.badge-accent { background: rgba(230, 57, 70, 0.12); color: var(--accent); }
.section-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; background: var(--primary-subtle); color: var(--primary); margin-bottom: 10px; }
.section-tag { display: inline-block; padding: 5px 14px; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 600; background: var(--primary-subtle); color: var(--primary); margin-bottom: 10px; letter-spacing: 0.02em; text-transform: uppercase; }

/* Newsletter */
.newsletter { background: linear-gradient(145deg, #0A1628, #0E1F5C); color: white; padding: 52px 24px; text-align: center; }
.newsletter h2 { color: white; margin-bottom: 10px; }
.newsletter p { opacity: 0.8; margin-bottom: 20px; font-size: 0.95rem; }
.newsletter-form { display: flex; max-width: 420px; margin: 0 auto; gap: 8px; }
.newsletter-form { flex-wrap: wrap; align-items: stretch; }
.newsletter-form .personal-data-disclaimer { flex: 0 0 100%; margin: 2px 0 0; text-align: left; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.75); }
.newsletter-form .personal-data-disclaimer a { color: #f5d982; }
.newsletter-form input { flex: 1; padding: 12px 18px; border: 1.5px solid rgba(255,255,255,0.15); border-radius: var(--radius-sm); font-size: 0.9rem; background: rgba(255,255,255,0.06); color: white; transition: border-color var(--transition-fast); }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.newsletter-form input:focus { outline: none; border-color: rgba(255,255,255,0.4); }
.newsletter-form button { padding: 12px 24px; background: var(--secondary); color: var(--text); border: none; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; font-size: 0.88rem; transition: all var(--transition-fast); }
.newsletter-form button:hover { background: var(--secondary-dark); color: white; }

/* Filter Bar */
.filter-bar { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 14px 24px; }
.filter-tab { padding: 8px 18px; border: 1.5px solid var(--border-light); border-radius: var(--radius-pill); background: white; cursor: pointer; font-weight: 500; font-size: 0.85rem; transition: all var(--transition-fast); font-family: 'Inter', sans-serif; }
.filter-tab.active, .filter-tab:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-subtle); }
.filter-section { background: white; border-bottom: 1px solid var(--border-light); padding: 14px 0; }
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-group label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); }
.filter-group select { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.85rem; background: white; }
.filter-btn { white-space: nowrap; }

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 8px var(--primary-glow); }
    50% { box-shadow: 0 0 20px var(--primary-glow); }
}
.fade-in { animation: fadeInUp 0.5s var(--ease) forwards; }

/* Maasai Divider */
.maasai-divider { height: 3px; background: linear-gradient(90deg, var(--primary) 0%, var(--primary) 33%, var(--accent) 33%, var(--accent) 66%, var(--secondary) 66%, var(--secondary) 100%); }

/* Currency Selector */
.currency-selector { padding: 5px 8px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); font-size: 0.82rem; background: white; }
/* --- 4. PAGE-SPECIFIC: INDEX --- */
body.page-index { --primary: #1B3A8C; --primary-dark: #0E1F5C; --primary-light: #2E5BBF; }

/* --- 5. PAGE-SPECIFIC: ABOUT --- */
body.page-about { --primary: #1B3A8C; }

/* --- 6. PAGE-SPECIFIC: CONTACT --- */
body.page-contact { --primary: #1B3A8C; }
.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; }
.form-card { background: white; border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); }
.form-card h2 { margin-bottom: 6px; }
.form-card > p { color: var(--text-light); margin-bottom: 20px; }
.btn-submit { width: 100%; padding: 12px; background: var(--primary); color: white; border: none; border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all var(--transition); }
.btn-submit:hover { background: var(--primary-dark); transform: translateY(-1px); }
.form-success { display: none; text-align: center; padding: 36px; }
.form-success i { font-size: 2.5rem; color: var(--success); margin-bottom: 14px; }
.form-success h3 { margin-bottom: 6px; }
.form-success p { color: var(--text-light); }
.info-cards { display: flex; flex-direction: column; gap: 14px; }
.info-card { display: flex; align-items: center; gap: 14px; padding: 18px; background: white; border-radius: var(--radius); box-shadow: var(--shadow-card); border: 1px solid var(--border-light); }
.info-card-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.info-card-icon.green { background: var(--primary-subtle); color: var(--primary); }
.info-card-icon.gold { background: rgba(212,168,67,0.1); color: var(--secondary); }
.info-card-icon.orange { background: rgba(230,57,70,0.06); color: var(--accent); }
.info-card-icon.teal { background: rgba(20,184,166,0.08); color: #14B8A6; }
.info-card-text h3 { font-size: 0.88rem; margin-bottom: 3px; font-family: 'Inter', sans-serif; }
.info-card-text p { font-size: 0.82rem; color: var(--text-light); }
.map-section .map-placeholder { background: var(--bg-warm); border-radius: var(--radius); padding: 52px; text-align: center; border: 1.5px dashed var(--border); }
.map-section .map-placeholder i { font-size: 2.5rem; color: var(--border); margin-bottom: 14px; }
.faq-section { background: var(--bg-warm); }
.faq-list { max-width: 740px; margin: 0 auto; }
.faq-item { background: white; border-radius: var(--radius); margin-bottom: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.03); overflow: hidden; border: 1px solid var(--border-light); }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; cursor: pointer; transition: background var(--transition-fast); }
.faq-question:hover { background: var(--bg-warm); }
.faq-question h3 { font-size: 0.95rem; font-family: 'Inter', sans-serif; }
.faq-question i { color: var(--text-muted); transition: transform 0.3s var(--ease); }
.faq-item.open .faq-question i { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.faq-answer-inner { padding: 0 20px 18px; color: var(--text-light); line-height: 1.7; font-size: 0.9rem; }
.connect-section { text-align: center; background: var(--bg-warm); }
.connect-section h2 { margin-bottom: 6px; }
.connect-section > p { color: var(--text-light); margin-bottom: 28px; }
.social-links { display: flex; gap: 20px; justify-content: center; }
.social-label { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 5px; }
.social-link { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: white; transition: all var(--transition); }
.social-link:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
.social-link.whatsapp { background: #25D366; }
.social-link.facebook { background: #1877F2; }
.social-link.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-link.twitter { background: #0F172A; }

/* --- 7. PAGE-SPECIFIC: DESTINATIONS --- */
body.page-destinations { --primary: #1B3A8C; --primary-dark: #0E1F5C; --primary-light: #2E5BBF; }

/* --- 8. PAGE-SPECIFIC: EXPERIENCES --- */
body.page-experiences { --primary: #1B3A8C; }

/* --- 9. PAGE-SPECIFIC: HOTELS --- */
body.page-hotels { --primary: #1B3A8C; }
.hybrid-trip-cart { background: white; border: 1px solid var(--border-light); border-radius: var(--radius); padding: 24px; margin-bottom: 28px; box-shadow: var(--shadow-card); }
.hybrid-trip-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 18px; }
.hybrid-trip-head h2 { margin: 6px 0; }
.hybrid-trip-head p { color: var(--text-muted); max-width: 720px; }
.hybrid-trip-head > strong { color: var(--primary); white-space: nowrap; font-size: 1.05rem; }
.hybrid-trip-item { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border-light); }
.hybrid-trip-item img, .hybrid-trip-fallback { width: 76px; height: 64px; border-radius: 9px; object-fit: cover; background: var(--primary-subtle); display: grid; place-items: center; color: var(--primary); }
.hybrid-trip-copy > span { color: var(--primary); font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.hybrid-trip-copy h3 { font-size: .95rem; margin: 2px 0; }
.hybrid-trip-copy p { color: var(--text-muted); font-size: .78rem; }
.hybrid-trip-copy strong { display: inline-block; margin-top: 3px; font-size: .8rem; }
.hybrid-trip-controls { display: flex; gap: 7px; align-items: center; }
.hybrid-trip-controls button { width: 32px; height: 32px; border: 1px solid var(--border-light); border-radius: 7px; background: white; color: var(--primary); cursor: pointer; }
.hybrid-trip-controls .hybrid-remove { color: var(--danger); }
.hybrid-review-selections { background: var(--primary-subtle); border-radius: 10px; padding: 14px; margin-bottom: 18px; }
.hybrid-review-selections h4 { margin-bottom: 8px; }
.hybrid-review-selections > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .82rem; }
@media (max-width: 650px) { .hybrid-trip-head { flex-direction: column; } .hybrid-trip-item { grid-template-columns: 60px 1fr; } .hybrid-trip-item img, .hybrid-trip-fallback { width: 60px; height: 56px; } .hybrid-trip-controls { grid-column: 1 / -1; justify-content: flex-end; } }
.hotel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.hotel-card { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); transition: all var(--transition); }
.hotel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.hotel-card-img { position: relative; height: 200px; overflow: hidden; }
.hotel-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.hotel-card:hover .hotel-card-img img { transform: scale(1.03); }
.hotel-badge { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 600; color: white; }
.hotel-badge.luxury { background: var(--secondary); color: var(--text); }
.hotel-badge.mid-range { background: var(--info); }
.hotel-badge.budget { background: var(--success); }
.hotel-badge.camp { background: #8B5CF6; }
.hotel-price-tag { position: absolute; bottom: 10px; right: 10px; background: rgba(8, 14, 31, 0.85); backdrop-filter: blur(8px); color: white; padding: 5px 12px; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.92rem; }
.hotel-price-tag span { font-weight: 400; font-size: 0.72rem; opacity: 0.7; }
.hotel-card-body { padding: 18px; }
.hotel-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.hotel-card-top h3 { font-size: 1.02rem; font-family: 'Inter', sans-serif; }
.hotel-location { font-size: 0.82rem; color: var(--text-muted); margin-top: 3px; }
.hotel-location i { color: var(--primary); margin-right: 3px; }
.hotel-rating { color: var(--secondary); font-size: 0.78rem; }
.hotel-card-desc { font-size: 0.85rem; color: var(--text-light); margin-bottom: 12px; line-height: 1.6; }
.hotel-amenities { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.amenity-icon { width: 32px; height: 32px; border-radius: 7px; background: var(--bg-warm); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.82rem; transition: all var(--transition-fast); }
.amenity-icon:hover { background: var(--primary-subtle); color: var(--primary); }
.hotel-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--border-light); }
.hotel-review { display: flex; align-items: center; gap: 6px; }
.review-score { background: var(--primary); color: white; padding: 3px 8px; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.82rem; }
.review-text { font-size: 0.78rem; color: var(--text-light); }
.hotel-card-actions { display: flex; gap: 6px; }
.btn-view { padding: 7px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: white; cursor: pointer; font-size: 0.78rem; font-weight: 500; transition: all var(--transition-fast); }
.btn-view:hover { border-color: var(--primary); color: var(--primary); }
.btn-book { padding: 7px 12px; border: none; border-radius: var(--radius-sm); background: var(--primary); color: white; cursor: pointer; font-size: 0.78rem; font-weight: 600; transition: all var(--transition-fast); }
.btn-book:hover { background: var(--primary-dark); }
.hotel-detail-modal[hidden] { display: none; }
.hotel-detail-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px; }
.hotel-detail-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .72); backdrop-filter: blur(3px); }
.hotel-detail-panel { position: relative; z-index: 1; width: min(720px, 100%); max-height: 90vh; overflow: auto; background: white; border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.3); }
.hotel-detail-panel > img { width: 100%; height: 280px; object-fit: cover; display: block; }
.hotel-detail-content { padding: 26px; }
.hotel-detail-content h2 { margin: 10px 0 5px; color: var(--text-dark); }
.hotel-detail-content > p { line-height: 1.7; margin-top: 14px; color: var(--text-muted); }
.hotel-modal-close { position: absolute; z-index: 2; right: 14px; top: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: white; color: var(--text-dark); cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.hotel-modal-meta { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0; margin-top: 16px; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.hotel-modal-meta strong { color: var(--primary); font-size: 1.15rem; }
.hotel-modal-amenities { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.hotel-modal-amenities span { background: var(--primary-subtle); color: var(--primary); padding: 6px 10px; border-radius: var(--radius-pill); font-size: .8rem; }
.hotel-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.hotel-modal-actions .btn-view, .hotel-modal-actions .btn-book { padding: 10px 16px; }
body.hotel-modal-open { overflow: hidden; }
@media (max-width: 600px) { .hotel-detail-panel > img { height: 210px; } .hotel-detail-content { padding: 20px; } .hotel-modal-meta, .hotel-modal-actions { align-items: stretch; flex-direction: column; } }
.restaurant-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.restaurant-card { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); transition: all var(--transition); }
.restaurant-card:hover { transform: translateY(-3px); }
.restaurant-card-img { position: relative; height: 180px; overflow: hidden; }
.restaurant-card-img img { width: 100%; height: 100%; object-fit: cover; }
.restaurant-cuisine { position: absolute; top: 10px; left: 10px; background: white; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 600; }
.restaurant-card-body { padding: 14px 18px; }
.restaurant-card-body h3 { font-size: 0.98rem; margin-bottom: 3px; font-family: 'Inter', sans-serif; }
.restaurant-meta { display: flex; gap: 14px; margin-top: 8px; font-size: 0.78rem; color: var(--text-muted); }
.restaurant-meta i { margin-right: 3px; }
.why-book { background: var(--bg-warm); }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.why-card { text-align: center; padding: 28px 20px; background: white; border-radius: var(--radius); box-shadow: var(--shadow-card); border: 1px solid var(--border-light); transition: all var(--transition); }
.why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.why-card-icon { width: 50px; height: 50px; border-radius: 12px; background: var(--primary-subtle); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin: 0 auto 14px; }
.why-card h4 { font-size: 0.92rem; margin-bottom: 6px; font-family: 'Inter', sans-serif; }
.why-card p { font-size: 0.82rem; color: var(--text-light); }
.cta-section { background: linear-gradient(145deg, var(--primary-dark), var(--primary)); color: white; padding: 56px 24px; text-align: center; }
.cta-content h2 { color: white; margin-bottom: 10px; }
.cta-content p { opacity: 0.85; max-width: 540px; margin: 0 auto 20px; }
.cta-buttons { display: flex; gap: 12px; justify-content: center; }

/* --- 10. PAGE-SPECIFIC: SAFARIS --- */
body.page-safaris { --primary: #1B3A8C; }
.safari-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.safari-card { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); transition: all var(--transition); }
.safari-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.safari-card-image { position: relative; height: 220px; overflow: hidden; }
.safari-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.safari-card:hover .safari-card-image img { transform: scale(1.03); }
.safari-card-price { position: absolute; bottom: 10px; left: 10px; background: rgba(8, 14, 31, 0.85); backdrop-filter: blur(8px); color: white; padding: 6px 14px; border-radius: var(--radius-sm); font-weight: 700; font-size: 1.05rem; }
.safari-card-price small { font-weight: 400; font-size: 0.72rem; }
.safari-card-badge { position: absolute; top: 10px; right: 10px; background: var(--secondary); color: var(--text); padding: 3px 10px; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 600; }
.safari-card-body { padding: 18px; }
.safari-card-dest { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 5px; }
.safari-card-dest i { color: var(--primary); margin-right: 3px; }
.safari-card-body h3 { font-size: 1.08rem; margin-bottom: 8px; font-family: 'Inter', sans-serif; }
.safari-card-meta { display: flex; gap: 14px; font-size: 0.82rem; color: var(--text-light); margin-bottom: 8px; }
.safari-card-meta i { margin-right: 3px; }
.safari-card-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 0.82rem; }
.safari-card-rating .stars { color: var(--secondary); }
.safari-card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
.safari-tag { padding: 3px 9px; border-radius: var(--radius-pill); font-size: 0.7rem; background: var(--bg-warm); color: var(--text-light); font-weight: 500; }
.safari-card-actions { display: flex; gap: 6px; }
.styles-section { padding: 64px 0; background: var(--bg-warm); }
.styles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.style-card { background: white; border-radius: var(--radius); padding: 28px; text-align: center; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); transition: all var(--transition); }
.style-card:hover { transform: translateY(-3px); }
.style-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--primary-subtle); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin: 0 auto 14px; }
.style-card h3 { font-size: 1rem; margin-bottom: 8px; font-family: 'Inter', sans-serif; }
.style-card p { font-size: 0.82rem; color: var(--text-light); margin-bottom: 14px; }
.style-price { font-weight: 700; color: var(--primary); font-size: 0.88rem; }
.stats-banner { background: linear-gradient(145deg, var(--primary-dark), var(--primary)); color: white; padding: 40px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; padding: 0 20px; text-align: center; }
.stat-item h3 { font-size: 2rem; font-family: 'Playfair Display', serif; letter-spacing: -0.02em; }
.stat-item p { opacity: 0.8; font-size: 0.85rem; }
.cta-banner { background: linear-gradient(145deg, var(--primary-dark), var(--primary)); color: white; padding: 56px 24px; text-align: center; }
.cta-banner h2 { color: white; margin-bottom: 10px; }
.cta-banner p { opacity: 0.85; max-width: 540px; margin: 0 auto 20px; }
/* --- 11. PAGE-SPECIFIC: TRAVEL GUIDE --- */
body.page-travel-guide { --primary: #1B3A8C; }
.tabs-section { position: sticky; top: 64px; z-index: 100; background: white; border-bottom: 1px solid var(--border-light); }
.tabs-wrapper { overflow-x: auto; max-width: 1120px; margin: 0 auto; }
.tabs-wrapper .tabs { border-bottom: none; padding: 0 20px; }
.seasons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1120px; margin: 0 auto; }
.season-card { background: white; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); text-align: center; }
.season-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin: 0 auto 10px; }
.season-card h3 { font-size: 0.92rem; margin-bottom: 3px; font-family: 'Inter', sans-serif; }
.season-card .months { font-size: 0.82rem; font-weight: 600; color: var(--primary); margin-bottom: 6px; }
.season-card p { font-size: 0.82rem; color: var(--text-light); line-height: 1.6; }
.weather-zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; }
.weather-zone { background: white; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); }
.weather-zone h3 { font-size: 1rem; margin-bottom: 3px; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
.weather-zone h3 i { color: var(--primary); }
.weather-detail { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border-light); font-size: 0.85rem; }
.weather-detail .label { color: var(--text-muted); }
.weather-detail .value { font-weight: 600; }
.wildlife-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 1120px; margin: 0 auto 28px; }
.wildlife-card { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); }
.wildlife-card-img { height: 120px; overflow: hidden; }
.wildlife-card-img img { width: 100%; height: 100%; object-fit: cover; }
.wildlife-card-body { padding: 12px; }
.wildlife-card-body h4 { font-size: 0.88rem; margin-bottom: 3px; font-family: 'Inter', sans-serif; }
.wildlife-card-body p { font-size: 0.75rem; color: var(--text-light); margin-bottom: 6px; }
.tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 600; }
.tag-easy { background: rgba(34,197,94,0.1); color: #16A34A; }
.tag-moderate { background: rgba(245,158,11,0.1); color: #D97706; }
.tag-hard { background: rgba(230,57,70,0.08); color: var(--accent); }
.wildlife-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1120px; margin: 0 auto; }
.wildlife-tip { display: flex; gap: 10px; padding: 14px; background: white; border-radius: var(--radius); box-shadow: var(--shadow-card); border: 1px solid var(--border-light); }
.wildlife-tip i { color: var(--primary); font-size: 1.1rem; margin-top: 1px; }
.wildlife-tip h5 { font-size: 0.85rem; margin-bottom: 3px; font-family: 'Inter', sans-serif; }
.wildlife-tip p { font-size: 0.78rem; color: var(--text-light); }
.currency-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; max-width: 1120px; margin: 0 auto; }
.currency-main h3 { font-size: 1.08rem; margin-bottom: 10px; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
.currency-main h3 i { color: var(--primary); }
.currency-denom { display: flex; gap: 6px; flex-wrap: wrap; }
.denom-chip { padding: 5px 12px; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 600; }
.mpesa-box { background: white; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); }
.mpesa-box h3 { font-size: 1.02rem; margin-bottom: 8px; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
.mpesa-box p { font-size: 0.85rem; color: var(--text-light); margin-bottom: 14px; }
.mpesa-steps { padding-left: 0; counter-reset: mpesa; }
.mpesa-steps li { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 0.85rem; }
.step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; flex-shrink: 0; }
.visa-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1120px; margin: 0 auto; }
.visa-step { display: flex; gap: 12px; margin-bottom: 18px; }
.visa-step-num { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 700; flex-shrink: 0; }
.visa-step h4 { font-size: 0.92rem; margin-bottom: 3px; font-family: 'Inter', sans-serif; }
.visa-step p { font-size: 0.82rem; color: var(--text-light); }
.visa-requirements { background: white; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); }
.visa-req-item { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border-light); font-size: 0.88rem; }
.visa-req-item i { color: var(--success); }
.packing-lists { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; }
.packing-category { background: white; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); }
.packing-category h4 { font-size: 0.95rem; margin-bottom: 12px; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
.packing-category h4 i { color: var(--primary); }
.packing-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 0.85rem; color: var(--text-light); }
.packing-item i { color: var(--success); font-size: 0.75rem; }
.transport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1120px; margin: 0 auto; }
.transport-card { background: white; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); }
.transport-card-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 10px; }
.transport-card h3 { font-size: 0.95rem; margin-bottom: 6px; font-family: 'Inter', sans-serif; }
.transport-card p { font-size: 0.82rem; color: var(--text-light); margin-bottom: 8px; }
.transport-price { font-size: 0.78rem; font-weight: 600; color: var(--primary); }
.events-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1120px; margin: 0 auto; }
.event-card { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); }
.event-card-img { height: 140px; overflow: hidden; }
.event-card-img img { width: 100%; height: 100%; object-fit: cover; }
.event-card-body { padding: 14px; }
.event-date { font-size: 0.72rem; font-weight: 600; color: var(--primary); text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.05em; }
.event-card-body h4 { font-size: 0.92rem; margin-bottom: 5px; font-family: 'Inter', sans-serif; }
.event-card-body p { font-size: 0.78rem; color: var(--text-light); margin-bottom: 6px; }
.event-location { font-size: 0.72rem; color: var(--text-muted); }
.event-location i { margin-right: 3px; }
.itineraries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; }
.itinerary-card { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); }
.itinerary-card-img { height: 180px; overflow: hidden; }
.itinerary-card-img img { width: 100%; height: 100%; object-fit: cover; }
.itinerary-card-body { padding: 18px; }
.itinerary-duration { font-size: 0.78rem; font-weight: 600; color: var(--primary); margin-bottom: 5px; display: block; }
.itinerary-duration i { margin-right: 3px; }
.itinerary-card-body h3 { font-size: 1.02rem; margin-bottom: 6px; font-family: 'Inter', sans-serif; }
.itinerary-card-body > p { font-size: 0.85rem; color: var(--text-light); margin-bottom: 12px; }
.itinerary-highlights { margin-bottom: 14px; }
.itinerary-highlights li { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 0.82rem; color: var(--text-light); }
.itinerary-highlights li i { color: var(--success); font-size: 0.7rem; }
.itinerary-price { display: flex; align-items: baseline; gap: 5px; }
.itinerary-price .from { font-size: 0.78rem; color: var(--text-muted); }
.itinerary-price .amount { font-size: 1.2rem; font-weight: 700; color: var(--primary); }
.budget-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1120px; margin: 0 auto; }
.budget-table { background: white; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); }
.budget-table h3 { font-size: 1.02rem; margin-bottom: 14px; font-family: 'Inter', sans-serif; }
.budget-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border-light); font-size: 0.88rem; }
.budget-row .cat { display: flex; align-items: center; gap: 6px; color: var(--text-light); }
.budget-row .cat i { color: var(--primary); width: 18px; text-align: center; }
.budget-row .cost { font-weight: 600; }
.budget-row.total { border-bottom: none; padding-top: 12px; font-size: 1rem; }
.budget-chart-card { background: white; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); }
.budget-chart-card h3 { font-size: 1.02rem; margin-bottom: 14px; font-family: 'Inter', sans-serif; }
.budget-bar { margin-bottom: 12px; }
.budget-bar-header { display: flex; justify-content: space-between; font-size: 0.82rem; margin-bottom: 5px; }
.budget-bar-header .label { color: var(--text-light); }
.budget-bar-header .pct { font-weight: 600; }
.budget-bar-track { height: 6px; background: var(--bg-light); border-radius: 3px; overflow: hidden; }
.budget-bar-fill { height: 100%; border-radius: 3px; transition: width 0.7s var(--ease); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; }
.review-card { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05); border: 1px solid #E6E8EE; }
.review-stars { color: var(--secondary); margin-bottom: 10px; font-size: 0.88rem; }
.review-card > p { font-size: 0.9rem; color: #334155; line-height: 1.7; margin-bottom: 14px; }
.review-author { display: flex; align-items: center; gap: 10px; }
.review-avatar { width: 44px; height: 44px; border-radius: 50%; background: #EAF0FF; color: var(--primary); display: grid; place-items: center; font-weight: 700; font-size: 0.86rem; border: 1px solid rgba(27,58,140,0.12); object-fit: cover; flex: 0 0 auto; }
.review-author-info .name { font-weight: 600; font-size: 0.85rem; }
.review-author-info .trip { font-size: 0.75rem; color: var(--text-muted); }
.stories-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1120px; margin: 0 auto; }
.story-card { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); }
.story-card-img { height: 140px; overflow: hidden; }
.story-card-img img { width: 100%; height: 100%; object-fit: cover; }
.story-card-body { padding: 14px; }
.story-tag { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; color: var(--primary); margin-bottom: 5px; letter-spacing: 0.05em; }
.story-card-body h3 { font-size: 0.92rem; margin-bottom: 5px; font-family: 'Inter', sans-serif; }
.story-card-body p { font-size: 0.78rem; color: var(--text-light); margin-bottom: 8px; }
.story-meta { display: flex; gap: 10px; font-size: 0.72rem; color: var(--text-muted); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 10px; max-width: 1120px; margin: 0 auto; }
.gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s var(--ease); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item.tall { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }
.gallery-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(8,14,31,0.7)); display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; opacity: 0; transition: opacity 0.28s var(--ease); color: white; }
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay h4 { font-size: 0.92rem; margin-bottom: 1px; }
.gallery-overlay p { font-size: 0.75rem; opacity: 0.75; }

/* --- PHOTO GALLERY PAGE --- */
body.page-gallery { background: var(--bg-light); }

/* Filter Bar */
.gallery-filter-bar { position: sticky; top: 0; z-index: 100; background: white; border-bottom: 1px solid var(--border-light); box-shadow: 0 2px 12px rgba(0,0,0,0.04); padding: 14px 0; }
.gallery-filter-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.gallery-filter-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.gallery-filter { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1.5px solid var(--border-light); border-radius: 50px; background: white; color: var(--text-light); font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: all 0.25s var(--ease); white-space: nowrap; }
.gallery-filter:hover { border-color: var(--primary); color: var(--primary); background: rgba(27,58,140,0.04); }
.gallery-filter.active { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 2px 8px rgba(27,58,140,0.25); }
.gallery-filter i { font-size: 0.8rem; }
.gallery-count { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.gallery-count span { font-weight: 700; color: var(--primary); }

/* Masonry Grid */
.gallery-masonry { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1200px; margin: 0 auto; padding: 28px 20px 40px; }

/* Gallery Item */
.gallery-item { position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; transition: transform 0.35s var(--ease), opacity 0.4s ease; }
.gallery-item.hidden { display: none; }
.gallery-item:hover { transform: translateY(-4px); }

/* Phone Frame */
.gallery-phone-frame { position: relative; border-radius: 16px; overflow: hidden; background: #111; box-shadow: 0 4px 20px rgba(0,0,0,0.12); border: 2.5px solid #222; aspect-ratio: 3/4; }
.gallery-phone-frame::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 35%; height: 5px; background: #333; border-radius: 0 0 6px 6px; z-index: 3; }

/* Image */
.gallery-img { width: 100%; height: 100%; overflow: hidden; }
.gallery-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.gallery-item:hover .gallery-img img { transform: scale(1.08); }

/* Overlay */
.gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,14,31,0.85) 0%, rgba(8,14,31,0.25) 40%, transparent 65%); display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 14px; opacity: 0; transition: opacity 0.3s var(--ease); color: white; z-index: 2; }
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-emoji { font-size: 1.8rem; margin-bottom: 6px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)); }
.gallery-overlay h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 2px; font-family: 'Inter', sans-serif; }
.gallery-overlay p { font-size: 0.75rem; opacity: 0.8; margin-bottom: 6px; }
.gallery-tag { display: inline-block; padding: 3px 10px; background: rgba(255,255,255,0.18); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); border-radius: 50px; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

/* --- Lightbox Modal --- */
.gallery-lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.gallery-lightbox.open { opacity: 1; pointer-events: all; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.88); backdrop-filter: blur(6px); }
.lightbox-card { position: relative; background: white; border-radius: 20px; max-width: 820px; width: 92%; max-height: 88vh; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 24px 80px rgba(0,0,0,0.5); transform: scale(0.92); transition: transform 0.35s var(--ease); }
.gallery-lightbox.open .lightbox-card { transform: scale(1); }
.lightbox-x { position: absolute; top: 12px; right: 12px; z-index: 5; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.5); color: white; font-size: 1rem; cursor: pointer; display: grid; place-items: center; transition: background 0.2s; }
.lightbox-x:hover { background: rgba(0,0,0,0.8); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.45); color: white; font-size: 1rem; cursor: pointer; display: grid; place-items: center; transition: background 0.2s; }
.lightbox-nav:hover { background: rgba(0,0,0,0.75); }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-img { width: 100%; height: 100%; min-height: 320px; overflow: hidden; }
.lightbox-img img { width: 100%; height: 100%; object-fit: cover; }
.lightbox-info { padding: 28px 24px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.lightbox-emoji { font-size: 2.2rem; }
.lightbox-info h3 { font-size: 1.3rem; font-weight: 700; color: var(--text); font-family: 'Playfair Display', serif; }
.lightbox-loc { font-size: 0.85rem; color: var(--text-muted); }
.lightbox-desc { font-size: 0.88rem; color: var(--text-light); line-height: 1.55; }
.lightbox-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border-light); flex-wrap: wrap; }
.lightbox-meta span { font-size: 0.8rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
.lightbox-meta span i { color: var(--primary); }

/* --- Gallery Responsive --- */
@media (max-width: 1024px) {
    .gallery-masonry { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (max-width: 768px) {
    .gallery-masonry { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 20px 16px 32px; }
    .gallery-filter-bar .container { justify-content: center; }
    .gallery-filter { padding: 7px 12px; font-size: 0.76rem; }
    .lightbox-card { grid-template-columns: 1fr; max-height: 90vh; }
    .lightbox-img { min-height: 220px; max-height: 45vh; }
    .lightbox-info { padding: 18px 20px; }
    .lightbox-info h3 { font-size: 1.1rem; }
    .lightbox-nav { display: none; }
}
@media (max-width: 480px) {
    .gallery-masonry { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 16px 12px 28px; }
    .gallery-phone-frame { border-radius: 12px; border-width: 2px; }
    .gallery-item { border-radius: 12px; }
    .gallery-overlay { padding: 12px 10px; }
    .gallery-overlay h4 { font-size: 0.82rem; }
    .gallery-emoji { font-size: 1.4rem; }
    .gallery-tag { font-size: 0.58rem; padding: 2px 7px; }
    .gallery-filter { padding: 6px 10px; font-size: 0.72rem; }
}
.cta-section .cta-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--primary); color: white; padding: 12px 24px; border-radius: var(--radius-sm); font-weight: 600; transition: all var(--transition); margin-top: 18px; font-size: 0.88rem; }
.cta-section .cta-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }

/* --- 12. PAGE-SPECIFIC: LOGIN --- */
body.page-login { --primary: #1B3A8C; background: linear-gradient(145deg, #0A1628 0%, #0E1F5C 40%, #1B3A8C 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.login-container { width: 100%; max-width: 400px; padding: 20px; }
.login-card { background: white; border-radius: var(--radius-lg); padding: 36px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.login-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; }
.login-logo-icon { height: 44px; }
.login-logo-text { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--text); }
.login-subtitle { text-align: center; color: var(--text-muted); margin-bottom: 24px; font-size: 0.88rem; }
.login-btn { width: 100%; padding: 12px; background: var(--primary); color: white; border: none; border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all var(--transition); position: relative; }
.login-btn:hover { background: var(--primary-dark); }
.login-btn.loading .btn-text { opacity: 0; }
.login-btn.loading .spinner { display: block; }
.spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; position: absolute; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-size: 0.85rem; }
.remember-me { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-light); }
.remember-me input { accent-color: var(--primary); }
.error-message { display: none; padding: 10px 14px; background: rgba(230,57,70,0.06); border-radius: var(--radius-sm); color: var(--danger); font-size: 0.85rem; margin-bottom: 14px; align-items: center; gap: 8px; }
.error-message.show { display: flex; }
.demo-hint { margin-top: 18px; padding: 12px; background: var(--bg-warm); border-radius: var(--radius-sm); font-size: 0.78rem; color: var(--text-light); text-align: center; }
.demo-hint code { background: white; padding: 2px 5px; border-radius: 3px; font-size: 0.75rem; }
.login-footer { text-align: center; margin-top: 18px; }
.login-footer a { color: rgba(255,255,255,0.8); font-size: 0.88rem; display: inline-flex; align-items: center; gap: 5px; }
.login-footer a:hover { color: white; }
/* --- 13. PAGE-SPECIFIC: INDEX2 --- */
body.page-index2 { background: var(--bg-light); }
body.page-index2 .container { max-width: 960px; padding: 36px 20px; }
body.page-index2 .header { background: transparent; position: static; text-align: center; margin-bottom: 36px; }
body.page-index2 .header h1 { font-size: 2.3rem; color: var(--text); }
body.page-index2 .header p { color: var(--text-light); margin-top: 6px; }
body.page-index2 .version { display: inline-block; margin-top: 6px; padding: 3px 10px; background: var(--primary); color: white; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 600; }
body.page-index2 .pages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 36px; }
body.page-index2 .page-card { background: white; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); transition: all var(--transition); display: block; }
body.page-index2 .page-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
body.page-index2 .page-card .icon { width: 44px; height: 44px; border-radius: 10px; background: var(--primary-subtle); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 12px; }
body.page-index2 .page-card h3 { font-size: 0.98rem; margin-bottom: 5px; font-family: 'Inter', sans-serif; }
body.page-index2 .page-card p { font-size: 0.82rem; color: var(--text-light); margin-bottom: 10px; }
body.page-index2 .tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 600; margin-right: 3px; }
body.page-index2 .tag.frontend { background: rgba(59,130,246,0.08); color: var(--info); }
body.page-index2 .tag.crm { background: var(--primary-subtle); color: var(--primary); }
body.page-index2 .tag.pipeline { background: rgba(139,92,246,0.08); color: #8B5CF6; }
body.page-index2 .schema-section { background: white; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); margin-bottom: 28px; text-align: center; }
body.page-index2 .schema-section h2 { margin-bottom: 6px; }
body.page-index2 .schema-section p { color: var(--text-light); margin-bottom: 18px; }
body.page-index2 .schema-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--primary); color: white; border-radius: var(--radius-sm); font-weight: 600; transition: all var(--transition); }
body.page-index2 .schema-btn:hover { background: var(--primary-dark); }
body.page-index2 .schema-btn.small { padding: 7px 14px; font-size: 0.82rem; background: var(--bg-warm); color: var(--text); }
body.page-index2 .api-status { background: white; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); margin-bottom: 28px; }
body.page-index2 .api-status h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
body.page-index2 .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
body.page-index2 .status-dot.online { background: var(--success); box-shadow: 0 0 6px rgba(34,197,94,0.4); }
body.page-index2 .status-dot.offline { background: var(--danger); }
body.page-index2 .endpoint-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
body.page-index2 .endpoint { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--bg-warm); border-radius: var(--radius-sm); font-size: 0.82rem; font-family: monospace; }
body.page-index2 .method { padding: 2px 7px; border-radius: 3px; font-size: 0.68rem; font-weight: 700; color: white; }
body.page-index2 .method.get { background: var(--success); }
body.page-index2 .method.post { background: var(--info); }
body.page-index2 .method.put { background: var(--warning); }
body.page-index2 .footer { text-align: center; padding: 20px; color: var(--text-muted); font-size: 0.82rem; }

/* --- 14. PAGE-SPECIFIC: CHAT --- */
body.page-chat { --primary: #1B3A8C; display: flex; min-height: 100vh; }

/* --- 15. CRM SHARED --- */
body.page-chat, body.page-agent-dashboard, body.page-partner-portal { --primary: #1B3A8C; }
.sidebar { width: 240px; background: #080E1F; color: #7A8599; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; transition: transform var(--transition); }
.sidebar-header { padding: 18px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sidebar-logo { display: flex; align-items: center; gap: 10px; font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700; color: white; cursor: pointer; }
.sidebar-logo-icon { height: 30px; width: auto; }
.partner-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; background: rgba(34,197,94,0.12); color: var(--success); border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 600; margin-top: 6px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 0; }
.nav-section { margin-bottom: 6px; }
.nav-section-title { padding: 7px 18px; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1.2px; color: #475569; font-family: 'Inter', sans-serif; }
.sidebar-nav .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 18px; font-size: 0.85rem; cursor: pointer; transition: all var(--transition-fast); border-radius: 0; }
.sidebar-nav .nav-item:hover { background: rgba(255,255,255,0.05); color: white; }
.sidebar-nav .nav-item.active { background: rgba(27,58,140,0.2); color: #4B8BF5; }
.sidebar-nav .nav-item i { width: 18px; text-align: center; font-size: 0.85rem; }
.nav-badge { padding: 2px 7px; border-radius: var(--radius-pill); font-size: 0.65rem; font-weight: 700; margin-left: auto; }
.nav-badge.danger { background: rgba(230,57,70,0.15); color: var(--accent); }
.nav-badge.info { background: rgba(59,130,246,0.15); color: var(--info); }
.sidebar-footer { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,0.06); }
.user-card { display: flex; align-items: center; gap: 10px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; flex-shrink: 0; }
.user-info h4 { font-size: 0.82rem; color: white; font-family: 'Inter', sans-serif; }
.user-info p { font-size: 0.72rem; color: #475569; }
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; background: white; border-bottom: 1px solid var(--border-light); }
.topbar-title h1 { font-size: 1.2rem; }
.topbar-title p { font-size: 0.82rem; color: var(--text-muted); }
.topbar-search { position: relative; flex: 1; max-width: 360px; margin-right: 18px; }
.topbar-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.85rem; }
.topbar-search input { width: 100%; padding: 9px 10px 9px 32px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); font-size: 0.85rem; }
.topbar-actions { display: flex; gap: 6px; align-items: center; }
.topbar-btn { width: 36px; height: 36px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-light); transition: all var(--transition-fast); position: relative; }
.topbar-btn:hover { border-color: var(--primary); color: var(--primary); }
.notification-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.content { flex: 1; padding: 22px; background: var(--bg-light); }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.page-header h1 { font-size: 1.4rem; }
.page-header p { color: var(--text-muted); font-size: 0.85rem; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.stat-card { background: white; border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); }
.stat-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.stat-card-header h3 { font-size: 0.82rem; color: var(--text-muted); font-family: 'Inter', sans-serif; font-weight: 500; }
.stat-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.stat-icon.green { background: rgba(34,197,94,0.08); color: var(--success); }
.stat-icon.blue { background: rgba(59,130,246,0.08); color: var(--info); }
.stat-icon.orange { background: rgba(245,158,11,0.08); color: var(--warning); }
.stat-icon.red { background: rgba(230,57,70,0.06); color: var(--accent); }
.stat-icon.purple { background: rgba(139,92,246,0.08); color: #8B5CF6; }
.stat-value { font-size: 1.65rem; font-weight: 700; color: var(--text); }
.stat-change { font-size: 0.75rem; color: var(--text-muted); margin-top: 3px; }
.dashboard-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; }
.pipeline-card, .activity-card, .tasks-card { background: white; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); margin-bottom: 18px; }
.pipeline-card h3, .activity-card h3, .tasks-card h3 { font-size: 0.95rem; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; }
.pipeline-columns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pipeline-col { text-align: center; }
.pipeline-col-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.pipeline-col-header h4 { font-size: 0.75rem; font-family: 'Inter', sans-serif; }
.pipeline-count { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.activity-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-light); }
.activity-item:last-child { border-bottom: none; }
.activity-icon { width: 34px; height: 34px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; flex-shrink: 0; }
.activity-icon.quote { background: rgba(59,130,246,0.08); color: var(--info); }
.activity-icon.payment { background: rgba(34,197,94,0.08); color: var(--success); }
.activity-icon.booking { background: rgba(245,158,11,0.08); color: var(--warning); }
.activity-icon.message { background: rgba(139,92,246,0.08); color: #8B5CF6; }
.activity-content p { font-size: 0.82rem; line-height: 1.4; }
.activity-content span { font-size: 0.72rem; color: var(--text-muted); }
.task-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-light); }
.task-item:last-child { border-bottom: none; }
.task-checkbox { width: 20px; height: 20px; border: 1.5px solid var(--border); border-radius: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; }
.task-checkbox.checked { background: var(--success); border-color: var(--success); color: white; }
.task-text { flex: 1; font-size: 0.85rem; }
.task-text.overdue { color: var(--danger); }
.task-due { font-size: 0.75rem; color: var(--text-muted); }
.task-due.urgent { color: var(--danger); font-weight: 600; }

/* --- 16. BOOKING CHECKOUT --- */
body.page-booking-checkout { background: var(--bg-warm); padding-top: 0; }

.secure-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
    background: rgba(34,197,94,0.08); color: var(--success); border-radius: var(--radius-pill);
    font-size: 0.78rem; font-weight: 600;
}

.checkout-container { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; max-width: 1100px; margin: 28px auto; padding: 0 20px; }
.checkout-main { display: flex; flex-direction: column; gap: 20px; }
.checkout-steps {
    display: flex; gap: 0; background: white; border-radius: var(--radius); padding: 14px 20px;
    box-shadow: var(--shadow-card); border: 1px solid var(--border-light); margin-bottom: 8px;
}
.checkout-step {
    flex: 1; text-align: center; font-size: 0.82rem; font-weight: 500; color: var(--text-muted);
    padding: 8px 0; border-bottom: 2px solid var(--border-light); transition: all var(--transition-fast);
}
.checkout-step.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.checkout-step.completed { color: var(--success); border-bottom-color: var(--success); }
.checkout-step i { margin-right: 4px; }

.card {
    background: white; border-radius: var(--radius); padding: 24px;
    box-shadow: var(--shadow-card); border: 1px solid var(--border-light);
}
.card h3 { margin-bottom: 16px; display: flex; align-items: center; gap: 10px; font-size: 1rem; font-family: 'Inter', sans-serif; }
.card h3 i { color: var(--primary); }

.payment-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.payment-method {
    display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--border-light);
    border-radius: var(--radius); cursor: pointer; transition: all var(--transition-fast); background: white;
}
.payment-method:hover { border-color: var(--primary); background: var(--primary-subtle); }
.payment-method.selected { border-color: var(--primary); background: rgba(27,58,140,0.06); }
.payment-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.payment-icon.mpesa { background: rgba(0,166,80,0.1); color: #00a650; }
.payment-icon.card { background: rgba(59,130,246,0.08); color: var(--info); }
.payment-icon.bank { background: rgba(139,92,246,0.08); color: #8B5CF6; }
.payment-info h4 { font-size: 0.88rem; font-family: 'Inter', sans-serif; margin-bottom: 2px; }
.payment-info p { font-size: 0.75rem; color: var(--text-muted); }
.payment-badge { padding: 3px 8px; border-radius: var(--radius-pill); font-size: 0.65rem; font-weight: 700; margin-left: auto; }
.payment-badge.popular { background: rgba(0,166,80,0.1); color: #00a650; }

.mpesa-section { padding: 20px; background: var(--bg-warm); border-radius: var(--radius); margin-top: 14px; }
.mpesa-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; margin-bottom: 16px; }

.paybill-info {
    margin-top: 18px; padding: 16px; background: white; border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}
.paybill-info h4 { font-size: 0.88rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; }
.paybill-row {
    display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-light);
    font-size: 0.85rem;
}
.paybill-row:last-child { border-bottom: none; }
.paybill-row span:first-child { color: var(--text-muted); }
.paybill-row span:last-child { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.copy-btn {
    width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--border-light);
    background: white; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.72rem; color: var(--text-muted); transition: all var(--transition-fast);
}
.copy-btn:hover { border-color: var(--primary); color: var(--primary); }

.card-form { margin-top: 14px; }
.card-visual {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius); padding: 22px; color: white; margin-bottom: 18px;
    position: relative; overflow: hidden;
}
.card-visual::before {
    content: ''; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px;
    background: rgba(255,255,255,0.08); border-radius: 50%;
}
.card-chip {
    width: 36px; height: 26px; background: linear-gradient(135deg, #d4a843, #f0d27c);
    border-radius: 4px; margin-bottom: 14px;
}
.card-number-display { font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 14px; font-family: monospace; }
.card-details { display: flex; justify-content: space-between; }
.card-details label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7; display: block; }
.card-details span { font-size: 0.85rem; font-weight: 600; margin-top: 2px; display: block; }

.installment-toggle {
    display: flex; align-items: center; gap: 14px; padding: 16px; border: 2px solid var(--border-light);
    border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast);
}
.installment-toggle:hover { border-color: var(--primary); }
.installment-toggle input { accent-color: var(--primary); width: 18px; height: 18px; flex-shrink: 0; }
.installment-toggle h4 { font-size: 0.88rem; margin-bottom: 2px; font-family: 'Inter', sans-serif; }
.installment-toggle p { font-size: 0.78rem; color: var(--text-muted); }

.installment-plan { margin-top: 16px; padding: 16px; background: var(--bg-warm); border-radius: var(--radius-sm); }
.installment-plan h4 { font-size: 0.88rem; margin-bottom: 12px; font-family: 'Inter', sans-serif; }
.installment-schedule { display: flex; flex-direction: column; gap: 8px; }
.installment-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: white;
    border-radius: var(--radius-sm); border: 1px solid var(--border-light); font-size: 0.85rem;
}
.installment-item.paid { border-color: var(--success); background: rgba(34,197,94,0.03); }
.installment-item.current { border-color: var(--primary); background: rgba(27,58,140,0.03); }
.inst-num {
    width: 28px; height: 28px; border-radius: 50%; background: var(--border-light);
    display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
    font-weight: 700; flex-shrink: 0; color: var(--text-muted);
}
.installment-item.paid .inst-num { background: var(--success); color: white; }
.installment-item.current .inst-num { background: var(--primary); color: white; }
.inst-date { font-size: 0.75rem; color: var(--text-muted); }
.inst-amount { margin-left: auto; font-weight: 700; color: var(--primary); white-space: nowrap; }

.order-summary {
    background: white; border-radius: var(--radius-lg); padding: 28px;
    box-shadow: var(--shadow-card); border: 1px solid var(--border-light);
    position: sticky; top: 92px; align-self: flex-start;
}
.summary-header { display: flex; gap: 14px; margin-bottom: 18px; }
.summary-header img { width: 80px; height: 80px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.summary-header h4 { font-size: 0.95rem; margin-bottom: 3px; font-family: 'Inter', sans-serif; }
.summary-header p { font-size: 0.82rem; color: var(--text-muted); }
.summary-line { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.85rem; }
.summary-line.total { border-top: 2px solid var(--primary); margin-top: 6px; padding-top: 12px; font-weight: 700; font-size: 1rem; }
.summary-line.total span:last-child { color: var(--primary); }
.summary-line.discount span:last-child { color: var(--success); }
.promo-input { display: flex; gap: 6px; margin: 16px 0; }
.promo-input input { flex: 1; padding: 9px 12px; border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); font-size: 0.85rem; }
.promo-input button { padding: 9px 16px; background: var(--bg-warm); border: 1px solid var(--border-light); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all var(--transition-fast); }
.promo-input button:hover { background: var(--primary-subtle); color: var(--primary); border-color: var(--primary); }

.modal { text-align: center; }
.spinner {
    width: 40px; height: 40px; border: 3px solid var(--border-light); border-top-color: var(--primary);
    border-radius: 50%; animation: spin 0.7s linear infinite; margin: 0 auto 16px;
}
.success-icon {
    width: 60px; height: 60px; border-radius: 50%; background: rgba(34,197,94,0.1);
    color: var(--success); display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin: 0 auto 16px;
}
.modal h3 { margin-bottom: 8px; }
.modal p { color: var(--text-light); font-size: 0.9rem; margin-bottom: 16px; }

.stk-push-btn { margin-top: 14px; }

/* --- 17. PARTNER PORTAL --- */
body.page-partner-portal { background: var(--bg-warm); }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 14px; }
.calendar-header-cell { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); padding: 6px 0; text-transform: uppercase; }
.calendar-day { text-align: center; padding: 8px 4px; border-radius: var(--radius-sm); font-size: 0.82rem; cursor: pointer; transition: all var(--transition-fast); }
.calendar-day:hover { background: var(--primary-subtle); color: var(--primary); }
.calendar-day.booked { background: rgba(230,57,70,0.08); color: var(--accent); font-weight: 600; }
.calendar-day.available { background: rgba(34,197,94,0.06); color: var(--success); }
.calendar-day.today { background: var(--primary); color: white; font-weight: 700; }
.calendar-day.empty { opacity: 0; pointer-events: none; }

.commission-card { background: white; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); margin-bottom: 14px; }
.commission-card h4 { font-size: 0.88rem; margin-bottom: 10px; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
.commission-rate { display: flex; align-items: baseline; gap: 4px; margin-bottom: 8px; }
.commission-rate .rate { font-size: 2rem; font-weight: 700; color: var(--primary); }
.commission-rate .suffix { font-size: 0.9rem; color: var(--text-muted); }

.payout-method { display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--border-light); border-radius: var(--radius-sm); margin-bottom: 10px; cursor: pointer; transition: all var(--transition-fast); }
.payout-method:hover { border-color: var(--primary); }
.payout-method.selected { border-color: var(--primary); background: var(--primary-subtle); }
.payout-method i { font-size: 1.4rem; color: var(--primary); }
.payout-method-info { flex: 1; }
.payout-method-info strong { display: block; font-size: 0.88rem; }
.payout-method-info span { font-size: 0.78rem; color: var(--text-muted); }

/* --- 18. QUOTE BUILDER --- */
body.page-quote-builder { background: var(--bg-warm); padding-top: 0; }

.progress-bar {
    display: flex; align-items: center; justify-content: center; gap: 0;
    padding: 20px 24px; max-width: 800px; margin: 0 auto;
}
.progress-inner { display: flex; align-items: center; gap: 0; width: 100%; position: relative; }
.progress-line { position: absolute; top: 16px; left: 32px; right: 32px; height: 3px; background: var(--border-light); border-radius: 2px; z-index: 0; }
.progress-line-fill { height: 100%; background: var(--primary); border-radius: 2px; transition: width 0.5s var(--ease); }
.step {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    position: relative; z-index: 1; flex: 1; min-width: 0;
}
.step-circle {
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem; font-weight: 700; background: white; border: 2px solid var(--border-light);
    color: var(--text-muted); transition: all 0.35s var(--ease);
}
.step.active .step-circle { border-color: var(--primary); background: var(--primary); color: white; box-shadow: 0 0 0 4px var(--primary-subtle); }
.step.completed .step-circle { border-color: var(--success); background: var(--success); color: white; }
.step-label { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.step.active .step-label { color: var(--primary); font-weight: 600; }
.step.completed .step-label { color: var(--success); }

.builder-container { max-width: 800px; margin: 0 auto; padding: 0 20px 40px; }
.step-content { display: none; animation: fadeInUp 0.4s var(--ease) forwards; }
.step-content.active { display: block; }
.step-header { text-align: center; margin-bottom: 28px; }
.step-header h2 { font-size: 1.6rem; margin-bottom: 6px; }
.step-header p { color: var(--text-light); font-size: 0.95rem; }

.option-card {
    padding: 20px 16px; border: 2px solid var(--border-light); border-radius: var(--radius);
    cursor: pointer; text-align: center; transition: all var(--transition-fast); background: white;
}
.option-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.option-card.selected { border-color: var(--primary); background: rgba(27,58,140,0.06); box-shadow: 0 0 0 3px var(--primary-subtle); }
.option-icon { font-size: 1.8rem; color: var(--primary); margin-bottom: 10px; }
.option-card h4 { font-size: 0.92rem; margin-bottom: 3px; font-family: 'Inter', sans-serif; }
.option-card p { font-size: 0.78rem; color: var(--text-muted); }

.dest-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.exp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.exp-card {
    display: flex; align-items: center; gap: 14px; padding: 16px; border: 2px solid var(--border-light);
    border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); background: white;
}
.exp-card:hover { border-color: var(--primary); }
.exp-card.selected { border-color: var(--primary); background: rgba(27,58,140,0.06); }
.exp-card input[type="checkbox"] { accent-color: var(--primary); width: 18px; height: 18px; flex-shrink: 0; }
.exp-card h4 { font-size: 0.88rem; margin-bottom: 2px; font-family: 'Inter', sans-serif; }
.exp-card p { font-size: 0.75rem; color: var(--text-muted); }

.traveler-counter { display: flex; align-items: center; gap: 16px; }
.counter-btn {
    width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--border);
    background: white; cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--primary); font-size: 0.85rem; transition: all var(--transition-fast);
}
.counter-btn:hover { border-color: var(--primary); background: var(--primary-subtle); }
.counter-value { font-size: 1.2rem; font-weight: 700; min-width: 28px; text-align: center; }

.budget-range { margin-top: 14px; }
.budget-slider { width: 100%; margin: 10px 0; }
.budget-slider input[type="range"] {
    width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
    background: linear-gradient(90deg, var(--primary-subtle), var(--primary)); border-radius: var(--radius-pill); outline: none;
}
.budget-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
    background: var(--primary); cursor: pointer; border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: transform 0.2s;
}
.budget-slider input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.budget-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.78rem; color: var(--text-muted); }
.budget-display {
    font-size: 2.4rem; font-weight: 700; color: var(--primary);
    text-align: center; margin-bottom: 4px; font-family: 'Playfair Display', serif;
}

.step-nav {
    display: flex; justify-content: space-between; align-items: center;
    max-width: 800px; margin: 0 auto; padding: 20px 20px 40px;
}

.summary-card { background: white; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); margin-top: 22px; }
.summary-card h3 { margin-bottom: 16px; font-family: 'Inter', sans-serif; }
.summary-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-light); font-size: 0.88rem; }
.summary-row:last-child { border-bottom: none; }
.summary-row .label { color: var(--text-light); }
.summary-row .value { font-weight: 600; }
.summary-row.total { border-top: 2px solid var(--primary); margin-top: 6px; padding-top: 14px; font-size: 1.1rem; font-weight: 700; }
.summary-row.total .value { color: var(--primary); }
.summary-note {
    margin-top: 16px; padding: 14px; background: rgba(59,130,246,0.06); border-radius: var(--radius-sm);
    font-size: 0.82rem; color: var(--text-light); display: flex; align-items: flex-start; gap: 8px; line-height: 1.6;
}
.summary-note i { color: var(--info); margin-top: 2px; flex-shrink: 0; }

/* Step completion celebration */
.step-celebration {
    position: fixed; inset: 0; z-index: 9998; pointer-events: none;
}
.confetti-piece {
    position: absolute; width: 10px; height: 10px; border-radius: 2px;
    animation: confettiFall 1.2s var(--ease) forwards; opacity: 0;
}
@keyframes confettiFall {
    0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translateY(120vh) rotate(720deg) scale(0.3); }
}

/* Fun retention popup */
.retention-popup {
    position: fixed; bottom: 24px; left: 24px; z-index: 9999;
    background: white; border-radius: var(--radius-lg); padding: 18px 22px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15); max-width: 360px;
    border-left: 4px solid var(--secondary);
    transform: translateX(-120%); transition: transform 0.5s var(--ease);
}
.retention-popup.show { transform: translateX(0); }
.retention-popup-icon { font-size: 1.8rem; margin-bottom: 6px; }
.retention-popup h4 { font-size: 0.95rem; margin-bottom: 4px; font-family: 'Inter', sans-serif; }
.retention-popup p { font-size: 0.82rem; color: var(--text-light); line-height: 1.5; }
.retention-popup .dismiss-btn {
    position: absolute; top: 8px; right: 10px; background: none; border: none;
    color: var(--text-muted); cursor: pointer; font-size: 0.85rem;
}

/* Booking success celebration */
.booking-success-overlay {
    position: fixed; inset: 0; z-index: 10000; background: rgba(8,14,31,0.7);
    backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease);
}
.booking-success-overlay.active { opacity: 1; pointer-events: all; }
.booking-success-card {
    background: white; border-radius: var(--radius-lg); padding: 40px 36px;
    max-width: 520px; width: 90%; text-align: center;
    transform: scale(0.85); transition: transform 0.5s var(--ease);
}
.booking-success-overlay.active .booking-success-card { transform: scale(1); }
.booking-success-icon {
    width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 20px;
    background: rgba(34,197,94,0.1); color: var(--success);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; animation: successPop 0.5s 0.3s var(--ease) both;
}
@keyframes successPop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.booking-success-card h2 { font-size: 1.5rem; margin-bottom: 8px; }
.booking-success-card .subtitle { color: var(--text-light); margin-bottom: 20px; font-size: 0.95rem; }
.booking-success-card .adventure-hint {
    background: linear-gradient(135deg, rgba(27,58,140,0.06), rgba(212,168,67,0.08));
    border-radius: var(--radius); padding: 18px; margin: 20px 0; text-align: left;
}
.booking-success-card .adventure-hint h4 { font-size: 0.88rem; margin-bottom: 8px; color: var(--primary); font-family: 'Inter', sans-serif; }
.booking-success-card .adventure-hint p { font-size: 0.85rem; color: var(--text-light); line-height: 1.6; margin-bottom: 0; }
.booking-success-card .adventure-hint .emoji-row { font-size: 1.3rem; margin-bottom: 8px; }
.booking-success-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }

/* --- 19. CHAT / WHATSAPP SIDEBAR --- */
body.page-chat { background: var(--bg-light); }

.chat-page { display: flex; height: calc(100vh - 64px); margin-top: 64px; }
.chat-sidebar { width: 360px; background: white; border-right: 1px solid var(--border-light); display: flex; flex-direction: column; flex-shrink: 0; }
.chat-sidebar-header { padding: 18px; border-bottom: 1px solid var(--border-light); }
.chat-sidebar-header { background:linear-gradient(135deg,#f8fafc,#fff); }
.chat-sidebar-actions { display:flex; gap:8px; align-items:center; }
.chat-sidebar-actions .btn, .chat-sidebar-actions button { min-height:34px; border-radius:9px; }
.chat-sidebar-search { padding:10px 14px; background:#f8fafc; border-bottom:1px solid var(--border-light); }
.chat-sidebar-search input { width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:9px; padding:9px 12px; background:#fff; }
.chat-sidebar-header h2 { font-size: 1.1rem; margin-bottom: 12px; font-family: 'Inter', sans-serif; }
.chat-search { position: relative; }
.chat-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.85rem; }
.chat-search input { width: 100%; padding: 10px 12px 10px 36px; border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); font-size: 0.85rem; }
.chat-search input:focus { outline: none; border-color: var(--primary); }

.conv-list { flex: 1; overflow-y: auto; }
.conv-item { display: flex; gap: 12px; padding: 14px 18px; cursor: pointer; transition: background var(--transition-fast); border-bottom: 1px solid var(--border-light); }
.conv-item:hover { background: var(--bg-warm); }
.conv-item.active { background: rgba(27,58,140,0.05); border-left: 3px solid var(--primary); }
.conv-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: white; flex-shrink: 0; }
.conv-avatar.agent { background: var(--primary); }
.conv-avatar.customer { background: var(--accent); }
.conv-avatar.partner { background: var(--gold); }
.conv-info { flex: 1; min-width: 0; }
.conv-info-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.conv-name { font-weight: 600; font-size: 0.88rem; }
.conv-time { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.conv-preview { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-unread { width: 18px; height: 18px; border-radius: 50%; background: var(--primary); color: white; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-left: auto; flex-shrink: 0; }
.conv-status { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.conv-status.online { background: var(--success); }
.conv-status.away { background: var(--warning); }
.conv-status.offline { background: var(--text-muted); }

.chat-main { flex: 1; display: flex; flex-direction: column; }
.chat-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; background: white; border-bottom: 1px solid var(--border-light); }
.chat-header-info { display: flex; align-items: center; gap: 12px; }
.chat-header-info h3 { font-size: 0.95rem; }
.chat-header-info span { font-size: 0.78rem; color: var(--text-muted); }
.chat-header-actions { display: flex; gap: 8px; }
.chat-header-btn { width: 36px; height: 36px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-light); transition: all var(--transition-fast); }
.chat-header-btn:hover { border-color: var(--primary); color: var(--primary); }

.chat-messages { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; background: var(--bg-warm); }
.msg { max-width: 70%; display: flex; flex-direction: column; gap: 4px; }
.msg.sent { align-self: flex-end; }
.msg.received { align-self: flex-start; }
.msg-bubble { padding: 12px 16px; border-radius: var(--radius); font-size: 0.88rem; line-height: 1.5; }
.msg.sent .msg-bubble { background: var(--primary); color: white; border-bottom-right-radius: 4px; }
.msg.received .msg-bubble { background: white; border: 1px solid var(--border-light); border-bottom-left-radius: 4px; }
.msg-meta { font-size: 0.7rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.msg.sent .msg-meta { justify-content: flex-end; }
.msg-system { text-align: center; font-size: 0.78rem; color: var(--text-muted); padding: 8px; }
.msg-system span { background: white; padding: 4px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-light); }

.thread-item { padding: 10px 18px 10px 34px; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: background var(--transition-fast); }
.thread-item:hover { background: var(--bg-warm); }
.thread-item.active { background: rgba(27,58,140,0.05); }
.thread-item h4 { font-size: 0.82rem; margin-bottom: 2px; font-family: 'Inter', sans-serif; }
.thread-item p { font-size: 0.75rem; color: var(--text-muted); }
.thread-item .thread-count { font-size: 0.72rem; color: var(--primary); font-weight: 600; margin-top: 3px; }

.chat-input { display: flex; gap: 10px; padding: 14px 22px; background: white; border-top: 1px solid var(--border-light); align-items: flex-end; }
.chat-input textarea { flex: 1; padding: 10px 14px; border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); font-size: 0.88rem; font-family: 'Inter', sans-serif; resize: none; min-height: 42px; max-height: 120px; }
.chat-input textarea:focus { outline: none; border-color: var(--primary); }
.chat-send-btn { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--primary); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: all var(--transition-fast); }
.chat-send-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
.chat-attach-btn { width: 42px; height: 42px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-light); background: white; color: var(--text-light); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: all var(--transition-fast); }
.chat-attach-btn:hover { border-color: var(--primary); color: var(--primary); }

.typing-indicator { display: flex; gap: 4px; padding: 8px 14px; background: white; border: 1px solid var(--border-light); border-radius: var(--radius); width: fit-content; }
.typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: typingBounce 1.4s infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.whatsapp-float { position: fixed; bottom: 24px; right: 24px; z-index: 999; }
.whatsapp-float-btn { width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 16px rgba(37,211,102,0.35); transition: all var(--transition); }
.whatsapp-float-btn:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(37,211,102,0.45); }

/* --- 20. INDEX PAGE EXTRAS --- */
.search-widget { position: relative; z-index: 10; max-width: 1120px; margin: -36px auto 0; padding: 0 20px; }
.search-card { background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.search-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-light); }
.search-tab { padding: 12px 20px; border: none; background: none; cursor: pointer; font-weight: 500; color: var(--text-muted); font-size: 0.85rem; transition: all var(--transition-fast); font-family: 'Inter', sans-serif; }
.search-tab.active, .search-tab:hover { color: var(--primary); background: var(--primary-subtle); }
.search-form { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 14px; padding: 20px 24px; align-items: end; }
.search-form .form-group { margin-bottom: 0; }
.search-btn { height: 42px; }

.destinations-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.destination-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; height: 320px; cursor: pointer; transition: all var(--transition); }
.destination-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.destination-card:hover img { transform: scale(1.05); }
.destination-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(8,14,31,0.8)); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; color: white; }
.destination-overlay h3 { font-size: 1.2rem; margin-bottom: 3px; }
.destination-overlay p { font-size: 0.85rem; opacity: 0.8; }
.destination-overlay .badge { align-self: flex-start; margin-bottom: 10px; }

.experiences-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.experience-card { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); transition: all var(--transition); }
.experience-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.experience-image { position: relative; height: 200px; overflow: hidden; }
.experience-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.experience-card:hover .experience-image img { transform: scale(1.03); }
.experience-image .price-tag { position: absolute; bottom: 10px; right: 10px; background: var(--primary); color: white; padding: 5px 14px; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.88rem; }
.experience-content { padding: 18px; }
.experience-content h3 { font-size: 1.05rem; margin-bottom: 8px; font-family: 'Inter', sans-serif; }
.experience-meta { display: flex; gap: 16px; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 8px; }
.experience-meta i { margin-right: 4px; color: var(--primary); }
.experience-rating { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.experience-rating .stars { color: var(--secondary); font-size: 0.82rem; }
.experience-rating span { font-size: 0.82rem; color: var(--text-light); }

.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.feature-card { text-align: center; padding: 28px 20px; background: white; border-radius: var(--radius); box-shadow: var(--shadow-card); border: 1px solid var(--border-light); transition: all var(--transition); }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature-icon { width: 54px; height: 54px; border-radius: 14px; background: var(--primary-subtle); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin: 0 auto 14px; }
.feature-card h3 { font-size: 1rem; margin-bottom: 8px; font-family: 'Inter', sans-serif; }
.feature-card p { font-size: 0.85rem; color: var(--text-light); line-height: 1.6; }

.testimonials-slider { max-width: 1200px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.testimonials-slider::-webkit-scrollbar { display: none; }
.testimonials-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; min-width: 100%; }
.testimonial-card { background: white; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 18px; }
.quote-icon { color: var(--primary); font-size: 1.5rem; margin-bottom: 14px; opacity: 0.3; }
.testimonial-card > p { font-size: 0.95rem; color: var(--text-light); line-height: 1.75; margin: 0; flex: 1; }
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.testimonial-author img { display: none; }
.testimonial-author h4 { font-size: 0.95rem; margin-bottom: 2px; font-family: 'Inter', sans-serif; }
.testimonial-author span { font-size: 0.8rem; color: var(--text-muted); }

.maasai-banner { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--accent) 100%); position: relative; overflow: hidden; }
.maasai-banner-inner { display: flex; align-items: center; justify-content: center; position: relative; padding: 64px 40px; }
.maasai-pattern-left, .maasai-pattern-right { position: absolute; top: 0; bottom: 0; width: 120px; }
.maasai-pattern-left { left: 0; background: repeating-linear-gradient(0deg, var(--secondary) 0px, var(--secondary) 8px, var(--accent) 8px, var(--accent) 16px, var(--primary) 16px, var(--primary) 24px); opacity: 0.15; }
.maasai-pattern-right { right: 0; background: repeating-linear-gradient(0deg, var(--secondary) 0px, var(--secondary) 8px, var(--accent) 8px, var(--accent) 16px, var(--primary) 16px, var(--primary) 24px); opacity: 0.15; }
.maasai-banner-content { text-align: center; color: white; max-width: 640px; position: relative; z-index: 1; }
.maasai-beadwork-border { height: 4px; background: repeating-linear-gradient(90deg, var(--secondary) 0px, var(--secondary) 12px, transparent 12px, transparent 16px, var(--accent) 16px, var(--accent) 28px, transparent 28px, transparent 32px); margin-bottom: 24px; border-radius: 2px; }
.maasai-banner-content h2 { color: white; margin-bottom: 12px; font-size: 1.8rem; }
.maasai-banner-content p { opacity: 0.85; line-height: 1.7; }

.newsletter-inner { max-width: 640px; margin: 0 auto; }

.testimonials-section .testimonial-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 34px; flex-wrap: wrap; }
.testimonials-section .testimonial-actions p { max-width: 760px; color: var(--text-muted); font-size: 0.96rem; line-height: 1.7; }
.testimonials-section .testimonials-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 16px; }
.testimonial-card .testimonial-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.testimonial-card .testimonial-tag { background: rgba(27,58,140,0.08); color: var(--primary); padding: 6px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.testimonial-rating { display: flex; align-items: center; gap: 6px; color: var(--secondary); font-size: 0.9rem; }
.testimonial-rating .stars { display: inline-flex; gap: 2px; }
.testimonial-images { display: none !important; }
.testimonial-images img { width: 100%; min-height: 120px; border-radius: 16px; object-fit: cover; }
.testimonial-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--text-muted); }
.review-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.65); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); z-index: 1002; }
.review-modal-overlay.active { opacity: 1; visibility: visible; }
.review-modal { width: min(760px, 100%); background: white; border-radius: 24px; padding: 28px; box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18); max-height: 92vh; overflow: auto; }
.review-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.review-modal-header h3 { margin: 0 0 8px; font-size: 1.65rem; }
.review-modal-subtitle { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; }
.review-form { display: flex; flex-direction: column; gap: 16px; }
.review-form .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.review-form .form-group { display: flex; flex-direction: column; gap: 8px; }
.review-form label { font-weight: 600; color: var(--text); font-size: 0.92rem; }
.review-form input[type="text"], .review-form input[type="date"], .review-form input[type="file"], .review-form textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg); color: var(--text); font: inherit; }
.review-form textarea { min-height: 140px; resize: vertical; }
.review-form .file-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.review-form .file-preview img { width: 100px; height: 80px; border-radius: 14px; object-fit: cover; border: 1px solid var(--border-light); }
.review-form .consent-group label { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-muted); }
.review-form .privacy-note { margin: 0; color: var(--text-muted); font-size: 0.84rem; line-height: 1.6; }
.review-form .form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.review-form .form-actions .btn { min-width: 130px; }
@media (max-width: 980px) {
    .testimonials-section .testimonials-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .review-form .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .testimonials-section .testimonial-actions { flex-direction: column; }
    .testimonials-section .testimonials-list { grid-template-columns: 1fr; }
}
.agents-section { background: linear-gradient(145deg, var(--primary-dark), var(--primary)); padding: 64px 24px; }
.agents-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 1120px; margin: 0 auto; }
.agent-card { background: rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 28px; border: 1px solid rgba(255,255,255,0.14); transition: all var(--transition); backdrop-filter: blur(12px); min-height: 430px; display: flex; flex-direction: column; gap: 20px; }
.agent-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.14); }
.agent-card-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.agent-photo { width: 82px; height: 82px; border-radius: 22px; object-fit: cover; border: 3px solid rgba(255,255,255,0.2); }
.agent-info h3 { color: white; font-size: 1.2rem; margin-bottom: 4px; }
.agent-role { color: rgba(255,255,255,0.82); font-size: 0.95rem; margin-bottom: 6px; }
.agent-location { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.7); font-size: 0.88rem; }
.agent-bio { color: rgba(255,255,255,0.8); line-height: 1.8; margin: 0; }
.agent-features { display: flex; flex-wrap: wrap; gap: 10px; }
.agent-features span { background: rgba(255,255,255,0.12); color: white; padding: 8px 12px; border-radius: 999px; font-size: 0.82rem; }
.agent-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.agent-stat { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: 16px; }
.agent-stat-value { font-size: 1.35rem; font-weight: 700; color: white; }
.agent-stat-label { color: rgba(255,255,255,0.75); font-size: 0.82rem; margin-top: 4px; }
.agent-rating { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.82); font-size: 0.9rem; }
.agent-rating .stars { color: var(--secondary-light); }
.btn-white { background: white; color: var(--primary); border-color: transparent; }
.btn-white:hover { background: #f8f9ff; }
.btn-full { width: 100%; justify-content: center; }
.agents-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1120px; margin: 0 auto; }
.agent-card { background: rgba(255,255,255,0.06); border-radius: var(--radius-lg); padding: 24px; border: 1px solid rgba(255,255,255,0.1); transition: all var(--transition); backdrop-filter: blur(8px); }
.agent-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.1); }
.agent-card-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.agent-avatar { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.12); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.92rem; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.2); }
.agent-info h3 { color: white; font-size: 1.05rem; margin-bottom: 3px; }
.agent-role { font-size: 0.82rem; color: rgba(255,255,255,0.7); }
.agent-location { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin-top: 3px; }
.agent-location i { color: var(--secondary); margin-right: 3px; }
.agent-specialties { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
.agent-specialty { padding: 3px 10px; border-radius: var(--radius-pill); font-size: 0.72rem; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }
.agent-stats { display: flex; gap: 16px; margin-bottom: 12px; }
.agent-stat { flex: 1; text-align: center; padding: 10px; background: rgba(255,255,255,0.06); border-radius: var(--radius-sm); }
.agent-stat-value { color: white; font-weight: 700; font-size: 1.1rem; display: block; }
.agent-stat-label { font-size: 0.72rem; color: rgba(255,255,255,0.5); }
.agent-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 0.82rem; color: rgba(255,255,255,0.8); }
.agent-rating .stars { color: var(--secondary); }
.btn-contact-agent { width: 100%; padding: 10px; background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all var(--transition-fast); font-family: 'Inter', sans-serif; }
.btn-contact-agent:hover { background: white; color: var(--primary); }
.btn-contact-agent i { margin-right: 6px; }

.agent-modal-overlay { position: fixed; inset: 0; background: rgba(8,14,31,0.6); z-index: 2000; backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.28s var(--ease); }
.agent-modal-overlay.active { opacity: 1; pointer-events: all; }
.agent-modal { background: white; border-radius: var(--radius-lg); padding: 28px; max-width: 460px; width: 90%; max-height: 90vh; overflow-y: auto; transform: translateY(16px) scale(0.98); transition: transform 0.3s var(--ease); }
.agent-modal-overlay.active .agent-modal { transform: translateY(0) scale(1); }
.agent-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.agent-modal-header h3 { font-size: 1.1rem; }
.agent-modal-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--text-muted); padding: 4px; }
.agent-modal-agent { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--bg-warm); border-radius: var(--radius); margin-bottom: 20px; }
.agent-modal-agent .agent-avatar { background: var(--primary); }
.agent-modal-agent .agent-info h4 { color: var(--text); font-size: 0.92rem; }
.agent-modal-agent .agent-info p { color: var(--text-muted); font-size: 0.82rem; }
.btn-send-message { width: 100%; padding: 12px; background: var(--primary); color: white; border: none; border-radius: var(--radius-sm); font-size: 0.92rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all var(--transition); }
.btn-send-message:hover { background: var(--primary-dark); }
.crm-success { display: none; text-align: center; padding: 36px; }
.crm-success.show { display: block; }
.crm-success-icon { width: 60px; height: 60px; border-radius: 50%; background: rgba(34,197,94,0.1); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 14px; }
.crm-success h4 { margin-bottom: 6px; }
.crm-success p { color: var(--text-light); margin-bottom: 18px; }
.close-modal-btn { padding: 10px 20px; background: var(--bg-warm); color: var(--text); border: none; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; }

/* --- 21. ABOUT PAGE EXTRAS --- */
body.page-about { --primary: #1B3A8C; }
.hero-about {
    position: relative;
    padding: 96px 24px 72px;
    text-align: center;
    background:
        linear-gradient(145deg, rgba(10,22,40,0.82), rgba(14,31,92,0.68), rgba(27,58,140,0.42)),
        url("images/generated/portal-travel-consultant.png") center/cover no-repeat;
    color: white;
    overflow: hidden;
}
.hero-about-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(212,168,67,0.08) 0%, transparent 60%); }
.hero-about-content { position: relative; max-width: 720px; margin: 0 auto; }
.hero-about h1 { font-size: 2.5rem; margin-bottom: 14px; letter-spacing: -0.03em; }
.hero-about p { font-size: 1.05rem; opacity: 0.85; line-height: 1.65; max-width: 560px; margin: 0 auto; }

.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.story-content { }
.story-content .lead { font-size: 1.1rem; color: var(--text); line-height: 1.7; margin-bottom: 16px; font-weight: 500; }
.story-content p { color: var(--text-light); margin-bottom: 14px; line-height: 1.7; }
.story-content h2 { margin-bottom: 16px; }
.story-content h2 span { color: var(--primary); }
.story-images { position: relative; }
.story-img-main { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.story-img-main img { width: 100%; height: auto; }
.story-img-float { position: absolute; bottom: -30px; left: -30px; width: 180px; height: 180px; border-radius: var(--radius-lg); overflow: hidden; border: 4px solid white; box-shadow: var(--shadow-lg); }
.story-img-float img { width: 100%; height: 100%; object-fit: cover; }
.story-year-badge { position: absolute; top: 20px; right: -10px; background: var(--primary); color: white; padding: 16px 20px; border-radius: var(--radius); text-align: center; box-shadow: var(--shadow-md); }
.story-year-badge .year { display: block; font-size: 1.4rem; font-weight: 700; font-family: 'Playfair Display', serif; }
.story-year-badge .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; }
.story-mission { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.mission-card { padding: 18px; background: var(--bg-warm); border-radius: var(--radius); border: 1px solid var(--border-light); }
.mission-card h4 { font-size: 0.92rem; margin-bottom: 6px; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
.mission-card h4 i { color: var(--primary); }
.mission-card p { font-size: 0.85rem; color: var(--text-light); margin-bottom: 0; line-height: 1.6; }

.section-full { width: 100%; }
.section-bg-cream { background: var(--bg-cream); }
.section-inner { max-width: 1120px; margin: 0 auto; padding: 64px 20px; }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.team-card { background: white; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); text-align: center; transition: all var(--transition); }
.team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.team-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; font-family: 'Playfair Display', serif; margin: 0 auto 14px; }
.team-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.team-role { color: var(--primary); font-size: 0.85rem; font-weight: 600; margin-bottom: 10px; }
.team-card p { font-size: 0.85rem; color: var(--text-light); line-height: 1.6; margin-bottom: 14px; }
.team-social { display: flex; gap: 10px; justify-content: center; }
.team-social a { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-warm); color: var(--text-muted); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); font-size: 0.88rem; }
.team-social a:hover { background: var(--primary); color: white; }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.value-card { text-align: center; padding: 28px 20px; background: white; border-radius: var(--radius); box-shadow: var(--shadow-card); border: 1px solid var(--border-light); transition: all var(--transition); }
.value-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.value-icon { width: 54px; height: 54px; border-radius: 14px; background: var(--primary-subtle); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin: 0 auto 14px; }
.value-card h3 { font-size: 1rem; margin-bottom: 8px; font-family: 'Inter', sans-serif; }
.value-card p { font-size: 0.85rem; color: var(--text-light); line-height: 1.6; }

.jobs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.job-card { background: white; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); transition: all var(--transition); }
.job-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.job-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.job-card-header h3 { font-size: 1.02rem; margin-bottom: 4px; font-family: 'Inter', sans-serif; }
.job-dept { font-size: 0.82rem; color: var(--primary); font-weight: 600; }
.job-type { padding: 4px 12px; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 600; background: var(--primary-subtle); color: var(--primary); white-space: nowrap; }
.job-meta { display: flex; gap: 14px; margin-bottom: 10px; font-size: 0.82rem; color: var(--text-muted); }
.job-meta i { margin-right: 4px; color: var(--primary); }
.job-card p { font-size: 0.85rem; color: var(--text-light); line-height: 1.6; margin-bottom: 14px; }

/* --- 22. DESTINATIONS PAGE EXTRAS --- */
.hero-destinations { position: relative; padding: 96px 24px 72px; text-align: center; background: linear-gradient(145deg, #0A1628, #0E1F5C, #1B3A8C); color: white; overflow: hidden; }
.hero-destinations-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(212,168,67,0.08) 0%, transparent 60%); }
.hero-destinations-content { position: relative; max-width: 720px; margin: 0 auto; }
.hero-destinations h1 { font-size: 2.5rem; margin-bottom: 14px; letter-spacing: -0.03em; }
.hero-destinations h1 span { color: var(--secondary-light); }
.hero-destinations p { font-size: 1.05rem; opacity: 0.85; line-height: 1.65; max-width: 600px; margin: 0 auto; }

.section-filter-bar { background: white; border-bottom: 1px solid var(--border-light); padding: 14px 0; position: sticky; top: 64px; z-index: 90; }
.section-filter-bar .section-inner { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.filter-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }

.destination-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
a.destination-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.destination-card-img { position: relative; height: 200px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.destination-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.destination-card:hover .destination-card-img img { transform: scale(1.05); }
.destination-card-overlay { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.destination-badge { padding: 4px 10px; border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 600; background: var(--primary); color: white; }
.favorite-btn { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.85); backdrop-filter: blur(4px); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.85rem; transition: all var(--transition-fast); }
.favorite-btn:hover, .favorite-btn.active { color: var(--accent); background: white; }
.destination-card-content { padding: 16px; flex: 1; display: flex; flex-direction: column; background: white; border: 1px solid var(--border-light); border-top: none; border-radius: 0 0 var(--radius) var(--radius); }
.destination-card-content h3 { font-size: 1rem; margin-bottom: 5px; font-family: 'Inter', sans-serif; }
.page-destinations .destination-card { opacity: 1 !important; transform: none !important; height: auto !important; min-height: 0 !important; overflow: visible !important; align-self: start; }
.page-destinations .destination-card-img { display: block !important; height: 200px !important; min-height: 200px !important; flex: 0 0 200px !important; }
.page-destinations .destination-card-img img { display: block !important; width: 100% !important; height: 100% !important; min-height: 100% !important; object-fit: cover !important; }
.page-destinations .destination-card-content { height: auto !important; min-height: 0 !important; overflow: visible !important; }
.page-destinations .destination-grid { align-items: start; }

.destination-location { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 6px; }
.destination-location i { color: var(--primary); margin-right: 3px; }
.destination-desc { font-size: 0.82rem; color: var(--text-light); line-height: 1.6; margin-bottom: 10px; flex: 1; }
.destination-highlights { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.destination-highlights span { font-size: 0.72rem; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--bg-warm); color: var(--text-light); white-space: nowrap; }
.destination-highlights span i { margin-right: 3px; color: var(--primary); font-size: 0.68rem; }
.destination-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--border-light); }
.destination-rating { display: flex; align-items: center; gap: 4px; font-size: 0.82rem; }
.destination-rating i { color: var(--secondary); font-size: 0.78rem; }
.destination-rating span { font-weight: 600; }
.review-count { font-weight: 400 !important; color: var(--text-muted) !important; font-size: 0.78rem; }
.destination-price { font-weight: 700; color: var(--primary); font-size: 0.88rem; }

/* --- 23. EXPERIENCES PAGE EXTRAS --- */
.hero-experiences { position: relative; padding: 96px 24px 72px; text-align: center; background: linear-gradient(145deg, #0A1628, #0E1F5C, #1B3A8C); color: white; overflow: hidden; }
.hero-experiences-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(212,168,67,0.08) 0%, transparent 60%); }
.hero-experiences-content { position: relative; max-width: 720px; margin: 0 auto; }
.hero-experiences h1 { font-size: 2.5rem; margin-bottom: 14px; letter-spacing: -0.03em; }
.hero-experiences h1 span { color: var(--secondary-light); }
.hero-experiences p { font-size: 1.05rem; opacity: 0.85; line-height: 1.65; max-width: 600px; margin: 0 auto; }

/* --- 24. NAV MOBILE OPEN STATE --- */
.nav-desktop.mobile-open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: white; padding: 16px 20px; box-shadow: var(--shadow-lg); border-top: 1px solid var(--border-light); z-index: 1001; gap: 4px; }
.nav-desktop.mobile-open .nav-item { padding: 10px 12px; }
.nav-desktop.mobile-open .nav-item:hover { background: var(--primary-subtle); }
.nav-desktop.mobile-open .mega-menu { display: none !important; }
.nav.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: white; padding: 16px 20px; box-shadow: var(--shadow-lg); border-top: 1px solid var(--border-light); z-index: 1001; gap: 4px; }
.nav.open a { padding: 10px 0; }

/* --- 25. CTA BANNER (SAFARIS) --- */
.cta-banner { background: linear-gradient(145deg, var(--primary-dark), var(--primary)); color: white; padding: 56px 24px; text-align: center; }
.cta-banner h2 { color: white; margin-bottom: 10px; }
.cta-banner p { opacity: 0.85; max-width: 540px; margin: 0 auto 20px; }

/* --- 26. RESPONSIVE / MEDIA QUERIES --- */

@media (max-width: 1199px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .pipeline-columns { grid-template-columns: repeat(3, 1fr); }
  .checkout-container { grid-template-columns: 1fr; }
  .dest-options { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .mega-menu { display: none; }
  .dest-cards { grid-template-columns: repeat(2, 1fr); }
  .hotel-cards { grid-template-columns: repeat(2, 1fr); }
  .safari-cards { grid-template-columns: repeat(2, 1fr); }
  .exp-cards { grid-template-columns: repeat(2, 1fr); }
  .guide-cards { grid-template-columns: repeat(2, 1fr); }
  .featured-cards { grid-template-columns: repeat(2, 1fr); }
  .test-cards { grid-template-columns: repeat(2, 1fr); }
  .partner-cards { grid-template-columns: repeat(2, 1fr); }
  .dest-options { grid-template-columns: repeat(2, 1fr); }
  .exp-grid { grid-template-columns: 1fr; }
  .payment-methods { grid-template-columns: repeat(2, 1fr); }
  .chat-sidebar { width: 300px; }
  body.page-agent-dashboard .sidebar,
  body.page-partner-portal .sidebar { width: 200px; }
  body.page-agent-dashboard .main,
  body.page-partner-portal .main { margin-left: 200px; }
}

@media (max-width: 767px) {
  .desktop-nav { display: none; }
  .mobile-menu-btn { display: flex; }
  .dest-cards,
  .hotel-cards,
  .safari-cards,
  .exp-cards,
  .guide-cards,
  .featured-cards,
  .test-cards,
  .partner-cards,
  .dest-options { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 1rem; }
  .hero-features { flex-direction: column; gap: 8px; align-items: center; }
  .stats-row { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .payment-methods { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; gap: 12px; align-items: flex-start; }
  .pipeline-columns { grid-template-columns: repeat(2, 1fr); }
  .chat-sidebar { display: none; }
  .chat-sidebar.mobile-open { display: flex; position: fixed; top: 0; left: 0; bottom: 0; width: 100%; z-index: 200; }
  body.page-agent-dashboard .sidebar,
  body.page-partner-portal .sidebar { transform: translateX(-100%); }
  body.page-agent-dashboard .sidebar.open,
  body.page-partner-portal .sidebar.open { transform: translateX(0); }
  body.page-agent-dashboard .main,
  body.page-partner-portal .main { margin-left: 0; }

  /* Portal sidebars (client & visitor) as mobile drawers */
  body.page-client-portal .portal-sidebar,
  body.page-visitor-portal .portal-sidebar { transform: translateX(-100%); transition: transform var(--transition); z-index: 1100; }
  body.page-client-portal .portal-sidebar.open,
  body.page-visitor-portal .portal-sidebar.open { transform: translateX(0); }
  body.page-client-portal .portal-main,
  body.page-visitor-portal .portal-main { margin-left: 0; }
  .portal-topbar .mobile-menu-btn { display: flex; }

  /* Agent/Partner portal sidebar toggles */
  .topbar .mobile-sidebar-toggle { display: flex !important; }

  /* Back button in topbar */
  .nav-back-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--text-light);
    cursor: pointer;
    transition: all var(--transition-fast);
  }
  .nav-back-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-subtle); }
  .nav-back-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

  /* Drawer backdrops */
  body.portal-sidebar-open::before,
  body.dashboard-sidebar-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1099;
    opacity: 0;
    animation: fadeIn 0.2s forwards;
  }
  @keyframes fadeIn { to { opacity: 1; } }

  .endpoint-list { grid-template-columns: 1fr; }
  .dest-header { flex-direction: column; gap: 12px; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-social { justify-content: center; }
  .trust-badges { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 1.6rem; }
  .hero p { font-size: 0.88rem; }
  .container { padding: 0 16px; }
  .dest-cards, .hotel-cards, .safari-cards { padding: 16px; }
  .dest-card h3, .hotel-card h3, .safari-card h3 { font-size: 1.05rem; }
  .dest-card p, .hotel-card p, .safari-card p { font-size: 0.85rem; }
  .dest-card .price, .hotel-card .price, .safari-card .price { font-size: 1.05rem; }
  .dest-card .btn-outline, .hotel-card .btn-outline, .safari-card .btn-outline,
  .dest-card .btn-primary, .hotel-card .btn-primary, .safari-card .btn-primary {
    padding: 6px 12px; font-size: 0.8rem;
  }
}

/* --- 27. SUB-GRID MENU PAGES --- */

/* Sub-hero (shorter than main hero) */
.sub-hero { padding: 72px 24px 56px; }
.sub-hero h1 { font-size: 2.4rem; }

/* Category Card Grid */
.cat-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.cat-card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cat-card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Category Card */
.cat-card {
    background: white;
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-light);
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
}
.cat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}
.cat-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--primary-subtle);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 16px;
    transition: all var(--transition);
}
.cat-card:hover .cat-card-icon {
    background: var(--primary);
    color: white;
    transform: scale(1.05);
}
.cat-card-image {
    width: 100%;
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
    background: var(--bg-light);
}
.cat-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--ease);
}
.cat-card:hover .cat-card-image img {
    transform: scale(1.04);
}
.cat-card h3 {
    font-size: 1.05rem;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}
.cat-card p {
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.65;
    margin-bottom: 16px;
    flex: 1;
}

/* Info Block */
.info-block {
    max-width: 800px;
    margin: 0 auto;
}
.info-block h2 {
    font-size: 1.8rem;
    margin-bottom: 12px;
    color: var(--text);
}
.info-block > p {
    font-size: 1rem;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 20px;
}
.info-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 24px;
}
.info-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.5;
}
.info-list li i {
    color: var(--success);
    margin-top: 3px;
    flex-shrink: 0;
}

/* CTA Buttons override for white */
.cta-buttons .btn-white {
    background: white;
    color: var(--primary);
    border-color: white;
}
.cta-buttons .btn-white:hover {
    background: var(--bg-warm);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(255,255,255,0.2);
}

/* --- 28. ENHANCED LOGO STYLING --- */

/* Logo - Seen, Felt, Understood, Remembered */
.logo {
    position: relative;
}
.logo-icon {
    height: 42px;
    width: auto;
    filter: drop-shadow(0 2px 8px rgba(27, 58, 140, 0.15));
    transition: all var(--transition);
}
.logo:hover .logo-icon {
    filter: drop-shadow(0 4px 16px rgba(27, 58, 140, 0.3));
    transform: scale(1.04);
}

/* Logo brand text accent */
.logo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color var(--transition-fast);
}
.logo:hover { color: var(--primary); }

/* Kenya Yetu branded loading animation */
.ky-loader { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 15%, rgba(212,168,67,0.16), transparent 28%), linear-gradient(135deg, rgba(255,255,255,0.98), rgba(246,248,252,0.98)); transition: opacity 0.42s ease, visibility 0.42s ease; }
.ky-loader.is-hiding { opacity: 0; visibility: hidden; pointer-events: none; }
.ky-loader-panel { position: relative; width: min(460px, 100%); min-height: 310px; display: grid; justify-items: center; align-content: center; gap: 14px; overflow: hidden; border: 1px solid rgba(27,58,140,0.12); border-radius: 18px; background: rgba(255,255,255,0.9); box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14); }
.ky-loader-logo-wrap { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 26px; background: white; box-shadow: 0 12px 30px rgba(27,58,140,0.14); animation: kyLogoPulse 1.25s ease-in-out infinite; }
.ky-loader-logo { width: 80px; height: 80px; object-fit: contain; animation: kyLogoTilt 1.8s ease-in-out infinite; }
.ky-loader-title { font-family: 'Playfair Display', serif; color: var(--primary); font-size: 1.45rem; font-weight: 700; }
.ky-loader p { position: relative; z-index: 2; min-height: 24px; margin: 0; color: #334155; font-weight: 700; text-align: center; }
.ky-loader-bar { width: min(260px, 72%); height: 6px; overflow: hidden; border-radius: 999px; background: #E8EDF5; }
.ky-loader-bar span { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary)); animation: kyLoaderBar 1s ease-in-out infinite; }
.ky-loader-track { position: absolute; left: -160px; right: -160px; display: flex; justify-content: space-around; color: rgba(27,58,140,0.24); pointer-events: none; }
.ky-loader-track span { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.74); box-shadow: 0 8px 22px rgba(15,23,42,0.08); }
.ky-loader-track-one { top: 34px; animation: kyRunRight 2.6s linear infinite; }
.ky-loader-track-two { bottom: 36px; color: rgba(230,57,70,0.28); animation: kyRunLeft 3.1s linear infinite; }
@keyframes kyLogoPulse { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.04); } }
@keyframes kyLogoTilt { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
@keyframes kyLoaderBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(250%); } }
@keyframes kyRunRight { 0% { transform: translateX(-80px); } 100% { transform: translateX(80px); } }
@keyframes kyRunLeft { 0% { transform: translateX(80px); } 100% { transform: translateX(-80px); } }
@media (prefers-reduced-motion: reduce) {
    .ky-loader-logo-wrap,
    .ky-loader-logo,
    .ky-loader-bar span,
    .ky-loader-track { animation: none; }
}

/* Footer logo - larger and glowing */
.footer-brand .logo {
    color: white;
    font-size: 1.4rem;
}
.footer-brand .logo-icon {
    height: 58px;
    filter: drop-shadow(0 2px 12px rgba(212, 168, 67, 0.3));
}
.footer-brand .logo:hover .logo-icon {
    filter: drop-shadow(0 4px 20px rgba(212, 168, 67, 0.5));
}

/* Login page logo */
.login-logo-icon {
    height: 64px;
    width: auto;
    filter: drop-shadow(0 4px 20px rgba(27, 58, 140, 0.25));
    margin: 0 auto 16px;
}

/* Sidebar logo glow */
.sidebar-logo-icon {
    height: 40px;
    width: auto;
    filter: drop-shadow(0 2px 8px rgba(27, 58, 140, 0.2));
    transition: filter var(--transition);
}
.sidebar-logo-icon:hover {
    filter: drop-shadow(0 4px 16px rgba(27, 58, 140, 0.4));
}

.calculator-breakdown { margin: 22px 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.builder-seo-intro { max-width:760px; margin:0 auto 24px; text-align:center; }
.builder-seo-intro h1 { margin-bottom:8px; color:var(--primary); font-size:clamp(1.65rem,4vw,2.35rem); }
.builder-seo-intro p { margin:0; color:var(--text-light); line-height:1.65; }
.calculator-card { width:min(620px,100%); margin:24px auto; padding:20px; box-sizing:border-box; }
.calculator-controls { display:grid; grid-template-columns:1fr 170px; gap:14px; align-items:end; }
.calculator-card .form-group { margin-bottom:0; }
.calculator-input-row { display:grid; grid-template-columns:92px minmax(0,1fr); width:100%; }
.calculator-input-row select { min-height:46px; border:1px solid var(--border); border-right:0; border-radius:9px 0 0 9px; background:#eef3fb; color:var(--primary); padding:10px; font-weight:700; }
.rate-display { border:1px solid var(--border); border-radius:8px; padding:10px; color:var(--primary); font-weight:700; white-space:nowrap; }
.calculator-card #calcAmount { display:block !important; visibility:visible !important; opacity:1 !important; width:100% !important; min-width:0; min-height:46px; box-sizing:border-box; font-size:1rem; background:#fff; color:#172033; border:1px solid var(--border); border-radius:0 9px 9px 0; padding:10px 13px; outline:none; }
.calculator-card #calcAmount:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(27,58,140,.12); }
@media (max-width:600px){.calculator-controls{grid-template-columns:1fr}.calculator-card{padding:16px}.calculator-input-row{grid-template-columns:82px minmax(0,1fr)}}
.ky-modal { position:fixed; inset:0; z-index:100000; display:none; align-items:center; justify-content:center; padding:20px; }
.ky-modal.active { display:flex; }
.ky-modal-backdrop { position:absolute; inset:0; background:rgba(7,18,45,.62); }
.ky-modal-card { position:relative; width:min(620px,100%); max-height:90vh; overflow:auto; padding:30px; border-radius:18px; background:#fff; box-shadow:0 24px 80px rgba(0,0,0,.25); }
.ky-modal-close { position:absolute; top:12px; right:14px; border:0; background:transparent; font-size:1.1rem; color:var(--text-muted); cursor:pointer; }
.calculator-breakdown > div { display:flex; justify-content:space-between; gap:16px; padding:14px 16px; border-bottom:1px solid var(--border); }
.calculator-breakdown > div:last-child { border-bottom:0; }
.calculator-total { background:rgba(27,58,140,.07); color:var(--primary); font-size:1.08rem; }
.input-group { display:flex; align-items:center; }
.input-prefix { padding:11px 12px; border:1px solid var(--border); border-right:0; border-radius:8px 0 0 8px; background:#f8fafc; color:var(--text-muted); }
.input-group input { border-radius:0 8px 8px 0; flex:1; }

/* Logo animation on page load */
@keyframes logoReveal {
    0% { opacity: 0; transform: scale(0.8) translateY(4px); }
    60% { opacity: 1; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.header .logo-icon {
    animation: logoReveal 0.6s var(--ease) forwards;
}

/* Responsive: sub-pages */
@media (max-width: 991px) {
    .cat-card-grid { grid-template-columns: repeat(2, 1fr); }
    .info-list { grid-template-columns: 1fr; }
    .sub-hero h1 { font-size: 2rem; }
}
@media (max-width: 767px) {
    .cat-card-grid { grid-template-columns: 1fr; }
    .sub-hero { padding: 56px 16px 40px; }
    .sub-hero h1 { font-size: 1.7rem; }
    .cat-card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .cat-card-grid.cols-2 { grid-template-columns: 1fr; }
    .cat-card-grid.cols-4 { grid-template-columns: 1fr; }
}

/* --- 29. MOBILE RESPONSIVE HARDENING --- */
html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    max-width: 100%;
    overflow-x: clip;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

body.dashboard-sidebar-open {
    overflow: hidden;
}

body.mobile-nav-open {
    overflow: hidden;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

.mobile-sidebar-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--text);
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    cursor: pointer;
    position: relative;
    z-index: 1001;
}

@media (max-width: 767px) {
    .mobile-sidebar-toggle { display: flex !important; }
}

.mobile-sidebar-toggle i,
.mobile-menu-btn i {
    font-size: 1.1rem;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.mobile-sidebar-toggle i.fa-times,
.mobile-menu-btn i.fa-times {
    display: none;
}

body.dashboard-sidebar-open .mobile-sidebar-toggle i.fa-bars,
body.dashboard-sidebar-open .mobile-menu-btn i.fa-bars,
body.portal-sidebar-open .mobile-sidebar-toggle i.fa-bars,
body.portal-sidebar-open .mobile-menu-btn i.fa-bars {
    display: none;
}

body.dashboard-sidebar-open .mobile-sidebar-toggle i.fa-times,
body.dashboard-sidebar-open .mobile-menu-btn i.fa-times,
body.portal-sidebar-open .mobile-sidebar-toggle i.fa-times,
body.portal-sidebar-open .mobile-menu-btn i.fa-times {
    display: inline-block;
}

.dashboard-sidebar-close {
    display: none;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.06);
    color: white;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: auto;
}

.table-card,
.tabs-wrapper,
.calendar-grid,
.data-table,
.checkout-steps,
.progress-bar {
    max-width: 100%;
}

.table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    min-width: 680px;
}

.data-table th,
.data-table td {
    white-space: nowrap;
}

body.page-agent-dashboard .chat-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 14, 31, 0.46);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
    z-index: 1090;
}

body.page-agent-dashboard .chat-sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

body.page-agent-dashboard #chatSidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(420px, 100vw);
    transform: translateX(100%);
    transition: transform var(--transition);
    z-index: 1100;
    box-shadow: -18px 0 40px rgba(8, 14, 31, 0.2);
}

body.page-agent-dashboard #chatSidebar.open {
    transform: translateX(0);
}

/* CRM premium compact chat workspace */
body.page-agent-dashboard #chatSidebar {
    width: min(460px, 100vw);
    overflow: hidden;
    border-left: 1px solid rgba(27,58,140,.14);
    background: linear-gradient(180deg,#f7f9fd 0,#fff 32%);
    color: var(--text);
}
body.page-agent-dashboard #chatSidebar::before { content:"Kenya Yetu CRM"; display:block; padding:11px 18px; color:#fff; background:linear-gradient(110deg,#0d2456,#1b3a8c 65%,#3359ac); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
body.page-agent-dashboard #chatSidebar .chat-tabs { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:10px 12px; background:#fff; border-bottom:1px solid #e5eaf2; }
body.page-agent-dashboard #chatSidebar .chat-tab { position:relative; min-height:40px; border:1px solid #dce3ef; border-radius:10px; background:#f7f9fc; color:#63708a; font-weight:750; cursor:pointer; transition:.2s ease; }
body.page-agent-dashboard #chatSidebar .chat-tab:hover { border-color:#9fb0d3; color:var(--primary); transform:translateY(-1px); }
body.page-agent-dashboard #chatSidebar .chat-tab.active { border-color:var(--primary); color:#fff; background:linear-gradient(135deg,var(--primary),#3159b3); box-shadow:0 7px 18px rgba(27,58,140,.2); }
body.page-agent-dashboard #chatSidebar .tab-badge { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:4px; border-radius:99px; background:#ef4444; color:#fff; font-size:.66rem; }
body.page-agent-dashboard #chatSidebar .chat-tab-content,
body.page-agent-dashboard #chatSidebar .chat-new-conv-form,
body.page-agent-dashboard #chatSidebar .chat-thread { min-height:0; flex:1; flex-direction:column; }
body.page-agent-dashboard #chatSidebar .chat-tab-content { display:flex; }
body.page-agent-dashboard #chatSidebar .chat-sidebar-header,
body.page-agent-dashboard #chatSidebar .chat-thread-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 17px; background:rgba(255,255,255,.96); border-bottom:1px solid #e6eaf1; }
body.page-agent-dashboard #chatSidebar .chat-sidebar-header h3 { margin:0; font-size:1rem; color:#14213d; }
body.page-agent-dashboard #chatSidebar .chat-sidebar-actions button,
body.page-agent-dashboard #chatSidebar .back-btn { display:inline-grid; place-items:center; width:35px; height:35px; padding:0; border:1px solid #dfe5ef; border-radius:10px; background:#fff; color:#526079; cursor:pointer; transition:.18s ease; }
body.page-agent-dashboard #chatSidebar .chat-sidebar-actions button:hover,
body.page-agent-dashboard #chatSidebar .back-btn:hover { border-color:var(--primary); color:var(--primary); background:#eef3ff; transform:translateY(-1px); }
body.page-agent-dashboard #chatSidebar .chat-sidebar-search { position:relative; padding:11px 14px; background:#f8faff; }
body.page-agent-dashboard #chatSidebar .chat-sidebar-search::before { content:"\f002"; position:absolute; left:28px; top:50%; transform:translateY(-50%); font-family:"Font Awesome 6 Free"; font-weight:900; color:#8a96aa; }
body.page-agent-dashboard #chatSidebar .chat-sidebar-search input { min-height:42px; padding:10px 12px 10px 38px; border:1px solid #dce3ef; border-radius:12px; box-shadow:0 3px 10px rgba(15,30,60,.04); outline:none; }
body.page-agent-dashboard #chatSidebar .chat-sidebar-search input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(27,58,140,.1); }
body.page-agent-dashboard #chatSidebar .chat-conv-list { flex:1; min-height:0; overflow-y:auto; padding:8px; scrollbar-width:thin; scrollbar-color:#b7c2d7 transparent; }
body.page-agent-dashboard #chatSidebar .chat-conv-item { display:flex; align-items:center; gap:11px; padding:12px; margin-bottom:6px; border:1px solid transparent; border-radius:13px; background:#fff; cursor:pointer; transition:.18s ease; }
body.page-agent-dashboard #chatSidebar .chat-conv-item:hover { border-color:#d8e1f0; background:#f8faff; box-shadow:0 7px 18px rgba(17,38,78,.07); transform:translateY(-1px); }
body.page-agent-dashboard #chatSidebar .chat-conv-item.unread { border-color:rgba(27,58,140,.2); background:#f1f5ff; }
body.page-agent-dashboard #chatSidebar .chat-conv-item.active,
body.page-agent-dashboard #chatSidebar .wa-conv-item.active { border-color:var(--primary); background:#edf3ff; }
body.page-agent-dashboard #chatSidebar .chat-conv-avatar,
body.page-agent-dashboard #chatSidebar .wa-avatar { position:relative; display:grid; place-items:center; flex:0 0 43px; width:43px; height:43px; border-radius:13px; color:#fff; background:var(--primary); font-size:.78rem; font-weight:800; box-shadow:0 6px 14px rgba(27,58,140,.18); }
body.page-agent-dashboard #chatSidebar .chat-conv-info { flex:1; min-width:0; }
body.page-agent-dashboard #chatSidebar .chat-conv-info .conv-name { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.83rem; font-weight:750; }
body.page-agent-dashboard #chatSidebar .chat-conv-info .conv-name > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.page-agent-dashboard #chatSidebar .chat-conv-info .conv-preview { display:flex; align-items:center; gap:6px; min-width:0; margin-top:4px; color:#7b879b; font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.page-agent-dashboard #chatSidebar .chat-conv-type,
body.page-agent-dashboard #chatSidebar .wa-direction-badge { flex:0 0 auto; padding:2px 6px; border-radius:99px; background:#e7edf8; color:#50607b; font-size:.58rem; font-weight:800; text-transform:uppercase; }
body.page-agent-dashboard #chatSidebar .conv-time { color:#94a0b4; font-size:.65rem; font-weight:600; }
body.page-agent-dashboard #chatSidebar .conv-unread { margin-left:auto; }
body.page-agent-dashboard #chatSidebar .wa-conv-item { display:flex; align-items:center; gap:11px; padding:12px; margin-bottom:6px; border:1px solid transparent; border-radius:13px; background:#fff; cursor:pointer; transition:.18s ease; }
body.page-agent-dashboard #chatSidebar .wa-conv-item:hover { border-color:#cfe8d8; background:#f3fff7; box-shadow:0 7px 18px rgba(20,105,55,.08); transform:translateY(-1px); }
body.page-agent-dashboard #chatSidebar .wa-avatar { background:linear-gradient(135deg,#179c4b,#25d366); }
body.page-agent-dashboard #chatSidebar .wa-status-dot { position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border:2px solid #fff; border-radius:50%; background:#a8b1c0; }
body.page-agent-dashboard #chatSidebar .wa-status-dot.active { background:#2ecc71; }
body.page-agent-dashboard #chatSidebar .chat-empty { display:grid; place-items:center; align-content:center; gap:7px; min-height:230px; padding:30px; text-align:center; color:#8490a5; }
body.page-agent-dashboard #chatSidebar .chat-empty i { font-size:2rem; color:#a7b5cc; }
body.page-agent-dashboard #chatSidebar .chat-new-conv-form { display:none; overflow-y:auto; padding-bottom:18px; background:#fff; }
body.page-agent-dashboard #chatSidebar .chat-new-conv-form.active { display:flex; }
body.page-agent-dashboard #chatSidebar .chat-new-conv-form > div:not(.chat-sidebar-header):not(.chat-new-conv-actions) { padding:7px 18px; }
body.page-agent-dashboard #chatSidebar .chat-new-conv-form label { display:block; margin:0 0 6px; color:#4e5c74; font-size:.78rem; font-weight:750; }
body.page-agent-dashboard #chatSidebar .chat-new-conv-form input,
body.page-agent-dashboard #chatSidebar .chat-new-conv-form select,
body.page-agent-dashboard #chatSidebar .chat-new-conv-form textarea,
body.page-agent-dashboard #chatSidebar .wa-phone-input input { width:100%; box-sizing:border-box; border:1px solid #dce3ef; border-radius:10px; background:#fdfefe; padding:10px 12px; color:var(--text); outline:none; }
body.page-agent-dashboard #chatSidebar .chat-new-conv-form input:focus,
body.page-agent-dashboard #chatSidebar .chat-new-conv-form select:focus,
body.page-agent-dashboard #chatSidebar .chat-new-conv-form textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(27,58,140,.09); }
body.page-agent-dashboard #chatSidebar .chat-new-conv-actions { display:flex; justify-content:flex-end; gap:9px; padding:14px 18px 0; }
body.page-agent-dashboard #chatSidebar .chat-thread { display:none; background:#f5f7fb; }
body.page-agent-dashboard #chatSidebar .chat-thread.active { display:flex; }
body.page-agent-dashboard #chatSidebar .thread-info { min-width:0; flex:1; }
body.page-agent-dashboard #chatSidebar .thread-info h4 { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.93rem; }
body.page-agent-dashboard #chatSidebar .thread-info span { color:#7b879b; font-size:.72rem; }
body.page-agent-dashboard #chatSidebar .chat-messages { flex:1; min-height:0; overflow-y:auto; padding:16px; background:radial-gradient(circle at top left,rgba(27,58,140,.06),transparent 34%),#f4f6fa; }
body.page-agent-dashboard #chatSidebar .chat-input-area,
body.page-agent-dashboard #chatSidebar .wa-send-form { display:flex; align-items:flex-end; gap:9px; padding:12px; border-top:1px solid #e0e6ef; background:#fff; }
body.page-agent-dashboard #chatSidebar .chat-input-area textarea,
body.page-agent-dashboard #chatSidebar .wa-send-form textarea { flex:1; min-height:42px; max-height:120px; resize:none; box-sizing:border-box; padding:10px 13px; border:1px solid #dce3ef; border-radius:13px; outline:none; font:inherit; }
body.page-agent-dashboard #chatSidebar .chat-input-area textarea:focus,
body.page-agent-dashboard #chatSidebar .wa-send-form textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(27,58,140,.09); }
body.page-agent-dashboard #chatSidebar .chat-send-btn,
body.page-agent-dashboard #chatSidebar .wa-send-btn { flex:0 0 43px; width:43px; height:43px; border:0; border-radius:12px; background:linear-gradient(135deg,var(--primary),#3159b3); color:#fff; cursor:pointer; box-shadow:0 7px 16px rgba(27,58,140,.22); }
body.page-agent-dashboard #chatSidebar .wa-send-btn { background:linear-gradient(135deg,#1fa855,#25d366); }
body.page-agent-dashboard #chatSidebar .wa-phone-input { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:18px; }
body.page-agent-dashboard #chatSidebar .wa-phone-input button { border:0; border-radius:10px; padding:0 17px; background:#25d366; color:#fff; font-weight:750; cursor:pointer; }
body.page-agent-dashboard.chat-panel-open { overflow:hidden; }
@media (max-width:520px) {
 body.page-agent-dashboard #chatSidebar { width:100vw; }
 body.page-agent-dashboard #chatSidebar::before { padding:9px 14px; }
 body.page-agent-dashboard #chatSidebar .chat-tabs { padding:8px; }
 body.page-agent-dashboard #chatSidebar .chat-sidebar-header,
 body.page-agent-dashboard #chatSidebar .chat-thread-header { padding:12px; }
 body.page-agent-dashboard #chatSidebar .chat-conv-list { padding:6px; }
}

body.page-agent-dashboard .chat-toggle-btn {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1000;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
}

.section-inner,
.container,
.checkout-container,
.builder-container,
.search-widget,
.hotel-grid,
.restaurant-grid,
.safari-grid,
.styles-grid,
.stats-grid,
.seasons-grid,
.weather-zones,
.wildlife-grid,
.wildlife-tips,
.currency-layout,
.visa-layout,
.packing-lists,
.transport-grid,
.events-grid,
.itineraries-grid,
.budget-layout,
.reviews-grid,
.stories-grid,
.gallery-grid,
.destination-grid,
.destinations-grid,
.features-grid,
.agents-grid,
.values-grid,
.jobs-grid,
.story-grid,
.team-grid {
    width: 100%;
}

@media (max-width: 1199px) {
    .hotel-grid,
    .restaurant-grid,
    .destination-grid,
    .destinations-grid,
    .features-grid,
    .styles-grid,
    .stats-grid,
    .seasons-grid,
    .events-grid,
    .stories-grid,
    .team-grid,
    .values-grid,
    .why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wildlife-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .weather-zones,
    .packing-lists,
    .transport-grid,
    .itineraries-grid,
    .reviews-grid,
    .wildlife-tips,
    .agents-grid,
    .jobs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .topbar-inner {
        height: auto;
        min-height: 42px;
        padding: 8px 16px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .topbar-left,
    .topbar-right {
        flex: 1 1 100%;
        justify-content: center;
        margin-left: 0;
        flex-wrap: wrap;
    }

    .topbar-flag {
        margin: 0 auto;
        order: -1;
    }

    .header-inner {
        gap: 12px;
    }

    .header-actions .btn {
        padding: 9px 12px;
    }

    .story-grid,
    .currency-layout,
    .visa-layout,
    .budget-layout,
    .contact-grid,
    .smart-assistant-card,
    .agent-intro-card,
    .reviews-section .review-panel-card {
        grid-template-columns: 1fr;
    }

    .story-img-float {
        display: none;
    }

    .search-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-form .btn,
    .search-form button {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
    }

    .footer-bottom {
        flex-wrap: wrap;
        gap: 12px;
    }
}

@media (max-width: 767px) {
    body.page-agent-dashboard .topbar .mobile-sidebar-toggle,
    body.page-partner-portal .topbar .mobile-sidebar-toggle {
        display: flex !important;
    }
    .section {
        padding: 44px 0;
    }

    .section-inner {
        padding: 44px 16px;
    }

    .section-header {
        margin-bottom: 24px;
    }

    .section-header h2,
    .section-title,
    .info-block h2 {
        font-size: 1.45rem;
    }

    .container,
    .hotel-grid,
    .restaurant-grid,
    .safari-grid,
    .styles-grid,
    .stats-grid,
    .seasons-grid,
    .weather-zones,
    .wildlife-grid,
    .wildlife-tips,
    .currency-layout,
    .visa-layout,
    .packing-lists,
    .transport-grid,
    .events-grid,
    .itineraries-grid,
    .budget-layout,
    .reviews-grid,
    .stories-grid,
    .gallery-grid,
    .destination-grid,
    .destinations-grid,
    .features-grid,
    .agents-grid,
    .values-grid,
    .jobs-grid,
    .story-grid,
    .team-grid,
    .why-grid,
    .quick-links-grid,
    .category-grid,
    .resource-grid,
    .article-grid,
    .package-grid,
    .event-grid {
        grid-template-columns: 1fr;
        padding-left: 16px;
        padding-right: 16px;
    }

    .experiences-grid,
    .testimonials-section .testimonials-list,
    .testimonials-track {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-auto-rows: 160px;
    }

    .gallery-item.tall,
    .gallery-item.wide {
        grid-row: span 1;
        grid-column: span 1;
    }

    .hero,
    .hero-about,
    .hero-destinations,
    .hero-experiences {
        min-height: auto;
        padding: 72px 16px 48px;
    }

    .hero h1,
    .hero-about h1,
    .hero-destinations h1,
    .hero-experiences h1 {
        font-size: 2rem;
        line-height: 1.12;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-float-card,
    .maasai-pattern-left,
    .maasai-pattern-right {
        display: none;
    }

    .cta-buttons,
    .hero-actions,
    .safari-card-actions,
    .booking-success-actions,
    .step-nav,
    .agent-intro-actions,
    .form-actions,
    .review-form .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-buttons .btn,
    .hero-actions .btn,
    .safari-card-actions .btn,
    .booking-success-actions .btn,
    .step-nav .btn,
    .agent-intro-actions .btn,
    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .form-grid,
    .form-row,
    .review-form .form-row,
    .content-grid,
    body.page-index2 .pages-grid,
    body.page-index2 .endpoint-list {
        grid-template-columns: 1fr;
    }

    .newsletter-form,
    .promo-input,
    .paybill-row,
    .summary-line,
    .summary-row,
    .detail-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .newsletter-form input,
    .newsletter-form button,
    .promo-input input,
    .promo-input button {
        width: 100%;
    }

    .tabs {
        margin-bottom: 20px;
        padding-bottom: 2px;
    }

    .tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .checkout-container,
    .builder-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .checkout-steps,
    .progress-bar {
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }

    .checkout-step,
    .step {
        min-width: 92px;
    }

    .step-label {
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }

    .order-summary {
        position: static;
        padding: 20px;
    }

    .summary-header {
        align-items: flex-start;
    }

    .card,
    .summary-card,
    .review-modal,
    .booking-success-card,
    .login-card,
    .cat-card,
    .agent-card,
    .quick-link-card,
    .smart-assistant-card,
    .agent-intro-card {
        padding: 20px;
    }

    .retention-popup {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
    }

    body.page-agent-dashboard .sidebar,
    body.page-partner-portal .sidebar {
        width: min(86vw, 320px);
        z-index: 1200;
        box-shadow: 18px 0 40px rgba(8, 14, 31, 0.28);
    }

    body.page-agent-dashboard.dashboard-sidebar-open::before,
    body.page-partner-portal.dashboard-sidebar-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(8, 14, 31, 0.48);
        z-index: 1190;
    }

    body.page-agent-dashboard .main,
    body.page-partner-portal .main {
        min-width: 0;
        width: 100%;
    }

    body.page-agent-dashboard .topbar,
    body.page-partner-portal .topbar {
        position: sticky;
        top: 0;
        z-index: 900;
        padding: 10px 12px;
        gap: 10px;
        flex-wrap: wrap;
    }

    body.page-agent-dashboard .sidebar-header,
    body.page-partner-portal .sidebar-header {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    body.page-agent-dashboard .dashboard-sidebar-close,
    body.page-partner-portal .dashboard-sidebar-close {
        display: inline-flex;
    }

    body.page-agent-dashboard .topbar-search {
        order: 2;
        flex: 1 1 100%;
        max-width: none;
        margin-right: 0;
    }

    body.page-partner-portal .topbar-title {
        min-width: 0;
        flex: 1;
    }

    body.page-partner-portal .topbar-title h1,
    body.page-partner-portal .topbar-title p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.page-agent-dashboard .topbar-actions,
    body.page-partner-portal .topbar-actions {
        margin-left: auto;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    body.page-partner-portal .topbar-actions .btn {
        padding: 9px 11px;
        font-size: 0.8rem;
    }

    .content,
    .portal-content {
        padding: 16px;
    }

    .stats-row,
    .dashboard-grid,
    .pipeline-columns {
        grid-template-columns: 1fr;
    }

    .pipeline-columns {
        overflow-x: auto;
        display: flex;
        gap: 10px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .pipeline-col {
        min-width: 180px;
    }

    .table-header,
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .table-filters {
        flex-wrap: wrap;
    }

    .table-filters input,
    .table-filters select {
        flex: 1 1 150px;
    }

    .chat-page {
        height: calc(100vh - 56px);
        margin-top: 56px;
    }

    .chat-main,
    .chat-header,
    .chat-input {
        min-width: 0;
    }

    .chat-header {
        padding: 12px 14px;
        gap: 10px;
    }

    .chat-header-actions {
        flex-shrink: 0;
    }

    .chat-messages {
        padding: 16px 12px;
    }

    .msg {
        max-width: 88%;
    }

    .chat-input {
        padding: 12px;
    }

    .chat-toggle-btn {
        right: 16px;
        bottom: 16px;
    }

    .chat-sidebar.open {
        width: min(100vw, 420px);
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 1.1rem;
        gap: 8px;
    }

    .logo-icon {
        height: 40px;
    }

    .header-inner {
        height: 58px;
        padding: 0 12px;
    }

    .header-actions .btn span,
    .topbar-link span,
    .topbar-item span {
        display: none;
    }

    .nav-desktop.mobile-open {
        padding: 14px 16px;
    }

    .hero h1,
    .hero-about h1,
    .hero-destinations h1,
    .hero-experiences h1 {
        font-size: 1.72rem;
    }

    .hero p,
    .hero-about p,
    .hero-destinations p,
    .hero-experiences p {
        font-size: 0.92rem;
    }

    .search-form,
    .payment-methods,
    .dest-options,
    .exp-grid {
        grid-template-columns: 1fr;
    }

    .payment-method,
    .exp-card,
    .installment-toggle,
    .activity-item,
    .review-card-header,
    .agent-card-top {
        align-items: flex-start;
    }

    .budget-display {
        font-size: 1.9rem;
    }

    .card-number-display {
        font-size: 0.9rem;
        letter-spacing: 1px;
    }

    .summary-header {
        flex-direction: column;
    }

    .summary-header img {
        width: 100%;
        height: 150px;
    }

    .login-container {
        padding: 16px;
    }

    .login-card {
        padding: 24px 18px;
    }

    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .content,
    .portal-content {
        padding: 12px;
    }

    .stat-card,
    .pipeline-card,
    .activity-card,
    .tasks-card,
    .commission-card {
        padding: 16px;
    }

    .stat-value {
        font-size: 1.35rem;
    }

    body.page-partner-portal .topbar-actions {
        width: 100%;
        justify-content: stretch;
    }

    body.page-partner-portal .topbar-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .toast {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
    }

    .modal-content,
    .agent-modal,
    .review-modal,
    .booking-success-card {
        width: calc(100vw - 24px);
        max-height: 90vh;
        border-radius: var(--radius);
    }
}

@media (max-width: 360px) {
    .btn,
    .btn-lg,
    .btn-sm {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 0.78rem;
    }

    .hero h1,
    .hero-about h1,
    .hero-destinations h1,
    .hero-experiences h1 {
        font-size: 1.5rem;
    }

    .section-header h2,
    .section-title,
    .step-header h2 {
        font-size: 1.25rem;
    }

    .checkout-step,
    .step {
        min-width: 78px;
    }

    .step-circle {
        width: 30px;
        height: 30px;
    }
}

/* --- 30. MOBILE HEADER NAVIGATION UPGRADE --- */
@media (max-width: 768px) {
    .topbar {
        display: block;
        border-bottom: 1px solid var(--border-light);
    }

    .topbar-inner {
        min-height: 42px;
        height: auto;
        padding: 8px 12px;
        justify-content: center;
    }

    .topbar-left,
    .topbar-flag,
    .topbar-divider {
        display: none;
    }

    .topbar-right {
        width: 100%;
        margin-left: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .topbar-link {
        justify-content: center;
        min-height: 34px;
        padding: 7px 8px;
        border: 1px solid var(--border-light);
        background: var(--bg);
        font-size: 0.78rem;
    }

    .topbar-link span {
        display: inline !important;
    }

    .header {
        position: sticky;
        top: 0;
    }

    .header-inner {
        height: 60px;
        padding: 0 14px;
        gap: 10px;
    }

    .header-actions {
        gap: 8px;
        margin-left: auto;
    }

    .currency-selector {
        display: none;
    }

    .header-actions .btn {
        display: none;
    }

    .hamburger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        position: relative;
        z-index: 1400;
        border: 1px solid var(--border-light);
        border-radius: var(--radius-sm);
        background: white;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    }

    .hamburger span {
        left: 10px;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--text);
    }

    .nav-desktop,
    .nav-desktop.mobile-open {
        position: fixed !important;
        inset: 0 0 0 auto !important;
        width: min(92vw, 390px);
        height: 100dvh;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 78px 16px 24px !important;
        background: #ffffff;
        border-left: 1px solid var(--border-light);
        box-shadow: -24px 0 60px rgba(8, 14, 31, 0.18);
        overflow-y: auto;
        overscroll-behavior: contain;
        overflow-anchor: none;
        transform: translateX(100%);
        transition: transform 0.28s var(--ease);
        z-index: 1300;
    }

    .nav-desktop.mobile-open {
        transform: translateX(0);
    }

    .mobile-menu-heading {
        display: grid;
        gap: 2px;
        padding: 0 4px 4px;
    }

    .mobile-menu-heading span {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--text);
    }

    .mobile-menu-heading small {
        color: var(--text-muted);
        font-size: 0.78rem;
    }

    .mobile-portal-links {
        display: grid;
        gap: 8px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-light);
    }

    .mobile-portal-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border: 1px solid var(--border-light);
        border-radius: var(--radius);
        background: var(--bg-warm);
        color: var(--text);
    }

    .mobile-portal-link i {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        background: white;
        color: var(--primary);
        box-shadow: var(--shadow-card);
    }

    .mobile-portal-link strong,
    .mobile-portal-link small {
        display: block;
    }

    .mobile-portal-link strong {
        font-size: 0.9rem;
        line-height: 1.2;
    }

    .mobile-portal-link small {
        margin-top: 2px;
        color: var(--text-muted);
        font-size: 0.72rem;
        line-height: 1.3;
    }

    .mobile-portal-link.client i {
        color: #047857;
    }

    .mobile-portal-link.partner i,
    .mobile-portal-link.staff i {
        color: var(--accent);
    }

    .nav-desktop > .nav-item {
        width: 100%;
        padding: 14px 0 8px;
        border-radius: 0;
        color: var(--text);
        font-size: 0.92rem;
        font-weight: 800;
        border-bottom: 1px solid var(--border-light);
        background: transparent;
    }

    .nav-desktop > .nav-item > i {
        color: var(--text-muted);
        font-size: 0.72rem;
        margin-left: 4px;
    }

    .nav-desktop > .nav-item > a {
        display: flex;
        min-height: 40px;
        align-items: center;
        padding: 0 4px;
        color: var(--text) !important;
    }

    .nav-desktop .mega-menu,
    .nav-desktop.mobile-open .mega-menu {
        display: block !important;
        position: static !important;
        min-width: 0 !important;
        width: 100% !important;
        transform: none !important;
        padding: 10px 0 0 !important;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .nav-desktop .mega-menu-grid,
    .nav-desktop .mega-menu[style] .mega-menu-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .mega-menu-col {
        display: grid;
        gap: 4px;
    }

    .mega-menu-col .mega-menu-heading {
        margin: 8px 4px 4px;
        font-size: 0.68rem;
        color: var(--primary);
    }

    .mega-menu-link {
        min-height: 42px;
        padding: 10px 12px;
        border-radius: var(--radius-sm);
        background: var(--bg-warm);
        border: 1px solid var(--border-light);
        color: var(--text);
        font-size: 0.86rem;
        font-weight: 600;
    }

    .mega-menu-link i {
        width: 22px;
        font-size: 0.9rem;
    }
}

@media (max-width: 420px) {
    .nav-desktop,
    .nav-desktop.mobile-open {
        width: 100vw;
    }

    .topbar-link {
        font-size: 0.74rem;
        padding-left: 4px;
        padding-right: 4px;
    }

    .mobile-portal-link {
        padding: 10px;
    }
}

/* --- 31. PREMIUM MOBILE NAV + GLOBAL RESPONSIVE SAFETY --- */
@media (max-width: 768px) {
    #site-header {
        position: sticky;
        top: 0;
        z-index: 5000;
    }

    .topbar {
        display: none !important;
    }

    .header {
        position: relative;
        top: auto;
        z-index: 5001;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 8px 28px rgba(8, 22, 48, 0.1);
    }

    .hamburger {
        display: inline-flex !important;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        z-index: 5202;
        border-color: rgba(14, 31, 92, 0.16);
        background: linear-gradient(145deg, #fff, #f6f8fc);
    }

    .hamburger.active {
        opacity: 0;
        pointer-events: none;
    }

    .nav-desktop,
    .nav-desktop.mobile-open {
        inset: 0 0 0 auto !important;
        height: 100dvh;
        max-height: 100dvh;
        padding: 0 16px max(22px, env(safe-area-inset-bottom)) !important;
        gap: 5px;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        z-index: 5201;
    }

    .mobile-menu-heading {
        position: sticky;
        top: 0;
        z-index: 3;
        grid-template-columns: minmax(0, 1fr) 44px;
        align-items: center;
        min-height: 74px;
        margin: 0 -16px;
        padding: max(12px, env(safe-area-inset-top)) 16px 12px;
        border-bottom: 1px solid var(--border-light);
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .mobile-menu-heading > div {
        min-width: 0;
    }

    .mobile-menu-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border: 1px solid var(--border-light);
        border-radius: 50%;
        background: #f7f9fc;
        color: var(--text);
        font-size: 1rem;
        cursor: pointer;
    }

    .mobile-portal-links {
        grid-template-columns: 1fr 1fr;
        margin-top: 12px;
    }

    .mobile-portal-link.staff {
        grid-column: 1 / -1;
    }

    .nav-desktop > .nav-item {
        position: relative;
        min-height: 48px;
        padding: 14px 38px 12px 10px;
        border: 1px solid transparent;
        border-bottom-color: var(--border-light);
        cursor: pointer;
    }

    .nav-desktop > .nav-item:has(.mega-menu) > i {
        position: absolute;
        top: 17px;
        right: 12px;
        transition: transform 0.2s ease;
    }

    .nav-desktop > .nav-item.mobile-section-open {
        border-color: rgba(14, 31, 92, 0.12);
        border-radius: 12px;
        background: #f8faff;
    }

    .nav-desktop > .nav-item.mobile-section-open > i {
        transform: rotate(180deg);
    }

    .nav-desktop .mega-menu,
    .nav-desktop.mobile-open .mega-menu {
        display: none !important;
    }

    .nav-desktop .nav-item.mobile-section-open > .mega-menu,
    .nav-desktop.mobile-open .nav-item.mobile-section-open > .mega-menu {
        display: block !important;
        animation: mobileMenuReveal 0.2s ease both;
    }

    .mega-menu-link {
        min-width: 0;
        white-space: normal;
    }

    img,
    video,
    iframe,
    canvas,
    svg {
        max-width: 100%;
    }

    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .container,
    .header-inner,
    main,
    section,
    article,
    [class*="grid"],
    [class*="row"] {
        min-width: 0;
    }
}

@keyframes mobileMenuReveal {
    from { opacity: 0; transform: translateY(0); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 420px) {
    .mobile-portal-links {
        grid-template-columns: 1fr;
    }

    .mobile-portal-link.staff {
        grid-column: auto;
    }
}

/* Mobile accordion panels must participate in layout (never hover overlays). */
@media (max-width: 768px) {
    .nav-desktop > * {
        flex: 0 0 auto;
    }

    .nav-desktop > .nav-item.mobile-section-open {
        height: auto !important;
        min-height: 0;
        padding: 14px 10px 10px !important;
        border: 1px solid rgba(14, 31, 92, 0.14) !important;
        overflow: visible !important;
        color: var(--primary);
    }

    .nav-desktop > .nav-item.mobile-section-open::after {
        display: none !important;
        content: none !important;
    }

    .nav-desktop .nav-item.mobile-section-open > .mega-menu,
    .nav-desktop.mobile-open .nav-item.mobile-section-open > .mega-menu {
        position: static !important;
        inset: auto !important;
        float: none !important;
        clear: both;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 12px 0 0 !important;
        padding: 12px !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: 12px !important;
        background: linear-gradient(145deg, #0d1f4a 0%, #1b3a8c 100%) !important;
        box-shadow: 0 8px 24px rgba(8, 22, 48, 0.18) !important;
        overflow-anchor: none;
    }

    .nav-desktop .nav-item.mobile-section-open .mega-menu-grid,
    .nav-desktop .nav-item.mobile-section-open .mega-menu[style] .mega-menu-grid {
        position: static !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        height: auto !important;
        gap: 12px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .nav-desktop .nav-item.mobile-section-open .mega-menu-col {
        min-width: 0;
        padding: 0;
        background: transparent;
    }

    .nav-desktop .nav-item.mobile-section-open .mega-menu-link {
        position: relative;
        display: flex !important;
        width: 100%;
        min-height: 46px;
        text-decoration: none !important;
        background: rgba(255,255,255,0.08) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        color: rgba(255,255,255,0.92) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* CRM Chat Workspace */
.crm-chat-shell { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); height: calc(100vh - 198px); min-height: 620px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; }
.crm-chat-board { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #e2e8f0; background: #f8fafc; }
.crm-chat-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px; background: white; border-bottom: 1px solid #e2e8f0; }
.crm-chat-search { position: relative; }
.crm-chat-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 0.84rem; }
.crm-chat-search input { width: 100%; height: 40px; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0 12px 0 36px; font-size: 0.86rem; background: #f8fafc; }
.crm-chat-tabs { display: inline-flex; gap: 4px; padding: 4px; background: #f1f5f9; border-radius: 10px; }
.crm-chat-tabs button { height: 32px; border: 0; border-radius: 8px; background: transparent; color: #64748b; padding: 0 10px; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.crm-chat-tabs button.active { background: white; color: #1B3A8C; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08); }
.crm-chat-sections { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.crm-chat-section { background: white; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.crm-chat-section-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid #f1f5f9; }
.crm-chat-section-header h3 { margin: 0; font-size: 0.82rem; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
.crm-chat-section-count { min-width: 24px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #eef2ff; color: #1B3A8C; font-size: 0.72rem; font-weight: 800; }
.crm-chat-card-list { display: grid; gap: 8px; padding: 10px; }
.crm-chat-card { width: 100%; border: 1px solid #e2e8f0; border-radius: 10px; background: white; padding: 12px; text-align: left; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.crm-chat-card:hover, .crm-chat-card.active { border-color: #1B3A8C; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); transform: translateY(-1px); }
.crm-chat-card-top { display: flex; gap: 10px; align-items: flex-start; }
.crm-chat-avatar { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 0.78rem; flex-shrink: 0; }
.crm-chat-card-main { min-width: 0; flex: 1; }
.crm-chat-card-title { display: flex; justify-content: space-between; gap: 10px; font-weight: 800; color: #0f172a; font-size: 0.86rem; }
.crm-chat-card-title span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.crm-chat-time { color: #94a3b8; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; }
.crm-chat-preview { margin-top: 5px; color: #64748b; font-size: 0.78rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crm-chat-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.crm-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; border-radius: 999px; padding: 0 8px; font-size: 0.68rem; font-weight: 800; background: #f1f5f9; color: #475569; }
.crm-chip.whatsapp { background: #dcfce7; color: #15803d; }
.crm-chip.internal { background: #dbeafe; color: #1d4ed8; }
.crm-chip.customer { background: #eef2ff; color: #4338ca; }
.crm-chip.support { background: #fef3c7; color: #b45309; }
.crm-chip.new { background: #fee2e2; color: #b91c1c; }
.crm-chip.pending { background: #fff7ed; color: #c2410c; }
.crm-chip.closed { background: #ecfdf5; color: #047857; }
.crm-unread-dot { min-width: 20px; height: 20px; border-radius: 999px; background: #ef4444; color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 800; }
.crm-chat-thread { display: flex; flex-direction: column; min-width: 0; background: white; }
.crm-thread-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #e2e8f0; }
.crm-thread-heading { min-width: 0; flex: 1; }
.crm-thread-heading h3 { margin: 0; font-size: 1rem; font-family: 'Inter', sans-serif; }
.crm-thread-heading p { margin: 3px 0 0; color: #64748b; font-size: 0.78rem; }
.crm-thread-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.crm-thread-actions select { height: 34px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0 8px; font-size: 0.78rem; background: white; }
.crm-thread-action-btn { width: 34px; height: 34px; border: 1px solid #e2e8f0; border-radius: 8px; background: white; color: #475569; cursor: pointer; }
.crm-thread-action-btn:hover { border-color: #1B3A8C; color: #1B3A8C; }
.crm-chat-messages { flex: 1; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: #f8fafc; }
.crm-chat-input { padding: 12px 18px; border-top: 1px solid #e2e8f0; background: white; }
.crm-chat-input-row { display: flex; align-items: flex-end; gap: 10px; }
.crm-chat-input-row textarea { flex: 1; min-height: 42px; max-height: 120px; border: 1px solid #e2e8f0; border-radius: 10px; padding: 11px 12px; resize: none; font-family: inherit; font-size: 0.86rem; }
.crm-chat-input-row button { width: 42px; height: 42px; border: 0; border-radius: 10px; background: #1B3A8C; color: white; cursor: pointer; }
.crm-chat-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #64748b; gap: 8px; min-height: 240px; }
.crm-chat-empty-state i { font-size: 2rem; color: #94a3b8; }
@media (max-width: 1100px) {
    .crm-chat-shell { grid-template-columns: 1fr; height: auto; }
    .crm-chat-board { border-right: 0; border-bottom: 1px solid #e2e8f0; max-height: 560px; display: flex; flex-direction: column; }
    .crm-chat-sections { flex: 1; min-height: 0; overflow-y: auto; }
    .crm-chat-thread { min-height: 560px; }
}

@media (max-width: 767px) {
    .crm-chat-shell { height: auto; min-height: 0; border-radius: 0; border-left: 0; border-right: 0; }
    .crm-chat-board { max-height: 65vh; min-height: 320px; display: flex; flex-direction: column; overflow: hidden; }
    .crm-chat-sections { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; gap: 10px; -webkit-overflow-scrolling: touch; }
    .crm-chat-thread { min-height: 0; display: flex; flex-direction: column; }
    .crm-chat-thread:has(.crm-chat-empty-state) { display: none; }
    .crm-chat-shell:has(.crm-chat-thread .crm-chat-empty-state) .crm-chat-board { max-height: none; flex: 1; }
    .crm-chat-messages { flex: 1; min-height: 0; }
    .crm-chat-toolbar { padding: 10px; gap: 8px; flex-shrink: 0; }
    .crm-chat-search input { height: 36px; font-size: 0.82rem; }
    .crm-chat-tabs { gap: 2px; padding: 2px; }
    .crm-chat-tabs button { height: 28px; padding: 0 8px; font-size: 0.75rem; }
    .crm-chat-section { min-height: 0; }
    .crm-chat-section-header { padding: 10px 12px; }
    .crm-chat-card { padding: 10px; }
    .crm-chat-card-title { font-size: 0.82rem; }
    .crm-chat-card-title span:first-child { max-width: 180px; }
    .crm-chat-preview { -webkit-line-clamp: 1; }
    .crm-chat-meta { gap: 4px; margin-top: 6px; }
    .crm-chip { font-size: 0.62rem; padding: 0 6px; height: 20px; }
    .crm-thread-header { padding: 10px 14px; }
    .crm-chat-messages { padding: 14px; gap: 10px; }
    .crm-chat-input { padding: 10px 14px; }
}

/* ══════════════════════════════════════════════════════════
   PREMIUM CRM CHAT WORKSPACE RESTYLE
   ══════════════════════════════════════════════════════════ */

/* ── Chat Shell Container ── */
.crm-chat-shell {
    border-radius: 18px;
    border: 1px solid rgba(27, 58, 140, 0.10);
    box-shadow:
        0 4px 6px rgba(15, 23, 42, 0.04),
        0 12px 28px rgba(15, 23, 42, 0.07),
        0 28px 60px rgba(15, 23, 42, 0.05);
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 50%, #f8fafc 100%);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}
.crm-chat-shell:hover {
    box-shadow:
        0 4px 6px rgba(15, 23, 42, 0.05),
        0 16px 36px rgba(15, 23, 42, 0.09),
        0 32px 72px rgba(15, 23, 42, 0.06);
}

/* ── Left Panel: Conversation Board ── */
.crm-chat-board {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-right: 1px solid rgba(27, 58, 140, 0.08);
}

/* ── Toolbar ── */
.crm-chat-toolbar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(27, 58, 140, 0.06);
    padding: 14px 16px;
    gap: 12px;
}

/* ── Search Input ── */
.crm-chat-search {
    position: relative;
}
.crm-chat-search i {
    color: #94a3b8;
    font-size: 0.82rem;
    transition: color 0.2s ease;
}
.crm-chat-search input {
    width: 100%;
    height: 42px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 0 14px 0 38px;
    font-size: 0.86rem;
    background: #f8fafc;
    color: #1e293b;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}
.crm-chat-search input::placeholder {
    color: #94a3b8;
}
.crm-chat-search input:focus {
    border-color: #1B3A8C;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(27, 58, 140, 0.08), 0 4px 12px rgba(15, 23, 42, 0.06);
    outline: none;
}
.crm-chat-search input:focus + i,
.crm-chat-search:focus-within i {
    color: #1B3A8C;
}

/* ── Tab Segmented Control ── */
.crm-chat-tabs {
    gap: 4px;
    padding: 5px;
    background: #eef2f7;
    border-radius: 12px;
    border: 1px solid rgba(27, 58, 140, 0.06);
}
.crm-chat-tabs button {
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #64748b;
    padding: 0 14px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.crm-chat-tabs button:hover:not(.active) {
    color: #334155;
    background: rgba(255, 255, 255, 0.5);
}
.crm-chat-tabs button.active {
    background: #ffffff;
    color: #1B3A8C;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.06);
    font-weight: 800;
}
.crm-chat-tabs button i {
    margin-right: 4px;
}

/* ── Sections Container ── */
.crm-chat-sections {
    gap: 12px;
    padding: 14px;
}

/* ── Section Cards ── */
.crm-chat-section {
    background: #ffffff;
    border: 1px solid rgba(27, 58, 140, 0.07);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
    transition: box-shadow 0.2s ease;
}
.crm-chat-section:hover {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
.crm-chat-section-header {
    padding: 13px 16px;
    border-bottom: 1px solid rgba(27, 58, 140, 0.05);
    background: linear-gradient(135deg, rgba(27, 58, 140, 0.02) 0%, transparent 100%);
}
.crm-chat-section-header h3 {
    font-size: 0.82rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: 0.01em;
}
.crm-chat-section-count {
    min-width: 26px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: #1B3A8C;
    font-size: 0.7rem;
    font-weight: 800;
    box-shadow: 0 1px 4px rgba(27, 58, 140, 0.12);
}

/* ── Conversation Cards ── */
.crm-chat-card-list {
    gap: 8px;
    padding: 10px;
}
.crm-chat-card {
    width: 100%;
    border: 1.5px solid #e8edf4;
    border-radius: 12px;
    background: #ffffff;
    padding: 13px 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
}
.crm-chat-card:hover {
    border-color: rgba(27, 58, 140, 0.25);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
    transform: translateY(-1px);
}
.crm-chat-card.active {
    border-color: #1B3A8C;
    background: linear-gradient(135deg, #f0f4ff 0%, #edf3ff 100%);
    box-shadow: 0 6px 24px rgba(27, 58, 140, 0.12), 0 2px 6px rgba(27, 58, 140, 0.06);
}
.crm-chat-card-top {
    gap: 11px;
}

/* ── Avatar ── */
.crm-chat-avatar {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    font-weight: 800;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.crm-chat-card:hover .crm-chat-avatar {
    transform: scale(1.04);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
}

/* ── Card Typography ── */
.crm-chat-card-title {
    font-weight: 800;
    color: #0f172a;
    font-size: 0.87rem;
    letter-spacing: -0.01em;
}
.crm-chat-preview {
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.5;
}
.crm-chat-time {
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ── Chips / Badges ── */
.crm-chip {
    border-radius: 999px;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.crm-chip.whatsapp { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #15803d; }
.crm-chip.internal { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1d4ed8; }
.crm-chip.customer { background: linear-gradient(135deg, #eef2ff, #e0e7ff); color: #4338ca; }
.crm-chip.support { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #b45309; }
.crm-chip.new { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #b91c1c; }
.crm-chip.pending { background: linear-gradient(135deg, #fff7ed, #fed7aa); color: #c2410c; }
.crm-chip.closed { background: linear-gradient(135deg, #ecfdf5, #a7f3d0); color: #047857; }
.crm-unread-dot {
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    animation: crm-pulse-badge 2s ease-in-out infinite;
}
@keyframes crm-pulse-badge {
    0%, 100% { box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 2px 12px rgba(239, 68, 68, 0.5); }
}

/* ── Right Panel: Thread ── */
.crm-chat-thread {
    background: #ffffff;
}

/* ── Thread Header ── */
.crm-thread-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 1px solid rgba(27, 58, 140, 0.08);
    gap: 14px;
}
.crm-thread-heading h3 {
    font-size: 1.02rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.crm-thread-heading p {
    color: #64748b;
    font-size: 0.78rem;
    margin-top: 3px;
}
.crm-thread-action-btn {
    width: 36px;
    height: 36px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.crm-thread-action-btn:hover {
    border-color: #1B3A8C;
    color: #1B3A8C;
    background: #f0f4ff;
    box-shadow: 0 2px 8px rgba(27, 58, 140, 0.1);
    transform: translateY(-1px);
}
.crm-thread-actions select {
    height: 36px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 10px;
    font-size: 0.78rem;
    background: #ffffff;
    color: #334155;
    transition: border-color 0.2s ease;
}
.crm-thread-actions select:focus {
    border-color: #1B3A8C;
    outline: none;
    box-shadow: 0 0 0 3px rgba(27, 58, 140, 0.08);
}

/* ── Message Area ── */
.crm-chat-messages {
    padding: 20px;
    gap: 14px;
    background:
        radial-gradient(circle at 20% 20%, rgba(27, 58, 140, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(27, 58, 140, 0.02) 0%, transparent 50%),
        #f8fafc;
}

/* ── Message Bubbles ── */
.crm-chat-messages .chat-msg {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    max-width: 85%;
    animation: msgFadeIn 0.3s ease;
}
@keyframes msgFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.crm-chat-messages .chat-msg.sent {
    margin-left: auto;
    flex-direction: row-reverse;
}
.crm-chat-messages .chat-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    flex-shrink: 0;
    background: linear-gradient(135deg, #64748b, #475569);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.crm-chat-messages .chat-msg.sent .chat-msg-avatar {
    background: linear-gradient(135deg, #1B3A8C, #3159b3);
}
.crm-chat-messages .chat-msg-bubble {
    padding: 11px 15px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(27, 58, 140, 0.06);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    position: relative;
    transition: box-shadow 0.2s ease;
}
.crm-chat-messages .chat-msg-bubble:hover {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
}
.crm-chat-messages .chat-msg.sent .chat-msg-bubble {
    background: linear-gradient(135deg, #1B3A8C 0%, #2a50a8 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(27, 58, 140, 0.18);
}
.crm-chat-messages .chat-msg.sent .chat-msg-bubble:hover {
    box-shadow: 0 6px 20px rgba(27, 58, 140, 0.24);
}
.crm-chat-messages .chat-msg-sender {
    font-size: 0.72rem;
    font-weight: 800;
    color: #1B3A8C;
    margin-bottom: 3px;
    letter-spacing: 0.01em;
}
.crm-chat-messages .chat-msg.sent .chat-msg-sender {
    color: rgba(255, 255, 255, 0.8);
}
.crm-chat-messages .chat-msg-text {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #1e293b;
    word-wrap: break-word;
}
.crm-chat-messages .chat-msg.sent .chat-msg-text {
    color: #ffffff;
}
.crm-chat-messages .chat-msg-time {
    font-size: 0.65rem;
    color: #94a3b8;
    margin-top: 4px;
    font-weight: 600;
}
.crm-chat-messages .chat-msg.sent .chat-msg-time {
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
}

/* ── Input Area ── */
.crm-chat-input {
    padding: 14px 20px;
    border-top: 1px solid rgba(27, 58, 140, 0.06);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.crm-chat-input-row {
    gap: 12px;
    align-items: flex-end;
}
.crm-chat-input-row textarea {
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 0.88rem;
    background: #f8fafc;
    color: #1e293b;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}
.crm-chat-input-row textarea::placeholder {
    color: #94a3b8;
}
.crm-chat-input-row textarea:focus {
    border-color: #1B3A8C;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(27, 58, 140, 0.08), 0 4px 12px rgba(15, 23, 42, 0.05);
    outline: none;
}
.crm-chat-input-row button {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #1B3A8C 0%, #2a50a8 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(27, 58, 140, 0.25);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.crm-chat-input-row button:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 6px 20px rgba(27, 58, 140, 0.32);
}
.crm-chat-input-row button:active {
    transform: translateY(0) scale(0.98);
}

/* ── Empty State ── */
.crm-chat-empty-state {
    gap: 12px;
    min-height: 280px;
}
.crm-chat-empty-state i {
    font-size: 2.4rem;
    color: #cbd5e1;
    filter: drop-shadow(0 2px 8px rgba(15, 23, 42, 0.06));
}
.crm-chat-empty-state h4 {
    font-size: 1.02rem;
    font-weight: 800;
    color: #334155;
    letter-spacing: -0.01em;
}
.crm-chat-empty-state p {
    font-size: 0.85rem;
    color: #64748b;
    max-width: 300px;
    line-height: 1.5;
}

/* ── WhatsApp Thread Specific ── */
.crm-chat-messages .chat-msg.whatsapp-received .chat-msg-bubble {
    background: #ffffff;
    border: 1px solid rgba(37, 211, 102, 0.12);
}
.crm-chat-messages .chat-msg.whatsapp-sent .chat-msg-bubble {
    background: linear-gradient(135deg, #25D366 0%, #1fa855 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.2);
}
.crm-chat-messages .chat-msg.whatsapp-sent .chat-msg-sender {
    color: rgba(255, 255, 255, 0.8);
}
.crm-chat-messages .chat-msg.whatsapp-sent .chat-msg-text {
    color: #ffffff;
}
.crm-chat-messages .chat-msg.whatsapp-sent .chat-msg-time {
    color: rgba(255, 255, 255, 0.6);
}

/* ── WhatsApp Send Button ── */
.crm-chat-input-row button.wa-send {
    background: linear-gradient(135deg, #25D366 0%, #1fa855 100%);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25);
}
.crm-chat-input-row button.wa-send:hover {
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.32);
}

/* ── Scrollbar Styling ── */
.crm-chat-sections::-webkit-scrollbar,
.crm-chat-messages::-webkit-scrollbar {
    width: 6px;
}
.crm-chat-sections::-webkit-scrollbar-track,
.crm-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}
.crm-chat-sections::-webkit-scrollbar-thumb,
.crm-chat-messages::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}
.crm-chat-sections::-webkit-scrollbar-thumb:hover,
.crm-chat-messages::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ── Responsive: Tablet ── */
@media (max-width: 1100px) {
    .crm-chat-shell {
        border-radius: 14px;
        border-left: 0;
        border-right: 0;
    }
    .crm-chat-board {
        border-right: none;
        border-bottom: 1px solid rgba(27, 58, 140, 0.08);
    }
    .crm-thread-header {
        padding: 14px 16px;
    }
    .crm-chat-messages {
        padding: 16px;
    }
    .crm-chat-input {
        padding: 12px 16px;
    }
}

/* ── Responsive: Mobile ── */
@media (max-width: 767px) {
    .crm-chat-shell {
        border-radius: 0;
        border: none;
        box-shadow: none;
    }
    .crm-chat-toolbar {
        padding: 10px 12px;
        gap: 8px;
    }
    .crm-chat-search input {
        height: 38px;
        font-size: 0.84rem;
        border-radius: 10px;
    }
    .crm-chat-tabs {
        gap: 3px;
        padding: 3px;
        border-radius: 10px;
    }
    .crm-chat-tabs button {
        height: 30px;
        padding: 0 10px;
        font-size: 0.76rem;
        border-radius: 8px;
    }
    .crm-chat-sections {
        padding: 10px;
        gap: 10px;
    }
    .crm-chat-section {
        border-radius: 12px;
    }
    .crm-chat-card {
        padding: 11px 12px;
        border-radius: 10px;
    }
    .crm-thread-header {
        padding: 12px 14px;
        gap: 10px;
    }
    .crm-thread-heading h3 {
        font-size: 0.92rem;
    }
    .crm-thread-action-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }
    .crm-chat-messages {
        padding: 14px;
        gap: 10px;
    }
    .crm-chat-messages .chat-msg-bubble {
        padding: 10px 13px;
        border-radius: 14px;
    }
    .crm-chat-messages .chat-msg-text {
        font-size: 0.85rem;
    }
    .crm-chat-input {
        padding: 10px 14px;
    }
    .crm-chat-input-row textarea {
        border-radius: 12px;
        padding: 10px 14px;
    }
    .crm-chat-input-row button {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .crm-chat-empty-state {
        min-height: 200px;
    }
    .crm-chat-empty-state i {
        font-size: 2rem;
    }
}

/* ═══ END PREMIUM CRM CHAT RESTYLE ═══ */

/* Final shared navigation skin: identical on every public page and breakpoint. */
#site-header .nav-desktop .mega-menu,
#site-header .nav-desktop .mega-menu[style] { background: linear-gradient(145deg,#0d1f4a 0%,#1b3a8c 100%) !important; color:rgba(255,255,255,0.92) !important; border:1px solid rgba(255,255,255,0.12) !important; box-shadow:0 18px 48px rgba(15,35,78,.25) !important; opacity:1 !important; }
#site-header .nav-desktop .mega-menu-col,
#site-header .nav-desktop .mega-menu-grid { background:transparent !important; color:rgba(255,255,255,0.92) !important; }
#site-header .nav-desktop .mega-menu-col .mega-menu-heading { color:rgba(255,255,255,0.55) !important; }
#site-header .nav-desktop .mega-menu-link { color:rgba(255,255,255,0.92) !important; background:transparent !important; text-shadow:none !important; }
#site-header .nav-desktop .mega-menu-link i { color:rgba(255,255,255,0.7) !important; }
#site-header .nav-desktop .mega-menu-link:hover,
#site-header .nav-desktop .mega-menu-link:focus-visible { color:#fff !important; background:rgba(255,255,255,0.12) !important; }

/* One reliable high-contrast treatment for repeated navigation CTAs. */
.ky-visible-secondary { display:inline-flex !important; align-items:center; justify-content:center; gap:8px; min-height:42px; color:#fff !important; background:rgba(5,18,50,.24) !important; border:1.5px solid rgba(255,255,255,.82) !important; box-shadow:0 7px 20px rgba(5,18,50,.16); text-shadow:0 1px 2px rgba(0,0,0,.2); }
.ky-visible-secondary:hover,
.ky-visible-secondary:focus-visible { color:#10285f !important; background:#fff !important; border-color:#fff !important; box-shadow:0 10px 26px rgba(5,18,50,.24); transform:translateY(-1px); }
@media (max-width:600px) { .ky-visible-secondary { width:min(100%,320px); } }

/* Unified portal/staff sign-in branding */
body.page-login { padding:24px; background:radial-gradient(circle at 18% 12%,rgba(212,168,67,.18),transparent 26%),linear-gradient(145deg,#081630 0%,#10275f 48%,#1b3a8c 100%); }
body.page-login .login-container { width:min(430px,100%); max-width:none; padding:0; }
body.page-login .login-card { padding:30px 34px 32px; border:1px solid rgba(255,255,255,.22); border-radius:22px; box-shadow:0 26px 76px rgba(2,10,30,.4); }
body.page-login .login-logo { display:grid; place-items:center; margin:0 auto 12px; }
body.page-login .login-logo-icon { display:block; width:88px; height:88px; object-fit:contain; margin:0; padding:7px; border-radius:18px; background:#fff; filter:drop-shadow(0 10px 22px rgba(27,58,140,.2)); }
body.page-login .login-title { margin:0 0 5px; color:#13203a; font-family:'Playfair Display',serif; font-size:1.55rem; line-height:1.2; text-align:center; }
body.page-login .login-subtitle { margin-bottom:25px; }
@media (max-width:520px) { body.page-login{padding:14px} body.page-login .login-card{padding:25px 20px 27px} body.page-login .login-logo-icon{width:76px;height:76px} body.page-login .login-title{font-size:1.38rem} }

/* ══════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVENESS HARDENING
   ══════════════════════════════════════════════════════════ */

/* --- CRITICAL: Fix topbar-flag overflow between 769-900px --- */
@media (max-width: 900px) {
    .topbar-flag { margin: 0 auto; }
    .topbar-right { margin-left: 0; }
}

/* --- CRITICAL: Fix crm-chat-shell horizontal overflow on tablets --- */
@media (max-width: 1100px) {
    .crm-chat-shell { grid-template-columns: 1fr !important; }
    .crm-chat-board { min-width: 0; max-height: 560px; display: flex; flex-direction: column; }
    .crm-chat-sections { flex: 1; min-height: 0; overflow-y: auto; }
    .crm-chat-thread { min-width: 0; }
}

/* --- HIGH: Wildlife grid - add 2-col at tablet --- */
@media (max-width: 991px) {
    .wildlife-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- HIGH: Review footer buttons - prevent overflow on small screens --- */
@media (max-width: 480px) {
    .reviews-section .review-footer .btn { min-width: 0; width: 100%; }
    .reviews-section .review-footer-actions { flex-direction: column; }
    .reviews-section .review-footer-actions .btn { min-width: 0; width: 100%; }
}

/* --- HIGH: Agent intro buttons - prevent overflow on tablets --- */
@media (max-width: 767px) {
    .agent-intro-actions { flex-direction: column; }
    .agent-intro-actions .btn { min-width: 0; width: 100%; }
}

/* --- HIGH: Calendar grid - horizontal scroll on mobile --- */
@media (max-width: 600px) {
    .calendar-grid-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
    .calendar-grid { min-width: 420px; }
    .calendar-day { padding: 6px 2px; font-size: 0.75rem; }
    .calendar-header-cell { font-size: 0.65rem; padding: 4px 0; }
}

/* --- HIGH: Topbar right - improve tap targets on mobile --- */
@media (max-width: 480px) {
    .topbar-right { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .topbar-link { min-height: 38px; padding: 8px 6px; font-size: 0.72rem; }
    .topbar-link span { font-size: 0.68rem; }
}

/* --- MEDIUM: Hero stats - wrap on small screens --- */
@media (max-width: 600px) {
    .hero-stats { flex-wrap: wrap; gap: 20px; }
    .hero-stat { min-width: 80px; }
}

/* --- MEDIUM: Expert photo - reduce size on mobile --- */
@media (max-width: 767px) {
    .experts-section .expert-photo { width: 110px; height: 110px; }
}

/* --- MEDIUM: Data table safety - ensure scroll wrapper --- */
.table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { min-width: 680px; }

/* --- MEDIUM: Calculator input row - prevent truncation --- */
@media (max-width: 480px) {
    .calculator-input-row { grid-template-columns: 72px minmax(0, 1fr); }
    .calculator-input-row select { font-size: 0.78rem; padding: 0 4px; }
}

/* ══════════════════════════════════════════════════════════
   PAGE-SPECIFIC MOBILE STYLES
   ══════════════════════════════════════════════════════════ */

/* --- Reviews page --- */
body.page-reviews .review-panel-card { flex-direction: column; text-align: center; }
body.page-reviews .review-panel-card h3 { font-size: 1.3rem; }
body.page-reviews .review-rating-card { justify-content: center; flex-wrap: wrap; }
@media (max-width: 767px) {
    body.page-reviews .reviews-section { padding: 40px 0; }
    body.page-reviews .review-toolbar { flex-direction: column; align-items: stretch; }
    body.page-reviews .review-sort-group { overflow-x: auto; flex-wrap: nowrap; }
    body.page-reviews .review-filter-select { width: 100%; }
}

/* --- Blog page --- */
body.page-blog .blog-grid { grid-template-columns: 1fr; }
@media (max-width: 991px) {
    body.page-blog .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    body.page-blog .blog-grid { grid-template-columns: 1fr; gap: 16px; }
    body.page-blog .blog-card { flex-direction: column; }
    body.page-blog .blog-card-img { height: 180px; }
}

/* --- Travel guide page --- */
@media (max-width: 767px) {
    body.page-travel-guide .quick-links-grid { grid-template-columns: 1fr; }
    body.page-travel-guide .resource-grid { grid-template-columns: 1fr; }
}

/* --- Itineraries page --- */
@media (max-width: 767px) {
    body.page-itineraries .itineraries-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* --- Budget calculator page --- */
@media (max-width: 600px) {
    body.page-budget-calculator .calculator-card { padding: 16px; }
    body.page-budget-calculator .calculator-results { flex-direction: column; }
}

/* --- Quote builder page --- */
@media (max-width: 767px) {
    body.page-quote-builder .builder-container { padding: 0 12px; }
    body.page-quote-builder .progress-bar { overflow-x: auto; }
    body.page-quote-builder .step-content { padding: 16px; }
}

/* --- Hotels page --- */
@media (max-width: 767px) {
    body.page-hotels .hotel-grid { grid-template-columns: 1fr; }
}

/* --- Booking checkout page --- */
@media (max-width: 767px) {
    body.page-booking .checkout-container { grid-template-columns: 1fr; gap: 20px; }
    body.page-booking .checkout-steps { overflow-x: auto; }
}

/* --- Contact page --- */
@media (max-width: 767px) {
    body.page-contact .contact-grid { grid-template-columns: 1fr; }
}

/* --- About page --- */
@media (max-width: 767px) {
    body.page-about .story-grid { grid-template-columns: 1fr; }
    body.page-about .team-grid { grid-template-columns: 1fr; }
    body.page-about .values-grid { grid-template-columns: 1fr; }
}

/* --- Destinations page --- */
@media (max-width: 767px) {
    body.page-destinations .destination-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* --- Safaris page --- */
@media (max-width: 767px) {
    body.page-safaris .safari-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* --- Experiences page --- */
@media (max-width: 767px) {
    body.page-experiences .experiences-grid { grid-template-columns: 1fr; }
}

/* --- National parks page --- */
@media (max-width: 767px) {
    body.page-national-parks .hotel-grid { grid-template-columns: 1fr; }
}

/* --- Beaches page --- */
@media (max-width: 767px) {
    body.page-beaches .hotel-grid { grid-template-columns: 1fr; }
}

/* --- Mountains page --- */
@media (max-width: 767px) {
    body.page-mountains .hotel-grid { grid-template-columns: 1fr; }
}

/* --- Hidden gems page --- */
@media (max-width: 767px) {
    body.page-hidden-gems .hotel-grid { grid-template-columns: 1fr; }
}

/* --- Cities & towns page --- */
@media (max-width: 767px) {
    body.page-cities-towns .hotel-grid { grid-template-columns: 1fr; }
}

/* --- Family travel page --- */
@media (max-width: 767px) {
    body.page-family-travel .hotel-grid { grid-template-columns: 1fr; }
}

/* --- Adventure page --- */
@media (max-width: 767px) {
    body.page-adventure .hotel-grid { grid-template-columns: 1fr; }
}

/* --- Photography page --- */
@media (max-width: 767px) {
    body.page-photography .hotel-grid { grid-template-columns: 1fr; }
}

/* --- Bird watching page --- */
@media (max-width: 767px) {
    body.page-bird-watching .hotel-grid { grid-template-columns: 1fr; }
}

/* --- Cultural immersion page --- */
@media (max-width: 767px) {
    body.page-cultural-immersion .hotel-grid { grid-template-columns: 1fr; }
}

/* --- Wellness retreats page --- */
@media (max-width: 767px) {
    body.page-wellness-retreats .hotel-grid { grid-template-columns: 1fr; }
}

/* --- Events & festivals page --- */
@media (max-width: 767px) {
    body.page-events-festivals .events-grid { grid-template-columns: 1fr; }
}

/* --- Luxury honeymoon page --- */
@media (max-width: 767px) {
    body.page-luxury-honeymoon .hotel-grid { grid-template-columns: 1fr; }
}

/* --- Camps & glamping page --- */
@media (max-width: 767px) {
    body.page-camps-glamping .hotel-grid { grid-template-columns: 1fr; }
}

/* --- Wildlife reserves page --- */
@media (max-width: 767px) {
    body.page-wildlife-reserves .hotel-grid { grid-template-columns: 1fr; }
}

/* --- Packing lists page --- */
@media (max-width: 767px) {
    body.page-packing-lists .packing-lists { grid-template-columns: 1fr; }
}

/* --- Transport page --- */
@media (max-width: 767px) {
    body.page-transport .transport-grid { grid-template-columns: 1fr; }
}

/* --- Weather & climate page --- */
@media (max-width: 767px) {
    body.page-weather-climate .weather-zones { grid-template-columns: 1fr; }
    body.page-weather-climate .seasons-grid { grid-template-columns: 1fr; }
}

/* --- Currency & payments page --- */
@media (max-width: 767px) {
    body.page-currency-payments .currency-layout { grid-template-columns: 1fr; }
}

/* --- Visa guide page --- */
@media (max-width: 767px) {
    body.page-visa-guide .visa-layout { grid-template-columns: 1fr; }
}

/* --- Best time to visit page --- */
@media (max-width: 767px) {
    body.page-best-time-to-visit .seasons-grid { grid-template-columns: 1fr; }
}

/* --- Culture & heritage page --- */
@media (max-width: 767px) {
    body.page-culture-heritage .hotel-grid { grid-template-columns: 1fr; }
}

/* --- Interactive map page --- */
@media (max-width: 767px) {
    body.page-interactive-map .map-grid { grid-template-columns: 1fr; }
}

/* --- Safari sub-pages (masai-mara, amboseli) --- */
@media (max-width: 767px) {
    body.page-masai-mara-safari .safari-grid,
    body.page-amboseli-safari .safari-grid { grid-template-columns: 1fr; }
}

/* --- Diani beach sub-page --- */
@media (max-width: 767px) {
    body.page-diani-beach .hotel-grid { grid-template-columns: 1fr; }
}

/* --- Kenya safari cost page --- */
@media (max-width: 767px) {
    body.page-kenya-safari-cost .cost-grid { grid-template-columns: 1fr; }
}

/* --- Partner portal page --- */
@media (max-width: 767px) {
    body.page-partner-portal .calendar-grid { min-width: 380px; }
    body.page-partner-portal .commission-card { padding: 14px; }
}

/* --- Client portal page --- */
@media (max-width: 767px) {
    body.page-client-portal .main { padding: 12px; }
}

/* --- Visitor portal page --- */
@media (max-width: 767px) {
    body.page-visitor-portal .main { padding: 12px; }
}

/* --- Agent dashboard page --- */
@media (max-width: 767px) {
    body.page-agent-dashboard .main { padding: 12px; margin-left: 0; }
    body.page-agent-dashboard .stats-row { grid-template-columns: 1fr; }
}

/* --- Chat page --- */
@media (max-width: 767px) {
    body.page-chat .chat-sidebar { display: none; }
    body.page-chat .chat-main { margin-left: 0; }
}

/* --- Welcome page --- */
@media (max-width: 767px) {
    body.page-welcome .welcome-grid { grid-template-columns: 1fr; }
}

/* --- Privacy / Terms / Cookie policy pages --- */
@media (max-width: 767px) {
    body.page-privacy-policy .info-content,
    body.page-terms-of-service .info-content,
    body.page-cookie-policy .info-content { padding: 0 4px; }
}

/* ══════════════════════════════════════════════════════════
   GLOBAL MOBILE UTILITIES
   ══════════════════════════════════════════════════════════ */

/* Prevent horizontal scroll globally */
html, body { overflow-x: clip; }

/* Ensure all images are responsive */
img { max-width: 100%; height: auto; }

/* CRM WhatsApp chat: keep the reply box visible inside the thread panel. */
body.page-agent-dashboard .crm-chat-shell {
    height: calc(100dvh - 190px) !important;
    min-height: 420px;
    overflow: hidden;
}
body.page-agent-dashboard .crm-chat-board {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
body.page-agent-dashboard .crm-chat-toolbar {
    flex: 0 0 auto;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    align-items: center;
}
body.page-agent-dashboard .crm-chat-category-back {
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: #fff;
    color: #1B3A8C;
    font-size: 0.78rem;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
body.page-agent-dashboard .crm-chat-sections {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
body.page-agent-dashboard .crm-chat-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 6px;
}
body.page-agent-dashboard .crm-chat-category-card {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 142px;
    width: 100%;
    padding: 18px;
    border: 1px solid rgba(27, 58, 140, 0.1);
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
body.page-agent-dashboard .crm-chat-category-card:hover {
    transform: translateY(-2px);
    border-color: rgba(27, 58, 140, 0.28);
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.1);
}
body.page-agent-dashboard .crm-chat-category-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #1B3A8C, #3159b3);
    box-shadow: 0 10px 24px rgba(27, 58, 140, 0.22);
}
body.page-agent-dashboard .crm-chat-category-card.new .crm-chat-category-icon { background: linear-gradient(135deg, #ef4444, #f97316); }
body.page-agent-dashboard .crm-chat-category-card.open .crm-chat-category-icon { background: linear-gradient(135deg, #1B3A8C, #2563eb); }
body.page-agent-dashboard .crm-chat-category-card.pending .crm-chat-category-icon { background: linear-gradient(135deg, #f59e0b, #ea580c); }
body.page-agent-dashboard .crm-chat-category-card.closed .crm-chat-category-icon { background: linear-gradient(135deg, #16a34a, #059669); }
body.page-agent-dashboard .crm-chat-category-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}
body.page-agent-dashboard .crm-chat-category-copy strong {
    color: #0f172a;
    font-size: 1rem;
    letter-spacing: -0.02em;
}
body.page-agent-dashboard .crm-chat-category-copy small {
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.45;
}
body.page-agent-dashboard .crm-chat-category-copy em {
    color: #94a3b8;
    font-size: 0.72rem;
    font-style: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
body.page-agent-dashboard .crm-chat-category-count {
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #1B3A8C;
    font-weight: 900;
}
body.page-agent-dashboard .crm-chat-category-unread {
    position: absolute;
    top: 12px;
    right: 12px;
    min-width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(239, 68, 68, 0.28);
}
body.page-agent-dashboard .crm-chat-live-dot {
    position: absolute;
    left: 14px;
    top: 14px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cbd5e1;
}
body.page-agent-dashboard .crm-chat-live-dot.active {
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.12);
    animation: crm-live-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes crm-live-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.75; }
}
body.page-agent-dashboard .crm-chat-section-open {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
body.page-agent-dashboard .crm-chat-card-list-focused {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
body.page-agent-dashboard .crm-chat-thread {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
body.page-agent-dashboard .crm-thread-header,
body.page-agent-dashboard .crm-chat-input {
    flex: 0 0 auto;
}
body.page-agent-dashboard .crm-chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
body.page-agent-dashboard .crm-chat-input[style*="display: none"] {
    display: none !important;
}
body.page-agent-dashboard .crm-chat-input:not([style*="display: none"]) {
    display: block !important;
}
body.page-agent-dashboard .chat-toggle-btn.hidden-on-chat-view {
    display: none !important;
}
body.page-agent-dashboard .wa-msg-incoming,
body.page-agent-dashboard .wa-msg-outgoing {
    display: block;
    width: fit-content;
    max-width: min(78%, 620px);
    min-width: min(170px, 72vw);
    white-space: normal;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    overflow-wrap: break-word;
    word-break: normal;
}
body.page-agent-dashboard .wa-msg-text {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.45;
}

@media (max-height: 640px) and (min-width: 900px) {
    body.page-agent-dashboard .crm-chat-shell {
        height: calc(100dvh - 142px) !important;
        min-height: 0 !important;
    }
    body.page-agent-dashboard .crm-chat-sections,
    body.page-agent-dashboard .crm-chat-messages {
        scrollbar-gutter: stable;
    }
}

@media (max-width: 767px) {
    body.page-agent-dashboard .crm-chat-shell {
        height: calc(100dvh - 132px) !important;
        min-height: 0 !important;
    }
    body.page-agent-dashboard .crm-chat-toolbar {
        grid-template-columns: 1fr;
    }
    body.page-agent-dashboard .crm-chat-category-back {
        justify-self: start;
    }
    body.page-agent-dashboard .crm-chat-category-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0;
    }
    body.page-agent-dashboard .crm-chat-category-card {
        min-height: 116px;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        padding: 15px;
        border-radius: 15px;
    }
    body.page-agent-dashboard .crm-chat-category-copy strong {
        font-size: 0.94rem;
    }
    body.page-agent-dashboard .crm-chat-category-copy em {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    body.page-agent-dashboard .crm-chat-shell.thread-open .crm-chat-thread {
        height: 100%;
        min-height: 0;
    }
    body.page-agent-dashboard .wa-msg-incoming,
    body.page-agent-dashboard .wa-msg-outgoing {
        max-width: 86%;
        min-width: min(150px, 72vw);
    }
}

/* Improve tap targets on mobile */
@media (max-width: 767px) {
    a, button, input, select, textarea { min-height: 32px; }
    .btn { min-height: 44px; padding: 12px 20px; }
    .btn-sm { min-height: 36px; padding: 8px 14px; }

    /* Prevent text overflow */
    h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-wrap: break-word; }

    /* Stack flex items that might overflow */
    .flex-row-mobile { flex-direction: column !important; }
    .gap-mobile-0 { gap: 0 !important; }

    /* Full-width buttons in forms */
    .form-actions { flex-direction: column; }
    .form-actions .btn { width: 100%; }
}

/* Ultra-small screens (320px) */
@media (max-width: 360px) {
    .hero h1 { font-size: 1.4rem; }
    .hero p { font-size: 0.88rem; }
    .section-header h2 { font-size: 1.2rem; }
    .container { padding-left: 12px; padding-right: 12px; }
    .topbar-link span { display: none; }
}

/* ══════════════════════════════════════════════════════════
   PREMIUM REVIEWS PAGE
   ══════════════════════════════════════════════════════════ */

/* --- Stats Bar --- */
.rv-stats-bar {
    background: linear-gradient(135deg, #0d1f4a 0%, #1b3a8c 100%);
    padding: 32px 0;
    position: relative;
    z-index: 2;
}
.rv-stats-bar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}
.rv-stat {
    text-align: center;
    padding: 8px 32px;
    color: white;
}
.rv-stat-number {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2px;
}
.rv-stat-label {
    font-size: 0.78rem;
    opacity: 0.8;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.rv-stat-stars {
    margin-top: 4px;
    display: flex;
    gap: 2px;
    justify-content: center;
}
.rv-stat-stars i {
    font-size: 0.72rem;
    color: #E3B341;
}
.rv-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    flex-shrink: 0;
}

/* --- Section Headers --- */
.rv-section-header {
    text-align: center;
    margin-bottom: 40px;
}
.rv-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: rgba(27,58,140,0.08);
    color: var(--primary);
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 14px;
    letter-spacing: 0.03em;
}
.rv-section-tag i {
    font-size: 0.72rem;
}
.rv-section-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}
.rv-section-header p {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- Category Cards (Premium - No Cropped Images) --- */
.rv-categories {
    padding: 72px 0 56px;
}
.rv-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.rv-cat-card {
    background: white;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15,23,42,0.06);
    border: 1px solid rgba(230,232,238,0.7);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.rv-cat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(15,23,42,0.12);
    border-color: rgba(27,58,140,0.2);
}
.rv-cat-img {
    width: 100%;
    background: linear-gradient(135deg, #f0f4ff, #e8ecf5);
    overflow: hidden;
}
.rv-cat-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.rv-cat-card:hover .rv-cat-img img {
    transform: scale(1.04);
}
.rv-cat-body {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.rv-cat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(27,58,140,0.1), rgba(27,58,140,0.05));
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-bottom: 14px;
}
.rv-cat-body h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.rv-cat-body p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 14px;
    flex: 1;
}
.rv-cat-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    transition: gap 0.3s ease;
}
.rv-cat-card:hover .rv-cat-link {
    gap: 10px;
}
.rv-cat-link i {
    font-size: 0.72rem;
    transition: transform 0.3s ease;
}
.rv-cat-card:hover .rv-cat-link i {
    transform: translateX(2px);
}

/* --- Featured Testimonials --- */
.rv-featured {
    padding: 56px 0 72px;
    background: linear-gradient(180deg, #f8f9fc 0%, #ffffff 100%);
}
.rv-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    grid-auto-rows: auto;
}
.rv-testimonial-card {
    background: white;
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 2px 12px rgba(15,23,42,0.05);
    border: 1px solid rgba(230,232,238,0.7);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}
.rv-testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(15,23,42,0.1);
}
.rv-testimonial-card.rv-featured-main {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #0d1f4a 0%, #1b3a8c 100%);
    color: white;
    padding: 36px 40px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px 24px;
    border: none;
}
.rv-testimonial-badge {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #E3B341;
    width: fit-content;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.rv-testimonial-badge i {
    font-size: 0.65rem;
}
.rv-featured-main .rv-testimonial-stars {
    grid-column: 1;
    align-self: start;
    padding-top: 4px;
}
.rv-testimonial-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
}
.rv-testimonial-stars i {
    font-size: 0.82rem;
    color: #E3B341;
}
.rv-featured-main .rv-testimonial-stars i {
    color: #E3B341;
}
.rv-featured-main blockquote {
    grid-column: 2;
    font-size: 1.08rem;
    line-height: 1.7;
    opacity: 0.95;
    font-style: italic;
    margin: 0;
}
.rv-featured-main .rv-testimonial-author {
    grid-column: 1 / -1;
    margin-top: 8px;
}
.rv-testimonial-card blockquote {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-light);
    margin: 0 0 16px;
    font-style: italic;
}
.rv-testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}
.rv-author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.78rem;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}
.rv-featured-main .rv-author-avatar {
    width: 46px;
    height: 46px;
    font-size: 0.82rem;
}
.rv-author-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.rv-author-info strong {
    font-size: 0.88rem;
    font-weight: 600;
}
.rv-featured-main .rv-author-info strong {
    color: white;
}
.rv-author-info span {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* --- Rating Breakdown --- */
.rv-breakdown {
    padding: 72px 0;
}
.rv-breakdown-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: center;
}
.rv-breakdown-left .rv-section-tag {
    margin-bottom: 12px;
}
.rv-breakdown-left h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}
.rv-breakdown-left p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 28px;
}
.rv-rating-big {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 28px;
    background: linear-gradient(135deg, #f8f9fc, #f0f4ff);
    border-radius: 16px;
    border: 1px solid rgba(27,58,140,0.08);
}
.rv-rating-number {
    font-family: 'Playfair Display', serif;
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}
.rv-rating-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rv-rating-meta .rv-rating-stars {
    display: flex;
    gap: 2px;
}
.rv-rating-meta .rv-rating-stars i {
    font-size: 0.9rem;
    color: #E3B341;
}
.rv-rating-meta span {
    font-size: 0.82rem;
    color: var(--text-muted);
}
.rv-breakdown-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rv-bar-row {
    display: grid;
    grid-template-columns: 140px 1fr 40px;
    align-items: center;
    gap: 12px;
}
.rv-bar-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
}
.rv-bar-track {
    height: 10px;
    background: #f0f2f7;
    border-radius: 10px;
    overflow: hidden;
}
.rv-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #1B3A8C, #2563EB);
    border-radius: 10px;
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.rv-bar-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
    text-align: right;
}

/* --- Premium Reviews Responsive --- */
@media (max-width: 1024px) {
    .rv-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .rv-testimonial-grid { grid-template-columns: repeat(2, 1fr); }
    .rv-testimonial-card.rv-featured-main { grid-column: 1 / -1; }
    .rv-breakdown-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 767px) {
    .rv-stats-bar .container { flex-direction: column; gap: 0; }
    .rv-stat { padding: 10px 20px; }
    .rv-stat-divider { width: 60px; height: 1px; }
    .rv-stat-number { font-size: 1.6rem; }
    .rv-categories { padding: 48px 0 40px; }
    .rv-cat-grid { grid-template-columns: 1fr; gap: 16px; }
    .rv-featured { padding: 40px 0 56px; }
    .rv-testimonial-grid { grid-template-columns: 1fr; gap: 16px; }
    .rv-testimonial-card.rv-featured-main {
        padding: 24px;
        grid-template-columns: 1fr;
    }
    .rv-featured-main .rv-testimonial-stars { grid-column: 1; }
    .rv-featured-main blockquote { grid-column: 1; font-size: 1rem; }
    .rv-featured-main .rv-testimonial-author { grid-column: 1; }
    .rv-section-header h2 { font-size: 1.55rem; }
    .rv-breakdown { padding: 48px 0; }
    .rv-breakdown-grid { gap: 28px; }
    .rv-bar-row { grid-template-columns: 1fr 40px; gap: 8px; }
    .rv-bar-label { grid-column: 1 / -1; font-size: 0.8rem; }
    .rv-rating-big { flex-direction: column; text-align: center; gap: 10px; padding: 18px; }
    .rv-rating-number { font-size: 2.6rem; }
    .rv-rating-meta { align-items: center; }
}
@media (max-width: 480px) {
    .rv-stat-number { font-size: 1.4rem; }
    .rv-stat-label { font-size: 0.72rem; }
    .rv-cat-body { padding: 18px 18px 20px; }
    .rv-testimonial-card { padding: 20px; }
    .rv-section-header h2 { font-size: 1.35rem; }
    .rv-bar-row { grid-template-columns: 1fr 36px; }
}

/* ══════════════════════════════════════════════════════════
   WILDLIFE GUIDE — THEMED ANIMAL CARDS
   ══════════════════════════════════════════════════════════ */

/* --- Stats Bar --- */
.wg-stats-bar {
    background: linear-gradient(135deg, #1a2e1a 0%, #2d5016 50%, #3d6b1e 100%);
    padding: 28px 0;
    position: relative;
    z-index: 2;
}
.wg-stats-bar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}
.wg-stat {
    text-align: center;
    padding: 6px 28px;
    color: white;
}
.wg-stat-icon {
    font-size: 1.1rem;
    opacity: 0.7;
    margin-bottom: 4px;
}
.wg-stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}
.wg-stat-label {
    font-size: 0.72rem;
    opacity: 0.75;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.wg-stat-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.2);
    flex-shrink: 0;
}

/* --- Section Headers --- */
.wg-section-header {
    text-align: center;
    margin-bottom: 40px;
}
.wg-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: rgba(45,80,22,0.08);
    color: #2d5016;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 14px;
    letter-spacing: 0.03em;
}
.wg-section-tag i { font-size: 0.72rem; }
.wg-section-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}
.wg-section-header p {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- Wildlife Section --- */
.wg-wildlife {
    padding: 72px 0;
}
.wg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* --- Base Card --- */
.wg-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(15,23,42,0.06);
    border: 1px solid rgba(230,232,238,0.7);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
}
.wg-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(15,23,42,0.12);
}

/* --- Card Image (No Cropping) --- */
.wg-card-img {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.wg-card-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.wg-card:hover .wg-card-img img {
    transform: scale(1.03);
}
.wg-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    backdrop-filter: blur(10px);
    letter-spacing: 0.03em;
}

/* --- Card Body --- */
.wg-card-body {
    padding: 26px 28px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.wg-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 14px;
    transition: transform 0.3s ease;
}
.wg-card:hover .wg-card-icon { transform: scale(1.08); }
.wg-card-body h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.wg-card-body > p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 18px;
}

/* --- Card Stats Row --- */
.wg-card-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.wg-card-stat {
    display: flex;
    flex-direction: column;
    padding: 10px 16px;
    border-radius: 12px;
    min-width: 0;
}
.wg-card-stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
}
.wg-card-stat-label {
    font-size: 0.68rem;
    font-weight: 500;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- Card Facts --- */
.wg-card-facts {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
    flex: 1;
}
.wg-card-fact {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.5;
}
.wg-card-fact i {
    font-size: 0.65rem;
    margin-top: 4px;
    flex-shrink: 0;
}

/* --- Card Button --- */
.wg-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1.5px solid;
}
.wg-card-btn i { font-size: 0.78rem; }

/* ═══════════════════════════════════════════════
   THEME: LION (Big Five) — Amber Gold
   ═══════════════════════════════════════════════ */
.wg-theme-lion .wg-card-badge {
    background: rgba(180,120,20,0.85);
    color: white;
}
.wg-theme-lion .wg-card-icon {
    background: linear-gradient(135deg, rgba(180,120,20,0.12), rgba(180,120,20,0.05));
    color: #b47814;
}
.wg-theme-lion .wg-card-stat {
    background: rgba(180,120,20,0.06);
}
.wg-theme-lion .wg-card-stat-num { color: #b47814; }
.wg-theme-lion .wg-card-fact i { color: #b47814; }
.wg-theme-lion .wg-card-btn {
    background: #b47814;
    color: white;
    border-color: #b47814;
}
.wg-theme-lion .wg-card-btn:hover {
    background: #9a660f;
    border-color: #9a660f;
}
.wg-theme-lion:hover {
    border-color: rgba(180,120,20,0.25);
}

/* ═══════════════════════════════════════════════
   THEME: MIGRATION — Dusty Orange
   ═══════════════════════════════════════════════ */
.wg-theme-migration .wg-card-badge {
    background: rgba(194,100,30,0.85);
    color: white;
}
.wg-theme-migration .wg-card-icon {
    background: linear-gradient(135deg, rgba(194,100,30,0.12), rgba(194,100,30,0.05));
    color: #c2641e;
}
.wg-theme-migration .wg-card-stat {
    background: rgba(194,100,30,0.06);
}
.wg-theme-migration .wg-card-stat-num { color: #c2641e; }
.wg-theme-migration .wg-card-fact i { color: #c2641e; }
.wg-theme-migration .wg-card-btn {
    background: #c2641e;
    color: white;
    border-color: #c2641e;
}
.wg-theme-migration .wg-card-btn:hover {
    background: #a85518;
    border-color: #a85518;
}
.wg-theme-migration:hover {
    border-color: rgba(194,100,30,0.25);
}

/* ═══════════════════════════════════════════════
   THEME: BIRD — Sky Blue
   ═══════════════════════════════════════════════ */
.wg-theme-bird .wg-card-badge {
    background: rgba(30,130,200,0.85);
    color: white;
}
.wg-theme-bird .wg-card-icon {
    background: linear-gradient(135deg, rgba(30,130,200,0.12), rgba(30,130,200,0.05));
    color: #1e82c8;
}
.wg-theme-bird .wg-card-stat {
    background: rgba(30,130,200,0.06);
}
.wg-theme-bird .wg-card-stat-num { color: #1e82c8; }
.wg-theme-bird .wg-card-fact i { color: #1e82c8; }
.wg-theme-bird .wg-card-btn {
    background: #1e82c8;
    color: white;
    border-color: #1e82c8;
}
.wg-theme-bird .wg-card-btn:hover {
    background: #186fa8;
    border-color: #186fa8;
}
.wg-theme-bird:hover {
    border-color: rgba(30,130,200,0.25);
}

/* ═══════════════════════════════════════════════
   THEME: OCEAN — Teal
   ═══════════════════════════════════════════════ */
.wg-theme-ocean .wg-card-badge {
    background: rgba(0,128,128,0.85);
    color: white;
}
.wg-theme-ocean .wg-card-icon {
    background: linear-gradient(135deg, rgba(0,128,128,0.12), rgba(0,128,128,0.05));
    color: #008080;
}
.wg-theme-ocean .wg-card-stat {
    background: rgba(0,128,128,0.06);
}
.wg-theme-ocean .wg-card-stat-num { color: #008080; }
.wg-theme-ocean .wg-card-fact i { color: #008080; }
.wg-theme-ocean .wg-card-btn {
    background: #008080;
    color: white;
    border-color: #008080;
}
.wg-theme-ocean .wg-card-btn:hover {
    background: #006666;
    border-color: #006666;
}
.wg-theme-ocean:hover {
    border-color: rgba(0,128,128,0.25);
}

/* ═══════════════════════════════════════════════
   THEME: RARE — Forest Green
   ═══════════════════════════════════════════════ */
.wg-theme-rare .wg-card-badge {
    background: rgba(34,120,60,0.85);
    color: white;
}
.wg-theme-rare .wg-card-icon {
    background: linear-gradient(135deg, rgba(34,120,60,0.12), rgba(34,120,60,0.05));
    color: #227838;
}
.wg-theme-rare .wg-card-stat {
    background: rgba(34,120,60,0.06);
}
.wg-theme-rare .wg-card-stat-num { color: #227838; }
.wg-theme-rare .wg-card-fact i { color: #227838; }
.wg-theme-rare .wg-card-btn {
    background: #227838;
    color: white;
    border-color: #227838;
}
.wg-theme-rare .wg-card-btn:hover {
    background: #1b6230;
    border-color: #1b6230;
}
.wg-theme-rare:hover {
    border-color: rgba(34,120,60,0.25);
}

/* ═══════════════════════════════════════════════
   THEME: ECO — Earth Olive
   ═══════════════════════════════════════════════ */
.wg-theme-eco .wg-card-badge {
    background: rgba(85,107,47,0.85);
    color: white;
}
.wg-theme-eco .wg-card-icon {
    background: linear-gradient(135deg, rgba(85,107,47,0.12), rgba(85,107,47,0.05));
    color: #556b2f;
}
.wg-theme-eco .wg-card-stat {
    background: rgba(85,107,47,0.06);
}
.wg-theme-eco .wg-card-stat-num { color: #556b2f; }
.wg-theme-eco .wg-card-fact i { color: #556b2f; }
.wg-theme-eco .wg-card-btn {
    background: #556b2f;
    color: white;
    border-color: #556b2f;
}
.wg-theme-eco .wg-card-btn:hover {
    background: #465826;
    border-color: #465826;
}
.wg-theme-eco:hover {
    border-color: rgba(85,107,47,0.25);
}

/* --- Wildlife Guide Responsive --- */
@media (max-width: 1024px) {
    .wg-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 767px) {
    .wg-stats-bar .container { flex-direction: column; gap: 0; }
    .wg-stat { padding: 8px 16px; }
    .wg-stat-divider { width: 50px; height: 1px; }
    .wg-stat-num { font-size: 1.3rem; }
    .wg-wildlife { padding: 48px 0; }
    .wg-grid { gap: 16px; }
    .wg-card-body { padding: 20px 22px 22px; }
    .wg-section-header h2 { font-size: 1.55rem; }
    .wg-card-stats { flex-wrap: wrap; gap: 10px; }
    .wg-card-stat { padding: 8px 12px; min-width: 80px; }
    .wg-card-stat-num { font-size: 0.92rem; }
}
@media (max-width: 480px) {
    .wg-stat-num { font-size: 1.1rem; }
    .wg-stat-label { font-size: 0.65rem; }
    .wg-card-body { padding: 16px 18px 18px; }
    .wg-card-body h3 { font-size: 1.05rem; }
    .wg-card-fact { font-size: 0.78rem; }
    .wg-card-btn { padding: 10px 16px; font-size: 0.8rem; }
    .wg-section-header h2 { font-size: 1.35rem; }
}

/* ══════════════════════════════════════════════════════════════
   TABLET RESPONSIVENESS — PREMIUM FEEL (768px – 1024px)
   ══════════════════════════════════════════════════════════════ */

/* ── 1. TABLET: HEADER & NAVIGATION ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .header-inner {
        padding: 0 20px;
        height: 60px;
    }

    .logo {
        font-size: 1.35rem;
        gap: 10px;
    }

    .logo-icon {
        height: 44px;
    }

    .nav-desktop {
        gap: 1px;
    }

    .nav-desktop > .nav-item {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .mega-menu {
        min-width: 520px;
        padding: 16px;
    }

    .mega-menu-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .mega-menu-link {
        padding: 7px 8px;
        font-size: 0.8rem;
    }

    .header-actions .btn {
        padding: 8px 14px;
        font-size: 0.82rem;
    }

    .currency-selector {
        font-size: 0.78rem;
    }

    /* Topbar: reduce flag margin, tighten layout */
    .topbar-inner {
        height: 38px;
        padding: 0 20px;
    }

    .topbar-flag {
        margin: 50px 100px;
    }

    .topbar-link {
        font-size: 0.72rem;
        padding: 3px 8px;
    }

    .topbar-item {
        font-size: 0.7rem;
    }

    .header-breadcrumb {
        padding: 0 20px;
    }
}

/* ── 2. TABLET: HERO SECTION ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero {
        padding: 80px 20px 60px;
    }

    .hero h1 {
        font-size: 2.4rem;
        letter-spacing: -0.022em;
    }

    .hero p {
        font-size: 0.98rem;
        max-width: 480px;
    }

    .hero-content {
        max-width: 620px;
    }

    .hero-badge {
        font-size: 0.78rem;
        padding: 6px 16px;
    }

    .hero-cta {
        gap: 10px;
    }

    .hero-cta .btn {
        padding: 11px 20px;
        font-size: 0.85rem;
    }

    .hero-stats {
        gap: 32px;
        margin-top: 32px;
    }

    .hero-stat-number,
    .hero-stat .num {
        font-size: 1.6rem;
    }

    .hero-stat-label,
    .hero-stat .label {
        font-size: 0.72rem;
    }

    /* Float cards: smaller but still visible for premium feel */
    .hero-float-card.float-tl { top: 12%; left: 3%; width: 130px; height: 98px; }
    .hero-float-card.float-tr { top: 10%; right: 3%; width: 140px; height: 105px; }
    .hero-float-card.float-bl { bottom: 14%; left: 4%; width: 120px; height: 90px; }
    .hero-float-card.float-br { bottom: 12%; right: 4%; width: 135px; height: 100px; }
    .hero-float-card.float-ml { top: 35%; left: 2%; width: 110px; height: 82px; }
    .hero-float-card.float-mr { top: 30%; right: 2%; width: 125px; height: 92px; }

    .hero-float-card .float-label {
        font-size: 0.72rem;
        padding: 20px 10px 8px;
    }

    /* Sub-hero float cards */
    .hero.sub-hero .hero-float-card.float-tl { top: 10%; left: 2%; width: 105px; height: 78px; }
    .hero.sub-hero .hero-float-card.float-tr { top: 8%; right: 2%; width: 112px; height: 82px; }
    .hero.sub-hero .hero-float-card.float-bl { bottom: 12%; left: 3%; width: 98px; height: 72px; }
    .hero.sub-hero .hero-float-card.float-br { bottom: 10%; right: 3%; width: 108px; height: 76px; }
}

/* ── 3. TABLET: SEARCH WIDGET ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .search-widget {
        max-width: 960px;
        margin-top: -30px;
    }

    .search-form {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 18px 20px;
    }

    .search-form .btn,
    .search-form button {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .search-tabs {
        gap: 0;
    }

    .search-tab {
        padding: 10px 16px;
        font-size: 0.8rem;
    }
}

/* ── 4. TABLET: CONTENT SECTIONS — SPACING ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .section {
        padding: 52px 0;
    }

    .section-inner {
        padding: 52px 20px;
    }

    .section-header {
        margin-bottom: 30px;
    }

    .section-header h2 {
        font-size: 1.75rem;
    }

    .section-header p {
        font-size: 0.95rem;
        max-width: 480px;
    }

    .container {
        padding: 0 20px;
    }
}

/* ── 5. TABLET: GRID LAYOUTS ── */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Destinations: 2 cols */
    .destinations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        max-width: 960px;
        padding: 0 20px;
    }

    .destination-card {
        height: 280px;
    }

    .destination-card .destination-overlay h3 {
        font-size: 1.1rem;
    }

    /* Package Grid: 2 cols */
    .package-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .package-media {
        min-height: 200px;
    }

    .package-content {
        padding: 20px;
    }

    .package-content h3 {
        font-size: 1rem;
    }

    .package-footer {
        gap: 12px;
    }

    .package-price strong {
        font-size: 1.3rem;
    }

    /* Experiences Grid: 2 cols */
    .experiences-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .experience-image {
        height: 180px;
    }

    .experience-content {
        padding: 16px;
    }

    .experience-content h3 {
        font-size: 0.98rem;
    }

    /* Features Grid: 2 cols */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 0 20px;
    }

    .feature-card {
        padding: 22px 18px;
    }

    .feature-icon {
        width: 48px;
        height: 48px;
        font-size: 1.15rem;
    }

    .feature-card h3 {
        font-size: 0.95rem;
    }

    .feature-card p {
        font-size: 0.82rem;
    }

    /* Category Grid: 2 cols */
    .category-grid,
    .resource-grid,
    .article-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Trending Grid: 3 cols */
    .trending-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .trending-card {
        padding: 20px;
    }

    .trending-card h3 {
        font-size: 0.95rem;
    }

    .trending-card p {
        font-size: 0.82rem;
    }

    /* Deal Grid: 3 cols */
    .deal-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .deal-card {
        padding: 20px;
    }

    /* Quick Links: 3 cols (keep) */
    .quick-links-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .quick-link-card {
        padding: 20px;
    }

    /* Event Grid: 3 cols */
    .event-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    /* Expert Grid: 2 cols */
    .experts-section .expert-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .experts-section .expert-card {
        padding: 24px 22px 24px;
    }

    .experts-section .expert-photo {
        width: 120px;
        height: 120px;
    }

    /* Partner Logos: 3 cols */
    .partner-logos {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    /* Reviews Grid: 2 cols */
    .reviews-section .review-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .reviews-section .review-card {
        padding: 18px;
    }

    /* Why Grid: 4 cols (keep) */
    .why-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    /* Testimonials: 2 cols */
    .testimonials-section .testimonials-list,
    .testimonials-track {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    /* Hotel Grid: 2 cols */
    .hotel-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Safari Grid: 2 cols */
    .safari-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Styles Grid: 3 cols */
    .styles-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    /* Stats Banner Grid: 3 cols */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    /* Seasons Grid: 3 cols */
    .seasons-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    /* Weather Zones: 2 cols */
    .weather-zones {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Wildlife Grid: 3 cols */
    .wildlife-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    /* Packing Lists: 2 cols */
    .packing-lists {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Transport Grid: 3 cols */
    .transport-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    /* Itineraries: 2 cols */
    .itineraries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Stories Grid: 3 cols */
    .stories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    /* Reviews Page Grid: 3 cols */
    .reviews-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    /* Team Grid: 3 cols */
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    /* Values Grid: 3 cols */
    .values-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    /* Jobs Grid: 2 cols */
    .jobs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Agents Grid: 3 cols */
    .agents-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    /* Events Grid (Travel Guide): 3 cols */
    .events-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    /* Gallery: 3 cols */
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 170px;
        gap: 10px;
    }

    /* Destination Grid: 3 cols */
    .destination-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    /* Wildlife Tips: 2 cols */
    .wildlife-tips {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Page Index2: 2 cols */
    body.page-index2 .pages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

/* ── 6. TABLET: 2-COLUMN LAYOUTS ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .review-panel-card {
        grid-template-columns: 1.3fr 0.7fr;
        gap: 20px;
        padding: 24px;
    }

    .review-panel-card h3 {
        font-size: 1.7rem;
    }

    .agent-intro-card {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        padding: 26px;
    }

    .agent-intro-card h2 {
        font-size: 1.7rem;
    }

    .smart-assistant-card {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        padding: 28px;
    }

    .assistant-copy h2 {
        font-size: 1.7rem;
    }

    .story-grid {
        gap: 36px;
        padding: 0 20px;
    }

    .story-content .lead {
        font-size: 1rem;
    }

    .currency-layout {
        grid-template-columns: 1.4fr 0.6fr;
        gap: 22px;
    }

    .visa-layout {
        grid-template-columns: 1fr 1fr;
        gap: 22px;
    }

    .budget-layout {
        grid-template-columns: 1fr 1fr;
        gap: 22px;
    }

    .contact-grid {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 24px;
    }

    .map-section .map-grid {
        grid-template-columns: 1.4fr 0.6fr;
        gap: 20px;
    }

    .map-card {
        padding: 26px;
    }

    .checkout-container {
        grid-template-columns: 1.2fr 1fr;
        gap: 22px;
        max-width: 960px;
    }

    .order-summary {
        padding: 22px;
    }

    /* Review modal */
    .review-modal {
        padding: 24px;
        max-width: 680px;
    }

    .review-modal-header h3 {
        font-size: 1.4rem;
    }
}

/* ── 7. TABLET: SMART ASSISTANT ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .smart-assistant-section {
        padding: 70px 0;
    }

    .smart-assistant-form textarea {
        min-height: 120px;
        padding: 16px;
    }

    .assistant-suggestion-row {
        flex-wrap: wrap;
    }
}

/* ── 8. TABLET: REVIEWS SECTION ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .reviews-section {
        padding: 70px 0;
    }

    .reviews-section .review-actions {
        gap: 14px;
    }

    .reviews-section .review-toolbar {
        gap: 12px;
    }

    .review-sort-group {
        gap: 4px;
    }

    .review-sort-btn {
        padding: 7px 14px;
        font-size: 0.82rem;
    }
}

/* ── 9. TABLET: EXPERTS SECTION ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .experts-section {
        padding: 70px 0;
    }

    .experts-section .expert-tags {
        gap: 8px;
    }

    .experts-section .expert-tags span {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
}

/* ── 10. TABLET: MAASAI BANNER ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .maasai-banner-inner {
        padding: 52px 32px;
    }

    .maasai-banner-content h2 {
        font-size: 1.6rem;
    }

    .maasai-banner-content p {
        font-size: 0.92rem;
        line-height: 1.65;
    }

    .maasai-pattern-left,
    .maasai-pattern-right {
        width: 80px;
    }
}

/* ── 11. TABLET: NEWSLETTER ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .newsletter {
        padding: 44px 20px;
    }

    .newsletter h2 {
        font-size: 1.6rem;
    }

    .newsletter p {
        font-size: 0.92rem;
    }

    .newsletter-form {
        max-width: 380px;
    }

    .newsletter-form input {
        padding: 10px 16px;
        font-size: 0.88rem;
    }

    .newsletter-form button {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
}

/* ── 12. TABLET: FOOTER ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .footer {
        padding: 52px 0 0;
    }

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
        gap: 28px;
        max-width: 960px;
    }

    .footer-brand p {
        font-size: 0.88rem;
        line-height: 1.75;
    }

    .footer-col h4 {
        font-size: 0.9rem;
    }

    .footer-col ul li a {
        font-size: 0.84rem;
    }

    .footer-bottom {
        max-width: 960px;
        padding: 22px 20px 14px;
    }

    .footer-social {
        gap: 10px;
    }

    .footer-social a {
        width: 34px;
        height: 34px;
    }
}

/* ── 13. TABLET: FORMS & INPUTS ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 10px 14px;
        font-size: 0.86rem;
    }

    .form-card {
        padding: 28px;
    }

    .form-card h2 {
        font-size: 1.4rem;
    }

    .card {
        padding: 22px;
    }

    .card h3 {
        font-size: 0.98rem;
    }
}

/* ── 14. TABLET: MODALS & OVERLAYS ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .blog-modal {
        max-width: 820px;
        border-radius: 16px;
    }

    .blog-modal-hero {
        height: 220px;
    }

    .blog-modal-content {
        padding: 24px 32px 30px;
    }

    .blog-modal h2 {
        font-size: 1.6rem;
    }

    .modal {
        max-width: 420px;
    }
}

/* ── 15. TABLET: BILLING / CHECKOUT ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .checkout-steps {
        padding: 12px 18px;
    }

    .checkout-step {
        font-size: 0.8rem;
    }

    .payment-methods {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .payment-method {
        padding: 12px;
    }

    .payment-icon {
        width: 36px;
        height: 36px;
    }

    .payment-info h4 {
        font-size: 0.84rem;
    }

    .card-visual {
        padding: 20px;
    }

    .card-number-display {
        font-size: 1rem;
    }
}

/* ── 16. TABLET: QUOTE BUILDER ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .progress-bar {
        padding: 18px 20px;
    }

    .step-circle {
        width: 32px;
        height: 32px;
        font-size: 0.78rem;
    }

    .step-label {
        font-size: 0.68rem;
    }

    .builder-container {
        max-width: 720px;
    }

    .step-header h2 {
        font-size: 1.4rem;
    }

    .dest-options {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .exp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .budget-display {
        font-size: 2.1rem;
    }

    .summary-card {
        padding: 22px;
    }
}

/* ── 17. TABLET: WHATSAPP FLOAT ── */
@media (min-width: 768px) and (max-width: 1024px) {
    body.page-index .whatsapp-chat-button {
        left: 18px;
        right: auto;
        bottom: 18px;
    }

    .whatsapp-chat-button {
        padding: 12px 16px;
    }

    .whatsapp-chat-button span {
        font-size: 0.82rem;
    }
}

/* ── 18. TABLET: KY TRIP FAB & PANEL ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .ky-trip-tray {
        right: 18px;
        bottom: 20px;
    }

    .ky-trip-panel {
        width: min(380px, calc(100vw - 24px));
    }

    .ky-trip-fab {
        width: 56px;
        height: 56px;
    }

    .ky-booking-added-card {
        max-width: 480px;
    }
}

/* ── 19. TABLET: AGENT CARDS ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .agents-section {
        padding: 52px 20px;
    }

    .agent-card {
        padding: 22px;
    }

    .agent-card-top {
        gap: 12px;
        margin-bottom: 12px;
    }

    .agent-avatar {
        width: 48px;
        height: 48px;
        font-size: 0.85rem;
    }

    .agent-info h3 {
        font-size: 1rem;
    }

    .agent-stats {
        gap: 14px;
    }

    .agent-stat {
        padding: 8px;
    }

    .agent-stat-value {
        font-size: 1rem;
    }
}

/* ── 20. TABLET: BLOG / ARTICLE CARDS ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .article-section {
        padding: 52px 0;
    }

    .article-card {
        padding: 22px;
    }

    .article-card h3 {
        font-size: 0.98rem;
    }

    .article-card p {
        font-size: 0.85rem;
        min-height: 68px;
    }
}

/* ── 21. TABLET: PHOTO GALLERY ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .gallery-masonry {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 22px 16px 36px;
    }

    .gallery-filter {
        padding: 7px 12px;
        font-size: 0.78rem;
    }

    .lightbox-card {
        grid-template-columns: 1fr 1fr;
    }

    .lightbox-info {
        padding: 22px 20px;
    }

    .lightbox-info h3 {
        font-size: 1.2rem;
    }
}

/* ── 22. TABLET: LOGIN ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .login-container {
        max-width: 380px;
        padding: 20px;
    }

    .login-card {
        padding: 32px;
    }

    .login-logo-text {
        font-size: 1.4rem;
    }

    .login-logo-icon {
        height: 56px;
    }
}

/* ── 23. TABLET: POLICY PAGES ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .policy-page {
        max-width: 780px;
    }

    .policy-page h1 {
        font-size: 1.8rem;
    }

    .policy-page h2 {
        font-size: 1.1rem;
    }

    .policy-page p {
        max-width: 680px;
        font-size: 0.95rem;
    }
}

/* ── 24. TABLET: HIDDEN GEMS / SUBPAGES ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .sub-hero {
        padding: 64px 20px 48px;
    }

    .sub-hero h1 {
        font-size: 2.1rem;
    }

    .cat-card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .info-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 20px;
    }

    .cat-card {
        padding: 22px;
    }

    .cat-card h3 {
        font-size: 0.98rem;
    }

    .cat-card p {
        font-size: 0.85rem;
    }

    .info-block h2 {
        font-size: 1.6rem;
    }

    .info-block > p {
        font-size: 0.95rem;
    }
}

/* ── 25. TABLET: CTA BANNER ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .cta-section,
    .cta-banner {
        padding: 48px 20px;
    }

    .cta-content h2,
    .cta-banner h2 {
        font-size: 1.6rem;
    }

    .cta-content p,
    .cta-banner p {
        font-size: 0.92rem;
    }
}

/* ── 26. TABLET: WILDLIFE GUIDE ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .wg-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .wg-section-header h2 {
        font-size: 1.6rem;
    }

    .wg-card-body {
        padding: 22px;
    }

    .wg-card-body h3 {
        font-size: 1.05rem;
    }

    .wg-stat-num {
        font-size: 1.5rem;
    }

    .wg-stat-label {
        font-size: 0.72rem;
    }
}

/* ── 27. TABLET: PORTALS (CRM / AGENT / PARTNER) ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .pipeline-columns {
        grid-template-columns: repeat(3, 1fr);
    }

    body.page-agent-dashboard .sidebar,
    body.page-partner-portal .sidebar {
        width: 200px;
    }

    body.page-agent-dashboard .main,
    body.page-partner-portal .main {
        margin-left: 200px;
    }

    .topbar-search {
        max-width: 280px;
    }

    .content {
        padding: 18px;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-value {
        font-size: 1.45rem;
    }

    .pipeline-card,
    .activity-card,
    .tasks-card {
        padding: 18px;
    }

    .table-header,
    .page-header {
        gap: 10px;
    }
}

/* ── 28. TABLET: HYBRID TRIP / HOTEL DETAILS ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .hybrid-trip-head {
        gap: 16px;
    }

    .hybrid-trip-head h2 {
        font-size: 1.3rem;
    }

    .hotel-detail-panel {
        max-width: 660px;
    }

    .hotel-detail-panel > img {
        height: 240px;
    }

    .hotel-detail-content {
        padding: 22px;
    }

    .hotel-modal-meta {
        gap: 10px;
        padding: 14px 0;
    }

    .hotel-modal-amenities span {
        padding: 5px 9px;
        font-size: 0.75rem;
    }
}

/* ── 29. TABLET: SMART SEARCH OVERLAY ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .smart-search-modal {
        max-width: 680px;
        padding: 22px;
    }

    .smart-search-header h2 {
        font-size: 1.2rem;
    }

    .smart-result-card {
        padding: 12px;
    }
}

/* ── 30. TABLET: KY BOOKING ADDED DIALOG ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .ky-booking-added-card {
        max-width: 500px;
        padding: 28px;
    }

    .ky-booking-added-card h2 {
        font-size: 1.5rem;
    }

    .ky-booking-added-actions {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── 31. TABLET: RETENTION POPUP ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .retention-popup {
        max-width: 320px;
        bottom: 20px;
        left: 20px;
        padding: 16px 18px;
    }

    .retention-popup h4 {
        font-size: 0.9rem;
    }

    .retention-popup p {
        font-size: 0.8rem;
    }
}

/* ── 32. TABLET: KY LOADER ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .ky-loader-panel {
        min-height: 280px;
    }

    .ky-loader-logo {
        width: 70px;
        height: 70px;
    }

    .ky-loader-title {
        font-size: 1.3rem;
    }
}

/* ── 33. TABLET: GLOBAL TYPOGRAPHY & SPACING ── */
@media (min-width: 768px) and (max-width: 1024px) {
    h1 {
        line-height: 1.15;
    }

    h2 {
        line-height: 1.2;
    }

    .section-tag {
        font-size: 0.7rem;
        padding: 4px 12px;
    }

    .badge {
        font-size: 0.72rem;
        padding: 4px 12px;
    }

    .btn {
        padding: 10px 18px;
        font-size: 0.85rem;
    }

    .btn-sm {
        padding: 7px 12px;
        font-size: 0.8rem;
    }

    .btn-lg {
        padding: 12px 24px;
        font-size: 0.92rem;
    }

    /* Smooth scroll offset for sticky headers */
    html {
        scroll-behavior: smooth;
    }

    /* Touch-friendly tap targets */
    .btn,
    .nav-item,
    .filter-tab,
    .tab,
    .tab-btn,
    .search-tab,
    .review-sort-btn,
    .hamburger {
        min-height: 44px;
    }

    /* Card hover effects: subtle lift */
    .destination-card:hover,
    .package-card:hover,
    .experience-card:hover,
    .feature-card:hover,
    .category-card:hover,
    .article-card:hover,
    .trending-card:hover,
    .deal-card:hover,
    .event-card:hover,
    .expert-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09);
    }

    /* Focus states for accessibility */
    .btn:focus-visible,
    .nav-item:focus-visible,
    .filter-tab:focus-visible,
    .tab:focus-visible,
    a:focus-visible {
        outline: 3px solid rgba(27, 58, 140, 0.3);
        outline-offset: 2px;
    }

    /* Image crispness */
    img {
        image-rendering: auto;
    }

    /* Prevent text overflow in cards */
    .category-card h3,
    .resource-card h3,
    .deal-card h3,
    .article-card h3,
    .event-card h3,
    .trending-card h3 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Smooth transitions */
    * {
        transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }
}

/* ── 34. TABLET: LANDSCAPE ORIENTATION BOOST ── */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .hero {
        padding: 68px 20px 52px;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

    .hero-stats {
        gap: 28px;
        margin-top: 28px;
    }

    .hero-float-card.float-tl { top: 10%; left: 3%; width: 120px; height: 90px; }
    .hero-float-card.float-tr { top: 8%; right: 3%; width: 128px; height: 96px; }
    .hero-float-card.float-bl { bottom: 12%; left: 4%; width: 110px; height: 82px; }
    .hero-float-card.float-br { bottom: 10%; right: 4%; width: 122px; height: 88px; }

    .section {
        padding: 44px 0;
    }

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

/* ── 35. TABLET: PORTRAIT ORIENTATION COMPACT ── */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .hero {
        padding: 88px 20px 64px;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .section {
        padding: 56px 0;
    }

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

/* ── 36. TABLET: PRINT STYLES ── */
@media (min-width: 768px) and (max-width: 1024px) and (print) {
    .header,
    .topbar,
    .whatsapp-chat-button,
    .ky-trip-tray,
    .footer,
    .hamburger,
    .mobile-toggle,
    .nav-desktop {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: black;
        background: white;
    }

    .hero {
        background: none !important;
        color: black;
        padding: 20px 0;
    }

    .hero h1 {
        color: black;
        font-size: 24pt;
    }

    .card,
    .package-card,
    .destination-card,
    .feature-card {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    a {
        color: black;
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
    }
}