/* ============================================================================
   Hisa Lojz — MotoPress Hotel Booking — premium restyle
   ----------------------------------------------------------------------------
   Goal   : Turn the default (Salient-mangled) MotoPress booking UI into a
            polished, modern, alpine-retreat booking experience that matches
            the site's leafy-green brand (#93c355).

   Why the #ajax-content-wrap prefix?
            Salient skins all form controls with high-specificity rules keyed
            off  body[data-form-style="default"]  (it even forces native
            <select> boxes to a bright-green background with white text and
            strips date inputs of borders/padding). A plain  .mphb… !important
            rule LOSES that fight. Prefixing with the page wrapper's ID
            (#ajax-content-wrap, present on every Salient page) raises our
            specificity above the theme so the overrides reliably win.
            NOTE: the jQuery date-picker pop-up (.datepick…) is appended to
            <body>, OUTSIDE #ajax-content-wrap, so those rules are intentionally
            left unprefixed.  (Verified live on the site.)

   Scope  : Everything is scoped to MotoPress markup so the rest of the site is
            never touched. Covers the full flow: availability search form,
            sidebar search widget, search results, single-accommodation booking
            form, date-picker pop-up, inline availability calendar, checkout,
            payment gateways, and the confirmation screen.

   Install: Drop into the salient-child theme and enqueue so it survives plugin
            AND theme updates — see IMPLEMENTATION-claude-code.md.
   ============================================================================ */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root {
  --hl-green:        #93c355;  /* brand leafy green                          */
  --hl-green-dark:   #79a83f;  /* hover / active                             */
  --hl-green-deep:   #5e8330;  /* prices, strong accents                     */
  --hl-green-darker: #45611f;  /* headings on tint, deepest accent           */
  --hl-green-tint:   #f3f8ea;  /* faint fill: hovered rows, selected days    */
  --hl-green-tint-2: #e9f1d8;  /* range fill on the calendar                 */
  --hl-ink:          #38422f;  /* primary text (warm charcoal-green)         */
  --hl-muted:        #7a8270;  /* labels, secondary text                     */
  --hl-faint:        #aab09f;  /* placeholders, disabled                     */
  --hl-border:       #d9decf;  /* field + card borders                       */
  --hl-border-soft:  #eaeee1;  /* table dividers, inner lines                */
  --hl-surface:      #ffffff;  /* fields + cards                             */
  --hl-surface-2:    #fafbf5;  /* sections, alt rows                         */
  --hl-radius-lg:    16px;
  --hl-radius:       11px;
  --hl-radius-sm:    9px;
  --hl-shadow-sm:    0 1px 2px rgba(45,58,28,.06);
  --hl-shadow:       0 4px 16px rgba(45,58,28,.08), 0 1px 3px rgba(45,58,28,.05);
  --hl-shadow-lg:    0 16px 40px rgba(45,58,28,.16), 0 4px 12px rgba(45,58,28,.08);
  --hl-ring:         0 0 0 3px rgba(147,195,85,.30);
  --hl-grad:         linear-gradient(180deg, #9ecb60 0%, #87b948 100%);
  --hl-grad-hover:   linear-gradient(180deg, #92c252 0%, #76a23a 100%);
  --hl-ease:         cubic-bezier(.4,0,.2,1);
}

/* ---- 2. SHARED TYPOGRAPHY + SECTION HEADINGS ----------------------------- */
#ajax-content-wrap .mphb_sc_search-form,
#ajax-content-wrap .mphb_widget_search-form,
#ajax-content-wrap .mphb-booking-form,
#ajax-content-wrap .mphb_sc_checkout-form,
#ajax-content-wrap .mphb-checkout {
  font-family: inherit;
  color: var(--hl-ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

#ajax-content-wrap .mphb-reservation-form-title,
#ajax-content-wrap .mphb-details-title,
#ajax-content-wrap .mphb-calendar-title,
#ajax-content-wrap .mphb-checkout-section h2,
#ajax-content-wrap .mphb-checkout-section h3,
#ajax-content-wrap .mphb-section-title {
  position: relative;
  margin: 0 0 18px;
  padding-bottom: 12px;
  font-weight: 700;
  font-size: 1.18em;
  letter-spacing: -.01em;
  color: var(--hl-ink);
}
#ajax-content-wrap .mphb-reservation-form-title::after,
#ajax-content-wrap .mphb-details-title::after,
#ajax-content-wrap .mphb-calendar-title::after,
#ajax-content-wrap .mphb-checkout-section h2::after,
#ajax-content-wrap .mphb-checkout-section h3::after,
#ajax-content-wrap .mphb-section-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 44px; height: 3px;
  border-radius: 3px;
  background: var(--hl-green);
}

/* ---- 3. FIELD ROWS, LABELS, HELPER TIPS ---------------------------------- */
#ajax-content-wrap .mphb_sc_search-form > p,
#ajax-content-wrap .mphb_widget_search-form > p,
#ajax-content-wrap .mphb-booking-form > p,
#ajax-content-wrap .mphb-check-in-date-wrapper,
#ajax-content-wrap .mphb-check-out-date-wrapper,
#ajax-content-wrap .mphb-adults-wrapper,
#ajax-content-wrap .mphb-children-wrapper,
#ajax-content-wrap .mphb_sc_search-check-in-date,
#ajax-content-wrap .mphb_sc_search-check-out-date,
#ajax-content-wrap .mphb_sc_search-adults,
#ajax-content-wrap .mphb_sc_search-children,
#ajax-content-wrap .mphb_widget_search-check-in-date,
#ajax-content-wrap .mphb_widget_search-check-out-date,
#ajax-content-wrap .mphb_widget_search-adults,
#ajax-content-wrap .mphb_widget_search-children {
  margin: 0 0 18px !important;
}

