/* EBC Frenos — SKIN del checkout OnePageCheckout PS (layout "shopify").
 * OPC pinta su propio checkout (clases .opc-*) con cabecera/pie minimalistas.
 * Aquí se le da la apariencia de marca EBC: tipografía Saira/Inter, pasos como
 * SectionCard, botón rojo de acción, resumen tipo carrito, header/footer EBC.
 * Carga la última (stylesheets.tpl); toda la capa de tokens ebc.css ya está en la
 * página de OPC. Fija también los --pts-* del módulo a valores EBC en #opc_main. */

/* ============================================================
   Tokens del módulo (OPC) → EBC, dentro del checkout
   ============================================================ */
#opc_main {
  --pts-text-color: var(--text-strong, #14161a);
  --pts-step-bg: var(--surface-card, #fff);
  --pts-step-footer-bg: var(--surface-card, #fff);
  --pts-btn-checkout-bg: var(--action, #e00209);
  --pts-btn-checkout-color: #fff;
  --pts-btn-checkout-hover-bg: var(--action-hover, #b80208);
  --pts-btn-checkout-hover-color: #fff;
  --pts-btn-checkout-border: var(--action, #e00209);
  --pts-btn-checkout-hover-border: var(--action-hover, #b80208);
  --pts-footer-bg: var(--surface-card, #fff);
  --pts-footer-text-color: var(--text-muted, #5b6270);
  font-family: var(--font-body, system-ui, sans-serif);
  color: var(--text-strong, #14161a);
}

/* ============================================================
   Cabecera EBC (override de shopify header): barra NEGRA full-width
   ============================================================ */
#opc_header.ebc-opchead {
  display: block !important;
  width: 100%; max-width: none; margin: 0; padding: 0;
  background: #0a0a0a; border: 0;
}
.ebc-opchead__inner {
  width: 100%; max-width: var(--page-max, 1280px); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--page-gutter, 24px);
}
/* logo a color sobre recuadro blanco (mismo tratamiento que header/footer de la home) */
.ebc-opchead__logo {
  flex: none; display: inline-flex; align-items: center; background: #fff;
  padding: 5px 9px; border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.38), inset 0 0 0 1px rgba(0,0,0,.06);
}
.ebc-opchead__logo img { height: 30px; width: auto; display: block; }
.ebc-opchead__meta { display: flex; align-items: center; gap: 18px; }
.ebc-opchead__secure {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body, sans-serif); font-size: 13px; color: #fff;
}
.ebc-opchead__secure .material-icons { font-size: 15px; color: var(--fit-yes-fg, #1f8a4c); }
/* Nota: #opc_header se renderiza DENTRO del <header> del tema, cuyo theme.css
   (Hummingbird) pinta los enlaces (#header a) con especificidad (1,0,1). Por eso
   el <span> "Pago seguro" obedece y el <a> no. Subimos con el id + !important
   para ganar a esa regla; forzamos también el icono (material-icons). */
#opc_header .ebc-opchead__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading, sans-serif); font-weight: 600; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.04em; color: #b8bcc4 !important;
  text-decoration: none !important;
}
#opc_header .ebc-opchead__back .material-icons { color: #b8bcc4 !important; }
#opc_header .ebc-opchead__back:hover,
#opc_header .ebc-opchead__back:hover .material-icons { color: #fff !important; }
.ebc-opchead__back .material-icons { font-size: 17px; }
@media (max-width: 620px) {
  .ebc-opchead__back { display: none; }
  .ebc-opchead__logo img { height: 26px; }
}

/* ============================================================
   Layout de columnas (izquierda pasos / derecha resumen)
   ============================================================ */
.shopify-right-column { background: var(--surface-sunken, #f3f5f8); }
.shopify-left-column #opc_content_main { max-width: 40rem; }
.shopify-right-column #opc_content_side { max-width: 32rem; }

/* ============================================================
   Paso = SectionCard EBC
   ============================================================ */
#opc_main .opc-step {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-soft, #e7e9ee);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(20,22,26,.06));
  padding: clamp(16px, 2.2vw, 24px);
}
.shopify-left-column #opc_content_main .opc-step:not(:first-child) { margin-top: 16px; }
#opc_main .opc-step-header { padding-bottom: 14px !important; margin-bottom: 6px; }
#opc_main .opc-step-title {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 20px;
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--text-strong, #14161a);
}
#opc_main .opc-step-badge {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
}
#opc_main .opc-step-icon-bg { display: none; } /* usamos solo el número, estilo EBC */
#opc_main .opc-step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-sm, 6px);
  background: var(--graphite-800, #1a1d24); color: #fff;
  font-family: var(--font-data, monospace); font-size: 13px; font-weight: 700;
}
#opc_main .return_step { color: var(--text-muted, #5b6270); }
#opc_main .line-title { display: none; }

/* OPC fusiona a propósito Contacto (my_account) + Dirección (addresses) en un
   bloque único (esquinas cuadradas, sin margen, cabecera de direcciones oculta).
   Aquí revertimos esa fusión para que sean DOS cajas independientes. */
#opc_main #opc_step_my_account {
  border-radius: var(--radius-lg, 14px) !important;
  margin-bottom: 16px !important;
}
#opc_main #opc_step_my_account .opc-step-body {
  border-bottom: 0 !important; margin-bottom: 0 !important;
}
#opc_main #opc_step_addresses {
  border-radius: var(--radius-lg, 14px) !important;
  margin-top: 0 !important;
}
/* La cabecera del paso va oculta en direcciones; en el resto de cards el título
   respira ~48px (padding de card 24 + cabecera 24). OPC fuerza el padding a 0 con
   una regla de especificidad (3,3,0):
     #checkout #opc_main.opc-shopify.customer-not-logged #opc_step_addresses .opc-step-body{padding-top:0!important}
   La ganamos con 4 IDs (más ids > más clases): (4,0,0). Padding (no margin) para
   evitar colapso de márgenes. Así el título queda a ~48px, IGUAL que Contacto. */
#checkout #opc_main #opc_step_addresses #opc_step_addresses_body {
  padding-top: 48px !important; border-top: 0 !important;
}
/* La cabecera del paso de direcciones sigue oculta (OPC): el título visible de la
   caja es el subtítulo interno .title-address-content, que estilamos como título
   de caja (Saira Condensed mayúsculas), igual que el resto. */
#opc_main .title-address-content {
  font-family: var(--font-display, sans-serif) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em;
  color: var(--text-strong, #14161a) !important;
  margin-bottom: 14px !important;
}

/* ============================================================
   Formularios (skin EBC sobre Bootstrap del módulo)
   ============================================================ */
#opc_main .form-label,
#opc_main label.form-label {
  font-family: var(--font-heading, sans-serif); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-body, #3a3f49); margin-bottom: 6px;
}
#opc_main .form-control,
#opc_main .form-select {
  min-height: 46px; padding: 0 14px;
  border: 1.5px solid var(--border, #d8dce4); border-radius: var(--radius, 8px);
  font-family: var(--font-body, sans-serif); font-size: 15px; color: var(--text-strong, #14161a); box-shadow: none;
}
#opc_main textarea.form-control { min-height: 64px; padding: 11px 14px; }
#opc_main .form-control:focus,
#opc_main .form-select:focus {
  border-color: var(--blue-700, #00378d); box-shadow: 0 0 0 3px var(--blue-100, #dbe6f7);
}
#opc_main .form-check-input { accent-color: var(--blue-700, #00378d); }
#opc_main .form-check-label { font-family: var(--font-body, sans-serif); font-size: 14px; color: var(--text-body, #3a3f49); }

/* Botones */
#opc_main .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: var(--radius, 8px);
  font-family: var(--font-heading, sans-serif); font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.03em; border: 1.5px solid transparent;
}
#opc_main .btn .material-icons { font-size: 18px; }
#opc_main .btn-primary,
#opc_main .continue,
#opc_main .opc-btn-checkout {
  background: var(--action, #e00209); border-color: var(--action, #e00209); color: #fff;
}
#opc_main .btn-primary:hover,
#opc_main .continue:hover,
#opc_main .opc-btn-checkout:hover {
  background: var(--action-hover, #b80208); border-color: var(--action-hover, #b80208); color: #fff;
}
/* «Completar mi pedido»: OPC le quita el min-height (body#checkout #payment-confirmation
   button) y le pone 0.875 × su fuente base; mismo tamaño que «Finalizar compra» del carrito. */
