/* ============================================================
   TIENDA — reserva, carrito, caja y pagos

   Dos frentes:
   1. El plugin Surf School Booking, que trae su propia identidad
      (coral, serif). Se le cambia la paleta.
   2. La caja nativa de WooCommerce, que venía sin vestir.

   OJO con el orden de carga: la hoja del plugin declara sus
   variables en :root y puede cargarse después que esta. Por eso
   aquí van en `html` y con !important — si no, gana la suya.
   ============================================================ */

html {
  /* --- Calendario de reservas --- */
  --sb-deep:      #082444 !important;
  --sb-coral:     #f4b01e !important;
  --sb-foam:      #eef6fc !important;
  --sb-white:     #ffffff !important;
  --sb-bg:        #f7fbfe !important;
  --sb-muted:     #8496a6 !important;
  --sb-border:    #d9e8f4 !important;
  --sb-radius:    14px !important;
  --sb-radius-sm: 10px !important;
  --sb-shadow:    0 2px 8px rgba(6, 22, 45, .08) !important;
  --sb-shadow-md: 0 10px 30px rgba(6, 22, 45, .14) !important;

  /* --- Carrito --- */
  --sca-deep:       #082444 !important;
  --sca-coral:      #f4b01e !important;
  --sca-cream:      #eef6fc !important;
  --sca-white:      #ffffff !important;
  --sca-muted:      #8496a6 !important;
  --sca-border:     #d9e8f4 !important;
  --sca-radius:     16px !important;
  --sca-font-serif: 'Montserrat', system-ui, sans-serif !important;
  --sca-font-sans:  'Montserrat', system-ui, sans-serif !important;

  /* --- Caja del plugin --- */
  --sco-deep:       #082444 !important;
  --sco-coral:      #f4b01e !important;
  --sco-cream:      #eef6fc !important;
  --sco-white:      #ffffff !important;
  --sco-muted:      #8496a6 !important;
  --sco-border:     #d9e8f4 !important;
  --sco-radius:     16px !important;
  --sco-font-serif: 'Montserrat', system-ui, sans-serif !important;
  --sco-font-sans:  'Montserrat', system-ui, sans-serif !important;

  --coral: #f4b01e !important;
}

/* ------------------------------------------------------------
   Y por si alguna regla del plugin lleva el coral escrito a mano
   en vez de usar la variable: se le pone el fondo directamente.
   ------------------------------------------------------------ */
.sca-btn, .sca-btn--coral,
.sco-btn, .sco-btn--coral, .sco-submit, .sco-continue,
.sb-btn, .sb-btn--primary, .sb-book-btn {
  background: #f4b01e !important;
  background-image: none !important;
  color: #082444 !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 5px 0 #c98a12 !important;
}

.sca-btn:hover, .sco-btn:hover, .sb-btn:hover { background: #ffc043 !important; }
.sca-btn:active, .sco-btn:active, .sb-btn:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #c98a12 !important;
}

/* Los círculos y rótulos de los pasos (1 · 2 · 3). */
.sco-step.is-active .sco-step__num,
.sco-step--active .sco-step__num,
.sco-stepper .is-active,
.sco-eyebrow, .sca-eyebrow, .sb-eyebrow {
  background-color: #f4b01e !important;
  color: #082444 !important;
}
.sco-eyebrow, .sca-eyebrow, .sb-eyebrow {
  background: none !important;
  color: #1ca3d8 !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px;
}

/* Nada de serif dentro de la tienda. */
.sca-wrap, .sca-wrap *,
.sco-wrap, .sco-wrap *,
.sb-wrap, .sb-wrap * {
  font-family: 'Montserrat', system-ui, sans-serif !important;
}

.sca-title, .sca-summary-title, .sca-item__name,
.sco-title, .sco-section-title, .sco-card__title,
.sb-title, .sb-heading {
  font-weight: 900 !important;
  color: #082444 !important;
  letter-spacing: .3px;
}

.sca-item, .sca-summary-card, .sco-card, .sb-card {
  border: 3px solid #082444 !important;
  box-shadow: 6px 6px 0 #f4b01e !important;
  border-radius: 16px !important;
}

