/**
 * Chosen Rentals Brand Colors - CSS Variables
 * Định nghĩa các màu sắc thương hiệu Chosen Rentals
 * File này được include trong layout chung để đảm bảo consistency
 */

:root {
    /* Primary Brand Colors */
    --chosen-rentals-primary: #1C1C1C;
    --chosen-rentals-dark: #0F0F0F;
    --chosen-rentals-darker: #000000;
    
    /* Light Variants */
    --chosen-rentals-light: #EDEDED;
    --chosen-rentals-lighter: #D4D4D4;
    
    /* Utility Colors */
    --chosen-rentals-disabled: #B5B5B5;
    
    /* Legacy mapping - giữ để tương thích ngược */
    --primary: var(--chosen-rentals-primary);
    --primary-dark: var(--chosen-rentals-dark);
    --primary-darker: var(--chosen-rentals-darker);
}

/* ---------------------------------------------------------------------------
 * BRAND SURFACE
 *
 * Lets a brand render its own surface — a dark page, a custom header — with no
 * per-page theme switch anywhere in the admin. Two halves:
 *
 *   1. The variables below DEFINE the surface. Every default reproduces exactly
 *      what a theme renders today (white page, gray-900 headings, #4d565c body
 *      copy, white header/footer, the palette's own panel gradients), so a
 *      theme that overrides nothing is visually unchanged. This file ships with
 *      the chosen-rentals theme itself, so "unchanged" has to be literal.
 *   2. The rules below re-point the hardcoded Tailwind utilities the views use
 *      at those variables.
 *
 * Scope, deliberately split:
 *   - the HEADER is styled on EVERY page, so a site's chrome stays consistent
 *     as a visitor moves from the homepage to a car or checkout page;
 *   - everything else is scoped to `body.home-surface`, a class only the home
 *     views add (via their `body_class` section), so inner pages keep the
 *     standard white treatment.
 *
 * A tenant theme overrides the values in the generated block below (written by
 * tools/tenant-onboard from `brand.homepage_surface` in the tenant manifest).
 * Hand-editing that block works too — but a re-scaffold rewrites it, so the
 * manifest is the source of truth.
 *
 * KEEP IN SYNC WITH public/assets/chosen-rentals/css/chosen-rentals-brand.css. `brand.homepage_surface`
 * is one manifest schema for every theme — a variable declared by only some of them is a
 * key that works or silently does nothing depending on which theme a tenant is on.
 * --------------------------------------------------------------------------- */
:root {
    /* Page + section backgrounds */
    --home-bg: #ffffff;
    --home-surface: #ffffff;
    --home-surface-alt: #f9fafb;
    --home-border: #e5e7eb;

    /* Feature panels — the rounded "about" and "road trips" blocks. The
       defaults restate the theme's own tailwind gradients in terms of the
       palette vars (pale tint on desktop, deep brand on mobile), so overriding
       nothing changes nothing. A surface that sets --home-panel-bg gets a flat
       panel instead, and sets these to `none`. */
    --home-panel: linear-gradient(184.5554072637447deg, var(--chosen-rentals-light), var(--chosen-rentals-lighter));
    --home-panel-mobile: linear-gradient(184.5554072637447deg, var(--chosen-rentals-dark), var(--chosen-rentals-darker));
    --home-panel-bg: transparent;

    /* Accent behind filled buttons and the full-width call-to-action band.
       Defaults to the brand primary; a brand whose primary is too light to
       carry white text points this at a deeper shade to keep the text legible. */
    --home-accent: var(--chosen-rentals-primary);

    /* Type */
    --home-text: #111827;
    --home-text-muted: #4d565c;

    /* Chrome */
    --home-header-bg: #ffffff;
    --home-header-text: #111827;
    --home-footer-bg: #ffffff;
    --home-footer-text: #374151;
}

/* BEGIN homepage-surface — tenant overrides (generated; edits are overwritten on re-scaffold) */
/* END homepage-surface */

/* --- Header: EVERY page ----------------------------------------------------
 * `:root` prefix only to out-specify the `bg-white` utility on the element
 * itself — a bare `header` selector is a single element and loses to any class.
 * Both rental headers (legacy + category) carry `bg-white`. */
:root header {
    background-color: var(--home-header-bg);
    color: var(--home-header-text);
}

header .text-gray-500,
header .text-gray-700,
header .text-gray-900 {
    color: var(--home-header-text);
}

header .border-gray-200 {
    border-color: var(--home-border);
}

header .bg-chosen-rentals-primary {
    background-color: var(--home-accent);
}

/* --- Homepage surface ------------------------------------------------------ */
body.home-surface {
    background-color: var(--home-bg);
    color: var(--home-text);
}

body.home-surface main .bg-white {
    background-color: var(--home-surface);
}

body.home-surface main .bg-gray-50,
body.home-surface main .bg-gray-100 {
    background-color: var(--home-surface-alt);
}

body.home-surface main .border-gray-100,
body.home-surface main .border-gray-200,
body.home-surface main .border-gray-300,
body.home-surface main .border-\[\#e5e7eb\] {
    border-color: var(--home-border);
}

/* `.heading-primary` bakes text-gray-900 into a component class (tailwind.css),
   so it needs naming here as well as the raw utility — without it, section
   headings keep the near-navy gray-900 against a dark page. */
body.home-surface main .heading-primary,
body.home-surface main .text-black,
body.home-surface main .text-gray-800,
body.home-surface main .text-gray-900 {
    color: var(--home-text);
}

