/*
 * Qorezo HMS — Bundled CSS
 * Generated: 2026-06-12 15:38:55 UTC
 * Source: luxe/main.css (21 files)
 * Hash: 2ec8ebf9
 * Total: 79,835 bytes (uncompressed)
 *
 * DO NOT EDIT THIS FILE DIRECTLY.
 * Edit individual CSS files and re-run: python manage.py bundle_css
 */

/* ====================================================================== */
/* Source: ../_shared/base/global.css (82 bytes) */
/* ====================================================================== */
/* Global Styles */
/* Standardized utility classes and reset overrides if any. */

/* ====================================================================== */
/* Source: ../_shared/base/icons.css (942 bytes) */
/* ====================================================================== */
/* ----------------------------------------------------
   ICON STYLES – MATERIAL SYMBOLS & FONT AWESOME
----------------------------------------------------- */

/* Google Material Symbols */
.material-symbols-outlined {
    /* Uncomment below to customize weight, fill, etc.
    font-variation-settings:
        'FILL' 0,
        'wght' 600,
        'GRAD' 200,
        'opsz' 16;
    */
    color: var(--brand-primary-color);
    font-size: 0.8rem;
    display: inline-block;
    vertical-align: middle;
}

/* Font Awesome (Generic icons) */
.fa-solid,
.fa-brands,
.fa-hotel,
.fa-calendar-days,
.fa-user-plus,
.fa-location-dot {
    color: var(--brand-primary-color);
    font-size: var(--font-size-base);
}

/* Icon Variants */
.fa-chevron-down {
    color: var(--text-primary);
}

.fa-magnifying-glass {
    color: var(--text-tertiary); /* Corrected typo: was --text-teritary */
}

.fa-angle-right {
    color: var(--color-tertiary);
}

/* ====================================================================== */
/* Source: ../_shared/base/media.css (742 bytes) */
/* ====================================================================== */
/* ----------------------------------------------------
   RESPONSIVE TYPOGRAPHY (Mobile: max-width 1024px)
----------------------------------------------------- */
@media only screen and (max-width: 1024px) {

    /* Headings */
    h1 {
        font-size: 2rem; /* 32px */
    }

    h2 {
        font-size: 1.5rem; /* 24px */
    }

    h3 {
        font-size: 1.25rem; /* 20px */
    }

    h4 {
        font-size: var(--font-size-base); /* 16px */
        font-family: var(--font-family-primary);
    }

    /* Paragraphs */
    p {
        font-size: var(--font-size-base); /* 16px */
        line-height: var(--line-height-normal); /* 24px */
        font-family: var(--font-family-primary);
        color: var(--text-primary);
    }
}

/* ====================================================================== */
/* Source: ../_shared/base/reset.css (1,145 bytes) */
/* ====================================================================== */
/* ----------------------------------------------------
   RESET + SCROLL SETTINGS
----------------------------------------------------- */

:root {
    --layout-breakout-inline: var(--margin-page-negative);
}


/* Universal Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Root Element Setup */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 4.688rem; /* Reserve space above anchor targets (e.g., fixed nav height) */
    margin: 0;
    padding: var(--margin-page);
    overflow-x: hidden; /* Clip breakout sections at viewport edge, not inner containers */
}

/* Body Base Background */
body {
    background-color: var(--background-primary);
}

/* Mobile Layout Spacing Overrides across all themes */
@media (max-width: 1024px) {
    :root {
        --margin-page: 0 !important;
        --margin-page-negative: 0 !important;
        --margin-page-negative-mobile: 0 !important;
        --layout-breakout-inline: 0 !important;
    }
    body {
        margin: var(--margin-page); /* Apply desktop page margins (0 7.5rem) */
        overflow-x: hidden; /* 2. Secondary safety horizontal clip */
    }
}

/* ====================================================================== */
/* Source: ../_shared/base/typography.css (2,995 bytes) */
/* ====================================================================== */
/* ----------------------------------------------------
   1. FONT IMPORTS
----------------------------------------------------- */
/* Removed @imports in favor of <link> tags in head.html for performance */


/* ----------------------------------------------------
   2. BASE TYPOGRAPHY & LAYOUT
----------------------------------------------------- */
body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    margin: 0;
    padding: 0;
    background-color: var(--background-primary);
}

/* Headings */
h1 {
    font-size: 3.5rem; /* 56px */
    font-weight: 500;
}

h2 {
    font-size: 2.25rem; /* 36px */
    font-weight: 500;
}

h3 {
    font-size: 1.25rem; /* 20px */
    font-weight: 500;
}

h4 {
    font-size: 1rem; /* 16px */
    font-weight: 500;
}

/* Paragraphs */
p {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    line-height: var(--line-height-relaxed); /* 28px */
}

/* Links */
a {
    text-decoration: none;
    display: inline-block;
    color: inherit;
}

/* Lists */
ul {
    list-style: none;
}

/* ----------------------------------------------------
   3. FONT SIZE UTILITIES
----------------------------------------------------- */
.font-size-small {
    font-size: var(--font-size-sm); /* 14px */
    font-weight: var(--font-weight-medium);
}

.font-size-small-bold {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.font-size-smaller {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
}

.button-font-size {
    font-size: var(--font-size-lg); /* 18px */
    font-weight: var(--font-weight-bold);
}

.button-smaller-font-size {
    font-size: var(--font-size-base); /* 16px */
    font-weight: var(--font-weight-bold);
}

/* ----------------------------------------------------
   4. UNDERLINE EFFECT (Highlight Specific Character)
----------------------------------------------------- */
.underline-char {
    position: relative;
    display: inline-block;
    font-size: 1.5rem; /* Optional adjustment */
}

.underline {
    position: relative;
    display: inline-block;
}

.underline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.313rem; /* 5px */
    background: var(--underline-color, var(--gradient-primary));
    border-radius: 0.625rem; /* 10px */
    transition: background 0.3s ease;
}

/* Highlighted text */
.highlighter {
    color: var(--brand-primary-color);
}

/* ----------------------------------------------------
   5. CURRENCY TYPOGRAPHY
----------------------------------------------------- */
/* ✅ Standardized Currency Typography */
.currency-symbol {
    font-size: 0.6em;
    font-weight: 500;
    vertical-align: 0.15em;
    margin-right: 2px;
    opacity: 0.85;
}

.currency-value {
    font-weight: inherit; /* Inherit parent's weight (e.g., Bold for totals) */
    font-variant-numeric: tabular-nums;
}

/* ====================================================================== */
/* Source: ./base/variables.css (3,484 bytes) */
/* ====================================================================== */

