/* styles.css: how the booking page looks.
   Colors, fonts, and the button style are copied from amgtours.net
   (BEST_amgtours-homepage-final.html) and the AMG brand guide. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── BRAND COLORS: the exact values used on the live site ── */
:root {
  --cream: #F9F7F3;
  --white: #FFFFFF;
  --charcoal: #1C1C1C;
  --mid: #5A5A5A;
  --soft: #9A9A9A;
  --border: #E8E4DC;
  --gold: #C8A96E;
  --gold-light: #F5EDD8;
  --green: #2D4A3E;
  --green-light: #EDF2F0;
  --green-hover: #1e3529;   /* the site's button hover color */
}

[hidden] { display: none !important; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--white);
  color: var(--charcoal);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

a { color: var(--green); }

/* Keyboard users see where they are. Uses the brand green. */
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ── DEVELOPMENT WARNING (remove by setting showDevWarnings to false in settings.json) ── */
.dev-warning {
  background: var(--gold-light);
  border-bottom: 2px solid var(--gold);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
}
.dev-warning-inner { max-width: 1080px; margin: 0 auto; }
.dev-warning strong { display: block; letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px; margin-bottom: 4px; }
.dev-warning ul { margin: 8px 0 0 20px; }
.dev-warning code { font-size: 13px; background: var(--white); padding: 1px 5px; border-radius: 4px; }

/* ── TOP BAR AND HEADER ── */
.announcement {
  background: var(--green);
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.announcement a { color: var(--gold); font-weight: 500; text-decoration: none; }

.site-header {
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  height: 72px;
  display: flex;
  align-items: center;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}
.logo-mark {
  width: 38px; height: 38px;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; font-weight: 600;
  flex-shrink: 0;
}
.logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 600;
  color: var(--charcoal);
}

/* ── PAGE ── */
.page { padding: 48px 16px 64px; }
.step { max-width: 1080px; margin: 0 auto; }

/* Two columns on computers: the form on the left, the live summary on the right. */
.booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: start;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}
.section-eyebrow::before {
  content: '';
  display: block;
  width: 24px; height: 1px;
  background: var(--green);
}

h1 {
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.08;
  margin-bottom: 16px;
}
h1 em { font-style: italic; color: var(--green); }

.intro { color: var(--mid); font-weight: 300; font-size: 17px; margin-bottom: 32px; max-width: 640px; }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  padding: 24px;
  margin-bottom: 24px;
}

.load-error {
  background: var(--gold-light);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

/* ── CALENDAR ── */
.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.calendar-title { font-size: 28px; }

.cal-nav {
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 4px;
  font-size: 24px; line-height: 1;
  color: var(--green);
  cursor: pointer;
}
.cal-nav:hover:not(:disabled) { background: var(--green-light); }
.cal-nav:disabled { color: var(--soft); background: var(--cream); cursor: not-allowed; }

.weekdays, .days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.weekdays {
  text-align: center;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 8px;
}

.day, .day-blank { aspect-ratio: 1; min-height: 44px; }

.day {
  font-family: inherit;
  font-size: 15px; font-weight: 500;
  border-radius: 4px;
  border: 1px solid transparent;
  position: relative;
}
.day--available {
  background: var(--green-light);
  color: var(--green);
  border-color: var(--green-light);
  cursor: pointer;
}
.day--available:hover { border-color: var(--green); }

/* Greyed out: past, full, closed, or not confirmed. */
.day:disabled {
  background: var(--cream);
  color: var(--soft);
  font-weight: 400;
  cursor: not-allowed;
}

.day.is-selected, .day.is-selected:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

/* A small gold dot marks today. */
.day.is-today::after {
  content: '';
  position: absolute;
  bottom: 5px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--gold);
}

.legend {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 16px;
  font-size: 13px; color: var(--mid);
}
.legend li { display: flex; align-items: center; gap: 8px; }
.swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border); }
.swatch--available { background: var(--green-light); border-color: var(--green); }
.swatch--unavailable { background: var(--cream); }

.not-open { margin-top: 16px; font-size: 14px; color: var(--mid); }

/* ── TIME PANEL ── */
.time-panel h3 { font-size: 24px; margin-bottom: 4px; }
.time-hint { color: var(--mid); font-size: 15px; }
.time-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin: 16px 0 12px; }

