/* ==========================================================================
   ORA REIZEN — the booking card
   Handle: ora-booking. Loaded only on a hotel product page.

   Reuses the --ora-* tokens from ora-reizen-core, so this card cannot drift
   away from the rest of the site. It has no tokens of its own on purpose: if
   the palette changes there, it changes here.

   ⚠️ Form controls are styled explicitly, including :focus. Astra fills inputs
   and buttons on :hover AND :focus, and pins single-line inputs to 40px at
   single-class specificity — which is why the input rules below are prefixed
   with [data-ora], the one thing that reliably outranks it.
   ========================================================================== */

.ora-bform {
  background: #fff;
  border: 1px solid var(--ora-line, #E4E9EF);
  border-radius: var(--ora-r-md, 14px);
  box-shadow: var(--ora-s-lg, 0 20px 44px -14px rgba(7, 27, 51, .2));
  padding: 26px;
  max-width: 460px;
  font-family: var(--ora-f, inherit);
}

.ora-bform__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--ora-line-2, #EFF3F7);
}
.ora-bform__from {
  font-size: .8rem;
  color: var(--ora-muted, #76869A);
  font-weight: 600;
}
.ora-bform__price {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--ora-navy-800, #0B2545);
  line-height: 1;
  margin: 0;
}
.ora-bform__price .woocommerce-Price-amount { color: inherit; }
.ora-bform__unit {
  font-size: .8rem;
  color: var(--ora-muted, #76869A);
  font-weight: 600;
}

.ora-bform__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ora-bfld { display: flex; flex-direction: column; gap: 6px; }
.ora-bfld--wide { grid-column: 1 / -1; }
.ora-bfld > span {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ora-ink, #10202F);
}

[data-ora="booking-form"] .ora-bfld input,
[data-ora="booking-form"] .ora-bfld select {
  width: 100%;
  height: auto;
  min-height: 46px;
  font: inherit;
  font-size: .94rem;
  line-height: 1.4;
  color: var(--ora-ink, #10202F);
  background: #fff;
  border: 1.5px solid var(--ora-line, #E4E9EF);
  border-radius: var(--ora-r-sm, 10px);
  padding: 10px 12px;
  box-shadow: none;
  transition: border-color .2s, box-shadow .2s;
}
[data-ora="booking-form"] .ora-bfld input:focus,
[data-ora="booking-form"] .ora-bfld select:focus {
  outline: 0;
  border-color: var(--ora-gold-400, #D2A24B);
  box-shadow: 0 0 0 3px rgba(210, 162, 75, .22);
}

.ora-bform__ages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ora-bage[hidden] { display: none; }

.ora-bcheck {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ora-body, #4C5C6B);
  cursor: pointer;
}
.ora-bcheck input {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--ora-red, #E1121C);
}
.ora-bcheck small {
  display: block;
  font-size: .78rem;
  color: var(--ora-muted, #76869A);
  margin-top: 2px;
}

.ora-bcoupon { margin-top: 16px; }
[data-ora="booking-form"] .ora-bcoupon input { text-transform: uppercase; letter-spacing: .04em; }

.ora-bpay {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--ora-line-2, #EFF3F7);
}

/* ---- the quote, as returned by the server ------------------------------ */

.ora-bform__quote { margin: 20px 0 0; }
.ora-bform__quote[data-busy] { opacity: .45; }

.ora-bquote {
  background: var(--ora-cream, #FDF8F0);
  border: 1px solid var(--ora-cream-200, #F5EDDF);
  border-radius: var(--ora-r-sm, 10px);
  padding: 16px 18px;
  font-size: .88rem;
}
.ora-bquote ul { margin: 0 0 12px; padding: 0; list-style: none; }
.ora-bquote li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 0;
  color: var(--ora-body, #4C5C6B);
}
.ora-bquote li b { color: var(--ora-ink, #10202F); white-space: nowrap; }

.ora-bquote__total,
.ora-bquote__now {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 9px 0 0;
  border-top: 1px solid var(--ora-cream-200, #F5EDDF);
  font-weight: 800;
  color: var(--ora-ink, #10202F);
}
.ora-bquote__total b { font-size: 1.15rem; }
.ora-bquote__now { border-top: 0; padding-top: 4px; color: var(--ora-red, #E1121C); }
.ora-bquote__now b { color: inherit; }
.ora-bquote__later,
.ora-bquote__note {
  margin: 6px 0 0;
  font-size: .8rem;
  color: var(--ora-muted, #76869A);
}

/*
 * Real scarcity, and only ever real. Gold rather than red: this is a nudge, not
 * an alarm, and it is printed from a contracted allotment minus real bookings.
 */
.ora-bquote__scarce {
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--ora-gold-050, #FBF3E3);
  color: #7A5814;
  font-size: .8rem;
  font-weight: 600;
}

.ora-bquote--no {
  background: #FCECEC;
  border-color: #F3C9CB;
  color: #8E1017;
}
.ora-bquote--no p { margin: 0 0 8px; }
.ora-bquote__ask { color: #8E1017; font-weight: 700; text-decoration: underline; }

/* ---- the button -------------------------------------------------------- */

.ora-bform__submit {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
  border: 0;
  cursor: pointer;
}
.ora-bform__submit[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
.ora-bform__note {
  margin: 12px 0 0;
  font-size: .78rem;
  color: var(--ora-muted, #76869A);
  text-align: center;
}

/* ---- why this is safe (client round 8) ---------------------------------
   Green is used ONLY here and only for "this is true", the same meaning it
   carries on the ORA Reizen admin screens. The card keeps navy/red/gold. */

.ora-btrust {
  margin: 16px 0 0;
  padding: 12px 14px;
  list-style: none;
  display: grid;
  gap: 8px;
  background: #F1F9F4;
  border: 1px solid #CDE8D8;
  border-radius: 10px;
}
.ora-btrust li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  font-size: .82rem;
  line-height: 1.4;
  color: #1D2733;
}
.ora-btrust__i {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: #1C7A4E;
}

.ora-bform--enquiry { text-align: center; }
.ora-bform--enquiry p { margin: 0 0 14px; color: var(--ora-body, #4C5C6B); }
.ora-bform--enquiry .ora-btn { width: 100%; justify-content: center; }
.ora-bform__second { margin-top: 10px; }

@media (max-width: 560px) {
  .ora-bform { padding: 20px 16px; max-width: none; }
  .ora-bform__grid { grid-template-columns: 1fr; }
  .ora-bform__ages { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   THE CONTROLS — 2026-09-07
   ==========================================================================
   Client: "overall site dropdowns look like 19's website things, no class no
   advance and premium look, and booking forms looks basic and bad."

   He was describing UNSTYLED NATIVE CONTROLS. The fields already had our
   border, radius and focus ring, but a `<select>` keeps the operating
   system's own arrow until `appearance: none` removes it, and `input[type=
   date]` keeps the browser's calendar glyph. On Windows/Chrome that is a grey
   1990s arrow next to a gold-focus-ringed input, and the OS wins the
   impression.

   ⚠️ `appearance: none` on a select DELETES the arrow rather than restyling
   it, so a replacement MUST be drawn — otherwise the control looks like a
   text input and nobody knows it opens. It is drawn here as a background SVG
   (no extra markup, no JS, and it inherits nothing that can go missing).
   ========================================================================== */

/* ---- selects ------------------------------------------------------------ */
[data-ora="booking-form"] .ora-bfld select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%230B2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 13px 8px;
}
[data-ora="booking-form"] .ora-bfld select::-ms-expand { display: none; }

/* ---- dates -------------------------------------------------------------- */
/*
 * The native picker indicator cannot be replaced, only restyled, so it is
 * made invisible and the whole field is given our own calendar glyph. The
 * indicator is stretched over the field so a click anywhere still opens the
 * picker — which is what a visitor expects from a date field, and what a
 * neatly hidden indicator would have broken.
 */
[data-ora="booking-form"] .ora-bfld input[type="date"] {
  position: relative;
  cursor: pointer;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 17px 17px;
}
[data-ora="booking-form"] .ora-bfld input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
/* Firefox and Safari keep their own spacing; neutralise it. */
[data-ora="booking-form"] .ora-bfld input[type="date"]::-webkit-inner-spin-button,
[data-ora="booking-form"] .ora-bfld input[type="date"]::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
}

/* ---- numbers ------------------------------------------------------------ */
/*
 * The spinner arrows are 12px tall, unstyleable, and land a "3" next to a "2"
 * by accident on a phone. Removed; the field takes a number and the room's
 * own maximum is enforced server-side by ORA_Quote anyway.
 */
[data-ora="booking-form"] .ora-bfld input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
[data-ora="booking-form"] .ora-bfld input[type="number"]::-webkit-outer-spin-button,
[data-ora="booking-form"] .ora-bfld input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- labels ------------------------------------------------------------- */
.ora-bfld > span {
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ora-muted, #76869A);
}

/* ---- the card ----------------------------------------------------------- */
.ora-bform__head {
  padding-bottom: 16px;
  margin-bottom: 4px;
}
.ora-bform__price { letter-spacing: -.02em; }

/* ---- the transfer tickbox and the payment choice ------------------------ */
/*
 * These were a bare checkbox and two bare radios — the two controls a browser
 * styles most crudely. Drawn here instead, at the size a thumb can hit.
 */
.ora-bcheck,
.ora-bpay label {
  align-items: flex-start;
  border-radius: var(--ora-r-sm, 10px);
  transition: background .18s, border-color .18s;
}

.ora-bcheck {
  padding: 13px 15px;
  border: 1.5px solid var(--ora-line, #E4E9EF);
  background: #fff;
}
.ora-bcheck:hover { border-color: var(--ora-gold-200, #EBD3A0); }
.ora-bcheck:has(input:checked) {
  border-color: var(--ora-gold, #C9992F);
  background: var(--ora-cream, #FDF8F0);
}

.ora-bcheck input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 1.5px solid var(--ora-line, #E4E9EF);
  border-radius: 6px;
  background: #fff;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ora-bcheck input[type="checkbox"]::after {
  content: "";
  width: 11px;
  height: 7px;
  border-left: 2.2px solid #fff;
  border-bottom: 2.2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform .15s;
}
.ora-bcheck input[type="checkbox"]:checked {
  background: var(--ora-red, #E1121C);
  border-color: var(--ora-red, #E1121C);
}
.ora-bcheck input[type="checkbox"]:checked::after {
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}
.ora-bcheck input[type="checkbox"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(210, 162, 75, .3);
}

.ora-bpay { display: grid; gap: 10px; }
.ora-bpay label {
  display: flex;
  gap: 11px;
  padding: 13px 15px;
  border: 1.5px solid var(--ora-line, #E4E9EF);
  background: #fff;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1.45;
}
.ora-bpay label:hover { border-color: var(--ora-gold-200, #EBD3A0); }
.ora-bpay label:has(input:checked) {
  border-color: var(--ora-red, #E1121C);
  background: rgba(225, 18, 28, .035);
}
.ora-bpay input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  margin: 1px 0 0;
  border: 1.5px solid var(--ora-line, #E4E9EF);
  border-radius: 999px;
  background: #fff;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: border-color .15s;
}
.ora-bpay input[type="radio"]::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ora-red, #E1121C);
  transform: scale(0);
  transition: transform .15s;
}
.ora-bpay input[type="radio"]:checked { border-color: var(--ora-red, #E1121C); }
.ora-bpay input[type="radio"]:checked::after { transform: scale(1); }
.ora-bpay input[type="radio"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(210, 162, 75, .3);
}
.ora-bpay label b,
.ora-bpay label strong { color: var(--ora-navy, #0B2545); }
.ora-bpay label small {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  color: var(--ora-muted, #76869A);
}

/* The payment options reuse .ora-bcheck, whose 16px top margin would stack
   on top of the grid gap. The grid owns the spacing here. */
.ora-bpay .ora-bcheck { margin-top: 0; }