/* ================================================================
   CMCA public portal (ClubConnect.WebPortal.Cmca) styles.
   ================================================================ */

/* ----------------------------------------------------------------
   Page section
   ---------------------------------------------------------------- */
.page-section {
    background: var(--color-white);
    padding: 3rem 0;
    /* The shared .footer (main.css) pulls its mountain backdrop up over the
       preceding content (a 100px decal below 1250px; a -32rem negative margin
       at >=1250px). Reserve enough bottom space here so the mountain rises into
       empty space below the content instead of overlapping it. Override in this
       portal CSS, never main.css. */
    padding-bottom: 8rem;
}

@media (min-width: 1250px) {
    .page-section {
        padding-bottom: 17rem;
    }
}

.page-section--flush {
    padding-top: 0;
}

/* ----------------------------------------------------------------
   Offer page call to action
   ---------------------------------------------------------------- */
.offer-cta {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

/* ----------------------------------------------------------------
   Page title
   ---------------------------------------------------------------- */
.page-title {
    color: var(--color-midnight);
    letter-spacing: -0.15em;
    margin-bottom: 1rem;
}

/* ----------------------------------------------------------------
   Form section titles (registration wizard steps)
   ---------------------------------------------------------------- */
.form-section-title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-midnight);
    margin: 1.5rem 0 1rem;
}

/* Step heading with a secondary action (e.g. skip) on the same line. The title's own
   bottom margin would space the flex line rather than the block below it, so the
   clearance moves onto the header. */
.form-step-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.form-step-header .form-section-title {
    margin-bottom: 0;
}

/* Registration hints sit at 1rem instead of the shared 0.75rem default. */
#registration-wizard .form__hint {
    font-size: 1rem;
}

#registration-wizard .form__hint + .option-group {
    margin-top: 1.2rem;
}

/* Hidden inputs sit between the step's intro text and its first row, so the
   clearance has to come from the text rather than an adjacent-sibling rule. */
#registration-wizard .form__hint--spaced {
    margin-bottom: 1.2rem;
}

#registration-wizard .form__hint:empty {
    display: none;
}

/* ----------------------------------------------------------------
   Step 1 email panel — the first thing asked, so it leads the step.
   ---------------------------------------------------------------- */
.email-lead {
    margin-bottom: 2rem;
    padding: 1.75rem 2rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-lg);
}

.email-lead__title {
    margin: 0 0 0.375rem;
    font-size: 1.125rem;
    color: var(--color-midnight);
}

.email-lead__intro {
    margin: 0 0 1.25rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-midnight-faded);
}

    .email-lead .form__field {
        margin-bottom: 0;
        max-width: 28rem;
    }


/* Full width of the step, never squeezed in beside a heading or a button. */
.validation-summary {
    display: block;
    width: 100%;
    margin: 0 0 1.5rem;
    font-weight: var(--font-weight-semibold);
}

#registration-wizard .pay-declaration .form__error-message:empty {
    display: none;
}

#registration-wizard .form__hint--updated,
#registration-wizard .form__hint--available {
    color: var(--color-ocean-700);
}

#registration-wizard .form__hint--updated {
    font-size: 0.75rem;
}

.subsection-title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-midnight);
    margin: 0 0 0.25rem;
}

.panel + .subsection-title,
.panel + .pay-declaration {
    margin-top: 2rem;
}

/* ----------------------------------------------------------------
   Registration summary panel (Confirm step)
   ---------------------------------------------------------------- */
.panel dl {
    margin-top: 1.25rem;
}

.panel dl dt,
.panel dl dd {
    line-height: 1.2;
}

.panel dl dt {
    margin-bottom: 0;
}

/* dt/dd have no default margin (global reset). The value sits closer to its own label
   than to the next field, and the whole list keeps more clearance again from the total
   below it. */
.panel dl dd {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    color: var(--color-midnight-faded);
}

.panel dl dd:last-of-type {
    margin-bottom: 0;
}

.order-total {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
}

.order-total__group:not(:last-child) {
    margin-right: 1.5rem;
}

.order-total__label,
.order-total__amount {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-midnight);
}

.order-total--boxed {
    align-items: baseline;
    padding: 1rem 1.25rem;
    background: var(--color-ocean-050);
    border: 1px solid var(--color-ocean-700);
    border-radius: var(--radius-lg);
}

