/* ==========================================================================
   Public pages / agent websites - shared surface layer
   --------------------------------------------------------------------------
   THIS FILE IS SERVED STRAIGHT FROM public/. It is nobody's build output, so
   it is its own source and a sweep of resources/css never touches it. That is
   how it came to declare a THIRD token family of its own - a purple
   `--primary-color: #667eea`, a `--text-primary: #1a1a1a`, its own radii and
   its own four shadows - and paint every `.btn-primary`, every focused input
   and every card on thirteen public pages with them under `!important`.

   WHY THAT MATTERED MORE THAN "the wrong purple". These pages are ALSO every
   agent's white-label website. On a copy pinned to an agency,
   `white-label/partials/brand` overrides `--brand-orange` / `--brand-navy`
   and derives the shades; nothing it can override reaches a literal. So an
   agency's own "Request booking" button rendered in the operator's purple
   beside the agency's own blue, and no property remap could reach it - which
   is what `InnerPublicPagesWearTheAgencysColoursTest` was written for.

   THE NAMES STAY AND THE VALUES BECOME ALIASES (T4, 2026-09-07). Every page
   style, every guard and `brand.css`'s dark block already speak these names,
   so renaming them would be a change to thirteen page stylesheets for no gain.
   Pointing each at its `--brand-*` equivalent gets three things at once:

     - the agency repaint reaches them, because the brand token is the one the
       white-label partial overrides;
     - DARK MODE FOLLOWS BY CONSTRUCTION rather than by a remap list. The
       brand neutrals are redefined under `[data-bs-theme="dark"]`, so an alias
       declared here re-resolves with them. The remap that used to live in
       `brand.css` was a LIST, and a list cannot cover the token added next
       month;
     - the light rendering is unchanged where it was already right, because
       each alias points at the brand token whose light value it equalled.

   SHAPE AND ELEVATION follow brand-spec.md §3 rather than this file's own
   five-step scale: 8px controls, 12px cards, 16px hero panels, and ONE
   elevation (`--brand-shadow`), which is `none` on dark where the hairline
   border carries the separation instead.
   ========================================================================== */
:root {
    /* Controls and accents - the two names this file paints buttons with. */
    --primary-color: var(--brand-orange);
    --primary-dark: var(--brand-orange-600);
    /* The brand colour as TEXT rather than as a fill: 2.83:1 on white
       undarkened, 5.74:1 darkened, and it inverts on dark. Every rule below
       that writes the primary as a LABEL reads this instead. */
    --primary-ink: var(--brand-orange-ink);
    --secondary-color: var(--brand-navy);
    --accent-color: var(--brand-orange);

    /* Ink */
    --text-primary: var(--brand-text);
    --text-secondary: var(--brand-text-muted);
    --text-muted: var(--brand-text-faint);

    /* Surfaces */
    --bg-primary: var(--brand-surface);
    --bg-secondary: var(--brand-surface-2);
    --bg-tertiary: var(--brand-bg);
    --border-color: var(--brand-border);

    /* ONE elevation, per the spec. The four steps this file used to declare
       were four different opinions about the same card; the hover step is the
       only one that ever meant anything and it is now a border change. */
    --shadow-sm: var(--brand-shadow);
    --shadow-md: var(--brand-shadow);
    --shadow-lg: var(--brand-shadow);
    --shadow-xl: var(--brand-shadow);

    /* 8 controls / 12 cards / 16 hero panels. `--radius-sm` and `--radius-2xl`
       are kept as names because page styles read them; they resolve to the
       same three steps rather than to a fifth and a sixth. */
    --radius-sm: 8px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
}

/* Global Styles */
body {
    font-family: var(--bs-font-sans-serif);
    line-height: var(--brand-lh-body);
    color: var(--text-primary);
    background: var(--bg-primary);
}

/* Card Improvements */
.tour-card, .package-card, .hotel-detail-card, .tour-detail-card {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    overflow: hidden;
}

/* The lift is kept (it is the affordance) and the second shadow step is not:
   on dark `--brand-shadow` is `none`, so a hover that changed only the shadow
   would do nothing there. The border carries it in both themes. */
.tour-card:hover, .package-card:hover, .hotel-detail-card:hover, .tour-detail-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--primary-color) !important;
}

