/* ============================================================
   /calculator - מחשבון חבילה (20/10/2026). נטען רק מ-views/calculator.php.
   משתמש בטוקנים של main.css (--accent, --navy, --line, --shadow-*, --r-*, --ease-out)
   ובטופס הקצר .hvf (views/_lead_form.php).
   ============================================================ */

.cz-sec { position: relative; overflow: clip; padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 7vw, 96px); background: var(--page-bg); }
.cz-sec::before {
    content: ""; position: absolute; inset: -20% -10% auto; height: 90%; pointer-events: none;
    background: radial-gradient(45% 40% at 20% 25%, rgba(47, 109, 246, 0.12), transparent 70%),
                radial-gradient(35% 35% at 85% 10%, rgba(88, 86, 224, 0.10), transparent 70%);
}
.cz-sec .container { position: relative; }

.cz-head { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.cz-kicker {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 14px 6px 12px;
    border-radius: 999px; background: #fff; color: var(--accent-ink); font-size: 14px; font-weight: 800;
    box-shadow: 0 0 0 1px var(--line) inset, var(--shadow-soft);
}
.cz-kicker i { font-size: 17px; }
.cz-head h1 {
    margin: 0 0 16px; color: var(--navy); font-size: clamp(32px, 4vw, 52px); font-weight: 900;
    line-height: 1.12; letter-spacing: -0.005em; text-wrap: balance;
}
.cz-head h1 em { display: block; font-style: normal; color: var(--accent); }
.cz-sub { margin: 0 auto; max-width: 36em; color: var(--text-muted); font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.6; }

/* ---------- הכרטיס ---------- */
.cz-card {
    position: relative; max-width: 760px; margin: 0 auto; overflow: hidden;
    border-radius: var(--r-xl); background: #fff; box-shadow: 0 0 0 1px var(--line) inset, var(--shadow-float);
}
.cz-progress { height: 6px; background: var(--surface-2); }
.cz-progress i {
    display: block; height: 100%; width: 0; border-start-end-radius: 6px; border-end-end-radius: 6px;
    background: linear-gradient(90deg, var(--cyan), var(--accent), var(--indigo));
    transition: width .4s var(--ease-out);
}

.cz-quiz { padding: clamp(24px, 4vw, 44px); }
.cz-quiz.is-in { animation: cz-in .32s var(--ease-out) both; }
@keyframes cz-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.cz-quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; margin-bottom: 14px; }
.cz-step { color: var(--text-muted); font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cz-back {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 999px;
    background: transparent; color: var(--text-muted); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
    transition: background-color .16s, color .16s;
}
.cz-back:hover { background: var(--surface-2); color: var(--navy); }
.cz-q { margin: 0 0 24px; color: var(--navy); font-size: clamp(23px, 2.6vw, 30px); font-weight: 900; line-height: 1.25; outline: none; }

.cz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cz-opts--many { grid-template-columns: repeat(3, 1fr); }
.cz-opt {
    min-height: 64px; padding: 14px 18px; border: 2px solid var(--line-strong); border-radius: var(--r-md);
    background: #fff; color: var(--navy); font: inherit; font-size: 16.5px; font-weight: 700; line-height: 1.35;
    text-align: start; cursor: pointer;
    transition: border-color .16s, background-color .16s, transform .16s var(--ease-out), box-shadow .16s;
}
.cz-opt:active { transform: scale(.98); }
.cz-opt:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(47, 109, 246, .2); border-color: var(--accent); }
.cz-opt.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: var(--shadow-accent); }
@media (hover: hover) and (pointer: fine) {
    .cz-opt:hover { border-color: rgba(47, 109, 246, .45); background: #f7f9ff; }
    .cz-opt.is-on:hover { background: var(--accent-soft); }
}

/* ---------- תוצאה ---------- */
.cz-result { padding: clamp(24px, 4vw, 44px); animation: cz-up .4s var(--ease-out) both; }
@keyframes cz-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cz-plan {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(20px, 3vw, 28px);
    border-radius: var(--r-lg); color: #fff;
    background: radial-gradient(80% 80% at 95% 0%, rgba(91, 200, 242, .25), transparent 70%), linear-gradient(160deg, #13265c, var(--navy-deep));
}
.cz-plan-kicker { color: rgba(255, 255, 255, .72); font-size: 14px; font-weight: 700; }
.cz-plan-name { margin: 2px 0 6px; color: #fff; font-size: clamp(30px, 3.6vw, 42px); font-weight: 900; line-height: 1.1; outline: none; }
.cz-plan-for { margin: 0; max-width: 26em; color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.5; }
.cz-plan-price { flex: none; text-align: end; }
.cz-price { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.cz-price strong { color: #fff; font-size: clamp(38px, 5vw, 54px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.cz-price span { color: rgba(255, 255, 255, .78); font-size: 16px; font-weight: 700; }
.cz-peruser { display: block; margin-top: 6px; color: rgba(255, 255, 255, .7); font-size: 13.5px; }
.cz-alt { margin: 12px 4px 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.5; }

.cz-list-title { margin: 26px 0 12px; color: var(--navy); font-size: 18px; font-weight: 900; }
.cz-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cz-list li {
    display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md);
    background: var(--page-bg); box-shadow: 0 0 0 1px var(--line) inset;
    animation: cz-up .36s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms + 80ms);
}
.cz-list li > i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-size: 21px; }
.cz-li-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 2px; }
.cz-li-head strong { color: var(--navy); font-size: 16px; }
.cz-list p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.5; }
.cz-tag { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.cz-tag--must { background: #dcf7e3; color: #14833f; }
.cz-tag--nice { background: var(--surface-2); color: var(--text-muted); }

.cz-switch {
    display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: var(--r-md);
    background: #fff8e6; box-shadow: 0 0 0 1px rgba(196, 140, 20, .25) inset; color: var(--text); text-decoration: none;
    font-size: 14.5px; line-height: 1.45; transition: transform .16s var(--ease-out);
}
.cz-switch[hidden] { display: none; }
.cz-switch strong { display: block; color: var(--navy); font-size: 15.5px; }
.cz-switch > i { flex: none; font-size: 22px; color: #a8710b; }
.cz-switch > i:last-child { margin-inline-start: auto; font-size: 18px; }
@media (hover: hover) and (pointer: fine) { .cz-switch:hover { transform: translateX(-3px); } }

.cz-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.cz-ctas .btn-primary { flex: 1 1 240px; justify-content: center; }
.cz-fine { margin: 12px 0 0; color: var(--text-muted); font-size: 13.5px; }

.cz-lead { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.cz-lead-copy { margin-bottom: 14px; }
.cz-lead-copy strong { display: block; color: var(--navy); font-size: 18px; font-weight: 900; margin-bottom: 4px; }
.cz-lead-copy span { color: var(--text-muted); font-size: 14.5px; line-height: 1.5; }

.cz-trust {
    list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px;
    max-width: 760px; margin: 22px auto 0; padding: 0; color: var(--text-muted); font-size: 14.5px; font-weight: 700;
}
.cz-trust li { display: inline-flex; align-items: center; gap: 6px; }
.cz-trust i { color: var(--accent); font-size: 18px; }

@media (max-width: 700px) {
    .cz-opts, .cz-opts--many { grid-template-columns: 1fr; gap: 10px; }
    .cz-opt { min-height: 56px; }
    .cz-plan { flex-direction: column; align-items: stretch; }
    .cz-plan-price { text-align: start; }
    .cz-price { justify-content: flex-start; }
    .cz-ctas .btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .cz-quiz.is-in, .cz-result, .cz-list li { animation: none; }
    .cz-progress i { transition: none; }
}