/* ==========================================================================
   VIZAGLO.COM — The Vizag Circuit Digital Tourism & Stays Platform
   Identity: Vibrant, Coastal, Young, Energetic, Modern, Premium & Discovery-Led
   Visual Balance: 75% Crisp Light/Sand Surfaces | 25% Vibrant Coastal & Ocean Contrast
   Palette: Ocean Blue (#0077B6) | Electric Aqua (#00B8D9) | Turquoise (#18C7B5)
            Sunset Coral (#FF5A67) | Energetic Orange (#FF8A3D) | Warm Sun (#FFC857)
            TEXT ONLY Deep Navy (#092340) | Warm Sand (#FFF8EE) | Pure White (#FFFFFF)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS & SYSTEM VARIABLES
   -------------------------------------------------------------------------- */
:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Core Vibrant Coastal Palette */
    --vizag-ocean: #0077B6;      /* Bright Ocean Blue */
    --vizag-ocean-dark: #005F92; /* Deep Surf Blue */
    --vizag-aqua: #00B8D9;       /* Electric Aqua */
    --vizag-turquoise: #19C7B5;  /* Fresh Turquoise (Authoritative Locked) */
    --vizag-coral: #FF5A67;      /* Punchy Sunset Coral */
    --vizag-coral-hover: #E84451;/* Rich Coral Hover */
    --vizag-orange: #FF8A3D;     /* Energetic Sunset Orange */
    --vizag-sun: #FFC857;        /* Warm Sun Yellow */
    --vizag-lime: #CDEB4A;       /* Subtle Tropical Lime */
    --vizag-deep: #092340;       /* TEXT/ICONS ONLY — NEVER a background */
    --vizag-deep-light: #123358; /* TEXT ONLY — NEVER a background */
    --vizag-sand: #FFF8EE;       /* Warm Coastal Sand */
    --vizag-sand-light: #FFFDF9; /* Light Shell Sand */
    --vizag-white: #FFFFFF;      /* Crisp Pure White */
    --vizag-bg-alt: #F8FAFD;     /* Soft Coastal Mist */
    --vizag-text: #172033;       /* High Contrast Charcoal */
    --vizag-text-light: #334155; /* Slate Charcoal */
    --vizag-muted: #64748B;      /* Slate Muted */
    --vizag-border: #E2E8F0;     /* Clean Border Rule */
    --vizag-wa-green: #25D366;   /* WhatsApp Brand Green */

    /* Map Aliases */
    --color-ink: var(--vizag-text);
    --color-ink-light: var(--vizag-text-light);
    --color-muted: var(--vizag-muted);
    --color-rule: var(--vizag-border);
    --color-bg: var(--vizag-bg-alt);
    --color-surface: var(--vizag-white);
    --color-surface-warm: var(--vizag-sand);
    --color-ocean: var(--vizag-ocean);
    --color-coastal: var(--vizag-aqua);
    --color-coral: var(--vizag-coral);
    --color-navy: var(--vizag-deep);

    /* Layout Geometry */
    --max-w: 1240px;
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 9999px;

    /* Elevations & Soft Shadows */
    --shadow-subtle: 0 2px 8px rgba(0, 119, 182, 0.05);
    --shadow-card: 0 6px 20px rgba(9, 35, 64, 0.06);
    --shadow-card-hover: 0 16px 36px rgba(0, 119, 182, 0.15);
    --shadow-float: 0 12px 32px rgba(9, 35, 64, 0.22);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
    width: 100%;
}

body {
    font-family: var(--font-sans);
    color: var(--vizag-text);
    background-color: var(--vizag-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    width: 100%;
    position: relative;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
}

button, input, select, textarea {
    font-family: inherit;
}

.container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 20px;
}

.py-12 { padding-top: 48px; padding-bottom: 48px; }
.py-14 { padding-top: 56px; padding-bottom: 56px; }
.my-8  { margin-top: 32px; margin-bottom: 32px; }
.my-12 { margin-top: 48px; margin-bottom: 48px; }
.my-14 { margin-top: 56px; margin-bottom: 56px; }

/* --------------------------------------------------------------------------
   3. GLOBAL HEADER & MASTHEAD (COMPACT, CONFIDENT, VISUAL)
   -------------------------------------------------------------------------- */
/* Top Utility Bar — bright ocean blue, NOT dark navy */
.top-utility-bar {
    background: #0077B6;
    color: #ffffff;
    font-size: 0.78rem;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.utility-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.utility-tagline {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.utility-tagline strong {
    color: #ffffff;
    letter-spacing: 0.5px;
}

.utility-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.utility-link {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.utility-link:hover {
    color: #ffffff;
}

.utility-owner-link {
    color: #ffcdd2;
    font-weight: 600;
}

.utility-sep {
    color: rgba(255, 255, 255, 0.4);
}

/* Main Site Header */
.site-header {
    background: var(--vizag-white);
    border-bottom: 1px solid var(--vizag-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 18px rgba(9, 35, 64, 0.04);
}

.header-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0 10px;
}

.header-brand-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo {
    display: inline-flex;
    align-items: center;
}

.site-brand-logo {
    height: 48px;
    width: auto;
    max-width: 210px;
    object-fit: contain;
}

.logo-fallback-text {
    display: inline-flex;
    flex-direction: column;
}

.logo-primary {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--vizag-ocean);
    letter-spacing: -0.5px;
}

.logo-tagline {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--vizag-coral);
    text-transform: uppercase;
}

/* Header Live Search */
.header-search-wrap {
    flex: 1;
    max-width: 520px;
}

.header-inline-search {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    padding: 4px 6px 4px 16px;
    transition: all 0.2s ease;
}

.header-inline-search:focus-within {
    background: var(--vizag-white);
    border-color: var(--vizag-ocean);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.15);
}

.header-inline-search .search-ico {
    color: var(--vizag-muted);
    flex-shrink: 0;
    margin-right: 10px;
}

.header-inline-search input {
    border: none;
    background: transparent;
    width: 100%;
    font-size: 0.88rem;
    color: var(--vizag-text);
    outline: none;
}

.header-inline-search input::placeholder {
    color: #94a3b8;
}

.btn-search-go {
    background: var(--vizag-ocean);
    color: var(--vizag-white);
    border: none;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-search-go:hover {
    background: var(--vizag-ocean-dark);
}

/* Header Actions */
.header-actions-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.btn-header-list-property {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    background: var(--vizag-coral);
    color: var(--vizag-white);
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(255, 90, 103, 0.25);
}

.btn-header-list-property:hover {
    background: var(--vizag-coral-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 90, 103, 0.35);
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
}

.hamburger-bar {
    width: 24px;
    height: 2.5px;
    background-color: var(--vizag-ocean);
    border-radius: 2px;
}

/* Main Navigation Strip */
.main-nav {
    border-top: 1px solid #f1f5f9;
    padding: 6px 0;
}

.nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.nav-list li a {
    display: block;
    padding: 8px 14px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
    border-radius: var(--radius-pill);
    transition: all 0.15s ease;
}

.nav-list li a:hover {
    color: var(--vizag-ocean);
    background: #f0f9ff;
}

.nav-list li.active a {
    color: var(--vizag-ocean);
    background: #e0f2fe;
    font-weight: 700;
}

.nav-list li.nav-highlight a {
    background: rgba(24, 199, 181, 0.12);
    color: #0d9488;
    border: 1px solid rgba(24, 199, 181, 0.3);
}

.nav-list li.nav-highlight a:hover,
.nav-list li.nav-highlight.active a {
    background: var(--vizag-turquoise);
    color: var(--vizag-white);
}

/* --------------------------------------------------------------------------
   4. HOMEPAGE HERO (HIGH IMPACT, REAL PHOTOGRAPHY, HIGH ENERGY)
   -------------------------------------------------------------------------- */
.home-hero-section {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    color: var(--vizag-white);
    text-align: center;
    padding: 70px 20px 80px;
}

.home-hero-container {
    max-width: 880px;
    margin: 0 auto;
}

.hero-brand-pill {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #bae6fd;
    background: rgba(0, 119, 182, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(186, 230, 253, 0.3);
    margin-bottom: 18px;
}

.home-hero-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--vizag-white);
    margin-bottom: 16px;
    text-shadow: 0 2px 14px rgba(9, 35, 64, 0.45);
    letter-spacing: -0.5px;
}

.home-hero-lead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #f1f5f9;
    max-width: 740px;
    margin: 0 auto 34px;
    text-shadow: 0 1px 8px rgba(9, 35, 64, 0.4);
}

/* 3 Vibrant CTAs */
.home-hero-cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 38px;
}

.btn-hero-explore {
    padding: 14px 30px;
    background: var(--vizag-ocean);
    color: var(--vizag-white);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    border-radius: var(--radius-pill);
    box-shadow: 0 6px 20px rgba(0, 119, 182, 0.4);
    transition: all 0.2s ease;
}

.btn-hero-explore:hover {
    background: var(--vizag-ocean-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 119, 182, 0.55);
}

.btn-hero-stays {
    padding: 14px 30px;
    background: var(--vizag-coral);
    color: var(--vizag-white);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    border-radius: var(--radius-pill);
    box-shadow: 0 6px 20px rgba(255, 90, 103, 0.4);
    transition: all 0.2s ease;
}

.btn-hero-stays:hover {
    background: var(--vizag-coral-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(255, 90, 103, 0.55);
}

.btn-hero-planner {
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--vizag-white);
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    border: 2px solid var(--vizag-turquoise);
    backdrop-filter: blur(6px);
    transition: all 0.2s ease;
}

.btn-hero-planner:hover {
    background: var(--vizag-turquoise);
    color: var(--vizag-white);
    transform: translateY(-2px);
}

/* Discovery Search Card in Hero */
.home-hero-search-card {
    max-width: 680px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.96);
    padding: 8px 10px 8px 22px;
    border-radius: var(--radius-pill);
    box-shadow: 0 14px 38px rgba(9, 35, 64, 0.25);
}

.hero-search-form {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-input-field {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 10px;
}

.search-lens {
    color: var(--vizag-ocean);
    flex-shrink: 0;
}

.search-input-field input {
    border: none;
    background: transparent;
    width: 100%;
    font-size: 1rem;
    color: var(--vizag-text);
    outline: none;
}

.search-input-field input::placeholder {
    color: #64748b;
    font-size: 0.95rem;
}

.btn-hero-search-submit {
    background: var(--vizag-ocean);
    color: var(--vizag-white);
    border: none;
    padding: 12px 28px;
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-hero-search-submit:hover {
    background: var(--vizag-ocean-dark);
}

/* --------------------------------------------------------------------------
   5. SECTION HEADERS & KICKERS
   -------------------------------------------------------------------------- */
.section-head-vibrant, .section-header-flex {
    margin-bottom: 24px;
}

.section-header-flex {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.vibrant-kicker, .vibrant-kicker-coral, .vibrant-kicker-ocean, .vibrant-kicker-turquoise {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.vibrant-kicker { color: var(--vizag-aqua); }
.vibrant-kicker-coral { color: var(--vizag-coral); }
.vibrant-kicker-ocean { color: var(--vizag-ocean); }
.vibrant-kicker-turquoise { color: var(--vizag-turquoise); }

.section-title-clean {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--vizag-text);
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}

.section-sub-clean {
    font-size: 1rem;
    color: var(--vizag-muted);
    max-width: 680px;
    line-height: 1.5;
}

.btn-pill-action {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    background: var(--vizag-white);
    border: 1.5px solid var(--vizag-border);
    border-radius: var(--radius-pill);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--vizag-ocean);
    transition: all 0.2s ease;
}

.btn-pill-action:hover {
    border-color: var(--vizag-ocean);
    background: #f0f9ff;
    transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   6. EXPLORE CATEGORY TILES & BROCHURE CIRCULAR PILLS
   -------------------------------------------------------------------------- */
.section-explore-tiles {
    background: var(--vizag-white);
}

/* Authentic brochure circular pills */
.brochure-pills-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin: 32px 0 40px;
}

.brochure-circle-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: transform 0.25s ease;
}

.brochure-circle-pill:hover {
    transform: translateY(-4px);
}

.brochure-circle-pill .circle-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    box-shadow: 0 6px 18px rgba(9, 35, 64, 0.08);
    transition: all 0.25s ease;
}

.brochure-circle-pill:hover .circle-icon {
    box-shadow: 0 10px 24px rgba(9, 35, 64, 0.16);
    transform: scale(1.06);
}

.brochure-circle-pill.pill-cyan .circle-icon { background: #e0f7fa; border: 2px solid #b2ebf2; }
.brochure-circle-pill.pill-green .circle-icon { background: #e8f5e9; border: 2px solid #c8e6c9; }
.brochure-circle-pill.pill-orange .circle-icon { background: #fff3e0; border: 2px solid #ffe0b2; }
.brochure-circle-pill.pill-coral .circle-icon { background: #ffebee; border: 2px solid #ffcdd2; }
.brochure-circle-pill.pill-purple .circle-icon { background: #f3e5f5; border: 2px solid #e1bee7; }

.brochure-circle-pill .circle-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--vizag-text);
}

.category-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}

.cat-tile-card {
    position: relative;
    height: 200px;
    border-radius: var(--radius-md);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--vizag-white);
    box-shadow: var(--shadow-card);
    transition: all 0.25s ease;
}

.cat-tile-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.tile-badge {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
}

.tile-content h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--vizag-white);
    margin-bottom: 2px;
}

.tile-content p {
    font-size: 0.8rem;
    color: #e2e8f0;
    line-height: 1.35;
}

/* --------------------------------------------------------------------------
   7. CIRCUITS SHOWCASE (WARM SAND / LIGHT TINT BACKGROUND)
   -------------------------------------------------------------------------- */
.section-circuits-showcase {
    background: var(--vizag-sand);
    border-top: 1px solid rgba(0, 119, 182, 0.06);
    border-bottom: 1px solid rgba(0, 119, 182, 0.06);
}

.circuits-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.circuit-card-vibrant {
    background: var(--vizag-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--vizag-border);
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.circuit-card-vibrant:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.circuit-thumb-link {
    position: relative;
    height: 200px;
    display: block;
    overflow: hidden;
}

.circuit-thumb-link img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
    transition: transform 0.4s ease;
}

.circuit-card-vibrant:hover .circuit-thumb-link img {
    transform: scale(1.05);
}

.circuit-time-pill {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 119, 182, 0.85);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
}

.circuit-card-info {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.circuit-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 6px;
}

.circuit-name a:hover {
    color: var(--vizag-ocean);
}

.circuit-tagline {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--vizag-ocean);
    margin-bottom: 10px;
}

.circuit-snippet {
    font-size: 0.88rem;
    color: var(--vizag-text-light);
    margin-bottom: 18px;
    line-height: 1.5;
    flex: 1;
}

.btn-explore-circuit {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--vizag-coral);
    margin-top: auto;
}

.btn-explore-circuit:hover {
    color: var(--vizag-coral-hover);
}

/* --------------------------------------------------------------------------
   8. DESTINATIONS & MUST-VISIT PLACES (CLEAN WHITE)
   -------------------------------------------------------------------------- */
.section-destinations-showcase {
    background: var(--vizag-white);
}

.dest-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.destination-card-clean {
    background: var(--vizag-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--vizag-border);
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.destination-card-clean:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.dest-card-media {
    position: relative;
    height: 200px;
    display: block;
    overflow: hidden;
}

.dest-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.destination-card-clean:hover .dest-card-media img {
    transform: scale(1.05);
}

.dest-pill-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--vizag-ocean);
    color: var(--vizag-white);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
}

.dest-card-details {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.dest-loc-badge {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--vizag-muted);
    margin-bottom: 6px;
}

.dest-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 8px;
}

.dest-title a:hover {
    color: var(--vizag-ocean);
}

.dest-desc {
    font-size: 0.9rem;
    color: var(--vizag-text-light);
    line-height: 1.5;
    margin-bottom: 16px;
    flex: 1;
}

.btn-dest-explore, .dest-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: #f0f9ff;
    color: var(--vizag-ocean);
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    border: 1.5px solid #bae6fd;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-dest-explore:hover, .dest-card-cta:hover {
    background: var(--vizag-coral);
    color: #ffffff;
    border-color: var(--vizag-coral);
    transform: translateX(3px);
}

/* Explore Hub Cards & Circuit Cards */
.dest-card, .circuit-card {
    background: var(--vizag-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--vizag-border);
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.dest-card:hover, .circuit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
    border-color: #bae6fd;
}

.dest-card-thumb-wrap, .circuit-card-thumb {
    position: relative;
    height: 200px;
    display: block;
    overflow: hidden;
    background: transparent;
}

.dest-card-thumb-wrap img, .circuit-card-thumb img {
    width: 100%;
    height: 100% !important; /* override global img { height: auto } */
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
    transition: transform 0.4s ease;
}

.dest-card:hover .dest-card-thumb-wrap img, .circuit-card:hover .circuit-card-thumb img {
    transform: scale(1.05);
}

.dest-card-body, .circuit-card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.dest-card-title, .circuit-card-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 8px;
}

.dest-card-title a, .circuit-card-title a {
    color: inherit;
    text-decoration: none;
}

.dest-card-title a:hover, .circuit-card-title a:hover {
    color: var(--vizag-ocean);
}

.dest-card-desc, .circuit-card-desc {
    font-size: 0.9rem;
    color: var(--vizag-text-light);
    line-height: 1.5;
    margin-bottom: 16px;
    flex: 1;
}

.btn-circuit-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--vizag-ocean);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: all 0.2s ease;
    align-self: flex-start;
}

.btn-circuit-view:hover {
    background: var(--vizag-ocean-dark);
    transform: translateX(3px);
}

/* circuit-duration-badge: ocean blue, NOT dark navy */
.circuit-duration-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 119, 182, 0.85);
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   9. FEATURED STAYS & RESORTS (VERY LIGHT AQUA TINT)
   -------------------------------------------------------------------------- */
.section-stays-showcase {
    background: rgba(0, 184, 217, 0.05);
    border-top: 1px solid rgba(0, 119, 182, 0.06);
    border-bottom: 1px solid rgba(0, 119, 182, 0.06);
}

.stays-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
}

.stay-card-clean {
    background: var(--vizag-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--vizag-border);
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.stay-card-clean:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.stay-card-image-wrap {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.stay-thumb-link {
    display: block;
    width: 100%;
    height: 100%;
}

.stay-thumb-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.stay-card-clean:hover .stay-thumb-link img {
    transform: scale(1.05);
}

.stay-badges-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.badge-trust-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.badge-photo { background: #0f766e; color: #ffffff; }
.badge-reviewed { background: #b45309; color: #ffffff; }
.badge-featured { background: var(--vizag-coral); color: #ffffff; }

/* stay-type-chip: ocean blue, not dark navy */
.stay-type-chip {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 119, 182, 0.85);
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
}

.stay-card-info-box {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.stay-loc-tag {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--vizag-muted);
    margin-bottom: 6px;
}

.stay-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 6px;
}

.stay-title a:hover {
    color: var(--vizag-ocean);
}

.stay-desc {
    font-size: 0.9rem;
    color: var(--vizag-text-light);
    line-height: 1.5;
    margin-bottom: 16px;
    flex: 1;
}

.stay-tariff-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: var(--radius-xs);
    margin-bottom: 16px;
}

.tariff-lbl {
    font-size: 0.78rem;
    color: var(--vizag-muted);
}

.tariff-val {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--vizag-ocean);
}

.stay-cta-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-top: auto;
}

