/*
Theme Name: Recetario Scaptura
Template: twentytwentyfive
Description: Child theme del sitio de pago Scaptura — identidad dark mode.
Version: 1.1
*/

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   TOKENS — sistema de diseño Scaptura
═══════════════════════════════════════════════════════════════════ */
:root {
  /* Superficies */
  --bg:           #1E1E20;
  --bg-raised:    #252527;
  --bg-overlay:   #2a2a2d;
  --surface:      rgba(255,255,255,0.05);
  --surface-hover:rgba(255,255,255,0.08);

  /* Bordes */
  --border:       rgba(255,255,255,0.10);
  --border-focus: rgba(174,87,89,0.70);
  --border-error: rgba(220,80,80,0.70);

  /* Texto — jerarquía clara */
  --text-primary:   #F3F2EC;
  --text-secondary: rgba(243,242,236,0.60);
  --text-muted:     rgba(243,242,236,0.35);
  --text-disabled:  rgba(243,242,236,0.25);

  /* Acento */
  --wine:        #ae5759;
  --wine-hover:  #963f41;
  --wine-subtle: rgba(174,87,89,0.12);

  /* Feedback */
  --error:         rgba(220,80,80,0.90);
  --error-surface: rgba(220,80,80,0.10);
  --success:       rgba(80,180,100,0.90);

  /* Forma */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-btn: 40px;
}

/* ═══════════════════════════════════════════════════════════════════
   RESET + BASE
═══════════════════════════════════════════════════════════════════ */
html,
body,
.wp-site-blocks,
#page,
#content,
main {
  background-color: var(--bg) !important;
  color: var(--text-primary) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Tipografía */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Barlow', sans-serif !important;
  font-weight: 300 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.02em;
}

p, span, li, td, th, div {
  color: inherit;
}

a {
  color: var(--wine) !important;
  text-decoration: none !important;
  transition: opacity 0.15s;
}
a:hover { opacity: 0.75; }

strong, b { font-weight: 600; }

/* Scroll */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

/* ═══════════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════════ */
header,
.wp-block-template-part[data-area="header"],
.scaptura-header {
  background-color: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Ocultar navegación estándar */
.wp-block-navigation,
.wp-block-navigation__container,
.wp-block-navigation-item {
  display: none !important;
}

/* Logo */
.wp-block-image img,
.wp-block-site-logo img {
  max-height: 34px !important;
  width: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════════ */
footer,
.wp-block-template-part[data-area="footer"] {
  background-color: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INPUTS & FORMULARIOS
═══════════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
  background-color: var(--bg-raised) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  padding: 11px 14px !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  -webkit-appearance: none;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px rgba(174,87,89,0.15) !important;
}
input::placeholder,
textarea::placeholder { color: var(--text-muted) !important; }
input[disabled],
select[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* Labels WooCommerce */
.woocommerce label,
.woocommerce-page label,
label {
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  display: block;
}

/* Select con flecha visible en dark */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(243,242,236,0.45)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
}
select option {
  background-color: var(--bg-overlay) !important;
  color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BOTONES
═══════════════════════════════════════════════════════════════════ */
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #payment #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background-color: var(--wine) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  padding: 12px 24px !important;
  cursor: pointer !important;
  transition: background-color 0.15s, transform 0.1s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #payment #place_order:hover,
.wp-block-button__link:hover {
  background-color: var(--wine-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Botón secundario / outline */
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--surface-hover) !important;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT CHECKOUT
═══════════════════════════════════════════════════════════════════ */
.woocommerce-checkout,
.woocommerce-cart {
  background-color: var(--bg) !important;
}

/* Tarjetas / secciones */
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
#customer_details,
.cart_totals,
#order_review,
.woocommerce-checkout-review-order {
  background-color: var(--bg-raised) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px !important;
}

#order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-column__title {
  color: var(--text-primary) !important;
  font-family: 'Barlow', sans-serif !important;
  font-weight: 300 !important;
  font-size: 18px !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 14px !important;
}

/* Tabla orden en checkout */
table.woocommerce-checkout-review-order-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
}
table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  padding: 12px 0 !important;
}
table.woocommerce-checkout-review-order-table tfoot tr:last-child td,
table.woocommerce-checkout-review-order-table tfoot tr:last-child th {
  font-size: 16px !important;
  font-weight: 600 !important;
  border-bottom: none !important;
  padding-top: 16px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CART TABLE
═══════════════════════════════════════════════════════════════════ */
table.cart,
.woocommerce-cart-form__contents {
  background: transparent !important;
  border-collapse: collapse !important;
  width: 100% !important;
}
table.cart thead th {
  background-color: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 10px 12px !important;
}
table.cart tbody td {
  background-color: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  padding: 16px 12px !important;
  vertical-align: middle !important;
}
table.cart .product-name a {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}
table.cart .product-subtotal {
  font-weight: 600 !important;
}

/* Cart totals */
.cart_totals h2 {
  color: var(--text-primary) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 16px !important;
}
.cart_totals table {
  border-collapse: collapse !important;
  width: 100% !important;
  background: transparent !important;
}
.cart_totals table th,
.cart_totals table td {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  padding: 12px 0 !important;
}
.order-total th,
.order-total td {
  font-size: 17px !important;
  font-weight: 600 !important;
  border-bottom: none !important;
  color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN PAGO — contenedor WooCommerce
═══════════════════════════════════════════════════════════════════ */
#payment {
  background-color: var(--bg-raised) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 4px 0 0 !important;
  overflow: hidden !important;
}

#payment .wc_payment_methods {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Cada método de pago */
#payment .wc_payment_methods li.payment_method_woo-mercado-pago-custom,
#payment .wc_payment_methods li.payment_method_woo-mercado-pago-wallet_button,
#payment .wc_payment_methods li[class*="payment_method_woo-mercado-pago"],
#payment .wc_payment_methods li {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 18px 24px !important;
  color: var(--text-primary) !important;
}

/* Radio button + label del método */
#payment .wc_payment_methods li label {
  color: var(--text-primary) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 0 !important;
  cursor: pointer !important;
}