.time-btn {
  font-family: inherit;
  font-size: 15px; font-weight: 500;
  letter-spacing: 0.04em;
  padding: 12px 28px;
  min-height: 44px;
  border-radius: 4px;
  border: 1px solid var(--green);
  background: var(--white);
  color: var(--green);
  cursor: pointer;
  transition: background 0.2s;
}
.time-btn:hover { background: var(--green-light); }
.time-btn[aria-pressed="true"] { background: var(--green); color: #fff; }
.time-btn[aria-pressed="true"]:hover { background: var(--green-hover); }

.seats-left { font-size: 14px; font-weight: 500; color: var(--green); }
.pickup-note { font-size: 14px; color: var(--mid); }

/* ── TICKETS ── */
.card-title { font-size: 28px; margin-bottom: 8px; }

.ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.ticket-row:last-child { border-bottom: 0; }
.ticket-info { display: flex; flex-direction: column; line-height: 1.4; }
.ticket-info strong { font-weight: 500; font-size: 17px; }
.ticket-info span { font-size: 14px; color: var(--mid); }

.counter { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.counter-btn {
  width: 44px; height: 44px;
  border: 1px solid var(--green);
  background: var(--white);
  color: var(--green);
  border-radius: 4px;
  font-family: inherit;
  font-size: 22px; line-height: 1;
  cursor: pointer;
}
.counter-btn:hover:not(:disabled) { background: var(--green-light); }
.counter-btn:disabled {
  border-color: var(--border);
  background: var(--cream);
  color: var(--soft);
  cursor: not-allowed;
}
.counter-value {
  min-width: 40px;
  text-align: center;
  font-size: 18px; font-weight: 500;
}

.ticket-hint { min-height: 24px; margin-top: 8px; font-size: 14px; color: var(--mid); }

/* ── BOOKING SUMMARY ── */
.summary {
  position: sticky;
  top: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.summary-toggle { display: none; }   /* only used on phones */
.summary-body { padding: 24px; }
.summary-title { font-size: 28px; margin-bottom: 12px; }

.summary-list { font-size: 15px; }
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.summary-row dt { color: var(--mid); flex-shrink: 0; }
.summary-row dd { text-align: right; font-weight: 500; }
.summary-row dd.is-empty { color: var(--soft); font-weight: 400; }

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
  font-size: 15px;
}
.summary-total strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px; font-weight: 600;
  color: var(--green);
}
.summary-note { margin-top: 12px; font-size: 13px; color: var(--mid); }

/* ── CANCELLATION POLICY ── */
.policy {
  background: var(--green-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 15px;
}
.policy-label {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green);
  margin-bottom: 4px;
}

.booking-main > .policy { margin-bottom: 24px; }
.details .policy { margin: 24px 0; }

/* ── CONTACT FORM ── */
.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.field label {
  display: block;
  font-size: 14px; font-weight: 500;
  margin-bottom: 4px;
}
.field input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 16px;               /* 16px stops iPhones zooming in when a field is tapped */
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.field input::placeholder { color: var(--soft); }
.field input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }

.field-hint { margin-top: 4px; font-size: 13px; color: var(--mid); }
.field .optional { font-weight: 400; color: var(--soft); }
.promo-row { display: flex; gap: 8px; }
.promo-row input { flex: 1; min-width: 0; text-transform: uppercase; }
.promo-row input::placeholder { text-transform: none; }
.btn-apply {
  font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
  min-height: 48px; padding: 10px 20px; cursor: pointer;
  color: var(--green); background: var(--white); border: 1px solid var(--green); border-radius: 4px;
}
.btn-apply:hover:not(:disabled) { background: var(--green-light); }
.btn-apply:disabled { opacity: 0.55; cursor: not-allowed; }
.promo-message { margin-top: 6px; font-size: 14px; color: var(--mid); }
.promo-message.is-ok { color: var(--green); }
.promo-message.is-error { color: var(--charcoal); background: var(--gold-light); border-left: 3px solid var(--gold); padding: 6px 10px; border-radius: 4px; }
.summary-row dd.is-discount { color: var(--green); }

/* The brand has no red, so problems use the brand gold border plus a dark message. */
.field.has-error input { border: 2px solid var(--gold); background: var(--gold-light); }
.field-error { margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--charcoal); }
.field-error::before { content: '\26A0\FE0E\00a0'; color: var(--gold); }

