/* =================================================================
   BOOKING DETAILS / RESERVATION RECEIVED PAGE
   Compact, minimal-scroll redesign.
   Scoped with .lux-booking-details-page (added via body_class hook)
   or .mphb_sc_booking_confirmation where layout-only rules apply.
   ================================================================= */

/* -----------------------------------------------------------------
   1. REMOVE HERO IMAGE
   ----------------------------------------------------------------- */
.lux-booking-details-page .post-thumbnail {
  display: none !important;
}

/* -----------------------------------------------------------------
   2. PAGE CHROME — strip all top padding so content starts at edge
   Selectors must beat the parent theme's:
     .content-area.full-width .site-main > .hentry  (0,3,0)
     body.page .site-main .entry-header              (0,3,1)
   ----------------------------------------------------------------- */

/* The .hentry on full-width pages has padding: 0 8.8em 3.85em and margin-top: 3.75em.
   Both collapse the usable width and push content far down. */
body.lux-booking-details-page .content-area.full-width .site-main > .hentry {
  padding: 0 1.25rem 1rem !important;
  margin-top: 0 !important;
}

body.lux-booking-details-page .main-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

/* Entry-header: parent rule is body.page .site-main .entry-header (0,3,1).
   Match it with our body class + same depth — loads later so wins. */
body.lux-booking-details-page .site-main .entry-header {
  padding: 0 0 .4rem !important;
  margin: 0 0 .6rem !important;
  border-bottom: 1px solid var(--lux-line) !important;
}

/* Kill the ::after anchor icon */
body.lux-booking-details-page .site-main .entry-header::after {
  display: none !important;
}

body.lux-booking-details-page h1.entry-title {
  font-size: 1rem !important;
  font-weight: 600;
  letter-spacing: .04em;
  margin: 0 !important;
  text-align: left;
  color: var(--lux-ink);
}

/* Hide excerpt */
body.lux-booking-details-page .entry-summary {
  display: none;
}

/* Paragraph margin inside the shortcode: p { margin: 0 0 1.75em } is too much */
body.lux-booking-details-page .entry-content p {
  margin-bottom: .3rem !important;
  line-height: 1.45;
}

/* -----------------------------------------------------------------
   3. SHORTCODE WRAPPER
   Body base is 15px with line-height 1.9 — override both here.
   ----------------------------------------------------------------- */
.mphb_sc_booking_confirmation {
  max-width: 660px;
  font-size: .82rem;
  line-height: 1.4;
}

/* -----------------------------------------------------------------
   4. CONFIRMATION / PAYMENT MESSAGES — single compact notice line
   ----------------------------------------------------------------- */
.mphb_sc_booking_confirmation .mphb-booking-confirmation-messages,
.mphb_sc_booking_confirmation .mphb-payment-messages {
  padding: .35rem .7rem;
  margin: 0 0 .6rem;
  background: #f0f8f0;
  border-left: 3px solid #5a9a5a;
  border-radius: 0 4px 4px 0;
}

.mphb_sc_booking_confirmation .mphb-booking-confirmation-messages p,
.mphb_sc_booking_confirmation .mphb-payment-messages p {
  margin: 0;
  font-size: .82rem;
  color: var(--lux-muted);
  line-height: 1.4;
}

/* Hide empty message wrappers */
.mphb_sc_booking_confirmation .mphb-booking-confirmation-messages:empty,
.mphb_sc_booking_confirmation .mphb-payment-messages:empty {
  display: none;
}

/* -----------------------------------------------------------------
   5. SECTIONS GRID — booking + payment side by side
   ----------------------------------------------------------------- */

/* Mobile: small gap between stacked sections */
.mphb_sc_booking_confirmation .mphb-booking-details-section + .mphb-booking-details-section {
  margin-top: .5rem !important;
}

@media (min-width: 560px) {
  .mphb_sc_booking_confirmation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: .75rem;
    row-gap: .6rem;
    align-items: start;
  }

  /* Messages, instructions span full width */
  .mphb_sc_booking_confirmation .mphb-booking-confirmation-messages,
  .mphb_sc_booking_confirmation .mphb-payment-messages,
  .mphb_sc_booking_confirmation .mphb-payment-instructions {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  /* Booking section: left column */
  .mphb_sc_booking_confirmation .mphb-booking-details-section.booking {
    grid-column: 1;
  }

  /* Payment section: right column */
  .mphb_sc_booking_confirmation .mphb-booking-details-section.payment {
    grid-column: 2;
  }

  /* No extra margin between sections when laid out as grid */
  .mphb_sc_booking_confirmation .mphb-booking-details-section + .mphb-booking-details-section {
    margin-top: 0 !important;
  }
}

