/* Customer-facing menu templates only. Keep dashboard and marketing styles isolated. */
@font-face {
    font-family: "Rudaw";
    src: url("../fonts/new-rudaw-regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

.customer-menu {
    min-width: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

.customer-menu *,
.customer-menu *::before,
.customer-menu *::after {
    box-sizing: border-box;
}

.customer-menu img,
.customer-menu picture,
.customer-menu iframe {
    max-width: 100%;
}

.customer-menu button,
.customer-menu [role="button"],
.customer-menu input,
.customer-menu select,
.customer-menu textarea,
.customer-menu .btn,
.customer-menu .nav-link {
    touch-action: manipulation;
}

.customer-menu .modal-dialog {
    max-width: calc(100vw - 24px);
}

.customer-menu .modal-content {
    max-height: calc(100dvh - 24px);
    overflow: hidden;
}

.customer-menu .modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* One language control is shared by all customer menu templates. */
.customer-language-menu {
    list-style: none;
}

.customer-language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid #dfe6f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(24, 37, 67, .07);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.customer-language-switcher::-webkit-scrollbar {
    display: none;
}

.customer-language-option {
    min-height: 36px;
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #344158 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.customer-language-option:hover,
.customer-language-option:focus-visible {
    border-color: #cdd9ef !important;
    background: #f2f6ff !important;
    color: #1745ea !important;
    outline: none;
}

.customer-language-option.is-active {
    border-color: #1745ea !important;
    background: #1745ea !important;
    color: #fff !important;
}

.customer-language-option .ps-language-flag {
    width: 22px;
    height: 15px;
    flex: 0 0 22px;
    margin: 0 !important;
    border: 1px solid rgba(24, 37, 67, .12);
    border-radius: 2px;
    object-fit: cover;
}

.customer-language-switcher.is-sidebar,
.customer-language-switcher.is-mobile {
    width: 100%;
}

/* Legacy Glow/Elegant CSS makes every categories block sticky. The language
   selector is a separate control and must remain in normal document flow. */
.customer-menu-glow .content-left > .customer-menu-languages,
.customer-menu-elegant .content-left > .customer-menu-languages {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    display: block !important;
    width: 100%;
    min-height: 0;
    margin: 0 0 24px !important;
    overflow: visible;
    clear: both;
}

.customer-menu-glow .customer-menu-languages > div:first-child,
.customer-menu-elegant .customer-menu-languages > div:first-child {
    margin: 0 0 10px !important;
}

.customer-menu-glow .customer-menu-languages .customer-language-switcher,
.customer-menu-elegant .customer-menu-languages .customer-language-switcher {
    position: static !important;
    float: none !important;
    display: flex;
    width: 100%;
    margin: 0;
}

.customer-menu-glow .customer-menu-languages + .categories,
.customer-menu-elegant .customer-menu-languages + .categories {
    clear: both;
}

html[dir="rtl"] .customer-menu,
html[lang="ar"] .customer-menu,
html[lang="ku"] .customer-menu,
html[lang="krd"] .customer-menu,
html[lang="ckb"] .customer-menu {
    direction: rtl;
    text-align: right;
    font-family: "Rudaw", Tahoma, Arial, sans-serif;
}

html[dir="rtl"] .customer-menu :is(h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, label, span) {
    font-family: "Rudaw", Tahoma, Arial, sans-serif;
    letter-spacing: 0 !important;
}

html[dir="rtl"] .customer-menu input,
html[dir="rtl"] .customer-menu textarea {
    text-align: right;
}

/* Default menu */
.customer-menu-default .container-restorant {
    min-width: 0;
}

.customer-menu-default .tabbable.sticky {
    z-index: 20;
    overflow: hidden;
    border: 1px solid #e4eaf4;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(24, 37, 67, .08);
}

.customer-menu-default .tabbable.sticky .nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 !important;
    padding: 7px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.customer-menu-default .tabbable.sticky .nav::-webkit-scrollbar {
    display: none;
}

.customer-menu-default .nav-item-category {
    flex: 0 0 auto;
}

.customer-menu-default .nav-item-category .nav-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    padding: 8px 13px;
    white-space: nowrap;
    border-radius: 6px;
}

.customer-menu-default .strip {
    height: calc(100% - 20px);
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #e6ebf3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(24, 37, 67, .06);
}

.customer-menu-default .strip figure {
    width: 100%;
    margin: 0 0 12px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eef3fa;
}

.customer-menu-default .strip figure a,
.customer-menu-default .strip figure img {
    display: block;
    width: 100%;
    height: 100%;
}

.customer-menu-default .strip figure img {
    object-fit: cover;
}

.customer-menu-default .strip .res_title,
.customer-menu-default .strip .res_description,
.customer-menu-default .strip > .row,
.customer-menu-default .strip > :not(figure) {
    overflow-wrap: anywhere;
}

.customer-menu-default .callOutShoppingButtonBottom {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 1040;
}

[dir="rtl"] .customer-menu-default .callOutShoppingButtonBottom {
    right: auto;
    left: max(14px, env(safe-area-inset-left));
}

[dir="rtl"] .customer-menu-default .navbar-nav,
[dir="rtl"] .customer-menu-default .tabbable.sticky .nav,
[dir="rtl"] .customer-menu-default .row {
    direction: rtl;
}

[dir="rtl"] .customer-menu-default .strip,
[dir="rtl"] .customer-menu-default .strip .res_title,
[dir="rtl"] .customer-menu-default .strip .res_description {
    text-align: right;
}

/* Glow and Elegant share the same legacy structure. */
.customer-menu-glow #wrapper,
.customer-menu-elegant #wrapper,
.customer-menu-glow .section,
.customer-menu-elegant .section,
.customer-menu-glow .packer,
.customer-menu-elegant .packer,
.customer-menu-glow .package,
.customer-menu-elegant .package {
    min-width: 0;
}

.customer-menu-glow section.section-place-content > .packer > .package > .content > .holder-left,
.customer-menu-elegant section.section-place-content > .packer > .package > .content > .holder-left,
.customer-menu-glow section.section-place-content .content-center,
.customer-menu-elegant section.section-place-content .content-center {
    min-width: 0;
}

.customer-menu-glow #mobile-menu,
.customer-menu-elegant #mobile-menu {
    z-index: 1050;
}

.customer-menu-glow #mobile-menu > .content,
.customer-menu-elegant #mobile-menu > .content {
    width: min(390px, calc(100vw - 56px));
    max-width: none;
    padding-bottom: env(safe-area-inset-bottom);
    overscroll-behavior: contain;
}

