/* ==========================================================================
   Verduurzaamwijs — Woning & Verduurzamingscheck

   Two surfaces side by side: the questions on paper, and an ink column that
   keeps the visitor's profile and the route taking shape. Every colour an
   editor can change lives on a custom property, so the Elementor controls
   never need rules of their own.
   ========================================================================== */

.pds-check {
    --pds-check-text: var(--pds-body);
    --pds-check-title: var(--pds-title);
    --pds-check-muted: var(--pds-muted);
    --pds-check-accent: var(--pds-purple);
    --pds-check-card: var(--pds-paper);
    --pds-check-card-border: var(--pds-line);
    --pds-check-card-active: var(--pds-purple-wash);
    --pds-check-progress: var(--pds-orange);
    --pds-check-aside: var(--pds-ink);
    --pds-check-aside-text: rgba(255, 255, 255, .66);
    --pds-check-aside-accent: var(--pds-orange);

    background: var(--pds-bone);
    color: var(--pds-check-text);
}

.pds-check__title,
.pds-check__question,
.pds-check__intro-title,
.pds-check__result-title,
.pds-check__card-title,
.pds-check__trust-title,
.pds-check__cta-title {
    color: var(--pds-check-title);
}

.pds-check__body {
    color: var(--pds-check-text);
}

.pds-check [tabindex="-1"]:focus {
    outline: none;
}

/* Any class rule with a display would otherwise beat the UA rule for the
   hidden attribute — which is what the progress bar, the route note and the
   recommendation cards are toggled with. */
.pds-check [hidden] {
    display: none;
}

/* ==========================================================================
   Section header — stays put while the panels change underneath
   ========================================================================== */

.pds-check__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    margin-block-end: clamp(1.75rem, 3.5vw, 2.75rem);
}

.pds-check__head-copy {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    max-inline-size: 58ch;
}

.pds-check__trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pds-check__trust-list li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .875rem;
    border: 1px solid var(--pds-check-card-border);
    border-radius: 999px;
    background: var(--pds-paper);
    font-size: var(--pds-fs-small);
    font-weight: 600;
    color: var(--pds-check-title);
}

.pds-check__trust-icon {
    display: grid;
    place-items: center;
    color: var(--pds-sage);
}

/* ==========================================================================
   The split
   ========================================================================== */

.pds-check__split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

@media (min-width: 1000px) {
    .pds-check__split {
        grid-template-columns: minmax(0, 1fr) 21.5rem;
        gap: 1.25rem;
    }
}

/* --- Stage: where the answering happens ---------------------------------- */

.pds-check__stage {
    position: relative;
    background: var(--pds-paper);
    border: 1px solid var(--pds-line);
    border-radius: var(--pds-r-lg);
    box-shadow: var(--pds-shadow);
    padding: clamp(1.25rem, 3.5vw, 2.75rem);
    overflow: hidden;
    container-type: inline-size;
    container-name: pds-stage;
    /* Breathing room whenever the script pulls the panel back into view. */
    scroll-margin-block-start: 1.5rem;
}

/* A hairline of brand colour along the top edge — enough to make the panel
   read as part of a system rather than a default rounded box. */
.pds-check__stage::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    background: linear-gradient(90deg, var(--pds-check-accent), var(--pds-check-progress));
}

/* --- Panels --------------------------------------------------------------
   Only once the script has taken over does the widget become a one-screen
   flow; without it every panel stays readable and the CF7 form still works. */

.pds-check__panel + .pds-check__panel {
    margin-block-start: 2.5rem;
}

.pds-check[data-pds-ready] .pds-check__panel {
    display: none;
    margin-block-start: 0;
}

.pds-check[data-pds-ready] .pds-check__panel.is-active {
    display: block;
}

@media (prefers-reduced-motion: no-preference) {
    .pds-check[data-pds-ready] .pds-check__panel.is-active {
        animation: pds-check-in .4s var(--pds-ease-out) both;
    }
}

@keyframes pds-check-in {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
    }
}

/* --- Progress ------------------------------------------------------------ */

.pds-check__progress {
    display: block;
    margin-block-end: 1.75rem;
}

.pds-check__track {
    position: relative;
    block-size: 5px;
    border-radius: 999px;
    background: var(--pds-bone-deep);
    overflow: hidden;
}

.pds-check__fill {
    display: block;
    block-size: 100%;
    inline-size: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pds-check-accent), var(--pds-check-progress));
    transition: width .45s var(--pds-ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .pds-check__fill {
        transition: none;
    }
}

/* ==========================================================================
   Aside — profile, steps and the route while it forms
   ========================================================================== */

