/*
 * checkout.css — Página de checkout premium
 * Estiliza tanto el layout propio como los elementos generados por WooCommerce.
 * Mobile-first. BEM con prefijo rda-.
 */

/* ══ Header de checkout ═══════════════════════════════════════════════════════ */

.rda-checkout-header {
  background: var(--color-cream-light);
  border-bottom: 1px solid var(--color-border-subtle);
}

.rda-checkout-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
}

.rda-checkout-header__trust {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  justify-self: start;
}

.rda-checkout-header__trust svg {
  color: var(--color-gold-base);
  flex-shrink: 0;
}

.rda-checkout-header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  text-decoration: none;
}

.rda-checkout-header__logo img {
  height: 40px;
  width: auto;
  display: block;
}

.rda-checkout-header__help {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.rda-checkout-header__help:hover {
  color: var(--color-gold-deep);
}

.rda-checkout-header__help svg {
  color: var(--color-gold-base);
  flex-shrink: 0;
}

@media (max-width: 599px) {
  .rda-checkout-header__inner {
    grid-template-columns: 1fr auto 1fr;
    height: 54px;
    padding: 0 var(--space-lg);
  }

  .rda-checkout-header__trust span,
  .rda-checkout-header__help span {
    display: none;
  }

  .rda-checkout-header__trust,
  .rda-checkout-header__help {
    gap: 0;
  }
}

/* ══ Footer de checkout ════════════════════════════════════════════════════════ */

.rda-checkout-footer {
  margin-top: var(--space-3xl);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-cream-light);
  padding: var(--space-lg) 0;
}

.rda-checkout-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.rda-checkout-footer__security {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}

.rda-checkout-footer__security svg {
  color: var(--color-gold-base);
  flex-shrink: 0;
}

.rda-checkout-footer__payments {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.rda-checkout-footer__pay-badge {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: 3px;
  padding: 3px 7px;
}

.rda-checkout-footer__copy {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-ink-muted);
  margin: 0;
}

@media (max-width: 767px) {
  .rda-checkout-footer__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
    padding: 0 var(--space-lg);
  }

  .rda-checkout-footer__payments {
    justify-content: center;
  }
}

/* ══ Wrapper ══════════════════════════════════════════════════════════════════ */

.rda-checkout {
  background: var(--color-cream-light);
  min-height: 70vh;
  padding-block: var(--space-2xl) var(--space-4xl);
}

/* ══ Header ═══════════════════════════════════════════════════════════════════ */

.rda-checkout__header {
  margin-bottom: var(--space-2xl);
}

.rda-checkout__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--weight-light);
  color: var(--color-ink-primary);
  margin: var(--space-sm) 0 var(--space-md);
  line-height: var(--leading-tight);
}

/* ══ Layout dos columnas ══════════════════════════════════════════════════════ */

.rda-checkout__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-2xl);
  /* align-items: stretch (default) — la columna de resumen ocupa toda la altura del form-col */
}

.rda-checkout__form-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

/* ══ Secciones del formulario (tarjeta) ═══════════════════════════════════════ */

.rda-checkout__section {
  position: relative;
  background: #fff;
  border: 1px solid rgba(201, 168, 76, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: 0 2px 16px rgba(10, 23, 51, 0.05);
}

.rda-checkout__section::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-xl);
  right: var(--space-xl);
  height: 2px;
  background: linear-gradient(to right, transparent, var(--color-gold-base), transparent);
  border-radius: 0 0 2px 2px;
}

.rda-checkout__section-header {
  margin-bottom: var(--space-xl);
}

.rda-checkout__section-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold-base);
  margin: 0 0 var(--space-2xs);
}

.rda-checkout__section-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: var(--weight-regular);
  color: var(--color-ink-primary);
  margin: 0;
  line-height: var(--leading-snug);
}

/* ══ Campos WooCommerce — estilizados para match con rda-form-input ══════════ */

.rda-checkout__section .woocommerce-billing-fields,
.rda-checkout__section .woocommerce-shipping-fields,
.rda-checkout__section .woocommerce-additional-fields {
  margin: 0;
}

/* Oculta el <h3> "Detalles de facturación" / "Billing details" que
   WooCommerce genera por defecto — nuestra propia .rda-checkout__section-title
   ya identifica la sección, ese segundo título es ruido redundante. */
.rda-checkout__section .woocommerce-billing-fields > h3 {
  display: none;
}

