/*
Theme Name: Ideal Food
Theme URI: https://idealfood.ma
Author: Ideal Food Tiznit
Author URI: https://idealfood.ma
Description: تيم مخصص لمطعم Ideal Food بتزنيت — منيو كتاب تفاعلي (فليپبوك)، ألبوم صور، طلب واتساب مباشر.
Version: 1.0.0
License: Proprietary
Text Domain: idealfood
*/

/* Admin bar spacing fix */
html { margin-top: 0 !important; }
.admin-bar header { top: 32px; }
@media screen and (max-width: 782px){
  .admin-bar header { top: 46px; }
}

:root{
  --green:#7CB82B;
  --green-dark:#5C9420;
  --navy:#1F2B26;
  --navy-2:#26332D;
  --orange:#F26F21;
  --cream:#FBF9F4;
  --paper:#ffffff;
  --ink:#20241f;
  --muted:#6b7770;
  --radius:18px;
  --shadow: 0 18px 40px -18px rgba(31,43,38,0.35);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Tajawal', sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,.brand{font-family:'Cairo', sans-serif;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1140px; margin:0 auto; padding:0 22px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.5px;
  color:var(--green-dark); background:rgba(124,184,43,0.12);
  padding:6px 14px; border-radius:999px; margin-bottom:14px;
}
.eyebrow::before{content:"●"; color:var(--orange); font-size:8px;}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:1000;
  background:rgba(31,43,38,0.97);
  backdrop-filter: blur(8px);
  box-shadow:0 4px 20px rgba(0,0,0,0.15);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 22px; max-width:1140px; margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  color:#fff; font-weight:800; font-size:20px;
}
.brand img{width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid var(--green);}
.navlinks{display:flex; align-items:center; gap:26px;}
.navlinks a{
  color:#e7ece8; font-weight:500; font-size:15px;
  position:relative; padding:6px 2px; transition:color .2s;
}
.navlinks a:hover{color:var(--green);}
.navlinks a::after{
  content:""; position:absolute; right:0; bottom:0; width:0; height:2px;
  background:var(--green); transition:width .25s;
}
.navlinks a:hover::after{width:100%;}
.nav-cta{
  background:linear-gradient(135deg, var(--green), var(--green-dark));
  color:#fff !important; padding:10px 20px; border-radius:999px;
  font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px;
  box-shadow:0 8px 20px -6px rgba(124,184,43,0.6);
  transition:transform .2s;
}
.nav-cta:hover{transform:translateY(-2px);}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:6px;}
.burger span{width:24px; height:2px; background:#fff; border-radius:2px;}
.mobile-menu{display:none; flex-direction:column; background:var(--navy-2); padding:10px 22px 20px;}
.mobile-menu a{color:#e7ece8; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.08); font-weight:500;}
.mobile-menu.open{display:flex;}

/* ---------- Hero Slideshow ---------- */
.hero{position:relative; height:78vh; min-height:520px; max-height:760px; overflow:hidden;}
.slides{position:relative; height:100%;}
.slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease;
  background-size:cover; background-position:center;
}
.slide.active{opacity:1;}
.slide::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,26,20,0.35) 0%, rgba(15,20,15,0.55) 55%, rgba(15,20,15,0.88) 100%);
}
.hero-content{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; text-align:center;
  color:#fff; padding:0 20px 68px; z-index:5;
}
.hero-content h1{
  font-size:clamp(32px, 5.5vw, 58px); font-weight:900; line-height:1.15;
  text-shadow:0 4px 24px rgba(0,0,0,0.35);
}
.hero-content h1 em{font-style:normal; color:var(--green);}
.hero-content p{
  margin-top:14px; font-size:clamp(15px,2vw,19px); color:#e9efe9; max-width:560px;
  font-weight:400;
}
.hero-actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; justify-content:center;}
.btn{
  padding:15px 30px; border-radius:999px; font-weight:800; font-size:15px;
  display:inline-flex; align-items:center; gap:10px; transition:.25s; border:2px solid transparent;
}
.btn-primary{background:var(--green); color:#fff; box-shadow:0 12px 26px -8px rgba(124,184,43,0.7);}
.btn-primary:hover{background:var(--green-dark); transform:translateY(-3px);}
.btn-ghost{border-color:rgba(255,255,255,0.55); color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,0.12); border-color:#fff;}
.hero-dots{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:6;}
.hero-dots span{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.4); cursor:pointer; transition:.3s;}
.hero-dots span.active{background:var(--green); width:26px; border-radius:6px;}

