@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Cormorant+Garamond:wght@600;700&display=swap');


*{
box-sizing:border-box;
margin:0;
padding:0;
}


body{

font-family:'Cairo',sans-serif;

background:#faf7f8;

color:#333;

overflow-x:hidden;

}




/* =====================
 TOP BAR
===================== */


.topbar{

height:160px;

background:white;

display:flex;

align-items:center;

justify-content:center;

padding:0 6%;

box-shadow:0 8px 30px #0002;

position:sticky;

top:0;

z-index:100;

}


.topbar div{

text-align:center;

}


.topbar h1{

font-family:'Cormorant Garamond',serif;

font-size:100px;

letter-spacing:8px;

line-height:1;
height:75px;

color:#111;

font-weight:700;

}


.topbar span{

display:block;

margin-top:5px;

font-size:30px;

color:#d987a0;

}




/* =====================
 HEADER BUTTONS
===================== */


.menu-toggle,
#logout{


width:95px;

height:95px;

border:none;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

cursor:pointer;

transition:.3s;

position:fixed;

top:30px;

z-index:500;

}


.menu-toggle{


right:35px;

background:#5895ff;

color:white;

}



.menu-toggle:hover{

transform:rotate(90deg) scale(1.1);

}



#logout{

left:35px;

background:#ff0000;

color:white;

}



#logout:hover{

transform:scale(1.15);

}






/* =====================
 MAIN
===================== */


main{

padding:45px 6%;

transition:.4s;

}



main.shift{

margin-right:320px;

}






/* =====================
 SIDE MENU
===================== */


.menu{


position:fixed;

top:0;

right:-350px;

width:330px;

height:100vh;

background:#111;

padding:110px 25px 30px;


display:flex;

flex-direction:column;

gap:20px;


transition:.4s;

z-index:400;


box-shadow:-10px 0 35px #0008;

}



.menu.active{

right:0;

}




.menu a{


text-decoration:none;

color:white;


background:#ffffff18;


padding:22px 20px;


border-radius:25px;


display:flex;

align-items:center;


gap:18px;


font-size:20px;


font-weight:600;


transition:.3s;

}



.menu a i{

color:#f7b6c8;

font-size:25px;

}



.menu a:hover{

background:#f7b6c8;

color:#111;

transform:translateX(-8px);

}



.menu a:hover i{

color:#111;

}






/* =====================
 QUICK BUTTONS
===================== */


.quick{


margin-top:55px;


background:white;


padding:45px;


border-radius:40px;


box-shadow:0 15px 40px #0001;


}



.quick h2{

font-size:32px;

margin-bottom:35px;

}




.quick{


display:block;

}



.quick button{


width:calc(50% - 25px);


height:80px;


border:none;


padding:20px;


border-radius:35px;


margin:10px;


font-size:20px;


font-family:'Cairo';


color:white;


cursor:pointer;


transition:.3s;


display:inline-flex;


align-items:center;


justify-content:center;


gap:15px;


}



/* طلب جديد */

.quick button:nth-child(2){

background:#25D366;

}


/* إضافة منتج */

.quick button:nth-child(3){

background:#f7b6c8;

}


/* تحديث مخزون */

.quick button:nth-child(4){

background:#5da9ff;

}



/* باقي الاختصارات */

.quick button:nth-child(5){

background:#ff6fca;

}




.quick button:hover{

transform:translateY(-7px);

filter:brightness(.95);

}



.quick i{

font-size:25px;

}






/* =====================
 CARDS
===================== */


.cards{


display:grid;


grid-template-columns:

repeat(auto-fit,minmax(230px,1fr));


gap:25px;

}



.card{


background:white;

padding:35px;

border-radius:35px;

text-align:center;

box-shadow:0 15px 40px #0001;

transition:.3s;

}



.card:hover{

transform:translateY(-8px);

}



.card i{

font-size:40px;

color:#d987a0;

}





hr{

border:none;

height:1px;

background:#eee;

margin:45px 0;

}








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