/* Grid de campos */
.woocommerce-checkout .form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 var(--space-md);
  padding: 0;
  width: 100% !important;
  float: none !important;
  clear: none !important;
}

/* Dos columnas side-by-side */
.woocommerce-checkout .col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  width: 100%;
  float: none;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  float: none;
  width: 100%;
}

/* Labels */
.woocommerce-checkout label,
.woocommerce-checkout .woocommerce-form__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-secondary);
  margin-bottom: 6px;
}

.woocommerce-checkout label .required {
  color: var(--color-gold-deep);
  text-decoration: none;
}

/* Inputs, selects, textareas */
.woocommerce-checkout .input-text,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100%;
  padding: 12px var(--space-md);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-ink-primary);
  background: var(--color-cream-light);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--color-gold-base);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.1);
  background: #fff;
}

.woocommerce-checkout textarea {
  resize: vertical;
  min-height: 100px;
  line-height: var(--leading-relaxed);
}

/* Select arrow */
.woocommerce-checkout select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8FAA' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  padding-right: 40px;
}

/* Checkbox "Same as billing" */
.woocommerce-checkout .woocommerce-form__input-checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border-medium);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  accent-color: var(--color-gold-base);
}

/* Error de validación */
.woocommerce-checkout .woocommerce-invalid .input-text,
.woocommerce-checkout .woocommerce-invalid input,
.woocommerce-checkout .woocommerce-invalid select {
  border-color: var(--color-error);
}

.woocommerce-checkout .woocommerce-invalid-required-field .woocommerce-input-wrapper::after,
.woocommerce .woocommerce-error { color: var(--color-error); }

/* ══ Nota de pedido ═══════════════════════════════════════════════════════════ */

.rda-checkout__section--notes .woocommerce-additional-fields__field-wrapper {
  margin: 0;
}

/* ══ Sección de pago ══════════════════════════════════════════════════════════ */

.rda-checkout__section--payment {
  background: var(--color-navy-base);
  border-color: rgba(201, 168, 76, 0.2);
}

.rda-checkout__section--payment::before {
  background: linear-gradient(to right, transparent, var(--color-gold-base), transparent);
}

.rda-checkout__section--payment .rda-checkout__section-eyebrow { color: var(--color-gold-soft); }
.rda-checkout__section--payment .rda-checkout__section-title  { color: var(--color-cream-base); }

/* ── Métodos de pago (WooCommerce genera .wc_payment_methods) ── */

.wc_payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/*
 * WooCommerce genera <input type="radio"> y <label> como HERMANOS dentro
 * del <li> (no el input anidado dentro del label) — por eso el flex y el
 * centrado van en .wc_payment_method (el <li>, el padre real de ambos),
 * no solo en el label. Poner el flex únicamente en el label deja al radio
 * fuera de ese contexto, cayendo al flujo normal del bloque (pegado
 * arriba a la izquierda) — bug reportado 2026-08-13.
 */
.wc_payment_method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding-left: var(--space-lg);
  /*
   * Fondo blanco sólido por defecto — pensado para el caso general (fondo
   * claro de la página, ej. order-pay). Dentro del checkout principal,
   * la sección de pago tiene su propio fondo oscuro y lo sobrescribe más
   * abajo (.rda-checkout__section--payment .wc_payment_method).
   */
  background: var(--color-bg-card, #ffffff);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.wc_payment_method.payment_method_selected,
.wc_payment_method:has(input:checked) {
  border-color: rgba(201, 168, 76, 0.6);
  background: rgba(201, 168, 76, 0.08);
}

/*
 * Dentro del checkout principal (fondo navy oscuro de esta sección), el
 * blanco sólido de arriba se ve fuera de lugar — ahí sí queremos el
 * tinte translúcido sutil original.
 */
.rda-checkout__section--payment .wc_payment_method {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(201, 168, 76, 0.15);
}
.rda-checkout__section--payment .wc_payment_method.payment_method_selected,
.rda-checkout__section--payment .wc_payment_method:has(input:checked) {
  border-color: rgba(201, 168, 76, 0.5);
  background: rgba(201, 168, 76, 0.06);
}

/* Radio button personalizado — hermano del label, sin margen propio (el
   gap del padre ya lo separa del label) */
.wc_payment_method input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--color-gold-base);
  cursor: pointer;
}

