/*
    LOST IN STAYS - STYLESHEET
    Modern hotel booking platform design

    Color Palette:
    - Primary (Purple/Magenta): #c147e9
    - White: #ffffff
    - Dark overlay: rgba(0, 0, 0, 0.4)
    - Gray text: #6b7280
    - Border: #e5e7eb

    Typography:
    - Headlines: Bold, large sizes
    - Body: Inter (Google Fonts)

    Design Reference: Provided UX mockup with hero image and search box
*/

/* ==========================================================================
   CSS VARIABLES (Custom Properties)
   Centralized theming for easy customization
   ========================================================================== */

:root {
    /* Colors */
    --primary-color: #c147e9;           /* Purple/magenta for buttons and accents */
    --primary-hover: #a935c7;           /* Darker purple for hover states */
    --white: #ffffff;
    --black: #000000;
    --text-dark: #1f2937;               /* Dark gray for text */
    --text-light: #6b7280;              /* Light gray for labels */
    --border-color: #e5e7eb;            /* Light border color */
    --overlay-dark: rgba(0, 0, 0, 0.4); /* Semi-transparent overlay */

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Typography */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-headline: 'Futura', 'Century Gothic', -apple-system, sans-serif;

    /* ── Hotel Card Design System Variables ──
       Used by .hotel-card BEM components. Separate from global vars to avoid conflicts. */
    --card-bg: #ffffff;
    --muted: #667085;
    --text: #0b1b2b;
    --accent: #ff6b3b;                                /* CTA button orange */
    --accent-contrast: #ffffff;
    --success: #16a34a;                               /* Free cancellation badge, excellent rating */
    --warning: #f59e0b;                               /* Very good rating amber */
    --danger: #ef4444;                                /* Poor rating red */
    --card-radius: 12px;
    --image-radius: 8px;
    --card-shadow: 0 6px 18px rgba(11,27,43,0.08);
    --card-hover-shadow: 0 10px 30px rgba(11,27,43,0.12);
    --gap: 12px;
    --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* ==========================================================================
   GLOBAL RESET & BASE STYLES
   ========================================================================== */

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

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* ==========================================================================
   HERO SECTION
   Full-screen background with overlay, headline, and search box
   ========================================================================== */

.hero {
    position: relative;
    min-height: 80vh;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('hero-bg.jpg'); /* Background image (pool/hotel scene) */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: var(--spacing-xxl) var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin: var(--spacing-lg);
}

/* Dark overlay for text readability */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-dark);
    z-index: 1;
    border-radius: var(--radius-lg);
}

/* Hero content container (positioned above overlay) */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1000px;
    width: 100%;
}

/* Main headline */
.hero-title {
    font-family: var(--font-headline);
    font-size: 4rem;
    font-weight: 900;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--spacing-md);
    line-height: 1.1;
}

/* Subheadline/tagline */
.hero-subtitle {
    font-size: 1.5rem;
    color: var(--white);
    font-weight: 400;
    margin-bottom: var(--spacing-xxl);
}

/* ==========================================================================
   SEARCH BOX
   White rounded container with destination, dates, guests, and search button
   ========================================================================== */

.search-box {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm);
    box-shadow: var(--shadow-xl);
}

.search-container {
    display: grid;
    grid-template-columns: 2fr 1px 1.5fr 1px 1.5fr auto;
    align-items: center;
    gap: var(--spacing-md);
}

/* Search field wrapper */
.search-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-sm);
    position: relative;
}

/* Search field labels */
.search-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-light);
    letter-spacing: 0.5px;
    text-align: left;
}

/* Search input fields */
.search-input {
    border: none;
    outline: none;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
    background: transparent;
    cursor: pointer;
}

.search-input::placeholder {
    color: var(--text-light);
}

/* Vertical dividers between fields */
.search-divider {
    width: 1px;
    height: 40px;
    background-color: var(--border-color);
}

/* Search button (purple with magnifying glass icon) */
.search-btn {
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius-full);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-md);
}

.search-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.search-btn:active {
    transform: scale(0.98);
}

/* ==========================================================================
   DROPDOWN MENUS
   Autocomplete for destination and guest picker
   ========================================================================== */

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    margin-top: var(--spacing-xs);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    display: none; /* Hidden by default, shown via JS */
}

.dropdown-menu.active {
    display: block;
}