.sca-meta-chip, .sco-meta-chip, .sb-chip {
  background: #e4f2fa !important;
  color: #0f7ba8 !important;
  font-weight: 800 !important;
  border-radius: 99px !important;
}
.sca-meta-chip--pkg { background: #fff4dd !important; color: #8a6410 !important; }

.sca-remove-btn { background: #d64545 !important; border-radius: 8px !important; }

.sca-continue-link, .sco-back-link, .sb-btn--ghost {
  color: #1ca3d8 !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ============================================================
   CAJA NATIVA DE WOOCOMMERCE

   Venía con el formulario en crudo: etiquetas pegadas a los
   campos y el botón de pagar convertido en un enlace diminuto.
   ============================================================ */

.woocommerce-checkout h3,
.woocommerce-checkout h2,
.woocommerce-billing-fields h3,
#order_review_heading {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 900;
  font-size: 16px;
  color: #082444;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 30px 0 16px;
}

/* Etiqueta arriba, campo debajo y a lo ancho. */
.woocommerce form .form-row {
  display: block !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}

.woocommerce form .form-row label {
  display: block !important;
  width: auto !important;
  float: none !important;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  font-size: 11px;
  color: #082444;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 6px;
}

.woocommerce form .form-row .required { color: #d64545; text-decoration: none; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100% !important;
  box-sizing: border-box;
  padding: 12px 13px !important;
  height: auto !important;
  min-height: 46px;
  border: 2px solid #dbe6ef !important;
  border-radius: 9px !important;
  background: #fff;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #082444;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: #1ca3d8 !important;
  outline: none;
}

.woocommerce form .form-row textarea { min-height: 100px; resize: vertical; }

/* Dos columnas en pantallas anchas, una en móvil. */
@media (min-width: 700px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-additional-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
  }
  .woocommerce-billing-fields__field-wrapper > .form-row-wide,
  #order_comments_field,
  #billing_address_1_field,
  #billing_address_2_field { grid-column: 1 / -1; }
}

/* --- El resumen del pedido --- */
.woocommerce-checkout-review-order {
  background: #fff;
  border: 3px solid #082444;
  border-radius: 16px;
  box-shadow: 6px 6px 0 #f4b01e;
  padding: 22px;
  margin-top: 10px;
}

.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Montserrat', system-ui, sans-serif;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 12px 6px;
  border-bottom: 1px solid #e6eef5;
  font-size: 14px;
  color: #41525f;
  text-align: left;
  vertical-align: top;
}

.woocommerce-checkout-review-order-table th {
  font-weight: 900;
  color: #082444;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: .5px;
}

.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child { text-align: right; }

.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total th {
  font-weight: 900;
  font-size: 17px;
  color: #082444;
  border-bottom: none;
  padding-top: 16px;
}

/* Los datos de la reserva dentro de cada línea, más compactos. */
.woocommerce-checkout-review-order-table dl.variation,
.woocommerce-checkout-review-order-table .wc-item-meta {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: #6a7c8c;
}
.woocommerce-checkout-review-order-table dl.variation dt,
.woocommerce-checkout-review-order-table .wc-item-meta li strong {
  font-weight: 800;
  color: #082444;
  display: inline;
  margin-right: 4px;
}
.woocommerce-checkout-review-order-table dl.variation dd,
.woocommerce-checkout-review-order-table .wc-item-meta li p {
  display: inline;
  margin: 0 0 0 2px;
}
.woocommerce-checkout-review-order-table dl.variation dd::after { content: ''; display: block; }
.woocommerce-checkout-review-order-table .wc-item-meta { list-style: none; padding: 0; }

/* --- Métodos de pago --- */
.woocommerce-checkout #payment {
  background: #f5f9fc;
  border: 2px solid #d9e8f4;
  border-radius: 14px;
  padding: 18px;
  margin-top: 18px;
}

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
  list-style: none !important;
  background: #fff;
  border: 2px solid #dbe6ef;
  border-radius: 11px;
  padding: 14px 16px;
  margin: 0 0 10px !important;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  display: inline-block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #082444;
  margin: 0 0 0 8px;
  cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  width: 18px; height: 18px; accent-color: #1ca3d8; vertical-align: middle;
}

