/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
/* ==========================================================================
   MotoPress Hotel Booking 6.2.4  x  Bricks + Core Framework
   Hotel La Estacion - v2026
   --------------------------------------------------------------------------
   Append to: wp-content/themes/bricks-child/style.css
   (already enqueued with filemtime() cache-busting - no extra wiring needed)

   NOTE: Core Framework sets html{font-size:62.5%}, so 1rem = 10px here.
   All colors/spacing reference live CF tokens (--primary, --space-m,
   --radius-s ...). Retune the aliases in section 0 and everything follows.
   ========================================================================== */

/* ==========================================================================
   FONT: Century Gothic regular (400)
   Core Framework ships only the 700 weight; its CSS declared a 400 face
   pointing at a file that was never downloaded (404 on every page), and after
   the failed re-import the 400 face disappeared from its CSS altogether.
   The file below was uploaded by hand to Core Framework's own fonts folder
   under the name CF generates, so if the plugin ever re-adds the font its
   rule will point at the same file and this block simply becomes redundant.
   NOTE: Century Gothic is a licensed Monotype face - it is NOT on Google
   Fonts, and CF's importer expects WOFF2 (a WOFF1 upload fails).
   ========================================================================== */
@font-face {
  font-family: "Century Gothic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/uploads/core-framework/fonts/Century-Gothic-400normal.woff2") format("woff2");
}

/* ==========================================================================
   0 - TOKEN BRIDGE - the only block you should normally need to edit
   ========================================================================== */
:root {
  --mphb-accent:        var(--primary);          /* #A3664A */
  --mphb-accent-hover:  var(--primary-90);
  --mphb-accent-soft:   var(--primary-l-4);      /* #eeded8 */
  --mphb-surface:       var(--bg-surface);       /* #ffffff */
  --mphb-surface-alt:   var(--bg-secondary);     /* #F2EFE9 */
  --mphb-text:          var(--text-body);        /* #4A4A4A */
  --mphb-heading:       var(--text-title);       /* #2D2D2D */
  --mphb-muted:         var(--text-body-60);
  --mphb-line:          var(--border-primary);
  --mphb-radius:        var(--radius-s);
  --mphb-radius-sm:     var(--radius-xs);
  --mphb-field-h:       4.8rem;                  /* 48px at 62.5% root */
  --mphb-gap:           var(--space-s);
  --mphb-section-gap:   var(--space-l);
  --mphb-listing-well:  96rem;                   /* 960px - the two-column card pages only;
                                                    the text pages keep the template's 715px */
  --mphb-ok:            #3F7A55;
  --mphb-error:         #A33F3F;
}

/* ==========================================================================
   1 - CONTENT WELL - vertical rhythm inside the Bricks Post Content element
   ========================================================================== */
.lm-generic-page__post-content {
  color: var(--mphb-text);
  font-size: var(--text-m);
}
.lm-generic-page__post-content > * + * { margin-block-start: var(--space-m); }

/* MPHB shortcode wrappers are bare divs - give them the flow */
.mphb_sc_search-wrapper,
.mphb_sc_search_results-wrapper,
.mphb_sc_checkout-wrapper,
.mphb_sc_booking_confirmation,
.mphb_sc_account,
.mphb-account-content { display: block; }

.mphb_sc_search_results-wrapper > * + *,
.mphb_sc_checkout-wrapper > * + *,
.mphb-account-content > * + * { margin-block-start: var(--mphb-section-gap); }

/* ==========================================================================
   2 - TYPOGRAPHY
   ========================================================================== */
[class*="mphb"] h2,
[class*="mphb"] h3,
[class*="mphb"] h4 {
  color: var(--mphb-heading);
  font-family: "Century Gothic", sans-serif;
  line-height: 1.25;
  margin-block: 0 var(--space-2xs);
}
[class*="mphb"] h2 { font-size: var(--text-xl); }
[class*="mphb"] h3 { font-size: var(--text-l); }
[class*="mphb"] h4 { font-size: var(--text-m); letter-spacing: .02em; }

.mphb-room-type-details-title,
.mphb-customer-details-title,
.mphb-gateway-chooser-title,
.mphb-price-breakdown-title,
.mphb-booking-details-title {
  padding-block-end: var(--space-3xs);
  border-block-end: 1px solid var(--mphb-line);
}

.mphb-currency { font-variant-numeric: tabular-nums; }
.mphb-price,
.mphb-total-price,
.mphb-cart-total-price-value,
.mphb-recommendation-total-value {
  color: var(--mphb-heading);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mphb-price-period,
.mphb-recommendation-item-guests-label { color: var(--mphb-muted); font-size: var(--text-s); }
/* NOTE: do NOT add `text-decoration: line-through` to .mphb-regular-price. Despite the
   name it is the "Prices start at:" line (loop + single + a hidden period price), not a
   discounted was-price. A global strike-through here struck out every price on the site. */

/* ==========================================================================
   3 - FORM PRIMITIVES
   MPHB markup is <p><label>..</label><br><input></p> - the <br> is what
   makes these forms look broken. Kill it, make labels block-level.
   ========================================================================== */
.mphb_sc_search-form br,
.mphb-booking-form br,
.mphb_sc_checkout-form br,
.mphb-checkout-form-wrapper br,
.mphb-account-details-form br,
.mphb-login-form br { display: none; }

.mphb_sc_search-form label,
.mphb-booking-form label,
.mphb_sc_checkout-form label,
.mphb-checkout-form-wrapper label,
.mphb-account-details-form label,
.mphb-login-form label {
  display: block;
  margin-block-end: var(--space-4xs);
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--mphb-heading);
  letter-spacing: .01em;
}

/* Inline labels (checkbox / radio rows) must NOT be block */
.mphb-checkbox-label,
.mphb-radio-label,
.mphb-terms-and-conditions-accept label,
.mphb-customer-create-account label,
.mphb-gateway label {
  display: inline-flex !important;
  align-items: flex-start;
  gap: var(--space-3xs);
  font-weight: 400 !important;
  cursor: pointer;
}