/* Radio button */
#payment .wc_payment_methods li input[type="radio"] {
  accent-color: var(--wine) !important;
  width: 16px !important;
  height: 16px !important;
}

/* Descripción del método */
#payment .payment_box {
  background-color: var(--bg-overlay) !important;
  border-top: 1px solid var(--border) !important;
  padding: 20px 24px !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
}

/* Botón pagar */
#payment .place-order {
  background: transparent !important;
  padding: 20px 24px !important;
  border-top: 1px solid var(--border) !important;
}
#payment #place_order {
  width: 100% !important;
  font-size: 15px !important;
  padding: 14px 24px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MERCADO PAGO — contenedores principales
═══════════════════════════════════════════════════════════════════ */

/* Wrapper general MP */
.mp-checkout-container,
.mp-checkout-custom-container,
.mp-checkout-pro-container,
.mp-checkout-credits-container,
.mp-checkout-ticket-container,
.mp-checkout-pix-container,
.mp-checkout-pse-container,
.mp-checkout-yape-container {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

/* ─── Card Form (Custom Checkout) ─── */
.mp-checkout-custom-card-form {
  background: transparent !important;
}

.mp-checkout-custom-card-row,
.mp-checkout-custom-dual-column-row {
  margin-bottom: 16px !important;
}

/* Inputs nativos del formulario de tarjeta */
.mp-checkout-custom-card-input input,
.mp-checkout-custom-security-code-input input,
.mp-checkout-custom-left-card-input input,
.mp-checkout-custom-input-document input,
#mp-custom-checkout-form-container input[type="text"],
#mp-custom-checkout-form-container input[type="tel"],
#mp-custom-checkout-form-container input[type="number"],
#mp-checkout-custom-root input {
  background-color: var(--bg-overlay) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  padding: 11px 14px !important;
}
#mp-checkout-custom-root input:focus,
#mp-custom-checkout-form-container input:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px rgba(174,87,89,0.15) !important;
  outline: none !important;
}

/* Selects MP */
.mp-checkout-custom-installments-select-container select,
.mp-checkout-custom-issuers-container select,
.mp-input-select-select,
#mp-checkout-custom-root select,
#mp-custom-checkout-form-container select {
  background-color: var(--bg-overlay) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  padding: 11px 14px !important;
}

/* Labels MP */
.mp-input-label,
.mp-checkout-custom-container label,
#mp-checkout-custom-root label,
#mp-custom-checkout-form-container label {
  color: var(--text-secondary) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Helper / mensajes de error MP */
.mp-input-helper,
.mp-helper,
.mp-helper-message {
  color: var(--text-muted) !important;
  font-size: 12px !important;
}
.mp-input-field-error .mp-helper-message,
.mp-error,
.mp-alert-message.error {
  color: var(--error) !important;
}

/* Estado error en inputs */
.mp-input-field-error input,
.mp-error input {
  border-color: var(--border-error) !important;
  background-color: var(--error-surface) !important;
}

/* Estado focus MP */
.mp-input-field-focus input,
.mp-focus input,
.mp-checkout-custom-card-form-focus input {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px rgba(174,87,89,0.15) !important;
}