.woocommerce-checkout #payment div.payment_box {
  background: #eef6fc !important;
  border-radius: 10px;
  margin: 12px 0 0 !important;
  padding: 14px 16px !important;
  font-size: 13px;
  color: #41525f;
  font-weight: 600;
}
.woocommerce-checkout #payment div.payment_box::before { display: none !important; }

/* El botón de pagar: el amarillo grande del diseño. */
.woocommerce-checkout #payment #place_order,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: block !important;
  width: 100% !important;
  float: none !important;
  background: #f4b01e !important;
  color: #082444 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 17px !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 5px 0 #c98a12 !important;
  cursor: pointer;
}
.woocommerce-checkout #payment #place_order:hover { background: #ffc043 !important; }
.woocommerce-checkout #payment #place_order:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #c98a12 !important;
}

.woocommerce-privacy-policy-text {
  font-size: 12.5px;
  color: #6a7c8c;
  font-weight: 600;
  margin: 14px 0;
}

/* --- Carrito nativo --- */
.woocommerce table.shop_table {
  border: 3px solid #082444 !important;
  border-radius: 16px !important;
  border-collapse: separate;
  overflow: hidden;
  font-family: 'Montserrat', system-ui, sans-serif;
}
.woocommerce table.shop_table th {
  background: #eef6fc;
  color: #082444;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: .5px;
}
.woocommerce table.shop_table td { color: #41525f; font-weight: 600; }

.woocommerce .cart_totals h2 {
  font-weight: 900;
  color: #082444;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: .5px;
}

/* ------------------------------------------------------------
   EN LA FICHA DE PRODUCTO NO HAY PAGOS EXPRÉS

   Solo se añade a la cesta. El pago se hace desde el carrito.
   Los filtros de functions.php ya los quitan; esto es el cinturón
   por si alguna pasarela se cuela igualmente.
   ------------------------------------------------------------ */
.single-product .wc-stripe-product-checkout-container,
.single-product #wc-stripe-express-checkout-element,
.single-product .wc-stripe-payment-request-wrapper,
.single-product #wcpay-express-checkout-element,
.single-product .wc-stripe-checkout-separator,
.single-product .wc-block-components-express-payment,
.single-product .wcpay-payment-request-wrapper,
.single-product [id*="express-checkout"],
.single-product [class*="payment-request-button"] {
  display: none !important;
}

/* ------------------------------------------------------------
   PAGOS EXPRÉS: fuera en todas partes

   No es estética: el botón de Google Pay / Amazon Pay / Link lleva el importe
   grabado de cuando se dibuja. Si el cliente aplica un cupón después, cobra
   el precio de antes. Aquí se paga con tarjeta y punto.

   El PHP ya los descuelga (functions.php); esto es el cinturón por si alguna
   versión del plugin los pinta por otro camino.
   ------------------------------------------------------------ */
body.ps-sin-express .wc-stripe-product-checkout-container,
body.ps-sin-express #wc-stripe-express-checkout-element,
body.ps-sin-express .wc-stripe-express-checkout-element,
body.ps-sin-express .wc-stripe-payment-request-wrapper,
body.ps-sin-express .wc-stripe-checkout-separator,
body.ps-sin-express #wcpay-express-checkout-element,
body.ps-sin-express .wcpay-payment-request-wrapper,
body.ps-sin-express .wc-block-components-express-payment,
body.ps-sin-express .wc-block-components-express-payment-continue-rule,
body.ps-sin-express [id*="express-checkout-element"],
body.ps-sin-express [class*="payment-request-button"] {
  display: none !important;
}

/* El campo de la tarjeta de Stripe. */
.wc-stripe-upe-element,
#wc-stripe-upe-element,
.wc-stripe-elements-field {
  border: 2px solid #dbe6ef !important;
  border-radius: 9px !important;
  padding: 12px 13px !important;
  background: #fff !important;
  min-height: 46px;
}

/* ------------------------------------------------------------
   Añadir al carrito en la ficha
   ------------------------------------------------------------ */
.woocommerce div.product form.cart { display: block !important; margin: 0 !important; }
.woocommerce div.product form.cart .quantity { display: block; margin: 0 0 12px !important; }
.woocommerce div.product form.cart .quantity .qty {
  width: 100%; height: 48px; text-align: center; font-weight: 800; font-size: 16px;
}
.woocommerce div.product form.cart button.single_add_to_cart_button {
  width: 100% !important; float: none !important; padding: 15px !important; font-size: 14px !important;
}

/* ------------------------------------------------------------
   Avisos
   ------------------------------------------------------------ */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: 12px;
  border: 2px solid #d9e8f4;
  border-top-width: 4px;
  font-weight: 600;
  font-family: 'Montserrat', system-ui, sans-serif;
}
.woocommerce-message { border-top-color: #2fae4e !important; background: #f4fbf6; }
.woocommerce-info    { border-top-color: #1ca3d8 !important; background: #f2f9fd; }
.woocommerce-error   { border-top-color: #d64545 !important; background: #fdf4f4; }

.woocommerce-message .button, .woocommerce-info .button {
  background: #f4b01e !important;
  color: #082444 !important;
  box-shadow: 0 4px 0 #c98a12 !important;
}

/* ------------------------------------------------------------
   Móvil
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  .sca-grid, .sco-grid { grid-template-columns: 1fr !important; }
  .sca-item, .sco-card, .sb-card {
    box-shadow: 4px 4px 0 #f4b01e !important;
    border-width: 2.5px !important;
  }
  .woocommerce-checkout-review-order { padding: 16px; box-shadow: 4px 4px 0 #f4b01e; }
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td { font-size: 13px; padding: 10px 6px; }
}

/* ==========================================================================
   Campo de cupón

   Va debajo del resumen de la caja (y del carrito). Mismo marco navy y misma
   sombra amarilla que el resto de tarjetas del diseño.
   ========================================================================== */
.ps-cupon {
  margin-top: 16px;
  background: #fff;
  border: 3px solid var(--ps-navy);
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--ps-yellow);
  padding: 18px 20px;
  font-family: var(--ps-font-body);
}

.ps-cupon-titulo {
  font-weight: 900;
  font-size: 11px;
  color: var(--ps-navy);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 12px;
}

.ps-cupon-form { display: flex; gap: 8px; }

.ps-cupon-campo {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 2px solid var(--ps-line);
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ps-navy);
  text-transform: uppercase;
}
.ps-cupon-campo::placeholder { text-transform: none; font-weight: 600; color: var(--ps-grey); }

.ps-cupon-boton {
  flex-shrink: 0;
  background: var(--ps-yellow);
  color: var(--ps-navy);
  border: none;
  border-radius: 9px;
  padding: 11px 18px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--ps-yellow-sh);
}
.ps-cupon-boton:disabled { opacity: .6; cursor: default; }

