/* =========================================================
   VANCE CEYLON — CLEAN MY ACCOUNT OVERRIDE
   This file is loaded AFTER style.css.
   It overrides old account styling without touching cart,
   checkout, products, orders, auth or other website sections.
   ========================================================= */

/* Hide modal completely until existing JS adds .open */
#accountModal.vance-account-modal{
    display:none !important;
}

#accountModal.vance-account-modal.open{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    z-index:99999 !important;
    background:rgba(255,255,255,.26) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
    overflow:hidden !important;
    padding:0 !important;
}

/* Compact dropdown card from the top-right */
#accountModal.vance-account-modal.open .account-box.vance-auth-glass{
    position:absolute !important;
    top:78px !important;
    right:22px !important;
    left:auto !important;
    bottom:auto !important;

    width:min(430px, calc(100vw - 28px)) !important;
    max-height:min(62vh, 620px) !important;
    min-height:0 !important;

    margin:0 !important;
    padding:20px 18px 16px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    border:1px solid rgba(0,0,0,.10) !important;
    border-radius:24px !important;

    background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(247,247,247,.82)) !important;
    color:#111 !important;

    box-shadow:0 24px 65px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.98) !important;

    backdrop-filter:blur(24px) saturate(125%) !important;
    -webkit-backdrop-filter:blur(24px) saturate(125%) !important;

    animation:vanceAccountDrop .26s cubic-bezier(.2,.8,.25,1) both !important;
}

@keyframes vanceAccountDrop{
    from{opacity:0;transform:translateY(-18px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

/* Keep only ONE brand while logged in.
   The older markup contains an outer brand and another inside loggedInAccount. */
#accountModal.vance-account-logged-in .account-box.vance-auth-glass > .vance-account-brand{
    display:none !important;
}

/* Never generate fake duplicate logos from pseudo-elements */
#accountModal .vance-account-brand::before,
#accountModal .vance-account-brand::after{
    content:none !important;
    display:none !important;
}

/* Logged-in real brand only */
#accountModal #loggedInAccount .vance-account-brand{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 0 14px !important;
    text-align:center !important;
}

#accountModal #loggedInAccount .vance-account-logo{
    display:inline-block !important;
    margin:0 !important;
    padding:0 !important;
    color:#111 !important;
    font-size:14px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.20em !important;
}

#accountModal #loggedInAccount .vance-account-logo-sub{
    display:inline-block !important;
    margin:0 !important;
    padding:0 !important;
    color:#111 !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:.14em !important;
}

/* Logged-out logo remains available, but compact */
#accountModal:not(.vance-account-logged-in) .account-box.vance-auth-glass > .vance-account-brand{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 0 14px !important;
}

#accountModal:not(.vance-account-logged-in) .account-box.vance-auth-glass > .vance-account-brand .vance-account-logo,
#accountModal:not(.vance-account-logged-in) .account-box.vance-auth-glass > .vance-account-brand .vance-account-logo-sub{
    color:#111 !important;
}

/* Compact heading */
#accountModal .vance-account-heading{
    margin-bottom:12px !important;
}

#accountModal .vance-account-tagline{
    margin-bottom:4px !important;
    color:rgba(0,0,0,.48) !important;
    font-size:7px !important;
    letter-spacing:.22em !important;
}

#accountModal .vance-account-heading h1{
    margin:0 !important;
    color:#111 !important;
    font-size:25px !important;
    line-height:1 !important;
    font-weight:500 !important;
}

#accountModal .vance-account-heading p{
    margin:6px 0 0 !important;
    color:rgba(0,0,0,.56) !important;
    font-size:9px !important;
    line-height:1.45 !important;
}

/* Profile */
#accountModal .vance-account-user{
    min-height:64px !important;
    padding:9px 11px !important;
    margin-bottom:9px !important;
    border:1px solid rgba(0,0,0,.09) !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.58) !important;
    box-shadow:none !important;
    cursor:pointer !important;
}

#accountModal .vance-avatar-holder,
#accountModal .vance-avatar-holder .account-profile-image,
#accountModal .vance-avatar-fallback{
    width:46px !important;
    height:46px !important;
}

#accountModal .vance-avatar-holder{flex-basis:46px !important}
#accountModal .vance-avatar-fallback{font-size:19px !important}

#accountModal .vance-user-details h2{
    color:#111 !important;
    font-size:14px !important;
    margin:0 !important;
}

#accountModal .vance-user-details .profile-email{
    color:rgba(0,0,0,.55) !important;
    font-size:9px !important;
}

/* Menu items */
#accountModal .vance-account-option{
    min-height:50px !important;
    margin-bottom:7px !important;
    padding:7px 10px !important;
    grid-template-columns:32px 1fr auto !important;
    gap:9px !important;
    border:1px solid rgba(0,0,0,.08) !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.52) !important;
    color:#111 !important;
    box-shadow:none !important;
}

#accountModal .vance-option-icon{
    width:31px !important;
    height:31px !important;
    border-radius:9px !important;
    background:rgba(255,255,255,.74) !important;
    border:1px solid rgba(0,0,0,.08) !important;
    color:#111 !important;
}

#accountModal .vance-option-icon svg{width:17px !important;height:17px !important;stroke:#111 !important}
#accountModal .vance-option-copy strong{color:#111 !important;font-size:12px !important}
#accountModal .vance-option-copy small{color:rgba(0,0,0,.48) !important;font-size:8px !important}
#accountModal .vance-option-arrow{color:rgba(0,0,0,.48) !important;font-size:17px !important}

/* Sign out */
#accountModal .vance-sign-out,
#accountModal #signOutBtn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    width:100% !important;
    min-height:40px !important;
    margin-top:8px !important;
    border:1px solid #111 !important;
    border-radius:12px !important;
    background:#111 !important;
    color:#fff !important;
    opacity:1 !important;
    visibility:visible !important;
    font-size:9px !important;
    font-weight:700 !important;
    letter-spacing:.08em !important;
}

#accountModal .vance-sign-out *,
#accountModal #signOutBtn *{color:#fff !important;fill:#fff !important;stroke:#fff !important}

/* Close button belongs to the dropdown card */
#accountModal .vance-account-close{
    position:absolute !important;
    top:88px !important;
    right:32px !important;
    left:auto !important;
    bottom:auto !important;
    z-index:100001 !important;
    width:30px !important;
    height:30px !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid rgba(0,0,0,.10) !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.92) !important;
    color:#111 !important;
    box-shadow:0 5px 16px rgba(0,0,0,.08) !important;
}

/* Scrollbar */
#accountModal .account-box.vance-auth-glass{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.20) transparent}
#accountModal .account-box.vance-auth-glass::-webkit-scrollbar{width:5px}
#accountModal .account-box.vance-auth-glass::-webkit-scrollbar-track{background:transparent}
#accountModal .account-box.vance-auth-glass::-webkit-scrollbar-thumb{background:rgba(0,0,0,.20);border-radius:999px}

@media(max-width:600px){
    #accountModal.vance-account-modal.open .account-box.vance-auth-glass{
        top:66px !important;
        right:8px !important;
        width:calc(100vw - 16px) !important;
        max-height:58vh !important;
        padding:18px 14px 14px !important;
        border-radius:20px !important;
    }

    #accountModal .vance-account-close{
        top:74px !important;
        right:17px !important;
    }
}