/* ══════════════════════════════════════════════════════════
   رائحة الخبز — التنسيق
   ══════════════════════════════════════════════════════════ */

:root{
  --paper:      #F3EADA;
  --paper-deep: #E6D8BE;
  --green:      #3B5240;
  --green-soft: #6E8564;
  --walnut:     #6A4025;
  --walnut-soft:#9A6642;
  --ink:        #2A241D;

  --serif: "Amiri", Georgia, serif;
  --sans:  "Tajawal", system-ui, sans-serif;
  --hand:  "Lemonada", "Tajawal", cursive;
}

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

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.8;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(115deg, transparent 0 38px, rgba(106,64,37,.035) 38px 39px);
}

.defs{ position:absolute; width:0; height:0; overflow:hidden; }

:focus-visible{ outline:2px solid var(--walnut); outline-offset:3px; border-radius:2px; }


/* ══════════════════════════════════════════
   الدخان
   خيوط بيضاء سميكة، يشوّهها فلتر الضوضاء
   ويضبّبها فتطلع كتل دخان عشوائية
   ══════════════════════════════════════════ */
.smoke path{
  fill:none; stroke:#FFFDF6; stroke-linecap:round;
  stroke-width:14; opacity:0;
  transform-box:fill-box; transform-origin:50% 100%;
}
.smoke.big path{ stroke-width:36; }

.smoke .s1{ animation:plume 7.4s ease-out infinite; }
.smoke .s2{ animation:plume 8.6s ease-out 1.4s infinite; }
.smoke .s3{ animation:plume 9.2s ease-out 2.8s infinite; }
.smoke .s4{ animation:plume 8s   ease-out 4.2s infinite; }
.smoke .s5{ animation:plume 8.8s ease-out 5.6s infinite; }

@keyframes plume{
  0%   { opacity:0;   transform:translateY(14px) scale(.55); }
  18%  { opacity:.8; }
  60%  { opacity:.45; }
  100% { opacity:0;   transform:translateY(-46px) scale(1.7); }
}
.smoke.big .s1,
.smoke.big .s2,
.smoke.big .s3,
.smoke.big .s4,
.smoke.big .s5{ animation-name:plumeBig; }

@keyframes plumeBig{
  0%   { opacity:0;   transform:translateY(30px) scale(.5); }
  18%  { opacity:.85; }
  60%  { opacity:.5; }
  100% { opacity:0;   transform:translateY(-120px) scale(1.8); }
}


/* ══════════════════════════════════════════
   النبتة المتسلقة
   ══════════════════════════════════════════ */
.vine{
  position:fixed; top:0; bottom:0; inset-inline-start:0;
  width:52px; z-index:0; pointer-events:none; opacity:.4;
  background-repeat:repeat-y; background-position:top center; background-size:52px auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='260' viewBox='0 0 80 260'%3E%3Cpath d='M40 0 C14 44 66 88 40 130 C14 172 66 216 40 260' fill='none' stroke='%236E8564' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M30 28 q-20 -8 -22 -23 q20 -3 25 17 Z' fill='%236E8564'/%3E%3Cpath d='M52 60 q20 -8 22 -23 q-20 -3 -25 17 Z' fill='%236E8564'/%3E%3Cpath d='M27 94 q-20 -8 -22 -23 q20 -3 25 17 Z' fill='%236E8564'/%3E%3Cpath d='M52 126 q20 -8 22 -23 q-20 -3 -25 17 Z' fill='%236E8564'/%3E%3Cpath d='M30 158 q-20 -8 -22 -23 q20 -3 25 17 Z' fill='%236E8564'/%3E%3Cpath d='M52 190 q20 -8 22 -23 q-20 -3 -25 17 Z' fill='%236E8564'/%3E%3Cpath d='M27 224 q-20 -8 -22 -23 q20 -3 25 17 Z' fill='%236E8564'/%3E%3Ccircle cx='40' cy='44' r='3' fill='%236E8564'/%3E%3Ccircle cx='40' cy='174' r='3' fill='%236E8564'/%3E%3C/svg%3E");
}


/* ══════════════════════════════════════════
   ١) شاشة الترحيب
   ══════════════════════════════════════════ */
.veil{
  position:fixed; inset:0; z-index:100;
  background:var(--green);
  display:grid; place-items:center; text-align:center;
  transition:transform .9s cubic-bezier(.7,0,.2,1), opacity .6s ease .3s;
}
.veil.lift{ transform:translateY(-101%); opacity:0; }
.veil.gone{ display:none; }
.veil-inner{ padding:24px; max-width:560px; }