/* Contenedor cuotas */
.mp-checkout-custom-installments-container,
.mp-checkout-custom-issuers-container {
  background: transparent !important;
}

/* ─── Checkout Pro (redirect) ─── */
.mp-checkout-pro-content,
.mp-checkout-pro-benefits {
  background: transparent !important;
  color: var(--text-primary) !important;
}

.mp-checkout-pro-benefits-title,
.mp-checkout-pro-redirect-title {
  color: var(--text-primary) !important;
  font-family: 'Barlow', sans-serif !important;
  font-weight: 300 !important;
}

.mp-checkout-pro-benefit-description,
.mp-checkout-pro-redirect-description {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
}

.mp-checkout-pro-terms-and-conditions,
.mp-checkout-credits-terms-and-conditions,
.mp-checkout-ticket-terms-and-conditions {
  color: var(--text-muted) !important;
  font-size: 11px !important;
}

/* ─── Wallet Button ─── */
.mp-wallet-button-container {
  background-color: var(--bg-overlay) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px !important;
}
.mp-wallet-button-title {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
}

/* ─── Test Mode badge ─── */
.mp-test-mode-badge,
.mp-test-mode-container,
.mp-test-mode-card {
  background-color: rgba(255,200,50,0.10) !important;
  border: 1px solid rgba(255,200,50,0.25) !important;
  border-radius: var(--radius-sm) !important;
}
.mp-test-mode-title,
.mp-test-mode-description {
  color: rgba(255,220,80,0.90) !important;
}

/* ─── Términos y condiciones ─── */
.mp-privacy-policy-footer {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  border-top: 1px solid var(--border) !important;
  padding-top: 12px !important;
  margin-top: 16px !important;
}
.mp-privacy-policy-footer a {
  color: var(--text-muted) !important;
  text-decoration: underline !important;
}

/* ─── Document input ─── */
.mp-input-document,
.mp-document-select,
.mp-checkout-ticket-input-document,
.mp-checkout-pse-input-document {
  background-color: var(--bg-overlay) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
}

/* ─── Spinner ─── */
.spinner-card-form circle,
.spinner-path { stroke: var(--wine) !important; }

/* ═══════════════════════════════════════════════════════════════════
   NOTICES WooCommerce
═══════════════════════════════════════════════════════════════════ */
.woocommerce-message,
.woocommerce-info {
  background-color: var(--surface) !important;
  border-top: 3px solid var(--wine) !important;
  color: var(--text-primary) !important;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
}
.woocommerce-error {
  background-color: var(--error-surface) !important;
  border-top: 3px solid var(--error) !important;
  color: var(--text-primary) !important;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
}
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
  color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MINI CART
═══════════════════════════════════════════════════════════════════ */
.wc-block-mini-cart__button {
  color: var(--text-primary) !important;
  background: transparent !important;
}
.wc-block-mini-cart__badge {
  background-color: var(--wine) !important;
  color: #fff !important;
}
.wc-block-mini-cart__drawer .components-panel,
.wc-block-cart__sidebar,
.wc-block-components-sidebar {
  background-color: var(--bg-raised) !important;
  color: var(--text-primary) !important;
}
.wc-block-components-product-name {
  color: var(--text-primary) !important;
}
.wc-block-components-product-price,
.wc-block-components-totals-item__value {
  color: var(--text-primary) !important;
}
.wc-block-components-totals-item {
  border-color: var(--border) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MISC
═══════════════════════════════════════════════════════════════════ */

/* Remove Twenty Twenty-Five background override */
.wp-site-blocks > * { background-color: var(--bg) !important; }

/* Breadcrumbs */
.woocommerce-breadcrumb {
  color: var(--text-muted) !important;
  font-size: 12px !important;
}
.woocommerce-breadcrumb a { color: var(--text-muted) !important; }

/* Required asterisk */
.required { color: var(--wine) !important; }

/* Coupon */
.woocommerce-cart .coupon input[type="text"] {
  border-radius: var(--radius-sm) var(--radius-btn) var(--radius-btn) var(--radius-sm) !important;
  border-right: none !important;
}

/* Hide shipping calculator by default */
.woocommerce-shipping-calculator { color: var(--text-secondary) !important; }

/* Order confirmation */
.woocommerce-order { color: var(--text-primary) !important; }
.woocommerce-order .woocommerce-thankyou-order-received {
  font-family: 'Barlow', sans-serif !important;
  font-weight: 300 !important;
  font-size: 24px !important;
}
.woocommerce-order ul.order_details {
  background-color: var(--bg-raised) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px 28px !important;
}
.woocommerce-order ul.order_details li {
  color: var(--text-primary) !important;
  border-right: 1px solid var(--border) !important;
}