#ajax-content-wrap .mphb_sc_search-form label,
#ajax-content-wrap .mphb_widget_search-form label,
#ajax-content-wrap .mphb-booking-form label,
#ajax-content-wrap .mphb_sc_checkout-form label,
#ajax-content-wrap .mphb-checkout label {
  display: inline-block;
  margin-bottom: 7px;
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hl-muted);
}

/* drop the plugin's stray <br> between label and field */
#ajax-content-wrap .mphb_sc_search-form label + br,
#ajax-content-wrap .mphb_widget_search-form label + br,
#ajax-content-wrap .mphb-booking-form label + br { display: none; }

#ajax-content-wrap .mphb-required-fields-tip {
  margin: 0 0 18px !important;
  color: var(--hl-faint);
  font-size: 12px;
}
#ajax-content-wrap .mphb-required-fields-tip abbr,
#ajax-content-wrap .mphb-booking-form abbr[title="required"],
#ajax-content-wrap label abbr[title] {
  color: var(--hl-green-deep);
  border: 0;
  text-decoration: none;
  cursor: help;
}

/* ---- 4. TEXT INPUTS & DATE FIELDS ---------------------------------------- */
#ajax-content-wrap .mphb_sc_search-form input[type="text"],
#ajax-content-wrap .mphb_widget_search-form input[type="text"],
#ajax-content-wrap .mphb-booking-form input[type="text"],
#ajax-content-wrap .mphb-datepick,
#ajax-content-wrap .mphb_datepicker,
#ajax-content-wrap .mphb_sc_checkout-form input[type="text"],
#ajax-content-wrap .mphb_sc_checkout-form input[type="email"],
#ajax-content-wrap .mphb_sc_checkout-form input[type="tel"],
#ajax-content-wrap .mphb_sc_checkout-form input[type="number"],
#ajax-content-wrap .mphb_sc_checkout-form textarea,
#ajax-content-wrap .mphb-checkout input[type="text"],
#ajax-content-wrap .mphb-checkout input[type="email"],
#ajax-content-wrap .mphb-checkout input[type="tel"],
#ajax-content-wrap .mphb-checkout input[type="number"],
#ajax-content-wrap .mphb-checkout textarea {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 13px 16px !important;
  background-color: var(--hl-surface) !important;
  color: var(--hl-ink) !important;
  border: 1.5px solid var(--hl-border) !important;
  border-radius: var(--hl-radius-sm) !important;
  font-size: 15px;
  line-height: 1.4;
  box-shadow: var(--hl-shadow-sm) inset;
  transition: border-color .18s var(--hl-ease), box-shadow .18s var(--hl-ease), background-color .18s var(--hl-ease);
}

#ajax-content-wrap .mphb_sc_checkout-form textarea,
#ajax-content-wrap .mphb-checkout textarea {
  min-height: 120px; resize: vertical; padding-top: 14px !important;
}

/* calendar glyph on the date fields */
#ajax-content-wrap .mphb-datepick,
#ajax-content-wrap .mphb_datepicker {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%2393c355' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2.5'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  padding-right: 46px !important;
  cursor: pointer;
}

#ajax-content-wrap input.mphb-datepick::placeholder,
#ajax-content-wrap .mphb-checkout input::placeholder,
#ajax-content-wrap .mphb_sc_checkout-form input::placeholder { color: var(--hl-faint); }

/* hover */
#ajax-content-wrap .mphb_sc_search-form input:hover,
#ajax-content-wrap .mphb-booking-form input:hover,
#ajax-content-wrap .mphb-datepick:hover,
#ajax-content-wrap .mphb-checkout input:hover,
#ajax-content-wrap .mphb_sc_checkout-form input:hover { border-color: #c4cdb2 !important; }

/* focus (inputs + selects) */
#ajax-content-wrap .mphb_sc_search-form input:focus,
#ajax-content-wrap .mphb_widget_search-form input:focus,
#ajax-content-wrap .mphb-booking-form input:focus,
#ajax-content-wrap .mphb-datepick:focus,
#ajax-content-wrap .mphb_sc_checkout-form input:focus,
#ajax-content-wrap .mphb_sc_checkout-form textarea:focus,
#ajax-content-wrap .mphb-checkout input:focus,
#ajax-content-wrap .mphb-checkout textarea:focus,
#ajax-content-wrap .mphb_sc_search-form select:focus,
#ajax-content-wrap .mphb_widget_search-form select:focus,
#ajax-content-wrap .mphb-booking-form select:focus,
#ajax-content-wrap .mphb-checkout select:focus {
  outline: none;
  border-color: var(--hl-green) !important;
  box-shadow: var(--hl-ring) !important;
  background-color: #fff !important;
}