.customer-menu-glow #mobile-menu > .close-mobile-menu,
.customer-menu-elegant #mobile-menu > .close-mobile-menu {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 2;
}

[dir="rtl"] .customer-menu-glow #mobile-menu > .content,
[dir="rtl"] .customer-menu-elegant #mobile-menu > .content {
    right: 0;
    left: auto;
}

[dir="rtl"] .customer-menu-glow #mobile-menu > .close-mobile-menu,
[dir="rtl"] .customer-menu-elegant #mobile-menu > .close-mobile-menu {
    right: auto;
    left: max(12px, env(safe-area-inset-left));
}

.customer-menu-glow #theCartBottomButton,
.customer-menu-elegant #theCartBottomButton {
    width: 54px !important;
    height: 54px !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    z-index: 1040 !important;
}

.customer-menu-glow #theCartBottomButton lottie-player,
.customer-menu-elegant #theCartBottomButton lottie-player {
    width: 54px !important;
    height: 54px !important;
}

[dir="rtl"] .customer-menu-glow #theCartBottomButton,
[dir="rtl"] .customer-menu-elegant #theCartBottomButton {
    right: auto !important;
    left: max(12px, env(safe-area-inset-left)) !important;
}

[dir="rtl"] .customer-menu-glow .text-left,
[dir="rtl"] .customer-menu-elegant .text-left,
[dir="rtl"] .customer-menu-glow .content-center,
[dir="rtl"] .customer-menu-elegant .content-center,
[dir="rtl"] .customer-menu-glow .content-left,
[dir="rtl"] .customer-menu-elegant .content-left,
[dir="rtl"] .customer-menu-glow .item-offer-horizontal,
[dir="rtl"] .customer-menu-elegant .item-offer-horizontal {
    text-align: right !important;
}

[dir="rtl"] .customer-menu-glow .content-center > h1 {
    margin-right: 1.5rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .customer-menu-glow .content-center > .grid > a,
[dir="rtl"] .customer-menu-elegant .item-offer-horizontal {
    direction: rtl;
}

[dir="rtl"] .customer-menu-glow .allergens,
[dir="rtl"] .customer-menu-elegant .allergens {
    text-align: left !important;
}

[dir="rtl"] .customer-menu-elegant #header .package,
[dir="rtl"] .customer-menu-glow #header .package {
    direction: rtl;
}

.customer-menu-glow .content-center a,
.customer-menu-elegant .item-offer-horizontal {
    overflow: hidden;
}

