/* ============================================================
   MotoPress Hotel Booking — Estils personalitzats
   Font selectors: motopress/mphb-style-kit (oficial, GitHub)
   Paleta i espaiats: variables globals del projecte (Bricks)
   Enganxa aquest fitxer a: Bricks → Configuración del tema → Custom CSS
   ============================================================ */


/* ---------- 0. NOVES VARIABLES DE COLOR (afegir també a Bricks → Configuración del tema → Variables) ---------- */
:root {
  --error-red: #c0392b;    /* text i icones d'error / camps obligatoris */
  --error-bg: #fdecea;     /* fons de l'avís d'error */
  --error-border: #f5c2c0; /* vora de l'avís d'error */
  --border-color: rgba(137, 137, 137, 0.25);
}

/* Amaga l'Albergue NOMÉS a la pàgina compartida de resultats,
   perquè el flow unificat de Casa de Espiritualidad només
   mostri Individual / Individual ampliable / Doble */
.mphb_sc_search_results-wrapper .mphb-room-type.post-513 {
  display: none;
}

/* ---------- 1. FORMULARI DE CERCA (Reserva Albergue / Casa) ---------- */

.mphb_sc_search-wrapper {
  max-width: 600px;
  background-color: #fff;
  border: var(--1px) solid var(--soft-gray);
  border-radius: var(--16px);
  padding: var(--24px);
}

.mphb_sc_search-wrapper .mphb_sc_search-form label {
  display: block;
  font-weight: 500;
  font-size: 17px;
  color: var(--strong-blue);
  margin-bottom: var(--8px);
}

.mphb_sc_search-wrapper .mphb_sc_search-form label abbr,
.mphb_sc_search-wrapper .mphb_sc_search-form .mphb-required-fields-tip abbr {
  color: var(--error-red);
  text-decoration: none;
}

/* El markup afegeix un <br> entre label i input/select; label ja és block, sobra */
.mphb_sc_search-wrapper .mphb_sc_search-form br {
  display: none;
}

.mphb_sc_search-wrapper .mphb_sc_search-form input[type="text"],
.mphb_sc_search-wrapper .mphb_sc_search-form select {
  border: var(--1px) solid var(--medium-gray);
  border-radius: var(--8px);
  padding: var(--8px) var(--16px);
  width: 100%;
  margin-bottom: var(--16px);
  background-color: #fff;
}

.mphb_sc_search-wrapper .mphb_sc_search-form input[type="text"]:focus,
.mphb_sc_search-wrapper .mphb_sc_search-form select:focus {
  border-color: var(--blue);
  outline: none;
}

.mphb_sc_search-wrapper .mphb_sc_search-form .mphb-required-fields-tip {
  font-size: 0.85em;
  color: var(--medium-gray);
  margin-bottom: var(--16px);
}

.mphb_sc_search-wrapper .mphb_sc_search-form .mphb_sc_search-submit-button-wrapper .button {
  background-color: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--8px);
  padding: var(--16px) var(--32px);
  font-weight: 400;
  font-family: 'Onest';
  text-align: center;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.2s ease;
}

.mphb_sc_search-wrapper .mphb_sc_search-form .mphb_sc_search-submit-button-wrapper .button:hover {
  background-color: var(--strong-blue);
}

.mphb_sc_search-wrapper .mphb_sc_search-form .mphb_sc_search-submit-button-wrapper .button:focus-visible {
  outline: var(--2px) solid var(--strong-blue);
  outline-offset: var(--2px);
}

.mphb_sc_search-form p {
  margin-bottom: .5em;
}


/* ---------- 2. PÀGINA DE RESULTATS DE CERCA ---------- */

/* Contenidor: limit-width + layout de dues columnes (llistat / carret sticky).
   Ajusta el max-width si el contenidor global de Bricks fa servir un altre valor. */
.mphb_sc_search_results-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--24px) var(--16px);
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--24px);
  align-items: start;
}

.mphb_sc_search_results-wrapper > .mphb_sc_search_results-info,
.mphb_sc_search_results-wrapper > .mphb-room-type {
  grid-column: 1;
}

/* El carret (formulari) ocupa la columna dreta i queda fix en fer scroll */
.mphb_sc_search_results-wrapper > .mphb-reservation-cart {
  grid-column: 2;
  grid-row: 1 / span 10;
  position: sticky;
  top: var(--24px);
  align-self: start;
}

.mphb_sc_search_results-wrapper .mphb_sc_search_results-info {
  font-size: 1.1em;
  color: var(--strong-blue);
  margin: 0;
}

