/*
 * banacart — CSS propio del orderform del tema banatheme.
 * Base: WHMCS 9.0.6, parent standard_cart (herencia por fichero via theme.yaml).
 * Solo se cargan aqui reglas EXTRA; todo lo no sobrescrito lo sirve el
 * standard_cart pristino via herencia (ver _ref-orderforms/standard_cart).
 */

/* ============================================================
   Tanda A: tarjetas de planes (products.tpl), patron de tarjetas de
   pricing moderno del sector (badge -> nombre -> precio grande con ciclo
   inline -> CTA -> divisor -> checks) con la
   paleta propia del tema banatheme, NO los colores/textos de terceros.
   Todo scoped bajo #products / .banacart-* : custom.css se carga
   tambien en viewcart/checkout (heredados de standard_cart) y esos
   ficheros NO usan #products ni clases banacart-card/-grid, asi que
   estas reglas no les afectan (Tanda B, deliberadamente fuera).
   Variables usadas: --bt-primary/--bt-shadow/--bt-radius-sm/--bt-text-N/
   --bt-surface/--bt-border/--bt-radius-lg de css/banatheme.css (cargado
   antes por header.tpl, variables verificadas existentes en :root).
   #EEF4FE/#CFE0FF/#171A2E no tienen variable propia en :root (#171A2E es
   el mismo azul marino del overlay rgba(23,26,46) del tema, y #CFE0FF/
   #EEF4FE ya se usaban aqui como hex), se usan como hex documentados aqui,
   igual que el resto del tema. Tarjeta destacada = $product.isFeatured
   (ver notas internas del repo, Notas B1): checkbox "Featured" del
   producto en el admin de WHMCS.
   ============================================================ */

/* Sin columna interna (.cart-sidebar) en products.tpl: .banacart-body
   sustituye a .cart-body de la base (que en style.css trae width:75%
   pensado para convivir con un .cart-sidebar al 25% que aqui ya no
   existe). Clase propia en vez de reutilizar "cart-body" para no
   afectar viewcart/checkout, que SI conservan la columna de la base
   y cargan este mismo custom.css por herencia. */
#order-standard_cart .banacart-body {
    width: 100%;
}

/* Titulo del grupo (ej. "Web Hosting") arriba de las tarjetas: la base
   lo pinta con .font-size-36 (36px, ver all.css) heredando ademas el
   h1/h2 grueso del tema, enorme frente a la escala de las tarjetas.
   Selector id+clase+tipo (1,1,1) para ganar tanto a
   "#order-standard_cart .font-size-36" (1,1,0, mismo fichero base) como
   a ".bt-body h1/h2" (0,1,1) sin necesitar !important. */
#order-standard_cart .banacart-header h1 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 700;
}

/* Tagline opcional del grupo ($productGroup.tagline), debajo del titulo. */
#order-standard_cart .banacart-header p {
    margin: 4px 0 0;
    color: var(--bt-text-2, #5E636E);
    font-size: 14px;
}

/* ============================================================
   Tanda B: selector de ciclo de facturacion (products.tpl), pills
   centradas encima del grid, debajo del titulo del grupo. Scoped bajo
   #products/#order-standard_cart, mismas variables del tema ya usadas en
   .banacart-card (--bt-border/--bt-primary/--bt-radius-sm de
   css/banatheme.css). #EEF4FE ya se usaba como hex documentado en este
   fichero (ver cabecera); el verde del badge de ahorro (#00A876/#E6F7F1/
   #00795A) no tiene variable propia en :root, se documenta aqui como hex
   igual que el resto del tema. */
#order-standard_cart .banacart-cycle-selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 20px;
}

#order-standard_cart .banacart-cycle-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--bt-text-1, #171A2E);
    background: #fff;
    border: 1px solid var(--bt-border, #E7E9F0);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 150ms, border-color 150ms, color 150ms;
}

#order-standard_cart .banacart-cycle-pill:hover {
    background: #EEF4FE;
    text-decoration: none;
}

#order-standard_cart .banacart-cycle-pill--active,
#order-standard_cart .banacart-cycle-pill--active:hover {
    background: var(--bt-primary, #1062FE);
    border-color: var(--bt-primary, #1062FE);
    color: #fff;
}

/* Badge de ahorro (-X%) junto al ciclo, en la linea de precio. */
#order-standard_cart .banacart-badge-save {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    color: #00795A;
    background: #E6F7F1;
    border-radius: 999px;
    white-space: nowrap;
}

/* Override en la tarjeta destacada: el pill ya trae fondo propio
   opaco (se lee igual sobre cualquier fondo de tarjeta), pero se ajusta
   la paleta para combinar con los acentos claros de .banacart-card--featured
   (#CFE0FF/#171A2E ya usados alli) en vez del verde neutro de las tarjetas
   blancas. Contraste texto/fondo verificado: #0B2B1F sobre #4CDBAA = 8.72:1
   (formula WCAG 2.1, relative luminance), muy por encima del umbral >=3:1
   requerido (y del 4.5:1 de texto normal AA). */
#order-standard_cart .banacart-card--featured .banacart-badge-save {
    color: #0B2B1F;
    background: #4CDBAA;
}

/* Nota discreta cuando el producto no ofrece el ciclo elegido por el
   selector (ver rama !$btProductOffersActive en products.tpl).
   line-height 1.2 EXPLICITO: sin esto hereda el
   1.7 de .bt-body/el tema base, y a 12px eso mide 12*1.7 = 20.4px de
   caja de linea (mas el margin-top de 4px = 24.4px reales), mas de lo
   que la reserva de .banacart-grid--notes esperaba (18px). Con 1.2
   explicito la caja mide 12*1.2 = 14.4px + margin-top 4px = 18.4px,
   redondeado a 18px como documenta el calculo original de mas abajo. */
#order-standard_cart .banacart-price-unavailable {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.2;
    color: var(--bt-text-2, #5E636E);
    font-style: italic;
}

/* Ancho a toda pantalla: auto-fit (no auto-fill) colapsa los tracks
   vacios, asi las tarjetas presentes se reparten TODO el ancho
   disponible: 3 planes = 3 tarjetas anchas a pantalla completa; con 5
   planes caben 4 por fila en ~1570px y el 5o pasa a segunda fila.
   minmax a 300px evita tarjetas ridiculamente estrechas en grupos con
   muchos planes. Un grupo con 1 solo plan estirara esa tarjeta a todo
   el ancho (aceptado). Sin max-width ni margin auto: el contenido
   ocupa el ancho completo del contenedor. */
#products .banacart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 8px;
}

/* Patron de pricing moderno del sector, con la paleta propia del tema.
   Borde y sombra suaves, sombra base apenas perceptible
   (rgba(23,26,46,.06), el mismo azul marino del tema como tinte neutro,
   no negro puro) y un escalon mas al pasar el raton, transicion 150ms
   sobre esa misma propiedad. Padding 24px 22px, escala compacta pensada
   para el area de cliente con sidebar. */
.banacart-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bt-surface, #FFFFFF);
    border: 1px solid #E3E8F0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(23, 26, 46, .06);
    padding: 24px 22px;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.banacart-card:hover {
    border-color: #CFE0FF;
    box-shadow: 0 4px 12px rgba(23, 26, 46, .10);
    transform: translateY(-2px);
}

.banacart-card--soldout {
    opacity: .65;
}

/* Tarjeta destacada: fondo oscuro del vocabulario del tema (#171A2E es el
   mismo azul marino del overlay rgba(23,26,46) usado en banatheme.css),
   texto blanco (contraste AAA sobre #171A2E), acentos en #CFE0FF. Borde
   propio en vez de --bt-border para que no desaparezca sobre el fondo
   oscuro, y sombra algo mayor como realce sutil sin romper la alineacion
   del grid (mismo padding/ancho que el resto de tarjetas). */
/* Degradado (no solido): del azul marino del tema (#171A2E) a un azul
   profundo derivado del primario #1062FE, oscurecido para mantener
   contraste AA/AAA del texto blanco. Extremo mas claro #123E9E: ratio
   9.51:1 contra #FFFFFF (verificado, supera el umbral >=7:1 exigido).
   Brillo radial muy tenue en la esquina superior derecha (misma zona
   del badge) para que el degradado no quede plano; no interfiere con
   el contraste porque se atenua a transparent enseguida. */
.banacart-card--featured {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, .08), transparent 45%),
        linear-gradient(135deg, #171A2E 0%, #10265E 55%, #123E9E 100%);
    border-color: #171A2E;
    box-shadow: 0 0 1px rgba(0, 0, 0, .2), 0 12px 32px rgba(23, 26, 46, .35);
}

.banacart-card--featured:hover {
    border-color: var(--bt-primary, #1062FE);
}

/* Badge: mismo tamano de texto (12px), solo se acerca a la esquina
   (top/right 20px -> 16px) para acompañar el padding de tarjeta reducido. */
.banacart-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #CFE0FF;
    color: #171A2E;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

/* margin-top en TODAS las tarjetas (no solo featured): el badge solo
   pinta en la destacada, pero si el hueco solo se reservara alli la
   cabecera de esa tarjeta arrancaria 24px mas abajo que sus vecinas de
   la misma fila y el CTA (que viene despues en el DOM, ver foot mas
   abajo) quedaria descuadrado entre tarjetas. Reservando el hueco
   siempre, arranquen o no con badge, todas las cabeceras empiezan en
   la misma cota. padding-right ya no hace falta: top:20 + este
   margin-top:24 separan el badge (~24px alto real con su padding) del
   nombre/qty sin necesidad de estrechar el ancho de la cabecera. */
.banacart-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
    margin-top: 24px;
}

/* min-height: reserva 2 lineas para que el CTA caiga en la misma cota
   tanto si el nombre del plan ocupa 1 linea como 2 (ej. "Bana Starter
   Deluxe SSD Ultra" vs "Bana Professional Deluxe SSD Ultra" a ~320px de
   ancho de columna). Un nombre a 3 lineas (raro) volveria a desplazar el
   CTA - limitacion aceptada. Calculo: 20px x 1.25 = 25px por linea, x2
   lineas = 50px -> min-height 50px. */
.banacart-card-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bt-text, #1B2430);
    margin-bottom: 4px;
    min-height: 50px;
}

