/* =========================================
   1) GLOBAL COLORS & RESET
========================================= */

:root {
  --burgundy:     #6b1f2a;
  --burgundy-dk:  #4e1520;
  --burgundy-lt:  #8b2d3b;
  --burgundy-pale:#f2e8e9;
  --beige:        #f5eed8;
  --beige-dk:     #ede4c8;
  --beige-mid:    #e8dfc0;
  --cream:        #faf6ec;
  --white:        #ffffff;
  --ink:          #1a1210;
  --charcoal:     #3a2d2a;
  --muted:        #7a6a65;
  --border:       rgba(107,31,42,0.15);
  --shadow:       rgba(107,31,42,0.10);
  --allergen-bg:  #fff8f0;
  --allergen-border: rgba(180,80,30,0.25);
  --allergen-text: #7a3a1a;
  --safe-bg:      #f0f8f0;
  --safe-border:  rgba(30,100,50,0.2);
  --safe-text:    #2d6a3a;
}

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

body {
  background: var(--beige);
  font-family: Arial, sans-serif;
  color: var(--text-dark);
}

h1, h2, h3, h4 {
  color: var(--kabdi);
}

a {
  text-decoration: none;
  color: inherit;
}

.hidden {
  display: none !important;
}


/* =========================================
   2) HEADER & NAVBAR
========================================= */

.main-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--kabdi);
  color: var(--white);
  padding: 10px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 18px;
  color: var(--white);
}

.logo img {
  height: 32px;
  width: auto;
  display: block;
}

.top-menu {
  display: flex;
  align-items: center;
}

.top-menu a {
  color: var(--white);
  margin: 0 8px;
  font-size: 14px;
  position: relative;
  padding-bottom: 2px;
}

.top-menu a.active {
  border-bottom: 2px solid var(--white);
}

.top-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: #f1cec6;
  transition: width 0.2s ease;
}

.top-menu a:hover::after {
  width: 100%;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-order-btn {
  background: var(--white);
  color: var(--kabdi);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: bold;
}

.cart-icon {
  font-size: 20px;
  color: var(--white);
}

.login-btn {
  border-radius: 20px;
  border: none;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: bold;
  background: #ffffff;
  color: var(--kabdi);
  cursor: pointer;
}

.login-btn:hover {
  opacity: 0.9;
}

/* Burger icon */

.burger-menu {
  font-size: 20px;
  cursor: pointer;
  margin-left: 10px;
  padding: 10px;
}


/* =========================================
   3) SIDE MENU (BURGER DRAWER)
========================================= */

.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background: #3b2720;
  color: var(--white);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  padding-top: 50px;
  z-index: 1200;
}

.side-menu.open {
  transform: translateX(0);
}

.side-menu a {
  display: block;
  padding: 12px 20px;
  color: var(--white);
  font-size: 14px;
}

.side-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.side-menu .close-btn {
  position: absolute;
  top: 10px;
  right: 18px;
  font-size: 22px;
  cursor: pointer;
}


/* =========================================
   4) GENERIC SECTION WRAPPER
========================================= */

section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 15px;
}


/* =========================================
   5) HOME PAGE – HERO / EXPLORE / DEALS
========================================= */

/* Old small hero card (optional) */

.hero-wrapper {
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 15px;
}

.hero-box {
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10);
}

.hero-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-text {
  padding: 20px 25px;
}

.hero-text h2 {
  font-size: 1.8rem;
  color: #5f1e12;
  margin-bottom: 5px;
}

.hero-text p {
  font-size: 1rem;
  color: #5f1e12;
  opacity: 0.85;
}

/* Full hero background for home page */

.home-page .hero {
  height: 350px;
  background: url("../images/hero1.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--white);
  text-align: center;
  padding: 0 15px;
  background-blend-mode: darken;
  background-color: rgba(0,0,0,0.35);
}

.home-page .hero-content h1 {
  font-size: 32px;
  margin-bottom: 10px;
}

.home-page .hero-content p {
  font-size: 15px;
  margin-bottom: 18px;
  opacity: 0.9;
}

/* Generic buttons */

.btn,
.btn-small,
.btn-outline {
  display: inline-block;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.btn {
  background: var(--white);
  color: var(--kabdi);
}

.btn-outline {
  border: 2px solid var(--white);
  color: var(--white);
  background: transparent;
}

.btn-small {
  background: var(--kabdi);
  color: var(--white);
  padding: 6px 14px;
  font-size: 12px;
}

.btn:hover,
.btn-small:hover,
.btn-outline:hover,
.btn-about-more:hover {
  opacity: 0.9;
}

/* Service bar under hero */

.home-page .service-bar {
  max-width: 1100px;
  margin: 10px auto 0;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  background: #f3f4f8;
  border-radius: 16px;
}

.home-page .service-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-page .service-pill {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid #d0d2e0;
  background: #ffffff;
  font-size: 13px;
  cursor: pointer;
}

.home-page .service-pill.active {
  background: #ffefef;
  border-color: #ff4b4b;
  color: #d51818;
  font-weight: bold;
}

.home-page .location-box {
  text-align: right;
  font-size: 12px;
}

.home-page .location-label {
  display: block;
  font-weight: bold;
}

.home-page .location-sub {
  display: block;
  color: #666;
}

/* Category strip on home */

.home-page .category-strip {
  max-width: 1100px;
  margin: 15px auto 0;
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.home-page .cat-btn {
  border: none;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--white);
  color: var(--kabdi);
  font-size: 13px;
  cursor: pointer;
}

.home-page .cat-btn.active,
.home-page .cat-btn:hover {
  background: var(--kabdi);
  color: var(--white);
}

/* Big hero banner */

.home-hero {
  max-width: 1100px;
  margin: 20px auto 0;
  padding: 0 15px;
  position: relative;
}

.home-hero-img-wrapper {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.home-hero-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.home-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.15)
  );
}