.btn-stay-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: var(--vizag-ocean);
    color: var(--vizag-white);
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: var(--radius-xs);
    transition: background 0.2s ease;
}

.btn-stay-profile:hover {
    background: var(--vizag-ocean-dark);
}

.btn-stay-whatsapp-direct {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--vizag-wa-green);
    color: var(--vizag-white);
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: var(--radius-xs);
    transition: opacity 0.2s ease;
}

.btn-stay-whatsapp-direct:hover {
    opacity: 0.92;
}

/* --------------------------------------------------------------------------
   10. OWNER PITCH & MONETIZATION BANNER — coral/orange gradient
   -------------------------------------------------------------------------- */
.owner-pitch-vibrant {
    background: linear-gradient(135deg, #FF5A67 0%, #FF8A3D 100%);
    border-radius: var(--radius-lg);
    padding: 56px 40px;
    color: var(--vizag-white);
    box-shadow: 0 16px 40px rgba(255, 90, 103, 0.22);
    position: relative;
    overflow: hidden;
}

.owner-pitch-inner {
    max-width: 820px;
}

.owner-kicker-chip {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.22);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 14px;
}

.owner-heading {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--vizag-white);
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

.owner-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.6;
    margin-bottom: 28px;
}

.owner-actions-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-owner-primary {
    padding: 14px 28px;
    background: #ffffff;
    color: var(--vizag-coral);
    font-weight: 800;
    font-size: 0.95rem;
    border-radius: var(--radius-pill);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.btn-owner-primary:hover {
    background: #fff8f8;
    transform: translateY(-2px);
}

.btn-owner-secondary {
    padding: 14px 26px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--vizag-white);
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.2s ease;
}

.btn-owner-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

/* Brochure authentic owner box styling — coral/orange gradient */
.brochure-owner-box {
    background: linear-gradient(135deg, #FF5A67 0%, #FF8A3D 100%);
    border-radius: var(--radius-lg);
    padding: 50px 44px;
    color: var(--vizag-white);
    box-shadow: 0 16px 40px rgba(255, 90, 103, 0.22);
    position: relative;
    overflow: hidden;
}

.owner-pill-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.22);
    padding: 5px 16px;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.brochure-owner-headline {
    font-family: var(--font-heading);
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--vizag-white);
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

.brochure-owner-sub {
    font-size: 1.08rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.6;
    max-width: 820px;
    margin-bottom: 30px;
}

.brochure-checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px 24px;
    margin-bottom: 34px;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.96rem;
    font-weight: 600;
    color: #ffffff;
}

.checklist-item .check-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
    flex-shrink: 0;
}

.brochure-owner-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-brochure-primary {
    padding: 14px 28px;
    background: #ffffff;
    color: var(--vizag-coral);
    font-weight: 800;
    font-size: 0.95rem;
    border-radius: var(--radius-pill);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-brochure-primary:hover {
    background: #fff8f8;
    transform: translateY(-2px);
}

.btn-brochure-secondary {
    padding: 13px 26px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--vizag-white);
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-brochure-secondary:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   11. AD SLOTS & SIDEBAR MONETIZATION CARDS
   -------------------------------------------------------------------------- */
.ad-slot-container {
    margin: 24px 0;
    padding: 14px;
    border-radius: var(--radius-sm);
    background: #f8fafc;
    border: 1px solid var(--vizag-border);
}

.ad-disclosure {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--vizag-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ad-partner-card {
    background: var(--vizag-white);
    border: 1.5px solid #bae6fd;
    border-radius: var(--radius-sm);
    padding: 18px;
    box-shadow: var(--shadow-subtle);
}

.ad-partner-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--vizag-ocean);
    background: #e0f2fe;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    margin-bottom: 8px;
}

.ad-partner-card h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 6px;
}

.ad-partner-card p {
    font-size: 0.85rem;
    color: var(--vizag-text-light);
    line-height: 1.45;
    margin-bottom: 14px;
}

.btn-ad-partner {
    display: inline-block;
    padding: 9px 18px;
    background: var(--vizag-coral);
    color: var(--vizag-white);
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    margin-bottom: 8px;
}

.btn-ad-partner:hover {
    background: var(--vizag-coral-hover);
}

.ad-contact-line {
    display: block;
    font-size: 0.72rem;
    color: var(--vizag-muted);
}

/* Sidebar Sponsor Showcase */
.ad-sponsor-showcase {
    background: #ffffff;
    border: 2px solid #e0f2fe;
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: 0 4px 14px rgba(9, 35, 64, 0.06);
    margin: 28px 0;
}

.sponsor-card-inner {
    display: flex;
    flex-direction: column;
}

.sponsor-tag {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--vizag-ocean);
    background: #e0f7fa;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    margin-bottom: 10px;
}

.sponsor-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 8px;
    line-height: 1.3;
}

.sponsor-desc {
    font-size: 0.88rem;
    color: var(--vizag-muted);
    line-height: 1.5;
    margin-bottom: 14px;
}

.sponsor-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.sponsor-badge {
    font-size: 0.72rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    padding: 3px 8px;
    border-radius: var(--radius-xs);
}

.btn-sponsor-contact {
    display: block;
    text-align: center;
    padding: 10px 16px;
    background: var(--vizag-coral);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.88rem;
    border-radius: var(--radius-pill);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(255, 90, 103, 0.3);
    transition: all 0.2s ease;
    margin-bottom: 12px;
}

.btn-sponsor-contact:hover {
    background: var(--vizag-coral-hover);
    transform: translateY(-1px);
}

.sponsor-contact-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.76rem;
    color: var(--vizag-muted);
    border-top: 1px dashed var(--vizag-border);
    padding-top: 10px;
}

.sponsor-contact-links a {
    color: var(--vizag-ocean);
    font-weight: 600;
    text-decoration: none;
}

.sponsor-contact-links a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   12. PROPERTY PROFILE PAGE (/renuresorts) — PREMIUM STAY ASSET
   -------------------------------------------------------------------------- */
.property-profile-page {
    background: var(--vizag-bg-alt);
}

.property-hero {
    position: relative;
    min-height: 480px;
    background-size: cover;
    background-position: center;
    color: var(--vizag-white);
    display: flex;
    align-items: flex-end;
    padding: 60px 0 45px;
}

.property-hero-content {
    max-width: 900px;
}

.property-hero-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.badge-circuit-pill {
    background: rgba(0, 119, 182, 0.45);
    border: 1px solid rgba(56, 189, 248, 0.6);
    color: #ffffff;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 700;
}

.badge-trust {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.5px;
}

.property-hero-title {
    font-family: var(--font-heading);
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 10px;
    text-shadow: 0 2px 12px rgba(9, 35, 64, 0.5);
}

.property-hero-tagline {
    font-size: 1.25rem;
    color: #f1f5f9;
    margin-bottom: 18px;
    line-height: 1.5;
}

.property-hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: #e2e8f0;
    flex-wrap: wrap;
}

.prop-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.prop-price-badge {
    background: var(--vizag-coral);
    color: #ffffff;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}

/* Action Bar Desktop */
.property-action-bar-wrap {
    background: var(--vizag-white);
    border-bottom: 1px solid var(--vizag-border);
    padding: 16px 0;
    box-shadow: 0 4px 14px rgba(9, 35, 64, 0.04);
}

.property-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.action-direct-tag {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--vizag-coral);
}

.action-direct-hint {
    font-size: 0.85rem;
    color: var(--vizag-muted);
}

.action-bar-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    transition: all 0.2s ease;
}

/* btn-call: ocean blue, NOT dark navy */
.btn-call {
    background: #0077B6;
    color: #ffffff;
}

.btn-call:hover {
    background: var(--vizag-ocean-dark);
}

.btn-whatsapp {
    background: var(--vizag-wa-green);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}

.btn-whatsapp:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.btn-directions {
    background: #f1f5f9;
    color: var(--vizag-text);
    border: 1px solid #cbd5e1;
}

.btn-directions:hover {
    background: #e2e8f0;
}

.btn-website {
    background: transparent;
    color: var(--vizag-ocean);
    border: 1.5px solid var(--vizag-ocean);
}

.btn-website:hover {
    background: #f0f9ff;
}

/* Property Page Grid */
.property-layout-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 60px;
}

.prop-section {
    background: var(--vizag-white);
    border-radius: var(--radius-md);
    padding: 32px;
    border: 1px solid var(--vizag-border);
    margin-bottom: 28px;
    box-shadow: var(--shadow-subtle);
}

.prop-section-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 14px;
    letter-spacing: -0.3px;
}

.prop-section-subtitle {
    font-size: 0.95rem;
    color: var(--vizag-muted);
    margin-bottom: 20px;
}

.prop-prose-content {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--vizag-text-light);
}

.prop-prose-content p {
    margin-bottom: 14px;
}

/* Room Cards Grid */
.prop-rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.prop-room-card {
    background: #f8fafc;
    border: 1px solid var(--vizag-border);
    border-radius: var(--radius-sm);
    padding: 20px;
}

.room-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.room-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--vizag-text);
}

.room-price {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--vizag-coral);
}

.room-desc {
    font-size: 0.88rem;
    color: var(--vizag-text-light);
    line-height: 1.45;
    margin-bottom: 12px;
}

.room-capacity {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--vizag-muted);
}

/* Amenities Checklist */
.prop-amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.amenity-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--vizag-text);
}

.amenity-check {
    color: var(--vizag-turquoise);
    font-weight: 900;
}

/* Gallery Grid */
.prop-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.gallery-item-link {
    height: 150px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: block;
}

.gallery-item-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item-link:hover img {
    transform: scale(1.08);
}

/* Score Card */
.prop-review-score-card {
    border-left: 4px solid var(--vizag-ocean);
}

.score-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.score-card-kicker {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--vizag-ocean);
}

.score-card-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--vizag-text);
}

.score-badge-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    background: var(--vizag-ocean);
    color: #ffffff;
    border-radius: 50%;
}

.score-number {
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
}

.score-scale {
    font-size: 0.65rem;
    opacity: 0.8;
}

.score-review-text {
    font-style: italic;
    color: var(--vizag-text-light);
    margin-bottom: 20px;
    padding: 12px 16px;
    background: #f0f9ff;
    border-radius: var(--radius-xs);
}

.score-breakdown-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.score-label-flex {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    margin-bottom: 4px;
}

.score-progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.score-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--vizag-ocean) 0%, var(--vizag-aqua) 100%);
    border-radius: 999px;
}

/* FAQs */
.prop-faqs-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prop-faq-item {
    border: 1px solid var(--vizag-border);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    background: #f8fafc;
}

.prop-faq-q {
    font-weight: 700;
    cursor: pointer;
    color: var(--vizag-text);
}

.prop-faq-a {
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--vizag-text-light);
    line-height: 1.5;
}

/* Sticky Sidebar */
.prop-sidebar-sticky {
    position: sticky;
    top: 90px;
}

.prop-contact-box {
    background: var(--vizag-white);
    border-radius: var(--radius-md);
    padding: 26px;
    border: 2px solid var(--vizag-border);
    box-shadow: var(--shadow-card);
    margin-bottom: 24px;
}

.direct-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--vizag-coral);
    margin-bottom: 6px;
}

.contact-box-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 12px;
}

.contact-box-price {
    background: #f8fafc;
    padding: 10px 14px;
    border-radius: var(--radius-xs);
    margin-bottom: 16px;
}

.price-label {
    display: block;
    font-size: 0.72rem;
    color: var(--vizag-muted);
}

.price-val {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--vizag-coral);
}

.contact-box-note {
    font-size: 0.85rem;
    color: var(--vizag-muted);
    margin-bottom: 18px;
    line-height: 1.45;
}

.btn-sidebar-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    background: var(--vizag-wa-green);
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 800;
    border-radius: var(--radius-pill);
    margin-bottom: 10px;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}

.btn-sidebar-wa:hover {
    opacity: 0.92;
}

/* btn-sidebar-call: ocean blue, NOT dark navy */
.btn-sidebar-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: #0077B6;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    margin-bottom: 10px;
}

.btn-sidebar-call:hover {
    background: var(--vizag-ocean-dark);
}

.btn-sidebar-directions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px;
    background: #f1f5f9;
    color: var(--vizag-text);
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    border: 1px solid #cbd5e1;
}

/* Sticky Action Bar Mobile */
.property-mobile-sticky-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--vizag-white);
    padding: 10px 14px;
    box-shadow: 0 -4px 16px rgba(9, 35, 64, 0.12);
    z-index: 998;
}

.property-mobile-sticky-bar .m-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: var(--radius-pill);
    font-size: 0.88rem;
    font-weight: 800;
    min-height: 48px;
}

/* m-btn-call: ocean blue, NOT dark navy */
.property-mobile-sticky-bar .m-btn-call {
    background: #0077B6;
    color: #ffffff;
}

.property-mobile-sticky-bar .m-btn-wa {
    background: var(--vizag-wa-green);
    color: #ffffff;
}

.property-mobile-sticky-bar .m-btn-dir {
    background: #f1f5f9;
    color: var(--vizag-text);
    border: 1px solid #cbd5e1;
}

/* --------------------------------------------------------------------------
   13. PERSISTENT FLOATING CONCIERGE WIDGET (HIDDEN NUMBER REVEALED ON TAP)
   -------------------------------------------------------------------------- */
.floating-contact-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
}

.floating-contact-trigger-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vizag-coral) 0%, var(--vizag-orange) 100%);
    color: var(--vizag-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-float);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-contact-trigger-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 16px 36px rgba(255, 90, 103, 0.45);
}

.floating-contact-popup {
    display: none;
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 290px;
    background: var(--vizag-white);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: 0 18px 45px rgba(9, 35, 64, 0.22);
    border: 1.5px solid var(--vizag-border);
    animation: popSlideUp 0.2s ease-out;
}

.floating-contact-popup.is-visible {
    display: block;
}

@keyframes popSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.contact-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.contact-popup-header strong {
    font-size: 1.05rem;
    color: var(--vizag-text);
}

.btn-close-popup {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--vizag-muted);
    cursor: pointer;
    line-height: 1;
}

.contact-popup-note {
    font-size: 0.84rem;
    color: var(--vizag-muted);
    margin-bottom: 14px;
}

.contact-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.btn-contact-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-contact-wa {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.btn-contact-wa svg {
    color: var(--vizag-wa-green);
}

.btn-contact-wa:hover {
    background: #d1fae5;
}

.btn-contact-call {
    background: #f0f9ff;
    color: var(--vizag-ocean-dark);
    border: 1px solid #bae6fd;
}

.btn-contact-call svg {
    color: var(--vizag-ocean);
}

.btn-contact-call:hover {
    background: #e0f2fe;
}

.contact-emails-group {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--vizag-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.btn-contact-mail {
    background: #f8fafc;
    color: var(--vizag-muted);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--radius-xs);
}

.btn-contact-mail:hover {
    color: var(--vizag-ocean);
    background: #f1f5f9;
}

/* --------------------------------------------------------------------------
   14. GLOBAL FOOTER — WARM SAND, LIGHT & INVITING
   -------------------------------------------------------------------------- */
.site-footer {
    background: #FFF8EE;
    color: #172033;
    padding: 60px 0 35px;
    border-top: 3px solid #0077B6;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 44px;
}

.footer-logo {
    display: inline-flex;
    flex-direction: column;
    margin-bottom: 12px;
    text-decoration: none;
}

.f-logo-title {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 900;
    color: #0077B6;
    letter-spacing: -0.5px;
}

.f-logo-sub {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #FF5A67;
    background: rgba(255, 90, 103, 0.1);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    display: inline-block;
    align-self: flex-start;
    margin-top: 3px;
}

.f-tagline {
    font-weight: 700;
    font-size: 1.05rem;
    color: #172033;
    margin-bottom: 6px;
}

.f-desc {
    font-size: 0.88rem;
    color: #64748B;
    line-height: 1.55;
    margin-bottom: 16px;
}

/* Footer Contact Emails Block */
.footer-contact-block {
    background: rgba(0, 119, 182, 0.06);
    border: 1px solid rgba(0, 119, 182, 0.15);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 18px;
}

.f-contact-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #0077B6;
    margin-bottom: 8px;
}

.f-contact-emails {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.f-email-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #172033;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    transition: color 0.15s ease;
}

.f-email-link:hover {
    color: #0077B6;
    text-decoration: underline;
}

.footer-company {
    font-size: 0.82rem;
    color: #64748B;
}

.footer-company strong {
    color: #172033;
}

.footer-company small {
    color: #64748B;
    font-size: 0.78rem;
}

.footer-nav h4 {
    font-size: 0.95rem;
    font-weight: 800;
    color: #172033;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    border-bottom: 2px solid rgba(0, 119, 182, 0.2);
    padding-bottom: 6px;
}

.footer-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-nav ul li a {
    font-size: 0.88rem;
    color: #0077B6;
    text-decoration: none;
    transition: color 0.15s ease, padding-left 0.15s ease;
}

.footer-nav ul li a:hover {
    color: #FF5A67;
    padding-left: 3px;
}

.f-highlight-link {
    color: #FF5A67 !important;
    font-weight: 700;
}

.footer-bottom {
    color: #64748B;
    border-top: 1px solid rgba(0, 119, 182, 0.15);
    padding-top: 22px;
    font-size: 0.82rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-disclaimer {
    font-size: 0.75rem;
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   BREADCRUMBS NAVIGATION (MODERN PILL BREADCRUMB)
   -------------------------------------------------------------------------- */
.breadcrumb-nav {
    background: #f8fafc;
    border-bottom: 1px solid var(--vizag-border);
    padding: 10px 0;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 8px;
    font-size: 0.85rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.breadcrumb-item a {
    color: var(--vizag-ocean);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}

.breadcrumb-item a:hover {
    color: var(--vizag-ocean-dark);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--vizag-text);
    font-weight: 700;
}

.breadcrumb-separator {
    color: #94a3b8;
    user-select: none;
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE BREAKPOINTS (ZERO HORIZONTAL OVERFLOW GUARANTEED)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .property-layout-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .top-utility-bar {
        display: none; /* Keep mobile masthead compact */
    }
    .nav-toggle {
        display: flex;
    }
    .header-search-wrap {
        display: none; /* Search via top mobile toggle or hero */
    }
    .header-main-row {
        padding: 10px 0;
    }
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--vizag-white);
        box-shadow: 0 16px 32px rgba(9, 35, 64, 0.15);
        border-top: 1px solid var(--vizag-border);
        padding: 16px 20px;
    }
    .main-nav.is-open {
        display: block;
    }
    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .nav-list li a {
        padding: 10px 16px;
        font-size: 0.95rem;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    .home-hero-section {
        min-height: 500px;
    }
    .home-hero-title {
        font-size: 2.4rem;
    }
    .home-hero-lead {
        font-size: 1.05rem;
    }
    .property-hero-title {
        font-size: 2.2rem;
    }
    .property-action-bar-wrap {
        display: none;
    }
    .property-mobile-sticky-bar {
        display: flex;
        gap: 8px;
    }
    .property-profile-page {
        padding-bottom: 70px;
    }
    .floating-contact-container {
        bottom: 80px; /* Sits cleanly above sticky bar on mobile */
        right: 16px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .owner-heading {
        font-size: 1.8rem;
    }
}

/* --------------------------------------------------------------------------
   16. PROPERTY PAGE NEARBY PLACES & DESTINATION CARDS
   -------------------------------------------------------------------------- */
.prop-nearby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 18px;
}

.nearby-place-card {
    background: #ffffff;
    border: 1px solid var(--vizag-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(9, 35, 64, 0.05);
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.nearby-place-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 119, 182, 0.12);
    border-color: #bae6fd;
}

.nearby-card-thumb {
    position: relative;
    height: 180px;
    display: block;
    overflow: hidden;
}

.nearby-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.nearby-place-card:hover .nearby-card-thumb img {
    transform: scale(1.05);
}

.nearby-cat-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 119, 182, 0.75);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
}