.banacart-qty {
    font-size: 12px;
    color: var(--bt-text-3, #6B7280);
    white-space: nowrap;
}

.banacart-card--featured .banacart-card-name {
    color: #FFFFFF;
}

.banacart-card--featured .banacart-qty {
    color: #CFE0FF;
}

/* Tagline (frase corta bajo el nombre del plan, ej. "Ideal para tiendas
   pequenas"): SOLO CSS por ahora. El dato por producto todavia no existe
   en products.tpl (no hay fuente en BD equivalente a featuresdesc/
   features para esto), asi que el markup queda comentado en
   products.tpl listo para activarse cuando la haya (ver bloque Smarty
   comentado alli). color texto principal, NO muted (a diferencia de
   .banacart-price-label). min-height 36px reserva 2 lineas
   (13px*18px de line-height fijo x2 = 36px) para que el bloque de
   precio caiga en la misma cota si el nombre trae tagline de 1 o 2
   lineas. */
.banacart-card-tagline {
    font-size: 13px;
    line-height: 18px;
    color: var(--bt-text, #1B2430);
    margin: 4px 0 16px;
    min-height: 36px;
}

.banacart-card--featured .banacart-card-tagline {
    color: #E8EDF8;
}

/* Bloque compacto, sin aire muerto: min-height cubre el caso mas alto
   (label "Desde" + precio + cuota de alta) para que el bloque ocupe
   siempre el mismo alto, tanto si la tarjeta lo rellena entero como si
   solo trae precio simple: el CTA (foot) va justo despues en el DOM y
   asi cae en la misma cota en toda la fila. Calculo (line-height normal
   ~1.2 salvo donde se fija explicito):
   padding 6+0                                                    = 6px
   .banacart-price-label 13px*1.2 + margin 2                     ~= 18px
   .banacart-price-line (domina .banacart-price-amount 34px*1.1) ~= 38px
   .banacart-price-setup margin-top 2 + <small> ~15px*1.1        ~= 17px
   total 6+18+38+17 = 79px -> min-height 79px. */
.banacart-card-price {
    text-align: left;
    padding: 6px 0 0;
    min-height: 79px;
}

/* Cuando el union de ciclos detecta que ALGUN producto no-bundle
   del grupo va a pintar la nota ".banacart-price-unavailable", el grid
   entero recibe .banacart-grid--notes (ver el flag $btAnyMissingActive
   calculado en products.tpl) y TODAS las tarjetas del grid reservan el
   hueco extra, para que el CTA (que va justo despues del bloque de
   precio, ver .banacart-card-head arriba) siga cayendo en la misma cota
   en toda la fila, tengan nota o no. Sin ningun producto con nota, el
   grid no paga este hueco extra (79px de siempre).
   CALCULO CORREGIDO: la primera pasada asumio
   18px para la nota SIN fijar line-height explicito, y sin fijarlo
   .banacart-price-unavailable heredaba el 1.7 del tema base (12px*1.7 =
   20.4px + margin-top 4px = 24.4px reales, 6.4px mas de lo reservado).
   Con line-height: 1.2 EXPLICITO fijado arriba en .banacart-price-unavailable,
   la nota mide 12px*1.2 = 14.4px de caja de linea + margin-top 4px =
   18.4px. Total: 79px (bloque de precio, ver arriba) + 18.4px (nota) =
   97.4px, redondeado hacia arriba a 98px para no quedarse corto por el
   redondeo de sub-pixel del navegador. */
#order-standard_cart .banacart-grid--notes .banacart-card-price {
    min-height: 98px;
}

.banacart-price-label {
    display: block;
    font-size: 13px;
    color: var(--bt-text-3, #6B7280);
    margin-bottom: 2px;
}

/* Precio + ciclo en la misma linea, apoyados en la misma base (estilo
   "$2.99 /mo"): el ciclo va pegado al numero sobre la misma linea base
   (align-items:baseline); el "/mo" es oscuro y grande, no un sufijo gris
   pequeno (ver .banacart-price-cycle mas abajo). */
.banacart-price-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 6px;
}

/* Importe en azul de marca: destaca el precio sobre el resto de la
   tarjeta. En .banacart-card--featured sigue blanco (regla propia mas
   abajo, sin cambios; azul sobre el fondo azul oscuro de esa tarjeta no
   se leeria). */
.banacart-price-amount {
    font-size: 34px;
    font-weight: 800;
    color: var(--bt-primary, #1062FE);
    line-height: 1.1;
}

/* El ciclo no es un sufijo muted pequeno: comparte el color oscuro del
   precio (mismo --bt-text que .banacart-price-amount), sobre la misma
   linea base gracias a align-items:baseline en .banacart-price-line. */
.banacart-price-cycle {
    font-size: 14px;
    font-weight: 400;
    color: var(--bt-text, #1B2430);
}

.banacart-price-setup {
    display: block;
    margin-top: 2px;
    color: var(--bt-text-3, #6B7280);
}

.banacart-card--featured .banacart-price-label,
.banacart-card--featured .banacart-price-setup {
    color: #CFE0FF;
}

.banacart-card--featured .banacart-price-amount {
    color: #FFFFFF;
}

/* En la destacada el "oscuro" del texto principal es blanco: el ciclo
   sigue el mismo criterio de la base (mismo color que el precio, no
   muted) usando el blanco de .banacart-price-amount de arriba en vez
   del #CFE0FF apagado anterior. */
.banacart-card--featured .banacart-price-cycle {
    color: #FFFFFF;
}

/* Divisor fino entre el CTA y la lista de caracteristicas (patron
   de pricing del sector: precio -> CTA -> divisor -> checks). */
/* check-ok: ver Notas B1 */
.banacart-divider {
    height: 1px;
    background: #EEF1F6;
    margin: 14px 0;
}

.banacart-card--featured .banacart-divider {
    background: rgba(255, 255, 255, .14);
}

.banacart-card-desc {
    flex: 1;
    color: var(--bt-text-2, #5E636E);
}

.banacart-card--featured .banacart-card-desc {
    color: #FFFFFF;
}

/* featuresdesc es HTML libre de BD (ver arriba): si trae headings o
   enlaces, .bt-body h1..h6 / .bt-body a de banatheme.css los pintarian
   en los colores oscuros de texto normal del tema, invisibles o casi
   (~2.6:1) sobre el fondo #171A2E de la tarjeta destacada. Selector con
   mas especificidad que .bt-body h1..h6 (2 clases vs 1) para ganar sin
   !important. */
.banacart-card--featured .banacart-card-desc h1,
.banacart-card--featured .banacart-card-desc h2,
.banacart-card--featured .banacart-card-desc h3,
.banacart-card--featured .banacart-card-desc h4,
.banacart-card--featured .banacart-card-desc h5,
.banacart-card--featured .banacart-card-desc h6 {
    color: #FFFFFF;
}

.banacart-card--featured .banacart-card-desc a {
    color: #CFE0FF;
}

/* Subtitulos de categoria entre grupos de checks (patron pricing del
   sector: "Rendimiento" / "Seguridad" etc). Se agregan desde el admin
   como <p> o <h3>..<h6> sueltos entre listas en la descripcion HTML del
   producto; hoy es un <ul> plano, esto es soporte hacia adelante sin
   tocar el HTML actual. :first-child evita el hueco superior si el
   subtitulo abre la descripcion. Caja normal (no uppercase, ej. "Build
   with:") a 14px/600 en el color de texto principal. */
/* featuresdesc de WHMCS filtra <p>: los encabezados reales van como li.premium-divider */
.banacart-card-desc p,
.banacart-card-desc h3,
.banacart-card-desc h4,
.banacart-card-desc h5,
.banacart-card-desc h6 {
    font-size: 14px;
    font-weight: 600;
    color: var(--bt-text, #1B2430);
    margin: 18px 0 8px;
}

.banacart-card-desc p:first-child,
.banacart-card-desc h3:first-child,
.banacart-card-desc h4:first-child,
.banacart-card-desc h5:first-child,
.banacart-card-desc h6:first-child {
    margin-top: 0;
}

/* Variante tarjeta destacada: mismo color de texto principal (blanco
   sobre el degradado oscuro, ver .banacart-card--featured
   .banacart-card-name arriba); contraste de blanco contra el extremo
   mas claro del degradado (#123E9E, ver arriba) es 9.51:1, muy por
   encima del minimo AA. Mayor especificidad (2 clases) que la regla
   base de arriba, gana sin !important independientemente del orden.
   Solo p: h3..h6 ya quedan en blanco por la regla de headings de mas
   arriba (.banacart-card--featured .banacart-card-desc h1..h6), no hace
   falta repetirlos aqui. */
.banacart-card--featured .banacart-card-desc p {
    color: #FFFFFF;
}

/* HTML invalido documentado arriba (<p><ul>...</ul></p>): el navegador
   promueve el <ul> fuera del <p>, dejando un <p> vacio residual que sin
   esto conserva su margin y deja un hueco en blanco. */
/* check-ok: <p> vacio residual de la promocion del <ul> fuera del <p>
   invalido (ver comentario arriba); no oculta contenido real, es un nodo
   vacio que solo dejaba un hueco en blanco */
.banacart-card-desc p:empty {
    display: none;
    margin: 0;
}

/* featuresdesc trae <ul><li> libre de BD (ver arriba) y por defecto
   pinta bullets redondos; les damos el mismo check "\2713" que
   .banacart-features para paridad visual del patron de pricing.
   :not(.banacart-features) excluye la lista de $product.features (ya
   tiene sus propias reglas mas abajo) para no duplicar/chocar estilos
   si ambas coexisten en la misma tarjeta. Un nivel de ul anidado
   cubierto igual; los <p> del featuresdesc quedan intactos, esto solo
   toca ul/li. */
.banacart-card-desc ul:not(.banacart-features),
.banacart-card-desc ul:not(.banacart-features) ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

/* Densidad de la lista de features: font-size 14px, padding 4px 0 y
   line-height 1.35 dan un paso de linea de ~26.9px (14*1.35=18.9px de
   linea + 8px de padding), texto que llena su linea sin exceso de
   aire, look denso del patron de pricing del sector. */
.banacart-card-desc ul:not(.banacart-features) li {
    padding: 4px 0;
    font-size: 14px;
    line-height: 1.35;
}

/* Check en verde (no azul de marca): #00A876 en tarjetas claras (sin
   variable propia en :root, hex documentado igual que el resto del
   tema). */
.banacart-card-desc ul:not(.banacart-features) li::before {
    content: "\2713";
    color: #00A876;
    font-weight: 700;
    margin-right: 10px;
}

/* En la destacada, verde mas claro #4CDBAA (el #00A876 de la base perderia
   contraste sobre el fondo oscuro): contraste 5.44:1 contra el extremo mas
   claro del degradado (#123E9E, ver .banacart-card--featured arriba),
   por encima del minimo 3:1 de WCAG para elementos graficos - no hizo
   falta aclarar mas el verde. */
.banacart-card--featured .banacart-card-desc ul:not(.banacart-features) li::before {
    color: #4CDBAA;
}

/* El HTML de BD de la descripcion trae un <br> entre cada <li> del <ul>
   (<li>...</li><br>\n<li>...). Medido en vivo: cada br sumaba ~24px
   fantasma, dejando el paso real entre items en 52px pese a que el li ya
   mide 28px. Se oculta por CSS para no tocar los datos de produccion. */
/* check-ok: <br> fantasma entre <li> del HTML libre de BD (ver comentario
   arriba); no oculta ningun dato, corrige un espaciado roto sin tocar el
   contenido de produccion */
.banacart-card-desc ul br {
    display: none;
}

.banacart-features {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Misma densidad que .banacart-card-desc ul li de arriba (ver
   comentario alli): font-size 14px, mismo padding y line-height. */
.banacart-features li {
    position: relative;
    padding: 4px 0 4px 26px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--bt-text, #1B2430);
    border-bottom: 1px solid #EEF4FE;
}

.banacart-features li:last-child {
    border-bottom: none;
}

/* Mismo verde que .banacart-card-desc ul li::before de arriba (patron
   de pricing del sector), ver comentario alli para el detalle de
   contraste de la variante destacada. */
.banacart-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 4px;
    color: #00A876;
    font-weight: 700;
}

.banacart-card--featured .banacart-features li {
    color: #FFFFFF;
    border-bottom-color: rgba(255, 255, 255, .14);
}

.banacart-card--featured .banacart-features li::before {
    color: #4CDBAA;
}

.banacart-card-foot {
    margin-top: 4px;
}

/* Tarjetas normales: CTA con borde (outline), sin relleno en reposo.
   Prefijo #products (0,1,1,0) para ganar de forma natural, sin
   !important, a .bt-body .btn-success (0,0,2,0) de banatheme.css:
   la base pinta el CTA verde via .btn-success y aqui necesitamos
   el azul de marca en todos los estados, incluido el reposo.
   Altura via line-height/padding (no height fijo): borde 1px arriba +
   1px abajo = 2px; line-height 1 (=15px, igual al font-size) + padding
   14px arriba/abajo = 14+15+14 = 43, +2px de borde = 45px total.
   border-radius fijo en 8px (no la variable --bt-radius-sm de 6px,
   para el escalon del CTA). */
#products .banacart-btn-order {
    display: block;
    width: 100%;
    background: transparent;
    color: var(--bt-primary, #1062FE);
    border: 1px solid var(--bt-primary, #1062FE);
    border-radius: 8px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

#products .banacart-btn-order:hover,
#products .banacart-btn-order:focus {
    background: #EEF4FE;
    color: var(--bt-primary, #1062FE);
    border-color: var(--bt-primary, #1062FE);
}

/* Tarjeta destacada: CTA solido (unica solida de la fila), paridad con
   el patron de pricing del sector. */
#products .banacart-card--featured .banacart-btn-order {
    background: var(--bt-primary, #1062FE);
    color: #FFFFFF;
    border-color: var(--bt-primary, #1062FE);
}

#products .banacart-card--featured .banacart-btn-order:hover,
#products .banacart-card--featured .banacart-btn-order:focus {
    background: #0d52d1;
    color: #FFFFFF;
    border-color: #0d52d1;
}

/* Estado agotado: SOLO informativo (paridad con la base). */
#products .banacart-card--soldout .banacart-btn-order {
    background: var(--bt-text-3, #6B7280);
    color: #FFFFFF;
    border-color: var(--bt-text-3, #6B7280);
}

/* Encabezado de grupo dentro del <ul> de featuresdesc (ej. "Security &
   Backups" / "Premium Features"): featuresdesc de WHMCS filtra los <p>
   sueltos que probamos antes (ver comentario mas arriba), asi que el
   encabezado se agrega como <li class="premium-divider"><span>...
   </span></li> en el mismo <ul>, que SI sobrevive al filtro. Selector
   con la misma especificidad de prefijo (2 clases: .banacart-card-desc +
   .premium-divider) que las reglas del check normal de arriba (2 clases:
   .banacart-card-desc + pseudo-clase :not en el ul), pero declarado
   despues en el fichero, asi gana en caso de empate de especificidad sin
   necesitar !important. content:none en su ::before quita el check verde
   heredado; sin icono tematico tampoco (ver exclusion :not(.premium-divider)
   en el JS de products.tpl). Selector con el mismo ancestro
   "ul:not(.banacart-features)" que la regla del check de arriba (mismo
   conteo de clases) mas la clase .premium-divider de mas, para superar
   su especificidad (0,3,3 vs 0,2,3) sin !important. */
.banacart-card-desc ul:not(.banacart-features) li.premium-divider {
    padding: 0;
    margin: 14px 0 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--bt-text, #1B2430);
}

.banacart-card-desc ul:not(.banacart-features) li.premium-divider:first-child {
    margin-top: 0;
}

/* check-ok: quita el check verde "\2713" heredado de la regla generica del
   check (ver comentario arriba) sobre el <li> de encabezado de grupo
   (premium-divider): un encabezado de seccion no lleva icono de check,
   NO oculta ningun texto del <li> (el <span> del encabezado sigue
   visible, ver regla de abajo) */
.banacart-card-desc ul:not(.banacart-features) li.premium-divider::before {
    content: none;
    margin-right: 0;
}

.banacart-card-desc ul:not(.banacart-features) li.premium-divider span {
    font: inherit;
    color: inherit;
}

.banacart-card--featured .banacart-card-desc ul:not(.banacart-features) li.premium-divider {
    color: #FFFFFF;
}

/* ============================================================
   Iconos tematicos por palabra clave (banacart-li-ico): el JS de
   products.tpl anade la clase generica banacart-li-ico + una clase
   modificadora banacart-ico--* al <li> cuyo texto matchea una palabra
   clave (ver mapa documentado alli). Estas reglas SOLO se aplican
   cuando el JS corrio (progressive enhancement): sin JS, o si el texto
   no matchea ninguna palabra clave, el <li> conserva el check verde
   "\2713" de las reglas de arriba tal cual, sin cambio alguno.
   Todos los SVG son inline propios del tema (data: URI, cero peticiones
   de red, cero dependencia externa): se usan como mask-image en vez de
   background-image para poder teñirlos con background-color y reusar
   el mismo SVG en tarjeta normal (#00A876) y destacada (#4CDBAA), igual
   que ya hace el check "\2713" que sustituyen. Selectores repetidos con
   la clase .banacart-li-ico anadida para ganar especificidad sobre las
   reglas del check de las que parten (mismo prefijo + 1 clase de mas
   cada uno), sin usar !important. */

/* Contexto $product.features (ul.banacart-features, icono absoluto
   ocupando el hueco del check dentro del padding-left:26px del li). */
.banacart-features li.banacart-li-ico::before {
    content: "";
    width: 16px;
    height: 16px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: #00A876;
    font-weight: normal;
}

.banacart-card--featured .banacart-features li.banacart-li-ico::before {
    background-color: #4CDBAA;
}

/* Contexto featuresdesc (ul:not(.banacart-features), icono inline en vez
   de absoluto: ese <li> no reserva padding-left ni es position:relative). */
.banacart-card-desc ul:not(.banacart-features) li.banacart-li-ico::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 10px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: #00A876;
    font-weight: normal;
}

.banacart-card--featured .banacart-card-desc ul:not(.banacart-features) li.banacart-li-ico::before {
    background-color: #4CDBAA;
}

/* Formas SVG (viewBox 24x24, trazo simple estilo bt-icons, fill solido
   sobre fondo transparente: como mask-image solo importa el canal alfa,
   el color real lo pone background-color de arriba). data: URI con
   comillas simples dentro (el atributo CSS ya usa comillas dobles) y
   %23 en vez de # (obligatorio dentro de una data URI, si no se
   interpretaria como fragmento). Sin ningun recurso externo. */
.banacart-ico--ssl::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1a5 5 0 0 0-5 5v4H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm-3 9V6a3 3 0 0 1 6 0v4z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1a5 5 0 0 0-5 5v4H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm-3 9V6a3 3 0 0 1 6 0v4z'/></svg>");
}

.banacart-ico--backup::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 3h13l3 3v15a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm2 2v5h9V5H6zm3 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 3h13l3 3v15a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm2 2v5h9V5H6zm3 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/></svg>");
}

.banacart-ico--shield::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5z'/></svg>");
}

.banacart-ico--scan::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 2a8 8 0 1 0 4.9 14.32l5.39 5.39 1.41-1.41-5.39-5.39A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 2a8 8 0 1 0 4.9 14.32l5.39 5.39 1.41-1.41-5.39-5.39A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/></svg>");
}

.banacart-ico--server::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 3h20v6H2V3zm2 2v2h2V5H4zM2 11h20v6H2v-6zm2 2v2h2v-2H4zM2 19h20v2H2v-2z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 3h20v6H2V3zm2 2v2h2V5H4zM2 11h20v6H2v-6zm2 2v2h2v-2H4zM2 19h20v2H2v-2z'/></svg>");
}

.banacart-ico--bolt::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2 3 14h7l-1 8 10-12h-7z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2 3 14h7l-1 8 10-12h-7z'/></svg>");
}

.banacart-ico--headset::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3a8 8 0 0 0-8 8v6a3 3 0 0 0 3 3h1v-8H5v-1a7 7 0 0 1 14 0v1h-3v8h1a3 3 0 0 0 3-3v-6a8 8 0 0 0-8-8z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3a8 8 0 0 0-8 8v6a3 3 0 0 0 3 3h1v-8H5v-1a7 7 0 0 1 14 0v1h-3v8h1a3 3 0 0 0 3-3v-6a8 8 0 0 0-8-8z'/></svg>");
}

.banacart-ico--star::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.86L12 17.77l-6.18 3.23L7 14.14 2 9.27l6.91-1.01z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.86L12 17.77l-6.18 3.23L7 14.14 2 9.27l6.91-1.01z'/></svg>");
}

/* "wp" = WordPress generico (software que SI usamos en la flota, no una
   marca de terceros ajena): trazo propio tipo "W" del set bt-icons, NO
   el logo oficial de WordPress. */
.banacart-ico--wp::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 4l4 16h2l3-11 3 11h2l4-16h-2l-2.5 11L13 4h-2L8.5 15 6 4z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 4l4 16h2l3-11 3 11h2l4-16h-2l-2.5 11L13 4h-2L8.5 15 6 4z'/></svg>");
}

