/* The Blackroom's booking page — the tokens of lebistroarosa.ch (its :root, read 2026-10-15), nothing new */
:root {
  --ink: #0a0a09; --char: #15130f; --coal: #1f1b16; --paper: #ede5d8; --soft: #d9d0c2; --mute: #a0968a;
  --line: #ede5d824; --gold: #c9a46a; --glow: #e8cc98; --alert: #e0907a;
  --display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 72px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ink); color: var(--paper); font: 400 17px/1.6 var(--body); padding-inline: var(--gutter); }
[hidden] { display: none !important; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 880px; margin: 0 auto; padding-block: 24px; border-bottom: 1px solid var(--line); }
.mark { font: 400 24px/1 var(--display); color: var(--paper); text-decoration: none; letter-spacing: -.3px; }
.mark span { color: var(--gold); }
.proto { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--gold); padding: 6px 10px; }

.wrap { max-width: 880px; margin: 0 auto; padding-block: 40px 64px; display: grid; gap: 28px; }
.kicker { font-size: 12px; letter-spacing: 3.12px; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
h1 { font: 400 clamp(36px, 6vw, 56px)/1.05 var(--display); letter-spacing: -.84px; margin: 0; text-wrap: balance; }
h2 { font: 400 clamp(26px, 4vw, 34px)/1.15 var(--display); letter-spacing: -.4px; margin: 0 0 18px; text-wrap: balance; }
.lede { color: var(--soft); max-width: 60ch; margin: 14px 0 0; }

.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0; margin: 0;
  counter-reset: s; }
.steps li { counter-increment: s; font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--mute);
  border-top: 1px solid var(--line); padding-top: 10px; }
.steps li::before { content: counter(s, decimal-leading-zero) " "; color: var(--mute); }
.steps li.on, .steps li.done { color: var(--paper); border-top-color: var(--gold); }
.steps li.on::before, .steps li.done::before { color: var(--gold); }

.panel { background: var(--char); border: 1px solid var(--line); padding: clamp(20px, 4vw, 36px); display: grid; gap: 16px; }
.row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
form label { display: grid; gap: 6px; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--soft); }
input, select { font: 400 16px/1.3 var(--body); color: var(--paper); background: var(--ink); border: 1px solid var(--line);
  border-radius: 0; padding: 12px; width: 100%; min-width: 0; letter-spacing: normal; text-transform: none; }
/* one shape for every field: one height, and the browsers' own date and list controls drawn away (Safari rounds the date
   and centres it), so the date and the two lists are the same box with the same gold chevron. The date's own button
   stays where the chevron is, invisible, and opens the calendar */
input:not([type="checkbox"]):not([type="radio"]), select { height: 48px; }
select, input[type="date"] { -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer; }
input[type="date"] { position: relative; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0 0 0 auto; width: 44px; height: auto;
  margin: 0; padding: 0; opacity: 0; cursor: pointer; }
form label:has(> select, > input[type="date"]) { position: relative; }
form label:has(> select, > input[type="date"])::after { content: ""; position: absolute; right: 19px; bottom: 22px;
  width: 7px; height: 7px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(45deg);
  pointer-events: none; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, .offer:focus-within { outline: 1px solid var(--gold); outline-offset: 2px; }
/* a step's heading takes the focus when the step opens, for a screen reader: no box drawn round it */
[tabindex="-1"]:focus { outline: none; }
.hint { color: var(--mute); font-size: 15px; margin: 0; max-width: 70ch; }
/* the phone and the e-mail: a tap calls or writes */
.sel { color: var(--soft); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--gold);
  text-underline-offset: 3px; }
.sel:hover { color: var(--glow); }
.msg .sel { color: inherit; }
.msg { margin: 0; min-height: 1.4em; color: var(--glow); font-size: 15px; }
.msg.bad { color: var(--alert); }

.btn { justify-self: start; font: 400 12px/1 var(--body); letter-spacing: 2.4px; text-transform: uppercase; color: var(--paper);
  background: transparent; border: 1px solid var(--gold); padding: 16px 22px; cursor: pointer; }
.btn:hover { background: var(--gold); color: var(--ink); }
.btn[disabled] { opacity: .5; cursor: wait; }
.link { background: none; border: 0; color: var(--mute); font: inherit; font-size: 14px; cursor: pointer; padding: 0;
  min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.link[disabled] { opacity: .4; cursor: default; text-decoration: none; }
.actions { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

.offers { display: grid; gap: 10px; }
.offer { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: start; padding: 16px;
  border: 1px solid var(--line); background: var(--ink); cursor: pointer;
  text-transform: none; letter-spacing: normal; font-size: 16px; color: var(--paper); }
.offer:has(input:checked) { border-color: var(--gold); }
.offer input { width: auto; margin: 5px 0 0; accent-color: var(--gold); }
.offer .name { font: 400 22px/1.2 var(--display); }
.offer .note { grid-column: 2; color: var(--mute); font-size: 14px; }
.offer .price { font-size: 15px; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.offer .rule { grid-column: 2 / 4; font-size: 14px; color: var(--soft); border-top: 1px solid var(--line); padding-top: 8px; margin-top: 6px; }

.terms { font-size: 14px; color: var(--soft); border-left: 1px solid var(--gold); padding-left: 14px; display: grid; gap: 6px; }
.terms p { margin: 0; }
/* the whole line is the tap area, at least 44 px high; the box keeps its square beside a long sentence */
form .check { display: flex; gap: 12px; align-items: flex-start; padding-block: 10px; cursor: pointer;
  text-transform: none; letter-spacing: normal; font-size: 15px; color: var(--paper); }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; padding: 0; accent-color: var(--gold); cursor: pointer; }

.summary { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: 15px; }
.summary dt { color: var(--mute); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; padding-top: 2px; }
.summary dd { margin: 0; }
/* Adyen's card form is drawn for a light ground: it sits on the site's paper colour */
.card-host { background: var(--paper); color: var(--ink); padding: 18px; }

.foot { max-width: 880px; margin: 0 auto; padding-block: 24px 40px; border-top: 1px solid var(--line); color: var(--mute); font-size: 14px; }
.foot p { margin: 0 0 6px; }
.foot .small { font-size: 12px; }

@media (max-width: 640px) {
  .row, .row.two { grid-template-columns: minmax(0, 1fr); }
  .steps li { font-size: 10px; letter-spacing: 1.2px; }
  .offer { grid-template-columns: auto 1fr; }
  .offer .price { grid-column: 2; }
  .offer .rule { grid-column: 1 / 3; }
}
@media (prefers-reduced-motion: no-preference) { .panel { animation: rise .35s cubic-bezier(.16, 1, .3, 1); } }
@keyframes rise { from { transform: translateY(6px); } to { transform: none; } }