/*
 * min-width:0 es la parte que importa acá: sin esto, un flex item nunca
 * se encoge más allá del ancho de su contenido (radio + texto + ícono del
 * gateway), así que en vez de dejar que el TEXTO haga salto de línea
 * dentro del label, el label ENTERO saltaba a una segunda fila — dejando
 * el radio solo arriba. Bug reportado 2026-08-14 ("Tarjeta de crédito o
 * débito" se iba a la segunda fila).
 */
.wc_payment_method > label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px var(--space-sm);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-medium);
  /*
   * Texto oscuro por defecto (fondo claro, ej. order-pay) — antes esto
   * era crema fijo con !important, pensado únicamente para la sección de
   * pago del checkout principal (fondo navy oscuro). Fuera de ese
   * contexto (cualquier otra pantalla con fondo claro donde WooCommerce
   * dibuje esta misma lista sin pasar por la plantilla del checkout,
   * como order-pay) el texto crema quedaba casi invisible sobre fondo
   * claro — bug reportado 2026-08-23. El crema se restringe más abajo a
   * .rda-checkout__section--payment, que es la única sección con fondo
   * oscuro.
   */
  color: var(--color-ink-primary) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.rda-checkout__section--payment .wc_payment_method > label {
  color: var(--color-cream-base) !important;
}

.wc_payment_method > label img {
  height: 24px;
  width: auto;
  max-width: 40px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
}

@media (max-width: 400px) {
  .wc_payment_method > label {
    font-size: 13px;
  }

  /* En pantallas muy angostas el ícono del gateway es lo primero que
     sobra — mejor perderlo que arriesgar que el nombre del método de
     pago vuelva a partirse en dos líneas. */
  .wc_payment_method > label img {
    display: none;
  }
}

/*
 * Payment box (formulario del gateway) — flex-basis lo baja a su propia
 * fila completa, ya que es hermano flex de input+label.
 *
 * min-width:0 arregla el formulario de PSE (plugin de Mercado Pago)
 * recortado en mobile: sin esto, un flex item con flex-shrink:0 nunca se
 * encoge por debajo del ancho de SU contenido — si el widget de PSE trae
 * elementos internos que no reflowean solos, el .payment_box se
 * ensanchaba más allá de lo pedido y, como el <li> padre tiene
 * overflow:hidden, esa parte de más quedaba recortada. overflow-x:auto
 * queda como red de seguridad para cualquier contenido que de verdad no
 * quepa ni encogiéndose.
 *
 * margin-left negativo + flex-basis ampliado: el <li> padre tiene
 * padding-left (separa el radio del borde de la tarjeta, se queda igual)
 * que le restaba ancho útil al formulario. Esto cancela SOLO ese padding
 * heredado para el payment_box (no toca el padding-top ni el border del
 * <li>) y lo compensa con su propio padding simétrico y más chico, para
 * que el formulario quede más ancho y centrado parejo a los dos lados.
 * Va en flex-basis y no en width porque en un flex item, si hay
 * flex-basis explícito, gana sobre width.
 */
.payment_box {
  flex: 1 0 calc(100% + var(--space-lg));
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  margin-left: calc(-1 * var(--space-lg));
  padding: var(--space-md) var(--space-sm) var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(245, 237, 216, 0.7);
  line-height: var(--leading-relaxed);
}

.payment_box p { margin: 0 0 var(--space-sm); }
.payment_box p:last-child { margin: 0; }

/* ── Botón Confirmar y Pagar ── */

.place-order {
  margin: 0;
  padding: 0;
}

#place_order,
.place-order button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 18px var(--space-xl);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-navy-base);
  background: var(--color-gold-base);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  margin-bottom: var(--space-md);
}

#place_order:hover,
.place-order button[type="submit"]:hover {
  background: var(--color-gold-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201, 168, 76, 0.4);
}

#place_order:focus-visible,
.place-order button[type="submit"]:focus-visible {
  outline: 2px solid var(--color-gold-soft);
  outline-offset: 3px;
}

/* Aviso de aceptación implícita (reemplaza el checkbox de T&C) */
.rda-checkout__terms-notice {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(245, 237, 216, 0.45);
  text-align: center;
  margin: var(--space-xs) 0 0;
  line-height: 1.6;
}

.rda-checkout__terms-notice a {
  color: rgba(201, 168, 76, 0.75);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-out);
}

.rda-checkout__terms-notice a:hover {
  color: var(--color-gold-base);
}

/* Aviso de privacidad bajo el botón — solo dentro del panel de pago (fondo navy) */
.rda-checkout__section--payment .woocommerce-privacy-policy-text {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(245, 237, 216, 0.4);
  text-align: center;
  margin: 0;
  line-height: 1.6;
}