:root {
  /* -------------------- 1. LAYOUT SPACING -------------------- */
  --margin-page: 0 7.5rem;
  --margin-page-negative: 0 -7.5rem;
  --margin-page-negative-mobile: 0 -7.5rem;
  --min-height-body: 85vh;

  /* -------------------- 2. COLORS -------------------- */

  /* Brand Colors */
  --brand-primary-color: #00B09B;                    /* USED */
  --brand-primary-accent-color: #E6F7F5;             /* USED */
  --brand-primary-accent-dark-color: #C2ECE7;        /* USED */

  /* Gradients */
  --gradient-primary: linear-gradient(to left, #80b623, #00B09B);
  --gradient-secondary: linear-gradient(to left, #FF6B6B, #FF8C42);

  /* Grayscale / Neutral */
  --color-secondary: #141414;     /* ~8% white - used for dark text */
  --color-tertiary: #FFFFFF;      /* Pure white */

  /* Backgrounds */
  --background-primary: #F6F6F6;       /* 96% white */
  --background-secondary: #FAFAFA;     /* 98% white */
  --background-tertiary: #FFFFFF;      /* 100% white */ /* USED */
  --background-footer: #222222;        /* 13% white */

  /* Footer */
  --text-footer: #757575;

  /* Borders */
  --border-primary: 0.0625rem solid rgba(0, 0, 0, 0.2);          /* 1px */
  --border-secondary: 0.0625rem dashed var(--brand-primary-color);

  /* Shadows */
  --box-shadow-primary: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-elevated: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --box-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --box-shadow-button-hover: 0 0 5px rgba(0, 0, 0, 0.5);
  --box-shadow-button-active: 0 2px 4px rgba(0, 0, 0, 0.1);

  /* Border Radius */
  --border-radius-primary: 0.3125rem;     /* 5px */
  --border-radius-secondary: 0.625rem;    /* 10px */

  /* Text Colors */
  --text-primary: #6B6B6B;     /* ~42% black — WCAG AA compliant (4.93:1 on #F6F6F6) */
  --text-secondary: #141414;   /* Dark */
  --text-tertiary: #E6E6E6;    /* 90% white */ /* USED */

  /* Status Texts */
  --text-success: #155724;
  --text-warning: #856404;
  --text-danger:  #721c24;
  --text-info:    #0c5460;

  /* -------------------- 3. TYPOGRAPHY -------------------- */

  /* Font Families */
  --font-family-primary: 'Poppins', sans-serif;
  --font-family-secondary: 'Poppins', sans-serif;
  --font-family-serif: 'Georgia', 'Times New Roman', serif;
  --font-family-mono: 'Courier New', Courier, monospace;

  /* Font Sizes */
  --font-size-xs: 0.8125rem;   /* 13px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;

  /* Line Heights */
  --line-height-tight: 1.25rem;   /* 20px */
  --line-height-normal: 1.5rem;   /* 24px */
  --line-height-relaxed: 1.75rem; /* 28px */

  /* Letter Spacing */
  --letter-spacing-tight: -0.025rem;   /* -0.4px */
  --letter-spacing-normal: 0rem;       /* 0px */
  --letter-spacing-wide: 0.025rem;     /* 0.4px */
  --letter-spacing-wider: 0.05rem;     /* 0.8px */

  /* -------------------- 4. MEDIA -------------------- */
  --background-image: url("/static/frontend/themes/luxe/images/background-luxe.bf3d336f20ff.webp");
  --cta-bg: url("/static/frontend/themes/luxe/images/cta-bg-luxe.0e61bc2f6749.webp");
  --background-image-size: cover, 400px auto;
}

/* ====================================================================== */
/* Source: ../_shared/components/booking-widget.css (19,827 bytes) */
/* ====================================================================== */
/* =========================================================
   Booking Form Styles - Enterprise Grade
   ---------------------------------------------------------
   TABLE OF CONTENTS
   0) CSS CUSTOM PROPERTIES (Design Tokens)
   1) BASE FIELDS & LAYOUT
   2) FIELD ELEMENTS & INPUTS
   3) GUEST SELECTION (Rooms/Adults/Children)
   4) DATE PICKER (Flatpickr)
   5) DESKTOP GRID LAYOUT (≥ 1025px)
   6) MOBILE RESPONSIVE (≤ 1024px)
   7) CHILD AGES GRID
   ========================================================= */


/* =========================
   0) CSS CUSTOM PROPERTIES
   ========================= */
:root {
    /* Booking Widget Dimensions */
    --booking-field-height: 3rem;
    --booking-field-gap: 1rem;
    --booking-field-padding: 1rem 1.25rem;
    --booking-input-padding: 0.75rem 3rem 0.75rem 1rem;
    
    /* Booking Widget Spacing */
    --booking-container-padding: 1rem 1.25rem;
    --booking-container-max-width: 1200px;
    --booking-divider-spacing: 1.25rem;
    
    /* Dropdown Dimensions */
    --booking-dropdown-min-width: 320px;
    --booking-dropdown-gap: 1rem;
    --booking-selection-box-height: 2.5rem;
    --booking-selection-box-min-width: 4.5rem;
    
    /* Field Widths (Desktop) */
    --booking-field-property-width: 18rem;
    --booking-field-date-width: 150px;
    --booking-field-guests-width: 22rem; /* Increased for Rooms For field */
    --booking-guest-input-width: 3.5rem; /* Further reduced for Room/Adults/Children inputs */
    --booking-child-age-width: 7rem; /* Reduced width for child age dropdowns */
    
    /* Grid Column Configuration (auto-adapts when property field is hidden) */
    --booking-grid-columns:
        minmax(180px, 1.1fr)   /* Property */
        minmax(130px, 0.9fr)   /* Check-in */
        minmax(130px, 0.9fr)   /* Check-out */
        minmax(180px, 1.3fr)   /* Guests */
        auto;                  /* Search button */
    --booking-grid-columns-no-property:
        minmax(150px, 1fr)     /* Check-in */
        minmax(150px, 1fr)     /* Check-out */
        minmax(200px, 1.4fr)   /* Guests */
        auto;                  /* Search button */
    
    /* Visual Styling */
    --booking-bg-opacity: 0.90;
    --booking-divider-color: rgba(0, 0, 0, 0.1);
    --booking-border-color: #ccc;
    --booking-dropdown-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    --booking-icon-color: var(--brand-primary-color);
    --booking-icon-size: 1rem;
    
    /* Enhanced Professional Styling */
    --booking-hero-padding: 1.25rem 2.5rem;
    --booking-hero-max-width: 1400px;
    --booking-hero-bg-opacity: 0.97;
    --booking-hero-border-radius: var(--border-radius-lg);
    --booking-hero-backdrop-blur: 10px;
    --booking-input-border-color: #e0e0e0;
    --booking-input-border-hover: #c0c0c0;
    --booking-input-border-radius: var(--border-radius-md);
    --booking-button-padding: 0.85rem 2.25rem;
    
    /* Mobile Breakpoints */
    --booking-tablet-max-width: 420px;
    --booking-mobile-gap: 0.75rem;
}


/* =========================
   UTILITIES
   ========================= */

/* Visually hidden but accessible to screen readers */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* =========================
   1) BASE FIELDS & LAYOUT
   ========================= */

/* Field label styling */
.booking-form__label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.35rem;
    line-height: 1;
}

/* Icons in labels */
.booking-form__label i {
    color: var(--booking-icon-color);
    margin-right: 0.4rem;
    font-size: 0.9rem;
}

/* Shared container styles for both hero and nav widgets */
.booking-form__fields,
.navigation-booking-form__fields {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--booking-field-gap);
    flex-wrap: wrap;
    width: 100%;
}

/* Hero booking widget container (main page) - Enhanced Professional Design */
.booking-form__fields {
    padding: var(--booking-hero-padding);
    max-width: var(--booking-hero-max-width);
    margin: 0 auto;
    background: rgba(255, 255, 255, var(--booking-hero-bg-opacity));
    border-radius: var(--booking-hero-border-radius);
    box-shadow: var(--box-shadow-elevated), var(--box-shadow-subtle);
    backdrop-filter: blur(var(--booking-hero-backdrop-blur));
}

/* Navigation booking widget container - enhanced professional appearance */
.navigation-booking-form__fields {
    padding: var(--booking-container-padding);
    max-width: var(--booking-hero-max-width);
    margin: 0 auto;
    /* background: rgba(255, 255, 255, var(--booking-hero-bg-opacity)); */
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-sm);
    /* backdrop-filter: blur(var(--booking-hero-backdrop-blur)); */
}



/* Hero booking widget input refinements for professional appearance */
.booking-form__fields input,
.booking-form__fields select {
    border: 1px solid var(--booking-input-border-color, #e5e7eb);
    border-radius: var(--booking-input-border-radius);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    background: #fff;
    transition: all var(--transition-speed) ease;
}

.booking-form__fields input:hover,
.booking-form__fields input:focus-within {
    border-color: var(--brand-primary-color);
}

.booking-form__fields input:focus {
    outline: none;
    border-color: var(--brand-primary-color);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1);
}



/* Icon styling within fields */
.booking-form__fields i,
.navigation-booking-form__fields i {
    margin-right: 0.5rem;
}

/* Individual field wrapper */
.booking-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}

/* Field dividers (desktop only) */
.booking-form__field + .booking-form__field {
    position: relative;
    padding-left: var(--booking-divider-spacing);
}

.booking-form__field + .booking-form__field::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 1px;
    background: var(--booking-divider-color);
    border-radius: 1px;
}


/* =========================
   2) FIELD ELEMENTS & INPUTS
   ========================= */

/* Consistent input heights across all fields */
.booking-form__fields select,
.booking-form__fields input,
.navigation-booking-form__fields input {
    min-height: var(--booking-field-height);
    height: var(--booking-field-height);
    cursor: pointer;
}

/* Responsive field widths using clamp() for fluid sizing */
.booking-form__fields select,
.booking-form__fields #property-dropdown,
.booking-form__fields #guests,
.navigation-booking-form__fields #property-dropdown,
.navigation-booking-form__fields #guests {
    width: clamp(240px, var(--booking-field-property-width), 100%);
}