.nearby-card-body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.nearby-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 6px;
}

.nearby-title a {
    color: inherit;
    text-decoration: none;
}

.nearby-title a:hover {
    color: var(--vizag-ocean);
}

.nearby-desc {
    font-size: 0.88rem;
    color: var(--vizag-muted);
    line-height: 1.5;
    margin-bottom: 14px;
    flex: 1;
}

.nearby-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 8px 16px;
    background: #f0f9ff;
    color: var(--vizag-ocean);
    font-weight: 700;
    font-size: 0.82rem;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid #bae6fd;
    min-height: 48px;
}

.nearby-link:hover {
    background: var(--vizag-coral);
    color: #ffffff;
    border-color: var(--vizag-coral);
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   17. OWNER PACKAGES & MEMBERSHIP TIERS (/list-your-property)
   -------------------------------------------------------------------------- */
/* owner-hero-section: bright ocean gradient, NOT dark navy */
.owner-hero-section {
    background: linear-gradient(135deg, #0077B6 0%, #00B8D9 100%);
    color: #ffffff;
    padding: 60px 0 50px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    margin-bottom: 40px;
}

.owner-hero-inner {
    max-width: 860px;
}

.owner-kicker {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.18);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 14px;
}

.owner-hero-title {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 14px;
}

.owner-hero-lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.6;
    margin-bottom: 24px;
}

.owner-usp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.usp-chip {
    font-size: 0.82rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.benefit-card {
    background: #ffffff;
    border: 1px solid var(--vizag-border);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    box-shadow: 0 4px 14px rgba(9, 35, 64, 0.05);
    transition: transform 0.2s ease;
}

.benefit-card:hover {
    transform: translateY(-4px);
    border-color: #bae6fd;
}

.benefit-card .b-icon {
    font-size: 2rem;
    margin-bottom: 14px;
    display: block;
}

.benefit-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 8px;
}

.benefit-card p {
    font-size: 0.9rem;
    color: var(--vizag-muted);
    line-height: 1.5;
}

/* Packages Grid */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 28px;
    align-items: stretch;
}

.package-card {
    background: #ffffff;
    border: 1.5px solid var(--vizag-border);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    box-shadow: 0 6px 20px rgba(9, 35, 64, 0.06);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.25s ease;
}

.package-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 119, 182, 0.15);
    border-color: var(--vizag-aqua);
}

.package-card-featured {
    border: 2.5px solid var(--vizag-coral);
    box-shadow: 0 12px 32px rgba(255, 90, 103, 0.18);
}

.package-popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--vizag-coral);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 5px 18px;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 12px rgba(255, 90, 103, 0.35);
}

.package-head {
    border-bottom: 1px solid var(--vizag-border);
    padding-bottom: 22px;
    margin-bottom: 22px;
}

.package-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 6px;
}

.package-tagline {
    font-size: 0.88rem;
    color: var(--vizag-muted);
    margin-bottom: 16px;
    line-height: 1.45;
}

.package-price {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--vizag-ocean);
}

.package-features-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
    flex: 1;
}

.package-features-list li {
    font-size: 0.92rem;
    color: var(--vizag-text);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
}

.package-features-list li span {
    color: #10b981;
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
}

.btn-package-select {
    display: block;
    text-align: center;
    padding: 13px 22px;
    background: var(--vizag-ocean);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.92rem;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 119, 182, 0.25);
}

.package-card-featured .btn-package-select {
    background: var(--vizag-coral);
    box-shadow: 0 4px 14px rgba(255, 90, 103, 0.35);
}

.btn-package-select:hover {
    transform: translateY(-2px);
    opacity: 0.95;
}

/* Lead Form Styling */
.lead-form-container {
    background: #ffffff;
    border: 1px solid var(--vizag-border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: 0 10px 30px rgba(9, 35, 64, 0.08);
    max-width: 820px;
    margin: 0 auto;
}

.lead-form-intro h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 8px;
}

.lead-form-intro p {
    font-size: 1rem;
    color: var(--vizag-muted);
    margin-bottom: 26px;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

@media (max-width: 640px) {
    .form-row-2 {
        grid-template-columns: 1fr;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.form-group label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--vizag-text);
}

.form-control {
    padding: 11px 16px;
    border: 1.5px solid var(--vizag-border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--vizag-ocean);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.15);
}

.btn-lead-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background: var(--vizag-coral);
    color: #ffffff;
    font-weight: 800;
    font-size: 1rem;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 6px 20px rgba(255, 90, 103, 0.35);
}

.btn-lead-submit:hover {
    background: var(--vizag-coral-hover);
    transform: translateY(-2px);
}

.lead-success-box {
    background: #ecfdf5;
    border: 1.5px solid #a7f3d0;
    border-radius: var(--radius-sm);
    padding: 24px;
    color: #065f46;
    margin-bottom: 20px;
}


/* ==========================================================================
   18. INTERIOR PAGE HERO HEADERS & UNIVERSAL FILTER PILLS
   Applied across /food, /places, /beaches, /circuits, /stays, /guides,
   /things-to-do, /weekend-trips, /trip-planner, /explore
   ========================================================================== */
.section-hero-header {
    background: linear-gradient(135deg, #0077B6 0%, #00B8D9 55%, #19C7B5 100%);
    padding: 56px 0 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.section-hero-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 40px;
    background: var(--vizag-white);
    clip-path: ellipse(56% 100% at 50% 100%);
}

.section-kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.18);
    padding: 4px 16px;
    border-radius: var(--radius-pill);
    margin-bottom: 14px;
    backdrop-filter: blur(4px);
}

.section-page-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.9rem);
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 14px;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.section-page-desc {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 660px;
    margin: 0 auto 26px;
    line-height: 1.65;
}

/* Universal Filter Pills */
.stay-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 24px;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 22px;
    border-radius: var(--radius-pill);
    font-size: 0.84rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    min-height: 48px;
}

.filter-pill:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transform: translateY(-1px);
}

.filter-pill.active {
    background: #ffffff;
    color: var(--vizag-ocean);
    border-color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* --------------------------------------------------------------------------
   19. DESTINATION & BEACH CARDS (.dest-card)
   Used across /places, /beaches, /explore, /guides, /food, /search, /weekend-trips
   -------------------------------------------------------------------------- */
.dest-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 26px;
}

.dest-card {
    background: var(--vizag-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--vizag-border);
    box-shadow: 0 4px 18px rgba(9, 35, 64, 0.07);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dest-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 36px rgba(0, 119, 182, 0.14);
}

.dest-card-thumb-wrap {
    display: block;
    position: relative;
    height: 210px;
    overflow: hidden;
    flex-shrink: 0;
}

.dest-card-thumb-wrap img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
    transition: transform 0.4s ease;
}

.dest-card:hover .dest-card-thumb-wrap img {
    transform: scale(1.06);
}

.dest-card-cat-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 119, 182, 0.82);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
}

.dest-card-body {
    padding: 20px 20px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.dest-card-loc {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vizag-muted);
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dest-card-loc svg {
    color: var(--vizag-coral);
    flex-shrink: 0;
}

.dest-card-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 8px;
    line-height: 1.25;
}

.dest-card-title a {
    color: inherit;
    text-decoration: none;
}

.dest-card-title a:hover {
    color: var(--vizag-ocean);
}

.dest-card-desc {
    font-size: 0.88rem;
    color: var(--vizag-text-light);
    line-height: 1.58;
    margin-bottom: 14px;
    flex: 1;
}

.dest-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--vizag-border);
}

.dest-card-circuit {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--vizag-aqua);
}

.dest-card-date {
    font-size: 0.78rem;
    color: var(--vizag-muted);
}

.dest-card-cta {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--vizag-ocean);
    text-decoration: none;
    transition: color 0.2s;
}

.dest-card-cta:hover {
    color: var(--vizag-coral);
}

/* --------------------------------------------------------------------------
   20. REGIONAL CIRCUIT CARDS (.circuit-card)
   Used across /circuits, /weekend-trips, /explore, /search
   -------------------------------------------------------------------------- */
.circuits-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 28px;
}

.circuit-card {
    background: var(--vizag-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--vizag-border);
    box-shadow: 0 4px 20px rgba(9, 35, 64, 0.07);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.circuit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 119, 182, 0.15);
}

.circuit-card-thumb {
    display: block;
    position: relative;
    height: 230px;
    overflow: hidden;
    flex-shrink: 0;
    background: transparent;
}

.circuit-card-thumb img {
    width: 100%;
    height: 100% !important; /* override global img { height: auto } */
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
    transition: transform 0.4s ease;
}

.circuit-card:hover .circuit-card-thumb img {
    transform: scale(1.06);
}

/* circuit-duration-badge on cards: ocean blue */
.circuit-duration-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 119, 182, 0.85);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.circuit-card-body {
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.circuit-card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 6px;
    line-height: 1.25;
}

.circuit-card-title a {
    color: inherit;
    text-decoration: none;
}

.circuit-card-title a:hover {
    color: var(--vizag-ocean);
}

.circuit-card-tagline {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--vizag-aqua);
    margin-bottom: 8px;
}

.circuit-card-desc {
    font-size: 0.88rem;
    color: var(--vizag-text-light);
    line-height: 1.58;
    margin-bottom: 16px;
    flex: 1;
}

.circuit-highlights-wrap {
    margin-bottom: 16px;
}

.hl-label {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--vizag-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: block;
    margin-bottom: 8px;
}

.hl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hl-tag {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--vizag-ocean);
    background: rgba(0, 119, 182, 0.09);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(0, 119, 182, 0.18);
}

.circuit-card-footer {
    margin-top: auto;
}

.btn-circuit-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: var(--vizag-ocean);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 119, 182, 0.25);
}

.btn-circuit-view:hover {
    background: var(--vizag-ocean-dark);
    transform: translateY(-2px);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   21. STAYS DIRECTORY & STAY CARDS (.stay-card)
   Used across /stays, /explore, /search
   -------------------------------------------------------------------------- */
.stays-directory-page {
    background: var(--vizag-white);
    min-height: 80vh;
}

.stay-card {
    background: var(--vizag-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--vizag-border);
    box-shadow: 0 4px 18px rgba(9, 35, 64, 0.07);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stay-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 36px rgba(0, 119, 182, 0.15);
}

.stay-card-thumb-wrap {
    position: relative;
    height: 226px;
    overflow: hidden;
    background: transparent;
    flex-shrink: 0;
}

.stay-card-thumb {
    display: block;
    width: 100%;
    height: 100%;
}

.stay-card-thumb img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
    transition: transform 0.4s ease;
}

.stay-card:hover .stay-card-thumb img {
    transform: scale(1.06);
}

.stay-card-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.badge-trust-mini {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.badge-trust-mini.badge-photo    { background: #0f766e; color: #ffffff; }
.badge-trust-mini.badge-reviewed { background: #b45309; color: #ffffff; }
.badge-trust-mini.badge-featured { background: var(--vizag-coral); color: #ffffff; }

/* stay-type-tag: ocean blue, NOT dark navy */
.stay-type-tag {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 119, 182, 0.85);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
}

.stay-card-body {
    padding: 20px 20px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.stay-location-line {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vizag-muted);
    margin-bottom: 7px;
}

.stay-location-line svg {
    color: var(--vizag-coral);
    flex-shrink: 0;
}

.stay-card-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 7px;
    line-height: 1.22;
}

.stay-card-title a {
    color: inherit;
    text-decoration: none;
}

.stay-card-title a:hover {
    color: var(--vizag-ocean);
}

.stay-card-tagline {
    font-size: 0.88rem;
    color: var(--vizag-text-light);
    line-height: 1.55;
    margin-bottom: 14px;
    flex: 1;
}

.stay-card-tariff {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--vizag-sand);
    padding: 7px 12px;
    border-radius: 8px;
    margin-bottom: 14px;
    border: 1px solid rgba(0, 119, 182, 0.08);
}

.stay-card-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-top: auto;
}

.btn-stay-view {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    background: var(--vizag-ocean);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    min-height: 48px;
}

.btn-stay-view:hover {
    background: var(--vizag-ocean-dark);
    transform: translateY(-1px);
    color: #ffffff;
}

.btn-stay-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--vizag-wa-green);
    color: #ffffff;
    border-radius: 10px;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity 0.2s, transform 0.15s;
}

.btn-stay-wa:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   22. FOOD & CUISINE HUB (/food)
   -------------------------------------------------------------------------- */
.food-hub-page {
    background: var(--vizag-white);
    min-height: 80vh;
}

.food-highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
}

.food-hl-card {
    background: var(--vizag-white);
    border: 1px solid var(--vizag-border);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(9, 35, 64, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.food-hl-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(255, 138, 61, 0.15);
    border-color: var(--vizag-orange);
}

.food-icon {
    display: block;
    font-size: 2.8rem;
    margin-bottom: 14px;
    line-height: 1;
}

.food-hl-card h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 10px;
}

.food-hl-card p {
    font-size: 0.88rem;
    color: var(--vizag-text-light);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   23. THINGS TO DO & EXPERIENCES (/things-to-do)
   -------------------------------------------------------------------------- */
.things-to-do-page {
    background: var(--vizag-white);
    min-height: 80vh;
}

.experiences-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 26px;
}

.exp-card {
    background: var(--vizag-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--vizag-border);
    box-shadow: 0 4px 18px rgba(9, 35, 64, 0.07);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.exp-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 36px rgba(25, 199, 181, 0.15);
    border-color: var(--vizag-turquoise);
}

.exp-card-thumb {
    display: block;
    position: relative;
    height: 210px;
    overflow: hidden;
    flex-shrink: 0;
}

.exp-card-thumb img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
    transition: transform 0.4s ease;
}

.exp-card:hover .exp-card-thumb img {
    transform: scale(1.06);
}

.exp-cat-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--vizag-turquoise);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

.exp-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.exp-loc {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vizag-muted);
    margin-bottom: 7px;
    display: block;
}

.exp-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 8px;
    line-height: 1.25;
}

.exp-title a {
    color: inherit;
    text-decoration: none;
}

.exp-title a:hover {
    color: var(--vizag-turquoise);
}

.exp-desc {
    font-size: 0.88rem;
    color: var(--vizag-text-light);
    line-height: 1.58;
    flex: 1;
    margin-bottom: 14px;
}

.exp-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--vizag-turquoise);
    text-decoration: none;
    margin-top: auto;
    transition: color 0.2s;
}

.exp-link:hover {
    color: var(--vizag-ocean);
}

/* --------------------------------------------------------------------------
   24. SINGLE CIRCUIT GUIDE PAGE (/circuits/{slug})
   -------------------------------------------------------------------------- */
.circuit-single-page {
    background: var(--vizag-white);
}

.circuit-hero {
    position: relative;
    min-height: 420px;
    background-size: cover;
    background-position: center;
    color: var(--vizag-white);
    display: flex;
    align-items: flex-end;
    padding: 60px 0 45px;
}

.circuit-hero-content {
    max-width: 860px;
}

.circuit-kicker-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--vizag-aqua);
    background: rgba(0, 184, 217, 0.2);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 14px;
    border: 1px solid rgba(0, 184, 217, 0.4);
    backdrop-filter: blur(4px);
}

.circuit-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.circuit-hero-tagline {
    font-size: 1.15rem;
    color: #e2e8f0;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* circuit-meta-pill: ocean blue tint, NOT dark navy */
.circuit-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(0, 119, 182, 0.15);
    border-radius: var(--radius-pill);
    font-size: 0.88rem;
    color: #ffffff;
    border: 1px solid rgba(0, 119, 182, 0.3);
    backdrop-filter: blur(4px);
}

.circuit-layout-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 40px;
}

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

.circuit-section {
    margin-bottom: 48px;
}

.circuit-section-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 8px;
}

.circuit-section-subtitle {
    font-size: 0.95rem;
    color: var(--vizag-muted);
    margin-bottom: 24px;
}

.circuit-prose {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--vizag-text-light);
}

.circuit-stops-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.circuit-stop-card {
    display: grid;
    grid-template-columns: 48px 160px 1fr;
    gap: 18px;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--vizag-border);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: 0 4px 14px rgba(9, 35, 64, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.circuit-stop-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 119, 182, 0.12);
    border-color: #bae6fd;
}

.stop-number-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--vizag-ocean);
    color: #ffffff;
    font-weight: 900;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stop-thumb {
    width: 160px;
    height: 110px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    display: block;
}

.stop-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stop-body {
    flex: 1;
}

.stop-cat {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--vizag-aqua);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: block;
    margin-bottom: 4px;
}

.stop-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 6px;
}

.stop-title a {
    color: inherit;
    text-decoration: none;
}

.stop-title a:hover {
    color: var(--vizag-ocean);
}

.stop-desc {
    font-size: 0.88rem;
    color: var(--vizag-text-light);
    line-height: 1.5;
    margin-bottom: 8px;
}

.stop-link {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--vizag-ocean);
    text-decoration: none;
}

@media (max-width: 600px) {
    .circuit-stop-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .stop-thumb {
        width: 100%;
        height: 160px;
    }
}

/* --------------------------------------------------------------------------
   25. SINGLE DESTINATION & BEACH PAGE (/places/{slug}, /beaches/{slug})
   -------------------------------------------------------------------------- */
.destination-single-page {
    background: var(--vizag-white);
}

.dest-hero {
    position: relative;
    min-height: 440px;
    background-size: cover;
    background-position: center;
    color: var(--vizag-white);
    display: flex;
    align-items: flex-end;
    padding: 60px 0 45px;
}

.dest-hero-content {
    max-width: 900px;
}

.dest-hero-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.dest-circuit-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 800;
    color: #ffffff;
    background: rgba(0, 119, 182, 0.45);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(0, 184, 217, 0.4);
    text-decoration: none;
    backdrop-filter: blur(4px);
}

.dest-circuit-pill:hover {
    background: rgba(0, 119, 182, 0.75);
    color: #ffffff;
}

.dest-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.dest-hero-lead {
    font-size: 1.15rem;
    color: #e2e8f0;
    line-height: 1.6;
    margin-bottom: 24px;
}

.dest-quick-facts-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    background: rgba(0, 119, 182, 0.75);
    padding: 14px 22px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
}

.qf-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.qf-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--vizag-aqua);
    text-transform: uppercase;
}

.qf-val {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
}

.dest-layout-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 40px;
}

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

.dest-section {
    margin-bottom: 48px;
}

.dest-section-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 14px;
}

.dest-prose {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--vizag-text-light);
}

.dest-sidebar-card {
    background: #ffffff;
    border: 1px solid var(--vizag-border);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: 0 4px 16px rgba(9, 35, 64, 0.06);
    margin-bottom: 26px;
}

.dest-sidebar-card h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   26. SINGLE TRAVEL GUIDE PAGE (/guides/{slug})
   -------------------------------------------------------------------------- */
.guide-single-page {
    background: var(--vizag-white);
}