/* ===== FUNNEL BASE (paginas heredadas de standard_cart) ===== */
/* Navegacion de categorias fuera (igual que en products.tpl). Ver notas
   internas del repo (Notas B1) para el detalle de por que no hay nada
   que perder al ocultar el form de moneda del vendor aqui. Si algun dia
   se agrega otra moneda, verificar con invitado que el header del tema
   la ofrece antes de dar esto por cerrado de nuevo. */
/* check-ok: ver Notas B1 */
#order-standard_cart .cart-sidebar { display: none; }
/* check-ok: ver Notas B1 */
#order-standard_cart .sidebar-collapsed { display: none; }
#order-standard_cart .cart-body {
  /* width:100% y float:none duplican la regla del vendor en @media
     <1200px: deliberado, para que tambien aplique en >=1200px. */
  width: 100%;
  max-width: 1008px;      /* ancho de lectura del funnel (confproduct/viewcart/checkout); products va a ancho completo por decision de diseno */
  margin: 0 auto;
  float: none;
}
/* En pantallas anchas, 1008px era un tope pensado para UNA columna, pero
   estas paginas tienen DOS (contenido + resumen): el resumen se llevaba
   ~323px y dejaba el contenido en 655px, con ~86px muertos a cada lado en
   una ventana de 1444. Se sube el tope para que el contenido respire; el
   resumen mantiene su ancho y todo lo extra va a la columna de contenido. */
@media (min-width: 1200px) {
  #order-standard_cart .cart-body { max-width: 1320px; }
}
#order-standard_cart .cart-body .header-lined h1,
#order-standard_cart .cart-body .header-lined .font-size-36 {
  font-size: 28px;
  font-weight: 500;
  color: #1F2A44;
}
#order-standard_cart .cart-body .header-lined {
  border-bottom: 0;
  margin-bottom: 20px;
}
/* .sub-heading del vendor es un DIVISOR height:0 con span a top:-11px
   (all.css:156-179). Reset completo para convertirlo en heading real. */
#order-standard_cart .sub-heading,
#order-standard_cart .sub-heading-borderless {
  height: auto;
  border-top: 0;
  text-align: left;
  margin: 28px 0 14px;
}
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
  position: static;       /* mata el top:-11px del vendor */
  padding: 0 0 6px;
  color: #1F2A44;
  font-size: 17px;
  font-weight: 600;
  border-bottom: 2px solid #CFE0FF;
  /* El span lleva .primary-bg-color, que el tema padre pinta #f1f1f1 para
     TAPAR la linea divisoria del vendor. Sin esa linea, el fondo quedaba
     como un rectangulo gris detras del titulo. */
  background: transparent;
}
/* Azul de accion unificado al token del tema (decision del dueno 08-01,
   ver notas internas del repo "Unificacion de azul"): var(--bt-primary) es el mismo
   #1062FE de las tarjetas de planes de products.tpl (Tanda A/B), ya
   verificado disponible en :root de banatheme.css (banatheme.css carga
   SIEMPRE antes que este custom.css, confirmado en vivo en las 4 paginas
   del funnel). Fallback #1062FE literal por si algun dia custom.css se
   sirviera sin el tema (defensivo, hoy inalcanzable). Blanco sobre
   #1062FE da 5.00:1 (formula WCAG 2.1, relative luminance), por encima
   del 4.5:1 AA de texto normal. */
#order-standard_cart .btn-primary {
  background: var(--bt-primary, #1062FE);
  border-color: var(--bt-primary, #1062FE);
  color: #FFFFFF;          /* color explicito SIEMPRE, nunca heredado del vendor */
  border-radius: 8px;
}
/* Hover: mismo token --bt-primary-hover (#0B4FD6) que ya usa
   banatheme.css para el hover de .btn-primary/enlaces del tema (ver
   :root), en vez de un tono propio del funnel. Blanco sobre #0B4FD6 da
   6.77:1, muy por encima del 4.5:1 AA. */
#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-primary:focus {
  background: var(--bt-primary-hover, #0B4FD6);
  border-color: var(--bt-primary-hover, #0B4FD6);
  color: #FFFFFF;
}
/* Color de texto propio en reposo: var(--bt-primary) (#1062FE) sobre
   #FFFFFF da 5.00:1, YA cumple el 4.5:1 AA de texto normal (a diferencia
   del #4C7EDB anterior, que daba 3.95:1). Se mantiene #3056A8 igual (no
   var(--bt-primary)) por decision del dueno: es el azul oscuro que ya usa
   esta tanda para los importes (ver .panel-price/.total-due-today
   .amt/#totalCartPrice mas abajo) y da mas margen (6.95:1 sobre #FFFFFF,
   formula WCAG 2.1, relative luminance). */
#order-standard_cart .btn-default {
  background: #FFFFFF;
  border: 1px solid #D7DEEA;
  color: #3056A8;
  border-radius: 8px;
}
/* Color de texto propio en hover/focus: #1F2A44 (texto principal del
   tema, mismo tono que .cart-body .header-lined h1 mas arriba en este
   fichero) sobre #EEF4FE da 12.90:1 (formula WCAG 2.1, relative
   luminance), muy por encima del umbral. */
#order-standard_cart .btn-default:hover,
#order-standard_cart .btn-default:focus {
  background: #EEF4FE;
  border-color: var(--bt-primary, #1062FE);
  color: #1F2A44;
}

/* ===== B1 CONFIGURE (producto + dominio + resumen AJAX) ===== */
#order-standard_cart .product-info {
  background: #FFFFFF;
  border: 1px solid #E3E9F4;
  border-radius: 12px;
  padding: 20px 24px;
  color: #1F2A44;
}
#order-standard_cart .product-info .product-title { color: #1F2A44; font-weight: 600; }
/* Addons como mini-tarjetas: scope al wrapper para cubrir TAMBIEN los 3
   panel-addon de configuredomains (:77/:98/:119) */
#order-standard_cart .panel-addon {
  border: 1px solid #E3E9F4;
  border-radius: 12px;
  box-shadow: none;
  transition: border-color .15s ease;
}
#order-standard_cart .panel-addon:hover { border-color: var(--bt-primary, #1062FE); }
#order-standard_cart .panel-addon-selected { border-color: #2FA36B; background: #F4FBF7; color: #1F2A44; }
/* :hover pisaba el verde de seleccion con el azul generico de arriba:
   mismo verde que el borde de seleccion. */
#order-standard_cart .panel-addon-selected:hover { border-color: #2FA36B; }
/* Contraste AA: var(--bt-primary) (#1062FE, azul de accion del tema, ver
   .btn-primary arriba) sobre el fondo #e8e8e8 del vendor (.panel-price,
   all.css:311-314) da 4.08:1 a ~11.2px, por debajo del 4.5:1 AA de texto
   normal. Fondo propio blanco + azul mas oscuro de la misma familia:
   #3056A8 sobre #FFFFFF da 6.95:1 (formula WCAG 2.1, relative
   luminance) — ver notas internas del repo (Notas B1) para el detalle de
   colores probados. #3056A8 se mantiene sin cambio (no var(--bt-primary)):
   es texto pequeno de importe, no un color de accion. Fondo transparente: en la tarjeta
   seleccionada (.panel-addon-selected, fondo #F4FBF7) el #FFFFFF fijo
   dejaba un parche blanco encima del verde; #3056A8 sobre #F4FBF7 da
   ~6.7:1, sigue AA. */
#order-standard_cart .panel-addon .panel-price { background: transparent; color: #3056A8; font-weight: 600; }
/* Opciones de dominio como tarjetas seleccionables */
#order-standard_cart .domain-selection-options .option {
  border: 1px solid #E3E9F4;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #FFFFFF;
  color: #1F2A44;
}
/* Resaltado de la opcion elegida: la regla ".option"
   de arriba empata en especificidad con ".option-selected" del vendor
   (all.css:375-377) y gana por orden de cascada, anulando el resaltado.
   Selector propio de igual especificidad DESPUES de ".option" para ganar,
   con la paleta del tema en vez del #efefef del vendor. */
#order-standard_cart .domain-selection-options .option-selected {
  background: #EEF4FE;
  border-color: var(--bt-primary, #1062FE);
}
/* Costura visual del input-group "www." + campo de dominio: el
   .form-control de abajo redondea sus 4 esquinas y la izquierda queda
   pegada al addon. Ver notas internas del repo (Notas B1). */
#order-standard_cart #frmProductDomain .input-group .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* Ver notas internas del repo (Notas B1) para el inventario completo de
   elementos cubierto en cada form. #frmConfigureProduct se suma: iguala
   los inputs/selects de configureproduct.tpl (34px vendor) a los 44px de
   esta tanda; radios/checkboxes de configoption NO llevan .form-control
   ahi (verificado contra configureproduct.tpl:180/196/304), asi que no
   hace falta excluir nada. font-size: 16px (no 15px) para evitar el
   auto-zoom de iOS Safari en estos campos: header.tpl no trae
   maximum-scale en el viewport, asi que el auto-zoom del navegador sigue
   activo, y este es el primer campo que toca el cliente (busqueda de
   dominio). Mismo criterio ya aplicado en checkout (ver B3 mas abajo). */
#order-standard_cart #frmProductDomain .form-control,
#order-standard_cart #frmConfigureDomains .form-control,
#order-standard_cart #frmConfigureProduct .form-control {
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid #D7DEEA;
  font-size: 16px;
}
/* Resumen: tarjeta SOLO en .order-summary (en confproduct esta ANIDADO
   dentro de #orderSummary junto al boton Continuar — poner el borde en
   #orderSummary daria doble tarjeta y encerraria el boton) */
#order-standard_cart .order-summary {
  border: 1px solid #E3E9F4;
  border-radius: 12px;
  background: #FFFFFF;
  padding: 18px 20px;
  color: #1F2A44;
}
#order-standard_cart .order-summary h2 { font-size: 20px; color: #1F2A44; }
/* Spinner de carga del resumen: el vendor lo pinta
   con color:#efefef (all.css:500-507), pensado para su fondo oscuro #666
   original, invisible sobre el fondo blanco de esta tanda. Mismo nodo
   ".order-summary .loader" en confproduct Y viewcart, asi que esta unica
   regla arregla el spinner en ambas paginas. */
#order-standard_cart .order-summary .loader { color: var(--bt-primary, #1062FE); }
/* Contenido AJAX (ordersummary.tpl): tipografia base legible; SOLO el
   importe final va grande y azul. summary-totals contiene VARIAS filas
   (setup/recurring/impuestos) — nunca 20px a todo el bloque. */
#order-standard_cart #producttotal .product-name { color: #1F2A44; }
#order-standard_cart /* Dominio elegido, bajo el nombre del producto en el resumen. Mismo trato
   visual que .item-domain del carrito para que las 2 pantallas coincidan. */
#order-standard_cart .order-summary .product-domain {
  display: block;
  color: #5A6472;
  font-size: 13px;
  margin-top: 2px;
  word-break: break-all;
}
#producttotal .product-group { color: #5A6070; font-size: 13px; }
#order-standard_cart #producttotal .summary-totals {
  font-size: 14px;
  color: #1F2A44;
}
/* Declaracion muerta corregida: el vendor pinta este borde/
   padding con mayor especificidad (#order-standard_cart .order-summary
   .summary-totals, all.css:486-491) y ganaba siempre sobre el
   "#producttotal .summary-totals" de arriba. Mismo selector que el vendor
   para empatar especificidad y ganar por orden de cascada (custom.css
   carga despues). */
