/* ============================================
   WOOCOMMERCE — Overrides, blocks, checkout block, checkout — Tu Rincón Ferretero
   Extraído de style.css en Fase 2 (Solución 2.0).
   No modificar selectores ni valores: paridad 1:1 con el original.
   ============================================ */

/* ============================================
   WOOCOMMERCE OVERRIDES
   ============================================ */
.woocommerce-notices-wrapper {
  margin-bottom: 16px;
}
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--accent-soft-purple) !important;
  border: 2px solid var(--line) !important;
  border-radius: 2px !important;
  box-shadow: 2px 2px 0 var(--line);
  padding: 12px 16px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
  color: var(--accent-purple) !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 2px solid var(--line) !important;
  border-radius: 2px !important;
  padding: 8px 12px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  background: #fff;
}

.woocommerce #respond input#submit,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  border: 2px solid var(--line) !important;
  border-radius: 2px !important;
  background: var(--accent-purple) !important;
  color: #fff !important;
  padding: 8px 16px !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  box-shadow: 3px 3px 0 var(--line);
}
.woocommerce #respond input#submit.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
  background: var(--accent-pink) !important;
  color: #fff !important;
}

/* Animación de prensa para botones WC — iguala el comportamiento de .btn */
.woocommerce #respond input#submit,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  transition: transform .15s cubic-bezier(.2,.9,.35,1.2),
              box-shadow .15s cubic-bezier(.2,.9,.35,1.2),
              background .12s ease !important;
  cursor: pointer;
}
.woocommerce #respond input#submit:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--line) !important;
  text-decoration: none;
}
.woocommerce #respond input#submit:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce a.button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--line) !important;
}

/* Botones clave: "Proceder al pago" (carrito) + "Realizar el pedido" (checkout) */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
  display: block !important;
  width: 100% !important;
  padding: 14px 20px !important;
  font-size: 16px !important;
  background: var(--accent-purple) !important;
  color: #fff !important;
  letter-spacing: 0.08em !important;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--line) !important;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:active,
.woocommerce-checkout #place_order:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--line) !important;
  animation: tu-rincon-press .25s ease;
}

@keyframes tu-rincon-press {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(0.85); }
  100% { filter: brightness(1); }
}

/* ============================================
   WOOCOMMERCE BLOCKS — Carrito y Checkout en bloques
   (WooCommerce 8+ con Cart Block / Checkout Block)
   ============================================ */

/* Botones genéricos de bloques con estilo del tema */
.wc-block-components-button,
button.wc-block-components-button,
a.wc-block-components-button {
  display: inline-block !important;
  border: 2px solid var(--line) !important;
  border-radius: 2px !important;
  background: var(--paper) !important;
  padding: 8px 16px !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 3px 3px 0 var(--line) !important;
  transition: transform .15s cubic-bezier(.2,.9,.35,1.2),
              box-shadow .15s cubic-bezier(.2,.9,.35,1.2),
              background .12s ease !important;
}
.wc-block-components-button:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--line) !important;
}
.wc-block-components-button:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--line) !important;
}
.wc-block-components-button .wc-block-components-button__text {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
}

/* Botón clave: "Proceder al pago" (carrito en bloques) */
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-cart__submit-button,
.wc-block-cart__submit-button {
  display: block !important;
  width: 100% !important;
  padding: 14px 20px !important;
  font-size: 16px !important;
  background: var(--accent-purple) !important;
  color: #fff !important;
  letter-spacing: 0.08em !important;
}
.wc-block-cart__submit-button:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 6px 6px 0 var(--line) !important;
}
.wc-block-cart__submit-button:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--line) !important;
  animation: tu-rincon-press .25s ease;
}

/* Botón clave: "Realizar el pedido" (checkout en bloques) */
.wc-block-components-checkout-place-order-button {
  display: block !important;
  width: 100% !important;
  padding: 14px 20px !important;
  font-size: 16px !important;
  background: var(--accent-purple) !important;
  color: #fff !important;
  letter-spacing: 0.08em !important;
}
.wc-block-components-checkout-place-order-button:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 6px 6px 0 var(--line) !important;
}
.wc-block-components-checkout-place-order-button:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--line) !important;
  animation: tu-rincon-press .25s ease;
}

.woocommerce .cart_totals,
.woocommerce-checkout-review-order-table,
.woocommerce-cart-form table {
  border: 2px solid var(--line) !important;
  box-shadow: 3px 3px 0 var(--line);
  background: var(--paper);
}

/* ============================================
   CHECKOUT BLOCK — Opciones de pago (tarjetas)
   "Elige cómo pagar" — cada método como card con borde marcado
   ============================================ */

/* Título de la sección de pago — tipografía Oswald destacada */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-title,
.wc-block-checkout__payment-method .wc-block-components-title,
.wp-block-woocommerce-checkout-payment-block > h2,
.wc-block-checkout__payment-method > h2 {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: 22px !important;
  color: var(--ink) !important;
  margin: 0 0 14px 0 !important;
}