.pds-check__aside-inner {
    position: relative;
    overflow: hidden;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border-radius: var(--pds-r-lg);
    background: var(--pds-check-aside);
    color: var(--pds-check-aside-text);
}

@media (min-width: 1000px) {
    .pds-check__aside {
        position: sticky;
        inset-block-start: 1.5rem;
    }
}

/* Light coming from the top-right corner: the panel gets depth without a
   single extra image. */
.pds-check__glow {
    position: absolute;
    inset-block-start: -30%;
    inset-inline-end: -30%;
    inline-size: 22rem;
    block-size: 22rem;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--pds-check-aside-accent) 42%, transparent), transparent 68%);
    pointer-events: none;
}

.pds-check__aside-inner > *:not(.pds-check__glow):not(.pds__grain) {
    position: relative;
    z-index: 1;
}

.pds-check__aside-label {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: var(--pds-fs-eyebrow);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    margin-block-end: 1.375rem;
}

.pds-check__aside-mark {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: none;
    color: var(--pds-check-aside-accent);
}

/* --- Stepper ------------------------------------------------------------- */

.pds-check__stepper {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The rail behind the dots, and the part of it already covered. */
.pds-check__stepper::before,
.pds-check__stepper::after {
    content: "";
    position: absolute;
    inset-inline-start: 15px;
    inset-block: 18px;
    inline-size: 2px;
    border-radius: 2px;
}

.pds-check__stepper::before {
    background: rgba(255, 255, 255, .14);
}

.pds-check__stepper::after {
    background: linear-gradient(180deg, var(--pds-check-aside-accent), var(--pds-check-accent));
    transform: scaleY(var(--pds-check-rail, 0));
    transform-origin: top;
    transition: transform .5s var(--pds-ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .pds-check__stepper::after {
        transition: none;
    }
}

.pds-check__step-btn {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    inline-size: 100%;
    min-block-size: 44px;
    padding: .4375rem .5rem .4375rem 0;
    background: none;
    border: 0;
    text-align: start;
    font-family: var(--pds-text);
    color: inherit;
    cursor: pointer;
}

.pds-check__step-btn[disabled] {
    cursor: default;
}

.pds-check__step-dot {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background: var(--pds-check-aside);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18);
    font-size: .8125rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .5);
    transition: box-shadow .3s var(--pds-ease), color .3s var(--pds-ease), background-color .3s var(--pds-ease);
}

.pds-check__step-check {
    position: absolute;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .25s var(--pds-ease), transform .25s var(--pds-ease);
}

.pds-check__step.is-done .pds-check__step-num {
    opacity: 0;
}

.pds-check__step.is-done .pds-check__step-dot {
    background: var(--pds-check-aside-accent);
    box-shadow: none;
    color: #1B0C05;
}

.pds-check__step.is-done .pds-check__step-check {
    opacity: 1;
    transform: none;
}

.pds-check__step.is-current .pds-check__step-dot {
    box-shadow: inset 0 0 0 2px var(--pds-check-aside-accent), 0 0 0 5px color-mix(in srgb, var(--pds-check-aside-accent) 22%, transparent);
    color: #fff;
}

.pds-check__step.is-current.is-done .pds-check__step-dot {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--pds-check-aside-accent) 22%, transparent);
}

.pds-check__step-body {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding-block-start: .1875rem;
    min-inline-size: 0;
}

.pds-check__step-label {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .48);
    transition: color .3s var(--pds-ease);
}

.pds-check__step.is-done .pds-check__step-label,
.pds-check__step.is-current .pds-check__step-label {
    color: rgba(255, 255, 255, .8);
}

.pds-check__step-value {
    font-size: var(--pds-fs-small);
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
    overflow-wrap: break-word;
}

.pds-check__step-value:empty {
    display: none;
}

.pds-check__step-btn:not([disabled]):hover .pds-check__step-value {
    color: var(--pds-check-aside-accent);
}

/* --- Route --------------------------------------------------------------- */

.pds-check__aside-route {
    margin-block-start: 1.5rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid rgba(255, 255, 255, .12);
}

.pds-check__aside-sub {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .48);
    margin-block-end: .875rem;
}

.pds-check__aside-empty {
    font-size: var(--pds-fs-small);
    line-height: 1.5;
    color: var(--pds-check-aside-text);
}

.pds-check__route {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pds-check__route-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .875rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: var(--pds-fs-small);
    font-weight: 600;
    color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
    .pds-check__route-item {
        animation: pds-check-in .45s var(--pds-ease-out) both;
    }
}