body#checkout #opc_main #payment-confirmation button {
  width: 100%; min-height: 52px; font-size: 15px;
}
#opc_main .btn-secondary,
#opc_main .btn-outline-primary {
  background: transparent; border-color: var(--border, #d8dce4); color: var(--text-strong, #14161a);
}

/* Transportistas y métodos de pago como tarjetas seleccionables */
#opc_main .delivery-option,
#opc_main .payment-option,
#opc_main .opc-address-block {
  border: 1.5px solid var(--border, #d8dce4); border-radius: var(--radius-md, 10px);
  background: var(--surface-card, #fff);
}
#opc_main .delivery-option:has(input:checked),
#opc_main .payment-option:has(input:checked),
#opc_main .opc-address-block:has(input:checked) {
  border-color: var(--blue-700, #00378d); background: var(--blue-50, #eef3fb);
}

/* Direcciones guardadas (address-block.tpl): OPC pone cada tarjeta al 48 % y
   limita la lista a 240px de alto (cortaba la tarjeta); los iconos heredaban el
   tamaño de #opc_main .btn y se apilaban. Tarjetas a todo el ancho de la columna
   (dos por fila si caben) e iconos compactos en línea con el alias. */
body#checkout #opc_main .opc-addresses .address-selector {
  gap: 12px; max-height: 520px; overflow-y: auto;
}
body#checkout #opc_main .opc-addresses .address-selector .address-item {
  flex: 1 1 260px; width: auto; max-width: 100%; margin: 0;
  border: 1.5px solid var(--border, #d8dce4); border-radius: var(--radius-md, 10px);
  background: var(--surface-card, #fff); padding: 14px 16px;
}
body#checkout #opc_main .opc-addresses .address-selector .address-item.first-in-line,
body#checkout #opc_main .opc-addresses .address-selector .address-item.last-in-line { margin: 0; }
body#checkout #opc_main .opc-addresses .address-selector .address-item.selected {
  border-color: var(--blue-700, #00378d); background: var(--blue-50, #eef3fb);
}
body#checkout #opc_main .opc-addresses .address-item .address-title { gap: 12px; }
body#checkout #opc_main .opc-addresses .address-item .address-alias {
  font-family: var(--font-heading, sans-serif); font-weight: 600; font-size: 15px;
  color: var(--text-strong, #14161a); min-width: 0;
}
body#checkout #opc_main .opc-addresses .address-item .address-actions {
  display: flex; gap: 4px; flex: none;
}
body#checkout #opc_main .opc-addresses .address-item .address-actions .btn {
  min-height: 0; width: 34px; height: 34px; padding: 0;
  color: var(--text-muted, #5b6270); background: transparent;
}
body#checkout #opc_main .opc-addresses .address-item .address-actions .btn:hover {
  color: var(--text-strong, #14161a); background: var(--surface-muted, #f1f3f6);
}
body#checkout #opc_main .opc-addresses .address-item .address-content .address {
  margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-body, #3a3f49);
}