/* Navigation widget input refinements for professional appearance */
.navigation-booking-form__fields input,
.navigation-booking-form__fields select {
    border: 1px solid var(--booking-input-border-color, #e5e7eb);
    border-radius: var(--border-radius-md);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    padding: 0.75rem 2rem 0.75rem 1rem;
    background: #fff;
    transition: all var(--transition-speed) ease;
}

.navigation-booking-form__fields input:hover,
.navigation-booking-form__fields input:focus-within {
    border-color: var(--brand-primary-color);
}

.navigation-booking-form__fields input:hover {
    border-color: var(--booking-input-border-hover);
}

.navigation-booking-form__fields input:focus {
    outline: none;
    border-color: var(--brand-primary-color);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1);
}

/* Slightly wider for navigation variant to prevent guest count truncation */
.navigation-booking-form__fields #property-dropdown {
    width: clamp(220px, 17rem, 100%);
}

.navigation-booking-form__fields #guests {
    width: clamp(220px, 21rem, 100%);
}

/* Label styling */
.booking-form__label {
    display: flex;
    align-items: center;
}


/* =========================
   3) GUEST SELECTION (Rooms/Adults/Children)
   ========================= */

/* Field with guest selection dropdown */
.booking-form__field.guest-selection {
    margin-top: 0.5rem;
}

.guest-selection {
    position: relative;
}

/* Guest input trigger */
#guests {
    cursor: pointer;
    background-color: #fff;
    position: relative;
}

/* Dropdown panel container */
.rooms-options {
    display: none;
    position: absolute;
    top: 100%;
    left: auto;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: var(--border-radius-primary);
    padding: var(--booking-field-gap);
    box-shadow: var(--booking-dropdown-shadow);
    /* z-index: 1000; */
    
}

/* Guest details wrapper - vertical stack */
.guest-details {
    display: flex;
    flex-direction: column;
    gap: var(--booking-dropdown-gap);
    /* min-width: var(--booking-dropdown-min-width); */
}

/* Main counters - horizontal row on desktop */
.main-counters {
    display: flex;
    gap: var(--booking-dropdown-gap);
    align-items: flex-end;
}

/* Individual counter wrapper */
.guest-selection {
    flex: 0 0 auto;
}

/* Selection box - flexbox for icon positioning */
.selection-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    border: 1px solid var(--booking-border-color);
    cursor: pointer;
    /* min-width: var(--booking-guest-input-width); */
    height: var(--booking-selection-box-height);
    background-color: #fff;
    width: 75px;
    color: var(--text-primary, #333);
}

/* Dropdown icon inside input fields - positioned on right */
.input-wrap .dropdown-icon {
    position: absolute !important;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%) !important;
    pointer-events: none;
    color: var(--booking-icon-color);
    font-size: 0.9rem;
    /* z-index: 5; */
}

/* Dropdown icon inside selection boxes (for room/adult/child counters) */
.guest-selection .selection-box .dropdown-icon,
.selection-box .dropdown-icon {
    position: static !important;
    margin-left: auto;
    transform: none !important;
    pointer-events: none;
    color: var(--booking-icon-color);
    font-size: 0.7rem;
    opacity: 1 !important;
    display: inline-block !important;
    visibility: visible !important;
    flex-shrink: 0;
}

/* Dropdown menu */
.dropdown-container {
    position: relative; /* Base for absolute positioning and stacking */
}

.dropdown-container .dropdown-menu {
    display: none;
    position: absolute;
    z-index: 1000; /* Ensure it stays on top of selection boxes/icons */
    background-color: #f9f9f9;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    list-style: none;
    margin: 0;
    line-height: 1rem;
    max-height: 150px;
    overflow-y: auto;
    min-width: 75px !important;
}

.dropdown-container .dropdown-menu li {
    color: var(--text-primary, #333);
}

.dropdown-container .dropdown-menu li:hover {
    background-color: var(--brand-primary-accent-color);
    cursor: pointer;
}

/* Date field widths */
#checkin,
#checkout {
    width: var(--booking-field-date-width);
}

/* =========================
   4) DATE PICKER (Flatpickr)
   ========================= */

/* Input wrapper positioning context */
.booking-form__field,
.input-wrap {
    position: relative; 
}

/* Icon positioning for all field types */
.booking-form__field i,
.input-wrap i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.75rem;
    color: var(--booking-icon-color); /* Sync to theme primary */
    pointer-events: none; 
    /* z-index: 10; */
    font-size: 1.1rem;
    line-height: 1;
}

/* Input padding to prevent text overlap with icon */
.booking-form__fields input {
    padding-right: 2.5rem; 
}

/* Flatpickr input styling */
.flatpickr {
    padding: 10px;
    border: 1px solid var(--booking-border-color);
    border-radius: 5px;
    transition: border-color 0.3s;
}

.flatpickr:focus {
    border-color: var(--brand-primary-color);
    outline: none;
}

.flatpickr input::placeholder {
    color: #999;
}

/* Selected date styling */
.flatpickr-day.selected {
    background-color: var(--brand-primary-color) !important;
    color: #fff;
    border-color: var(--brand-primary-color) !important;
}

/* Hover state for dates */
.flatpickr-day:hover {
    background-color: color-mix(in srgb, var(--brand-primary-color), transparent 92%) !important;
    color: var(--brand-primary-color) !important;
    font-weight: bold;
    border: 1px solid color-mix(in srgb, var(--brand-primary-color), transparent 70%);
}

/* 🟢 Flatpickr Navigation Arrows (Chevron Fix) */
.flatpickr-calendar .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-next-month svg {
    fill: var(--brand-primary-color) !important;
    transition: fill 0.2s ease;
}

.flatpickr-calendar .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-next-month:hover svg {
    fill: var(--brand-primary-color);
    opacity: 0.7;
}


/* =========================================
   5) DESKTOP GRID LAYOUT (≥ 1025px)
   ========================================= */

@media (min-width: 1025px) {

  /* Modern CSS Grid for perfect alignment */
  .booking-form .booking-form__fields,
  .navigation-booking-form__fields {
    display: grid;
    grid-template-columns: var(--booking-grid-columns);
    align-items: center;
    gap: var(--booking-field-gap);
  }

  /* Modifier: Single-property mode — grid adapts to 4 columns */
  .booking-form .booking-form__fields--no-property,
  .navigation-booking-form__fields--no-property {
    grid-template-columns: var(--booking-grid-columns-no-property);
  }

  /* Remove field dividers on desktop grid */
  .booking-form .booking-form__field,
  .navigation-booking-form__fields .booking-form__field {
    min-width: 0;
    padding-left: 0 !important;

  }

  .booking-form .booking-form__field::before,
  .navigation-booking-form__fields .booking-form__field::before {
    display: none !important;
  }

  /* Inputs fill their grid cell */
  .hero .booking-form__field :is(
    .input-wrap,
    input[type="text"],
    .booking-form__input,
    #property-dropdown,
    #guests,
    .flatpickr,
    #checkin,
    #checkout
  ) { 
    width: 100% !important; 
  }

  /* Navigation widget inputs */
  .navigation__menu .booking-form__field :is(
    .input-wrap,
    input[type="text"],
    .booking-form__input,
    #property-dropdown,
    #guests,
    .flatpickr,
    #checkin,
    #checkout
  ) { 
    width: 100% !important; 
  }

  /* Search button should align with inputs at the bottom */
  .booking-form .button--primary,
  .navigation-booking-form__fields .button--primary {
    align-self: center;
    margin-top: auto;
  }

  /* Search button layout for all widgets */
  .booking-form .button--primary,
  .navigation-booking-form__fields .button--primary {
    height: var(--booking-field-height);
    white-space: nowrap;
    margin-top: 0;
  }
}

/* =========================================
   6) MOBILE RESPONSIVE (≤ 1024px)
   ========================================= */

