/* =================================================================
   BOOKING DETAILS / CHECKOUT PAGE  —  Shopify-style 2-col layout
   Scoped to body.lux-checkout-page
   Layout strategy:
     • CSS Grid on the <form> for the 2-column macro layout.
     • Flexbox everywhere inside sections (rows, field pairs, etc.).
     • Mobile-first: single column with logical read-order;
       2-col kicks in at ≥ 720px.
   ================================================================= */

/* -----------------------------------------------------------------
   1. PAGE CHROME
   ----------------------------------------------------------------- */
body.lux-checkout-page .post-thumbnail { display: none !important; }

body.lux-checkout-page .main-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: var(--lux-paper);
}

/* Expand the .hentry: max-width + center + top breathing room */
body.lux-checkout-page .content-area.full-width .site-main > .hentry {
  padding: 1.5rem 1.5rem 2.5rem !important;
  margin-top: 1rem !important;
  max-width: 1060px;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
  /* WHITE CARD — floats on the warm paper background */
  background: var(--lux-card) !important;
  border: 1px solid var(--lux-line);
  border-radius: 10px;
  box-shadow: 0 4px 32px -6px rgba(31,49,46,.10), 0 1px 6px rgba(31,49,46,.05);
}

/* Page title bar */
body.lux-checkout-page .site-main .entry-header {
  padding: 0 0 .75rem !important;
  margin: 0 0 1.5rem !important;
  border-bottom: 1px solid var(--lux-line) !important;
}
body.lux-checkout-page .site-main .entry-header::after { display: none !important; }

body.lux-checkout-page h1.entry-title {
  font-size: .95rem !important;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 !important;
  text-align: left;
  color: var(--lux-muted);
}

/* Hide any WP-editor intro paragraphs above the shortcode */
body.lux-checkout-page .entry-content > p { display: none; }

/* -----------------------------------------------------------------
   2. FORM — CSS Grid 2-column macro layout
   Mobile:  single column, explicit row order for good UX.
   Desktop (≥720px): [left 1fr] [right 340px]
   ----------------------------------------------------------------- */
.lux-checkout-page .mphb_sc_checkout-form {
  display: grid;
  grid-template-columns: 1fr;          /* mobile: 1 col */
  row-gap: .75rem;
  align-items: start;
  width: 100%;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--lux-ink);
  font-family: inherit;
}

/* Mobile row order: stay info → price → your info → payment (includes total/deposit) → terms → submit */
.lux-checkout-page #mphb-booking-details          { order: 1; }
.lux-checkout-page #mphb-price-details            { order: 2; }
.lux-checkout-page #mphb-customer-details         { order: 3; }
.lux-checkout-page #mphb-billing-details          { order: 4; } /* total/deposit now inside this */
.lux-checkout-page .mphb-checkout-terms-wrapper   { order: 5; }
.lux-checkout-page .mphb_sc_checkout-submit-wrapper { order: 6; }

/* Desktop 2-column grid */
@media (min-width: 720px) {
  .lux-checkout-page .mphb_sc_checkout-form {
    grid-template-columns: 1fr 340px;
    column-gap: 2rem;
    row-gap: .75rem;
  }

  /* Left column */
  .lux-checkout-page #mphb-booking-details   { grid-column: 1; grid-row: 1; order: unset; }
  .lux-checkout-page #mphb-customer-details  { grid-column: 1; grid-row: 2; order: unset; }

  /* Right column — total/deposit are now INSIDE billing, so only 2 items here */
  .lux-checkout-page #mphb-price-details     { grid-column: 2; grid-row: 1; order: unset; }
  .lux-checkout-page #mphb-billing-details   { grid-column: 2; grid-row: 2; order: unset; }

  /* Terms + submit span both columns */
  .lux-checkout-page .mphb-checkout-terms-wrapper   { grid-column: 1 / -1; grid-row: 3; order: unset; }
  .lux-checkout-page .mphb_sc_checkout-submit-wrapper { grid-column: 1 / -1; grid-row: 4; order: unset; }
}

