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


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


body{

font-family:'Cairo',sans-serif;
background:#fff9fb;
color:#333;
overflow-x:hidden;
}




/* BACKGROUND */

body::before,
body::after{

content:"";
position:fixed;
border-radius:50%;
background:#f7b6c8;
opacity:.25;
z-index:-1;
animation:float 12s infinite alternate;

}


body::before{

width:280px;
height:280px;
top:100px;
right:-80px;

}


body::after{

width:220px;
height:220px;
bottom:80px;
left:-70px;

}


@keyframes float{

from{
transform:translateY(0);
}

to{
transform:translateY(80px);
}

}





/* HEADER */


.top-header{

height:90px;
background:#f7b6c8;
padding:0 7%;
display:flex;
align-items:center;
justify-content:space-between;

}



.logo{

font-family:'Cormorant Garamond';
font-size:60px;
letter-spacing:5px;
color:#111;

}




.header-actions{

display:flex;
gap:15px;

}



.whatsapp-icon,
.cart-icon,
.account-icon{

width:52px;
height:52px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;

}



.whatsapp-icon{

background:#25D366;
color:white;

}



.cart-icon{

background:white;
color:#f7b6c8;
border:none;
position:relative;

}



.account-icon{

background:#111;
color:white;
text-decoration:none;

}




#cartCount{

position:absolute;
top:-5px;
right:-5px;

background:#111;
color:white;

width:22px;
height:22px;

border-radius:50%;

font-size:12px;

display:flex;
align-items:center;
justify-content:center;

}







/* NAV */


.main-nav{

background:white;
display:flex;
justify-content:center;
gap:45px;
padding:18px;
box-shadow:0 5px 20px #0001;

}


.main-nav a{

text-decoration:none;
color:#333;
font-weight:bold;

}






/* HERO */


.hero{

height:520px;

background:
linear-gradient(#0005,#0005),
url("../assets/images/hero.jpg");

background-size:cover;
background-position:center;

display:flex;
justify-content:center;
align-items:center;

text-align:center;
color:white;

}



.hero h2{

font-family:'Cormorant Garamond';
font-size:65px;

}



.hero p{

font-size:22px;
margin:15px;

}



.hero button{

background:#f7b6c8;
border:none;
color:white;

padding:15px 45px;

border-radius:40px;

font-size:18px;

}









/* CATEGORY */


#categories,
#products{

padding:40px 7%;

}



.category-card-box{

background:white;
border-radius:35px;
padding:25px;
box-shadow:0 15px 40px #f7b6c855;

}



#categorySelect{

width:100%;

padding:15px;

border-radius:20px;

border:2px solid #f7b6c8;

font-family:'Cairo';

margin-bottom:25px;

}




.category-details{

display:flex;

align-items:center;

gap:25px;

background:#fff7fa;

border-radius:30px;

padding:20px;

}



.category-details img{

width:140px;
height:140px;

object-fit:cover;

border-radius:25px;

}


.category-details h3{

font-size:28px;

color:#d987a0;

}



.category-details p{

line-height:2;

}









/* ===== PRODUCTS ===== */


#products h2,
.section-title{

text-align:center;

font-size:32px;

color:#111;

margin-bottom:30px;

}

.products-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

}

.product-card{

background:white;

border-radius:30px;

overflow:hidden;

text-align:center;

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

padding-bottom:15px;

transition:.3s;

}



.product-card:hover{

transform:translateY(-5px);

}





.product-card img{

width:100%;

height:340px;

object-fit:cover;

}





.product-card h3{

font-size:22px;

margin-top:15px;

color:#222;

}





.product-card p{

color:#d987a0;

font-size:20px;

font-weight:bold;

margin:8px;

}





.product-card button{

background:linear-gradient(
135deg,
#d63384,
#ff85a2
);


color:white;

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

font-size:15px;

font-weight:bold;


padding:12px 25px;


border:none;

border-radius:40px;


cursor:pointer;


box-shadow:0 8px 20px #d987a055;


transition:.3s;

}





