/*
 * WILLA PORTAL — Booking UI unification, visual-only patch 2026-10-10.
 * Design source: own website /rezerwacja-online/; scoped to booking checkout.
 * Deliberately no universal tag selectors, no PMS grid styles, no JS/business logic.
 * Load AFTER the existing booking and shared CSS. Keep [hidden] behavior unchanged.
 */
:root {
  --wui-wine: #9c3b3b;
  --wui-wine-hover: #9c3b3b;
  --wui-ivory: #fdfaf7;
  --wui-cream: #f2ece4;
  --wui-ink: #282525;
  --wui-muted: #655e58;
  --wui-line: #ddd1c4;
  --wui-gold: #e0d0b8;
  --wui-radius-dialog: 0px;
  --wui-radius-card: 3px;
  --wui-radius-control: 3px;
  --wui-font-title: 'Playfair Display', Georgia, serif;
  --wui-font-body: 'Montserrat', Arial, sans-serif;
}

/* Correct full-colour brand on ivory; no simulated wine-coloured badge. */
.booking-shell > header .brand {
  display: inline-flex;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  width: auto;
  line-height: 1;
  align-items: center;
}
.booking-shell > header .brand img {
  width: clamp(150px, 15vw, 198px);
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Guest step dialog follows the square editorial geometry of source prebooking. */
body.checkout-active::before {
  background: #24171bcf;
  backdrop-filter: blur(5px);
}
body.checkout-active #checkout:not(.checkout-result) {
  inset: 24px auto 24px 50%;
  width: min(1000px, calc(100vw - 48px));
  max-width: 1000px;
  max-height: calc(100dvh - 48px);
  transform: translateX(-50%);
  padding: 0;
  border: 1px solid #d6c6ba;
  border-radius: var(--wui-radius-dialog);
  background: var(--wui-ivory);
  box-shadow: 0 34px 90px #160d124f;
  overflow-y: auto;
  scrollbar-gutter: auto;
}
#checkout .checkout-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 19px 27px;
  margin: 0;
  border-bottom: 1px solid var(--wui-line);
  background: var(--wui-ivory);
  color: var(--wui-muted);
  font: 500 .79rem/1.45 var(--wui-font-body);
}
#checkout .checkout-toolbar .secondary {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #bc9f91;
  border-radius: 0;
  color: var(--wui-wine);
  padding: 7px 0;
  min-height: 44px;
  font: 600 .8rem/1.4 var(--wui-font-body);
  box-shadow: none;
}
#checkout .checkout-toolbar .secondary:hover {
  color: var(--wui-wine-hover);
  background: transparent;
  border-color: var(--wui-wine-hover);
}
#checkout .checkout-card {
  padding: 26px 28px 32px;
  border: 0;
  border-radius: 0;
  border-top: 0;
  background: var(--wui-ivory);
  box-shadow: none;
  color: var(--wui-ink);
}
#checkout .checkout-layout {
  grid-template-columns: minmax(0, 1fr) minmax(238px, 290px);
  column-gap: 30px;
  row-gap: 14px;
  align-items: start;
}
#checkout .checkout-layout > .eyebrow {
  grid-column: 1 / -1;
  font: 700 .70rem/1.4 var(--wui-font-body);
  letter-spacing: .17em;
  color: var(--wui-wine);
  margin: 0;
}
#checkout .checkout-layout > h1 {
  grid-column: 1 / -1;
  margin: 0 0 12px;
  color: var(--wui-ink);
  font: 400 clamp(1.95rem, 3.2vw, 2.55rem)/1.18 var(--wui-font-title);
  letter-spacing: -.035em;
}
/* JS focuses this non-interactive heading to announce the step; it is not a button. */
#checkout h1[tabindex="-1"]:focus { outline: none; }
#checkout :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid #a98159;
  outline-offset: 3px;
}
#checkout .checkout-layout > h2,
#checkout .guest-form > h2,
#checkout .checkout-review > h2 {
  color: var(--wui-ink);
  font: 400 1.4rem/1.3 var(--wui-font-title);
  letter-spacing: -.015em;
}