.customer-menu-glow .content-center h2,
.customer-menu-glow .content-center p,
.customer-menu-elegant .item-offer-horizontal h4,
.customer-menu-elegant .item-offer-horizontal p {
    overflow-wrap: anywhere;
}

.customer-menu-glow .content-center picture,
.customer-menu-elegant .item-offer-horizontal picture {
    flex: 0 0 auto;
}

.customer-menu-glow .content-center picture img,
.customer-menu-elegant .item-offer-horizontal picture img {
    object-fit: cover;
    aspect-ratio: 1;
}

/* Pearl AI */
.customer-menu-pearl-ai .pai-shell,
.customer-menu-pearl-ai .pai-layout,
.customer-menu-pearl-ai .pai-main,
.customer-menu-pearl-ai .pai-grid,
.customer-menu-pearl-ai .pai-item {
    min-width: 0;
}

.customer-menu-pearl-ai .pai-floating {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
}

[dir="rtl"] .customer-menu-pearl-ai .pai-floating {
    right: auto;
    left: max(14px, env(safe-area-inset-left));
}

[dir="rtl"] .customer-menu-pearl-ai .pai-brand-row,
[dir="rtl"] .customer-menu-pearl-ai .pai-item-top,
[dir="rtl"] .customer-menu-pearl-ai .pai-basket-row,
[dir="rtl"] .customer-menu-pearl-ai .pai-basket-meta,
[dir="rtl"] .customer-menu-pearl-ai .pai-summary-row {
    direction: rtl;
}

[dir="rtl"] .customer-menu-pearl-ai .pai-topbar-right {
    justify-content: flex-start;
}

[dir="rtl"] .customer-menu-pearl-ai .pai-cat-btn,
[dir="rtl"] .customer-menu-pearl-ai .pai-item,
[dir="rtl"] .customer-menu-pearl-ai .pai-card {
    text-align: right;
}