.product-card button:hover{

transform:scale(1.05);

}




/* MODALS */


.modal{


display:none;


position:fixed;


inset:0;


background:#0008;


justify-content:center;


align-items:center;


z-index:999;


}





.modal-content{


background:white;


width:430px;


max-height:90vh;


overflow:auto;


border-radius:35px;


padding:35px;


text-align:center;


position:relative;


box-shadow:0 20px 60px #0003;


}


.close{


position:absolute;


left:20px;


top:20px;


width:40px;

height:40px;


border-radius:50%;


border:none;


background:#f7b6c8;


color:white;


font-size:25px;


}





.modal-content img{


width:230px;


height:280px;


object-fit:cover;


border-radius:25px;


}





.modal-content select,
.modal-content input{


width:100%;


padding:14px;


border-radius:15px;


border:1px solid #ddd;


margin:10px 0;


}





#addToCart,
#reserveOrder{


width:100%;


padding:15px;


border:none;


border-radius:30px;


background:#25D366;


color:white;


font-size:18px;


}





/* CART */


#cartModal .modal-content{


width:520px;


}


#cartContainer{


margin-top:20px;


}






.delete-btn{


background:#ff6b81;


border:none;


color:white;


border-radius:20px;


padding:8px 15px;


}




.total-box{


background:#fff1f5;


border-radius:25px;


padding:20px;


margin-top:20px;


}





#continueShopping{


width:100%;


padding:13px;


margin-top:15px;


border-radius:30px;


background:white;


border:2px solid #f7b6c8;


color:#d987a0;


}


/* CONTACT */


.contact-section{


margin-top:50px;


padding:50px;


background:#f7b6c8;


text-align:center;


color:white;


}




.social-icons{


display:flex;


justify-content:center;


gap:25px;


margin-top:20px;


}


.social-icons a{

width:55px;
height:55px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

background:white;

transition:.3s;

}

.social-icons i{

font-size:30px;

}



/* Instagram */

.social-icons a:nth-child(1) i{

color:#E1306C;

}



/* TikTok */

.social-icons a:nth-child(2) i{

color:#000;

text-shadow:
2px 2px #25F4EE,
-2px -2px #FE2C55;

}



/* WhatsApp */

.social-icons a:nth-child(3) i{

color:#25D366;

}





.social-icons a:hover{

transform:translateY(-5px);

}

/* ===== FINAL MOBILE RESPONSIVE ===== */

@media(max-width:700px){


body{

font-size:14px;

}


/* HEADER */

.top-header{

height:70px;

padding:0 15px;

}


.logo{

font-size:38px;

}


.header-actions{

gap:8px;

}


.whatsapp-icon,
.cart-icon,
.account-icon{

width:42px;

height:42px;

font-size:17px;

}





/* NAV */

.main-nav{

gap:15px;

padding:12px;

overflow-x:auto;

}




/* HERO */

.hero{

height:420px;

}


.hero h2{

font-size:42px;

}


.hero p{

font-size:16px;

}





/* CATEGORY + PRODUCTS */

#categories,
#products{

padding:25px 15px;

}



.category-details{

flex-direction:column;

text-align:center;

}



.category-details img{

width:110px;

height:110px;

}





/* PRODUCTS */

#productsContainer.products-grid{

display:grid;

grid-template-columns:repeat(2,minmax(0,1fr));

gap:12px;

width:100%;

}




#productsContainer .product-card{

width:100%;

border-radius:20px;

}



#productsContainer .product-slider{

height:190px;

}


#productsContainer .product-card h3{

font-size:15px;

}



#productsContainer .product-card p{

font-size:14px;

}



#productsContainer .product-card button{

width:90%;

font-size:12px;

padding:10px 3px;

}





/* MODAL */


.modal-content{

width:92%;

padding:25px;

border-radius:25px;

}



.modal-content img{

width:180px;

height:220px;

}



.close{

width:36px;

height:36px;

font-size:20px;

}




#cartModal .modal-content{

width:94%;

}