@media (max-width: 1024px) {

    /* Mobile-optimized container */
    .booking-form__fields {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: var(--booking-mobile-gap);
        padding: var(--booking-field-gap);
        width: 100%;
        max-width: var(--booking-tablet-max-width);
        margin: 0 auto;
        height: auto;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.95);
        border-radius: var(--border-radius-primary);
    }

    /* Full-width fields on mobile (default) */
    .booking-form__field {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        width: 100%;
        min-width: 0;
        position: relative;
    }

    /* Half-width for dates to save vertical space */
    .booking-form__field:has(.checkin-date),
    .booking-form__field:has(.checkout-date) {
        width: calc(50% - (var(--booking-mobile-gap) / 2));
    }

    /* Remove desktop dividers */
    .booking-form__field + .booking-form__field {
        padding-left: 0;
    }

    .booking-form__field + .booking-form__field::before {
        display: none;
    }

    /* Full-width inputs */
    .booking-form__field input[type="text"],
    .guest-info input[type="text"],
    .input-field,
    .booking-form__input,
    .flatpickr,
    .input-wrap {
        width: 100% !important;
    }

    /* Hide calendar icons on mobile to save space for the full date string */
    .booking-form__field:has(.checkin-date) i,
    .booking-form__field:has(.checkout-date) i {
        display: none !important;
    }

    /* Reduce right padding for date inputs when icons are hidden */
    .booking-form__field:has(.checkin-date) input,
    .booking-form__field:has(.checkout-date) input {
        padding-right: 0.75rem !important;
    }

    /* Guest details vertical stack */
    .guest-details {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* 3-column grid for mobile counters */
    .main-counters {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 0.5rem;
        width: 100%;
        align-items: end;
    }

    /* Full-width apply button */
    #apply-button {
        grid-column: 1 / -1;
        height: var(--booking-field-height);
        margin-top: 0.5rem;
        width: 100%;
    }

    /* Search button */
    .button--primary {
        margin: 0;
    }

    /* Mobile flatpickr styling */
    .flatpickr-mobile {
        appearance: none;
        width: 100%;
        height: var(--booking-field-height);
        padding: 0.75rem 1rem;
        text-align: left;
        font-size: 1rem;
        border: 1px solid var(--booking-border-color);
        border-radius: 6px;
        color: #000;
        background-color: #fff;
        box-sizing: border-box;
    }

    .flatpickr-mobile::placeholder {
        color: #999;
        font-size: 0.95rem;
        text-align: left;
    }

    /* Calendar positioning on tablet */
    .flatpickr-calendar {
        left: auto !important;
        right: 24px !important;
        transform: none !important;
    }
    
    .flatpickr-calendar.arrowTop:before,
    .flatpickr-calendar.arrowTop:after {
        left: 1.25rem !important;
    }
}


/* =========================
   7) CHILD AGES GRID
   ========================= */

.child-ages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--booking-dropdown-gap);
    /* margin-top: var(--booking-dropdown-gap); */
    padding-top: var(--booking-dropdown-gap);
    border-top: 1px solid #eee;
    width: 100%;
}