.pds-check__route-dot {
    flex: none;
    inline-size: .5rem;
    block-size: .5rem;
    border-radius: 50%;
    background: var(--pds-check-aside-accent);
}

.pds-check__aside-note {
    margin-block-start: .875rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .45);
}

.pds-check__aside-foot {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-block-start: 1.5rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid rgba(255, 255, 255, .12);
    font-size: .8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .58);
}

.pds-check__aside-foot svg {
    flex: none;
    color: var(--pds-check-aside-accent);
}

/* ==========================================================================
   Intro panel
   ========================================================================== */

.pds-check__intro-media {
    margin-block-end: 1.5rem;
    border-radius: var(--pds-r);
    overflow: hidden;
    aspect-ratio: 16 / 7;
}

.pds-check__intro-media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.pds-check__intro-title {
    margin-block-end: .625rem;
}

.pds-check__how {
    display: grid;
    gap: .75rem;
    list-style: none;
    margin: 1.75rem 0;
    padding: 0;
}

.pds-check__how-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.125rem;
    border-radius: var(--pds-r);
    background: var(--pds-bone);
    border: 1px solid var(--pds-check-card-border);
}

.pds-check__how-num {
    flex: none;
    font-family: var(--pds-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--pds-check-accent);
    opacity: .55;
}

.pds-check__how-body {
    display: flex;
    flex-direction: column;
    gap: .1875rem;
}

.pds-check__how-body strong {
    font-size: var(--pds-fs-body);
    font-weight: 600;
    color: var(--pds-check-title);
}

.pds-check__how-body span {
    font-size: var(--pds-fs-small);
    color: var(--pds-check-muted);
}

.pds-check__micro {
    margin-block-start: .75rem;
    font-size: var(--pds-fs-small);
    color: var(--pds-check-muted);
}

/* ==========================================================================
   Question panel
   ========================================================================== */

.pds-check__kicker {
    font-size: var(--pds-fs-eyebrow);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pds-check-accent);
    margin-block-end: .75rem;
}

.pds-check__hint {
    margin-block-start: .625rem;
    font-size: var(--pds-fs-small);
    color: var(--pds-check-muted);
}

.pds-check__options {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin-block-start: 1.75rem;
}

