/* ==========================================================================
   Kala Travel Agency — brand overrides
   MUST load LAST (after vendors.css and main.css) so these re-points win the
   cascade over the base template's own :root. Depends on kala-tokens.css
   for the --kala-* values referenced below.

   Strategy: the template routes its entire brand surface through a handful of
   CSS variables. Re-pointing them here re-skins the whole 12k-line stylesheet
   without a per-selector sweep (design system doc §7 step 5).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Re-point template levers onto Kala tokens
   -------------------------------------------------------------------------- */
:root {
  /* Type — Outfit everywhere (headings inherit --font-primary in this template).
     Instrument Serif is an opt-in accent via .kala-display-serif / .kala-price,
     never a default heading face (§2.1). */
  --font-primary: var(--kala-font-sans);
  --font-heading: var(--kala-font-display);

  /* Brand blue: template indigo #3554D1 -> Kala Blue #0A6BE8.
     Highest-leverage change: re-skins every button, link, badge, active state.
     (Raw #3554D1 appears only in the variable definition, so this catches all
     usages.) */
  --color-blue-1: var(--kala-blue-600);
  --color-blue-2: var(--kala-blue-50); /* light blue tint used for subtle fills */

  /* Borders: template #DDDDDD -> token #E9EDF3 (cooler, softer). 32 sites. */
  --color-border: var(--kala-neutral-100);

  /* NOTE: --color-dark-1 (#051036) is intentionally NOT re-pointed. The template
     uses it for BOTH body/heading text and dark-band backgrounds; a single
     alias can't serve both without a contrast regression. It already reads as a
     near-black that works for both roles. To brand dark bands, use the
     .kala-band-navy utility below on the specific surface. */
}

/* --------------------------------------------------------------------------
   2. Display typography polish (§2.2 / §2.3)
   Headings render in Outfit 600 via --font-primary; large ones tighten tracking.
   -------------------------------------------------------------------------- */
