/*
 * Restrict BP Usernames — availability checker notification styles
 * Notification appears ABOVE the username field.
 */

/* ------------------------------------------------------------------ */
/* Base notice                                                         */
/* ------------------------------------------------------------------ */
.rbpu-notice {
    display:          none;           /* hidden until JS populates it  */
    width:            100%;
    max-width:        100%;
    box-sizing:       border-box;
    padding:          9px 13px;
    margin-bottom:    7px;
    border-radius:    4px;
    font-size:        13px;
    font-weight:      500;
    line-height:      1.55;
    word-break:       break-word;
    transition:       background .2s ease, border-color .2s ease;
}

/* ------------------------------------------------------------------ */
/* Success (green) — username is available                             */
/* ------------------------------------------------------------------ */
.rbpu-notice.rbpu-available {
    display:          block;
    color:            #175c00;
    background:       #eafce4;
    border:           1px solid #7ecb6d;
}

/* Subtle left accent bar */
.rbpu-notice.rbpu-available::before {
    content:          '';
    display:          inline-block;
    width:            4px;
    height:           100%;
    /* purely decorative — handled by background; keep for potential override */
}

/* ------------------------------------------------------------------ */
/* Error (red) — username taken or restricted                          */
/* ------------------------------------------------------------------ */
.rbpu-notice.rbpu-error {
    display:          block;
    color:            #a80000;
    background:       #fff2f2;
    border:           1px solid #e89090;
}

/* ------------------------------------------------------------------ */
/* Loading state                                                       */
/* ------------------------------------------------------------------ */
.rbpu-notice.rbpu-loading {
    display:          block;
    color:            #555;
    background:       #f7f7f8;
    border:           1px solid #d6d7d9;
    display:          flex;
    align-items:      center;
    gap:              8px;
}

/* CSS spinner */
.rbpu-spinner {
    display:          inline-block;
    flex-shrink:      0;
    width:            13px;
    height:           13px;
    border:           2px solid #c8c8c8;
    border-top-color: #555;
    border-radius:    50%;
    animation:        rbpu-spin 0.65s linear infinite;
    vertical-align:   middle;
}

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

/* ------------------------------------------------------------------ */
/* Tight layout on BP / login screens (small-container pages)         */
/* ------------------------------------------------------------------ */
#signup_form .rbpu-notice,
#registerform .rbpu-notice,
#createuserdiv .rbpu-notice {
    max-width:        25em;   /* match typical WP login field width    */
}

/* ------------------------------------------------------------------ */
/* WooCommerce context                                                 */
/* ------------------------------------------------------------------ */
.woocommerce-form .rbpu-notice,
.woocommerce-checkout .rbpu-notice {
    font-size:        12px;
}

/* ------------------------------------------------------------------ */
/* Accessibility: respect reduced-motion preference                    */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .rbpu-spinner {
        animation: none;
        border-top-color: #999;
    }
}