/* The errors-wrapper <p> is hidden by default (mphb-hide class).
   Remove any card styling so it never creates ghost space. */
.lux-checkout-page p.mphb-errors-wrapper {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}

/* -----------------------------------------------------------------
   3. KILL THEME / PLUGIN SECTION SEPARATORS
   Only reset the spacing (margin + padding). Do NOT touch border-top
   — each section card needs its own top border.
   ----------------------------------------------------------------- */
body.lux-checkout-page .mphb_sc_checkout-form > section,
body.lux-checkout-page .mphb_sc_checkout-form > .mphb-checkout-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* -----------------------------------------------------------------
   4. SECTION CARDS — all four borders, white background
   High-specificity selector beats Oceanica's border-top colour rule.
   ----------------------------------------------------------------- */
body.lux-checkout-page .mphb_sc_checkout-form .mphb-checkout-section {
  background: var(--lux-card);
  border: 1px solid var(--lux-line) !important;
  border-radius: 6px;
  padding: .85rem 1rem !important;
  margin-bottom: 0 !important;
}

/* Right-column sections: warm tinted surface to distinguish from form */
.lux-checkout-page #mphb-price-details,
.lux-checkout-page #mphb-billing-details {
  background: var(--lux-paper);
}

/* -----------------------------------------------------------------
   4b. TOTAL PRICE + DEPOSIT — inside the billing section (.lux-billing-total)
   ----------------------------------------------------------------- */
.lux-checkout-page .lux-billing-total {
  margin-top: .75rem;
  padding-top: .65rem;
  border-top: 1px solid var(--lux-line);
}

/* Total price row */
.lux-checkout-page .lux-billing-total .mphb-total-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  font-size: .85rem;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent;
}

/* Deposit row */
.lux-checkout-page .lux-billing-total .mphb-deposit-amount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  font-size: .82rem;
  color: var(--lux-muted);
  margin: .3rem 0 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent;
}

/* Total / deposit value: brass accent */
.lux-checkout-page .lux-billing-total .mphb-total-price-field,
.lux-checkout-page .lux-billing-total .mphb-deposit-amount-field {
  color: var(--lux-accent);
  font-weight: 700;
  font-size: .95rem;
  margin-left: auto;
}

/* Errors wrapper inside billing — keep hidden cleanly */
.lux-checkout-page .lux-billing-total .mphb-errors-wrapper {
  font-size: .78rem;
  color: #c0392b;
  margin: .3rem 0 0 !important;
}

/* -----------------------------------------------------------------
   5. SECTION HEADINGS — uppercase label style, small
   ----------------------------------------------------------------- */
body.lux-checkout-page .mphb_sc_checkout-form h3,
body.lux-checkout-page .mphb_sc_checkout-form h4 {
  font-size: .68rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--lux-muted);
  margin: 0 0 .65rem !important;
  padding: 0;
  border: none;
  line-height: 1.4 !important;
}

/* -----------------------------------------------------------------
   6. HIDE REDUNDANT ELEMENTS
   ----------------------------------------------------------------- */
.lux-checkout-page #mphb-booking-details .mphb-booking-details-title { display: none !important; }
.lux-checkout-page h3.mphb-room-number      { display: none !important; }
.lux-checkout-page p.mphb-room-type-title   { display: none !important; }
.lux-checkout-page .mphb-required-fields-tip { display: none !important; }
.lux-checkout-page .mphb-customer-details label abbr,
.lux-checkout-page .mphb-adults-chooser label abbr,
.lux-checkout-page .mphb-children-chooser label abbr { display: none; }
/* Guest name field hidden — submitted as empty hidden input via PHP */
.lux-checkout-page #mphb-customer-details .mphb-guest-name-wrapper { display: none !important; }

