/* --------------------------------------------------------------------------
   Membership picker cards — from the prototype (Innmelding.dc.html:145-156),
   rendered by MembershipChooseViewComponent.

   Each option is a bordered card rather than a bare radio, and the selected card is drawn in the
   TENANT's colour.

   **These rules used to name `--k-brand` by hand, and Phase 2C removed that.** They now use
   `--c-primary` and `--c-primary-tint`, which is what the prototype itself specifies
   (`bg: valgt ? "var(--c-primary-tint)"`, `kant: valgt ? "2px solid var(--c-primary)"`). Before 2C
   those tokens were fixed literals no tenant could reach, so using them would have left every card CISV
   blue on Motvind — the workaround existed for a real reason. They are derived from `--k-primary` and
   `--k-tint` now, so the semantic name and the tenant-following behaviour are the same thing, and the
   `color-mix()` that approximated a tint is gone: the design's own tint token is more faithful than an
   8% mix and needs no fallback declaration.

   **Styling only. There is no markup change, and that is the point.** Phase 5A decided this component
   is edited in place with no `*Shell` twin, so it renders under BOTH layouts — and the legacy one never
   loads this file. Selectors are `.inn-shell .membership-choose …`, three classes deep, because the
   component's own `.cshtml.css` is bundled into `Innmelding.Web.styles.css`, which `_StylesNew.cshtml`
   loads AFTER this file; at equal specificity those scoped rules would win on source order. So the
   cards exist only in the new shell and legacy keeps the plain rows it has today.

   `:has()` carries the checked state up to the card, because the card is the radio's PARENT and no
   sibling selector reaches it. Without `:has()` the card still renders with its neutral border and the
   native radio still shows its own checked fill, so the choice is never invisible.

   Contrast, now that the fill is a tenant token rather than an 8 % mix: `--k-tint` is the tenant's
   *weakest* brand surface and the profile contract requires it to stay one — the AAA text check is
   made against it, not against white. The 2 px border is the part whose non-text contrast (WCAG 1.4.11)
   depends on the tenant's own value being dark enough, which is the same tenant-owned risk recorded as
   **F30**.
   -------------------------------------------------------------------------- */
.inn-shell .membership-choose .membership-choose-options {
    gap: 8px;
}

.inn-shell .membership-choose .membership-choose-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    /* Overrides the component's hanging-radio padding: inside a card the control sits in the card,
       not in a negative-margin gutter beside it. */
    padding: 8px 16px;
    border: 2px solid var(--c-border);
    border-radius: 9px;
    background: var(--c-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* The whole card is the target, not just the label text. A stretched pseudo-element on the label does
   that without wrapping the card in a <label>, which would be a markup change and would therefore
   reach legacy too. The radio is lifted above it so its own hit area still works. */
.inn-shell .membership-choose .membership-choose-label {
    flex: 1 1 auto;
    padding: 0;
}

/* The price — from the prototype's right-hand column (Innmelding.dc.html:154-157).
   -------------------------------------------------------------------------------------------------
   `flex: none` so it keeps its own width and the title takes the rest; `white-space: nowrap` so
   "50 kr" never breaks across two lines when a long title squeezes the row. It is the second visual
   anchor on the card, so it carries the same weight as the title.

   **The design also shows a period under the amount — "per år", "per år per medlem" — and that is
   absent here because no column carries it.** `ValidFrom`/`ValidTo` are uniformly 01.01-31.12, so it
   cannot be derived either. Recorded rather than approximated: a card that says "50 kr" is accurate,
   and one that guesses "per år" is not. */
.inn-shell .membership-choose .membership-choose-price {
    flex: none;
    margin-left: auto;
    padding-left: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c-fg);
    white-space: nowrap;
}

.inn-shell .membership-choose .membership-choose-label::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9px;
}

.inn-shell .membership-choose .membership-choose-radio {
    position: relative;
    z-index: 1;
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    border: 2px solid var(--c-border-strong);
}

/* The control follows the tenant too, or a CISV-blue dot would sit inside a Motvind-teal card. */
.inn-shell .membership-choose .membership-choose-radio:checked {
    border-color: var(--c-primary);
    background-color: var(--c-primary);
}

.inn-shell .membership-choose .membership-choose-option:hover {
    border-color: var(--c-primary);
}

/* Error state before selected, deliberately: the prototype resolves `valgt ? primary : (feil ? err :
   border)`, so a chosen card stays branded even while the group carries an error. Source order is what
   implements that precedence here. */
.inn-shell .membership-choose:has(.membership-choose-message:not(:empty)) .membership-choose-option {
    border-color: var(--c-err);
}

.inn-shell .membership-choose .membership-choose-option:has(.membership-choose-radio:checked) {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 2px var(--c-primary);
    background: var(--c-primary-tint);
}

/* The ring belongs on the card, not on a 24 px control tucked inside it — a keyboard user needs to see
   which OPTION is focused. */
.inn-shell .membership-choose .membership-choose-option:has(.membership-choose-radio:focus-visible) {
    outline: 3px solid var(--c-primary);
    outline-offset: 2px;
}