#order-standard_cart .order-summary .summary-totals {
  border-top: 1px solid #E3E9F4;
  padding-top: 12px;
  border-bottom: 1px solid #E3E9F4;
  padding-bottom: 12px;
}
/* Importe final: ver notas internas del repo (Notas B1) para la evidencia AJAX que confirma
   que .total-due-today > .amt vive FUERA de .summary-totals (tambien
   ordersummary.tpl:55-58/:175-178). Declaracion muerta corregida: el
   selector viejo "#producttotal .total-due-today .amt" perdia el
   font-size contra el del vendor (#order-standard_cart .order-summary
   .total-due-today .amt, all.css:496-498, mayor especificidad). Mismo
   selector que el vendor para empatar y ganar por orden. 22px queda algo
   por debajo del 2.3em del vendor (a proposito: uniforme con el resto de
   la tipografia de esta tanda en vez de heredar la escala relativa).
   Azul mas oscuro de la misma familia (#3056A8, no var(--bt-primary) de
   accion, ver "Unificacion de azul" en notas internas del repo): 6.95:1 sobre el blanco
   de la tarjeta, es el numero mas importante de las 2 paginas y
   necesita margen sobrado sobre el 4.5:1 AA. */
#order-standard_cart .order-summary .total-due-today .amt {
  font-size: 22px;
  color: #3056A8;
  font-weight: 700;
}

/* ===== B2 VIEWCART (items + resumen PROPIO de viewcart.tpl) ===== */
/* Filas de producto/addon/dominio del carrito como mini-tarjetas.
   El vendor da fondo blanco/gris cebra por fila (nth-child even) y
   border-left/right:0 en .item (ver notas internas del repo, Notas B2):
   redeclaramos fondo TAMBIEN en la fila par para que la cebra del vendor
   no tape el fondo propio (misma especificidad, pero el nth-child del
   vendor gana por tener un selector mas especifico que .item a secas). */
#order-standard_cart .view-cart-items .item {
  background: #FFFFFF;
  border: 1px solid #E3E9F4;
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 16px 20px;
  color: #1F2A44;
}
#order-standard_cart .view-cart-items .item:nth-child(even) {
  background: #FFFFFF;
}
#order-standard_cart .view-cart-items .item-group {
  color: #5F6673;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
/* Dominio de la fila: el vendor lo pinta con su teal de marca #056
   (all.css:731-733), fuera de la paleta del tema y bajo AA (4.25:1 sobre
   el blanco propio de .item). Mismo gris de texto secundario que el
   resto de metadatos de la fila. */
#order-standard_cart .view-cart-items .item-domain {
  color: #5F6673;
}
/* Tabs promo/impuestos: mismo patron de pestanas de View Ticket, pero
   con los selectores REALES del vendor (ver notas internas del repo,
   Notas B2) — la marca activa la da el core via atributos aria
   (aria-expanded/aria-selected segun tema), no una clase .active en el
   <li>. SOLO color/tipografia/borde, cero display/visibility (las
   .tab-pane las conmuta el JS del core). Se anade ademas a.active como
   selector adicional (misma especificidad) para cubrir el caso en que
   el JS del core marque la pestana con esa clase en vez de/ademas de
   aria-*, sin depender solo del atributo. */
#order-standard_cart .view-cart-tabs .nav-tabs a {
  color: #5F6673;
}
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a.active {
  color: #3056A8;
  border-bottom-color: #3056A8;
  font-weight: 600;
}
/* Cabecera de la lista de items: el vendor la pinta con su azul de marca
   #058 sobre texto blanco (all.css:699-706); paleta propia (mismo gris
   claro que el resto del chrome de tarjeta). #757B87 sobre este fondo
   claro cae a 4.03:1 (<4.5 AA), por eso se usa #5F6673 (5.48:1). */
#order-standard_cart .view-cart-items-header {
  background: #F7F9FC;
  color: #5F6673;
  border-radius: 8px 8px 0 0;
}
#order-standard_cart .view-cart-items {
  border-bottom: 0;
}
/* Resumen propio de viewcart (ver notas internas del repo, Notas B2):
   filas subtotal/descuento/impuestos legibles. El total final grande y
   azul (.total-due-today .amt) YA lo pinta la seccion B1 de arriba con
   el MISMO selector (mismo nodo #orderSummary compartido) — no se
   repite aqui. */
/* Sin caja-dentro-de-caja: el vendor envuelve TODO el resumen (viewcart
   Y confproduct, mismo nodo #producttotal.summary-container) en un
   fondo gris propio (#f8f8f8, all.css:467-473) que aqui ya vive DENTRO
   de la tarjeta blanca de .order-summary — quitarlo evita la caja
   gris anidada en ambas paginas. */
#order-standard_cart .order-summary .summary-container {
  font-size: 14px;
  color: #1F2A44;
  background: transparent;
  padding: 0;
}
#order-standard_cart .order-summary .subtotal {
  padding: 4px 0;
  border-bottom-color: #E3E9F4;
}
#order-standard_cart .order-summary .bordered-totals {
  border-top: 1px solid #E3E9F4;
  border-bottom: 1px solid #E3E9F4;
  margin: 8px 0;
  padding: 8px 0;
}
#order-standard_cart .order-summary .recurring-totals {
  font-size: 13px;
}
/* Importes recurrentes: el vendor los pinta con #777 (all.css), que sobre
   el fondo blanco propio de .order-summary da 4.48:1, por debajo del
   4.5:1 AA de texto normal. #5F6673 (mismo gris que el resto del chrome
   de esta tanda, ver .item-group/.item-domain arriba) da 5.78:1. */
#order-standard_cart .order-summary .recurring-charges {
  color: #5F6673;
}

/* ===== B3 CHECKOUT (solo CSS; checkout.tpl y complete.tpl, y su JS,
   son INTOCABLES) ===== */
#order-standard_cart #frmCheckout {
  max-width: 760px;
  margin: 0 auto;
}
/* En pantallas anchas el checkout se quedaba en 760px mientras el resto del
   funnel ya usa 1320: se veia estrecho y descolgado del conjunto. Se sube a
   960, que es lo que admite un formulario de una columna sin que las lineas
   se hagan incomodas de leer (a 1320 los campos quedarian larguisimos). */
@media (min-width: 1200px) {
  #order-standard_cart #frmCheckout { max-width: 960px; }
}
/* Mismo lenguaje tipografico que B1, subido en fase 1 del checkout a
   46px/radio 9 (antes 44px/8) para casar con el mockup aprobado por el
   dueno: font-size: 16px evita el auto-zoom de iOS Safari en campos con
   font-size < 16px (header.tpl no trae maximum-scale en el viewport).
   Mayor especificidad que el vendor (#order-standard_cart .field/
   .form-control, all.css:616-627, (1,1,0) cada uno) via el id del form +
   2 clases/1 clase+tipo: gana sin depender del orden de carga. */
#order-standard_cart #frmCheckout .field.form-control,
#order-standard_cart #frmCheckout input.form-control,
#order-standard_cart #frmCheckout select.form-control {
  min-height: 46px;
  border-radius: 9px;
  border: 1px solid #D7DEEA;
  font-size: 16px;
}
/* Foco: borde azul del tema + halo suave (mismo token var(--bt-primary) que
   el resto del funnel, ver "Unificacion de azul" en notas internas del
   repo). #1062FE sobre #FFFFFF (borde) = 5.00:1, ya verificado ahi mismo;
   el halo es decorativo (rgba, sin texto encima), no requiere ratio AA. */
#order-standard_cart #frmCheckout .field.form-control:focus,
#order-standard_cart #frmCheckout input.form-control:focus,
#order-standard_cart #frmCheckout select.form-control:focus {
  border-color: var(--bt-primary, #1062FE);
  box-shadow: 0 0 0 3px rgba(16, 98, 254, .14);
  outline: 0;
}
/* Alto contraste forzado (Windows "forced-colors", p.ej. High Contrast
   Mode): el navegador descarta box-shadow en ese modo, asi que el halo
   de arriba desaparece y solo quedaria border-color -- insuficiente como
   indicador de foco por si solo. Se restituye un outline real (que
   forced-colors SI respeta y recolorea con el color de sistema
   "Highlight") solo en ese modo, sin tocar el look normal (outline:0
   arriba sigue aplicando fuera de forced-colors). */
@media (forced-colors: active) {
  #order-standard_cart #frmCheckout .field.form-control:focus,
  #order-standard_cart #frmCheckout input.form-control:focus,
  #order-standard_cart #frmCheckout select.form-control:focus {
    outline: 2px solid;
    outline-offset: 2px;
  }
}
/* #totalDueToday (checkout.tpl:571-573) es un alert-success DISTINTO del
   ".total-due-today .amt" de B1/B2 (ese vive en confproduct/viewcart,
   markup compartido de #orderSummary; este es propio de checkout, id +
   strong#totalCartPrice). Ya lo suaviza banatheme.css (.bt-body
   .alert-success, verde translucido) pero seguimos pisando las TRES
   propiedades de color (fondo/borde/texto) para la tarjeta blanca propia
   de esta tanda, en vez de heredar el verde. Contraste AA: #1F2A44 sobre
   #FFFFFF = 14.26:1. */
#order-standard_cart #frmCheckout #totalDueToday {
  background: #FFFFFF;
  border: 1px solid #CFE0FF;
  border-radius: 14px;
  color: #1F2A44;
  font-size: 16px;
  padding: 18px 20px;
  /* Sombra suave, mismo lenguaje de "tarjeta destacada" que el resto de
     cards de fase 1 (ver seccion "Tanda checkout-1" mas abajo);
     decorativa, no afecta contraste de texto. */
  box-shadow: 0 1px 2px rgba(16, 36, 80, .05), 0 8px 24px rgba(16, 36, 80, .05);
}
/* #3056A8 (no var(--bt-primary) de accion, ver "Unificacion de azul" en
   notas internas del repo) para el importe: mismo azul oscuro que ya usa B1 en
   ".total-due-today .amt" para el numero mas importante de la pagina —
   uniforma el "importe grande" en todo el funnel. 6.95:1 sobre blanco
   (ver notas internas del repo, Notas B1); var(--bt-primary) en cambio
   da 5.00:1 sobre blanco a este tamano (24px/700 no llega a "texto
   grande" AA salvo con peso realmente bold >=700 Y >=18.66px — aqui SI
   es 700, pero por margen de seguridad se prefiere el tono que ya pasa
   el umbral de texto normal). */
#order-standard_cart #frmCheckout #totalCartPrice {
  color: #3056A8;
  font-size: 24px;
  font-weight: 700;
}
/* Pasarelas como radio-cards. El markup real es
   #paymentGatewaysContainer > .text-center > label.radio-inline > input
   (checkout.tpl:594-611). Scoping honesto en UNA sola regla — ver notas
   internas del repo (Notas B3) para el detalle de por que la version
   anterior separaba el display:block del resto y por que ya no hace
   falta. text-align:left va AQUI (no en una regla aparte sobre
   .text-center): .text-center pinta text-align:center vía el bootstrap
   del tema padre (no versionado en este repo, no viene de all.css/
   all.min.css). text-align es una propiedad HEREDADA: un valor
   DECLARADO en el hijo (label.radio-inline) siempre gana a uno heredado
   del ancestro, con o sin !important en el ancestro — por eso basta con
   declararlo aqui, sin depender de especificidad ni de !important propio.
   Solo hay 4 label.radio-inline en todo checkout.tpl
   (:82/:116 selector de cuenta existente, :599 pasarelas, :648 "nueva
   tarjeta"); las otras 3 vuelven a su display NATURAL del vendor
   (inline-block, sin cambio de esta tanda) al quedar el scoping honesto
   solo bajo #paymentGatewaysContainer — verificado que ninguna de las 3
   dependia del display:block suelto (viven dentro de un contenedor tipo
   tarjeta propio del vendor, .account, o de un <li>). El input NUNCA se
   toca (fuera de esta regla, sigue con su tamano/posicion nativa del
   navegador). */
#order-standard_cart #paymentGatewaysContainer label.radio-inline {
  display: block;
  text-align: left;
  border: 1px solid #E3E9F4;
  border-radius: 11px;
  padding: 14px 16px;
  margin: 0 0 10px;
  background: #FFFFFF;
  color: #1F2A44;
  cursor: pointer;
  /* transition solo de color/sombra (nunca display/opacity/transform, que
     son props NIVEL 1 vetadas incondicionalmente sobre este selector). */
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
/* Hover != seleccionado: azul mas claro en hover (respuesta al puntero
   sin confundirse con el estado realmente elegido). */
#order-standard_cart #paymentGatewaysContainer label.radio-inline:hover {
  border-color: #A9C4F0;
}
/* Estado seleccionado: el core no marca ninguna clase en el label al
   marcar el radio, asi que se usa :has() (mismo patron ya usado en
   banatheme.css, ver notas internas del repo, Notas B3) en vez de
   depender de JS propio. Fase 1: se suma una sombra suave (mismo
   lenguaje que el resto de tarjetas de esta pasada) para que "elegido"
   se lea con mas peso que "hover", sin tocar props vetadas. */
#order-standard_cart #paymentGatewaysContainer label.radio-inline:has(input:checked) {
  border-color: var(--bt-primary, #1062FE);
  background: #EEF4FE;
  box-shadow: 0 2px 8px rgba(16, 98, 254, .12);
}
/* Logos/iconos de pasarela (pedido del dueno: "se vea mas professional").
   checkout.tpl NO se puede sobrescribir (WHMCS compila el del vendor via
   ionCube), asi que todo va por CSS puro con ::before sobre el MISMO
   label.radio-inline de arriba, igual patron que .banacart-li-ico de
   products.tpl mas arriba en este fichero (mask-image data: URI + tenido
   via background-color, cero peticiones de red, cero dependencia
   externa). NINGUN SVG reproduce un logotipo corporativo real: son formas
   genericas (tarjeta / cartera / flechas de intercambio) con el MISMO
   nivel de detalle que el resto del set bt-icons propio del tema — el
   nombre real de la pasarela sigue siendo el texto plano del vendor
   ({$gateway.name}, checkout.tpl:609), que esta regla NUNCA toca.
   Identificacion de cada pasarela (checkout.tpl:598-611): el <input>
   lleva value="{$gateway.sysname}" (modulo WHMCS) y class="payment-methods
   is-credit-card" cuando $gateway.type es "CC". No hay acceso al listado
   real de gateways activos en produccion desde este repo, asi que se
   cubren los sysname conocidos de los modulos WHMCS que el dueno reporto
   ver en la pagina real (Credit Card, PayPal, Credit Card - Stripe,
   2CheckOut) via substring case-insensitive sobre value, MAS un icono de
   pasarela GENERICO por defecto para cualquier value que no matchee
   ninguno de los conocidos (nunca se queda sin icono). El default se
   declara PRIMERO y los mas especificos DESPUES en el mismo nivel de
   especificidad (id+clase+pseudo-clase en ambos), asi que la cascada de
   orden de aparicion resuelve el override sin necesitar mas especificidad
   ni !important. */