/* -----------------------------------------------------------------
   7. STAY INFO SECTION — image + name + dates grid
   Layout: image column on left (spans all rows), text column on right.
   Uses :has() to activate the 2-column grid only when an image exists.
   Falls back to a clean single-column layout when there is no image.
   ----------------------------------------------------------------- */

/* Base: single-column grid (no image / fallback) */
.lux-checkout-page #mphb-booking-details {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: .25rem;
  align-items: start;
  padding: .7rem 1rem !important;
}

/* 2-column grid when an image is present */
.lux-checkout-page #mphb-booking-details:has(.lux-stay-image) {
  grid-template-columns: 96px 1fr;
  column-gap: .85rem;
  row-gap: .22rem;
}

/* Section heading — always spans full width (already hidden) */
.lux-checkout-page #mphb-booking-details h3 {
  grid-column: 1 / -1;
}

/* ---- Image column ---- */
.lux-checkout-page .lux-stay-image {
  grid-column: 1;
  grid-row: 1 / 4;   /* spans name + check-in + check-out rows */
  align-self: start; /* don't stretch — let the image control its own height */
}

.lux-checkout-page .lux-stay-image .lux-stay-thumb {
  display: block;
  width: 100%;        /* fills the 96px column */
  aspect-ratio: 1;    /* square — width drives height, no portrait stretching */
  object-fit: cover;
  border-radius: 5px;
}

/* ---- Text column ---- */

/* Property name */
.lux-checkout-page .lux-stay-name {
  font-size: .92rem;
  font-weight: 600;
  color: var(--lux-primary);
  letter-spacing: .015em;
  line-height: 1.3;
  margin: 0;
  align-self: end; /* sit at the bottom of its row for better vertical rhythm */
}

/* When image present: place name in column 2, row 1 */
.lux-checkout-page #mphb-booking-details:has(.lux-stay-image) .lux-stay-name {
  grid-column: 2;
  grid-row: 1;
}

/* Check-in / Check-out paragraphs */
.lux-checkout-page .mphb-check-in-date,
.lux-checkout-page .mphb-check-out-date {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  font-size: .82rem;
  margin: 0 !important;
  padding: 0;
}

.lux-checkout-page #mphb-booking-details:has(.lux-stay-image) .mphb-check-in-date {
  grid-column: 2;
  grid-row: 2;
}

.lux-checkout-page #mphb-booking-details:has(.lux-stay-image) .mphb-check-out-date {
  grid-column: 2;
  grid-row: 3;
}

/* "Check-in:" / "Check-out:" label */
.lux-checkout-page .mphb-check-in-date > span:first-child,
.lux-checkout-page .mphb-check-out-date > span:first-child {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--lux-muted);
}

/* Date value */
.lux-checkout-page .mphb-check-in-date strong,
.lux-checkout-page .mphb-check-out-date strong {
  font-size: .88rem;
  font-weight: 600;
  color: var(--lux-ink);
}

/* "from / until HH:MM" time */
.lux-checkout-page .mphb-check-in-date time,
.lux-checkout-page .mphb-check-out-date time,
.lux-checkout-page .mphb-check-in-date > span:not(:first-child),
.lux-checkout-page .mphb-check-out-date > span:not(:first-child) {
  font-size: .72rem;
  color: var(--lux-muted);
  display: inline;
}

/* Hidden room details — no visual height */
.lux-checkout-page .mphb-reserve-rooms-details {
  grid-column: 1 / -1;
  overflow: hidden;
  height: 0;
}

/* -----------------------------------------------------------------
   8. YOUR INFORMATION — label + field pairs with Flexbox
   ----------------------------------------------------------------- */
.lux-checkout-page .mphb-customer-details .mphb-adults-chooser,
.lux-checkout-page .mphb-customer-details .mphb-children-chooser {
  display: inline-flex;
  flex-direction: column;
  gap: .15rem;
  margin: 0 .75rem .5rem 0 !important;
  vertical-align: top;
}