/* One visual system for room summary, form, terms and buyer details. */
#checkout .checkout-layout > .stay-summary {
  padding: 20px;
  border: 1px solid var(--wui-line);
  border-radius: var(--wui-radius-card);
  background: #f4eee8;
  color: var(--wui-ink);
  box-shadow: none;
  top: 18px;
}
#checkout .stay-summary > .eyebrow {
  display: block;
  color: var(--wui-wine);
  font: 700 .66rem/1.6 var(--wui-font-body);
  letter-spacing: .15em;
  margin-bottom: 8px;
}
#checkout .stay-summary h2 {
  font: 400 1.31rem/1.3 var(--wui-font-title);
  letter-spacing: -.025em;
  margin: 5px 0 7px;
}
#checkout .stay-summary h3 { font: 400 1.09rem/1.35 var(--wui-font-title); }
#checkout .stay-summary p,
#checkout .stay-summary details { line-height: 1.65; font-size: .84rem; }
#checkout .stay-summary .total {
  color: var(--wui-ink);
  font: 700 1.7rem/1.18 var(--wui-font-body);
  letter-spacing: -.045em;
  padding: 15px 0 0;
  margin: 14px 0;
  border-top: 1px solid var(--wui-line);
}
#checkout .stay-summary .summary-room {
  border: 0;
  border-bottom: 1px solid var(--wui-line);
  border-radius: 0;
  padding: 9px 0 12px;
}
#checkout .stay-summary .summary-condition { color: var(--wui-muted); }
#checkout .stay-summary .summary-conditions,
#checkout .stay-summary .summary-promo {
  border: 0;
  border-top: 1px solid var(--wui-line);
  border-radius: 0;
  padding: 12px 0 2px;
}
#checkout .stay-summary .summary-conditions > summary,
#checkout .stay-summary .summary-promo > summary {color: var(--wui-wine);}

#checkout .guest-form {
  gap: 14px 16px;
  align-content: start;
}
#checkout .guest-form > h2 { margin: 5px 0 2px; }
#checkout .guest-form label { font: 500 .80rem/1.5 var(--wui-font-body); color: var(--wui-ink); }
#checkout .guest-form :is(input:not([type="radio"]):not([type="checkbox"]), textarea, select),
#checkout .summary-promo input {
  box-sizing: border-box;
  min-height: 48px;
  padding: 11px 12px;
  border-radius: var(--wui-radius-control);
  border: 1px solid #c8b9ac;
  background: #fff;
  color: var(--wui-ink);
  font: 400 .91rem/1.5 var(--wui-font-body);
  box-shadow: none;
}
#checkout .guest-form :is(input:not([type="radio"]):not([type="checkbox"]), textarea, select):hover { border-color: #b9a495; }
#checkout .guest-form :is(input:not([type="radio"]):not([type="checkbox"]), textarea, select):focus { border-color: var(--wui-wine); }
#checkout .guest-form textarea { min-height: 88px; }
#checkout .guest-form fieldset {
  padding: 15px 16px 17px;
  border: 1px solid var(--wui-line);
  border-radius: var(--wui-radius-card);
  background: transparent;
}
#checkout .guest-form legend {
  color: var(--wui-ink);
  font: 600 .83rem/1.4 var(--wui-font-body);
  padding: 0 7px;
}
#checkout .document-choice { gap: 10px; }
#checkout .document-tile {
  min-height: 64px;
  align-items: center;
  padding: 14px 13px;
  border: 1px solid var(--wui-line);
  border-radius: var(--wui-radius-card);
  background: #fffefa;
  transition: border-color .15s, background-color .15s;
}
#checkout .document-tile:has(:checked) {
  border-color: var(--wui-wine);
  background: #f8eeee;
  box-shadow: inset 0 0 0 1px var(--wui-wine);
}
#checkout .guest-form input[type="checkbox"],
#checkout .guest-form input[type="radio"] {
  accent-color: var(--wui-wine);
  width: 20px;
  height: 20px;
}
#checkout .invoice-fields { gap: 14px; }
#checkout .legal-line { gap: 8px; margin-bottom: 17px; }
#checkout .legal-line:last-child { margin-bottom: 0; }
#checkout .legal-line a { color: var(--wui-wine); text-decoration-thickness: 1px; text-underline-offset: 4px; }
#checkout .form-hint, #checkout .legal-line > small { color: var(--wui-muted); }

#checkout .guest-form button,
#checkout .review-form button,
#checkout.checkout-result > button,
#checkout.checkout-result > a.button,
#checkout .summary-promo button {
  min-height: 48px;
  padding: 12px 17px;
  border: 1px solid var(--wui-wine);
  border-radius: var(--wui-radius-control);
  background: var(--wui-wine);
  color: #fff;
  font: 600 .88rem/1.45 var(--wui-font-body);
  text-align: center;
  transition: background-color .16s, border-color .16s;
}
#checkout .guest-form button:hover,
#checkout .review-form button:hover,
#checkout.checkout-result > button:hover,
#checkout.checkout-result > a.button:hover { background: var(--wui-wine-hover); border-color: var(--wui-wine-hover); }
#checkout .guest-form button.secondary,
#checkout .review-form button.secondary,
#checkout.checkout-result > button.secondary {
  background: transparent;
  color: var(--wui-wine);
}
#checkout .guest-form button.secondary:hover,
#checkout .review-form button.secondary:hover { background: #f3e7e2; }
#checkout .guest-form button:disabled,
#checkout .review-form button:disabled { opacity: .58; cursor: wait; }