/* --- Targeta de cada allotjament (Individual, Doble, Albergue...) --- */
.mphb_sc_search_results-wrapper .mphb-room-type {
  background-color: #fff;
  border: var(--1px) solid var(--soft-gray);
  border-radius: var(--16px);
  padding: var(--24px);
  margin-top: .5em !important;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title       title"
    "attrs       price"
    "reserve     reserve";
  column-gap: var(--24px);
  row-gap: var(--8px);
}

/* NOTA: quan hi hagi fotos d'allotjament, caldrà revisar aquesta graella
   per fer lloc a .mphb-loop-room-thumbnail (ara mateix cap tipus en té). */
.mphb_sc_search_results-wrapper .mphb-room-type .mphb-loop-room-thumbnail img {
  border-radius: var(--16px);
  max-width: 240px;
  object-fit: cover;
}

.mphb_sc_search_results-wrapper .mphb-room-type .entry-title {
  grid-area: title;
  margin: 0 0 var(--8px);
}

.mphb_sc_search_results-wrapper .mphb-room-type .entry-title a {
  color: var(--strong-blue);
  font-size: 1.3em;
  font-weight: 600;
  font-family: 'Onest';
  text-decoration: none !important;
  border-bottom: none;
  pointer-events: none;
  cursor: default;
}

/* Etiqueta genèrica "Detalles" sense contingut propi: la traiem per no
   afegir soroll visual (l'atribut Huéspedes ja parla per si sol) */
.mphb_sc_search_results-wrapper .mphb-room-type .mphb-room-type-details-title {
  display: none;
}

.mphb_sc_search_results-wrapper .mphb-room-type .mphb-loop-room-type-attributes {
  grid-area: attrs;
  display: flex;
  align-self: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mphb_sc_search_results-wrapper .mphb-room-type .mphb-loop-room-type-attributes li {
  font-size: 0.9em;
  color: var(--medium-gray);
}

/* --- Preu i "Ver detalles" --- */
.mphb_sc_search_results-wrapper .mphb-room-type .mphb-regular-price {
  grid-area: price;
  text-align: right;
  margin: 0;
}

.mphb_sc_search_results-wrapper .mphb-room-type .mphb-regular-price strong {
  font-size: .85em;
}

.mphb_sc_search_results-wrapper .mphb-room-type .mphb-regular-price .mphb-price {
  font-size: 1.4em;
  font-weight: 600;
  color: var(--blue);
}

.mphb_sc_search_results-wrapper .mphb-room-type .mphb-regular-price .mphb-price-period {
  font-size: 0.85em;
  color: var(--medium-gray);
  text-decoration: none;
  border-bottom: none;
  cursor: default;
}

.mphb_sc_search_results-wrapper .mphb-room-type .mphb-view-details-button-wrapper {
  display: none;
}

/* --- Bloc de reserva de cada targeta (quantitat / missatge / botó) --- */
.mphb_sc_search_results-wrapper .mphb-room-type .mphb-reserve-room-section {
  grid-area: reserve;
  margin-top: var(--16px);
  padding-top: var(--16px);
  border-top: var(--1px) solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--16px);
}

.mphb_sc_search_results-wrapper .mphb-room-type .mphb-rooms-quantity-wrapper {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: var(--8px);
  font-size: 0.9em;
  color: var(--medium-gray);
  margin: 0;
  width: 100%;
}

.mphb_sc_search_results-wrapper .mphb-room-type .mphb-rooms-quantity {
  width: 100%;
  border: var(--1px) solid var(--medium-gray);
  border-radius: var(--8px);
  padding: var(--2px) var(--8px);
  font-family: 'Onest';
}

.mphb_sc_search_results-wrapper .mphb-room-type .mphb-rooms-reservation-message-wrapper {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--8px);
  font-size: 0.9em;
  flex: 1 1 auto;
}

.mphb_sc_search_results-wrapper .mphb-room-type .mphb-rooms-reservation-message {
  color: var(--medium-gray);
  font-weight: 400;
  font-size: 13px;
  margin: 0;
}

