/* CONTENEDOR GENERAL */
.kbe-widget{border:1px solid #e5e7eb;border-radius:14px;padding:14px;margin:16px 0;background:#f8fafc}
.kbe-headline{font-weight:800;text-transform:uppercase;text-align:center;margin-bottom:10px;letter-spacing:.02em}
/* Acento global del tick (cámbialo si quieres otro color) */
:root { --kbe-accent: #E6007E; }
/* FILA DE OFERTA */
.kbe-offer-row{margin-bottom:10px}
.kbe-offer-label{display:block}
.kbe-offer-box{display:block;position:relative;border:2px solid #e5e7eb;border-radius:12px;background:#fff;transition:border-color .2s, box-shadow .2s}
.kbe-offer-box:hover{border-color:#d1d5db}
/* Insignia flotante arriba-derecha (como Kaching) */
.kbe-badge{padding:4px 10px;border-radius:999px;font-size:13px;font-weight:800;white-space:nowrap}
.kbe-badge-simple{background:#fff7ed} /* naranja suave */
.kbe-badge-warning{background:#e6007e}
.kbe-badge-pill{background:#ecfeff}
.kbe-badge-float{color:#fff;position:absolute;right:12px;top:-12px;box-shadow:0 2px 6px rgba(0,0,0,.08)}
/* Cabecera compacta: título/subtítulo a la izq., precio a la dcha. */
.kbe-offer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 14px}
.kbe-offer-main{min-width:0}
.kbe-offer-name{font-size:18px;font-weight:800;line-height:1.1}
.kbe-offer-sub{font-size:14px;opacity:.8;margin-top:4px}
.kbe-offer-right{text-align:right;display:flex;flex-direction:column;gap:2px}
.kbe-price-final{font-size:20px;font-weight:900;line-height:1}
.kbe-price-original{text-decoration:line-through;opacity:.6;font-size:12px}
/* Radio oculto pero accesible: hace clic toda la caja */
.kbe-offer-row input[type="radio"]{
position:absolute;
opacity:0;
width:0;
height:0;
margin:0;
pointer-events:none;
}
/* Indicador de enfoque para navegación con teclado */
.kbe-offer-row input[type="radio"]:focus-visible + .kbe-offer-box{
box-shadow:0 0 0 3px rgba(29,78,216,.35);
border-color:#1d4ed8;
}
/* Mejora UX: que se note que toda la caja es clicable */
.kbe-offer-box{ cursor:pointer; }
/* Solo ocultamos las VARIANTES si no está seleccionada; los regalos, siempre visibles */
.kbe-offer-variants{display:none;border-top:1px dashed #eef2f7}
.kbe-offer-row.is-selected .kbe-offer-variants{display:block}
/* Regalos: siempre visibles como extensión de la caja */
.kbe-offer-gifts{display:block;border-top:1px dashed #eef2f7;padding:0 0 10px}
.kbe-gift-line{margin:0 14px 8px}
.kbe-offer-variants{padding:10px 14px 8px}
.kbe-variant-line{display:flex;align-items:center;gap:10px;margin:6px 0}
.kbe-variant-line select{min-width:220px}
.kbe-variant-num{display:inline-flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;background:#f1f5f9;font-weight:700}
/* Regalos como extensión de la caja */
.kbe-offer-gifts{padding:0 0 10px}
.kbe-gift-line{display:flex;align-items:center;gap:8px;margin:0 14px 8px;border-radius:10px;padding:8px 10px;background:#e6f0ff}
.kbe-gift-line img{width:40px;height:40px;border-radius:4px;object-fit:cover}
.kbe-gift-line span {font-weight: bold;}
/* Selección visual */
.kbe-offer-row.is-selected .kbe-offer-box{border-color:#1d4ed8;box-shadow:0 0 0 2px #1d4ed820;background:#f0f6ff}
/* Footer */
.kbe-footer{display:flex;align-items:center;gap:12px;margin-top:12px}
.kbe-footer .button.kbe-add-bundle{background-color: #e6007e;color:#fff;flex:1;height:48px;font-weight:800;border-radius:10px}
.kbe-footer .button.kbe-add-bundle:hover{background-color: #fff;color:#e6007e;border-color:#e6007e;}
/* Quita márgenes extra entre ofertas */
.kbe-offer-row:last-child{margin-bottom:0}
/* Más padding arriba SOLO cuando hay insignia flotante */
.kbe-offer-box:has(.kbe-badge-float) .kbe-offer-head{
padding-top: 20px; /* súbelo a 20–22px si lo quieres aún más separado */
}
/* Fallback para navegadores sin :has() */
@supports not selector(:has(*)) {
.kbe-offer-box.has-badge .kbe-offer-head{
padding-top: 20px;
}
}
/* Regalos: estado NO seleccionado (look apagado) */
.kbe-offer-row .kbe-gift-line{
background:#f3f4f6; /* gris muy claro en vez de azul */
border-left:4px solid transparent;
opacity:.9;
transition:background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.kbe-offer-row .kbe-gift-line img{ opacity:.8; }
/* Regalos: estado SELECCIONADO (look destacado en azul) */
.kbe-offer-row.is-selected .kbe-gift-line{
background:#FFDAE2; /* azul claro que ya usabas */
border-left-color:#E6007E; /* acento azul en el borde izquierdo */
opacity:1;
}
.kbe-offer-row.is-selected .kbe-gift-line img{ opacity:1; }
/* ===== Realce fuerte para la oferta seleccionada ===== */
/* Fondo y borde más notorios */
.kbe-offer-row.is-selected .kbe-offer-box{
border-color:#E2B7C0;
background: linear-gradient(180deg, #E2B7C070 0%, #FFFFFF 100%);
box-shadow: 0 6px 16px rgba(226, 183, 192, .18), 0 0 0 2px rgb(226, 183, 192, .12);
transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
/* --- Tick moderno con SVG mask (sustituye al ✓ antiguo) --- */
/* Círculo de fondo del tick */
.kbe-offer-row.is-selected .kbe-offer-box::before{
content: "";
position: absolute;
left: 12px;
top: 12px;
width: 24px;
height: 24px;
border-radius: 999px;
background: var(--kbe-accent);
box-shadow: 0 2px 6px rgba(0,0,0,.15);
z-index: 1;
}
/* Check “clean” usando máscara SVG (nítido en retina) */
.kbe-offer-row.is-selected .kbe-offer-box::after{
content: "";
position: absolute;
left: 12px;
top: 12px;
width: 24px;
height: 24px;
background: #fff;
z-index: 2;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
-webkit-mask-size: 14px 14px;
mask-size: 14px 14px;
}
/* Damos un poco más de espacio a la izquierda cuando hay check */
.kbe-offer-head{ padding-left: 14px; }
.kbe-offer-row.is-selected .kbe-offer-head{ padding-left: 44px; }
/* Precio más protagonista en selección */
.kbe-offer-row.is-selected .kbe-price-final{
transform: translateY(-1px);
text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
/* Regalos: aún más destacados en selección */
.kbe-offer-row.is-selected .kbe-gift-line{
background:#FFDAE2; /* azul claro que ya usabas */
border-left-color:#E6007E; /* acento azul en el borde izquierdo */
box-shadow: inset 0 0 0 1px rgba(29,78,216,.08);
}
/* Hover suave incluso cuando está seleccionada (mejora UX) */
.kbe-offer-row.is-selected .kbe-offer-box:hover{
box-shadow: 0 8px 18px rgba(226, 183, 192, .18), 0 0 0 2px rgb(226, 183, 192, .12);
}
/* Si prefieres un look aún más compacto, reducimos márgenes verticales internos */
.kbe-offer-row .kbe-offer-sub{ margin-top: 2px; }
.kbe-offer-row .kbe-variant-line{ margin: 4px 0; }
.kbe-gift-line{ margin: 4px 14px 6px; }
/* ===== Alinear el tick con el título cuando hay insignia ===== */
/* Posición por defecto del tick */
.kbe-offer-box{ --kbe-check-top: 12px; }
/* Cuando hay insignia, baja el tick para alinearlo con el título */
.kbe-offer-box.has-badge{ --kbe-check-top: 20px; }
.kbe-offer-box:has(.kbe-badge-float){ --kbe-check-top: 20px; } /* navegadores con :has() */
/* Aplica la posición a los pseudos del tick moderno */
.kbe-offer-row.is-selected .kbe-offer-box::before,
.kbe-offer-row.is-selected .kbe-offer-box::after{
top: var(--kbe-check-top);
}
/* Botón a 100% y mensaje debajo: sin “huecos” laterales */
.kbe-footer{
display:flex;
flex-direction: column;
align-items: stretch;
gap: 8px; /* espacio vertical entre botón y mensaje */
}
.kbe-footer .button.kbe-add-bundle{
display:block;
width:100%;
box-sizing:border-box;
}
.kbe-footer .kbe-msg{
min-height:18px;
font-size:13px;
}
/* Título encima del grupo de selects (p.ej. "Color") */
.kbe-variant-attr-title{
font-size:12px;
font-weight:700;
letter-spacing:.02em;
text-transform:uppercase;
opacity:.7;
}