/* Review uses exactly the same editorial panel; no duplicate visual language. */
#checkout .checkout-review > h2 {
  margin: 12px 0 2px;
  padding-top: 15px;
  border-top: 1px solid var(--wui-line);
}
#checkout .checkout-review > p {
  margin: 0 0 3px;
  color: var(--wui-muted);
  font: 400 .86rem/1.65 var(--wui-font-body);
  overflow-wrap: anywhere;
}
#checkout .review-form {
  gap: 10px 12px;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid var(--wui-line);
}
#checkout .review-form > p { margin: 0; color: var(--wui-muted); }

/* All terminal statuses: same rectangular card, clearer visual hierarchy. */
body.checkout-active #checkout.checkout-result {
  inset: 50% auto auto 50%;
  width: min(730px, calc(100vw - 48px));
  max-width: 730px;
  max-height: calc(100dvh - 48px);
  transform: translate(-50%, -50%);
  padding: 0 30px 28px;
  border: 1px solid #d6c6ba;
  border-radius: var(--wui-radius-dialog);
  background: var(--wui-ivory);
  color: var(--wui-ink);
  box-shadow: 0 34px 90px #160d124f;
  overflow-y: auto;
}
#checkout.checkout-result .checkout-toolbar {
  margin: 0 -30px 27px;
  padding: 18px 30px;
}
#checkout.checkout-result > h1 {
  font: 400 clamp(2rem, 4vw, 2.7rem)/1.17 var(--wui-font-title);
  letter-spacing: -.035em;
  color: var(--wui-ink);
  margin: 0 0 13px;
}
#checkout.checkout-result > h2 {
  font: 400 1.4rem/1.3 var(--wui-font-title);
  margin: 24px 0 12px;
}
#checkout.checkout-result > p {
  font: 400 .90rem/1.75 var(--wui-font-body);
  color: var(--wui-muted);
  margin: 9px 0;
  overflow-wrap: anywhere;
}
#checkout.checkout-result > .notice {
  color: var(--wui-ink);
  border: 1px solid var(--wui-line);
  border-left: 3px solid var(--wui-wine);
  border-radius: var(--wui-radius-card);
  background: #f4eee8;
  padding: 13px 16px;
  margin: 10px 0 20px;
}
#checkout.checkout-result > strong {
  font: 700 1.15rem/1.45 var(--wui-font-body);
  color: var(--wui-ink);
  display: block;
  padding: 13px 0;
  margin: 13px 0;
  border-top: 1px solid var(--wui-line);
  border-bottom: 1px solid var(--wui-line);
  overflow-wrap: anywhere;
}
#checkout.checkout-result > :is(button, a.button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 14px 8px 0 0;
  text-decoration: none;
}
#checkout .checkout-error, #checkout .error {
  background: #fff4f2;
  border: 1px solid #d8a7a2;
  border-left: 3px solid var(--wui-wine);
  border-radius: var(--wui-radius-card);
  padding: 13px 16px;
}

/* Simple responsive adaptation, not a scaled-down desktop screenshot. */
@media (max-width: 760px) {
  body.checkout-active #checkout:not(.checkout-result) {
    inset: 0;
    transform: none;
    width: 100%;
    max-width: none;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  #checkout .checkout-toolbar {
    padding: 11px 18px;
    gap: 8px;
    font-size: .72rem;
  }
  #checkout .checkout-card { padding: 21px 18px 36px; }
  #checkout .checkout-layout {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  #checkout .checkout-layout > h1 {
    font-size: clamp(1.85rem, 7.8vw, 2.3rem);
    margin: 0 0 5px;
  }
  #checkout .checkout-layout > .stay-summary {
    width: 100%;
    position: static;
    padding: 16px;
    order: 0;
  }
  #checkout .guest-form { grid-template-columns: minmax(0, 1fr); width: 100%; gap: 13px; }
  #checkout .guest-form > * { grid-column: 1 !important; }
  #checkout .document-choice { grid-template-columns: 1fr 1fr; }
  #checkout .document-tile { min-height: 58px; padding: 10px; }
  #checkout .review-form { flex-direction: column; align-items: stretch; }
  #checkout .review-form button { width: 100%; }
  body.checkout-active #checkout.checkout-result {
    inset: 0;
    width: 100%;
    max-width: none;
    max-height: 100dvh;
    min-height: 100dvh;
    transform: none;
    padding: 0 18px 28px;
    border: 0;
    border-radius: 0;
  }
  #checkout.checkout-result .checkout-toolbar {
    margin: 0 -18px 23px;
    padding: 12px 18px;
  }
  #checkout.checkout-result > h1 { font-size: 2.05rem; }
  #checkout.checkout-result > :is(button, a.button) { width: 100%; margin: 10px 0 0; }
}
@media (max-width: 380px) {
  #checkout .checkout-toolbar {font-size:.69rem;}
  #checkout .document-choice {grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce) {
  #checkout button, #checkout a.button { transition: none; }
}

/* Acceptance adjustment: readable mobile inputs, no iOS focus zoom. */
@media(max-width:760px){#checkout .guest-form :is(input:not([type="radio"]):not([type="checkbox"]),textarea,select),#checkout .summary-promo input{font-size:16px}}