/* ---- 5. SELECT DROPDOWNS  (fixes the bright-green box bug) ---------------- */
#ajax-content-wrap .mphb_sc_search-form select,
#ajax-content-wrap .mphb_widget_search-form select,
#ajax-content-wrap .mphb-booking-form select,
#ajax-content-wrap .mphb-adults-wrapper select,
#ajax-content-wrap .mphb-children-wrapper select,
#ajax-content-wrap .mphb_sc_search-adults select,
#ajax-content-wrap .mphb_sc_search-children select,
#ajax-content-wrap .mphb_sc_checkout-form select,
#ajax-content-wrap .mphb-checkout select {
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 13px 44px 13px 16px !important;
  background-color: var(--hl-surface) !important;
  color: var(--hl-ink) !important;
  border: 1.5px solid var(--hl-border) !important;
  border-radius: var(--hl-radius-sm) !important;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: var(--hl-shadow-sm) inset;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%235e8330' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  transition: border-color .18s var(--hl-ease), box-shadow .18s var(--hl-ease);
}
#ajax-content-wrap .mphb-booking-form select:hover,
#ajax-content-wrap .mphb_sc_search-form select:hover,
#ajax-content-wrap .mphb-checkout select:hover { border-color: #c4cdb2 !important; }

#ajax-content-wrap .mphb-booking-form select option,
#ajax-content-wrap .mphb_sc_search-form select option,
#ajax-content-wrap .mphb_widget_search-form select option,
#ajax-content-wrap .mphb-checkout select option { background: #fff; color: var(--hl-ink); }

/* adults / children side by side */
#ajax-content-wrap .mphb-capacity-wrapper { display: flex; flex-wrap: wrap; gap: 16px; }
#ajax-content-wrap .mphb-capacity-wrapper .mphb-adults-wrapper,
#ajax-content-wrap .mphb-capacity-wrapper .mphb-children-wrapper { flex: 1 1 140px; margin-bottom: 0 !important; }

/* ---- 6. BUTTONS  (search / reserve / checkout / confirm) ----------------- */
#ajax-content-wrap .mphb_sc_search-form button[type="submit"],
#ajax-content-wrap .mphb_sc_search-form input[type="submit"],
#ajax-content-wrap .mphb_widget_search-form button[type="submit"],
#ajax-content-wrap .mphb_widget_search-form input[type="submit"],
#ajax-content-wrap .mphb-reserve-btn,
#ajax-content-wrap .mphb-booking-form button[type="submit"],
#ajax-content-wrap .mphb_sc_checkout-form button[type="submit"],
#ajax-content-wrap .mphb_sc_checkout-form input[type="submit"],
#ajax-content-wrap .mphb-checkout button[type="submit"],
#ajax-content-wrap .mphb-checkout input[type="submit"],
#ajax-content-wrap .mphb-new-booking-btn,
#ajax-content-wrap button.mphb-button,
#ajax-content-wrap a.mphb-button {
  -webkit-appearance: none; appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 52px;
  padding: 15px 32px !important;
  background: var(--hl-grad) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--hl-radius-sm) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.1 !important;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(94,131,48,.30);
  transition: background .18s var(--hl-ease), transform .08s var(--hl-ease), box-shadow .2s var(--hl-ease);
}
#ajax-content-wrap .mphb_sc_search-form button[type="submit"]:hover,
#ajax-content-wrap .mphb_widget_search-form button[type="submit"]:hover,
#ajax-content-wrap .mphb_widget_search-form input[type="submit"]:hover,
#ajax-content-wrap .mphb-reserve-btn:hover,
#ajax-content-wrap .mphb-booking-form button[type="submit"]:hover,
#ajax-content-wrap .mphb_sc_checkout-form button[type="submit"]:hover,
#ajax-content-wrap .mphb-checkout button[type="submit"]:hover,
#ajax-content-wrap .mphb-new-booking-btn:hover,
#ajax-content-wrap button.mphb-button:hover,
#ajax-content-wrap a.mphb-button:hover {
  background: var(--hl-grad-hover) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(94,131,48,.34);
  transform: translateY(-1px);
}
#ajax-content-wrap .mphb-reserve-btn:active,
#ajax-content-wrap .mphb_widget_search-form input[type="submit"]:active,
#ajax-content-wrap button.mphb-button:active,
#ajax-content-wrap .mphb_sc_search-form button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(94,131,48,.30);
}

#ajax-content-wrap .mphb-reserve-btn-wrapper,
#ajax-content-wrap .mphb_sc_search-submit-button-wrapper,
#ajax-content-wrap .mphb_widget_search-submit-button-wrapper { margin-top: 8px; }

/* NOTE: mphb-styles puts .mphbs-fluid-button on the <form> itself, NOT on the
   button — never use it bare in a selector or the whole widget gets button
   styling (green gradient slab). Target the submit input instead. */
#ajax-content-wrap .mphb_widget_search-form input[type="submit"],
#ajax-content-wrap .mphb-reserve-btn,
#ajax-content-wrap .mphb_sc_checkout-form button[type="submit"],
#ajax-content-wrap .mphb-checkout button[type="submit"] { width: 100%; }