.child-ages-title {
    grid-column: 1 / -1;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.child-age-item {
    display: flex;
    flex-direction: column;
}

.child-age-item label {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 4px;
}

.child-age-item .dropdown-container {
    width: 100%;
    display: block;
}

.child-age-item .selection-box {
    width: var(--booking-child-age-width); /* Reduced width for child age dropdowns */
    box-sizing: border-box;
    justify-content: space-between;
    text-transform: capitalize;
    background-color: #fff;
}

.child-age-item .dropdown-menu {
    width: 100%;
    min-width: unset;
    max-height: 200px;
    width: auto;
}

/* ====================================================================== */
/* Source: ../_shared/components/cards.css (27 bytes) */
/* ====================================================================== */
.cards {
    gap: 1.5rem;
}

/* ====================================================================== */
/* Source: ../_shared/components/buttons.css (3,880 bytes) */
/* ====================================================================== */
.button--primary, .button--secondary, .button--tertiary {
    display: flex;
    gap: .5rem;
    justify-content: center;
    align-items: center;    
    padding: 1rem 1.5rem;
    font-size: var(--font-size-base);
    font-weight: 700;
    border-radius: var(--border-radius-primary);
    text-decoration: none;
    text-transform: uppercase; /* Default to Uppercase per user req */
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    height: 3rem;
}

.button--primary {
    background: var(--gradient-primary);
    color: var(--color-tertiary);
    border: none;
}

.button--secondary {
    background-color: var(--color-tertiary);
    color: var(--brand-primary-color);
    border: 2px solid var(--brand-primary-color);
}

.button--tertiary {
    background-color: var(--brand-primary-accent-color);
    color: var(--brand-primary-color);
    border: 2px solid var(--brand-primary-color);
}

.button--primary:hover {
    filter: brightness(1.05);
    transform: scale(1.01);
    box-shadow: var(--box-shadow-button-hover);
    /* background: var(--gradient-secondary-color); */
}

.button--primary:active,
.button--primary.active {
    background: var(--brand-primary-color);
    box-shadow: var(--box-shadow-button-active);
}

.button--primary:focus {
    background: var(--brand-primary-color);
    box-shadow: var(--box-shadow-button-active);
}

.button--primary:disabled, .button--secondary:disabled,
.button--primary.disabled, .button--secondary.disabled {
    background: #cbd5e1;
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
    border-color: transparent;
    color: #fff;
    pointer-events: none;
}

.button--secondary:hover {
    background: var(--brand-primary-accent-color);
    filter: brightness(1.01);
    transform: scale(1.01);
    box-shadow: var(--box-shadow-button-hover);
}

.button--secondary:active,
.button--secondary.active {
    background: var(--brand-primary-accent-color);
    box-shadow: var(--box-shadow-button-active);
}

.button--secondary:focus {
    background: var(--brand-primary-accent-dark-color);
    box-shadow: var(--box-shadow-button-active);
    color: var(--brand-primary-color);
}

.button--tertiary.active {
    background: var(--brand-primary-accent-dark-color);
    box-shadow: var(--box-shadow-button-active);
}

.button--tertiary:hover {
    background: var(--brand-primary-accent-color);
    filter: brightness(1.01);
    transform: scale(1.01);
    box-shadow: var(--box-shadow-button-hover);
}

.button--tertiary:active, .button--tertiary.active {
    background: var(--brand-primary-color);
    box-shadow: var(--box-shadow-button-active);
}

.button--tertiary:focus {
    background: var(--brand-primary-accent-dark-color);
    box-shadow: var(--box-shadow-button-active);
    color: var(--brand-primary-color);
}

.explore-more {
    background-color: transparent;
    display: flex;
    width: fit-content;
    align-items: center;
    gap: .5rem;
    color: var(--brand-primary-color);
    cursor: pointer;
    border: none;
    font-size: var(--font-size-large);
    font-weight: 600;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.explore-more:hover {
    transform: scale(1.05);
}

.button--text {
    background-color: transparent;
    color: var(--brand-primary-color);
    border: none;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.2s ease;
    height: auto;
    letter-spacing: 0.05rem;
}

.button--text:hover {
    color: var(--brand-primary-accent-dark-color);
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: var(--border-radius-primary);
}

.button--text:disabled {
    color: var(--text-tertiary);
    cursor: not-allowed;
    background-color: transparent;
}


/* ====================================================================== */
/* Source: ../_shared/components/form.css (2,306 bytes) */
/* ====================================================================== */
input,
select {
    height: 3rem;
}

textarea {
    min-height: 5rem;
}


input,
select,
textarea {
    border: 1px solid #d1d5db; /* Neutral gray border */
    border-radius: var(--border-radius-primary);
    box-shadow: none; /* Removed "flashy" shadow */
    font-size: var(--font-size-base);
    padding: 0.75rem;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    width: 100%;
    background-color: #fff;
    color: #333;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand-primary-color);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary-color), transparent 90%);
}

/* Remove spin buttons from number fields */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* mozilla firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

textarea {
    height: 100px;
    resize: none;
}
/* radio button */
.custom-radio-wrapper {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    /* padding: 0.4rem 0; */
    user-select: none;
}

.custom-radio {
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--color-border, #ccc);
    border-radius: 50%;
    background-color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
    position: relative;
}

/* Hide default radio */
input[type="radio"] {
    display: none;
}

/* Inner dot when selected */
input[type="radio"]:checked + .custom-radio::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--brand-primary-color, #00b09b);
    border-radius: 50%;
    display: block;
    transition: background-color 0.3s ease;
}

/* Selected state - border and glow */
input[type="radio"]:checked + .custom-radio {
    border-color: var(--brand-primary-color, #00b09b);
    box-shadow: 0 0 0 3px rgba(0, 176, 155, 0.2);
}

/* Hover state */
.custom-radio-wrapper:hover .custom-radio {
    border-color: var(--brand-primary-color, #00b09b);
    box-shadow: 0 0 0 3px rgba(0, 176, 155, 0.1);
}

.required {
    color: #d9534f; /* Muted Red */
    font-weight: normal;
}


/* ====================================================================== */
/* Source: ../_shared/components/ul-li.css (1,405 bytes) */
/* ====================================================================== */
.input-group {
    position: relative;
}

.dropdown-icon {
    position: absolute;
    top: 60%;
    right: 0.5rem;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--brand-primary-color);
}

.list-options {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: var(--border-radius-primary);
    box-shadow: var(--box-shadow-primary);
    display: none;
    z-index: 1000;
}
.list-options li {
    padding: 0.5rem;
    cursor: pointer;
}
.list-options li:hover {
    background-color: var(--brand-primary-accent-color);
}

/*  */
.guest-selection {
    margin-bottom: 10px;
}

.dropdown-container {
    position: relative;
    display: inline-block;
    width: 100px;
}

.selection-box {
    padding: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
    text-align: center;
    color: #333;
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown-menu li {
    padding: 8px 16px;
    cursor: pointer;
    color: #333;
}

.dropdown-menu li:hover {
    background-color: #ddd;
}

.dropdown-container:hover .dropdown-menu {
    display: block;
}

/* ====================================================================== */
/* Source: ../_shared/components/modal.css (4,248 bytes) */
/* ====================================================================== */
/* @keyframes zoom {
    from {transform:scale(0.95); opacity: 0;}
    to {transform:scale(1); opacity: 1;}
} */

/* The Modal (background) */

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 9999; /* Ensure high enough z-index */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent scrolling within modal background if unnecessary */
    background-color: rgba(0, 0, 0, 0.85); /* Slightly darker for better contrast */
    backdrop-filter: blur(8px); /* Professional frost effect */
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    pointer-events: none; /* Let clicks pass through to close modal on background */
}

/* Ensure image catches events */
.modal-content img {
    pointer-events: auto;
    max-width: 95vw;
    max-height: 95vh;
    width: 100%; /* Force image to fill the container width */
    height: 100%; /* Force image to fill the container height */
    object-fit: contain; /* Maintain aspect ratio while scaling */
    display: block;
    border-radius: 4px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: zoomIn 0.3s ease-out;
}

@keyframes zoomIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Navigation Buttons */
.modal-nav {
    position: absolute; /* Changed to absolute to overlay entire screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks through empty space */
}

.prev, .next {
    position: fixed; /* Fixed to viewport */
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background-color: transparent; /* Cleaner look */
    color: rgba(255, 255, 255, 0.7);
    font-size: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    pointer-events: auto; /* Re-enable clicks */
    z-index: 1001;
}

.prev:hover, .next:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.prev { left: 30px; }
.next { right: 30px; }

/* Close Button */
.close {
    position: fixed; /* Fixed to viewport */
    top: 25px;
    right: 35px;
    width: 50px;
    height: 50px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 32px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: transparent;
    transition: all 0.2s ease;
    z-index: 1002;
}

.close:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

/* Counter */
.modal-counter {
    position: fixed; /* Fixed to viewport */
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 15px;
    letter-spacing: 1px;
    backdrop-filter: blur(4px);
    pointer-events: none;
    z-index: 1001;
}

/* Prevent page scroll when modal is open */
/* IMPORTANT: Do not set height: 100dvh here, it causes scroll jump */
.no-scroll {
    overflow: hidden;
}

/* Mobile Tweaks */
@media (max-width: 768px) {
    .modal-content {
        max-width: 100vw;
        max-height: 100vh;
        width: 100%;
        height: 100%;
        background: black; /* Seamless on mobile */
    }

    .modal-content img {
        max-height: 100vh;
        border-radius: 0;
    }

    .prev, .next {
        width: 40px;
        height: 40px;
        font-size: 20px;
        background-color: transparent; /* Cleaner look on mobile */
    }
    
    .prev { left: 10px; }
    .next { right: 10px; }

    .close {
        top: 15px;
        right: 15px;
        background-color: transparent;
    }
}

/* ====================================================================== */
/* Source: ../_shared/base/footer.css (5,026 bytes) */
/* ====================================================================== */
/* ----------------------------------------------------
   FOOTER BASE
----------------------------------------------------- */

.footer {
    background: var(--background-footer);
    color: var(--text-footer);
    border: var(--border-primary);
    box-shadow: var(--box-shadow-primary);
    width: auto;
    margin: var(--layout-breakout-inline);
}

/* Headings */
.footer h4 {
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ----------------------------------------------------
   MAIN FOOTER CONTENT
----------------------------------------------------- */

.footer__main {
    display: flex;
    justify-content: space-between;
    margin: var(--margin-page);
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 2rem;
}

/* Footer Details Section */
.footer__details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 15rem;
    color: var(--text-footer);
    flex: 1 1 250px;
}

.footer__details img {
    background-color: var(--text-tertiary);
    margin-top: 1rem;
    max-width: 100%;
    height: auto;
}

.footer__details a,
.footer__details span {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Address Formatting */
address {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-style: normal;
}

/* Phone Link Styling */
.phone-links,
.email-links {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

/* Social Media Icons */
.footer__details .footer__social-media {
    display: flex;
    gap: 1.5rem;
    justify-content: flex-start;
}

/* Location Section */
.footer__location {
    margin-top: 1rem;
}

/* Embedded Map */
.footer__map {
    margin-top: 1rem;
    width: 400px;
    max-width: 100%;
    height: 250px;
    border: var(--border-primary);
    box-shadow: var(--box-shadow-primary);
    border-radius: var(--border-radius-primary);
}

.footer__map-container iframe {
    height: 250px !important;
    width: 100% !important;
    border-radius: var(--border-radius-primary);
    box-shadow: var(--box-shadow-primary);
}

/* ----------------------------------------------------
   SECONDARY FOOTER (BOTTOM STRIP)
----------------------------------------------------- */

.footer__secondary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-tertiary, #dcdcdc) !important;
    font-size: var(--font-size-sm, 14px);
    text-align: center;
    gap: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 100%;
}

/* Main text */
.footer__copy {
    color: var(--text-tertiary, #dcdcdc) !important;
    margin: 0;
    font-weight: 400;
}

/* Links row */
.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

/* Link styles */
.footer__links a {
    color: var(--text-tertiary, #dcdcdc) !important;
    text-decoration: none;
    transition: color 0.25s ease;
    font-weight: 400;
}

.footer__links a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Divider */
.footer__links .divider {
    opacity: 0.4;
    margin: 0 2px;
}

/* ----------------------------------------------------
   BOOKING & PRIVACY HIGHLIGHTS (New Component)
----------------------------------------------------- */

.policy-summary {
    font-size: 0.82rem;
    max-width: 800px;
    margin: 4px auto 10px;
    color: var(--text-tertiary, #dcdcdc);
    opacity: 0.95;
    text-align: center;
    padding: 0 10px;
}

.policy-summary summary {
    cursor: pointer;
    list-style: none;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    transition: 0.25s ease;
    border: 1px solid rgba(255,255,255,0.12);
}

.policy-summary summary:hover {
    opacity: 1;
    background: rgba(255,255,255,0.06);
}

.policy-points {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 6px 16px;
    margin: 14px auto 0;
    padding: 0;
    list-style: none;
    max-width: 750px;
}

.policy-points li {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 0.78rem;
    opacity: 0.9;
}

/* ----------------------------------------------------
   RESPONSIVE STYLES
----------------------------------------------------- */

@media (max-width: 1024px) {
    .footer__main {
        flex-direction: column;
        margin: 1.5rem;
        gap: 2rem;
    }

    .footer__details {
        width: 100%;
        flex: 1 1 100%;
    }

    .footer__map {
        width: 100%;
        height: 200px;
    }

    .footer__secondary {
        font-size: var(--font-size-xs);
        text-align: center;
        padding: 12px 5px;
    }

    .footer__links {
        flex-direction: column;
        gap: 4px;
    }

    .footer__links .divider {
        display: none;
    }

    .policy-points {
        grid-template-columns: 1fr;
    }
}

/* ====================================================================== */
/* Source: ../_shared/base/navigation.css (7,693 bytes) */
/* ====================================================================== */
/* ----------------------------------------------------
   NAVIGATION BAR BASE STYLES
----------------------------------------------------- */

.navigation,
.navigation-status {
  background-color: #fff;
  position: absolute;
  left: 0;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: top 0.3s ease;
}

.navigation-booking {
  background-color: var(--brand-primary-accent-color);
}

.navigation-status {
  flex-direction: row-reverse;
  position: fixed;
  top: 0;
  background-color: var(--background-tertiary);
}

.navigation__toggle {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
}

/* ----------------------------------------------------
   NAV CONTAINER & WRAPPERS
----------------------------------------------------- */

.navigation__container,
.navigation-status__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 5rem;
  width: 100%;
  padding: 1rem 7.5rem;
  border: var(--border-primary);
  border-radius: var(--border-radius-primary);
  box-shadow: var(--box-shadow);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Menu & Buttons */
.navigation__menu {
  display: flex;
  gap: 1rem;
  color: var(--text-secondary);
}

.navigation__menu button {
  margin-left: 2rem;
}

/* Logo Hover Animation */
.navigation__logo img {
  transition: transform 0.3s ease;
}

.navigation__logo img:hover {
  transform: scale(1.05);
}

/* ----------------------------------------------------
   NAV LINKS & ACTIVE STATES
----------------------------------------------------- */

.navigation__links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.navigation__links li {
  position: relative;
  transition: color 0.3s ease;
}

.navigation__links li::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 3px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.navigation__item {
  color: var(--text-primary);
}

.navigation__item--active,
.navigation__item:hover,
.navigation__item:focus {
  color: var(--text-primary);
  font-weight: 500;
}

/* Active Link Highlight */
.navigation__links li.navigation__item--active::after,
.navigation__links li:hover::after,
.navigation__links li:focus-visible::after,
.navigation__links a:active::after,
.navigation__links .active::after {
  transform: scaleX(1);
}

.navigation__links a {
  outline: none;
}

.navigation__links a:focus-visible {
  outline: 2px solid var(--brand-primary-color);
  outline-offset: 4px;
}

.navigation__links .active {
  color: var(--text-primary);
  font-weight: 500;
}

/* Fixed Positioning */
.fixed-nav {
  position: fixed !important;
  top: 0;
}

/* ----------------------------------------------------
   NAV RIGHT SECTION - DETAILS
----------------------------------------------------- */

.nav-details {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--brand-primary-color);
  width: fit-content;
}

.nav-details>i {
  font-weight: var(--font-weight-bold);
}

.nav-details:hover {
  background-color: var(--brand-primary-accent-dark-color);
}

/* ----------------------------------------------------
   DROPDOWN MENU (DESKTOP)
----------------------------------------------------- */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  margin-top: 5px;
  min-width: 300px;
  background-color: var(--background-primary);
  border-radius: var(--border-radius-primary);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.dropdown-content a {
  color: black;
  padding: 1rem 1.2rem;
  text-align: left;
  display: block;
  text-decoration: none;
  border-bottom: 1px solid #ddd;
}

.dropdown-content a:last-child {
  border-bottom: none;
}

.dropdown-content a:hover {
  background-color: var(--brand-primary-accent-color);
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* ----------------------------------------------------
   BREADCRUMB NAVIGATION
----------------------------------------------------- */

.breadcrumb {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 8px 16px;
  margin: 7rem 0 2rem;
  font-size: 0.95rem;
  font-weight: var(--font-weight-medium);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.breadcrumb li a {
  padding: 5px;
  text-decoration: none;
  color: var(--brand-primary-color);
  font-weight: var(--font-weight-medium);
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

.breadcrumb li a:hover {
  color: var(--brand-secondary-color);
  /* Note: Define this variable if not already */
  text-decoration: underline;
}

.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-left: 10px;
  font-size: 1rem;
  color: #bbb;
  font-weight: 600;
}

.breadcrumb li:last-child {
  color: #333;
  font-weight: var(--font-weight-bold);
  pointer-events: none;
  cursor: default;
}

/* ----------------------------------------------------
   RESPONSIVE (MOBILE)
----------------------------------------------------- */

@media (max-width: 1024px) {
  .navigation__container {
    flex-wrap: wrap;
    padding: 1rem 1.2rem;
    height: auto;
  }

  .navigation__logo {
    flex: 1;
  }

  .navigation__toggle {
    display: block;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
  }

  .navigation__menu {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 0 1.5rem;
    gap: 0.5rem;
    background: #fff;
    border-top: 1px solid #eee;
    transition: max-height 0.3s ease;
  }

  .navigation__menu.show {
    display: flex;
  }

  .navigation__links {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.25rem;
    padding: 0;
  }

  .navigation__links li {
    width: 100%;
    list-style: none;
  }

  .navigation__item a,
  .navigation__item button.dropbtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
  }

  .navigation__item--active a {
    color: var(--text-primary);
    font-weight: 600;
    border-left: 3px solid var(--brand-primary-color);
    background-color: var(--background-secondary);
  }

  .navigation__links li::after {
    display: none !important;
    content: none !important;
  }

  .navigation__menu .dropdown {
    display: none;
  }

  /* CTA Button */
  .button.button--primary {
    margin-top: 1rem;
    align-self: center;
    width: calc(100% - 2rem);
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 8px;
    text-align: center;
    box-shadow: var(--box-shadow);
  }

  /* Ensure proper spacing if nav is fixed */
  body.fixed-nav-active .main-content {
    margin-top: 5rem;
  }

  nav[aria-label="breadcrumb"] {
    margin: var(--margin-page-negative-mobile) !important;
    margin-top: 5.5rem !important;
    margin-bottom: 1rem !important;
    width: 100vw;
  }

  .breadcrumb {
    padding: 8px 16px;
    font-size: 0.95rem;
    margin: 0;


  }
}

/* ====================================================================== */
/* Source: ../_shared/base/offer-bar.css (2,550 bytes) */
/* ====================================================================== */
/* PROMO TOP MENU */
.offer-bar__container {
    margin: var(--layout-breakout-inline);
    background-color: var(--color-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-xs);
    padding: .2rem 5rem;
    flex-wrap: nowrap; /* desktop only */
    height: auto; /* ✅ allow natural height */
}

.offer-bar__container a,
.offer-bar__container i {
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.offer-bar__container a:hover,
.offer-bar__container i:hover {
    filter: brightness(0.95);
    transform: scale(1.02);
}

.offer-bar__contact {
    display: flex;
    gap: 2rem;
    color: var(--text-tertiary);
}

.offer-bar__details {
    display: flex;
    align-items: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    padding: 2px .625rem;
    background-color: var(--color-secondary);
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}
.offer-bar__details p {
    color: var(--text-tertiary);
}

.offer-bar__details::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: .125rem solid var(--brand-primary-color);
    border-radius: 5px;
    box-sizing: border-box;
    animation: border-animation 3s linear infinite;
}

@keyframes border-animation {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }
    25% {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
    }
    50% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%);
    }
    75% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

.offer-bar__social-media {
    display: flex;
    gap: 2rem;
    font-size: var(--font-size-xl);
}
.offer-bar__social-media i {
    color: var(--text-tertiary);
}



/* -------------------- Responsive -------------------- */
@media (max-width: 1024px) {
    .offer-bar__container {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.5rem;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .offer-bar__contact,
    .offer-bar__social-media {
        display: none;
    }

    .offer-bar__details {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0.2rem 1rem;
        background-color: var(--color-secondary);
        position: relative;
        border-radius: 5px;
    }
    .offer-bar__details p {
        font-size: .75rem;
    }
}

/* ====================================================================== */
/* Source: ../_shared/partials/home-hero.css (4,627 bytes) */
/* ====================================================================== */
/* =========================================================
   HERO Section
   ---------------------------------------------------------
   TABLE OF CONTENTS
   1) Base & Carousel Shell
   2) Image Rail & Slides
   3) Controls (Prev/Next)
   4) Overlay (Gradient + Content)
   5) Headings
   6) Media Queries (≤ 1024px)
   ========================================================= */


/* =========================
   1) Base & Carousel Shell
========================= */
:root {
    --hero-edge-pad: clamp(1rem, 3vw, 2rem);
    --hero-ctrl-size: 44px;
    --hero-ctrl-bg: rgba(0, 0, 0, .38);
    --hero-ctrl-bd: rgba(255, 255, 255, .28);
    --hero-ctrl-color: #fff;
    --hero-overlay: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, .35) 100%);
}

/* ===== HERO ===== */
.hero {
    position: relative;
    height: 97vh;
    display: grid;
    place-items: stretch;
    background: #000; /* safe fallback while images load */
    margin: var(--layout-breakout-inline);
    isolation: isolate; /* clean stacking */
    overflow: visible;
    z-index: 5;
}

/* Carousel shell */
.hero__carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


/* =========================
   2) Image Rail & Slides
========================= */
/* Image rail (1 image per viewport; slide by translating this) */
.hero__images {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    width: 100%;
    height: 100%;
    transition: transform .55s ease;
}

@media (prefers-reduced-motion: reduce) {
    .hero__images { transition: none; }
}

/* Slide image */
.hero__img,
.hero__images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.5);
    display: block;
}


/* =========================
   3) Controls (Prev/Next)
========================= */
/* Controls layer (click-through except buttons) */
.hero__controls {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero__button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    inline-size: var(--hero-ctrl-size);
    block-size: var(--hero-ctrl-size);
    display: grid;
    place-items: center;
    color: var(--hero-ctrl-color);
    background: var(--hero-ctrl-bg);
    border: 1px solid var(--hero-ctrl-bd);
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease;
    backdrop-filter: saturate(120%) blur(1px);
}

.hero__button:hover {
    filter: brightness(1.15);
    transform: translateY(-50%) scale(1.04);
}

#prevBtn { left: var(--hero-edge-pad); z-index: 1000; }
#nextBtn { right: var(--hero-edge-pad); z-index: 1000; }


/* =========================
   4) Overlay (Gradient + Content)
========================= */
/* Overlay: gradient + content (text + booking widget) */
.hero__form {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    padding: var(--section-padding-y, 5rem) var(--section-padding-x-desktop, 7.5rem);
    background: var(--hero-overlay);
    z-index: 1; /* sits above images, below controls */
}


/* =========================
   5) Headings
========================= */
/* Headings block */
.hero__text {
    text-align: center;
    color: #fff;
    margin-bottom: 1.25rem;
    text-shadow: 0 3px 10px rgba(0, 0, 0, .35);
    max-width: 50rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: center;
}

/* Shared baseline */
.hero__line {
    margin: 0;
    line-height: 1.25;
}

/* Main headline (secondary font if you have it) */
.hero__line--1 {
    font-family: var(--font-family-secondary, inherit);
    font-weight: 700;
    letter-spacing: .02em;
    font-size: clamp(2.25rem, 5.2vw, 3.5rem);
}

/* Sub headline (primary font) */
.hero__line--2 {
    font-family: var(--font-family-primary, inherit);
    font-weight: 400;
    letter-spacing: .015em;
    font-size: clamp(1.05rem, 1.9vw, 1.35rem);
    color: rgba(255, 255, 255, .95);
}


/* =========================
   6) Media Queries (≤ 1024px)
========================= */
@media (max-width: 1024px) {

    /* Hero overlay: keep centered content; no manual top offsets */
    .hero__form {
        align-content: center;
        padding-inline: var(--section-padding-x-tablet, 3rem);
    }

    /* Keep hero height consistent on mobile/tablet */
    .hero__carousel { height: 97vh; }
    .hero__controls { display: none; }
    .hero__images,
    .hero__images img,
    .hero__img { height: 97vh; }
}

/* ====================================================================== */
/* Source: ../_shared/partials/home-roomcard.css (6,663 bytes) */
/* ====================================================================== */
/* =========================
   5) ROOMS – CARDS
========================= */
.rooms__list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    margin: var(--margin-page);
}

