@font-face {
  font-family: "FF Hekaya";
  src: url("/fonts/FFHekaya-Light.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "ADastNevis";
  src: url("/fonts/dastnevis.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --brown: #56270f;
  --turquoise: #0AAFBA;
  --turquoise-dark: #087884;
  --dark: #11171b;
  --muted: #575f63;
  --border: #e9e6e3;
  --cream: #f5eee7;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--dark);
  font-family: Tahoma, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

button,
textarea {
  font-family: inherit;
}

button {
  cursor: pointer;
}


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

.site-header {
  background: #ffffff;
}

.header-main {
  position: relative;
  direction: ltr;
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr);
  align-items: center;
  gap: 16px;
  max-width: 1440px;
  min-height: 78px;
  margin: auto;
  padding: 7px 34px;
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  min-width: 0;
}

.header-left {
  grid-column: 1;
  justify-self: start;
  gap: 16px;
}

.header-right {
  grid-column: 3;
  justify-self: end;
  width: min(100%,300px);
}

.home-link,
.basket {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--dark);
  font-weight: 600;
  white-space: nowrap;
}

.home-link {
  padding-right: 16px;
  border-right: 1px solid #d8d8d8;
  text-decoration: none;
}

.home-link svg,
.basket svg,
.search-box svg {
  width: 25px;
  height: 25px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-divider {
  height: 27px;
  border-left: 1px solid #d8d8d8;
}

.language-label {
  direction: ltr;
  color: var(--dark);
  font: 600 18px "FF Hekaya", Arial, sans-serif;
  white-space: nowrap;
}

.brand {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%,-50%);
}

.brand-logo {
  display: block;
  width: auto;
  height: 56px;
  max-width: 245px;
  object-fit: contain;
}

.search-box {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 46px;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fbfaf9;
  color: var(--muted);
  font-size: 17px;
}

.search-box span {
  direction: rtl;
}

.search-box svg {
  width: 22px;
  height: 22px;
}


/* =========================
   CATEGORIES
========================= */

.category-nav {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.category-list {
  direction: rtl;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  max-width: 1440px;
  min-height: 54px;
  margin: auto;
  padding: 6px 34px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}

.category-list::-webkit-scrollbar {
  display: none;
}

.category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  flex: none;
  padding: 0 16px;
  border: 2px solid var(--turquoise);
  border-radius: 24px;
  background: #fff;
  color: var(--turquoise-dark);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.category.active {
  border-color: var(--turquoise);
  background: var(--turquoise);
  color: #fff;
}

a.category {
  cursor: pointer;
}


/* =========================
   HERO — ORIGINAL
========================= */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 220px;
  background-color: var(--cream);

  background-image:
    linear-gradient(
      90deg,
      rgba(250,245,240,.98) 0%,
      rgba(250,245,240,.90) 24%,
      rgba(250,245,240,.18) 56%,
      rgba(250,245,240,.63) 100%
    ),
    url("../images/fatteh-hummus.jpg");

  background-size: cover;
  background-position: center 52%;
}

.hero-inner {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1440px;
  min-height: 220px;
  margin: auto;

  padding:
    18px clamp(28px,6vw,90px)
    18px clamp(20px,4vw,58px);
}

.hero-copy {
  direction: rtl;
  max-width: 430px;
  text-align: right;
}

.hero h1 {
  margin: 0 0 3px;
  color: var(--brown);

  font:
    400 clamp(29px,3vw,41px)/1.18
    "FF Hekaya", Tahoma, sans-serif;
}

.hero-subtitle {
  margin: 0;
  color: var(--turquoise-dark);
  font-size: clamp(17px,1.55vw,22px);
  font-weight: 700;
  line-height: 1.25;
}

.heritage-stroke {
  display: block;
  width: 88px;
  height: 35px;
  margin: 4px auto 0 15px;
}

.heritage-stroke path,
.heritage-arrow path {
  fill: var(--brown);
}

.hero-tagline {
  margin: 2px 0 0;
  padding-left: 20px;
  color: var(--turquoise-dark);
  font-size: 21px;
  text-align: left;
}

.hero-note {
  direction: rtl;
  flex: none;
  color: var(--turquoise-dark);

  font:
    400 clamp(25px,2.4vw,35px)/1.35
    Tahoma, Arial, sans-serif;

  text-align: center;
  transform: rotate(-5deg);
}

.hero-note p {
  margin: 0;
  line-height: 1.35;
}

.heritage-arrow {
  display: block;
  width: 135px;
  height: 43px;
  margin: 8px auto 0;
  transform: translate(-25px,8px);
}


/* =========================
   POPULAR
========================= */

.popular-section {
  max-width: 1440px;
  margin: auto;
  padding: 5px 34px 34px;
}

.section-heading {
  position: relative;
  top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 15px;
}

.section-title-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
}

.section-heading h2 {
  margin: 0;
  color: var(--brown);

  font:
    400 clamp(21px,1.8vw,27px)/1.15
    Tahoma, Arial, sans-serif;
}

.section-stroke {
  display: block;
  width: 42px;
  height: 22px;
  margin: 0;
  transform: rotate(8deg);
}

