/* ============================================================
   AMERiconic — modernized login / auth card
   Scoped to .am-login (set on #app in views/login.php) so it does
   NOT affect the admin panel, which shares americonic-admin.css.
   The page background (#1E1E2D, Metronic dark) and the bottom-left
   flare (.page radial-gradient in americonic.css) are intentionally
   left untouched — this only restyles the login card on top of them.
   Loaded AFTER americonic-admin.css so these rules win on /login.
   ============================================================ */

/* ---- centering wrapper (#app) ---- */
.am-login { display: block; width: 100%; }

/* normalize the Bootstrap rows used inside the component to simple blocks */
.am-login .row { display: block; margin: 0; width: 100%; }

/* ---- the card ---- */
.am-login > div {
    width: 100%;
    max-width: 440px;
    margin: clamp(24px, 6vh, 72px) auto;
    padding: 40px 36px;
    background: rgba(28, 28, 44, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.50),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #e7e7ef;
}

/* ---- headings ---- */
.am-login h1 {
    width: 100%;
    margin: 0 0 18px 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-align: center;
}

/* ---- tab nav: Log In / Sign Up / Reset Password ---- */
.am-login .adminMenu { width: 100%; margin: 0 0 22px 0; }
.am-login .adminMenu .col-xs-12 {
    display: flex; flex-wrap: wrap; gap: 6px;
    justify-content: center; width: 100%; padding: 0;
}
.am-login .adminMenu a {
    float: none; margin: 0; padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.86rem; font-weight: 600;
    color: #b6b6c8; text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}
.am-login .adminMenu a::before { content: none; }   /* drop the "»" prefix */
.am-login .adminMenu a:hover { color: #fff; background: rgba(54, 153, 255, 0.16); }

/* ---- the Feb-2023 notice -> subtle info banner ---- */
.am-login .topNotice {
    max-width: none; margin: 0 0 20px 0; padding: 11px 14px;
    font-size: 0.8rem; line-height: 1.45; color: #cdd4e0;
    background: rgba(54, 153, 255, 0.08);
    border: 1px solid rgba(54, 153, 255, 0.22);
    border-radius: 10px;
}

/* ---- form: labels above full-width inputs (CSS only — DOM unchanged) ---- */
.am-login form { width: 100%; }
.am-login ul { margin: 0; padding: 0; list-style: none; }
.am-login li { clear: both; margin: 0 0 16px 0; }
.am-login label {
    display: block; float: none; width: 100%;
    margin: 0 0 7px 2px;
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: #9a9ab0;
}
.am-login input[type=text],
.am-login input[type=password] {
    display: block; width: 100%; height: 46px;
    padding: 0 14px; font-size: 0.95rem;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.am-login input[type=text]::placeholder,
.am-login input[type=password]::placeholder { color: #6f6f86; }
.am-login input[type=text]:focus,
.am-login input[type=password]:focus {
    outline: none; background: rgba(0, 0, 0, 0.38);
    border-color: #3699FF;
    box-shadow: 0 0 0 3px rgba(54, 153, 255, 0.22);
}

/* ---- primary button: full width, accent ---- */
.am-login .submitButton,
.am-login .submitButton.longSubmit {
    width: 100%; height: 46px; margin-top: 8px !important; padding: 0;
    font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em;
    color: #fff;
    background: linear-gradient(135deg, #3699FF 0%, #1b7df0 100%);
    border: 0; border-radius: 10px; cursor: pointer;
    box-shadow: 0 8px 22px rgba(27, 125, 240, 0.35);
    transition: transform .12s ease, box-shadow .16s ease, filter .16s ease;
}
.am-login .submitButton:hover { filter: brightness(1.06); box-shadow: 0 10px 26px rgba(27, 125, 240, 0.45); }
.am-login .submitButton:active { transform: translateY(1px); }

/* ---- validation / error -> modern alert ---- */
.am-login .validation {
    max-width: none; margin: 0 0 18px 0; padding: 12px 14px;
    color: #ffd0db; background: rgba(241, 65, 108, 0.12);
    border: 1px solid rgba(241, 65, 108, 0.35); border-left-width: 3px;
    border-radius: 10px; font-size: 0.86rem;
}
.am-login .validation ul { margin: 0; padding-left: 16px; list-style: disc; }
.am-login .validation li { margin: 2px 0; clear: none; }

/* ---- misc ---- */
.am-login p { color: #b6b6c8; font-size: 0.85rem; }
.am-login a.termsLink, .am-login .row a:not(.adminMenu a) { color: #6db1ff; }
.am-login .emailList { width: auto; display: inline-block; margin-right: 8px; vertical-align: middle; }
.am-login .fa-spinner { display: block; margin: 24px auto; color: #3699FF; }

/* ---- password requirements checklist (signup / new password) ---- */
.am-login .pw-rules-li { margin: 2px 0 18px; }
.am-login .pw-rules-title {
    margin: 0 0 9px; font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.03em; text-transform: uppercase; color: #9a9ab0;
}
.am-login ul.pw-rules { margin: 0; padding: 0; list-style: none; }
.am-login ul.pw-rules li {
    display: flex; align-items: center; gap: 10px;
    clear: none; margin: 0 0 8px;
    font-size: 0.84rem; line-height: 1.3; color: #9a9ab0;
    transition: color .18s ease;
}
.am-login ul.pw-rules li:last-child { margin-bottom: 0; }
.am-login ul.pw-rules .pw-ico {
    flex: 0 0 auto; width: 18px; height: 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.22); border-radius: 50%;
    position: relative; transition: background-color .18s ease, border-color .18s ease;
}
.am-login ul.pw-rules li.met { color: #cdeedd; }
.am-login ul.pw-rules li.met .pw-ico { background: #2ecc71; border-color: #2ecc71; }
.am-login ul.pw-rules li.met .pw-ico::after {
    content: ""; position: absolute; left: 5px; top: 2px;
    width: 4px; height: 8px; border: solid #0c2c1c; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ---- mobile ---- */
@media (max-width: 520px) {
    .am-login > div { margin: 16px auto; padding: 28px 20px; border-radius: 14px; }
}