#order-standard_cart #paymentGatewaysContainer label.radio-inline::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  vertical-align: middle;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: #5A6B8C;
  /* Fallback generico (cualquier pasarela no cubierta abajo): forma de
     tarjeta simple sin marca (rect + franja superior + franja inferior
     corta, mismo estilo de trazo solido que .banacart-ico--* de arriba). */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18a1 1 0 0 1 1 1v2H2V6a1 1 0 0 1 1-1zm-1 5h20v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8zm3 5h6v2H5v-2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18a1 1 0 0 1 1 1v2H2V6a1 1 0 0 1 1-1zm-1 5h20v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8zm3 5h6v2H5v-2z'/></svg>");
}
/* Tarjeta de credito explicita ("Credit Card" y "Credit Card - Stripe":
   ambas llevan class="is-credit-card" via $gateway.type eq "CC",
   checkout.tpl:606, sin depender de adivinar el sysname exacto del modulo
   de Stripe/Authorize.net/etc.). Mismo icono que el fallback: se deja
   explicito para que quede documentado y sobreviva si el fallback cambia
   de forma en el futuro. */
#order-standard_cart #paymentGatewaysContainer label.radio-inline:has(input.is-credit-card)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18a1 1 0 0 1 1 1v2H2V6a1 1 0 0 1 1-1zm-1 5h20v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8zm3 5h6v2H5v-2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18a1 1 0 0 1 1 1v2H2V6a1 1 0 0 1 1-1zm-1 5h20v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8zm3 5h6v2H5v-2z'/></svg>");
}
/* PayPal (value del modulo WHMCS "paypal", nombre visible "PayPal"):
   icono de cartera generico (rectangulo + broche circular), NO el
   logotipo oficial de PayPal (letra "P" doble sobre fondo azul/amarillo
   con tipografia propia registrada) — el nombre de marca lo sigue dando
   el texto plano de al lado. */
#order-standard_cart #paymentGatewaysContainer label.radio-inline:has(input[value*="paypal" i])::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 6h13a3 3 0 0 1 3 3v1h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm13 5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 6h13a3 3 0 0 1 3 3v1h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm13 5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z'/></svg>");
}
/* 2CheckOut (nombre visible "2CheckOut"): el sysname real de este modulo
   en produccion es "tco" (verificado en tblorders.paymentmethod, pedido
   #801903453 del 02-08 17:32) y NO "2checkout"/"twocheckout" como se
   asumio antes -- por eso el icono nunca aparecia. Se usa IGUALDAD exacta
   ([value="tco" i]), no substring ([value*="tco" i]): "tco" son solo 3
   letras y con *= casaria por accidente con cualquier otro sysname que
   las contenga como subcadena (p.ej. algo como "authorize-tco-x"); como
   el <input> lleva value="{$gateway.sysname}" completo (checkout.tpl:598,
   ver comentario mas arriba), el sysname siempre es exactamente "tco" y
   la igualdad exacta no pierde nada frente al substring. Se conservan
   ademas "2checkout"/"twocheckout" por si en algun otro entorno (staging,
   otra cuenta WHMCS) el modulo estuviera configurado con ese sysname
   distinto -- no cuesta nada tenerlos y evita que ese entorno se quede
   sin icono. Icono de flechas de intercambio/refresh generico (concepto
   "procesar pago/checkout"), NO el logotipo oficial de 2Checkout/Verifone. */
#order-standard_cart #paymentGatewaysContainer label.radio-inline:has(input[value="tco" i])::before,
#order-standard_cart #paymentGatewaysContainer label.radio-inline:has(input[value*="2checkout" i])::before,
#order-standard_cart #paymentGatewaysContainer label.radio-inline:has(input[value*="twocheckout" i])::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 3v4h-4a6 6 0 0 0-6 6h2a4 4 0 0 1 4-4h4v4l5-5-5-5zM7 21v-4h4a6 6 0 0 0 6-6h-2a4 4 0 0 1-4 4H7v-4l-5 5 5 5z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 3v4h-4a6 6 0 0 0-6 6h2a4 4 0 0 1 4-4h4v4l5-5-5-5zM7 21v-4h4a6 6 0 0 0 6-6h-2a4 4 0 0 1-4 4H7v-4l-5 5 5 5z'/></svg>");
}
/* Tinte del icono en el estado seleccionado: mismo azul de marca que ya
   usa border-color/box-shadow arriba, para que "elegido" se lea con el
   mismo lenguaje visual en el icono y no solo en el borde. */
#order-standard_cart #paymentGatewaysContainer label.radio-inline:has(input:checked)::before {
  background-color: var(--bt-primary, #1062FE);
}
/* #applyCreditContainer (checkout.tpl:575-591): el vendor le pinta gris
   plano propio (all.css:537-541, fondo #eee sin borde) que desentonaba
   con el resto del funnel ya vestido de esta tanda -- era el UNICO
   bloque del checkout sin vestir (nuestra cuenta de prueba nunca tuvo
   saldo a favor para verlo). Mismo lenguaje que .cc-input-container
   (blanco + #E3E8F0 + 14px + sombra 0 1px 2px+0 8px 24px de
   rgba(16,36,80,.05)); el ID basta de sobra contra la clase del vendor
   (0,1,1,0 vs 0,0,1,0), sin !important. NUNCA se toca display/visibility
   (los spans w-hidden los conmuta el JS del core segun el saldo
   disponible), ni se reduce tamano/contraste de las dos opciones: son
   radios de consentimiento sobre dinero (aplicar credito o no) y deben
   quedar igual de legibles que antes. */
#order-standard_cart #applyCreditContainer {
  background: #FFFFFF;
  border: 1px solid #E3E8F0;
  border-radius: 14px;
  padding: 18px 20px;
  color: #1F2A44;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(16, 36, 80, .05), 0 8px 24px rgba(16, 36, 80, .05);
}
/* Cada opcion como mini radio-card, mismo patron que las pasarelas de
   pago (#paymentGatewaysContainer label.radio-inline mas arriba en este
   fichero): borde suave + fondo blanco en reposo, azul claro en hover,
   y el seleccionado se distingue con :has(input:checked) igual que una
   pasarela elegida -- consistencia de "que opcion esta marcada" en todo
   el checkout. padding-left/right se dejan en el valor del vendor
   (all.css:545-548, 20px) porque ahi vive el icono iCheck que reemplaza
   al radio nativo (.iradio_square-blue); solo se suma padding vertical y
   el resto de props de tarjeta. Color/tamano de texto NO se tocan
   (siguen en #1F2A44/14px, mismo contraste AA que el resto del funnel:
   14.26:1 sobre blanco, 12.90:1 sobre #EEF4FE en el estado marcado). */
#order-standard_cart #applyCreditContainer label.radio {
  display: block;
  border: 1px solid #E3E9F4;
  border-radius: 10px;
  padding: 10px 20px;
  margin: 8px 0 0;
  background: #FFFFFF;
  color: #1F2A44;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
#order-standard_cart #applyCreditContainer label.radio:hover {
  border-color: #A9C4F0;
}
#order-standard_cart #applyCreditContainer label.radio:has(input:checked) {
  border-color: var(--bt-primary, #1062FE);
  background: #EEF4FE;
  box-shadow: 0 2px 8px rgba(16, 98, 254, .12);
}
/* CTA final (checkout.tpl:780). Hereda background/border-color de
   ".btn-primary" (FUNNEL BASE, var(--bt-primary)) — no se repiten aqui. Estado
   :disabled ($cartitems==0, caso borde ya que esta pagina exige carrito
   no vacio para entrar): sin regla CSS propia del vendor/tema en esta
   pagina, asi que aplica el opacity:.65 por defecto del framework de
   botones cargado por el tema — WCAG 1.4.3 excluye explicitamente los
   componentes inactivos del requisito de contraste, y el atenuado sigue
   siendo visualmente distinguible del estado activo (no se toca). */
#order-standard_cart #btnCompleteOrder {
  min-height: 52px;
  font-size: 17px;
  font-weight: 600;
  color: #FFFFFF;
  /* Ancho completo del bloque contenedor (.text-center, checkout.tpl:767):
     antes el boton se ajustaba a su propio contenido, angosto y perdido
     dentro del bloque centrado; a 100% se lee como el CTA principal de la
     tarjeta de pago, igual que en el mockup aprobado. Pero ".text-center"
     vive a nivel de FORMULARIO (todo #frmCheckout, hasta 960px en
     pantallas anchas), no dentro de una columna estrecha como en el
     mockup: sin limite, el boton se estiraba a ~880px de ancho, una
     barra gigante. max-width + margin:0 auto lo recentran a un ancho de
     boton normal en escritorio sin perder el 100% que lo hace ocupar
     todo el ancho disponible en movil (el max-width no actua por debajo
     de 420px). */
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  /* box-sizing: border-box explicito, misma razon que #frmCheckout arriba
     en este fichero -- sin esto el padding de .btn-lg se sumaria por
     fuera de los 420px si el Bootstrap del tema padre no trae reset
     global border-box. */
  box-sizing: border-box;
}
/* Complete (complete.tpl:19): el markup real es "alert alert-info
   order-confirmation" (NO alert-success). Paleta NEUTRA azul (no verde de
   exito): esta misma tarjeta (mismo selector, sin variante propia por
   estado) tambien pinta los mensajes de NO-pagado/error del flujo de
   pago asincronico (ver notas internas del repo, Notas B3), asi que un
   verde de "exito" mentiria en esos casos. Mismo azul de acento suave que
   el resto del funnel (#EEF4FE/#CFE0FF, ya usados en tarjetas de
   producto/addon seleccionado y en el aviso de #totalDueToday).
   Contraste: #1F2A44 sobre #EEF4FE = 12.90:1. */
#order-standard_cart .order-confirmation {
  background: #EEF4FE;
  border: 1px solid #CFE0FF;
  border-radius: 12px;
  color: #1F2A44;
}
#order-standard_cart .order-confirmation span {
  color: #1F2A44;
  font-weight: 600;
}

/* ============================================================
   Tanda C (configureproduct.tpl): selector de periodo en tarjetas
   (patron D) + franja de cierre. Radios REALES en el markup (nunca
   opacity/position-hidden EN ESTE CSS -- el check estatico los veta y
   con razon, ver checks/css-comment-check.py) -- PERO en runtime iCheck
   (JS del vendor, fuera del alcance de este CSS/check) los oculta y
   pinta su propio sprite de todos modos; ver la nota "INERTE EN
   RUNTIME" sobre .banacart-cycle-radio mas abajo (fix gate C1, punto C)
   para el detalle honesto de que aplica y que no. Paleta: azul de accion
   var(--bt-primary,#1062FE) (ya usado en .banacart-price-amount con
   ratio 5.00:1 sobre blanco), verde #0F9D66 reservado para acentos NO
   textuales (borde/franja de la tarjeta recomendada: blanco sobre
   #0F9D66 = 3.48:1, cumple el umbral de 3:1 de WCAG 1.4.11 para
   componentes de UI, pero NO el 4.5:1 de texto normal) -- el TEXTO del
   badge de ahorro usa #0B7A50 sobre fondo #E7F7F0 (4.84:1, AA texto
   normal), tinte derivado del mismo verde. Mismo radio/borde/sombra que
   .banacart-card (16px, #E3E8F0, sombra 0 1px 3px rgba(23,26,46,.06)).

   Gris de texto secundario (.banacart-cycle-total / .banacart-cycle-amount
   small / .banacart-cycle-closer-label): la tarjeta activa
   (:has(.banacart-cycle-radio:checked), ver mas abajo) y la franja de
   cierre pintan fondo #EEF4FE, no blanco. var(--bt-text-3, #6B7280) da
   4.35:1 sobre #EEF4FE (formula WCAG 2.1, relative luminance) -- por
   debajo del 4.5:1 AA de texto normal, aunque SI cumple sobre blanco
   (4.83:1). Se usa #5A6472 fijo (no la variable del tema, que sigue
   siendo #6B7280 para el resto del sitio) en las 3 reglas: 5.43:1 sobre
   #EEF4FE y 6.00:1 sobre blanco, AA en ambos fondos con margen. */
/* 3 columnas fijas: con auto-fit, 6 ciclos caian siempre en 2 filas
   desiguales segun el ancho disponible. Fijandolo quedan 3+3 parejas y
   las tarjetas crecen con el contenedor en vez de dejar huecos. */
#order-standard_cart .banacart-cycle-cards {
    display: grid;
    /* minmax(0,1fr) y no 1fr: con 1fr el badge "Recomendado" de una tarjeta
       ensancha su columna y, al compartirse las pistas entre filas, las 3
       columnas salian desiguales en anchos intermedios. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 8px 0 0;
}
@media (max-width: 767px) {
  #order-standard_cart .banacart-cycle-cards { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #order-standard_cart .banacart-cycle-cards { grid-template-columns: repeat(2, 1fr); }
}

#order-standard_cart .banacart-cycle-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bt-surface, #FFFFFF);
    border: 1px solid #E3E8F0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(23, 26, 46, .06);
    padding: 14px 14px 12px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#order-standard_cart .banacart-cycle-card:hover {
    border-color: #CFE0FF;
    box-shadow: 0 4px 12px rgba(23, 26, 46, .10);
}

/* Estado activo (radio marcado): borde+fondo azules del mismo azul de
   accion del resto del funnel, mismo criterio que .banacart-cycle-pill--active. */
#order-standard_cart .banacart-cycle-card:has(.banacart-cycle-radio:checked) {
    border-color: var(--bt-primary, #1062FE);
    background: #EEF4FE;
}

/* Recomendada: acento verde en el borde superior, NUNCA como color de
   texto (ver nota de contraste en la cabecera de esta seccion). :has()
   soportado en los navegadores objetivo del tema (mismo selector ya
   usado arriba para el estado activo); sin soporte, la tarjeta
   simplemente no pinta el borde superior verde -- degrada a tarjeta
   normal, no rompe nada. */
#order-standard_cart .banacart-cycle-card--recommended {
    border-top: 3px solid #0F9D66;
    padding-top: 12px;
}