/* ============================================================
   Resumen del pedido (columna derecha)
   ============================================================ */
#opc_content_side .opc-step {
  border: 1px solid var(--border, #d8dce4);
}
#opc_content_side .cart-summary__line,
#opc_content_side .opc-cart-line-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
#opc_content_side .cart-summary__label { font-family: var(--font-body, sans-serif); font-size: 14px; color: var(--text-body, #3a3f49); }
#opc_content_side .cart-summary__value {
  font-family: var(--font-data, monospace); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-strong, #14161a);
}
#opc_content_side .cart-summary__line--bold .cart-summary__value,
#opc_content_side .opc-total-value {
  font-weight: 700; font-size: 22px; color: var(--text-price, var(--text-strong, #14161a));
}

/* ============================================================
   Resumen: línea de producto enriquecida (gama · ref · compatibilidad)
   Reutiliza clases de ebc-cart.css (.ebc-cartline__badge/__ref, .ebc-fitline).
   ============================================================ */
#opc_content_side .ebc-opcline__meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px;
}
#opc_content_side .product-name,
#opc_content_side .product-name a {
  font-family: var(--font-heading, sans-serif); font-weight: 600; font-size: 13.5px;
  line-height: 1.3; color: var(--text-strong, #14161a); text-decoration: none;
}
#opc_content_side .product-name a:hover { color: var(--text-link, #00378d); }
/* precios con el color/tipografía del resto de la web */
#opc_content_side .product-total-price {
  font-family: var(--font-data, monospace); font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums; color: var(--text-price, var(--text-strong, #14161a));
}
#opc_content_side .product-price-unit { font-family: var(--font-data, monospace); font-size: 11.5px; color: var(--text-muted, #5b6270); }
#opc_content_side .regular-price {
  font-family: var(--font-data, monospace); font-size: 12px; color: var(--text-muted, #5b6270); text-decoration: line-through;
}
#opc_content_side .product-quantity { font-family: var(--font-data, monospace); font-weight: 600; color: var(--text-strong, #14161a); }
/* banner de compatibilidad (find4ufilter) compacto en la columna estrecha */
#opc_content_side .ebc-fitline { max-width: 100%; margin-top: 8px; }
/* referencia y badge ya vienen estilados por ebc-cart.css */

/* ============================================================
   Cards: mismo border-radius que el resto (envío, pago, resumen…)
   OPC pone border-radius:0/10px en .opc-step; forzamos --radius-lg.
   ============================================================ */
#opc_main .opc-step,
#opc_content_side .opc-step {
  border-radius: var(--radius-lg, 14px) !important;
}