.home-hero-content {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
  max-width: 420px;
}

.home-hero-content h1 {
  font-size: 1.9rem;
  margin-bottom: 6px;
}

.home-hero-content p {
  font-size: 0.95rem;
  margin-bottom: 12px;
  opacity: 0.95;
}

.home-hero-actions {
  display: flex;
  gap: 10px;
}

/* Explore menu row */

.explore-menu {
  max-width: 1100px;
  margin: 25px auto 0;
  padding: 0 15px;
}

.section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.section-head-row h2 {
  font-size: 1.1rem;
}

.view-all-link {
  font-size: 0.8rem;
  color: #b02a1b;
}

.explore-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 0 4px;
}

.explore-scroll::-webkit-scrollbar {
  height: 6px;
}

.explore-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.25);
  border-radius: 999px;
}

.explore-card {
  min-width: 130px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  padding: 10px 10px 12px;
  text-align: center;
  flex-shrink: 0;
}

.explore-card img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 6px;
}

.explore-card h3 {
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.explore-card p {
  font-size: 0.75rem;
  opacity: 0.8;
}

/* Top deals grid */

.top-deals {
  max-width: 1100px;
  margin: 30px auto 0;
  padding: 0 15px;
}

.deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.deal-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.14);
  display: flex;
  flex-direction: column;
}

.deal-card img {
  width: 100%;
  height: 130px;
  object-fit: cover;
}

.deal-body {
  padding: 10px 12px 12px;
}

.deal-body h3 {
  font-size: 0.95rem;
  margin-bottom: 3px;
}

.deal-body p {
  font-size: 0.8rem;
  color: #555;
  margin-bottom: 8px;
}

.deal-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.deal-price {
  font-size: 0.9rem;
  font-weight: bold;
  color: #7a1f0f;
}

/* Best sellers */

.best-sellers {
  max-width: 1100px;
  margin: 30px auto 0;
  padding: 0 15px 10px;
}

.best-sellers h2 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.best-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.best-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

.best-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.best-body {
  padding: 8px 10px 10px;
}

.best-body h3 {
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.best-body p {
  font-size: 0.78rem;
  color: #555;
  margin-bottom: 4px;
}

.best-price {
  font-size: 0.9rem;
  font-weight: bold;
  color: #7a1f0f;
}

/* Promo banners */

.promo-row {
  max-width: 1100px;
  margin: 20px auto 25px;
  padding: 0 15px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.promo-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  color: #ffffff;
}

.promo-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.promo-content {
  position: absolute;
  left: 16px;
  bottom: 14px;
}

.promo-content h3 {
  font-size: 1rem;
  margin-bottom: 2px;
}

.promo-content p {
  font-size: 0.8rem;
  margin-bottom: 4px;
}

/* Home blocks: menu preview / about / gallery */

.home-page .menu-preview h2 {
  text-align: center;
  margin-bottom: 10px;
}

.home-page .menu-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 15px;
}

.home-page .dish-card {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  text-align: left;
}

.home-page .dish-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.home-page .dish-card h3 {
  font-size: 15px;
  margin: 8px 10px 2px;
  color: var(--kabdi);
}

.home-page .dish-card .dish-desc {
  margin: 0 10px 4px;
  font-size: 12px;
}

.home-page .dish-card .dish-price {
  margin: 0 10px 10px;
  font-size: 13px;
  font-weight: bold;
}

.home-page .about-preview {
  max-width: 1100px;
  margin: 10px auto 0;
  padding: 0 15px 20px;
}

.home-page .about-preview h2 {
  font-size: 20px;
  margin-bottom: 6px;
}

.home-page .about-preview p {
  font-size: 14px;
  line-height: 1.4;
}

.home-page .btn-about-more {
  background: var(--kabdi);
  color: var(--white);
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  font-size: 12px;
  cursor: pointer;
  margin-top: 8px;
}

/* Gallery */