.section-stroke path {
  fill: var(--turquoise);
}

.dish-grid {
  display: grid;
  grid-template-columns:
    repeat(6,minmax(0,1fr));
  gap: 14px;
}

.dish-card {
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.dish-image {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 10px;
  background:
    linear-gradient(145deg,#eadbcf,#f9f3ed);
  color: var(--muted);
  font-size: 14px;
    text-align: center;
}

.dish-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-height: 64px;
  padding: 9px 10px;
}

.dish-info h3 {
  margin: 0;
  color: #3b190b;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
}


/* =========================
   BUTTON
========================= */

.add-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--turquoise);
  color: #fff;
  font: 28px/1 Arial,sans-serif;
}


/* =========================
   FATTAT + FOUL INTRO
========================= */

.fattat-intro {
  background: var(--cream);
  padding: 20px 34px 14px;
}

.fattat-intro-inner,
.fattat-content {
  max-width: 1372px;
  margin: auto;
}

.fattat-intro h1 {
  margin: 0;
  color: var(--brown);

  font:
    700 clamp(30px,3vw,43px)/1.3
    Tahoma,Arial,sans-serif;
}

.fattat-story {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 2px;
  color: var(--turquoise);
}

.fattat-story p {
  margin: 0;

  font:
    400 clamp(22px,2vw,31px)/1.25
    "ADastNevis","FF Hekaya",Tahoma,sans-serif;

  transform: rotate(-4deg);
  transform-origin: right center;
}


.fattat-story-arrow {
  display: block;
  width: 155px;
  height: 48px;
  margin-top: 3px;
  margin-left: 18px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateX(-12px);
}

.fattat-story-arrow circle {
  fill: currentColor;
  stroke: none;
}




/* =========================
   CARDS
========================= */

.fattat-content {
  padding: 18px 0 50px;
}

.fattat-grid {
  display: grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap: 20px;
}

.fattat-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}

.fattat-image {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 170px;
  padding: 12px;
  border: 0;

  background:
    linear-gradient(145deg,#eadbcf,#f9f3ed);

  color: var(--muted);
  font-size: 14px;
}

.fattat-details {
  display: grid;
  grid-template-columns:
    minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.fattat-details h2 {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--brown);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
}

.fattat-price {
  margin: 0;
  color: var(--turquoise-dark);
  font-weight: 400;
  white-space: nowrap;
}


/* =========================
   QUICK CONTROL
========================= */

.quick-control,
.quantity-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  direction: ltr;
}

.quick-control {
  grid-column: 2;
  grid-row: 2;
}

.quick-control .add-button {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}


/* =========================
   BASKET
========================= */

.basket-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--turquoise);
  color: #fff;
  font: 12px Tahoma,sans-serif;
}


/* =========================
   DIALOG
========================= */

.menu-dialog {
  box-sizing: border-box;
  direction: rtl;

  width:
    min(620px,calc(100% - 24px));

  max-height: 90vh;
  max-height: 90dvh;

  margin: auto;
  padding: 22px;

  border: 0;
  border-radius: 18px;

  background: #fff;
  color: var(--dark);

  overflow-y: auto;
  overscroll-behavior: contain;

  box-shadow: 0 20px 80px #0003;
}

.menu-dialog::backdrop {
  background: #15272699;
}

body:has(.menu-dialog[open]) {
  overflow: hidden;
}

.dialog-close {
  position: sticky;
  top: 0;
  z-index: 2;

  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  margin: 0 0 8px auto;

  border: 1px solid var(--border);
  border-radius: 50%;

  background: #fff;
  color: var(--brown);

  font: 28px Arial;
}

.detail-photo {
  display: grid;
  place-items: center;
  min-height: 220px;

  border-radius: 12px;

  background:
    linear-gradient(135deg,#ebd8c9,#f4ebe3);

  color: var(--muted);
  font-size: 14px;
}

#dish-title {
  margin: 18px 0 6px;
  font-size: 24px;
  font-weight: 400;
  color: var(--brown);
}

#dish-description {
  font-size: 16px;
  line-height: 1.9;
}

.menu-dialog h3 {
  font-size: 18px;
}

#dish-options fieldset {
  min-width: 0;
  margin: 12px 0;
  padding: 10px 12px;

  border: 1px solid var(--border);
  border-radius: 10px;
}

#dish-options legend {
  padding: 0 6px;
  font-size: 15px;
}

.option-row {
  display: flex;
  align-items: center;
  gap: 10px;

  min-height: 44px;
  padding: 6px 0;

  font-size: 15px;
  cursor: pointer;
}

.option-row input {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin: 0;

  accent-color:
    var(--turquoise-dark);
}

.option-price {
  margin-right: auto;
  white-space: nowrap;
  color: var(--turquoise-dark);
}

.paid-option {
  border-top: 1px solid var(--border);
}

.notes-label {
  display: block;
  margin: 16px 0 8px;
  font-size: 15px;
}

