/* ============================================================
   upgrades-v5 — Engine compatibility skin
   ------------------------------------------------------------
   This flow ships NO Bootstrap CSS. But the booking engine
   injects markup we don't own and can't rename:

     * common/php/declineModal/declineModal-v3.php  (#declineModal)
     * common/php/page_footer.php                   (loading panel)
     * integration_*.js                             ($().modal(), .d-none)
     * jQuery-UI datepicker                         (.ui-datepicker)

   Bootstrap 5's JS *is* loaded (integration_travel_protection.js
   listens for `shown.bs.modal`, and several integration scripts
   call `$('#x').modal('show')` — Bootstrap registers the jQuery
   plugin when jQuery is present). Bootstrap JS toggles classes
   and inline display; the styling below is ours, written in the
   brand language rather than Bootstrap's default look.

   Everything here is "make engine-owned markup look like this
   flow". Do not add new components here — use steps.css.
   ============================================================ */

/* ============================================================
   1. BOOTSTRAP MODAL — the minimum CSS Bootstrap's JS needs,
      restyled as a pf-modal.
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1055;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  padding: 20px 16px;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  width: 100vw;
  height: 100vh;
  background-color: var(--navy-deep);
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: .55; }
.modal-backdrop { transition: opacity .15s linear; }

.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }

.modal-dialog {
  position: relative;
  width: auto;
  max-width: 560px;
  margin: 24px auto;
  pointer-events: none;
  transition: transform .3s ease-out;
  transform: translateY(-30px);
}
.modal.show .modal-dialog { transform: none; }
.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 48px);
}
.modal-lg { max-width: 720px; }
.modal-xl { max-width: 960px; }

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .36);
  outline: 0;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: var(--navy);
  color: #fff;
}
.modal-header .modal-title,
.modal-header h1,
.modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  max-height: 70vh;
  overflow-y: auto;
}
.modal-body h1, .modal-body h2, .modal-body h3 { color: var(--ink); }
.modal-body a { color: var(--navy); }
/* The body renders CMS-authored HTML (offerInfo.privacyPolicy /
   .termsAndConditions, stored per offer), so it can carry anything: long URLs,
   wide tables, hardcoded pixel widths. The overflow-y:auto above is enough to
   make overflow-x compute to auto as well, so any of those silently turns the
   body into a horizontal scroller — ClickUp 86bc1n730. Contain it here instead
   of relying on every offer's HTML behaving. */
.modal-body { overflow-x: hidden; overflow-wrap: anywhere; }
.modal-body img { max-width: 100%; height: auto; }
/* A genuinely wide table keeps its own scroller so it stays readable rather
   than being clipped by the rule above. */
.modal-body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; }
.modal-body pre { white-space: pre-wrap; word-break: break-word; }
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.btn-close {
  box-sizing: content-box;
  width: 14px; height: 14px;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") center/14px auto no-repeat;
  opacity: .8;
  cursor: pointer;
}
.btn-close:hover { opacity: 1; }