.rda-checkout__section--payment .woocommerce-privacy-policy-text a {
  color: rgba(201, 168, 76, 0.8);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Aviso de privacidad en contexto de fondo claro (Mi Cuenta, registro) */
.woocommerce-privacy-policy-text {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-ink-muted);
  margin: 0;
  line-height: 1.6;
}

.woocommerce-privacy-policy-text a {
  color: var(--color-gold-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══ Columna resumen (sticky) ═════════════════════════════════════════════════ */

.rda-checkout__review-col {
  /* stretch (default): ocupa toda la altura del form-col para que el panel pueda viajar */
}

.rda-checkout__review-panel {
  position: sticky;
  top: var(--space-xl); /* 32px del tope del viewport al hacer scroll */
  background: #fff;
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow:
    0 4px 32px rgba(10, 23, 51, 0.07),
    0 1px 4px rgba(10, 23, 51, 0.04);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.rda-checkout__review-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-xl);
  right: var(--space-xl);
  height: 2px;
  background: linear-gradient(to right, transparent, var(--color-gold-base), transparent);
  border-radius: 0 0 2px 2px;
}

.rda-checkout__review-header { margin-bottom: 0; }

.rda-checkout__review-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-regular);
  color: var(--color-ink-primary);
  margin: 0;
}

/* ── Items del resumen ── */

.rda-checkout__review-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.rda-checkout__review-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border-subtle);
}

.rda-checkout__review-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.rda-checkout__review-item-img {
  width: 52px;
  height: 66px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-cream-base);
  flex-shrink: 0;
}

.rda-checkout__review-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rda-checkout__review-item-info { flex: 1; min-width: 0; }

.rda-checkout__review-item-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--color-ink-primary);
  margin: 0 0 2px;
  line-height: var(--leading-snug);
}

.rda-checkout__review-item-meta {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-ink-muted);
  margin: 0;
}

.rda-checkout__review-item-price {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--color-gold-deep);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Tabla de totales WooCommerce ── */

.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 13px;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}

.woocommerce-checkout-review-order-table th {
  font-weight: var(--weight-semibold);
  color: var(--color-ink-secondary);
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.woocommerce-checkout-review-order-table td { text-align: right; }

/* Products */
.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .shipping th,
.woocommerce-checkout-review-order-table .shipping td {
  color: var(--color-ink-secondary);
  font-size: 13px;
  font-weight: var(--weight-regular);
  text-transform: none;
  letter-spacing: normal;
}

/* Total final */
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  border-bottom: none;
  padding-top: var(--space-md);
  font-size: 15px;
}

.woocommerce-checkout-review-order-table .order-total th {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--weight-regular);
  color: var(--color-ink-primary);
  text-transform: none;
  letter-spacing: normal;
}

.woocommerce-checkout-review-order-table .order-total td {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--weight-regular);
  color: var(--color-gold-deep);
}

/* ── Trust y promesa de marca ── */

.rda-checkout__review-trust {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-subtle);
}

.rda-checkout__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-ink-muted);
}

.rda-checkout__trust-item svg { color: var(--color-gold-base); flex-shrink: 0; }

.rda-checkout__brand-promise {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-gold-whisper);
  border-radius: var(--radius-md);
  border: 1px solid rgba(201, 168, 76, 0.2);
}

.rda-checkout__brand-promise p {
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  color: var(--color-gold-deep);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.rda-checkout__brand-promise svg { color: var(--color-gold-base); flex-shrink: 0; margin-top: 2px; }

/* ══ Controles de cantidad en el resumen ══════════════════════════════════════ */

.rda-checkout__review-qty-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.rda-checkout__qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 16px;
  line-height: 1;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  color: var(--color-ink-secondary);
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  padding: 0;
}

.rda-checkout__qty-btn:hover {
  background: var(--color-gold-whisper);
  border-color: var(--color-gold-base);
  color: var(--color-gold-deep);
}

.rda-checkout__qty-val {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--color-ink-primary);
  min-width: 18px;
  text-align: center;
}

/* Feedback visual durante actualización AJAX */
.rda-checkout__order-review-wrap.is-updating {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}

/* Envío pendiente */
.rda-shipping-pending {
  font-size: 12px;
  color: var(--color-ink-muted);
  font-style: italic;
}

