/* =========================================================
   FINCLUB — membership form (Formular anëtarësimi)
   Hero, page frame and reveal animation come from finclub.css.
   ========================================================= */

/* ---------- hero ---------- */

/* The subtitle is rich text, so it arrives wrapped in <p>, which finclub.css turns pure white.
   Give it the hero text colour and size the other pages use. */
.fc-hero-subtitle p {
    margin: 0;
    font: inherit;
    color: inherit;
}

    .fc-hero-subtitle p + p {
        margin-top: .8em;
    }

/* More room between "Exclusive Financial Membership" and the text under it. */
.fc-hero-tagline + .fc-hero-subtitle {
    margin-top: calc(var(--fa-hero-gap-lede, 24px) + clamp(8px, 1.6vh, 18px));
}

.fcm-section {
    padding: clamp(56px, 8vh, 110px) clamp(20px, 4.5vw, 72px) clamp(72px, 11vh, 150px);
    scroll-margin-top: calc(var(--fa-nav-h, 86px) + 24px);
}

.fcm-inner {
    max-width: 1240px;
    margin: 0 auto;
}

.fcm-form {
    display: flex;
    flex-direction: column;
}

    .fcm-form [hidden] {
        display: none !important;
    }

/* ---------- numbered groups ---------- */

.fcm-group {
    display: flex;
    flex-wrap: wrap;
    gap: 24px clamp(28px, 4vw, 72px);
    padding: clamp(34px, 5vh, 56px) 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.fcm-group-head {
    flex: 1 1 220px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fcm-group-num {
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: rgba(255, 255, 255, .5);
    font-variant-numeric: tabular-nums;
}

.fcm-group-title {
    margin: 0;
    font-size: clamp(20px, 1.7vw, 24px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.025em;
    color: #ffffff;
    text-wrap: balance;
}

.fcm-group-body {
    flex: 3 1 440px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---------- text fields ---------- */

.fcm-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    margin: 0;
}

.fcm-label {
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
}

.fcm-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 24px;
}

.fcm-input {
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .28);
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    outline: none;
    box-shadow: none;
    transition: border-color .3s, background .3s;
}

    .fcm-input:focus {
        border-bottom-color: #ffffff;
    }

    .fcm-input::placeholder {
        color: rgba(255, 255, 255, .45);
    }

    .fcm-input:-webkit-autofill {
        -webkit-text-fill-color: #ffffff;
        transition: background-color 9999s ease-out;
    }

    .fcm-input.is-invalid {
        border-bottom-color: #E58A9F;
    }

/* ---------- radio and checkbox lists ---------- */

.fcm-choices {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

    .fcm-choices > legend {
        float: left;
        width: 100%;
        margin: 0 0 14px;
    }

        .fcm-choices > legend + * {
            clear: both;
        }

.fcm-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: 2px 28px;
}

.fcm-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    padding: 6px 0;
    color: #ffffff;
    font-size: 15.5px;
    line-height: 1.4;
    cursor: pointer;
}

/* The real input stays in the page (keyboard, screen readers, form post); the mark next to it is what shows. */
.fcm-option-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.fcm-mark {
    flex: none;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, .4);
    background: transparent;
    color: #111111;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    transition: background .2s, border-color .2s, box-shadow .2s;
}

.fcm-mark--radio {
    border-radius: 50%;
}

.fcm-mark--check {
    border-radius: 3px;
}

.fcm-option-input:checked + .fcm-mark {
    background: #ffffff;
    border-color: #ffffff;
}

.fcm-option-input:checked + .fcm-mark--radio {
    box-shadow: inset 0 0 0 3px #111111;
}

.fcm-option-input:checked + .fcm-mark--check::after {
    content: "\2713";
}

.fcm-option-input:focus-visible + .fcm-mark {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.fcm-option:hover .fcm-mark,
.fcm-check:hover .fcm-mark {
    border-color: rgba(255, 255, 255, .7);
}

.is-invalid .fcm-option-input:not(:checked) + .fcm-mark,
.fcm-option-input.is-invalid:not(:checked) + .fcm-mark {
    border-color: #E58A9F;
}

/* ---------- confirmations ---------- */

.fcm-intro {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
}

.fcm-checks {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fcm-check {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin: 0;
    padding: 6px 0;
    cursor: pointer;
}

    .fcm-check .fcm-mark {
        margin-top: 4px;
    }

.fcm-check-text {
    font-size: 15.5px;
    line-height: 1.62;
    color: rgba(255, 255, 255, .84);
    text-wrap: pretty;
}

/* ---------- submit ---------- */

.fcm-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 18px 28px;
    padding-top: clamp(28px, 4vh, 44px);
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.fcm-error {
    flex: 1 1 280px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #F0A8B8;
}

.fcm-submit {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 18px 34px;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    color: #111111;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .3s;
}

.fc-root .fcm-submit {
    color: #111111;
}

    .fcm-submit:hover {
        transform: translateY(-3px);
    }

    .fcm-submit:disabled {
        opacity: .6;
        cursor: progress;
        transform: none;
    }

/* ---------- thank-you state ---------- */

.fcm-success {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: clamp(40px, 6vh, 72px) 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.fcm-success-title {
    margin: 0;
    max-width: 22ch;
    font-size: clamp(28px, 3.4vw, 52px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.04em;
    color: #ffffff;
    text-wrap: balance;
}

.fcm-success-text {
    margin: 0;
    max-width: 52ch;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.66;
    color: rgba(255, 255, 255, .8);
    text-wrap: pretty;
}

.fcm-back {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 16px 28px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: border-color .3s;
}

    .fc-root .fcm-back,
    .fc-root .fcm-back:hover {
        color: #ffffff;
    }

    .fcm-back:hover {
        border-color: #ffffff;
    }