#order-standard_cart .banacart-cycle-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* INERTE EN RUNTIME (fix gate C1, punto C -- verificado con el harness
   del sec-auditor): en cuanto iCheck inicializa el radio (siempre, mas
   tarde o mas temprano -- ver landmine en configureproduct.tpl y en
   BASE.md) le pone opacity:0 + position:absolute + 140%x140% via JS
   inline y pinta su propio sprite <div class="iradio_square-blue"> por
   delante; accent-color/width/height de esta regla dejan de tener
   efecto visual alguno porque el <input> nativo ya no se ve. Se
   mantiene la regla (no es incorrecta, es honesta con lo que el radio
   "deberia" verse) solo como red de seguridad si iCheck no llegara a
   cargar (JS bloqueado/error), pero NO se puede asumir que "gana"
   nunca en un carrito real -- el affordance del control en produccion
   lo da el sprite de iCheck + el estilo de tarjeta activa
   (:has(.banacart-cycle-radio:checked) mas abajo), no esta regla. */
#order-standard_cart .banacart-cycle-radio {
    accent-color: var(--bt-primary, #1062FE);
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
}

#order-standard_cart .banacart-cycle-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bt-text, #1B2430);
}

#order-standard_cart .banacart-cycle-tag {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #0B7A50;
    background: #E7F7F0;
    border-radius: 999px;
    white-space: nowrap;
}

#order-standard_cart .banacart-cycle-amount {
    font-size: 20px;
    font-weight: 800;
    color: var(--bt-primary, #1062FE);
    line-height: 1.15;
}

#order-standard_cart .banacart-cycle-amount small {
    font-size: 12px;
    font-weight: 500;
    color: #5A6472;
}

#order-standard_cart .banacart-cycle-total {
    display: block;
    font-size: 12px;
    color: #5A6472;
}

#order-standard_cart .banacart-cycle-save {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 2px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #0B7A50;
    background: #E7F7F0;
    border-radius: 999px;
    white-space: nowrap;
}

/* Franja de cierre: banda contigua debajo de las tarjetas, mismo tono
   de fondo suave azul ya usado en .order-confirmation (#EEF4FE/#CFE0FF)
   -- NEUTRA, sin connotacion de exito/error, solo resumen informativo. */
#order-standard_cart .banacart-cycle-closer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
    margin: 14px 0 0;
    padding: 12px 16px;
    background: #EEF4FE;
    border: 1px solid #CFE0FF;
    border-radius: 10px;
    font-size: 13px;
    color: var(--bt-text, #1B2430);
}

/* check-ok: la franja se renderiza SIEMPRE con el atributo `hidden` (ver
   fix gate C1, punto B en configureproduct.tpl -- espejo del resumen del
   vendor, nunca numeros propios) y el JS propio quita ese atributo solo
   cuando encuentra datos reales del vendor; hasta entonces se oculta a
   proposito para no mostrar una franja vacia o con numeros inventados.
   No es un input/control del vendor (no hay nada que ocultarle al
   usuario para forzar un envio), es contenido informativo propio de
   esta tanda. `display:flex` de la regla de arriba, al compartir el
   mismo selector base con mas especificidad de clase que la regla UA de
   `[hidden]`, GANABA y anulaba el ocultamiento -- landmine clasica de
   CSS. Selector con el atributo explicito para recuperar el
   ocultamiento sin depender del orden de cascada. */
#order-standard_cart .banacart-cycle-closer[hidden] {
    display: none;
}

#order-standard_cart .banacart-cycle-closer-today,
#order-standard_cart .banacart-cycle-closer-after {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

#order-standard_cart .banacart-cycle-closer-label {
    color: #5A6472;
}

#order-standard_cart .banacart-cycle-closer-amount {
    font-size: 16px;
    font-weight: 800;
    color: var(--bt-primary, #1062FE);
}

/* ============================================================
   Tanda C -- dominios (configuredomains.tpl, fork en
   _deploy-orderforms/banacart/). Redisenado 08-02 tras feedback directo
   del dueno: "mas reducido, que el cliente pueda entender mejor, claras"
   -- las 3 tarjetas grandes en columna pasan a 3 FILAS compactas
   apiladas dentro de .banacart-addon-list (clase NUEVA, propia del fork,
   ver configuredomains.tpl), alto objetivo ~56-64px por fila.

   Scoping deliberado en dos capas para no tocar configureproduct.tpl
   (comparte .panel-addon/.panel-addon-selected/.panel-add/.panel-price
   con esta pantalla, ver comentario de B1 CONFIGURE arriba, linea ~922):
   - Las reglas de COLOR de accion (.panel-add azul/verde) se dejan SIN
     scope adicional (#order-standard_cart .panel-addon .panel-add):
     misma correccion de "el verde no es un color de accion" aplica
     igual de bien al mismo bug en configureproduct.tpl (comparten el
     verde fijo del vendor, #5cb85c, all.css:315-328) -- unificarlo no
     rompe nada ahi, lo arregla tambien.
   - Las reglas de LAYOUT (fila compacta, texto en columna, position del
     check) SI van con el prefijo ".banacart-addon-list" para no
     convertir en fila las tarjetas-columna de configureproduct.tpl
     (fuera de alcance de esta tanda, sin revisar ese impacto).

   - .panel-add (el CTA "+ Add to Cart" / "Added to Cart (Remove)" que
     registerAddonEvents() en scripts.js:4977 pinta via
     jQuery(document).on('ifChecked'/'ifUnchecked', ...), con el texto
     corto propio de este fork via _localLang -- ver configuredomains.tpl)
     seguia con el fondo verde FIJO del vendor en AMBOS estados: azul de
     accion en reposo, verde SOLO cuando esta seleccionado.
   - Precio (.banacart-addon-price) prominente; variante --free para el
     caso "Gratis" (deteccion defensiva de texto, ver comentario en el
     .tpl, degrada a mostrar el precio tal cual si el formato real no
     coincide).
   - Marca de check en la fila seleccionada: Unicode puro (\2713, tick),
     nunca un glifo de icon-font inyectado por content (sin evidencia en
     este repo de que familia/peso de Font Awesome resuelve por content
     en CSS -- un glifo mal resuelto se ve como recuadro roto; el
     caracter Unicode no depende de ninguna fuente cargada).
   - Etiqueta de hosting (.banacart-hosting-badge) junto al nombre del
     dominio en la cabecera, sin corchetes, sin "style" inline, colores
     discretos (el enlace del caso "sin hosting" conserva su href a
     cart.php).
   - Linea de resumen del periodo de registro (.banacart-domain-meta),
     bilingue, reemplaza el bloque "Registration Period / 1 Year/s".
   - Label del EPP Code visible (antes solo vivia como placeholder). */

/* Cabecera: nombre del dominio + badge de hosting en la misma linea.
   align-items:baseline (no center) para que el badge case con la linea
   de base del texto del nombre, no con su subrayado visual. */
#order-standard_cart .banacart-domain-heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

/* Resumen de periodo de registro: una linea, tono discreto (no compite
   con el nombre del dominio ni con el badge de hosting). */
#order-standard_cart .banacart-domain-meta {
    color: #5A6472;
    font-size: 14px;
    margin: 2px 0 14px;
}

/* Lista de addons como filas compactas apiladas (en vez del grid de
   tarjetas de columna que sigue usando configureproduct.tpl). */
#order-standard_cart .banacart-addon-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
#order-standard_cart .banacart-addon-list .panel-addon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    padding: 10px 14px;
    border-radius: 12px;
    min-height: 48px;
}
#order-standard_cart .banacart-addon-list .panel-addon .panel-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}
#order-standard_cart .banacart-addon-list .panel-addon .panel-body .banacart-addon-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
/* sr-only propio, sin depender de que el bootstrap.css del theme padre lo
   defina (no encontrado en este repo): visualmente oculto pero disponible
   para lectores de pantalla (patron WCAG estandar, clip en vez de
   display:none para que siga siendo enfocable/anunciable). */
/* check-ok: patron sr-only estandar (1px/clip-rect(0,0,0,0)) para un
   <label> asociado por "for" al checkbox real del addon -- visualmente
   oculto A PROPOSITO, el texto sigue disponible para lectores de
   pantalla (no es display:none/visibility:hidden), es el patron WCAG
   canonico, no un ocultamiento de control o de nodo de dinero */
#order-standard_cart .banacart-addon-list .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
#order-standard_cart .banacart-addon-list .banacart-addon-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}
#order-standard_cart .banacart-addon-list .banacart-addon-name {
    font-size: 14px;
    font-weight: 700;
    color: #1F2A44;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#order-standard_cart .banacart-addon-list .banacart-addon-desc {
    font-size: 12px;
    font-weight: 400;
    color: #5A6472;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#order-standard_cart .banacart-addon-list .panel-addon .panel-price {
    flex: 0 0 auto;
    padding: 0;
    background: transparent;
    white-space: nowrap;
    text-align: right;
}
#order-standard_cart .banacart-addon-list .panel-addon .panel-add {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
}

/* Pastilla "Add"/"Added" (.panel-add): gate de dominios, decision del
   dueno -- UNA sola senal de estado por fila (la casilla + el borde/fondo
   verde de .panel-addon-selected ya arriba, linea ~931). El nodo NO se
   elimina del markup: registerAddonEvents() en scripts.js:4991/4998
   escribe dentro via jQuery .html() en cada ifChecked/ifUnchecked, asi
   que borrarlo del DOM rompería esos handlers (harian .find('.panel-add')
   sobre un selector inexistente, sin error pero sin efecto util). Se
   oculta solo por CSS, SCOPEADO a esta pantalla -- configureproduct.tpl
   sigue mostrando su pastilla sin cambios, fuera de alcance de esta tanda. */
/* check-ok: div del vendor (.panel-add), no un input ni un nodo de
   dinero/seguridad de la lista vetada -- su unico contenido es redundante
   con el estado ya comunicado por la casilla + el borde/fondo verde de la
   fila (decision del dueno: una sola senal de estado, no tres), ocultado
   a proposito y auditado, no una trampa oculta */
#order-standard_cart .banacart-addon-list .panel-addon .panel-add {
    display: none;
}

/* CTA de accion (no seleccionado) / seleccionada: azul/verde del tema,
   SCOPEADOS a .banacart-addon-list (gate de dominios, I6) -- antes sin
   scope, lo que tambien repintaba la pastilla de configureproduct.tpl
   (pantalla fuera de alcance de esta tanda, sin QA). Si algun dia se
   decide el mismo cambio de color ahi, se hace como su propia pieza
   verificada. Contraste: blanco sobre #1062FE = 5.0:1 / sobre #1D7A4C =
   5.33:1 (formula WCAG 2.1), ambos AA. Sin efecto visual real ahora que
   .panel-add esta oculto en esta pantalla, pero se deja correcto por si
   el marcador check-ok de arriba se revierte en el futuro. */
#order-standard_cart .banacart-addon-list .panel-addon .panel-add {
    background: var(--bt-primary, #1062FE);
    color: #fff;
}
#order-standard_cart .banacart-addon-list .panel-addon-selected .panel-add {
    background: #1D7A4C;
    color: #fff;
}

/* Precio del addon: 15px absolutos (no 1.05em) -- .panel-addon hereda
   font-size:0.8em del vendor (all.css:297), asi que 1.05em resolvia a
   ~13.4px, MENOR que los 14px de .banacart-addon-name pese a que el
   precio deberia leerse mas prominente, no menos. */
#order-standard_cart .panel-addon .banacart-addon-price {
    font-weight: 700;
    font-size: 15px;
}
#order-standard_cart .panel-addon .banacart-addon-cycle {
    font-size: 11px;
    color: #5A6472;
    display: block;
}
/* "Gratis"/"Free": mismo verde oscuro que .panel-add seleccionado, mas
   prominente que un precio normal. Contraste: #1D7A4C sobre blanco =
   5.33:1 (misma cifra ya verificada arriba), AA. */
#order-standard_cart .panel-addon .banacart-addon-price--free {
    color: #1D7A4C;
    font-weight: 800;
}

/* Etiqueta de estado de hosting: pastilla discreta con icono, sin
   corchetes ni "style" inline (antes: color:#009900/#cc0000 puro).
   Selector anidado bajo .banacart-domain-heading (especificidad 1,2,0)
   para ganarle a #order-standard_cart .sub-heading span (1,1,1, linea
   ~851): sin este anidado el badge heredaba el estilo de titular del
   heading (color oscuro, sin fondo, 17px, subrayado azul) y dejaba de
   leerse como pastilla -- solo el estado "sin hosting" (un <a>, que no
   matchea ese selector de span) se veia correcto, los dos estados salian
   incoherentes entre si. */
#order-standard_cart .banacart-domain-heading .banacart-hosting-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 0;
}
/* "Has Hosting": verde discreto. Contraste: #1D7A4C sobre #F4FBF7 (mismo
   verde/fondo ya usados arriba para el addon seleccionado, familia de
   color consistente) = 5.07:1, AA. */
#order-standard_cart .banacart-domain-heading .banacart-hosting-badge--yes {
    background: #F4FBF7;
    color: #1D7A4C;
}
/* "No Hosting" (enlace funcional a cart.php, se conserva el href de la
   base): rojo discreto sobre pastilla clara. Contraste: #B3261E sobre
   #FDEEEE = 5.8:1, AA. Mantiene subrayado en hover para no perder la
   pista visual de que es un enlace (text-decoration:none solo en reposo,
   ver regla compartida arriba). */
#order-standard_cart .banacart-domain-heading .banacart-hosting-badge--no {
    background: #FDEEEE;
    color: #B3261E;
}
#order-standard_cart .banacart-domain-heading .banacart-hosting-badge--no:hover,
#order-standard_cart .banacart-domain-heading .banacart-hosting-badge--no:focus {
    text-decoration: underline;
    color: #B3261E;
}

/* Label visible del campo EPP Code (antes solo existia como placeholder,
   sin <label> real -- el placeholder desaparece al escribir). Mismo
   patron tipografico que el resto de labels de formulario de esta
   tanda (.form-group label del vendor: bold, #333); aqui en el color de
   texto propio del tema para consistencia con el resto del formulario. */
#order-standard_cart .banacart-epp-label {
    display: block;
    font-weight: 600;
    color: #1F2A44;
    margin-bottom: 6px;
}