/* ---------- Info strip ---------- */
.info-strip{
  background:var(--navy); color:#fff; padding:16px 0;
}
.info-strip .wrap{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:14px;
}
.info-item{display:flex; align-items:center; gap:10px; opacity:.92;}
.info-item b{color:var(--green); font-weight:800;}

/* ---------- Sections generic ---------- */
section{padding:90px 0;}
.section-head{text-align:center; max-width:640px; margin:0 auto 50px;}
.section-head h2{font-size:clamp(28px,4vw,42px); font-weight:800; color:var(--navy);}
.section-head h2 em{font-style:normal; color:var(--green-dark);}
.section-head p{margin-top:12px; color:var(--muted); font-size:16px;}

/* ---------- Menu Gallery (flipbook / zoom) ---------- */
.menu-gallery{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.menu-card{
  position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer;
  box-shadow:var(--shadow); aspect-ratio:2/3; background:var(--navy);
  transition:transform .35s ease;
}
.menu-card:hover{transform:translateY(-8px) rotate(-0.4deg);}
.menu-card img{width:100%; height:100%; object-fit:cover; transition:transform .5s;}
.menu-card:hover img{transform:scale(1.06);}
.menu-card .tag{
  position:absolute; top:16px; right:16px; background:var(--orange); color:#fff;
  font-weight:800; font-size:13px; padding:6px 14px; border-radius:999px; z-index:2;
}
.menu-card .zoom-hint{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(15,20,15,0); opacity:0; transition:.3s; z-index:2;
}
.menu-card:hover .zoom-hint{opacity:1; background:rgba(15,20,15,0.28);}
.zoom-hint span{
  background:#fff; color:var(--navy); font-weight:800; font-size:14px;
  padding:10px 20px; border-radius:999px; display:flex; align-items:center; gap:8px;
}

/* ---------- Flipbook (real page-turn, two-page spread) ---------- */
.fb-wrap{max-width:760px; margin:0 auto; user-select:none;}
.book-stage{
  position:relative; aspect-ratio:1266/953; border-radius:6px;
  perspective:2800px; overflow:visible;
}
.book{
  position:relative; width:100%; height:100%; border-radius:6px;
  box-shadow:var(--shadow), 0 0 0 1px rgba(0,0,0,0.06);
  background:var(--navy); overflow:hidden;
}
.book::after{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:1px;
  background:rgba(0,0,0,0.35); z-index:3; pointer-events:none;
}
.page-shadow-l, .page-shadow-r{
  position:absolute; top:0; bottom:0; width:26px; z-index:5; pointer-events:none;
}
.page-shadow-l{right:0; background:linear-gradient(to left, rgba(0,0,0,0.28), transparent);}
.page-shadow-r{left:0; background:linear-gradient(to right, rgba(0,0,0,0.28), transparent); display:none;}
.page-current{position:absolute; inset:0; display:flex;}
.page-current .half{width:50%; height:100%; background-size:cover; background-position:center; background-color:#141b16; position:relative;}
.page-current .half.blank{background-image:none !important; background:radial-gradient(circle at 50% 45%, #26332d, #141b16 75%); display:flex; align-items:center; justify-content:center;}
.page-current .half.blank::after{content:"IDEAL FOOD"; font-family:'Cairo',sans-serif; font-weight:800; color:rgba(124,184,43,0.35); font-size:14px; letter-spacing:2px;}
.page-turn{
  position:absolute; inset:0; transform-style:preserve-3d; display:flex;
  transform-origin:right center; transition:transform .85s cubic-bezier(.645,.045,.355,1), opacity 0s linear .85s;
  transform:rotateY(0deg); opacity:0; z-index:4; pointer-events:none;
}
.page-turn.animating{pointer-events:none;}
.page-turn .face{
  position:absolute; inset:0; backface-visibility:hidden; overflow:hidden; display:flex;
}
.page-turn .face .half{width:50%; height:100%; background-size:cover; background-position:center; background-color:#141b16; position:relative; display:flex; align-items:center; justify-content:center;}
.page-turn .face .half.blank{background-image:none !important; background:radial-gradient(circle at 50% 45%, #26332d, #141b16 75%);}
.page-turn .face .half.blank::after{content:"IDEAL FOOD"; font-family:'Cairo',sans-serif; font-weight:800; color:rgba(124,184,43,0.35); font-size:14px; letter-spacing:2px;}
.page-turn .face.back{transform:rotateY(180deg);}
.page-turn.flip-fwd{transform:rotateY(-180deg);}
.page-turn.flip-back-init{transform:rotateY(-180deg); transition:none;}
.page-turn.flip-back{transform:rotateY(0deg);}
.click-zone{position:absolute; top:0; bottom:0; width:50%; z-index:6; cursor:pointer;}
.click-zone.left{left:0;}
.click-zone.right{right:0;}
.stage-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px;
  border-radius:50%; background:rgba(255,255,255,0.92); color:var(--navy); border:none;
  font-size:18px; cursor:pointer; z-index:7; box-shadow:0 8px 18px rgba(0,0,0,0.18);
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.stage-arrow:hover{background:var(--green); color:#fff;}
.stage-arrow:disabled{opacity:.3; cursor:default; pointer-events:none;}
.sa-left{right:-18px;}
.sa-right{left:-18px;}
.agrandir-btn{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:7;
  background:rgba(20,26,20,0.72); color:#fff; border:none; padding:9px 18px;
  border-radius:999px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px;
  cursor:pointer; backdrop-filter:blur(4px);
}
.agrandir-btn:hover{background:var(--green);}
.fb-footer{
  display:flex; align-items:center; justify-content:center; gap:16px; margin-top:22px;
}
.fb-nav-btn{
  width:38px; height:38px; border-radius:50%; border:1.5px solid #dfe4dc; background:#fff;
  color:var(--navy); font-size:16px; cursor:pointer; transition:.2s;
  display:flex; align-items:center; justify-content:center;
}
.fb-nav-btn:hover:not(:disabled){background:var(--green); border-color:var(--green); color:#fff;}
.fb-nav-btn:disabled{opacity:.3; cursor:default;}
.fb-dots{display:flex; gap:7px;}
.fb-dot{width:7px; height:7px; border-radius:50%; background:#d8ddd3; cursor:pointer; transition:.25s;}
.fb-dot.active{background:var(--green-dark); width:20px; border-radius:5px;}
.fb-counter{font-size:14px; font-weight:700; color:var(--navy); min-width:150px; text-align:center;}
.fb-thumbs{
  display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap;
}
.fb-thumb{
  width:78px; height:59px; border-radius:6px; overflow:hidden; cursor:pointer;
  opacity:.4; transition:.25s; box-shadow:0 4px 10px rgba(0,0,0,0.15); border:2px solid transparent;
}
.fb-thumb img{width:100%; height:100%; object-fit:cover;}
.fb-thumb:hover{opacity:.75;}
.fb-thumb.active{opacity:1; border-color:var(--green);}
@media(max-width:480px){
  .fb-wrap{max-width:100%;}
  .sa-left{right:-8px;}
  .sa-right{left:-8px;}
  .stage-arrow{width:36px; height:36px; font-size:15px;}
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(10,14,10,0.95); z-index:3000;
  display:none; align-items:center; justify-content:center; flex-direction:column;
  padding:30px;
}
.lightbox.open{display:flex;}
.lightbox img{max-height:82vh; max-width:min(92vw,700px); border-radius:12px; box-shadow:0 30px 60px rgba(0,0,0,0.5); touch-action:pinch-zoom;}
.lightbox-close{
  position:absolute; top:22px; left:22px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.12); color:#fff; font-size:22px; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,0.12); color:#fff; font-size:22px; border:none; cursor:pointer;
}
.lightbox-nav.prev{right:22px;}
.lightbox-nav.next{left:22px;}
.lightbox-caption{color:#cfd8d0; margin-top:16px; font-size:14px;}

/* ---------- Gallery strip (photos) ---------- */
.photo-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.photo-strip a{border-radius:14px; overflow:hidden; aspect-ratio:1/1; box-shadow:var(--shadow);}
.photo-strip img{width:100%; height:100%; object-fit:cover; transition:transform .5s;}
.photo-strip a:hover img{transform:scale(1.08);}

/* ---------- WhatsApp CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg, var(--green-dark), var(--green) 60%, #96cf4c);
  color:#fff; text-align:center; position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; width:400px; height:400px; border-radius:50%;
  background:rgba(255,255,255,0.08); top:-180px; left:-120px;
}
.cta-band h2{font-size:clamp(26px,4vw,38px); font-weight:900;}
.cta-band p{margin-top:12px; opacity:.95; font-size:16px; max-width:480px; margin-inline:auto;}
.cta-band .btn-primary{background:#fff; color:var(--green-dark); margin-top:26px; box-shadow:0 14px 30px -8px rgba(0,0,0,0.35);}
.cta-band .btn-primary:hover{background:var(--navy); color:#fff;}

/* ---------- Hours + Delivery ---------- */
.two-col{display:grid; grid-template-columns:1.1fr 0.9fr; gap:30px;}
.panel{
  background:var(--paper); border-radius:var(--radius); padding:34px;
  box-shadow:var(--shadow);
}
.panel h3{font-size:22px; color:var(--navy); margin-bottom:18px; display:flex; align-items:center; gap:10px;}
.hours-table{width:100%; border-collapse:collapse;}
.hours-table td{padding:12px 4px; border-bottom:1px solid #eef1ec; font-size:15px;}
.hours-table td:first-child{color:var(--muted);}
.hours-table td:last-child{font-weight:800; color:var(--navy); text-align:left;}
.hours-table tr.today td{color:var(--green-dark); font-weight:800;}
.badge-open{
  display:inline-flex; align-items:center; gap:6px; background:rgba(124,184,43,0.14);
  color:var(--green-dark); font-weight:800; font-size:13px; padding:6px 14px; border-radius:999px; margin-bottom:16px;
}
.badge-open::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--green-dark); animation:pulse 1.6s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(124,184,43,0.5);}70%{box-shadow:0 0 0 8px rgba(124,184,43,0);}100%{box-shadow:0 0 0 0 rgba(124,184,43,0);}}

.delivery-rows{display:flex; flex-direction:column; gap:16px;}
.delivery-row{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:var(--cream); border-radius:12px;}
.delivery-row .label{display:flex; align-items:center; gap:10px; font-weight:600; color:var(--navy);}
.delivery-row .val{font-weight:800; color:var(--green-dark);}

/* ---------- Location ---------- */
.location{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:stretch;}
.map-frame{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); min-height:340px;}
.map-frame iframe{width:100%; height:100%; min-height:340px; border:0;}
.loc-panel{background:var(--navy); color:#fff; border-radius:var(--radius); padding:36px; display:flex; flex-direction:column; justify-content:center;}
.loc-panel h3{font-size:24px; margin-bottom:14px;}
.loc-line{display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; font-size:15px; color:#dbe4dd;}
.loc-line b{color:#fff;}
.loc-panel .btn-primary{margin-top:10px; align-self:flex-start;}

/* ---------- Footer ---------- */
footer{background:var(--navy); color:#c9d2cb; padding:60px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.1);}
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.footer-brand img{width:48px; height:48px; border-radius:50%;}
.footer-brand span{color:#fff; font-weight:800; font-size:20px;}
footer h4{color:#fff; font-size:15px; margin-bottom:16px; font-weight:700;}
footer a{display:block; padding:6px 0; font-size:14px; color:#c9d2cb; transition:.2s;}
footer a:hover{color:var(--green);}
.social-row{display:flex; gap:12px; margin-top:6px;}
.social-row a{
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; padding:0; font-size:16px;
}
.social-row a:hover{background:var(--green);}
.copyright{text-align:center; padding-top:22px; font-size:13px; color:#8b968f;}

/* ---------- WhatsApp Floating Button ---------- */
.wa-float{
  position:fixed; bottom:24px; left:24px; z-index:900;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -6px rgba(0,0,0,0.4); animation:floatBob 2.6s ease-in-out infinite;
}
@keyframes floatBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.wa-float svg{width:30px; height:30px;}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .navlinks{display:none;}
  .burger{display:flex;}
  .menu-gallery{grid-template-columns:repeat(2,1fr);}
  .photo-strip{grid-template-columns:repeat(3,1fr);}
  .two-col, .location{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; gap:26px;}
}
.ltr-num{direction:ltr; unicode-bidi:isolate; display:inline-block;}
@media(max-width:560px){
  .photo-strip{grid-template-columns:repeat(2,1fr);}
  .menu-gallery{grid-template-columns:1fr; max-width:340px; margin:0 auto;}
  section{padding:64px 0;}
  .hero{height:88vh;}
}