@font-face{font-family:AmigosScript;src:url('assets/handwriting.otf') format('opentype');font-display:swap}
:root{--green:#002d1a;--gold:#e4bd65;--cream:#fff1d8;color-scheme:light;font-family:Georgia,'Times New Roman',serif;color:var(--green);background:#002719}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font:inherit;cursor:pointer}
svg{width:1.5rem;height:1.5rem;flex-shrink:0}
button,a{-webkit-tap-highlight-color:#d9a73d40}
a:focus-visible,button:focus-visible{outline:3px solid #aa711b;outline-offset:5px}
a:hover{filter:brightness(1.09)}
/* Three independent background sections. Decorative images scale with width only. */
.page{position:relative;isolation:isolate;max-width:900px;margin:auto;min-height:100vh;background:#fff0d8;background-image:linear-gradient(90deg,#f3d9b2 0%,#ffeed3 24%,#fff1dc 50%,#ffedd0 76%,#efd2a5 100%);box-shadow:0 0 80px #0006}
.page::before,.page::after{content:'';position:absolute;left:0;width:100%;z-index:-1;pointer-events:none;background-image:url('assets/restaurant-background.png');background-size:100% auto;background-repeat:no-repeat}
.page::before{top:0;aspect-ratio:920/760;background-position:center top;mask-image:linear-gradient(to bottom,#000 0%,#000 60%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 60%,transparent 100%)}
.page::after{bottom:0;aspect-ratio:920/650;background-position:center bottom;mask-image:linear-gradient(to bottom,transparent 0%,#000 35%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 35%,#000 100%)}
.header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 8%;background:linear-gradient(100deg,#fff1dceF,#fff8eaf5);border-bottom:3px solid var(--gold);border-radius:0 0 48% 10% / 0 0 22px 18px;z-index:2}
.brand{display:flex;align-items:center;gap:8px}
.logo-mark{display:block;overflow:hidden;mix-blend-mode:multiply;flex-shrink:0}
.logo-mark img{display:block;width:150%;max-width:none;height:auto;transform:translateX(-17%)}
.small{width:84px;height:62px}
.brand-copy{display:flex;flex-direction:column;text-align:center}
.brand-copy strong{font-size:2.3rem;line-height:1}
.brand-copy>span{font-size:.9rem;line-height:1.5}
.header-actions{display:flex;align-items:center;gap:20px}
.social-links{display:flex;align-items:center;gap:20px}
.social{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--green);color:#fff4dc;box-shadow:0 3px 6px #0001}
.social svg{width:29px;height:29px}
.facebook span{font-family:Arial,sans-serif;font-size:42px;line-height:1;font-weight:bold;margin-top:8px}
.menu-toggle{border:0;color:var(--green);background:transparent;padding:6px;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.menu-toggle svg{width:38px;height:38px}
.navigation{position:absolute;right:5%;top:calc(100% - 4px);width:min(310px,90%);padding:10px;border:1px solid var(--gold);border-radius:18px;background:#fff4dd;box-shadow:0 12px 30px #0004}
.navigation a{display:block;padding:14px 16px;min-height:48px;font-size:1.05rem;border-radius:8px}
.navigation a:hover,.navigation a:focus-visible{background:#efd49d}
main{padding:44px 7.5% 56px}
.hero{position:relative;text-align:center}
.hero-mark{width:280px;height:210px;margin:auto}h1{font-size:4.6rem;line-height:1.05;margin:-5px 0 0;font-weight:700;letter-spacing:-3px;text-shadow:1px 2px 1px #eec263,-1px -1px 0 #efca73;-webkit-text-stroke:1px #a37a28}
.motto{display:flex;align-items:center;gap:10px;justify-content:center;font-weight:700;font-size:1.4rem;margin:0}.motto::before,.motto::after{content:'';height:3px;background:linear-gradient(90deg,#9d6817,#e7bd67);flex:1;max-width:95px}
.qualities{display:flex;align-items:center;justify-content:center;gap:22px;font-family:AmigosScript,cursive;font-size:2.5rem;line-height:1.1;margin:34px 0 16px}.qualities b{font-family:Georgia,serif;font-size:1.7rem;font-weight:400;color:#aa711b}
.intro{font-size:1.2rem;line-height:1.18;margin:20px auto 30px;max-width:640px}
.side-note{position:absolute;font-family:AmigosScript,cursive;font-size:1.65rem;line-height:.85;color:#684412;margin:0;top:160px;width:95px}.side-note span{display:block;font-family:Georgia,serif;font-size:2.5rem;line-height:1.2}
.side-note.left{left:-2%;transform:rotate(-13deg)}
.side-note.right{right:-2%;transform:rotate(10deg)}
.actions{max-width:590px;margin:auto;display:grid;gap:14px}
.cta{display:flex;align-items:center;gap:34px;min-height:90px;padding:16px 42px;border:3px solid #f4ce77;border-radius:60px;box-shadow:0 9px 16px #6f4c2448,inset 0 0 14px #fff1;transition:transform .18s}.cta:hover{transform:translateY(-2px)}.cta svg{width:54px;height:54px}
.cta span{display:flex;flex-direction:column;text-align:left}
.cta strong{font-size:1.65rem;line-height:1.15}
.cta small{font-size:1.15rem;line-height:1.35}
.menu-cta{background:linear-gradient(120deg,#003321,#001e11);color:#fff5de}
.menu-cta svg,.menu-cta small{color:#f5d37c}
.order-cta{background:linear-gradient(110deg,#f6c34e,#ffe396 52%,#f5be40);color:var(--green)}
.categories{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start;margin:32px -2% 30px}
.category{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:.88rem;font-weight:700;text-transform:uppercase;line-height:1.2}
.category-icon{display:flex;align-items:center;justify-content:center;width:84px;height:84px;border:2px solid #b9842b;border-radius:50%;background:radial-gradient(at 30% 25%,#064628,#002114 75%);color:#efd895;box-shadow:0 3px 6px #0001}
.category-icon svg{width:49px;height:49px}
.information{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #fff7df;border-radius:38px;background:linear-gradient(120deg,#fff8e5c9,#fff5dfb8);box-shadow:inset 0 0 0 1px #d5a55655;padding:22px 28px}
.location,.hours{display:flex;align-items:flex-start;gap:20px}
.location{padding-right:22px}
.hours{padding-left:28px;border-left:2px solid #c99c45}
.information svg{width:56px;height:56px}
.information strong,.information h2{display:block;font-size:1.125rem;line-height:1.2;margin:0 0 4px;font-weight:700}
.information address,.information p{font-size:1.0625rem;line-height:1.25;font-style:normal;margin:0}
.hours{scroll-margin-top:20px}footer{text-align:center;margin-top:22px}
.script{font-family:AmigosScript,cursive;font-size:2.35rem;line-height:1.1;font-weight:400;margin:0}
.heart{color:#a06a17;font-family:Georgia,serif}
.footer-social-row{display:flex;justify-content:center;align-items:center;gap:24px;margin:12px 0 30px}
.gold-line{width:65px;height:2px;background:linear-gradient(90deg,transparent,#ac711a)}
.gold-line:last-child{transform:rotate(180deg)}
.footer-social .social{width:64px;height:64px;color:white;box-shadow:0 5px 8px #aa6b2440}
.footer-social .instagram{background:radial-gradient(at 28% 105%,#ffd600 8%,#ff7a00 24%,#ff0169 50%,#d300c5 72%,#7638fa 95%)}
.footer-social .facebook{background:#087bf3}
.footer-social .whatsapp{background:#03c854}
.footer-social svg{width:38px;height:38px}
.footer-social .facebook span{font-size:54px}
.farewell{font-size:2.4rem;margin-top:16px}
.notice{position:fixed;z-index:20;left:50%;bottom:24px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);background:var(--green);color:var(--cream);border:1px solid var(--gold);border-radius:14px;padding:16px 22px;font:1rem/1.4 system-ui,sans-serif;box-shadow:0 6px 30px #0004}
[hidden]{display:none!important}
@media(max-width:680px){.header{padding:12px 5%;gap:8px}
.small{width:54px;height:40px}
.brand-copy strong{font-size:1.9rem}
.brand-copy>span{font-size:.75rem}
.header-actions{gap:8px}
.header-social{gap:8px}
.header-social .social{width:36px;height:36px}
.header-social svg{width:22px;height:22px}
.header-social .facebook span{font-size:30px;margin-top:6px}
.menu-toggle svg{width:30px;height:30px}main{padding:26px 5% 40px}
.hero-mark{width:210px;height:156px}h1{font-size:3.4rem;letter-spacing:-2px}
.motto{font-size:1.25rem}
.qualities{gap:14px;font-size:1.95rem;margin-top:26px}
.qualities b{font-size:1.1rem}
.intro{font-size:1rem;line-height:1.35;max-width:410px}
.side-note{display:none}
.cta{padding:16px 24px;gap:22px;min-height:80px}
.cta svg{width:50px;height:50px}
.cta strong{font-size:1.3rem}
.cta small{font-size:1.15rem}
.categories{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px;margin:26px 0}
.category:nth-last-child(2){grid-column:1/3;justify-self:center;width:50%}
.category:last-child{grid-column:3;justify-self:center}
.category{font-size:.875rem}
.category-icon{width:72px;height:72px}
.category-icon svg{width:43px;height:43px}
.information{padding:20px 16px;border-radius:28px;gap:18px}
.location,.hours{gap:10px}
.location{padding-right:0}
.hours{padding-left:16px}
.information svg{width:36px;height:36px}
.information strong,.information h2{font-size:1.05rem}
.information p,.information address{font-size:1rem}
.script{font-size:2.4rem}
.farewell{font-size:2.1rem}
.footer-social-row{gap:18px}
.gold-line{width:40px}
.footer-social{gap:16px}
.footer-social .social{width:56px;height:56px}}
@media(max-width:420px){.header-social{display:none}
.header{padding-inline:6%}.brand-copy strong{font-size:1.65rem}
.hero-mark{width:180px;height:134px}h1{font-size:2.85rem}
.qualities{gap:10px;font-size:1.7rem}
.motto{font-size:1.15rem;gap:6px}
.intro{font-size:1.1rem}
.desktop-break{display:none}
.cta{padding:16px 20px;gap:18px}
.cta strong{font-size:1.15rem}
.information{grid-template-columns:1fr;padding:20px 28px;gap:16px}
.hours{border-left:0;border-top:1px solid #c99c45;padding:16px 0 0}
.location,.hours{gap:18px}
.information svg{width:44px;height:44px}
.information strong,.information h2{font-size:1.25rem}
.information p,.information address{font-size:1.125rem}
.farewell{font-size:2.3rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.cta{transition:none}}

/* Compact mobile information and proportional, undistorted background. */
@media(max-width:420px){.motto{font-size:1rem}.cta small{font-size:1rem}
.qualities{margin-top:20px}
.information{grid-template-columns:1fr 1fr;padding:16px 12px;gap:10px}
.location,.hours{gap:8px}
.hours{border-top:0;border-left:1px solid #c99c45;padding:0 0 0 10px}
.information svg{width:28px;height:28px}
.information strong,.information h2{font-size:.875rem}
.information p,.information address{font-size:1rem;line-height:1.4}
.script{font-size:1.9rem}
.farewell{font-size:1.85rem}
.footer-social-row{margin-bottom:22px}
.footer-social .social{width:48px;height:48px}
.footer-social svg{width:30px;height:30px}
.footer-social .facebook span{font-size:42px}
.side-note{font-size:1.65rem}}
@media(max-width:360px){.information{grid-template-columns:1fr;gap:14px;padding:18px 24px}
.hours{border-left:0;border-top:1px solid #c99c45;padding:14px 0 0}
.information strong,.information h2{font-size:1rem}
.information svg{width:34px;height:34px}
.location,.hours{gap:14px}}
.legal-links {font-weight:bold;}
.legal-links [aria-current="page"]{font-weight:normal;}
/* Keep the closing text clear of the lower decorative foliage. */
main{padding-bottom:90px}
@media(max-width:680px){main{padding-bottom:65px}}
/* عرض اللوغو كاملًا بدون قص */
.logo-mark {
  overflow: visible;
}

.logo-mark img {
  width: 100%;
  max-width: 100%;
  height: auto;
  transform: none;
}

/* لوغو الهيدر */
.logo-mark.small {
  width: 100px;
  height: auto;
}

/* اللوغو الرئيسي */
.logo-mark.hero-mark {
  width: min(360px, 85%);
  height: auto;
  margin: 0 auto 24px;
}

@media (max-width: 680px) {
  .logo-mark.small {
    width: 105px;
  }

  .logo-mark.hero-mark {
    width: min(280px, 85%);
  }
}
.opening-offer {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(440px, calc(100% - 32px));
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 42px 26px 30px;
  border: 2px solid #e4bd65;
  border-radius: 30px;
  background: linear-gradient(140deg, #06452c, #002719);
  color: #fff1d8;
  text-align: center;
  font-family: Georgia, serif;
  box-shadow: 0 20px 70px #0006;
}

.opening-offer::backdrop {
  background: #001d15b8;
  backdrop-filter: blur(5px);
}

.offer-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #e4bd65;
  font-size: 32px;
  cursor: pointer;
}

.offer-close:hover {
  background: #ffffff15;
}

.offer-close:focus-visible {
  outline: 2px solid #e4bd65;
  outline-offset: 2px;
}

.offer-brand {
  margin: 0 0 20px;
  color: #e4bd65;
  font-size: 18px;
  letter-spacing: 4px;
}

.opening-offer h2 {
  margin: 0;
  font-size: 25px;
  line-height: 1.3;
}

.offer-discount {
  margin: 24px 0 0;
  color: #f5d381;
  font-size: clamp(76px, 20vw, 110px);
  font-weight: bold;
  line-height: 1;
}

.offer-discount span {
  font-size: .55em;
}

.offer-label {
  margin: 10px 0 24px;
  font-size: 20px;
}

.offer-date {
  padding-top: 20px;
  border-top: 1px solid #e4bd6555;
  font-size: 16px;
  line-height: 1.7;
}

.offer-welcome {
  margin: 20px 0 0;
  font-family: AmigosScript, cursive;
  font-size: 30px;
}
html.category-image-open {
  scroll-behavior: auto;
}

/* تثبيت الصفحة الرئيسية خلف صورة المنيو */
.category-image-open body > .page {
  position: fixed;
  top: var(--category-scroll);
  left: 0;
  right: 0;
  width: 100%;
}

.category-popup {
  position: relative;
  z-index: 1000;
  isolation: isolate;
  min-height: 100dvh;
  padding: 24px 12px;
}

.category-popup[hidden] {
  display: none;
}

.category-popup::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #001d15d9;
  backdrop-filter: blur(5px);
}

.category-popup-card {
  max-width: 850px;
  margin: auto;
  border: 2px solid #e4bd65;
  border-radius: 20px;
  background: #fff1d8;
  box-shadow: 0 20px 70px #0006;
}

.category-popup-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  border-radius: 17px 17px 0 0;
  background: #002d1a;
  color: #fff1d8;
}

.category-popup-header h2 {
  margin: 0;
  font-size: 18px;
}

#category-popup-close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #e4bd65;
  font-size: 32px;
  cursor: pointer;
}

#category-popup-close:focus-visible {
  outline: 2px solid #e4bd65;
}

#category-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 0 17px 17px;
}

#category-image[hidden] {
  display: none;
}

#category-image-error {
  padding: 20px;
  color: #002d1a;
}
/* الأقسام السبعة بسطر واحد */
.categories {
  display: grid;
  grid-template-columns: repeat(7, minmax(84px, 1fr));
  gap: 10px;
  margin: 28px 0;
  padding: 6px 4px 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #bd913c transparent;
}

/* إلغاء توزيع الأقسام القديم على سطرين */
.categories .category,
.categories .category:nth-last-child(2),
.categories .category:last-child {
  grid-column: auto;
  justify-self: stretch;
  width: auto;
  min-width: 0;
  font-size: 12px;
  line-height: 1.3;
}

.categories .category-icon {
  width: 64px;
  height: 64px;
}

.categories .category-icon svg {
  width: 34px;
  height: 34px;
}

@media (max-width: 680px) {
  .categories {
    grid-template-columns: repeat(7, 84px);
    gap: 8px;
  }

  .categories .category-icon {
    width: 56px;
    height: 56px;
  }

  .categories .category-icon svg {
    width: 30px;
    height: 30px;
  }
}