.veil-hello{
  color:#CFDAC6; font-size:1rem; font-weight:300; letter-spacing:.04em;
  opacity:0; animation:rise .7s ease .2s forwards;
}
.veil-name{
  font-family:var(--serif); font-weight:700; color:var(--paper);
  font-size:clamp(2.4rem,10vw,4rem); line-height:1.25; margin-top:.2em;
  opacity:0; animation:rise .8s ease .45s forwards;
}
.veil-name-en{
  font-family:var(--serif); font-style:italic; color:#B8C7AE;
  font-size:1.05rem; letter-spacing:.14em;
  opacity:0; animation:rise .8s ease .7s forwards;
}
@keyframes rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

.veil-loaf{
  width:190px; margin:6px auto 4px;
  opacity:0; animation:rise 1s ease .85s forwards;
}
.veil-loaf svg{ width:100%; display:block; overflow:visible; }
.veil-loaf .loaf-body{ stroke:#F3EADA; stroke-width:5; }
.veil-loaf .loaf-shadow{ fill:rgba(0,0,0,.18); }
.veil-loaf .hop{ animation:bob 3.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

.veil-btn{
  margin-top:6px; cursor:pointer;
  font-family:var(--sans); font-size:1.02rem; font-weight:500;
  color:var(--green); background:var(--paper);
  border:none; border-radius:999px; padding:.85em 2.4em;
  opacity:0; animation:rise .8s ease 1.15s forwards;
  transition:transform .18s ease, box-shadow .18s ease;
}
.veil-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.22); }
.veil-btn:active{ transform:translateY(1px) scale(.98); }

.veil-skip{
  display:block; margin:16px auto 0; cursor:pointer;
  background:none; border:none; color:#9FB196;
  font-family:var(--sans); font-size:.86rem;
  text-decoration:underline; text-underline-offset:4px;
  opacity:0; animation:rise .8s ease 1.4s forwards;
}


/* ══════════════════════════════════════════
   ٢) الترويسة
   ══════════════════════════════════════════ */