/* Responsive: bajo ~480px la fila comprimida no cabe con nombre+desc en
   una sola linea sin truncar demasiado agresivo; se permite que el
   nombre haga wrap y la descripcion se lea COMPLETA (antes solo el
   nombre relajaba a white-space:normal -- la descripcion, que es la
   frase de beneficio que el cliente necesita para decidir, seguia
   truncando con ellipsis a este ancho, p.ej. "Recibe el correo de tu
   domi..."). La fila crece en alto a este ancho, aceptable: la claridad
   manda sobre el alto compacto en movil estrecho. */
@media (max-width: 480px) {
    #order-standard_cart .banacart-addon-list .banacart-addon-name,
    #order-standard_cart .banacart-addon-list .banacart-addon-desc {
        white-space: normal;
    }
}

/* ============================================================
   Tanda checkout-1 (solo CSS; checkout.tpl es INTOCABLE, ver landmine
   "checkout.tpl NO se puede sobrescribir" en notas internas del repo).
   Correccion de fase 1 tras verificar 2 supuestos equivocados de la
   tanda anterior (informe completo: .superpowers/sdd/checkout-fase1b-
   report.md):

   1) En un checkout de cliente LOGUEADO (caso dominante) solo se
      renderiza VISIBLE "Choose Account" + la seccion de pago + notas
      adicionales -- TODO #containerNewUserSignup (datos personales,
      direccion, campos personalizados, dominio, seguridad/contrasena,
      captcha) queda con w-hidden. La numeracion en circulo de la tanda
      anterior (5 pasos con contador CSS) por eso quedaba casi siempre en
      un solo circulo con un "1" suelto sobre pago: SE REVIERTE entera
      (counter-reset/counter-increment/::before/su check-ok).
   2) El margen real de ".row" (Bootstrap del tema padre, no versionado
      aqui) sigue SIN poder verificarse en vivo -- ver limitacion de
      fondo, mas abajo, sin cambios respecto de la tanda anterior.

   Diseno nuevo: en vez de "una tarjeta por seccion" (fragil, ver
   limitacion de fondo), TODO #frmCheckout pasa a ser UNA sola tarjeta
   blanca; los titulos ".sub-heading" vuelven a ser texto plano separado
   por una linea fina, y los componentes que YA tienen contenedor propio
   en el markup del vendor (#totalDueToday, pasarelas, .field-container)
   se siguen leyendo como tarjetas interiores, igual que en la tanda
   anterior. */

/* LIMITACION DE FONDO (sin cambios respecto de la tanda anterior): el
   vendor NO envuelve cada seccion en un contenedor propio -- son
   ".sub-heading" seguidos de campos sueltos, casi siempre dentro de
   ".row" (framework Bootstrap del tema padre, NO versionado en este
   repo: ".row"/".col-sm-*" no tienen NINGUNA regla en all.css/
   all.min.css). Envolver ".row" en un borde/tarjeta propio sigue siendo
   arriesgado sin poder verificar en vivo su margin negativo real: un
   borde puesto directamente sobre ".row" se desalinearia hacia afuera.
   Por eso el diseno de esta tanda NO depende de ese dato en absoluto: la
   tarjeta unica envuelve #frmCheckout completo (que SI vive en el flujo
   normal, sin margin negativo), nunca ".row" por separado. */

/* Tarjeta unica: fondo/borde/radio/sombra sobre TODO el formulario, en
   vez de una tarjeta por seccion. Mismo lenguaje visual (par de color y
   sombra) que el resto de tarjetas del funnel (#totalDueToday, pasarelas,
   .banacart-cycle-card, etc, todas con #E3E8F0 + sombra 0 1px 2px+0 8px
   24px rgba(16,36,80,.05)). Se SUMA a la regla de tamano ya existente mas
   arriba en este fichero (#order-standard_cart #frmCheckout{max-width;
   margin:0 auto} + su @media 1200px), sin pisarla (propiedades
   disjuntas). El padding es mayor que cualquier margin negativo
   razonable de ".row" (tipico -15px en Bootstrap 3): con 24/40px de
   sobra el borde de la tarjeta no queda invadido aunque el valor real de
   ".row" siga sin poder verificarse (ver limitacion de fondo, arriba).
   padding-top bajado de 32 a 24px (y el margin-top del primer
   ".sub-heading" a 32px, ver regla mas abajo) ahora que ya no hay linea
   divisoria que "empujar": el primer titulo respira con 24+32=56px desde
   el borde de la tarjeta, sin la linea colgando pegada al padding.
   box-sizing: border-box explicito -- el padding daba por supuesto ese
   modelo de caja sin declararlo (el mismo supuesto no verificado que
   ".row", pero este si es del propio CSS de esta tanda y se puede fijar
   sin depender del vendor). */
#order-standard_cart #frmCheckout {
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #E3E8F0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 36, 80, .05), 0 8px 24px rgba(16, 36, 80, .05);
  padding: 24px 40px 32px;
}
/* 767px, no 600 (que no se corresponde con ninguno de los breakpoints ya
   usados en el fichero: 480 / 767 / 768-1023 / 1200) -- es el mismo corte
   "movil" que ya usa ".banacart-cycle-cards" (linea 1369) para pasar a
   una sola columna; el padding de la tarjeta de checkout debe apretarse
   en todo ese rango movil, no solo por debajo de 600px. */
@media (max-width: 767px) {
  #order-standard_cart #frmCheckout {
    padding: 24px 20px;
  }
}

/* Titulos de seccion PLANOS (nada de tarjeta flotante propia, revertido
   de la tanda anterior): el reset base de Task 0 (mas arriba en este
   fichero, ".sub-heading"/".sub-heading-borderless") ya deja el titulo
   como texto (17px/600, #1F2A44); aqui solo se anade el ritmo propio de
   #frmCheckout -- margen superior para separarse de la seccion anterior.
   SIN linea divisoria (ni border-top propio ni el subrayado azul de Task
   0 en el span, ver regla siguiente): en una tarjeta unica y una pagina
   tan corta el espaciado y la tipografia ya marcan la estructura, una
   linea es ruido de mas. Esto tambien evita el caso raro de la tanda
   anterior en el que el PRIMER titulo visible (que varia segun el
   escenario: "Choose Account" con cliente logueado y 2+ cuentas,
   "Payment Details" con cuenta unica -- ver regla de ocultamiento mas
   abajo -- o "Personal Information" con cliente no logueado,
   checkout.tpl:72) se quedaba con una linea pegada al borde superior de
   la tarjeta: sin linea que anclar, no hace falta una regla especial
   ":has()" para el caso "primero" -- una unica regla vale para todos los
   titulos, visibles o no. */
#order-standard_cart #frmCheckout .sub-heading {
  margin-top: 32px;
}
/* El span interno (Task 0) ya quito el fondo gris del divisor viejo; su
   subrayado azul (border-bottom:2px solid #CFE0FF) se quita tambien aqui
   -- por la misma razon de arriba (espaciado/tipografia bastan, sin
   ninguna linea). Scoped a #frmCheckout, sin tocar el resto del funnel. */
#order-standard_cart #frmCheckout .sub-heading span {
  border-bottom: 0;
  padding: 0;
}

/* "Choose Account" (checkout.tpl:73-122) desaparece SOLO cuando el
   cliente tiene una unica cuenta -- peticion del dueno, ese paso no
   aporta nada si no hay nada que elegir. Con $accounts->count()==1 el
   contenedor tiene EXACTAMENTE 2 hijos directos: la cuenta del foreach
   (checkout.tpl:80, ".col-sm-12" porque count()==1) y la opcion "cuenta
   nueva" (checkout.tpl:114, tambien ".col-sm-12") -- verificado contra
   el markup. Con 2+ cuentas cada iteracion del foreach usa ".col-sm-6"
   en su lugar y el contenedor pasa a tener 3 o mas hijos.
   ":nth-child(2):last-child" exige a la vez "es el segundo" y "es el
   ultimo" -- solo cierto con exactamente 2 hijos. Se oculta SOLO el
   titulo, nunca el contenedor de cuentas (que sigue funcional debajo,
   sin titulo encima). */
/* check-ok: oculta un titulo de seccion (".sub-heading"), no un control
   ni un nodo de dinero -- #containerExistingAccountSelect en si SIGUE
   visible debajo, con la cuenta activa mostrada como informacion (ver
   bloque de mas abajo). El radio "cuenta nueva" NO siempre queda visible
   tambien: en el caso dominante que dispara esta regla (cuenta unica y
   activa) la otra regla nueva de esta tanda (mas abajo,
   "#containerExistingAccountSelect:has(.account.active...)
   .account.border-bottom") lo oculta ademas -- que es justo lo que pidio
   el dueno: con una sola cuenta usable, ni el titulo "Choose Account" ni
   la alternativa de crear una cuenta nueva aportan nada. Condicion
   objetiva de conteo de hijos (":nth-child(2):last-child"), sin depender
   de estado dinamico de la sesion */
#order-standard_cart #frmCheckout .sub-heading:has(+ #containerExistingAccountSelect > div:nth-child(2):last-child) {
  display: none;
}

/* .account-select-container (checkout.tpl:78, la misma clase vendor de
   #containerExistingAccountSelect) trae un borde suelto del vendor
   (all.css:1801-1803, "border-right: 1px solid #eee") pensado para su
   layout original en columnas. Con las tarjetas ".account" ya
   redondeadas y con borde propio (regla de mas abajo) ese borde del
   vendor queda como una raya vertical colgando por fuera de las
   tarjetas, sin ningun elemento al que separar. Se anula. */
#order-standard_cart #containerExistingAccountSelect {
  border-right: 0;
}

/* Bloque de cuenta ya asociada (#containerExistingAccountSelect,
   checkout.tpl:78-122): se re-skinnea para que se lea como INFORMACION,
   no como una lista de radios a elegir -- el estado ya marcado recibe
   fondo/borde de acento, el resto queda con la tarjeta neutra de
   siempre. El input real nunca se toca (ni display ni opacity ni
   visibility): solo fondo/borde/tipografia del contenedor .account.
   IMPORTANTE: la senal de "esta es la elegida" NO depende solo de
   ":has(input:checked)" (mismo patron ya validado en produccion sobre
   label.radio-inline de pasarelas, mas arriba en este fichero, pese a
   que iCheck (base.js:818) envuelve el radio -- iCheck sincroniza el
   atributo "checked" del <input> real, asi que ":checked" en CSS sigue
   reflejando el estado real). Se suma ".active" como respaldo: es la
   clase que YA usa el vendor para lo mismo (checkout.tpl:81/:115 la
   marca en el render inicial; base.js:833-836 la reasigna en vivo al
   clickear otra cuenta), asi que esta disponible SIN depender de
   ":has()" -- en un navegador sin soporte para ":has()" (la unica pseudo-
   clase nueva de toda esta tanda) la cuenta seleccionada seguiria sin
   distinguirse de las demas si solo se confiara en ":has(input:checked)",
   arriesgando que el cliente pague con la cuenta equivocada sin
   notarlo. Con el respaldo, el estilo de "seleccionada" se aplica por
   CUALQUIERA de las dos senales. */
#order-standard_cart #containerExistingAccountSelect .account {
  border: 1px solid #E3E8F0;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: #FFFFFF;
}
/* #1F2A44 sobre #EEF4FE = 12.90:1, mismo par ya verificado en notas
   internas del repo (Notas B3, .order-confirmation) -- se reutiliza aqui
   en vez de inventar un tono nuevo. */
#order-standard_cart #containerExistingAccountSelect .account.active,
#order-standard_cart #containerExistingAccountSelect .account:has(input:checked) {
  background: #EEF4FE;
  border-color: #CFE0FF;
}
/* La opcion "crear cuenta nueva" (checkout.tpl:114-121, unico div con la
   clase ".border-bottom" en todo #containerExistingAccountSelect --
   verificado contra el markup) se sigue DE-ENFATIZANDO por defecto
   (tipografia mas pequena, color mas discreto, #5F6673 sobre blanco =
   5.78:1 AA, mismo par ya usado en .order-summary .recurring-charges mas
   arriba en este fichero): sigue siendo accesible y funcional, solo pesa
   menos visualmente que la cuenta ya asociada. Se ancla por ".border-bottom"
   (unica clase que la identifica, no ":has(input[value='new'])": ambas
   son validas pero mantener dos anclas para el mismo div es una
   sincronia innecesaria -- se deja la ya auditada y citada mas abajo en
   el check-ok del ocultamiento). */