/* ---- 7. AVAILABILITY SEARCH FORM  ->  hero "booking bar" card ------------ */
#ajax-content-wrap .mphb_sc_search-wrapper { max-width: 1040px; margin: 0 auto; }

#ajax-content-wrap .mphb_sc_search-form {
  position: relative;
  background: var(--hl-surface);
  border: 1px solid var(--hl-border-soft);
  border-radius: var(--hl-radius-lg);
  box-shadow: var(--hl-shadow-lg);
  padding: 30px 32px 32px;
  margin: 8px 0 36px;
  overflow: hidden;
}
/* slim brand accent strip across the top of the booking card */
#ajax-content-wrap .mphb_sc_search-form::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--hl-green) 0%, #b5d97f 50%, var(--hl-green) 100%);
}

@media (min-width: 880px) {
  #ajax-content-wrap .mphb_sc_search-form {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px;
  }
  #ajax-content-wrap .mphb_sc_search-form .mphb-required-fields-tip { flex: 1 1 100%; margin-bottom: 2px !important; }
  #ajax-content-wrap .mphb_sc_search-form .mphb_sc_search-check-in-date,
  #ajax-content-wrap .mphb_sc_search-form .mphb_sc_search-check-out-date { flex: 1 1 200px; margin-bottom: 0 !important; }
  #ajax-content-wrap .mphb_sc_search-form .mphb_sc_search-adults,
  #ajax-content-wrap .mphb_sc_search-form .mphb_sc_search-children { flex: 1 1 120px; margin-bottom: 0 !important; }
  #ajax-content-wrap .mphb_sc_search-form .mphb_sc_search-submit-button-wrapper { flex: 1 1 100%; margin-top: 6px; }
  #ajax-content-wrap .mphb_sc_search-form .mphb_sc_search-submit-button-wrapper button[type="submit"] { width: auto; min-width: 220px; }
}

/* ---- 8. SIDEBAR SEARCH WIDGET -------------------------------------------- */
#ajax-content-wrap .widget_mphb_search_availability_widget,
#ajax-content-wrap .mphb_widget_search-form {
  background: var(--hl-surface);
  border: 1px solid var(--hl-border-soft);
  border-radius: var(--hl-radius);
  box-shadow: var(--hl-shadow);
  padding: 22px 22px 24px;
}
#ajax-content-wrap .widget_mphb_search_availability_widget .widget-title,
#ajax-content-wrap .widget_mphb_search_availability_widget h4 { margin-top: 0; color: var(--hl-ink); }

/* ---- 9. SINGLE ACCOMMODATION  (booking card, price, attributes) ---------- */
#ajax-content-wrap .mphb-booking-form {
  background: var(--hl-surface);
  border: 1px solid var(--hl-border-soft);
  border-radius: var(--hl-radius);
  box-shadow: var(--hl-shadow);
  padding: 26px 28px 28px;
}

#ajax-content-wrap .mphb-price,
#ajax-content-wrap .mphb-regular-price {
  color: var(--hl-green-deep);
  font-weight: 800;
  font-size: 1.45em;
  letter-spacing: -.01em;
}
#ajax-content-wrap .mphb-price-period,
#ajax-content-wrap .mphb-price .mphb-period { color: var(--hl-muted); font-weight: 500; font-size: .62em; }
#ajax-content-wrap .mphb-currency { font-weight: 700; }

#ajax-content-wrap .mphb-attributes,
#ajax-content-wrap .mphb-details { margin: 20px 0; }
#ajax-content-wrap .mphb-attributes table,
#ajax-content-wrap .mphb-details table { width: 100%; border-collapse: collapse; }
#ajax-content-wrap .mphb-attribute-title,
#ajax-content-wrap .mphb-attributes th { color: var(--hl-muted); font-weight: 600; padding: 9px 0; }
#ajax-content-wrap .mphb-attribute-value,
#ajax-content-wrap .mphb-attributes td {
  color: var(--hl-ink);
  padding: 9px 0;
  border-bottom: 1px solid var(--hl-border-soft);
  text-align: right;
}

