/* Nawy-style typography — Almarai (Arabic + Latin) */
@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;500;700&display=swap");

:root {
    --menu-font: "Almarai", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body,
#restaurant-content,
.cat-nav-wrap,
.cat-pills,
.menu-shell,
.section-head,
.strip,
.strip .res_title,
.strip .res_title h5,
.strip .res_title h5 a,
.strip .res_description,
.strip .res_mimimum,
.strip .card-footer,
#productModal,
#productModal .modal-title,
#productModal #modalDescription,
#productModal #modalPrice,
#category .swiper-slide a {
    font-family: var(--menu-font) !important;
}

/* Shared menu UI (same look as New/index.html): backdrop, cards, modal, background */

.modal-backdrop {
    z-index: 100000;
    background-color: rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    transition: opacity 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease, background-color 0.35s ease;
}

.modal-backdrop.show {
    opacity: 0.9 !important;
    background-color: rgba(255, 255, 255, 0.24) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

body {
    background-color: #141414 !important;
    background-image: url("https://qrmenus.me/uploads/restorants/d683b5a7-f91f-4a5e-a37c-e113f125c763_bg.png") !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center top !important;
    background-size: cover !important;
    color: #f2f2f2 !important;
}

#restaurant-content {
    background: transparent !important;
}

.section-profile-cover,
.header.pb-8.pt-5.pt-lg-8.d-flex.align-items-center {
    display: none !important;
}

.tabbable.sticky {
    background: rgba(22, 22, 22, 0.94) !important;
    border-bottom: 1px solid #2d2d2d;
}

.strip {
    background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 100%) !important;
    border: 1px solid #dfdfdf !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
    margin-bottom: 14px;
    padding: 8px !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 10px;
    min-height: 118px;
    position: relative;
    color: #1f1f1f !important;
}

#restaurant-content .strip {
    cursor: pointer;
}

/* ── Theme: List (horizontal — image on the side) ── */
#restaurant-content.menu-theme-horizontal .strip {
    flex-direction: row !important;
}

#restaurant-content.menu-theme-horizontal .strip .res_title {
    flex: 1 1 auto;
    min-width: 0;
}

.strip .res_title h5 .menu-ltxt {
    display: block;
}

.cat-pills .menu-ltxt,
.section-head h1 .menu-ltxt {
    display: inline;
}

/* ── Theme: Card (stacked — image on top) ── */
#restaurant-content.menu-theme-card .items-row .col {
    width: 100%;
    max-width: 100%;
}

#restaurant-content.menu-theme-card .strip {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
    min-height: 0;
    overflow: hidden;
}

#restaurant-content.menu-theme-card .strip .res_image {
    width: 100% !important;
    min-width: 100% !important;
    height: 168px !important;
    max-height: 46vw;
    border-radius: 14px 14px 0 0 !important;
    flex-shrink: 0;
}

#restaurant-content.menu-theme-card .strip .res_image img {
    border-radius: 0;
}

#restaurant-content.menu-theme-card .strip .fan-gallery {
    height: 168px !important;
    max-height: 46vw;
}

#restaurant-content.menu-theme-card .strip .res_title {
    padding: 10px 12px 4px !important;
    flex: 1 1 auto;
}

#restaurant-content.menu-theme-card .strip .card-footer {
    position: static !important;
    padding: 2px 12px 12px !important;
    margin-top: 0;
}

#restaurant-content.menu-theme-card .strip .res_mimimum {
    transform: none !important;
    margin-top: 4px !important;
    text-align: end;
}

@media (max-width: 991px) {
    #restaurant-content.menu-theme-card .strip {
        padding-bottom: 0 !important;
    }

    #restaurant-content.menu-theme-card .strip .res_title {
        padding-inline-end: 12px !important;
        padding-right: 12px !important;
    }

    #restaurant-content.menu-theme-card .strip .card-footer {
        position: static !important;
        inset: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        padding: 2px 12px 12px !important;
    }

    #restaurant-content.menu-theme-card .strip .card-footer .col-12 {
        justify-content: flex-end !important;
    }

    #restaurant-content.menu-theme-card .strip .res_mimimum {
        text-align: end !important;
    }

    #restaurant-content.menu-theme-card .strip.strip--desc-focused,
    #restaurant-content.menu-theme-card .strip.strip--desc-pinned {
        align-items: stretch !important;
        overflow: visible !important;
    }

    #restaurant-content.menu-theme-card .strip.strip--scroll-desc .res_desc_block {
        overflow: hidden;
    }

    #restaurant-content.menu-theme-card .strip.strip--scroll-desc .res_description:not([hidden]) {
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    #restaurant-content.menu-theme-card .strip.strip--desc-focused {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        z-index: 2;
    }
}