.gallery-section {
  max-width: 1100px;
  margin: 25px auto 40px;
  padding: 22px 15px 28px;
  background: var(--beige);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.gallery-section h3 {
  text-align: center;
  font-size: 1.7rem;
  margin-bottom: 4px;
  color: var(--kabdi);
}

.gallery-section p {
  text-align: center;
  margin-bottom: 22px;
  color: #5a4a40;
  font-size: 0.95rem;
}

.gallery-wrapper {
  position: relative;
  overflow: hidden;
}

.gallery-track {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(500, 1fr);
  gap: 18px;
  transition: transform 0.55s ease-in-out;
}

.gallery-track img {
  width: 260px;
  height: 200px;
  object-fit: cover;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery-track img:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

.gallery-next {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: var(--kabdi);
  color: var(--white);
  font-size: 1.8rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  transition: 0.3s ease;
  z-index: 10;
}

.gallery-next:hover {
  transform: translateY(-50%) scale(1.08);
  opacity: 0.95;
}


/* =========================================
   6) ABOUT / FAQ / CONTACT / FORMS
========================================= */

.about-section {
  margin-top: 15px;
}

.about-section h3 {
  margin-bottom: 6px;
  font-size: 18px;
}

.about-section p {
  font-size: 14px;
  margin-bottom: 6px;
  line-height: 1.4;
}

.about-section ul {
  margin-left: 18px;
  margin-top: 6px;
}

.about-section li {
  font-size: 14px;
  margin-bottom: 4px;
}

/* About visual block */

.about-section-visual {
  max-width: 1100px;
  margin: 40px auto;
  padding: 20px 15px;
  display: flex;
  align-items: center;
  gap: 25px;
  background: #fff9f3;
  border-radius: 18px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.10);
  border-left: 6px solid var(--kabdi);
}

.about-photo img {
  width: 260px;
  height: 260px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  border: 4px solid #f1cec6;
}

.about-text h2 {
  color: var(--kabdi);
  font-size: 1.9rem;
  margin-bottom: 10px;
}

.about-text p {
  color: #4a3a33;
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 12px;
}

.about-highlight {
  background: #f2e2d9;
  color: var(--kabdi);
  font-style: italic;
  padding: 10px 14px;
  border-radius: 10px;
  margin-top: 12px;
  border-left: 4px solid var(--kabdi);
}

@media (max-width: 768px) {
  .about-section-visual {
    flex-direction: column;
    text-align: center;
  }

  .about-photo img {
    width: 220px;
    height: 220px;
  }

  .about-text h2 {
    font-size: 1.6rem;
  }
}

/* FAQ */

.faq-container {
  max-width: 1100px;
  margin: 25px auto 40px;
  padding: 0 15px;
}

.faq-container h2 {
  margin-bottom: 10px;
  color: var(--kabdi);
}

.faq-box {
  background: var(--white);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-left: 4px solid var(--kabdi);
}

.faq-box h3 {
  font-size: 1rem;
  margin-bottom: 6px;
  color: var(--kabdi);
}

.faq-box p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #4b3a33;
}

@media (max-width: 600px) {
  .faq-box {
    padding: 12px 13px;
  }

  .faq-box h3 {
    font-size: 0.95rem;
  }

  .faq-box p {
    font-size: 0.85rem;
  }
}

/* Map section */

.map-section {
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 15px 25px;
}

.map-section h2 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: var(--kabdi);
}

.map-placeholder {
  margin-top: 10px;
  background: #e2d2c2;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  border: 1px dashed #b59b83;
}

.map-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.map-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Generic form card */

