:root {
  --s11r-navy: #0b3448;
  --s11r-water: #159cba;
  --s11r-gold: #d5a62e;
  --s11r-cream: #f6f4eb;
  --s11r-white: #fff;
  --s11r-muted: #63747c;
  --s11r-line: #d9e2df;
  --s11r-danger: #a12d2d;
  --s11r-ok: #147248;
}

.s11r-booking,
.s11r-station-list,
.s11r-confirmation,
[data-s11r-customer-bookings] {
  box-sizing: border-box;
  max-width: 1280px;
  margin: 2rem auto;
  overflow: hidden;
  border: 1px solid var(--s11r-line);
  border-radius: 24px;
  background: var(--s11r-white);
  box-shadow: 0 18px 55px rgba(11, 52, 72, .09);
  color: var(--s11r-navy);
  font-family: inherit;
  hyphens: none;
  overflow-wrap: break-word;
  word-break: normal;
}

.s11r-booking * { box-sizing: border-box; }
.s11r-booking__header { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.6rem; background: linear-gradient(120deg, var(--s11r-cream), #eef8f8); }
.s11r-booking__header h2 { margin: .1rem 0; font-size: clamp(1.7rem, 4vw, 2.7rem); }
.s11r-eyebrow { margin: 0; color: var(--s11r-water); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.s11r-brand-mark { width: 58px; color: var(--s11r-navy); font-size: 2.7rem; font-weight: 800; letter-spacing: -.25em; line-height: .7; }
.s11r-brand-mark span { display: block; color: var(--s11r-gold); font-size: 1.2rem; letter-spacing: 0; text-align: center; }
.s11r-progress { position: relative; height: 8px; background: #e9eeee; }
.s11r-progress span { display: block; width: 25%; height: 100%; background: linear-gradient(90deg, var(--s11r-water), var(--s11r-gold)); transition: width .25s; }
.s11r-progress b { position: absolute; top: 1rem; right: 1.4rem; color: var(--s11r-muted); font-size: .78rem; white-space: nowrap; }
.s11r-step { margin: 0; padding: 2rem 1.6rem 1.25rem; border: 0; }
.s11r-step legend { padding-top: 2rem; font-size: 1.35rem; font-weight: 850; }
.s11r-date-grid,
.s11r-customer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.s11r-date-grid--people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s11r-field-wide { grid-column: 1 / -1; }
.s11r-booking label { display: grid; gap: .35rem; font-size: .92rem; font-weight: 700; }
.s11r-booking input,
.s11r-booking select,
.s11r-booking textarea { width: 100%; padding: .8rem .9rem; border: 1px solid #b8c7ca; border-radius: 10px; background: #fff; color: #102f3d; font: inherit; }
.s11r-booking input:focus,
.s11r-booking select:focus,
.s11r-booking textarea:focus,
.s11r-button:focus-visible,
.s11r-station:focus-visible,
.s11r-map-point:focus-visible { outline: 3px solid rgba(21, 156, 186, .32); outline-offset: 2px; border-color: var(--s11r-water); }
.s11r-toolbar,
.s11r-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0; }
.s11r-check { display: flex !important; grid-template-columns: auto 1fr !important; align-items: flex-start; gap: .6rem !important; margin: .75rem 0; font-weight: 600 !important; }
.s11r-check input { flex: 0 0 auto; width: auto; margin-top: .2rem; }
.s11r-button { border: 0; border-radius: 999px; padding: .78rem 1.2rem; background: var(--s11r-navy); color: #fff; font: inherit; font-weight: 800; line-height: 1.3; cursor: pointer; text-wrap: balance; }
.s11r-button:hover { filter: brightness(1.12); }
.s11r-button:disabled { cursor: not-allowed; opacity: .55; }
.s11r-button--primary { background: linear-gradient(100deg, var(--s11r-navy), #0a5a72); }
.s11r-button--quiet { background: #eaf0ef; color: var(--s11r-navy); }
.s11r-actions { justify-content: flex-end; padding: 0 1.6rem 1.6rem; }

.s11r-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 310px); gap: 1rem; align-items: stretch; margin: 1rem 0; }
.s11r-map { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 18px; background: #dae8e2; aspect-ratio: 1000 / 429; }
.s11r-map img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s11r-map__points { position: absolute; inset: 0; }
.s11r-map-point { position: absolute; display: grid; width: 36px; height: 36px; padding: 0; transform: translate(-50%, -50%); place-items: center; border: 3px solid #fff; border-radius: 50%; background: var(--s11r-gold); box-shadow: 0 2px 9px #0007; color: var(--s11r-navy); font-weight: 900; line-height: 1; cursor: pointer; transition: transform .16s ease, background .16s ease; }
.s11r-map-point--standard { background: var(--s11r-navy); color: #fff; }
.s11r-map-point--unknown { border-style: dashed; background: #98a7aa; color: #fff; }
.s11r-map-point[aria-pressed="true"] { z-index: 2; transform: translate(-50%, -50%) scale(1.18); background: var(--s11r-water); color: #fff; }
.s11r-map-point[disabled] { background: #6b7577; opacity: .64; }
.s11r-selected { min-width: 0; overflow: hidden; padding: 1.25rem; border: 1px solid var(--s11r-line); border-radius: 18px; background: linear-gradient(160deg, #fff, #f4f8f6); box-shadow: 0 10px 30px rgba(11, 52, 72, .07); }
.s11r-selected img { display: block; width: calc(100% + 2.5rem); max-width: none; margin: -1.25rem -1.25rem 1rem; aspect-ratio: 16 / 10; object-fit: cover; }
.s11r-selected h3 { margin: .35rem 0 .6rem; font-size: 1.55rem; line-height: 1.08; }
.s11r-selected__price { margin: .8rem 0 .2rem; font-size: 1.05rem; font-weight: 850; }
.s11r-selected__status { margin: .25rem 0 0; font-weight: 750; }
.s11r-selected__status--available { color: var(--s11r-ok); }
.s11r-selected__status--unavailable { color: var(--s11r-danger); }
.s11r-selected__status--unknown { color: var(--s11r-muted); }
.s11r-pill { display: inline-block; padding: .27rem .58rem; border-radius: 999px; background: #e4f3f6; color: #07516b; font-size: .76rem; font-weight: 850; }
.s11r-pill--premium { background: #fff0c6; color: #674600; }

.s11r-stations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.s11r-station { display: grid; grid-template-columns: minmax(130px, 44%) minmax(0, 1fr); min-width: 0; min-height: 112px; padding: 0; overflow: hidden; border: 1px solid var(--s11r-line); border-radius: 15px; background: #fff; color: var(--s11r-navy); text-align: left; cursor: pointer; }
.s11r-station[aria-pressed="true"] { border: 3px solid var(--s11r-water); background: #eaf9fb; }
.s11r-station[disabled] { cursor: not-allowed; opacity: .5; }
.s11r-station__media { display: block; min-width: 0; background: var(--s11r-cream); }
.s11r-station__media img { display: block; width: 100%; height: 100%; min-height: 112px; object-fit: cover; }
.s11r-station__copy { display: grid; min-width: 0; padding: .85rem .9rem; align-content: center; gap: .3rem; white-space: normal; }
.s11r-station__copy b,
.s11r-station__copy span { display: block; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.s11r-station__copy b { font-size: 1rem; line-height: 1.2; }
.s11r-station__copy span { color: var(--s11r-muted); font-size: .78rem; line-height: 1.35; }

.s11r-addons { margin: 1.2rem 0; }
.s11r-billing { margin: 1rem 0; padding: 1.1rem; border: 1px solid var(--s11r-line); border-radius: 14px; background: #f5f8f7; }
.s11r-billing[hidden] { display: none; }
.s11r-billing h3 { margin: 0 0 1rem; }
.s11r-invoice-toggle { margin: 1.2rem 0 !important; padding: .85rem 1rem; border-radius: 12px; background: #edf6f6; }
.s11r-summary { margin: 1rem 0; padding: 1.1rem; border-radius: 16px; background: var(--s11r-cream); }
.s11r-summary dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem 1rem; margin: 0; }
.s11r-summary dt,
.s11r-summary dd { min-width: 0; margin: 0; }
.s11r-summary dd { text-align: right; white-space: nowrap; }
.s11r-summary .s11r-total { margin-top: .45rem; padding-top: .65rem; border-top: 1px solid var(--s11r-line); font-size: 1.15rem; font-weight: 900; }
.s11r-summary--final { padding: clamp(1rem, 3vw, 1.6rem); border: 2px solid #dfcf9d; background: linear-gradient(145deg, #fbf9f1, #f4f1e7); }
.s11r-final-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(270px, .85fr); gap: 1.4rem; }
.s11r-summary__facts { align-content: start; padding: 1rem; border-radius: 12px; background: #fff; }
.s11r-summary__facts dt { color: var(--s11r-muted); font-size: .8rem; font-weight: 800; text-transform: uppercase; }
.s11r-summary__facts dd { margin-bottom: .8rem; white-space: normal; }
.s11r-cancellation { margin-top: 1.2rem; padding: 1rem 1.15rem; border-left: 4px solid var(--s11r-gold); border-radius: 0 12px 12px 0; background: #fff8df; }
.s11r-cancellation h3 { margin: 0 0 .5rem; }
.s11r-cancellation ul { margin: 0; padding-left: 1.2rem; }
.s11r-payment-info { padding: .8rem 1rem; border-radius: 10px; background: #edf6f6; color: var(--s11r-muted); font-size: .88rem; }
.s11r-alert { margin: 1rem 1.6rem 0; padding: .85rem 1rem; border: 1px solid #e7b3af; border-radius: 12px; background: #fff0ef; color: var(--s11r-danger); }
.s11r-alert.is-success { border-color: #a7d4b9; background: #e9f7ef; color: var(--s11r-ok); }
.s11r-hold-clock { padding: .8rem; border-left: 4px solid var(--s11r-gold); background: #fff8df; }

.s11r-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1.2rem; }
.s11r-card { min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--s11r-line); border-radius: 14px; background: #fff; }
.s11r-card__image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.s11r-card__body { padding: 1rem; }
.s11r-card h3 { margin-top: 0; overflow-wrap: anywhere; }
.s11r-status { display: inline-block; padding: .25rem .55rem; border-radius: 999px; background: #e7f5f7; font-size: .78rem; font-weight: 800; }
.s11r-spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid #fff7; border-top-color: #fff; border-radius: 50%; animation: s11r-spin .7s linear infinite; }
@keyframes s11r-spin { to { transform: rotate(360deg); } }

@media (max-width: 1040px) {
  .s11r-map-layout { grid-template-columns: 1fr; }
  .s11r-selected { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 1rem; align-items: center; }
  .s11r-selected img { grid-row: 1 / 6; width: 150px; height: 120px; margin: 0; border-radius: 12px; }
  .s11r-stations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .s11r-booking { margin: 0; border-radius: 0; }
  .s11r-booking__header { padding: 1rem; }
  .s11r-step { padding-inline: 1rem; }
  .s11r-actions { padding-inline: 1rem; }
  .s11r-progress b { right: .7rem; }
  .s11r-date-grid,
  .s11r-date-grid--people,
  .s11r-customer-grid,
  .s11r-final-grid { grid-template-columns: 1fr; }
  .s11r-field-wide { grid-column: auto; }
  .s11r-toolbar { align-items: stretch; flex-direction: column; }
  .s11r-selected { display: block; }
  .s11r-selected img { width: calc(100% + 2.5rem); height: auto; margin: -1.25rem -1.25rem 1rem; border-radius: 0; }
  .s11r-map-point { width: 30px; height: 30px; font-size: .75rem; }
  .s11r-stations,
  .s11r-card-grid { grid-template-columns: 1fr; }
  .s11r-station { grid-template-columns: 42% minmax(0, 1fr); min-height: 106px; }
  .s11r-station__media img { min-height: 106px; }
  .s11r-summary dl { gap: .45rem .6rem; }
  .s11r-summary .s11r-summary__facts { grid-template-columns: 1fr; gap: .15rem; }
  .s11r-summary__facts dd { margin: 0 0 .8rem; text-align: left; overflow-wrap: anywhere; }
  .s11r-actions { align-items: stretch; flex-direction: column-reverse; }
  .s11r-actions .s11r-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .s11r-progress span,
  .s11r-map-point,
  .s11r-spinner { animation: none; transition: none; }
}