/* Bootstrap button classes used in engine-injected footers */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 14px; font-weight: 700;
  border: none; border-radius: var(--radius-pill);
  padding: 10px 22px; cursor: pointer; text-decoration: none;
  transition: background-color .2s;
}
.btn-secondary { background: var(--navy); color: #fff; }
.btn-secondary:hover { background: var(--navy-deep); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-link { background: none; color: var(--navy); text-decoration: underline; }

@media (max-width: 767px) {
  .modal { padding: 14px 12px; }
  .modal-dialog { margin: 12px auto; }
  .modal-dialog-centered { min-height: calc(100% - 24px); }
  .modal-header { padding: 16px 18px; }
  .modal-header .modal-title { font-size: 17px; }
  .modal-body { padding: 18px; }
  .modal-footer { padding: 14px 18px; }
}

/* ============================================================
   2. DECLINE MODAL (#declineModal — injected by page_footer.php)
   ============================================================ */
#declineModal .modal-dialog { max-width: 425px; }
#declineModal .modal-header {
  justify-content: center;
  padding: 32px 20px 8px;
  background: var(--white);
}
#declineModal .modal-header img { height: 56px; width: auto; }
#declineModal .modal-body { padding: 8px 24px 20px; text-align: center; }
#declineModal .modal-body h3 {
  margin: 0 0 18px;
  color: var(--ink);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2em;
}
#declineModal #declineModal-copy p { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
#declineModal .modal-footer { justify-content: center; }
#declineModal .close-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--coral); color: #fff;
  border-radius: var(--radius-pill);
  padding: 13px 30px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none;
}
#declineModal .close-btn:hover { background: var(--coral-hover); }
/* The arrow asset (assets.myonedash.com .../icon-arrow-down-circle.svg) is an
   empty 1pt x 1pt SVG: it loads with a 200 but paints nothing, so all it
   contributes is an 18px box plus the flex gap to the RIGHT of "OK" — which is
   what pushes the label off-centre in the pill. Drop it and let the button
   shrink to its text; justify-content is belt and braces if anything ever gives
   the button an explicit width. */
#declineModal .close-btn .ico { display: none; }
#declineModal .close-btn { justify-content: center; }
/* declineModal-v3/v5 ship their own <style> from page_footer.php — injected
   AFTER this sheet and at higher specificity (#declineModal .modal-footer
   .close-btn), so they win the colour and keep the legacy green underlined
   link look on top of the purple pill. Match that specificity to take it back. */
#declineModal .modal-footer .close-btn { color: #fff; text-decoration: none; }
#declineModal .modal-footer .close-btn .txt { text-decoration: none; }

/* ============================================================
   3. ALREADY-PURCHASED / CUSTOMER-SERVICE MODALS
   ============================================================ */