/* Fields */
[class*="mphb"] input[type="text"],
[class*="mphb"] input[type="email"],
[class*="mphb"] input[type="tel"],
[class*="mphb"] input[type="number"],
[class*="mphb"] input[type="password"],
[class*="mphb"] input[type="search"],
[class*="mphb"] select,
[class*="mphb"] textarea {
  width: 100%;
  min-height: var(--mphb-field-h);
  padding: var(--space-3xs) var(--space-2xs);
  font-family: inherit;
  font-size: var(--text-m);
  color: var(--mphb-text);
  background-color: var(--mphb-surface);
  border: 1px solid var(--mphb-line);
  border-radius: var(--mphb-radius-sm);
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
[class*="mphb"] textarea { min-height: 12rem; resize: vertical; padding-block: var(--space-2xs); }

[class*="mphb"] input:focus,
[class*="mphb"] select:focus,
[class*="mphb"] textarea:focus {
  outline: none;
  border-color: var(--mphb-accent);
  box-shadow: 0 0 0 3px var(--primary-20);
}
[class*="mphb"] input::placeholder,
[class*="mphb"] textarea::placeholder { color: var(--text-body-40); }

/* Native select needs its arrow back after appearance:none */
[class*="mphb"] select {
  padding-inline-end: var(--space-m);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234A4A4A' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2xs) center;
  background-size: 1.2rem .8rem;
}

[class*="mphb"] input[type="checkbox"],
[class*="mphb"] input[type="radio"] {
  width: 1.8rem;
  height: 1.8rem;
  min-height: 0;
  margin-block-start: .2rem;
  accent-color: var(--mphb-accent);
  flex: 0 0 auto;
}

/* Required-field affordances */
.mphb-required-fields-tip { color: var(--mphb-muted); font-size: var(--text-xs); margin-block-end: var(--space-2xs); }
[class*="mphb"] abbr[title] { color: var(--mphb-accent); text-decoration: none; border: 0; cursor: help; }

/* ==========================================================================
   4 - BUTTONS - MPHB uses a bare .button class Bricks never styles
   ========================================================================== */
.lm-generic-page__post-content .button,
.lm-generic-page__post-content input[type="submit"],
.mphb-button,
.mphb-book-button,
.mphb-view-details-button,
.mphb-confirm-reservation,
.mphb-recommendation-reserve-button,
.mphb-booking-cancellation-button,
.mphb-account-content .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4xs);
  min-height: var(--mphb-field-h);
  padding: var(--space-xs) var(--space-m);
  font-family: inherit;
  font-size: var(--text-s);
  font-weight: 600;
  line-height: 150%;
  text-align: center;
  text-decoration: none;
  color: var(--light, #fff);
  background-color: var(--mphb-accent);
  border: 1px solid var(--mphb-accent);
  border-radius: var(--mphb-radius-sm);
  cursor: pointer;
  transition: all .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.lm-generic-page__post-content .button:hover,
.lm-generic-page__post-content input[type="submit"]:hover,
.mphb-button:hover,
.mphb-view-details-button:hover,
.mphb-account-content .button:hover {
  background-color: var(--mphb-accent-hover);
  border-color: var(--mphb-accent-hover);
  color: var(--light, #fff);
}
.lm-generic-page__post-content .button:disabled,
.mphb-button:disabled,
.mphb-button.mphb-keep-disabled { opacity: .45; cursor: not-allowed; }

/* Secondary / outline treatment */
.mphb-view-details-button {
  color: var(--mphb-accent);
  background-color: transparent;
}
.mphb-view-details-button:hover { background-color: var(--mphb-accent-soft); color: var(--mphb-accent); }

.mphb-remove-from-reservation,
.mphb-remove-room-button,
.mphb-remove-coupon {
  color: var(--mphb-error);
  font-size: var(--text-s);
  text-decoration: underline;
  text-underline-offset: .3rem;
}

.mphb_sc_search-submit-button-wrapper,
.mphb_sc_checkout-submit-wrapper,
.mphb-submit-button-wrapper,
.mphb-to-book-btn-wrapper { margin-block-start: var(--space-s); }

/* ==========================================================================
   5 - DATEPICKER (jquery.datepick - appended to <body>, must stay unscoped)

   Three things to know:
   a) The picker element is <div class="datepick datepick-multi
      mphb-datepick-popup ...">, so it MATCHES the generic [class*="mphb"]
      field selectors in section 3 - and it also carries the vendor's own
      jquery.datepick.css defaults (grey #777 headers, #eee cells).
   b) LiteSpeed CSS Combine emits ~11 separate files and the vendor sheet
      lands in a LATER one than bricks-child/style.css, so equal-specificity
      rules lose. Every rule below is therefore prefixed .datepick.datepick
      (doubled class) to win outright regardless of file order.
   c) Day-cell STATES (booked / past / today / check-in / selected) are
      styled by the plugin's own mphb.css at (0,4,2) and still win over
      these (0,3,2) rules. That is intentional - do not fight them.
   ========================================================================== */
.datepick-popup { z-index: 10000; }

/* (a) opt the picker's month/year dropdowns out of the section 3 field styling */
.datepick.datepick select,
.datepick.datepick input {
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.4;        /* MUST be reset: the inherited 40px line-height is
                              what makes these selects 53.8px tall */
  color: inherit;
  background: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.datepick.datepick select:focus { outline: 2px solid var(--mphb-accent); box-shadow: none; }

.datepick.datepick {
  font-family: inherit;
  font-size: 1.4rem;
  color: var(--mphb-text);
  background: var(--mphb-surface);
  border: 1px solid var(--mphb-line);
  border-radius: var(--mphb-radius);
  box-shadow: var(--shadow-l);
  padding: var(--space-3xs);
}
.datepick.datepick a { color: var(--mphb-accent); text-decoration: none; }
.datepick.datepick a.datepick-disabled { color: var(--text-body-30); }

/* Command bars: vendor ships these solid black (#000) and dark red (#600) */
.datepick.datepick .datepick-nav,
.datepick.datepick .datepick-ctrl {
  background: transparent;
  color: var(--mphb-text);
  font-size: inherit;
  padding-block: var(--space-4xs);
}
.datepick.datepick .datepick-ctrl {
  margin-block-start: var(--space-4xs);
  border-block-start: 1px solid var(--mphb-line);
}
.datepick.datepick .datepick-cmd {
  color: var(--mphb-accent);
  font-weight: 600;
  border-radius: var(--mphb-radius-sm);
}
.datepick.datepick .datepick-cmd:hover { background: var(--mphb-accent-soft); }
.datepick.datepick .datepick-month-nav,
.datepick.datepick .datepick-month-nav span { background: transparent; color: var(--mphb-muted); }

/* Month blocks.
   NOTE: datepick's JS sets an explicit pixel width on .datepick derived from
   the month width (15em each). Do NOT add margin or border here - any extra
   horizontal space pushes the second month onto a new row. */
.datepick.datepick .datepick-month { border: 0; margin: 0; }
/* Month header symmetry.
   The FIRST month renders month+year as two <select>s (datepick's changeMonth
   /changeYear); every following month is plain text. Left alone they produce
   different header heights and the two date grids sit on different baselines.
   Pin both to one fixed, centered box so the grids always align. */
.datepick.datepick .datepick-month-header,
.datepick.datepick .datepick-month-header select {
  background: transparent;
  color: var(--mphb-heading);
  font-family: "Century Gothic", sans-serif;
  font-weight: 700;
  font-size: inherit;
  line-height: 1.4;
}
.datepick.datepick .datepick-month-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5ch;
  height: 3.2rem;
  padding-block: 0;
  white-space: nowrap;
}
.datepick.datepick .datepick-month-header select {
  padding: 0 1.3rem 0 .3rem;   /* right room for the caret */
  border-radius: var(--mphb-radius-sm);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%232D2D2D' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .3rem center;
  background-size: .9rem .6rem;
}
.datepick.datepick .datepick-month-header select:hover { background-color: var(--mphb-accent-soft); }
.datepick.datepick .datepick-month table { border-collapse: collapse; }
.datepick.datepick .datepick-month thead { border-block-end: 1px solid var(--mphb-line); }
.datepick.datepick .datepick-month th,
.datepick.datepick .datepick-month th a {
  background: transparent;
  color: var(--mphb-muted);
  border: 0;
  font-size: 1.2rem;
  font-weight: 600;
  padding-block: var(--space-4xs);
}
.datepick.datepick .datepick-month td { background: transparent; border: 0; }
.datepick.datepick .datepick-month td a,
.datepick.datepick .datepick-month td span {
  padding: .5rem .2rem;
  background: transparent;
  color: var(--mphb-text);
  border-radius: var(--mphb-radius-sm);
}
.datepick.datepick .datepick-month td span { color: var(--text-body-30); }
.datepick.datepick .datepick-month td a:hover { background: var(--mphb-accent-soft); color: var(--mphb-heading); }
.datepick.datepick .datepick-month td .datepick-other-month,
.datepick.datepick .datepick-month td .datepick-weekend { background: transparent; }
.datepick.datepick .datepick-status { background: transparent; color: var(--mphb-muted); font-size: 1.2rem; }

/* ==========================================================================
   6 - MESSAGES & STATES
   ========================================================================== */
.mphb-data-incorrect,
.mphb-errors-wrapper,
.mphb-coupon-message,
.mphb-rooms-reservation-message,
.mphb-payment-messages,
.mphb-booking-confirmation-messages,
.mphb-no-rooms-found,
.mphb-not-found,
.mphb-payment-instructions,
.mphb_sc_checkout-success-reservation-message {
  padding: var(--space-2xs) var(--space-s);
  background: var(--mphb-surface-alt);
  border-inline-start: 3px solid var(--mphb-accent);
  border-radius: var(--mphb-radius-sm);
  font-size: var(--text-s);
  line-height: 1.6;
}
.mphb-data-incorrect,
.mphb-errors-wrapper,
.mphb-failed {
  border-inline-start-color: var(--mphb-error);
  color: var(--mphb-error);
  background: rgba(163, 63, 63, .05);
}
.mphb-data-success,
.mphb-succeed,
.mphb_sc_checkout-success-reservation-message {
  border-inline-start-color: var(--mphb-ok);
  background: rgba(63, 122, 85, .05);
}

.mphb-hide { display: none !important; }

/* ==========================================================================
   7 - SEARCH AVAILABILITY FORM  (page 833)
   ========================================================================== */
.mphb_sc_search-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--mphb-gap);
  align-items: end;
  padding: var(--space-m);
  background: var(--mphb-surface);
  border: 1px solid var(--mphb-line);
  border-radius: var(--mphb-radius);
  box-shadow: var(--shadow-s);
}
.mphb_sc_search-form > p { margin: 0; }
.mphb_sc_search-form .mphb-required-fields-tip { grid-column: 1 / -1; }
.mphb_sc_search-form .mphb_sc_search-submit-button-wrapper { margin-block-start: 0; }
.mphb_sc_search-submit-button-wrapper input[type="submit"] { width: 100%; }