#dish-notes {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;

  border: 1px solid #ccc;
  border-radius: 10px;

  font-size: 16px;
  resize: vertical;
}
.detail-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.quantity-control button {
  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;

  border: 1px solid var(--turquoise);
  border-radius: 50%;

  background: #fff;
  color: var(--turquoise-dark);

  font-size: 23px;
}

.quantity-control output,
.quantity-control span {
  min-width: 22px;
  text-align: center;
}

.primary-button {
  min-height: 44px;
  padding: 11px 17px;

  border: 0;
  border-radius: 10px;

  background: var(--turquoise-dark);
  color: #fff;

  font-size: 16px;
}

.detail-footer .primary-button {
  flex: 1;
}


/* =========================
   CART
========================= */

.cart-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.cart-item h3 {
  margin: 0 0 8px;
  color: var(--brown);
  font-weight: 400;
}

.cart-options {
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.cart-item-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 15px;
}

.text-button {
  padding: 8px;
  border: 0;
  background: none;
  color: var(--turquoise-dark);
  text-decoration: underline;
  font-size: 14px;
}

#cart-total {
  font-weight: bold;
}

.cart-notice {
  color: var(--muted);
  font-size: 14px;
}

/* =========================
   TABLET
========================= */

@media (max-width:950px) {

  .header-main {
    padding-inline: 20px;
  }

  .category-list {
    gap: 24px;
    padding-inline: 20px;
  }

  .dish-grid {
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

  .fattat-content {
    padding-inline: 20px;
  }

  .fattat-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* =========================
   MOBILE
========================= */

@media (max-width:600px) {

  body {
    font-size: 16px;
  }

  .header-main {
    grid-template-columns:
      1fr auto 1fr;

    grid-template-rows:
      58px 46px;

    gap: 0 6px;
    padding: 0 12px 5px;
  }

  .header-left {
    grid-column: 1;
    grid-row: 1;
    gap: 10px;
  }

  .header-right {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
  }

  .home-link {
    padding: 4px;
    border-right: 0;
  }

  .home-link span,
  .basket span,
  .header-divider {
    display: none;
  }

  .home-link svg {
    width: 27px;
    height: 27px;
  }

  .header-left .basket svg {
    width: 25px;
    height: 25px;
  }

  .language-label {
    position: absolute;
    top: 20px;
    right: 14px;
    font-size: 14px;
  }

  .brand {
    top: 29px;
  }

  .brand-logo {
    height: 43px;
    max-width: 170px;
  }

  .search-box {
    direction: rtl;
    height: 39px;
    font-size: 15px;
  }

  .category-list {
    gap: 6px;
    min-height: 49px;
    padding: 5px 10px;
  }

  .category {
    height: 37px;
    padding: 0 12px;
    font-size: 13px;
  }


  .hero {
    min-height: 165px;

    background-image:
      linear-gradient(
        90deg,
        rgba(250,245,240,.99) 0%,
        rgba(250,245,240,.94) 46%,
        rgba(250,245,240,.24) 68%,
        rgba(250,245,240,.05) 100%
      ),
      url("../images/fatteh-hummus.jpg");

    background-position: 82% center;
  }

  .hero-inner {
    position: relative;
    min-height: 165px;
    align-items: flex-start;
    padding: 10px 11px;
  }

  .hero-copy {
    width: 46%;
    max-width: 46%;
  }

  .hero h1 {
    margin-bottom: 4px;
    font-size: 21px;
    line-height: 1.25;
  }

  .hero-subtitle {
    font-size: 13px;
    line-height: 1.45;
  }

  .hero-tagline {
    margin-top: 8px;
    padding-left: 7px;
    font-size: 12px;
    line-height: 1.3;
  }

  .heritage-stroke {
    width: 68px;
    height: 25px;
    margin: 1px 0 0 4px;
  }

  .hero-note {
    position: absolute;
    right: 7px;
    bottom: 6px;

    width: 31%;
    max-width: 31%;

    margin: 0;

    font-size: 12px;
    line-height: 1.4;
  }

  .heritage-arrow {
    width: 62px;
    height: 25px;
    margin-top: 2px;
    transform: translate(-5px,3px);
  }


  .popular-section {
    padding: 4px 11px 32px;
  }

  .section-heading h2 {
    font-size: 19px;
  }

  .section-stroke {
    width: 34px;
    height: 18px;
  }

  .dish-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dish-card {
    display: flex;
    direction: ltr;
    min-height: 78px;
  }

  .dish-image {
    flex: 0 0 96px;
    min-height: 78px;
    font-size: 11px;
  }

  .dish-info {
    flex: 1;
    direction: ltr;
    min-height: 78px;
    padding: 7px 10px;
  }

  .dish-info h3 {
    flex: 1;
    direction: rtl;
    text-align: right;
    font-size: 18px;
  }

  .add-button {
    width: 36px;
    height: 36px;
  }


  .fattat-intro {
    padding: 13px 12px 10px;
  }

  .fattat-story p {
    font-size: 22px;
  }

  .fattat-story-arrow {
    width: 118px;
    height: 39px;
    margin-top: 3px;
    margin-left: 12px;
    stroke-width: 4.5;
    transform: translateX(-9px);
  }


  .fattat-content {
    padding: 12px 11px 40px;
  }

  .fattat-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .fattat-card {
    display: flex;
    direction: ltr;
    min-height: 96px;
  }

  .fattat-card .fattat-image {
    width: 96px;
    flex: 0 0 96px;
    min-height: 96px;
        font-size: 11px;
    text-align: center;
  }

  .fattat-details {
    flex: 1;
    min-width: 0;
    direction: rtl;
    grid-template-columns:
      minmax(0,1fr) auto;

    gap: 5px 8px;
    padding: 10px 12px;
  }

  .fattat-details h2 {
    grid-column: 1 / -1;
    font-size: 17px;
  }

  .fattat-details .fattat-price {
    grid-column: 1;
    grid-row: 2;
    font-size: 14px;
  }

  .quick-control {
    gap: 4px;
    font-size: 14px;
  }

  .quick-control .add-button {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: 23px;
  }


  .menu-dialog {
    padding: 16px;
  }

  .detail-photo {
    min-height: 170px;
  }

  #dish-title {
    font-size: 21px;
  }

  .detail-footer {
    justify-content: center;
  }

  .detail-footer .primary-button {
    flex-basis: 100%;
  }

}


@media (max-width:360px) {

  .hero h1 {
    font-size: 20px;
  }

  .hero-subtitle {
    font-size: 12px;
  }

  .hero-note {
    font-size: 11px;
  }

}


/* =========================
   HOVER
========================= */

@media (hover:hover) {

  .category-list:has(.category:hover)
  .category.active:not(:hover) {
    background: #fff;
    color: var(--turquoise-dark);
  }

  .category:hover {
    background: var(--turquoise);
    color: #fff;
  }

}


main[hidden] {
  display: none !important;
}


/* =========================
   BILINGUAL SUPPORT — AR / EN
========================= */
.language-label {
  text-decoration: none;
}

html[dir="ltr"] .category-list {
  direction: ltr;
  flex-direction: row;
}

html[dir="ltr"] .search-box,
html[dir="ltr"] .search-box span,
html[dir="ltr"] .hero-copy,
html[dir="ltr"] .hero-note,
html[dir="ltr"] .fattat-story,
html[dir="ltr"] .fattat-details,
html[dir="ltr"] .menu-dialog,
html[dir="ltr"] #dish-options,
html[dir="ltr"] .cart-item {
  direction: ltr;
}

html[dir="ltr"] .hero-copy,
html[dir="ltr"] .fattat-details,
html[dir="ltr"] .menu-dialog,
html[dir="ltr"] .cart-item {
  text-align: left;
}

html[dir="ltr"] .hero-tagline {
  text-align: right;
  padding-left: 0;
  padding-right: 20px;
}

html[dir="ltr"] .option-price {
  margin-right: 0;
  margin-left: auto;
}

html[dir="ltr"] .fattat-price {
  direction: ltr;
}


/* =========================
   MENU SEARCH
========================= */
.search-box {
  position: relative;
}

.menu-search-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--dark);
  font: inherit;
}