/* ---- 10. DATE PICKER POP-UP  (jQuery datepick) --------------------------- */
/* NOTE: rendered on <body>, OUTSIDE #ajax-content-wrap — DO NOT prefix these. */
.datepick.mphb-datepick-light-green,
.datepick {
  border: 1px solid var(--hl-border) !important;
  border-radius: var(--hl-radius) !important;
  box-shadow: var(--hl-shadow-lg) !important;
  background: #fff !important;
  padding: 12px !important;
  font-family: inherit !important;
  color: var(--hl-ink) !important;
}
.datepick .datepick-nav,
.datepick .datepick-ctrl { padding-bottom: 6px; }
.datepick .datepick-cmd {
  color: var(--hl-green-deep) !important;
  border-radius: var(--hl-radius-sm);
  font-weight: 600;
  padding: 4px 8px;
}
.datepick .datepick-cmd:hover { background: var(--hl-green-tint) !important; }
.datepick .datepick-month-header,
.datepick .datepick-month-header select {
  background: transparent !important;
  color: var(--hl-ink) !important;
  font-weight: 700 !important;
  min-height: 0 !important;
  box-shadow: none !important;
}
.datepick .datepick-month table { border-collapse: separate; border-spacing: 2px; }
.datepick .datepick-month th { color: var(--hl-muted); font-weight: 600; font-size: 12px; }
.datepick .datepick-month td { padding: 0; }
.datepick .datepick-month td a,
.datepick .datepick-month td span {
  display: block;
  width: 36px; line-height: 36px;
  border-radius: var(--hl-radius-sm);
  border: 0 !important;
  text-align: center;
  transition: background .12s var(--hl-ease), color .12s var(--hl-ease);
}
.datepick .datepick-month td a:hover { background: var(--hl-green-tint) !important; color: var(--hl-green-darker) !important; }
/* range fill between check-in and check-out */
.datepick .datepick-highlight,
.datepick td.datepick-days-cell-over a {
  background: var(--hl-green-tint-2) !important;
  color: var(--hl-green-darker) !important;
  border-radius: 0;
}
/* selected check-in / check-out end caps */
.datepick a.datepick-selected,
.datepick .datepick-current-day a {
  background: var(--hl-green) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(94,131,48,.35);
}
.datepick .datepick-today a { box-shadow: inset 0 0 0 1.5px var(--hl-green); }
.datepick .datepick-week-end a { color: var(--hl-ink); }
.datepick .datepick-other-month span,
.datepick .datepick-other-month a { color: var(--hl-faint); }
.datepick .datepick-unselectable,
.datepick .datepick-disabled {
  color: var(--hl-faint) !important;
  text-decoration: line-through;
  opacity: .65;
  cursor: not-allowed;
}

/* MotoPress's light-green theme sizes the pop-up at 31.4em (~452px) with each
   month at 50% (~226px) — too narrow for our 36px day cells (a month needs
   ~270px), so the Sa/Su columns spilled outside the card. Widen the pop-up to
   fit; months keep the plugin's 50% split (they stack at the plugin's own
   mobile breakpoint, and max-width protects small screens). */
.datepick-popup .datepick {
  width: 600px !important;
  max-width: calc(100vw - 24px) !important;
}
/* Inline availability calendar (accommodation page): same cell-size mismatch —
   let it shrink-wrap its content instead of the theme's fixed 31.4em. */
.mphb-calendar.mphb-datepick .datepick { width: auto !important; max-width: 100% !important; }
.mphb-calendar.mphb-datepick .datepick .datepick-month { width: auto !important; min-width: 272px; }

/* ---- 11. INLINE AVAILABILITY CALENDAR  (accommodation page) -------------- */
#ajax-content-wrap .mphb-calendar { border-collapse: separate; border-spacing: 3px; width: 100%; }
#ajax-content-wrap .mphb-calendar th { color: var(--hl-muted); font-weight: 600; font-size: 12px; padding: 6px 0; }
#ajax-content-wrap .mphb-calendar .mphb-date-cell { border-radius: var(--hl-radius-sm); text-align: center; padding: 8px 0; }
#ajax-content-wrap .mphb-available-date { background: var(--hl-green-tint); color: var(--hl-green-deep); font-weight: 600; }
#ajax-content-wrap .mphb-booked-date,
#ajax-content-wrap .mphb-mark-as-unavailable { background: #f1f3ec; color: #b6bda9; text-decoration: line-through; }
#ajax-content-wrap .mphb-extra-date { background: #fcfbf2; }
#ajax-content-wrap .mphb-date-check-in,
#ajax-content-wrap .mphb-date-check-out { background: var(--hl-green) !important; color: #fff !important; font-weight: 700; }
#ajax-content-wrap .mphb-past-date { color: var(--hl-faint); opacity: .6; }

/* ---- 12. SEARCH RESULTS  (info banner + room cards grid) ----------------- */
#ajax-content-wrap .mphb_sc_search_results-wrapper { margin: 0 0 32px; }

#ajax-content-wrap .mphb_sc_search_results-info {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--hl-green-tint);
  border: 1px solid #d4e3b6;
  border-radius: var(--hl-radius);
  padding: 16px 20px;
  color: var(--hl-green-darker);
  font-size: 15px;
  font-weight: 500;
}
#ajax-content-wrap .mphb_sc_search_results-info::before {
  content: "";
  flex: 0 0 20px; height: 20px; margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235e8330' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* room-type result cards (rendered when rooms are available) */
#ajax-content-wrap .mphb_sc_search-results,
#ajax-content-wrap .mphb-room-type-list { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 720px) {
  #ajax-content-wrap .mphb_sc_search-results,
  #ajax-content-wrap .mphb-room-type-list { grid-template-columns: repeat(2, 1fr); }
}

#ajax-content-wrap .mphb-room-type {
  display: flex; flex-direction: column;
  background: var(--hl-surface);
  border: 1px solid var(--hl-border-soft);
  border-radius: var(--hl-radius);
  box-shadow: var(--hl-shadow);
  overflow: hidden;
  transition: box-shadow .22s var(--hl-ease), transform .22s var(--hl-ease);
}
#ajax-content-wrap .mphb-room-type:hover { box-shadow: var(--hl-shadow-lg); transform: translateY(-4px); }
/* Scope to the MAIN slider only: the card also contains a thumbnail nav slider
   full of 150px images — a blanket `.mphb-room-type img { width:100% }` blows
   those up to card width (giant blurry images). */