@media (max-width: 991px) {
    .customer-menu-pearl-ai .pai-layout {
        gap: 12px;
        margin-top: 12px;
    }

    .customer-menu-pearl-ai .pai-sidebar {
        overflow: hidden;
    }

    .customer-menu-pearl-ai .pai-sidebar .pai-card-head {
        padding: 12px 14px 9px;
    }

    .customer-menu-pearl-ai .pai-sidebar .pai-search-wrap {
        padding: 10px 12px;
    }

    .customer-menu-pearl-ai .pai-cat-list {
        max-height: none !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 7px;
        padding: 9px 12px 11px;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .customer-menu-pearl-ai .pai-cat-list::-webkit-scrollbar {
        display: none;
    }

    .customer-menu-pearl-ai .pai-cat-btn {
        flex: 0 0 auto;
        min-height: 42px;
        padding: 8px 10px;
        white-space: nowrap;
    }

    .customer-menu-pearl-ai .pai-links {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
    }
}

@media (max-width: 768px) {
    .customer-menu input,
    .customer-menu select,
    .customer-menu textarea {
        font-size: 16px !important;
    }

    .customer-language-switcher,
    .customer-language-switcher.is-header,
    .customer-language-switcher.is-mobile,
    .customer-language-switcher.is-sidebar {
        width: 100%;
        justify-content: flex-start;
    }

    .customer-language-option {
        min-height: 40px;
    }

    .customer-menu-glow section.section-place-content > .packer > .package,
    .customer-menu-elegant section.section-place-content > .packer > .package {
        padding: 12px 0;
    }

    .customer-menu-glow section.section-place-content > .packer > .package > .content > .holder-left > .content-left,
    .customer-menu-elegant section.section-place-content > .packer > .package > .content > .holder-left > .content-left {
        margin-bottom: 10px;
    }

    .customer-menu-glow section.section-place-content .content-left > .categories,
    .customer-menu-elegant section.section-place-content .content-left > .categories {
        margin-bottom: 10px !important;
        padding-inline: 10px !important;
    }

    .customer-menu-glow section.section-place-content .content-left > .categories > nav,
    .customer-menu-elegant section.section-place-content .content-left > .categories > nav {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 7px !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .customer-menu-glow section.section-place-content .content-left > .categories > nav::-webkit-scrollbar,
    .customer-menu-elegant section.section-place-content .content-left > .categories > nav::-webkit-scrollbar {
        display: none;
    }

    .customer-menu-glow section.section-place-content .content-left > .categories > nav > .item,
    .customer-menu-elegant section.section-place-content .content-left > .categories > nav > .item {
        flex: 0 0 auto;
        margin: 0 !important;
    }

    .customer-menu-glow section.section-place-content .content-left > .categories > nav a,
    .customer-menu-elegant section.section-place-content .content-left > .categories > nav a {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 8px 11px;
        white-space: nowrap;
        border: 1px solid #e3e8f0;
        border-radius: 7px;
        background: #fff;
        color: #182539;
    }

    .customer-menu-glow section.section-place-content .content-left > .categories > nav hr {
        display: none;
    }

    .customer-menu-glow .content-center {
        margin-top: 0 !important;
    }

    .customer-menu-glow .content-center > h1 {
        margin: 14px 12px 0 !important;
        font-size: 18px !important;
    }

    .customer-menu-glow .content-center > .grid {
        gap: 10px !important;
        padding: 10px !important;
    }

    .customer-menu-glow .content-center > .grid > a {
        min-height: 118px;
        grid-template-columns: minmax(0, 1fr) 88px !important;
        padding: 12px !important;
        border-radius: 8px !important;
    }

    .customer-menu-glow .content-center > .grid > a picture {
        width: 88px !important;
        min-width: 88px !important;
        max-height: 88px !important;
    }

    .customer-menu-elegant .item-offer-horizontal {
        min-height: 112px;
        padding: 12px;
        gap: 10px;
    }

    .customer-menu-elegant .item-offer-horizontal > .info {
        width: calc(100% - 88px - 10px);
    }

    .customer-menu-elegant .item-offer-horizontal picture img {
        width: 88px;
        height: 88px;
    }

    .customer-menu-elegant .box-info > .head {
        position: static;
        padding: 12px;
    }

    .customer-menu-elegant .box-info + * {
        margin-top: 12px;
    }
}

@media (max-width: 575px) {
    .customer-menu .modal-dialog {
        margin: 12px auto;
    }

    .customer-menu-default .section.section-lg {
        padding: 24px 0 8px !important;
    }

    .customer-menu-default .section.section-lg .container,
    .customer-menu-default .container-restorant {
        padding-right: 12px;
        padding-left: 12px;
    }

    .customer-menu-default .title h1.display-3 {
        font-size: 30px;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .customer-menu-default .title p.display-4 {
        font-size: 15px;
        line-height: 1.6;
    }

    .customer-menu-default .container-restorant > div[id] > h1 {
        margin: 20px 0 8px;
        font-size: 21px;
    }

    .customer-menu-default .strip {
        height: auto;
    }

    .customer-menu-default .strip figure {
        aspect-ratio: 16 / 10;
    }

    .customer-menu-default .customer-language-menu {
        width: 100%;
        margin: 6px 0;
    }

    .customer-menu-default .customer-language-switcher {
        width: 100%;
    }

    .customer-menu-pearl-ai .pai-shell {
        margin-top: 10px;
        padding: 0 8px !important;
    }

    .customer-menu-pearl-ai .pai-hero {
        padding: 14px !important;
        border-radius: 8px !important;
    }

    .customer-menu-pearl-ai .pai-hero-grid,
    .customer-menu-pearl-ai .pai-hero-mini {
        gap: 9px;
    }

    .customer-menu-pearl-ai .pai-mini-box,
    .customer-menu-pearl-ai .pai-card,
    .customer-menu-pearl-ai .pai-modal-dialog {
        border-radius: 8px;
    }

    .customer-menu-pearl-ai .pai-topbar {
        gap: 8px;
        margin-top: 9px;
    }

    .customer-menu-pearl-ai .pai-topbar-left,
    .customer-menu-pearl-ai .pai-topbar-right {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customer-menu-pearl-ai .pai-top-action,
    .customer-menu-pearl-ai .pai-top-link {
        width: 100%;
        min-width: 0;
        padding-inline: 8px;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .customer-menu-pearl-ai .pai-grid {
        gap: 9px !important;
    }

    .customer-menu-pearl-ai .pai-item-media {
        aspect-ratio: 1;
    }

    .customer-menu-pearl-ai .pai-item-body {
        padding: 10px;
    }

    .customer-menu-pearl-ai .pai-item-top {
        display: block;
    }

    .customer-menu-pearl-ai .pai-price {
        display: inline-flex;
        margin-top: 7px;
        white-space: normal;
    }

    .customer-menu-pearl-ai .pai-item-desc {
        min-height: 0;
    }

    .customer-menu-pearl-ai .pai-modal {
        align-items: flex-end;
        padding: 8px;
    }

    .customer-menu-pearl-ai .pai-modal-dialog {
        max-height: calc(100dvh - 16px);
    }
}

@media (max-width: 430px) {
    .customer-menu-pearl-ai .pai-grid {
        grid-template-columns: 1fr !important;
    }
}