.mphb_sc_search_results-wrapper .mphb-room-type .mphb-remove-from-reservation {
  background-color: var(--ultra-soft-gray);
  color: var(--medium-gray);
  font-size: 0.85em;
  font-family: 'Onest';
  text-decoration: none;
  border: none;
  border-radius: var(--8px);
  padding: var(--8px) var(--16px);
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.mphb_sc_search_results-wrapper .mphb-room-type .mphb-remove-from-reservation:hover {
  background-color: var(--soft-gray);
  color: var(--error-red);
}

/* --- Botó "Hacer reserva" de cada targeta --- */
.mphb_sc_search_results-wrapper .mphb-room-type .mphb-reserve-room-section .mphb-book-button {
  background-color: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--8px);
  padding: var(--8px) var(--24px);
  font-weight: 400;
  font-family: 'Onest';
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.mphb_sc_search_results-wrapper .mphb-room-type .mphb-reserve-room-section .mphb-book-button:hover {
  background-color: var(--strong-blue);
}

.mphb_sc_search_results-wrapper .mphb-room-type .mphb-reserve-room-section .mphb-book-button:focus-visible {
  outline: var(--2px) solid var(--strong-blue);
  outline-offset: var(--2px);
}

/* El botó "Confirmar reserva" ja existeix, únic, al carret de la dreta;
   el de cada targeta individual queda amagat per no duplicar la crida a l'acció */
.mphb_sc_search_results-wrapper .mphb-room-type .mphb-confirm-reservation {
  display: none;
}

/* --- Recomanació (quan MotoPress suggereix combinació d'allotjaments) --- */
.mphb_sc_search_results-wrapper .mphb-recommendation-title {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--strong-blue);
  margin: var(--24px) 0 var(--16px);
}

.mphb_sc_search_results-wrapper .mphb-recommendation-item {
  background-color: var(--ultra-soft-gray);
  border-radius: var(--16px);
  padding: var(--16px) var(--24px);
  margin-bottom: var(--8px);
}

.mphb_sc_search_results-wrapper .mphb-recommendation-total-value .mphb-price {
  font-weight: 600;
  font-size: 1.3em;
  color: var(--blue);
}

.mphb_sc_search_results-wrapper .mphb-recommendation-reserve-button {
  background-color: var(--blue);
  color: #fff;
  border-radius: var(--8px);
  padding: var(--8px) var(--24px);
  font-weight: 400;
  font-family: 'Onest';
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease;
}

.mphb_sc_search_results-wrapper .mphb-recommendation-reserve-button:hover {
  background-color: var(--strong-blue);
}

.mphb_sc_search_results-wrapper .mphb-recommendation-reserve-button:focus-visible {
  outline: var(--2px) solid var(--strong-blue);
  outline-offset: var(--2px);
}

/* --- Carret de reserva (columna dreta, sticky) --- */
.mphb_sc_search_results-wrapper .mphb-reservation-cart {
  background-color: #fff;
  border: var(--1px) solid var(--soft-gray);
  border-radius: var(--16px);
  padding: var(--24px);
}

.mphb_sc_search_results-wrapper .mphb-reservation-cart .mphb-reservation-details {
  width: 100%;
}

.mphb_sc_search_results-wrapper .mphb-reservation-cart .mphb-empty-cart-message,
.mphb_sc_search_results-wrapper .mphb-reservation-cart .mphb-cart-message {
  color: var(--medium-gray);
  font-size: 0.95em;
  margin: 0 0 var(--16px);
}

.mphb_sc_search_results-wrapper .mphb-reservation-cart .mphb-cart-total-price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  padding-top: var(--16px);
  border-top: 1px solid var(--border-color);
}

.mphb_sc_search_results-wrapper .mphb-reservation-cart .mphb-cart-total-price-title {
  color: var(--strong-blue);
  font-weight: 600;
}

.mphb_sc_search_results-wrapper .mphb-reservation-cart .mphb-cart-total-price-value .mphb-price {
  font-size: 1.3em;
  font-weight: 600;
  color: var(--blue);
}

.mphb_sc_search_results-wrapper .mphb-reservation-cart .mphb-confirm-reservation {
  background-color: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--8px);
  padding: var(--16px) var(--24px);
  font-weight: 400;
  font-family: 'Onest';
  text-align: center;
  cursor: pointer;
  width: 100%;
  margin-top: var(--16px);
  transition: background-color 0.2s ease;
}

.mphb_sc_search_results-wrapper .mphb-reservation-cart .mphb-confirm-reservation:hover {
  background-color: var(--strong-blue);
}

.mphb_sc_search_results-wrapper .mphb-reservation-cart .mphb-confirm-reservation:focus-visible {
  outline: var(--2px) solid var(--strong-blue);
  outline-offset: var(--2px);
}

.mphb_sc_search_results-wrapper .mphb-clear {
  display: none;
}

/* --- Notificació flotant ("X ha sido añadido a su reserva") ---
   Generada per JS (motopress-toast.js): duplica el missatge que ja apareix
   a la targeta i el mostra també com a avís flotant, breu. */
.mphb-toast-notification {
  position: fixed;
  bottom: var(--24px);
  right: var(--24px);
  z-index: 1000;
  max-width: 320px;
  background-color: var(--strong-blue);
  color: #fff;
  padding: var(--16px) var(--24px);
  border-radius: var(--8px);
  box-shadow: 0 var(--8px) var(--24px) rgba(10, 69, 89, 0.25);
  font-family: 'Onest';
  font-weight: 400;
  font-size: 0.95em;
  opacity: 0;
  transform: translateY(var(--16px));
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.mphb-toast-notification.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 600px) {
  .mphb-toast-notification {
    left: var(--16px);
    right: var(--16px);
    bottom: var(--16px);
    max-width: none;
  }
}