@container pds-stage (min-width: 30rem) {
    .pds-check__options[data-cols="2"],
    .pds-check__options[data-cols="3"],
    .pds-check__options[data-cols="4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container pds-stage (min-width: 46rem) {
    .pds-check__options[data-cols="3"],
    .pds-check__options[data-cols="4"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Energy labels are short and equal in weight, so they lay themselves out as
   small tiles — no column count to keep in step with the panel width. */
.pds-check__options[data-compact="1"] {
    grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
    gap: .5rem;
}

/* An answer that is not one of the set — "Ik weet het niet" — takes a row of
   its own instead of being squeezed into a tile meant for one letter. */
.pds-check__option--full {
    grid-column: 1 / -1;
}

/* Without container query support the grid stays one column, which is the
   safe reading order — this brings back a viewport-based two-column layout. */
@supports not (container-type: inline-size) {
    @media (min-width: 700px) {
        .pds-check__options[data-cols="2"],
        .pds-check__options[data-cols="3"] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .pds-check__options[data-cols="4"] {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
}

.pds-check__option {
    position: relative;
    display: flex;
    align-items: center;
    gap: .875rem;
    inline-size: 100%;
    min-block-size: 56px;
    padding: .9375rem 1.0625rem;
    text-align: start;
    background: var(--pds-check-card);
    border: 1.5px solid var(--pds-check-card-border);
    border-radius: var(--pds-r);
    color: var(--pds-check-title);
    font-family: var(--pds-text);
    font-size: var(--pds-fs-body);
    line-height: 1.35;
    cursor: pointer;
    transition: border-color .25s var(--pds-ease), background-color .25s var(--pds-ease),
                box-shadow .25s var(--pds-ease), transform .25s var(--pds-ease);
}

.pds-check__option:hover {
    border-color: var(--pds-check-accent);
    box-shadow: var(--pds-shadow-sm);
}

@media (prefers-reduced-motion: no-preference) {
    .pds-check__option:hover {
        transform: translateY(-2px);
    }
}

.pds-check__option.is-selected {
    border-color: var(--pds-check-accent);
    background: var(--pds-check-card-active);
}

.pds-check__option-icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 12px;
    background: var(--pds-bone);
    color: var(--pds-check-accent);
}

.pds-check__option.is-selected .pds-check__option-icon {
    background: var(--pds-paper);
}

.pds-check__option--badge {
    justify-content: center;
    min-block-size: 52px;
    padding: .5rem;
}

.pds-check__option-badge {
    display: grid;
    place-items: center;
    flex: none;
    min-inline-size: 2.75rem;
    block-size: 2.25rem;
    padding-inline: .5rem;
    border-radius: 8px;
    background: var(--pds-sage);
    color: #fff;
    font-family: var(--pds-display);
    font-weight: 700;
    font-size: .9375rem;
    letter-spacing: -.02em;
}

/* Without a tick to lean on, the selected tile carries the state itself. */
.pds-check__option--badge.is-selected {
    box-shadow: inset 0 0 0 2px var(--pds-check-accent);
}

.pds-check__option-body {
    display: flex;
    flex-direction: column;
    gap: .1875rem;
    min-inline-size: 0;
}

.pds-check__option-label {
    font-weight: 600;
    overflow-wrap: break-word;
}

.pds-check__option-desc {
    font-size: var(--pds-fs-small);
    font-weight: 400;
    color: var(--pds-check-muted);
}

.pds-check__option-tick {
    display: grid;
    place-items: center;
    flex: none;
    margin-inline-start: auto;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 50%;
    background: var(--pds-check-accent);
    color: #fff;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .2s var(--pds-ease), transform .2s var(--pds-ease);
}

.pds-check__option.is-selected .pds-check__option-tick {
    opacity: 1;
    transform: none;
}

/* --- Navigation ---------------------------------------------------------- */

.pds-check__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-start: 1.75rem;
}

.pds-check__nav--single {
    justify-content: flex-start;
}

.pds-check__ghost {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-block-size: 44px;
    padding: .5rem .875rem;
    background: none;
    border: 0;
    border-radius: 999px;
    color: var(--pds-check-muted);
    font-family: var(--pds-text);
    font-size: var(--pds-fs-small);
    font-weight: 600;
    cursor: pointer;
    transition: color .25s var(--pds-ease), background-color .25s var(--pds-ease);
}

.pds-check__ghost:hover {
    color: var(--pds-check-title);
    background: var(--pds-bone);
}

.pds-check .pds__btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ==========================================================================
   Result
   ========================================================================== */

.pds-check__panel--result > .pds__eyebrow {
    margin-block-end: .875rem;
}

.pds-check__panel--result > .pds-check__result-title,
.pds-check__panel--contact > .pds-check__result-title,
.pds-check__success > .pds-check__result-title {
    margin-block-end: .75rem;
}

.pds-check__answers {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.pds-check__answer {
    padding: .375rem .75rem;
    border-radius: 999px;
    background: var(--pds-bone);
    border: 1px solid var(--pds-line);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--pds-check-muted);
}

.pds-check__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-block-start: 1.75rem;
}

@container pds-stage (min-width: 34rem) {
    .pds-check__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@supports not (container-type: inline-size) {
    @media (min-width: 800px) {
        .pds-check__cards {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

.pds-check__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: 1.375rem;
    background: var(--pds-check-card);
    border: 1px solid var(--pds-check-card-border);
    border-radius: var(--pds-r);
    box-shadow: var(--pds-shadow-sm);
    overflow: hidden;
}

.pds-check__card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 3px;
    background: var(--pds-check-accent);
    opacity: .35;
}

.pds-check__card-icon {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 14px;
    background: var(--pds-purple-wash);
    color: var(--pds-check-accent);
}

.pds-check__card-kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.pds-check__card-name {
    font-size: var(--pds-fs-eyebrow);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pds-check-muted);
}

.pds-check__chip {
    padding: .25rem .625rem;
    border-radius: 999px;
    background: var(--pds-bone-deep);
    color: var(--pds-check-title);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.pds-check__chip.is-high {
    background: var(--pds-orange-wash);
    color: var(--pds-orange-ink);
}

.pds-check__card-text {
    font-size: var(--pds-fs-small);
    color: var(--pds-check-text);
}

.pds-check__note {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin-block-start: 1.5rem;
    padding: .875rem 1rem;
    border-radius: var(--pds-r-sm);
    background: var(--pds-bone);
    font-size: var(--pds-fs-small);
    color: var(--pds-check-muted);
}

.pds-check__note svg {
    flex: none;
    margin-block-start: .125rem;
}

.pds-check__trust-block {
    position: relative;
    overflow: hidden;
    margin-block-start: 2rem;
    padding: 1.5rem;
    border-radius: var(--pds-r);
    background: var(--pds-check-aside);
    color: var(--pds-on-ink-soft);
}

.pds-check__trust-block .pds-check__trust-title {
    color: #fff;
}

.pds-check__trust-title {
    font-family: var(--pds-display);
    font-size: var(--pds-fs-h3);
    line-height: 1.15;
    letter-spacing: -.018em;
    margin-block-end: .625rem;
}

.pds-check__trust-block .pds-check__body {
    color: var(--pds-on-ink-soft);
    font-size: var(--pds-fs-small);
}

.pds-check__usps {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem .875rem;
    list-style: none;
    margin: 1.125rem 0 0;
    padding: 0;
}

@container pds-stage (min-width: 34rem) {
    .pds-check__usps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pds-check__usps li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--pds-fs-small);
    font-weight: 600;
    color: #fff;
}

.pds-check__usps svg {
    flex: none;
    color: var(--pds-check-aside-accent);
}

.pds-check__cta {
    margin-block-start: 2rem;
    padding-block-start: 1.75rem;
    border-block-start: 1px solid var(--pds-line);
}

.pds-check__cta-title {
    margin-block-end: .625rem;
}

.pds-check__cta .pds__actions {
    margin-block-start: 1.25rem;
}

/* ==========================================================================
   Contact Form 7
   ========================================================================== */

.pds-check__form {
    margin-block-start: 1.75rem;
}

.pds-check__form .wpcf7-form p {
    margin-block-end: 1rem;
}

.pds-check__form label {
    display: block;
    font-size: var(--pds-fs-small);
    font-weight: 600;
    color: var(--pds-check-title);
}

.pds-check__form input[type="text"],
.pds-check__form input[type="email"],
.pds-check__form input[type="tel"],
.pds-check__form input[type="url"],
.pds-check__form input[type="date"],
.pds-check__form input[type="number"],
.pds-check__form select,
.pds-check__form textarea {
    inline-size: 100%;
    min-block-size: 48px;
    margin-block-start: .375rem;
    padding: .75rem 1rem;
    border: 1.5px solid var(--pds-check-card-border);
    border-radius: var(--pds-r-sm);
    background: var(--pds-paper);
    color: var(--pds-check-title);
    font-family: var(--pds-text);
    font-size: var(--pds-fs-body);
    transition: border-color .25s var(--pds-ease), box-shadow .25s var(--pds-ease);
}

.pds-check__form textarea {
    min-block-size: 120px;
    resize: vertical;
}

.pds-check__form :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--pds-check-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pds-check-accent) 18%, transparent);
}