@media(max-width:768px){


.topbar{

height:75px;

}



.topbar h1{

font-size:42px;

}



.topbar span{

font-size:100px;

}



.back-btn{

width:42px;

height:42px;

top:17px;

}



.menu-toggle,
#logout{

width:42px;

height:42px;

top:17px;

}



.menu-toggle{

right:20px;

}



#logout{

left:20px;

}


main{

padding:20px 15px;

}



.form-box{

padding:20px;

border-radius:25px;

}
.menu{

width:280px;

padding-top:100px;

}



.menu a{

padding:18px;

font-size:17px;

}




main{

padding:25px 20px;

}


.cards{

grid-template-columns:1fr;

}




.quick{

padding:25px;

}



.quick button{


width:100%;


height:65px;


margin:8px 0;


font-size:17px;


}



}



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


.login-page{


min-height:100vh;


width:100%;


display:flex;


align-items:center;


justify-content:center;


padding:20px;


background:


radial-gradient(circle,#f7b6c855 2px,transparent 3px);


background-size:45px 45px;


background-color:#fff9fb;


font-family:'Cairo',sans-serif;


overflow-x:hidden;


}




.login-container{


width:100%;


max-width:500px;


display:flex;


justify-content:center;


align-items:center;


}




.login-card{


background:white;


width:100%;


max-width:420px;


padding:clamp(25px,5vw,45px);


border-radius:35px;


box-shadow:

0 20px 50px rgba(247,182,200,.35);


text-align:center;


animation:loginShow .6s ease;


}





@keyframes loginShow{


from{

opacity:0;

transform:translateY(30px);

}


to{

opacity:1;

transform:translateY(0);

}


}






.login-logo h1{


font-family:'Cormorant Garamond',serif;


font-size:clamp(45px,10vw,70px);


letter-spacing:6px;


color:#111;


line-height:1;


}





.login-logo p{


color:#d987a0;


font-size:clamp(14px,3vw,18px);


margin-top:10px;


}





.login-icon{


width:clamp(65px,15vw,85px);


height:clamp(65px,15vw,85px);


margin:25px auto;


border-radius:50%;


background:#f7b6c8;


display:flex;


align-items:center;


justify-content:center;


font-size:clamp(28px,7vw,38px);


color:white;


box-shadow:0 10px 25px #f7b6c877;


}





.login-card h2{


font-size:clamp(20px,5vw,28px);


margin-bottom:25px;


color:#333;


}






.input-group{


width:100%;


display:flex;


align-items:center;


gap:12px;


border:2px solid #f7b6c8;


border-radius:22px;


padding:13px 18px;


margin-bottom:18px;


background:#fff;


transition:.3s;


}





.input-group:focus-within{


box-shadow:0 0 15px #f7b6c855;


}





.input-group i{


color:#d987a0;


font-size:18px;


}





.input-group input{


border:none;


outline:none;


width:100%;


font-size:16px;


font-family:'Cairo',sans-serif;


background:transparent;


}





#login{


width:100%;


padding:15px;


border:none;


border-radius:35px;


background:#f7b6c8;


color:white;


font-size:18px;


font-family:'Cairo',sans-serif;


cursor:pointer;


transition:.3s;


box-shadow:0 10px 25px #f7b6c855;


}





#login:hover{


transform:translateY(-3px);


background:#d987a0;


}





#login:active{


transform:scale(.97);


}





.back-store{


margin-top:25px;


font-size:15px;


}





.back-store a{


text-decoration:none;


color:#d987a0;


}







/* TABLET */


@media(max-width:768px){


.login-card{


border-radius:30px;


}


}





/* MOBILE */


@media(max-width:480px){



.login-page{


padding:15px;


}



.login-card{


padding:30px 20px;


border-radius:25px;


}




.input-group{


padding:12px 15px;


}





#login{


font-size:16px;


padding:14px;


}



}







/* SMALL PHONES */


@media(max-width:350px){


.login-logo h1{


font-size:42px;


}



.login-card h2{


font-size:20px;


}


}