.menu-search-input::placeholder {
  color: var(--muted);
  opacity: 1;
}

html[dir="rtl"] .menu-search-input {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] .menu-search-input {
  direction: ltr;
  text-align: left;
}

.menu-search-results {
  position: absolute;
  z-index: 3000;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  padding: 6px;
}

.menu-search-results[hidden] {
  display: none !important;
}

.menu-search-result {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: var(--dark);
  font: inherit;
  cursor: pointer;
}

.menu-search-result:hover,
.menu-search-result:focus-visible {
  background: #f6f3f0;
}

.menu-search-result strong {
  font-weight: 400;
  text-align: start;
}

.menu-search-result span {
  flex: none;
  color: var(--turquoise-dark);
  font-weight: 700;
}

.menu-search-empty {
  padding: 11px;
  color: var(--muted);
  text-align: center;
}


/* FINAL WITHOUT PICTURE — deterministic language/nav fixes */
.force-ta-marbuta {
  font-family: Tahoma, Arial, sans-serif !important;
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  line-height: 1;
}

html[lang="en"][dir="ltr"] .category-nav,
html[lang="en"][dir="ltr"] .category-list {
  direction: ltr !important;
}

html[lang="en"][dir="ltr"] .category-list {
  flex-direction: row !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

html[lang="en"][dir="ltr"] .category-list > .category {
  direction: ltr !important;
}
/* =========================
   FINAL IMAGE UPDATE — AR / EN
========================= */

/* Most Popular / main hero group image:
   clearer image with a light overlay so text stays readable */
.hero {
  background-image:
    linear-gradient(
      90deg,
      rgba(250,245,240,.96) 0%,
      rgba(250,245,240,.84) 24%,
      rgba(250,245,240,.12) 56%,
      rgba(250,245,240,.50) 100%
    ),
    url("../images/hero-fatteh-group.png");
  background-size: cover;
  background-position: center;
}

/* Images inside all cards */
.fattat-image,
.dish-image {
  overflow: hidden;
  padding: 0;
}

.fattat-image img,
.dish-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
}


/* Keep the approved Fatteh with Yogurt crop */
.fattat-card[data-id="laban"] .fattat-image img {
  object-position: center center;
}