.masthead h1,
.sectionTitle__title {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.masthead h1 { line-height: 1.15; letter-spacing: -0.03em; }
.sectionTitle__title { line-height: 1.2; }

/* Modest tracking on uppercase eyebrows/labels (reserve 0.14em for .kala-label) */
.uppercase { letter-spacing: 0.06em; }

/* --------------------------------------------------------------------------
   3. Utility classes for what the template lacks (§6.3)
   Every value is a token — no new hex in component files.
   -------------------------------------------------------------------------- */

/* Display type */
.kala-display        { font: var(--text-display); letter-spacing: -0.03em; }
.kala-display-serif  { font: var(--text-display-serif); }
.kala-label          { font: var(--text-label); letter-spacing: 0.14em;
                       text-transform: uppercase; color: var(--color-text-subtle); }
.kala-price          { font: var(--text-display-serif);
                       font-variant-numeric: tabular-nums; }

/* Accent — deals, urgency, savings ONLY (§1.3) */
.kala-badge-accent   { background: var(--kala-coral-500); color: #FFFFFF;
                       font-size: 12px; font-weight: 600; padding: 5px 11px;
                       border-radius: var(--kala-radius-pill); }
.kala-chip-accent    { background: var(--kala-coral-100); color: var(--kala-coral-700);
                       padding: 12px 22px; border-radius: var(--kala-radius-pill);
                       font-weight: 500; }
.text-accent         { color: var(--kala-coral-700) !important; }

/* Surfaces */
.kala-card           { background: var(--color-surface);
                       border: 1px solid var(--color-border);
                       border-radius: var(--kala-radius-lg);
                       box-shadow: var(--kala-shadow-card); }
.kala-band-navy      { background: var(--kala-blue-900); color: #FFFFFF;
                       border-radius: var(--kala-radius-lg); }
.kala-scrim          { background: linear-gradient(105deg,
                         rgb(10 46 92 / 0.88) 0%,
                         rgb(10 46 92 / 0.62) 52%,
                         rgb(10 46 92 / 0.15) 100%); }

/* Mobile display sizing (§2.2: display 40, body never < 16) */
@media (max-width: 767.98px) {
  .kala-display       { font-size: 40px; }
  .kala-display-serif,
  .kala-price         { font-size: 34px; }
}

/* --------------------------------------------------------------------------
   3b. Brand-navy dark bands (§1.3: footers, dark bands, scrims use blue-900)
   Override ONLY the dark background utilities to Kala navy. Text is unaffected
   — body/heading text is driven by --color-dark-1 (left near-black on purpose).
   -------------------------------------------------------------------------- */
.bg-dark-1 { background-color: var(--kala-blue-900) !important; }
.bg-dark-2 { background-color: var(--kala-blue-900) !important; }

/* --------------------------------------------------------------------------
   3c. Kala wordmark (interim brand lockup — replaces the base template's
   stock logo until a real Kala logo SVG is supplied, design doc §5).
   -------------------------------------------------------------------------- */
.kala-wordmark {
  font: 700 26px/1 var(--kala-font-sans);
  letter-spacing: -0.02em;
  color: var(--kala-blue-900);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
}
.kala-wordmark > span {          /* the "Travel" half */
  font-weight: 400;
  margin-left: 4px;
  color: var(--kala-blue-600);
}
.kala-wordmark.-on-dark          { color: #FFFFFF; }
.kala-wordmark.-on-dark > span   { color: #FFFFFF; opacity: 0.82; }

@media (max-width: 575.98px) {
  .kala-wordmark { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   3d. Inner-page header: solid WHITE in EVERY scroll state.
   The template's sticky-scroll JS toggles the bg utility class and, on
   scroll-back-to-top, strips it — leaving the bar transparent. Pin it white so
   the dark nav/logo stay legible over any content the fixed header floats past.
   Scoped to .kala-header-solid (inner pages) — the HOME header stays transparent
   over the hero and turns Kala Blue on scroll. Hairline separates the white
   header from white content. The top utility bar stays Kala Blue on every page.
   -------------------------------------------------------------------------- */
.header.js-header.kala-header-solid,
.header.js-header.kala-header-solid.bg-white {
  background-color: #FFFFFF !important;
  box-shadow: 0 1px 0 var(--color-border);
}
.header-topbar { background-color: var(--kala-blue-600) !important; }

/* --------------------------------------------------------------------------
   3e. Logo on dark surfaces.
   The full-colour primary logo (blue "Kala") is illegible on the blue header
   and low-contrast on navy. Render it as a clean white version of the same
   lockup on dark surfaces (header, footer). It stays full-colour on white
   surfaces (About badge, invoice), which carry no class.
   -------------------------------------------------------------------------- */
.kala-logo-on-dark { filter: brightness(0) invert(1); }

/* --------------------------------------------------------------------------
   4. Focus ring (§4) — visible keyboard focus, brand blue
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--kala-radius-sm);
}

/* --------------------------------------------------------------------------
   5. Checkout / booking page (booking::checkout)
   Image-rich, sticky order summary + carded form. Utility classes only lean on
   tokens; no raw hex. Sticky is desktop-only (mobile stacks the summary below).
   -------------------------------------------------------------------------- */

/* 5a. Step progress rail — Cart → Details → Confirmation.
   Single centred line: fixed-width connectors (no flex-grow, which used to
   expand and wrap "Confirmation" onto a second row). Connectors shrink on
   narrow screens so all three steps stay on one line. */
.kala-steps            { display: flex; align-items: center; justify-content: center;
                         gap: var(--kala-space-2); flex-wrap: nowrap; }
.kala-step             { display: inline-flex; align-items: center; gap: var(--kala-space-2);
                         font: var(--text-small); color: var(--color-text-subtle);
                         white-space: nowrap; }
.kala-step__dot        { display: inline-flex; align-items: center; justify-content: center;
                         width: 26px; height: 26px; flex: none; border-radius: var(--kala-radius-pill);
                         background: var(--color-surface); color: var(--color-text-subtle);
                         border: 1px solid var(--color-border); font-size: 12px; font-weight: 600; }
.kala-step.-done .kala-step__dot   { background: var(--color-action); color: var(--color-text-inverse);
                                     border-color: var(--color-action); }
.kala-step.-active .kala-step__dot { background: var(--color-action-subtle); color: var(--color-action);
                                     border-color: var(--color-action); }
.kala-step.-active     { color: var(--color-text); font-weight: 500; }
.kala-step.-done       { color: var(--color-text-muted); }
.kala-step__line       { flex: none; width: 44px; height: 2px; border-radius: 2px;
                         background: var(--color-border); }
.kala-step__line.-done { background: var(--color-action); }
@media (max-width: 575.98px) {
  .kala-steps          { gap: 6px; }
  .kala-step__line     { width: 18px; }
}

/* 5b. Carded form sections — flat bordered, square corners (no shadow, no radius). */
.kala-checkout-card    { background: var(--color-surface);
                         border: 1px solid var(--color-border);
                         border-radius: 0;
                         padding: var(--kala-space-8); }
.kala-checkout-card + .kala-checkout-card { margin-top: var(--kala-space-6); }
.kala-card-head        { display: flex; align-items: center; gap: var(--kala-space-3);
                         margin-bottom: var(--kala-space-6); }
.kala-card-head__icon  { display: inline-flex; align-items: center; justify-content: center;
                         width: 40px; height: 40px; flex: none;
                         border-radius: var(--kala-radius-md);
                         background: var(--color-action-subtle); color: var(--color-action);
                         font-size: 16px; }

/* 5c. Payment option cards — selectable rows with a custom radio + brand logos */
.kala-pay-options      { display: flex; flex-direction: column; gap: var(--kala-space-3); }
.kala-pay-option       { position: relative; display: flex; align-items: center;
                         gap: var(--kala-space-4); flex-wrap: wrap;
                         margin: 0; padding: 16px 18px; cursor: pointer;
                         background: var(--color-surface);
                         transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.kala-pay-option:hover { border-color: var(--color-border-strong); }
.kala-pay-option:has(input:checked) {
                         border-color: var(--color-action);
                         background: var(--color-action-subtle);
                         box-shadow: inset 0 0 0 1px var(--color-action); }

/* Visually-hidden native input; the .kala-pay-radio is the visible control. */
.kala-pay-option__input { position: absolute; opacity: 0; width: 0; height: 0; }
.kala-pay-radio        { flex: none; width: 20px; height: 20px; border-radius: 50%;
                         border: 2px solid var(--color-border-strong); background: var(--color-surface);
                         position: relative; transition: border-color .15s ease, box-shadow .15s ease; }
.kala-pay-option:has(input:checked) .kala-pay-radio { border-color: var(--color-action); }
.kala-pay-option:has(input:checked) .kala-pay-radio::after {
                         content: ''; position: absolute; inset: 3px; border-radius: 50%;
                         background: var(--color-action); }
.kala-pay-option__input:focus-visible + .kala-pay-radio {
                         border-color: var(--color-action);
                         box-shadow: 0 0 0 3px var(--color-action-subtle); }

.kala-pay-option__body  { flex: 1 1 180px; min-width: 0; }
.kala-pay-option__title { display: block; font-weight: 600; line-height: 1.3; }
.kala-pay-option__desc  { display: block; margin-top: 2px; font-size: 13px; color: var(--color-text-muted, #6b7280); }

/* Brand marks — uniform white chips so every logo reads cleanly, even on the
   tinted "selected" background. */
.kala-pay-logos        { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.kala-pay-logo         { display: inline-flex; align-items: center; justify-content: center;
                         height: 30px; padding: 0 8px; background: #fff;
                         border: 1px solid var(--color-border); border-radius: 6px; }
.kala-pay-logo svg     { display: block; }
.kala-pay-glyph        { display: inline-flex; color: var(--color-text-muted, #9aa0a6); }

/* Reassurance line under the options. */
.kala-pay-trust        { display: flex; align-items: center; gap: 8px;
                         margin: var(--kala-space-4) 0 0; }
.kala-pay-trust svg    { flex: none; color: var(--color-action); }

@media (max-width: 575px) {
  .kala-pay-logos      { flex-basis: 100%; margin-left: 32px; }  /* wrap under the text, aligned past the radio */
}

/* 5d. Sticky, image-rich order summary — flat bordered, square corners */
.kala-summary          { background: var(--color-surface);
                         border: 1px solid var(--color-border);
                         border-radius: 0;
                         overflow: hidden; }
.kala-summary__head    { padding: var(--kala-space-6) var(--kala-space-6) var(--kala-space-4);
                         border-bottom: 1px solid var(--color-border); }
.kala-summary__body    { padding: var(--kala-space-6); }
@media (min-width: 992px) {
  .kala-summary-sticky { position: sticky; top: 110px; }
}

.kala-line             { display: flex; gap: var(--kala-space-4); padding: var(--kala-space-4) 0; }
.kala-line + .kala-line { border-top: 1px solid var(--color-border); }
.kala-line__thumb      { flex: none; width: 76px; height: 76px; border-radius: var(--kala-radius-md);
                         overflow: hidden; background: var(--color-surface-sunk); }
.kala-line__thumb img  { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No-photo tile: a clean branded square, not a cropped "coming soon" graphic. */
.kala-line__thumb.-empty { display: flex; align-items: center; justify-content: center;
                         background: linear-gradient(135deg, var(--kala-blue-50), var(--color-surface-sunk)); }
.kala-line__thumb.-empty i { font-size: 26px; color: var(--color-action); opacity: 0.65; }
.kala-line__body       { flex: 1 1 auto; min-width: 0; }
.kala-line__title      { font: var(--text-body); font-weight: 600; color: var(--color-text);
                         line-height: 1.3; }

.kala-type-chip        { display: inline-block; margin-top: 4px;
                         font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
                         text-transform: uppercase;
                         color: var(--color-action); background: var(--color-action-subtle);
                         padding: 3px 9px; border-radius: var(--kala-radius-pill); }

.kala-meta             { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: var(--kala-space-2); }
.kala-meta > span      { display: inline-flex; align-items: center; gap: 5px;
                         font: var(--text-small); color: var(--color-text-muted); }
.kala-meta i           { font-size: 12px; color: var(--color-text-subtle); }

/* 5e. Totals + trust list */
.kala-total-row        { display: flex; align-items: center; justify-content: space-between; }
.kala-grand            { font-size: 24px; font-weight: 700; color: var(--color-text);
                         font-variant-numeric: tabular-nums; }
.kala-trust            { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kala-trust li         { display: flex; align-items: flex-start; gap: 10px;
                         font: var(--text-small); color: var(--color-text-muted); }
.kala-trust i          { display: inline-flex; align-items: center; justify-content: center;
                         width: 20px; height: 20px; flex: none; margin-top: 1px;
                         border-radius: var(--kala-radius-pill);
                         background: var(--color-action-subtle); color: var(--color-action);
                         font-size: 9px; }

/* 5f. CTA total tag inside the confirm button (JS only edits the leading text node) */
.kala-cta-total        { opacity: 0.85; font-weight: 500; margin-left: 6px; }

/* 5g. Cart line — larger preview + a price/remove column.
   Reuses .kala-line, .kala-line__thumb, .kala-type-chip, .kala-meta. */
.kala-cart-line              { align-items: flex-start; padding: var(--kala-space-6) 0; }
.kala-cart-line .kala-line__thumb { width: 112px; height: 90px; }
.kala-cart-line__end        { flex: none; align-self: stretch; min-width: 96px;
                              display: flex; flex-direction: column; align-items: flex-end;
                              justify-content: space-between; gap: var(--kala-space-3);
                              text-align: right; }
.kala-cart-price            { font-weight: 700; font-size: 16px; color: var(--color-text);
                              font-variant-numeric: tabular-nums; }
.kala-cart-price small      { display: block; font-weight: 400; font-size: 12px;
                              color: var(--color-text-subtle); }
.kala-cart-remove           { display: inline-flex; align-items: center; gap: 5px;
                              font: var(--text-small); color: var(--color-text-subtle);
                              background: none; border: 0; padding: 0; cursor: pointer;
                              transition: color .15s ease; }
.kala-cart-remove:hover     { color: var(--kala-error); }
.kala-cart-remove i         { font-size: 10px; }
@media (max-width: 575.98px) {
  .kala-cart-line .kala-line__thumb { width: 84px; height: 72px; }
  .kala-cart-line__end      { min-width: 72px; }
}

/* 5h. Empty-cart state — branded, centred */
.kala-empty                 { text-align: center; padding: var(--kala-space-16) var(--kala-space-6); }
.kala-empty__icon           { display: inline-flex; align-items: center; justify-content: center;
                              width: 84px; height: 84px; margin: 0 auto var(--kala-space-6);
                              border-radius: var(--kala-radius-pill);
                              background: linear-gradient(135deg, var(--kala-blue-50), var(--color-surface-sunk));
                              color: var(--color-action); font-size: 34px; }

/* 5i. Order confirmation — success hero + reference chip + detail rows.
   Icon colours come from template utilities (.bg-green-1/.bg-red-3 …); only
   layout/shape lives here. */
.kala-confirm-hero          { text-align: center; padding: var(--kala-space-6) 0 var(--kala-space-8); }
.kala-confirm-hero__icon    { display: inline-flex; align-items: center; justify-content: center;
                              width: 76px; height: 76px; margin: 0 auto var(--kala-space-4);
                              border-radius: var(--kala-radius-pill); font-size: 30px; }
.kala-confirm-ref           { display: inline-flex; align-items: center; gap: 8px;
                              margin-top: var(--kala-space-4); padding: 8px 16px;
                              border: 1px solid var(--color-border);
                              font-weight: 600; letter-spacing: 0.02em;
                              font-variant-numeric: tabular-nums; color: var(--color-text); }
.kala-confirm-ref i         { color: var(--color-text-subtle); font-size: 13px; }

/* Definition-list detail rows (guest details, payment breakdown) */
.kala-detail                { margin: 0; }
.kala-detail__row           { display: flex; justify-content: space-between; gap: var(--kala-space-4);
                              padding: 10px 0; }
.kala-detail__row + .kala-detail__row { border-top: 1px solid var(--color-border); }
.kala-detail__row dt        { margin: 0; font: var(--text-small); color: var(--color-text-subtle); }
.kala-detail__row dd        { margin: 0; font: var(--text-small); font-weight: 500;
                              color: var(--color-text); text-align: right; word-break: break-word; }

/* 5j. Order-history — filter tabs + order rows (reuse .kala-line divider + thumb) */
.kala-tabs                  { display: flex; flex-wrap: wrap; gap: 8px; }
.kala-tab                   { display: inline-flex; align-items: center; height: 38px; padding: 0 18px;
                              border-radius: var(--kala-radius-pill); border: 1px solid var(--color-border);
                              background: var(--color-surface); color: var(--color-text-muted);
                              font: var(--text-small); font-weight: 500; transition: all .15s ease; }
.kala-tab:hover             { border-color: var(--color-border-strong); color: var(--color-text); }
.kala-tab.-active           { background: var(--color-action); border-color: var(--color-action);
                              color: var(--color-text-inverse); }

.kala-order-row             { align-items: center; }
.kala-order-row .kala-line__thumb { width: 64px; height: 64px; }
.kala-order-row__ref        { font-weight: 600; color: var(--color-text); }
.kala-order-row__end        { flex: none; display: flex; flex-direction: column; align-items: flex-end;
                              gap: 2px; text-align: right; }
.kala-order-row__total      { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); }
.kala-order-row__actions    { display: flex; gap: 10px; margin-top: 6px; }
@media (max-width: 575.98px) {
  .kala-order-row           { flex-wrap: wrap; }
  .kala-order-row__end      { width: 100%; align-items: flex-start; margin-top: 8px; text-align: left; }
  .kala-order-row__actions  { margin-top: 8px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   6. Home "Travel Consultation" CTA — gradient band with soft light blooms,
      a compass watermark and an interactive button.
   ───────────────────────────────────────────────────────────────────────── */
.kala-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 60px 64px;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(115deg, #0A6BE8 0%, #0B54B8 52%, #0A3F92 100%)
}
/* soft light blooms in opposite corners */
.kala-cta::before,
.kala-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.kala-cta::before {
  width: 440px; height: 440px; top: -170px; right: -110px;
  background: radial-gradient(circle at center, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
}
.kala-cta::after {
  width: 380px; height: 380px; bottom: -200px; left: -90px;
  background: radial-gradient(circle at center, rgba(255,255,255,.12), rgba(255,255,255,0) 70%);
}
/* large compass watermark bleeding off the right */
.kala-cta__art {
  position: absolute; z-index: -1; right: 5%; top: 50%;
  transform: translateY(-50%);
  color: #fff; opacity: .10; pointer-events: none;
}
.kala-cta__art svg { display: block; width: 230px; height: 230px; }
@media (max-width: 1199px) { .kala-cta__art svg { width: 180px; height: 180px; } }
@media (max-width: 991px)  { .kala-cta__art { display: none; } }

.kala-cta__eyebrow {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.16);
  padding: 7px 15px; border-radius: 100px; margin-bottom: 18px;
}
.kala-cta__title { color: #fff; font-weight: 600; line-height: 1.14; }
.kala-cta__text  { color: rgba(255,255,255,.88); max-width: 620px; }

.kala-cta__btn {
  display: inline-flex; align-items: center; white-space: nowrap;
  height: 62px; padding: 0 36px; border-radius: 100px;
  background: #fff; color: var(--color-action, #0A6BE8); font-weight: 600;
  box-shadow: 0 16px 34px -14px rgba(4, 24, 62, .45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.kala-cta__btn:hover {
  color: var(--color-action, #0A6BE8);
  transform: translateY(-2px);
  box-shadow: 0 24px 44px -16px rgba(4, 24, 62, .55);
}
.kala-cta__btn i { transition: transform .18s ease; }
.kala-cta__btn:hover i { transform: translate(3px, -3px); }

@media (max-width: 767px) {
  .kala-cta { padding: 38px 26px; border-radius: 14px; }
  .kala-cta__btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .kala-cta__btn, .kala-cta__btn i { transition: none; }
  .kala-cta__btn:hover { transform: none; }
  .kala-cta__btn:hover i { transform: none; }
}