/* ==========================================================================
   8 - SEARCH RESULTS  (page 834)
   ========================================================================== */
/* The Bricks template caps .lm-generic-page__post-content at 715px, which is
   the right measure for the text-only plugin pages. The two pages built from
   two-column cards get their own, wider measure instead. Specificity (0,2,1)
   beats Bricks' inline (0,2,0) rule. 832 = Accommodations, 834 = Search Results (ES: 953, 999). */
body.page-id-832 .lm-generic-page__post-content,
body.page-id-953 .lm-generic-page__post-content,
body.page-id-999 .lm-generic-page__post-content,
body.page-id-834 .lm-generic-page__post-content { max-width: min(var(--mphb-listing-well), 100%); }

/* CARD LAYOUT - two columns: gallery | details. Sits inside the template's
   715px reading well (deliberately NOT widened - the user rejected that).
   .mphb-room-type's children are FLAT siblings (no wrappers) in a FIXED order:
     1 .mphb-room-type-images            5 .mphb-regular-price ("Prices start at")
     2 h2.mphb-room-type-title           6 .mphb-view-details-button-wrapper  (hidden)
     3 h3.mphb-room-type-details-title   7 .mphb-reserve-room-section
       (hidden)
     4 ul.mphb-loop-room-type-attributes
   Without wrappers, grid auto-placement would put everything in one column,
   so every visible child is placed explicitly and the rows are declared up
   front so the gallery can span 1 / -1. The trailing 1fr row soaks up any
   height difference when the image is taller than the text. If MPHB ever
   adds a child (e.g. an excerpt), give it a row here or it will land on top
   of the gallery. */
.mphb-room-type {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  grid-template-rows: repeat(5, auto) 1fr;
  column-gap: var(--space-l);
  row-gap: var(--space-s);
  padding-block: var(--space-l);
  border-block-end: 1px solid var(--mphb-line);
}
.mphb-room-type:last-of-type { border-block-end: 0; }
.mphb-room-type > * { margin: 0; min-width: 0; }
.mphb-room-type > .mphb-room-type-images          { grid-area: 1 / 1 / -1 / 2; align-self: start; }
.mphb-room-type > .mphb-room-type-title           { grid-area: 1 / 2; }
/* OPTION B: the accommodation description. MPHB prints it as an UNCLASSED <p>
   child, so it is matched by exclusion; without a placement it auto-flowed
   into a row below the Book button. Trimmed to 3 lines here - the full text is
   on the room's own page. */
.mphb-room-type > p:not([class*="mphb"]) {
  grid-area: 2 / 2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--mphb-text);
}
.mphb-room-type > .mphb-loop-room-type-attributes { grid-area: 3 / 2; }
.mphb-room-type > .mphb-regular-price             { grid-area: 4 / 2; }
.mphb-room-type > .mphb-reserve-room-section      { grid-area: 5 / 2; }
/* [mphb_rooms] (Accommodations page) ends its cards with a Book form
   instead of the reserve section - same cell, or it would land on the
   gallery at 1/1 as an unplaced child. */
.mphb-room-type > .mphb-to-book-btn-wrapper       { grid-area: 5 / 2; }
/* Not in the reference layout: the "Details" heading, and the View Details
   button (the room title already links to the accommodation page). */
.mphb-room-type > .mphb-room-type-details-title,
.mphb-room-type > .mphb-view-details-button-wrapper,
.mphb-room-type > .mphb-clear { display: none; }

.mphb-room-type-images img,
.mphb-loop-room-thumbnail img,
.mphb-single-room-type-post-thumbnail img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--mphb-radius-sm);
  aspect-ratio: 4 / 3;
}
/* Square photo, no backdrop block */
.mphb-room-type > .mphb-room-type-images img { aspect-ratio: 1 / 1; }

.mphb-room-type-title { font-size: var(--text-xl); line-height: 1.25; }
.mphb-room-type-title a { color: var(--mphb-heading); text-decoration: none; }
.mphb-room-type-title a:hover { color: var(--mphb-accent); }

/* Attributes: label / value table - text only, no icons, no chips */
.mphb-loop-room-type-attributes,
.mphb-single-room-type-attributes {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-s);
  line-height: 1.5;
}
.mphb-loop-room-type-attributes > li,
.mphb-single-room-type-attributes > li {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  column-gap: var(--space-s);
}
.mphb-loop-room-type-attributes > li + li,
.mphb-single-room-type-attributes > li + li { margin-block-start: var(--space-3xs); }
.mphb-room-type > .mphb-loop-room-type-attributes li.mphb-room-type-facilities { display: none; }

.mphb-attribute-title { color: var(--mphb-muted); font-weight: 400; }
.mphb-attribute-value { color: var(--mphb-text); }
.mphb-attribute-value a { color: var(--mphb-accent); text-decoration: none; }
.mphb-attribute-value a:hover { text-decoration: underline; text-underline-offset: .3rem; }

/* "Prices start at: $790 for 7 nights" - one line */
.mphb-room-type > .mphb-regular-price {
  color: var(--mphb-text);
  font-weight: 400;
}
.mphb-room-type > .mphb-regular-price > strong { font-weight: 400; }
.mphb-room-type > .mphb-regular-price .mphb-price { font-size: var(--text-l); }
.mphb-room-type > .mphb-regular-price .mphb-price-period {
  border-block-end: 1px dashed currentColor;   /* has a title tooltip */
  cursor: help;
}

/* Quantity + availability on one row, Book underneath */
.mphb-reserve-room-section { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-s); }
.mphb-reserve-room-section > * { margin: 0; }
.mphb-rooms-quantity-wrapper { display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap; font-size: var(--text-s); }
.mphb-rooms-quantity-wrapper select { width: auto; min-width: 8rem; }
.mphb-available-rooms-count { color: var(--mphb-text); font-size: var(--text-s); }

/* Accommodations page (832): [mphb_rooms] renders the SAME .mphb-room-type
   cards inside div.mphb_sc_rooms-wrapper.mphb-room-types, so the card rules
   above already apply. Only the Book form needs tidying. */
.mphb_sc_rooms-wrapper .mphb-to-book-btn-wrapper form { margin: 0; }
.mphb-to-book-btn-wrapper br { display: none; }
.mphb_sc_rooms-wrapper .mphb-room-type:last-of-type { border-block-end: 0; }

/* Search-results summary: "Recommended for N adults" + reservation cart.
   MARKUP ORDER TRAP: inside .mphb-recommendation-item the PRICE comes first
   (subtotal -> "1 x" -> room link -> <small> occupancy). mphb.css floats the
   subtotal/total/Reserve button right to fix that visually. We use grid/flex
   placement instead (floats are ignored on grid/flex items, so the plugin's
   float rules become inert rather than fighting us). Target layout: room name
   + occupancy on the left, price on the right, dashed row divider, then
   Total and Reserve right-aligned. */
.mphb_sc_search_results-info { color: var(--mphb-text); font-size: var(--text-s); }

