.booking-wrap{width:100%}
.akomio-booking{--akb-brand:var(--brand-600,#0f766e);--akb-ink:#18302b;--akb-line:#dce5e1;width:100%;max-width:none;margin-inline:auto;display:grid;gap:1.25rem;color:var(--akb-ink);font:16px/1.5 system-ui,sans-serif}
.akomio-booking [hidden]{display:none}
.akomio-booking *{min-width:0}
.akb-header{width:100%}
.akb-header h2{font-size:clamp(1.7rem,3.3vw,2.3rem);font-weight:800;line-height:1.15;margin:0}
.akb-header p{margin:.35rem 0 0}
.akb-header p,.akb-note{color:#50645e}
.akb-extras h3,.akb-voucher h3,.akb-summary h3,.akb-form legend{margin:0 0 .6rem;font-size:1.05rem;font-weight:700;padding:0}

/* Two-column desktop layout: calendar card on the left, one continuous
   booking panel on the right. The panel's own sections flow in normal
   document order instead of each claiming its own named slot in the outer
   grid, so a section that forgets to claim one (the historical akb-voucher
   bug) can no longer be auto-placed somewhere unexpected - and the same
   markup renders identically wherever `.akomio-booking` is embedded
   (generated microsite, uploaded ZIP bundle, iframe embed). */
/* Stretch, not start: before a date is picked the panel's content is
   almost empty, so `start` left it far shorter than the calendar. Stretch
   keeps both columns matched to the taller one at all times - the calendar's
   height on load, the panel's own height once picking a date fills it in. */
.akb-layout{display:grid;gap:1.25rem;align-items:stretch}
.akb-calendar-wrap{padding:clamp(1rem,3vw,1.75rem);border:1px solid var(--akb-line);border-radius:1.1rem;background:#fff;box-shadow:0 1px 2px rgba(24,48,43,.05)}
.akb-calendar-wrap .akomio-calendar{max-width:none}

.akb-panel{padding:clamp(1rem,3vw,1.75rem);border:1px solid var(--akb-line);border-radius:1.1rem;background:#fff;box-shadow:0 1px 2px rgba(24,48,43,.05)}
/* Divider + spacing only between two sections that are both actually
   visible, so a hidden section (e.g. extras when none exist, voucher
   before a quote) never leaves a stray blank gap or a floating rule. */
.akb-panel>:not([hidden])~:not([hidden]){margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--akb-line)}

.akb-status{font-weight:600;color:#9b2c2c;margin:0}

.akb-guest-picker{display:grid;gap:.25rem}
.akb-guest-picker label{font-weight:600}
.akb-guest-picker select{width:100%;font:inherit;font-weight:600;color:var(--akb-ink);padding:.65rem .75rem;border:1px solid #b9c8c2;border-radius:.5rem;background:#fff}

.akb-extra{display:flex;align-items:center;gap:.7rem;padding:.65rem 0;border-bottom:1px solid #edf1ef}
.akb-extra-main{flex:1;cursor:pointer}
.akb-extra small{display:block;color:#50645e}
.akb-extra input[type=number]{width:4.5rem;padding:.4rem}

.akb-voucher-row{display:grid;grid-template-columns:1fr auto;gap:.5rem}
/* Explicit, component-scoped button styling - a bundle's own page CSS (or a
   generated microsite's marketing `.cta,button` rule) must never be the only
   thing deciding what this control looks like, or it drifts between the
   generated site and an uploaded ZIP bundle depending on what that page
   happens to define for a bare `button`. */
.akomio-booking .akb-voucher-apply{border:1px solid var(--akb-brand);border-radius:.5rem;background:#fff;color:var(--akb-brand);font:700 .95rem inherit;padding:.65rem 1.1rem;cursor:pointer;white-space:nowrap}
.akomio-booking .akb-voucher-apply:hover{background:var(--akb-brand);color:#fff}
.akomio-booking .akb-voucher-apply:disabled{opacity:.65;cursor:wait}
.akb-voucher-message{margin:.6rem 0 0;color:#176b5b;font-weight:700}
.akb-voucher-message.is-error{color:#9b2c2c}

.akb-form{display:grid;gap:1.1rem}
.akb-form fieldset{border:0;padding:0;margin:0;display:grid;gap:.75rem}
.akb-form label{display:grid;gap:.25rem;font-weight:600}
.akb-form input,.akb-form textarea,.akb-voucher-code{font:inherit;padding:.65rem;border:1px solid #b9c8c2;border-radius:.5rem}
.akb-two{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

.akb-summary-row{display:flex;justify-content:space-between;gap:1rem;padding:.25rem 0}
.akb-total{display:flex;justify-content:space-between;gap:1rem;margin-top:.5rem;padding-top:.6rem;border-top:1px solid var(--akb-line);font-size:1.3rem;font-weight:800}

.akb-submit{border:0;border-radius:.6rem;background:var(--akb-brand);color:#fff;font:700 1.05rem inherit;padding:.9rem 1.3rem;cursor:pointer;width:100%}
.akb-submit:hover{filter:brightness(.94)}
.akb-submit:disabled{opacity:.65;cursor:wait}
.akb-error{color:#9b2c2c;margin:0}
.akb-success{padding:1.25rem;border-radius:1rem;background:#edf8f3;color:#14532d}
.akb-success h3{margin:0 0 .35rem}

@media(min-width:56rem){
  .akb-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
}
@media(max-width:34rem){
  .akb-two{grid-template-columns:1fr}
  .akb-calendar-wrap{padding:.65rem}
  .akb-panel{padding:1rem}
  .akb-extra{align-items:flex-start}
  .akb-voucher-row{grid-template-columns:1fr}
}