/* ---------------------------------------------------------------------------
   Shared across every sample: a reset, the sample banner, and the structure of
   the booking widget. Deliberately carries NO palette and NO typeface.

   The four samples are four structures, not four palettes. If this file starts
   accumulating colours they will leak between designs and the samples will
   converge, which defeats the point of having four. Everything visual here is
   expressed as a custom property that each sample sets for itself.
--------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--focus, currentColor);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- the sample banner -----------------------------------------------------
   Non-dismissible, and first in the document so it is first for a screen
   reader too. These pages carry invented properties, invented reviews and
   invented rates; anyone who lands on one, forwarded or otherwise, has to be
   told that before they read anything else.
--------------------------------------------------------------------------- */
.sample-banner {
  position: relative; z-index: 90;
  background: var(--banner-bg, #7a3b2e);
  color: var(--banner-fg, #fff3ec);
  font-size: .82rem; line-height: 1.5;
  padding: 10px 0;
}
.sample-banner .wrap {
  display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: baseline;
}
.sample-banner b { font-weight: 600; }
.sample-banner span { color: var(--banner-dim, rgba(255,243,236,.75)); }
.sample-banner a { color: inherit; }

/* ---- booking widget --------------------------------------------------------
   Structure only. Every sample themes it through the custom properties below.
   Mobile is 62% of hospitality traffic and converts 1.8 to 2.3 times worse than
   desktop, so this is laid out single-column first and widened afterwards.
--------------------------------------------------------------------------- */
.bk {
  --bk-bg: rgba(0,0,0,.6);
  --bk-fg: #fff;
  --bk-line: rgba(255,255,255,.28);
  --bk-accent: #c98457;
  --bk-accent-fg: #1a1206;
  --bk-radius: 2px;

  display: grid; gap: 10px;
  background: var(--bk-bg); color: var(--bk-fg);
  border: 1px solid var(--bk-line); border-radius: var(--bk-radius);
  padding: 14px;
}
@media (min-width: 720px) {
  .bk { grid-template-columns: repeat(2, minmax(0,1fr)) auto; align-items: end; gap: 12px; padding: 16px; }
  .bk .bk-submit { grid-column: 3; }
}
@media (min-width: 980px) {
  .bk { grid-template-columns: repeat(3, minmax(0,1fr)) auto; }
  .bk .bk-submit { grid-column: 4; }
}

.bk-field { display: grid; gap: 5px; min-width: 0; }
.bk-field label {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bk-fg); opacity: .72;
}
.bk-field input, .bk-field select {
  width: 100%; min-height: 46px; padding: 0 12px;
  background: transparent; color: var(--bk-fg);
  border: 1px solid var(--bk-line); border-radius: var(--bk-radius);
}
/* Safari renders date inputs at the UA's own size and ignores width unless told. */
.bk-field input[type="date"] { -webkit-appearance: none; appearance: none; }

.bk-submit {
  min-height: 46px; padding: 0 22px; cursor: pointer;
  background: var(--bk-accent); color: var(--bk-accent-fg);
  border: 1px solid var(--bk-accent); border-radius: var(--bk-radius);
  font-weight: 600; letter-spacing: .02em;
}
.bk-submit:hover { filter: brightness(1.08); }

.bk-note { font-size: .76rem; opacity: .7; margin: 0; }
@media (min-width: 720px) { .bk-note { grid-column: 1 / -1; } }

/* ---- result panel ---- */
.bk-result {
  --bk-r-bg: #14161f;
  --bk-r-fg: #eee;
  --bk-r-line: rgba(255,255,255,.16);
  background: var(--bk-r-bg); color: var(--bk-r-fg);
  border: 1px solid var(--bk-r-line); border-radius: var(--bk-radius);
  padding: clamp(16px, 3vw, 26px);
}
.bk-result h3 { margin: 0 0 2px; font-size: 1.15rem; font-weight: 500; }
.bk-result .bk-sub {
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  opacity: .6; margin: 0 0 16px;
}
.bk-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--bk-r-line); font-size: .94rem;
}
.bk-row dt { opacity: .68; }
.bk-row dd { margin: 0; text-align: right; }
.bk-row-total { font-weight: 600; font-size: 1.05rem; }
.bk-result dl { margin: 0; }

.bk-incl {
  margin: 16px 0 0; padding: 12px 14px;
  border: 1px solid var(--bk-accent); border-radius: var(--bk-radius);
  font-size: .88rem; line-height: 1.5;
}
.bk-incl b { display: block; margin-bottom: 4px; }

.bk-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.bk-wa {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 20px; border-radius: var(--bk-radius);
  background: var(--bk-accent); color: var(--bk-accent-fg);
  border: 1px solid var(--bk-accent);
  text-decoration: none; font-weight: 600;
}
.bk-disclaimer { font-size: .78rem; opacity: .62; margin: 14px 0 0; line-height: 1.5; }