/* =============================
    LOGIN
============================= */

.ae-account-control {

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    letter-spacing:.02em;

}


.ae-account-name {

    font-weight:600;

    color:#222;

}


.ae-account-action {

    padding-left:10px;

    border-left:1px solid #dedede;

    color:#666;

    text-decoration:none;

    font-size:13px;

    transition:color .2s ease;

}


.ae-account-action:hover {

    color:#111;

}


/* =============================
    LOGIN OVERLAY 
============================= */

.ae-login-overlay {

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.35);

    backdrop-filter:blur(8px);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    pointer-events:none;

    transition:opacity .25s ease;

    z-index:99999;

}


.ae-login-overlay.is-open {

    opacity:1;

    pointer-events:auto;

}


/* =============================
    LOGIN MODAL
============================= */

.ae-login-modal {

    position:relative;

    width:380px;

    max-width:90%;

    background:#fff;

    padding:40px;

    border-radius:8px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.18);

    transform:translateY(10px);

    transition:transform .25s ease;

}


.ae-login-overlay.is-open .ae-login-modal {

    transform:translateY(0);

}

.ae-login-close {

    position:absolute !important;

    top:15px !important;

    right:15px !important;

    width:30px !important;

    height:30px !important;

    padding:0 !important;

    margin:0 !important;

    border:none !important;

    background:transparent !important;

    font-size:22px !important;

    line-height:1 !important;

    color:#777 !important;

    cursor:pointer !important;

    appearance:none !important;

    box-shadow:none !important;

}


.ae-login-close:hover {

    color:#111 !important;

    background:transparent !important;

}

.ae-loading-spinner {

    display:inline-block;

    width:12px;
    height:12px;

    margin-left:6px;

    border:2px solid currentColor;

    border-right-color:transparent;

    border-radius:50%;

    vertical-align:-2px;

    animation:ae-spinner-rotate .7s linear infinite;

}


@keyframes ae-spinner-rotate {

    from {
        transform:rotate(0deg);
    }

    to {
        transform:rotate(360deg);
    }

}

@media(max-width:480px) {

    .ae-login-modal {

        padding:30px 25px;

    }

}



/* =============================
   LOGIN MODAL CONTENT
============================= */

.ae-login-modal,
.ae-login-modal * {

    box-sizing:border-box;

}


/* TITLE */

.ae-login-modal h3 {

    margin:0 0 28px;

    font-size:24px;

    font-weight:600;

    color:#111;

    letter-spacing:-.02em;

}


/* FORM */

.ae-login-form {

    display:flex;

    flex-direction:column;

    gap:16px;

}


/* FIELDS */

.ae-login-field {

    width:100%;

}


.ae-login-field input {

    width:100%;

    height:48px;

    padding:0 15px;

    border:1px solid #ddd;

    border-radius:6px;

    background:#fff;

    color:#222;

    font-size:14px;

    font-family:inherit;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.ae-login-field input:focus {

    border-color:#222;

    box-shadow:
        0 0 0 3px rgba(0,0,0,.06);

}


/* BUTTON */

.ae-login-submit {

    display:block !important;

    width:100% !important;

    height:48px !important;

    padding:0 !important;

    margin-top:8px !important;

    border:0 !important;

    border-radius:6px !important;

    background:#111 !important;

    color:#fff !important;

    font-size:14px !important;

    font-weight:600 !important;

    font-family:inherit !important;

    line-height:48px !important;

    text-align:center !important;

    cursor:pointer !important;

    appearance:none !important;

    box-shadow:none !important;

}


.ae-login-submit:hover {

    background:#fff !important;

    color:#111 !important;

    border: 1px solid #111 !important;

    opacity:.85;

}


.ae-login-submit:disabled {

    opacity:.6;

    cursor:not-allowed;

}


/* MESSAGE */

.ae-login-message {

    min-height:18px;

    margin-top:4px;

    font-size:13px;

    color:#666;

}