.room-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 21.875rem;
    background-color: white;
    border: var(--border-primary);
    box-shadow: var(--box-shadow-primary);
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.room-card:hover {
    box-shadow: var(--box-shadow-hover);
    border-color: rgba(176, 141, 87, 0.55);
}

/* Media with fixed aspect to avoid layout shift */
/* Media with fixed aspect to avoid layout shift */
.room-card__media {
    margin: 0;
    position: relative;
    overflow: hidden; /* Essential for zoom effect */
}

.room-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--brand-primary-accent-color);
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s ease;
}

.room-card:hover .room-card__image {
    transform: scale(1.05); /* Professional smooth zoom */
    filter: brightness(1.02); /* Subtle pop */
}

/* Details */
.room-card__details {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: 1rem;
    color: var(--text-primary);
    flex-grow: 1; /* Ensure details take available space */
}

/* Header Re-adjustment for new HTML structure */
.room-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.room-card__title {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-bold);
    font-size: clamp(1.05rem, 1.1rem + .2vw, 1.25rem);
    line-height: 1.2;
    margin: 0;
    color: var(--text-secondary);
}

.room-card__size {
    font-weight: var(--font-weight-medium);
    color: var(--brand-primary-color);
    letter-spacing: var(--letter-spacing-wide);
    font-size: 0.8rem; /* Matches original meta */
    white-space: nowrap;
}

