/* ============================================================
   Cotizador Broktech — Ventana "cliente cotizando" (vehicular)
   Modernización 2026. Conserva estructura, IDs y colores de marca.
   Paleta marca: naranja #f79f08 / #fc5c00 + teal Broktech #0EE7C5.
   Todo scopeado bajo .bk-quote para no afectar el resto del portal.
   ============================================================ */

.bk-quote {
    --bk-orange:    #F79F08;
    --bk-orange-dk: #FC5C00;
    --bk-teal:      #0EE7C5;
    --bk-teal-dk:   #0BB89E;
    --bk-ink:       #16202E;
    --bk-muted:     #6B7280;
    --bk-line:      #E8ECF1;
    --bk-surface:   #FFFFFF;
    --bk-radius:    18px;
    --bk-radius-sm: 12px;
    --bk-shadow:    0 10px 40px -12px rgba(22, 32, 46, .18);
    --bk-shadow-sm: 0 4px 18px -8px rgba(22, 32, 46, .22);
    --bk-glow:      0 10px 30px -6px rgba(247, 159, 8, .45);

    position: relative;
    background:
        radial-gradient(900px 500px at 88% -5%,  rgba(14, 231, 197, .10) 0, transparent 55%),
        radial-gradient(800px 480px at 5% 110%,  rgba(247, 159, 8, .10)  0, transparent 55%),
        linear-gradient(180deg, #FBFCFE 0%, #F4F7FB 100%);
    overflow: hidden;
}

/* ─── Tipografía display de marca ───────────────────────── */
.bk-quote h1,
.bk-quote .sec-eyebrow,
.bk-quote .custom-wizard .nav-link {
    font-family: 'Sora', system-ui, sans-serif;
    letter-spacing: -.01em;
}
.bk-quote label,
.bk-quote .btn-cotizar { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }

/* ─── Encabezado ────────────────────────────────────────── */
.bk-quote h5 {
    color: var(--bk-muted);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .8rem;
    margin-bottom: .6rem;
}
.bk-quote h1.display-4 {
    color: var(--bk-ink);
    font-weight: 800;
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    line-height: 1.1;
}
.bk-quote h1.display-4 i { color: var(--bk-orange) !important; }
.bk-quote .lead { color: var(--bk-muted); font-size: 1.06rem; }

/* chip "switch liviano/pesado" — relleno, sin outline */
.bk-quote .switch-option .btn {
    border: 0 !important;
    border-radius: 999px !important;
    padding: .6rem 1.4rem !important;
    font-weight: 700;
    background: #fff !important;
    color: var(--bk-orange-dk) !important;
    box-shadow: var(--bk-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.bk-quote .switch-option .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px -8px rgba(252, 92, 0, .5);
}

/* ─── Tarjetas (anula el gradiente gris viejo) ──────────── */
.bk-quote .card {
    background: var(--bk-surface) !important;
    border: 1px solid var(--bk-line) !important;
    border-radius: var(--bk-radius) !important;
    box-shadow: var(--bk-shadow) !important;
    overflow: hidden;
    animation: bkFadeUp .6s cubic-bezier(.22,.61,.36,1) both;
}
.bk-quote .col-lg-4 .card:nth-child(1) { animation-delay: .04s; }
.bk-quote .benefits-sidebar .card:nth-child(1) { animation-delay: .10s; }
.bk-quote .benefits-sidebar .card:nth-child(2) { animation-delay: .16s; }
.bk-quote .benefits-sidebar .card:nth-child(3) { animation-delay: .22s; }
.bk-quote .col-lg-8 .card { animation-delay: .12s; }

/* imagen lateral con marco limpio */
.bk-quote .col-lg-4 .card img { display: block; width: 100%; }
.bk-quote .overlay-gradient {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 100%);
}

/* tarjeta del formulario: filo superior de marca */
.bk-quote .col-lg-8 .card { position: relative; }
.bk-quote .col-lg-8 .card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--bk-orange) 0%, var(--bk-orange-dk) 55%, var(--bk-teal) 100%);
    z-index: 2;
}

