/* ==========================================================================
   Malabar Tour Packages - Global Stylesheet (Premium Edition)
   ========================================================================== */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500;1,9..144,600&family=Manrope:wght@300;400;500;600;700;800&family=Caveat:wght@500;600;700&display=swap');

/* --- CSS Variables --- */
:root {
    /* Theme Colors */
    --primary-purple: #3A0B48; /* Deep, luxurious purple */
    --primary-light: #591b6e;
    --accent-yellow: #FFC107; /* Vibrant gold/yellow */
    --accent-hover: #ffb300;
    
    /* Typography */
    --font-heading: 'Fraunces', serif;   /* warm, editorial travel-magazine serif */
    --font-body: 'Manrope', sans-serif;  /* clean, modern, legible for itineraries & UI */
    --font-accent: 'Caveat', cursive;    /* handwritten postcard-label accent, used sparingly */
    
    /* Neutral Colors */
    --text-dark: #2C3E50;
    --text-muted: #6C7A89;
    --bg-light: #F8F9FA;
    --bg-white: #FFFFFF;
}

/* --- Section Kickers (handwritten postcard-label accent) --- */
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-accent);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--accent-yellow);
    text-transform: none;
    letter-spacing: 0.02em;
    transform: rotate(-2deg);
    margin-bottom: 0.4rem;
}
.section-kicker::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f072'; /* plane icon */
    font-size: 1rem;
    color: var(--primary-purple);
    transform: rotate(35deg);
    display: inline-block;
}

/* --- Base & Reset --- */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background-color: var(--bg-light);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary-purple);
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

/* --- Navigation Bar --- */
.navbar {
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(58, 11, 72, 0.08);
    padding: 1rem 0;
}

.navbar-brand {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.8rem;
    color: var(--primary-purple) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.navbar-brand span {
    font-size: 0.9rem;
    display: block;
    color: var(--text-muted);
    font-weight: 400;
    font-family: var(--font-body);
    letter-spacing: 2px;
}

.nav-link {
    color: var(--primary-purple) !important;
    font-weight: 500;
    margin: 0 4px;
    border-radius: 100px;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.nav-link:hover {
    background-color: rgba(58, 11, 72, 0.08);
    color: var(--primary-purple) !important;
}

.nav-link.active {
    background-color: var(--primary-purple);
    color: #ffffff !important;
}

.navbar-toggler {
    border-color: rgba(58, 11, 72, 0.3);
}

.navbar-toggler-icon {
    filter: none;
}

/* --- Parallax Hero Section --- */
.hero-parallax {
    position: relative;
    height: 85vh;
    background-image: url('banner.jpg'); /* Adjust path relative to CSS or leave as is if in same folder */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(58, 11, 72, 0.7), rgba(0, 0, 0, 0.6));
}

.hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 800px;
    padding: 0 20px;
}

/* 3D Text Effect */
.hero-content h1 {
    color: #fff;
    font-size: 4rem;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 
        0 1px 0 #ccc, 
        0 2px 0 #c9c9c9, 
        0 3px 0 #bbb, 
        0 4px 0 #b9b9b9, 
        0 5px 0 #aaa, 
        0 6px 1px rgba(0,0,0,.1), 
        0 0 5px rgba(0,0,0,.1), 
        0 1px 3px rgba(0,0,0,.3), 
        0 3px 5px rgba(0,0,0,.2), 
        0 5px 10px rgba(0,0,0,.25), 
        0 10px 10px rgba(0,0,0,.2), 
        0 20px 20px rgba(0,0,0,.15);
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    font-weight: 300;
}

/* --- 3D Buttons --- */
.btn-3d {
    background-color: var(--accent-yellow);
    color: var(--primary-purple);
    font-weight: 700;
    padding: 12px 35px;
    border: none;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    transition: all 0.1s ease;
    box-shadow: 0 6px 0 #c79500, 0 10px 20px rgba(0,0,0,0.3);
}

.btn-3d:hover,
.btn-3d:focus {
    color: var(--primary-purple);
    background-color: var(--accent-hover);
    transform: translateY(2px);
    box-shadow: 0 4px 0 #c79500, 0 8px 15px rgba(0,0,0,0.3);
}

.btn-3d:active {
    color: var(--primary-purple);
    background-color: var(--accent-hover);
    transform: translateY(6px);
    box-shadow: 0 0 0 #c79500, 0 2px 5px rgba(0,0,0,0.3);
}

/* --- Outline CTA buttons (secondary actions across sections) --- */
.btn-outline-oryx {
    background-color: transparent;
    border: 2px solid var(--primary-purple);
    color: var(--primary-purple);
    border-radius: 30px;
    padding: 10px 30px;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.btn-outline-oryx:hover,
.btn-outline-oryx:focus {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    color: #ffffff;
    transform: translateY(-2px);
}

/* --- Sections & Typography --- */
.section-padding {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.section-title h2 {
    font-size: 2.5rem;
    display: inline-block;
    padding-bottom: 15px;
    position: relative;
}

.section-title h2::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 3px;
    background: var(--accent-yellow);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* --- 3D Card Hover Effects --- */
.package-card {
    border: none;
    border-radius: 15px;
    overflow: hidden;
    background: var(--bg-white);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    transform-style: preserve-3d;
}

.package-card:hover {
    transform: translateY(-15px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.package-img-wrapper {
    position: relative;
    overflow: hidden;
    height: 250px;
}

.package-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.package-card:hover .package-img-wrapper img {
    transform: scale(1.1);
}

.price-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--accent-yellow);
    color: var(--primary-purple);
    padding: 8px 15px;
    border-radius: 30px;
    font-weight: 700;
    font-family: var(--font-heading);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.card-body {
    padding: 25px;
}

.card-title {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.card-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

.feature-list li {
    font-size: 0.85rem;
    color: var(--primary-purple);
    font-weight: 500;
}

.feature-list i {
    color: var(--accent-yellow);
    margin-right: 5px;
}

/* --- Footer --- */
.site-footer {
    background-color: var(--primary-purple);
    color: rgba(255, 255, 255, 0.8);
    padding: 70px 0 30px;
}

.footer-widget h4 {
    color: var(--accent-yellow);
    font-family: var(--font-heading);
    margin-bottom: 25px;
    font-size: 1.5rem;
}

.footer-contact-list {
    list-style: none;
    padding: 0;
}

.footer-contact-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}

.footer-contact-list i {
    color: var(--accent-yellow);
    margin-top: 5px;
    margin-right: 15px;
    font-size: 1.2rem;
}

.social-icons a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-yellow);
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background: var(--accent-yellow);
    color: var(--primary-purple);
    transform: translateY(-3px);
}

.footer-bottom {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.9rem;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 2.5rem; }
    .hero-parallax { height: 70vh; }
    .section-title h2 { font-size: 2rem; }
}