.top{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 22px; max-width:900px; margin:0 auto;
}
.top-mark{ font-family:var(--serif); font-weight:700; font-size:1.2rem; color:var(--green); }
.top-nav{ display:flex; gap:20px; }
.top-nav a{
  color:var(--walnut); text-decoration:none; font-size:.95rem;
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.top-nav a:hover{ border-color:var(--walnut); }


/* ══════════════════════════════════════════
   ٣) الواجهة
   ══════════════════════════════════════════ */
.hero{
  position:relative; z-index:2;
  max-width:820px; margin:0 auto;
  padding:20px 22px 60px; text-align:center;
}
.hero-kicker{ color:var(--green-soft); font-size:.9rem; font-weight:300; letter-spacing:.1em; }
.hero-title{
  font-family:var(--serif); font-weight:700; color:var(--green);
  font-size:clamp(2.6rem,11vw,4.6rem); line-height:1.15; margin:.12em 0;
}
.hero-en{
  font-family:var(--serif); font-style:italic; color:var(--walnut-soft);
  font-size:1.1rem; letter-spacing:.16em;
}
.hero-tagline{
  max-width:34ch; margin:1.2em auto .4em;
  color:var(--ink); font-weight:300; font-size:1.06rem;
}

.scene{ width:100%; max-width:560px; display:block; margin:0 auto 10px; overflow:visible; }


/* الرغيف المرسوم */
.loaf-shadow{ fill:rgba(106,64,37,.14); }
.loaf-body{ fill:#D49A5B; stroke:#6A4025; stroke-width:6; stroke-linejoin:round; stroke-linecap:round; }
.loaf-ear{ fill:none; stroke:#F7E9CF; stroke-width:14; stroke-linecap:round; stroke-linejoin:round; }
.loaf-wheat{ fill:none; stroke:#8A5A31; stroke-width:5; stroke-linecap:round; }
.loaf-leaf path{ fill:#B9793E; stroke:#8A5A31; stroke-width:2.4; stroke-linejoin:round; }
.flour circle{ fill:#F7E9CF; opacity:.85; }

/* الحبر بخط اليد */
.ink .note{
  font-family:var(--hand); font-size:30px; font-weight:400;
  fill:var(--walnut); text-anchor:middle; direction:rtl;
}
.ink .note.big{ font-size:34px; fill:var(--green); }
.ink .arrow,
.ink .tip{
  fill:none; stroke:var(--walnut); stroke-width:3.4;
  stroke-linecap:round; stroke-linejoin:round; opacity:.75;
}
.ink .doodle path{ fill:none; stroke:var(--walnut-soft); stroke-width:2.6; stroke-linejoin:round; }
.ink .squiggle{ fill:none; stroke:var(--walnut-soft); stroke-width:3; stroke-linecap:round; }

.mini{ width:130px; margin:0 auto 4px; }
.mini.small{ width:96px; margin-bottom:0; }
.mini svg{ width:100%; display:block; overflow:visible; }
.mini .loaf-body{ stroke-width:7; }
.mini .loaf-ear{ stroke-width:11; }


/* الأزرار */
.btn{
  display:inline-block; cursor:pointer;
  font-family:var(--sans); font-size:1rem; font-weight:500;
  text-decoration:none; border:none; border-radius:999px; padding:.9em 2.6em;
  transition:transform .18s ease, box-shadow .18s ease, background .2s ease;
}
.btn-solid{ background:var(--green); color:var(--paper); }
.btn-solid:hover{ background:#2F4434; transform:translateY(-2px); box-shadow:0 10px 22px rgba(59,82,64,.28); }
.btn-solid:active{ transform:translateY(1px) scale(.98); }


/* ══════════════════════════════════════════
   ٤) النبذة
   ══════════════════════════════════════════ */
.about{
  position:relative; z-index:2;
  max-width:620px; margin:0 auto; padding:0 22px 64px; text-align:center;
}
.about p{ font-family:var(--serif); font-size:1.16rem; line-height:2.1; color:var(--walnut); }


/* ══════════════════════════════════════════
   ٥) القائمة
   ══════════════════════════════════════════ */
.menu{ position:relative; z-index:2; max-width:760px; margin:0 auto; padding:0 22px 40px; }
.menu-group{ margin-bottom:52px; }

.menu-head{
  font-family:var(--serif); font-weight:700; color:var(--green);
  font-size:1.7rem; padding-bottom:10px;
  border-bottom:1.5px solid var(--paper-deep);
  display:flex; align-items:baseline; justify-content:space-between;
}
.menu-head span{
  font-style:italic; font-weight:400; font-size:.86rem;
  color:var(--walnut-soft); letter-spacing:.14em;
}

.list{ list-style:none; }

.item{
  display:flex; flex-direction:column;
  padding:16px 0;
  border-bottom:1px solid rgba(106,64,37,.12);
  transition:background .2s ease;
}
.item.picked{ background:rgba(230,216,190,.5); }

.item-row{ display:flex; align-items:baseline; gap:10px; }

.item-names{ display:flex; flex-direction:column; }
.item-ar{ font-size:1.04rem; color:var(--ink); }
.item-en{ font-family:var(--serif); font-style:italic; font-size:.85rem; color:var(--walnut-soft); line-height:1.5; }

.leader{
  flex:1; align-self:flex-end; margin-bottom:.42em;
  border-bottom:1.5px dotted rgba(106,64,37,.35); min-width:18px;
}
.price{ font-family:var(--serif); font-size:1rem; color:var(--walnut); white-space:nowrap; }
.price.soft{ color:var(--walnut-soft); font-size:.86rem; font-style:italic; }

.step{ display:flex; align-items:center; gap:8px; align-self:center; }
.step button{
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  border:1.5px solid var(--green); background:transparent; color:var(--green);
  font-size:1.15rem; line-height:1; font-family:var(--sans);
  display:grid; place-items:center;
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
.step button:hover{ background:var(--green); color:var(--paper); }
.step button:active{ transform:scale(.86); }
.step .qty{ min-width:16px; text-align:center; font-family:var(--serif); font-size:1.05rem; color:var(--walnut); }
.step .minus, .step .qty{ display:none; }
.item.picked .minus{ display:grid; }
.item.picked .qty{ display:block; }

.menu-note{ text-align:center; font-size:.9rem; font-weight:300; color:var(--green-soft); padding-top:8px; }


/* ══════════════════════════════════════════
   لوحة النقش
   ══════════════════════════════════════════ */
.scoring{ display:none; padding-top:12px; }
.item.picked .scoring{ display:block; animation:drop .3s ease; }
@keyframes drop{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;} }

.scoring-q{
  font-family:var(--hand); font-size:.86rem; color:var(--walnut);
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
}
.scoring-q em{ font-style:normal; font-family:var(--sans); font-size:.76rem; font-weight:300; color:var(--walnut-soft); }

.pats{ display:flex; gap:8px; overflow-x:auto; padding:4px 2px 6px; scrollbar-width:thin; }
.pat{
  flex:none; width:62px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 4px;
  background:#FBF6EC; color:var(--walnut-soft);
  border:1.5px solid var(--paper-deep); border-radius:14px;
  font-family:var(--sans); font-size:.63rem; line-height:1.4; text-align:center;
  transition:border-color .18s ease, background .18s ease, color .18s ease, transform .16s ease;
}
.pat svg{ width:26px; height:26px; }
.pat:active{ transform:scale(.92); }
.pat.on{ background:var(--green); color:var(--paper); border-color:var(--green); }


/* ══════════════════════════════════════════
   ٦) خطوات الطلب
   ══════════════════════════════════════════ */
.order{
  position:relative; z-index:2;
  max-width:640px; margin:0 auto; padding:20px 22px 40px; text-align:center;
}
.order-head{ font-family:var(--serif); font-weight:700; color:var(--green); font-size:1.7rem; margin-bottom:24px; }
.steps{ list-style:none; text-align:right; }
.steps li{ display:flex; align-items:flex-start; gap:16px; padding:14px 0; }
.steps b{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--paper-deep); color:var(--walnut);
  font-family:var(--serif); font-size:1rem;
}
.steps p{ font-weight:300; padding-top:3px; }


/* ══════════════════════════════════════════
   ٧) النهاية — الرغيف ودخانه الممتد
   ══════════════════════════════════════════ */
.closing{
  position:relative; z-index:2;
  max-width:620px; margin:0 auto;
  padding:40px 22px 60px; text-align:center;
}

.trails{
  position:absolute; z-index:-1; pointer-events:none;
  bottom:170px; inset-inline-start:50%; transform:translateX(50%);
  width:100vw; height:1500px; overflow:visible;
  filter:blur(5px);
}
.trail{
  fill:none; stroke:#FFFDF6; stroke-width:5; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  opacity:.55;
  stroke-dasharray:1500; stroke-dashoffset:1500;
  animation:drift 24s ease-in-out infinite;
}
.t2{ animation-delay:3s;  opacity:.4; stroke-width:7; }
.t3{ animation-delay:6s;  opacity:.35; }
.t4{ animation-delay:9s;  opacity:.35; stroke-width:6; }
.t5{ animation-delay:12s; opacity:.45; }

@keyframes drift{
  0%   { stroke-dashoffset:1500; }
  55%  { stroke-dashoffset:0; }
  100% { stroke-dashoffset:-1500; }
}

.end-loaf{ position:relative; z-index:2; width:190px; margin:0 auto 20px; }
.end-loaf svg{ width:100%; display:block; overflow:visible; }

.closing p{
  position:relative; z-index:2;
  font-family:var(--hand); font-size:1.22rem; line-height:2.1; color:var(--green);
}


/* ══════════════════════════════════════════
   ٨) التذييل
   ══════════════════════════════════════════ */
.foot{
  position:relative; z-index:2;
  background:var(--green); color:var(--paper);
  text-align:center; padding:44px 22px 120px;
}
.foot-ig{
  color:var(--paper); text-decoration:none;
  font-family:var(--serif); font-size:1.12rem; letter-spacing:.06em;
  border-bottom:1px solid rgba(243,234,218,.4); padding-bottom:3px;
}
.foot-ig:hover{ border-color:var(--paper); }
.foot-sig{ margin-top:18px; font-size:.85rem; font-weight:300; color:#A9BBA0; }


/* ══════════════════════════════════════════
   ٩) شريط الطلب
   ══════════════════════════════════════════ */
.bar{
  position:fixed; z-index:40; inset-inline:12px; bottom:12px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--walnut); color:var(--paper);
  border-radius:18px; padding:12px 14px 12px 20px;
  box-shadow:0 10px 28px rgba(42,36,29,.28);
  transform:translateY(140%); opacity:0; pointer-events:none;
  transition:transform .38s cubic-bezier(.2,.9,.3,1), opacity .3s ease;
  max-width:700px; margin:0 auto;
}
.bar.show{ transform:none; opacity:1; pointer-events:auto; }
.bar-info{ display:flex; flex-direction:column; line-height:1.5; }
.bar-count{ font-size:.98rem; }
.bar-total{ font-family:var(--serif); font-size:.9rem; color:#E4C8A8; }
.bar-btn{
  flex:none; cursor:pointer; border:none; border-radius:999px;
  background:var(--paper); color:var(--walnut);
  font-family:var(--sans); font-weight:500; font-size:.98rem;
  padding:.7em 1.6em; transition:transform .16s ease;
}
.bar-btn:active{ transform:scale(.95); }


/* ══════════════════════════════════════════
   ١٠) ورقة تأكيد الطلب
   ══════════════════════════════════════════ */
.sheet-bg{
  position:fixed; inset:0; z-index:60;
  background:rgba(42,36,29,.5);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.sheet-bg.show{ opacity:1; pointer-events:auto; }

.sheet{
  position:relative;
  width:100%; max-width:560px; max-height:92vh; overflow-y:auto;
  background:var(--paper);
  border-radius:24px 24px 0 0;
  padding:22px 22px 32px;
  transform:translateY(100%); transition:transform .38s cubic-bezier(.2,.9,.3,1);
}
.sheet-bg.show .sheet{ transform:none; }

.sheet-x{
  position:absolute; top:14px; inset-inline-start:16px;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:none; background:var(--paper-deep); color:var(--walnut);
  font-size:1.4rem; line-height:1;
}
.sheet-head{
  font-family:var(--serif); font-weight:700; color:var(--green);
  font-size:1.5rem; text-align:center; margin-bottom:14px;
}

.recap{ list-style:none; margin-bottom:6px; }
.recap li{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:9px 0; border-bottom:1px dotted rgba(106,64,37,.25); font-size:.98rem;
}
.recap .nm{ display:flex; flex-direction:column; }
.recap .pat-note{ font-family:var(--hand); font-size:.74rem; color:var(--walnut-soft); }
.recap .q{ font-family:var(--serif); color:var(--walnut); white-space:nowrap; }
.recap-total{ text-align:left; font-family:var(--serif); font-size:1.1rem; color:var(--green); padding:10px 0 4px; }

.field{ margin-top:14px; }
.field label{ display:block; font-size:.9rem; color:var(--walnut); margin-bottom:6px; }
.field .opt{ color:var(--walnut-soft); font-size:.8rem; }
.field input{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:#FBF6EC; border:1.5px solid var(--paper-deep); border-radius:12px;
  padding:.75em .9em;
}
.field input:focus{ outline:none; border-color:var(--green-soft); }

.sheet-warn{ min-height:1.4em; color:#A2432B; font-size:.88rem; padding-top:10px; }
.sheet-send{ width:100%; margin-top:6px; }
.sheet-fine{ text-align:center; font-size:.82rem; font-weight:300; color:var(--walnut-soft); padding-top:12px; }


/* ══════════════════════════════════════════
   نثرة الطحين
   ══════════════════════════════════════════ */
.puff{
  position:fixed; z-index:90; pointer-events:none;
  border-radius:50%; background:#F7EEDC;
  box-shadow:0 0 0 3px rgba(230,216,190,.55);
  animation:puff .75s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes puff{
  0%   { opacity:.95; transform:translate(0,0) scale(.4) rotate(0deg); }
  60%  { opacity:.7; }
  100% { opacity:0;  transform:translate(var(--dx),var(--dy)) scale(1.5) rotate(var(--rot)); }
}


/* ══════════════════════════════════════════
   الشاشات الأكبر
   ══════════════════════════════════════════ */
@media (min-width:720px){
  .vine{ width:78px; background-size:78px auto; opacity:.5; }
  .hero{ padding:34px 22px 80px; }
  .item-ar{ font-size:1.12rem; }
  .menu-head{ font-size:2rem; }
  .pat{ width:74px; font-size:.68rem; }
  .pat svg{ width:30px; height:30px; }
  .end-loaf{ width:230px; }
  .sheet{ border-radius:24px; }
  .sheet-bg{ align-items:center; }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .veil-hello,.veil-name,.veil-name-en,.veil-loaf,.veil-btn,.veil-skip{ opacity:1; }
  .smoke path{ opacity:.45; }
  .trail{ stroke-dashoffset:0; }
}