/* Lista de métodos: stack vertical con separación */
.wc-block-components-payment-methods,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Cada método como tarjeta con borde, fondo y sombra del tema */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option,
.wc-block-components-payment-methods .wc-block-components-radio-control__option {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  border: 2px solid var(--line) !important;
  border-radius: 4px !important;
  background: var(--paper) !important;
  padding: 14px 18px 14px 46px !important;
  margin: 0 !important;
  box-shadow: 3px 3px 0 var(--line) !important;
  transition: transform .15s cubic-bezier(.2,.9,.35,1.2),
              box-shadow .15s cubic-bezier(.2,.9,.35,1.2),
              background .15s ease,
              border-color .15s ease !important;
  cursor: pointer !important;
  min-height: 56px !important;
}

/* Hover: misma micro-interacción que botones del tema */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option:hover,
.wc-block-components-payment-methods .wc-block-components-radio-control__option:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--line) !important;
}

/* Estado seleccionado: borde más grueso + fondo blanco + sombra mayor */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option--checked,
.wc-block-components-payment-methods .wc-block-components-radio-control__option--checked,
.wc-block-components-radio-control__option:has(input:checked) {
  background: #FFFFFF !important;
  border-width: 3px !important;
  padding: 13px 17px 13px 45px !important; /* compensa el borde extra para no saltar */
  box-shadow: 4px 4px 0 var(--line) !important;
}

/* Radio input: posicionado absoluto a la izquierda, vertical-centered */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__input,
.wc-block-components-payment-methods .wc-block-components-radio-control__input {
  position: absolute !important;
  left: 16px !important;
  top: 22px !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: var(--accent-purple) !important;
  cursor: pointer !important;
}

/* Label del método: Oswald uppercase, peso semibold */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__label,
.wc-block-components-payment-methods .wc-block-components-radio-control__label {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
}

/* Iconos del método (logos de tarjetas / Yape) — alineados a la derecha del título */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-payment-method-icons,
.wc-block-components-payment-methods .wc-block-components-payment-method-icons {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
.wp-block-woocommerce-checkout-payment-block .wc-block-components-payment-method-icon,
.wc-block-components-payment-methods .wc-block-components-payment-method-icon {
  max-height: 22px !important;
  width: auto !important;
  filter: none !important;
}

/* Layout del option (label + descripción) ocupa todo el ancho */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option-layout,
.wc-block-components-payment-methods .wc-block-components-radio-control__option-layout {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  gap: 8px !important;
}

/* Descripción / contenido expandido del método (instrucciones tras seleccionar) */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__description,
.wc-block-components-payment-methods .wc-block-components-radio-control__description {
  flex: 1 1 100% !important;
  margin-top: 8px !important;
  padding-top: 10px !important;
  border-top: 1px dashed var(--line) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: var(--ink-2) !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

/* Contenido custom del método de pago (cuando el método inyecta HTML extra) */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-payment-method-content,
.wc-block-components-payment-methods .wc-block-components-payment-method-content {
  flex: 1 1 100% !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px dashed var(--line) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  color: var(--ink-2) !important;
  line-height: 1.55 !important;
}

/* Trust box "Pago 100% seguro" — inyectado vía ::after del bloque de pago */
.wp-block-woocommerce-checkout-payment-block::after {
  content: "🔒  PAGO 100% SEGURO  —  Procesado por WooCommerce. Confirmamos tu pedido apenas validemos el pago.";
  display: block;
  margin-top: 14px;
  padding: 14px 18px;
  border: 2px solid var(--line);
  border-radius: 4px;
  background: var(--accent-soft-purple);
  box-shadow: 3px 3px 0 var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* Responsive: en móvil reducir padding y permitir wrap del label/iconos */
@media (max-width: 640px) {
  .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option,
  .wc-block-components-payment-methods .wc-block-components-radio-control__option {
    padding: 12px 14px 12px 40px !important;
    min-height: 52px !important;
  }
  .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option--checked,
  .wc-block-components-payment-methods .wc-block-components-radio-control__option--checked {
    padding: 11px 13px 11px 39px !important;
  }
  .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__input,
  .wc-block-components-payment-methods .wc-block-components-radio-control__input {
    left: 12px !important;
    top: 18px !important;
  }
  .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__label,
  .wc-block-components-payment-methods .wc-block-components-radio-control__label {
    font-size: 14px !important;
  }
  .wp-block-woocommerce-checkout-payment-block::after {
    font-size: 10px;
    padding: 12px 14px;
    letter-spacing: 0.03em;
  }
}

/* ============================================
   CHECKOUT
   ============================================ */
.checkout-steps {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.checkout-step {
  padding: 8px 16px;
  border: 2px solid var(--line);
  background: var(--paper);
}
.checkout-step.active {
  background: var(--accent-purple);
  color: #fff;
}