/* --- Responsive: una sola columna, el carret deixa de ser sticky --- */
@media (max-width: 900px) {
  .mphb_sc_search_results-wrapper {
    grid-template-columns: 1fr;
  }

  .mphb_sc_search_results-wrapper > .mphb-reservation-cart {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

@media (max-width: 600px) {
  .mphb_sc_search_results-wrapper .mphb-room-type {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "attrs"
      "price"
      "reserve";
    padding: var(--16px);
  }

  .mphb_sc_search_results-wrapper .mphb-room-type .mphb-regular-price {
    text-align: left;
  }

  .mphb_sc_search_results-wrapper .mphb-room-type .mphb-loop-room-thumbnail img {
    max-width: 100%;
  }
}


/* ---------- 3. PÀGINA DE CONFIRMACIÓ DE RESERVA (Checkout) ---------- */

.mphb_sc_checkout-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}

/* Dues columnes: reserva + client + total + botó a l'esquerra;
   només el desglossament de preus queda sticky a la dreta */
.mphb_sc_checkout-form {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--24px);
  align-items: start;
}

#mphb-booking-details,
#mphb-customer-details,
.mphb-total-price,
.mphb-errors-wrapper,
.mphb_sc_checkout-submit-wrapper {
  grid-column: 1;
}

#mphb-price-details {
  grid-column: 2;
  grid-row: 1 / span 5;
  position: sticky;
  top: var(--24px);
  align-self: start;
}

@media (max-width: 900px) {
  .mphb_sc_checkout-form {
    grid-template-columns: 1fr;
  }

  #mphb-price-details {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

/* --- Avís "Hola [usuari]..." --- */
.mphb_sc_checkout-wrapper .mphb-login-form-wrap {
  background-color: var(--ultra-soft-gray);
  border-radius: var(--8px);
  padding: var(--8px) var(--16px);
  margin-bottom: var(--24px);
  font-size: 0.9em;
  color: var(--medium-gray);
}

.mphb_sc_checkout-wrapper .mphb-login-form-wrap a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.mphb_sc_checkout-wrapper .mphb-login-form-wrap a:hover {
  text-decoration: underline;
}

/* --- Cada secció (dades reserva / preu / dades client) com a targeta --- */
.mphb_sc_checkout-wrapper .mphb-checkout-section {
  background-color: #fff;
  border: var(--1px) solid var(--soft-gray);
  border-radius: var(--16px);
  padding: var(--24px);
  margin-bottom: var(--24px);
}

/* Sobreescriu el margin-top: 4em que ve d'un altre lloc (tema/Bricks) */
.mphb_cb_checkout_form > .mphb-checkout-section:not(:first-of-type),
.mphb_sc_checkout-form > .mphb-checkout-section:not(:first-of-type) {
  margin-top: .5em;
}

.mphb_sc_checkout-wrapper .mphb-checkout-section h3,
.mphb_sc_checkout-wrapper .mphb-checkout-section h4 {
  color: var(--blue);
  font-size: 1.5em;
  font-weight: 600;
  margin: 0 0 var(--16px);
  padding-bottom: var(--8px);
  border-bottom: var(--1px) solid rgba(137, 137, 137, 0.25);
}

.mphb_sc_checkout-wrapper .mphb-checkout-section h4 {
  font-size: 1.2em;
  color: var(--strong-blue);
}

.mphb_sc_checkout-wrapper .mphb-checkout-section h4.mphb-room-rate-chooser-title {
  font-size: 17px;
  color: var(--strong-blue);
  font-weight: 500;
  border: none;
  padding: 0;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
}

.mphb_sc_checkout-wrapper .mphb-checkout-section h3,
.mphb_sc_checkout-wrapper .mphb-checkout-section .mphb-price-breakdown-title {
  font-size: 1.5em;
  color: var(--blue);
}

.mphb_sc_checkout-wrapper .mphb-checkout-section .mphb-room-number {
  font-size: .85em;
  text-transform: uppercase;
}

/* --- Dates d'entrada / sortida --- */
.mphb-check-in-date,
.mphb-check-out-date {
  display: flex;
  flex-wrap: wrap;
  gap: var(--8px);
  align-items: baseline;
  font-size: 1em;
  color: var(--medium-gray);
  margin: 0 0 var(--8px);
}

.mphb-check-in-date span:first-child,
.mphb-check-out-date span:first-child {
  font-weight: 600;
  color: var(--strong-blue);
}

.mphb-check-in-date strong,
.mphb-check-out-date strong {
  color: var(--strong-blue);
  font-size: 1.05em;
}

/* --- Blocs d'alojament (un per cada habitació/albergue reservat) --- */
.mphb-reserve-rooms-details {
  display: flex;
  flex-direction: column;
  gap: var(--16px);
  margin-top: var(--16px);
}

.mphb-room-details {
  background-color: var(--ultra-soft-gray);
  border-radius: var(--8px);
  padding: var(--24px);
}

.mphb-room-number {
  color: var(--strong-blue);
  font-size: 1em;
  font-weight: 600;
  margin: 0 0 var(--8px);
}

.mphb-room-type-title {
  margin: 0 0 var(--16px);
  font-size: 0.95em;
}

.mphb-room-type-title span {
  color: var(--medium-gray);
  margin-right: var(--8px);
  font-size: .85em;
}

.mphb-room-type-title a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none !important;
  border-bottom: none !important;
  pointer-events: none;
  cursor: default;
}