#ajax-content-wrap .mphb-room-type .mphb-gallery-main-slider img,
#ajax-content-wrap .mphb-room-type > a > img,
#ajax-content-wrap .mphb-room-type > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
#ajax-content-wrap .mphb-room-type .mphb-gallery,
#ajax-content-wrap .mphb-room-type .mphb-thumbnail { position: relative; }
/* MotoPress initialises the card's thumbnail slider without an itemWidth, so
   flexslider renders every 150px thumb as a full-width slide — a doubled,
   pixelated carousel. It is pure duplication on result cards; hide it. The
   main slider keeps its prev/next arrows. */
#ajax-content-wrap .mphb-room-type .mphb-gallery-thumbnail-slider { display: none !important; }
#ajax-content-wrap .mphb-room-type-title,
#ajax-content-wrap .mphb-room-type h2,
#ajax-content-wrap .mphb-room-type h3 { margin: 0 0 8px; color: var(--hl-ink); font-size: 1.25em; }
#ajax-content-wrap .mphb-room-type-content,
#ajax-content-wrap .mphb-room-type-description,
#ajax-content-wrap .mphb-room-type > .mphb-room-type-text { padding: 22px 22px 24px; }
#ajax-content-wrap .mphb-room-type .mphb-price { font-size: 1.2em; }
#ajax-content-wrap .mphb-room-type .mphb-view-details,
#ajax-content-wrap .mphb-room-type .mphb-book-btn,
#ajax-content-wrap .mphb-room-type a.button { margin-top: 14px; }

/* the card's text nodes are loose siblings of the gallery (no wrapper div),
   so give them their inset here */
#ajax-content-wrap .mphb-room-type > :not(.mphb-room-type-images):not(img):not(a) {
  margin-left: 26px !important;
  margin-right: 26px !important;
}
#ajax-content-wrap .mphb-room-type > .mphb-room-type-title { margin-top: 22px !important; }
#ajax-content-wrap .mphb-room-type > .mphb-reserve-room-section,
#ajax-content-wrap .mphb-room-type > :last-child { margin-bottom: 24px !important; }
#ajax-content-wrap .mphb-room-type-details-title {
  margin-top: 14px !important;
  font-size: 13px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hl-muted);
}
#ajax-content-wrap .mphb-loop-room-type-attributes {
  list-style: none !important;
  padding: 0 !important;
  color: var(--hl-ink);
}
#ajax-content-wrap .mphb-loop-room-type-attributes li { list-style: none !important; padding: 3px 0; }

/* premium listing layout: photo left, content right (wide screens) */
@media (min-width: 880px) {
  #ajax-content-wrap .mphb_sc_search_results-wrapper .mphb-room-type {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    align-items: start;
  }
  #ajax-content-wrap .mphb_sc_search_results-wrapper .mphb-room-type > .mphb-room-type-images {
    grid-column: 1;
    grid-row: 1 / span 12;     /* spans every content row so the photo fills the card height */
    align-self: stretch;
    height: 100%;
  }
  #ajax-content-wrap .mphb_sc_search_results-wrapper .mphb-room-type > :not(.mphb-room-type-images) {
    grid-column: 2;
  }
  /* let the slider fill the full card height; !important outranks the inline
     height flexslider's smoothHeight keeps setting on the viewport */
  #ajax-content-wrap .mphb_sc_search_results-wrapper .mphb-room-type .mphb-gallery-main-slider,
  #ajax-content-wrap .mphb_sc_search_results-wrapper .mphb-room-type .mphb-gallery-main-slider .flex-viewport,
  #ajax-content-wrap .mphb_sc_search_results-wrapper .mphb-room-type .mphb-gallery-main-slider .slides,
  #ajax-content-wrap .mphb_sc_search_results-wrapper .mphb-room-type .mphb-gallery-main-slider .slides > li {
    height: 100% !important;
  }
  #ajax-content-wrap .mphb_sc_search_results-wrapper .mphb-room-type .mphb-gallery-main-slider img {
    height: 100% !important;
    aspect-ratio: auto;
    object-fit: cover;
  }
}

/* ---- 12b. SEARCH RESULTS — PAGE RHYTHM, RECOMMENDATION & CART CARDS ------ */
/* breadcrumbs: quiet, out of the way */
#ajax-content-wrap #breadcrumbs {
  margin: 0 0 20px !important;
  font-size: 12.5px;
  color: var(--hl-faint);
}
#ajax-content-wrap #breadcrumbs a { color: var(--hl-muted); text-decoration: none; }
#ajax-content-wrap #breadcrumbs a:hover { color: var(--hl-green-deep); }

#ajax-content-wrap .mphb_sc_search_results-info { margin-bottom: 28px; }

/* "Recommended for N guests" heading */
#ajax-content-wrap .mphb-recommendation-title {
  position: relative;
  margin: 0 0 16px;
  padding-bottom: 12px;
  font-size: 1.35em;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--hl-ink);
}
#ajax-content-wrap .mphb-recommendation-title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 44px; height: 3px;
  border-radius: 3px;
  background: var(--hl-green);
}