.dropdown-item {
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

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

.dropdown-item:hover {
    background: #f9fafb;
}

/* ==========================================================================
   RESULTS SECTION
   Sidebar + horizontal hotel list layout (mimics LiteAPI test site / Nuitee whitelabel)
   Reference: https://mike-skogmo-pgwdk.nuitee.link/hotels?...
   ========================================================================== */

/* ── Results Page Header Bar (logo + mini search pill) ──
   Sticky header at top of results page. Logo left, search pill center, spacer right. */
.results-header-bar {
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 100; /* Above sidebar/content but below modals */
}

.results-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* Logo text — bold black, matches LOST iN brand */
.results-logo {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-dark);
    text-decoration: none;
    letter-spacing: -0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.results-logo:hover {
    color: var(--primary-color);
}

/* Spacer to balance the flex layout — same width as logo so pill stays centered */
.results-header-spacer {
    width: 80px;
    flex-shrink: 0;
}

/* ── Mini Search Pill ──
   Compact pill showing current search params (city | dates | guests).
   Clicking navigates to stays.php with params pre-filled for editing.
   Design matches the screenshot: rounded pill, light border, dividers between segments. */
.mini-search-pill {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 6px 6px 6px 20px;
    text-decoration: none;
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 500;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    white-space: nowrap;
}

.mini-search-pill:hover {
    border-color: #d1d5db;
    box-shadow: var(--shadow-md);
}

/* Individual text segments (city, dates, guests) */
.mini-search-segment {
    padding: 4px 14px;
    line-height: 1.4;
}

/* Vertical dividers between segments */
.mini-search-divider {
    width: 1px;
    height: 24px;
    background-color: var(--border-color);
    flex-shrink: 0;
}

/* Purple circular search icon (right side of pill) */
.mini-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    border-radius: var(--radius-full);
    flex-shrink: 0;
    margin-left: 8px;
    transition: background 0.2s ease, transform 0.15s ease;
}

.mini-search-pill:hover .mini-search-btn {
    background: var(--primary-hover);
    transform: scale(1.05);
}

/* ── Mini Search Dropdown Panel ──
   Full-width search form that slides down from the header when pill is clicked.
   Contains: destination autocomplete, Flatpickr dates, guest picker, search button.
   Uses same .search-field/.search-input/.search-btn classes as stays.php for consistency. */
.mini-search-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.25s ease;
    opacity: 0;
    background: var(--white);
    border-top: 1px solid var(--border-color);
}

/* Open state — slide down with smooth animation */
.mini-search-dropdown.open {
    max-height: 120px; /* Enough for the single-row form */
    overflow: visible; /* Allow dropdowns (autocomplete, guests) to overflow */
    opacity: 1;
    padding: 12px 0;
}

/* Inner form layout — grid matching stays.php search-container pattern */
.mini-search-form {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    /* Where(8fr) | divider | Check-in(0.25fr) | divider | Check-out(0.25fr) | divider | Guests(1.2fr) | searchBtn */
    grid-template-columns: 8fr 1px 0.25fr 1px 0.25fr 1px 1.2fr auto;
    align-items: center;
    gap: 12px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 6px 6px 6px 16px;
    box-shadow: var(--shadow-md);
}

/* Compact padding for header form fields */
.mini-search-form .search-field {
    padding: 6px 8px;
    position: relative; /* For dropdown positioning */
}

/* Slightly smaller search button in header */
.mini-search-form .search-btn {
    width: 48px;
    height: 48px;
}

/* Ensure autocomplete/guest dropdowns render above page content */
.mini-search-form .dropdown-menu {
    z-index: 200;
}

/* ── Mobile responsive ── */
@media (max-width: 640px) {
    .results-header-inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .results-logo {
        width: 100%;
        text-align: center;
    }

    .results-header-spacer {
        display: none;
    }

    .mini-search-pill {
        font-size: 0.8rem;
        padding: 4px 4px 4px 12px;
    }

    .mini-search-segment {
        padding: 4px 8px;
    }

    .mini-search-btn {
        width: 34px;
        height: 34px;
    }

    /* Stack the dropdown form fields on mobile */
    .mini-search-form {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
    }

    .mini-search-form .search-divider {
        display: none;
    }

    .mini-search-dropdown.open {
        max-height: 350px; /* Taller for stacked mobile layout */
    }
}

.results-section {
    padding: var(--spacing-lg) 0;
    background: #f9fafb;
}