.mphb-recommendation {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.mphb-recommendation > .mphb-clear,
.mphb-reservation-cart > .mphb-clear { display: none; }

.mphb-recommendation-details-list { list-style: none; margin: 0; padding: 0; }
.mphb-recommendation-details-list > li {
  margin: 0;
  padding-block: var(--space-2xs);
  border-block-end: 1px dashed var(--mphb-line);
}
.mphb-recommendation-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: .5ch;
  row-gap: .2rem;
  align-items: baseline;
}
.mphb-recommendation-item-count { grid-area: 1 / 1; color: var(--mphb-text); }
.mphb-recommendation-item-link  { grid-area: 1 / 2; color: var(--mphb-accent); text-decoration: none; }
.mphb-recommendation-item-link:hover { text-decoration: underline; text-underline-offset: .3rem; }
.mphb-recommedation-item-subtotal { grid-area: 1 / 3; padding-inline-start: var(--space-s); text-align: end; }
.mphb-recommendation-item-guests {
  grid-area: 2 / 1 / 3 / 3;
  font-size: var(--text-xs);
  color: var(--mphb-muted);
}
.mphb-recommendation-item-guests-label { font-size: inherit; }

.mphb-recommendation-total,
.mphb-cart-total-price {
  display: flex;
  align-items: baseline;
  gap: .5ch;
  margin: 0;
  font-size: var(--text-m);
}
.mphb-recommendation-total { align-self: flex-end; }
.mphb-recommendation-total-title,
.mphb-cart-total-price-title { font-weight: 600; color: var(--mphb-heading); }
.mphb-recommendation-reserve-button { align-self: flex-end; }

/* Reservation cart: plain one-liner while empty ("Select from available
   accommodations."), a summary bar with the Confirm button on the right once
   rooms are added. mphb.css already hides the button/total while empty. */
.mphb-reservation-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-s);
}
.mphb-reservation-cart:not(.mphb-empty-cart) {
  padding: var(--space-s) var(--space-m);
  background: var(--mphb-surface-alt);
  border-radius: var(--mphb-radius);
}
.mphb-reservation-details > p { margin: 0; }
.mphb-reservation-details > p + p { margin-block-start: var(--space-4xs); }
.mphb-empty-cart-message,
.mphb-cart-message { color: var(--mphb-text); font-size: var(--text-s); }

/* ==========================================================================
   9 - CHECKOUT  (page 836)
   ========================================================================== */
.mphb-checkout-form-wrapper > * + * { margin-block-start: var(--mphb-section-gap); }
/* In 6.2.4 the cards are direct children of form.mphb_sc_checkout-form
   (booking details, price breakdown, your information, total price, errors,
   terms, submit). A flex column gives ONE gap between all of them - the
   plugin's own margins produced 71 / 0 / 21 / 19px. Hidden inputs are
   display:none, so they take no gap. */
.mphb_sc_checkout-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
.mphb_sc_checkout-form > * { margin: 0; }
/* mphb.css: `> .mphb-checkout-section:not(:first-of-type) { margin-top: 4em }`
   is (0,3,0) and would stack on top of the gap - out-rank it. */
form.mphb_sc_checkout-form > .mphb-checkout-section:not(:first-of-type) { margin-block-start: 0; }
.mphb_sc_checkout-form > .mphb-errors-wrapper:empty { display: none; }

.mphb-checkout-section,
.mphb-checkout-item-section {
  display: block;
  padding: var(--space-l);
  background: var(--mphb-surface);
  border: 1px solid var(--mphb-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-xs);
}
.mphb-checkout-section > * + *,
.mphb-checkout-item-section > * + * { margin-block-start: var(--space-s); }

/* Customer detail fields -> 2-up grid */
.mphb-customer-details,
.mphb-billing-fields-wrapper,
.mphb-account-details-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: var(--space-m);
}
.mphb-customer-details > h3,
.mphb-billing-fields-wrapper > h3,
.mphb-customer-details > .mphb-required-fields-tip,
.mphb-customer-note,
.mphb-customer-create-account { grid-column: 1 / -1; }
.mphb-customer-details > p,
.mphb-billing-fields-wrapper > p,
.mphb-account-details-form > p { margin: 0; }

/* Price breakdown + booking tables */
table.mphb-price-breakdown,
table.mphb-reserve-rooms-table,
.mphb-account-bookings table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-s);
  background: transparent;
  border: 0;
}
table.mphb-price-breakdown th,
table.mphb-price-breakdown td,
table.mphb-reserve-rooms-table th,
table.mphb-reserve-rooms-table td,
.mphb-account-bookings th,
.mphb-account-bookings td {
  padding: var(--space-2xs) var(--space-s);
  text-align: start;
  border: 0;
  border-block-end: 1px solid var(--mphb-line);
  vertical-align: middle;
}
table.mphb-price-breakdown th,
.mphb-account-bookings th {
  color: var(--mphb-heading);
  font-weight: 600;
  background: var(--mphb-surface-alt);
}
table.mphb-price-breakdown td:last-child,
table.mphb-price-breakdown th:last-child,
.mphb-table-price-column { text-align: end; font-variant-numeric: tabular-nums; }
.mphb-price-breakdown-total td,
.mphb-price-breakdown-total th {
  border-block-end: 0;
  border-block-start: 2px solid var(--mphb-accent);
  font-size: var(--text-m);
  font-weight: 700;
  color: var(--mphb-heading);
}
.mphb-price-breakdown-subtotal td { color: var(--mphb-muted); }
.mphb-price-breakdown-expand {
  color: var(--mphb-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .3rem;
}
/* widefat/striped are WP-admin classes leaking to the front end - neutralize */
.mphb-reserve-rooms-table.widefat { box-shadow: none; }
.mphb-reserve-rooms-table.striped tbody tr:nth-child(odd) { background: var(--mphb-surface-alt); }

/* Payment gateways */
.mphb-gateways-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.mphb-gateway {
  padding: var(--space-2xs) var(--space-s);
  background: var(--mphb-surface);
  border: 1px solid var(--mphb-line);
  border-radius: var(--mphb-radius-sm);
  transition: border-color .2s ease, background .2s ease;
}
.mphb-gateway:has(input:checked) { border-color: var(--mphb-accent); background: var(--mphb-accent-soft); }
.mphb-gateway-description {
  margin: var(--space-3xs) 0 0 2.6rem;
  font-size: var(--text-s);
  color: var(--mphb-muted);
}

/* Terms + coupon */
.mphb-terms-and-conditions {
  overflow-y: auto;
  background: var(--mphb-surface-alt);
  border-radius: var(--mphb-radius-sm);
  font-size: var(--text-s);
  line-height: 1.6;
}
.mphb-terms-and-conditions-accept { margin-block-start: var(--space-2xs); }
.mphb-terms-and-conditions-link { color: var(--mphb-accent); }
.mphb-coupon-code-wrapper { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2xs); align-items: end; }
.mphb-coupon-code-title { grid-column: 1 / -1; }

.mphb-booking-details-section + .mphb-booking-details-section { margin-block-start: var(--space-s); }
.mphb-services-details-title,
.mphb-room-rate-chooser-title { font-size: var(--text-m); }
.mphb_sc_checkout-services-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3xs); }

/* Checkout: consistent section headings. MPHB's section titles are h3s with
   no shared class; give every one the same size and spacing, no underline. */
.mphb_sc_checkout-form h3 {
  font-size: var(--text-l);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--space-s);
  padding: 0;
  border: 0;
}

/* Checkout card 1 - "Booking Details" + one block per accommodation.
   Markup: section > h3, p.check-in, p.check-out, div.reserve-rooms-details >
   div.room-details > h3.room-number, p.room-type-title, p.adults-chooser,
   p.guest-name-wrapper (with hidden inputs in between).
   Paragraph margins are zeroed and spacing is set explicitly, so selectors are
   scoped under .mphb-booking-details to outrank the "p { margin: 0 }" reset. */
.mphb-booking-details > * + * { margin-block-start: 0; }
.mphb-booking-details p { margin: 0; }

