/* ===================================================================
   PAGES — تنسيق الصفحات الجديدة (الحلويات / التوظيف / التواصل)
   بيتحمّل بعد site.css وبيستعمل نفس المتغيرات
   =================================================================== */

body.page{overflow:auto;height:auto;padding-top:var(--barh)}

/* ---- بار التنقّل ---- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;gap:12px;
  padding:0 var(--pad);height:var(--barh);background:rgba(30,21,18,.94);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.nav-mark{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;flex:0 0 auto}
.nav-mark img{width:24px;height:24px;object-fit:contain;object-position:center top}
.nav-mark span{font-family:var(--display);font-size:16px;letter-spacing:.16em;text-transform:uppercase}
.nav-links{display:flex;gap:4px;margin-left:14px;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{padding:7px 13px;border-radius:999px;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);text-decoration:none;white-space:nowrap;transition:.25s}
.nav-links a:hover{color:var(--sand)}
.nav-links a.on{background:var(--terracotta);color:#1B120E}
.nav .lang{margin-left:auto;flex:0 0 auto}
@media(max-width:760px){
  .nav-mark span{display:none}
  .nav{gap:8px;padding-inline:12px}
  .nav-links a{padding:6px 10px;font-size:9.5px;letter-spacing:.1em}
}

/* ---- هيرو الصفحة ---- */
.phero{padding:clamp(52px,9vw,104px) var(--pad) clamp(30px,5vw,54px);
  border-bottom:1px solid var(--hair);position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 20% 0%,rgba(175,110,66,.16),transparent 62%)}
.phero-in{position:relative;max-width:900px}
.phero h1{font-family:var(--display);font-size:clamp(29px,6.4vw,58px);line-height:1.08;
  margin:12px 0 0;font-weight:400}
.phero p{margin:16px 0 0;color:rgba(243,234,224,.58);font-size:clamp(14px,3.6vw,16px);max-width:56ch}

/* ---- بروفايل الشيف ---- */
.chef{display:grid;gap:clamp(24px,5vw,56px);grid-template-columns:1fr;align-items:start}
@media(min-width:820px){.chef{grid-template-columns:.8fr 1.2fr}}
.chef-photo{width:100%;border-radius:4px;border:1px solid var(--hair);
  aspect-ratio:1;object-fit:cover;background:var(--roast)}
.chef h2{font-family:var(--display);font-size:clamp(24px,4.6vw,38px);margin:10px 0 16px;font-weight:400}
.chef p{color:rgba(243,234,224,.6);font-size:15px;line-height:1.75;margin:0 0 14px;max-width:60ch}
.chef .withbaker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
  border-top:1px solid var(--hair);padding-top:16px;margin-top:22px}
.chef .withbaker b{color:var(--sand);font-weight:400}

/* ---- اقتباس ---- */
.pquote{background:var(--roast);border-block:1px solid var(--hair);text-align:center}
.pquote blockquote{font-family:var(--display);font-size:clamp(21px,4vw,34px);line-height:1.4;
  margin:0 auto;max-width:24ch;color:var(--porcelain)}
.pquote blockquote::before{content:"\201C";color:var(--terracotta)}
.pquote blockquote::after{content:"\201D";color:var(--terracotta)}
.pquote cite{display:block;margin-top:22px;font-style:normal;font-size:11px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--slate)}

/* ---- جاليري ---- */
.gal{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.gal figure{margin:0;border:1px solid var(--hair);border-radius:3px;overflow:hidden;background:var(--roast)}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gal figure:hover img{transform:scale(1.04)}

/* ---- جولة 360 ---- */
.tour{border:1px solid var(--hair);border-radius:4px;overflow:hidden;background:var(--roast);position:relative}
.tour-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--hair)}
.tour-head h3{font-family:var(--display);font-size:21px;margin:0;font-weight:400}
.tour-head .hint{margin-left:auto;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);display:none}
.tour.ready .tour-head .hint{display:block}
.tour-stage{position:relative;aspect-ratio:16/9;min-height:230px;display:grid;place-items:center}
.tour-stage [data-canvas]{position:absolute;inset:0;cursor:grab}
.tour-stage [data-canvas]:active{cursor:grabbing}
.tour-stage canvas{display:block}
.tour [data-start]{position:relative;z-index:2;border:1px solid var(--hair);border-radius:999px;
  padding:14px 30px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--porcelain);transition:.3s;background:rgba(30,21,18,.6)}
.tour [data-start]:hover{border-color:var(--sand);color:var(--sand)}
.tour.loading [data-start],.tour.ready [data-start]{display:none}
.tour-msg{position:absolute;font-size:12.5px;color:var(--slate);letter-spacing:.1em;display:none}
.tour.loading .tour-msg.load{display:block}
.tour.failed .tour-msg.fail{display:block}
.tour.ready .tour-msg{display:none}