.ps-cupon-aplicado {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  background: #eafaef;
  border: 1px solid #bfe8cb;
  border-radius: 9px;
  padding: 9px 12px;
  margin-bottom: 10px;
}
.ps-cupon-codigo    { font-weight: 900; font-size: 12.5px; color: var(--ps-navy); text-transform: uppercase; letter-spacing: .4px; }
.ps-cupon-descuento { font-weight: 800; font-size: 13px; color: var(--ps-green); margin-left: auto; }

.ps-cupon-quitar {
  background: none;
  border: none;
  padding: 0;
  color: #a12b2b;
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  cursor: pointer;
  text-decoration: underline;
}

.ps-cupon-error {
  margin-top: 10px;
  background: #fdecec;
  border: 1px solid #f3b7b7;
  border-radius: 9px;
  padding: 9px 12px;
  color: #a12b2b;
  font-weight: 700;
  font-size: 12.5px;
}

@media (max-width: 480px) {
  .ps-cupon-form  { flex-direction: column; }
  .ps-cupon-boton { width: 100%; }
}

/* ==========================================================================
   Reserva por día

   Se esconde la rejilla de franjas horarias: aquí se reserva el día y el
   coach confirma la hora 24 h antes según las mareas. La franja se marca
   sola por debajo (assets/tienda.js) para que el plugin siga recibiendo lo
   que espera.
   ========================================================================== */
