/* ═══════════════════════════════════════════════════════════════════════
   Vayanta Holidays — premium site theme (public pages)
   Reference: the Premium Destination V2 landing page.
   Pine green + saffron + cream, Fraunces headings + Manrope text, white
   sticky header with the transparent logo, dark utility bar, pine footer.
   Loaded LAST by layouts/new-dashboard so it can settle older rules.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --vh-pine: #0E3B2E;
    --vh-pine-2: #0A2C22;
    --vh-pine-3: #08261D;
    --vh-leaf: #1F7A4D;
    --vh-saffron: #F2A93B;
    --vh-saffron-2: #E4962A;
    --vh-amber: #A65A12;
    --vh-ink: #13201B;
    --vh-body: #3A4A42;
    --vh-muted: #5F6E67;
    --vh-line: #E6E8E2;
    --vh-sage: #EEF4EF;
    --vh-cream: #F5F4EF;
    --vh-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --vh-font-display: 'Fraunces', Georgia, serif;

    /* Older tokens (css/variables.css is shared with admin + checkout) — remapped here only. */
    --primary: #0E3B2E;
    --primary-hover: #0A2C22;
    --primary-dark: #08261D;
    --primary-light: #EEF4EF;
    --primary-ultra-light: #F2F7F3;
    --accent: #A65A12;
    --accent-hover: #8A4A0E;
    --accent-light: #FFF6E5;
    --text: #1C2B24;
    --dark: #13201B;
    --border: #E6E8E2;
    --off-white: #F7F7F2;
    --footer-bg: #0A2C22;
    --font: var(--vh-font);
    --font-heading: var(--vh-font-display);
    --nd-radius-card: 18px;
    /* WhatsApp buttons: leaf green (whatsapp-brand.css reads these). */
    --wa-brand: #1F7A4D;
    --wa-brand-hover: #17623D;
    --wa-brand-shadow: rgba(31, 122, 77, 0.28);
}

::selection { background: rgba(242, 169, 59, .35); color: var(--vh-ink); }

/* ── Headings: Fraunces for page + section titles (cards stay Manrope) ── */
.nd-hero-heading,
.nid-hero-title, .nic-hero-title, .ntd-hero-title, .nd-dest-hero-title, .nd-cat-hero-title,
.ab-hero-title, .ct-hero-title, .nbl-hero-title, .nbs-hero-title, .nsr-hero-title, .tc-hero-title,
.nl-hero-title, .page-title,
.nui-section-title, .nd-dest-section-title, .nd-pkg-section-title, .nd-pkg-title, .nd-styles-title,
.nd-blog-section-title, .nd-blog-title, .nd-why-section-title, .nd-why-title, .nd-cat-section-title,
.ab-title, .ct-section-title, .nbl-section-title, .nic-section-title, .nid-section-title, .ntd-section-title,
.nsr-section-title, .nic-cat-dest-title, .ntd-related-title, .faq-group-title,
.nd-dest-cta-title, .nd-cta-title, .ab-cta-title, .idx-title {
    font-family: var(--vh-font-display) !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em;
    font-optical-sizing: auto;
}
.nd-dest-cta-title, .nd-cta-title { font-size: clamp(1.25rem, 2.2vw, 1.6rem) !important; }
.nd-hero-heading em, .nd-hero-heading i { font-family: var(--vh-font-display); font-style: italic; font-weight: 500; }

/* ── Utility bar (dark pine strip above the header) ── */
.ndl-topbar { background: var(--vh-pine-3) !important; color: rgba(255, 255, 255, .86); font-weight: 600; }
.ndl-topbar-left a, .ndl-topbar-left span { color: rgba(255, 255, 255, .86) !important; font-weight: 600; }
.ndl-topbar-left a:hover { color: #fff !important; }
.ndl-topbar-left i { color: var(--vh-saffron) !important; }
.ndl-topbar-divider { background: rgba(255, 255, 255, .18) !important; }
.ndl-topbar-socials a { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .14) !important; }
.ndl-topbar-socials a:hover { background: var(--vh-saffron) !important; border-color: var(--vh-saffron) !important; color: var(--vh-pine) !important; }

