/* ============================================================
   Sara & Dánae · Carrito y pago
   ============================================================
   Reescrito el 2-sep-2026 después de que Fer los viera: estaban con el CSS
   de fábrica de WooCommerce y se veían como tal. Aquí hay estructura, no
   maquillaje. No se sobrescribe ninguna plantilla: por ahí pasa la compra
   que el arnés verificó.
   ============================================================ */

/* ── Título de la página ─────────────────────────────────────────────────── */
.woocommerce-cart .entry-title, .woocommerce-checkout .entry-title,
.woocommerce-cart h1.wp-block-post-title, .woocommerce-checkout h1.wp-block-post-title {
  font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .4em;
}

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  background: var(--sd-cream) !important;
  border: 1px solid var(--sd-line) !important;
  /* Woo mete una franja de color arriba y un anillo azul; los dos fuera. */
  border-top: 1px solid var(--sd-line) !important;
  outline: 0 !important; box-shadow: none !important;
  border-radius: 16px !important;
  color: var(--sd-brown) !important;
  padding: 1rem 1.25rem 1rem 3rem !important;
  font-family: 'Albert Sans', system-ui, sans-serif;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
  color: var(--sd-teal) !important; top: 1.15rem !important; left: 1.15rem !important;
}
.woocommerce-error { background: var(--sd-rose-soft) !important; border-color: #F3C1DA !important; }
.woocommerce-error::before { color: var(--sd-rose) !important; }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.woocommerce .button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #place_order, .woocommerce a.button {
  background: var(--sd-teal) !important; color: #fff !important;
  font-family: 'Albert Sans', system-ui, sans-serif; font-weight: 600; font-size: .95rem;
  border-radius: 52px; padding: .85rem 1.7rem; border: 2px solid transparent;
  box-shadow: 0 8px 20px -10px rgba(15,139,141,.6);
  transition: background .2s ease, transform .15s ease; text-transform: none; line-height: 1.2;
}
.woocommerce .button:hover, .woocommerce button.button:hover,
.woocommerce #place_order:hover, .woocommerce a.button:hover {
  background: var(--sd-teal-dark) !important; transform: translateY(-1px);
}
.woocommerce a.button.wc-backward,
.woocommerce .cart .button[name="update_cart"],
.woocommerce .button[name="apply_coupon"] {
  background: #fff !important; color: var(--sd-teal) !important;
  border-color: var(--sd-line); box-shadow: none;
}
.woocommerce .button[name="update_cart"]:disabled { opacity: .45; }

/* ── EL CARRITO ──────────────────────────────────────────────────────────── */
.woocommerce-cart-form { margin-bottom: 2rem; }

/* La tabla deja de ser tabla: cada curso es una tarjeta */
.woocommerce-cart table.shop_table.cart { border: 0 !important; border-collapse: separate; border-spacing: 0; }
.woocommerce-cart table.cart thead { display: none; }               /* los encabezados no aportan con 1-2 cursos */
.woocommerce-cart table.cart tbody tr.cart_item {
  display: grid;
  grid-template-columns: 86px 1fr auto auto 38px;
  align-items: center; gap: 1.1rem;
  background: #fff; border: 1px solid var(--sd-line); border-radius: 18px;
  padding: 1rem 1.2rem; margin-bottom: .85rem;
}
.woocommerce-cart table.cart tbody tr.cart_item td { border: 0 !important; padding: 0 !important; }
/* El orden del DOM en Woo es: quitar · foto · nombre · precio · cantidad · subtotal.
   Se reordena para que la × quede AL FINAL del renglón, no colgando abajo. */
.woocommerce-cart td.product-thumbnail { order: 1; }
.woocommerce-cart td.product-name      { order: 2; min-width: 0; }
.woocommerce-cart td.product-price     { display: none; }   /* se repite con el subtotal */
.woocommerce-cart td.product-quantity  { order: 3; }
.woocommerce-cart td.product-subtotal  { order: 4; font-weight: 800; color: var(--sd-rose); font-size: 1.05rem; white-space: nowrap; }
.woocommerce-cart td.product-remove    { order: 5; justify-self: end; }