/* ══ Select2 — Dropdown de País / Departamento ═════════════════════════════════
   WooCommerce aplica selectWoo (Select2) a los campos de país y, a veces,
   departamento. Estos estilos sincronizan ese widget con el diseño del tema
   en TODOS los formularios de dirección — no solo el checkout: también
   "Mis direcciones" en la cuenta (.rda-address-form), donde antes se veía
   sin ningún estilo (WooCommerce no aporta el suyo porque el tema lo
   dequeuea globalmente en woocommerce-config.php).
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-checkout .select2-container,
.rda-address-form .select2-container {
  width: 100% !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single,
.rda-address-form .select2-container--default .select2-selection--single {
  height: auto;
  padding: 12px var(--space-md);
  padding-right: 40px;
  font-family: var(--font-body);
  font-size: 14px;
  background-color: var(--color-cream-light);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
.rda-address-form .select2-container--default.select2-container--open .select2-selection--single,
.rda-address-form .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--color-gold-base);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.1);
  background-color: #fff;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered,
.rda-address-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-ink-primary);
  padding: 0;
  line-height: inherit;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder,
.rda-address-form .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--color-ink-muted);
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow,
.rda-address-form .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: var(--space-md);
  width: 20px;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b,
.rda-address-form .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: none;
  width: 12px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8FAA' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* Dropdown abierto — select2 lo agrega al final del <body>, por eso basta con
   la clase que WooCommerce pone en <body> (no hace falta anidar en el form) */
.woocommerce-checkout .select2-dropdown,
.woocommerce-account .select2-dropdown {
  border: 1px solid var(--color-gold-base);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 24px rgba(10, 23, 51, 0.12);
  background: #fff;
  font-family: var(--font-body);
}

.woocommerce-checkout .select2-search--dropdown,
.woocommerce-account .select2-search--dropdown {
  padding: var(--space-sm);
}

.woocommerce-checkout .select2-search--dropdown .select2-search__field,
.woocommerce-account .select2-search--dropdown .select2-search__field {
  padding: 8px var(--space-md);
  font-family: var(--font-body);
  font-size: 13px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  outline: none;
}

.woocommerce-checkout .select2-search--dropdown .select2-search__field:focus,
.woocommerce-account .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--color-gold-base);
}

.woocommerce-checkout .select2-results__option,
.woocommerce-account .select2-results__option {
  padding: 9px var(--space-md);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-ink-primary);
}

.woocommerce-checkout .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.woocommerce-account .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--color-gold-whisper);
  color: var(--color-gold-deep);
}

.woocommerce-checkout .select2-container--default .select2-results__option[aria-selected="true"],
.woocommerce-account .select2-container--default .select2-results__option[aria-selected="true"] {
  background: rgba(201, 168, 76, 0.08);
  color: var(--color-gold-deep);
}

/* ══ Notices del checkout ═════════════════════════════════════════════════════ */

.woocommerce-checkout .woocommerce-NoticeGroup,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
  margin-bottom: var(--space-lg);
}

/* ══ Returning customer / coupon panels ═══════════════════════════════════════ */

.woocommerce-checkout .woocommerce-info {
  background: rgba(90, 112, 144, 0.06);
  border: 1px solid rgba(90, 112, 144, 0.15);
  border-radius: var(--radius-md);
  color: var(--color-ink-secondary);
  padding: var(--space-md) var(--space-lg);
  font-size: 13px;
  margin-bottom: var(--space-md);
}

.woocommerce-checkout .woocommerce-info a {
  color: var(--color-gold-deep);
  text-decoration: underline;
}

/* Panel que se despliega para login/cupón desde el checkout */
.woocommerce-checkout-login-form,
.woocommerce-checkout-coupon {
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* ══ Campo país oculto (siempre Colombia) ════════════════════════════════════ */

.woocommerce-checkout .rda-field-hidden {
  display: none !important;
}

/* ══ Responsive ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  .rda-checkout__layout {
    grid-template-columns: 1fr;
  }

  .rda-checkout__review-col {
    order: -1; /* el resumen aparece arriba del formulario en mobile */
  }

  .rda-checkout__review-panel {
    position: relative; /* cancela el sticky en mobile */
    top: auto;
  }

  .woocommerce-checkout .col2-set {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .rda-checkout {
    padding-block: var(--space-xl) var(--space-3xl);
  }

  .rda-checkout__section {
    padding: var(--space-lg);
  }

  .rda-checkout__section::before {
    left: var(--space-lg);
    right: var(--space-lg);
  }

  .rda-steps__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #place_order { transition: none; }
}