/* --- Additions for 6-Section Home Page --- */

/* About Section List */
.feature-text-list li {
    margin-bottom: 12px;
    font-size: 1.05rem;
    font-weight: 500;
}
.feature-text-list i {
    color: var(--accent-yellow);
    margin-right: 10px;
    font-size: 1.2rem;
}

/* Destinations Grid */
.destination-box {
    display: block;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 400px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.destination-box.small-box {
    height: 190px;
}
.destination-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.destination-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 20px 20px;
    background: linear-gradient(to top, rgba(58, 11, 72, 0.9), transparent);
    color: #fff;
    transition: padding-bottom 0.3s ease;
}
.destination-overlay h3 {
    color: #fff;
    margin: 0;
    font-size: 1.5rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.destination-overlay p {
    margin: 5px 0 0;
    font-size: 0.9rem;
    color: var(--accent-yellow);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}
.destination-box:hover img {
    transform: scale(1.1);
}
.destination-box:hover .destination-overlay {
    padding-bottom: 30px;
}
.destination-box:hover .destination-overlay p {
    opacity: 1;
    transform: translateY(0);
}

/* Why Choose Us (USPs) */
.usp-box {
    padding: 30px 20px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 15px;
    height: 100%;
    transition: all 0.3s ease;
    background: rgba(0,0,0,0.15);
}
.usp-box:hover {
    background: rgba(255,193,7,0.1);
    border-color: var(--accent-yellow);
    transform: translateY(-5px);
}
.usp-box i {
    font-size: 3rem;
    color: var(--accent-yellow);
    margin-bottom: 20px;
}
.usp-box h4 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 15px;
}
.usp-box p {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    margin: 0;
}

/* Testimonials */
.testimonial-card {
    background: var(--bg-white);
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    height: 100%;
    position: relative;
    border-top: 4px solid var(--primary-purple);
}
.quote-icon {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 3rem;
    color: rgba(255,193,7,0.2);
}
.review-text {
    font-style: italic;
    color: var(--text-muted);
    margin-bottom: 25px;
    font-size: 1rem;
    line-height: 1.8;
}
.client-info h5 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--primary-purple);
}
.client-info span {
    font-size: 0.85rem;
    color: var(--accent-yellow);
    font-weight: 600;
}


/* ==========================================================================
   Hero Carousel (4:2 Ratio Strict Enforcement)
   ========================================================================== */

#heroCarousel {
    position: relative;
    width: 100%;
}

.ratio-4-2 .carousel-item {
    aspect-ratio: 2 / 1; /* Represents the 4:2 ratio precisely */
    width: 100%;
    overflow: hidden;
    background-color: var(--primary-purple); /* Fallback color */
}

/* Ensure image covers the ratio without stretching */
.ratio-4-2 .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Subtle protection gradient at the top so the transparent navbar text is always readable */
.ratio-4-2 .carousel-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 150px;
    background: linear-gradient(to bottom, rgba(58, 11, 72, 0.8), transparent);
    z-index: 1;
}

/* Make sure indicators and controls sit above the gradient */
.carousel-indicators, .carousel-control-prev, .carousel-control-next {
    z-index: 2;
}

/* Optional: Slight zoom animation on the active slide for a premium feel */
.carousel-item.active img {
    animation: slowZoom 10s linear infinite;
}

@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

/* Mobile Adjustment for Slider Height */
@media (max-width: 768px) {
    /* On very small screens, a strict 2:1 ratio might be too thin. 
       This ensures the slider remains visible and doesn't get squished. */
    .ratio-4-2 .carousel-item {
        aspect-ratio: 16 / 9; 
    }
}


