/* ==========================================
   Elmilia DELIVERY Dz
   Version 2.0
========================================== */

:root{

--primary:#00A86B;
--secondary:#009688;
--orange:#ff7a00;
--dark:#1f2937;
--light:#f8fafc;
--white:#ffffff;
--gray:#6b7280;

--shadow:0 10px 30px rgba(0,0,0,.08);

--radius:18px;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--light);

color:var(--dark);

overflow-x:hidden;

line-height:1.8;

}

.container{

width:90%;

max-width:1300px;

margin:auto;

}

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

.header{

background:white;

position:sticky;

top:0;

z-index:1000;

box-shadow:var(--shadow);

}

.header .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

.hero{
    padding:90px 0;
    background:
        linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
        url("assets/background.jpg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

align-items:center;

gap:12px;

text-decoration:none;

font-size:28px;

font-weight:800;

color:var(--primary);

}

.logo i{

font-size:35px;

}

nav ul{

display:flex;

list-style:none;

gap:30px;

}

nav a{

text-decoration:none;

color:var(--dark);

font-weight:700;

transition:.3s;

}

nav a:hover,
nav a.active{

color:var(--primary);

}

/* ================= HERO ================= */

.hero{

padding:90px 0;

background:linear-gradient(135deg,#eafff6,#ffffff);

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.badge{

display:inline-block;

background:#dff8ef;

color:var(--primary);

padding:10px 20px;

border-radius:40px;

font-weight:700;

margin-bottom:20px;

}

.hero h1{

font-size:58px;

line-height:1.3;

margin-bottom:25px;

}

.hero p{

font-size:20px;

color:var(--gray);

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:40px;

}

.btn{

background:var(--primary);

padding:16px 36px;

border-radius:12px;

text-decoration:none;

color:white;

font-weight:700;

transition:.3s;

}

.btn:hover{

transform:translateY(-4px);

background:#008f5b;

}

.btn-outline{

padding:16px 36px;

border-radius:12px;

border:2px solid var(--primary);

text-decoration:none;

color:var(--primary);

font-weight:700;

transition:.3s;

}

.btn-outline:hover{

background:var(--primary);

color:white;

}

.hero-image img{

width:100%;

animation:float 4s ease infinite;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

}

.hero-stats{

display:flex;

gap:20px;

}

.hero-stats div{

flex:1;

background:white;

padding:20px;

text-align:center;

border-radius:16px;

box-shadow:var(--shadow);

}

.hero-stats h2{

font-size:32px;

color:var(--primary);

}

/* ================= SECTION TITLE ================= */

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title span{

display:inline-block;

background:#dff8ef;

color:var(--primary);

padding:8px 18px;

border-radius:30px;

font-weight:700;

margin-bottom:15px;

}

.section-title h2{

font-size:42px;

margin-bottom:15px;

}

.section-title p{

font-size:18px;

color:var(--gray);

}
/* ================= SERVICES ================= */

.services,
.features,
.cta{

padding:90px 0;

}

.service-grid,
.features-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.service-card,
.feature-box{

background:var(--white);

padding:35px;

border-radius:20px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}

.service-card:hover,
.feature-box:hover{

transform:translateY(-10px);

}

.service-card i,
.feature-box i{

font-size:50px;

color:var(--primary);

margin-bottom:20px;

}

.service-card h3,
.feature-box h3{

font-size:24px;

margin-bottom:15px;

}

.service-card p,
.feature-box p{

color:var(--gray);

}

/* ================= CTA ================= */

.cta{

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:white;

text-align:center;

}

.cta h2{

font-size:46px;

margin-bottom:20px;

}

.cta p{

font-size:20px;

margin-bottom:35px;

}

/* ================= FOOTER ================= */

footer{

background:#111827;

color:white;

padding:70px 0 20px;

}

.footer-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:40px;

}

.footer-grid h3{

margin-bottom:20px;

}

.footer-grid ul{

list-style:none;

}

.footer-grid li{

margin-bottom:10px;

}

.footer-grid a{

text-decoration:none;

color:#d1d5db;

transition:.3s;

}

.footer-grid a:hover{

color:white;

}

/* ================= FLOAT BUTTONS ================= */

.whatsapp-btn{

position:fixed;

left:25px;

bottom:25px;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:white;

font-size:34px;

text-decoration:none;

box-shadow:0 10px 25px rgba(0,0,0,.25);

z-index:999;

transition:.3s;

}

.whatsapp-btn:hover{

transform:scale(1.1);

}

#topBtn{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

border:none;

border-radius:50%;

background:var(--primary);

color:white;

font-size:22px;

cursor:pointer;

display:none;

box-shadow:var(--shadow);

}

/* ================= ORDER PAGE ================= */

.order{

padding:80px 0;

}

.order form{

background:white;

max-width:900px;

margin:auto;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

}

input,
select,
textarea{

width:100%;

padding:15px;

border:1px solid #ddd;

border-radius:12px;

margin-top:8px;

margin-bottom:20px;

font-size:16px;

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

}

textarea{

resize:vertical;

min-height:150px;

}

/* ================= RESPONSIVE ================= */

@media(max-width:992px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

flex-wrap:wrap;

}

}