.woocommerce-cart td.product-thumbnail img { width: 86px; height: 86px; object-fit: cover; border-radius: 12px; background: var(--sd-cream); }
.woocommerce-cart td.product-name a { font-weight: 700; font-size: 1.02rem; color: var(--sd-ink); text-decoration: none; }
/* Con el dedo, el nombre del curso también es un enlace: 44px de alto. */
@media (pointer: coarse) {
  .woocommerce-cart td.product-name a { display: flex; align-items: center; min-height: 44px; }
}
.woocommerce-cart td.product-name a:hover { color: var(--sd-rose); }
/* 🚨 La duración YA NO se escribe aquí: el CSS no puede preguntarle a PHP cuántos
   días dura, así que si ellas la cambiaban, el carrito seguía diciendo «1 año».
   Ahora la pone WooCommerce por `woocommerce_get_item_data` (ver functions.php). */
.woocommerce-cart td.product-name .sd-vigencia { display: block; font-size: .8rem; color: var(--sd-muted); margin-top: .25rem; }
.woocommerce-cart td.product-name .variation,
.woocommerce-cart td.product-name dl.variation { margin: .25rem 0 0; font-size: .8rem; color: var(--sd-muted); }
.woocommerce-cart td.product-name dl.variation dt { display: none; }
.woocommerce-cart td.product-name dl.variation dd { margin: 0; }
.woocommerce-cart td.product-name dl.variation dd p { margin: 0; }
.woocommerce-cart td.product-quantity .quantity input { width: 62px; border: 1.5px solid var(--sd-line); border-radius: 12px; padding: .5rem; text-align: center; }
.woocommerce-cart a.remove {
  color: var(--sd-muted) !important; font-size: 1.4rem; background: none !important;
  width: 34px; height: 34px; line-height: 32px;
}
/* Con el dedo, la × tiene que medir 44px (lección de Dielec: se mide el PUNTERO,
   no el ancho de pantalla). */
@media (pointer: coarse) {
  .woocommerce-cart a.remove { width: 44px; height: 44px; line-height: 42px; }
}
.woocommerce-cart a.remove:hover { color: var(--sd-rose) !important; background: var(--sd-rose-soft) !important; }

/* 🚨 En teléfono el renglón de 5 columnas medía 410px en una pantalla de 375.
   Aquí se dobla: foto + nombre arriba, cantidad y precio abajo. */
@media (max-width: 640px) {
  /* 🚨 Woo trae su propio modo móvil (shop_table_responsive): esconde la foto,
     alinea a la derecha y mete etiquetas «Producto:/Precio:» con ::before.
     Encima de mi tarjeta se veía revuelto. Aquí se apaga completo. */
  .woocommerce-cart table.cart.shop_table_responsive td::before { display: none !important; content: none !important; }
  .woocommerce-cart table.cart.shop_table_responsive td { text-align: left !important; }
  .woocommerce-cart table.cart.shop_table_responsive td.product-thumbnail { display: block !important; }
  .woocommerce-cart table.cart.shop_table_responsive td.product-price { display: none !important; }
  .woocommerce-cart table.cart tbody tr.cart_item {
    grid-template-columns: 64px minmax(0, 1fr) 44px;
    gap: .5rem .8rem; padding: .9rem;
  }
  .woocommerce-cart td.product-thumbnail { grid-column: 1; grid-row: 1; }
  .woocommerce-cart td.product-name      { grid-column: 2; grid-row: 1; }
  .woocommerce-cart td.product-remove    { grid-column: 3; grid-row: 1; align-self: start; }
  .woocommerce-cart td.product-quantity  { grid-column: 1; grid-row: 2; }
  .woocommerce-cart td.product-subtotal  { grid-column: 2 / 4; grid-row: 2; justify-self: end; }
  .woocommerce-cart td.product-thumbnail img { width: 64px; height: 64px; }
  .woocommerce-cart td.product-name a { font-size: .95rem; }
}