/* Category intro — option 2: slim, clear group banner beside title/story */
.fattat-intro-inner {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 30px;
  align-items: center;
}

.fattat-intro-inner > h1 {
  grid-column: 1;
  grid-row: 1;
}

.fattat-intro-inner > .fattat-story {
  grid-column: 1;
  grid-row: 2;
}

.category-group-image {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 100%;
  height: 100px;
  overflow: hidden;
  border-radius: 12px;
}

.category-group-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Dish photo inside details dialog */
.detail-photo {
  overflow: hidden;
  padding: 0;
}

.detail-photo img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center center;
}

/* Popular cards are clickable and use the same original dish details */
.popular-dish-card {
  cursor: pointer;
}

@media (max-width: 700px) {
  .fattat-intro-inner {
    grid-template-columns: minmax(135px, .8fr) minmax(0, 1.2fr);
    column-gap: 12px;
  }

  .category-group-image {
    height: 78px;
    border-radius: 10px;
  }

  .detail-photo img {
    height: 170px;
  }
}

/* English keeps the same layout mirrored naturally for LTR */
html[dir="ltr"] .fattat-intro-inner > h1,
html[dir="ltr"] .fattat-intro-inner > .fattat-story {
  text-align: left;
}

/* =========================
   FINAL CORRECTIONS — 03 OCT
========================= */

/* Mobile hero:
   keep title/subtitle/tagline together in the clear left side.
   Keep "from the village..." as its own block so the two groups never overlap. */
@media (max-width:700px) {
  .hero-inner {
    position: relative;
  }

  .hero-copy {
    position: relative;
    z-index: 2;
    width: 46%;
    max-width: 46%;
    margin: 0;
  }

  .hero-note {
    position: absolute;
    z-index: 2;
    right: 7px;
    left: auto;
    bottom: 6px;
    width: 31%;
    max-width: 31%;
    margin: 0;
  }

  html[dir="ltr"] .hero-copy {
    text-align: left;
  }

  html[dir="ltr"] .hero-note {
    right: 7px;
    left: auto;
  }
}

/* All photos inside the dish details/options window are perfectly centered. */
.detail-photo img {
  object-position: center center !important;
}

/* Fatteh with Yogurt card image matches the centering of the other cards. */
.fattat-card[data-id="laban"] .fattat-image img {
  object-position: center center !important;
}


/* =========================================================
   FINAL MENU UPDATES — 04 OCT 2026
   Promotion hooks are ready for later Admin integration.
========================================================= */

.header-call{
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:50%;
  color:var(--turquoise-dark);
  background:#fff;
  text-decoration:none;
  font:22px/1 Arial,sans-serif;
}

/* News / offers ticker */
.news-ticker{
  width:100%;
  overflow:hidden;
  background:#8f2525;
  color:#fff;
  white-space:nowrap;
}
.news-ticker-track{
  display:flex;
  width:max-content;
  align-items:center;
  will-change:transform;
  animation:alkhabiyaTickerAR 24s linear infinite;
}
.news-ticker-track span{
  display:inline-block;
  padding:8px 42px;
  font-family:"FF Hekaya","ADastNevis",Tahoma,Arial,sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1.2;
}
html[dir="ltr"] .news-ticker-track{animation-name:alkhabiyaTickerEN}
@keyframes alkhabiyaTickerAR{
  from{transform:translateX(0)}
  to{transform:translateX(50%)}
}
@keyframes alkhabiyaTickerEN{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .news-ticker-track{animation:none}
}

/* Most Popular: card itself navigates; no + button. */
.popular-section .popular-dish-card .add-button{display:none!important}

/* Desktop hero: heritage phrase is readable; arrow stays turquoise. */
@media (min-width:701px){
  .hero-note{color:var(--brown)!important}
  .heritage-arrow{color:var(--turquoise)!important}
}

/* Mobile hero: only heritage phrase + arrow in the clear left area. */
@media (max-width:700px){
  .hero-copy{display:none!important}
  .hero-note{
    display:block!important;
    position:absolute!important;
    z-index:3;
    left:18px!important;
    right:auto!important;
    top:50%!important;
    bottom:auto!important;
    width:42%!important;
    max-width:42%!important;
    margin:0!important;
    transform:translateY(-50%);
    color:var(--brown)!important;
  }
  .heritage-arrow{color:var(--turquoise)!important}
  .news-ticker-track span{
    padding:7px 30px;
    font-size:16px;
  }
}

/* Ready for future Admin-driven item offers; inactive until used. */
.fattat-card.is-offer .original-price,
.dish-card.is-offer .original-price{
  text-decoration:line-through;
  opacity:.65;
}
.fattat-card.is-offer .offer-price,
.dish-card.is-offer .offer-price{
  color:#8f2525;
}
.offer-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:3px 8px;
  background:#8f2525;
  color:#fff;
  font-size:12px;
  line-height:1;
}