.lux-checkout-page .mphb-customer-details p {
  margin: 0 0 .5rem !important;
}

.lux-checkout-page .mphb-customer-details label {
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--lux-muted);
  display: block;
  margin-bottom: .2rem;
}

/* All text/email/select inputs */
.lux-checkout-page .mphb-customer-details input[type="text"],
.lux-checkout-page .mphb-customer-details input[type="email"],
.lux-checkout-page .mphb-customer-details select,
.lux-checkout-page .mphb-customer-details textarea,
.lux-checkout-page .mphb_sc_checkout-guests-chooser {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: .4rem .6rem;
  border: 1px solid var(--lux-line);
  border-radius: 4px;
  font-size: .82rem;
  color: var(--lux-ink);
  background: var(--lux-card);
  line-height: 1.4;
  font-family: inherit;
  transition: border-color .15s ease;
}

.lux-checkout-page .mphb_sc_checkout-guests-chooser { width: auto; }

.lux-checkout-page .mphb-customer-details input:focus,
.lux-checkout-page .mphb-customer-details select:focus,
.lux-checkout-page .mphb-customer-details textarea:focus {
  outline: none;
  border-color: var(--lux-accent);
  box-shadow: 0 0 0 2px rgba(176,141,87,.15);
}

.lux-checkout-page .mphb-customer-details textarea { min-height: 64px; resize: vertical; }

/* First + last name side-by-side */
@media (min-width: 480px) {
  .lux-checkout-page .mphb-customer-details .mphb-customer-name,
  .lux-checkout-page .mphb-customer-details .mphb-customer-last-name {
    display: inline-block;
    width: calc(50% - .3rem);
    vertical-align: top;
  }
  .lux-checkout-page .mphb-customer-details .mphb-customer-name {
    margin-right: .6rem !important;
  }
}

/* -----------------------------------------------------------------
   9. PRICE SUMMARY TABLE
   ----------------------------------------------------------------- */
.lux-checkout-page .lux-price-summary {
  padding: .7rem 1rem !important;
}

.lux-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}

.lux-price-table td {
  padding: .25rem 0;
  color: var(--lux-ink);
  line-height: 1.4;
  border: none;
  vertical-align: top;
}

.lux-price-table .lux-price-col {
  text-align: right;
  font-weight: 500;
  padding-left: 1rem;
  white-space: nowrap;
  vertical-align: top;
}

.lux-price-total-row td {
  font-weight: 700;
  color: var(--lux-ink);
  border-top: 1px solid var(--lux-line);
  padding-top: .4rem !important;
}

/* -----------------------------------------------------------------
   9b. PER-NIGHT ACCORDION — native <details>/<summary>
   ----------------------------------------------------------------- */
.lux-breakdown-toggle { display: inline; }

.lux-breakdown-toggle summary {
  display: inline;
  cursor: pointer;
  list-style: none;
  color: var(--lux-ink);
  font-size: .82rem;
}

.lux-breakdown-toggle summary::-webkit-details-marker { display: none; }
.lux-breakdown-toggle summary::marker              { display: none; }

.lux-breakdown-toggle summary::after {
  content: " ›";
  font-size: .72rem;
  color: var(--lux-accent);
  display: inline-block;
}

.lux-breakdown-toggle[open] summary::after { content: " ‹"; }

.lux-per-night-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: .35rem;
  font-size: .74rem;
}

.lux-per-night-table td {
  padding: .1rem 0;
  color: var(--lux-muted);
  border: none;
  vertical-align: top;
}

.lux-per-night-table .lux-price-col {
  text-align: right;
  font-weight: 400;
  padding-left: .6rem;
  white-space: nowrap;
}

/* -----------------------------------------------------------------
   10. TOTAL PRICE (inside .lux-billing-total — see section 4b above)
   The <output> element wraps label + value; we flatten it to flex.
   ----------------------------------------------------------------- */