/* ---- الفورمات ---- */
.form{max-width:660px}
.f{margin-bottom:16px;position:relative}
.f label{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);margin:0 0 7px}
.f label i{font-style:normal;color:var(--terracotta);margin-left:5px}
.f label u{text-decoration:none;color:rgba(107,119,125,.7)}
.f input,.f select,.f textarea{
  width:100%;background:var(--roast);color:var(--porcelain);border:1px solid var(--hair);
  border-radius:3px;padding:12px 13px;font:inherit;font-weight:300;transition:border-color .25s}
.f textarea{resize:vertical;min-height:110px;line-height:1.6}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--sand)}
.f.bad input,.f.bad select,.f.bad textarea{border-color:var(--ember)}
.f-err{display:none;color:var(--ember);font-size:12px;margin-top:6px}
.f.bad .f-err{display:block}
.f-row{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:620px){.f-row{grid-template-columns:1fr 1fr}}
.f-send{background:var(--sand);border:1px solid var(--sand);color:#1B120E;border-radius:999px;
  padding:14px 34px;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;transition:.3s;margin-top:6px}
.f-send:hover:not(:disabled){background:var(--porcelain);border-color:var(--porcelain)}
.f-send:disabled{opacity:.5;cursor:default}
.f-done{display:none;border:1px solid rgba(123,160,91,.4);border-radius:4px;padding:30px 24px;
  text-align:center;background:var(--roast);max-width:660px}
.f-done h3{font-family:var(--display);font-size:26px;margin:0 0 8px;font-weight:400}
.f-done p{color:rgba(243,234,224,.55);margin:0 0 20px;font-size:14.5px}
.f-done button{border:1px solid var(--hair);border-radius:999px;padding:11px 24px;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--porcelain);transition:.25s}
.f-done button:hover{border-color:var(--sand);color:var(--sand)}

/* ---- شبكة عمودين للتواصل ---- */
.two-col{display:grid;gap:clamp(28px,5vw,56px);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.two-col{grid-template-columns:1.15fr .85fr}}

/* ---- كروت "استكشف" في الواجهة ---- */
.explore-card{text-decoration:none;color:inherit;display:block;transition:background .35s}
.explore-card:hover{background:var(--roast)}
.explore-card h3{font-family:var(--display);font-size:clamp(22px,4.4vw,30px);margin:11px 0 8px;font-weight:400;
  transition:color .3s}
.explore-card:hover h3{color:var(--sand)}
.explore-card p{margin:0;color:rgba(243,234,224,.5);font-size:13.5px;line-height:1.6}
.explore-card::after{content:"\2192";display:inline-block;margin-top:16px;color:var(--terracotta);
  transition:transform .3s}
.explore-card:hover::after{transform:translateX(5px)}

/* ---- أسئلة شائعة ---- */
.faq{max-width:760px;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;padding:18px 30px 18px 0;font-size:clamp(15px,3.8vw,17.5px);
  position:relative;list-style:none;transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;color:var(--terracotta);
  font-size:20px;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--sand)}
.faq p{margin:0 0 20px;padding-right:30px;color:rgba(243,234,224,.58);font-size:14.5px;line-height:1.75}
.faq a{color:var(--sand)}

/* ---- اختيار الفرع اللي الطلب هيروحله ---- */
.order-from{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 26px}
.of-label{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--slate)}
.of-btn{border:1px solid var(--hair);border-radius:999px;padding:7px 15px;font-size:11px;
  letter-spacing:.14em;color:var(--slate);transition:.25s}
.of-btn:hover{border-color:var(--sand);color:var(--sand)}
.of-btn.on{background:var(--terracotta);border-color:var(--terracotta);color:#1B120E}

/* ---- الجاليري: الصورة نفسها بتطلب ---- */
.gal figure a{display:block;position:relative;text-decoration:none}
.gal .gal-cta{position:absolute;left:0;right:0;bottom:0;padding:14px 12px;
  background:linear-gradient(transparent,rgba(30,21,18,.92));
  color:var(--sand);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  text-align:center;opacity:0;transition:opacity .35s}
.gal figure a:hover .gal-cta,.gal figure a:focus-visible .gal-cta{opacity:1}
@media(hover:none){.gal .gal-cta{opacity:1}}

/* ---- كارت الصنف بقى لينك طلب ---- */
a.dish-link{text-decoration:none;color:inherit;cursor:pointer}
a.dish-link .dish-order{position:static;opacity:0;margin-top:auto;padding-top:8px;
  align-self:flex-start;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terracotta);border-bottom:1px solid rgba(175,110,66,.45);transition:opacity .3s}