.mphb-room-rate-variant {
  margin: 0 0 .5em;
  font-size: .85em;
}

/* El markup del plugin insereix <br> superflus arreu (etiquetes, opcions de
   tarifa...); els amaguem de manera general dins d'aquest bloc */
#mphb-booking-details br {
  display: none;
}

/* --- Camps de formulari (adults, nom hoste, dades client) --- */
.mphb-adults-chooser,
.mphb-guest-name-wrapper,
.mphb-customer-name,
.mphb-customer-last-name,
.mphb-customer-email,
.mphb-customer-phone,
.mphb-customer-country,
.mphb-customer-note {
  margin: 0 0 var(--16px);
}

.mphb-adults-chooser label,
.mphb-guest-name-wrapper label,
.mphb-customer-name label,
.mphb-customer-last-name label,
.mphb-customer-email label,
.mphb-customer-phone label,
.mphb-customer-country label,
.mphb-customer-note label {
  display: block;
  font-weight: 500;
  font-size: 17px;
  color: var(--strong-blue);
  margin-bottom: var(--8px);
}

/* El markup afegeix un <br> entre label i input; com que label ja és block, sobra i crea un buit extra */
.mphb-customer-name br,
.mphb-customer-last-name br,
.mphb-customer-email br,
.mphb-customer-phone br,
.mphb-customer-country br,
.mphb-guest-name-wrapper br,
.mphb-customer-note br {
  display: none;
}

.mphb-adults-chooser abbr,
.mphb-customer-name abbr,
.mphb-customer-last-name abbr,
.mphb-customer-email abbr,
.mphb-customer-phone abbr,
.mphb-customer-country abbr {
  color: var(--error-red);
  text-decoration: none;
  margin-left: var(--2px);
}

.mphb-adults-chooser select,
.mphb-guest-name-wrapper input[type="text"],
.mphb-customer-name input[type="text"],
.mphb-customer-last-name input[type="text"],
.mphb-customer-email input[type="email"],
.mphb-customer-phone input[type="text"],
.mphb-customer-country select,
.mphb-customer-note textarea {
  width: 100%;
  border: var(--1px) solid var(--medium-gray);
  border-radius: var(--8px);
  padding: var(--8px) var(--16px);
  background-color: #fff;
  font-size: 1em;
  box-sizing: border-box;
}

.mphb-adults-chooser select:focus,
.mphb-guest-name-wrapper input:focus,
.mphb-customer-name input:focus,
.mphb-customer-last-name input:focus,
.mphb-customer-email input:focus,
.mphb-customer-phone input:focus,
.mphb-customer-country select:focus,
.mphb-customer-note textarea:focus {
  border-color: var(--blue);
  outline: var(--2px) solid var(--blue);
  outline-offset: var(--2px);
}

/* Amaga el camp "Nombre completo" per allotjament al checkout.
   La classe és genèrica (no depèn de l'índex del bloc), així que
   amaga TOTS els camps d'aquest tipus, independentment de quants
   allotjaments hi hagi a la reserva. */
.mphb-guest-name-wrapper {
  display: none;
}

.mphb-customer-note textarea {
  resize: vertical;
  min-height: 100px;
}

.mphb-required-fields-tip {
  color: var(--medium-gray);
  font-size: 0.85em;
  margin-bottom: var(--16px);
}

/* Nom + Cognom i Email + Telèfon en parelles, ara que #mphb-customer-details
   torna a viure a la columna principal (ampla) */
@media (min-width: 601px) {
  #mphb-customer-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--24px);
  }

  #mphb-customer-details h3,
  #mphb-customer-details .mphb-required-fields-tip,
  #mphb-customer-details .mphb-customer-note {
    grid-column: 1 / -1;
  }
}

