/* Shared choice cards + forms (calculators, auth pages, result "Calculate more" tiles). */

.calc-intro {
    text-align: center;
    padding-block: var(--sp-5);
}

.choice-grid {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: 1fr;
}

.choice-card {
    position: relative;
    display: block;
    padding: var(--sp-6);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.choice-card:hover {
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--c-green);
}

/* Kolekt's single-line icon for each calculator. The artwork is detailed line work, so it needs
 * room — below ~3rem the thin strokes merge into a smudge. */
.choice-card__icon {
    display: block;
    width: 5rem;
    height: 5rem;
    margin: 0 auto var(--sp-3);
}

.choice-card h3 {
    margin-bottom: var(--sp-2);
}

.choice-card p {
    margin: 0;
    color: var(--color-text-muted);
}

.choice-card--soon {
    opacity: 0.6;
}

.badge {
    display: inline-block;
    margin-top: var(--sp-3);
    padding: 0.15rem 0.6rem;
    font-size: var(--fs-100);
    font-weight: 600;
    color: var(--c-navy);
    background: var(--c-yellow);
    border-radius: 999px;
}

/* --- "Calculate more footprints" section (home + result pages; tiles are .choice-card) --- */
.result-more {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--color-border);
}

.result-more h2 {
    margin: 0 0 var(--sp-1);
    color: var(--c-blue);
}

.result-more p {
    margin: 0;
}

/* --- "About us" section (home + result pages) --- */
.about {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--color-border);
}

.about h2 {
    margin: 0 0 var(--sp-1);
    color: var(--c-blue);
}

.about p {
    margin: 0;
}

.about__services {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-4);
}

.about__services li {
    padding: var(--sp-4) var(--sp-5);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--color-text-muted);
}

.about__services strong {
    color: var(--c-navy);
}

/* Home page wrapper: stacks the shared calculateMore + about sections below the steps. */
.home-more {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    margin-top: var(--sp-7);
}

/* --- Organisation info page (public intro before the wizard) --- */
.org-info {
    max-width: 820px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding-block: var(--sp-4) var(--sp-6);
}

/* The column gap provides the section rhythm; drop the headings' default bottom margin
   so direct children don't double up (inner h2s keep theirs for their own content). */
.org-info > h1,
.org-info > div > p:last-child {
    margin-bottom: 0;
}

.info-list {
    margin: 0;
    padding-left: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.org-info__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.form-wrap {
    max-width: 560px;
}

/* --- "Register to view your footprint" gate: modal over a blurred live preview --- */
.fp-gate {
    display: grid; /* stack preview + overlay in one cell; height grows to the taller of the two */
    margin-block: var(--sp-5);
}

.fp-gate__preview,
.fp-gate__overlay {
    grid-area: 1 / 1;
}

.fp-gate__preview {
    /* z-index:0 keeps the preview BELOW the overlay. The blur+opacity form a stacking context,
       which would otherwise paint the preview ON TOP of the (non-positioned) modal. */
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    filter: blur(6px);
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}

.fp-gate__overlay {
    /* Positioned + higher z-index so the modal (and its scrim) always paint above the preview. */
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-6) var(--sp-4);
    /* Scrim: uniformly mutes the vivid preview so the modal reads clearly against it. */
    background: rgba(245, 248, 249, 0.62);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.fp-gate__modal {
    width: 100%;
    max-width: 460px;
    /* Opaque, clearly-floating card so the blurred preview never bleeds through. */
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 20px 50px rgba(11, 45, 68, 0.30);
}

.fp-gate__title {
    margin-bottom: var(--sp-2);
    font-size: clamp(1.5rem, 4vw, 2rem);
    text-align: center;
}

.fp-gate__login {
    margin-top: var(--sp-4);
    text-align: center;
}

.form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
}

.form__error {
    margin: 0;
    color: #b3261e;
    font-weight: 600;
}