body.home-surface main .text-gray-400,
body.home-surface main .text-gray-500,
body.home-surface main .text-gray-600,
body.home-surface main .text-gray-700,
body.home-surface main .text-homepage-text-secondary,
body.home-surface main .text-\[\#525b61\] {
    color: var(--home-text-muted);
}

/* Feature panels. Painted by the palette's light/lighter tint on desktop, which
   turns into a bright hole in a dark page and leaves the light type inside it
   unreadable. Each selector mirrors how Tailwind emits the class it overrides —
   the `lg:` variant inside the same breakpoint — so the desktop/mobile split is
   preserved rather than flattened. */
body.home-surface main .bg-home-about-mobile {
    background-image: var(--home-panel-mobile);
    background-color: var(--home-panel-bg);
}

body.home-surface main .bg-home-about-gradient {
    background-image: var(--home-panel);
    background-color: var(--home-panel-bg);
}

/* The about panel is the one block that already flips its own colours per
 * breakpoint — white type on the deep mobile gradient, dark type on the pale
 * desktop tint — so its desktop type lives behind `lg:` variants that the
 * unprefixed selectors above never match. These are the only colour-bearing
 * responsive variants in either home view (the rest are font sizes). */
@media (min-width: 1024px) {
    body.home-surface main .lg\:bg-home-about-gradient {
        background-image: var(--home-panel);
        background-color: var(--home-panel-bg);
    }

    body.home-surface main .lg\:text-gray-900 {
        color: var(--home-text);
    }

    body.home-surface main .lg\:text-homepage-text-secondary {
        color: var(--home-text-muted);
    }

    body.home-surface main .lg\:bg-chosen-rentals-primary {
        background-color: var(--home-accent);
    }
}

/* Accent: keeps filled buttons and the CTA band legible when a brand primary is
   too light for white text. */
body.home-surface main .bg-chosen-rentals-primary {
    background-color: var(--home-accent);
}

/* --- Footer: homepage only (matches the surface it sits on) ---------------- */
body.home-surface footer {
    background-color: var(--home-footer-bg);
    color: var(--home-footer-text);
    border-color: var(--home-border);
}

/* Every grey the footer actually uses. gray-800/900 were absent, so the nav
   links — which carry text-gray-900 — stayed near-black on a dark footer while
   the copyright line (text-gray-700) correctly turned white. Scoped to
   `body.home-surface`, so on inner pages the footer keeps its light treatment
   and the links stay gray-900 there. */
body.home-surface footer .text-gray-600,
body.home-surface footer .text-gray-700,
body.home-surface footer .text-gray-800,
body.home-surface footer .text-gray-900 {
    color: var(--home-footer-text);
}

body.home-surface footer .border-gray-200 {
    border-color: var(--home-border);
}

/* --- Section fade ----------------------------------------------------------
 * A block that scrolls under a soft edge must fade to the colour BEHIND it.
 * Hardcoding it (`from-gray-50` over a white section) left a visible grey band
 * on every light theme; deriving it from the surface is correct on both. */
.surface-fade-up {
    background-image: linear-gradient(to top, var(--home-surface), transparent);
}

/* --- Light control surfaces ------------------------------------------------
 * The search panel is a WHITE control floating ON the surface, and
 * sticky-search.js clones it into the (now always-branded) header — so it keeps
 * the light treatment wherever it lives, on every page. This block must RESTORE
 * every utility the surface rules re-point, or a control paints its own text in
 * the page's colour: available calendar days carry `.text-black` and rendered
 * white-on-white inside the picker. `.date-picker` / `.time-picker-dropdown`
 * are matched by class because the sticky clone appends them outside the
 * original container. */
#searchFormContainer,
#stickySearchClone,
.date-picker,
.time-picker-dropdown {
    color: #111827;
}

#searchFormContainer .bg-white,
#stickySearchClone .bg-white,
.date-picker,
.time-picker-dropdown {
    background-color: #ffffff;
}

#searchFormContainer .text-black,
#searchFormContainer .text-gray-800,
#searchFormContainer .text-gray-900,
#stickySearchClone .text-black,
#stickySearchClone .text-gray-800,
#stickySearchClone .text-gray-900,
.date-picker .text-black,
.date-picker .text-gray-800,
.date-picker .text-gray-900,
.time-picker-dropdown .text-black {
    color: #111827;
}

#searchFormContainer .text-gray-400,
#searchFormContainer .text-gray-500,
#searchFormContainer .text-gray-600,
#searchFormContainer .text-gray-700,
#stickySearchClone .text-gray-400,
#stickySearchClone .text-gray-500,
#stickySearchClone .text-gray-600,
#stickySearchClone .text-gray-700,
.date-picker .text-gray-500,
.date-picker .text-gray-600 {
    color: #4b5563;
}

/* Past/blocked days keep their muted-but-visible grey on the white picker. */
.date-picker .text-gray-300 {
    color: #d1d5db;
}

/* The selected day/time pill carries white text on the brand fill, so it wants
   the same accent the buttons use. Identical to the primary unless a brand set
   `accent`, so this is a no-op for a theme that didn't. */
#searchFormContainer .bg-primary,
#stickySearchClone .bg-primary,
.date-picker .bg-primary,
.time-picker-dropdown .time-option.selected {
    background-color: var(--home-accent);
}

#searchFormContainer .border-gray-200,
#searchFormContainer .border-gray-300,
#stickySearchClone .border-gray-200,
#stickySearchClone .border-gray-300,
.date-picker .border-\[\#e5e7eb\],
.time-picker-dropdown .border-\[\#e5e7eb\] {
    border-color: #d1d5db;
}