/* ======================================================
   SEAN B SHOP
   MARKETPLACE ACCOUNT COMPONENT
   /assets/css/components/account.css

   CLEAN PRODUCTION VERSION
====================================================== */



/* ======================================================
   ACCOUNT WRAPPER
====================================================== */


.desktop-account{

    position:relative;

    flex-shrink:0;

}





/* ======================================================
   ACCOUNT MAIN LINK
====================================================== */


.desktop-account > a{


    display:flex;


    align-items:center;


    gap:10px;


    color:#0b1f3a;


    transition:.25s ease;


}



.desktop-account > a:hover{


    color:#e60000;


}





.desktop-account > a i{


    width:34px;


    height:34px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:#f1f5f9;


    font-size:20px;


    transition:.25s;


}





.desktop-account > a:hover i{


    background:#e60000;


    color:#ffffff;


}








/* ======================================================
   ACCOUNT TEXT
====================================================== */


.desktop-account small{


    display:block;


    color:#6b7280;


    font-size:11px;


    line-height:1.2;


}





.desktop-account strong{


    display:block;


    color:#0b1f3a;


    font-size:14px;


    font-weight:700;


}








/* ======================================================
   ACCOUNT DROPDOWN
====================================================== */


.account-dropdown{


    position:absolute;


    top:55px;


    right:0;


    width:230px;



    background:#ffffff;



    border-radius:14px;



    padding:10px;



    box-shadow:


    0 15px 45px rgba(0,0,0,.15);



    opacity:0;



    visibility:hidden;



    transform:


    translateY(12px);



    transition:.25s ease;



    z-index:3000;


}





.desktop-account:hover .account-dropdown{


    opacity:1;


    visibility:visible;


    transform:


    translateY(0);


}








/* ======================================================
   DROPDOWN LINKS
====================================================== */


.account-dropdown a{


    display:flex;


    align-items:center;


    gap:12px;


    padding:12px;


    border-radius:8px;


    color:#374151;


    font-size:14px;


    font-weight:500;


    transition:.2s ease;


}





.account-dropdown a:hover{


    background:#f5f7fa;


    color:#e60000;


}





.account-dropdown a i{


    width:20px;


    color:#0b1f3a;


}







/* ======================================================
   ACCOUNT HEADER AREA
====================================================== */


.account-dropdown-header{


    padding:15px;


    border-bottom:1px solid #eeeeee;


    margin-bottom:8px;


}



.account-dropdown-header strong{


    display:block;


    color:#0b1f3a;


    font-size:15px;


}





.account-dropdown-header span{


    display:block;


    color:#6b7280;


    font-size:12px;


    margin-top:3px;


}








/* ======================================================
   USER LOGGED IN STATE
====================================================== */


.account-user{


    display:flex;


    align-items:center;


    gap:10px;


}





.account-avatar{


    width:42px;


    height:42px;


    border-radius:50%;


    background:#0b1f3a;


    color:white;


    display:flex;


    align-items:center;


    justify-content:center;


    font-weight:700;


}





.account-name{


    font-size:14px;


    font-weight:700;


    color:#111827;


}





.account-email{


    font-size:12px;


    color:#6b7280;


}








/* ======================================================
   ACCOUNT ACTION BUTTONS
====================================================== */


.account-actions{


    display:flex;


    flex-direction:column;


    gap:8px;


    margin-top:10px;


}





.account-login-btn{


    height:40px;


    background:#0b1f3a;


    color:#ffffff !important;


    border-radius:8px;


    display:flex;


    align-items:center;


    justify-content:center;


    font-weight:700;


}





.account-login-btn:hover{


    background:#e60000;


}





.account-register-btn{


    height:40px;


    background:#e60000;


    color:#ffffff !important;


    border-radius:8px;


    display:flex;


    align-items:center;


    justify-content:center;


    font-weight:700;


}





.account-register-btn:hover{


    background:#c40000;


}








/* ======================================================
   ACCOUNT PAGE
====================================================== */


.account-page{


    background:#f8fafc;


    padding:40px 0;


}





.account-card{


    background:#ffffff;


    border-radius:14px;


    padding:25px;


    box-shadow:


    0 5px 20px rgba(0,0,0,.06);


}





.account-sidebar{


    background:#ffffff;


    border-radius:14px;


    padding:20px;


}





.account-sidebar a{


    display:flex;


    align-items:center;


    gap:12px;


    height:45px;


    padding:0 15px;


    border-radius:8px;


    color:#374151;


    font-weight:600;


}





.account-sidebar a:hover,
.account-sidebar a.active{


    background:#0b1f3a;


    color:#ffffff;


}








/* ======================================================
   MOBILE ACCOUNT
====================================================== */


.mobile-account{


    display:flex;


    align-items:center;


    justify-content:center;


}





.mobile-account i{


    width:38px;


    height:38px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:#f1f5f9;


    color:#0b1f3a;


}







@media(max-width:992px){


    .desktop-account{


        display:none;


    }


}



@media(max-width:480px){


    .account-card{


        padding:18px;


    }


}