/* ════════════════════════════════════════════════════════════════════
   Public Faraid calculator (Views/Calculator/Index.cshtml) — additions on
   top of signup.css + public-register.css.

   2026-09-21 — the page wears the /register shell (split navy hero + warm
   form panel) at the owner's request, while its steps, copy and logic are
   the website calculator's (MuslimWillWebSite-feat-faraid-calculator). The
   calc-* class names are the ones the page script builds, kept from the
   website port; every value here comes from signup.css's :root palette so
   the two pages cannot drift apart visually.
   ════════════════════════════════════════════════════════════════════ */

/* ── Journey strip: the calculator's steps, with progress states ── */
.su-journey__item.is-done .su-journey__dot { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.su-journey__item.is-current .su-journey__dot { background: transparent; border: 1.5px solid var(--gold-light); color: #fff; box-shadow: 0 0 0 3px rgba(200, 160, 100, .18); }
.su-journey__item.is-current .su-journey__text { color: #fff; }

/* The results screens need more room than a form. */
.su-card.calc-wide { max-width: 620px; }

/* ── Step header + progress (the in-card twin of the journey, the only one on mobile) ── */
.calc-progress { margin-bottom: 22px; }
.calc-progress .su-disc__head { margin-bottom: 8px; }
.calc-progress .su-disc__progress { margin-bottom: 0; }

.calc-stepTitle { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 30px; color: var(--navy-deep); margin: 0 0 8px; line-height: 1.2; }
.calc-stepIntro { font-size: 14.5px; color: var(--slate); margin: 0 0 24px; line-height: 1.55; }

/* ── Fields ── */
.calc-fieldGroup { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.calc-fieldGroup:last-child { margin-bottom: 0; }
.calc-fieldLabel { font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); line-height: 1.5; }

.calc-radioRow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc-radioOption {
    position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer;
    border: 1px solid var(--stone); border-radius: var(--radius-sm, 8px); background: #fff;
    padding: 13px 14px; font-size: 14px; font-weight: 500; color: var(--navy-deep);
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.calc-radioOption:hover { border-color: var(--navy-deep); }
/* The package chooser's radio (public-register.css .pr-pkg__radio), drawn on the real input. */
.calc-radioOption input {
    appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
    width: 20px; height: 20px; border-radius: var(--radius-circle, 50%);
    border: 1.5px solid var(--stone); background: #fff; cursor: pointer;
    display: grid; place-items: center; transition: all 150ms ease;
}
.calc-radioOption input::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--navy-deep); transform: scale(0); transition: transform 150ms ease; }
.calc-radioOption input:checked { border-color: var(--gold); background: var(--gold); }
.calc-radioOption input:checked::after { transform: scale(1); }
.calc-radioOption input:focus-visible { outline: 3px solid rgba(13, 27, 50, .25); outline-offset: 2px; }
.calc-radioOption:has(input:checked) { border-color: var(--gold); background: #FDF8F0; box-shadow: 0 0 0 3px rgba(200, 160, 100, .15); font-weight: 600; }

.calc-numberField {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border: 1px solid var(--stone); border-radius: var(--radius-sm, 8px); background: #fff;
    padding: 8px 8px 8px 14px; margin-bottom: 10px;
}
.calc-fieldGroup .calc-numberField { margin-bottom: 0; }
.calc-numberLabel { font-size: 14px; color: var(--ink); }
.calc-numberInput {
    width: 76px; background: var(--warm-white); border: 1px solid var(--stone); color: var(--navy-deep);
    font-family: inherit; font-size: 15px; font-weight: 600; text-align: center;
    padding: 9px 8px; border-radius: var(--radius-sm, 8px);
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.calc-numberInput:focus { outline: none; background: #fff; border-color: var(--navy-deep); box-shadow: 0 0 0 3px rgba(13, 27, 50, .08); }

.calc-conditionalBlock { border-left: 2px solid var(--gold-light); padding-left: 16px; margin: 4px 0 18px; display: flex; flex-direction: column; gap: 14px; }
.calc-conditionalBlock .calc-fieldGroup { margin-bottom: 0; }
.calc-helpText { font-size: 11.5px; color: var(--slate); font-style: italic; margin: 0; line-height: 1.5; }

/* ── Navigation: Back = .su-btn-outline, Next = .su-submit ── */
.calc-navRow { display: flex; align-items: stretch; gap: 12px; margin-top: 26px; }
.calc-btn {
    font-family: inherit; border-radius: var(--radius-sm, 8px); cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, background 150ms ease, color 150ms ease;
}
.calc-btnPrimary {
    flex: 1; border: none; font-size: 16px; font-weight: 600; letter-spacing: .01em; padding: 16px 24px;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-deep) 100%);
    color: var(--navy-deep); box-shadow: 0 12px 26px -10px rgba(168, 132, 74, .65);
}
.calc-btnPrimary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 32px -10px rgba(168, 132, 74, .75); filter: brightness(1.03); }
.calc-btnPrimary:focus-visible { outline: 3px solid rgba(13, 27, 50, .35); outline-offset: 2px; }
.calc-btnPrimary:disabled { background: var(--stone); color: var(--slate); cursor: not-allowed; box-shadow: none; }
.calc-btnSecondary { background: #fff; color: var(--navy-deep); border: 1px solid var(--navy-deep); font-size: 13.5px; font-weight: 500; padding: 12px 18px; }
.calc-btnSecondary:hover { background: var(--navy-deep); color: #fff; }

/* "Please answer every question above to continue." — the register page's .su-encourage */
.calc-warning { font-size: 12px; color: var(--slate); text-align: center; margin: 12px 0 0; }
.calc-error { display: block; background: #FDECEA; border: 1px solid #F3C4BE; color: var(--error); border-radius: var(--radius-sm, 8px); padding: 12px 14px; font-size: 13px; margin: 0 0 6px; }

/* ── Results ── */
.calc-resultsSummary { font-size: 14px; color: var(--slate); line-height: 1.6; margin: 0 0 20px; }

.calc-sideBySide { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 18px; align-items: start; }
.calc-sidePanel { border: 1px solid var(--stone); border-radius: var(--radius-md, 12px); background: #fff; padding: 16px; }
.calc-sidePanelOntario { background: #FDF8F0; border-color: #E0D3B4; }
.calc-sidePanelHeaderFaraid, .calc-sidePanelHeaderOntario { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.calc-sidePanelHeaderFaraid { color: var(--navy-deep); }
.calc-sidePanelHeaderOntario { color: #7A5A1E; }

.calc-heirList { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.calc-sidePanel .calc-heirList, .calc-sidePanel .calc-unassignedRow { margin-bottom: 0; }
.calc-sidePanel .calc-unassignedRow, .calc-sidePanel .calc-sourceNote { margin-top: 10px; }
.calc-heirRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--stone); border-radius: var(--radius-sm, 8px); background: #fff; padding: 10px 12px; }
.calc-heirLabel { font-size: 13.5px; font-weight: 600; color: var(--navy-deep); }
.calc-heirCount { font-size: 12px; font-weight: 400; color: var(--slate); margin-left: 6px; }
.calc-heirRow > span:last-child { text-align: right; }
.calc-heirPercent { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 20px; color: var(--navy-deep); white-space: nowrap; }
.calc-heirPerPerson { display: block; font-size: 11px; color: var(--gold-deep); }
.calc-heirRowDanger { background: #FDECEA; border-color: #F3C4BE; }
.calc-heirRowDanger .calc-heirPercent { color: var(--error); }

.calc-awlNote { font-size: 11.5px; color: var(--slate); font-style: italic; line-height: 1.5; margin: -4px 0 12px; }
.calc-unassignedRow { border: 1px dashed var(--stone); border-radius: var(--radius-sm, 8px); padding: 12px 14px; font-size: 12.5px; color: var(--slate); line-height: 1.55; margin-bottom: 18px; }

/* Bailout and "biggest gap" boxes — the register page's .pr-alert--warn / --error */
.calc-bailoutNote, .calc-alertPanel { background: #FDF8F0; border: 1px solid #E0D3B4; border-radius: var(--radius-sm, 8px); padding: 14px 16px; margin-bottom: 18px; color: #7A5A1E; font-size: 13px; line-height: 1.6; }
.calc-alertPanelDanger { background: #FDECEA; border-color: #F3C4BE; }
.calc-alertLabel { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7A5A1E; margin-bottom: 6px; }
.calc-alertBody { font-size: 13px; line-height: 1.6; color: #7A5A1E; margin: 0; }
.calc-alertPanelDanger .calc-alertLabel, .calc-alertPanelDanger .calc-alertBody { color: var(--error); }

.calc-costPanel { background: var(--sand); border: 1px solid var(--stone); border-radius: var(--radius-md, 12px); padding: 16px; margin: 18px 0; }
.calc-costPanelTitle { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: var(--navy-deep); margin: 0 0 8px; }
.calc-costPanelBody { font-size: 13px; color: var(--ink); line-height: 1.6; margin: 0 0 10px; }
.calc-sourceNote { font-size: 11px; color: var(--slate); line-height: 1.5; margin: 0; }

/* The main CTA — a small navy panel in the hero's own colours. */
.calc-ctaPrimary {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--navy-deep); border-radius: var(--radius-md, 12px); padding: 22px 24px;
    margin: 18px 0 12px; text-decoration: none; transition: transform 140ms ease, box-shadow 140ms ease;
}
.calc-ctaPrimary::after { content: ""; position: absolute; right: 0; bottom: 0; width: 42%; height: 70%; background: linear-gradient(to top left, rgba(200, 160, 100, .16) 50%, transparent 50%); pointer-events: none; }
.calc-ctaPrimary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgba(13, 27, 50, .6); }
.calc-ctaPrimaryEyebrow { font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.calc-ctaPrimaryTitle { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 500; color: #fff; line-height: 1.15; margin-bottom: 4px; }
.calc-ctaPrimaryPrice { font-size: 14px; font-weight: 600; color: var(--gold-light); margin-bottom: 10px; }
.calc-ctaPrimaryDesc { position: relative; z-index: 1; font-size: 13px; color: rgba(255, 255, 255, .72); line-height: 1.6; margin-bottom: 14px; }
.calc-ctaPrimaryLink { position: relative; z-index: 1; font-size: 14px; font-weight: 600; color: var(--gold-light); }

.calc-ctaSecondary { font-size: 12.5px; color: var(--slate); line-height: 1.6; margin: 0 0 8px; }
.calc-ctaSecondaryLink { color: var(--gold-deep); font-weight: 600; text-decoration: none; }
.calc-ctaSecondaryLink:hover { color: var(--navy-deep); text-decoration: underline; text-underline-offset: 2px; }

.calc-disclaimer { font-size: 11px; color: var(--slate); line-height: 1.55; margin: 20px 0 0; }

/* ── Save Results (lead capture) — the register form's fields and submit ── */
.calc-form { display: flex; flex-direction: column; }
.calc-formField { margin-bottom: 18px; }
.calc-formLabel { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px; }
.calc-formInput {
    width: 100%; background: #fff; border: 1px solid var(--stone); color: var(--ink);
    font-family: inherit; font-size: 15px; padding: 12px 16px; border-radius: var(--radius-sm, 8px);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.calc-formInput:focus { outline: none; border-color: var(--navy-deep); box-shadow: 0 0 0 3px rgba(13, 27, 50, .08); }
.calc-formInput::placeholder { color: var(--slate); }
.calc-formSubmit {
    width: 100%; font-family: inherit; font-size: 16.5px; font-weight: 600; letter-spacing: .01em; padding: 17px 24px;
    border: none; border-radius: var(--radius-sm, 8px); cursor: pointer; margin: 4px 0 14px;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-deep) 100%);
    color: var(--navy-deep); box-shadow: 0 12px 26px -10px rgba(168, 132, 74, .65);
    transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.calc-formSubmit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 32px -10px rgba(168, 132, 74, .75); filter: brightness(1.03); }
.calc-formSubmit:disabled { background: var(--stone); color: var(--slate); cursor: default; box-shadow: none; }
.calc-formDisclaimer { font-size: 12px; color: var(--slate); text-align: center; margin: 0; }

/* Success — the register page's .pr-success panel */
.calc-successCard { text-align: left; }
.calc-successIcon {
    width: 64px; height: 64px; border-radius: var(--radius-circle, 50%); background: #EAF4EE; border: 1px solid #B5D9C2;
    display: flex; align-items: center; justify-content: center; color: var(--success); margin-bottom: 18px;
}
.calc-successTitle { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 30px; color: var(--navy-deep); margin: 0 0 10px; line-height: 1.2; }
.calc-successDesc { font-size: 14.5px; color: var(--ink); line-height: 1.6; margin: 0 0 18px; }
.calc-successCta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
    font-size: 15px; font-weight: 600; padding: 14px 22px; border-radius: var(--radius-sm, 8px); margin-bottom: 14px;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-deep) 100%);
    color: var(--navy-deep); box-shadow: 0 12px 26px -10px rgba(168, 132, 74, .65);
}

@media (max-width: 480px) {
    /* Seven steps do not fit one line on a phone (/register has five): wrap them instead of clipping. */
    #calcJourney { flex-wrap: wrap; gap: 12px 10px; }
    #calcJourney .su-journey__conn { display: none; }
    .calc-radioRow { grid-template-columns: 1fr; }
    .calc-navRow { flex-direction: column-reverse; }
    .calc-btnSecondary { width: 100%; }
}