/* Check-in / Check-out rows: the first <span> is the label; everything after it
   (date, ", from", time) is inline text, so the label is pulled into a fixed
   left column instead of turning the row into a grid. */
.mphb-booking-details .mphb-check-in-date,
.mphb-booking-details .mphb-check-out-date {
  position: relative;
  padding-inline-start: 12rem;
  line-height: 1.5;
}
.mphb-booking-details .mphb-check-out-date { margin-block-start: var(--space-2xs); }
.mphb-check-in-date > span:first-child,
.mphb-check-out-date > span:first-child {
  position: absolute;
  inset-inline-start: 0;
  color: var(--mphb-muted);
}
.mphb-check-in-date strong,
.mphb-check-out-date strong { color: var(--mphb-heading); font-weight: 600; }
.mphb-check-in-date > span:not(:first-child),
.mphb-check-out-date > span:not(:first-child) { color: var(--mphb-muted); }

/* Each accommodation: divider above, then evenly spaced rows */
.mphb-booking-details .mphb-reserve-rooms-details { margin-block-start: var(--space-m); }
.mphb-booking-details .mphb-room-details {
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--mphb-line);
}
.mphb-booking-details .mphb-room-details + .mphb-room-details { margin-block-start: var(--space-m); }
.mphb-booking-details .mphb-room-details > p { margin-block-start: var(--space-s); }
.mphb-booking-details .mphb-room-details > .mphb-room-type-title { margin-block-start: 0; }
/* scoped: .mphb-room-type-title is ALSO the results-card heading class */
.mphb-booking-details .mphb-room-type-title { font-size: inherit; }
.mphb-booking-details .mphb-room-type-title > span { color: var(--mphb-text); }
.mphb-booking-details .mphb-room-type-title > a { color: var(--mphb-accent); text-decoration: none; }
.mphb-booking-details .mphb-room-type-title > a:hover { text-decoration: underline; text-underline-offset: .3rem; }

/* Field labels read as quiet captions here, fields stay a comfortable width */
.mphb_sc_checkout-form label {
  font-weight: 400;
  color: var(--mphb-text);
}
.mphb-booking-details select,
.mphb-booking-details input[type="text"] { max-width: 48rem; }

/* Checkout cards - titles, price table, total bar, terms, submit.
   Every section-level h3/h4 (incl. the price breakdown h4) gets the same size
   and an underline. Nested h3s ("Accommodation #1") keep the plain
   .mphb_sc_checkout-form h3 style because they are not direct children. */
.mphb-checkout-section > h3,
.mphb-checkout-section > h4 {
  font-family: "Century Gothic", sans-serif;
  font-size: var(--text-l);
  font-weight: 600;
  line-height: 1.3;
  color: var(--mphb-heading);
  letter-spacing: 0;
  margin: 0 0 var(--space-m);
  padding: 0 0 var(--space-s);
  border: 0;
  border-block-end: 1px solid var(--mphb-line);
}
.mphb-customer-details > h3 { margin-block-end: 0; }   /* the grid gap spaces it */
.mphb-customer-details > .mphb-required-fields-tip { margin: 0; }

/* Price breakdown */
.mphb-price-breakdown-expand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--mphb-heading);
  text-decoration: none;
}
.mphb-price-breakdown-expand:hover { color: var(--mphb-accent); text-decoration: none; }
.mphb-price-breakdown-expand .mphb-inner-icon {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--mphb-accent);
  border: 1px solid var(--mphb-line);
  border-radius: var(--mphb-radius-sm);
}
.mphb-price-breakdown-expand .mphb-inner-icon.mphb-hide { display: none; }
.mphb-price-breakdown-rate {
  margin-block-start: var(--space-4xs);
  padding-inline-start: 2.8rem;
  color: var(--mphb-muted);
  font-size: var(--text-xs);
}
table.mphb-price-breakdown .mphb-price { color: var(--mphb-heading); font-weight: 600; }
table.mphb-price-breakdown tr.mphb-price-breakdown-date td,
table.mphb-price-breakdown tr.mphb-price-breakdown-adults td,
table.mphb-price-breakdown tr.mphb-price-breakdown-nights td {
  color: var(--mphb-muted);
  font-size: var(--text-xs);
}
table.mphb-price-breakdown tr.mphb-price-breakdown-date td:first-child,
table.mphb-price-breakdown tr.mphb-price-breakdown-adults td:first-child,
table.mphb-price-breakdown tr.mphb-price-breakdown-nights td:first-child {
  padding-inline-start: calc(var(--space-s) + 2.8rem);
}
table.mphb-price-breakdown tr.mphb-price-breakdown-date .mphb-price { font-weight: 400; color: var(--mphb-text); }
table.mphb-price-breakdown .mphb-price-breakdown-total th {
  padding-block: var(--space-s);
  border: 0;
  font-size: var(--text-m);
  font-weight: 700;
  background: var(--mphb-surface-alt);
}
table.mphb-price-breakdown .mphb-price-breakdown-total th:first-child {
  border-start-start-radius: var(--mphb-radius-sm);
  border-end-start-radius: var(--mphb-radius-sm);
}
table.mphb-price-breakdown .mphb-price-breakdown-total th:last-child {
  border-start-end-radius: var(--mphb-radius-sm);
  border-end-end-radius: var(--mphb-radius-sm);
}
table.mphb-price-breakdown .mphb-price-breakdown-total .mphb-price { font-size: inherit; font-weight: 700; }

/* "Total Price" bar between the cards */
.mphb_sc_checkout-form > .mphb-total-price {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-s) var(--space-l);
  background: var(--mphb-surface-alt);
  border-radius: var(--radius-m);
  font-size: var(--text-m);
  color: var(--mphb-heading);
}
.mphb-total-price output { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6ch; }
.mphb-total-price .mphb-total-price-field .mphb-price { font-size: var(--text-xl); font-weight: 700; }
.mphb-total-price .mphb-payment-fee { font-size: var(--text-xs); color: var(--mphb-muted); }

/* Terms: MPHB collapses the box (max-height 0) and adds .mphb-active when the
   "terms & conditions" link is clicked. Pad it only while open. Selectors are
   one class deeper than mphb.css (0,2,0 / 0,3,0) so they win regardless of
   stylesheet order. */
.mphb_sc_checkout-form .mphb-checkout-terms-wrapper .mphb-terms-and-conditions {
  margin: 0;
  padding-block: 0;
  padding-inline: var(--space-l);
}
.mphb_sc_checkout-form .mphb-checkout-terms-wrapper .mphb-terms-and-conditions.mphb-active {
  margin-block-end: var(--space-s);
  padding-block: var(--space-m);
  max-height: 32rem;
}
.mphb-terms-and-conditions ul { margin: 0 0 var(--space-s); padding-inline-start: 1.8rem; }
.mphb-terms-and-conditions li + li { margin-block-start: var(--space-4xs); }
.mphb-terms-and-conditions h2 { font-size: var(--text-m); margin: var(--space-s) 0 var(--space-3xs); }
.mphb-checkout-terms-wrapper .mphb-terms-and-conditions-accept { margin: 0; }
.mphb-terms-and-conditions-accept a { text-decoration: underline; text-underline-offset: .3rem; }

/* Submit */
.mphb_sc_checkout-form > .mphb_sc_checkout-submit-wrapper { display: flex; justify-content: flex-end; }
.mphb_sc_checkout-submit-wrapper input[type="submit"] { min-width: 22rem; font-size: var(--text-m); }

/* ==========================================================================
   9b - BOOKING CONFIRMATION  (pages 837 Booking Confirmed, 839 Reservation Received)
   Markup: div.mphb_sc_booking_confirmation >
     div.mphb-booking-confirmation-messages > p, p   (only in the real post-booking flow)
     div.mphb-booking-details-section.booking > h3.mphb-booking-details-title,
         ul.mphb-booking-details > li > span.label + span.value,
         div.accommodations > span.accommodations-title + span.accommodations-list
     div.mphb-booking-details-section.payment        (same pattern, when payment applies)
   mphb.css lays the <li>s out as a wrapping flex strip with dashed dividers at
   (0,3,1), so these selectors carry element names to out-rank it.
   Test URL: /booking-confirmed/?booking_id=<id>&booking_key=<mphb_key post meta>
   ========================================================================== */
