/* ==========================================================================
   Alerts + Wizard UI Styles
   ========================================================================== */

/* ===== Theme tokens ===== */
:root{
    --rose:#dc3545;
    --ink:#0b1020;
    --ink-2:#0f1730;
    --glass: rgba(255,255,255,.08);
    --ring: rgba(220,53,69,.24);
    --soft:#f8f9fb;
}

/* ===== Section wrapper ===== */
.alerts-wow{
    position:relative; overflow:hidden;
    background:
            radial-gradient(1200px 600px at 10% -10%, #ff7b7b1c 0%, transparent 60%),
            radial-gradient(900px 600px at 110% -10%, #ffbaba1a 0%, transparent 60%),
            linear-gradient(180deg, #0b0e16 0%, #121624 100%);
    color:#e8ecf4;
    isolation:isolate;
}

/* Animated background blobs */
.blob, .blob2{
    position:absolute; filter:blur(40px); opacity:.22; z-index:0; pointer-events:none;
    background: radial-gradient(circle at 30% 30%, #ff6b6b, transparent 45%),
    radial-gradient(circle at 70% 60%, #ffd1d1, transparent 40%);
    width:42vw; height:42vw; border-radius:50%;
}
.blob{ top:-12vw; left:-10vw; animation: float1 14s ease-in-out infinite; }
.blob2{ bottom:-14vw; right:-12vw; transform: scale(1.2); animation: float2 16s ease-in-out infinite; }
@keyframes float1{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(18px)} }
@keyframes float2{ 0%,100%{transform:translateY(0) scale(1.2)} 50%{transform:translateY(-18px) scale(1.23)} }

/* ===== Hero ===== */
.wow-hero{ position:relative; z-index:1; padding: clamp(2rem, 5vw, 4rem) 0 2rem; }
.wow-badge{
    display:inline-flex; gap:.5rem; align-items:center;
    background:linear-gradient(90deg, rgba(255,255,255,.13), rgba(255,255,255,.06));
    border:1px solid rgba(255,255,255,.18);
    padding:.35rem .7rem; border-radius:999px; font-size:.8rem;
    backdrop-filter: blur(6px);
}
.wow-title{
    font-weight:800; font-size:clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
    letter-spacing:.2px; line-height:1.12; margin:.6rem 0 .4rem;
    background: linear-gradient(180deg,#fff 0%, #d1d7e4 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wow-sub{ color:#b9c2d6; max-width:52ch; }

/* CTA */
.wow-cta{
    position:relative; display:inline-flex; align-items:center; gap:.6rem;
    background: var(--rose); color:#fff; border:0;
    padding:.85rem 1.2rem; border-radius:999px; font-weight:700;
    box-shadow: 0 14px 36px rgba(220,53,69,.35);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.wow-cta:hover{ transform: translateY(-1px); filter:brightness(1.02); box-shadow: 0 18px 42px rgba(220,53,69,.45);}
.wow-cta::after{
    content:""; position:absolute; inset:-8px; border-radius:999px;
    border:2px solid var(--ring); opacity:0; transform:scale(.9);
    animation: ring 2.8s ease-out infinite;
}
@keyframes ring{0%{opacity:.7;transform:scale(.9)}70%,100%{opacity:0;transform:scale(1.18)} }

/* Price chip */
.price-chip{
    display:inline-flex; gap:.6rem; align-items:baseline;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    padding:.6rem .9rem; border-radius:.9rem; margin-top:.9rem;
    backdrop-filter: blur(4px);
}
.price-chip s{ color:#94a3b8; }

/* Stat chips */
.stat-stack{ display:flex; gap:.5rem; flex-wrap:wrap; }
.stat-pill{
    display:flex; align-items:center; gap:.4rem;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
    color:#e6ebf5; border-radius:999px; padding:.4rem .7rem; font-size:.85rem;
}

/* ===== Benefit tiles ===== */
.benefit{
    position:relative; z-index:1;
    background: var(--glass);
    border:1px solid rgba(255,255,255,.16);
    border-radius:1rem; padding:.9rem 1rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    backdrop-filter: blur(6px);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.benefit:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.28); box-shadow:0 16px 40px rgba(0,0,0,.25);}
.benefit .ic{ font-size:1.6rem; }

/* ===== Preferences card ===== */
.prefs-card{
    position:relative; z-index:1;
    background:#ffffff; border:1px solid rgba(0,0,0,.08);
    border-radius:1rem; overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.prefs-head{
    padding:.9rem 1rem; display:flex; align-items:center; gap:.6rem;
    border-bottom:1px solid #eaeaea; background:#f8f9fb; color:#333;
}
.prefs-body{ padding:.6rem; background:#fff; }

.table-wow thead th{
    position:sticky; top:0; z-index:1; background:#f1f3f6;
    color:#555; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; border:0;
}
.table-wow tbody tr{ transition:background .12s ease, transform .12s ease; }
.table-wow tbody tr:hover{ background:#f9fafc; }
.row-active{ box-shadow: inset 0 0 0 1px var(--bs-success); border-radius:.5rem; }

/* ===== Empty state ===== */
.prefs-empty{
    background:#fff; border:1px solid rgba(0,0,0,.06);
    box-shadow:0 10px 25px rgba(0,0,0,.06);
    border-radius:1rem;
    padding:2rem 1.5rem;
}
@media (min-width:768px){ .prefs-empty{ padding:2.5rem 2rem; } }

.emoji-burst{
    width:72px; height:72px; border-radius:18px;
    display:grid; place-items:center;
    background: radial-gradient(120% 120% at 15% 20%, #ffe6ea 0%, #ffd6dc 35%, #fff 80%);
    color:#dc3545; font-size:32px; margin-bottom:.75rem;
    animation: popIn .5s ease both;
}
@keyframes popIn{ from{ transform:scale(.85); opacity:0; } to{ transform:scale(1); opacity:1; } }

.tip-chip{
    background:#f7f8fb; border:1px solid #eceff3;
    color:#6b7280; padding:.35rem .6rem; border-radius:999px;
    font-size:.85rem; transition: transform .15s ease, background .2s ease;
}
.tip-chip:hover{ transform:translateY(-1px); background:#f3f5f8; }

/* CTA wave button */
.btn-cta-wave{ position:relative; overflow:hidden; }
.btn-cta-wave::after{
    content:""; position:absolute; inset:0;
    background: radial-gradient(150px 150px at var(--x,50%) var(--y,50%), rgba(255,255,255,.35), transparent 60%);
    opacity:0; transition:opacity .25s ease;
}
.btn-cta-wave:hover::after{ opacity:1; }
.btn-cta-wave:hover{ filter:brightness(.97); }

/* Hover underline */
.hover-underline{ position:relative; display:inline-block; }
.hover-underline::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:left;
    transition:transform .2s ease;
}
.hover-underline:hover::after{ transform:scaleX(1); }

/* ===== Wizard styles ===== */
.modal-wizard .wizard-step{ display:none; }
.modal-wizard .wizard-step.active{ display:block; animation:mwFade .28s ease; }
@keyframes mwFade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.modal-wizard .wizard-progress{
    display:flex; gap:.75rem; justify-content:center; margin:-.25rem 1rem .75rem;
}
.modal-wizard .wizard-progress .step{
    flex:1; text-align:center; font-weight:600; opacity:.55; font-size:.9rem; padding:.35rem .5rem;
    border-bottom:2px solid #eee;
}
.modal-wizard .wizard-progress .step.active{
    opacity:1; color:#198754; border-bottom-color:#198754;
}
.modal-wizard .btn-ghost{ background:#f8f9fa; border:1px solid #e9ecef; }
.modal-wizard .btn-ghost:hover{ background:#f1f3f5; }

/* Radio cards */
.custom-radio-card{
    border:2px solid #dee2e6; border-radius:.5rem; padding:1rem;
    cursor:pointer; transition:.25s; background:#fff;
    display:flex; align-items:center; gap:.75rem;
}
.custom-radio-card .form-check-input{
    margin:0; accent-color:#198754; flex-shrink:0;
}
.custom-radio-card .form-check-label{ margin:0; flex:1; }
.custom-radio-card:has(input:checked){
    border-color:#198754; box-shadow:0 0 0 3px rgba(25,135,84,.25); background:#f6fff9;
}
.custom-radio-card:has(input:checked) .fw-semibold{ color:#198754; }

/* Error state */
.is-invalid,
.is-invalid + .form-select,
.is-invalid + .form-control{ border-color:#dc3545 !important; }
.invalid-feedback{ display:block; color:#dc3545; font-size:.8125rem; margin-top:.25rem; }

/* Helpers */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
.text-rose{ color:var(--rose); }
.opacity-85{ opacity:.85; }