/* AF Forms — shared base for signup and start form types.
   Source of truth: signup.css. Grouped selectors keep each form's BEM prefix. */

/* ---- Design tokens ---- */
.aff {
    --aff-input-border: #b8b8b8;
    --aff-input-radius: 12px;
    --aff-input-height: 60px;
    --aff-input-bg: #fff;
    --aff-textarea-radius: 8px;
    --aff-text: #171717;
    --aff-text-muted: #46494f;
    --aff-error: #ff6e6e;
    --aff-btn-bg: #171717;
    --aff-btn-text: #fff;
    --aff-btn-disabled-bg: #e7e7e7;
    --aff-btn-disabled-text: #b8b8b8;
    --aff-legal: #71767d;
    --aff-font: Inter, sans-serif;
    --aff-card-max: 952px;
    --aff-card-padding: 64px 100px 100px;
    --aff-card-border: #b8b8b8;
    --aff-card-radius: 16px;
    --aff-progress-track: #e7e7e7;
    --aff-progress-active: #5fd0ca;
}
.aff--invert {
    --aff-input-bg: #292b2e;
    --aff-input-border: #46494f;
    --aff-text: #fff;
    --aff-placeholder: #b8b8b8;
    --aff-btn-bg: #fff;
    --aff-btn-text: #171717;
    --aff-legal: #b8b8b8;
}

/* ---- Box-sizing reset ---- */
.af-signup *,
.af-signup *::before,
.af-signup *::after,
.af-start *,
.af-start *::before,
.af-start *::after {
    box-sizing: border-box;
}

/* ---- Field wrapper ---- */
.af-signup__field,
.af-start__field {
    position: relative;
    margin-bottom: 32px;
}

/* ---- Inputs / Selects ---- */
.af-signup__form input:not([type='checkbox']):not([type='hidden']),
.af-signup__form select,
.af-start__input {
    color: var(--aff-text-muted);
    width: 100%;
    height: var(--aff-input-height);
    font-size: 16px;
    font-family: var(--aff-font);
    font-weight: 400;
    line-height: 160%;
    letter-spacing: -0.64px;
    padding: 0 16px 0 20px;
    background: var(--aff-input-bg);
    border-radius: var(--aff-input-radius);
    border: 1px solid var(--aff-input-border);
    cursor: pointer;
    transition:
        border 0.2s cubic-bezier(0.165, 0.84, 0.44, 1),
        font-weight 0.2s;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.af-signup__form select,
.af-start__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23171717' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 20px) center;
    padding-right: 48px;
}

.af-signup__form select option,
.af-start__select option {
    font-family: var(--aff-font);
    font-size: 16px;
    font-weight: 400;
}

/* Filled state — active border + medium weight */
.af-signup__form select.has-value,
.af-signup__form input:not(:placeholder-shown):not([type='checkbox']):not([type='hidden']),
.af-start__input:not(:placeholder-shown),
.af-start__select.has-value {
    color: var(--aff-text);
    font-weight: 500;
    letter-spacing: -0.32px;
    border-color: var(--aff-text);
}

/* Focus */
.af-signup__form input:focus,
.af-signup__form select:focus,
.af-start__input:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--aff-text);
}

/* ---- Labels — placeholder-as-label, hide native ---- */
.af-signup__field label,
.af-start__field label {
    display: none;
}

/* Phone field label — floats above the intl-tel-input dressing */
.af-signup__field label.af-signup__phone-label,
.af-start__field label.af-start__phone-label {
    display: block;
    position: absolute;
    left: 10px !important;
    top: -10px !important;
    z-index: 9999999999;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--aff-text-muted);
    pointer-events: none;
    white-space: nowrap;
}

/* intl-tel-input wrapper: bound to input height so the flag prefix doesn't stretch when error span is appended to the field */
.af-signup .iti,
.af-start .iti {
    height: var(--aff-input-height);
}

/* Hide phone label when input has value or focus (signup uses phoneMKTO, start uses phone) */
.af-signup__form input[name='phoneMKTO']:not(:placeholder-shown) + .af-signup__phone-label,
.af-signup__form input[name='phoneMKTO']:focus + .af-signup__phone-label,
.af-start__form input[name='phone']:not(:placeholder-shown) + .af-start__phone-label,
.af-start__form input[name='phone']:focus + .af-start__phone-label {
    display: none;
}

/* ---- Error state ---- */
.af-signup__field--error input,
.af-signup__field--error select,
.af-signup__field--error textarea,
.af-signup__field--error .af-signup__dropdown-header,
.af-start__field.is-error .af-start__input {
    border-color: var(--aff-error) !important;
}