.order-total--boxed .order-total__amount {
    color: var(--color-ochre-600);
}

.password-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

@media (min-width: 641px) {
    .form__row--3.password-row {
        grid-template-columns: 1fr 1fr auto;
    }

    .password-row .password-actions {
        flex-wrap: nowrap;
    }
}

/* ----------------------------------------------------------------
   Utility
   ---------------------------------------------------------------- */
.d-none {
    display: none !important;
}

/* ----------------------------------------------------------------
   Form overrides
   ---------------------------------------------------------------- */
/* Readonly inputs are tinted to signal they can't be typed in: the address fields the
   search populates, Step1's offer promotion code, Step2's verified email address. */
.form__input[readonly] {
    background: var(--color-gray-050);
}

/* Step 4's badge inside the Vehicle Type box, showing the membership type the chosen vehicle gives. It sits
   over the box beside the arrow, so showing it never moves anything, and clicks pass through to the box. */
.vehicle-type-select {
    position: relative;
}

#registration-wizard .vehicle-class-notice {
    position: absolute;
    top: 50%;
    right: 2.25rem;
    transform: translateY(-50%);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    white-space: nowrap;
    color: var(--color-ocean-700);
    pointer-events: none;
}

/* A phone's box has no room beside a long vehicle name, so the badge drops underneath it there. */
@media (max-width: 480px) {
    #registration-wizard .vehicle-class-notice {
        position: static;
        display: block;
        margin-top: 0.5rem;
        transform: none;
        white-space: normal;
    }

    #registration-wizard .vehicle-class-notice::before {
        content: "Membership type: ";
        font-weight: var(--font-weight-medium);
    }
}

/* ----------------------------------------------------------------
   Option cards — selectable radio/checkbox cards (registration wizard).
   The native input is visually hidden by default (the card border and
   background carry the checked state); the --checkbox variant shows it.
   ---------------------------------------------------------------- */
.option-group {
    border: 0;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    gap: 0.75rem;
}

.option-group > legend {
    margin-bottom: 1rem;
}

/* Standalone card directly under a subsection heading (e.g. "Same as
   residential address") gets the same clearance as legend-led groups. */
.subsection-title + .option-card {
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}

.option-card {
    position: relative;
    display: block;
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: border-color var(--default-transition-duration) var(--default-transition-timing-function),
                background-color var(--default-transition-duration) var(--default-transition-timing-function);
}

.option-card:hover {
    border-color: var(--color-ocean-700);
}

.option-card:has(.option-card__input:checked) {
    border-color: var(--color-ocean-700);
    background: var(--color-ocean-050);
}

/* Keyboard focus lands on the hidden input, so surface it on the card. */
.option-card:has(.option-card__input:focus-visible) {
    outline: 2px solid var(--color-ocean-700);
    outline-offset: 2px;
}

.option-card__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.option-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.option-card__title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-midnight);
}

.option-card__desc {
    font-size: 0.875rem;
    color: var(--color-midnight-faded);
}

.option-card--compact {
    padding: 0.625rem 1rem;
}

.option-card--checkbox,
.option-card--radio {
    display: flex;
    align-items: center;
}

.option-card--checkbox,
.option-card--radio {
    gap: 0.75rem;
}

.option-card--checkbox .option-card__input,
.option-card--radio .option-card__input {
    position: static;
    opacity: 1;
    pointer-events: auto;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-ocean-700);
}

/* ----------------------------------------------------------------
   Fields that pair an input with its own button on one row: Step1's promotion code + Apply.
   ---------------------------------------------------------------- */
.promo-code__row {
    display: flex;
    gap: 0.75rem;
}

.promo-code__row .form__input {
    flex: 1;
}

.promo-code .alert {
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* ----------------------------------------------------------------
   Registration wizard dialogs (native <dialog>, opened with
   showModal so the backdrop, focus trap and Escape come for free).
   Follows the cookie consent banner in main.css.
   ---------------------------------------------------------------- */
.rego-modal {
    border: none;
    padding: 0;
    background: transparent;
    width: min(32rem, calc(100vw - 2rem));
    max-width: none;
}

.rego-modal::backdrop {
    background: color-mix(in srgb, var(--color-black) 65%, transparent);
}

.rego-modal__panel {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 2rem;
}

.rego-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    border: none;
    background: transparent;
    font-size: 1.75rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: var(--color-gray-500);
}