/* guide-header: bright ocean gradient, NOT dark navy */
.guide-header {
    background: linear-gradient(135deg, #0077B6 0%, #00B8D9 100%);
    padding: 56px 0 48px;
    color: #ffffff;
}

.guide-header-inner {
    max-width: 820px;
}

.guide-kicker-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.18);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 14px;
    text-transform: uppercase;
}

.guide-headline {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.18;
    color: #ffffff;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

.guide-deck {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.6;
    margin-bottom: 20px;
}

.guide-meta-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.guide-hero-media {
    max-width: 1000px;
    margin: -30px auto 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(9, 35, 64, 0.16);
}

.guide-feature-image {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
}

.guide-img-credit {
    display: block;
    font-size: 0.72rem;
    color: var(--vizag-muted);
    text-align: right;
    padding: 6px 12px;
    background: #f8fafc;
}

.guide-body-grid {
    display: grid;
    grid-template-columns: 2.3fr 1fr;
    gap: 48px;
    max-width: 1100px;
}

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

.guide-prose-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--vizag-text-light);
}

.guide-prose-content h2 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin: 36px 0 14px;
}

.guide-prose-content h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin: 28px 0 12px;
}

.guide-prose-content p {
    margin-bottom: 20px;
}

.guide-prose-content ul,
.guide-prose-content ol {
    margin: 0 0 20px 24px;
}

.guide-prose-content li {
    margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   27. INTERACTIVE TRIP PLANNER PAGE (/trip-planner)
   -------------------------------------------------------------------------- */
.trip-planner-page {
    background: var(--vizag-white);
    min-height: 80vh;
}

.planner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 28px;
    padding-bottom: 48px;
}

.planner-tool-card {
    background: var(--vizag-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--vizag-border);
    box-shadow: 0 4px 20px rgba(9, 35, 64, 0.07);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tool-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 28px 20px;
    border-bottom: 1px solid var(--vizag-border);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.tool-card-header h2 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 3px;
}

.tool-card-header p {
    font-size: 0.85rem;
    color: var(--vizag-muted);
}

.tool-icon {
    font-size: 2.2rem;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(0, 119, 182, 0.12);
    flex-shrink: 0;
    line-height: 1;
}

.planner-form {
    padding: 26px 28px 0;
}

.form-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 560px) {
    .form-row-grid { grid-template-columns: 1fr; }
}

.btn-generate-plan {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: var(--vizag-coral);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: 0 6px 20px rgba(255, 90, 103, 0.35);
    margin-bottom: 24px;
    letter-spacing: 0.3px;
    font-family: inherit;
}

.btn-generate-plan:hover {
    background: var(--vizag-coral-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(255, 90, 103, 0.45);
}

.planner-result-box {
    margin: 0 28px 28px;
    background: var(--vizag-sand);
    border-radius: 14px;
    border: 1px solid rgba(0, 119, 182, 0.1);
    overflow: hidden;
}

.plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 22px;
    background: linear-gradient(90deg, #0077B6 0%, #00B8D9 100%);
}

.plan-header h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.plan-badge {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--vizag-sun);
    background: rgba(255, 200, 87, 0.2);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 200, 87, 0.35);
}

.plan-timeline {
    padding: 6px 0;
}

.timeline-step {
    padding: 20px 22px;
    border-bottom: 1px solid rgba(0, 119, 182, 0.08);
}

.timeline-step:last-child {
    border-bottom: none;
}

.step-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--vizag-ocean);
    background: rgba(0, 119, 182, 0.1);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    margin-bottom: 10px;
}

.timeline-step h4 {
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--vizag-text);
    margin-bottom: 8px;
    line-height: 1.35;
}

.timeline-step p {
    font-size: 0.9rem;
    color: var(--vizag-text-light);
    line-height: 1.6;
    margin-bottom: 10px;
}

.step-stay-rec {
    font-size: 0.85rem;
    color: var(--vizag-muted);
    background: #ffffff;
    border: 1px solid var(--vizag-border);
    border-left: 3px solid var(--vizag-turquoise);
    padding: 10px 14px;
    border-radius: 8px;
}

.step-stay-rec a {
    color: var(--vizag-ocean);
    font-weight: 700;
    text-decoration: none;
}

.step-stay-rec a:hover {
    text-decoration: underline;
}

.distance-table-wrap {
    padding: 6px 28px 28px;
    overflow-x: auto;
}

.distance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.distance-table thead {
    background: linear-gradient(90deg, #0077B6 0%, #00B8D9 100%);
}

.distance-table thead th {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 12px 16px;
    text-align: left;
}

.distance-table tbody tr:nth-child(even) {
    background: var(--vizag-sand);
}

.distance-table tbody tr:hover {
    background: #e0f2fe;
}

.distance-table tbody td {
    padding: 12px 16px;
    color: var(--vizag-text);
    border-bottom: 1px solid var(--vizag-border);
}

.distance-table tbody td strong {
    color: var(--vizag-text);
}

/* --------------------------------------------------------------------------
   28. SEARCH PAGE (/search)
   -------------------------------------------------------------------------- */
.search-page {
    background: var(--vizag-white);
    min-height: 80vh;
}

.search-hero-box {
    background: linear-gradient(135deg, #0077B6 0%, #00B8D9 60%, #19C7B5 100%);
    padding: 56px 24px 52px;
    text-align: center;
    border-radius: var(--radius-lg);
    margin-bottom: 36px;
}

.search-page-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 10px;
}

.search-page-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 28px;
    line-height: 1.6;
}

.search-form-full {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
}

.search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: var(--radius-pill);
    padding: 6px 6px 6px 20px;
    box-shadow: 0 8px 28px rgba(9, 35, 64, 0.22);
    gap: 10px;
}

.search-svg {
    color: var(--vizag-muted);
    flex-shrink: 0;
}

.search-input-field {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.98rem;
    font-family: inherit;
    color: var(--vizag-text);
    background: transparent;
    padding: 10px 0;
    min-width: 0;
}

.search-submit-btn {
    padding: 11px 26px;
    background: var(--vizag-ocean);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
    flex-shrink: 0;
    min-height: 48px;
}

.search-submit-btn:hover {
    background: var(--vizag-ocean-dark);
}

.search-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.search-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: all 0.2s ease;
}

.search-pill:hover  { background: rgba(255, 255, 255, 0.3); color: #ffffff; }
.search-pill.active { background: #ffffff; color: var(--vizag-ocean); border-color: #ffffff; }

.search-results-container {
    padding-top: 24px;
}

.search-count-text {
    font-size: 0.95rem;
    color: var(--vizag-muted);
}

.search-group-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--vizag-border);
}

.popular-searches-box {
    background: var(--vizag-sand);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    text-align: center;
    border: 1px solid rgba(0, 119, 182, 0.08);
}

.popular-searches-box h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 20px;
}

.popular-pills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.pop-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: var(--vizag-white);
    border: 1.5px solid var(--vizag-border);
    border-radius: var(--radius-pill);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--vizag-text);
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(9, 35, 64, 0.05);
}

.pop-pill:hover {
    border-color: var(--vizag-ocean);
    color: var(--vizag-ocean);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 119, 182, 0.14);
}

/* --------------------------------------------------------------------------
   29. OWNER COMMERCIAL CTA BANNER & EMPTY STATES
   — coral/ocean gradient, NEVER dark navy
   -------------------------------------------------------------------------- */
.owner-cta-banner {
    background: linear-gradient(135deg, #FF5A67 0%, #FF8A3D 100%);
    border-radius: var(--radius-lg);
    padding: 52px 44px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(255, 90, 103, 0.22);
}

.owner-cta-banner::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.owner-cta-kicker {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.22);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
    text-transform: uppercase;
}

.owner-cta-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.18;
}

.owner-cta-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.62;
    max-width: 600px;
    margin-bottom: 28px;
}

.owner-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.empty-state-card {
    text-align: center;
    padding: 80px 40px;
    background: var(--vizag-sand);
    border-radius: var(--radius-md);
    border: 1px solid var(--vizag-border);
}

.empty-state-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 10px;
}

.empty-state-card p {
    font-size: 0.95rem;
    color: var(--vizag-muted);
    margin-bottom: 22px;
}

/* --------------------------------------------------------------------------
   30. UNIVERSAL LOCKED BUTTON SYSTEM & SECTION RHYTHM HELPERS
   -------------------------------------------------------------------------- */
/* EXPLORE VIZAG → Ocean Blue (#0077B6) */
.btn-action-primary,
.btn-action-explore,
.btn-explore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--vizag-ocean);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 119, 182, 0.28);
    min-height: 48px;
}

.btn-action-primary:hover,
.btn-action-explore:hover,
.btn-explore:hover {
    background: var(--vizag-ocean-dark);
    transform: translateY(-2px);
    color: #ffffff;
}

/* FIND A STAY / LIST PROPERTY → Coral (#FF5A67) */
.btn-action-stay,
.btn-find-stay,
.btn-list-property,
.btn-owner-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--vizag-coral);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(255, 90, 103, 0.35);
    min-height: 48px;
}

.btn-action-stay:hover,
.btn-find-stay:hover,
.btn-list-property:hover,
.btn-owner-primary:hover {
    background: var(--vizag-coral-hover);
    transform: translateY(-2px);
    color: #ffffff;
}

/* PLAN A TRIP → Turquoise (#19C7B5) */
.btn-action-plan,
.btn-plan-trip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--vizag-turquoise);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(25, 199, 181, 0.35);
    min-height: 48px;
}

.btn-action-plan:hover,
.btn-plan-trip:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    color: #ffffff;
}

/* Secondary Ghost — light context */
.btn-action-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    background: transparent;
    color: var(--vizag-ocean);
    font-weight: 700;
    font-size: 0.92rem;
    border-radius: var(--radius-pill);
    border: 2px solid var(--vizag-ocean);
    text-decoration: none;
    transition: all 0.2s;
    min-height: 48px;
}

.btn-action-secondary:hover {
    background: var(--vizag-ocean);
    color: #ffffff;
}

/* Secondary Ghost — dark/coloured context (on coral, orange gradient) */
.btn-owner-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: all 0.2s;
    min-height: 48px;
}

.btn-owner-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Universal section backgrounds per locked rhythm */
.section-explore-vizag, .section-explore-hub      { background: var(--vizag-white); }
.section-circuits, .section-circuit-showcase       { background: var(--vizag-sand); }
.section-places, .section-destinations             { background: var(--vizag-white); }
.section-stays-showcase, .section-featured-stays   { background: rgba(0, 184, 217, 0.05); }
.section-guides, .section-travel-guides            { background: var(--vizag-white); }

/* Spacing Helpers */
.py-8  { padding-top: 64px; padding-bottom: 64px; }
.py-6  { padding-top: 48px; padding-bottom: 48px; }
.py-4  { padding-top: 32px; padding-bottom: 32px; }
.my-12 { margin-top: 96px; margin-bottom: 96px; }
.my-10 { margin-top: 80px; margin-bottom: 80px; }
.my-8  { margin-top: 64px; margin-bottom: 64px; }
.my-6  { margin-top: 48px; margin-bottom: 48px; }
.my-4  { margin-top: 32px; margin-bottom: 32px; }
.mb-6  { margin-bottom: 48px; }

/* Responsive adjustments for new components */
@media (max-width: 768px) {
    .section-hero-header { padding: 40px 0 34px; }
    .section-hero-header::after { display: none; }
    .stays-grid,
    .dest-cards-grid,
    .circuits-cards-grid,
    .experiences-grid,
    .food-highlights-grid { grid-template-columns: 1fr; }
    .planner-grid { grid-template-columns: 1fr; }
    .owner-cta-banner { padding: 36px 24px; }
    .search-hero-box { padding: 36px 18px; }
    .distance-table-wrap { padding: 6px 16px 16px; }
    .planner-result-box, .planner-form { margin-left: 0; margin-right: 0; padding-left: 16px; padding-right: 16px; }
    .brochure-owner-box, .owner-pitch-vibrant { padding: 36px 24px; }
    .lead-form-container { padding: 28px 20px; }
}


/* ==========================================================================
   VIZAGLO POSH MOBILE — PREMIUM BRIGHT COASTAL EXPERIENCE
   Locked Palette. Zero dark backgrounds. Every element 48px+ touch target.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MOBILE NAV — PREMIUM WHITE SLIDE-IN
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    .site-header { box-shadow: 0 2px 12px rgba(0,119,182,0.08); }
    .header-main-row { padding: 12px 0; min-height: 60px; }
    .site-brand-logo { height: 40px; }

    .nav-toggle {
        width: 44px; height: 44px;
        border-radius: 10px;
        background: rgba(0,119,182,0.06);
        display: flex; align-items: center;
        justify-content: center; flex-direction: column;
        gap: 5px; padding: 10px;
    }

    .main-nav {
        background: #FFFFFF;
        box-shadow: 0 20px 40px rgba(0,119,182,0.12);
        border-radius: 0 0 20px 20px;
        padding: 20px 20px 24px;
    }

    .nav-list { gap: 4px; }

    .nav-list li a {
        padding: 12px 16px;
        font-size: 1rem;
        border-radius: 12px;
        min-height: 48px;
        display: flex; align-items: center;
    }

    .nav-list li.nav-highlight a {
        background: rgba(25,199,181,0.08);
        color: var(--vizag-turquoise);
        border: 1.5px solid rgba(25,199,181,0.25);
        margin-top: 8px;
    }

    /* HERO — TALL, PHOTOGRAPHY DOMINANT */
    .home-hero-section {
        min-height: 520px;
        padding: 60px 16px 70px;
        background-position: center 40%;
    }

    .home-hero-title { font-size: 2.15rem; line-height: 1.2; }
    .home-hero-lead  { font-size: 1rem; margin-bottom: 28px; }
    .home-hero-cta-group { gap: 10px; }

    .btn-hero-explore,
    .btn-hero-stays,
    .btn-hero-planner { padding: 13px 22px; font-size: 0.9rem; min-height: 48px; }

    .home-hero-search-card { margin: 0 4px; padding: 6px 8px 6px 16px; }
    .btn-hero-search-submit { padding: 10px 18px; font-size: 0.88rem; min-height: 44px; }

    /* SECTION HEADINGS */
    .section-title-clean { font-size: 1.7rem; }
    .section-page-title  { font-size: 1.7rem; }

    /* CATEGORY TILES — 2-COL */
    .category-tiles-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }
    .cat-tile-card { height: 160px; padding: 14px; border-radius: 14px; }
    .tile-content h3 { font-size: 1rem; }
    .tile-content p  { font-size: 0.72rem; }

    /* BROCHURE PILLS — HORIZONTAL SCROLL */
    .brochure-pills-row {
        flex-wrap: nowrap; overflow-x: auto;
        justify-content: flex-start;
        padding: 8px 4px 16px; gap: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .brochure-pills-row::-webkit-scrollbar { display: none; }
    .brochure-circle-pill { flex-shrink: 0; }
    .brochure-circle-pill .circle-icon { width: 58px; height: 58px; font-size: 1.6rem; }

    /* CARDS — FULL WIDTH STACKED */
    .dest-cards-grid,
    .circuits-cards-grid,
    .stays-grid { grid-template-columns: 1fr; gap: 18px; }

    .circuit-card-thumb,
    .stay-card-thumb-wrap,
    .dest-card-thumb-wrap { height: 200px; }

    /* CTA BUTTONS — 48px min touch */
    .btn-stay-view,
    .btn-stay-wa,
    .btn-circuit-view,
    .btn-dest-explore { min-height: 48px; font-size: 0.92rem; }

    /* FOOTER — POSH MOBILE */
    .site-footer { padding: 44px 0 24px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .f-logo-title { font-size: 1.6rem; }
    .footer-nav h4 { font-size: 0.88rem; margin-bottom: 12px; }
    .footer-nav ul { gap: 10px; }
    .footer-nav ul li a { font-size: 0.88rem; min-height: 36px; display: flex; align-items: center; }

    /* OWNER CTA — VIBRANT MOBILE */
    .brochure-owner-box,
    .owner-pitch-vibrant { padding: 36px 20px; border-radius: 20px; }
    .brochure-owner-headline,
    .owner-heading { font-size: 1.65rem; line-height: 1.25; }
    .brochure-checklist-grid { grid-template-columns: 1fr; gap: 10px; }
    .brochure-owner-actions,
    .owner-actions-row { flex-direction: column; gap: 12px; }
    .btn-brochure-primary,
    .btn-brochure-secondary,
    .btn-owner-primary,
    .btn-owner-secondary { width: 100%; justify-content: center; min-height: 52px; font-size: 1rem; }

    /* FLOATING WIDGET — ABOVE STICKY BAR */
    .floating-contact-container { bottom: 84px; right: 16px; }
    .floating-contact-trigger-btn { width: 52px; height: 52px; }
    .floating-contact-popup { width: 272px; right: -4px; }

    /* PROPERTY STICKY BAR */
    .property-mobile-sticky-bar {
        gap: 8px;
        padding: 10px 16px 16px;
        box-shadow: 0 -4px 20px rgba(0,119,182,0.12);
    }
    .property-mobile-sticky-bar .m-btn { min-height: 48px; border-radius: 12px; font-size: 0.92rem; }
    .property-mobile-sticky-bar .m-btn-call { background: var(--vizag-ocean); color: #ffffff; }
    .property-mobile-sticky-bar .m-btn-wa  { background: var(--vizag-wa-green); color: #ffffff; }

    /* SECTION HERO */
    .section-hero-header { padding: 44px 0 38px; }
    .section-page-desc { font-size: 0.95rem; }
    .filter-pill { padding: 7px 16px; font-size: 0.82rem; min-height: 40px; }

    /* PROPERTY/CIRCUIT HERO */
    .property-hero  { min-height: 340px; padding: 44px 0 32px; }
    .property-hero-title { font-size: 1.8rem; }
    .circuit-hero   { min-height: 340px; padding: 44px 0 32px; }
    .circuit-hero-title { font-size: 1.8rem; }
    .dest-hero      { min-height: 300px; }

    /* PACKAGES */
    .packages-grid { grid-template-columns: 1fr; }
    .package-card  { padding: 28px 20px; }

    /* FORMS */
    .lead-form-container { padding: 28px 16px; border-radius: 16px; }
    .btn-lead-submit { width: 100%; justify-content: center; min-height: 52px; }

    /* UTILITY BAR HIDDEN ON MOBILE */
    .top-utility-bar { display: none; }

    /* PROPERTY CONTENT */
    .prop-section { padding: 22px 16px; border-radius: 16px; }
    .prop-section-title { font-size: 1.3rem; }
    .stop-thumb { display: none; }
    .circuit-stop-card { grid-template-columns: 36px 1fr; }

}

/* Small phones < 400px */
@media (max-width: 400px) {
    .home-hero-title { font-size: 1.9rem; }
    .home-hero-cta-group { flex-direction: column; align-items: stretch; }
    .btn-hero-explore,
    .btn-hero-stays,
    .btn-hero-planner { text-align: center; justify-content: center; }
    .category-tiles-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
    .cat-tile-card { height: 140px; }
    .section-title-clean { font-size: 1.5rem; }
    .container { padding: 0 16px; }
}

/* Tablet 769–1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .dest-cards-grid,
    .circuits-cards-grid { grid-template-columns: repeat(2,1fr); }
    .stays-grid  { grid-template-columns: repeat(2,1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .home-hero-title { font-size: 2.8rem; }
    .brochure-owner-headline,
    .owner-heading { font-size: 2rem; }
}

/* Accessibility focus rings */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #0077B6;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Print — clean light */
@media print {
    .top-utility-bar,
    .floating-contact-container,
    .property-mobile-sticky-bar,
    .nav-toggle { display: none !important; }
    .site-footer { background: #FFF8EE !important; color: #172033 !important; }
    .home-hero-section { background-color: #0077B6 !important; background-image: none !important; }
}

/* ==========================================================================
   VIZAGLO MISSING PAGE-SPECIFIC STYLES
   404, Search, Explore Hub, Owner Landing, Guide Single, Section Helpers
   All using locked Vizaglo palette — ZERO dark backgrounds.
   ========================================================================== */

/* --------------------------------------------------------------------------
   404 NOT FOUND PAGE
   -------------------------------------------------------------------------- */
.error-page-404 {
    background: #FFF8EE;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.error-page-inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.error-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--vizag-coral);
    background: rgba(255,90,103,0.08);
    padding: 5px 16px;
    border-radius: var(--radius-pill);
    margin-bottom: 20px;
    border: 1px solid rgba(255,90,103,0.2);
}

.error-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: var(--vizag-text);
    margin-bottom: 16px;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.error-desc {
    font-size: 1.05rem;
    color: var(--vizag-muted);
    line-height: 1.6;
    margin-bottom: 36px;
}

.error-search-form {
    display: flex;
    gap: 10px;
    max-width: 500px;
    margin: 0 auto 44px;
}

.error-search-input {
    flex: 1;
    padding: 13px 18px;
    border: 1.5px solid var(--vizag-border);
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.error-search-input:focus {
    border-color: var(--vizag-ocean);
    box-shadow: 0 0 0 3px rgba(0,119,182,0.12);
}

.error-search-btn {
    padding: 13px 24px;
    background: var(--vizag-ocean);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}

.error-search-btn:hover {
    background: var(--vizag-ocean-dark);
    transform: translateY(-1px);
}

.error-links-box {
    text-align: left;
}

.error-links-box h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--vizag-text);
    margin-bottom: 18px;
    text-align: center;
}

.error-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
}

.error-link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 16px;
    background: #fff;
    border: 1.5px solid var(--vizag-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-subtle);
}

.error-link-card:hover {
    border-color: var(--vizag-ocean);
    background: #f0f9ff;
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

.error-link-card .elc-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.error-link-card .elc-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--vizag-text);
}

.error-link-card .elc-sub {
    font-size: 0.74rem;
    color: var(--vizag-muted);
}

@media (max-width: 480px) {
    .error-search-form { flex-direction: column; }
    .error-search-btn { width: 100%; justify-content: center; }
    .error-links-grid { grid-template-columns: repeat(2,1fr); }
}

/* --------------------------------------------------------------------------
   EXPLORE HUB PAGE (/explore)
   -------------------------------------------------------------------------- */
.explore-hub-page {
    background: var(--vizag-white);
    min-height: 80vh;
}

.explore-section {
    margin-bottom: 56px;
}

/* --------------------------------------------------------------------------
   SECTION LAYOUT HELPERS (used across many interior pages)
   -------------------------------------------------------------------------- */
.section-title-md {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--vizag-text);
    line-height: 1.25;
    letter-spacing: -0.4px;
    margin-bottom: 8px;
}