/* Navbar Improvements
   The translucent white is GLASS - it sits over a hero photograph on several
   of these pages and a token cannot carry translucency. brand.css's "Public
   site, dark" section gives it a dark glass of the same opacity. */
.navbar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Button Improvements
   SOLID, NOT A GRADIENT. The gradient was the operator's two purples and is
   the one thing on these pages a reseller's customer sees most of. Solid
   primary is what brand-spec.md §4 specifies and what the portal renders. */
.btn-primary {
    background: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--brand-on-primary) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: var(--brand-on-primary) !important;
}

/* A SURFACE FILL, NOT `transparent`, AND THAT IS A CONTRAST FIX RATHER THAN A
   style change. These pages put "Back to Home" on the DEEP hero band, and an
   outline button with no fill takes whatever is behind it - so on a copy whose
   primary is a dark blue the label sat on the dark canvas at 1.63:1. With a
   surface fill the ink has a defined ground in both themes and on any
   agency's palette, which is what `.back-btn` beside it already does. */
.btn-outline-primary {
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-ink) !important;
    background: var(--bg-primary) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.btn-outline-primary:hover {
    background: var(--primary-color) !important;
    color: var(--brand-on-primary) !important;
}

/* Form Improvements - label above, 8px radius, 40-44px control. */
.form-control {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.625rem 0.875rem !important;
    min-height: 42px !important;
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    font-size: var(--brand-fs-body) !important;
}

/* The focus ring was the one place this file wrote the purple as a LITERAL
   rather than reading its own property, so remapping the property could not
   reach it - `page-chrome` had to override this exact rule on a copy.
   `color-mix` keeps the same 12% wash in whichever colour is in force. */
.form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 12%, transparent) !important;
    outline: none !important;
}

.form-label {
    font-weight: 600 !important;
    font-size: var(--brand-fs-table) !important;
    color: var(--text-primary) !important;
    margin-bottom: 0.375rem !important;
}

/* Image Improvements */
.tour-image, .package-image, .hotel-hero-image {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    transition: transform 0.3s ease !important;
}

.tour-card:hover .tour-image,
.package-card:hover .package-image,
.hotel-detail-card:hover .hotel-hero-image {
    transform: scale(1.03) !important;
}

/* Text Improvements */
.tour-title, .package-title {
    color: var(--text-primary) !important;
    font-size: var(--brand-fs-card) !important;
    font-weight: 600 !important;
    letter-spacing: var(--brand-track-title);
    margin-bottom: 0.5rem !important;
}

/* Background Improvements */
.public-flight-search {
    background: var(--bg-tertiary) !important;
    min-height: 100vh !important;
}

/* Search Container Improvements - a hero panel, so 16px. */
.flight-search-container {
    background: var(--bg-primary) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-xl) !important;
    border: 1px solid var(--border-color) !important;
}

/* Header Improvements */
.search-header {
    color: var(--text-primary) !important;
}

.search-title {
    color: var(--text-primary) !important;
    font-size: var(--brand-fs-title) !important;
    font-weight: 700 !important;
    letter-spacing: var(--brand-track-title);
}

.search-subtitle {
    color: var(--text-secondary) !important;
    font-size: var(--brand-fs-body) !important;
}

/* Back Button Improvements */
.back-btn {
    background: var(--bg-primary) !important;
    color: var(--primary-ink) !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.625rem 1.25rem !important;
    font-weight: 600 !important;
    font-size: var(--brand-fs-body) !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    box-shadow: var(--shadow-sm) !important;
}

.back-btn:hover {
    background: var(--primary-color) !important;
    color: var(--brand-on-primary) !important;
}

/* Loading States - a neutral shimmer, so it follows the surface tokens
   rather than staying a light-grey bar on a dark card. */
.loading-shimmer {
    background: linear-gradient(90deg,
        var(--bg-secondary) 25%,
        var(--border-color) 50%,
        var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Responsive Improvements */
@media (max-width: 768px) {
    .tour-card, .package-card, .hotel-detail-card, .tour-detail-card {
        margin-bottom: 1rem !important;
    }

    .flight-search-container {
        margin: 1rem !important;
        padding: 1.5rem !important;
    }
}

/* Animation Improvements */
.fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

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

/* Focus States */
*:focus {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
}

/* Selection */
::selection {
    background: color-mix(in srgb, var(--primary-color) 20%, transparent) !important;
    color: var(--text-primary) !important;
}