a.dish-link:hover .dish-order,a.dish-link:focus-visible .dish-order{opacity:1}
@media(hover:none){a.dish-link .dish-order{opacity:1}}

/* ---- صفحة الحكاية ---- */
.story-hero{position:relative;min-height:min(74svh,620px);display:grid;align-items:end;
  padding:0 var(--pad) clamp(38px,6vw,72px);overflow:hidden;border-bottom:1px solid var(--hair)}
.story-hero::before{content:"";position:absolute;inset:0;background-image:var(--shot);
  background-size:cover;background-position:center;opacity:.42;
  transform:scale(1.04);animation:slowzoom 26s ease-in-out infinite alternate}
.story-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,21,18,.55) 0%,rgba(30,21,18,.15) 35%,rgba(30,21,18,.94) 100%)}
@keyframes slowzoom{to{transform:scale(1.14)}}
.story-hero-in{position:relative;z-index:2;max-width:840px}
.story-hero h1{font-family:var(--display);font-size:clamp(31px,7vw,66px);line-height:1.05;
  margin:12px 0 0;font-weight:400}
.story-hero p{margin:16px 0 0;color:rgba(243,234,224,.66);font-size:clamp(14.5px,3.6vw,17px);max-width:52ch}

.marks{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.mark{background:var(--espresso);padding:24px 20px}
.mark b{display:block;font-family:var(--display);font-size:clamp(19px,4vw,26px);
  font-weight:400;margin-top:9px;color:var(--sand)}

.chapter{display:grid;gap:clamp(24px,5vw,60px);grid-template-columns:1fr;align-items:center;
  padding:clamp(46px,8vw,110px) var(--pad);border-bottom:1px solid var(--hair)}
@media(min-width:860px){
  .chapter{grid-template-columns:1fr 1fr}
  .chapter.flip .chapter-img{order:2}
}
.chapter-img img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;
  border:1px solid var(--hair);background:var(--roast)}
.chapter-n{font-family:var(--display);font-size:clamp(38px,8vw,64px);color:var(--terracotta);
  opacity:.5;line-height:1;display:block}
.chapter-txt h2{font-family:var(--display);font-size:clamp(25px,5vw,42px);line-height:1.15;
  margin:12px 0 16px;font-weight:400}
.chapter-txt p{color:rgba(243,234,224,.6);font-size:15.5px;line-height:1.8;margin:0;max-width:58ch}

/* ---- بانر التطبيق ---- */
.appband{border-top:1px solid var(--hair);background:var(--roast);
  padding:clamp(26px,5vw,44px) var(--pad)}
.appband-in{display:flex;align-items:center;gap:clamp(14px,3vw,26px);flex-wrap:wrap;
  max-width:1100px;margin:0 auto}
.appband img{width:46px;height:46px;object-fit:contain;object-position:center top;flex:0 0 auto}
.appband-txt{flex:1 1 240px;min-width:0}
.appband h3{font-family:var(--display);font-size:clamp(19px,4vw,26px);margin:0;font-weight:400}
.appband p{margin:5px 0 0;color:rgba(243,234,224,.55);font-size:13.5px}
.appband .btn{flex:0 0 auto}

/* ---- معرض الفيديو ---- */
.vidgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.vid{position:relative;margin:0;border:1px solid var(--hair);border-radius:4px;overflow:hidden;
  background:var(--roast);aspect-ratio:16/9}
.vid img,.vid-blank{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.85) brightness(.8);transition:filter .4s,transform .6s}
.vid:hover img{filter:saturate(1) brightness(.9);transform:scale(1.03)}
.vid-play{position:absolute;inset:0;display:grid;place-items:center;background:none;z-index:2}
.vid-play i{width:60px;height:60px;border-radius:50%;border:1px solid rgba(243,234,224,.55);
  background:rgba(30,21,18,.5);backdrop-filter:blur(3px);display:grid;place-items:center;
  transition:.3s;position:relative}
.vid-play i::after{content:"";border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--porcelain);margin-left:4px}
.vid:hover .vid-play i{border-color:var(--sand);background:rgba(175,110,66,.35);transform:scale(1.08)}
.vid figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 13px;z-index:2;
  background:linear-gradient(transparent,rgba(30,21,18,.9));font-size:13.5px;color:var(--porcelain)}
.vid.playing{aspect-ratio:16/9}
.vid-frame,.vid-frame iframe,.vid-frame video{width:100%;height:100%;display:block;border:0}