.form-card {
  max-width: 500px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.form-card h4 {
  margin-bottom: 10px;
}

.form-card label {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: bold;
}

.form-card input,
.form-card select,
.form-card textarea {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border-radius: 8px;
  border: 1px solid #c7b1a0;
  font-size: 13px;
  resize: vertical;
}

.form-card button {
  margin-top: 15px;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: none;
  background: var(--kabdi);
  color: var(--white);
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
}

.message {
  margin-top: 10px;
  font-size: 13px;
}

.message.error {
  color: #b71c1c;
}

.message.success {
  color: #1b5e20;
}


/* =========================================
   7) ORDER PAGE 
========================================= */

.order-page .order-layout {
  max-width: 1200px;
  margin: 25px auto 40px;
  padding: 0 12px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.order-page .order-left {
  flex: 2;
}

.order-page .cart-box {
  flex: 1;
  background: #fff9e7;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 80px;
  margin-left: auto;
}

/* Accordion section (category) */

.order-section {
  margin-bottom: 18px;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.order-sec-toggle {
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: #f5e9da;
  color: var(--kabdi);
  font-weight: bold;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.order-sec-toggle i {
  font-size: 0.8rem;
}

.order-sec-body {
  display: none;
  padding: 8px 10px 10px;
}

.order-sec-body.open {
  display: block;
}

/* Items list inside each section */

.order-page .order-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* One row – item */

.order-page .order-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Image left */

.order-page .order-item img {
  width: 90px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Middle text */

.order-page .order-item-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.order-page .order-item-main h3 {
  font-size: 0.98rem;
  margin-bottom: 3px;
}

.order-page .order-item-main p {
  font-size: 0.8rem;
  color: #555;
}

/* Right side: price + add button */

.order-page .order-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.order-page .order-item-price {
  font-size: 0.9rem;
  font-weight: bold;
  color: #551e12;
}

/* round add button */

.order-add-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: #522121;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

/* Cart */

.order-page .cart-box h3 {
  margin-bottom: 10px;
}

.order-page .cart-items {
  margin-top: 8px;
  font-size: 0.85rem;
}

.order-page .cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.85rem;
}

.order-page .cart-item-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.order-page .cart-minus,
.order-page .cart-plus {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #551e12;
  background: #ffffff;
  color: #551e12;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.order-page .cart-minus:hover,
.order-page .cart-plus:hover {
  background: #551e12;
  color: #ffffff;
}

.order-page .cart-qty {
  min-width: 20px;
  text-align: center;
}

.order-page .cart-line-total {
  font-weight: bold;
}

/* Total block */

.order-page .cart-total {
  border-top: 1px solid #e0d2c5;
  margin-top: 12px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-weight: bold;
}

.order-page .cart-total span:first-child {
  font-size: 0.9rem;
  opacity: 0.8;
}

.order-page .cart-total span:last-child {
  font-size: 1.3rem;
  color: #551e12;
}

/* Confirm button */

.confirm-order-btn {
  margin-top: 12px;
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: bold;
  background: #551e12;
  color: #ffffff;
  cursor: pointer;
  font-size: 0.95rem;
}

.confirm-order-btn:hover {
  opacity: 0.9;
}

.cart-note {
  margin-top: 8px;
  font-size: 0.75rem;
  opacity: 0.8;
}


/* =========================================
   8) MENU PAGE – CATEGORY CARDS & FULL MENU
========================================= */

.category-wrapper {
  max-width: 1100px;
  margin: 25px auto 10px;
  padding: 0 15px;
}

.category-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.category-card {
  flex: 0 0 auto;
  min-width: 160px;
  background: var(--white);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  border: 2px solid transparent;
  cursor: pointer;
  color: var(--text-dark);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.category-card h3 {
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--kabdi);
}

.category-card p {
  font-size: 11px;
  opacity: 0.8;
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.09);
  border-color: var(--kabdi);
}

/* Sections */

.menu-section {
  max-width: 1100px;
  margin: 10px auto 30px;
  padding: 0 15px;
}

.section-title {
  font-size: 20px;
  margin-bottom: 14px;
  color: var(--kabdi);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

/* KFC-style cards – unified */

.kfc-card {
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: 1px solid #e7d9ca;
}

.kfc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.kfc-img {
  background: var(--beige);
  padding: 16px 0 8px;
  text-align: center;
}

.kfc-img img {
  max-width: 85%;
  max-height: 160px;
  object-fit: contain;
}

/* دعم كل من kfc-content و kfc-body لنفس التصميم */
.kfc-content,
.kfc-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kfc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--kabdi);
}

.kfc-desc {
  font-size: 12px;
  line-height: 1.45;
  color: #5a4a40;
}

.kfc-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 13px;
}

.kfc-price {
  font-weight: 700;
  color: var(--kabdi);
}

/* Customize button */

.customize-btn {
  border-radius: 999px;
  padding: 6px 14px;
  border: 1px solid var(--kabdi);
  background: var(--white);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: var(--kabdi);
  text-transform: uppercase;
}

.customize-btn:hover {
  background: var(--kabdi);
  color: var(--white);
}

/* Add to cart button */

.add-cart-btn {
  margin-top: 10px;
  display: block;
  width: 100%;
  text-align: center;
  border-radius: 999px;
  padding: 9px 0;
  background: var(--kabdi);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  letter-spacing: 0.4px;
}

.add-cart-btn:hover {
  opacity: 0.9;
}

@media (max-width: 768px) {
  .category-card {
    min-width: 140px;
  }

  .kfc-img img {
    max-height: 140px;
  }
}


<!--footer-->
.footer {
  background: #111;
  color: #fff;
  padding: 40px 20px 20px;
}

.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-logo {
  font-size: 28px;
  font-weight: 700;
  color: #d4af37;
}

.footer-tagline {
  margin: 8px 0;
  opacity: .9;
}

.footer-contact {
  margin-top: 15px;
}

.contact-link {
  display: block;
  color: #fff;
  text-decoration: none;
  margin-bottom: 10px;
  transition: .3s;
}

.contact-link:hover {
  color: #d4af37;
}

.contact-link i {
  margin-left: 8px;
}

.footer-social-wrap h4 {
  color: #d4af37;
  margin-bottom: 15px;
}

.footer-social-row {
  display: flex;
  gap: 15px;
}

.footer-social {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  transition: .3s;
}

.footer-social:hover {
  background: #d4af37;
  color: #111;
  transform: translateY(-3px);
}

.footer-small {
  margin-top: 15px;
  opacity: .8;
}

.footer-note,
.footer-copy {
  text-align: center;
  font-size: 12px;
  opacity: .75;
  margin-top: 15px;
}

.logo-footer {
  text-align: center;
  margin-top: 15px;
}

.logo-footer img {
  height: 40px;
}
.footer-contact a{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    align-items: center;
    gap: 8px;
}

.footer-contact a:hover{
    color: #d4af37;
}


@media (max-width:768px) {
  .footer-main {
    flex-direction: column;
    text-align: center;
  }

  .footer-social-row {
    justify-content: center;
  }
}
.news-ticker{
    position: sticky;
    top: 68px;
    z-index: 999;
   background: #4c0b0b;
    color: #fffdfd;
    height: 42px;
    overflow: hidden;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-weight: 700;
}

.news-track{
    display: inline-block;
    white-space: nowrap;
    animation: ticker 20s linear infinite;
}

@keyframes ticker{
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(100%);
    }
}

.special-offer-card{
    grid-column:1/-1;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    margin-bottom:20px;
}

.offer-img{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
}

.offer-content{
    padding:20px;
    text-align:center;
}

.offer-badge{
    display:inline-block;
    background:#d4af37;
    color:#6b1f2a;
    padding:8px 18px;
    border-radius:50px;
    font-weight:700;
}

.offer-content h3{
    color:#6b1f2a;
    font-size:34px;
    margin:15px 0;
}

.offer-content p{
    line-height:1.8;
    margin-bottom:15px;
}

.offer-time{
    background:#6b1f2a;
    color:#fff;
    padding:10px 15px;
    border-radius:10px;
    display:inline-block;
}

.slide-img-wrap{
    height: 420px; /* زيد الرقم حسب الحاجة */
    overflow: hidden;
}

.slide-img-wrap img{
    width: 100%;
    height: 100%;
    object-fit: contain; /* بدل cover */
    object-position: center;
}
/* =========================================
   10) AUTH / USER BADGE
========================================= */

.user-badge {
  background: #ffffff;
  color: #551e12;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: bold;
}

/* Auth modal */

.auth-modal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.auth-box {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px 20px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
  z-index: 2001;
}

.auth-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.auth-tab {
  flex: 1;
  border: none;
  background: #f3e2d6;
  padding: 8px 0;
  font-size: 14px;
  cursor: pointer;
}

.active-auth-tab {
  background: #551e12;
  color: #fff;
  font-weight: bold;
}

.auth-close {
  margin-left: 8px;
  cursor: pointer;
  font-size: 20px;
}

.auth-form label {
  font-size: 13px;
  font-weight: bold;
  margin-top: 8px;
  display: block;
}

.auth-form input {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border-radius: 8px;
  border: 1px solid #c7b1a0;
  font-size: 13px;
}

.auth-submit-btn {
  margin-top: 12px;
  width: 100%;
  padding: 9px;
  border-radius: 999px;
  border: none;
  background: #551e12;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.auth-submit-btn:hover {
  opacity: 0.9;
}

.forgot-link {
  display: block;
  margin: 6px 0 10px;
  font-size: 12px;
  text-align: right;
  color: #551e12;
  text-decoration: none;
}

.forgot-link:hover {
  text-decoration: underline;
}


/* =========================================
   11) PRIVACY POLICY PAGE
========================================= */

.policy-wrapper {
  max-width: 1100px;
  margin: 30px auto 40px;
  padding: 0 15px 30px;
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 24px;
}

/* Sidebar list */

.policy-toc {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  padding: 16px 14px;
  position: sticky;
  top: 90px;
  align-self: flex-start;
}

.policy-toc h3 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: var(--kabdi);
}