#order-standard_cart #containerExistingAccountSelect .account.border-bottom {
  padding: 10px 14px;
  font-size: 13px;
  color: #5F6673;
}
/* Ademas se OCULTA por completo (peticion explicita del dueno, repetida
   3 veces) pero SOLO cuando hay una alternativa real y usable: otra
   cuenta ".active" (checkout.tpl:81, marcada cuando $selectedAccountId
   coincide con esa cuenta) que NO sea la opcion "cuenta nueva"
   (":not(.border-bottom)") y sin ningun input ".disabled" colgando en
   TODO #containerExistingAccountSelect (checkout.tpl:83, la clase que
   el vendor pone al input cuando la cuenta esta cerrada, sin permiso, o
   en express checkout). ":has(.disabled)" mira DENTRO de ".account",
   nunca menciona "input" directamente, asi que el selector no cae en
   el veto incondicional de NIVEL 1 del check (ese si vetaria cualquier
   cosa que mencione "input") -- pasa por el default-deny de NIVEL 2,
   suprimible con check-ok.

   FIX (selector invalido): la version anterior anidaba
   ":not(:has(.disabled))" DENTRO del argumento de otro ":has()"
   (".account.active:not(.border-bottom):not(:has(.disabled))"), y
   Selectors 4 prohibe explicitamente un ":has()" dentro del argumento
   de otro ":has()" -- el navegador descarta el selector COMPLETO por
   invalido, asi que la regla nunca aplicaba y "Create a New Account"
   seguia visible en todos los casos (reproducido en el banco de vista
   previa antes del fix). La correccion saca ese ":has()" interior al
   nivel superior del compuesto:
   "#containerExistingAccountSelect:has(.account.active:not(.border-
   bottom)):not(:has(.disabled))". Efecto en la semantica: el
   ":not(:has(.disabled))" ya NO esta acotado a la cuenta ".active"
   individual, sino al contenedor "#containerExistingAccountSelect"
   entero -- se oculta "cuenta nueva" cuando hay una cuenta activa
   usable Y no hay NINGUN ".disabled" en ninguna parte del contenedor
   (antes solo miraba dentro de esa cuenta activa). Es mas conservador
   que la intencion original (si una cuenta DISTINTA de la activa
   estuviera ".disabled", con el selector viejo -si hubiera sido
   valido- igual se ocultaria "cuenta nueva"; con el nuevo, no se
   oculta), y esa desviacion es deliberada: el lado seguro es mostrar
   de mas, nunca de menos.

   IMPORTANTE -- ".active" NO es un estado estatico del render inicial:
   el JS del vendor la reasigna EN VIVO al hacer click en una cuenta
   (base.js:833-836, `.removeClass('active')` sobre la cuenta previa +
   `.addClass('active')` sobre la clicada) y ademas la persiste con un
   POST a /cart/account/select (base.js:870-875) que sobrevive a un
   reload dentro de la misma sesion. Consecuencia real, verificada: si el
   checkout se renderiza con "cuenta nueva" como la UNICA ".active"
   (sesion sin $selectedAccountId numerico), la opcion "Create a New
   Account" arranca VISIBLE -- pero en cuanto el cliente hace click en
   una de sus cuentas reales, este mismo selector reacciona al cambio de
   clase EN VIVO y la opcion desaparece bajo el puntero, con el
   consiguiente salto de layout justo encima del bloque de pago; y queda
   oculta el resto de la sesion (el POST de seleccion la persiste).

   Las dos condiciones de ".active" del template (checkout.tpl:81 y :115)
   NO son exhaustivas: si $selectedAccountId es numerico pero no
   corresponde a ninguna cuenta de $accounts (permiso revocado con el
   carrito ya en sesion, sesion rancia tras un cambio de cuenta, "0"),
   NINGUNA opcion queda ".active" -- entonces
   ":has(.account.active:not(.border-bottom))" es FALSO, la condicion
   completa no se cumple, y la opcion "cuenta nueva" NO se oculta: se ve
   de-enfatizada (regla de arriba), que es el lado seguro del fallo
   (nunca le tapa al cliente su unica salida). Mismo razonamiento si HAY
   un ".disabled" colgando en cualquier parte del contenedor (cerrada/
   sin permiso/express checkout, sea o no la cuenta activa): el
   ":not(:has(.disabled))" del contenedor se vuelve falso y tampoco se
   oculta la opcion "cuenta nueva".

   Se acepta la desaparicion EN VIVO descrita arriba (no es invisible:
   ocurre justo tras el click del cliente sobre la cuenta que SI va a
   usar, no en un momento arbitrario) porque el modo de fallo sigue
   siendo seguro en todos los casos: nunca deja al cliente sin ninguna
   opcion seleccionable (si no hay alternativa real, la opcion NO se
   oculta, ver parrafo de arriba); retirar una opcion que ya dejo de
   tener sentido (crear cuenta cuando ya se eligio una existente usable)
   es exactamente la peticion original del dueno, solo que ahora ocurre
   en el momento del click en vez de solo en el render inicial. */
/* check-ok: display:none sobre ".account.border-bottom" (opcion "cuenta
   nueva"), nunca sobre un input -- el selector completo, incluido el
   dato de que ".active" es DINAMICO (base.js:833-836) y por tanto esta
   regla puede disparar EN VIVO (no solo en el render inicial: un click
   en una cuenta real puede ocultar "cuenta nueva" bajo el puntero, con
   el efecto persistiendo el resto de la sesion via el POST de seleccion,
   base.js:870-875), esta descrito en el comentario de arriba. Se
   autoriza de todos modos porque el modo de fallo es seguro: solo se
   oculta cuando ya existe una alternativa real (otra cuenta .active,
   sin ser la de "cuenta nueva") y sin ningun input .disabled colgando
   en TODO el contenedor #containerExistingAccountSelect, condicion que
   por diseno del propio template deja de cumplirse (y por tanto deja de
   ocultar) en cualquier caso donde ninguna cuenta este realmente
   disponible -- nunca deja al cliente sin una opcion seleccionable
   visible. Alternativa evaluada y DESCARTADA: anclar por
   "input[value='new'][checked]" (atributo HTML estatico que sobrevive
   a iCheck) en vez de ".active" -- imposible porque cualquier selector
   que mencione "input" cae en el veto incondicional de NIVEL 1 del
   check, sin valvula de check-ok; css-comment-check.py no se toca.

   Residual documentado (gate sec-verifier, 2026-08-02): existe un
   TERCER escritor de ".checked" ademas del servidor (render inicial) y
   del handler ifChecked de iCheck (base.js:833-836): la restauracion de
   estado de formulario del navegador (Firefox al recargar, y back/
   forward o restauracion de sesion en Chrome/Firefox). Ni #frmCheckout
   ni los radios "account_id" llevan autocomplete="off" en checkout.tpl
   (INTOCABLE, no se puede forkear), asi que esa restauracion escribe
   ".checked" directo en el DOM SIN pasar por ifChecked -- ".active"
   se queda donde lo puso el servidor y no se resincroniza. Demostrado
   en Chromium: es alcanzable un estado con el radio value="new"
   CHECKED y su div oculto por esta regla a la vez, si
   $selectedAccountId pasa de no-numerico a numerico entre dos cargas
   de la misma entrada de historial (p.ej. una segunda pestana, o un
   POST a /cart/account/select disparado desde otra ventana); el back/
   forward simple sin ese salto de servidor no lo produce. Impacto
   aceptado como residual: no toca dinero ni consentimiento -- el peor
   caso es un POST con account_id="new" y custtype="account"
   desincronizados, que el servidor rechaza con su propia validacion,
   con la unica perdida de que la seleccion queda invisible para el
   cliente (en el vendor sin esta regla la misma desincronia ya seria
   visible). Mitigaciones descartadas: autocomplete="off" (checkout.tpl
   intocable) y anclar por "input[value='new'][checked]" (vetado por
   NIVEL 1, ver parrafo de arriba). */
#order-standard_cart #containerExistingAccountSelect:has(.account.active:not(.border-bottom)):not(:has(.disabled)) .account.border-bottom {
  display: none;
}

/* .field-container (custom fields del checkout, checkout.tpl:300-321,
   clase, no id -- ojo con confundirla con "#cvv-field-container", que SI
   es un id y no casa con este selector): a diferencia de ".row", SI es
   un bloque propio del vendor sin margin negativo (confirmado en
   all.css:91, sin nada de Bootstrap de por medio), asi que sigue
   leyendose como tarjeta interior propia dentro de la tarjeta unica --
   sin cambios de fondo respecto de la tanda anterior, salvo quitar el
   acoplamiento con el titulo (".sub-heading:has(+ .field-container)" ya
   no tiene sentido: el titulo dejo de ser una tarjeta propia con la que
   "conectar" esquinas/sombra, asi que .field-container vuelve a llevar
   las 4 esquinas y el borde completo). */
#order-standard_cart #frmCheckout .field-container {
  background: #FFFFFF;
  border: 1px solid #E3E8F0;
  border-radius: 14px;
  padding: 4px 20px 16px;
  margin: 10px 0 16px;
  box-shadow: 0 1px 2px rgba(16, 36, 80, .05), 0 8px 24px rgba(16, 36, 80, .05);
}
/* .cc-input-container (checkout.tpl:621, envuelve #existingCardInfo,
   #newCardInfo y #newCardSaveSettings, checkout.tpl:627-731): el vendor
   le pinta gris plano propio (all.css:553-558, fondo #f3f3f3 + borde
   #d9d9d9 + radio 4px) que desentona con el resto del funnel ya vestido
   de esta tanda (#totalDueToday, las radio-cards de pasarela). Se pisan
   SOLO fondo/borde/radio/sombra/padding, mismo lenguaje que las demas
   tarjetas (blanco + #E3E8F0 + 14px + sombra 0 1px 2px+0 8px 24px de
   rgba(16,36,80,.05)) -- nunca se toca display/visibility/opacity ni
   ninguna propiedad de los campos, checkboxes o mensajes de error de
   adentro, que siguen exactamente igual. padding sube de "15px 15px
   10px 15px" (vendor) a "18px 20px" para quedar a la par del resto de
   tarjetas del funnel (mismo valor que #totalDueToday). */
#order-standard_cart .cc-input-container {
  background: #FFFFFF;
  border: 1px solid #E3E8F0;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(16, 36, 80, .05), 0 8px 24px rgba(16, 36, 80, .05);
}

/* Tanda G (revisada 08-02): pedido corregido del dueño. Las tarjetas
   blancas normales del grupo 25 (Semi Dedicated Hosting) NO cambian,
   quedan con el fondo/borde por defecto de .banacart-card como en
   cualquier otro grupo (la regla vieja que las pintaba de azul se quito
   de aqui). El azul clarito va SOLO en la tarjeta destacada del grupo
   25: en el resto de grupos la destacada se queda con el degradado
   oscuro de siempre (.banacart-card--featured mas arriba), decision
   ya validada por el dueño y fuera de alcance en esta tanda.
   .banacart-group-{$gid} lo pinta products.tpl en TODAS las paginas de
   grupo (gid saneado con intval), asi que este bloque solo se activa
   para el grupo 25.
   Especificidad: ".banacart-group-25 .banacart-card--featured X" (3
   clases) siempre gana a ".banacart-card--featured X" de la tarjeta
   oscura de arriba (2 clases), asi que cada regla de abajo "voltea" su
   contraparte oscura sin necesitar !important. */

/* Fondo azul clarito (mismo #EEF4FE ya documentado en este fichero,
   hover de .banacart-card / pildora activa del ciclo) reemplazando el
   degradado marino de .banacart-card--featured. border-color propio
   #4C7EDB (azul medio, no en :root, hex documentado aqui): sobre fondo
   claro el borde #171A2E original se veria casi negro y demasiado duro;
   #4C7EDB mantiene el realce de "esta es la destacada" sin la brusquedad.
   box-shadow NO se toca: el mismo rgba(23,26,46,.35) del resto de
   tarjetas oscuras sigue funcionando como elevacion neutra sobre fondo
   claro (mismo tinte navy que .banacart-card usa en su propia sombra
   mas arriba), es el realce "no-de-color" que mantiene la jerarquia
   visual de tarjeta destacada. */
.banacart-group-25 .banacart-card--featured {
  background: #EEF4FE;
  border-color: #4C7EDB;
}

/* Nombre del plan y cantidad: vuelven al color de texto normal de la
   tarjeta clara (mismos valores que .banacart-card-name/.banacart-qty
   sin featured, mas arriba), en vez del blanco/#CFE0FF pensados para
   el fondo oscuro. */
.banacart-group-25 .banacart-card--featured .banacart-card-name {
  color: var(--bt-text, #1B2430);
}

.banacart-group-25 .banacart-card--featured .banacart-qty {
  color: var(--bt-text-3, #6B7280);
}

.banacart-group-25 .banacart-card--featured .banacart-card-tagline {
  color: var(--bt-text, #1B2430);
}

/* Precio: mismo azul de marca que las tarjetas normales (no blanco),
   label/cuota de alta y ciclo con los grises/oscuro habituales. */
.banacart-group-25 .banacart-card--featured .banacart-price-label,
.banacart-group-25 .banacart-card--featured .banacart-price-setup {
  color: var(--bt-text-3, #6B7280);
}

.banacart-group-25 .banacart-card--featured .banacart-price-amount {
  color: var(--bt-primary, #1062FE);
}

.banacart-group-25 .banacart-card--featured .banacart-price-cycle {
  color: var(--bt-text, #1B2430);
}

/* Divisor: gris claro de siempre en vez del blanco translucido pensado
   para el fondo oscuro. */
.banacart-group-25 .banacart-card--featured .banacart-divider {
  background: #EEF1F6;
}

/* Descripcion libre de BD (featuresdesc): texto, encabezados y enlaces
   vuelven a los colores de tarjeta clara (mismos que .banacart-card-desc
   sin featured y su regla de p/h3-h6 mas arriba). */
.banacart-group-25 .banacart-card--featured .banacart-card-desc {
  color: var(--bt-text-2, #5E636E);
}

.banacart-group-25 .banacart-card--featured .banacart-card-desc h1,
.banacart-group-25 .banacart-card--featured .banacart-card-desc h2,
.banacart-group-25 .banacart-card--featured .banacart-card-desc h3,
.banacart-group-25 .banacart-card--featured .banacart-card-desc h4,
.banacart-group-25 .banacart-card--featured .banacart-card-desc h5,
.banacart-group-25 .banacart-card--featured .banacart-card-desc h6,
.banacart-group-25 .banacart-card--featured .banacart-card-desc p {
  color: var(--bt-text, #1B2430);
}

.banacart-group-25 .banacart-card--featured .banacart-card-desc a {
  color: var(--bt-primary, #1062FE);
}

/* Checks verdes: mismo #00A876 de las tarjetas claras en vez del verde
   aclarado #4CDBAA pensado para el fondo oscuro (ambos contextos: ul de
   featuresdesc y ul.banacart-features). */
.banacart-group-25 .banacart-card--featured .banacart-card-desc ul:not(.banacart-features) li::before,
.banacart-group-25 .banacart-card--featured .banacart-features li::before {
  color: #00A876;
}

.banacart-group-25 .banacart-card--featured .banacart-card-desc ul:not(.banacart-features) li.banacart-li-ico::before,
.banacart-group-25 .banacart-card--featured .banacart-features li.banacart-li-ico::before {
  background-color: #00A876;
}

/* Lista $product.features y encabezados de grupo (premium-divider):
   mismo texto/borde de la tarjeta clara. */
.banacart-group-25 .banacart-card--featured .banacart-features li {
  color: var(--bt-text, #1B2430);
  border-bottom-color: #EEF4FE;
}

.banacart-group-25 .banacart-card--featured .banacart-card-desc ul:not(.banacart-features) li.premium-divider {
  color: var(--bt-text, #1B2430);
}

/* Nota: .banacart-badge-save NO se toca aqui. Su override para la
   destacada (#0B2B1F sobre #4CDBAA, ver arriba) es una pastilla con
   fondo propio opaco, no asume el fondo de la tarjeta, se sigue leyendo
   igual de bien sobre #EEF4FE. .banacart-badge (esquina) y el CTA solido
   (#products .banacart-card--featured .banacart-btn-order, azul de
   marca sobre blanco) tampoco se tocan: ya funcionan sobre cualquier
   fondo claro, incluido #EEF4FE. */