/* AF Start Form — form-specific rules. Shared rules live in assets/css/af-forms-base.css. */

/* ---- Card ---- */
.af-start {
    font-family: Inter, sans-serif;
    color: #171717;
}

/* ---- Header container ---- */
.af-start__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 32px;
}

.af-start__subtitle a {
    color: #171717;
    text-decoration: underline;
    font-weight: 400;
}

/* ---- Progress (4 dots) ---- */
.af-start__progress {
    margin-bottom: 48px;
}

/* ---- Form layout ---- */
.af-start__form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Fields are wrapped in fieldset#signup-form-fieldset (external QA locator,
   theme structure parity). Guarantee visibility and a neutral box even if
   the theme rules (`form fieldset { display: none }` + global fieldset
   reset) are absent or change. */
.af-start__form fieldset {
    display: block;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.af-start__row {
    display: flex;
    gap: 20px;
    width: 100%;
}

.af-start__row--two-cols > .af-start__field {
    flex: 0 0 calc(50% - 10px);
}

.af-start__field.is-hidden {
    display: none;
    margin: 0;
}

/* ---- Password ---- */
.af-start__password-control {
    position: relative;
}

.af-start__password-toggle {
    position: absolute;
    right: 30px;
    top: 15px;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 0;
    color: #46494f;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.af-start__password-toggle .dashicons {
    font-family: dashicons;
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.af-start__password-tooltip {
    display: none;
    width: 300px;
    max-width: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 51, 99, 0.08);
    padding: 16px 20px 16px 35px;
    margin-top: 8px;
}

.af-start__field--password:focus-within .af-start__password-tooltip {
    display: block;
}

.af-start__password-tooltip ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.af-start__rule {
    position: relative;
    padding: 4px 0;
    font-size: 15px;
    line-height: 20px;
    color: #46494f;
}

.af-start__rule::before {
    content: "\2022";
    position: absolute;
    left: -15px;
    top: 4px;
    color: #d2d4d7;
    font-size: 16px;
    line-height: 1;
}

.af-start__rule.is-valid {
    color: #46494f;
}

.af-start__rule.is-valid::before {
    content: "\2713";
    color: #2f9e44;
}

.af-start__rule.is-error::before {
    color: #ff6e6e;
}

@media (min-width: 768px) {
    .af-start__password-tooltip {
        position: absolute;
        left: 110%;
        top: 50%;
        transform: translateY(-50%);
        margin-top: 0;
    }
}

/* ---- Whole-form error (after submit) ---- */
.af-start__form-error {
    display: block;
    color: #ff6e6e;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 8px;
    text-align: center;
}

.af-start__form-error a {
    color: inherit;
    font-size: inherit;
    text-decoration: underline;
}

/* ---- Submit row ---- */
.af-start__submit-row {
    display: flex;
    justify-content: center;
    margin: 8px 0 24px;
}

/* ---- Confirmation block ---- */
.af-start__confirmation {
    text-align: center;
    padding: 16px 0;
    display: flex;
    flex-direction: column;
}

.af-start__confirmation[hidden] {
    display: none;
}

.af-start__confirmation-title {
    font-size: 36px;
    line-height: 130%;
    font-weight: 400;
    color: #171717;
    margin: 0 0 16px;
}

.af-start__confirmation-body {
    font-size: 18px;
    line-height: 30px;
    color: #171717;
    margin: 0 0 24px;
}

.af-start__confirmation-btn {
    display: inline-block;
    color: #171717;
    font-weight: 500;
    margin: 36px auto;
    text-decoration: none;
}

.af-start__confirmation-btn span {
    text-decoration: underline;
}

.af-start__confirmation-footer {
    color: #71767d;
    font-size: 14px;
    line-height: 140%;
    margin: 0;
}

.af-start__confirmation-footer a {
    color: #71767d;
    text-decoration: underline;
}

/* ---- intl-tel-input scoped ---- */
.af-start .iti {
    width: 100%;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .af-start {
        padding: 64px 24px;
    }
}

@media (max-width: 576px) {
    .af-start {
        padding: 64px 24px;
        border: none;
        border-radius: 0;
    }

    .af-start__row--two-cols {
        flex-direction: column;
        gap: 0;
    }

    .af-start__row--two-cols > .af-start__field {
        flex: 0 0 auto;
    }

    .af-start__progress {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        justify-content: flex-start;
        margin: 0;
    }

    .af-start__progress-dot {
        width: 25%;
    }
}