.policy-toc a {
  display: block;
  font-size: 0.85rem;
  padding: 6px 8px;
  border-left: 3px solid transparent;
  color: #5a463d;
  margin-bottom: 3px;
  border-radius: 4px;
  transition: 0.18s ease;
}

.policy-toc a:hover {
  border-left-color: var(--kabdi);
  background: rgba(85, 30, 18, 0.07);
  color: var(--kabdi);
}

/* Policy content */

.policy-content {
  background: #fff9f3;
  border-radius: 16px;
  padding: 20px 18px 24px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.06);
}

.policy-content h2 {
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: var(--kabdi);
  scroll-margin-top: 100px;
}

.policy-content p,
.policy-content li {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #4a3a33;
  margin-bottom: 8px;
}

.policy-content ol {
  margin-left: 18px;
  margin-top: 6px;
  margin-bottom: 8px;
}

.back-to-top {
  display: inline-block;
  font-size: 0.8rem;
  margin: 8px 0 18px;
  color: #b02a1b;
  cursor: pointer;
}

.back-to-top:hover {
  text-decoration: underline;
}

/* Information sharing table */

.sharing-table {
  margin: 10px 0 14px;
  border-radius: 10px;
  border: 1px solid #e1c9b6;
  overflow: hidden;
}

.sharing-row {
  display: grid;
  grid-template-columns: 3fr 1fr;
  padding: 10px 12px;
  font-size: 0.85rem;
  border-bottom: 1px solid #ecd9c7;
}

.sharing-row:last-child {
  border-bottom: none;
}

.sharing-where {
  color: #4a3a33;
}

.sharing-limit {
  text-align: right;
  color: var(--kabdi);
  font-weight: bold;
}

.policy-effective {
  font-size: 0.8rem;
  opacity: 0.75;
  margin-top: 10px;
}

/* Policy responsive */

@media (max-width: 768px) {
  .policy-wrapper {
    grid-template-columns: 1fr;
  }

  .policy-toc {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .policy-toc a {
    border-left: none;
    border-radius: 999px;
    background: #f4e1d4;
    padding: 5px 10px;
  }

  .policy-toc a:hover {
    background: var(--kabdi);
    color: #fff;
  }

  .sharing-row {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  .sharing-limit {
    text-align: left;
  }
}


/* =========================================
   12) RESPONSIVE ADJUSTMENTS
========================================= */

@media (max-width: 900px) {
  .order-page .order-layout {
    flex-direction: column;
  }

  .order-page .cart-box {
    position: static;
    width: 100%;
  }

  .home-page .service-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 650px) {
  .order-page .order-layout {
    padding-bottom: 190px;
  }

  .order-page .cart-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.12);
  }
}

@media (max-width: 600px) {
  .main-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .header-order-btn {
    font-size: 12px;
    padding: 5px 10px;
  }

  .top-menu {
    font-size: 13px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .menu-page .dish-card {
    padding: 10px;
  }

  .menu-page .dish-card img {
    width: 95px;
    height: 85px;
  }

  .menu-page .category-card {
    border-radius: 24px;
    padding: 16px 18px;
  }
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Tajawal', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--beige); }
::-webkit-scrollbar-thumb { background: var(--burgundy-lt); border-radius: 2px; }

/* ── HEADER ── */
header {
  position: sticky;
  top: 0; z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  box-shadow: 0 2px 20px var(--shadow);
  transition: box-shadow 0.3s;
}

.logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}
.logo-en {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 7px;
  color: var(--burgundy);
}
.logo-ar {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 2px;
  color: var(--muted);
  margin-top: 2px;
}

nav { display: flex; gap: 32px; align-items: center; }
nav a {
  text-decoration: none;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--charcoal);
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s;
}
nav a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1.5px;
  background: var(--burgundy);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
nav a:hover { color: var(--burgundy); }
nav a:hover::after { transform: scaleX(1); }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
}
.burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--burgundy);
  transition: all 0.3s ease;
}