@media(max-width:768px){

.header .container{

flex-direction:column;

gap:20px;

}

nav ul{

flex-direction:column;

text-align:center;

gap:15px;

}

.hero h1{

font-size:38px;

}

.section-title h2{

font-size:30px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn,
.btn-outline{

width:220px;

text-align:center;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.whatsapp-btn{

left:15px;

bottom:15px;

width:55px;

height:55px;

font-size:28px;

}

#topBtn{

right:15px;

bottom:15px;

width:50px;

height:50px;

font-size:18px;

}

}
.logo img{
    width:50px;
    height:50px;
    object-fit:contain;
}

.hero{
    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("assets/background.jpg.png");

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

    min-height: 100vh;

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

    color:white;
}
body{
    font-family: 'Poppins', sans-serif;
}

.logo{
    font-family: 'Bebas Neue', sans-serif;
}
/* ================= SHOPS ================= */
.shops{padding:90px 0;background:#f8fafc;}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;}
.shop-card{background:#fff;padding:24px;border-radius:20px;box-shadow:var(--shadow);position:relative;transition:.3s;text-align:center;}
.shop-card:hover{transform:translateY(-6px);}
.shop-icon{font-size:42px;margin-bottom:8px;}
.shop-status{display:inline-block;background:#fff3cd;color:#856404;border-radius:20px;padding:5px 10px;font-size:12px;font-weight:700;margin-bottom:10px;}
.shop-card h3{font-size:20px;margin:8px 0;}
.shop-cat{color:var(--primary);font-weight:700;margin:6px 0;}
.shop-address{color:var(--gray);font-size:14px;min-height:42px;}
.shop-order{border:0;cursor:pointer;margin-top:10px;font-family:'Cairo',sans-serif;}

/* ==========================================
   Elmilia DELIVERY Dz — Premium 3D UI
   يحافظ على جميع الصور الأصلية
========================================== */
:root{
  --primary:#00a86b;
  --primary-dark:#007d52;
  --glass:rgba(255,255,255,.78);
  --glass-border:rgba(255,255,255,.72);
  --shadow-3d:0 24px 60px rgba(15,23,42,.14),0 8px 20px rgba(0,168,107,.08);
}
body{
  background:
    radial-gradient(circle at 10% 5%,rgba(0,168,107,.10),transparent 28%),
    radial-gradient(circle at 90% 15%,rgba(0,150,136,.09),transparent 25%),
    var(--light);
}
.header{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 10px 35px rgba(15,23,42,.08);
  border-bottom:1px solid rgba(255,255,255,.7);
}
.logo img{
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.16));
  transition:transform .35s ease;
}
.logo:hover img{transform:translateY(-3px) rotate(-2deg) scale(1.03);}
.hero{
  position:relative;
  overflow:hidden;
  min-height:650px;
  background:
    linear-gradient(135deg,rgba(0,0,0,.54),rgba(0,80,55,.34)),
    url("assets/background.jpg.png");
  background-size:cover;
  background-position:center;
  box-shadow:inset 0 -80px 100px rgba(0,0,0,.14);
}
.hero:before,.hero:after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.10);filter:blur(2px);
}
.hero:before{width:280px;height:280px;right:-80px;top:80px;}
.hero:after{width:180px;height:180px;left:8%;bottom:-70px;}
.hero-grid{position:relative;z-index:1;}
.hero-text,.hero-image{
  transform-style:preserve-3d;
}
.hero-text{
  color:#fff;
  text-shadow:0 4px 22px rgba(0,0,0,.25);
}
.hero h1{letter-spacing:-1px;text-shadow:0 8px 28px rgba(0,0,0,.32);}
.badge{
  background:rgba(255,255,255,.16);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(12px);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.hero-image img{
  border-radius:30px;
  box-shadow:24px 30px 65px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.2);
  transform:perspective(1100px) rotateY(-7deg) rotateX(3deg) translateZ(20px);
  transition:transform .5s ease,box-shadow .5s ease;
}
.hero-image img:hover{
  transform:perspective(1100px) rotateY(0) rotateX(0) translateZ(35px) scale(1.025);
  box-shadow:30px 40px 80px rgba(0,0,0,.32);
}
.btn{
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 12px 25px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.24);
  transform:translateY(0) translateZ(0);
  transition:transform .25s ease,box-shadow .25s ease;
}
.btn:hover{transform:translateY(-4px);box-shadow:0 18px 35px rgba(0,0,0,.18);}
.service-card,.shop-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(246,250,249,.78));
  border:1px solid rgba(255,255,255,.88);
  box-shadow:var(--shadow-3d);
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
}
.service-card:before,.shop-card:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.65),transparent 42%,rgba(0,168,107,.035));
}
.service-card:hover,.shop-card:hover{
  transform:perspective(900px) translateY(-10px) rotateX(2deg) rotateY(-1deg);
  box-shadow:0 32px 70px rgba(15,23,42,.16),0 12px 25px rgba(0,168,107,.10);
}
.shop-grid{perspective:1400px;}
.shop-card{border-radius:26px;padding:26px;min-height:300px;}
.shop-icon{
  width:76px;height:76px;margin:0 auto 14px;
  display:grid;place-items:center;border-radius:22px;
  background:linear-gradient(145deg,#fff,#e9f8f2);
  box-shadow:inset 5px 5px 12px rgba(0,0,0,.06),8px 12px 24px rgba(0,0,0,.10);
  transform:translateZ(22px);
}
.shop-status{box-shadow:0 8px 18px rgba(133,100,4,.10);}
.shop-card h3,.shop-cat,.shop-address,.shop-order{position:relative;z-index:1;}
.shop-card h3{transform:translateZ(14px);}
.shop-order{width:100%;margin-top:16px;}
.shops{
  background:linear-gradient(180deg,#f8fafc,#eef8f4 55%,#f8fafc);
  position:relative;overflow:hidden;
}
.shops:before{
  content:"";position:absolute;width:520px;height:520px;left:-260px;top:120px;border-radius:50%;
  background:rgba(0,168,107,.055);filter:blur(4px);
}
/* صندوق حساب التوصيل */
#deliveryPriceBox{
  border-radius:22px !important;
  border:1px solid rgba(0,168,107,.16) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(232,250,242,.82)) !important;
  box-shadow:0 18px 42px rgba(0,168,107,.10),inset 0 1px 0 #fff !important;
  transform:translateZ(15px);
}
@media(max-width:800px){
  .hero{min-height:unset;padding:70px 0;}
  .hero-image img{transform:none;}
  .shop-card:hover,.service-card:hover{transform:translateY(-6px);}
}