/* CART */


.cart-item img{

width:120px;

height:140px;

}




.cart-item h3{

font-size:18px;

}




@media(max-width:700px){

.cart-item p:nth-of-type(1),
.cart-item p:nth-of-type(2),
.cart-item p:nth-of-type(3){

font-size:11px;

padding:6px 8px;

margin:3px;

}

}




.delete-btn{

width:40px;

height:40px;

padding:8px;

border-radius:50%;

}




/* زر + */

.qtyPlus{

width:40px !important;

height:40px !important;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

padding:0 !important;

}





}


html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}
#cartNotify{

position:absolute;

top:-5px;

right:-5px;

background:#ff4d6d;

color:white;

width:22px;

height:22px;

border-radius:50%;

font-size:12px;

display:none;

align-items:center;

justify-content:center;

font-weight:bold;

}


.product-description{

color:#000000;
font-size:16px;
margin:8px;

}




.deleteProduct{

width:45px !important;
height:45px !important;

min-width:45px;

border-radius:50%;

display:none;

align-items:center;
justify-content:center;

border:none;

font-size:28px !important;

font-weight:bold;

cursor:pointer;

margin:5px;

color:white;

padding:0 !important;

}

.deleteProduct{

background:#ff3b30;

}



.cart-item h3{

font-size:14px;

}


.delete-btn{

padding:8px;
width:40px;
height:40px;
border-radius:50%;

}


.qtyPlus{

width:40px !important;
height:40px !important;


align-items:center;
justify-content:center;

background:#00bfff;

color:white;

border-radius:50%;

font-size:25px;

font-weight:bold;

line-height:1;

padding:0 !important;

margin:5px;

cursor:pointer;

box-sizing:border-box;
display:flex;

}



/* ===== CART PROFESSIONAL VERTICAL CARD ===== */

#cartContainer{

    margin-top:20px;

    display:flex;

    flex-direction:column;

    gap:18px;

}





/* صورة المنتج */

.cart-item img{

    width:150px;

    height:170px;

    object-fit:cover;

    border-radius:25px;

    margin-bottom:12px;

}





/* كارت المنتج داخل السلة */

.cart-item{

    position:relative;

    background:#f7b6c8;

    border-radius:25px;

    padding:20px;

    margin-bottom:20px;

    box-shadow:0 10px 30px #0001;

    text-align:center;

}



/* الصورة */

.cart-item img{

    width:140px;

    height:160px;

    object-fit:cover;

    border-radius:22px;

    margin-bottom:15px;

}



/* اسم المنتج */

.cart-item h3{

    font-size:21px;

    color:#222;

    margin-bottom:15px;

}



/* اللون والحجم والكمية بسطر واحد */

.cart-item p:nth-of-type(1),
.cart-item p:nth-of-type(2),
.cart-item p:nth-of-type(3){

display:inline-flex;

align-items:center;

justify-content:center;

background:#f8f8f8;

color:#111;

padding:6px 12px;

border-radius:20px;

font-size:13px;

margin:4px;

font-weight:600;

border:1px solid #eee;

white-space:nowrap;

}

/* السعر */

.cart-item p:last-of-type{


    display:block;

    margin-top:15px;

    background:#fff0f5;

    color:#d987a0;

    font-size:18px;

    font-weight:bold;

    border-radius:18px;

    padding:12px;


}



/* زر الحذف */

.delete-btn{


    position:absolute;

    top:12px;

    left:12px;


    width:42px;

    height:42px;


    border-radius:50%;


    border:none;


    background:#ff5c7a;


    color:white;


    font-size:20px;


    display:flex;

    align-items:center;

    justify-content:center;


    cursor:pointer;


    box-shadow:0 5px 15px #ff5c7a55;


}



/* بوكس المجموع */

.total-box{


    margin-top:25px;


    background:#fff1f5;


    border-radius:30px;


    padding:25px;


    text-align:center;


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


}



.total-box p{

    margin:10px;

    color:#333;

}