/* ── Results Page Layout: sidebar (300px) + main (flex:1) ── */
.results-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.results-sidebar {
    width: 300px;
    flex-shrink: 0;
}

.results-main {
    flex: 1;
    min-width: 0; /* Prevent flex overflow */
}

/* ── Results Header (count + sort dropdown) ── */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 8px 0;
}

.results-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--text-light);
}

.results-count-number {
    font-weight: 700;
    color: var(--text-dark);
}

.results-sort {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
    font-size: 0.875rem;
}

.sort-icon {
    color: var(--primary-color);
}

.sort-label {
    font-weight: 500;
    white-space: nowrap;
}

/* Sort dropdown — styled to match test site (no border, accent color text) */
.sort-dropdown {
    border: none;
    background: transparent;
    color: var(--primary-color);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    padding: 4px 8px;
    font-family: var(--font-body);
}

.sort-dropdown:focus {
    outline: none;
}

/* ── Hotel List (vertical stack of horizontal cards) ── */
/* NOT a grid — each card is a full-width horizontal row */
.results-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════
   HOTEL CARD — BEM Design System (v2)
   Horizontal layout on desktop (image | content+meta | price+CTA).
   Stacks vertically on narrow screens (≤880px).

   Structure:
   .hotel-card
     .hotel-card__media          — image wrapper + guest rating overlay
       .hotel-card__image        — <img> with aspect-ratio 4/3
       .hotel-card__guest-rating — color-coded score badge (top-right overlay)
     .hotel-card__content        — name, stars, location, meta row
       .hotel-card__header       — name + star icons
       .hotel-card__location     — address line
       .hotel-card__meta         — badges (left) + price (right) + CTA
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Card base ── */
.hotel-card {
    display: flex;
    gap: var(--gap);
    background: var(--card-bg);
    border-radius: var(--card-radius);
    padding: 14px;
    box-shadow: var(--card-shadow);
    align-items: stretch;
    transition: box-shadow 200ms ease, transform 160ms ease;
    border: 1px solid rgba(11,27,43,0.04);
    font-family: var(--font-family);
    cursor: pointer;
    box-sizing: border-box;
}

/* Hover / focus-within lift effect */
.hotel-card:hover,
.hotel-card:focus-within {
    box-shadow: var(--card-hover-shadow);
    transform: translateY(-4px);
}

/* ── Image column (left side on desktop) ── */
.hotel-card__media {
    position: relative;
    flex: 0 0 300px;              /* 2x original 180px for larger hotel photos */
    border-radius: var(--image-radius);
    overflow: hidden;
    min-height: 200px;
    align-self: stretch;          /* fill full card height */
}

/* Image — consistent aspect ratio via aspect-ratio, cover-fit */
.hotel-card__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;          /* enforce consistent image proportions */
    border-radius: var(--image-radius);
    vertical-align: middle;
}

/* ── Guest rating badge — overlaid top-right of image ──
   Color-coded by score: excellent (green), verygood (amber), poor (red)
   Uses CSS gradients defined in guest-rating--* modifier classes */
.hotel-card__guest-rating {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(11,27,43,0.12);
    /* GPU-accelerated to prevent clipping on small images */
    transform: translateZ(0);
    will-change: transform;
}