/* =========================================================
   PREMIUM NAVIGATION — ثابتة ومرئية في كل الصفحات
========================================================= */
.header{
  position:sticky;
  top:0;
  z-index:9999;
  width:100%;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(0,168,107,.12);
  box-shadow:0 8px 30px rgba(15,23,42,.10);
}
.header-inner{
  min-height:78px;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.logo{
  display:flex!important;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  text-decoration:none;
  color:var(--dark)!important;
  font-family:'Poppins','Cairo',sans-serif;
  font-size:20px!important;
  font-weight:800;
}
.logo img{
  width:48px!important;
  height:48px!important;
  object-fit:contain;
  border-radius:14px;
}
.logo b{color:var(--primary);}
.main-nav{
  display:flex!important;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-left:auto;
  overflow:visible;
}
.main-nav a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  min-height:44px;
  padding:9px 16px;
  border-radius:13px;
  text-decoration:none!important;
  color:#263238!important;
  font-family:'Cairo',sans-serif;
  font-weight:800;
  font-size:15px;
  transition:.25s ease;
}
.main-nav a:hover{
  color:var(--primary)!important;
  background:rgba(0,168,107,.08);
  transform:translateY(-1px);
}
.main-nav a.active{
  color:#fff!important;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  box-shadow:0 8px 20px rgba(0,168,107,.22);
}
/* ترتيب صفحة الطلب بشكل أكثر احترافية */
.order{
  min-height:calc(100vh - 78px);
  padding:55px 0 80px;
  background:
    radial-gradient(circle at 10% 10%,rgba(0,168,107,.09),transparent 25%),
    radial-gradient(circle at 90% 20%,rgba(0,150,136,.08),transparent 25%),
    var(--light);
}
.order .section-title{margin-bottom:30px;}
.order .section-title h2{margin-bottom:8px;}
.order form{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(0,168,107,.10);
  box-shadow:0 25px 65px rgba(15,23,42,.12),0 8px 24px rgba(0,168,107,.07);
  border-radius:26px;
}
.order form:before{
  content:"";
  position:absolute;
  width:180px;height:180px;
  left:-90px;top:-90px;
  border-radius:50%;
  background:rgba(0,168,107,.06);
  pointer-events:none;
}
.order form label{
  display:block;
  font-weight:800;
  margin-top:5px;
}
.order form input,.order form select,.order form textarea{
  transition:.2s ease;
  border:1px solid #e2e8f0;
  background:#fbfdff;
}
.order form input:focus,.order form select:focus,.order form textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(0,168,107,.10);
  background:#fff;
}
#deliveryPriceBox{
  background:linear-gradient(135deg,#effcf7,#ffffff)!important;
  border:1px solid rgba(0,168,107,.22)!important;
  box-shadow:0 10px 25px rgba(0,168,107,.07);
}
@media(max-width:768px){
  .header-inner{
    min-height:70px;
    gap:10px;
    padding:10px 0!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .logo{justify-content:center;font-size:17px!important;}
  .logo img{width:42px!important;height:42px!important;}
  .main-nav{
    width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:2px 2px 5px;
    gap:6px;
  }
  .main-nav::-webkit-scrollbar{display:none;}
  .main-nav a{flex:0 0 auto;min-height:40px;padding:7px 13px;font-size:14px;}
  .order{padding-top:35px;}
  .order form{padding:24px 18px;}
}


/* ===== NAVIGATION FINAL FIX ===== */
html, body { margin:0; padding:0; }
.header { display:block !important; visibility:visible !important; opacity:1 !important; position:sticky !important; top:0 !important; z-index:99999 !important; }
.header-inner { display:flex !important; visibility:visible !important; }
.main-nav { display:flex !important; visibility:visible !important; opacity:1 !important; }
.main-nav a { display:flex !important; visibility:visible !important; opacity:1 !important; }
@media (max-width:768px){
  .header-inner { flex-direction:column !important; align-items:stretch !important; }
  .main-nav { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; overflow-x:auto !important; width:100% !important; }
  .main-nav a { flex:0 0 auto !important; }
}