/* --- Taula de desglossament de preu --- */
.mphb-price-breakdown {
  width: 100%;
  border-collapse: collapse;
}

.mphb-price-breakdown td,
.mphb-price-breakdown th {
  padding: var(--4px) 0;
  font-size: .85em;
  text-align: left;
}

.mphb-price-breakdown .mphb-table-price-column {
  text-align: right;
  font-weight: 600;
  color: var(--blue);
}

.mphb-price-breakdown-expand {
  color: var(--gray);
  font-weight: 600;
  font-size: .85em;
  text-decoration: none;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: var(--8px);
  border-bottom: none!important;
}

.mphb-price-breakdown-expand:hover {
  color: var(--blue);
}

.mphb-inner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--ultra-soft-gray);
  color: var(--blue);
  font-weight: 600;
  font-size: 0.9em;
}

.mphb-price-breakdown-rate {
  font-size: 0.85em;
  color: var(--medium-gray);
  margin-top: var(--2px);
}

.mphb-price-breakdown-adults td,
.mphb-price-breakdown-nights td,
.mphb-price-breakdown-date td,
.mphb-price-breakdown-fee td {
  color: var(--medium-gray);
  padding-left: var(--16px);
}

.mphb-price-breakdown-dates th,
.mphb-price-breakdown-fees th {
  color: var(--strong-blue);
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-top: var(--16px);
}

.mphb-price-breakdown-accommodation-total th,
.mphb-price-breakdown-fees-total th,
.mphb-price-breakdown-subtotal th {
  border-top: var(--1px) solid var(--border-color);
  padding-top: var(--8px);
}

.mphb-price-breakdown-total th {
  border-top: 1px solid var(--blue);
  padding-top: var(--8px);
  font-size: 1.1em;
  color: var(--strong-blue);
}

.mphb-price-breakdown-total .mphb-table-price-column {
  color: var(--blue);
  font-size: 1.2em;
}

/* --- Preu total + enviament --- */
.mphb-total-price {
  background-color: var(--ultra-soft-gray);
  border-radius: var(--16px);
  padding: var(--16px) var(--24px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 var(--16px);
  font-weight: 600;
  color: var(--strong-blue);
  font-family: 'Onest';
}

.mphb-total-price .mphb-price {
  font-size: 1.4em;
  font-weight: 600;
  color: var(--blue);
}

.mphb-payment-fee {
  display: block;
  font-size: 0.8em;
  color: var(--medium-gray);
  font-weight: 400;
}

.mphb-errors-wrapper {
  background-color: var(--error-bg);
  border: var(--1px) solid var(--error-border);
  color: var(--error-red);
  border-radius: var(--8px);
  padding: var(--16px);
  margin-bottom: var(--16px);
  font-weight: 600;
}

.mphb-errors-wrapper:empty {
  display: none;
}

.mphb_sc_checkout-submit-wrapper {
  text-align: right;
}

.mphb_sc_checkout-submit-wrapper .button {
  background-color: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--8px);
  padding: var(--16px) var(--32px);
  font-weight: 400;
  font-size: 1.05em;
  text-align: center;
  cursor: pointer;
  font-family: 'Onest';
  width: 100%;
  transition: background-color 0.2s ease;
}

.mphb_sc_checkout-submit-wrapper .button:hover {
  background-color: var(--strong-blue);
}

.mphb_sc_checkout-submit-wrapper .button:focus-visible {
  outline: var(--2px) solid var(--strong-blue);
  outline-offset: var(--2px);
}

.mphb_cb_checkout_form .mphb-price-breakdown .mphb-price-breakdown-expand>.mphb-inner-icon, .mphb_sc_checkout-form .mphb-price-breakdown .mphb-price-breakdown-expand>.mphb-inner-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: math;
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .mphb_sc_checkout-wrapper .mphb-checkout-section {
    padding: var(--16px);
  }

  .mphb_sc_checkout-submit-wrapper {
    text-align: center;
  }

  .mphb_sc_checkout-submit-wrapper .button {
    width: 100%;
  }

  .mphb-total-price {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--8px);
  }
}

/* ---------- 4. FORMULARI DE RESERVA DIRECTA (pàgina d'un allotjament individual) ---------- */

.mphb_sc_booking_form-wrapper {
  max-width: 480px;
  background-color: #fff;
  border: var(--1px) solid var(--soft-gray);
  border-radius: var(--16px);
  padding: var(--24px);
}

.mphb_sc_booking_form-wrapper .mphb-required-fields-tip {
  font-size: 0.85em;
  color: var(--medium-gray);
  margin-bottom: var(--16px);
}