.ps-solo-dia #sb-slots,
.ps-solo-dia .sb-slots,
.ps-solo-dia .sb-slots-col,
.ps-solo-dia .sb-slot-btn,
.ps-solo-dia .sb-slots-message,
.ps-solo-dia .sb-slot-empty { display: none !important; }

/* En su lugar, la explicación de por qué no hay que elegir hora. */
.ps-solo-dia .ps-nota-hora {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fff8e8;
  border: 1px solid #f4d98a;
  border-radius: 11px;
  padding: 13px 15px;
  margin: 4px 0 18px;
  font-family: var(--ps-font-body);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.45;
  color: #7a5c12;
}

/* ==========================================================================
   La caja de WooCommerce, ordenada

   Salía descolocada: los campos a dos columnas con etiquetas partiéndose en
   tres líneas, y el recuadro de las formas de pago con marcos anidados y
   barra de desplazamiento. Aquí se pone cada cosa en su sitio.
   ========================================================================== */

/* Un campo por línea. Con dos columnas, «Dirección de correo electrónico»
   no cabía y la etiqueta se partía encima del recuadro. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-checkout .woocommerce-additional-fields .form-row {
  width: 100% !important;
  float: none !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper label,
.woocommerce-checkout .woocommerce-additional-fields label {
  display: block;
  margin-bottom: 6px;
  font-weight: 800;
  font-size: 11px;
  color: var(--ps-navy);
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1.3;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .input-text,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper select,
.woocommerce-checkout .select2-container { width: 100% !important; }

/* El asterisco de obligatorio, discreto. Salía en rojo chillón. */
.woocommerce-checkout .required { color: var(--ps-grey); text-decoration: none; }

/* Las formas de pago: un solo marco, sin cajas dentro de cajas ni scroll. */
.woocommerce-checkout #payment,
.woocommerce-checkout #payment > .wc_payment_methods,
.woocommerce-checkout #payment .wc_payment_methods li {
  overflow: visible !important;
  max-width: 100% !important;
}

.woocommerce-checkout #payment ul.wc_payment_methods {
  border: 2px solid var(--ps-line) !important;
  border-radius: 12px;
  padding: 6px !important;
  margin: 0 0 18px !important;
  background: #fff;
  list-style: none;
}

.woocommerce-checkout #payment ul.wc_payment_methods li {
  border: none !important;
  border-bottom: 1px solid var(--ps-line) !important;
  background: transparent !important;
  padding: 4px 6px !important;
  margin: 0 !important;
}
.woocommerce-checkout #payment ul.wc_payment_methods li:last-child { border-bottom: none !important; }

/* ==========================================================================
   LA CAJA EN TRES PASOS

   Tus datos → Tu día → Pago. Es una capa por encima de la caja de
   WooCommerce, no un sustituto: si el JavaScript se cae, .ps-pasos-off
   devuelve la página entera y se puede pagar igual.
   ========================================================================== */

.ps-pasos-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 30px;
  flex-wrap: wrap;
}

.ps-paso-punto {
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: .45;
}
.ps-paso-punto.is-activo,
.ps-paso-punto.is-hecho { opacity: 1; }