.af-signup__field--error input:focus,
.af-signup__field--error select:focus,
.af-signup__field--error textarea:focus,
.af-start__field.is-error .af-start__input:focus {
    border-color: var(--aff-text) !important;
}

.af-signup__error,
.af-signup__field-error,
.af-start .field__error-msg {
    display: block;
    color: var(--aff-error);
    font-size: 12px;
    line-height: 18px;
    padding-left: 18px;
    padding-top: 3px;
    text-align: left;
}

/* Start's error span uses the theme-global class `field__error-msg`
   (external QA locators match it with an exact @class comparison).
   The theme's main.min.css styles that class globally with !important
   (padding: 7px 8px 0 20px, line-height: 1.4rem), so pin the plugin
   values back with a higher-specificity !important override. */
.af-start .field__error-msg {
    padding: 3px 0 0 18px !important;
    line-height: 18px !important;
}

/* ---- Headers (title + subtitle) ---- */
.af-signup__step-title h3,
.af-start__title {
    font-size: 32px;
    font-weight: 400;
    color: var(--aff-text);
    margin-bottom: 0;
}

.af-signup__step-title p,
.af-start__subtitle {
    font-size: 18px;
    font-weight: 400;
    color: var(--aff-text);
    margin-top: 12px;
    margin-bottom: 20px;
}

/* ---- Submit button ---- */
.af-signup .btn.btn-primary,
.af-start__submit {
    width: 218px;
    height: 60px;
    margin: 0 auto;
    border: 0;
    border-radius: 6px;
    background: var(--aff-btn-bg);
    color: var(--aff-btn-text);
    font-family: var(--aff-font);
    font-size: 20px;
    font-weight: 500;
    line-height: 160%;
    letter-spacing: -0.4px;
    cursor: pointer;
}

.af-signup .btn.btn-primary:disabled,
.af-start__submit:disabled {
    background: var(--aff-btn-disabled-bg);
    color: var(--aff-btn-disabled-text);
    border-color: transparent;
    cursor: default;
}

/* ---- Legal ---- */
.af-signup__legal,
.af-start__legal {
    text-align: center;
    padding-top: 0;
}

.af-signup__legal p,
.af-start__legal p {
    color: var(--aff-legal);
    font-family: var(--aff-font);
    font-size: 12px;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: -0.24px;
    margin-bottom: 8px;
}

.af-signup__legal a,
.af-start__legal a {
    color: var(--aff-legal);
    font-size: 12px;
}

/* ---- Card shell ---- */
.af-signup,
.af-start {
    position: relative;
    max-width: var(--aff-card-max);
    width: 100%;
    margin: 0 auto;
    padding: var(--aff-card-padding);
    background: var(--aff-input-bg);
    border: 1px solid var(--aff-card-border);
    border-radius: var(--aff-card-radius);
}

/* ---- Progress bar ---- */
.af-signup__progress,
.af-start__progress {
    display: flex;
    justify-content: center;
    gap: 0;
}
.af-signup__progress-step,
.af-start__progress-dot {
    width: 42px;
    height: 4px;
    display: block;
    border: 0;
    background: var(--aff-progress-track);
}
.af-signup__progress-step.active,
.af-signup__progress-step.completed,
.af-start__progress-dot.is-active,
.af-start__progress-dot.is-valid {
    background: var(--aff-progress-active);
}

/* ---- Textarea base ---- */
.af-signup__form textarea {
    color: var(--aff-text-muted);
    width: 100%;
    background: var(--aff-input-bg);
    border: 1px solid var(--aff-input-border);
    border-radius: var(--aff-textarea-radius);
    font-family: var(--aff-font);
    font-size: 16px;
    padding: 16px 20px;
    box-sizing: border-box;
    transition: border 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-appearance: none;
    appearance: none;
}
.af-signup__form textarea:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--aff-text);
}

/* ---- Responsive (≤576) ---- */
@media (max-width: 576px) {
    .af-signup__step-title h3,
    .af-start__title {
        font-size: 28px;
        line-height: 130%;
    }

    .af-signup__step-title p,
    .af-start__subtitle {
        font-size: 18px;
        line-height: 155%;
    }

    .af-signup .btn.btn-primary,
    .af-start__submit {
        width: 100%;
        height: 60px;
        font-size: 16px;
        letter-spacing: -0.32px;
    }

    .af-signup__legal p,
    .af-signup__legal a,
    .af-start__legal p,
    .af-start__legal a {
        font-size: 10px;
        line-height: 130%;
        letter-spacing: -0.2px;
    }
}