#isPurchaserModal .modal-body p,
#modalCustomerService .modal-body { font-size: 15px; line-height: 1.6; }
.alert {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
}
.alert-warning { background: #fff8e1; border: 1px solid #ffe08a; color: #6b5233; }
.alert-danger { background: #fdecea; border: 1px solid #f5c2bd; color: var(--danger); }
.alert-success { background: var(--success-bg); border: 1px solid var(--success-line); color: var(--success); }

/* Card-error banner injected by integration_step3.js */
#card-error {
  margin: 0 0 14px;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: #fdecea;
  border: 1px solid #f5c2bd;
  color: var(--danger);
  font-size: 14px;
  line-height: 1.5;
}
.bad_phone_alert h5 { margin: 0; font-size: 14px; font-weight: 700; }

/* ============================================================
   4. jQUERY-UI DATEPICKER
      integration_step2/step3.js drive the real availability
      calendar through jQuery-UI + the range extension, which
      carry sold-out dates and per-date upcharges. We keep the
      plugin and restyle it to match the design's .cal-* block.

      SCOPING: this file is loaded only by upgrades-v5, and we
      never touch jquery-ui.css or the shared integration
      scripts — so no other flow is affected by anything here.

      Class names come from the range extension, not jQuery-UI:
        td.selected        a day inside the range
        td.selected-start  check-in
        td.selected-end    check-out
      (The old .ui-datepicker-range* names don't exist; that's
      why every day in the range rendered solid.)
   ============================================================ */
.ui-datepicker {
  position: relative;     /* arrows position against the whole calendar */
  width: 100%;
  padding: 42px 0 0;      /* room for the arrow row above the month names */
  background: transparent;
  font-family: var(--font);
  --cal-cell: 40px;
}

/* ---- header: month name centred, arrows on their own row above ---- */
.ui-datepicker .ui-datepicker-header {
  position: static;       /* let the arrows escape to .ui-datepicker */
  padding: 0 0 10px;
  border: 0;
  background: transparent;
}
.ui-datepicker .ui-datepicker-title {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 0;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev { left: 0; }
.ui-datepicker .ui-datepicker-next { right: 0; }
.ui-datepicker .ui-datepicker-prev.ui-state-disabled,
.ui-datepicker .ui-datepicker-next.ui-state-disabled { opacity: .35; cursor: default; }
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
  display: block;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  text-indent: -9999px;
  overflow: hidden;
}
.ui-datepicker .ui-datepicker-prev .ui-icon { transform: rotate(135deg); margin-left: 3px; }
.ui-datepicker .ui-datepicker-next .ui-icon { transform: rotate(-45deg); margin-right: 3px; }

/* ---- grid ---- */
.ui-datepicker table {
  width: 100%;
  /* table-layout:fixed gives seven equal columns, matching the design's
     `grid-template-columns: repeat(7, minmax(0,1fr))`. With the default auto
     layout each column sizes to its own content, so the selected day boxes
     came out different widths (measured 45/37/44/39/29/33/39px in one row). */
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 2px;
  margin: 0;
}
.ui-datepicker th,
.ui-datepicker td { width: 14.2857%; }
.ui-datepicker th {
  padding: 4px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.ui-datepicker td { padding: 0; position: relative; }
.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  height: var(--cal-cell);
  line-height: var(--cal-cell);
  text-align: center;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  border: 0;
  background: transparent;
}
.ui-datepicker td a:hover { background: rgba(33, 82, 114, .08); }

/* unavailable dates and filler days from the neighbouring month */
.ui-datepicker td.ui-datepicker-unselectable span,
.ui-datepicker td.ui-state-disabled span,
.ui-datepicker td.ui-datepicker-other-month span { color: #c3c9d1; }

/* ---- selected range: ends solid, nights between washed ---- */
.ui-datepicker td.selected a,
.ui-datepicker td.selected span {
  background: rgba(233, 101, 74, .14);
  border-radius: 0;
  color: var(--text);
}
.ui-datepicker td.selected-start a,
.ui-datepicker td.selected-start span,
.ui-datepicker td.selected-end a,
.ui-datepicker td.selected-end span {
  background: var(--coral);
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
}
.ui-datepicker td.selected a:hover { background: rgba(233, 101, 74, .22); }
.ui-datepicker td.selected-start a:hover,
.ui-datepicker td.selected-end a:hover { background: var(--coral-hover); }

/* ---- multi-month layout ----
   jquery-ui.css lays the groups out with float + percentage widths and this
   flow doesn't ship that stylesheet, so without replacing those rules the
   months stack vertically. Flex mirrors the design's .cal-months. */
.ui-datepicker.ui-datepicker-multi {
  /* !important is required, not sloppiness: jQuery-UI writes
     style="width: 34em; display: block" straight onto this element, and an
     inline style beats any stylesheet rule. */
  display: flex !important;
  width: 100% !important;
  flex-wrap: wrap;
  gap: 24px;
}
.ui-datepicker-multi .ui-datepicker-group {
  float: none;   /* jquery-ui sets float:left */
  width: auto;   /* ...and a percentage width per month count */
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
}
.ui-datepicker-multi .ui-datepicker-group table { width: 100%; margin: 0; }
.ui-datepicker-row-break { display: none; }   /* jquery-ui clearfix, useless in flex */

/* ---- neutralise legacy per-offer calendar CSS ----
   Offers migrated from upgrades-vg carry .ui-datepicker rules inside
   `offers.html_header`, sized for the OLD calendar and marked !important:
       width: 35px !important;  height: 36px !important;
       line-height: 34px !important;  font-size: 20px !important;
   page_header.php echoes that field verbatim, and !important beats any
   normal rule regardless of specificity — so the flow has to re-assert its
   own metrics the same way. Scoped under .booking-calendar so this only
   touches step 2's calendar and nothing else on the page.

   Consequence to know about: to re-style these day cells per offer you now
   have to match this specificity, e.g.
       .booking-calendar .ui-datepicker td a { font-size: 16px !important }
   Once html_header is cleaned up for migrated offers, this block can go. */
.booking-calendar .ui-datepicker td a,
.booking-calendar .ui-datepicker td span {
  width: auto !important;
  height: var(--cal-cell) !important;
  line-height: var(--cal-cell) !important;
  font-size: 14px !important;
  font-weight: 400;
}
.booking-calendar .ui-datepicker td.selected-start a,
.booking-calendar .ui-datepicker td.selected-end a { font-weight: 700; }

/* upcharge badge rendered by integration_step2/step3.js */
.badge-upcharge {
  position: absolute;
  top: -2px; right: -2px;
  z-index: 2;
  background: var(--navy);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 20px;
  pointer-events: none;
}

@media (max-width: 620px) {
  .ui-datepicker.ui-datepicker-multi { flex-direction: column; gap: 16px; }
}
@media (max-width: 767px) {
  .ui-datepicker { --cal-cell: 34px; }
  .booking-calendar .ui-datepicker td span,
  .booking-calendar .ui-datepicker td a { font-size: 13px !important; }
}

/* ============================================================
   5. LOADING / MISC ENGINE BITS
   ============================================================ */
.loading_inverntory {
  padding: 20px 0;
  text-align: center;
  font-weight: 700;
  color: var(--muted);
}
.collect_upcharges_notes__styles {
  margin-top: 10px;
  font-size: 13px;
  color: var(--danger);
}
.collect_upcharges_notes__styles span { font-weight: 800; }
.transaction_alert { display: none; }

/* Upcharge note appended to .booking-calendar__header--note by
   integration_step2.js. It ships with .hidden and is revealed when the
   guest turns the calendar on, so .hidden has to actually hide. */
.hidden { display: none !important; }
.upcharges__notes {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: #fff8e1;
  border: 1px solid #ffe08a;
  color: #6b5233;
  font-size: 13px;
  line-height: 1.5;
}

/* Apple Pay button element (step3) */
/* The official button from applepay.cdn-apple.com. Its label is an SVG scaled to
   the button height, so glyph size is ~0.62 x height and height is the ONLY lever
   (padding and width do nothing to it):
       48px -> 30px text / 24px logo      36px -> 23px / 18px
       32px -> 20px text / 16px logo      30px -> 19px / 15px  (Apple's minimum)
   The design's mock button pairs 16px text with a 48px pill, which the real
   button cannot do. 36px is the compromise: a legible tap target with a label
   close to the design. upgrades-vg ships 30px. Per-offer override:
   steps.billing-information.applePay.buttonHeight. */
apple-pay-button {
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: 36px;
  --apple-pay-button-border-radius: var(--radius-pill);
  --apple-pay-button-padding: 5px 0px;
  display: block;
  width: 100%;
  /* Apple's wrapper is exactly --apple-pay-button-height tall, but the pill inside
     adds the 5px + 5px padding on top of that (content-box) and overflows the wrapper
     by 10px, eating the gap below the button. Size the element to the pill so the
     spacing around it is real. Follows the per-offer height override. */
  height: calc(var(--apple-pay-button-height) + 10px);
}
/* Google's button (buttonSizeMode "fill") takes its container's size: match the
   Apple pill, and take no space until bt-wallet-integration.js renders it.
   ui-customization.php keeps it equal to applePay.buttonHeight. */
#google-pay-btn { height: 46px; }
#google-pay-btn:empty { display: none; }
/* Google's label is an SVG background sized to fit the button's padding (9px by
   default), which reads larger than Apple's label at the same height. 11px brings
   it level with "Book with Apple Pay". .gpay-button is Google's own class. */
#google-pay-btn .gpay-button { padding-top: 11px !important; padding-bottom: 11px !important; }

/* Basis Theory hosted card element mounts (step3) */
.bt-element {
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 3px 10px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.bt-element.is-invalid { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(233, 101, 74, .14); }