/*
 * Additions on top of styles.css (which is the approved demo stylesheet, kept byte-for-byte).
 * The demo drove its booking wizard and links with <button onclick>; the real site uses plain links
 * and forms so it works as static server-rendered HTML. Everything here makes those anchors/forms
 * look exactly like the demo's buttons.
 */

/* Rules the demo kept in an inline <style> on index.html, moved here verbatim */
.gallery { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery .stack { display: grid; gap: 16px; }
.gallery .tall { aspect-ratio: 4/3.2; }
.quiz { background: var(--mint); }
.quiz .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.quiz img { border-radius: var(--radius); box-shadow: var(--shadow); max-width: 440px; margin-inline: auto; }
@media (max-width: 900px) { .gallery, .quiz .wrap { grid-template-columns: 1fr; } }

/* Anchors standing in for the demo's <button>s */
a.icon-btn { display: inline-block; text-decoration: none; font: 13.3333px Arial; line-height: normal; }
.service { text-decoration: none; }
a.pick { text-decoration: none; }
.cal a, .cal-head a, a.slot { text-decoration: none; }
.cal a {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font: 600 .9rem var(--sans); color: var(--ink);
}
.cal a:hover { background: var(--mint); }
.cal a.avail { background: #eaf6e4; }
.cal a.sel { background: var(--forest); color: #fff; }
.cal-head a {
  display: grid; place-items: center; border: 1px solid var(--line); background: #fff; border-radius: 50%; width: 34px; height: 34px; font-size: 1rem; color: inherit;
}
a.slot { display: block; text-align: center; }
a.btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; pointer-events: none; }

/* The wizard is a page-level overlay now: keep the page behind it from scrolling, and make the
   backdrop a link back to the menu (replaces the demo's click-outside-to-close script). */
body:has(.modal.open) { overflow: hidden; }
.modal-backdrop { position: absolute; inset: 0; }
.sheet { position: relative; }

/* Inline styles the demo's markup carried, moved here unchanged in effect */
.step .field-error, .form .field-error { color: #b3261e; font-size: .78rem; font-weight: 600; }
.step .form-error { background: #fdecea; color: #b3261e; border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: .9rem; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.bookings-box { max-width: 560px; margin: 0 auto; padding: 60px 0 90px; }
.booking-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; margin-bottom: 10px; background: #fff; }
.booking-row small { display: block; color: var(--ink-soft); }