.mphb_sc_booking_confirmation {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
.mphb_sc_booking_confirmation > * { margin: 0; }
div.mphb_sc_booking_confirmation .mphb-booking-details-section + .mphb-booking-details-section { margin-block-start: 0; }

/* Message box: reads as a success note, paragraphs spaced evenly */
.mphb_sc_booking_confirmation .mphb-booking-confirmation-messages {
  padding: var(--space-s) var(--space-m);
  border-inline-start-color: var(--mphb-ok);
  background: rgba(63, 122, 85, .06);
}
.mphb-booking-confirmation-messages > p { margin: 0; }
.mphb-booking-confirmation-messages > p + p { margin-block-start: var(--space-3xs); }

/* Card */
.mphb_sc_booking_confirmation .mphb-booking-details-section {
  padding: var(--space-l);
  background: var(--mphb-surface);
  border: 1px solid var(--mphb-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-xs);
}
.mphb_sc_booking_confirmation .mphb-booking-details-title {
  font-family: "Century Gothic", sans-serif;
  font-size: var(--text-l);
  font-weight: 600;
  line-height: 1.3;
  color: var(--mphb-heading);
  margin: 0 0 var(--space-2xs);
  padding: 0 0 var(--space-s);
  border: 0;
  border-block-end: 1px solid var(--mphb-line);
}

/* Label / value rows */
div.mphb_sc_booking_confirmation .mphb-booking-details-section ul.mphb-booking-details {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
div.mphb_sc_booking_confirmation .mphb-booking-details-section ul.mphb-booking-details > li {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  column-gap: var(--space-s);
  align-items: baseline;
  flex: none;
  margin: 0;
  padding: var(--space-xs) 0;
  border: 0;
  border-block-end: 1px solid var(--mphb-line);
}
div.mphb_sc_booking_confirmation .mphb-booking-details-section ul.mphb-booking-details > li > span.label {
  display: block;
  font-size: var(--text-s);
  font-weight: 400;
  color: var(--mphb-muted);
}
div.mphb_sc_booking_confirmation .mphb-booking-details-section ul.mphb-booking-details > li > span.value {
  font-weight: 600;
  color: var(--mphb-heading);
}
.mphb_sc_booking_confirmation .booking-price .value .mphb-price { font-size: var(--text-l); font-weight: 700; }
/* Status as a pill. The template gives no status class, so it stays neutral
   (this page also shows "Pending" / "Cancelled" bookings). */
div.mphb_sc_booking_confirmation .mphb-booking-details-section ul.mphb-booking-details > li.booking-status > span.value {
  justify-self: start;
  padding: .3rem 1.2rem;
  border-radius: var(--radius-full);
  background: var(--mphb-accent-soft);
  color: var(--mphb-heading);
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* "Details:" row - same grid; the last <li> loses its border in mphb.css
   (li:last-of-type at 0,4,1), so this row draws the divider above itself. */
.mphb_sc_booking_confirmation .mphb-booking-details-section .accommodations {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  column-gap: var(--space-s);
  align-items: baseline;
  padding-block-start: var(--space-xs);
  border-block-start: 1px solid var(--mphb-line);
}
.mphb_sc_booking_confirmation .accommodations-title { font-size: var(--text-s); color: var(--mphb-muted); }
.mphb_sc_booking_confirmation .accommodations-list a { color: var(--mphb-accent); font-weight: 600; text-decoration: none; }
.mphb_sc_booking_confirmation .accommodations-list a:hover { text-decoration: underline; text-underline-offset: .3rem; }

/* ==========================================================================
   9c - PLAIN STATUS PAGES  (838 Booking Canceled, 840 Transaction Failed)
   These are ordinary pages holding one sentence - no shortcode, so none of the
   plugin classes exist. Their <p>s are styled as the same message box used
   elsewhere, scoped by page ID. If either page is ever re-created with a new
   ID, update the body class here. ES translations: 838 -> 1003, 840 -> 1005.
   ========================================================================== */
body.page-id-838 .lm-generic-page__post-content > p,
body.page-id-1003 .lm-generic-page__post-content > p,
body.page-id-1005 .lm-generic-page__post-content > p,
body.page-id-840 .lm-generic-page__post-content > p {
  margin: 0;
  padding: var(--space-m) var(--space-l);
  background: var(--mphb-surface-alt);
  border-inline-start: 3px solid var(--mphb-accent);
  border-radius: var(--mphb-radius-sm);
  font-size: var(--text-m);
  line-height: 1.6;
  color: var(--mphb-text);
}
body.page-id-838 .lm-generic-page__post-content > p + p,
body.page-id-1003 .lm-generic-page__post-content > p + p,
body.page-id-1005 .lm-generic-page__post-content > p + p,
body.page-id-840 .lm-generic-page__post-content > p + p { margin-block-start: var(--space-s); }
/* Transaction Failed reads as an error */
body.page-id-1005 .lm-generic-page__post-content > p,
body.page-id-840 .lm-generic-page__post-content > p {
  border-inline-start-color: var(--mphb-error);
  background: rgba(163, 63, 63, .05);
}

/* ==========================================================================
   10 - MY ACCOUNT  (page 841)
   ========================================================================== */
/* Markup (logged in): div.mphb_sc_account > nav.mphb-account-menu > ul > li > a
   (Dashboard, Bookings, Account, Logout - fixed order) + div.mphb-account-content.
   Logged out: div.mphb_sc_account > div.mphb-account-content > div.mphb-login-form.
   Tabs are /my-account/<tab>/ (rewrite -> ?tab=dashboard|bookings|account-details). */

/* Layout: menu | content once logged in. mphb.css floats them at 25% / 73%
   (0,2,0) and adds a clearfix ::after, which would become a grid cell. */
div.mphb_sc_account:has(> nav.mphb-account-menu) {
  display: grid;
  grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
  gap: var(--space-l);
  align-items: start;
}
div.mphb_sc_account::after { content: none; }
div.mphb_sc_account > nav.mphb-account-menu,
div.mphb_sc_account > div.mphb-account-content { float: none; width: auto; margin: 0; }

/* Menu card */
.mphb-account-menu {
  padding: var(--space-2xs);
  background: var(--mphb-surface);
  border: 1px solid var(--mphb-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-xs);
}
.mphb-account-menu ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mphb-account-menu li { margin: 0; }
.mphb-account-menu li:last-child {
  margin-block-start: var(--space-3xs);
  padding-block-start: var(--space-3xs);
  border-block-start: 1px solid var(--mphb-line);
}
.mphb-account-menu a {
  display: block;
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--mphb-radius-sm);
  color: var(--mphb-text);
  font-size: var(--text-s);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.mphb-account-menu a:hover { background: var(--mphb-surface-alt); color: var(--mphb-heading); }
.mphb-account-menu li:last-child a { color: var(--mphb-muted); font-weight: 400; }
/* Active tab: MPHB marks nothing, so bricks-child/functions.php adds
   body.mphb-account-tab-<tab>; the menu order is fixed. */
body.mphb-account-tab-dashboard .mphb-account-menu li:nth-child(1) > a,
body.mphb-account-tab-bookings .mphb-account-menu li:nth-child(2) > a,
body.mphb-account-tab-account-details .mphb-account-menu li:nth-child(3) > a {
  background: var(--mphb-accent);
  color: var(--light, #fff);
}

/* Content card - logged in only (the login form is its own card) */
div.mphb_sc_account:has(> nav.mphb-account-menu) > .mphb-account-content {
  padding: var(--space-l);
  background: var(--mphb-surface);
  border: 1px solid var(--mphb-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-xs);
  line-height: 1.6;
}
.mphb-account-content > * { margin: 0; }
.mphb-account-content > * + * { margin-block-start: var(--space-s); }

/* Bookings tab. The content card is only ~400px wide inside the 715px well,
   so a 5-column table cannot fit (it needed 542px). Use the stacked layout
   mphb.css already ships for mobile (<td data-title>), at every width: one
   bordered block per booking, label on the left, value on the right. */
.mphb_sc_account table.mphb-account-bookings {
  display: block;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-s);
}
.mphb_sc_account table.mphb-account-bookings thead { display: none; }
.mphb_sc_account table.mphb-account-bookings tbody,
.mphb_sc_account table.mphb-account-bookings tr { display: block; width: 100%; }
.mphb_sc_account table.mphb-account-bookings tr {
  padding: var(--space-3xs) var(--space-s);
  border: 1px solid var(--mphb-line);
  border-radius: var(--mphb-radius-sm);
}
.mphb_sc_account table.mphb-account-bookings tr + tr { margin-block-start: var(--space-s); }
.mphb_sc_account table.mphb-account-bookings td {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  width: 100%;
  padding: var(--space-2xs) 0;
  border: 0;
  border-block-end: 1px solid var(--mphb-line);
  text-align: end;
}
.mphb_sc_account table.mphb-account-bookings td:last-child { border-block-end: 0; }
.mphb_sc_account table.mphb-account-bookings td::before {
  content: attr(data-title);
  float: none;
  margin-inline-end: auto;          /* label left, everything else pushed right */
  color: var(--mphb-muted);
  font-weight: 400;
}
.mphb_sc_account table.mphb-account-bookings td br { display: none; }
.mphb-account-bookings .booking-status {
  display: inline-block;
  padding: .2rem var(--space-2xs);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--mphb-accent-soft);
  color: var(--mphb-heading);
}
.mphb-account-bookings td.booking-number { font-weight: 600; color: var(--mphb-heading); }
.mphb-account-bookings .booking-price { font-variant-numeric: tabular-nums; }
.mphb-account-bookings th:last-child,
.mphb-account-bookings td.booking-actions { text-align: end; }
.mphb-account-bookings .booking-actions a {
  display: inline-block;
  padding: .4rem 1.2rem;
  border: 1px solid var(--mphb-line);
  border-radius: var(--mphb-radius-sm);
  color: var(--mphb-accent);
  font-weight: 600;
  text-decoration: none;
}
.mphb-account-bookings .booking-actions a:hover { background: var(--mphb-accent-soft); }
.mphb-nav-links { display: flex; gap: var(--space-3xs); margin-block-start: var(--space-m); }
.mphb-nav-links .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 3.2rem;
  height: 3.2rem;
  padding-inline: var(--space-3xs);
  border: 1px solid var(--mphb-line);
  border-radius: var(--mphb-radius-sm);
  text-decoration: none;
  color: var(--mphb-text);
}
.mphb-nav-links span.page-numbers { background: var(--mphb-accent); border-color: var(--mphb-accent); color: var(--light, #fff); }

/* Account tab: details grid, then a separated password grid, then Save */
form.mphb-account-details-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
form.mphb-account-details-form > * { margin: 0; }
.mphb-account-details,
.mphb-account-change-password {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-s) var(--space-m);
}
.mphb-account-details > p,
.mphb-account-change-password > p { margin: 0; }
.mphb-account-change-password {
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--mphb-line);
}
.mphb-account-change-password > p:first-child {
  grid-column: 1 / -1;
  font-family: "Century Gothic", sans-serif;
  font-size: var(--text-m);
  color: var(--mphb-heading);
}
.mphb-account-details-form label { font-weight: 400; color: var(--mphb-text); }

/* Login (logged out) */
.mphb-login-form-wrap,
.mphb-login-form {
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--space-l);
  background: var(--mphb-surface);
  border: 1px solid var(--mphb-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-xs);
}
.mphb-login-form form { display: flex; flex-direction: column; gap: var(--space-s); }
.mphb-login-form form > p { margin: 0; }
.mphb-login-form label { font-weight: 400; color: var(--mphb-text); }
.mphb-login-form .login-remember label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  margin: 0;
  cursor: pointer;
}
.mphb-login-form .login-submit input[type="submit"] { width: 100%; }
.mphb-login-form > a {
  display: inline-block;
  margin-block-start: var(--space-s);
  font-size: var(--text-s);
}