.lux-checkout-page .lux-billing-total .mphb-total-price output,
.lux-checkout-page .lux-billing-total .mphb-deposit-amount output {
  display: contents; /* let the parent flex container handle layout */
}

/* -----------------------------------------------------------------
   11. PAYMENT METHOD SECTION
   ----------------------------------------------------------------- */
.lux-checkout-page .mphb-gateway-title  { font-size: .82rem; }

.lux-checkout-page .mphb-gateway-description {
  font-size: .76rem;
  color: var(--lux-muted);
  margin: .2rem 0 0 !important;
}

.lux-checkout-page .mphb-gateways-list {
  padding: 0;
  list-style: none;
}

.lux-checkout-page .mphb-gateways-list > li { margin-top: .35rem !important; }

.lux-checkout-page .mphb-billing-fields {
  margin-top: .5rem !important;
  margin-bottom: 0 !important;
  border: none !important;
  padding: 0 !important;
}

/* Stripe/card inputs inherit base look */
.lux-checkout-page .mphb-billing-fields input {
  font-size: .82rem;
  padding: .4rem .6rem;
  border: 1px solid var(--lux-line);
  border-radius: 4px;
  font-family: inherit;
}

/* -----------------------------------------------------------------
   12. TERMS & CONDITIONS
   ----------------------------------------------------------------- */
.lux-checkout-page .mphb-checkout-terms-wrapper {
  font-size: .78rem;
  background: transparent;
  border: none !important;
  padding: .35rem 0 !important;
}

.lux-checkout-page .mphb-terms-and-conditions {
  max-height: 110px;
  overflow-y: auto;
  margin-bottom: .4rem !important;
  padding: .35rem .55rem;
  background: var(--lux-paper);
  border: 1px solid var(--lux-line);
  border-radius: 4px;
  font-size: .74rem;
  color: var(--lux-muted);
  line-height: 1.55;
}

.lux-checkout-page .mphb-terms-and-conditions-accept {
  font-size: .78rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 !important;
}

.lux-checkout-page .mphb-terms-and-conditions-accept input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------
   13. SUBMIT / BOOK NOW
   ----------------------------------------------------------------- */
.lux-checkout-page .mphb_sc_checkout-submit-wrapper {
  margin-top: .25rem !important;
  padding: 0 !important;
  border: none !important;
  background: transparent;
}

.lux-checkout-page .mphb_sc_checkout-form input[type="submit"],
.lux-checkout-page .mphb_sc_checkout-form p.mphb_sc_checkout-submit-wrapper .button {
  display: block;
  width: 100%;
  background: var(--lux-accent);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: .75rem 1.5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease;
  font-family: inherit;
  text-align: center;
}

.lux-checkout-page .mphb_sc_checkout-form input[type="submit"]:hover { background: var(--lux-accent-deep); }

/* On desktop, Book Now button spans both columns but aligns to the left column width */
@media (min-width: 720px) {
  .lux-checkout-page .mphb_sc_checkout-form input[type="submit"] {
    width: auto;
    min-width: 220px;
  }
}

/* -----------------------------------------------------------------
   14. LOGIN / RETURNING CUSTOMER — compact
   ----------------------------------------------------------------- */
.lux-checkout-page .mphb-login-form-wrap {
  font-size: .78rem;
  margin-bottom: .5rem !important;
  padding: .4rem .7rem;
  background: var(--lux-paper);
  border: 1px solid var(--lux-line);
  border-radius: 4px;
}

.lux-checkout-page .mphb-login-form-wrap p { margin: 0 !important; }

/* -----------------------------------------------------------------
   15. ERROR / VALIDATION MESSAGES
   ----------------------------------------------------------------- */
.lux-checkout-page .mphb-errors-wrapper {
  font-size: .78rem;
  color: #c0392b;
  margin: .3rem 0 !important;
}