.section-sub-md {
    font-size: 1rem;
    color: var(--vizag-muted);
    line-height: 1.6;
    max-width: 680px;
}

.section-center-head {
    text-align: center;
    margin-bottom: 36px;
}

.section-center-head .section-sub-md {
    margin: 8px auto 0;
}

.section-flex-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.link-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--vizag-ocean);
    text-decoration: none;
    padding: 8px 18px;
    border: 1.5px solid var(--vizag-border);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition: all 0.2s;
}

.link-more:hover {
    border-color: var(--vizag-ocean);
    background: #f0f9ff;
    color: var(--vizag-ocean);
    transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   OWNER LANDING PAGE (/list-your-property)
   .owner-hero-section already styled above (ocean gradient)
   -------------------------------------------------------------------------- */
.owner-landing-page {
    background: var(--vizag-white);
}

/* --------------------------------------------------------------------------
   GUIDE SINGLE PAGE — EDITORIAL TYPOGRAPHY
   -------------------------------------------------------------------------- */
.guide-single-page {
    background: var(--vizag-white);
}

.guide-header {
    background: linear-gradient(135deg, #0077B6 0%, #00B8D9 55%, #19C7B5 100%);
    padding: 56px 0 44px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.guide-header::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 36px;
    background: var(--vizag-white);
    clip-path: ellipse(56% 100% at 50% 100%);
}

.guide-header-inner {
    max-width: 840px;
}

.guide-kicker-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.15);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.guide-headline {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.8rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

.guide-deck {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 720px;
}

.guide-meta-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
    flex-wrap: wrap;
}

.guide-author { font-weight: 600; }
.meta-dot { opacity: 0.5; }

.guide-hero-media {
    margin-top: 40px;
    margin-bottom: 8px;
}

.guide-feature-image {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.guide-img-credit {
    display: block;
    font-size: 0.72rem;
    color: var(--vizag-muted);
    margin-top: 6px;
    text-align: right;
    padding-right: 4px;
}

.guide-body-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
}

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

.guide-main-col { min-width: 0; }

.guide-prose-content {
    font-size: 1.05rem;
    line-height: 1.78;
    color: var(--vizag-text-light);
}

.guide-prose-content h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin: 36px 0 14px;
    letter-spacing: -0.3px;
}

.guide-prose-content h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--vizag-text);
    margin: 28px 0 10px;
}

.guide-prose-content p { margin-bottom: 18px; }

.guide-prose-content a {
    color: var(--vizag-ocean);
    text-decoration: underline;
    text-decoration-color: rgba(0,119,182,0.3);
    text-underline-offset: 2px;
}

.guide-prose-content a:hover {
    color: var(--vizag-coral);
    text-decoration-color: var(--vizag-coral);
}

.guide-prose-content ul,
.guide-prose-content ol {
    margin: 14px 0 18px 24px;
}

.guide-prose-content li { margin-bottom: 7px; }

.guide-prose-content blockquote {
    border-left: 4px solid var(--vizag-turquoise);
    padding: 14px 20px;
    margin: 24px 0;
    background: rgba(25,199,181,0.05);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    font-style: italic;
    color: var(--vizag-text);
}

.guide-prose-content img {
    border-radius: var(--radius-sm);
    margin: 20px 0;
    width: 100%;
    object-fit: cover;
}

.guide-sidebar {
    position: sticky;
    top: 90px;
}

.guide-sidebar-card {
    background: var(--vizag-white);
    border: 1px solid var(--vizag-border);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-card);
    margin-bottom: 22px;
}

.guide-sidebar-card h4 {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--vizag-text);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0,119,182,0.12);
}

.guide-toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.guide-toc-list li a {
    display: block;
    font-size: 0.88rem;
    color: var(--vizag-ocean);
    text-decoration: none;
    padding: 5px 8px;
    border-radius: var(--radius-xs);
    transition: all 0.15s;
    font-weight: 500;
}

.guide-toc-list li a:hover {
    background: rgba(0,119,182,0.06);
    color: var(--vizag-ocean);
    padding-left: 12px;
}

/* --------------------------------------------------------------------------
   SEARCH PAGE — FULL BRIGHT TREATMENT
   -------------------------------------------------------------------------- */
.search-page {
    background: var(--vizag-white);
    min-height: 80vh;
    padding-bottom: 60px;
}

.search-hero-box {
    background: linear-gradient(135deg, #0077B6 0%, #00B8D9 55%, #19C7B5 100%);
    padding: 48px 20px 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.search-hero-box::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 32px;
    background: var(--vizag-white);
    clip-path: ellipse(56% 100% at 50% 100%);
}

.search-page-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-weight: 900;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.search-page-subtitle {
    font-size: 1rem;
    color: rgba(255,255,255,0.88);
    margin-bottom: 28px;
}

.search-form-full {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.search-input-wrap {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: var(--radius-pill);
    padding: 6px 8px 6px 20px;
    box-shadow: 0 12px 32px rgba(9,35,64,0.18);
    gap: 10px;
}

.search-svg {
    color: var(--vizag-ocean);
    flex-shrink: 0;
}

.search-input-field {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-family: inherit;
    color: var(--vizag-text);
    outline: none;
    min-width: 0;
}

.search-input-field::placeholder { color: #94a3b8; }

.search-submit-btn {
    padding: 11px 24px;
    background: var(--vizag-ocean);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
    white-space: nowrap;
    min-height: 44px;
}

.search-submit-btn:hover { background: var(--vizag-ocean-dark); }

.search-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    position: relative;
    z-index: 1;
}

.search-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 700;
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.35);
    text-decoration: none;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
    min-height: 38px;
}

.search-pill:hover {
    background: rgba(255,255,255,0.3);
    color: #fff;
}

.search-pill.active {
    background: #fff;
    color: var(--vizag-ocean);
    border-color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

/* Search results layout */
.search-results-layout {
    padding-top: 40px;
}

.search-results-count {
    font-size: 0.9rem;
    color: var(--vizag-muted);
    margin-bottom: 24px;
}

.search-results-count strong {
    color: var(--vizag-text);
    font-weight: 700;
}

.search-no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--vizag-muted);
}

.search-no-results h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vizag-text);
    margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   SEARCH MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .search-input-wrap { padding: 5px 6px 5px 14px; }
    .search-input-field { font-size: 0.92rem; }
    .search-submit-btn { padding: 10px 16px; font-size: 0.85rem; }
}

/* --------------------------------------------------------------------------
   TRIP PLANNER PAGE — BRIGHT INTERACTIVE TOOL
   -------------------------------------------------------------------------- */
.trip-planner-page {
    background: var(--vizag-white);
    min-height: 80vh;
}

.planner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.planner-tool-card {
    background: var(--vizag-white);
    border: 1.5px solid var(--vizag-border);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s;
}

.planner-tool-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.tool-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1.5px solid rgba(0,119,182,0.1);
}

.tool-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.tool-card-header h2 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 3px;
}

.tool-card-header p {
    font-size: 0.85rem;
    color: var(--vizag-muted);
}

.planner-form { display: flex; flex-direction: column; gap: 16px; }

.form-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 480px) {
    .form-row-grid { grid-template-columns: 1fr; }
}

.btn-planner-generate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    background: var(--vizag-turquoise);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    min-height: 48px;
    box-shadow: 0 6px 18px rgba(25,199,181,0.3);
}

.btn-planner-generate:hover {
    background: #14b5a4;
    transform: translateY(-2px);
}

.planner-result-box {
    margin-top: 20px;
    padding: 20px;
    background: rgba(25,199,181,0.06);
    border: 1px solid rgba(25,199,181,0.2);
    border-radius: var(--radius-md);
    display: none;
}

.planner-result-box.is-visible { display: block; }

.planner-itinerary-day {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(0,119,182,0.08);
}

.planner-itinerary-day:last-child { border-bottom: none; margin-bottom: 0; }

.planner-day-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--vizag-turquoise);
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.planner-day-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 8px;
}

.planner-stop-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.planner-stop-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--vizag-text-light);
    line-height: 1.45;
}

.stop-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--vizag-ocean);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Distance table */
.distance-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--vizag-border);
}

.distance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.distance-table th {
    background: rgba(0,119,182,0.06);
    color: var(--vizag-text);
    font-weight: 700;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid rgba(0,119,182,0.12);
    white-space: nowrap;
}

.distance-table td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--vizag-border);
    color: var(--vizag-text-light);
    vertical-align: middle;
}

.distance-table tr:last-child td { border-bottom: none; }
.distance-table tr:hover td { background: rgba(0,119,182,0.03); }

.dist-val {
    font-weight: 700;
    color: var(--vizag-ocean);
}

.dist-time {
    color: var(--vizag-muted);
    font-size: 0.82rem;
}

/* --------------------------------------------------------------------------
   VIZAGNOW PAGE (live news/updates)
   -------------------------------------------------------------------------- */
.vizagnow-page {
    background: var(--vizag-white);
    min-height: 80vh;
}

/* --------------------------------------------------------------------------
   WEEKEND TRIPS & GETAWAYS PAGE
   -------------------------------------------------------------------------- */
.weekend-trips-page {
    background: var(--vizag-white);
    min-height: 80vh;
}

.weekend-featured-banner {
    background: linear-gradient(135deg, #FF5A67 0%, #FF8A3D 100%);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 48px;
    box-shadow: 0 12px 32px rgba(255,90,103,0.25);
}

.weekend-banner-content h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.weekend-banner-content p {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.5;
}

.btn-weekend-plan {
    padding: 13px 26px;
    background: #fff;
    color: var(--vizag-coral);
    font-weight: 800;
    font-size: 0.92rem;
    border-radius: var(--radius-pill);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.btn-weekend-plan:hover {
    background: #fff;
    color: var(--vizag-coral);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

/* --------------------------------------------------------------------------
   CATEGORY LISTING PAGE (generic interior list)
   -------------------------------------------------------------------------- */
.category-listing-page {
    background: var(--vizag-white);
    min-height: 80vh;
}

/* --------------------------------------------------------------------------
   THINGS TO DO PAGE
   -------------------------------------------------------------------------- */
.things-to-do-page {
    background: var(--vizag-white);
    min-height: 80vh;
}

/* --------------------------------------------------------------------------
   OWNER CTA INLINE BANNER (used inside article sidebars)
   -------------------------------------------------------------------------- */
.owner-cta-banner {
    background: linear-gradient(135deg, #FF5A67 0%, #FF8A3D 100%);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    color: #fff;
    text-align: center;
    margin: 28px 0;
}

.owner-cta-banner h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.owner-cta-banner p {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.92);
    margin-bottom: 16px;
    line-height: 1.5;
}

.owner-cta-banner .btn-owner-primary {
    background: #fff;
    color: var(--vizag-coral);
}

.owner-cta-banner .btn-owner-primary:hover {
    background: #fff;
    color: var(--vizag-coral);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   ARTICLE / GUIDE CARD STYLES (used in guides-list, category-layout etc)
   -------------------------------------------------------------------------- */
.article-card {
    background: var(--vizag-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--vizag-border);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s, box-shadow 0.25s;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.article-card-thumb {
    display: block;
    position: relative;
    height: 200px;
    overflow: hidden;
}

.article-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.article-card:hover .article-card-thumb img {
    transform: scale(1.06);
}

.article-type-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--vizag-ocean);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

.article-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.article-card-category {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--vizag-aqua);
    margin-bottom: 8px;
    display: block;
}

.article-card-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--vizag-text);
    line-height: 1.3;
    margin-bottom: 10px;
}

.article-card-title a {
    color: inherit;
    text-decoration: none;
}

.article-card-title a:hover { color: var(--vizag-ocean); }

.article-card-excerpt {
    font-size: 0.86rem;
    color: var(--vizag-text-light);
    line-height: 1.55;
    flex: 1;
    margin-bottom: 14px;
}

.article-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--vizag-border);
    font-size: 0.78rem;
    color: var(--vizag-muted);
}

.article-card-read-more {
    font-weight: 700;
    color: var(--vizag-ocean);
    text-decoration: none;
    transition: color 0.15s;
}

.article-card-read-more:hover { color: var(--vizag-coral); }

/* --------------------------------------------------------------------------
   GUIDE LIST PAGE
   -------------------------------------------------------------------------- */
.guides-list-page {
    background: var(--vizag-white);
    min-height: 80vh;
}

/* --------------------------------------------------------------------------
   CIRCUITS LIST PAGE  
   -------------------------------------------------------------------------- */
.circuits-list-page {
    background: var(--vizag-white);
    min-height: 80vh;
}

/* --------------------------------------------------------------------------
   DESTINATIONS LIST PAGE
   -------------------------------------------------------------------------- */
.destinations-list-page {
    background: var(--vizag-white);
    min-height: 80vh;
}

/* --------------------------------------------------------------------------
   FAQ PAGE
   -------------------------------------------------------------------------- */
.faq-page {
    background: var(--vizag-white);
    min-height: 80vh;
}

.faq-hero {
    background: linear-gradient(135deg, #0077B6 0%, #00B8D9 55%, #19C7B5 100%);
    padding: 56px 0 44px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.faq-hero::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 36px;
    background: var(--vizag-white);
    clip-path: ellipse(56% 100% at 50% 100%);
}

.faq-section {
    max-width: 820px;
    margin: 0 auto;
}

.faq-group {
    margin-bottom: 48px;
}

.faq-group-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(0,119,182,0.12);
    display: flex;
    align-items: center;
    gap: 10px;
}

.faq-item {
    border: 1px solid var(--vizag-border);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.faq-item:hover {
    box-shadow: var(--shadow-subtle);
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 18px 20px;
    text-align: left;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--vizag-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: inherit;
    transition: background 0.15s;
    min-height: 48px;
}

.faq-question:hover { background: rgba(0,119,182,0.04); }

.faq-chevron {
    flex-shrink: 0;
    color: var(--vizag-ocean);
    transition: transform 0.25s;
    font-size: 1rem;
}

.faq-item.is-open .faq-chevron { transform: rotate(180deg); }

.faq-answer {
    display: none;
    padding: 0 20px 18px;
    font-size: 0.94rem;
    color: var(--vizag-text-light);
    line-height: 1.68;
}

.faq-item.is-open .faq-answer { display: block; }

.faq-answer a {
    color: var(--vizag-ocean);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.faq-answer a:hover { color: var(--vizag-coral); }

/* --------------------------------------------------------------------------
   ADMIN CSS — Only used in /admin — kept minimal, professional
   -------------------------------------------------------------------------- */
/* (Admin has its own admin.css — left untouched as it's a separate surface) */

/* --------------------------------------------------------------------------
   MOBILE RESPONSIVE FOR NEW COMPONENTS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    .guide-body-grid { grid-template-columns: 1fr; }

    .guide-headline { font-size: 1.7rem; }

    .guide-header { padding: 40px 0 36px; }

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

    .planner-tool-card { padding: 22px 16px; }

    .error-page-404 { padding: 44px 16px; }

    .error-search-form { flex-direction: column; }

    .error-search-btn { width: 100%; min-height: 48px; }

    .error-links-grid { grid-template-columns: repeat(2,1fr); }

    .weekend-featured-banner {
        padding: 28px 20px;
        flex-direction: column;
        text-align: center;
    }

    .weekend-banner-content h2 { font-size: 1.4rem; }

    .btn-weekend-plan { width: 100%; justify-content: center; }

    .faq-question { font-size: 0.92rem; padding: 14px 16px; }

    .faq-answer { padding: 0 16px 14px; }

    .distance-table { font-size: 0.82rem; }
    .distance-table th,
    .distance-table td { padding: 9px 12px; }

    .section-flex-header { flex-direction: column; align-items: flex-start; }

    .link-more { align-self: flex-start; }

    .guide-sidebar { position: static; }

    .search-hero-box { padding: 36px 16px 36px; }
    .search-page-title { font-size: 1.5rem; }

}

/* ==========================================================================
   VIZAGLO TOURS & TRAVELS — EXTENDED STYLES (v3.0)
   Dedicated styles for Package Cards, Itinerary Timelines, Vehicles Grid, 
   Custom Trip Wizard, and Print Quotations.
   ========================================================================== */

/* 1. Trip Card Styling */
.travel-package-card {
    background: #ffffff;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--vizag-border);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.travel-package-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 119, 182, 0.08);
    border-color: #bee3f8;
}

.travel-card-media {
    position: relative;
    height: 210px;
    background: #e2e8f0;
    overflow: hidden;
}

.travel-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

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

.travel-badge-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(0, 119, 182, 0.92);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    z-index: 2;
}

.travel-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.travel-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--vizag-muted);
    margin-bottom: 8px;
}