/* News ticker: compact continuous news-style motion, left to right. */
.news-ticker-track{
  gap:0 !important;
  animation:alkhabiyaTickerLTR 30s linear infinite !important;
}
.news-ticker-track span{
  padding:8px 12px !important;
  font-weight:700 !important;
}
@keyframes alkhabiyaTickerLTR{
  from{transform:translateX(-33.3333%)}
  to{transform:translateX(0)}
}

/* Hero: turquoise arrow is enforced on the SVG paths, not only its container. */
.heritage-arrow path{
  fill:var(--turquoise) !important;
}

/* Desktop heritage phrase: bold and clear. */
@media (min-width:701px){
  .hero-note{
    color:var(--brown) !important;
    font-weight:700 !important;
  }
}

/* Mobile: only the heritage phrase + turquoise arrow, larger and farther left. */
@media (max-width:700px){
  .hero-copy{display:none !important}
  .hero-note{
    display:block !important;
    left:2px !important;
    right:auto !important;
    top:50% !important;
    bottom:auto !important;
    width:38% !important;
    max-width:38% !important;
    transform:translateY(-50%) rotate(-4deg) !important;
    color:var(--brown) !important;
    font-size:18px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
    text-align:center !important;
  }
  .heritage-arrow{
    width:82px !important;
    height:29px !important;
    margin:3px auto 0 !important;
    transform:translate(-8px,2px) !important;
  }
  .heritage-arrow path{fill:var(--turquoise) !important}
}



/* Checkout fields + WhatsApp */
.checkout-fields{
  display:grid;
  gap:10px;
  margin:14px 0;
}
.checkout-fields label{
  display:grid;
  gap:5px;
  color:var(--brown);
  font-size:14px;
}
.checkout-fields input,
.checkout-fields select,
.checkout-fields textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--border);
  border-radius:9px;
  background:#fff;
  color:var(--brown);
  padding:10px 11px;
  font:inherit;
}
.checkout-fields textarea{resize:vertical}
.whatsapp-order-button{
  width:100%;
  margin-top:4px;
}
.secondary-button{
  width:100%;
  min-height:42px;
  margin-top:8px;
  border:1px solid var(--turquoise);
  border-radius:10px;
  background:#fff;
  color:var(--turquoise-dark);
  font-size:15px;
}


/* ---------- MASTER INTRO SIZE: FATTAT ---------- */
@media (min-width:701px){
  .fattat-intro{
    box-sizing:border-box !important;
    min-height:134px !important;
    padding:20px 34px 14px !important;
  }
  .fattat-intro-inner{
    min-height:100px !important;
    grid-template-columns:280px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
  }
  .category-group-image{
    height:100px !important;
  }

  /* Home hero uses the exact same outer height as the Fattat intro. */
  .hero{
    min-height:134px !important;
    height:134px !important;
  }
  .hero-inner{
    min-height:134px !important;
    height:134px !important;
    box-sizing:border-box !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }
}

/* ---------- SEAMLESS NEWS TICKER ---------- */
.news-ticker{
  overflow:hidden !important;
}
.news-ticker-track{
  display:flex !important;
  width:max-content !important;
  gap:0 !important;
  animation:alkhabiyaTickerSeamless 32s linear infinite !important;
}
.news-ticker-track span{
  display:inline-flex !important;
  align-items:center !important;
  flex:none !important;
  padding:8px 22px !important;
  font-weight:400 !important;
}
.ticker-separator{
  display:inline-block;
  margin-inline-start:44px;
  font:inherit;
  font-weight:400;
}
@keyframes alkhabiyaTickerSeamless{
  from{transform:translateX(0)}
  to{transform:translateX(-16.6666667%)}
}

/* ---------- TURQUOISE HERITAGE ARROW ---------- */
.heritage-arrow path{
  fill:var(--turquoise) !important;
}

/* ---------- MOBILE HERO: SAME FONT/SIZE, ONLY A LITTLE LEFT ---------- */
@media (max-width:700px){
  .hero-note{
    left:-5px !important;
    right:auto !important;
    font-size:18px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
  }
  .heritage-arrow{
    transform:translate(-13px,2px) !important;
  }
}

/* ---------- MOBILE HEADER: NO OVERLAP ---------- */
.header-call svg{
  display:block;
  width:24px;
  height:24px;
  fill:none;
  stroke:var(--turquoise-dark);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media (max-width:600px){
  .header-main{
    grid-template-columns:minmax(92px,1fr) auto minmax(68px,1fr) !important;
    grid-template-rows:58px 46px !important;
    column-gap:6px !important;
  }
  .header-left{
    grid-column:1 !important;
    grid-row:1 !important;
    gap:9px !important;
    width:auto !important;
    max-width:118px !important;
    overflow:visible !important;
  }
  .header-call{
    width:28px !important;
    height:28px !important;
    flex:0 0 28px !important;
    border-radius:0 !important;
    background:transparent !important;
  }
  .header-call svg{
    width:24px !important;
    height:24px !important;
  }
  .basket{
    position:relative !important;
    flex:0 0 28px !important;
    width:28px !important;
    overflow:visible !important;
  }
  .basket-count{
    position:absolute !important;
    top:-9px !important;
    right:-9px !important;
    min-width:18px !important;
    height:18px !important;
    padding:0 3px !important;
    font-size:10px !important;
    z-index:4 !important;
  }
  .brand{
    top:29px !important;
    left:50% !important;
    z-index:2 !important;
  }
  .brand-logo{
    height:43px !important;
    max-width:170px !important;
  }
  .language-label{
    top:20px !important;
    right:12px !important;
    z-index:3 !important;
  }
}

/* ---------- DELIVERY LOCATION ---------- */
#delivery-fields{
  display:grid;
  gap:10px;
}
#delivery-fields[hidden]{
  display:none !important;
}
.location-button{
  width:100%;
  min-height:42px;
  border:1px solid var(--turquoise);
  border-radius:10px;
  background:#fff;
  color:var(--turquoise-dark);
  font:inherit;
  cursor:pointer;
}
.location-status{
  margin:-3px 0 2px;
  color:var(--muted);
  font-size:13px;
}
.location-status.is-ready{
  color:var(--turquoise-dark);
}