/* ── Header: white, sticky, soft shadow, real transparent logo ── */
.ndl-header {
    border-bottom: 1px solid var(--vh-line) !important;
    box-shadow: 0 8px 24px rgba(14, 59, 46, .07) !important;
}
.ndl-header-inner { height: 76px !important; }
.ndl-logo { min-height: 44px; }
.vh-logo { position: relative; display: block; height: 46px; overflow: hidden; flex: none; }
.vh-logo img { display: block; }
.vh-logo--plain { display: inline-flex; align-items: center; overflow: visible; }
.vh-logo--plain img { height: 100%; width: auto; max-width: 200px; object-fit: contain; }
.vh-logo--light img { filter: brightness(0) invert(1); }
.ndl-nav-link { font-size: 14px !important; font-weight: 600 !important; color: var(--vh-ink) !important; }
.ndl-nav-link:hover, .ndl-nav-item:hover > .ndl-nav-link, .ndl-nav-link.active { color: var(--vh-leaf) !important; }
.ndl-nav-link i { color: var(--vh-muted) !important; }
.ndl-dropdown { border-color: var(--vh-line) !important; border-radius: 16px !important; box-shadow: 0 18px 50px rgba(14, 59, 46, .14) !important; }
.ndl-dropdown a:hover { background: var(--vh-sage) !important; color: var(--vh-pine) !important; }
.ndl-icon-btn { color: var(--vh-ink) !important; }
.ndl-icon-btn:hover { background: var(--vh-sage) !important; color: var(--vh-pine) !important; }
/* Primary header CTA: saffron pill, pine text (as on the landing page). */
.ndl-plan-btn {
    background: var(--vh-saffron) !important;
    color: var(--vh-pine) !important;
    border: 0 !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 16px rgba(242, 169, 59, .38) !important;
}
.ndl-plan-btn:hover { background: var(--vh-saffron-2) !important; color: var(--vh-pine) !important; transform: translateY(-1px); }
.ndl-plan-btn i { color: var(--vh-pine) !important; }

/* ── Mobile drawer ── */
.ndl-mobile-head .vh-logo { height: 38px; }
.ndl-mobile-link:hover, .ndl-mobile-link.active { color: var(--vh-pine) !important; background: var(--vh-sage) !important; }
.ndl-mobile-section { color: var(--vh-amber) !important; letter-spacing: .12em; }
/* The floating WhatsApp button must not sit on top of the open menu. */
.ndl-mobile-nav.open ~ .nd-global-wa-float { display: none !important; }

/* ── Footer: deep pine, white logo, saffron accents ── */
.ndl-footer { background: var(--vh-pine-2) !important; color: rgba(255, 255, 255, .82); }
.ndl-footer-logo .vh-logo { height: 52px; }
.ndl-footer-col-title { color: #fff !important; font-family: var(--vh-font) !important; letter-spacing: .1em; }
.ndl-footer-col-title::after { background: var(--vh-saffron) !important; }
.ndl-footer-links a, .ndl-footer-contact-item, .ndl-footer-contact-item a, .ndl-footer-tagline { color: rgba(255, 255, 255, .78) !important; }
.ndl-footer-links a:hover, .ndl-footer-contact-item a:hover { color: var(--vh-saffron) !important; }
.ndl-footer-links a i, .ndl-footer-contact-item i { color: var(--vh-saffron) !important; }
.ndl-footer-wa-btn { background: var(--vh-leaf) !important; color: #fff !important; border-radius: 12px !important; min-height: 44px; padding: 0 18px !important; }
.ndl-footer-wa-btn:hover { background: #17623D !important; }
.ndl-footer-socials a { background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .16) !important; color: #fff !important; }
.ndl-footer-socials a:hover { background: var(--vh-saffron) !important; border-color: var(--vh-saffron) !important; color: var(--vh-pine) !important; }

/* ── Home hero: the site header now sits above it (no nav overlay) ── */
@media (min-width: 641px) {
    .nd-hero-panel > .nd-hero-content { padding-top: 40px !important; }
}

/* ── Phones ── */
@media (max-width: 768px) {
    .ndl-header-inner { height: 64px !important; gap: 10px !important; padding: 0 16px !important; }
    .ndl-header-right { gap: 4px !important; }
    .vh-logo { height: 36px; }
    .ndl-footer-logo .vh-logo { height: 44px; }
}
@media (max-width: 480px) {
    /* Login / account links live in the menu drawer on phones — keeps the bar uncluttered. */
    .ndl-header-right .nd-auth-wrap { display: none !important; }
}
@media (max-width: 360px) {
    .ndl-header-inner { padding: 0 12px !important; }
    .vh-logo { height: 32px; }
}

/* ── Touch targets on phones + tablets (≥44px): header buttons ── */
@media (max-width: 1024px) {
    .ndl-header-right .ndl-icon-btn, .ndl-header-right .ndl-mobile-toggle, .ndl-header-right .ndl-plan-btn { min-width: 44px !important; min-height: 44px !important; }
}

/* ── Business hours (App\Support\BusinessHours): html.vh-open / html.vh-closed.
      [data-when="open"] shows only in office hours, [data-when="closed"] only outside. ── */
html.vh-closed [data-when="open"], html:not(.vh-closed) [data-when="closed"] { display: none !important; }

/* Top-bar status pill: "Experts online now" / "Closed now · we call back from 9:00 AM". */
.vh-hpill { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-weight: 700; white-space: nowrap; }
.vh-hpill__dot { width: 8px; height: 8px; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 3px rgba(52, 199, 89, .25); flex: none; }
.vh-hpill__dot--off { background: #9AA59F; box-shadow: none; }