/* ==========================================================================
   HOTEL BUHARA — BRIDGE STYLESHEET
   Brings the booking flow (booking, checkout, payment, guest portal, group
   booking, modify booking) onto the 2026 "Ottoman Editorial" palette.

   Those pages were built on their own crimson / navy / gold theme driven by
   CSS variables. Rather than rewrite markup that handles real reservations
   and payments, this file re-points those variables at the new palette and
   swaps the typefaces. No HTML and no JavaScript changes, so the booking
   logic is untouched.

   Load it AFTER the page's own <style> block.
   ========================================================================== */

:root {
  /* --- new palette, same names the booking pages already use --- */
  --cr:  #8A6420;   /* was crimson  -> aged brass, the primary action colour */
  --go:  #CDA55C;   /* was gold     -> lighter brass for accents on dark */
  --iv:  #F5F0E7;   /* ivory        -> warm paper */
  --iv2: #EBE4D7;   /* ivory 2      -> paper, one step down */
  --wh:  #FBF8F3;   /* white        -> the lightest paper */
  --nv:  #0C0A09;   /* navy         -> warm ink */
  --obs: #0C0A09;   /* obsidian     -> warm ink */
  --st:  #57493C;   /* stone        -> muted ink, passes 4.5:1 on paper */

  /* --- typefaces: match the rest of the site --- */
  --sf: 'Playfair Display', Georgia, serif;
  --dp: 'Playfair Display', Georgia, serif;
  --bd: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Brass tints reused below */
  --bridge-rule: rgba(12, 10, 9, 0.14);
  --bridge-lift:
    0 2px 4px rgba(36, 29, 24, 0.06),
    0 8px 18px rgba(36, 29, 24, 0.08);
}

/* The body background was a hard-coded cream gradient. */
body {
  background: linear-gradient(180deg, #EBE4D7 0%, #F5F0E7 30%, #FBF8F3 100%) !important;
  font-family: var(--bd);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Inter is a touch larger on the page than EB Garamond at the same size. */
body, button, input, select, textarea { font-size: 1rem; }

h1, h2, h3, h4 {
  font-family: var(--dp);
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* Paper grain, so the booking pages feel like the rest of the site. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* Focus rings: the booking flow is the one place a keyboard user must never
   get lost, and several of these pages suppressed them. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cr) !important;
  outline-offset: 3px !important;
}

/* Form fields: warmer borders, a brass focus ring, and a comfortable height. */
input, select, textarea {
  border-radius: 4px;
  border-color: var(--bridge-rule);
  background: var(--wh);
  color: var(--obs);
}

input:not([type='checkbox']):not([type='radio']),
select {
  min-height: 3rem;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--cr);
}

/* Buttons keep their own layout; only the finish changes. */
button, .btn, [class*='btn'] {
  border-radius: 4px;
  letter-spacing: 0.08em;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

button:hover, .btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--bridge-lift);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  button:hover, .btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Fixes for problems that already existed in the booking flow's own CSS.
   -------------------------------------------------------------------------- */

/* Its nav shipped at 8.5px with 11px-tall tap targets — too small to read and
   too small to hit. */
nav .links a {
  font-size: 0.72rem !important;
  letter-spacing: 0.16em;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

nav .logo {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
}

nav .logo span { font-size: 0.7rem !important; }

/* The hero carried a hard-coded navy-and-gold gradient from the old theme. */
.hero {
  background:
    radial-gradient(circle at top right, rgba(205, 165, 92, 0.22), transparent 35%),
    linear-gradient(135deg, #17130F 0%, #241D18 52%, #3A2F26 100%) !important;
}

/* Several labels in the stay-summary panel were set at 7px. */
.summary strong,
.sum strong,
aside strong { font-size: 0.7rem !important; letter-spacing: 0.14em; }

/* Minimum readable type.
   The booking flow set several labels between 6.7px and 8.8px, which is
   below anything a guest can comfortably read — especially the field labels
   on a form that takes their name, dates and card details. These are the
   classes involved; each is raised to at least 11px while keeping the
   tracked, uppercase look they were going for. */
.fact,
.feat,
.status,
.eyebrow,
.ey,
.cta,
label,
.btn p,
form span,
aside span {
  font-size: 0.72rem !important;   /* ~11.5px */
  letter-spacing: 0.12em;
  line-height: 1.5;
}

/* Field labels carry the most weight: give them a little more. */
form label {
  font-size: 0.76rem !important;
  color: var(--obs);
}