/* ==========================================================================
   WC Bloques — Diseño limpio (Cart & Checkout Blocks)
   Bordes mínimos + títulos con línea + botones personalizados
   ========================================================================== */

:root {
  --wc-font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  --wc-text: #1f2937;
  --wc-muted: #6b7280;
  --wc-bg: #ffffff;
  --wc-border: #e5e7eb;
  --wc-accent: #2563eb;
  --wc-accent-contrast: #ffffff;
  --wc-danger: #dc2626;   /* rojo eliminar */
  --wc-success: #04B093;  /* verde finalizar compra */
  --wc-radius: 10px;
  --wc-space: 16px;
  --wc-maxw: 960px;
}

/* ---------- Layout base ---------- */
.entry-content,
.wp-block-group,
.woocommerce {
  max-width: var(--wc-maxw);
  margin: 24px auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.wc-block-cart,
.wc-block-checkout {
  font-family: var(--wc-font);
  color: var(--wc-text);
  line-height: 1.5;
}

/* ---------- Títulos con línea inferior ---------- */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-cart .wc-block-cart__title {
  font-weight: 700;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--wc-border);
}

/* ---------- Bordes mínimos / paneles limpios ---------- */
.wc-block-components-checkout-step,
.wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary,
.wc-block-cart .wc-block-cart-items,
.wc-block-cart .wc-block-cart__submit-container {
  background: var(--wc-bg);
  border: none;
  box-shadow: none;
}

.wc-block-components-checkout-step + .wc-block-components-checkout-step {
  margin-top: var(--wc-space);
}

.wc-block-components-panel__content,
.wc-block-components-checkout-step,
.wc-block-cart .wc-block-cart-items,
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary {
  padding: var(--wc-space);
}

/* ---------- Inputs / selects ---------- */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-country-input select,
.wc-block-components-state-input select,
.wc-block-components-phone-input input,
.wc-block-components-email-input input,
.wc-block-components-postcode-input input,
.wc-block-components-address-input input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-radius);
  background: #fff;
  line-height: 1.3;
  box-sizing: border-box;
}

.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-country-input select:focus,
.wc-block-components-state-input select:focus {
  border-color: var(--wc-accent);
  outline: 2px solid var(--wc-accent);
  outline-offset: 1px;
}

/* Labels / ayudas */
.wc-block-components-address-form__heading,
.wc-block-components-text-input label,
.wc-block-components-select label {
  color: var(--wc-muted);
  font-weight: 600;
}

/* ---------- Totales / resumen ---------- */
.wc-block-components-totals-wrapper {
  border-top: 2px solid var(--wc-border);
  margin-top: 1.5rem;
  padding-top: 1rem;
}
.wc-block-components-totals-wrapper .wc-block-components-totals-item__label {
  color: var(--wc-muted);
}

/* ---------- Línea de productos ---------- */
.wc-block-cart-items__header,
.wc-block-cart-items__row {
  border-bottom: 1px solid var(--wc-border);
}
.wc-block-cart-items__row:last-child { border-bottom: 0; }

/* Cantidad */
.wc-block-components-quantity-selector input {
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-radius);
  padding: 8px 10px;
}

/* Cupones */
.wc-block-components-totals-coupon .wc-block-components-text-input input {
  border-radius: var(--wc-radius);
}

/* ---------- Avisos ---------- */
.wc-block-components-notice-banner {
  border-radius: var(--wc-radius);
  border: none;
  box-shadow: 0 0 0 1px var(--wc-border);
}

/* ==========================================================================
   Botones
   ========================================================================== */

/* Base */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  border-radius: var(--wc-radius);
  padding: 12px 16px;
  font-weight: 600;
  border: none;
  transition: background 0.2s ease-in-out, filter 0.2s ease-in-out;
}

/* Finalizar compra (verde con texto blanco) */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--wc-success) !important;
  color: #fff !important;
  border: none !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: #039e84 !important;
}

/* Eliminar artículo (rojo con icono nativo) — cubre variantes a/button */
.wc-block-cart-item__remove-link,
.wc-block-cart-items__remove-link,
.wc-block-components-button.is-destructive,
.wc-block-cart-item__remove-button button,
.wc-block-cart-item__remove-button a {
  appearance: none;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  background: var(--wc-danger) !important;
  color: #fff !important;
  border: none !important;
  text-decoration: none !important;
  line-height: 1;
  visibility: visible !important;
  opacity: 1 !important;
}

.wc-block-cart-item__remove-link:hover,
.wc-block-cart-items__remove-link:hover,
.wc-block-components-button.is-destructive:hover,
.wc-block-cart-item__remove-button button:hover,
.wc-block-cart-item__remove-button a:hover {
  background: #b91c1c !important;
  color: #fff !important;
}