.strip .res_image {
    width: 108px !important;
    min-width: 108px !important;
    height: 100px !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.strip .res_image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    margin: 0 !important;
}

.new-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    width: 74px;
    height: 74px;
    overflow: hidden;
    pointer-events: none;
}

.new-badge span {
    position: absolute;
    top: 13px;
    right: -27px;
    width: 104px;
    transform: rotate(45deg);
    background: #e31919;
    color: #ffffff;
    text-align: center;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    padding: 4px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
}

.fan-gallery {
    position: relative;
    background: #111111;
}

.fan-gallery .fan-img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    opacity: 0.42;
    z-index: 1;
    transform: translateX(18px);
    transition: transform 0.38s ease;
}

.fan-gallery .fan-img:nth-child(1) {
    transform: translateX(-12px);
}

.fan-gallery .fan-img:nth-child(2) {
    transform: translateX(12px);
}

.fan-gallery .fan-img:nth-child(3) {
    transform: translateX(0);
}

.fan-gallery .fan-img.active {
    opacity: 1;
    transform: translateX(0);
    z-index: 2;
}

.strip .res_title {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    padding: 2px 0 !important;
    min-width: 0;
}

.strip .res_title h5 {
    margin: 0 0 6px !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
    color: #1f1f1f !important;
}

.strip .res_title h5 a {
    color: #1f1f1f !important;
    text-shadow: none !important;
}

.strip .res_description,
.strip .res_title p {
    margin: 0 !important;
    color: #555555 !important;
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 991px) {
    /* List theme only: fixed price bottom corner while scrolling */
    #restaurant-content.menu-theme-horizontal .strip {
        position: relative;
        padding-bottom: 28px !important;
        align-items: flex-start !important;
        transition: box-shadow 0.28s ease;
    }

    /* Image stays top-aligned — never re-center when description expands/collapses */
    #restaurant-content.menu-theme-horizontal .strip .res_image {
        align-self: flex-start !important;
        flex-shrink: 0;
    }

    #restaurant-content .strip.strip--desc-focused {
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.11);
        z-index: 2;
    }

    #restaurant-content.menu-theme-card .strip.strip--scroll-desc {
        overflow: visible !important;
    }

    #restaurant-content.menu-theme-card .strip.strip--scroll-desc.strip--desc-focused,
    #restaurant-content.menu-theme-card .strip.strip--scroll-desc.strip--desc-pinned {
        overflow: visible !important;
    }

    #restaurant-content .strip.strip--desc-pinned {
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
        z-index: 3;
    }

    #restaurant-content.menu-theme-horizontal .strip .card-footer {
        position: absolute;
        inset-inline-end: 10px;
        bottom: 8px;
        left: auto;
        right: auto;
        width: auto;
        margin: 0 !important;
        z-index: 4;
        pointer-events: none;
    }

    #restaurant-content.menu-theme-horizontal .strip .res_title {
        padding-inline-end: 82px;
        padding-right: 82px;
        min-width: 0;
    }

    #restaurant-content.menu-theme-horizontal .strip .res_mimimum {
        transform: none !important;
        margin-top: 0 !important;
        white-space: nowrap;
        text-align: end;
    }

    #restaurant-content .strip.strip--scroll-desc .res_desc_block {
        overflow: hidden;
    }

    #restaurant-content .strip.strip--scroll-desc .res_description:not([hidden]) {
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    #restaurant-content .strip .res_desc_block,
    #restaurant-content .strip .res_description {
        will-change: max-height;
    }

    #restaurant-content.menu-theme-horizontal .strip .res_desc_block {
        transition: max-height 0.15s ease-out;
    }

    #restaurant-content .strip .res_description.desc-reveal-full:not([hidden]) {
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important;
        max-height: none !important;
    }
}

@media (min-width: 992px) {
    #restaurant-content .strip:not(.strip--scroll-desc) .res_description,
    #restaurant-content .strip:not(.strip--scroll-desc) .res_title p {
        max-height: none !important;
        opacity: 1 !important;
    }
}