.rego-modal__close:hover {
    color: var(--color-midnight);
}

.rego-modal__title {
    font-size: var(--text-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-midnight);
    margin-bottom: 0.75rem;
    padding-right: 2rem;
}

.rego-modal--wide {
    width: min(38rem, calc(100vw - 2rem));
}

/* For a dialog with no close button: keeps the heading on one line, shrinking it a little on a phone. */
.rego-modal__title--one-line {
    padding-right: 0;
    white-space: nowrap;
    font-size: min(var(--text-h3), 1.625rem, 4.5vw);
}

.rego-modal__text {
    margin-bottom: 1.25rem;
}

.rego-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* The code is short and reads as a group of digits, so it gets a fixed
   box rather than stretching across the dialog. */
.rego-modal .form__input {
    width: 100%;
    font-size: 1.5rem;
    letter-spacing: 0.4em;
    text-align: center;
}

/* ----------------------------------------------------------------
   Address search suggestions (registration wizard).
   Dropdown rendered by address-search.js under the search input;
   the wrapping .form__field is the positioning anchor.
   ---------------------------------------------------------------- */
.address-search-field {
    position: relative;
}

.address-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    max-height: 16rem;
    overflow-y: auto;
    margin: 0.25rem 0 0;
    padding: 0.25rem;
    list-style: none;
    background: var(--color-white);
    border: 2px solid var(--color-gray-100);
    border-radius: 0.375rem;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-midnight) 15%, transparent);
}

.address-suggestions__option {
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-midnight);
    cursor: pointer;
}

.address-suggestions__option:hover,
.address-suggestions__option.is-active {
    background: var(--color-gray-050);
}

/* ----------------------------------------------------------------
   Password show/hide toggle (registration wizard).
   ---------------------------------------------------------------- */
/* Buttons under an input inside the same field (e.g. Generate Password)
   need clearance from the input above. */
.form__field > .btn {
    margin-top: 0.75rem;
}

.password-toggle {
    border: 0;
    padding: 0;
    margin-left: 0.75rem;
    margin-top: 0.75rem;
    background: none;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-ocean-700);
    cursor: pointer;
}

/* ----------------------------------------------------------------
   Registration payment section (ported from Members portal members.css)
   ---------------------------------------------------------------- */
.pay-divider {
    margin: 1.5rem 0;
}

.pay-declaration {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* The declaration is long and has to be read, so its text is a darker grey than the other card descriptions. */
.pay-declaration .option-card__desc {
    color: color-mix(in srgb, var(--color-midnight) 55%, var(--color-midnight-faded));
}

.pay-card-logos {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

    .pay-card-logos img {
        height: 50px;
        border: 1px solid var(--color-gray-100);
        border-radius: 0.75rem;
    }

.pay-offline__title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.25rem;
}

.pay-offline__text {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

/* Save-card note, moved into the plugin's new-card form by registration.js. */
.card-save-note {
    margin-top: 0.5rem;
}

.card-save-note__reason {
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.25rem;
}

.auto-renew-row {
    margin-top: 0.75rem;
}

/* Card-payment widget (Web.Common plugin) panel heights. The new-card panel has to clear the save-card
   note as well, which is several lines of copy the plugin's own markup never had. */
#userCards.active .card-menu-item-inner {
    max-height: 17.6em;
}

#newCard.active .card-menu-item-inner {
    max-height: 34em;
}

/* The plugin's non-member note. Registration is anonymous by definition and passes allowSaveCard, so
   it never applies here. Scoped to the wizard to outrank card-payment.css, which loads after this. */
#registration-wizard #userCards.no-membership > .card-menu-item-button::after {
    content: none;
}

/* Processing overlay */
#loading-div-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: color-mix(in srgb, var(--color-white) 80%, transparent);
    width: 100%;
    height: 100%;
    z-index: 999;
}

#loading-div {
    z-index: 9999;
    width: 300px;
    background-color: var(--color-white);
    border: 2px solid var(--color-gray-100);
    text-align: center;
    color: var(--color-midnight-faded);
    padding: 1rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -100px;
    border-radius: 1rem;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    border: 5px solid var(--color-gray-100);
    border-top-color: var(--color-ochre-600);
    border-radius: 50%;
    animation: loading-spin 1s linear infinite;
}

