/*
    "Apply as" chooser — everything specific to #applyModal.
    The shell (overlay, surface, shadow, entry, close, header, focus ring, fonts, radii)
    comes from components/modal-base.css via the shared .wp-modal class.

    The card's icon sits in a TINTED TILE rather than bare on the surface, and that tile is
    the selection indicator: it inverts to solid --primary with a white mark when chosen.
    A full illustration was considered and rejected — inside a selectable card it competes
    with the selection highlight for the eye, and two different illustrations would make the
    two options read as different KINDS of thing instead of two branches of one choice.
*/

/* Two cards and generous gutters need more room than a single login column. */
.apply-modal .modal-dialog {
    max-width: 560px;
}

/* ---- Radiogroup ---- */
.apply-modal__fieldset {
    border: none;
    padding: 0;
    margin: 0;
    min-inline-size: 0; /* fieldset defaults to min-content width and would break the grid */
}

/*
    The legend names the group for assistive tech; the visible heading is the <h2>.
    The radio itself is hidden but stays focusable — the card is its visual body.
*/
.apply-modal__legend,
.apply-option__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.apply-option__input {
    opacity: 0;
    pointer-events: none;
}

.apply-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.apply-option {
    position: relative;
}

/* ---- Card: rest ---- */
/*
    Both cards open here, identical and neutral. Selection is a state the user creates, never
    a starting condition — nothing is pre-filled.

    Border-width is a constant 1.5px and only its COLOR changes between states. Stepping
    1px -> 1.5px on select would nudge every child by half a pixel; content must not move.
*/
.apply-option__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 180px;
    padding: 28px 24px;
    border: 1.5px solid var(--dark-border);
    border-radius: var(--modal-radius-card);
    background-color: var(--white);
    cursor: pointer;
    /* Colour carries every state except press; transform is listed only for that 80ms. */
    transition: background-color 180ms var(--modal-ease),
                border-color 180ms var(--modal-ease),
                transform 80ms ease;
}

/* ---- The tinted tile: richness that stays out of the selection state's way ---- */
.apply-option__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--modal-radius-tile);
    background-color: var(--primary-5);
    color: var(--primary);
    /* The tile is a distinct object, not part of the text block — this gap is what says so. */
    margin-bottom: 20px;
    transition: background-color 180ms var(--modal-ease), color 180ms var(--modal-ease);
}

/*
    Optical balance: the group mark carries more strokes and reads ~10% heavier than the
    single figure at equal dimensions, so it sits in a smaller box. The tile stays 56px for
    both — it is the shared frame, and only the mark inside it flexes.
*/
.apply-option__icon {
    width: 26px;
    height: 26px;
}

.apply-option__icon--group {
    width: 24px;
    height: 24px;
}

.apply-option__label {
    font-family: var(--modal-font-body-strong);
    font-size: 18px;
    font-weight: var(--fw-600);
    color: var(--text-1);
    margin-bottom: 4px;
    transition: color 180ms var(--modal-ease);
}

/* --text-3 on --white is ~4.1:1, which holds at 13px/500 and no smaller; 14px sits above that floor. */
.apply-option__descriptor {
    font-family: var(--modal-font-body);
    font-size: 14px;
    font-weight: 500; /* no --fw-500 token exists; the Medium face carries the weight */
    line-height: 1.6;
    color: var(--text-3);
    text-align: center;
    transition: color 180ms var(--modal-ease);
}

/* ---- Card: hover (unselected) — colour only, no lift, no shadow ---- */
/* The tile inverts to white here: as the card tints, the tile lifts off it rather than
   dissolving into it. That is the same move the selected state completes. */
.apply-option__input:not(:checked) + .apply-option__card:hover {
    background-color: var(--primary-5);
    border-color: var(--primary-30);
}

.apply-option__input:not(:checked) + .apply-option__card:hover .apply-option__tile {
    background-color: var(--white);
}

.apply-option__input:not(:checked) + .apply-option__card:hover .apply-option__label {
    color: var(--primary);
}

/* ---- Card: focus-visible — the hover treatment plus a ring, reachable without a pointer ---- */
.apply-option__input:focus-visible + .apply-option__card {
    background-color: var(--primary-5);
    border-color: var(--primary-30);
    box-shadow: var(--modal-focus-ring);
}

.apply-option__input:focus-visible + .apply-option__card .apply-option__tile {
    background-color: var(--white);
}

.apply-option__input:focus-visible + .apply-option__card .apply-option__label {
    color: var(--primary);
}

/* ---- Card: selected ---- */
/*
    The tile goes solid. This is the strongest signal available and it is WHY the icon lives
    in a tile at all — the tile becomes the indicator, so the highlight has nothing to fight.
*/
.apply-option__input:checked + .apply-option__card {
    background-color: var(--primary-10);
    border-color: var(--primary);
}

.apply-option__input:checked + .apply-option__card .apply-option__tile {
    background-color: var(--primary);
    color: var(--white);
}

.apply-option__input:checked + .apply-option__card .apply-option__label {
    color: var(--primary);
}

.apply-option__input:checked + .apply-option__card .apply-option__descriptor {
    color: var(--text-2);
}

/* The selected tile keeps its solid fill under focus; only the ring is added. */
.apply-option__input:checked:focus-visible + .apply-option__card {
    box-shadow: var(--modal-focus-ring);
}

.apply-option__input:checked:focus-visible + .apply-option__card .apply-option__tile {
    background-color: var(--primary);
}

/* ---- Card: selected + hover ---- */
.apply-option__input:checked + .apply-option__card:hover {
    background-color: var(--primary-15);
    border-color: var(--primary);
}

/* ---- Card: press — the one transform in the component, and only while held ---- */
.apply-option__card:active {
    transform: scale(0.98);
}

/* ---- Check badge: selection is never conveyed by colour alone ---- */
.apply-option__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--primary);
    color: var(--white);
    opacity: 0;
    transform: scale(0);
    transition: opacity 200ms ease, transform 200ms var(--modal-ease);
}

.apply-option__input:checked + .apply-option__card .apply-option__badge {
    opacity: 1;
    transform: scale(1);
}

/* ---- No-JS fallback: the radios can't navigate, so plain links stand in ---- */
.apply-modal__nojs {
    font-family: var(--modal-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-3);
    text-align: center;
    margin: 20px 0 0;
}

.apply-modal__nojs a {
    color: var(--primary);
}

@media (max-width: 480px) {
    .apply-options {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Stacked, the cards no longer need to hold a square-ish shape. */
    .apply-option__card {
        min-height: 0;
        padding: 24px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* The states stay; only the movement goes. */
    .apply-option__card:active {
        transform: none;
    }

    .apply-option__badge,
    .apply-option__input:checked + .apply-option__card .apply-option__badge {
        transform: none;
    }

    .apply-option__badge {
        transition: opacity 150ms ease;
    }
}