.menuContainer {
  overflow: auto;
  scrollbar-width: none;
}

.itemDescription {
  font-size: 14px !important;
  transition: color 0.3s ease;
}

.cover {
  width: 100%;
  height: "auto";
  object-fit: cover;
}

/* .restaurantHeader {
  margin-bottom: 24px;
} */

.leftShape {
  position: absolute;
  top: 133px;
  width: 47px;
  height: 50px;
  left: -11px;
  background-color: var(--background); /* Color of the shape */
  clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
}

:global(.darkApp) .leftShape {
  background-color: var(--background);
}

.rightShape {
  position: absolute;
  top: 133px;
  width: 47px;
  height: 50px;
  left: 102px;
  background-color: var(--background); /* Color of the shape */
  clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
  transform: scale(-1, 1); /* Mirror the shape on the Y-axis */
}

:global(.darkApp) .rightShape {
  background-color: var(--background);
}

.logo {
  position: absolute;
  left: 19px;
  top: -64px;
  border-radius: 50%;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
  z-index: 111;
  width: 70px !important;
  height: 70px !important;
  border-image-source: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

:global(.darkApp) .logo {
  border-color: var(--background);
}

:global(.ant-app-rtl) .logo {
  right: 19px;
}

.services {
  height: 36px;
  position: absolute;
  left: 105px;
  top: 163px;
  border-radius: 154px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 6px 9px;
  display: flex;
  gap: 8px;
  z-index: 999;
}

.serviceButton {
  height: 24px;
  color: #99a2ae;
  background-color: #f7f7f7;
  border: none;
  padding: 8px;
  font-size: 16px;
}

.activeServiceButton {
  height: 24px;
  border: none;
  color: var(--primary);
  background-color: rgba(255, 183, 0, 0.12);
  font-size: 16px;
  padding: 8px;
}

.activeServiceButton path {
  fill: var(--primary);
}

.logo[dir="rtl"] {
  right: 20px;
  left: auto;
}

.headerContainer {
  margin: 5px 0px;
}

/* Enhanced responsive item description */

.pageContainer {
  padding: 0;
  transition: all 0.3s ease;
  background-color: "#F7F7F7";
}

/* Sidebar state adjustments */
.sidebarCollapsed .pageContainer {
  margin-left: 80px;
}

.sidebarExpanded .pageContainer {
  margin-left: 200px;
}

:global(.darkApp) .restaurantHeader path {
  fill: none !important;
  stroke: #ffffff !important;
}

/* Enhanced Dark theme styles */
:global(.darkApp) .itemName {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: color 0.3s ease;
}

:global(.darkApp) .itemName:hover {
  color: var(--primary) !important;
}

:global(.darkApp) .itemDescription {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

:global(.darkApp) .itemPrice {
  color: var(--primary) !important;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

:global(.darkApp) .categoryTab {
  color: rgba(255, 255, 255, 0.75) !important;
  background-color: rgba(42, 42, 42, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}

:global(.darkApp) .categoryTab:hover {
  color: var(--primary) !important;
  background-color: rgba(54, 54, 54, 0.9) !important;
  border-color: rgba(255, 198, 0, 0.3) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

:global(.darkApp) .categoryTab.active {
  color: var(--primary) !important;
  background-color: rgba(255, 198, 0, 0.1) !important;
  border-bottom-color: var(--primary) !important;
  box-shadow: 0 2px 8px rgba(255, 198, 0, 0.2);
}

/* Enhanced dark theme for page container */
:global(.darkApp) .pageContainer {
  color: #ffffff;
}

:global(.darkApp) .pageContainer h1,
:global(.darkApp) .pageContainer h2,
:global(.darkApp) .pageContainer h3,
:global(.darkApp) .pageContainer h4,
:global(.darkApp) .pageContainer h5,
:global(.darkApp) .pageContainer h6 {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Dark theme for menu items */
:global(.darkApp) .menuItem {
  background-color: #181818 !important;
  border-color: #363636 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

:global(.darkApp) .menuItem:hover {
  background-color: #363636 !important;
  border-color: #424242 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Dark theme for restaurant header */

:global(.darkApp) .restaurantLogo {
  border-color: rgba(255, 198, 0, 0.3) !important;
}

/* Dark theme for navigation buttons */
:global(.darkApp) .navButton {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

:global(.darkApp) .navButton:hover {
  background-color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Dark theme for search functionality */
:global(.darkApp) .searchContainer {
  background-color: rgba(42, 42, 42, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
}

:global(.darkApp) .searchInput {
  background-color: rgba(54, 54, 54, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

:global(.darkApp) .searchInput::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Dark theme for ratings and reviews */
:global(.darkApp) .ratingContainer {
  border-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

:global(.darkApp) .ratingText {
  color: #b0b0b0;
}

:global(.darkApp) .ratingCount {
  color: rgba(255, 255, 255, 0.6);
}

/* Dark theme for product cards */
:global(.darkApp) .productCard {
  background-color: #181818 !important;
  border-color: #363636 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

:global(.darkApp) .productCard:hover {
  background-color: #363636 !important;
  border-color: #424242 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Dark theme for product images */
:global(.darkApp) .productImage {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Dark theme for add to cart buttons */
:global(.darkApp) .addToCartButton {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #000000 !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

:global(.darkApp) .addToCartButton:hover {
  background-color: #ffd633 !important;
  border-color: #ffd633 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 198, 0, 0.3);
}

/* Dark theme for quantity controls */
:global(.darkApp) .quantityControl {
  background-color: rgba(42, 42, 42, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

:global(.darkApp) .quantityButton {
  background-color: rgba(54, 54, 54, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  transition: all 0.3s ease;
}

:global(.darkApp) .quantityButton:hover {
  background-color: rgba(66, 66, 66, 0.9) !important;
  border-color: var(--primary) !important;
}

:global(.darkApp) .quantityInput {
  background-color: rgba(42, 42, 42, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  text-align: center;
}

:global(.darkApp) .services {
  color: #ffffff !important;
  background-color: #000000 !important;
  border: none;
}

:global(.darkApp) .serviceButton {
  color: #ffffff !important;
  background-color: rgba(42, 42, 42, 0.8) !important;
  border: none;
  border-radius: 888px;
}

:global(.darkApp) .activeServiceButton {
  color: var(--primary) !important;
  background-color: rgba(42, 42, 42, 0.8) !important;
  border: none;
  border-radius: 888px;
}

:global(.darkApp) .activeServiceButton path {
  stroke: var(--primary) !important;
}

/* Smooth transitions for all elements */
.pageContainer *,
.menuItem *,
.productCard *,
.categoryTab * {
  transition: all 0.3s ease;
}

/* Enhanced responsive restaurant header */
.restaurantHeader {
  position: relative;
  /* overflow: hidden; */
  border-radius: 0 0 16px 16px;
}

/* Enhanced responsive navigation buttons */
.navButton {
  transition: all 0.3s ease;
}

/* Enhanced responsive animations */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced responsive focus states */
.pageContainer:focus,
.restaurantHeader:focus,
.navButton:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Enhanced responsive print styles */

.dineInIcon {
  position: relative;
  top: 2px;
  margin-bottom: 4px;
}

.pickupIcon {
  position: relative;
  top: 2px;
  margin-bottom: 3px;
}

.icon {
  width: 12px;
  height: 12px;
}

.downIcon {
  width: 12px;
  height: 12px;
}

.headerFloatingBtn {
  position: absolute;
  z-index: 999;
  top: 70px;
  opacity: 0.9;
  background: #aaa8a833;
  backdrop-filter: blur(40px);
}

.backButtonContainer {
  left: 20px;
  border-radius: 50%;
}
.orderTypeSelectContainer {
  width: 28%;
  height: 32px;
  left: 36%;
  border-radius: 16px;
}
.orderTypeSelect {
  width: 95%;
  margin-left: 5%;
  margin-right: 5%;
  border-radius: 60px;
  box-shadow: none;
  color: #fff !important;
}

.searchButtonContainer {
  right: 20px;
  border-radius: 50%;
}

.searchButton {
  width: 32px !important;
  height: 32px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
  border-radius: 50%;
}

.contentWrapper {
  margin: 0px auto;
  padding: 0 1rem;
}

.restaurantTitle {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 0px !important;
}

.restaurantDescription {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

.ratingContainer {
  display: flex;
  gap: 4px;
}

.ratingStar {
  color: var(--primary);
  font-size: 12px;
  position: relative;
  top: 0.5px;
}

.ratingScore {
  position: relative;
  top: 3px;
  font-size: 12px;
  font-weight: 600;
}

.ratingCount {
  position: relative;
  top: 3px;
  font-size: 12px;
  color: #666;
}

/* RTL support for back button */
.backButtonContainer[dir="rtl"] {
  left: auto;
  right: 20px;
}

/* RTL support for search button */
.searchButtonContainer[dir="rtl"] {
  right: auto;
  left: 20px;
}

:global(.rtl) .dineInIcon {
  margin-bottom: 1px;
}

.restaurantDescriptionSkeleton .ant-skeleton-content .ant-skeleton-paragraph {
  margin-block-start: 8px !important;
}

/* ===== AGGREGATED MEDIA QUERIES ===== */

/* Mobile devices (max-width: 768px) */
@media (max-width: 768px) {
  .sidebarCollapsed .pageContainer,
  .sidebarExpanded .pageContainer {
    margin-left: 0;
  }
}

/* Tablet devices (min-width: 769px and max-width: 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .itemDescription {
    font-size: 14px !important;
  }

  .logo {
    left: 40px;
    width: 80px !important;
    height: 80px !important;
  }

  .cover {
    width: 100%;
    height: "auto";
    object-fit: cover;
  }

  .restaurantHeader {
    margin-bottom: 0px;
    border-radius: 0 0 20px 20px;
  }

  .leftShape {
    top: 171px;
    left: -3px;
  }

  .rightShape {
    top: 171px;
    left: 116px;
  }

  .pageContainer {
    padding: 16px;
  }

  .restaurantLogo {
    width: 96px !important;
    height: 96px !important;
    border-radius: 12px !important;
  }

  .navButton {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  .contentWrapper {
    margin-top: 16px;
  }
}

/* Desktop devices (min-width: 1025px) */
@media (min-width: 1025px) {
  .contentWrapper {
    max-width: 1164px;
  }

  .itemDescription {
    font-size: 16px !important;
  }

  .restaurantHeader {
    margin-bottom: 0px;
    border-radius: 0 0 24px 24px;
  }

  .pageContainer {
    padding: 16px 32px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .logo {
    position: absolute;
    left: 33px;
    top: -95px;
    border-radius: 50%;
    z-index: 10;
    border: 3px solid var(--background);
    width: 150px !important;
    height: 150px !important;
  }

  .navButton {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
  }

  .leftShape {
    top: 171px;
    left: -10px;
  }

  .rightShape {
    top: 171px;
    left: 179px;
  }
}

/* Large screens (min-width: 768px) */
@media (min-width: 768px) {
  .pageContainer:focus,
  .restaurantHeader:focus,
  .navButton:focus {
    outline-offset: 4px;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: no-preference) {
  .pageContainer {
    animation: fadeInUp 0.6s ease-out;
  }

  /* .restaurantHeader {
    animation: fadeInDown 0.8s ease-out;
  } */
}

/* Print styles */
@media print {
  .pageContainer {
    background-color: white !important;
    color: black !important;
  }

  .restaurantHeader {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }

  .navButton {
    display: none !important;
  }
}

.logoContainerIcon {
  position: absolute !important;
  left: 0px !important;
  top: 127px !important;
  z-index: 10 !important;
}

:global(.ant-app-rtl) .logoContainerIcon {
  right: -10px !important;
}