/* El cupón, en su propia fila y sin encimarse */
.woocommerce-cart tr.actions { display: block; background: none; padding: 0 !important; border: 0 !important; }
.woocommerce-cart tr.actions td { display: block; padding: 0 !important; border: 0 !important; }
.woocommerce-cart .coupon {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  background: var(--sd-cream); border-radius: 16px; padding: .9rem 1rem; margin-bottom: 1rem;
}
.woocommerce-cart .coupon label { display: none; }
.woocommerce-cart .coupon button[name="apply_coupon"] { white-space: nowrap; }
.woocommerce-cart .coupon input#coupon_code {
  flex: 1 1 190px; min-width: 0; width: auto !important;
  border: 1.5px solid var(--sd-line); border-radius: 52px; padding: .75rem 1.1rem; background: #fff;
}
.woocommerce-cart tr.actions > td > .button[name="update_cart"] { float: none !important; }

/* ── El resumen sube: el botón de pagar NO vive hasta abajo ───────────────
   Pedido de Fer (3-sep). Antes había que bajar hasta el final para encontrar
   «Finalizar compra». Ahora en escritorio el resumen va a la derecha, pegado
   arriba, y en teléfono el botón se queda fijo abajo de la pantalla. */
@media (min-width: 1000px) {
  .woocommerce-cart .woocommerce {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2.5rem;
    align-items: start;
  }
  .woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  .woocommerce-cart .woocommerce-cart-form { grid-column: 1; margin-bottom: 0; }
  .woocommerce-cart .cart-collaterals { grid-column: 2; position: sticky; top: 1.5rem; }
  .woocommerce-cart .cart-collaterals .cart_totals { max-width: none; }
}
@media (min-width: 1180px) { .woocommerce-cart main { max-width: 1120px !important; } }

/* En teléfono: barra fija con el botón, para no bajar hasta el final. */
@media (max-width: 999px) {
  .woocommerce-cart .wc-proceed-to-checkout {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
    border-top: 1px solid var(--sd-line);
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
  }
  /* El pie no se esconde detrás de la barra. */
  .woocommerce-cart footer { padding-bottom: 5.5rem; }
}

/* Los totales, en tarjeta y del ancho correcto */
.cart-collaterals { width: 100%; }
.cart-collaterals .cart_totals { width: 100% !important; max-width: 420px; margin-left: auto; float: none !important; }
.cart_totals table.shop_table { margin-bottom: 0 !important; }
.cart_totals h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: .7rem; }
.cart_totals table.shop_table {
  border: 1px solid var(--sd-line) !important; border-radius: 18px; overflow: hidden; background: #fff;
}
.cart_totals table.shop_table th, .cart_totals table.shop_table td {
  border: 0 !important; border-bottom: 1px solid var(--sd-line) !important; padding: .95rem 1.2rem !important; background: none !important;
}
.cart_totals table.shop_table tr:last-child th, .cart_totals table.shop_table tr:last-child td { border-bottom: 0 !important; }
.cart_totals .order-total th, .cart_totals .order-total td { background: var(--sd-cream) !important; }
.cart_totals .order-total .amount { color: var(--sd-rose); font-weight: 800; font-size: 1.25rem; }
.wc-proceed-to-checkout { padding-top: 1rem !important; }
.wc-proceed-to-checkout a.checkout-button { display: block !important; text-align: center; font-size: 1.05rem !important; padding: 1.05rem 1.5rem !important; }

/* ── EL PAGO ─────────────────────────────────────────────────────────────── */
/* El ancho de lectura del tema deja el pago apretado; aquí se ensancha. */
/* El <main> del tema es max-w-3xl (768px), ancho de lectura. El pago necesita
   dos columnas de verdad, así que en escritorio se ensancha el lienzo. */
@media (min-width: 1180px) {
  .woocommerce-checkout main, .woocommerce-cart main { max-width: 1120px !important; }
}
/* Dos columnas: los datos a la izquierda, el resumen pegado a la derecha */
@media (min-width: 1000px) {
  .woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 3rem; align-items: start; }
  .woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  .woocommerce-checkout form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
  .woocommerce-checkout form.checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 1.5rem; }
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100% !important; float: none !important; }
.woocommerce-billing-fields h3, #order_review_heading {
  font-size: 1.25rem; font-weight: 800; margin: 0 0 1rem; color: var(--sd-ink);
}