.pickup-intro { margin: 24px 0 16px; color: var(--mid); font-size: 15px; }
.pickup-intro a, .call-message a { font-weight: 500; }

/* Type-to-search suggestions */
.combo { position: relative; }
.combo-list {
  position: absolute;
  z-index: 20;
  left: 0; right: 0;
  top: calc(100% + 4px);
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.combo-option {
  display: flex; flex-direction: column;
  padding: 10px 14px;
  line-height: 1.4;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.combo-option:last-child { border-bottom: 0; }
.combo-option span { font-size: 13px; color: var(--mid); }
.combo-option:hover, .combo-option.is-active { background: var(--green-light); }

/* Nearest meeting point / all meeting points */
.pickup-result {
  background: var(--green-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 0 0 16px;
  font-size: 15px;
}
.pickup-result-label {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green);
}
.pickup-result h3 { font-size: 24px; margin: 2px 0; }
.pickup-result .distance { color: var(--mid); font-size: 14px; }
/* Shown while looking up an address, and when the closest hotel is far away. */
.pickup-hint { color: var(--mid); font-size: 14px; }
.far-note {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--gold-light);
  border: 1px solid var(--gold);
  border-radius: 4px;
  font-size: 14px;
}
.call-message { margin-top: 8px; }
.pickup-result.is-stale { opacity: 0.55; transition: opacity 0.2s; }
.attribution { margin-top: 6px; font-size: 12px; color: var(--mid); }
.attribution a { color: var(--mid); }

/* The main "book" button: green, white text, 4px corners (the site's button style). */
.btn-primary {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 22px;
  font-family: inherit;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--green);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--green-hover); }

.form-status {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--gold-light);
  border: 1px solid var(--gold);
  border-radius: 8px;
  font-size: 14px; font-weight: 500;
}
.form-status ul { margin-left: 18px; }

/* ── FOOTER ── */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--cream);
  padding: 32px 16px;
  font-size: 14px;
  color: var(--mid);
  text-align: center;
}
.site-footer strong { color: var(--charcoal); font-weight: 500; }
.footer-legal { font-size: 13px; }
.footer-legal a { color: var(--mid); }

/* Phones and small tablets: one column. The summary becomes a slim bar fixed to the
   bottom of the screen (just the total). Tapping it opens the full details upward,
   and tapping again closes it, so it never blocks the form unless the customer asks. */
@media (max-width: 860px) {
  .booking-layout { grid-template-columns: minmax(0, 1fr); }

  .summary {
    position: fixed;
    top: auto;                 /* cancels the computer layout's "top: 24px", which would stretch the bar full-height */
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .summary-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 8px 16px;
    background: transparent;
    border: 0;
    font-family: inherit;
    color: var(--charcoal);
    text-align: left;
    cursor: pointer;
  }
  .summary-toggle-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
  .summary-toggle-label { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
  .summary-toggle-sub { font-size: 13px; color: var(--mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .summary-toggle-total { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 600; color: var(--green); }
  .summary-chevron { font-size: 11px; color: var(--mid); transition: transform 0.2s; }
  .summary.is-open .summary-chevron { transform: rotate(180deg); }

  .summary-body { display: none; padding: 0 16px 16px; max-height: 55vh; overflow-y: auto; border-top: 1px solid var(--border); }
  .summary.is-open .summary-body { display: block; }
  .summary-title { display: none; }
  .summary-total strong { font-size: 28px; }

  /* Leave room so the bar never hides the last things on the page. */
  .page { padding-bottom: 32px; }
  .site-footer { padding-bottom: 96px; }
}

@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
  .page { padding-top: 32px; }
  .card { padding: 16px; }
  .calendar-title { font-size: 24px; }
  .days, .weekdays { gap: 2px; }
}

/* ── CONFIRMATION PAGE ── */
.confirm { max-width: 640px; }
.confirm-lead { font-size: 18px; margin-bottom: 12px; }
.confirm-highlight {
  background: var(--green-light);
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
  font-weight: 500;
}
.confirm-message { font-size: 17px; color: var(--charcoal); }
.confirm-hint { color: var(--mid); }
.confirm-card { margin-bottom: 24px; }
.confirm-small { font-size: 14px; color: var(--mid); margin-top: 12px; }