.calc-splash {
    margin-top: var(--sp-5);
    padding: var(--sp-6);
    text-align: center;
}

.field-note {
    margin: 0;
    font-size: var(--fs-100);
}

/* --- Calculator input emphasis (soft orange, from brand yellow #FDC300) ---
   Fields the visitor must fill in (org wizard, person/family/holiday forms and the home hero
   country select) get a soft yellow-orange tint so they read as "type here". Scoped to
   .wizard / .calc-form so auth forms (login/register) keep the default white fields.
   Keep this ABOVE .is-invalid: the error border must win at equal specificity. */
.wizard .input,
.wizard .select,
.calc-form .input,
.calc-form .select,
/* The country select is hidden behind a combobox — tint its toggle instead. */
.wizard .country-combo__toggle,
.calc-form .country-combo__toggle {
    background: #FFFBEB; /* light --c-yellow tint */
    border-color: #E4B63C; /* darkened yellow-orange so the outline stays visible */
}

/* On focus the field goes white; ring width/offset come from the base.css focus rule. */
.wizard .input:focus,
.wizard .select:focus,
.calc-form .input:focus,
.calc-form .select:focus,
.wizard .country-combo__toggle:focus-visible,
.calc-form .country-combo__toggle:focus-visible {
    background: #fff;
    border-color: #C99700;
    outline-color: var(--c-yellow);
}

.input.is-invalid,
.select.is-invalid {
    border-color: #b3261e;
    box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.15);
}

.form__success {
    margin: 0;
    color: var(--c-green-dark);
    font-weight: 600;
}

/* --- "Delete your account": the profile's danger zone and its confirmation page ---
   Same card as the rest of the profile, outlined in the red the destructive button already uses
   so it reads as a separate, deliberate area. */
.danger-zone {
    border: 1px solid rgba(179, 38, 30, 0.35);
}

.danger-zone__title {
    margin: 0;
    font-size: var(--fs-400);
    color: #b3261e;
}

.danger-zone p {
    margin: 0;
}

.danger-zone__list {
    margin: 0;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.saved-list {
    list-style: none;
    margin: var(--sp-5) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.saved-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
}

.saved-item h3 {
    margin: 0 0 var(--sp-1);
}

.saved-item p {
    margin: 0;
    text-transform: capitalize;
}

/* Certificates page — two sub-tabs (Requests / Certificates). */
.subtabs {
    display: flex;
    gap: var(--sp-2);
    margin: var(--sp-5) 0 var(--sp-4);
    border-bottom: 1px solid var(--c-grey, #9d9d9c);
}

.subtabs__tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    padding: var(--sp-2) var(--sp-3);
    font: inherit;
    font-weight: 600;
    color: var(--c-navy, #0b2d44);
    cursor: pointer;
}

.subtabs__tab.is-active {
    border-bottom-color: var(--c-green, #afca0b);
}

.is-hidden {
    display: none;
}

/* Certificate reservation request card: a stacked block, action buttons on the right. */
.cert-request {
    align-items: flex-start;
}

.cert-request__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 0 0 auto;
}

.cert-request__main {
    flex: 1 1 auto;
    min-width: 0;
}

.cert-request__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.cert-request__status {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px var(--sp-2);
    border-radius: 999px;
    background: var(--c-green, #afca0b);
    color: var(--c-navy, #0b2d44);
}

.cert-request__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2) var(--sp-4);
    margin: var(--sp-3) 0 0;
}

.cert-request__grid dt {
    margin: 0;
    font-size: 0.8rem;
    color: var(--c-grey, #9d9d9c);
}

.cert-request__grid dd {
    margin: 0;
    font-weight: 600;
}

@media (min-width: 720px) {
    .cert-request__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 720px) {
    .choice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    /* 3 columns: six tiles read as two balanced rows. */
    .choice-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .about__services {
        grid-template-columns: repeat(3, 1fr);
    }
}