/**
 * SRA Membership Manager: the "Membership year" choice on the checkout form.
 *
 * Sits at the top of the order box, above the order table, and is built as the
 * head of that box: the box has no padding of its own on this site, so the two
 * options run edge to edge like the table rows under them, and the caption and
 * the note take the table header's inset. Colours fall back to the checkout
 * redesign's own values when its tokens are not on the page.
 */

.smm-year-choice {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--sra-gray-200, #e5e5e5);
}

/* Same voice as the order table's column headings. Floated so the legend
   lays out as an ordinary block instead of sitting on the fieldset's edge. */
.smm-year-choice__legend {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0.875rem 0.625rem 0.5rem;
    box-sizing: border-box;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sra-gray-500, #737373);
}

.smm-year-choice__options {
    clear: both;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-top: 1px solid var(--sra-gray-200, #e5e5e5);
    border-bottom: 1px solid var(--sra-gray-200, #e5e5e5);
    background: var(--sra-white, #fff);
}

.smm-year-choice__option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0.875rem 0.625rem 1rem;
    cursor: pointer;
    transition: background-color var(--sra-transition, 200ms ease);
}

.smm-year-choice__option + .smm-year-choice__option {
    border-left: 1px solid var(--sra-gray-200, #e5e5e5);
}

/* The radio covers its option, so the whole cell is the control. */
.smm-year-choice__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.smm-year-choice__year {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--sra-gray-300, #d4d4d4);
    transition: color var(--sra-transition, 200ms ease);
}

.smm-year-choice__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--sra-gray-500, #737373);
}

.smm-year-choice__lead {
    font-weight: 600;
    color: var(--sra-gray-800, #262626);
}

/* Selected: the year takes the brand red and a rule closes the cell. */
.smm-year-choice__option.is-selected,
.smm-year-choice__option:has(.smm-year-choice__input:checked) {
    background: #fdf3f3;
    box-shadow: inset 0 -3px 0 var(--sra-red, #c51414);
}

.smm-year-choice__option.is-selected .smm-year-choice__year,
.smm-year-choice__option:has(.smm-year-choice__input:checked) .smm-year-choice__year {
    color: var(--sra-red, #c51414);
}

.smm-year-choice__option:hover .smm-year-choice__year {
    color: var(--sra-gray-500, #737373);
}

.smm-year-choice__option.is-selected:hover .smm-year-choice__year,
.smm-year-choice__option:has(.smm-year-choice__input:checked):hover .smm-year-choice__year {
    color: var(--sra-red, #c51414);
}

.smm-year-choice__option:has(.smm-year-choice__input:focus-visible) {
    outline: 2px solid var(--sra-red, #c51414);
    outline-offset: -2px;
}

.smm-year-choice__note {
    margin: 0;
    padding: 0.625rem 0.625rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--sra-gray-500, #737373);
}

@media (max-width: 420px) {
    .smm-year-choice__options {
        grid-template-columns: minmax(0, 1fr);
    }

    .smm-year-choice__option + .smm-year-choice__option {
        border-left: 0;
        border-top: 1px solid var(--sra-gray-200, #e5e5e5);
    }

    .smm-year-choice__option {
        flex-direction: row;
        align-items: center;
        gap: 0.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .smm-year-choice__option,
    .smm-year-choice__year {
        transition: none;
    }
}