/* --- Inner Page Banners --- */
.inner-banner {
    position: relative;
    padding: 70px 0 60px;
    background-color: var(--primary-purple);
    background-image: linear-gradient(rgba(58, 11, 72, 0.9), rgba(58, 11, 72, 0.8)), url('banner-inner.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    text-align: center;
    color: #fff;
    margin-bottom: 50px;
}
.inner-banner h1 {
    color: var(--accent-yellow);
    font-size: 3rem;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.inner-banner .breadcrumb {
    justify-content: center;
    background: transparent;
    padding: 0;
}
.inner-banner .breadcrumb-item a {
    color: #fff;
}
.inner-banner .breadcrumb-item.active {
    color: var(--accent-yellow);
}

/* ==========================================================================
   PREMIUM UPGRADE — Mega Menu, Glass Booking Widget, Wind/Water FX, Admin
   ========================================================================== */

:root{
    --glass-bg: rgba(58,11,72,0.55);
    --glass-bg-strong: rgba(58,11,72,0.72);
    --glass-border: rgba(255,255,255,0.22);
    --glass-blur: 18px;
    --shadow-spread-purple: 0 25px 70px -15px rgba(58,11,72,0.55), 0 0 90px -20px rgba(58,11,72,0.35);
    --shadow-spread-gold: 0 15px 45px -10px rgba(255,193,7,0.45);
    --purple-rgb: 58,11,72;
    --gold-rgb: 255,193,7;
}

/* -------------------------------------------------------------
   1. NAVBAR — premium spacing, blur, mega menu
   ------------------------------------------------------------- */
.navbar,
.navbar-sticky{
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 0.55rem 0;
    background-color: #ffffff;
    border-bottom: 1px solid rgba(58,11,72,0.08);
    transition: background-color 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}
.navbar.is-scrolled{
    background-color: #ffffff;
    padding: 0.3rem 0;
    box-shadow: 0 10px 30px -14px rgba(58,11,72,0.25);
}

.navbar-nav{
    gap: 0.1rem;
    flex-wrap: nowrap;
}
.navbar-nav .nav-item{ padding: 0; }
.navbar .nav-link{
    margin: 0;
    padding: 0.55rem 0.85rem !important;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.navbar-book-btn{
    margin-left: 0.6rem;
    padding: 0.6rem 1.4rem !important;
    font-size: 0.8rem;
    white-space: nowrap;
    flex: none;
}

/* Mega menu trigger */
.nav-item.mega{ position: static; }
.nav-item.mega .dropdown-toggle::after{
    display: none;
    content: none;
}

.mega-panel{
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    width: 100%;
    margin: 0;
    padding: 2rem 0 2.2rem;
    border: none;
    border-radius: 0 0 22px 22px;
    background: #ffffff;
    box-shadow: 0 35px 60px -20px rgba(58,11,72,0.28);
    border-top: 3px solid var(--accent-yellow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    display: block !important;
}
.nav-item.mega:hover .mega-panel,
.nav-item.mega .mega-panel.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.mega-panel .container{ max-width: 1200px; }

.mega-col-title{
    color: var(--primary-purple);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.mega-col-title::before{
    content: "";
    width: 18px; height: 2px;
    background: var(--accent-yellow);
    display: inline-block;
}
.mega-panel ul{ list-style: none; padding: 0; margin: 0; }
.mega-panel ul li{ margin-bottom: 0.55rem; }
.mega-panel ul li a{
    color: var(--text-dark);
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    transition: color 0.25s ease, transform 0.25s ease;
}
.mega-panel ul li a i{ color: var(--accent-hover); font-size: 0.75rem; width: 14px; }
.mega-panel ul li a:hover{ color: var(--primary-purple); transform: translateX(4px); }

.mega-promo{
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    height: 100%;
    min-height: 190px;
    box-shadow: var(--shadow-spread-purple);
}
.mega-promo img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.mega-promo::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 30%, rgba(58,11,72,0.95) 100%);
}
.mega-promo-body{
    position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 1.1rem 1.3rem;
}
.mega-promo-body span{ color: var(--accent-yellow); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; }
.mega-promo-body h5{ color:#fff; margin: 0.3rem 0 0.6rem; font-size:1.05rem; }
.mega-promo-body a{ color:#fff; font-size:0.82rem; font-weight:600; }
.mega-promo-body a:hover{ color: var(--accent-yellow); }

.mega-divider{ border-left: 1px solid rgba(58,11,72,0.1); }

@media (max-width: 991.98px){
    .mega-panel{
        position: static; box-shadow:none; border-radius: 12px; margin-top: 0.5rem;
        opacity:1; visibility:visible; transform:none; display:none !important; padding: 1.2rem 1rem;
        background: #faf6fb;
    }
    .nav-item.mega .mega-panel.show{ display:block !important; }
    .navbar-book-btn{ margin: 0.8rem 0 0; display:inline-block; }
}

/* -------------------------------------------------------------
   2. HERO — 6:2 (3:1) ratio banner with glass booking widget
   ------------------------------------------------------------- */
.navbar-brand img{
    max-height: 80px;
    width: auto;
    object-fit: contain;
}

.hero-banner-wrap{ position: relative; }

.ratio-6-2 .carousel-item{
    aspect-ratio: 3 / 1; /* 6:2 ratio */
    width: 100%;
    overflow: hidden;
    background-color: var(--primary-purple);
}
.ratio-6-2 .carousel-item img{
    width:100%; height:100%; object-fit:cover; object-position:center;
}
.ratio-6-2 .carousel-item::before{
    content:''; position:absolute; inset:0; z-index:1;
    background: linear-gradient(100deg, rgba(58,11,72,0.82) 0%, rgba(58,11,72,0.35) 45%, rgba(58,11,72,0.65) 100%);
}

@media (max-width: 991.98px){
    .ratio-6-2 .carousel-item{ aspect-ratio: 4 / 3; }
}
@media (max-width: 575.98px){
    .ratio-6-2 .carousel-item{ aspect-ratio: 3 / 4; }
}

/* Hero headline overlay */
.hero-copy{
    position: absolute;
    z-index: 3;
    left: 0; right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    color: #fff;
    pointer-events: none;
}
.hero-copy .container > *{ pointer-events: auto; }
.hero-copy .eyebrow-tag{
    display:inline-flex; align-items:center; gap:0.6rem;
    color: var(--accent-yellow); font-size:0.72rem; font-weight:600;
    letter-spacing:0.18em; text-transform:uppercase; margin-bottom:0.5rem;
}
.hero-copy .eyebrow-tag::before{ content:""; width:22px; height:2px; background:var(--accent-yellow); }
.hero-copy h1{
    color:#fff; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height:1.15; max-width:560px; margin-bottom: 0.4rem;
    text-shadow: 0 12px 26px rgba(0,0,0,0.45);
}
.hero-copy h1 em{ font-style:normal; color: var(--accent-yellow); }
.hero-copy p{ max-width: 420px; color: rgba(255,255,255,0.85); font-size:0.92rem; margin-top:0.4rem; line-height:1.4; }

@media (max-width: 575.98px){
    .hero-copy{ align-items: flex-start; padding-top: 1.4rem; }
    .hero-copy h1{ font-size: 1.35rem; }
    .hero-copy p{ font-size:0.82rem; }
}

/* Decorative wind streaks */
.wind-fx{
    position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none;
}
.wind-streak{
    position:absolute; height:2px; border-radius:10px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    filter: blur(1px);
    opacity: 0.55;
    animation: windDrift linear infinite;
}
.wind-streak.w1{ top:18%; width:220px; animation-duration: 7s; }
.wind-streak.w2{ top:38%; width:160px; animation-duration: 9s; animation-delay: 1.5s; }
.wind-streak.w3{ top:62%; width:260px; animation-duration: 11s; animation-delay: 0.6s; }
.wind-streak.w4{ top:78%; width:140px; animation-duration: 8s; animation-delay: 3s; }
@keyframes windDrift{
    0%{ transform: translateX(-260px); opacity:0; }
    12%{ opacity:0.6; }
    88%{ opacity:0.6; }
    100%{ transform: translateX(110vw); opacity:0; }
}

/* Decorative water waves at hero base */
.water-fx{
    position:absolute; left:0; right:0; bottom:-2px; z-index:2; line-height:0; pointer-events:none;
}
.water-fx svg{ width:100%; height:70px; display:block; }
.water-fx .wave-a{ animation: waveMove 14s linear infinite; }
.water-fx .wave-b{ animation: waveMove 22s linear infinite reverse; opacity:0.6; }
@keyframes waveMove{
    0%{ transform: translateX(0); }
    100%{ transform: translateX(-50%); }
}

/* -------------------------------------------------------------
   3. GLASS BOOKING WIDGET (embedded in hero + contact page)
   ------------------------------------------------------------- */
.booking-widget-anchor{
    position: relative;
    z-index: 5;
    margin-top: -78px; /* overlaps the hero banner bottom edge */
    padding-bottom: 2rem;
}
.booking-widget-anchor.static-position{ margin-top: 0; padding-top: 1rem; }

.glass-card{
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 22px;
    box-shadow: var(--shadow-spread-purple);
    position: relative;
    overflow: hidden;
}
.glass-card::before{
    content:"";
    position:absolute; top:-40%; left:-10%; width:60%; height:180%;
    background: linear-gradient(120deg, rgba(255,255,255,0.22), transparent 60%);
    transform: rotate(18deg);
    pointer-events:none;
}

.booking-widget{
    padding: 1.7rem 1.9rem;
}
.booking-widget-title{
    color:#fff; font-size:0.78rem; font-weight:600; letter-spacing:0.14em;
    text-transform:uppercase; margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem;
}
.booking-widget-title i{ color: var(--accent-yellow); }

.bw-field label{
    color: rgba(255,255,255,0.85);
    font-size:0.7rem; font-weight:600; letter-spacing:0.03em;
    margin-bottom: 0.28rem; display:block;
}
.bw-field .form-control, .bw-field .form-select{
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    font-size: 0.82rem;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}
.bw-field .form-control:focus, .bw-field .form-select:focus{
    border-color: var(--accent-yellow);
    box-shadow: 0 0 0 4px rgba(255,193,7,0.28);
}
.bw-field .input-group-text{
    background: rgba(255,255,255,0.92); border:1px solid rgba(255,255,255,0.5); border-right:none;
    color: var(--primary-purple); border-radius: 12px 0 0 12px;
}
.bw-field .input-group .form-control{ border-radius: 0 12px 12px 0; border-left:none; }
.bw-field input[type="date"]::-webkit-calendar-picker-indicator,
.bw-field input[type="datetime-local"]::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:0.75; }
.bw-field input[type="date"]::-webkit-calendar-picker-indicator:hover,
.bw-field input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover{ opacity:1; }

.bw-submit{
    width: 100%;
    height: 100%;
    min-height: 42px;
    font-size: 0.85rem;
}

.booking-widget .invalid-feedback{ color: #ffd9a0; font-size:0.76rem; }
.booking-widget .form-control.is-invalid, .booking-widget .form-select.is-invalid{
    border-color:#ff8a8a; box-shadow: 0 0 0 4px rgba(255,80,80,0.2);
}

/* Hotel-booking checkbox toggle within the widget */
.bw-check{
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    cursor:pointer;
    color: rgba(255,255,255,0.92);
    font-size:0.9rem;
    font-weight:600;
    user-select:none;
}
.bw-check input[type="checkbox"]{
    width:18px; height:18px;
    accent-color: var(--accent-yellow);
    cursor:pointer;
    margin:0;
}
.bw-check i{ color: var(--accent-yellow); }
.bw-hotel-field{ animation: bwFieldIn 0.35s ease; }
@keyframes bwFieldIn{
    from{ opacity:0; transform: translateY(-6px); }
    to{ opacity:1; transform: translateY(0); }
}

/* -------------------------------------------------------------
   4. BOOKING MODAL — multi-step
   ------------------------------------------------------------- */
#bookingModal .modal-dialog{ max-width: 620px; }
#bookingModal .modal-content{
    border: none;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(58,11,72,0.98), rgba(38,6,49,0.98));
    box-shadow: var(--shadow-spread-purple);
    color:#fff;
}
#bookingModal .modal-header{
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding: 1.5rem 1.8rem 1.1rem;
}
#bookingModal .modal-title{ color:#fff; font-size:1.35rem; }
#bookingModal .modal-title span{ display:block; color: var(--accent-yellow); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; font-family:var(--font-body); font-weight:600; margin-bottom:0.3rem; }
#bookingModal .btn-close{ filter: invert(1); }
#bookingModal .modal-body{ padding: 1.6rem 1.8rem 0.4rem; }
#bookingModal .modal-footer{ border-top: 1px solid rgba(255,255,255,0.12); padding: 1.2rem 1.8rem 1.6rem; }

/* Step indicator */
.step-track{
    display:flex; align-items:center; gap:0.4rem; margin-bottom:1.6rem;
}
.step-track .dot{
    width: 32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:0.8rem; font-weight:700;
    background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6);
    border: 1.5px solid rgba(255,255,255,0.25);
    transition: all 0.35s ease;
}
.step-track .bar{ flex:1; height:2px; background: rgba(255,255,255,0.18); position:relative; overflow:hidden; }
.step-track .bar::after{
    content:""; position:absolute; inset:0; width:0%; background: var(--accent-yellow); transition: width 0.4s ease;
}
.step-track .dot.active{ background: var(--accent-yellow); color: var(--primary-purple); border-color: var(--accent-yellow); box-shadow: 0 0 0 5px rgba(255,193,7,0.2); }
.step-track .dot.done{ background: var(--accent-yellow); color: var(--primary-purple); border-color: var(--accent-yellow); }
.step-track .bar.done::after{ width:100%; }

.modal-step{ display:none; }
.modal-step.active{ display:block; animation: stepIn 0.4s ease; }
@keyframes stepIn{ from{ opacity:0; transform: translateX(16px);} to{opacity:1; transform:translateX(0);} }

.modal-step label{ color: rgba(255,255,255,0.85); font-size:0.76rem; font-weight:600; margin-bottom:0.28rem; }
.modal-step .form-control, .modal-step .form-select, .modal-step textarea{
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}
.modal-step .form-control::placeholder{ color: rgba(255,255,255,0.4); }
.modal-step .form-control:focus, .modal-step .form-select:focus{
    background: rgba(255,255,255,0.12);
    border-color: var(--accent-yellow);
    box-shadow: 0 0 0 4px rgba(255,193,7,0.18);
    color: #fff;
}
.modal-step select option{ color:#000; }
/* Native date-picker icon is dark by default and invisible on this dark field background */
.modal-step input[type="date"]::-webkit-calendar-picker-indicator,
.modal-step input[type="datetime-local"]::-webkit-calendar-picker-indicator{
    filter: invert(1);
    cursor: pointer;
    opacity: 0.8;
}
.modal-step input[type="date"]::-webkit-calendar-picker-indicator:hover,
.modal-step input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover{ opacity: 1; }

.review-box{
    background: rgba(255,255,255,0.07);
    border: 1px dashed rgba(255,255,255,0.25);
    border-radius: 14px;
    padding: 1.1rem 1.3rem;
    font-size: 0.9rem;
}
.review-box .rb-row{ display:flex; justify-content:space-between; padding:0.4rem 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.review-box .rb-row:last-child{ border-bottom:none; }
.review-box .rb-row span:first-child{ color: rgba(255,255,255,0.6); }
.review-box .rb-row span:last-child{ font-weight:600; color:#fff; text-align:right; }

.step-success{ text-align:center; padding: 1.2rem 0 1.6rem; }
.step-success i{ font-size:3.4rem; color: var(--accent-yellow); margin-bottom:1rem; display:block; }
.step-success h4{ color:#fff; margin-bottom:0.5rem; }
.step-success p{ color: rgba(255,255,255,0.75); }

.success-contact-box{
    background: rgba(255,255,255,0.07);
    border: 1px dashed rgba(255,255,255,0.25);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    margin: 1.1rem auto 0;
    max-width: 420px;
    text-align: left;
}
.success-contact-box p{
    margin: 0 0 0.5rem;
    font-size: 0.86rem;
    color: rgba(255,255,255,0.85);
}
.success-contact-box p:last-child{ margin-bottom: 0; }
.success-contact-box i{
    font-size: 0.85rem;
    color: var(--accent-yellow);
    margin-right: 0.4rem;
    display: inline;
}
.success-contact-box strong{ color: #fff; }
.success-contact-box a{
    color: var(--accent-yellow);
    font-weight: 600;
}
.success-contact-box a:hover{ text-decoration: underline; }

/* -------------------------------------------------------------
   5. ADMIN ENQUIRIES MODAL
   ------------------------------------------------------------- */
#adminModal .modal-dialog{ max-width: 960px; }
#adminModal .modal-content{
    border:none; border-radius:20px; overflow:hidden;
    box-shadow: var(--shadow-spread-purple);
}
#adminModal .modal-header{ background: var(--primary-purple); color:#fff; border:none; }
#adminModal .modal-title{ color:#fff; }
#adminModal .btn-close{ filter: invert(1); }
.admin-table-wrap{ max-height: 55vh; overflow:auto; }
.admin-table{ width:100%; font-size:0.85rem; border-collapse:separate; border-spacing:0; }
.admin-table thead th{
    position:sticky; top:0; background: var(--primary-purple); color: var(--accent-yellow);
    padding: 0.7rem 0.8rem; text-align:left; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
    white-space:nowrap;
}
.admin-table tbody td{ padding: 0.65rem 0.8rem; border-bottom: 1px solid #eee; vertical-align: top; }
.admin-table tbody tr:hover{ background: #faf4e8; }
.admin-empty{ text-align:center; padding: 3rem 1rem; color: var(--text-muted); }
.admin-empty i{ font-size:2.4rem; color:#ddd; display:block; margin-bottom:1rem; }
.admin-badge{
    background: var(--accent-yellow); color: var(--primary-purple); font-weight:700;
    border-radius: 30px; padding: 0.2rem 0.7rem; font-size:0.72rem;
}

/* -------------------------------------------------------------
   6. RIPPLE + TOAST
   ------------------------------------------------------------- */
.ripple-holder{ position:relative; overflow:hidden; }
.ripple-circle{
    position:absolute; border-radius:50%; background: rgba(255,255,255,0.55);
    transform: scale(0); animation: rippleAnim 0.6s ease-out; pointer-events:none;
}
@keyframes rippleAnim{ to{ transform: scale(2.6); opacity:0; } }

#oryxToast{
    position: fixed; bottom: 24px; right: 24px; z-index: 2000;
    background: var(--primary-purple); color:#fff; padding: 1rem 1.4rem;
    border-radius: 14px; box-shadow: var(--shadow-spread-purple);
    display:flex; align-items:center; gap:0.8rem;
    transform: translateY(30px); opacity:0; visibility:hidden;
    transition: all 0.4s ease; border-left: 4px solid var(--accent-yellow);
    max-width: 320px;
}
#oryxToast.show{ transform: translateY(0); opacity:1; visibility:visible; }
#oryxToast i{ color: var(--accent-yellow); font-size:1.3rem; }

/* -------------------------------------------------------------
   7. Misc premium polish
   ------------------------------------------------------------- */
.reveal-fx{ opacity:0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-fx.in{ opacity:1; transform:translateY(0); }

.back-to-top{
    position:fixed; right:22px; bottom:22px; z-index:900;
    width:46px; height:46px; border-radius:50%;
    background: var(--accent-yellow); color: var(--primary-purple);
    display:flex; align-items:center; justify-content:center;
    box-shadow: var(--shadow-spread-gold);
    opacity:0; visibility:hidden; transform: translateY(10px);
    transition: all 0.35s ease; border:none;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background: var(--primary-purple); color:#fff; }

@media (max-width: 767.98px){
    .booking-widget-anchor{ margin-top: -50px; }
    .booking-widget{ padding: 1.3rem 1.2rem; }
}

/* Offset anchored jump-targets (mega menu deep links) below the fixed navbar */
[id]{ scroll-margin-top: 110px; }


/* ==========================================================================
   ★ 2026 UPDATE — purple header, hotels module, secure forms
   These rules are appended last so they win over the earlier defaults.
   ========================================================================== */

/* -------------------------------------------------------------
   1. NAVBAR — deep purple bar with light text
   ------------------------------------------------------------- */
.navbar,
.navbar-sticky {
    background-color: var(--primary-purple);
    background-image: linear-gradient(120deg, #2d0838 0%, var(--primary-purple) 48%, var(--primary-light) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 8px 30px -18px rgba(0, 0, 0, 0.65);
}

.navbar.is-scrolled,
.navbar-sticky.is-scrolled {
    background-color: #2d0838;
    background-image: linear-gradient(120deg, #260630 0%, #3a0b48 55%, #4b1360 100%);
    box-shadow: 0 12px 34px -16px rgba(0, 0, 0, 0.75);
}

.navbar .navbar-brand,
.navbar .navbar-brand span { color: #ffffff !important; }

/* The logo keeps its own colours — no CSS filter is applied to it.
   Because the bar is now dark, it sits on a light rounded plate so the
   purple/orange marks in the artwork stay legible. */
.navbar-brand {
    display: inline-flex;
    align-items: center;
    padding: 0 0;
}
.navbar-brand img,
.logo-plate img { filter: none !important; }
.navbar-brand img { 
    border-radius: 0;
    padding: 2px 12px;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.55);
}

.navbar .nav-link {
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 500;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff !important;
}
.navbar .nav-link.active {
    background-color: var(--accent-yellow);
    color: var(--primary-purple) !important;
    font-weight: 700;
}
.navbar .nav-item.mega:hover > .nav-link {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff !important;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.35); }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* mega panel keeps its light surface, anchored under the purple bar */
.mega-panel { border-top: 3px solid var(--accent-yellow); }

@media (max-width: 991.98px) {
    .navbar-collapse { padding-bottom: 0.8rem; }
    .mega-panel { background: rgba(255, 255, 255, 0.96); }
}

/* -------------------------------------------------------------
   2. SHARED BITS
   ------------------------------------------------------------- */
.btn-sm.btn-3d { padding: 8px 18px; font-size: 0.76rem; box-shadow: 0 4px 0 #c79500, 0 6px 14px rgba(0,0,0,.22); }
.btn-outline-oryx.btn-sm { padding: 7px 18px; font-size: 0.78rem; border-width: 2px; }

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-muted);
}
.empty-state i { font-size: 2.4rem; color: rgba(58, 11, 72, 0.18); margin-bottom: 0.8rem; display: block; }
.empty-state h4 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.empty-state p { font-size: 0.9rem; margin-bottom: 1rem; }

/* toast */
#oryxToast {
    position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 140%);
    background: var(--primary-purple); color: #fff;
    padding: 0.85rem 1.4rem; border-radius: 100px;
    display: flex; align-items: center; gap: 0.7rem;
    font-size: 0.9rem; font-weight: 500; z-index: 3000;
    box-shadow: 0 18px 44px -12px rgba(58, 11, 72, 0.6);
    transition: transform 0.45s cubic-bezier(.22,1,.36,1);
    max-width: min(92vw, 460px);
}
#oryxToast.show { transform: translate(-50%, 0); }
#oryxToast.is-error { background: #96243a; }
#oryxToast i { color: var(--accent-yellow); }

/* honeypot — off screen but not display:none (bots skip hidden fields) */
.hp-wrap { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------
   3. HOTELS — cards, filters, listing
   ------------------------------------------------------------- */
.hotel-card {
    background: var(--bg-white);
    border-radius: 18px;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 12px 34px -20px rgba(58, 11, 72, 0.45);
    border: 1px solid rgba(58, 11, 72, 0.07);
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.hotel-card:hover { transform: translateY(-8px); box-shadow: 0 26px 50px -22px rgba(58, 11, 72, 0.55); }

.hotel-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.hotel-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hotel-card:hover .hotel-card-media img { transform: scale(1.07); }

.hotel-chip {
    position: absolute; left: 12px; top: 12px;
    background: rgba(255, 255, 255, 0.94); color: var(--primary-purple);
    font-size: 0.78rem; font-weight: 700; padding: 4px 11px; border-radius: 100px;
    display: inline-flex; align-items: center; gap: 5px;
}
.hotel-chip i { color: var(--accent-hover); font-size: 0.72rem; }
.hotel-flag {
    position: absolute; right: 12px; top: 12px;
    background: var(--accent-yellow); color: var(--primary-purple);
    font-size: 0.66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 100px;
}

.hotel-card-body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.hotel-meta { font-size: 0.76rem; color: var(--text-muted); font-weight: 600; margin-bottom: 0.4rem; }
.hotel-meta i { color: var(--accent-hover); }
.hotel-meta .dot { opacity: .45; margin: 0 3px; }
.hotel-card-body h3 { font-size: 1.16rem; margin-bottom: 0.45rem; line-height: 1.3; }
.hotel-card-body > p { font-size: 0.87rem; color: var(--text-muted); margin-bottom: 0.8rem; }

.hotel-amenity-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 1rem; }
.hotel-amenity-row span {
    font-size: 0.7rem; background: rgba(58, 11, 72, 0.06); color: var(--primary-purple);
    padding: 3px 9px; border-radius: 100px; font-weight: 600;
}
.hotel-amenity-row .more { background: var(--accent-yellow); }

.hotel-card-foot {
    margin-top: auto; padding-top: 0.85rem; border-top: 1px solid rgba(58, 11, 72, 0.08);
    display: flex; align-items: flex-end; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
}
.hotel-price strong { display: block; font-family: var(--font-heading); font-size: 1.2rem; color: var(--primary-purple); line-height: 1.1; }
.hotel-price span { font-size: 0.7rem; color: var(--text-muted); }
.hotel-price--hidden strong { font-size: 1rem; color: var(--text-muted); font-style: italic; }
.hotel-card-actions { display: flex; gap: 0.4rem; }

/* city grouping */
.city-group + .city-group { margin-top: 2.6rem; }
.city-group-head {
    display: flex; align-items: baseline; gap: 0.9rem;
    padding-bottom: 0.7rem; margin-bottom: 1.3rem;
    border-bottom: 2px solid rgba(58, 11, 72, 0.09);
}
.city-group-head h2 { font-size: 1.55rem; margin: 0; }
.city-group-head span { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }

/* filter sidebar */
.filter-panel {
    background: var(--bg-white); border-radius: 18px; padding: 1.3rem;
    box-shadow: 0 12px 34px -22px rgba(58, 11, 72, 0.4);
    border: 1px solid rgba(58, 11, 72, 0.07);
    position: sticky; top: 90px;
}
.filter-panel h3 { font-size: 1.05rem; margin-bottom: 0.2rem; }
.filter-group { padding: 1rem 0; border-bottom: 1px solid rgba(58, 11, 72, 0.07); }
.filter-group:last-of-type { border-bottom: none; }
.filter-group > label,
.filter-legend {
    display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--primary-purple); margin-bottom: 0.6rem;
}
.filter-scroll { max-height: 190px; overflow-y: auto; padding-right: 4px; }
.filter-check { display: flex; align-items: center; gap: 0.55rem; font-size: 0.86rem; padding: 3px 0; cursor: pointer; }
.filter-check input { width: 16px; height: 16px; accent-color: var(--primary-purple); flex: none; }
.tag-pill {
    background: rgba(58, 11, 72, 0.06); border: 1px solid transparent; color: var(--primary-purple);
    font-size: 0.75rem; font-weight: 600; padding: 5px 12px; border-radius: 100px; margin: 0 4px 6px 0;
    transition: all .2s ease;
}
.tag-pill:hover { background: rgba(58, 11, 72, 0.12); }
.tag-pill.on { background: var(--primary-purple); color: #fff; }
#fPriceOut { font-size: 0.85rem; font-weight: 700; color: var(--primary-purple); }
input[type="range"] { width: 100%; accent-color: var(--primary-purple); }

.listing-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.listing-bar h2 { font-size: 1.1rem; margin: 0; font-family: var(--font-body); font-weight: 700; color: var(--text-dark); }
.listing-bar select { max-width: 220px; }

#fToggle { display: none; }
@media (max-width: 991.98px) {
    .filter-panel { position: static; display: none; }
    #hotelFilters.open .filter-panel { display: block; }
    #fToggle { display: inline-flex; }
}

/* -------------------------------------------------------------
   4. HOTEL DETAIL PAGE
   ------------------------------------------------------------- */
.detail-crumbs { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1.1rem; }
.detail-crumbs a { color: var(--primary-purple); font-weight: 600; }
.detail-crumbs i { margin: 0 6px; opacity: .5; font-size: 0.7rem; }

.detail-gallery { display: grid; gap: 0.7rem; }
.dg-main { border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 8; }
.dg-main img { width: 100%; height: 100%; object-fit: cover; }
.dg-thumbs { display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 4px; }
.dg-thumb {
    flex: 0 0 110px; height: 74px; border-radius: 12px; overflow: hidden;
    border: 3px solid transparent; padding: 0; background: none; transition: border-color .2s ease;
}
.dg-thumb.on { border-color: var(--accent-yellow); }
.dg-thumb img { width: 100%; height: 100%; object-fit: cover; }

.detail-head { padding: 1.4rem 0 0.6rem; }
.detail-meta { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.detail-meta i { color: var(--accent-hover); }
.detail-meta .dot { opacity: .45; margin: 0 4px; }
.detail-head h1 { font-size: 2.1rem; margin: 0.35rem 0 0.5rem; }
.detail-rating { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
.rating-pill {
    background: var(--primary-purple); color: #fff; font-weight: 700; font-size: 0.85rem;
    padding: 4px 12px; border-radius: 100px;
}
.rating-pill i { color: var(--accent-yellow); font-size: 0.75rem; }
.detail-rating small { color: var(--text-muted); font-size: 0.82rem; }
.detail-address { font-size: 0.88rem; color: var(--text-muted); }
.detail-address i { color: var(--accent-hover); margin-right: 5px; }

.detail-section { padding: 1.6rem 0; border-top: 1px solid rgba(58, 11, 72, 0.09); }
.detail-section h3 { font-size: 1.25rem; margin-bottom: 0.9rem; }
.detail-section > p { color: var(--text-muted); line-height: 1.75; }

.amenity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6rem; }
.amenity-item { font-size: 0.88rem; display: flex; align-items: center; gap: 0.5rem; }
.amenity-item i { color: #2f9e5f; font-size: 0.85rem; }

.room-list { display: flex; flex-direction: column; gap: 0.7rem; }
.room-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: var(--bg-white); border: 1px solid rgba(58, 11, 72, 0.09);
    border-radius: 14px; padding: 1rem 1.15rem;
}
.room-info h4 { font-size: 1.02rem; margin-bottom: 0.3rem; }
.room-info span { font-size: 0.79rem; color: var(--text-muted); margin-right: 0.9rem; }
.room-info span i { color: var(--accent-hover); margin-right: 4px; }
.room-act { display: flex; align-items: center; gap: 0.9rem; }
.room-price { font-family: var(--font-heading); font-weight: 700; color: var(--primary-purple); font-size: 1.08rem; }
.room-price small { font-size: 0.68rem; color: var(--text-muted); font-weight: 400; }
.room-price--hidden { font-size: 0.9rem; font-style: italic; color: var(--text-muted); }

.policy-list { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.policy-list li { font-size: 0.88rem; display: flex; gap: 0.6rem; padding: 0.35rem 0; color: var(--text-muted); }
.policy-list i { color: var(--primary-light); margin-top: 3px; }
.checkin-row { display: flex; gap: 1.6rem; }
.checkin-row span { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 700; }
.checkin-row strong { font-family: var(--font-heading); font-size: 1.15rem; color: var(--primary-purple); }

.detail-aside {
    background: var(--bg-white); border-radius: 18px; padding: 1.4rem;
    border: 1px solid rgba(58, 11, 72, 0.09);
    box-shadow: 0 16px 40px -24px rgba(58, 11, 72, 0.5);
    position: sticky; top: 90px;
}
.detail-price { text-align: center; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(58,11,72,.09); }
.detail-price span { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 700; }
.detail-price strong { display: block; font-family: var(--font-heading); font-size: 2rem; color: var(--primary-purple); line-height: 1.15; }
.detail-price small { font-size: 0.76rem; color: var(--text-muted); }
.detail-price--hidden strong { font-size: 1.4rem; font-style: italic; }
.aside-facts { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(58,11,72,.09); }
.aside-facts > div { display: flex; gap: 0.6rem; font-size: 0.83rem; padding: 0.32rem 0; color: var(--text-muted); }
.aside-facts i { color: var(--accent-hover); width: 16px; margin-top: 3px; }

/* -------------------------------------------------------------
   5. BOOKING MODAL — extra fields from the advanced flow
   ------------------------------------------------------------- */
.pane-head {
    display: flex; align-items: center; gap: 0.55rem;
    color: var(--accent-yellow); font-size: 0.74rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    padding-bottom: 0.65rem; margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.nights-box {
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px; padding: 0.6rem 0.9rem;
    color: #fff; font-weight: 700; font-size: 0.95rem;
}
.form-hint { font-size: 0.72rem; color: rgba(255, 255, 255, 0.6); margin-top: 0.3rem; }
.modal .opt { font-weight: 400; opacity: .6; }
.consent-err { display: none; color: #ffb1b1; font-size: 0.78rem; margin-top: 0.35rem; }
.privacy-note {
    font-size: 0.76rem; color: rgba(255, 255, 255, 0.65);
    margin: 1rem 0 0; display: flex; align-items: center; gap: 0.45rem;
}
.privacy-note i { color: var(--accent-yellow); }
.modal-dialog-scrollable .modal-body { max-height: 72vh; }

/* -------------------------------------------------------------
   6. INNER PAGE BANNER (used by hotels.html / hotel.html)
   ------------------------------------------------------------- */
.page-head {
    background: linear-gradient(120deg, #2d0838 0%, var(--primary-purple) 55%, var(--primary-light) 100%);
    color: #fff; padding: 3rem 0 2.6rem; text-align: center;
}
.page-head h1 { color: #fff; font-size: 2.5rem; margin-bottom: 0.5rem; }
.page-head p { color: rgba(255, 255, 255, 0.78); max-width: 640px; margin: 0 auto; font-size: 0.98rem; }

/* cross-sell strip used on packages.html / destination.html */
.cta-strip {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    background: linear-gradient(120deg, #2d0838, var(--primary-purple) 60%, var(--primary-light));
    color: #fff; border-radius: 20px; padding: 1.8rem 2rem;
}
.cta-strip h3 { color: #fff; font-size: 1.35rem; margin-bottom: 0.3rem; }
.cta-strip p { color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; }


/* Reusable light plate for the logo wherever it sits on a dark surface. */
.logo-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 12px;
    padding: 8px 14px;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
}
.logo-plate img { max-height: 40px; display: block; }
.logo-plate.sm { padding: 5px 9px; border-radius: 9px; }
.logo-plate.sm img { max-height: 26px; }

/* Footer credit line */
.footer-bottom .footer-credit {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
}
.footer-bottom .footer-credit a {
    color: var(--accent-yellow);
    text-decoration: none;
    font-weight: 600;
}
.footer-bottom .footer-credit a:hover { text-decoration: underline; }