/* Botones: mismo border-radius que el resto de la web */
#opc_main .btn,
#opc_main button.btn,
#opc_content_side .btn,
.ebc-opchead .btn {
  border-radius: var(--radius, 8px) !important;
}

/* Flecha de envío del email (btn-link): Bootstrap subraya los .btn-link → fuera */
#opc_main .opc-email-check__submit,
#opc_main .opc-email-check__submit:hover,
#opc_main .opc-email-check__submit-icon {
  text-decoration: none !important;
}

/* ============================================================
   Pie EBC (skin del footer OPC)
   ============================================================ */
.opc-footer {
  background: #fff; border-top: 1px solid var(--border-soft, #e7e9ee);
  color: var(--text-muted, #5b6270); font-family: var(--font-body, sans-serif); font-size: 12.5px;
  padding: 20px var(--page-gutter, 24px);
}
.opc-footer__paragraph { margin: 2px 0; }
.opc-footer__icon { font-size: 15px; color: var(--text-faint, #9aa1ad); }
.opc-footer__copyright-text { font-weight: 600; color: var(--text-body, #3a3f49); }

/* Campos con etiqueta flotante (login, registro, modal de contraseña):
   la regla general de arriba les quita el relleno vertical y la etiqueta
   flotante acababa encima del texto. Hueco arriba para la etiqueta y altura
   de campo flotante de Bootstrap. */
#opc_main .form-floating > .form-control,
#opc_main .form-floating > .form-select,
#opc_login_customer_popup .form-floating > .form-control {
  min-height: 58px;
  height: 58px;
  padding: 24px 14px 6px;
  line-height: 1.25;
}
/* Etiqueta alineada con el texto del campo (la columna tiene margen interior
   y la etiqueta se posiciona desde el borde de la columna). Vacío: hace de
   marcador; con foco o con texto: pequeña, arriba. Los selectores con
   #authentication superan a los del módulo. */
#opc_main .form-floating > label,
#opc_login_customer_popup .form-floating > label,
#authentication #opc_main .opc-form .form-floating > label,
#authentication #opc_main .opc-email-check__form .form-floating > label {
  left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding: 19px 15px 0 !important;
  transform: none !important;
  transition: padding .12s ease, font-size .12s ease;
}
#opc_main .form-floating > .form-control:focus ~ label,
#opc_main .form-floating > .form-control:not(:placeholder-shown) ~ label,
#opc_main .form-floating > .form-select ~ label,
#opc_login_customer_popup .form-floating > .form-control:focus ~ label,
#opc_login_customer_popup .form-floating > .form-control:not(:placeholder-shown) ~ label,
#authentication #opc_main .opc-form .form-floating > .form-control:focus ~ label,
#authentication #opc_main .opc-form .form-floating > .form-control:not(:placeholder-shown) ~ label,
#authentication #opc_main .opc-email-check__form .form-floating > .form-control:focus ~ label,
#authentication #opc_main .opc-email-check__form .form-floating > .form-control:not(:placeholder-shown) ~ label {
  padding-top: 7px !important;
  font-size: 12px !important;
}