/* ── HERO ── */
.hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--cream) 0%, var(--beige) 50%, var(--beige-dk) 100%);
}
.hero-ornament {
  position: absolute;
  border: 1px solid rgba(107,31,42,0.08);
  border-radius: 50%;
}
.hero-ornament:nth-child(1) { width: 500px; height: 500px; top: -100px; left: -100px; }
.hero-ornament:nth-child(2) { width: 320px; height: 320px; bottom: -60px; right: -60px; }
.hero-ornament:nth-child(3) { width: 180px; height: 180px; bottom: 60px; right: 80px; border-color: rgba(107,31,42,0.06); }

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  padding: 0 32px;
  animation: heroIn 1s ease forwards;
}
@keyframes heroIn {
  from { opacity:0; transform: translateY(30px); }
  to   { opacity:1; transform: translateY(0); }
}
.hero-badge {
  display: inline-block;
  background: var(--burgundy-pale);
  border: 1px solid rgba(107,31,42,0.2);
  color: var(--burgundy);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 4px;
  padding: 6px 20px;
  margin-bottom: 28px;
  text-transform: uppercase;
}
.hero-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(52px, 10vw, 108px);
  font-weight: 700;
  color: var(--burgundy);
  letter-spacing: 10px;
  line-height: 0.85;
  margin-bottom: 16px;
}
.hero-title span {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(15px, 2.5vw, 22px);
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 4px;
  margin-top: 14px;
}
.hero-sub {
  font-size: clamp(13px, 1.8vw, 16px);
  color: var(--muted);
  font-weight: 300;
  margin: 20px auto 0;
  max-width: 460px;
}
.hero-cta {
  display: inline-block;
  margin-top: 40px;
  background: var(--burgundy);
  color: var(--white);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 40px;
  border: 1px solid var(--burgundy);
  transition: all 0.3s ease;
}
.hero-cta:hover { background: transparent; color: var(--burgundy); }

/* ── DIVIDER ── */
.sec-divider { display: flex; align-items: center; gap: 16px; margin: 0 auto 48px; max-width: 280px; }
.sec-divider-line { flex: 1; height: 0.5px; background: linear-gradient(to right, transparent, rgba(107,31,42,0.3)); }
.sec-divider-line.rev { background: linear-gradient(to left, transparent, rgba(107,31,42,0.3)); }
.sec-divider-gem { width: 6px; height: 6px; background: var(--burgundy); transform: rotate(45deg); flex-shrink: 0; }

/* ── SECTION HEADER ── */
.sec-header { text-align: center; margin-bottom: 56px; }
.sec-tag { display: block; font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 5px; color: var(--burgundy-lt); text-transform: uppercase; margin-bottom: 10px; }
.sec-title { font-family: 'Cinzel', serif; font-size: clamp(28px, 4vw, 44px); font-weight: 700; color: var(--burgundy); letter-spacing: 4px; margin-bottom: 4px; }
.sec-title-ar { font-family: 'Tajawal', sans-serif; font-size: clamp(15px, 2vw, 19px); font-weight: 300; color: var(--muted); }

/* ── SLIDER SECTION ── */
#showcase {
  padding: 80px 0 60px;
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.slider-wrap { max-width: 900px; margin: 0 auto; padding: 0 32px; }
.slider-container {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 40px var(--shadow), 0 2px 8px rgba(107,31,42,0.06);
  display: flex;
  align-items: stretch;
  min-height: 280px;
}
.slide { display: none; width: 100%; align-items: center; gap: 0; animation: slideIn 0.4s ease; }
.slide.active { display: flex; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.slide-img-wrap {
  flex: 0 0 52%;
  position: relative;
  overflow: hidden;
  border-radius: 20px 0 0 20px;
  background: var(--beige-dk);
  min-height: 280px;
}
.slide-img-wrap img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; display:block; }
.slide-img-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:rgba(107,31,42,0.25); }
.slide-img-placeholder svg { width:48px; height:48px; opacity:0.35; }
.slide-img-placeholder span { font-family:'Cinzel',serif; font-size:9px; letter-spacing:2px; opacity:0.4; }
.slide-info { flex:1; padding:40px 40px 40px 36px; display:flex; flex-direction:column; justify-content:center; text-align:center; }
.slide-tag { font-family:'Cinzel',serif; font-size:8px; letter-spacing:3px; color:var(--burgundy-lt); text-transform:uppercase; margin-bottom:12px; opacity:0.7; }
.slide-name-ar { font-family:'Tajawal',sans-serif; font-size:26px; font-weight:700; color:var(--burgundy); margin-bottom:4px; line-height:1.2; }
.slide-name-en { font-family:'Cormorant Garamond',serif; font-size:16px; font-weight:300; font-style:italic; color:var(--muted); margin-bottom:24px; }
.slide-price-wrap { display:flex; align-items:baseline; justify-content:center; gap:6px; margin-bottom:8px; }
.slide-price-label { font-family:'Cinzel',serif; font-size:9px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; }
.slide-price { font-family:'Cormorant Garamond',serif; font-size:48px; font-weight:300; color:var(--burgundy); line-height:1; }
.slide-price sup { font-size:14px; vertical-align:super; font-family:'Cinzel',serif; color:var(--burgundy-lt); }
.slide-desc { font-size:12px; color:var(--muted); font-weight:300; margin-top:8px; }

.slider-controls { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:28px; }
.slider-btn { width:40px; height:40px; border:1px solid var(--border); background:var(--white); color:var(--burgundy); font-size:18px; cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.3s ease; line-height:1; }
.slider-btn:hover { background:var(--burgundy); color:var(--white); border-color:var(--burgundy); }
.slider-dots { display:flex; gap:8px; align-items:center; }
.dot { width:6px; height:6px; border-radius:50%; background:rgba(107,31,42,0.2); cursor:pointer; transition:all 0.3s ease; }
.dot.active { background:var(--burgundy); width:20px; border-radius:3px; }

