/* =====================================================
   reservation.css — Olde Hansa Reservation Page
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=Ponomar&family=Outfit:wght@500;600;700&family=Inter:wght@400;600;700&display=swap');

/* ---- Olde Hansa house fonts (local) ----
   Both 'OldeHansa Antique' and 'OldeHansa Headline' now map to Antique REGULAR (owner's request,
   2026-07-09: the NOBLE variant is too decorative — use Regular everywhere, incl. capitals).
   'OldeHansa Capitals' loaded for the confirmation glyph. */
@font-face{font-family:'OldeHansa Antique';font-style:normal;font-display:swap;
  src:url('/fonts/OldeHansaAntiqueRegular.woff2') format('woff2'),url('/fonts/OldeHansaAntiqueRegular.woff') format('woff'),url('/fonts/OldeHansaAntiqueRegular.ttf') format('truetype');}
@font-face{font-family:'OldeHansa Headline';font-style:normal;font-display:swap;
  src:url('/fonts/OldeHansaAntiqueRegular.woff2') format('woff2'),url('/fonts/OldeHansaAntiqueRegular.woff') format('woff'),url('/fonts/OldeHansaAntiqueRegular.ttf') format('truetype');}
@font-face{font-family:'OldeHansa Script';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/OldeHansaScriptRegular.woff2') format('woff2'),url('/fonts/OldeHansaScriptRegular.ttf') format('truetype');}
@font-face{font-family:'OldeHansa Capitals';font-style:normal;font-display:swap;
  src:url('/fonts/OldeHansaCapitalsRegular.woff2') format('woff2'),url('/fonts/OldeHansaCapitalsRegular.woff') format('woff'),url('/fonts/OldeHansaCapitalsRegular.ttf') format('truetype');}
/* In Russian we use Ponomar for Cyrillic — but any Latin characters mixed in (brand
   names like "Olde Hansa", "Stripe", "Musicus") should render in the house Antique
   Regular. Re-declare the 'Ponomar' family for the Latin/punctuation ranges only,
   pointing at AntiqueRegular; the Google-loaded Ponomar still covers Cyrillic. */
@font-face{font-family:'Ponomar';font-display:swap;
  src:url('/fonts/OldeHansaAntiqueRegular.woff2') format('woff2'),url('/fonts/OldeHansaAntiqueRegular.woff') format('woff');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+20AC,U+2190-21FF;}

/* ---- VARIABLES ---- */
:root {
  --parchment: #faf4e1;
  --parchment-dark: #f0e8cc;
  --red: #8B241D;
  --red-dark: #6a1b16;
  --red-light: rgba(139,36,29,.09);
  --gold: #c8a84b;
  --gold-light: #e8d49a;
  --gold-faint: #f5ecd4;
  --form-bg: #ffffff;
  --text: #1e0f00;
  --muted: #7a6856;
  --border: #d6cdb8;
  --border-cool: #dde1e8;
  --shadow: 0 8px 40px rgba(30,15,0,.10);
  --shadow-sm: 0 2px 12px rgba(30,15,0,.06);
  --header-h: 68px;
  --radius-card: 20px;
  --radius-input: 8px;
  --radius-btn: 8px;
}

/* ---- RESET & BASE ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; max-width: 100%; }
body {
  font-family: 'OldeHansa Antique', 'UnifrakturCook', cursive;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  /* serv2 has an ornamental column on the left AND right. Anchor the image to the
     left edge and scale it up (118% wide, aspect kept) so the LEFT column shows and
     the RIGHT column is pushed off the right side of the screen — never seen.
     Parchment fallback colour blends with any uncovered area below the image. */
  background: #efe6c8 url('/backgrounds/serv2.webp') left top / 118% auto repeat-y fixed;
  min-height: 100vh;
  overflow-x: clip;   /* never let anything push the page wider than the window (clip ≠ scroll container, keeps sticky header) */
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--red); }
p { text-wrap: pretty; }

/* ---- HEADER ---- */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 200;
  flex-shrink: 0;
}
.site-header::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 15%, var(--red) 50%, var(--gold) 85%, transparent 100%);
}
.header-inner {
  max-width: none;
  margin: 0;
  padding: 0 24px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;   /* logo+portal (left) ··· language + hamburger (right) */
  gap: 12px;
}
.header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.header-center { display: flex; align-items: center; gap: 14px; }
/* Hamburger menu (right) — always visible, opens the drawer */
.hamburger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 8px;
  flex-shrink: 0;
}
.hamburger span { display: block; height: 2.5px; width: 100%; background: var(--text); border-radius: 2px; }
.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}
.logo-img { height: 46px; width: auto; display: block; }
.logo-fallback {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  font-size: 28px; color: var(--red);
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}
.nav-link {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s;
}
.nav-link:hover { color: var(--red); }
.lang-switcher {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  justify-self: end;
}
.lang-btn {
  padding: 5px 10px;
  font: 600 11px/1 'OldeHansa Antique', sans-serif;
  letter-spacing: .06em;
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  color: var(--muted);
  transition: background .15s, color .15s;
}
.lang-btn:last-child { border-right: none; }
.lang-btn:hover { background: var(--parchment); color: var(--text); }
.lang-btn.active { background: var(--red); color: #fff; }

/* ===== Language dropdown (small flag select) ===== */
.lang-dd { position: relative; flex-shrink: 0; }
.lang-dd-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 8px; cursor: pointer; color: var(--text);
  font: 600 12px/1 'OldeHansa Antique', sans-serif; letter-spacing: .04em;
  transition: border-color .15s;
}
.lang-dd-toggle:hover { border-color: var(--gold); }
.lang-flag {
  width: 21px; height: 14px; border-radius: 2px; flex-shrink: 0;
  background-size: cover; background-position: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,.10);
}
.lang-caret { font-size: 9px; color: var(--muted); margin-left: 1px; }
.lang-dd-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 158px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 5px; margin: 0; list-style: none;
  display: none; z-index: 400;
}
.lang-dd.open .lang-dd-menu { display: block; }
.lang-dd-menu li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 7px; cursor: pointer;
  font: 400 14px/1.2 'OldeHansa Antique', sans-serif; color: var(--text);
}
.lang-dd-menu li:hover { background: var(--parchment); }
.lang-dd-menu li.active { background: var(--red-light); color: var(--red); font-weight: 600; }
/* The Russian option carries Cyrillic ("Русский") — render it in Ponomar at all times,
   even when the current page language is ET/EN/FI, so it reads as intended. */