.room-card__description {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Amenities line */
.room-card__amenities {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    margin-top: .25rem; /* Or auto if we want to push to bottom of details */
    margin-top: auto;
}

.room-card__amenity {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .5rem;
    border-radius: var(--border-radius-primary);
    border: 0.0625rem dashed rgba(176, 141, 87, 0.35);
    background: color-mix(in srgb, var(--brand-primary-accent-color) 70%, transparent);
    font-size: var(--font-size-sm);
    line-height: 1.2;
}

/* Actions (Original CSS was basic flex, but now we have footer) */
/* Footer: Price & Actions (FROM NEW DESIGN) */
.room-card__footer {
    padding: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0; /* Removing excess margin */
}

.room-card__price-group {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.room-card__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.room-card__price {
    font-family: var(--font-family-primary);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-primary-color);
    line-height: 1;
}

.room-card__per-night {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
}

.room-card__strike-price {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    text-decoration: line-through;
    text-decoration-color: var(--text-danger-accent, #ef4444);
    text-decoration-thickness: 1.5px;
    line-height: 1;
}


/* Button (Mixing original structure with new layout needs) */
.room-card__btn {
    text-align: center;
    padding: .65rem .9rem;
    border-radius: var(--border-radius-primary);
    box-shadow: var(--box-shadow-button-active);
    /* width: 100%;  REMOVED width:100% to allow side-by-side */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    text-decoration: none;

    /* Professional Solid Style (Background Override) */
    background: var(--brand-primary-color);
    color: white;
    border: 1px solid var(--brand-primary-color);
    /* Typography and Hover inherited from button--primary */
}

/* Hover: Let button--primary handle filter/lift, or ensure solid bg persists */
.room-card__btn:hover {
    background: var(--brand-primary-color); /* Maintain solid bg on hover (override gradient) */
    /* Filter brightness from button--primary will apply here automatically */
}



.room-card__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(176, 141, 87, .25), var(--box-shadow-button-active);
}

/* Font Awesome tint for icons in details */
.room-card__details .fa-solid {
    color: var(--brand-primary-color);
    opacity: .9;
}

/* Compact guest icons (stacked) - ORIGINAL STYLES */
.guest-icons {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.guest-icons i {
    position: relative;
    transition: transform 0.2s ease;
}

.guest-icons i:not(:first-child) {
    margin-left: -8px; /* Stronger overlap */
    text-shadow: -1.5px 0 0 #fff; /* "Cutout" effect assumes white bg */
}

/* Hover effect for fun (optional, professional touch) */
.guest-icons:hover i {
    margin-left: 1px; /* Unstack on hover */
    text-shadow: none;
}

@media (max-width: 1024px) {
    .rooms__list {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        margin: 0 1rem;
    }

    .room-card {
        width: 100%;
        max-width: 22rem;
        margin: 0 auto;
    }

    /* .room-card a { text-align: center; ... } - REPLACED by footer layout */

    .room-card__amenities {
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* .room-card__actions a ... */
    
    /* Ensure button doesn't stretch weirdly, or does if needed */
    .room-card__btn {
        width: auto !important; /* Override mobile full width if we want side-by-side */
    }
    
    .room-card__footer {
        padding: 1rem;
    }
}

/* ====================================================================== */
/* Source: ../_shared/partials/home-gallery.css (3,682 bytes) */
/* ====================================================================== */
/* =========================
   7) HOTEL GALLERY
========================= */
/* Button Overrides for Gallery Context */
.gallery__buttons button {
    position: relative;
    margin-bottom: 1.25rem;
    border-radius: var(--border-radius-primary); /* Theme standard (approx 0.25rem) */
    padding: 0.8rem 2rem;
    background-color: transparent;
    border: 1px solid var(--brand-primary-color);
    color: var(--brand-primary-color);
    height: auto;
    min-height: 3rem;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    overflow: hidden;
    text-transform: uppercase;
}

/* Remove old triangle indicator */
.gallery__buttons button::after {
    display: none;
}

/* Hover State */
.gallery__buttons button:hover {
    background-color: rgba(176, 141, 87, 0.1); /* Fallback or calculate from var if possible (using hardcoded rgb match for royal gold #B08D57 for now to avoid calc issues) */
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-button-hover);
}

/* Active State - Enterprise "Filled" Style */
.gallery__buttons button.active {
    background-color: var(--brand-primary-color) !important;
    color: var(--color-tertiary) !important;
    border-color: var(--brand-primary-color);
    box-shadow: var(--box-shadow-button-active);
    transform: translateY(-1px);
}

.gallery {
    min-height: 95vh;
    margin: var(--layout-breakout-inline);
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    align-items: center;
    gap: 1rem;
}

.gallery__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.gallery__buttons {
    display: flex;
    gap: 1rem;
}

/* Replaced by new active block above */

.gallery__images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.gallery__images img {
    width: 100%;
    max-width: 25rem;
    height: auto;
    aspect-ratio: 16 / 10;
    cursor: pointer;
    border-radius: 0.625rem;
    box-shadow: var(--box-shadow-primary);
    object-fit: cover;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery__images img:hover {
    box-shadow: var(--box-shadow-hover);
    transform: scale(1.01);
}

@media (max-width: 1024px) {

    .gallery {
        margin: var(--layout-breakout-inline) !important;
    }

    .gallery__header h3,
    .gallery__header h2 {
        width: 100vw;
        padding: 0 1rem;
        text-align: left;

    }

    .gallery__header h2 {
        padding-bottom: 1rem;

    }

    .gallery__buttons {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0 0.5rem;
    }

    .gallery__buttons button {
        flex: 1 1 auto;
        padding: 0.6rem 1rem;
        font-size: var(--font-size-sm);
        line-height: normal;
        text-align: center;
        border-radius: var(--border-radius-primary); /* Keep consistent shape */
        white-space: nowrap;
        margin-bottom: 0; 
    }

    /* Ensure no triangle on mobile either */
    .gallery__buttons button::after {
        display: none !important; 
    }

    .gallery__images {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        padding: 0 0.5rem;
    }

    .gallery__images img {
        max-width: 100%;
        border-radius: 0.5rem;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }

}

/* ====================================================================== */
/* Source: ../_shared/partials/home-ctabanner.css (3,479 bytes) */
/* ====================================================================== */
/* ============== CTA Banner (Royal theme ready) ============== */

.cta-banner {
  position: relative;
  isolation: isolate;
  background-image: var(--cta-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* stretch edge-to-edge like your screenshot */
  margin: var(--layout-breakout-inline);
  overflow: hidden;
}

/* Dark overlay for legibility on top of the photo */
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.55)
  );
  z-index: 0;
}

/* Decorative top pattern strip */
.cta-banner__pattern {
  height: clamp(28px, 5vw, 56px);
  background:
    radial-gradient(circle at 12px 12px, rgba(0,0,0,0.06) 22%, transparent 23%) 0 0 / 24px 24px,
    radial-gradient(circle at 0 0, rgba(0,0,0,0.04) 22%, transparent 23%) 12px 12px / 24px 24px,
    var(--background-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
  z-index: 1;
}

/* Centered content */
.cta-banner__inner {
  position: relative;
  z-index: 1;
  min-height: clamp(220px, 42vh, 420px);
  padding: clamp(2rem, 6vw, 4rem) 1rem clamp(3rem, 8vw, 5rem);
  display: grid;
  place-items: center;
  text-align: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  color: var(--text-tertiary); /* soft cream on dark bg */
}

/* Script headline (Great Vibes) with graceful fallback */
.cta-banner__title {
  margin: 0;
  max-width: min(60ch, 92%);
  font-family: var(--font-family-secondary), var(--font-family-primary), system-ui, sans-serif;
  font-weight: var(--font-weight-normal);
  line-height: 1.25;
  font-size: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: var(--letter-spacing-wider);
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

/* Tiny golden underline accent */
.cta-banner__rule {
  display: inline-block;
  width: clamp(28px, 4vw, 44px);
  height: 0.1875rem; /* 3px */
  border-radius: 999px;
  background: var(--brand-primary-color);
  opacity: 0.9;
}

/* “Book Now” button — royal gold with soft shadow */
.cta-banner__btn {
  display: inline-block;
  padding: 0.7rem 1.25rem;
  border-radius: var(--border-radius-secondary);
  background: var(--brand-primary-color);
  color: var(--color-tertiary); /* white text */
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.2px;
  box-shadow: var(--box-shadow-primary);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  border: 1px solid rgba(0,0,0,0.06);
}

.cta-banner__btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--box-shadow-button-hover);
  background: var(--brand-primary-accent-dark-color);
  color: var(--text-secondary);
}

.cta-banner__btn:active {
  transform: translateY(0);
  box-shadow: var(--box-shadow-button-active);
}

/* Keyboard focus */
.cta-banner__btn:focus-visible {
  outline: 2px solid var(--brand-primary-accent-color);
  outline-offset: 3px;
  text-decoration: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cta-banner__btn { transition: none; }
}

/* Mobile edge-to-edge handling */
@media (max-width: 1024px) {
  .cta-banner {
    margin: var(--margin-page-negative-mobile);
  }
}

/* iOS scroll performance (avoid background-attachment: fixed) */
@supports (-webkit-touch-callout: none) {
  .cta-banner { background-attachment: scroll; }
}

/* ====================================================================== */
/* Source: ../_shared/partials/home-faq.css (2,500 bytes) */
/* ====================================================================== */
/* =========================
   FAQ SECTION
   Token-driven, accessible accordion
========================= */

.faq {
  padding: clamp(3rem, 6vw, 5rem) var(--margin-page, 1rem);
  max-width: 52rem;
  margin: 0 auto;
}

.faq .section-header {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.faq .section-header__subtitle {
  color: var(--text-primary);
  font-size: var(--font-size-base);
  margin-top: 0.5rem;
  opacity: 0.8;
}

/* Accordion items */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq__item {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--border-radius-secondary, 0.625rem);
  background: var(--background-tertiary, #fff);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.faq__item:hover {
  box-shadow: var(--box-shadow-primary, 0 2px 8px rgba(0,0,0,0.06));
}

.faq__item[open] {
  box-shadow: var(--box-shadow-hover, 0 4px 16px rgba(0,0,0,0.08));
}

/* Question (summary) */
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 2vw, 1.25rem) clamp(1rem, 2vw, 1.5rem);
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold, 600);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  color: var(--text-secondary, #1a1a1a);
  line-height: var(--line-height-relaxed, 1.6);
  list-style: none;
  user-select: none;
}