.strip .card-footer {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    align-items: center;
}

.strip .card-footer .col-12 {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0 !important;
}

.strip .res_mimimum {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    font-variant-numeric: tabular-nums;
    color: #1f1f1f !important;
    text-shadow: none !important;
    margin-top: 6px;
    text-align: end;
}

.strip .res_mimimum--sizes {
    white-space: normal !important;
    max-width: min(100%, 28rem);
    word-break: break-word;
}

.strip .res_mimimum--sizes .menu-ltxt {
    display: block;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

/* Per-size price colors (ص و ك ع) */
.menu-size {
    font-weight: 700;
    white-space: nowrap;
}
.menu-size-sep {
    color: rgba(80, 80, 80, 0.45);
    font-weight: 500;
    margin: 0 0.1em;
}
.menu-size--s { color: #1f8a4c !important; } /* صغير */
.menu-size--m { color: #c47a00 !important; } /* وسط */
.menu-size--l { color: #c41e3a !important; } /* كبير — brand red */
.menu-size--f { color: #2558c7 !important; } /* عائلي */

@media (max-width: 991px) {
    .col-xl-3.col-lg-6.col-md-6.col-sm-12 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

#productModal .modal-content {
    background: #1f1f1f !important;
    border: 1px solid #353535 !important;
    border-radius: 14px !important;
    color: #f1f1f1 !important;
}

#productModal .modal-header {
    border-bottom: 1px solid #333 !important;
}

#productModal .modal-title,
#productModal .close span {
    color: #ffffff !important;
}

#productModal .card {
    background: transparent !important;
    box-shadow: none !important;
}

#productModal #modalImg {
    width: 100% !important;
    max-width: 295px;
    height: 220px !important;
    object-fit: cover;
    border-radius: 12px;
}

#productModal #modalItemDetailsPart {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#productModal #modalPrice {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.2px;
    font-variant-numeric: tabular-nums;
    color: #ffffff !important;
}

#productModal #modalDescription,
#productModal .form-control-label,
#productModal .custom-control-label {
    color: #d6d6d6 !important;
}

#productModal .custom-control-input:checked ~ .custom-control-label::before {
    border-color: #9a7bff !important;
    background-color: #9a7bff !important;
}

/* Lighter payloads: cap visible size; prefer _medium via menu-ui.js */
#restaurant-content .swiper-slide img.lazy,
#restaurant-content .strip .res_image img {
    content-visibility: auto;
}

/* Keep the currently visible category highlighted while scrolling. */
#category .swiper-slide.menu-category-active a,
#category .swiper-slide.menu-category-active a.cap {
    border-color: #eac8ad !important;
    background: #eac8ad !important;
    color: #14220f !important;
    box-shadow: 0 0 0 2px rgba(234, 200, 173, 0.22);
}

#category .swiper-slide.menu-category-active img {
    outline: 3px solid #eac8ad;
    outline-offset: -3px;
}

/* ── أقسام المنيو (Meshaltet، Salads، SALAD، …): حافة / توهج عكس لون النص ── */
#restaurant-content div[id].text-center > h1 {
    margin: 0.45em 0 0.12em !important;
    font-weight: 800 !important;
    font-size: clamp(1.28rem, 2.6vw, 1.78rem) !important;
    line-height: 1.12 !important;
    letter-spacing: 0.06em;
}

/* عنوان فاتح على الخلفية الداكنة → حدّ وتوهج خارجي غامق */
#restaurant-content div[id].text-center > h1 {
    color: #fafafa !important;
    -webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.82);
    paint-order: stroke fill;
    text-shadow:
        0 0 1px rgba(0, 0, 0, 1),
        0 0 3px rgba(0, 0, 0, 0.95),
        0 1px 2px rgba(0, 0, 0, 0.9),
        0 -1px 2px rgba(0, 0, 0, 0.55),
        1px 0 1px rgba(0, 0, 0, 0.88),
        -1px 0 1px rgba(0, 0, 0, 0.88),
        0 0 18px rgba(0, 0, 0, 0.5),
        0 0 22px rgba(255, 255, 255, 0.08);
}