/* the recommendation itself becomes a proper booking-summary card */
#ajax-content-wrap form.mphb-recommendation {
  position: relative;
  background: var(--hl-surface);
  border: 1px solid var(--hl-border-soft);
  border-radius: var(--hl-radius-lg);
  box-shadow: var(--hl-shadow);
  padding: 24px 28px 26px;
  margin: 0 0 40px;
  overflow: hidden;
}
#ajax-content-wrap form.mphb-recommendation::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--hl-green) 0%, #b5d97f 50%, var(--hl-green) 100%);
}

#ajax-content-wrap .mphb-recommendation-details-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#ajax-content-wrap .mphb-recommendation-details-list > li {
  margin: 0 !important;
  padding: 14px 0;
  border-bottom: 1px solid var(--hl-border-soft);
  list-style: none !important;
}
#ajax-content-wrap .mphb-recommendation-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}
#ajax-content-wrap .mphb-recommendation-item-count { font-weight: 600; color: var(--hl-muted); }
#ajax-content-wrap .mphb-recommendation-item-link {
  font-weight: 700;
  font-size: 1.08em;
  color: var(--hl-green-deep) !important;
  text-decoration: none !important;
}
#ajax-content-wrap .mphb-recommendation-item-link:hover { color: var(--hl-green-darker) !important; }
#ajax-content-wrap .mphb-recommedation-item-subtotal {
  order: 3;
  float: none !important;
  margin-left: auto !important;
  white-space: nowrap;
}
#ajax-content-wrap .mphb-recommendation-item-guests {
  flex-basis: 100%;
  color: var(--hl-muted);
  font-size: 12.5px;
}

/* total row: right-aligned, price is the hero */
#ajax-content-wrap .mphb-recommendation-total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  margin: 16px 0 20px !important;
  font-weight: 600;
  color: var(--hl-ink);
}
#ajax-content-wrap .mphb-recommendation-total .mphb-price { font-size: 1.55em; }
#ajax-content-wrap .mphb-tax-information {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--hl-muted);
}
#ajax-content-wrap .mphb-recommendation-reserve-button {
  float: right;
  min-width: 220px;
}

/* reservation cart: quiet helper note while empty, real card once rooms added */
#ajax-content-wrap .mphb-reservation-cart.mphb-empty-cart {
  background: var(--hl-surface-2);
  border: 1px dashed var(--hl-border);
  border-radius: var(--hl-radius);
  padding: 16px 20px;
  margin: 0 0 34px;
  color: var(--hl-muted);
}
#ajax-content-wrap .mphb-empty-cart-message { margin: 0 !important; }
#ajax-content-wrap .mphb-reservation-cart:not(.mphb-empty-cart) {
  background: var(--hl-surface);
  border: 1px solid var(--hl-border-soft);
  border-radius: var(--hl-radius);
  box-shadow: var(--hl-shadow);
  padding: 20px 24px;
  margin: 0 0 34px;
}
#ajax-content-wrap .mphb-cart-total-price { font-weight: 600; }
#ajax-content-wrap .mphb-cart-total-price-value .mphb-price { font-size: 1.35em; }

/* ---- 13. CHECKOUT  (layout, sections, tables, gateways) ------------------ */
#ajax-content-wrap .mphb_sc_checkout-form,
#ajax-content-wrap .mphb-checkout { max-width: 980px; margin: 0 auto; }

@media (min-width: 900px) {
  /* form on the left, booking summary on the right (sticky) */
  #ajax-content-wrap .mphb-checkout-layout,
  #ajax-content-wrap .mphb_sc_checkout-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
  }
  #ajax-content-wrap .mphb-booking-details,
  #ajax-content-wrap .mphb-cart,
  #ajax-content-wrap .mphb-checkout-summary { position: sticky; top: 24px; }
}

#ajax-content-wrap .mphb-checkout-section,
#ajax-content-wrap .mphb_sc_checkout-customer-info,
#ajax-content-wrap .mphb-customer-details,
#ajax-content-wrap .mphb-payment-methods,
#ajax-content-wrap .mphb-gateways,
#ajax-content-wrap .mphb-booking-details,
#ajax-content-wrap .mphb-cart {
  background: var(--hl-surface);
  border: 1px solid var(--hl-border-soft);
  border-radius: var(--hl-radius);
  box-shadow: var(--hl-shadow-sm);
  padding: 24px 26px;
  margin: 0 0 24px;
}

#ajax-content-wrap .mphb-booking-details-table,
#ajax-content-wrap .mphb-price-breakdown-table,
#ajax-content-wrap .mphb-cart-table,
#ajax-content-wrap table.mphb-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--hl-surface);
  border: 1px solid var(--hl-border-soft);
  border-radius: var(--hl-radius);
  overflow: hidden;
  margin: 0 0 18px;
}
#ajax-content-wrap .mphb-booking-details-table th,
#ajax-content-wrap .mphb-price-breakdown-table th,
#ajax-content-wrap .mphb-cart-table th,
#ajax-content-wrap table.mphb-table th {
  background: var(--hl-green-tint);
  color: var(--hl-green-darker);
  text-align: left;
  font-weight: 700;
  padding: 13px 16px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