.pds-check__form input[type="submit"],
.pds-check__form .wpcf7-submit {
    min-block-size: 52px;
    padding: 1rem 1.75rem;
    border: 1px solid var(--pds-orange);
    border-radius: 999px;
    background: var(--pds-orange);
    color: #1B0C05;
    font-family: var(--pds-text);
    font-size: var(--pds-fs-small);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .3s var(--pds-ease), color .3s var(--pds-ease), transform .3s var(--pds-ease);
}

.pds-check__form input[type="submit"]:hover {
    background: var(--pds-orange-dark);
    border-color: var(--pds-orange-dark);
    color: #fff;
}

.pds-check__form .wpcf7-not-valid-tip {
    display: block;
    margin-block-start: .375rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #B3261E;
}

.pds-check__form .wpcf7-response-output {
    margin: 1rem 0 0;
    padding: .875rem 1rem;
    border: 1px solid var(--pds-line);
    border-radius: var(--pds-r-sm);
    font-size: var(--pds-fs-small);
}

.pds-check__alert {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1rem;
    border-radius: var(--pds-r-sm);
    border: 1px dashed var(--pds-check-card-border);
    background: var(--pds-bone);
    font-size: var(--pds-fs-small);
    color: var(--pds-check-muted);
}

/* ==========================================================================
   Success
   ========================================================================== */

.pds-check__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    padding-block: clamp(1.5rem, 4vw, 3rem);
}

.pds-check__success-mark {
    display: grid;
    place-items: center;
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: 50%;
    background: var(--pds-purple-wash);
    color: var(--pds-sage);
}

.pds-check__success .pds-check__body {
    max-inline-size: 46ch;
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 620px) {
    .pds-check__head {
        margin-block-end: 1.5rem;
    }

    .pds-check__stage {
        padding: 1.25rem;
        border-radius: var(--pds-r);
    }

    .pds-check__aside-inner {
        border-radius: var(--pds-r);
    }

    .pds-check__nav {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .pds-check__nav .pds__btn,
    .pds-check__ghost {
        justify-content: center;
    }

    .pds-check__option {
        padding: .875rem;
    }

    .pds-check__how-item {
        padding: .875rem 1rem;
    }
}