/* Asegura que el SVG integrado herede color (icono nativo Woo) */
.wc-block-cart-item__remove-link svg,
.wc-block-cart-items__remove-link svg,
.wc-block-components-button.is-destructive svg,
.wc-block-cart-item__remove-button button svg,
.wc-block-cart-item__remove-button a svg {
  width: 1em;
  height: 1em;
  fill: currentColor !important;
  flex: 0 0 auto;
}

/* Deshabilitados */
button[disabled],
.wc-block-components-button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- Forzar ancho limpio si el tema estrecha ---------- */
.entry-content > .wp-block-group.alignwide,
.entry-content > .wp-block-group.alignfull {
  max-width: var(--wc-maxw);
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- Responsivo ---------- */
@media (max-width: 768px) {
  .entry-content,
  .wp-block-group { padding: 0 12px; }
  .wc-block-components-checkout-step { padding: 12px; }
}

/* ---------- Accesibilidad ---------- */
:where(.wc-block-cart, .wc-block-checkout) a:focus,
:where(.wc-block-cart, .wc-block-checkout) button:focus,
:where(.wc-block-cart, .wc-block-checkout) input:focus,
:where(.wc-block-cart, .wc-block-checkout) select:focus {
  outline: 2px solid var(--wc-accent);
  outline-offset: 2px;
}

/* ---------- Dark mode opcional ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --wc-text: #e5e7eb;
    --wc-muted: #9ca3af;
    --wc-bg: #0b0f14;
    --wc-border: #1f2937;
    --wc-accent: #3b82f6;
    --wc-accent-contrast: #0b0f14;
  }
  .wc-block-components-button.is-secondary {
    background: transparent;
    color: var(--wc-text);
    border-color: var(--wc-border);
  }
}

/* ---------- Reduced motion opcional ---------- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; transition: none !important; }
}

/* ==========================================================================
   Iconos visibles en botones (usando pseudo-elementos)
   ========================================================================== */

/* 🗑️ Ícono para "Eliminar artículo" */
.wc-block-cart-item__remove-link::before,
.wc-block-cart-items__remove-link::before,
.wc-block-cart-item__remove-button button::before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin-right: 6px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  vertical-align: middle;
  /* SVG nativo codificado en base64 (icono de eliminar de Woo) */
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 7H18M9 7V5C9 4.44772 9.44772 4 10 4H14C14.5523 4 15 4.44772 15 5V7M19 7L18.2991 19.1422C18.2613 19.7766 17.7328 20.2727 17.0972 20.2727H6.90282C6.26716 20.2727 5.73872 19.7766 5.70086 19.1422L5 7H19Z' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Hover: mantener ícono blanco */
.wc-block-cart-item__remove-link:hover::before,
.wc-block-cart-items__remove-link:hover::before,
.wc-block-cart-item__remove-button button:hover::before {
  filter: brightness(1);
}

/* === Icono de tarjeta para "Finalizar compra" === */
.wc-block-cart__submit-button::before,
.wc-block-components-checkout-place-order-button::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: 8px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* SVG tarjeta de crédito (trazo blanco) */
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' ry='2' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M3 9H21' stroke='%23ffffff' stroke-width='2'/%3E%3Crect x='7' y='13' width='6' height='2' fill='%23ffffff'/%3E%3C/svg%3E") !important;
}

/* ===== Quitar aire entre migas y el inicio del contenido (Cart/Checkout) ===== */

/* 1) Compactar las migas (cualquier variante de breadcrumb) */
:where(body.woocommerce-cart, body.woocommerce-checkout)
  :is([class*="breadcrumb"], .woocommerce-breadcrumb, .yoast-breadcrumbs, .rank-math-breadcrumb, .wp-block-woocommerce-breadcrumbs) {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}

/* 2) Anular padding/margen que el tema añade justo debajo de las migas */
:where(body.woocommerce-cart, body.woocommerce-checkout)
  :is(.page-header, .entry-header, .site-content, .content-area, .site-main, .container, .wrap, .container-fluid) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 3) El contenido empieza “a ras” (primer bloque sin margen) */
:where(body.woocommerce-cart, body.woocommerce-checkout) .entry-content,
:where(body.woocommerce-cart, body.woocommerce-checkout) .entry-content > *:first-child,
:where(body.woocommerce-cart, body.woocommerce-checkout) .wp-block-group:first-child,
:where(body.woocommerce-cart, body.woocommerce-checkout) .wp-block-columns:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 4) Bloques principales sin separación superior extra */
:where(body.woocommerce-cart, body.woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) {
  margin-top: 0 !important;
}

/* 5) Si el primer elemento es un spacer, lo anulamos */
:where(body.woocommerce-cart, body.woocommerce-checkout) .wp-block-spacer:first-child {
  height: 0 !important;
  margin: 0 !important;
}

/* 6) Por si el tema mete un separador/HR bajo las migas */
:where(body.woocommerce-cart, body.woocommerce-checkout) :is(hr, .separator, .section-divider):first-child {
  margin: 0 !important;
  border: 0 !important;
  height: 0 !important;
}

.fa, .eicon {
  font-display: swap;
}