#ajax-content-wrap .mphb-booking-details-table td,
#ajax-content-wrap .mphb-price-breakdown-table td,
#ajax-content-wrap .mphb-cart-table td,
#ajax-content-wrap table.mphb-table td {
  padding: 13px 16px;
  border-top: 1px solid var(--hl-border-soft);
  color: var(--hl-ink);
}
#ajax-content-wrap .mphb-booking-details-table tr:nth-child(even) td,
#ajax-content-wrap .mphb-price-breakdown-table tr:nth-child(even) td { background: var(--hl-surface-2); }
#ajax-content-wrap .mphb-price-total,
#ajax-content-wrap .mphb-total td,
#ajax-content-wrap tr.mphb-total td {
  font-weight: 800;
  font-size: 1.05em;
  color: var(--hl-green-deep);
  border-top: 2px solid var(--hl-border);
  background: var(--hl-green-tint) !important;
}

/* payment gateways */
#ajax-content-wrap .mphb-gateway,
#ajax-content-wrap .mphb-payment-method {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 18px;
  background: #fff;
  border: 1.5px solid var(--hl-border);
  border-radius: var(--hl-radius-sm);
  margin: 0 0 12px;
  cursor: pointer;
  transition: border-color .15s var(--hl-ease), box-shadow .15s var(--hl-ease), background .15s var(--hl-ease);
}
#ajax-content-wrap .mphb-gateway:hover,
#ajax-content-wrap .mphb-payment-method:hover { border-color: var(--hl-green); background: var(--hl-green-tint); }
#ajax-content-wrap .mphb-gateway input[type="radio"],
#ajax-content-wrap .mphb-payment-method input[type="radio"] { margin-top: 3px; accent-color: var(--hl-green); width: 18px; height: 18px; }

/* terms checkbox */
#ajax-content-wrap .mphb-checkout-terms-wrapper,
#ajax-content-wrap .mphb-terms-wrapper {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 6px 0 22px;
  font-size: 14px;
  color: var(--hl-muted);
}
#ajax-content-wrap .mphb-checkout-terms-wrapper input[type="checkbox"],
#ajax-content-wrap .mphb-terms-wrapper input[type="checkbox"] { accent-color: var(--hl-green); width: 18px; height: 18px; margin-top: 2px; }
#ajax-content-wrap .mphb-checkout-terms-wrapper a,
#ajax-content-wrap .mphb-terms-wrapper a { color: var(--hl-green-deep); text-decoration: underline; }

/* ---- 14. CONFIRMATION SCREEN + MESSAGES ---------------------------------- */
#ajax-content-wrap .mphb-booking-confirmation,
#ajax-content-wrap .mphb-reservation-received {
  background: linear-gradient(180deg, var(--hl-green-tint) 0%, #fff 100%);
  border: 1px solid #cfe0b4;
  border-radius: var(--hl-radius-lg);
  box-shadow: var(--hl-shadow);
  padding: 30px 32px;
  color: var(--hl-ink);
}
#ajax-content-wrap .mphb-booking-confirmation h1,
#ajax-content-wrap .mphb-booking-confirmation h2,
#ajax-content-wrap .mphb-reservation-received h2 { color: var(--hl-green-darker); margin-top: 0; }

#ajax-content-wrap .mphb-errors-wrapper,
#ajax-content-wrap .mphb-error,
#ajax-content-wrap .mphb-message,
#ajax-content-wrap .mphb-warning {
  border-radius: var(--hl-radius-sm);
  padding: 14px 18px;
  margin: 0 0 18px;
  font-size: 14.5px;
}
#ajax-content-wrap .mphb-errors-wrapper,
#ajax-content-wrap .mphb-error,
#ajax-content-wrap .mphb-warning { background: #fff4f1; border: 1px solid #f1c4ba; color: #9a3412; }
#ajax-content-wrap .mphb-message { background: var(--hl-green-tint); border: 1px solid #cfe0b4; color: var(--hl-green-darker); }

/* ---- 15. MICRO-INTERACTIONS & RESPONSIVE --------------------------------- */
#ajax-content-wrap .mphb-hide { display: none !important; }

@media (max-width: 879px) {
  #ajax-content-wrap .mphb_sc_search-form { padding: 24px 20px 26px; }
  #ajax-content-wrap .mphb-booking-form { padding: 22px 20px 24px; }
}
@media (max-width: 719px) {
  #ajax-content-wrap .mphb-capacity-wrapper { flex-direction: column; gap: 0; }
  #ajax-content-wrap .mphb-capacity-wrapper .mphb-adults-wrapper,
  #ajax-content-wrap .mphb-capacity-wrapper .mphb-children-wrapper { margin-bottom: 18px !important; }
  #ajax-content-wrap .mphb-reserve-btn,
  #ajax-content-wrap .mphb_sc_search-form .mphb_sc_search-submit-button-wrapper button[type="submit"] { width: 100%; }
}

/* gentle entrance for result cards & confirmation */
@media (prefers-reduced-motion: no-preference) {
  #ajax-content-wrap .mphb-room-type,
  #ajax-content-wrap .mphb-booking-confirmation { animation: hlFadeUp .4s var(--hl-ease) both; }
  @keyframes hlFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}