.lang-dd-menu li[data-lang="ru"] { font-family: 'Ponomar', serif !important; }
.flag-et { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Crect width='9' height='6' fill='%23fff'/%3E%3Crect width='9' height='4' fill='%23000'/%3E%3Crect width='9' height='2' fill='%230072CE'/%3E%3C/svg%3E"); }
.flag-fi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'%3E%3Crect width='18' height='11' fill='%23fff'/%3E%3Crect x='5' width='3' height='11' fill='%23003580'/%3E%3Crect y='4' width='18' height='3' fill='%23003580'/%3E%3C/svg%3E"); }
.flag-ru { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Crect width='9' height='6' fill='%23D52B1E'/%3E%3Crect width='9' height='4' fill='%230039A6'/%3E%3Crect width='9' height='2' fill='%23fff'/%3E%3C/svg%3E"); }
.flag-en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='s'%3E%3Crect width='60' height='30'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23s)'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0 L30,30 M0,15 L60,15' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 L30,30 M0,15 L60,15' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E"); }

.header-portal-label {
  font: 400 18px/1 'OldeHansa Antique', sans-serif;
  letter-spacing: .03em;
  color: var(--muted);
  border-left: 1px solid var(--border);
  padding-left: 16px;
  white-space: nowrap;
}
.partner-link {
  display: block;
  text-align: center;
  margin-top: 16px;
  font: 400 12px/1.4 'OldeHansa Antique', sans-serif;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.partner-link:hover { color: var(--red); }

/* Two links under the form: log in as a partner / manage an existing reservation */
.form-links { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 18px; }
.form-link {
  font: 400 14px/1.4 'OldeHansa Headline', 'OldeHansa Antique', cursive;
  color: var(--muted); text-decoration: none; transition: color .15s;
}
.form-link:hover { color: var(--red); }

/* ---- MAIN: EQUAL TWO-COLUMN SPLIT ---- */
.site-main-split {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

/* ---- HERO COLUMN (left) ---- */
.hero-col {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero-text {
  padding: 32px 24px 36px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-img-wrap {
  width: auto;
  height: 340px;
  margin: 28px 36px 0 48px;   /* match .hero-text padding so left edges align */
  flex: none;
  overflow: hidden;
  background: var(--parchment-dark);
  border-radius: 16px;
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hero-rule {
  width: 72px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--red));
  border: none; flex-shrink: 0;
}
.hero-title {
  font-family: 'OldeHansa Antique', 'UnifrakturCook', cursive;
  font-size: 42px;
  line-height: 1.18;
  color: var(--red);
}
.hero-sub {
  font-size: 18px;
  line-height: 1.8;
  color: var(--muted);
  white-space: pre-line;
}

/* ---- FORM COLUMN (right) ---- */
.form-col {
  background: transparent;
  padding: 40px 56px 64px 26px;
  display: flex;
  flex-direction: column;
}

/* Story blocks in hero — text on the LEFT, picture on the RIGHT */
.story-block {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 14px;
}
.story-img {
  width: 112px;
  height: 112px;
  object-fit: contain;
  flex-shrink: 0;
}
.story-para {
  font-size: 19px;
  line-height: 1.7;
  color: var(--muted);
  white-space: normal;
}
.hero-learn-more {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
  letter-spacing: .02em;
  transition: opacity .18s;
}
.hero-learn-more:hover { opacity: .65; }

/* Russian: use Ponomar (Google Fonts) */
.lang-ru .hero-title,
.lang-ru .hero-lorem,
.lang-ru .story-para,
.lang-ru .hero-learn-more,
.lang-ru .step,
.lang-ru .nav-link,
.lang-ru .header-portal-label,
.lang-ru .footer-col p,
.lang-ru .footer-col a,
.lang-ru .footer-col h3,
.lang-ru .footer-brand,
.lang-ru .footer-bottom span { font-family: 'Ponomar', serif !important; }
/* In Russian the whole form (and its labels, inputs, feast cards, etc.) is Ponomar too.
   Latin runs inside it fall back to Antique Regular via the @font-face override above. */
.lang-ru,
.lang-ru .form-card, .lang-ru .form-card *,
.lang-ru label, .lang-ru input, .lang-ru select, .lang-ru textarea,
.lang-ru .section-label, .lang-ru .field-note, .lang-ru .feast-name, .lang-ru .feast-meta,
.lang-ru .step-label, .lang-ru .pay-opt-title, .lang-ru .pay-opt-sub,
.lang-ru .side-link, .lang-ru .side-btn, .lang-ru .form-link, .lang-ru .partner-link,
.lang-ru .story-head, .lang-ru .lang-dd-menu li { font-family: 'Ponomar', serif !important; }
/* Catch-all: on the Russian page EVERY Latin/English fragment must render in Antique
   Regular. The 'Ponomar' family maps Latin codepoints → AntiqueRegular (Cyrillic still
   comes from Google Ponomar), so apply it across the whole page content. */
.lang-ru .site-header, .lang-ru .site-header *,
.lang-ru .site-main-split, .lang-ru .site-main-split *,
.lang-ru .side-menu, .lang-ru .side-menu *,
.lang-ru .site-footer, .lang-ru .site-footer * { font-family: 'Ponomar', serif !important; }
/* …except the reservation-code ticket chip, which keeps its own typeface. */
.lang-ru .booking-code, .lang-ru .edit-code { font-family: 'Outfit', 'Inter', sans-serif !important; }
/* Stepper: one rounded rectangle holding three numbered rings joined by a progress line */
.steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 16px 30px 13px;
  margin-bottom: 28px;
}
.step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  text-align: center;
}
.step-ring {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 14px/1 'OldeHansa Antique', sans-serif;
  color: var(--muted);
  position: relative;
  z-index: 2;
  transition: border-color .25s, background .25s, color .25s, box-shadow .25s;
}
.step-label {
  font: 600 11px/1.2 'OldeHansa Antique', sans-serif;
  letter-spacing: .08em;
  text-transform: none;
  color: var(--muted);
  transition: color .25s;
}
/* connecting line between adjacent rings (sits behind the rings) */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;          /* ring vertical centre (ring is 32px tall) */
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
  z-index: 1;
}
/* states */
.step.active .step-ring { border-color: var(--red); color: var(--red); box-shadow: 0 0 0 4px var(--red-light); }
.step.active .step-label { color: var(--red); }
.step.done .step-ring { border-color: var(--gold); background: var(--gold); color: #fff; }
.step.done .step-label { color: var(--text); }
.step.done:not(:last-child)::after { background: var(--gold); }   /* completed segment */
.step-sep {
  flex: 1;
  text-align: center;
  color: var(--border);
  font-size: 14px;
  user-select: none;
}

/* ---- MSG ---- */
.msg {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 20px;
  background: #fff5f4;
  border-left: 3px solid var(--red);
  color: var(--red);
}
.msg.ok { background: #f0f7f4; border-color: #2e7d52; color: #2e7d52; }
.hidden { display: none !important; }

/* ---- FORM CARD ---- */
.form-card {
  background: var(--form-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 26px 28px 30px;
  border: 1px solid rgba(214,205,184,.3);
}
.form-card h2 {
  font: 700 18px/1.2 'OldeHansa Antique', sans-serif;
  letter-spacing: .01em;
  color: var(--text);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* ---- FORM SECTIONS ---- */
.form-section {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #f0ece3;
}
.form-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.section-label {
  font: 400 14px/1.2 'OldeHansa Headline', 'OldeHansa Antique', sans-serif;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--gold);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold-faint);
}

/* The whole form is in the Olde Hansa house font (overrides the per-element Lato rules)… */
.form-card, .form-card * {
  font-family: 'OldeHansa Antique', 'Lato', serif !important;
}
/* …except the reservation code, which stays monospace for clarity. */
.form-card .booking-code { font-family: 'Courier New', ui-monospace, monospace !important; }
/* …and the form's titles use the house antique face (never the all-caps face). */
.form-card h1, .form-card h2, .form-card h3 {
  font-family: 'OldeHansa Antique', 'UnifrakturCook', cursive !important;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
}
/* Reusable code / price chip — bold Outfit in a rounded coloured rectangle. */
.oh-chip {
  display: inline-block;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 12px;
  border-radius: 8px;
  line-height: 1.35;
  white-space: nowrap;
}
.oh-chip.amber { background: var(--gold-light); color: #5a4205; }   /* same yellow as the LAHTIOLEKUAJAD headline */
.oh-chip.green { background: #bfe3c2; color: #1f5a2a; }
.oh-chip.blue  { background: #bcd6f3; color: #1c3f6e; }
.oh-chip.red   { background: #f0bdb9; color: #7a1d16; }
.lang-ru .form-card h1, .lang-ru .form-card h2, .lang-ru .form-card h3 { font-family: 'Ponomar', serif !important; }

/* ---- FIELDS ---- */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.field-row.full { grid-template-columns: 1fr; }
.field-row.thirds { grid-template-columns: 1fr 1fr 1fr; }
.field-row:last-child { margin-bottom: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.email-suggest {
  font-size: 12.5px;
  color: var(--red);
  margin-top: -2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.email-suggest-actions { display: flex; gap: 8px; }
.email-suggest-actions a {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}
.email-suggest-fix { background: #eaf1fb; color: #1d4ed8; border-color: #bcd3f5; }
.email-suggest-fix:hover { background: #dbe8fa; }
.email-suggest-keep { background: #eaf6ee; color: #1f7a45; border-color: #bfe3cc; }
.email-suggest-keep:hover { background: #dcf0e2; }
label {
  font: 400 15px/1.3 'OldeHansa Headline', 'OldeHansa Antique', sans-serif;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--muted);
}
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"],
textarea, select {
  font: 400 15.5px/1.4 'OldeHansa Antique', sans-serif;
  color: var(--text);
  background: #f7f8fa;
  border: 1.5px solid var(--border-cool);
  border-radius: var(--radius-input);
  padding: 10px 13px;
  width: 100%;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
input::placeholder, textarea::placeholder { color: #b0a898; font-weight: 300; }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,168,75,.16);
  background: #fff;
}
textarea { min-height: 68px; resize: vertical; }
.check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 14px/1.4 'OldeHansa Antique', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  color: var(--text);
  padding: 10px 13px;
  background: #f7f8fa;
  border: 1.5px solid var(--border-cool);
  border-radius: var(--radius-input);
  transition: border-color .18s;
}
.check-label:hover { border-color: var(--gold); }
.check-label input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--red);
  flex-shrink: 0;
}
.field-note {
  font: 400 14px/1.55 'OldeHansa Antique', sans-serif;
  color: var(--muted);
  margin: 2px 0 6px;
  font-style: italic;
}
.field-note.warn { color: #b45309; font-style: normal; font-weight: 400; }

/* Point 5 — the feast invitation. An illuminated parchment proclamation: a wax-seal
   red left edge, a gold hairline, and one enlarged manuscript initial. The drop cap is
   the single bold note; it rides on ::first-letter so it survives the i18n text swap
   and reads in every language. */
.field-note.preorder-why {
  position: relative;
  margin: 6px 0 18px;
  padding: 15px 20px 15px 22px;
  font: 400 15.5px/1.62 'OldeHansa Antique', Georgia, serif;
  font-style: normal;
  color: #3a2410;
  background: linear-gradient(180deg, var(--parchment) 0%, var(--gold-faint) 100%);
  border: 1px solid var(--gold-light);
  border-left: 4px solid var(--red);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 2px 16px rgba(139,36,29,.08);
}
.field-note.preorder-why::first-letter {
  float: left;
  font-family: 'OldeHansa Headline', 'OldeHansa Antique', Georgia, serif;
  font-size: 46px;
  line-height: .78;
  margin: 3px 11px 0 0;
  color: var(--red);
  text-shadow: 1px 1px 0 var(--gold-light), 2px 2px 0 rgba(200,168,75,.35);
}
.lang-ru .field-note.preorder-why::first-letter { font-family: 'Ponomar', Georgia, serif; }
@media (max-width: 600px) {
  .field-note.preorder-why { font-size: 14.5px; padding: 13px 16px; }
  .field-note.preorder-why::first-letter { font-size: 40px; margin-right: 9px; }
}

/* Closed-date / closed-time warning: a striking red rounded rectangle under the date+time. */
.closed-banner {
  display: block;
  margin: 12px 0 2px;
  padding: 13px 16px;
  background: #fdecec;
  border: 2px solid #d13636;
  border-radius: 12px;
  color: #a01818;
  font: 600 15px/1.45 'OldeHansa Antique', sans-serif;
  box-shadow: 0 2px 10px rgba(209,54,54,.18);
}
.closed-banner .cb-alt { display: block; margin-top: 4px; font-weight: 400; font-size: 14px; color: #7a1414; }

/* ---- STEPPER ---- */
.stepper-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border-cool);
  border-radius: var(--radius-input);
  overflow: hidden;
  background: #f7f8fa;
  height: 42px;
  transition: border-color .18s;
}
.stepper-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,168,75,.16); }
.step-btn {
  width: 36px; height: 42px;
  flex-shrink: 0;
  background: none;
  border: none;
  font: 400 20px/1 'OldeHansa Antique', sans-serif;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
  display: flex; align-items: center; justify-content: center;
}
.step-btn:hover { background: var(--parchment); color: var(--red); }
.stepper-input {
  flex: 1 1 auto;
  min-width: 34px;
  width: 34px;
  text-align: center;
  font: 600 16px/1 'OldeHansa Antique', sans-serif !important;
  background: transparent !important;
  border: none !important;
  border-left: 1px solid var(--border-cool) !important;
  border-right: 1px solid var(--border-cool) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 2px !important;
  -moz-appearance: textfield;
}
.stepper-input::-webkit-inner-spin-button,
.stepper-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ---- NOTES TOGGLE ---- */
.notes-toggle {
  background: none;
  border: none;
  color: var(--gold);
  font: 600 14px/1.2 'OldeHansa Antique', sans-serif;
  letter-spacing: .02em;
  text-transform: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s;
  margin-bottom: 14px;
}
.notes-toggle:hover { color: var(--red); }
.notes-fields { display: flex; flex-direction: column; gap: 12px; }

/* ---- BUTTONS ---- */
.btn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  gap: 12px;
}
.btn-row.right { justify-content: flex-end; }
.btn {
  display: inline-block;
  font: 700 12px/1 'OldeHansa Antique', sans-serif;
  letter-spacing: .09em;
  text-transform: none;
  padding: 14px 30px;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); box-shadow: 0 4px 16px rgba(139,36,29,.3); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover { border-color: var(--muted); color: var(--text); }

/* ---- FEAST CARDS ---- */
.feast-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.feast-card {
  display: grid;
  grid-template-columns: 1fr 130px;
  /* KOLM RIDA: lint · sisu+pilt · kirjeldus. Lindita kaardil jääb esimene rida tühjaks ja
     `auto` kahandab ta nulli — sellepärast ei ole eraldi reeglit „kaart ilma lindita". */
  grid-template-rows: auto auto auto;
  border: 1.5px solid var(--border-cool);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
  background: #fff;
}
.feast-card:hover { border-color: var(--gold); }
/* PUNANE LINT pidusöögi kaardi PEAL (omanik, 16. ja 17.09.2026). Sama võte, mille ta ise näiteks
   tõi — armatuurlaua .ksq-stripe.dup: lint katab kasti ülaserva, tema enda servadeni.
   OMANIK, 17.09.2026: „should be on top of the feast card, not inside of it." Enne elas lint
   `.feast-body` sees ja ulatus ainult teksti veeruni — pildi kõrval seisev punane riba luges
   kaardi SISUNA, mitte kaardi märgisena. Nüüd on ta kaardi enda esimene rida ja läbib MÕLEMAD
   veerud (`1 / -1`), nii et ta katab ka pildi. Kaardi `overflow: hidden` lõikab tema ülanurgad
   kaardi raadiusega — ots otsaga kaardi peal, nagu armatuurlaual.
   SUURTÄHED JA HÕRE tähevahe: ta peab olema loetav ka 10 pikslis ja eristuma söögi nimest, mis on
   otse tema all. Hüüumärki lindil EI OLE (omanik, 17.09.2026: „! should be just deleted, it should
   be just text") — lint ise on punane, ja märk tema ees ütles sedasama teist korda. */
.feast-flag {
  grid-column: 1 / -1;
  grid-row: 1;
  padding: 5px 16px;
  background: #c0392b;
  color: #fff;
  font: 700 10px/1.45 'OldeHansa Antique', sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.feast-card.sel {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(139,36,29,.12);
}
.feast-body {
  grid-column: 1; grid-row: 2;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.feast-name {
  font: 700 15px/1.3 'OldeHansa Antique', sans-serif;
  color: var(--text);
}
.feast-meta { font: 400 14px/1.4 'OldeHansa Antique', sans-serif; color: var(--muted); }
/* Kampaania (plaan 29.09.2026 §2d): tavahind läbi kriipsutatud kampaania hinna ees, pakkumise lause
   oma kiibina, ja väike link tingimuste §6 peale. Lindi värv tuleb serverilt inline-stiilina. */
.feast-was { opacity: .7; font-weight: 400; }
.oh-chip.camp { background: var(--gold-light); color: #5a4205; }
.feast-camp-terms { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); text-decoration: underline; }
/* Alla x-i jääv seltskond: julgustus, mitte hoiatus — sama kuldne toon mis pakkumise kiibil. */
.feast-camp-small { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #5a4205; }
.ritual-badge {
  display: inline-block;
  background: var(--gold-faint);
  color: #7a5a12;
  font: 700 10px/1 'OldeHansa Antique', sans-serif;
  letter-spacing: .07em;
  text-transform: none;
  padding: 3px 7px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
}
.learn-more-btn {
  background: none; border: none;
  color: var(--gold);
  font: 700 14px/1.2 'OldeHansa Antique', sans-serif;
  letter-spacing: .02em;
  text-transform: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
  width: fit-content;
  white-space: nowrap;
  transition: color .15s;
}
.learn-more-btn:hover { color: var(--red); }
.feast-thumb {
  grid-column: 2; grid-row: 2 / 4;   /* lindi rida on 1 — pilt algab tema alt */
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.feast-thumb img {
  width: 100%;
  max-height: 120px;
  object-fit: contain;
  display: block;
}
/* Inline feast/drink details (partner page) */
.feast-desc {
  grid-column: 1; grid-row: 3;
  padding: 10px 16px 14px;
  font: 400 14.5px/1.65 'OldeHansa Antique', sans-serif;
  color: var(--muted);
  border-top: 1px solid var(--border-cool);
  background: #fbfbfd;
}
/* Feast details pop-up */
/* ERISÜNDMUSE KATKESTATUD MAKSE (omanik, 15.09.2026: „a pop-up that states in a big font").
   Tumedam kate ja jämedam kiri kui pidusöögi aknal, sest see ei ole kirjeldus, vaid vastus
   küsimusele, mida külaline just kartis: kas laud on olemas. Vastus on ei, ja seda ei tohi
   pidada lugemiseks, mis vajab pingutust. */
.spf-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 500;            /* pidusöögi akna (400) PEAL — see on veateade, tema võidab */
  padding: 24px 16px;
  overflow-y: auto;
}
.spf-overlay.open { display: flex; align-items: center; justify-content: center; }
.spf-box {
  background: #fff;
  border-top: 6px solid var(--red);
  border-radius: 14px;
  max-width: 540px;
  width: 100%;
  margin: auto;
  padding: 28px 30px 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  text-align: center;
}
.spf-title {
  font: 700 clamp(22px, 5.2vw, 30px)/1.2 'OldeHansa Antique', sans-serif;
  color: var(--red);
  margin: 0 0 14px;
}
.spf-body { font-size: 16px; line-height: 1.6; color: var(--text); margin: 0 0 18px; }
.spf-retry { font-weight: 700; font-size: 16px; color: var(--text); margin: 0 0 16px; }
.spf-foot { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.feast-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 400;
  padding: 24px 16px;
  overflow-y: auto;
}
.feast-modal-overlay.open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.feast-modal {
  position: relative;
  background: #fff;
  border-radius: 14px;
  max-width: 560px;
  width: 100%;
  margin: auto;
  padding: 26px 28px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.feast-modal-close {
  position: absolute;
  top: 12px; right: 14px;
  background: none; border: none;
  font-size: 28px; line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}
.feast-modal-close:hover { color: var(--red); }
.feast-modal-title {
  font: 700 22px/1.25 'OldeHansa Headline', 'OldeHansa Antique', cursive;
  color: var(--text);
  margin: 0 36px 14px 0;
}
.feast-modal-body {
  font: 400 14.5px/1.65 'OldeHansa Antique', sans-serif;
  color: var(--muted);
}
.feast-modal-desc { margin: 0 0 12px; }
.feast-modal-img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 0 14px;
}
.feast-modal-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-cool);
  display: flex;
  justify-content: center;
}
.feast-modal-foot .btn { min-width: 140px; }
.fc-h { font-weight: 700; margin: 8px 0 2px; color: var(--text); }
.fc-leg { margin-top: 8px; font-size: 11px; color: var(--muted); font-style: italic; }
.fc-wrap { margin-top: 4px; }
.fc-note { margin-top: 8px; font-style: italic; }
.fc-al { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 4px; font-size: 10px; font-weight: 700; line-height: 1; vertical-align: baseline; }
.fc-al-L { background: #dce9f6; color: #14385f; }
.fc-al-G { background: #f6edcf; color: #7a5a05; }
.fc-al-P { background: #f6dcd9; color: #7a1d16; }
.al-tag { display: inline-block; background: var(--red-light); color: var(--red); font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 3px; margin-left: 3px; vertical-align: middle; }
/* Allergen icons: milk (blue), wheat (yellow), nut (red) */
.al-ic { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 5px; margin-left: 2px; vertical-align: middle; }
.al-ic.al-L { background: #bcd6f3; }
.al-ic.al-G { background: #f5d77a; }
.al-ic.al-P { background: #f0bdb9; }
.fc-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fc-leg .al-ic { margin: 0 2px 0 0; }
.no-feast-opt {
  border: 1.5px solid var(--border-cool);
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color .18s;
  background: #fff;
}
.no-feast-opt:hover { border-color: var(--gold); }
.no-feast-opt.sel { border-color: var(--red); box-shadow: 0 0 0 3px rgba(139,36,29,.12); }
.no-feast-name { font: 600 14px/1.3 'OldeHansa Antique', sans-serif; }
.no-feast-sub { font: 400 13.5px/1.4 'OldeHansa Antique', sans-serif; color: var(--muted); margin-top: 2px; }

/* ---- PAYMENT OPTIONS ---- */
.pay-label {
  font: 400 14px/1.2 'OldeHansa Headline', 'OldeHansa Antique', sans-serif;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--muted);
  display: block;
  margin-bottom: 10px;
}
/* Point 6 — prepayment. Choosing an option "seals the bargain": its marker presses into a
   red wax seal (echoing the numbered red discs and the confirmation badge). One quiet signature;
   everything else stays disciplined so the seal is the thing you remember. */
.field-note.prepay-why {
  font-style: normal;
  color: #4a3316;
  border-left: 2px solid var(--gold-light);
  padding: 1px 0 1px 13px;
  margin: 2px 0 15px;
}
.pay-opts { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.pay-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1.5px solid var(--border-cool);
  border-radius: 11px;
  padding: 13px 16px;
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
  background: #fff;
  user-select: none;
}
.pay-opt:hover { border-color: var(--gold); }
.pay-opt.sel { border-color: var(--red); background: #fffcfb; box-shadow: 0 0 0 3px var(--red-light); }
/* Native radio: kept for focus + keyboard, visually replaced by the wax seal. */
.pay-opt input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pay-seal {
  flex: 0 0 26px; width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: radial-gradient(circle at 50% 36%, #fff, var(--gold-faint));
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .16s, background .16s, border-color .16s, box-shadow .16s;
}
.pay-opt:hover .pay-seal { border-color: var(--red); }
.pay-seal-check { width: 15px; height: 15px; color: #fff; opacity: 0; transform: scale(.4); transition: opacity .16s, transform .2s cubic-bezier(.34,1.56,.64,1); }
.pay-opt.sel .pay-seal {
  border-color: var(--red-dark);
  background: radial-gradient(circle at 50% 34%, #a5322a, var(--red) 55%, var(--red-dark));
  box-shadow: 0 1px 3px rgba(139,36,29,.42), inset 0 1px 1.5px rgba(255,255,255,.28);
  transform: scale(1.03);
}
.pay-opt.sel .pay-seal-check { opacity: 1; transform: scale(1); }
.pay-opt input:focus-visible + .pay-seal { outline: 2px solid var(--red); outline-offset: 3px; }
.pay-opt-body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pay-opt-title { font: 600 14.5px/1.3 'OldeHansa Antique', sans-serif; color: var(--text); }
.pay-opt.sel .pay-opt-title { color: var(--red-dark); }
.pay-opt-sub { font: 400 12px/1.45 'OldeHansa Antique', sans-serif; color: var(--muted); }
/* Tühi alarida ei tohi ruumi võtta: kaardireal on ta nüüd tühi (kaubamärgid on kiibid) ja
   :empty hoiab ära tühja rea, mis lükkaks kiibid alla nagu oleks midagi vahele jäänud. */
.pay-opt-sub:empty { display: none; }

/* ── MAKSEVIISIDE KIIBID ──────────────────────────────────────────────────────────────────────
   Väikesed logod („kas MINU kaart käib?"). Kolm reeglit hoiavad neid minimalistlikuna:

   1. LOGO ON PILT, KIIP ON RAAM. Iga logo on eri kujuga ja eri taustaga (mõni valge, mõni
      läbipaistev), nii et ilma ühise valge raamita loeks rida kokku plekkidena. Raam annab neile
      ühe kuju; object-fit: contain hoiab proportsiooni.
   2. KÕRGUS ON FIKSEERITUD, laius mitte. Nii jäävad nad ühele joonele, ükskõik kas logo on ruudu
      (OP) või pika ristküliku (Luminor) kujuga.
   3. WRAP, MITTE KERIMINE. Telefonis lähevad nad lihtsalt mitmele reale. Horisontaalne keritav
      riba peidaks pool nimekirjast täpselt seal, kus külaline otsib oma panka. */
.pay-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.pay-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; padding: 0 5px; background: #fff;
  border: 1px solid var(--border); border-radius: 4px;
}
.pay-chip img { height: 13px; width: auto; max-width: 46px; object-fit: contain; display: block; }
@media (max-width: 480px) {
  .pay-chips { gap: 3px; }
  .pay-chip { height: 22px; padding: 0 4px; }
  .pay-chip img { height: 12px; max-width: 40px; }
}
/* Stripe logo badge — marks the card-prepayment options (full / deposit). */
.stripe-logo { height: 24px; width: auto; margin-top: 6px; opacity: .9; align-self: flex-start; }
.pay-amount {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-weight: 700;
  font-size: 14px;
  color: #5a4205;
  background: #f5d77a;
  border-radius: 8px;
  padding: 4px 11px;
  white-space: nowrap;
  align-self: center;
  flex-shrink: 0;
  text-align: center;
}
.stripe-note {
  display: flex; align-items: center; gap: 7px;
  font: 300 12px/1.5 'OldeHansa Antique', sans-serif;
  color: var(--muted);
  font-style: italic;
  margin-top: 10px;
}
.stripe-lock { width: 13px; height: 13px; flex: 0 0 auto; opacity: .7; color: var(--red); }
/* Promo code field in the pay step */
.promo-row { margin-top: 14px; }
.promo-row .promo-label { display: block; font: 500 12.5px/1.4 'OldeHansa Antique', sans-serif; color: var(--muted); margin-bottom: 6px; }
.promo-input { display: flex; gap: 8px; }
.promo-input input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border: 1px solid var(--line, #d9cdae); border-radius: 8px; font: 400 14px 'OldeHansa Antique', sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.promo-input .promo-apply { flex: 0 0 auto; padding: 9px 16px; border: 1px solid #c9a24a; background: #fbf6ea; color: #7a5a12; border-radius: 8px; cursor: pointer; font: 600 13px 'OldeHansa Antique', sans-serif; }
.promo-input .promo-apply:hover { background: #f3e9cf; }
.promo-result { margin-top: 7px; font: 400 12.5px/1.45 'OldeHansa Antique', sans-serif; min-height: 1px; }
.promo-result.ok { color: #2f6d38; }
.promo-result.bad { color: var(--red, #b23); }

/* ---- SUMMARY TABLE ---- */
.summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 20px;
}
.summary-table th {
  text-align: left;
  padding: 9px 16px 9px 0;
  font: 600 11px/1 'OldeHansa Antique', sans-serif;
  letter-spacing: .07em;
  text-transform: none;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  width: 32%;
  vertical-align: top;
}
.summary-table td {
  padding: 9px 0;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}

/* ---- DONE ---- */
.done-inner {
  text-align: center;
  padding: 22px 8px 14px;
  max-width: 460px;
  margin: 0 auto;
}
/* Circular gold seal with a check — a satisfying, ceremonious confirmation. */
.done-badge {
  width: 78px; height: 78px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: radial-gradient(circle at 32% 28%, #e7c477, var(--gold) 62%, #9c7521);
  box-shadow: 0 6px 18px rgba(156,117,33,.36), inset 0 1px 2px rgba(255,255,255,.5);
  animation: donepop .45s cubic-bezier(.18,.9,.32,1.4) both;
}
@keyframes donepop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.done-title {
  font-family: 'OldeHansa Antique', 'UnifrakturCook', cursive;
  font-size: 38px;
  color: var(--red);
  margin-bottom: 6px;
}
.done-lead { font-size: 15px; color: var(--text); margin: 4px 0 18px; line-height: 1.6; }
/* "This is a request — await confirmation within one working day" note. */
.done-pending {
  background: #fff7e6; border: 1px solid #e7c887; border-left: 4px solid #b45309;
  color: #7a4a00; font-size: 13.5px; line-height: 1.6;
  padding: 11px 15px; border-radius: 8px; margin: 0 0 18px; text-align: left;
}
.done-confirmed {
  display: flex; align-items: flex-start; gap: 8px;
  background: #f0f7f4; border: 1px solid #b7ddc8; border-left: 4px solid #2e7d52;
  color: #1f5c3a; font-size: 13.5px; line-height: 1.6;
  padding: 11px 15px; border-radius: 8px; margin: 0 0 18px; text-align: left;
}
.done-confirmed svg { flex-shrink: 0; margin-top: 2px; color: #2e7d52; }
/* ── MAKSE EI ÕNNESTUNUD, AGA BRONEERING ON ──────────────────────────────────────────────────
   Kollane, mitte punane: punane tähendab sellel lehel „midagi läks katki", ja siin ei läinud —
   broneering on olemas ja number on all kirjas. Kollane ütleb „üks asi on veel teha", mis on
   täpselt see, mis siin on. Seisab kinnitusekraani KÕIGE ÜLEVAL, sest ta on ainus asi, mille
   peale külaline peab veel midagi tegema. */
.done-failed {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: #fffbeb; border: 1.5px solid #f0c96a; border-radius: var(--radius-input);
  padding: 14px 16px; margin-bottom: 16px; text-align: left;
}
.done-failed strong { font-size: 15px; line-height: 1.4; color: #7a5b12; }
.done-failed span { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.done-retry { width: 100%; margin-top: 2px; }
@media (min-width: 520px) { .done-retry { width: auto; } }

.done-paid {
  display: inline-flex; align-items: center; gap: 7px;
  background: #f0f7f4; border: 1px solid #b7ddc8; color: #2e7d52;
  font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; margin-bottom: 14px;
}
/* Summary card */
.done-summary {
  text-align: left;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px 16px;
  margin: 0 0 20px;
}
.done-srow {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 9px 0; font-size: 14px;
}
.done-srow + .done-srow { border-top: 1px solid rgba(0,0,0,.06); }
.done-sk { color: var(--muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.done-sv { font-weight: 600; color: var(--text); text-align: right; }
/* Reservation-code row — inside the same summary table, highlighted yellow, same font. */
.done-coderow .done-sv { display: flex; align-items: center; gap: 8px; }
.done-codemark {
  background: #fde68a; color: var(--text);
  font-weight: 700; letter-spacing: .08em;
  padding: 2px 10px; border-radius: 6px;
}
.done-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; flex: none;
  background: #eef3f9; border: 1px solid #c4d6ec; color: #1c3f6e;
  transition: background .15s, color .15s;
}
.done-copy:hover { background: #dfeaf8; }
.done-copy.copied { background: #e3f4ea; border-color: #b7ddc8; color: #2e7d52; }
/* Add-to-Google-Calendar button */
.done-cal {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 2px 0 18px; padding: 9px 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border); color: var(--text);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.done-cal:hover { background: #faf6ec; border-color: var(--gold); }
.done-foot { font-size: 13px; color: var(--muted); line-height: 1.7; }
.done-foot a { color: var(--red); font-weight: 600; }
.done-again { margin-top: 18px; }
/* ===== Reservation code — ALWAYS a blue rounded chip: ticket icon + Outfit code ===== */
.booking-code, .edit-code, .bk-code-cell .oh-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-weight: 700;
  letter-spacing: .1em;
  color: #1c3f6e !important;
  background: #bcd6f3 !important;
  border-radius: 9px;
  white-space: nowrap;
}
.booking-code::before, .edit-code::before, .bk-code-cell .oh-chip::before {
  content: '';
  flex: none;
  width: 1em; height: 1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c3f6e' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 7h16a1 1 0 011 1v2a2 2 0 000 4v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2a2 2 0 000-4V8a1 1 0 011-1z'/%3E%3Cpath d='M14 7v10' stroke-dasharray='2 2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.booking-code { font-size: 26px; padding: 9px 20px; margin: 12px 0 20px; }
.done-code-row .booking-code { margin: 0; }
.edit-code { font-size: 14px; padding: 3px 11px; }

/* ---- FOOTER ---- */
.site-footer {
  background: var(--red);
  color: rgba(255,255,255,.72);
  flex-shrink: 0;
}
.footer-top {
  max-width: none;
  margin: 0;
  padding: 48px 56px 40px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 48px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand {
  font-family: 'OldeHansa Antique', 'UnifrakturCook', cursive;
  font-size: 26px;
  color: #fff;
  margin-bottom: 12px;
}
.footer-col h3 {
  font: 700 10px/1 'OldeHansa Antique', sans-serif;
  letter-spacing: .14em;
  text-transform: none;
  color: var(--gold-light);
  margin-bottom: 14px;
}
.footer-col p, .footer-col address {
  font-style: normal;
  font: 400 13px/2 'OldeHansa Antique', sans-serif;
}
.footer-col a {
  display: block;
  font: 400 13px/2.2 'OldeHansa Antique', sans-serif;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .15s;
}
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom {
  max-width: none;
  margin: 0;
  padding: 18px 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 400 12px/1 'OldeHansa Antique', sans-serif;
  color: rgba(255,255,255,.35);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .hero-col { gap: 0; }
  .hero-text { padding: 28px 32px 32px 40px; }
  .hero-title { font-size: 36px; }
}
@media (max-width: 1000px) {
  .site-main-split { display: block; }
  .hero-col {
    position: static; height: auto;
    padding: 36px 32px;
    gap: 20px;
  }
  .hero-img-wrap { height: 300px; }
  .hero-text { padding: 22px 16px; }
  .hero-title { font-size: 30px; }
  .hero-col { padding: 30px 16px; }
  .form-col { padding: 24px 12px 44px; }
  .form-card { padding: 26px 18px; }
  .header-inner { padding: 0 20px; }
  .header-nav { gap: 14px; }
  .nav-link { font-size: 12px; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; padding: 40px 32px 32px; }
  .footer-bottom { padding: 16px 32px; flex-direction: column; gap: 4px; text-align: center; }
}
@media (max-width: 1000px) {
  /* Phones: drop the serv2 side-ornament design (it caused edge/gutter problems) and use
     the plain pergamentti parchment texture, tiled vertically to fill the whole page.
     Rotated 90° so its light→dark gradient runs horizontally — that way the tile edges
     match top-to-bottom and there's no dark seam where it repeats. */
  body { background: #efe6c8 url('/backgrounds/pergamentti-rot.webp') center top / 100% auto repeat-y scroll; }
  /* keep the header a single tidy row: brand left, language + hamburger right */
  .site-header { height: auto; }
  .header-inner { height: var(--header-h); flex-wrap: nowrap; padding: 0 14px; }
  .header-left { min-width: 0; overflow: hidden; }
  .header-portal-label { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  /* Keep the three guest steppers (adults / kids) in ONE row on phones — just compact them. */
  .field-row.thirds { grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
  .field-row.thirds label { font-size: 11.5px; line-height: 1.25; }
  .field-row.thirds .stepper-wrap { height: 38px; }
  .field-row.thirds .step-btn { width: 24px; font-size: 17px; }
  .field-row.thirds .stepper-input { min-width: 0; width: 100%; font-size: 14px; padding: 0 !important; }
  .feast-card { grid-template-columns: 1fr 100px; }
  .feast-thumb { padding: 8px; }
  .nav-link { display: none; }                 /* text links hide; lang + portal stay */
  .logo-img { height: 38px; }
  .header-inner { padding: 8px 14px; gap: 10px; }
  .header-portal-label { font-size: 15px; padding-left: 12px; }
  .footer-top { padding: 32px 20px 24px; }
  .footer-bottom { padding: 16px 20px; }
  /* compact stepper */
  .steps { padding: 13px 14px 10px; border-radius: 18px; }
  .step { gap: 6px; }
  .step-ring { width: 28px; height: 28px; font-size: 13px; }
  .step:not(:last-child)::after { top: 14px; }
  .step-label { font-size: 9.5px; letter-spacing: .04em; }
  .hero-img-wrap { height: 220px; }
  .form-col { padding: 20px 8px 40px; }
  .form-card { padding: 22px 14px; }
  .hero-col { padding: 24px 10px; }
}
@media (max-width: 400px) {
  /* very small phones: portal label drops to its own row, steppers shrink */
  .header-portal-label { width: 100%; padding-left: 0; text-align: center; order: 5; }
  .lang-switcher { margin-left: auto; }
  .step-btn { width: 30px; }
  .stepper-input { min-width: 0; }
  .field-row.thirds { gap: 8px; }
  .hero-title { font-size: 26px; }
}

/* ── Headlines = Antique Regular; everything else = Antique Noble (set on body) ── */
.hero-title, .header-portal-label, .footer-brand, .form-card h1, .form-card h2, .form-card h3,
.done-title, .pg-title, .card-title, .section-label, .story-head {
  font-family: 'OldeHansa Headline', 'OldeHansa Antique', cursive !important;
}
/* Yellow highlighted headline before a story paragraph */
.story-head {
  display: inline-block; background: var(--gold-light); color: #5a4205;
  padding: 1px 9px; border-radius: 5px; margin-right: 8px;
  letter-spacing: .05em; text-transform: none; font-size: .9em; font-weight: 400;
}
/* Feast cards: centre the text against the image; disabled (solo) state; read-more link */
.feast-body { justify-content: center; }
.feast-card.disabled { opacity: .55; cursor: not-allowed; }
.feast-more-link { color: var(--red); font-weight: 600; font-size: 14px; text-decoration: underline; }

/* serv2 ornament now shows on the LEFT only. Leave a clearance on the left so the
   ornamental column stays clear of the content; the content runs close to the right
   edge (no ornament there). */
.site-main-split { width: auto; margin-left: 7.5%; margin-right: 3%; }   /* clear the left ornament — content never sits on the side design (gutter trimmed 25%) */

/* ===== Unified form shell: stepper + form in ONE rounded rectangle, split by a line ===== */
.form-shell { background: var(--form-bg); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow); overflow: hidden; max-width: 500px; width: 100%; margin: 0 auto; }
.form-shell .steps { background: transparent; border: none; border-bottom: 1px solid var(--border); border-radius: 0; margin: 0; }
.form-shell .form-card { background: transparent; border: none; border-radius: 0; box-shadow: none; margin: 0; }
/* Form errors appear as a fixed banner across the top — always seen, whatever the scroll. */
.form-shell #msg:not(.hidden) {
  position: fixed; top: calc(var(--header-h) + 10px); left: 50%; transform: translateX(-50%);
  z-index: 500; margin: 0; max-width: 92vw; width: max-content;
  box-shadow: 0 12px 34px rgba(0,0,0,.30); border-radius: 10px;
}

/* ===== Three story cards (picture / headline / description) ===== */
.story-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.story-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  background: rgba(255,255,255,.66); border: 1px solid rgba(214,205,184,.6);
  border-radius: 14px; padding: 16px 12px;
}
.story-card .story-img { width: 100%; height: 148px; object-fit: contain; margin: 0; }
.story-card .story-head { margin: 0; }
.story-card .story-para { font-size: 15px; line-height: 1.6; }
@media (max-width: 560px) { .story-cards { grid-template-columns: 1fr; } }

/* ===== Jump-to-form button — fixed/floating, mobile only (form sits below the hero) ===== */
.jump-form-btn { display: none; }
#book-form { scroll-margin-top: 80px; }
@media (max-width: 1000px) {
  /* No side ornaments on phones now — so the gutters can be much smaller. */
  .site-main-split { width: auto; margin: 0 4%; }
  .jump-form-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 14px;
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 150;
    padding: 16px 30px; max-width: calc(100% - 24px);
    background: var(--red); color: #fff; text-decoration: none;
    border-radius: 32px; font: 700 19px/1 'OldeHansa Antique', sans-serif;
    box-shadow: 0 8px 24px rgba(139,36,29,.45);
  }
  .jump-form-btn:active { background: var(--red-dark); }
  .jump-arrows { display: inline-block; font-size: 24px; font-weight: 900; line-height: 1; animation: jumpbob 1.2s ease-in-out infinite; }
  @keyframes jumpbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
}

/* ===== Side menu (hamburger drawer): Halda broneeringut + Tagasi veebilehele ===== */
.menu-overlay { display: none; }
.menu-overlay.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 250; }
/* Drawer slides in from the RIGHT (hamburger is on the right) on a parchment ground. */
.side-menu {
  position: fixed; top: 0; right: 0; left: auto; height: 100%; width: 280px; max-width: 82vw;
  background: #f0e8cc url('/backgrounds/pergamentti.webp') center / cover;
  box-shadow: -8px 0 30px rgba(0,0,0,.22);
  transform: translateX(100%); transition: transform .25s ease; z-index: 300;
  padding: 60px 22px 22px; display: flex; flex-direction: column; gap: 4px;
}
.side-menu.open { transform: translateX(0); }
.side-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 30px; line-height: 1; color: var(--text); cursor: pointer; }
.side-link { display: block; padding: 15px 6px; font: 400 18px/1.2 'OldeHansa Headline', 'OldeHansa Antique', cursive; color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(120,90,40,.35); }
.side-link:active { color: var(--red); }
/* Standout button at the foot of the drawer (e.g. "back to the website") */
.side-btn {
  margin-top: auto; margin-bottom: 4px; text-align: center;
  padding: 14px 18px; border-radius: 10px;
  background: var(--red); color: #fff; text-decoration: none;
  font: 400 17px/1.2 'OldeHansa Headline', 'OldeHansa Antique', cursive;
  box-shadow: 0 4px 14px rgba(139,36,29,.35);
  transition: background .15s;
}
.side-btn:hover { background: var(--red-dark); }

/* Narrow screens: drop the long portal label, shrink the language buttons */
@media (max-width: 560px) {
  .header-portal-label { display: none; }
  .lang-btn { padding: 5px 7px; font-size: 10px; }
  .header-inner { padding: 0 12px; gap: 8px; }
}

/* Story-card internal text block (headline + description) */
.story-card .story-text { display: flex; flex-direction: column; gap: 6px; }

/* Jump-to-form button fades away once the form is reached */
.jump-form-btn { transition: opacity .25s ease, visibility .25s ease; }
.jump-form-btn.reached { opacity: 0; visibility: hidden; pointer-events: none; }

/* Mobile: story cards become rows (picture left, headline + text right); wider hero photo */
@media (max-width: 1000px) {
  .story-cards { grid-template-columns: 1fr; gap: 12px; }
  .story-card { flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 14px; }
  .story-card .story-img { width: 96px; height: 96px; flex: none; }
  .story-card .story-text { flex: 1; align-items: flex-start; }
  .story-card .story-head { margin: 0 0 5px; }
  .story-card .story-para { font-size: 15px; }
  .hero-img-wrap { margin: 16px 12px 0; height: 230px; }
}

/* §2 allergy keyword input + comment guide */
.tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 7px 10px; border: 1px solid #d8c6a4; border-radius: 8px; background: #fffdf7; cursor: text; }
.tag-input:focus-within { border-color: #b08d3e; }
.tag-chips { display: contents; }
.tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 5px 3px 10px; background: #f3e6c8; color: #6b4e16; border: 1px solid #e3cf9f; border-radius: 14px; font-size: 13px; font-weight: 600; }
.tag-chip button { border: none; background: rgba(107,78,22,.12); color: #6b4e16; width: 17px; height: 17px; border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.tag-chip button:hover { background: #b00020; color: #fff; }
.tag-entry { flex: 1; min-width: 130px; border: none; outline: none; background: transparent; font-size: 14px; font-family: inherit; color: inherit; padding: 3px 0; }
.tag-sug { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.tag-sug.hidden { display: none; }
.tag-sug-item { padding: 4px 11px; background: #fff; border: 1px solid #d8c6a4; border-radius: 13px; font-size: 13px; cursor: pointer; color: #5a4a2a; font-family: inherit; }
.tag-sug-item:hover { background: #f3e6c8; border-color: #b08d3e; }
.comment-guide { margin-top: 8px; }
.comment-guide.hidden { display: none; }
.cg-q { display: block; font-size: 13px; color: #7a6a48; margin-bottom: 7px; }
.cg-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-cat { padding: 4px 11px; background: #fff; border: 1px solid #d8c6a4; border-radius: 13px; font-size: 13px; cursor: pointer; color: #5a4a2a; font-family: inherit; }
.cg-cat:hover { background: #eaf3ec; border-color: #6fa080; color: #2f6b46; }

/* §2 booking form: allergy picker + structured comments */
.dietary-section { background: #fffdf7; border: 1px solid #e8dcc0; border-radius: 10px; padding: 14px 14px 10px; margin-bottom: 4px; }
/* Typeahead (allergies + wishes): styled input + custom dropdown; picking a row adds it at once. */
.ta-box { position: relative; margin: 4px 0 8px; }
.ta-input { width: 100%; padding: 10px 12px; border: 1px solid #d8c6a4; border-radius: 8px; font-size: 14px; font-family: inherit; color: #3a2a10; background: #fff; }
.ta-input:focus { outline: none; border-color: #b08d3e; box-shadow: 0 0 0 3px rgba(176,141,62,.15); }
.ta-menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid #d8c6a4; border-radius: 8px; box-shadow: 0 8px 24px rgba(60,42,16,.16); overflow: hidden; max-height: 240px; overflow-y: auto; }
.ta-menu.hidden { display: none; }
.ta-opt { padding: 9px 12px; font-size: 14px; color: #4a3a1a; cursor: pointer; font-family: inherit; }
.ta-opt + .ta-opt { border-top: 1px solid #f0e7d4; }
.ta-opt:hover, .ta-opt.hi { background: #f3e6c8; color: #6b4e16; }
.ta-opt-free { font-style: italic; color: #6b4e16; }
/* Prominent "always tell your server" reminder. */
.allergy-server-note { margin-top: 8px; padding: 8px 12px; background: #fff7e6; border-left: 3px solid #b45309; border-radius: 6px; color: #7a4a00; font-weight: 600; }
.allergy-picker { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 8px; }
.allergy-opt { padding: 6px 12px; background: #fff; border: 1px solid #d8c6a4; border-radius: 16px; font-size: 13px; cursor: pointer; color: #5a4a2a; font-family: inherit; line-height: 1.3; }
.allergy-opt:hover { background: #f8f0de; border-color: #b08d3e; }
.allergy-opt.on { background: #f3e6c8; border-color: #b08d3e; color: #6b4e16; font-weight: 600; }
.allergy-selected, .comment-selected { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; margin-bottom: 8px; }
.allergy-selected:empty, .comment-selected:empty { display: none; margin: 0; }
.no-allergies-btn { display: block; width: 100%; margin: 4px 0 8px; padding: 10px 12px; background: #fff; border: 2px dashed #d8c6a4; border-radius: 8px; font-size: 14px; cursor: pointer; color: #5a4a2a; font-family: inherit; text-align: left; }
.no-allergies-btn:hover { border-color: #6fa080; background: #f5faf7; }
.no-allergies-btn.on { border-style: solid; border-color: #6fa080; background: #eaf3ec; color: #2f6b46; font-weight: 600; }
.allergy-scope { margin: 12px 0 10px; padding: 12px 14px; background: #f8f5ef; border: 1px solid #e8dcc0; border-radius: 8px; }
.allergy-scope.hidden { display: none; }
.allergy-scope-label { font-size: 13px; font-weight: 600; color: var(--text, #3a2a10); margin-bottom: 8px; }
.allergy-scope-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.scope-opt { padding: 8px 14px; background: #fff; border: 1px solid #d8c6a4; border-radius: 8px; font-size: 13px; cursor: pointer; color: #5a4a2a; font-family: inherit; }
.scope-opt:hover { border-color: #b08d3e; background: #f8f0de; }
.scope-opt.on { border-color: #6fa080; background: #eaf3ec; color: #2f6b46; font-weight: 600; }
.comment-picker { margin-top: 6px; }
.cg-cat.active { background: #eaf3ec; border-color: #6fa080; color: #2f6b46; }
.cg-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 10px 12px; background: #f8f5ef; border-radius: 8px; border: 1px solid #e8dcc0; }
.cg-subs.hidden { display: none; }
.cg-sub { padding: 5px 12px; background: #fff; border: 1px solid #d8c6a4; border-radius: 13px; font-size: 13px; cursor: pointer; color: #5a4a2a; font-family: inherit; }
.cg-sub:hover { background: #f3e6c8; border-color: #b08d3e; }
.cg-sub.on { background: #f3e6c8; border-color: #b08d3e; color: #6b4e16; font-weight: 600; }
.comment-other { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.comment-other.hidden { display: none; }
.comment-other textarea { width: 100%; min-height: 64px; padding: 8px 10px; border: 1px solid #d8c6a4; border-radius: 8px; font-family: inherit; font-size: 14px; resize: vertical; box-sizing: border-box; }
.btn-sm { align-self: flex-start; padding: 6px 14px; font-size: 13px; }
.pay-opt.hidden { display: none !important; }

/* =====================================================
   v2 SINGLE-PAGE FORM
   ===================================================== */
/* numbered section heading */
.section-label.fsec { color: var(--red); font-size: 16px; }
.fsec-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: 50%; background: var(--red); color: #fff;
  font-family: 'Outfit', sans-serif !important; font-weight: 700; font-size: 13px;
}
.section-label.fsec::after { background: var(--red-light); }
.sub-label { font: 400 14px/1.3 'OldeHansa Headline','OldeHansa Antique',sans-serif; color: var(--muted); margin-bottom: 8px; }

/* guests: adults stepper + add-child */
.guests-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.children-field .add-child-btn { padding: 9px 14px; font-size: 14px; width: 100%; }
.child-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.child-row { display: flex; align-items: center; gap: 10px; }
.child-row-label { font-size: 14px; color: var(--muted); min-width: 70px; }
.child-age { flex: 1; padding: 8px 10px; border: 1px solid #d8c6a4; border-radius: 8px; font-family: inherit; font-size: 14px; background: #fff; }
.child-rm { border: none; background: transparent; color: var(--red); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 6px; }

/* ERIPROGRAMM — plokk kuupäeva ja kellaaja all (omanik, 14.09.2026).
   Kaks seisundit ühes kastis:
     · VALITUD eriprogramm — pealkiri ja pikk kirjeldus, rõhutatud raamis. See ei ole hoiatus ega
       viga, vaid õhtu enda kirjeldus, nii et värv on maja oma pidulik toon, mitte punane.
     · SOOVITUS (.sp-nudge) — õige päev, vale kellaaeg. Vaiksem, sest ta on vihje, mitte otsus:
       külaline TOHIB broneerida ka kell 12, ja plokk ütleb talle ainult, et kell 20 on midagi veel.
   Sisu tuleb pidusöögi enda nimest ja kirjeldusest (neljas keeles) — siin ei ole ühtegi sõna. */
/* 15.09.2026, omanik: „the warning under the date and time basically will look like a feast
   selection on the /book, but just in red." Nii et plokk EI OLE enam tekstikast — ta on
   `.feast-card` samas ruudustikus (1fr + pilt), ainult punane. Sama kuju tähendab, et külaline
   tunneb ta ära enne, kui ta jõuab lugeda: see on pidusöök, mitte hoiatusriba.
   Mõõdud ja ruudustik on SIHILIKULT `.feast-card`-i omad — kaks eri kaardikuju samal lehel oleks
   see, mille peale keegi küsiks, kumb neist on päris valik. */
.special-prog { margin-top: 10px; }
.special-prog.hidden { display: none; }
.special-prog .sp-card {
  display: grid;
  grid-template-columns: 1fr 130px;
  border: 1.5px solid var(--red);
  border-radius: 12px;
  overflow: hidden;
  background: #fffaf7;
  box-shadow: 0 0 0 3px rgba(139,36,29,.10);
}
.special-prog .sp-body { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 5px; }
.special-prog .sp-tag {
  font: 700 10px/1 'OldeHansa Antique', sans-serif; letter-spacing: .08em;
  color: #fff; background: var(--red); padding: 4px 8px; border-radius: 4px; width: fit-content;
}
.special-prog .sp-h { font: 700 15px/1.3 'OldeHansa Antique', sans-serif; color: #6b1414; }
.special-prog .sp-meta { font: 400 14px/1.4 'OldeHansa Antique', sans-serif; color: #7a4a44; }
.special-prog .sp-n { font-size: 13.5px; line-height: 1.55; color: #6b1414; }
.special-prog .sp-thumb { background: #fff; display: flex; align-items: center; justify-content: center; padding: 10px; }
.special-prog .sp-thumb img { width: 100%; max-height: 120px; object-fit: contain; display: block; }
/* Sama nupp, mis pidusöögi kaardil, ainult punane — ta avab SAMA akna (openSpecialModal). */
.special-prog .learn-more-btn { color: var(--red); }
.special-prog .learn-more-btn:hover { color: #6b1414; }
/* SOOVITUSE kaart on klõpsatav: ta viib kellaaja eriprogrammi peale (omanik: „it should also
   recommend to reserve a table at 20.00"). Valitud programmi kaart EI ole — seal ei ole kuhugi
   minna, sa oled juba kohal. */
.special-prog .sp-card.sp-go { cursor: pointer; }
.special-prog .sp-card.sp-go:hover { background: #fff4ef; }

/* TELEFONIL JÄÄB PILT PAREMALE (omanik, 15.09.2026: „on phone, the picture should be on the right
   and the text on the left, just like on desktop view").
   Siin seisis enne üks veerg ja pilt teksti KOHAL — see oli vale otsus, mitte puuduv reegel:
   pidusöögi kaart ise hoiab telefonil samuti kaks veergu (`.feast-card { 1fr 100px }` allpool
   560 px), ja kaks eri käitumist kahel ühesugusel kaardil oleks täpselt see, mille pärast punane
   kaart üldse pidusöögi kuju laenas. Veerg läheb kitsamaks, mitte ära. */
@media (max-width: 560px) {
  .special-prog .sp-card { grid-template-columns: 1fr 100px; }
  .special-prog .sp-thumb { padding: 8px; }
}

/* Telefon — ÜKS väli (omanik, 14.09.2026). Riigikoodi kombobox ja tema .phone-row/.phone-cc
   reeglid on kadunud koos temaga; number kirjutatakse ühte lahtrisse ja lib/phone.js otsustab,
   kas ta vajab riigikoodi. `.bad` pannakse peale alles väljalt lahkudes, mitte kirjutamise ajal
   — vt refreshPhoneHint(markBad) public/reservation.js-is. */
#phone_number.bad { border-color: var(--red, #b23); background: #fff7f7; }
#phoneNote:empty { display: none; }

/* company toggle */
.oh-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; margin-top: 4px; }
.oh-check input { accent-color: var(--red); width: 16px; height: 16px; }
.company-wrap { margin-top: 12px; }
.company-wrap.hidden { display: none; }

/* yes / no toggle */
.yn-toggle { display: inline-flex; border: 1.5px solid #d8c6a4; border-radius: 10px; overflow: hidden; }
.yn-btn { border: none; background: #fff; padding: 9px 26px; font-family: inherit; font-size: 15px; cursor: pointer; color: var(--muted); }
.yn-btn + .yn-btn { border-left: 1.5px solid #d8c6a4; }
.yn-btn.on { background: var(--red); color: #fff; }
.yn-reveal { margin-top: 16px; }
.yn-reveal.hidden { display: none; }

.consent-line { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 14px 0 0; line-height: 1.5; }
.consent-line input { margin-top: 3px; accent-color: var(--red); }
.btn-submit { margin-top: 18px; min-width: 200px; }

@media (max-width: 600px) {
  .guests-row { grid-template-columns: 1fr; }
  /* Phones keep the hero teaser + stories; the floating jump-form-btn points to the form. */
  .hero-col { padding-bottom: 8px; }
}

/* =====================================================
   COOKIE CONSENT BAR  (built by window.OHConsent in reservation.js)
   =====================================================
   Shared by /book, /manage and /partners, which all load this file. Parchment and dark red so it
   reads as part of the house rather than a bolted-on compliance widget — the brand variables above
   are the whole styling budget here.

   It sits ABOVE the page but does not cover the form: position:fixed at the bottom, and on /book
   the floating .jump-form-btn is lifted out of its way while it is on screen (see below). A visitor
   who simply ignores the bar can still complete a booking, which is deliberate — a banner that
   blocks the task teaches people to click "accept" without reading, which is the opposite of consent.
   ===================================================== */
.oh-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--parchment); border-top: 2px solid var(--gold);
  box-shadow: 0 -6px 28px rgba(30,15,0,.16);
  font-size: 13.5px; line-height: 1.55; color: var(--text);
}
.oh-consent-txt { margin: 0; max-width: 760px; }
.oh-consent-link { color: var(--red); text-decoration: underline; white-space: nowrap; }
.oh-consent-link:hover { color: var(--red-dark); }
.oh-consent-btns { display: flex; gap: 10px; flex-shrink: 0; }
.oh-consent-btns button {
  font: inherit; font-weight: 700; cursor: pointer;
  padding: 9px 22px; border-radius: var(--radius-input); border: 1px solid var(--red);
  transition: background .15s, color .15s;
}
.oh-consent-y { background: var(--red); color: #fff; }
.oh-consent-y:hover { background: var(--red-dark); border-color: var(--red-dark); }
/* Decline is a real, equally-reachable button, not a greyed-out afterthought — an "accept" that is
   the only prominent choice is not a free choice. Same size, same hit area, quieter fill only. */
.oh-consent-n { background: transparent; color: var(--red); }
.oh-consent-n:hover { background: var(--red-light); }
.oh-consent-btns button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* /book's floating "jump to form" button lives in the same bottom-right corner; lift it clear
   while the bar is up so the two never overlap. */
body:has(.oh-consent) .jump-form-btn { bottom: 108px; }

/* The footer link that re-opens the bar after a decline. Hidden until the page knows analytics is
   configured (OHConsent.refreshLabels) — hence the inline display the script sets. */
.oh-consent-reopen { cursor: pointer; }

@media (max-width: 700px) {
  .oh-consent { gap: 12px; padding: 12px 16px; font-size: 12.5px; }
  .oh-consent-btns { width: 100%; }
  .oh-consent-btns button { flex: 1; padding: 11px 12px; }
}

/* Ettemaksu teade eriprogrammi kaardi sees (omanik, 15.09.2026). Punase kaardi sees, aga oma
   taustaga: ta ei ole kirjeldus vaid TINGIMUS, ja tingimus, mille inimene loeb alles pärast
   maksmist, on halvem kui üldse mitte kirjas. */
.special-prog .sp-prepay {
  margin-top: 6px; padding: 7px 9px;
  background: #fdeeea; border: 1px solid #e8c3bb; border-radius: 6px;
  font-size: 12.5px; line-height: 1.45; color: #6b1414; font-weight: 600;
}