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

   El plugin Surf School Booking y las pasarelas de pago traen su
   propio aspecto: coral, tipografías serif y esquinas distintas.
   Aquí se les pone el diseño de Pure Surf.

   Lo bueno es que el plugin define su paleta con variables CSS, así
   que basta con darles otro valor: no hay que pelear regla a regla.
   ============================================================ */

:root {

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

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

  /* --- Caja (surf-checkout.css) --- */
  --sco-deep:       #082444;
  --sco-coral:      #f4b01e;
  --sco-cream:      #eef6fc;
  --sco-white:      #ffffff;
  --sco-muted:      #8496a6;
  --sco-border:     #d9e8f4;
  --sco-radius:     16px;
  --sco-font-serif: 'Montserrat', system-ui, sans-serif;
  --sco-font-sans:  'Montserrat', system-ui, sans-serif;
}

/* ------------------------------------------------------------
   Botones del plugin: el amarillo con sombra dura del diseño,
   y texto azul marino en vez de blanco (sobre amarillo no se lee).
   ------------------------------------------------------------ */
.sca-btn,
.sca-btn--coral,
.sco-btn,
.sco-btn--coral,
.sb-btn,
.sb-btn--primary {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  color: #082444 !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 5px 0 #c98a12 !important;
  transition: transform .08s ease, box-shadow .08s ease;
}

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

/* Los botones secundarios, en azul marino. */
.sca-continue-link,
.sco-back-link,
.sb-btn--ghost {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 800 !important;
  color: #1ca3d8 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 12.5px !important;
}

/* ------------------------------------------------------------
   Títulos: el mismo tratamiento que el resto del sitio
   (Montserrat, negrita 900, itálica, versales).
   ------------------------------------------------------------ */
.sca-title,
.sca-summary-title,
.sco-title,
.sco-section-title,
.sb-title,
.sb-heading {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 900 !important;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #082444 !important;
}

/* El nombre de cada reserva en el carrito: sin serif ni verde. */
.sca-item__name,
.sco-item__name {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 900 !important;
  color: #082444 !important;
  text-transform: none !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}

.sca-item__price,
.sca-total-price,
.sco-total-price {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 900 !important;
  color: #082444 !important;
}

/* ------------------------------------------------------------
   Tarjetas: borde azul marino y sombra amarilla, como las fichas.
   ------------------------------------------------------------ */
.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;
}

/* Las etiquetas de fecha, hora y personas, como los chips del diseño. */
.sca-meta-chip,
.sco-meta-chip,
.sb-chip {
  background: #e4f2fa !important;
  color: #0f7ba8 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-radius: 99px !important;
}

.sca-meta-chip--pkg {
  background: #fff4dd !important;
  color: #8a6410 !important;
}

/* El botón de quitar: rojo sobrio, no coral. */
.sca-remove-btn {
  background: #d64545 !important;
  border-radius: 8px !important;
}

/* ------------------------------------------------------------
   BOTONES DE PAGO EXPRÉS (Google Pay, Apple Pay, Amazon Pay)

   Stripe los mete dentro de la columna de reserva, que es estrecha.
   Se salían y se montaban unos con otros. Aquí se apilan a lo ancho
   y con aire entre ellos.
   ------------------------------------------------------------ */
.wc-stripe-product-checkout-container,
#wc-stripe-express-checkout-element,
.wc-block-components-express-payment,
.wc-stripe-payment-request-wrapper,
#wcpay-express-checkout-element {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 14px 0 0 !important;
  box-sizing: border-box;
}

/* Cada botón, a lo ancho y con su propio hueco. */
.wc-stripe-product-checkout-container > *,
#wc-stripe-express-checkout-element > *,
.wc-block-components-express-payment__event-buttons > li {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 10px !important;
  min-width: 0 !important;
}

.wc-block-components-express-payment__event-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Nada de botones de pago desbordando su caja. */
.wc-stripe-product-checkout-container iframe,
#wc-stripe-express-checkout-element iframe {
  max-width: 100% !important;
}

/* El separador "o paga con" que mete Stripe. */
.wc-stripe-checkout-separator,
.wc-block-components-express-payment__title-container {
  margin: 14px 0 !important;
  color: #8496a6 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ------------------------------------------------------------
   El botón de añadir al carrito, a lo ancho de la columna.
   ------------------------------------------------------------ */
.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 de WooCommerce ("se ha añadido a tu carrito")
   ------------------------------------------------------------ */
.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;
  }
  .sca-item__name { font-size: 14px !important; }
}