/* ==========================================================================
   12 - SINGLE ACCOMMODATION  (post type mphb_room_type)
   MPHB Theme Mode appends these blocks to the_content, as direct children of
   the template's Post Content element, in this order:
     div.mphb-single-room-type-gallery-wrapper  (a plain WP [gallery], not a slider)
     h2.mphb-details-title + ul.mphb-single-room-type-attributes
     p.mphb-regular-price
     h2.mphb-calendar-title + div.mphb-calendar.mphb-datepick.inlinePicker
     h2.mphb-reservation-form-title + form.mphb-booking-form
   The attribute list and the datepicker chrome are already covered by
   sections 8 and 5. Template 902 now matches this post type, so the page gets
   the standard title + 715px well.
   ========================================================================== */
body.single-mphb_room_type .lm-generic-page__post-content > * + * { margin-block-start: var(--space-l); }

.mphb-details-title,
.mphb-calendar-title,
.mphb-reservation-form-title {
  font-family: "Century Gothic", sans-serif;
  font-size: var(--text-l);
  font-weight: 600;
  line-height: 1.3;
  color: var(--mphb-heading);
  margin: 0 0 var(--space-m);
  padding: 0 0 var(--space-s);
  border-block-end: 1px solid var(--mphb-line);
}

/* "Prices start at: $X per night" */
body.single-mphb_room_type .mphb-regular-price {
  color: var(--mphb-text);
  font-weight: 400;
}
body.single-mphb_room_type .mphb-regular-price .mphb-price { font-size: var(--text-l); }
body.single-mphb_room_type .mphb-regular-price .mphb-price-period {
  border-block-end: 1px dashed currentColor;
  cursor: help;
}

/* Gallery: WordPress [gallery] markup (figure.gallery-item > .gallery-icon > a > img).
   WP/theme set per-column widths and floats - override with a square grid. */
.mphb-single-room-type-gallery-wrapper .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-2xs);
  margin: 0;
}
/* Bricks' frontend-layer.min.css has `.gallery.gallery-columns-N .gallery-item
   { flex: 1 1 25%; max-width: 25% }` at (0,3,0), which capped each figure at
   25% of its grid cell (33.8px). !important is the least brittle override
   since the column count varies per gallery. */
.mphb-single-room-type-gallery-wrapper .gallery-item {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  margin: 0;
  padding: 0;                       /* WP gallery CSS adds 0 10px 20px */
  float: none;
}
.mphb-single-room-type-gallery-wrapper .gallery-icon { margin: 0; }
.mphb-single-room-type-gallery-wrapper .gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 0;
  border-radius: var(--mphb-radius-sm);
}
.mphb-single-room-type-gallery-wrapper .gallery-caption { font-size: var(--text-xs); color: var(--mphb-muted); }

/* Booking form: a card, fields two-up */
.mphb-booking-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-s) var(--space-m);
  padding: var(--space-l);
  background: var(--mphb-surface);
  border: 1px solid var(--mphb-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-xs);
}
.mphb-booking-form > p { margin: 0; }
.mphb-booking-form > .mphb-required-fields-tip,
.mphb-booking-form > .mphb-errors-wrapper,
.mphb-booking-form > .mphb-reserve-btn-wrapper { grid-column: 1 / -1; }
.mphb-booking-form label { font-weight: 400; color: var(--mphb-text); }
.mphb-reserve-btn-wrapper { display: flex; justify-content: flex-end; }
.mphb-reserve-btn-wrapper .button { min-width: 22rem; font-size: var(--text-m); }