/* Remove default marker */
.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question-text {
  flex: 1;
  padding-right: 1rem;
}

/* Chevron icon rotation */
.faq__icon {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--brand-primary-color);
  transition: transform 0.25s ease;
}

.faq__item[open] .faq__icon {
  transform: rotate(180deg);
}

/* Answer */
.faq__answer {
  padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.25rem);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.faq__answer p {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed, 1.7);
}

/* Focus styles */
.faq__question:focus-visible {
  outline: 2px solid var(--brand-primary-color);
  outline-offset: -2px;
  border-radius: var(--border-radius-secondary, 0.625rem);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .faq__icon { transition: none; }
  .faq__item { transition: none; }
}

/* Mobile */
@media (max-width: 1024px) {
  .faq {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


/* ====================================================================== */
/* Source: ../_shared/partials/home-testimonials.css (2,532 bytes) */
/* ====================================================================== */
/* =========================
   TESTIMONIALS SECTION
   Token-driven review cards with star ratings
========================= */

.testimonials {
  padding: clamp(3rem, 6vw, 5rem) var(--margin-page, 1rem);
}

.testimonials .section-header {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.testimonials .section-header__subtitle {
  color: var(--text-primary);
  font-size: var(--font-size-base);
  margin-top: 0.5rem;
  opacity: 0.8;
}

/* Card grid */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 64rem;
  margin: 0 auto;
}

/* Individual card */
.testimonial-card {
  background: var(--background-tertiary, #fff);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--border-radius-secondary, 0.625rem);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.testimonial-card:hover {
  box-shadow: var(--box-shadow-hover, 0 4px 16px rgba(0,0,0,0.08));
  transform: translateY(-2px);
}

/* Star rating */
.testimonial-card__header {
  display: flex;
  align-items: center;
}

.testimonial-card__stars {
  display: flex;
  gap: 0.15rem;
}

.testimonial-card__stars i {
  color: var(--brand-primary-color, #B08D57);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
}

.testimonial-card__stars i.fa-regular {
  opacity: 0.3;
}

/* Review text */
.testimonial-card__text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed, 1.7);
  color: var(--text-primary);
  margin: 0;
  font-style: italic;
  border: none;
  padding: 0;
}

/* Author */
.testimonial-card__author {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.testimonial-card__name {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #1a1a1a);
}

.testimonial-card__date {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-primary);
  opacity: 0.6;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .testimonial-card { transition: none; }
}

/* Mobile */
@media (max-width: 1024px) {
  .testimonials {
    padding-left: 1rem;
    padding-right: 1rem;
  }

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