.mphb_sc_booking_form-wrapper .mphb-required-fields-tip abbr,
.mphb_sc_booking_form-wrapper label abbr {
  color: var(--error-red);
  text-decoration: none;
  margin-left: var(--2px);
}

.mphb_sc_booking_form-wrapper .mphb-check-in-date-wrapper,
.mphb_sc_booking_form-wrapper .mphb-check-out-date-wrapper {
  margin-bottom: var(--16px);
}

.mphb_sc_booking_form-wrapper label {
  display: block;
  font-weight: 500;
  font-size: 17px;
  color: var(--strong-blue);
  margin-bottom: var(--8px);
}

/* El markup afegeix un <br> entre label i input; label ja és block, sobra */
.mphb_sc_booking_form-wrapper br {
  display: none;
}

.mphb_sc_booking_form-wrapper input[type="text"] {
  width: 100%;
  border: var(--1px) solid var(--medium-gray);
  border-radius: var(--8px);
  padding: var(--8px) var(--16px);
  background-color: #fff;
  font-size: 1em;
  box-sizing: border-box;
  cursor: pointer; /* obren el datepicker, no s'escriuen a mà */
}

.mphb_sc_booking_form-wrapper input[type="text"]:focus {
  border-color: var(--blue);
  outline: var(--2px) solid var(--blue);
  outline-offset: var(--2px);
}

/* --- Bloc de disponibilitat / quantitat (apareix un cop hi ha dates vàlides) --- */
.mphb_sc_booking_form-wrapper .mphb-reserve-room-section {
  margin-top: var(--16px);
  padding-top: var(--16px);
  border-top: var(--1px) solid var(--border-color);
}

.mphb_sc_booking_form-wrapper .mphb-rooms-quantity-wrapper {
  font-size: 0.95em;
  color: var(--medium-gray);
  margin-bottom: var(--16px);
}

.mphb_sc_booking_form-wrapper .mphb-rooms-quantity {
  border: var(--1px) solid var(--medium-gray);
  border-radius: var(--8px);
  padding: var(--2px) var(--8px);
  margin: 0 var(--8px);
}

.mphb_sc_booking_form-wrapper .mphb-available-rooms-count {
  font-weight: 600;
  color: var(--strong-blue);
}

/* --- Botons principals (Comprobar disponibilidad / Confirmar reserva) --- */
.mphb_sc_booking_form-wrapper .mphb-confirm-reservation,
.mphb_sc_booking_form-wrapper .mphb-reserve-btn {
  width: 100%;
  background-color: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--8px);
  padding: var(--16px) var(--32px);
  font-weight: 400;
  font-family: 'Onest';
  font-size: 1.05em;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mphb_sc_booking_form-wrapper .mphb-confirm-reservation:hover,
.mphb_sc_booking_form-wrapper .mphb-reserve-btn:hover {
  background-color: var(--strong-blue);
}

.mphb_sc_booking_form-wrapper .mphb-confirm-reservation:focus-visible,
.mphb_sc_booking_form-wrapper .mphb-reserve-btn:focus-visible {
  outline: var(--2px) solid var(--strong-blue);
  outline-offset: var(--2px);
}

.mphb_sc_booking_form-wrapper .mphb-reserve-btn-wrapper {
  margin-top: var(--16px);
  margin-bottom: 0;
}

/* --- Errors (reutilitza les variables creades a la secció 0) --- */
.mphb_sc_booking_form-wrapper .mphb-errors-wrapper {
  background-color: var(--error-bg);
  border: var(--1px) solid var(--error-border);
  color: var(--error-red);
  border-radius: var(--8px);
  padding: var(--16px);
  margin-bottom: var(--16px);
  font-weight: 600;
}

.mphb_sc_booking_form-wrapper .mphb-errors-wrapper:empty {
  display: none;
}


/* ---------- 5. SELECTOR DE DATES (Datepick — calendari flotant) ---------- */
/* NOTA: aquest és un element flotant per sobre del contingut (overlay), per això SÍ porta
   box-shadow aquí — necessita elevar-se visualment, a diferència de les targetes de la pàgina. */

.datepick-popup {
  z-index: 9999;
}

.datepick {
  background-color: #fff;
  border: var(--1px) solid var(--soft-gray);
  border-radius: var(--16px);
  padding: var(--16px);
  box-shadow: 0 var(--8px) var(--24px) rgba(10, 69, 89, 0.15);
  font-size: 0.95em;
}

/* --- Barra de navegació (<Ant / Hoy / Sig>) --- */
.datepick-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--ultra-soft-gray);
  border-radius: var(--8px);
  padding: var(--8px) var(--16px);
  margin-bottom: var(--16px);
}