/* NEWS TICKER — smaller, three copies moving together continuously */
.news-ticker{
  overflow:hidden !important;
  min-height:0 !important;
}
.news-ticker-track{
  display:flex !important;
  width:max-content !important;
  gap:0 !important;
  animation:alkhabiyaTickerThree 24s linear infinite !important;
  will-change:transform;
}
.news-ticker-track > span{
  display:inline-flex !important;
  align-items:center !important;
  flex:none !important;
  padding:5px 58px !important;
  font-size:16px !important;
  line-height:1.15 !important;
  font-weight:400 !important;
  white-space:nowrap !important;
}
@keyframes alkhabiyaTickerThree{
  from{transform:translateX(0)}
  to{transform:translateX(-33.333333%)}
}
html[dir="ltr"] .news-ticker-track{
  animation-name:alkhabiyaTickerThree !important;
}

/* HOME HERO — only a little taller than VERIFIED-03 */
@media (min-width:701px){
  .hero{
    min-height:150px !important;
    height:150px !important;
  }
  .hero-inner{
    min-height:150px !important;
    height:150px !important;
    box-sizing:border-box !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }
}

/* MOBILE HERO — same font/size from VERIFIED-03; only move phrase/arrow left */
@media (max-width:700px){
  .hero-note{
    left:-9px !important;
    right:auto !important;
  }
  .heritage-arrow{
    transform:translate(-17px,2px) !important;
  }
}

/* MOBILE HEADER — phone on language side, basket opposite, logo remains centered */
@media (max-width:600px){
  .header-call{
    position:absolute !important;
    top:18px !important;
    right:70px !important;
    left:auto !important;
    margin:0 !important;
    z-index:5 !important;
  }
  .language-label{
    top:20px !important;
    right:12px !important;
  }
}






@media (min-width:701px){
  .fattat-intro{
    box-sizing:border-box !important;
    min-height:134px !important;
    padding:20px 34px 14px !important;
  }

  .fattat-intro-inner{
    min-height:100px !important;
    grid-template-columns:280px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:30px !important;
    align-items:center !important;
  }

  .category-group-image{
    width:100% !important;
    height:100px !important;
    overflow:hidden !important;
    border-radius:12px !important;
  }

  .category-group-image img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  #drinks-page .fattat-intro h1{
    white-space:nowrap !important;
    font-size:30px !important;
    line-height:1.08 !important;
  }
}


@media (min-width:701px){
  .fattat-intro h1{
    white-space:nowrap !important;
    font-size:30px !important;
    line-height:1.08 !important;
  }
}


.news-ticker{
  overflow:hidden !important;
}
.news-ticker-track{
  display:flex !important;
  width:max-content !important;
  gap:0 !important;
  animation:alkhabiyaTickerFour 70s linear infinite !important;
  will-change:transform;
}
.news-ticker-track > span{
  display:inline-flex !important;
  align-items:center !important;
  flex:none !important;
  padding:5px 0 !important;
  font-size:18px !important;
  line-height:1.15 !important;
  font-weight:400 !important;
  white-space:nowrap !important;
}
.news-ticker-track .ticker-separator{
  display:inline-block;
  padding:0 58px;
  font:inherit;
  font-weight:400;
}
@keyframes alkhabiyaTickerFour{
  from{transform:translateX(100vw)}
  to{transform:translateX(-100%)}
}


/* =========================================================
   NEWS TICKER — SEAMLESS LOOP
   Two identical groups; move exactly one group width.
   Keeps the current 70s speed, 18px text and separator spacing.
========================================================= */
.news-ticker{
  overflow:hidden !important;
}

.news-ticker-track{
  display:flex !important;
  width:max-content !important;
  gap:0 !important;
  direction:ltr !important;
  animation:alkhabiyaTickerLoop 70s linear infinite !important;
  will-change:transform;
}

.news-ticker-group{
  display:flex !important;
  flex:none !important;
  width:max-content !important;
  gap:0 !important;
}

.news-ticker-group > span{
  display:inline-flex !important;
  align-items:center !important;
  flex:none !important;
  padding:5px 0 !important;
  font-size:18px !important;
  line-height:1.15 !important;
  font-weight:400 !important;
  white-space:nowrap !important;
}

