/*!
 * Copyright © Monogo. All rights reserved.
 * See COPYING.txt for license details.
 *
 * Styling for the "Are you in a stationary store?" required Yes/No
 * fieldset on the storefront customer registration form. Applies on
 * BOTH register surfaces the module renders on:
 *
 *   - Top-level  /customer/account/create/          (body has
 *     `monogo-auth-page` + `customer-account-create`; tokens
 *     `--muc-*` from `Monogo_UnilayerLoginStyles::css/login.css`).
 *   - Embed iframe /customerauth/embed/register/    (body has
 *     `page-monogo-customerauth-embed--register`; tokens `--muc-*`
 *     are NOT declared on this surface — `Monogo_UnilayerCustomerAuth::
 *     css/embed.css` re-exports them through `--mca-*` fallbacks).
 *
 * We therefore drop the body-class scope entirely and key every rule
 * on the fieldset's own `.monogo-stationary-fieldset*` classes. Those
 * classes are namespaced to this module and rendered only through
 * `stationary-fieldset.phtml`, so there is zero risk of leaking into
 * an unrelated Magento surface. Each `var(--muc-*)` reference carries
 * a hard-coded fallback matching the dashboard/register defaults, so
 * the render is identical on both surfaces even when the embed layer
 * does not populate the `--muc-*` bag.
 *
 * Visual parity contract: this fieldset MUST look identical to the
 * peer "Are you in a stationary store?" fieldset rendered inside the
 * dashboard loyalty-join form (see
 * `Monogo_UnilayerLoyaltyBuilder::css/loyalty-builder.css`, section
 * "Are you in a stationary store?"). Every rule below mirrors the
 * loyalty-builder counterpart 1:1; the only difference is the class
 * prefix (`monogo-stationary-fieldset*` here vs
 * `monogo-loyalty-join__stationary*` there) — the visual output is
 * indistinguishable.
 *
 * Structural choice inherited from the loyalty form: the fieldset
 * is a `<fieldset>` (not `<div class="field">`) so the shared
 * floating-label cascade the register form applies to text inputs
 * does NOT match here. The `<legend>` header therefore stays static
 * and always visible above the radios (bold, uppercase-safe), which
 * is the correct affordance for a radio-group question.
 *
 * DOM contract (see `stationary-fieldset.phtml`): the two `<input
 * type="radio">` elements and their `<label for="…">` counterparts
 * are SIBLINGS of a shared `.monogo-stationary-fieldset__options`
 * container. jQuery validate's default `errorPlacement` inserts a
 * `<div class="mage-error">…</div>` after the failing element,
 * which lands as a direct child of the options grid — the 3-row
 * grid layout below reserves row 2 for that error caption so it
 * spans both option columns UNDER the radios.
 */

/* --------------------------------------------------------------------------
   Fieldset shell
   -------------------------------------------------------------------------- */

.monogo-stationary-fieldset {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    min-width: 0;
}

/*
 * Extra breathing room from the Amasty GDPR checkboxes that render
 * below this fieldset in the same `fieldset.additional_info`
 * container. Matches the previous rhythm the plain register CSS
 * gave the field-group.
 */
.fieldset.additional_info > .monogo-stationary-fieldset {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--muc-color-border, #e5e5e5);
}

/* --------------------------------------------------------------------------
   Legend — static block header, bold, with " *" required marker
   -------------------------------------------------------------------------- */

.monogo-stationary-fieldset__legend {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--muc-font-family, inherit);
    font-size: var(--muc-font-size-base, 14px);
    font-weight: 600;
    line-height: 1.4;
    color: var(--muc-color-text, #111);
    letter-spacing: 0;
    text-transform: none;
    float: none;
}

.monogo-stationary-fieldset__legend > span {
    display: inline;
}

.monogo-stationary-fieldset__legend::after {
    content: " *";
    color: var(--muc-color-error, #d32f2f);
}

/* --------------------------------------------------------------------------
   Options container — 4-column grid + spanning error row

   Grid areas:
     Row 1: "iy ly in ln"       — input yes, label yes, input no, label no
     Row 2: "err err err err"   — mage-error spans all four columns
   Column gap is tight (input↔label pair sit close); the extra
   space between the YES option and the NO option is added as a
   right margin on the YES label rather than as a wider grid gap,
   so the input↔label pair for YES stays visually grouped.
   -------------------------------------------------------------------------- */

.monogo-stationary-fieldset__options {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-areas:
        "iy ly in ln"
        "err err err err";
    align-items: center;
    justify-content: start;
    column-gap: 10px;
    row-gap: 6px;
}

.monogo-stationary-fieldset__options > input[type="radio"][value="yes"] {
    grid-area: iy;
}

.monogo-stationary-fieldset__options > input[type="radio"][value="no"] {
    grid-area: in;
}

.monogo-stationary-fieldset__options > label:first-of-type {
    grid-area: ly;
    margin-right: 14px;
}

.monogo-stationary-fieldset__options > label:last-of-type {
    grid-area: ln;
}

.monogo-stationary-fieldset__options > div.mage-error {
    grid-area: err;
    margin: 0;
    padding: 0;
    font-family: var(--muc-font-family, inherit);
    font-size: var(--muc-font-size-xs, 11px);
    line-height: 1.3;
    color: var(--muc-color-error, #d70015);
}

/* --------------------------------------------------------------------------
   Radio input — custom paint (20x20 circle, black filled dot on :checked)
   -------------------------------------------------------------------------- */

.monogo-stationary-fieldset__options input[type="radio"] {
    /* All properties marked `!important` to win over the shared
       auth-form input reset in `Monogo_UnilayerLoginStyles::css/
       login.css` (`.control > input.input-text` at line 506+
       sets `border: 0; background: transparent; appearance: none`)
       and the Luma theme baseline reset that hides native radio
       chrome inside `.fieldset` on the register form. Without the
       overrides both radio circles collapse to invisible zero-size
       elements between the "TAK" / "NIE" labels. */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--muc-color-bg, #fff) !important;
    border: 1.5px solid var(--muc-color-text-muted, #999) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: border-color 150ms ease;
}

.monogo-stationary-fieldset__options input[type="radio"]:hover {
    border-color: var(--muc-color-text, #111);
}

.monogo-stationary-fieldset__options input[type="radio"]:focus-visible {
    outline: 2px solid var(--muc-color-text, #111);
    outline-offset: 2px;
}

.monogo-stationary-fieldset__options input[type="radio"]:checked {
    border-color: var(--muc-color-text, #111);
}

.monogo-stationary-fieldset__options input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--muc-color-text, #111);
    transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------------
   Radio label — uppercase, weight 500, tight letter-spacing
   -------------------------------------------------------------------------- */

.monogo-stationary-fieldset__label {
    margin: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--muc-font-family, inherit);
    font-size: var(--muc-font-size-sm, 13px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--muc-color-text, #111);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.monogo-stationary-fieldset__label > span {
    display: inline;
}