/* ── MENU SECTION ── */
#menu { padding: 100px 0; background: var(--cream); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* TABS */
.category-tabs { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:56px; }
.tab-btn { background:var(--white); border:1px solid var(--border); color:var(--muted); font-family:'Tajawal',sans-serif; font-size:13px; font-weight:400; padding:9px 22px; cursor:pointer; border-radius:100px; transition:all 0.3s ease; }
.tab-btn:hover { border-color:var(--burgundy-lt); color:var(--burgundy); background:var(--burgundy-pale); }
.tab-btn.active { background:var(--burgundy); border-color:var(--burgundy); color:var(--white); font-weight:500; }

/* CATEGORIES */
.menu-category { display: none; }
.menu-category.active { display: block; animation: fadeUp 0.4s ease; }
@keyframes fadeUp { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }

/* NOTE BAR */
.category-note {
  background: var(--burgundy-pale);
  border: 1px solid rgba(107,31,42,0.12);
  border-right: 3px solid var(--burgundy);
  padding: 14px 20px;
  margin-bottom: 40px;
  font-size: 13px;
  color: var(--charcoal);
  font-weight: 300;
  line-height: 1.9;
  border-radius: 0 8px 8px 0;
}

/* MENU GRID */
.menu-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }

/* MENU CARD */
.menu-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(107,31,42,0.04);
  display: flex;
  flex-direction: column;
}
.menu-card:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(107,31,42,0.10); border-color:rgba(107,31,42,0.25); }

.card-img-wrap { position:relative; height:160px; background:var(--beige); overflow:hidden; flex-shrink:0; }
.card-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease; }
.menu-card:hover .card-img-wrap img { transform:scale(1.04); }
.card-img-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.card-img-placeholder svg { width:36px; height:36px; opacity:0.2; color:var(--burgundy); }

.card-body { padding:20px 22px 22px; flex:1; display:flex; flex-direction:column; }
.card-name-en { font-family:'Cinzel',serif; font-size:11px; font-weight:600; color:var(--muted); letter-spacing:1.5px; margin-bottom:4px; text-transform:uppercase; }
.card-name-ar { font-family:'Tajawal',sans-serif; font-size:18px; font-weight:700; color:var(--burgundy); margin-bottom:10px; line-height:1.2; }

/* ── ALLERGEN BADGE ── */
.allergen-tag {
  display: inline-flex;
  align-items: flex-start;
  gap: 5px;
  background: var(--allergen-bg);
  border: 1px solid var(--allergen-border);
  border-radius: 6px;
  padding: 5px 9px;
  margin-bottom: 14px;
  font-size: 11px;
  color: var(--allergen-text);
  font-weight: 400;
  line-height: 1.45;
  font-family: 'Tajawal', sans-serif;
}
.allergen-tag .a-icon { flex-shrink:0; font-size:12px; margin-top:1px; }
.allergen-tag.safe {
  background: var(--safe-bg);
  border-color: var(--safe-border);
  color: var(--safe-text);
}
.allergen-tag.warn-peanut {
  background: #fff3e0;
  border-color: rgba(200,100,0,0.3);
  color: #7a4000;
}

/* SHAKE ALLERGEN */
.shake-allergen {
  font-size: 10.5px;
  color: var(--allergen-text);
  background: var(--allergen-bg);
  border: 1px solid var(--allergen-border);
  border-radius: 5px;
  padding: 3px 7px;
  margin: 4px 0 10px;
  display: inline-block;
  font-family: 'Tajawal', sans-serif;
  line-height: 1.4;
}
.shake-allergen.safe { background:var(--safe-bg); border-color:var(--safe-border); color:var(--safe-text); }

.price-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-top:auto; }
.price-chip { display:flex; flex-direction:column; align-items:center; background:var(--burgundy); border:1px solid var(--border); border-radius:10px; padding:8px 14px; min-width:70px; }
.price-chip-label { font-family:'Cinzel',serif; font-size:8px; letter-spacing:1.5px; color:var(--burgundy-pale); text-transform:uppercase; margin-bottom:3px; }
.price-chip-value { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:400; color:var(--burgundy-pale); line-height:1; }
.price-chip-value sup { font-size:10px; vertical-align:super; font-family:'Cinzel',serif; color:var(--allergen-bg); }
.price-flat { background:var(--burgundy); border-radius:10px; padding:8px 20px; display:inline-flex; align-items:center; gap:6px; }
.price-flat .price-chip-value { color:var(--white); }
.price-flat .price-chip-value sup { color:rgba(255,255,255,0.6); }

/* COMBO GRID */
.combo-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }

/* SHAKE GRID */
.shake-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:16px; }
.shake-card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:28px 20px; text-align:center; transition:all 0.3s ease; box-shadow:0 2px 12px rgba(107,31,42,0.04); }
.shake-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(107,31,42,0.10); border-color:rgba(107,31,42,0.25); }
.shake-icon { font-size:32px; display:block; margin-bottom:10px; }
.shake-name-ar { font-family:'Tajawal',sans-serif; font-size:16px; font-weight:700; color:var(--burgundy); margin-bottom:2px; }
.shake-name-en { font-family:'Cinzel',serif; font-size:8px; letter-spacing:2px; color:var(--muted); margin-bottom:4px; display:block; }
.shake-price { font-family:'Cormorant Garamond',serif; font-size:28px; color:var(--burgundy); font-weight:300; }
.shake-price sup { font-size:11px; vertical-align:super; font-family:'Cinzel',serif; color:var(--burgundy-lt); }

/* DRINKS GRID */
.drinks-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px; }