/* Rating color tiers — gradient backgrounds */
.guest-rating--excellent { background: linear-gradient(180deg, var(--success), #0f9b3d); }
.guest-rating--verygood  { background: linear-gradient(180deg, var(--warning), #d78800); }
.guest-rating--poor      { background: linear-gradient(180deg, var(--danger), #d33b3b); }

/* Badge internals */
.guest-rating__score {
    font-size: 14px;
    font-weight: 700;
}
.guest-rating__label {
    font-size: 11px;
    opacity: 0.95;
    margin-top: 2px;
    text-transform: none;
}

/* ── Content column — two-column layout: info (left) + price/CTA (right) ──
   Rating badge positioned absolute top-right of this container */
.hotel-card__content {
    position: relative;            /* anchor for absolute-positioned rating badge */
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 16px;
}

/* Left info column: stars, name, address, badges — takes remaining space */
.hotel-card__info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}

/* Right column: savings badge + price block + CTA stacked vertically, right-aligned */
.hotel-card__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    min-width: 160px;
}

/* Guest rating badge — moved from image overlay to content top-right corner */
.hotel-card__content > .hotel-card__guest-rating {
    position: absolute;
    top: 0;
    right: 0;
}

/* Green "X% off" savings badge — top of right column (matches Nuitee design) */
.hotel-card__savings-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--success, #16a34a);
    border-radius: 6px;
    white-space: nowrap;
}

/* Hotel name — bold, max 2 lines with ellipsis clamp */
.hotel-card__name {
    margin: 0;
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Star icons group — sits ABOVE the hotel name (matching Nuitee layout) */
.hotel-card__stars {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: 4px;
}

/* Individual star SVG sizing + fill colors */
.star {
    width: 16px;
    height: 16px;
    display: inline-block;
    fill: #ffd166;                 /* filled star gold */
    stroke: rgba(11,27,43,0.08);
}
.star--empty {
    fill: transparent;
    stroke: rgba(11,27,43,0.18);  /* empty star outline */
}

/* Location / address — single line with ellipsis */
.hotel-card__location {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 10px;
}

/* ── Meta row — legacy, kept for backward compat if referenced elsewhere ── */
.hotel-card__meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
}

/* Badges: free cancellation, meal plan, etc. */
.hotel-card__badges {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    max-width: 60%;
}

/* Generic badge pill */
.badge {
    display: inline-block;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 8px;
    background: rgba(11,27,43,0.04);
    color: var(--muted);
    font-weight: 600;
}
.badge--success { background: rgba(22,163,74,0.12); color: var(--success); }  /* Free cancellation */
.badge--muted   { background: rgba(11,27,43,0.04);  color: var(--muted); }    /* Meal plan, etc. */
.badge--accent  { background: rgba(255,107,59,0.08); color: var(--accent); }   /* Special offers */

/* ── Price block (right-aligned) ── */
.hotel-card__price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 150px;
    flex-shrink: 0;
}

/* Price main line: amount + "/ night" */
.hotel-card__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.price__amount {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
}
.price__per {
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
}

/* Original (strikethrough) price — shown when there's a discount */
.hotel-card__original .original__amount {
    display: inline-block;
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: visible;                       /* allow decoration to render without clipping */
    -webkit-font-smoothing: antialiased;
    /* Bold strikethrough line */
    text-decoration: line-through;
    text-decoration-color: rgba(11,27,43,0.12);
    text-decoration-thickness: 2px;
    text-decoration-skip-ink: none;
    padding-right: 6px;
}

/* Total stay price line (e.g. "USD 1,155 Total") */
.hotel-card__total small {
    display: block;
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
    text-align: right;
    line-height: 1.2;
}

/* Detail line (e.g. "2 nights, 1 room, incl. taxes & fees") */
.hotel-card__taxes small {
    display: block;
    font-size: 12px;
    color: var(--muted);
    opacity: 0.95;
    text-align: right;
    line-height: 1.2;
}

/* ── "Pay at property" label for PROPERTY_PAY rates ── */
/* Shown when LiteAPI rate has paymentTypes: ["PROPERTY_PAY"].
   Per LiteAPI docs, markup is not applied for PROPERTY_PAY rates —
   customer pays hotel directly. We show these rates (preserves inventory)
   but skip our markup and SSP floor. See computeDisplayPrice() in app.js. */
.hotel-card__payment-type small {
    display: block;
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
    text-align: right;
    line-height: 1.2;
    margin-top: 2px;
}

/* ── Member price teaser (below SSP price, shows savings + CTA to upgrade) ── */
/* Legacy: kept for potential future member pricing feature */
.hotel-card__member-teaser {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 4px 8px;
    background: rgba(193,71,233,0.06);  /* purple tint matching brand #c147e9 */
    border-radius: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Member per-night price (the lower bookable rate) */
.member-teaser__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary, #c147e9);
}

/* Savings badge (e.g. "Save 4%") */
.member-teaser__savings {
    font-size: 11px;
    font-weight: 700;
    color: var(--success, #16a34a);
    background: rgba(22,163,74,0.10);
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* "Member price" label / CTA text */
.member-teaser__cta {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary, #c147e9);
    white-space: nowrap;
}

/* ── CTA button inside .hotel-card__right — full width, stacked below price ── */
.hotel-card__right .btn {
    width: 100%;
    text-align: center;
}

/* Button base — shared by .btn--primary CTA */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    -webkit-user-select: none;
    user-select: none;
    transition: transform 120ms ease, box-shadow 140ms ease, filter 120ms ease;
}

/* Primary CTA — orange accent with shadow */
.btn--primary {
    background: var(--accent);
    color: var(--accent-contrast);
    box-shadow: 0 6px 18px rgba(255,107,59,0.16);
    min-width: 140px;
}
.btn--primary:hover  { transform: translateY(-2px); filter: brightness(0.98); }
.btn--primary:active { transform: translateY(0); filter: brightness(0.95); }

/* Focus outline for keyboard/screen-reader accessibility */
.btn:focus-visible {
    outline: 3px solid rgba(255,107,59,0.18);
    outline-offset: 2px;
    border-radius: 10px;
}

/* Disabled button state */
.btn[disabled],
.btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Utility: visually-hidden for accessibility labels */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Card responsive: stack vertically on narrow screens ── */
@media (max-width: 880px) {
    .hotel-card {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        align-items: stretch;
    }

    .hotel-card__media {
        flex: 0 0 auto;
        width: 100%;
        min-height: 180px;
        border-radius: 10px;
        overflow: hidden;
    }

    .hotel-card__image { aspect-ratio: 16 / 9; }

    /* Content stacks vertically on mobile */
    .hotel-card__content {
        flex-direction: column;
        gap: 12px;
    }

    .hotel-card__name {
        max-width: 100%;
        -webkit-line-clamp: 2;
    }

    .hotel-card__right {
        align-items: flex-end;
        min-width: 0;
    }

    .btn--primary { min-width: 120px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LEGACY CARD STYLES — used by createRecommendedCard() on homepage (stays.php)
   These vertical cards appear in .recommended-grid and use the old class names.
   ══════════════════════════════════════════════════════════════════════════ */

/* Override: recommended cards use vertical layout inside the grid */
.recommended-grid .hotel-card {
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.hotel-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hotel-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    min-width: 0;
}

.hotel-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hotel-card-location {
    font-size: 0.8125rem;
    color: var(--text-light);
    margin-bottom: 8px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Filters Sidebar ──
   White container with 1px border, 12px radius (matches test site .filters.desktop)
   Sticky positioning so it follows scroll */
.filters-container {
    background: var(--white);
    border: 1px solid #d2d6db;
    border-radius: 12px;
    position: sticky;
    top: 20px;
    overflow: hidden;
}

/* Filters heading — "Filters" + clear button */
.filter-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #f3f4f6;
}

.filter-heading h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

/* Clear filters button (trash icon + text, matches test site) */
.filter-clear-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 4px;
    font-family: var(--font-body);
}

.filter-clear-btn:hover {
    color: var(--primary-color);
}

/* Filters scrollable content area */
.filters-content {
    padding: 0;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* Each filter section — separated by bottom border */
.filter-section {
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.filter-section:last-child {
    border-bottom: none;
}

/* Filter section label (e.g. "Price (per night)", "Star rating") */
.filter-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 12px;
}

/* Text input for property name search */
.filter-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-family: var(--font-body);
    color: var(--text-dark);
    outline: none;
    transition: border-color 0.15s;
}

.filter-input:focus {
    border-color: var(--primary-color);
}

.filter-input::placeholder {
    color: #9ca3af;
}

/* ── Custom Checkbox (matches test site PrimeVue p-checkbox style) ── */
.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-dark);
    line-height: 1.3;
}

.filter-checkbox:last-child {
    margin-bottom: 0;
}

/* Hide native checkbox */
.filter-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Custom checkmark box */
.filter-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    background: var(--white);
    transition: all 0.15s;
}

/* Checked state — purple fill with white checkmark */
.filter-checkbox input[type="checkbox"]:checked + .filter-checkmark {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.filter-checkbox input[type="checkbox"]:checked + .filter-checkmark::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

/* Muted variant for "Must have all selected" sub-option */
.filter-checkbox--muted {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
}

/* Facet count badge — shows "(12)" next to each filter option
   Styled subtly so it doesn't compete with the filter label.
   Only rendered for options with count > 0 (zero-count options are hidden). */
.facet-count {
    color: var(--text-light);
    font-size: 0.75rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* "Show all N" link button */
.filter-show-all {
    display: block;
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    margin-top: 8px;
    font-family: var(--font-body);
}

.filter-show-all:hover {
    text-decoration: underline;
}

/* ── Price Filter (min/max number inputs + Go button) ── */
.price-inputs-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Wrapper for $ prefix + input field */
.price-input-wrap {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0 8px;
    flex: 1;
    min-width: 0;
}

.price-input-wrap:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(193, 71, 233, 0.15);
}

.price-input-prefix {
    color: var(--text-light);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-right: 2px;
    flex-shrink: 0;
}

.price-input-field {
    border: none;
    outline: none;
    width: 100%;
    padding: 6px 0;
    font-size: 0.8125rem;
    font-family: var(--font-body);
    background: transparent;
    /* Hide number input spinners */
    -moz-appearance: textfield;
    appearance: textfield;
}

.price-input-field::-webkit-outer-spin-button,
.price-input-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.price-input-dash {
    color: var(--text-light);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.btn-apply-price {
    padding: 6px 12px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background 0.15s;
    flex-shrink: 0;
}

.btn-apply-price:hover {
    background: var(--primary-hover);
}

/* ── No Results Message ── */
.no-results {
    text-align: center;
    padding: 60px 20px;
}

.no-results h3 {
    color: var(--text-light);
    margin-bottom: 12px;
}

.no-results p {
    color: #9ca3af;
    margin-bottom: 20px;
}

/* ── Primary Button (used in no-results, load more, etc.) ── */
.btn-primary {
    padding: 10px 24px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.875rem;
    transition: background 0.15s;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

/* Load More button */
.load-more-wrap {
    text-align: center;
    margin-top: 24px;
    margin-bottom: 24px;
}

.btn-load-more {
    padding: 12px 32px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background 0.15s;
}

.btn-load-more:hover {
    background: var(--primary-hover);
}

/* ==========================================================================
   HOTEL DETAIL SECTION
   Full hotel information, gallery, amenities, and room selection
   ========================================================================== */

.hotel-detail-section {
    padding: var(--spacing-xxl) 0;
}

.hotel-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.hotel-gallery img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* ==========================================================================
   RECOMMENDED SECTION
   Featured hotels with horizontal scroll
   ========================================================================== */

.recommended-section {
    padding: var(--spacing-xxl) 0;
    background: var(--white);
}

.recommended-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}

/* ==========================================================================
   LOADING OVERLAY
   Full-screen loading indicator during API calls
   ========================================================================== */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Spinner animation */
.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-text {
    text-align: center;
    color: var(--text-light);
    font-size: 1rem;
}

/* ==========================================================================
   RESPONSIVE STYLES
   Mobile-first breakpoints
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE STYLES
   Mobile-first breakpoints for results page + homepage
   ========================================================================== */

/* ── Tablet (≤1024px): narrower sidebar ── */
@media (max-width: 1024px) {
    .results-sidebar {
        width: 260px;
    }
}

/* ── Mobile (≤768px): stack sidebar above results, vertical cards ── */
@media (max-width: 768px) {
    /* Hero adjustments */
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }

    .search-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .search-divider {
        display: none;
    }

    .search-btn {
        width: 100%;
        border-radius: var(--radius-md);
    }

    /* Results layout: stack vertically */
    .results-layout {
        flex-direction: column;
    }

    .results-sidebar {
        width: 100%;
    }

    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Recommended grid */
    .recommended-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    /* Make filters collapsible on mobile */
    .filters-container {
        position: static;
    }

    .filters-content {
        max-height: none;
    }
}

/* ── Small mobile (≤480px) ── */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

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

/* ==========================================================================
   FLATPICKR THEME OVERRIDES
   Customize Flatpickr calendar to match LOST iN purple brand (#c147e9)
   Flatpickr docs: https://flatpickr.js.org/theme/
   ========================================================================== */

/* Selected date range - purple highlight */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--color-primary, #c147e9);
    border-color: var(--color-primary, #c147e9);
    color: white;
}

/* In-range dates (between start and end) - light purple */
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange {
    background: rgba(193, 71, 233, 0.15);
    border-color: rgba(193, 71, 233, 0.15);
    box-shadow: -5px 0 0 rgba(193, 71, 233, 0.15), 5px 0 0 rgba(193, 71, 233, 0.15);
}

/* Today marker */
.flatpickr-day.today {
    border-color: var(--color-primary, #c147e9);
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: var(--color-primary, #c147e9);
    border-color: var(--color-primary, #c147e9);
    color: white;
}

/* Calendar container - slightly rounded, subtle shadow */
.flatpickr-calendar {
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Day hover state */
.flatpickr-day:hover {
    background: rgba(193, 71, 233, 0.1);
    border-color: rgba(193, 71, 233, 0.3);
}


/* ==========================================================================
   CHECKOUT PAGE STYLES
   Guest form, payment container, order summary sidebar, confirmation page.
   Used by stays-checkout.php.
   ========================================================================== */

/* Checkout section wrapper */
.checkout-section {
    padding: 24px 0;
    min-height: 80vh;
}

/* 2-column grid: form (left) + summary sidebar (right) */
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

/* Section headings inside checkout main */
.checkout-main h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    margin-top: 24px;
}

.checkout-main h2:first-child {
    margin-top: 0;
}

/* ── Guest Form ────────────────────────────────────────────── */

.guest-form {
    background: var(--white);
    padding: 24px;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 16px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(193, 71, 233, 0.15);
}

.form-group input.error {
    border-color: #dc2626;
}

/* Validation error messages below the form */
.form-errors {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 16px;
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 12px;
}

/* ── Cancellation Policy ───────────────────────────────────── */

.checkout-cancellation {
    background: var(--white);
    padding: 16px 24px;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-top: 16px;
    font-size: 0.9375rem;
}

/* ── Price Change Warning ──────────────────────────────────── */

.price-change-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px 16px;
    color: #92400e;
    font-size: 0.875rem;
    margin-top: 16px;
}

/* ── Payment SDK Container ─────────────────────────────────── */

.payment-container {
    background: var(--white);
    padding: 24px;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-height: 200px;
}

.payment-loading {
    text-align: center;
    color: var(--text-light);
    padding: 40px 0;
}

/* "Proceed to Payment" button */
.proceed-payment-btn {
    display: block;
    width: 100%;
    padding: 16px 24px;
    margin-top: 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.0625rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.2s ease;
}

.proceed-payment-btn:hover:not(:disabled) {
    background: var(--primary-hover);
}

.proceed-payment-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* ── Prebook Countdown Timer ───────────────────────────────── */

.prebook-timer {
    text-align: center;
    padding: 12px;
    font-size: 0.875rem;
    color: var(--text-light);
    margin-top: 16px;
}

.prebook-timer.warning {
    color: #dc2626;
    font-weight: 600;
    animation: pulse-warning 1s ease-in-out infinite alternate;
}

@keyframes pulse-warning {
    from { opacity: 1; }
    to { opacity: 0.6; }
}

/* ── Order Summary Sidebar ─────────────────────────────────── */

.checkout-summary .summary-card {
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 24px;
    position: sticky;
    top: 80px; /* Below the sticky header */
}

.summary-hotel-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 16px;
}

.summary-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.summary-address {
    color: var(--text-light);
    font-size: 0.875rem;
    margin-bottom: 0;
}

.summary-card hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 16px 0;
}

.summary-dates div,
.summary-room div {
    font-size: 0.875rem;
    color: var(--text-dark);
    line-height: 1.6;
}

.summary-total {
    font-size: 1.25rem;
    margin-top: 8px;
}

/* ── Confirmation Page ─────────────────────────────────────── */

.confirmation-page {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 0;
}

.confirmation-icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 40px;
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
    border-radius: 50%;
    margin: 0 auto 24px;
}

.confirmation-page h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: #16a34a;
}

.confirmation-details {
    background: var(--white);
    border-radius: 14px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: left;
    margin-bottom: 24px;
}

.confirmation-details p {
    margin-bottom: 8px;
    color: var(--text-dark);
}

.confirmation-details h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.confirmation-details hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 16px 0;
}

.confirmation-actions {
    margin-top: 24px;
}

.confirmation-actions .btn-primary {
    display: inline-block;
    padding: 14px 28px;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.confirmation-actions .btn-primary:hover {
    background: var(--primary-hover);
}

/* ── Back Link (hotel detail page) ─────────────────────────── */

.back-link {
    display: inline-block;
    margin-bottom: 24px;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    background: white;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.875rem;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.back-link:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* ── Responsive: Stack checkout grid on mobile ─────────────── */

@media (max-width: 768px) {
    .checkout-grid {
        grid-template-columns: 1fr;
    }

    /* Show order summary above form on mobile */
    .checkout-summary {
        order: -1;
    }

    .checkout-summary .summary-card {
        position: static;
    }

    .confirmation-page {
        padding: 24px 0;
    }

    .confirmation-details {
        padding: 20px;
    }
}