/* ─── Beneficios ────────────────────────────────────────── */
.bk-quote .benefits-sidebar .card { transition: transform .25s ease, box-shadow .25s ease; }
.bk-quote .benefits-sidebar .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 44px -16px rgba(22, 32, 46, .28) !important;
}
.bk-quote .benefits-sidebar h5 { color: var(--bk-ink); font-weight: 700; font-size: 1rem; }
.bk-quote .icon-circle {
    width: 52px; height: 52px;
    border-radius: 14px;            /* squircle moderno en vez de círculo plano */
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
    flex: 0 0 auto;
}
.bk-quote .icon-circle.bg-primary { background: linear-gradient(135deg, var(--bk-orange) 0%, var(--bk-orange-dk) 100%) !important; }
.bk-quote .icon-circle.bg-success { background: linear-gradient(135deg, var(--bk-teal) 0%, var(--bk-teal-dk) 100%) !important; }
.bk-quote .icon-circle.bg-info    { background: linear-gradient(135deg, #2E3A59 0%, #16202E 100%) !important; }

/* ─── Wizard (pills) ────────────────────────────────────── */
.bk-quote .custom-wizard { gap: .75rem; position: relative; }
.bk-quote .custom-wizard .nav-link {
    padding: .95rem 1rem !important;
    border-radius: var(--bk-radius-sm) !important;
    background: #F4F7FB !important;
    border: 1.5px solid var(--bk-line) !important;
    color: var(--bk-muted) !important;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    transition: all .25s ease;
}
.bk-quote .custom-wizard .nav-link.active {
    background: linear-gradient(135deg, var(--bk-orange) 0%, var(--bk-orange-dk) 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: var(--bk-glow);
    transform: translateY(-1px);
}
.bk-quote .step-number {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: rgba(22, 32, 46, .08);
    color: var(--bk-ink);
    font-weight: 800; font-size: .9rem;
    display: inline-flex; align-items: center; justify-content: center;
    margin-right: 10px;
    transition: all .25s ease;
}
.bk-quote .custom-wizard .nav-link.active .step-number {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ─── Formularios ───────────────────────────────────────── */
.bk-quote label {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bk-muted);
    margin-bottom: .4rem;
}
.bk-quote .form-control,
.bk-quote .custom-select,
.bk-quote .select2-container--default .select2-selection--single {
    border-radius: var(--bk-radius-sm) !important;
    border: 1.5px solid var(--bk-line) !important;
    padding: .72rem .95rem !important;
    height: auto !important;
    font-size: .95rem !important;
    color: var(--bk-ink) !important;
    background: #fff !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.bk-quote .form-control:focus,
.bk-quote .custom-select:focus {
    border-color: var(--bk-orange) !important;
    box-shadow: 0 0 0 4px rgba(247, 159, 8, .16) !important;
    outline: none !important;
}
/* input-group con ícono integrado */
.bk-quote .input-group { position: relative; }
.bk-quote .input-group-text {
    border-radius: var(--bk-radius-sm) 0 0 var(--bk-radius-sm) !important;
    border: 1.5px solid var(--bk-line) !important;
    border-right: none !important;
    background: #F4F7FB !important;
    color: var(--bk-orange-dk) !important;
    padding: .72rem 1rem !important;
}
.bk-quote .input-group .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: none !important;
}
.bk-quote .input-group:focus-within .input-group-text {
    border-color: var(--bk-orange) !important;
    color: var(--bk-orange-dk) !important;
}

/* nota / textos de ayuda */
.bk-quote small.text-danger { font-size: .78rem; }

/* política de datos */
.bk-quote #acepto + ,
.bk-quote h6 a { color: var(--bk-orange-dk); font-weight: 700; }

/* ─── CTA cotizar ───────────────────────────────────────── */
.bk-quote .btn-cotizar.btn-warning {
    background: linear-gradient(135deg, var(--bk-orange) 0%, var(--bk-orange-dk) 100%) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 14px !important;
    padding: 1.05rem 2rem !important;
    font-size: 1.06rem !important;
    font-weight: 800 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: var(--bk-glow);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.bk-quote .btn-cotizar.btn-warning:hover {
    transform: translateY(-2px);
    filter: brightness(1.03);
    box-shadow: 0 16px 38px -10px rgba(252, 92, 0, .55);
}
.bk-quote .btn-cotizar.btn-warning:active { transform: translateY(0); }

/* botón limpiar campos (relleno, sin outline) */
.bk-quote .btn-primary {
    background: #16202E !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 700;
    padding: .55rem 1.25rem !important;
}
.bk-quote .btn-primary:hover { background: #0C1320 !important; }

/* switchery alineado */
.bk-quote .switchery { margin-top: .25rem; }

/* ─── Animación de entrada ──────────────────────────────── */
@keyframes bkFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .bk-quote .card { animation: none; }
}

/* ─── Ajustes de plugins (Select2 / smartWizard) ───────── */
.bk-quote .select2-selection__rendered { height: 40px !important; padding-top: 6px !important; }
.bk-quote .select2,
.bk-quote .selection,
.bk-quote .select2-selection,
.bk-quote .select2-selection__arrow { height: 50px !important; }
.bk-quote .sw-theme-dots > .nav .nav-link.active { color: #fff !important; cursor: pointer; }

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
    .bk-quote .custom-wizard .nav-link { padding: .75rem !important; }
    .bk-quote .step-number { margin-right: 0; }
    .bk-quote .benefits-sidebar { margin-bottom: 2rem; }
}

/* ===== Encabezado compacto (foco directo en cotizar, estilo MGA) ===== */
.bk-quote.py-5 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
.bk-quote .row.mb-5 { margin-bottom: 1.75rem !important; }
.bk-quote h5 { font-size: .78rem; margin-bottom: .35rem; }
.bk-quote h1.display-4 {
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    margin-bottom: .35rem;
}
.bk-quote .lead { font-size: .98rem; margin-bottom: 0; }
.bk-quote .mb-4 { margin-bottom: 1.25rem !important; }

/* ===== Intro lateral (estilo MGA, copy propio Broktech) ===== */
.bk-quote .sidebar-intro { padding: 0 .25rem; }
.bk-quote .sidebar-intro .si-eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--bk-orange-dk); background: rgba(247, 159, 8, .12);
    padding: .35rem .7rem; border-radius: 999px; margin-bottom: .6rem;
}
.bk-quote .sidebar-intro h3 {
    font-family: 'Sora', system-ui, sans-serif;
    font-size: 1.3rem; font-weight: 800; color: var(--bk-ink); margin: 0 0 .4rem; line-height: 1.2;
}
.bk-quote .sidebar-intro p { font-size: .95rem; color: var(--bk-muted); margin: 0; line-height: 1.5; }

/* Contenedor lateral unificado: texto arriba + imagen (mismo tamaño en ambos portales) */
.bk-quote .side-hero {
    background: #fff;
    border: 1px solid var(--bk-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--bk-shadow);
}
.bk-quote .side-hero .sidebar-intro { padding: 1.4rem 1.4rem 1rem; margin: 0; }
.bk-quote .side-hero-img { line-height: 0; }
.bk-quote .side-hero-img img { width: 100%; height: 360px; object-fit: cover; display: block; }

/* ===== Wizard estilo MGA: indicador limpio (sin las líneas del smartWizard) ===== */
.bk-quote #wizardconfirmacion > ul { display: none !important; }
.bk-quote .step-header { padding: .25rem 0 1.6rem; }
.bk-quote .step-progress { display: flex; align-items: flex-start; gap: 0; max-width: 460px; margin: 0 auto; }
.bk-quote .step-item { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.bk-quote .step-item:not(:last-child)::after {
    content: ''; position: absolute; top: 17px;
    left: calc(50% + 22px); right: calc(-50% + 22px);
    height: 2px; background: var(--bk-line); z-index: 0;
}
.bk-quote .step-item.completed:not(:last-child)::after { background: var(--bk-orange); }
.bk-quote .step-circle {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .9rem;
    border: 2px solid var(--bk-line); background: #fff; color: var(--bk-muted);
    position: relative; z-index: 1; transition: all .25s ease;
}
.bk-quote .step-item.active .step-circle {
    background: linear-gradient(135deg, var(--bk-orange) 0%, var(--bk-orange-dk) 100%);
    border-color: transparent; color: #fff; box-shadow: 0 0 0 4px rgba(247, 159, 8, .18);
}
.bk-quote .step-item.completed .step-circle { background: var(--bk-orange); border-color: var(--bk-orange); color: #fff; }
.bk-quote .step-label {
    font-size: .72rem; font-weight: 700; color: var(--bk-muted); margin-top: .5rem;
    text-align: center; text-transform: uppercase; letter-spacing: .03em;
}
.bk-quote .step-item.active .step-label,
.bk-quote .step-item.completed .step-label { color: var(--bk-orange-dk); }

/* Toolbar Siguiente/Anterior del smartWizard (relleno, sin outline) */
.bk-quote .toolbar { padding-top: 1.25rem !important; }
.bk-quote .toolbar > .btn,
.bk-quote .sw-theme-dots .toolbar > .btn {
    border-radius: 11px !important;
    font-weight: 700 !important;
    padding: .6rem 1.5rem !important;
    border: 0 !important;
    background: linear-gradient(135deg, var(--bk-orange) 0%, var(--bk-orange-dk) 100%) !important;
    color: #fff !important;
    box-shadow: var(--bk-shadow-sm);
}
.bk-quote .toolbar > .btn:hover { filter: brightness(1.04); }
.bk-quote .toolbar > .btn.disabled, .bk-quote .toolbar > .btn[disabled] { opacity: .45 !important; }