/* ==========================================================================
   13 - ACCOMMODATION TAXONOMY ARCHIVES
   e.g. /accommodation-facility/minibar/ - the amenity links in the Details
   table. MPHB registers these taxonomies but ships no template, and no Bricks
   template matches them either, so BRICKS' FALLBACK archive renders them:
     .brxe-posts > ul.bricks-layout-wrapper > li.bricks-layout-item
       > .bricks-layout-inner
           > figure.image-wrapper > a > img
           > .content-wrapper > h3.dynamic > a  +  div.dynamic (publish date)
   Two things to know:
   - The element id (#brxe-xxxxxx) is REGENERATED ON EVERY PAGE LOAD, so never
     target it; the class names are stable.
   - Bricks' own rules sit inside `@layer bricks`, and layered styles always
     lose to unlayered ones, so plain selectors here win without !important
     even against Bricks' id-based rules.
   ========================================================================== */
/* The fallback archive has no page padding at all - the title sits outside the
   container and both run to the viewport edge, unlike every other page. */
body[class*="tax-mphb_room_type"] #brx-content,
body[class*="tax-mphb_room_type"] .bricks-archive-title-wrapper,
body.post-type-archive-mphb_room_type #brx-content,
body.post-type-archive-mphb_room_type .bricks-archive-title-wrapper { padding-inline: var(--space-m); }

body[class*="tax-mphb_room_type"] .brxe-posts .bricks-layout-wrapper,
body.post-type-archive-mphb_room_type .brxe-posts .bricks-layout-wrapper {
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  gap: var(--space-m);
}
body[class*="tax-mphb_room_type"] .bricks-isotope-sizer,
body.post-type-archive-mphb_room_type .bricks-isotope-sizer { display: none; }

body[class*="tax-mphb_room_type"] .bricks-layout-inner,
body.post-type-archive-mphb_room_type .bricks-layout-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--mphb-surface);
  border: 1px solid var(--mphb-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-xs);
  transition: box-shadow .2s ease;
}
body[class*="tax-mphb_room_type"] .bricks-layout-inner:hover,
body.post-type-archive-mphb_room_type .bricks-layout-inner:hover { box-shadow: var(--shadow-m); }

body[class*="tax-mphb_room_type"] .bricks-layout-inner .image-wrapper,
body.post-type-archive-mphb_room_type .bricks-layout-inner .image-wrapper { margin: 0; }
body[class*="tax-mphb_room_type"] .bricks-layout-inner .image-wrapper img,
body.post-type-archive-mphb_room_type .bricks-layout-inner .image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

body[class*="tax-mphb_room_type"] .bricks-layout-inner .content-wrapper,
body.post-type-archive-mphb_room_type .bricks-layout-inner .content-wrapper { padding: var(--space-m); }
body[class*="tax-mphb_room_type"] .bricks-layout-inner .content-wrapper h3,
body.post-type-archive-mphb_room_type .bricks-layout-inner .content-wrapper h3 {
  margin: 0;
  font-size: var(--text-l);
  line-height: 1.3;
}
body[class*="tax-mphb_room_type"] .bricks-layout-inner .content-wrapper h3 a,
body.post-type-archive-mphb_room_type .bricks-layout-inner .content-wrapper h3 a {
  color: var(--mphb-heading);
  text-decoration: none;
}
body[class*="tax-mphb_room_type"] .bricks-layout-inner .content-wrapper h3 a:hover,
body.post-type-archive-mphb_room_type .bricks-layout-inner .content-wrapper h3 a:hover { color: var(--mphb-accent); }
/* the second dynamic field is the post publish date - meaningless for a room */
body[class*="tax-mphb_room_type"] .bricks-layout-inner .content-wrapper .dynamic[data-field-id="1"],
body.post-type-archive-mphb_room_type .bricks-layout-inner .content-wrapper .dynamic[data-field-id="1"] { display: none; }

body[class*="tax-mphb_room_type"] .bricks-pagination,
body.post-type-archive-mphb_room_type .bricks-pagination { margin-block-start: var(--space-l); }

/* ==========================================================================
   11 - RESPONSIVE
   ========================================================================== */
@media (max-width: 767px) {
  /* Full stack. Listed one by one (not `> *`) so these beat the explicit
     placements above on specificity as well as order. */
  .mphb-room-type { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .mphb-room-type > .mphb-room-type-images,
  .mphb-room-type > .mphb-room-type-title,
  .mphb-room-type > .mphb-room-type-details-title,
  .mphb-room-type > .mphb-loop-room-type-attributes,
  .mphb-room-type > .mphb-regular-price,
  .mphb-room-type > .mphb-view-details-button-wrapper,
  .mphb-room-type > .mphb-reserve-room-section,
  .mphb-room-type > .mphb-to-book-btn-wrapper,
  .mphb-room-type > p:not([class*="mphb"]) { grid-area: auto; }
  .mphb-room-type-images img { aspect-ratio: 16 / 9; }
  .mphb_sc_search-form { grid-template-columns: minmax(0, 1fr); padding: var(--space-s); }
  .mphb-checkout-section,
  .mphb-checkout-item-section { padding: var(--space-s); }
  .mphb-coupon-code-wrapper { grid-template-columns: minmax(0, 1fr); }
  .mphb-booking-form { padding: var(--space-m); }
  .mphb-reserve-btn-wrapper .button { width: 100%; min-width: 0; }
  .mphb-single-room-type-gallery-wrapper .gallery { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
  /* The inline availability calendar shows 2 months (numberOfMonthCalendar),
     ~436px, which overflows the ~342px column. datepick sets an inline px
     width on .datepick, hence !important; stack the months instead. */
  .mphb-calendar .datepick { width: 100% !important; }
  .mphb-calendar .datepick .datepick-month { float: none; width: 100%; }
  .mphb-calendar .datepick .datepick-month + .datepick-month { margin-block-start: var(--space-s); }
  body.page-id-838 .lm-generic-page__post-content > p,
  body.page-id-1003 .lm-generic-page__post-content > p,
  body.page-id-1005 .lm-generic-page__post-content > p,
  body.page-id-840 .lm-generic-page__post-content > p { padding: var(--space-s) var(--space-m); }
  .mphb_sc_booking_confirmation { gap: var(--space-m); }
  .mphb_sc_booking_confirmation .mphb-booking-details-section { padding: var(--space-m); }
  div.mphb_sc_booking_confirmation .mphb-booking-details-section ul.mphb-booking-details > li,
  .mphb_sc_booking_confirmation .mphb-booking-details-section .accommodations { grid-template-columns: 9rem minmax(0, 1fr); }
  .mphb_sc_checkout-form { gap: var(--space-m); }
  .mphb-checkout-section,
  .mphb-checkout-item-section { padding: var(--space-m); }
  .mphb_sc_checkout-form > .mphb-total-price { padding-inline: var(--space-m); }
  .mphb_sc_checkout-submit-wrapper input[type="submit"] { width: 100%; }
  .mphb-booking-details .mphb-check-in-date,
  .mphb-booking-details .mphb-check-out-date { padding-inline-start: 0; }
  .mphb-check-in-date > span:first-child,
  .mphb-check-out-date > span:first-child { position: static; display: block; }
  div.mphb_sc_account:has(> nav.mphb-account-menu) { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
  .mphb-account-menu ul { flex-direction: row; flex-wrap: wrap; }
  .mphb-account-menu li:last-child { margin: 0 0 0 auto; padding: 0; border: 0; }
  div.mphb_sc_account:has(> nav.mphb-account-menu) > .mphb-account-content { padding: var(--space-m); }
  .mphb-login-form { padding: var(--space-m); }

  /* Stack the price breakdown instead of letting it overflow */
  table.mphb-price-breakdown,
  table.mphb-price-breakdown tbody,
  table.mphb-price-breakdown tr,
  table.mphb-price-breakdown td { display: block; width: 100%; }
  table.mphb-price-breakdown tr { padding-block: var(--space-3xs); border-block-end: 1px solid var(--mphb-line); }
  table.mphb-price-breakdown td { border: 0; padding-inline: 0; }
  table.mphb-price-breakdown td:last-child { text-align: start; font-weight: 600; }

  .mphb-account-bookings table { display: block; overflow-x: auto; white-space: nowrap; }
}