#cartDeliveryTotal{

    color:#d987a0;

    font-weight:bold;

}



#cartFinalTotal{

    color:#d987a0;

    font-size:25px;

    font-weight:bold;

}



/* زر الحجز */

#reserveOrder{

    margin-top:25px;

}


/* ترتيب زر الإضافة + الازرار */

.product-controls{

display:flex;

justify-content:center;

align-items:center;

gap:10px;

width:100%;

}


/* زر + */

.qtyPlus{

height:35px !important;

width:60% !important;

max-width:180px;

display:flex;

align-items:center;

justify-content:center;


background:#00c3ff;


color:white;


border-radius:40px;


font-size:25px;


font-weight:bold;


cursor:pointer;


padding:0 !important;


margin:0;


box-shadow:0 8px 20px #25D36655;


}



/* زر X */

.removeProduct{

height:35px !important;


width:45px !important;

min-width:45px !important;

max-width:45px !important;


flex:0 0 45px;


border-radius:50%;


background:#ff3b30;


color:white;


border:none;


font-size:18px;


display:flex;


align-items:center;


justify-content:center;


padding:0 !important;


margin:0;


box-shadow:0 8px 20px #ff3b3055;


}



/* نخليهم تحت زر اضافة السلة */

.cart-action{

display:flex;

flex-direction:column;

align-items:center;

gap:10px;

}


/* زر اضافة للسلة */

.openProduct{

width:90% !important;

height:45px;

}
/* ===== INSTALL APP BUTTON ===== */


.install-btn{


display:flex;

align-items:center;

justify-content:center;

gap:12px;


background:linear-gradient(
135deg,
#d63384,
#ff85a2
);

color:white;


border:none;


padding:16px 35px;


border-radius:50px;


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


font-size:18px;


font-weight:bold;


cursor:pointer;


margin-top:25px;


box-shadow:

0 10px 30px #d987a077;


transition:.3s;


position:relative;


overflow:hidden;


}


/* ===== INSTALL APP BUTTON STYLE ===== */

#installApp.install-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;


    background:linear-gradient(
        135deg,
        #111,
        #00bfffe1
    );


    color:white;


    border:none;


    padding:16px 40px;


    border-radius:50px;


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


    font-size:18px;


    font-weight:700;


    cursor:pointer;


    margin:25px auto 0;


    box-shadow:
    0 10px 30px rgba(214,51,132,.45);


    transition:.3s;


    position:relative;

    overflow:hidden;

}



#installApp.install-btn:hover{


    transform:translateY(-5px) scale(1.05);


    box-shadow:
    0 15px 45px rgba(214,51,132,.65);


}



/* النص */

#installApp.install-btn span{

    color:white;

}



/* ايقونة الموبايل */

#installApp.install-btn i:first-child{

    font-size:25px;

}



/* ايقونة التحميل */

#installApp .download-icon{


    font-size:22px;


    animation:downloadMove 1.4s infinite;


}



@keyframes downloadMove{


    0%{

        transform:translateY(-4px);

    }


    50%{

        transform:translateY(5px);

    }


    100%{

        transform:translateY(-4px);

    }


}



/* تأثير لمعان */

#installApp.install-btn::before{


    content:"";


    position:absolute;


    width:120px;

    height:120px;


    background:white;


    opacity:.15;


    border-radius:50%;


    top:-60px;


    right:-50px;


}
.scroll-top{
position:fixed;
bottom:25px;
left:25px;
width:40px;
height:40px;
border:none;
border-radius:90%;
background:#00bfffe1;
color:white;
font-size:15px;
cursor:pointer;
box-shadow:0 8px 25px #0003;
z-index:999;
transition:.3s;
}
.product-slider{
    position:relative;
}


.product-slider .prev-img,
.product-slider .next-img{

position:absolute !important;

top:50% !important;

font-size:60px !important;

font-family:Arial, sans-serif !important;

font-weight:10 !important;

line-height:0.5 !important;

color:white !important;

background:transparent !important;

border:none !important;

box-shadow:none !important;

padding:0 !important;

margin:-30 !important;

width:auto !important;

height:auto !important;

min-width:auto !important;

z-index:999 !important;

transform:translateY(-50%) !important;

text-shadow:0 3px 10px black !important;

}


