/*
    Password requirements checklist (AppointmentBooking).
    Ported from the PatientPortal version. AppointmentBooking has no --space-* / --radius-full /
    --grey-color tokens, so those values are written out here, matched to site.css.
    Markup: _PasswordRequirements.cshtml, behaviour: password-requirements.js.
*/

.password-requirements {
    margin: 4px 0 20px 12px; /* left edge lines up with .form-label (margin-left: 12px) */
    color: var(--prim-color);
    font-size: 14px;
    line-height: 1.3;
}

    .password-requirements .pwr-title {
        margin: 0 0 4px;
        font-size: 10px; /* same treatment as .form-label */
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    /* Two columns where there is room, one on narrow screens */
    .password-requirements .pwr-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 4px 20px;
    }

    .password-requirements .pwr-item {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .password-requirements .pwr-text {
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* Round marker, same border as .form-check-input */
    .password-requirements .pwr-icon {
        position: relative;
        flex: 0 0 14px;
        width: 14px;
        height: 14px;
        border: 1px solid darkgray;
        border-radius: 50%;
        background-color: var(--white-color);
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    /* Met: filled with --prim-color and a white check */
    .password-requirements .pwr-item.is-met .pwr-icon {
        border-color: var(--prim-color);
        background-color: var(--prim-color);
    }

        .password-requirements .pwr-item.is-met .pwr-icon::after {
            content: "";
            position: absolute;
            left: 3.5px;
            top: 1px;
            width: 5px;
            height: 8px;
            border: solid var(--white-color);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

    /* Unmet rules only turn red after a submit attempt */
    .password-requirements.pwr-attempted .pwr-item.is-unmet {
        color: var(--danger-color, #dc3545);
    }

        .password-requirements.pwr-attempted .pwr-item.is-unmet .pwr-icon {
            border-color: var(--danger-color, #dc3545);
        }

    /* Screen-reader-only state text */
    .password-requirements .pwr-sr {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

@media (prefers-reduced-motion: reduce) {
    .password-requirements .pwr-icon {
        transition: none;
    }
}