html[dir="rtl"] .news-ticker-group > span{
  direction:rtl !important;
}

html[dir="ltr"] .news-ticker-group > span{
  direction:ltr !important;
}

.news-ticker-group .ticker-separator{
  display:inline-block;
  padding:0 58px;
  font:inherit;
  font-weight:400;
}

@keyframes alkhabiyaTickerLoop{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}


/* AR ticker = exact EN ticker geometry; only Arabic text/font differs */
html[dir="rtl"] .news-ticker{
  direction:ltr !important;
}

html[dir="rtl"] .news-ticker-track,
html[dir="rtl"] .news-ticker-group{
  direction:ltr !important;
  flex-direction:row !important;
}

html[dir="rtl"] .news-ticker-group > span{
  direction:rtl !important;
  font-family:"FF Hekaya","ADastNevis",Tahoma,Arial,sans-serif !important;
}

/* TICKER SEPARATOR — CENTERED BETWEEN MESSAGES */
.news-ticker-group .ticker-separator{
  display:inline-block !important;
  margin:0 !important;
  margin-inline:0 !important;
  padding-inline:58px !important;
  font:inherit !important;
  font-weight:400 !important;
}


/* EN HERO NOTE — MOBILE POSITION ONLY */
@media (max-width:700px){
  html[dir="ltr"] .hero-note{
    left:18px !important;
    right:auto !important;
    width:38% !important;
    max-width:38% !important;
    text-align:left !important;
  }
}


/* =========================================================
   UPDATE 05 NOV 2026 — readable colors, fonts, motion
   Added at the end on purpose: nothing above was deleted.
========================================================= */

/* White text now sits on the dark turquoise (contrast 5.2:1, was 2.7:1) */
.category.active,
.category:hover,
.add-button,
.basket-count{
  background:var(--turquoise-dark);
}
.category.active{border-color:var(--turquoise-dark)}
@media (hover:hover){
  .category:hover{background:var(--turquoise-dark);border-color:var(--turquoise-dark)}
}

/* Handwritten lines on the cream band: 4.5:1 (was 2.3:1) */
.fattat-story{color:var(--turquoise-dark)}

/* Prices are the first thing customers look for */
.fattat-price{font-weight:700}

/* FF Hekaya only exists in one weight: no fake bold */
.language-label{font-weight:400}

/* One font stack everywhere for the Latin/Arabic system text */
body,button,input,select,textarea{
  font-family:Tahoma,"Segoe UI","Noto Sans Arabic","Geeza Pro",Arial,sans-serif;
}

/* The ticker rules above use !important, so the reduced-motion rule never won */
@media (prefers-reduced-motion:reduce){
  .news-ticker-track{animation:none !important;transform:none !important}
}


/* =========================================================
   UPDATE 06 NOV 2026 — one compact header + equal cards
   Same size in every section, Arabic and English.
========================================================= */

.fattat-intro{
  box-sizing:border-box !important;
  display:flex;
  align-items:center;
  height:84px !important;
  min-height:0 !important;
  padding:0 34px !important;
}
.fattat-intro-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px;
  width:100%;
  min-height:0 !important;
  grid-template-columns:none !important;
  grid-template-rows:none !important;
}
.fattat-intro h1{
  flex:0 0 auto;
  margin:0 !important;
  font-size:30px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
}
.fattat-story{
  display:flex !important;
  flex-direction:column;
  flex:0 1 auto;
  min-width:0;
  max-width:62%;
  margin:0 !important;
}
.fattat-story p{
  max-width:100%;
  white-space:nowrap;
  font-size:26px;
  line-height:1.15;
}
.fattat-story-arrow{
  width:104px;
  height:28px;
  margin:0 0 0 14px !important;
  transform:none;
}

/* Cards: names never push a card taller than its neighbours */
.fattat-details h2,
.dish-info h3{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  line-height:1.35;
  min-height:2.7em;
}
.fattat-image,.dish-image{height:170px;min-height:170px}
.dish-image{height:180px;min-height:180px}

@media (max-width:700px){
  .fattat-intro{height:70px !important;padding:0 12px !important}
  .fattat-intro-inner{gap:10px}
  .fattat-intro h1{font-size:21px !important}
  .fattat-story{max-width:64%}
  .fattat-story p{font-size:20px}
  .fattat-story-arrow{width:78px;height:22px;margin-left:10px !important}
}
@media (max-width:600px){
  .fattat-card{height:112px;min-height:112px}
  .fattat-card .fattat-image{width:112px;flex:0 0 112px;height:112px;min-height:112px}
  .fattat-details{align-content:center}
  .dish-card{height:96px;min-height:96px}
  .dish-image{flex:0 0 96px;height:96px;min-height:96px}
  .dish-info h3{min-height:2.7em}
}

/* Discount note inside the basket */
.discount-note{color:var(--brown);font-weight:700}


/* Desktop: cards line up with the header edge (34px), arrow sits clear of the phrase */
@media (min-width:951px){
  .fattat-content{padding-left:34px;padding-right:34px}
}
.fattat-story-arrow{margin-top:3px !important}