/* ── CROSS-CONTAMINATION BANNER ── */
.cross-contamination-banner {
  background: linear-gradient(135deg, #4e1520 0%, #6b1f2a 100%);
  color: rgba(255,255,255,0.92);
  padding: 28px 40px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.cross-contamination-banner .banner-icon { font-size: 28px; margin-bottom: 10px; display: block; }
.cross-contamination-banner .banner-title {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(245,238,216,0.7);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.cross-contamination-banner .banner-text {
  font-family: 'Tajawal', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto;
  color: rgba(255,255,255,0.85);
}

/* ── FOOTER ── */
footer { background:var(--burgundy-dk); color:rgba(255,255,255,0.7); padding:60px 32px 40px; text-align:center; }
.footer-logo { font-family:'Cinzel',serif; font-size:34px; font-weight:700; letter-spacing:12px; color:var(--white); margin-bottom:8px; }
.footer-tagline { font-family:'Cormorant Garamond',serif; font-size:15px; font-style:italic; color:rgba(245,238,216,0.55); letter-spacing:2px; margin-bottom:32px; }
.footer-divider { width:200px; height:0.5px; background:rgba(245,238,216,0.15); margin:0 auto 28px; }
.footer-copy { font-family:'Cinzel',serif; font-size:10px; letter-spacing:2px; color:rgba(245,238,216,0.35); }

/* ── MOBILE NAV ── */
.mobile-nav { display:none; position:fixed; inset:0; background:var(--white); z-index:2000; flex-direction:column; align-items:center; justify-content:center; gap:36px; }
.mobile-nav.open { display:flex; }
.mobile-nav a { font-family:'Cinzel',serif; font-size:16px; letter-spacing:5px; color:var(--charcoal); text-decoration:none; text-transform:uppercase; transition:color 0.3s; }
.mobile-nav a:hover { color:var(--burgundy); }
.mobile-nav-close { position:absolute; top:20px; left:20px; background:none; border:none; color:var(--burgundy); font-size:22px; cursor:pointer; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) { .slide-img-wrap { flex: 0 0 45%; } }
@media (max-width: 680px) {
  header { padding: 0 20px; }
  nav { display: none; }
  .burger { display: flex; }
  .slider-container { flex-direction:column; min-height:auto; border-radius:16px; }
  .slide-img-wrap { flex:0 0 200px; border-radius:16px 16px 0 0; min-height:200px; width:100%; }
  .slide-info { padding:28px 24px 32px; }
  .menu-grid { grid-template-columns:1fr; }
  .combo-grid { grid-template-columns:1fr 1fr; }
  .shake-grid { grid-template-columns:1fr 1fr; }
  .drinks-grid { grid-template-columns:1fr 1fr; }
  #menu { padding:70px 0; }
  .container { padding:0 16px; }
  .cross-contamination-banner { padding:24px 20px; }
}
@media (max-width: 400px) { .combo-grid { grid-template-columns:1fr; } }

#backToTop{
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: #6b1f2a;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: none;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    transition: all .3s ease;
}

#backToTop:hover{
    transform: translateY(-3px);
}

#backToTop.show{
    display: block;
}


<!--footer-->
.footer {
  background: #111;
  color: #fff;
  padding: 40px 20px 20px;
}

.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-logo {
  font-size: 28px;
  font-weight: 700;
  color: #d4af37;
}

.footer-tagline {
  margin: 8px 0;
  opacity: .9;
}

.footer-contact {
  margin-top: 15px;
}

.contact-link {
  display: block;
  color: #fff;
  text-decoration: none;
  margin-bottom: 10px;
  transition: .3s;
}

.contact-link:hover {
  color: #d4af37;
}

.contact-link i {
  margin-left: 8px;
}

.footer-social-wrap h4 {
  color: #d4af37;
  margin-bottom: 15px;
}

.footer-social-row {
  display: flex;
  gap: 15px;
}

.footer-social {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  transition: .3s;
}

.footer-social:hover {
  background: #d4af37;
  color: #111;
  transform: translateY(-3px);
}

.footer-small {
  margin-top: 15px;
  opacity: .8;
}

.footer-note,
.footer-copy {
  text-align: center;
  font-size: 12px;
  opacity: .75;
  margin-top: 15px;
}

.logo-footer {
  text-align: center;
  margin-top: 15px;
}

.logo-footer img {
  height: 40px;
}
.footer-contact a{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    align-items: center;
    gap: 8px;
}

.footer-contact a:hover{
    color: #d4af37;
}


@media (max-width:768px) {
  .footer-main {
    flex-direction: column;
    text-align: center;
  }

  .footer-social-row {
    justify-content: center;
  }
}
.news-ticker{
    position: sticky;
    top: 68px;
    z-index: 999;
   background: #4c0b0b;
    color: #fffdfd;
    height: 42px;
    overflow: hidden;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-weight: 700;
}

.news-track{
    display: inline-block;
    white-space: nowrap;
    animation: ticker 20s linear infinite;
}

@keyframes ticker{
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(100%);
    }
}

.special-offer-card{
    grid-column:1/-1;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    margin-bottom:20px;
}

.offer-img{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
}

.offer-content{
    padding:20px;
    text-align:center;
}

.offer-badge{
    display:inline-block;
    background:#d4af37;
    color:#6b1f2a;
    padding:8px 18px;
    border-radius:50px;
    font-weight:700;
}

.offer-content h3{
    color:#6b1f2a;
    font-size:34px;
    margin:15px 0;
}

.offer-content p{
    line-height:1.8;
    margin-bottom:15px;
}

.offer-time{
    background:#6b1f2a;
    color:#fff;
    padding:10px 15px;
    border-radius:10px;
    display:inline-block;
}

.slide-img-wrap{
    height: 420px; /* زيد الرقم حسب الحاجة */
    overflow: hidden;
}

.slide-img-wrap img{
    width: 100%;
    height: 100%;
    object-fit: contain; /* بدل cover */
    object-position: center;
}