/* Woo trae float + width:47% en .form-row-first/.form-row-last; dentro del grid
   eso encogía los campos a un cuarto de ancho. Aquí manda el grid. */
.woocommerce form .form-row { padding: 0; margin: 0 0 1.1rem; width: auto !important; float: none !important; }
.woocommerce form .form-row label { font-weight: 600; font-size: .9rem; color: var(--sd-ink); margin-bottom: .35rem; display: block; }
.woocommerce form .form-row .required { color: var(--sd-rose); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea, .woocommerce form .form-row select {
  width: 100%; border: 1.5px solid var(--sd-line); border-radius: 14px;
  padding: .85rem 1.05rem; font-family: 'Albert Sans', system-ui, sans-serif;
  font-size: .97rem; background: #fff; color: var(--sd-ink);
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus {
  outline: none; border-color: var(--sd-teal); box-shadow: 0 0 0 3px var(--sd-teal-tint);
}
.woocommerce form .form-row input.input-text::placeholder { color: #b9b2a8; }

/* 🚨 La ayuda del campo: WooCommerce la pinta como un GLOBO AZUL flotante.
   Con el globo se veía horrible; aquí es texto de apoyo, siempre visible. */
.woocommerce form .form-row .description {
  display: block !important; position: static !important;
  background: none !important; background-color: transparent !important;
  color: var(--sd-muted) !important; font-size: .82rem; line-height: 1.45;
  padding: .4rem 0 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important;
}
.woocommerce form .form-row .description::before,
.woocommerce form .form-row .description::after { display: none !important; content: none !important; }

/* Nombre y apellido, uno junto al otro */
@media (min-width: 560px) {
  .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  #billing_first_name_field, #billing_last_name_field { grid-column: span 1; }
  #billing_email_field, #billing_email_confirm_field, #billing_whatsapp_field, #account_password_field { grid-column: 1 / -1; }
}

/* El resumen del pedido */
#order_review { background: #fff; border: 1px solid var(--sd-line); border-radius: 20px; padding: 1.4rem; }
.woocommerce-checkout-review-order-table { border: 0 !important; margin: 0 !important; }
.woocommerce-checkout-review-order-table thead th { background: none !important; border: 0 !important; border-bottom: 1px solid var(--sd-line) !important; padding: 0 0 .7rem !important; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sd-muted) !important; }
.woocommerce-checkout-review-order-table tbody td, .woocommerce-checkout-review-order-table tfoot th, .woocommerce-checkout-review-order-table tfoot td {
  border: 0 !important; border-bottom: 1px solid var(--sd-line) !important; padding: .85rem 0 !important; background: none !important;
}
.woocommerce-checkout-review-order-table tfoot tr:last-child th, .woocommerce-checkout-review-order-table tfoot tr:last-child td { border-bottom: 0 !important; }
.woocommerce-checkout-review-order-table .order-total td .amount { color: var(--sd-rose); font-weight: 800; font-size: 1.3rem; }

/* Formas de pago */
.woocommerce-checkout #payment { background: none !important; border-radius: 0 !important; }
.woocommerce-checkout #payment ul.payment_methods { border: 0 !important; border-top: 1px solid var(--sd-line) !important; padding: 1.1rem 0 0 !important; margin: .5rem 0 0 !important; }
.woocommerce-checkout #payment ul.payment_methods li { margin-bottom: .5rem; }
.woocommerce-checkout #payment div.payment_box { background: var(--sd-cream) !important; border-radius: 14px; color: var(--sd-brown); font-size: .87rem; margin-top: .6rem; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--sd-cream) !important; }
.woocommerce-checkout #payment .place-order { padding: 1.1rem 0 0 !important; }
.woocommerce-checkout #place_order { width: 100%; font-size: 1.05rem !important; padding: 1.05rem 1.5rem !important; }
.woocommerce-privacy-policy-text { font-size: .8rem; color: var(--sd-muted); line-height: 1.5; }
.woocommerce-privacy-policy-text a { color: var(--sd-teal); }

/* Un curso no se envía: si Woo pinta la fila de envío vacía, fuera */
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals { display: none; }