.product-slider .prev-img{

right:10px !important;

}


.product-slider .next-img{

left:10px !important;

}
/* تثبيت ارتفاع الكروت */
.product-card{

display:flex;

flex-direction:column;

height:100%;

}


/* السلايدر والصورة */
.product-slider{

height:340px;

flex-shrink:0;

}


/* الصورة */
.product-main-img{

height:100% !important;

}



/* اسم المنتج */

.product-card h3{

min-height:55px;

display:flex;

align-items:center;

justify-content:center;

}



/* السعر */

.product-card p{

min-height:35px;

}



/* الوصف */

.product-description{

height:65px;

overflow:hidden;

display:-webkit-box;

-webkit-line-clamp:3;

-webkit-box-orient:vertical;

}



/* يخلي الازرار دائماً تحت */

.cart-action{

margin-top:auto;

padding-top:15px;

}




.openProduct{

height:45px !important;

}



/* مكان ازرار + و X */

.product-controls{

height:10px;

}
/* ضبط كروت المنتجات بدون تغيير JS */

.product-card{

display:flex;

flex-direction:column;

padding-bottom:10px;

min-height:390px;

}



/* الصورة */

.product-slider{

height:210px;

}




.product-card h3{

font-size:15px;

margin:8px 5px 2px;

line-height:1.4;

min-height:auto;

}




.product-card p{

font-size:15px;

margin:2px 5px;

line-height:1.3;

}




.product-description{

font-size:12px;

margin:3px 8px;

line-height:1.4;

height:35px;

overflow:hidden;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

}





.cart-action{

margin-top:auto;

padding:8px 10px 0;

gap:8px;

}





.openProduct{

height:40px !important;

width:95% !important;

font-size:12px !important;

padding:8px !important;

}




.product-controls{

height:40px;

}





/* موبايل */

@media(max-width:700px){


.product-card{

min-height:330px;

border-radius:18px;

}



.product-slider{

height:160px;

}



.product-card h3{

font-size:13px;

margin:6px 3px 1px;

}



.product-card p{

font-size:13px;

margin:1px;

}



.product-description{

font-size:11px;

height:30px;

margin:2px 5px;

}



.openProduct{

height:36px !important;

font-size:11px !important;

}



}
.img-zoom-modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.img-zoom-modal img{
  max-width: 90%;
  max-height: 80%;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255,255,255,0.2);
}

#closeZoom{
  position: absolute;
  top: 50px;
  left: 50px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}
/* ================= SPLASH ================= */
#splashScreen{
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  color: #F7B6C8;
}

#splashScreen img{
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 18px;
  margin-bottom: 15px;
  animation: pulse 1.2s infinite;
}

@keyframes pulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.1);}
  100%{transform:scale(1);}
}

/* Loader bar */
.loader-bar{
  width: 180px;
  height: 5px;
  background: #eee;
  border-radius: 10px;
  overflow: hidden;
  margin: 10px 0;
}

.loader-fill{
  width: 0%;
  height: 100%;
  background: #F7B6C8;
  animation: load 1.2s infinite;
}

@keyframes load{
  0%{width:0%;}
  50%{width:80%;}
  100%{width:0%;}
}

/* ================= OFFLINE ================= */
#offlineScreen{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  color: white;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  text-align: center;
}

.offline-box{
  padding: 20px;
  width: 80%;
}

.offline-bar{
  width: 100%;
  height: 6px;
  background: #333;
  border-radius: 10px;
  margin-top: 15px;
  overflow: hidden;
}

.offline-bar-fill{
  width: 100%;
  height: 100%;
  background: #ff4d4d;
  animation: blink 1s infinite;
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0.3;}
  100%{opacity:1;}
}

/* ================= TOAST ================= */
#toast{
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  display: none;
  z-index: 100000;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}