.travel-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--vizag-text);
    line-height: 1.35;
    margin-bottom: 8px;
}

.travel-card-title a {
    color: inherit;
    text-decoration: none;
}

.travel-card-title a:hover {
    color: var(--vizag-ocean);
}

.travel-card-desc {
    font-size: 0.88rem;
    color: var(--vizag-text-light);
    line-height: 1.5;
    margin-bottom: 16px;
    flex-grow: 1;
}

.travel-card-pricing {
    border-top: 1px dashed var(--vizag-border);
    padding-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.price-indicative-tag {
    font-size: 0.7rem;
    color: #b45309;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: block;
}

.price-main-val {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--vizag-ocean);
    line-height: 1;
}

.price-unit-sub {
    font-size: 0.75rem;
    color: var(--vizag-muted);
}

/* 2. Single Package Itinerary Timeline */
.itinerary-timeline {
    position: relative;
    padding-left: 32px;
    margin: 24px 0;
}

.itinerary-timeline::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 11px;
    width: 2px;
    background: #cbd5e1;
}

.timeline-step {
    position: relative;
    margin-bottom: 24px;
}

.timeline-step::before {
    content: '';
    position: absolute;
    top: 4px;
    left: -32px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--vizag-ocean);
    border: 4px solid #ffffff;
    box-shadow: 0 0 0 2px var(--vizag-ocean);
}

.timeline-step-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 6px;
}

.timeline-step-body {
    font-size: 0.92rem;
    color: var(--vizag-text-light);
    line-height: 1.6;
}

/* 3. Sticky Mobile Enquiry Bar */
.sticky-mobile-enquiry-bar {
    display: none;
}

@media (max-width: 768px) {
    .sticky-mobile-enquiry-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        padding: 12px 16px;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.08);
        border-top: 1px solid var(--vizag-border);
        z-index: 999;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    .sticky-enquiry-price {
        display: flex;
        flex-direction: column;
    }

    .sticky-enquiry-price .rate {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--vizag-ocean);
    }

    .sticky-enquiry-price .label {
        font-size: 0.68rem;
        color: var(--vizag-muted);
    }

    .sticky-enquiry-actions {
        display: flex;
        gap: 8px;
    }

    .btn-sticky-wa {
        background: #25D366;
        color: #ffffff;
        font-weight: 700;
        font-size: 0.85rem;
        padding: 8px 14px;
        border-radius: var(--radius-pill);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .btn-sticky-quote {
        background: var(--vizag-ocean);
        color: #ffffff;
        font-weight: 700;
        font-size: 0.85rem;
        padding: 8px 14px;
        border-radius: var(--radius-pill);
        text-decoration: none;
    }
}


/* ==========================================================================
   VIZAGLO TRAVELS — HOMEPAGE COMPLETE CSS (v4.0 International Launch)
   All missing styles for homepage-layout.php sections.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HOMEPAGE — HERO SECTION
   -------------------------------------------------------------------------- */
.travel-hero-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #005F92 0%, #0077B6 40%, #0096D6 70%, #00B8D9 100%);
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
}

/* PHOTO MOSAIC GRID — fills the background */
.travel-hero-bg-collage {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-mosaic-grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 100%;
    gap: 3px;
}

.hero-tile {
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: #004d7a;
    overflow: hidden;
}

.tile-main {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
}

.hero-tag {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.25);
}

/* Dark overlay over entire hero for text legibility */
.travel-hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,60,100,0.15) 0%, rgba(0,30,60,0.6) 60%, rgba(0,20,50,0.85) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Hero Content — sits above the overlay */
.hero-content-container {
    position: relative;
    z-index: 2;
    padding-top: 40px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hero-text-badge {
    display: flex;
    margin-bottom: 10px;
}

.brand-pill {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 20px;
}

.travel-hero-headline {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.travel-hero-lead {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    color: rgba(255,255,255,0.92);
    max-width: 680px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.hero-actions-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

/* Trip Search Box — floats at the bottom of hero */
.trip-search-box-card {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    padding: 24px 28px 28px;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.12);
    margin-top: 32px;
}

.search-box-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.box-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.search-box-header strong {
    font-size: 1rem;
    font-weight: 800;
    color: var(--vizag-text);
    display: block;
}

.box-sub {
    font-size: 0.83rem;
    color: var(--vizag-muted);
}

.trip-quick-search-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.form-group-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group-field label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--vizag-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.field-ico {
    font-size: 0.85rem;
}

.form-group-field input,
.form-group-field select {
    padding: 9px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--vizag-text);
    background: #f8fafc;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
}

.form-group-field input:focus,
.form-group-field select:focus {
    border-color: var(--vizag-ocean);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,119,182,0.1);
}

.search-form-bottom {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-search-quote {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: var(--vizag-coral);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(255,90,103,0.3);
    letter-spacing: 0.03em;
}

.btn-search-quote:hover {
    background: var(--vizag-coral-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255,90,103,0.4);
}

.btn-search-browse {
    font-size: 0.88rem;
    color: var(--vizag-ocean);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn-search-browse:hover {
    color: var(--vizag-coral);
}

/* --------------------------------------------------------------------------
   GLOBAL CTA BUTTONS
   -------------------------------------------------------------------------- */
.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    padding: 14px 32px;
    background: var(--vizag-coral);
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 800;
    border-radius: var(--radius-pill);
    transition: all 0.22s ease;
    box-shadow: 0 4px 16px rgba(255,90,103,0.3);
    letter-spacing: 0.04em;
}

.btn-cta-primary:hover {
    background: var(--vizag-coral-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255,90,103,0.4);
    color: #fff;
}

.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    padding: 13px 28px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(255,255,255,0.4);
    transition: all 0.22s ease;
    letter-spacing: 0.04em;
}

.btn-cta-secondary:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
    transform: translateY(-1px);
}

.btn-cta-coral {
    display: inline-flex;
    align-items: center;
    padding: 13px 28px;
    background: var(--vizag-coral);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.9rem;
    border-radius: var(--radius-pill);
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(255,90,103,0.25);
}

.btn-cta-coral:hover {
    background: var(--vizag-coral-hover);
    transform: translateY(-1px);
    color: #fff;
}

.btn-cta-coral-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    background: linear-gradient(135deg, #FFB703 0%, #FB8500 100%);
    color: #0F172A;
    font-weight: 800;
    font-size: 1.05rem;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(251, 133, 0, 0.35);
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}

.btn-cta-coral-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(251, 133, 0, 0.45);
    color: #0F172A;
}

.btn-cta-outline-white {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: transparent;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.88rem;
    border-radius: var(--radius-pill);
    border: 2px solid rgba(255,255,255,0.6);
    transition: all 0.2s;
}

.btn-cta-outline-white:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
    color: #fff;
}

.btn-cta-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #25D366;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.92rem;
    border-radius: var(--radius-pill);
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(37,211,102,0.3);
}

.btn-cta-whatsapp:hover {
    background: #1da851;
    transform: translateY(-1px);
    color: #fff;
    box-shadow: 0 6px 22px rgba(37,211,102,0.4);
}

.btn-cta-whatsapp-large {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    background: #25D366;
    color: #ffffff;
    font-weight: 800;
    font-size: 1rem;
    border-radius: var(--radius-pill);
    transition: all 0.2s;
    box-shadow: 0 4px 18px rgba(37,211,102,0.35);
}

.btn-cta-whatsapp-large:hover {
    background: #1da851;
    transform: translateY(-2px);
    color: #fff;
}

.btn-cta-white-coral {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    background: #ffffff;
    color: var(--vizag-coral);
    font-weight: 800;
    font-size: 1rem;
    border-radius: var(--radius-pill);
    transition: all 0.2s;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
}

.btn-cta-white-coral:hover {
    background: #fff5f5;
    color: var(--vizag-coral-hover);
    transform: translateY(-2px);
}

.btn-view-all {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    background: #f1f5f9;
    color: var(--vizag-ocean);
    font-size: 0.84rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition: all 0.2s;
    border: 1.5px solid #e2e8f0;
}

.btn-view-all:hover {
    background: var(--vizag-ocean);
    color: #fff;
    border-color: var(--vizag-ocean);
}

/* --------------------------------------------------------------------------
   SECTION LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.bg-warm-sand { background: var(--vizag-sand) !important; }

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.section-header-center { margin-bottom: 4px; }

.section-kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vizag-coral);
    margin-bottom: 6px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--vizag-text);
    line-height: 1.2;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.section-sub {
    font-size: 0.97rem;
    color: var(--vizag-muted);
    line-height: 1.6;
    max-width: 640px;
}

.text-center { text-align: center; }
.text-center .section-sub { margin: 0 auto; }

.max-w-4xl { max-width: 900px; }
.max-w-3xl { max-width: 720px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.my-10 { margin-top: 40px; margin-bottom: 40px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }
.mb-6 { margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   TRIP PACKAGE CARDS GRID
   -------------------------------------------------------------------------- */
.trips-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 22px;
}

/* Package card used across homepage sections */
.pkg-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e8f0f8;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.pkg-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0,119,182,0.1);
    border-color: #bee3f8;
}

.pkg-card-media {
    position: relative;
    height: 200px;
    background: linear-gradient(135deg, #0077B6 0%, #00B8D9 100%);
    overflow: hidden;
}

.pkg-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

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

.pkg-cat-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0,119,182,0.9);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 2;
}

.pkg-indicative-flag {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,200,87,0.95);
    color: #5a3800;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 20px;
    z-index: 2;
}

.pkg-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.pkg-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--vizag-muted);
    margin-bottom: 7px;
    flex-wrap: wrap;
}

.pkg-duration-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f0f9ff;
    color: #0077B6;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.pkg-audience-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--vizag-muted);
}

.pkg-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--vizag-text);
    line-height: 1.3;
    margin: 0 0 7px;
}

.pkg-card-title a {
    color: inherit;
    text-decoration: none;
}

.pkg-card-title a:hover { color: var(--vizag-ocean); }

.pkg-highlights-mini {
    font-size: 0.8rem;
    color: var(--vizag-text-light);
    line-height: 1.5;
    margin-bottom: 14px;
    flex-grow: 1;
}