/* -----------------------------------------------------------------
   6. EACH SECTION CARD
   ----------------------------------------------------------------- */
.mphb_sc_booking_confirmation .mphb-booking-details-section {
  background: var(--lux-card);
  border: 1px solid var(--lux-line);
  border-radius: 5px;
  padding: .65rem .8rem .7rem;
  margin-top: 0 !important;
}

/* Remove the extra top margin between sections that the plugin adds */
.mphb_sc_booking_confirmation .mphb-booking-details-section + .mphb-booking-details-section {
  margin-top: 0 !important;
}

/* -----------------------------------------------------------------
   7. SECTION HEADING
   ----------------------------------------------------------------- */
.mphb_sc_booking_confirmation .mphb-booking-details-section .mphb-booking-details-title {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--lux-muted);
  margin: 0 0 .45rem;
  padding: 0;
  border: none;
}

/* -----------------------------------------------------------------
   8. DETAILS LIST — definition-style 2-column grid
   ----------------------------------------------------------------- */
.mphb_sc_booking_confirmation .mphb-booking-details-section .mphb-booking-details {
  display: grid !important;
  grid-template-columns: auto 1fr;
  column-gap: .55rem;
  row-gap: .18rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: unset !important;
}

/* li becomes a transparent pass-through so spans are grid items */
.mphb_sc_booking_confirmation .mphb-booking-details-section .mphb-booking-details > li {
  display: contents;
  flex: unset !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Remove the dashed border the plugin adds at ≥768px */
@media screen and (min-width: 768px) {
  .mphb_sc_booking_confirmation .mphb-booking-details-section .mphb-booking-details > li {
    flex: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
}

/* Label column */
.mphb_sc_booking_confirmation .mphb-booking-details-section .mphb-booking-details > li span.label {
  font-size: .73rem;
  color: var(--lux-muted);
  white-space: nowrap;
  display: block !important;
  line-height: 1.4;
  align-self: baseline;
}

/* Value column */
.mphb_sc_booking_confirmation .mphb-booking-details-section .mphb-booking-details > li span.value {
  font-size: .82rem;
  font-weight: 600;
  color: var(--lux-ink);
  display: block;
  line-height: 1.4;
  align-self: baseline;
}

/* -----------------------------------------------------------------
   9. ACCOMMODATIONS ROW
   ----------------------------------------------------------------- */
.mphb_sc_booking_confirmation .mphb-booking-details-section .accommodations {
  display: flex;
  gap: .4rem;
  align-items: baseline;
  margin-top: .45rem;
  padding-top: .4rem;
  border-top: 1px solid var(--lux-line);
  flex-wrap: wrap;
}

.mphb_sc_booking_confirmation .mphb-booking-details-section .accommodations-title {
  font-size: .75rem;
  color: var(--lux-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.mphb_sc_booking_confirmation .mphb-booking-details-section .accommodations-list {
  font-size: .85rem;
  font-weight: 500;
  color: var(--lux-ink);
}

.mphb_sc_booking_confirmation .mphb-booking-details-section .accommodations-list a {
  color: var(--lux-accent);
  text-decoration: none;
}

.mphb_sc_booking_confirmation .mphb-booking-details-section .accommodations-list a:hover {
  text-decoration: underline;
}

/* -----------------------------------------------------------------
   10. HIDE REDUNDANT PAYMENT ID ROW
   All payment <li> elements use class "payment-number" so we use
   nth-child(1) to target the "Payment: #ID" row (internal DB ID).
   ----------------------------------------------------------------- */
.mphb_sc_booking_confirmation .mphb-booking-details-section.payment .mphb-booking-details > li:first-child {
  display: none !important;
}

/* -----------------------------------------------------------------
   11. PAYMENT INSTRUCTIONS
   ----------------------------------------------------------------- */
.mphb_sc_booking_confirmation .mphb-payment-instructions {
  background: var(--lux-paper);
  border: 1px solid var(--lux-line);
  border-radius: 5px;
  padding: .55rem .75rem;
  font-size: .82rem;
  color: var(--lux-muted);
  line-height: 1.5;
  margin-top: .6rem;
}

.mphb_sc_booking_confirmation .mphb-payment-instructions p {
  margin: 0 0 .3rem;
  font-size: .82rem;
}
.mphb_sc_booking_confirmation .mphb-payment-instructions p:last-child {
  margin-bottom: 0;
}