.datepick-nav .datepick-cmd {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.datepick-nav .datepick-cmd:hover {
  color: var(--strong-blue);
}

.datepick-nav .datepick-cmd-today {
  color: var(--strong-blue);
}

.datepick-nav .datepick-cmd.datepick-disabled {
  color: var(--soft-gray);
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Capçalera de cada mes --- */
.datepick-month-row {
  display: flex;
  gap: var(--24px);
}

.datepick-month-header {
  text-align: center;
  font-weight: 600;
  color: var(--strong-blue);
  margin-bottom: var(--8px);
  background-color: transparent;
}

.datepick-month-header select.datepick-month-year {
  border: var(--1px) solid var(--soft-gray);
  border-radius: var(--8px);
  padding: var(--2px) var(--8px);
  color: var(--strong-blue);
  font-weight: 600;
  background-color: #fff;
}

/* --- Taula del calendari --- */
.datepick table {
  width: 100%;
  border-collapse: collapse;
}

.datepick-month {
  border: none;
  background-color: var(--ultra-soft-gray);
  border-radius: var(--16px);
  padding: var(--16px);
}

.datepick-month thead {
  border-bottom: 1px solid var(--border-color);
}

.datepick thead th {
  padding: var(--8px) 0;
  text-align: center;
  background-color: transparent;
  border: none;
}


.datepick thead th span {
  font-weight: 600;
  color: var(--strong-blue);
  font-size: 0.85em;
}

.datepick tbody td {
  text-align: center;
  padding: var(--2px);
  background-color: transparent;
  border: none;
}

.mphb-date-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--8px);
  color: var(--medium-gray);
}

/* Dies d'altres mesos (buits) */
.mphb-date-cell.mphb-extra-date {
  visibility: hidden;
}

/* Dies passats, no seleccionables */
.mphb-date-cell.mphb-past-date {
  color: var(--soft-gray);
  cursor: not-allowed;
  font-size: 16px;
  display: flex;
}

/* Cap de setmana (aporta un fons subtil, tant si és passat com disponible) */
.mphb-date-cell.datepick-weekend {
  background-color: var(--ultra-soft-gray);
}

/* Dies disponibles */
a.mphb-date-cell.mphb-available-date {
  color: var(--blue);
  background-color: transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-size: 16px;
  display: flex;
}

a.mphb-date-cell.mphb-available-date:hover {
  background-color: var(--blue);
  color: #fff;
}

.datepick-month .mphb-check-in-date, .datepick-month .mphb-check-out-date {
  margin-bottom: 0;
}

/* Avui */
.mphb-date-cell.datepick-today {
  border: var(--2px) solid var(--blue);
}

.mphb-datepick-popup .datepick-month td a.datepick-today {
  background-color: transparent;
}

.mphb-datepick-popup .datepick-month td a:hover,
.mphb-datepick-popup .datepick-month td a.datepick-today:hover {
  color: #fff;
  background-color: var(--blue);
}

/* Seleccionat */
a.mphb-date-cell.datepick-selected,
.mphb-datepick-popup .datepick-month td a.datepick-highlight, .mphb-datepick-popup .datepick-month td a.datepick-selected {
  background-color: var(--blue);
  color: #fff;
}

.mphb-datepick-popup .datepick-month td .mphb-earlier-min-date, .mphb-datepick-popup .datepick-month td .mphb-later-max-date {
  font-size: 16px;
  display: flex;
}

/* --- Peu del calendari (Limpiar / Cerrar) --- */
.datepick-ctrl {
  display: flex;
  background-color: transparent;
  justify-content: space-between;
  margin-top: var(--16px);
  padding-top: var(--16px);
  border-top: var(--1px) solid var(--border-color);
}

.datepick-ctrl .datepick-cmd {
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  padding: var(--8px) var(--16px);
  border-radius: var(--8px);
  text-align: center;
  font-family: 'Onest';
}

.datepick-ctrl .datepick-cmd-clear {
  color: var(--medium-gray);
}

.datepick-ctrl .datepick-cmd-clear:hover {
  background-color: var(--ultra-soft-gray);
}

.datepick-ctrl .datepick-cmd-close {
  color: #fff;
  background-color: var(--blue);
}

.datepick-ctrl .datepick-cmd-close:hover {
  background-color: var(--strong-blue);
}

.datepick-clear-fix {
  clear: both;
}

/* --- Responsive: apilar els dos mesos en mòbil --- */
@media (max-width: 600px) {
  .datepick,
  .datepick-multi {
    width: auto !important;
    max-width: 100%;
  }

  .datepick-month-row {
    flex-direction: column;
    gap: var(--16px);
  }

  .datepick-month {
    width: 100% !important;
  }

  .mphb-date-cell {
    width: 28px;
    height: 28px;
  }
}