.pkg-pricing-footer {
    border-top: 1px dashed #e2e8f0;
    padding-top: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

.pkg-price-block {
    display: flex;
    flex-direction: column;
}

.pkg-indicative-note {
    font-size: 0.65rem;
    color: #b45309;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.pkg-price-value {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--vizag-ocean);
    line-height: 1;
}

.pkg-price-unit {
    font-size: 0.73rem;
    color: var(--vizag-muted);
    font-weight: 500;
}

.pkg-card-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.btn-pkg-customise {
    font-size: 0.78rem;
    color: var(--vizag-ocean);
    font-weight: 700;
    border: 1.5px solid #bee3f8;
    padding: 6px 12px;
    border-radius: 20px;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-pkg-customise:hover {
    background: var(--vizag-ocean);
    color: #fff;
    border-color: var(--vizag-ocean);
}

.btn-pkg-wa {
    width: 32px;
    height: 32px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.2s;
    text-decoration: none;
    flex-shrink: 0;
}

.btn-pkg-wa:hover {
    background: #1da851;
    transform: scale(1.1);
    color: #fff;
}

.pkg-no-price {
    font-size: 0.88rem;
    color: var(--vizag-muted);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   TRAVEL STYLE CARDS GRID (Section 3)
   -------------------------------------------------------------------------- */
.styles-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}

.style-card {
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    border-radius: 16px;
    text-decoration: none;
    color: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    min-height: 180px;
    position: relative;
    overflow: hidden;
}

.style-card::before {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 120px;
    height: 120px;
    background: rgba(255,255,255,0.07);
    border-radius: 50%;
    pointer-events: none;
}

.style-card:hover {
    transform: translateY(-4px);
    color: #fff;
}

.card-weekend  { background: linear-gradient(135deg, #0077B6, #00B8D9); box-shadow: 0 6px 20px rgba(0,119,182,0.2); }
.card-family   { background: linear-gradient(135deg, #FF8A3D, #FFC857); box-shadow: 0 6px 20px rgba(255,138,61,0.2); color: #fff; }
.card-student  { background: linear-gradient(135deg, #FF5A67, #FF8A3D); box-shadow: 0 6px 20px rgba(255,90,103,0.2); }
.card-women    { background: linear-gradient(135deg, #FF5A67, #FF8A3D); box-shadow: 0 6px 20px rgba(255,90,103,0.2); }
.card-friends  { background: linear-gradient(135deg, #19C7B5, #0077B6); box-shadow: 0 6px 20px rgba(25,199,181,0.2); }
.card-couple   { background: linear-gradient(135deg, #FF8A3D, #FF5A67); box-shadow: 0 6px 20px rgba(255,138,61,0.2); }
.card-premium  { background: linear-gradient(135deg, #FFB703, #FB8500); box-shadow: 0 6px 20px rgba(251,133,0,0.3); }
.card-india    { background: linear-gradient(135deg, #FF8A3D, #FF5A67); box-shadow: 0 6px 20px rgba(255,138,61,0.2); }

.style-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.style-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 5px;
}

.style-card p {
    font-size: 0.83rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.5;
    flex-grow: 1;
    margin-bottom: 12px;
}

.style-link {
    font-size: 0.8rem;
    font-weight: 800;
    color: rgba(255,255,255,0.9);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-top: auto;
}

/* --------------------------------------------------------------------------
   STUDENT CALLOUT BANNER (Section 8)
   -------------------------------------------------------------------------- */
.banner-student-callout {
    background: linear-gradient(135deg, #0077B6 0%, #00B8D9 100%);
    border-radius: 20px;
    padding: 36px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    color: #fff;
    box-shadow: 0 8px 30px rgba(0,119,182,0.2);
}

.callout-content {
    flex: 1;
    min-width: 280px;
}

.badge-student {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.callout-content h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.2;
}

.callout-content p {
    color: rgba(255,255,255,0.88);
    font-size: 0.93rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.callout-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.callout-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.stat-pill {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 30px;
    text-align: center;
}

.stat-pill span {
    display: block;
    font-size: 1.2rem;
    font-weight: 900;
}

/* --------------------------------------------------------------------------
   WOMEN-ONLY SAFETY SPOTLIGHT (Section 9)
   -------------------------------------------------------------------------- */
.women-safety-spotlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.safety-text { flex: 1; }

.safety-points-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 20px 0;
}

.pt-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.pt-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.pt-item strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin-bottom: 2px;
}

.pt-item span {
    font-size: 0.84rem;
    color: var(--vizag-muted);
    line-height: 1.5;
}

.safety-image-col img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(0,119,182,0.12);
    object-fit: cover;
    aspect-ratio: 4/3;
}

.rounded-img-shadow {
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

/* --------------------------------------------------------------------------
   VEHICLE SHOWCASE (Section 11)
   -------------------------------------------------------------------------- */
.vehicles-slider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.vehicle-card-preview {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.vehicle-card-preview:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,119,182,0.1);
}

.veh-card-img {
    position: relative;
    height: 150px;
    background: linear-gradient(135deg, #0077B6, #00B8D9);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 12px;
}

.veh-type-badge {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 20px;
}

.badge-chau {
    background: rgba(0,119,182,0.9);
    color: #fff;
}

.badge-self {
    background: rgba(25,199,181,0.9);
    color: #fff;
}

.veh-card-body {
    padding: 14px 16px;
}

.veh-card-body h3 {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin: 0 0 8px;
}

.veh-meta-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.pill-spec {
    font-size: 0.72rem;
    background: #f0f9ff;
    color: #0369a1;
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 600;
}

.veh-use-desc {
    font-size: 0.8rem;
    color: var(--vizag-muted);
    line-height: 1.5;
    margin-bottom: 12px;
}

.veh-pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #e2e8f0;
    padding-top: 10px;
}

.rate-label {
    display: block;
    font-size: 0.65rem;
    color: #b45309;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rate-value {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--vizag-ocean);
}

.btn-quote-veh {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 6px 14px;
    background: var(--vizag-ocean);
    color: #fff;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-quote-veh:hover {
    background: var(--vizag-ocean-dark);
    color: #fff;
}

.vehicle-cta-banner {
    background: linear-gradient(135deg, #FFF8EE, #FFF0D6);
    border: 1.5px solid #fed7aa;
    border-radius: 16px;
    padding: 28px 24px;
}

.vehicle-cta-banner strong {
    display: block;
    font-size: 1.05rem;
    color: var(--vizag-text);
    margin-bottom: 6px;
}

.vehicle-cta-banner p {
    font-size: 0.9rem;
    color: var(--vizag-muted);
}

/* --------------------------------------------------------------------------
   BUILD YOUR OWN TRIP (Section 12)
   -------------------------------------------------------------------------- */
.build-trip-interactive-box {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: 20px;
    padding: 40px 44px;
    border: 1.5px solid #bee3f8;
}

.badge-custom {
    display: inline-block;
    background: var(--vizag-ocean);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.box-left h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 900;
    color: var(--vizag-text);
    line-height: 1.2;
    margin: 0 0 12px;
}

.box-left p {
    font-size: 0.93rem;
    color: var(--vizag-muted);
    line-height: 1.6;
    margin-bottom: 16px;
}

.custom-perks-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.custom-perks-list li {
    font-size: 0.88rem;
    color: var(--vizag-text-light);
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.instant-wa-box {
    background: #fff;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0,119,182,0.1);
    border: 1.5px solid #bee3f8;
}

.wa-large-icon {
    display: block;
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.instant-wa-box h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin: 0 0 8px;
}

.instant-wa-box p {
    font-size: 0.84rem;
    color: var(--vizag-muted);
    line-height: 1.5;
    margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   HOW IT WORKS — STEPS (Section 13)
   -------------------------------------------------------------------------- */
.how-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.step-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px 22px;
    text-align: center;
    border: 1.5px solid #e2e8f0;
    transition: border-color 0.2s, transform 0.2s;
}

.step-card:hover {
    border-color: var(--vizag-ocean);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,119,182,0.08);
}

.step-num-circle {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--vizag-ocean), var(--vizag-aqua));
    color: #fff;
    font-size: 1.3rem;
    font-weight: 900;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    box-shadow: 0 4px 14px rgba(0,119,182,0.25);
}

.step-card h3 {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--vizag-ocean);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 8px;
}

.step-card p {
    font-size: 0.85rem;
    color: var(--vizag-muted);
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   WHY VIZAGLO — BENEFITS GRID (Section 14)
   -------------------------------------------------------------------------- */
.why-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.benefit-box {
    background: #fff;
    border-radius: 16px;
    padding: 28px 22px;
    border: 1.5px solid #e2e8f0;
    transition: all 0.2s;
}

.benefit-box:hover {
    border-color: var(--vizag-ocean);
    box-shadow: 0 8px 24px rgba(0,119,182,0.08);
    transform: translateY(-2px);
}

.benefit-ico {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 12px;
}

.benefit-box h4 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin: 0 0 8px;
}

.benefit-box p {
    font-size: 0.84rem;
    color: var(--vizag-muted);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   FAQ ACCORDION (Section 15)
   -------------------------------------------------------------------------- */
.faq-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

details.faq-item {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s;
}

details.faq-item[open] {
    border-color: var(--vizag-ocean);
}

summary.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--vizag-text);
    cursor: pointer;
    list-style: none;
    gap: 12px;
}

summary.faq-question::-webkit-details-marker { display: none; }

.faq-arrow {
    color: var(--vizag-ocean);
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: transform 0.2s;
}

details[open] .faq-arrow {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 20px 18px;
}

.faq-answer p {
    font-size: 0.9rem;
    color: var(--vizag-muted);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   FINAL CTA SECTION (Section 16)
   -------------------------------------------------------------------------- */
.section-final-cta {
    background: linear-gradient(135deg, var(--vizag-ocean) 0%, #005F92 50%, #00B8D9 100%);
    color: #fff;
    text-align: center;
}

.badge-cta-white {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.final-cta-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.15;
}

.final-cta-sub {
    font-size: 1rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.6;
}

.final-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.final-disclaimer-note {
    color: rgba(255,255,255,0.65);
    font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   LEGAL PAGE STYLES (Privacy Policy, Terms & Conditions)
   -------------------------------------------------------------------------- */
.legal-page-hero {
    background: linear-gradient(135deg, #0077B6 0%, #005F92 60%, #003d6e 100%);
    padding: 60px 0 50px;
    color: #fff;
}

.legal-hero-kicker {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.9);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
    display: block;
    width: fit-content;
}

.legal-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.15;
}

.legal-hero-meta {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.8);
}

.legal-content-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 48px 20px 72px;
}

.legal-toc {
    background: #f0f9ff;
    border: 1.5px solid #bee3f8;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 36px;
}

.legal-toc h3 {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--vizag-ocean);
    margin: 0 0 10px;
}

.legal-toc ol {
    margin: 0;
    padding-left: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px;
}

.legal-toc li a {
    font-size: 0.83rem;
    color: var(--vizag-ocean);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-disclaimer-callout {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin-bottom: 32px;
}

.legal-disclaimer-callout strong {
    display: block;
    font-size: 0.88rem;
    color: #92400e;
    margin-bottom: 4px;
}

.legal-disclaimer-callout p {
    font-size: 0.84rem;
    color: #78350f;
    line-height: 1.5;
    margin: 0;
}

.legal-section {
    margin-bottom: 36px;
    padding-bottom: 32px;
    border-bottom: 1px solid #f1f5f9;
}

.legal-section:last-child {
    border-bottom: none;
}

.legal-section h2 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--vizag-text);
    margin: 0 0 14px;
    padding-top: 8px;
}

.legal-section p {
    font-size: 0.93rem;
    color: #334155;
    line-height: 1.75;
    margin-bottom: 12px;
}

.legal-section ul,
.legal-section ol {
    padding-left: 22px;
    margin-bottom: 12px;
}

.legal-section li {
    font-size: 0.92rem;
    color: #334155;
    line-height: 1.7;
    margin-bottom: 4px;
}

.legal-section strong {
    color: var(--vizag-text);
    font-weight: 700;
}

.legal-contact-box {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 28px;
    margin-top: 12px;
}

.legal-contact-box p {
    margin: 4px 0;
}

/* --------------------------------------------------------------------------
   RESPONSIVE OVERRIDES FOR HOMEPAGE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .hero-mosaic-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 120px;
    }

    .tile-main {
        grid-row: 1;
        grid-column: 1 / 3;
    }

    .tile-sub-1 { grid-column: 1; }
    .tile-sub-2 { grid-column: 2; }
    .tile-sub-3 { display: none; }

    .travel-hero-headline { font-size: 1.9rem; }

    .trip-search-box-card {
        padding: 18px 16px 20px;
        border-radius: 12px 12px 0 0;
    }

    .search-form-grid { grid-template-columns: 1fr 1fr; }

    .banner-student-callout {
        flex-direction: column;
        padding: 28px 22px;
    }

    .callout-stats { flex-direction: row; flex-wrap: wrap; }
    .stat-pill { flex: 1; min-width: 120px; }

    .women-safety-spotlight { grid-template-columns: 1fr; }
    .safety-image-col { display: none; }

    .build-trip-interactive-box {
        grid-template-columns: 1fr;
        padding: 28px 22px;
    }

    .trips-cards-grid { grid-template-columns: 1fr; }
    .styles-category-grid { grid-template-columns: 1fr 1fr; }
    .vehicles-slider-grid { grid-template-columns: 1fr; }
    .how-steps-grid { grid-template-columns: 1fr 1fr; }
    .why-benefits-grid { grid-template-columns: 1fr 1fr; }

    .final-cta-buttons { flex-direction: column; align-items: center; }
    .section-header-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .search-form-grid { grid-template-columns: 1fr; }
    .styles-category-grid { grid-template-columns: 1fr; }
    .how-steps-grid { grid-template-columns: 1fr; }
    .why-benefits-grid { grid-template-columns: 1fr; }
    .hero-actions-row { flex-direction: column; }
    .btn-cta-primary, .btn-cta-secondary { width: 100%; justify-content: center; }
}

/* =============================================================================
   VIZAGLO — SUPPLEMENTAL CSS PATCH
   Trip Card Classes (package-card.php uses .trip-card-item)
   Legal Pages Styling
   Footer Bottom Links
   ============================================================================= */

/* ─── TRIP CARD ITEM (package-card.php) ─── */
.trip-card-item {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.trip-card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(255,107,53,0.13);
}
.trip-card-media {
    position: relative;
    height: 210px;
    background-size: cover;
    background-position: center;
    background-color: #FDEBD0;
    flex-shrink: 0;
}
.card-media-overlay-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.card-top-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    z-index: 2;
}
.badge-cat {
    background: #FF6B35;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
}
.badge-duration {
    background: rgba(255,255,255,0.92);
    color: #172033;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}
.card-audience-badge {
    position: absolute;
    bottom: 10px;
    left: 12px;
    z-index: 2;
}
.card-audience-badge span {
    background: rgba(255,255,255,0.9);
    color: #172033;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}
.trip-card-content {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.card-destination-tag {
    display: flex;
    gap: 6px;
    font-size: 0.72rem;
    color: #7A7E85;
    font-weight: 500;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.card-destination-tag .tag-from { color: #B0B4BC; }

.trip-card-item .card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #172033;
    margin: 0 0 8px;
    line-height: 1.35;
}
.trip-card-item .card-title a {
    color: inherit;
    text-decoration: none;
}
.trip-card-item .card-title a:hover { color: #FF6B35; }

.card-excerpt {
    font-size: 0.82rem;
    color: #565C66;
    line-height: 1.55;
    margin-bottom: 10px;
}
.card-mini-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.card-mini-highlights span {
    font-size: 0.72rem;
    color: #2E7D32;
    background: #F1F8E9;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}
.card-pricing-block {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #F3F4F6;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}
.price-info { flex: 1 1 auto; }
.price-kicker {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9CA3AF;
    font-weight: 600;
    margin-bottom: 2px;
}
.price-display { display: flex; align-items: baseline; gap: 4px; }
.price-num {
    font-size: 1.25rem;
    font-weight: 800;
    color: #FF6B35;
}
.price-num.quote-only {
    font-size: 0.92rem;
    color: #7B61FF;
}
.price-basis {
    font-size: 0.73rem;
    color: #9CA3AF;
    font-weight: 500;
}
.price-disclaimer-pill {
    font-size: 0.62rem;
    background: #FFF3E0;
    color: #E65100;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.card-actions-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
}
.btn-card-customise {
    flex: 1;
    text-align: center;
    background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
    color: #fff !important;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: opacity 0.18s;
    white-space: nowrap;
}
.btn-card-customise:hover { opacity: 0.88; }
.btn-card-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #fff !important;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.18s;
}
.btn-card-wa:hover { background: #1EBE5A; }
.btn-card-details {
    font-size: 0.78rem;
    font-weight: 600;
    color: #FF6B35 !important;
    text-decoration: none;
    padding: 9px 8px;
    flex-shrink: 0;
    white-space: nowrap;
}
.btn-card-details:hover { color: #E55A2B !important; }

/* ─── LEGAL PAGES ─── */
.legal-page-hero {
    background: linear-gradient(135deg, #FFF8F0 0%, #FFF1E6 40%, #FDEBD0 100%);
    padding: 60px 0 48px;
    border-bottom: 1px solid #FFE0C2;
}
.legal-hero-inner {
    max-width: 700px;
}
.legal-page-badge {
    display: inline-block;
    background: #FF6B35;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}
.legal-page-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: #172033;
    margin: 0 0 10px;
    line-height: 1.2;
}
.legal-page-subtitle {
    font-size: 1rem;
    color: #565C66;
    margin-bottom: 8px;
}
.legal-page-updated {
    font-size: 0.82rem;
    color: #9CA3AF;
}
@media (max-width: 600px) {
    .legal-page-hero { padding: 40px 0 32px; }
    .legal-page-title { font-size: 1.6rem; }
}

.legal-content-section {
    padding: 56px 0 80px;
    background: #FFFAF6;
}
.legal-content-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 900px) {
    .legal-content-layout {
        grid-template-columns: 1fr;
    }
    .legal-toc-sidebar { order: -1; }
}

/* TOC Sidebar */
.legal-toc-sidebar { position: sticky; top: 88px; }
.legal-toc-card {
    background: #fff;
    border: 1px solid #FFE0C2;
    border-radius: 14px;
    padding: 22px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.toc-heading {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #FF6B35;
    margin: 0 0 14px;
}
.toc-list {
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: toc;
}
.toc-list li {
    margin-bottom: 6px;
}
.toc-list a {
    font-size: 0.78rem;
    color: #565C66;
    text-decoration: none;
    line-height: 1.4;
    display: block;
    padding: 3px 0;
    border-left: 2px solid transparent;
    padding-left: 8px;
    transition: color 0.15s, border-color 0.15s;
}
.toc-list a:hover {
    color: #FF6B35;
    border-left-color: #FF6B35;
}
.toc-cta { margin-top: 18px; padding-top: 14px; border-top: 1px solid #F3F4F6; }
.btn-toc-contact {
    display: block;
    text-align: center;
    background: #FF6B35;
    color: #fff !important;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 9px 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.18s;
}
.btn-toc-contact:hover { background: #E55A2B; }

/* Legal Article */
.legal-article { max-width: 760px; }

.legal-notice-box {
    background: linear-gradient(135deg, #FFF3E0 0%, #FFF8F0 100%);
    border: 1.5px solid #FFD08A;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 36px;
}
.notice-title {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #E65100;
    margin: 0 0 14px;
}
.notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.notice-list li {
    font-size: 0.88rem;
    color: #3D2B1F;
    line-height: 1.5;
    display: flex;
    gap: 10px;
}
.notice-bullet {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.4;
}

.legal-acceptance-text {
    background: #F8FAFF;
    border-left: 4px solid #7B61FF;
    padding: 14px 18px;
    border-radius: 0 8px 8px 0;
    font-size: 0.88rem;
    color: #172033;
    line-height: 1.6;
    margin-bottom: 32px;
}

.legal-section {
    margin-bottom: 36px;
    padding-bottom: 32px;
    border-bottom: 1px solid #F3F4F6;
}
.legal-section:last-child { border-bottom: none; }
.legal-section h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.18rem;
    font-weight: 700;
    color: #172033;
    margin: 0 0 14px;
    padding-top: 4px;
}
.legal-section p {
    font-size: 0.9rem;
    color: #3D4552;
    line-height: 1.72;
    margin-bottom: 12px;
}
.legal-section ul, .legal-section ol {
    padding-left: 20px;
    margin-bottom: 14px;
}
.legal-section li {
    font-size: 0.88rem;
    color: #3D4552;
    line-height: 1.65;
    margin-bottom: 6px;
}
.legal-section a { color: #FF6B35; }
.legal-section a:hover { text-decoration: underline; }

.legal-highlight-box {
    background: #FFF3E0;
    border: 1px solid #FFD08A;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 14px;
}
.legal-highlight-box p {
    margin: 0;
    color: #B54708 !important;
    font-size: 0.9rem !important;
}

.legal-contact-card {
    background: #F8FAFF;
    border: 1px solid #E0E7FF;
    border-radius: 10px;
    padding: 16px 20px;
    margin: 12px 0;
}
.legal-contact-card p {
    margin-bottom: 8px !important;
    font-size: 0.88rem !important;
}
.legal-contact-card p:last-child { margin-bottom: 0 !important; }

.legal-crossref {
    font-size: 0.82rem !important;
    color: #9CA3AF !important;
    margin-top: 16px !important;
}

.legal-page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 2px solid #FFE0C2;
}
.btn-legal-nav {
    font-size: 0.82rem;
    font-weight: 700;
    color: #FF6B35 !important;
    text-decoration: none;
    padding: 9px 18px;
    border: 1.5px solid #FF6B35;
    border-radius: 20px;
    transition: background 0.18s, color 0.18s;
}
.btn-legal-nav:hover {
    background: #FF6B35;
    color: #fff !important;
}
.btn-legal-contact {
    background: #FF6B35;
    color: #fff !important;
    border-color: #FF6B35;
}
.btn-legal-contact:hover {
    background: #E55A2B;
    border-color: #E55A2B;
}

/* ─── FOOTER BOTTOM LINKS ─── */
.footer-bottom-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.footer-bottom-links a {
    font-size: 0.78rem;
    color: #FF8C42;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}
.footer-bottom-links a:hover { color: #FF6B35; }
.footer-sep {
    color: #B0B4BC;
    font-size: 0.8rem;
}
.footer-operator-credit {
    font-size: 0.76rem;
    color: #9CA3AF;
    margin-top: 6px;
}

/* =============================================================================
   VIZAGLO — HERO REDESIGN (INTERNATIONAL EXPLORE VISAKHAPATNAM & BEYOND)
   Based directly on reference UI with desktop & mobile high-res responsive imagery
   ============================================================================= */

.travel-hero-custom-bg {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0 100px;
    overflow: hidden;
    color: #1A365D;
}

.hero-picture-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-bg-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.hero-vignette-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.48) 0%, rgba(15, 23, 42, 0.16) 45%, rgba(15, 23, 42, 0.68) 100%);
    z-index: 2;
    pointer-events: none;
}

.travel-hero-custom-bg .hero-content-container {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Headline */
.hero-header-center {
    margin-bottom: 24px;
}

.travel-hero-custom-bg .travel-hero-headline {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(2.4rem, 5.5vw, 4.4rem);
    font-weight: 900;
    line-height: 1.12;
    color: #FFFFFF !important;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.45);
    margin: 0 0 16px;
}

.travel-hero-custom-bg .travel-hero-headline .hero-accent {
    color: #FFB703 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: initial !important;
    filter: none !important;
    display: inline-block;
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 183, 3, 0.55) !important;
}

.travel-hero-custom-bg .travel-hero-lead {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-weight: 500;
    color: #FFFFFF !important;
    margin: 0 auto 28px;
    max-width: 700px;
    line-height: 1.6;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* 4 Feature Pills */
.hero-feature-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.feature-pill-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 30px;
    text-decoration: none;
    color: #FFFFFF;
    transition: all 0.22s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.feature-pill-item:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #FFB703 0%, #FB8500 100%);
    color: #0F172A;
    border-color: #FFB703;
    box-shadow: 0 8px 26px rgba(251, 133, 0, 0.45);
}

.feature-pill-item .pill-ico {
    font-size: 1.25rem;
    line-height: 1;
}

.feature-pill-item .pill-text {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: inherit;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.feature-pill-item:hover .pill-text {
    text-shadow: none;
}

/* =============================================================================
   INTERNATIONAL STANDARD HEADER & NAVIGATION
   Desktop Single-Line Bar + Mobile Drawer Navigation
   ============================================================================= */
.site-header {
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.header-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    min-height: 64px;
}

.header-brand-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.site-brand-logo {
    height: 42px;
    width: auto;
    object-fit: contain;
}

/* Desktop Main Navigation */
.desktop-main-nav {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
}

.desktop-nav-list {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.desktop-nav-list > li {
    position: relative;
}

.desktop-nav-list > li > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1E293B;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.18s ease;
}

.desktop-nav-list > li > a:hover,
.desktop-nav-list > li.active > a {
    color: #0077B6;
    background: #F0F9FF;
}

.arrow-down {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.has-dropdown:hover .arrow-down {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    min-width: 240px;
    padding: 8px 0;
    list-style: none;
    margin: 6px 0 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s ease;
    z-index: 1001;
}

.has-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-menu li a {
    display: block;
    padding: 9px 18px;
    font-size: 0.88rem;
    color: #334155;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.nav-dropdown-menu li a:hover {
    background: #F8FAFC;
    color: #0077B6;
}

.dropdown-divider {
    height: 1px;
    background: #F1F5F9;
    margin: 4px 0;
}

/* Header Action Buttons */
.header-actions-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.btn-header-wa {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #F0FDF4;
    color: #166534;
    border: 1.5px solid #BBF7D0;
    font-size: 0.86rem;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 24px;
    text-decoration: none;
    transition: all 0.18s ease;
}

.btn-header-wa:hover {
    background: #22C55E;
    color: #FFFFFF;
    border-color: #22C55E;
}

.btn-header-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #FFB703 0%, #FB8500 100%);
    color: #0F172A;
    font-size: 0.88rem;
    font-weight: 800;
    padding: 9px 18px;
    border-radius: 24px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(251, 133, 0, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}

.btn-header-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(251, 133, 0, 0.35);
}

.nav-toggle {
    display: none;
    background: #F1F5F9;
    border: none;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
}

.hamburger-bar {
    width: 22px;
    height: 2px;
    background: #0F172A;
    border-radius: 2px;
    transition: all 0.2s ease;
}

/* Mobile Drawer */
.mobile-main-nav {
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
}

.mobile-main-nav.is-open {
    display: block !important;
    max-height: 85vh;
    overflow-y: auto;
}

.mobile-nav-inner {
    padding: 16px 20px 28px;
}

.mobile-search-box {
    margin-bottom: 16px;
}

.mobile-search-form {
    display: flex;
    gap: 8px;
}

.mobile-search-form input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid #CBD5E1;
    border-radius: 10px;
    font-size: 0.9rem;
    outline: none;
}

.mobile-search-form button {
    background: #0077B6;
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
}

.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-nav-list li a {
    display: block;
    padding: 11px 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1E293B;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s;
}

.mobile-nav-list li a:hover,
.mobile-nav-list li a.active {
    background: #F0F9FF;
    color: #0077B6;
}

.mobile-sub-heading {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94A3B8;
    padding: 14px 12px 6px;
}

.mobile-nav-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #E2E8F0;
}

.btn-mobile-plan {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FFB703 0%, #FB8500 100%);
    color: #0F172A;
    font-weight: 800;
    text-decoration: none;
    font-size: 0.95rem;
}

.btn-mobile-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 12px;
    background: #25D366;
    color: #FFFFFF;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.92rem;
}

@media (max-width: 991px) {
    .desktop-main-nav {
        display: none !important;
    }
    .wa-text-label {
        display: none !important;
    }
    .btn-header-cta {
        display: none !important;
    }
    .nav-toggle {
        display: flex !important;
    }
}

/* =============================================================================
   MAKEMYTRIP / BOOKING.COM HORIZONTAL SEARCH STRIP
   ============================================================================= */
.hero-kicker-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    color: #0369A1;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.mmt-search-strip {
    background: #FFFFFF;
    border-radius: 50px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 8px 12px 8px 24px;
    width: 100%;
    max-width: 920px;
    margin: 28px auto 40px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 10;
}

.mmt-search-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.mmt-search-col {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    text-align: left;
}

.mmt-ico {
    font-size: 1.35rem;
    flex-shrink: 0;
}

.mmt-field {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mmt-field label {
    font-size: 0.72rem;
    font-weight: 800;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.mmt-field input,
.mmt-field select {
    border: none;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0F172A;
    padding: 0;
    outline: none;
    width: 100%;
    cursor: pointer;
}

.mmt-field input::placeholder {
    color: #94A3B8;
    font-weight: 500;
}

.mmt-divider {
    width: 1px;
    height: 40px;
    background: #E2E8F0;
    flex-shrink: 0;
}

.mmt-search-btn-col {
    flex-shrink: 0;
}

.btn-mmt-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #FFB703 0%, #FB8500 100%);
    color: #0F172A;
    font-size: 0.95rem;
    font-weight: 800;
    padding: 14px 28px;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(251, 133, 0, 0.38);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-mmt-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(251, 133, 0, 0.45);
}

@media (max-width: 860px) {
    .mmt-search-strip {
        border-radius: 20px;
        padding: 16px;
        margin: 20px auto 30px;
    }
    .mmt-search-form {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .mmt-divider {
        display: none;
    }
    .btn-mmt-submit {
        width: 100%;
        justify-content: center;
        border-radius: 12px;
        padding: 13px;
    }
}

/* Polaroid Photo Cards */
.hero-polaroid-gallery {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    width: 100%;
    margin-top: 10px;
}

.polaroid-card {
    background: #FFFFFF;
    padding: 8px 8px 14px;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    text-decoration: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 130px;
}

.polaroid-card:hover {
    transform: scale(1.08) translateY(-6px) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
    z-index: 5;
}

.polaroid-img {
    width: 114px;
    height: 100px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
}

.polaroid-caption {
    font-family: 'Playfair Display', Georgia, cursive, serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1E293B;
    margin-top: 8px;
    font-style: italic;
}

.card-rotate-1 { transform: rotate(-3deg); }
.card-rotate-2 { transform: rotate(2deg); }
.card-rotate-3 { transform: rotate(-2deg); }
.card-rotate-4 { transform: rotate(4deg); }

@media (max-width: 860px) {
    .travel-hero-custom-bg {
        padding: 40px 0 60px;
        min-height: auto;
    }
    .travel-hero-custom-bg .travel-hero-headline {
        font-size: 2.3rem;
    }
    .hero-polaroid-gallery {
        flex-wrap: wrap;
        gap: 12px;
    }
    .polaroid-card {
        width: 44%;
        transform: none !important;
    }
    .polaroid-img {
        width: 100%;
        height: 90px;
    }
}

/* =============================================================================
   PHOTOGRAPHIC TRAVEL STYLE CARDS (No flat ugly colors)
   ============================================================================= */
.styles-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.photo-style-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    height: 280px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.photo-style-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}

.style-tag-badge {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    color: #0F172A;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.style-tag-gold {
    background: linear-gradient(135deg, #FFB703 0%, #FB8500 100%);
    color: #0F172A;
    font-weight: 800;
}

.style-card-bottom {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.style-card-bottom h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.2;
}

.style-card-bottom p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    line-height: 1.45;
}

.style-link-gold {
    font-size: 0.82rem;
    font-weight: 700;
    color: #FFB703;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 1024px) {
    .styles-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .styles-category-grid {
        grid-template-columns: 1fr;
    }
    .photo-style-card {
        height: 220px;
    }
}

/* =============================================================================
   VEHICLES PAGE & CARDS (Complete High-End Rental Experience)
   ============================================================================= */
.vehicles-hero-banner {
    background: linear-gradient(180deg, #FFF8EE 0%, #FFFFFF 100%);
    border-bottom: 1px solid #F1F5F9;
}

.transport-transparency-pill {
    display: inline-block;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1E40AF;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.84rem;
    line-height: 1.5;
    text-align: left;
}

.vehicles-full-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.vehicle-detailed-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vehicle-detailed-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

.veh-media-header {
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 14px;
}

.veh-category-tag {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.tag-self {
    background: linear-gradient(135deg, #FFB703 0%, #FB8500 100%);
    color: #0F172A;
}

.tag-chau {
    background: linear-gradient(135deg, #0077B6 0%, #00B8D9 100%);
    color: #FFFFFF;
}

.veh-card-inner {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 14px;
}

.veh-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.veh-title-row h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
}

.veh-ac-pill {
    background: #E0F2FE;
    color: #0369A1;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    flex-shrink: 0;
}

.veh-specs-table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #F8FAFC;
    border-radius: 12px;
    padding: 10px 12px;
    gap: 8px;
    border: 1px solid #EDF2F7;
}

.spec-cell {
    display: flex;
    flex-direction: column;
}

.spec-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748B;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.spec-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1E293B;
}

.veh-info-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.block-label {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
}

.block-text {
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.5;
    margin: 0;
}

.veh-inclusion-checklist {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checklist-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.chk-item {
    font-size: 0.78rem;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
}

.chk-item.yes {
    background: #ECFDF5;
    color: #047857;
}

.chk-item.no {
    background: #F1F5F9;
    color: #94A3B8;
}

.veh-requirements-box {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.78rem;
    color: #92400E;
    line-height: 1.45;
}

.veh-requirements-box p {
    margin: 4px 0 0;
}

.veh-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid #F1F5F9;
    margin-top: auto;
    gap: 12px;
}

.veh-price-col {
    display: flex;
    flex-direction: column;
}

.veh-price-kicker {
    font-size: 0.68rem;
    text-transform: uppercase;
    color: #64748B;
    font-weight: 700;
}

.veh-price-amount {
    font-size: 1.3rem;
    font-weight: 900;
    color: #FB8500;
}

.veh-price-note {
    font-size: 0.68rem;
    color: #94A3B8;
}

.btn-select-vehicle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFB703 0%, #FB8500 100%);
    color: #0F172A;
    font-size: 0.88rem;
    font-weight: 800;
    padding: 10px 18px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(251, 133, 0, 0.28);
    transition: transform 0.18s, box-shadow 0.18s;
    white-space: nowrap;
}

.btn-select-vehicle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(251, 133, 0, 0.38);
}

/* Quote Form Card */
.quote-form-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 36px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #E2E8F0;
}

.veh-enquiry-form .form-row-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.veh-enquiry-form .form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.veh-enquiry-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.veh-enquiry-form label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
}

.veh-enquiry-form input,
.veh-enquiry-form select,
.veh-enquiry-form textarea {
    padding: 10px 14px;
    border: 1.5px solid #CBD5E1;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #0F172A;
    outline: none;
    transition: border-color 0.2s;
}

.veh-enquiry-form input:focus,
.veh-enquiry-form select:focus,
.veh-enquiry-form textarea:focus {
    border-color: #0077B6;
}

@media (max-width: 1024px) {
    .vehicles-full-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .vehicles-full-grid {
        grid-template-columns: 1fr;
    }
    .veh-enquiry-form .form-row-2,
    .veh-enquiry-form .form-row-3 {
        grid-template-columns: 1fr;
    }
    .quote-form-card {
        padding: 20px;
    }
}

/* =============================================================================
   SINGLE TRIP PACKAGE PAGE (High-End Contrast, Timeline & Sticky Booking)
   ============================================================================= */
.trip-single-page {
    background: #F8FAFC;
}

.trip-breadcrumb-bar {
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    padding: 12px 0;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: #64748B;
    flex-wrap: wrap;
}

.breadcrumb-nav a {
    color: #0077B6;
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb-nav .sep {
    color: #CBD5E1;
}

.breadcrumb-nav .current {
    color: #1E293B;
    font-weight: 700;
}

/* Trip Hero Banner with Dark Contrast Scrim */
.trip-hero-banner {
    position: relative;
    padding: 60px 0 50px;
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.4);
}

.trip-hero-container {
    max-width: 1080px;
    margin: 0 auto;
}

.trip-hero-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.badge-cat-hero {
    background: linear-gradient(135deg, #FFB703 0%, #FB8500 100%);
    color: #0F172A;
    font-weight: 800;
    font-size: 0.78rem;
    padding: 4px 12px;
    border-radius: 20px;
}

.badge-duration-hero,
.badge-loc-hero {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.78rem;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.trip-hero-title {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.15;
    color: #FFFFFF !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
    margin: 0 0 12px;
}

.trip-hero-lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.95) !important;
    max-width: 760px;
    line-height: 1.55;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
    margin-bottom: 24px;
}

.trip-quick-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    padding: 16px 20px;
}

.q-stat {
    display: flex;
    flex-direction: column;
}

.q-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #CBD5E1;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.q-val {
    font-size: 1.05rem;
    color: #FFFFFF;
    font-weight: 700;
}

.text-yellow {
    color: #FFB703 !important;
}

/* Trip 2-Column Content Grid */
.trip-content-grid {
    display: grid;
    grid-template-columns: 7fr 4fr;
    gap: 36px;
    align-items: flex-start;
}

.trip-details-col {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.trip-section-block {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 28px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.sub-head {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 16px;
    border-bottom: 2px solid #F1F5F9;
    padding-bottom: 10px;
}

.trip-rich-desc {
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.7;
}

.trip-highlights-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.trip-highlights-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    color: #1E293B;
    background: #F8FAFC;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #EDF2F7;
}

.hl-check {
    color: #10B981;
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1;
}

/* Day-by-Day Timeline */
.itinerary-timeline {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 16px;
}

.timeline-day-card {
    display: flex;
    gap: 18px;
    background: #F8FAFC;
    border-radius: 14px;
    padding: 18px;
    border: 1px solid #E2E8F0;
}

.day-badge-col {
    flex-shrink: 0;
}

.day-number {
    display: inline-block;
    background: #0077B6;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.78rem;
    padding: 6px 12px;
    border-radius: 12px;
    letter-spacing: 0.04em;
}

.day-content-col {
    flex: 1;
}

.day-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 6px;
}

.day-text {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 10px;
}

.day-meta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.day-meta {
    font-size: 0.8rem;
    color: #64748B;
    background: #FFFFFF;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
}

/* Inclusions & Exclusions */
.inclusions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.inc-head {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 12px;
}

.text-green { color: #059669; }
.text-coral { color: #DC2626; }

.inc-list, .exc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inc-list li {
    font-size: 0.88rem;
    color: #1E293B;
    padding-left: 18px;
    position: relative;
}

.inc-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #059669;
    font-weight: 800;
}

.exc-list li {
    font-size: 0.88rem;
    color: #64748B;
    padding-left: 18px;
    position: relative;
}

.exc-list li::before {
    content: "×";
    position: absolute;
    left: 0;
    color: #DC2626;
    font-weight: 800;
}

/* Sticky Right Sidebar */
.trip-sidebar-col {
    position: sticky;
    top: 84px;
}

.sticky-trip-booking-card {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    padding: 26px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
}

.card-price-header {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid #F1F5F9;
}

.header-price-kicker {
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 800;
    color: #64748B;
    letter-spacing: 0.06em;
}

.large-price-num {
    font-size: 2.1rem;
    font-weight: 900;
    color: #FB8500;
    line-height: 1.1;
    margin: 4px 0;
}

.price-suffix {
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748B;
}

.price-type-note {
    font-size: 0.76rem;
    color: #94A3B8;
}

.quick-assumptions-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #F8FAFC;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.asump-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #475569;
}

.btn-book-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #FFB703 0%, #FB8500 100%);
    color: #0F172A;
    font-weight: 800;
    font-size: 0.95rem;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(251, 133, 0, 0.35);
    margin-bottom: 10px;
    transition: transform 0.18s, box-shadow 0.18s;
}

.btn-book-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(251, 133, 0, 0.45);
}

.btn-book-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    background: #25D366;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.92rem;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
    transition: transform 0.18s;
}

.btn-book-wa:hover {
    background: #1da851;
    transform: translateY(-1px);
}

.sidebar-guarantees {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #F1F5F9;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.78rem;
    color: #64748B;
}

@media (max-width: 991px) {
    .trip-content-grid {
        grid-template-columns: 1fr;
    }
    .trip-sidebar-col {
        position: static;
    }
    .trip-quick-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .trip-hero-title {
        font-size: 2rem;
    }
    .inclusions-grid {
        grid-template-columns: 1fr;
    }
    .trip-highlights-list {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   TRIPS CATALOG & CATEGORY FILTERING
   ============================================================================= */
.catalog-header-banner {
    background: linear-gradient(180deg, #FFF8EE 0%, #FFFFFF 100%);
    border-bottom: 1px solid #F1F5F9;
}

.catalog-pills-filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-pill {
    padding: 7px 16px;
    border-radius: 20px;
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.18s ease;
}

.filter-pill:hover,
.filter-pill.active {
    background: #0077B6;
    color: #FFFFFF;
    border-color: #0077B6;
    box-shadow: 0 4px 12px rgba(0, 119, 182, 0.25);
}

.catalog-search-filter-card {
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid #E2E8F0;
    padding: 16px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.filter-form-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-field.flex-grow {
    flex: 1;
    min-width: 220px;
}

.filter-field input,
.filter-field select {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #CBD5E1;
    border-radius: 10px;
    font-size: 0.9rem;
    outline: none;
}

.btn-filter-submit {
    background: linear-gradient(135deg, #FFB703 0%, #FB8500 100%);
    color: #0F172A;
    font-weight: 800;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
}

.btn-filter-reset {
    font-size: 0.85rem;
    color: #64748B;
    margin-left: 8px;
    text-decoration: underline;
}

/* =============================================================================
   CUSTOMISE TRIP BUILDER
   ============================================================================= */
.customise-trip-page {
    background: #F8FAFC;
}

.customise-form-container {
    border-radius: 20px;
    padding: 36px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.form-section-fieldset {
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1.5px solid #F1F5F9;
}

.fieldset-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0077B6;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
}

.fieldset-head h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: #0F172A;
    margin: 0;
}

.step-sub {
    font-size: 0.8rem;
    color: #64748B;
}

.transparency-note-box {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 0.82rem;
    color: #1E40AF;
    line-height: 1.5;
    text-align: left;
}


/* =============================================================================
   VIZAGLO — FRONTEND UPGRADE (SWIPER, VEHICLE AD ZONE, CALCULATOR, MOBILE-FIRST)
   Fluid Typography, 44px Touch Targets, Zero Overflow, Prefers-Reduced-Motion
   ============================================================================= */

/* ─── FLUID TYPOGRAPHY & DESIGN TOKENS ─── */
:root {
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --radius-pill: 9999px;
    --shadow-subtle: 0 4px 14px rgba(0, 0, 0, 0.06);
    --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.12);
    --shadow-hover: 0 18px 42px rgba(0, 119, 182, 0.16);
}

/* ─── SWIPER CONTAINER WRAPPER & ACCESSIBILITY CONTROLS ─── */
.swiper-container-wrap {
    position: relative;
    width: 100%;
}

.swiper-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.swiper-btn-prev,
.swiper-btn-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #0077B6;
    border: 1.5px solid #E2E8F0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 700;
    transition: all 0.2s ease;
    touch-action: manipulation;
}

.swiper-btn-prev:hover,
.swiper-btn-next:hover {
    background: #0077B6;
    color: #FFFFFF;
    border-color: #0077B6;
    box-shadow: 0 4px 14px rgba(0, 119, 182, 0.3);
}

.swiper-btn-prev:focus-visible,
.swiper-btn-next:focus-visible {
    outline: 2px solid #FF5A67;
    outline-offset: 2px;
}

.swiper-pagination-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #CBD5E1;
    opacity: 1;
    transition: all 0.25s ease;
    cursor: pointer;
}

.swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 12px;
    background: #FF8A3D !important;
}

/* Slide flex adjustments for equal card heights */
.swiper-slide {
    height: auto;
    display: flex;
}

.swiper-slide .trip-card-item,
.swiper-slide .vehicle-card-preview {
    width: 100%;
}

/* On desktop if Swiper is not initialized, fallback cleanly to Grid */
@media (min-width: 1024px) {
    .trips-cards-grid:not(.swiper-wrapper) {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

/* ─── VEHICLE PARTNER ADVERTISEMENT ZONE ─── */
.vehicle-partner-ad-zone {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF8EE 100%);
    border: 1.5px solid #FFE0B2;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(255, 138, 61, 0.1);
    position: relative;
    overflow: hidden;
}

.partner-ad-badge-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #FFD180;
}

.partner-ad-badge-header .ad-tag {
    background: #FF8A3D;
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
}

.partner-ad-badge-header .ad-note {
    font-size: 0.8rem;
    color: #64748B;
    font-style: italic;
}

.partner-ad-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: center;
}

.partner-ad-media {
    height: 220px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

.partner-callout-pill {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    color: #172033;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.partner-ad-details {
    display: flex;
    flex-direction: column;
}

.partner-meta-top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.partner-category {
    font-size: 0.74rem;
    font-weight: 800;
    color: #0077B6;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.partner-verify {
    font-size: 0.75rem;
    font-weight: 600;
    color: #15803D;
    background: #DCFCE7;
    padding: 2px 8px;
    border-radius: 6px;
}

.partner-ad-details h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #172033;
    line-height: 1.3;
    margin: 0 0 10px;
}

.partner-ad-details p {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 14px;
}

.partner-specs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.partner-specs-row span {
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
    background: #F1F5F9;
    padding: 4px 10px;
    border-radius: 6px;
}

.partner-action-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-partner-ad-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #0077B6 0%, #00B8D9 100%);
    color: #FFFFFF !important;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 119, 182, 0.25);
    transition: transform 0.18s ease;
}

.btn-partner-ad-cta:hover {
    transform: translateY(-2px);
}

.btn-partner-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    background: #25D366;
    color: #FFFFFF !important;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
    transition: background 0.18s ease;
}

.btn-partner-wa:hover {
    background: #1EBE5A;
}

/* ─── SECONDARY DISTANCE & BUDGET CALCULATOR ─── */
.section-distance-calculator {
    background: #FFFFFF;
    border-top: 1px solid #F1F5F9;
    border-bottom: 1px solid #F1F5F9;
}

.distance-calculator-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.distance-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.distance-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.distance-table th {
    background: #F8FAFC;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 18px;
    border-bottom: 1.5px solid #E2E8F0;
}

.distance-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #F1F5F9;
    font-size: 0.9rem;
    color: #334155;
}

.distance-table tr:hover td {
    background: #F8FAFC;
}

.distance-pro-tip {
    display: flex;
    gap: 12px;
    background: #FFF8EE;
    border-top: 1px solid #FFE0B2;
    padding: 16px 20px;
    font-size: 0.88rem;
    color: #4A3B2C;
    line-height: 1.55;
    align-items: flex-start;
}

.distance-pro-tip .tip-ico {
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
}

/* ─── MOBILE RESPONSIVENESS & TOUCH TARGET AUDIT (360px - 768px) ─── */
@media (max-width: 768px) {
    .partner-ad-card {
        grid-template-columns: 1fr;
    }
    .partner-ad-media {
        height: 170px;
    }
    .partner-action-row {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-partner-ad-cta,
    .btn-partner-wa {
        width: 100%;
        text-align: center;
    }
    .distance-table th,
    .distance-table td {
        padding: 10px 12px;
        font-size: 0.82rem;
    }
}

/* ─── PREFERS-REDUCED-MOTION ─── */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}