/* عنوان غامق (لو وُضع لاحقاً فوق خلفية فاتحة): هالة فاتحة — أضف class للـ div الأب */
#restaurant-content div[id].text-center.section-heading-on-light > h1 {
    color: #141414 !important;
    -webkit-text-stroke: 0.4px rgba(255, 255, 255, 0.9);
    text-shadow:
        0 0 1px rgba(255, 255, 255, 1),
        0 0 6px rgba(255, 255, 255, 0.65),
        0 0 14px rgba(255, 255, 255, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Hide export / placeholder “Opens …” line in product modal */
.closed_time {
    display: none !important;
}

/* Live menu item modal (/Pica, /Ritz, …) */
#restaurant-content .strip.strip--openable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#restaurant-content .strip.strip--openable:focus-visible {
    outline: 2px solid rgba(93, 212, 196, 0.85);
    outline-offset: 3px;
}

.live-item-modal {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.live-item-modal--open {
    pointer-events: auto;
    opacity: 1;
}

.live-item-modal--closing {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.48s cubic-bezier(0.4, 0, 0.2, 1);
}

.live-item-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 12, 0);
    backdrop-filter: blur(0px) saturate(1);
    -webkit-backdrop-filter: blur(0px) saturate(1);
    transition:
        backdrop-filter 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        -webkit-backdrop-filter 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.live-item-modal--open .live-item-modal__backdrop {
    background: rgba(6, 8, 12, 0.48);
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
}

