/*
|--------------------------------------------------------------------------
| Menu Pink Display Menu Assets Library v1
|--------------------------------------------------------------------------
| مكتبة مشتركة لثيمات منيو العرض فقط.
*/

:root {
  --mp-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --mp-safe-area-top: env(safe-area-inset-top, 0px);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.mp-modal-open,
html.mp-modal-open {
  overflow: hidden !important;
  height: 100%;
}

.mp-display-menu-page img,
.menu-shell img {
  max-width: 100%;
  height: auto;
}

.category-nav,
.mp-category-nav {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.category-nav::-webkit-scrollbar,
.mp-category-nav::-webkit-scrollbar {
  display: none;
}

.item-card,
.mp-item-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.item-card:focus-visible,
.mp-item-card:focus-visible,
.category-link:focus-visible,
.mp-category-link:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(182, 139, 76, .35);
  outline-offset: 3px;
}

.meta-icon-only,
.allergen-chip[data-icon-only="true"] {
  font-size: 0 !important;
}

.meta-icon-only .meta-icon,
.meta-icon-only .icon,
.meta-icon-only svg,
.meta-icon-only img,
.allergen-chip[data-icon-only="true"] .meta-icon,
.allergen-chip[data-icon-only="true"] .icon,
.allergen-chip[data-icon-only="true"] svg,
.allergen-chip[data-icon-only="true"] img {
  font-size: 15px !important;
}

.modal-backdrop,
.mp-modal-backdrop {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.item-modal,
.mp-item-modal {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (max-width: 720px) {
  .menu-shell {
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
  }

  .category-nav,
  .mp-category-nav {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }

  .category-link,
  .mp-category-link {
    flex: 0 0 auto;
    scroll-snap-align: center;
    touch-action: manipulation;
  }

  .item-card,
  .mp-item-card {
    touch-action: manipulation;
  }

  .item-media,
  .mp-item-media {
    margin-inline: auto;
  }

  .modal-backdrop,
  .mp-modal-backdrop {
    align-items: flex-end !important;
    justify-content: center !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important;
  }

  .item-modal,
  .mp-item-modal {
    width: 100% !important;
    max-width: 480px !important;
    max-height: 92dvh !important;
    margin: auto auto 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important;
  }

  @supports (height: 100svh) {
    .item-modal,
    .mp-item-modal {
      max-height: 92svh !important;
    }
  }
}