.ps-paso-num {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--ps-navy);
  color: var(--ps-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
}
.ps-paso-punto.is-activo .ps-paso-num { background: var(--ps-yellow); border-color: var(--ps-yellow); }
.ps-paso-punto.is-hecho  .ps-paso-num { background: var(--ps-green);  border-color: var(--ps-green); color: #fff; }

.ps-paso-txt {
  font-weight: 900;
  font-size: 11.5px;
  color: var(--ps-navy);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.ps-paso-linea { flex: 1; min-width: 14px; height: 2px; background: var(--ps-line); }

.ps-paso-titulo {
  margin: 0 0 6px;
  font-weight: 900;
  font-size: 18px;
  color: var(--ps-navy);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.ps-paso-ayuda {
  margin: 0 0 18px;
  color: var(--ps-muted);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 560px;
}

/* ── Los días ───────────────────────────────────────────────────────── */
.ps-dias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}

.ps-dia {
  background: #fff;
  border: 2.5px solid var(--ps-line);
  border-radius: 12px;
  padding: 11px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--ps-font-body);
  transition: border-color .12s ease, transform .08s ease;
}
.ps-dia:hover { border-color: var(--ps-blue); }
.ps-dia.is-activo {
  border-color: var(--ps-navy);
  background: var(--ps-yellow);
  box-shadow: 0 4px 0 var(--ps-yellow-sh);
}
.ps-dia.is-cargando { opacity: .5; cursor: wait; }

.ps-dia-sem { font-weight: 800; font-size: 10.5px; color: var(--ps-grey); text-transform: uppercase; letter-spacing: .5px; }
.ps-dia.is-activo .ps-dia-sem { color: var(--ps-navy); }
.ps-dia-num { font-weight: 900; font-size: 20px; color: var(--ps-navy); line-height: 1.05; }
.ps-dia-mes { font-weight: 700; font-size: 10.5px; color: var(--ps-grey); text-transform: uppercase; }
.ps-dia.is-activo .ps-dia-mes { color: var(--ps-navy); }

.ps-dias-error,
.ps-paso-aviso {
  margin-top: 12px;
  background: #fdecec;
  border: 1px solid #f3b7b7;
  border-radius: 9px;
  padding: 10px 13px;
  color: #a12b2b;
  font-weight: 700;
  font-size: 12.5px;
}

.ps-campo-falta input,
input.ps-campo-falta,
select.ps-campo-falta { border-color: #e08585 !important; }

/* ── Navegación ─────────────────────────────────────────────────────── */
.ps-paso-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ps-line);
}

.ps-paso-seguir {
  margin-left: auto;
  background: var(--ps-yellow);
  color: var(--ps-navy);
  border: none;
  border-radius: 10px;
  padding: 14px 30px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--ps-yellow-sh);
}
.ps-paso-seguir:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--ps-yellow-sh); }

.ps-paso-atras {
  background: none;
  border: none;
  padding: 0;
  color: var(--ps-blue);
  font-weight: 800;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  cursor: pointer;
}

/* Cuando el paso a paso se rinde, se ve la caja entera y sin botones. */
.ps-pasos-off .ps-paso-nav { display: none; }

@media (max-width: 560px) {
  .ps-paso-txt   { display: none; }
  .ps-paso-linea { min-width: 20px; }
  .ps-dias       { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}

/* -------------------------------------------------------------------------
 * La lista de paquetes, sin la línea «€60 per person»
 *
 * El plugin pinta debajo de cada paquete un div .sb-pkg-price con el texto
 * «€60 per person» (surf-booking.js, línea 294). Desde que el precio es por
 * sesión y no por cabeza, esa frase dice justo lo contrario de lo que se
 * cobra, y las cuentas que salen de ahí son las de antes.
 *
 * Se oculta en vez de corregirla porque el texto lo compone el JS del plugin
 * y cualquier actualización lo devolvería. El div es decorativo: no se usa
 * para seleccionar ni para calcular, así que esconderlo no rompe la reserva.
 * El importe real sigue saliendo en el resumen (Total) antes de pagar.
 * ---------------------------------------------------------------------- */
#sb-pkg-list .sb-pkg-price {
	display: none;
}

/* El desglose «€60 × 4 personas = €240» no aplica si el precio es por
   sesión. El total corregido lo pone assets/tienda.js; esta línea sobra.
   Solo en clases: en los alquileres sí se cobra por unidad y ahí es útil. */
body.ps-precio-por-grupo #sb-breakdown {
	display: none !important;
}