.live-item-modal--closing .live-item-modal__backdrop {
    background: rgba(6, 8, 12, 0);
    backdrop-filter: blur(0px) saturate(1);
    -webkit-backdrop-filter: blur(0px) saturate(1);
    transition:
        backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.live-item-modal__dialog {
    position: relative;
    z-index: 2;
    width: min(720px, 100%);
    max-height: min(92vh, 860px);
    overflow: auto;
    overscroll-behavior: contain;
    background: linear-gradient(165deg, #23262d 0%, #16181d 55%, #12141a 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    color: #f1f1f1;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    transform: translateY(36px) scale(0.88);
    opacity: 0;
    filter: blur(8px);
    transition:
        transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.62s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.72s ease;
    -webkit-overflow-scrolling: touch;
}

.live-item-modal--open .live-item-modal__dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
    box-shadow:
        0 36px 100px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.live-item-modal--closing .live-item-modal__dialog {
    transform: translateY(24px) scale(0.9);
    opacity: 0;
    filter: blur(10px);
    transition:
        transform 0.48s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.42s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.42s ease;
}

.live-item-modal__body > * {
    opacity: 0;
    transform: translateY(14px);
}

.live-item-modal--open .live-item-modal__body > * {
    animation: liveModalRevealIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.live-item-modal--open .live-item-modal__media { animation-delay: 0.08s; }
.live-item-modal--open .live-item-modal__new { animation-delay: 0.16s; }
.live-item-modal--open .live-item-modal__title { animation-delay: 0.2s; }
.live-item-modal--open .live-item-modal__price { animation-delay: 0.28s; }
.live-item-modal--open .live-item-modal__desc { animation-delay: 0.36s; }

.live-item-modal--closing .live-item-modal__body > * {
    animation: liveModalRevealOut 0.36s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

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

.live-item-modal__close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.live-item-modal__close:hover {
    background: rgba(0, 0, 0, 0.55);
}

.live-item-modal__close:active {
    transform: scale(0.94);
}

.live-item-modal__body {
    padding: 22px 22px 28px;
}

.live-item-modal__media {
    margin: -2px -2px 18px;
    text-align: center;
    border-radius: 16px;
    overflow: hidden;
    background: #0d0f13;
}

.live-item-modal__media[hidden] {
    display: none !important;
}

.live-item-modal__img {
    width: 100%;
    height: auto;
    max-height: min(46vh, 420px);
    object-fit: cover;
    display: block;
    margin: 0 auto;
    transform: scale(1.02);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.live-item-modal--open .live-item-modal__img {
    transform: scale(1);
}

.live-item-modal__fan {
    position: relative;
    width: 100%;
    height: min(46vh, 420px);
    margin: 0 auto;
    overflow: hidden;
    background: #111;
}

.live-item-modal__fan .fan-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.42;
    transform: translateX(18px);
    transition: transform 0.38s ease, opacity 0.38s ease;
}

.live-item-modal__fan .fan-img.active {
    opacity: 1;
    transform: translateX(0);
    z-index: 2;
}

.live-item-modal__new {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #e31919;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.live-item-modal__new[hidden] {
    display: none !important;
}

#liveItemModalTitle,
.live-item-modal__title {
    margin: 0 0 12px;
    font-size: clamp(1.25rem, 2.6vw, 1.65rem);
    font-weight: 700;
    color: #fff;
    padding-inline-end: 44px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.live-item-modal__price {
    font-size: 1.28rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
    font-variant-numeric: tabular-nums;
}

.live-item-modal__price .menu-ltxt {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: 1.4;
}

.live-item-modal__price .menu-size-sep {
    color: rgba(255, 255, 255, 0.35);
}
.live-item-modal__price .menu-size--s { color: #5ee89a !important; }
.live-item-modal__price .menu-size--m { color: #ffc14d !important; }
.live-item-modal__price .menu-size--l { color: #ff6b81 !important; }
.live-item-modal__price .menu-size--f { color: #7eb6ff !important; }

.live-item-modal__desc {
    color: #d7dbe3;
    font-size: 1rem;
    line-height: 1.65;
}

.live-item-modal__desc[hidden] {
    display: none !important;
}

.live-item-modal__ltxt {
    margin: 0 0 0.85em;
    white-space: pre-wrap;
    word-break: break-word;
}

.live-item-modal__ltxt:last-child {
    margin-bottom: 0;
}

.live-item-modal__ltxt[data-lang="ar"] {
    font-family: "Almarai", "Scheherazade New", sans-serif;
}

.live-item-modal__header {
    color: #c8c8c8;
    font-size: 0.95rem;
    margin-bottom: 8px;
    line-height: 1.4;
}

.live-item-modal__details {
    color: #d6d6d6;
    font-size: 0.92rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

body.live-item-modal-open {
    overflow: hidden;
}

#restaurant-content {
    transition: filter 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

body.live-item-modal-open #restaurant-content {
    filter: blur(8px) saturate(0.88) brightness(0.92);
    transform: scale(1.018);
    pointer-events: none;
}

/* Keep language toggle usable while item is open (E / ع / عE). */
body.live-item-modal-open .menu-lang-switch {
    filter: none;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    z-index: 100020;
}

@media (max-width: 640px) {
    .live-item-modal {
        padding: 12px;
        align-items: center;
        justify-content: center;
    }

    .live-item-modal__dialog {
        width: min(100%, 560px);
        max-height: min(90vh, 860px);
        border-radius: 22px;
        transform: translateY(28px) scale(0.9);
    }

    .live-item-modal--open .live-item-modal__dialog {
        transform: translateY(0) scale(1);
    }

    .live-item-modal__body {
        padding: 16px 16px 22px;
    }

    .live-item-modal__fan,
    .live-item-modal__img {
        max-height: min(34vh, 280px);
    }

    .live-item-modal__fan {
        height: min(34vh, 280px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-item-modal,
    .live-item-modal__backdrop,
    .live-item-modal__dialog,
    .live-item-modal__img,
    body.live-item-modal-open #restaurant-content {
        transition: none !important;
        animation: none !important;
        filter: none !important;
    }

    .live-item-modal__body > *,
    .live-item-modal--open .live-item-modal__body > *,
    .live-item-modal--closing .live-item-modal__body > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Bilingual: language toggle ── */
.menu-lang-switch {
    --lang-btn-size: 52px;
    --lang-sat-size: 46px;
    --lang-glass: rgba(12, 14, 20, 0.58);
    --lang-glass-hover: rgba(22, 26, 34, 0.72);
    --lang-border: rgba(255, 255, 255, 0.2);
    --lang-border-strong: rgba(255, 255, 255, 0.34);
    --lang-accent: #5dd4c4;
    --lang-accent-glow: rgba(93, 212, 196, 0.42);
    --lang-shadow:
        0 10px 28px rgba(0, 0, 0, 0.32),
        0 2px 6px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    position: fixed;
    z-index: 100010;
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    inset-inline-start: max(16px, env(safe-area-inset-left, 0px));
    min-width: var(--lang-btn-size);
    min-height: var(--lang-btn-size);
}

.menu-lang-toggle,
.menu-lang-picker__btn {
    position: relative;
    isolation: isolate;
    border: 1px solid var(--lang-border);
    background: var(--lang-glass);
    backdrop-filter: blur(16px) saturate(1.45);
    -webkit-backdrop-filter: blur(16px) saturate(1.45);
    color: #fff;
    box-shadow: var(--lang-shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}

.menu-lang-toggle::before,
.menu-lang-picker__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.06) 100%);
    pointer-events: none;
    z-index: 0;
}

.menu-lang-toggle__glyph,
.menu-lang-picker__glyph {
    position: relative;
    z-index: 1;
}

.menu-lang-toggle {
    z-index: 2;
    width: var(--lang-btn-size);
    height: var(--lang-btn-size);
    padding: 0;
    border-radius: 50%;
    transition:
        transform 0.32s cubic-bezier(0.34, 1.25, 0.64, 1),
        border-color 0.25s ease,
        box-shadow 0.32s ease,
        background 0.25s ease;
}

.menu-lang-toggle.is-open {
    transform: scale(1.05);
    border-color: var(--lang-border-strong);
    background: var(--lang-glass-hover);
    box-shadow:
        var(--lang-shadow),
        0 0 0 2px var(--lang-accent-glow),
        0 0 22px rgba(93, 212, 196, 0.22);
}

.menu-lang-toggle:hover,
.menu-lang-toggle:focus-visible {
    background: var(--lang-glass-hover);
    border-color: var(--lang-border-strong);
    transform: scale(1.04);
    outline: none;
}

.menu-lang-toggle.is-open:hover,
.menu-lang-toggle.is-open:focus-visible {
    transform: scale(1.07);
}

.menu-lang-toggle[hidden] {
    display: none !important;
}

.menu-lang-toggle__glyph {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.menu-lang-toggle__glyph.is-arabic-glyph {
    font-family: "Scheherazade New", "Amiri", "Traditional Arabic", serif;
    font-size: 1.38rem;
    font-weight: 600;
    letter-spacing: 0;
}

.menu-lang-toggle.is-both-label {
    width: auto;
    min-width: var(--lang-btn-size);
    padding: 0 15px;
    border-radius: 999px;
}

.menu-lang-toggle__glyph.is-both-glyph {
    font-family: "Scheherazade New", "Amiri", "Traditional Arabic", system-ui, sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.menu-lang-picker {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.menu-lang-picker.is-open {
    pointer-events: auto;
}

.menu-lang-picker[hidden] {
    display: block !important;
    visibility: hidden;
    pointer-events: none;
}

.menu-lang-picker.is-open[hidden] {
    visibility: visible;
}

.menu-lang-picker__btn {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--lang-sat-size);
    height: var(--lang-sat-size);
    margin-left: calc(var(--lang-sat-size) / -2);
    margin-top: calc(var(--lang-sat-size) / -2);
    padding: 0;
    border-radius: 50%;
    opacity: 0;
    transform: translate(0, 0) scale(0.15);
    transition:
        transform 0.42s cubic-bezier(0.34, 1.5, 0.64, 1),
        opacity 0.26s ease,
        border-color 0.22s ease,
        box-shadow 0.28s ease,
        background 0.22s ease;
}

.menu-lang-picker__btn[hidden] {
    display: none !important;
}

.menu-lang-picker__glyph {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.menu-lang-picker__glyph.is-arabic-glyph {
    font-family: "Scheherazade New", "Amiri", "Traditional Arabic", serif;
    font-size: 1.22rem;
    font-weight: 600;
}

.menu-lang-picker__glyph.is-both-glyph {
    font-family: "Scheherazade New", "Amiri", "Traditional Arabic", system-ui, sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.menu-lang-picker__btn.is-both {
    width: auto;
    min-width: var(--lang-sat-size);
    padding: 0 12px;
    border-radius: 999px;
    margin-left: calc(var(--lang-sat-size) / -2);
}

.menu-lang-picker__btn.is-both .menu-lang-picker__glyph {
    white-space: nowrap;
}

.menu-lang-picker.is-open .menu-lang-picker__btn.is-slot-1 {
    opacity: 1;
    transform: translate(78px, -45px) scale(1);
}

.menu-lang-picker.is-open .menu-lang-picker__btn.is-slot-2 {
    opacity: 1;
    transform: translate(31px, -85px) scale(1);
    transition-delay: 0.08s;
}

[dir="rtl"] .menu-lang-picker.is-open .menu-lang-picker__btn.is-slot-1 {
    transform: translate(-78px, -45px) scale(1);
}

[dir="rtl"] .menu-lang-picker.is-open .menu-lang-picker__btn.is-slot-2 {
    transform: translate(-31px, -85px) scale(1);
}

.menu-lang-picker__btn:hover,
.menu-lang-picker__btn:focus-visible {
    background: var(--lang-glass-hover);
    border-color: var(--lang-border-strong);
    box-shadow:
        var(--lang-shadow),
        0 0 16px var(--lang-accent-glow);
    outline: none;
}

.menu-lang-picker.is-open .menu-lang-picker__btn.is-slot-1:hover,
.menu-lang-picker.is-open .menu-lang-picker__btn.is-slot-1:focus-visible {
    transform: translate(82px, -47px) scale(1.07);
}

.menu-lang-picker.is-open .menu-lang-picker__btn.is-slot-2:hover,
.menu-lang-picker.is-open .menu-lang-picker__btn.is-slot-2:focus-visible {
    transform: translate(33px, -89px) scale(1.07);
}

[dir="rtl"] .menu-lang-picker.is-open .menu-lang-picker__btn.is-slot-1:hover,
[dir="rtl"] .menu-lang-picker.is-open .menu-lang-picker__btn.is-slot-1:focus-visible {
    transform: translate(-82px, -47px) scale(1.07);
}

[dir="rtl"] .menu-lang-picker.is-open .menu-lang-picker__btn.is-slot-2:hover,
[dir="rtl"] .menu-lang-picker.is-open .menu-lang-picker__btn.is-slot-2:focus-visible {
    transform: translate(-33px, -89px) scale(1.07);
}

@media (prefers-reduced-motion: reduce) {
    .menu-lang-toggle,
    .menu-lang-picker__btn {
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}

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

/* عE stack: EN title+desc then AR title+desc */
.menu-ltxt-both-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.menu-both-lang-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-both-lang-block__title {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.menu-both-lang-block__desc {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    white-space: pre-line;
}

.live-item-modal__both-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.live-item-modal__both-stack .menu-both-lang-block__title {
    font-size: 1.15rem;
    font-weight: 700;
}

.live-item-modal__both-stack .menu-both-lang-block__desc {
    font-size: 0.95rem;
    opacity: 0.92;
    white-space: pre-line;
}

/* ── RTL / Arabic layout ── */
body.menu-lang-ar,
#restaurant-content[dir="rtl"] {
    font-family: "Almarai", system-ui, sans-serif;
}

#restaurant-content[dir="rtl"] .strip .res_title h5,
#restaurant-content[dir="rtl"] .strip .res_description {
    text-align: start;
}

#restaurant-content[dir="rtl"] .strip .card-footer .col-12 {
    justify-content: flex-end !important;
}

#restaurant-content[dir="rtl"] .strip .res_mimimum,
#restaurant-content.menu-theme-card[dir="rtl"] .strip .res_mimimum {
    text-align: end;
}

#restaurant-content[dir="rtl"] .new-badge {
    right: auto;
    left: 0;
}

#restaurant-content[dir="rtl"] .new-badge span {
    right: auto;
    left: -27px;
    transform: rotate(-45deg);
}

#restaurant-content[dir="rtl"] .cat-pills {
    direction: rtl;
}

#restaurant-content[dir="rtl"] .top-links {
    text-align: start;
}

#restaurant-content[dir="rtl"] .top-links a {
    margin-left: 0;
    margin-inline-start: 12px;
}

[dir="rtl"] .fan-gallery .fan-img {
    transform: translateX(-18px);
}

[dir="rtl"] .fan-gallery .fan-img:nth-child(1) {
    transform: translateX(12px);
}

[dir="rtl"] .fan-gallery .fan-img:nth-child(2) {
    transform: translateX(-12px);
}

[dir="rtl"] .fan-gallery .fan-img:nth-child(3),
[dir="rtl"] .fan-gallery .fan-img.active {
    transform: translateX(0);
}

@media (max-width: 991px) {
    #restaurant-content.menu-theme-horizontal[dir="rtl"] .strip .card-footer {
        inset-inline-end: 10px;
        inset-inline-start: auto;
        left: auto;
        right: auto;
    }

    #restaurant-content.menu-theme-horizontal[dir="rtl"] .strip .res_title {
        padding-right: 0;
        padding-inline-end: 82px;
    }

    #restaurant-content.menu-theme-horizontal[dir="rtl"] .strip .res_mimimum {
        text-align: end;
    }
}

@media (min-width: 992px) {
    #restaurant-content.menu-theme-horizontal[dir="rtl"] .strip {
        flex-direction: row !important;
    }
}