@keyframes loading-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Wizard buttons while a request is in flight. aria-disabled covers the email check, which holds a
   click rather than refusing it (see setEmailChecking in registration.js). */
#registration-wizard .btn:disabled,
#registration-wizard .btn[aria-disabled],
#join-reason-survey .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: auto;
}

#registration-wizard .btn--primary:disabled:hover,
#registration-wizard .btn--primary[aria-disabled]:hover {
    background-color: var(--color-ochre-600);
    border-color: var(--color-ochre-600);
}

#registration-wizard .btn--outline:disabled:hover,
#registration-wizard .btn--outline[aria-disabled]:hover {
    background-color: transparent;
    color: var(--color-deep-midnight);
}

#registration-wizard form[aria-busy="true"] {
    cursor: progress;
}

/* ----------------------------------------------------------------
   Successful registration / thank-you page
   ---------------------------------------------------------------- */
.thankyou-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 48px;
    padding: 8vh 40px 120px;
    background-color: var(--color-white);
    min-height: calc(100vh - 143px);
}

@media (max-width: 991.5px) {
    .thankyou-section {
        min-height: 100vh;
    }
}

.thankyou-section h1,
.thankyou-section h2,
.thankyou-section h3 {
    color: var(--color-midnight);
    font-family: var(--font-heading);
}

.thankyou-message {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .thankyou-message h1 {
        margin: 0 0 20px;
    }

/* Wraps the CMS copy, which runs to several paragraphs. Full width because .thankyou-message
   centres its items. */
.thankyou-copy {
    width: 100%;
}

    .thankyou-copy p {
        margin: 0 0 16px;
    }

        .thankyou-copy p:last-child {
            margin-bottom: 0;
        }

.success-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    color: var(--color-white);
    background-color: var(--color-ochre-600);
    margin-bottom: 40px;
}

    /* Payment still outstanding, so the tick would be a false claim. */
    .success-icon--pending {
        background-color: var(--color-ocean-700);
    }

.bpay-details {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 48px;
    margin: 32px 0 0;
    padding: 24px 40px;
    border-radius: var(--radius-lg);
    background-color: var(--color-ocean-050);
    color: var(--color-black);
}

    .bpay-details dt {
        font-size: 14px;
        font-weight: var(--font-weight-semibold);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    .bpay-details dd {
        margin: 0;
        font-family: var(--font-body);
        font-size: 24px;
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.05em;
    }

/* Join reason survey. The thank-you section centres its text; the tick boxes read as a list,
   so the block reverts to left alignment and keeps only the heading centred. */
.join-survey {
    width: 100%;
    max-width: 720px;
    text-align: left;
}

.join-survey__title,
.join-survey__intro {
    text-align: center;
}

.join-survey__title {
    margin: 0 0 8px;
}

.join-survey__intro {
    margin: 0 0 24px;
    color: var(--color-midnight-faded);
}

/* Short answers, so they pair up once there is room. */
@media (min-width: 768px) {
    .join-survey__options {
        grid-template-columns: repeat(2, 1fr);
    }
}

.join-survey__actions {
    justify-content: center;
}

/* Quick links below the survey. Matches the survey's column width so the two read as one block. */
.whats-next {
    width: 100%;
    max-width: 720px;
    margin-top: 40px;
}

.whats-next__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.whats-next__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* The apps line is the only one with its label separate from the buttons. */
.whats-next__apps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.thankyou-footer {
    max-width: 1020px;
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

    /* Fluid rather than a fixed 320x200 box: at phone width the padding left too
       little room and the text ran outside the card. */
    .thankyou-footer > div {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        gap: 20px;
        background-color: var(--color-white);
        padding: 2rem;
        border-radius: var(--radius-lg);
        width: 100%;
        max-width: 320px;
        min-height: 200px;
    }

    .thankyou-footer h3,
    .thankyou-footer p {
        margin: 0;
    }

/* Server-side (asp-for) and client-side validation both mark the field; the shared .form__input--error is
   only applied by hand. */
.form__input.input-validation-error,
.form__select.input-validation-error,
.form__input[data-client-error],
.form__select[data-client-error] {
    border-color: var(--color-protea);
}