/*
 * FacilMenus Layout 4 — Liquid Glass
 * Original Apple-inspired web treatment. The existing Layout 1 markup and
 * behavior remain authoritative; every selector is scoped to Layout 4.
 */

body.fm-liquid-glass-layout {
    --fm-liquid-surface: rgba(18, 24, 36, .64);
    --fm-liquid-surface-strong: rgba(16, 22, 34, .78);
    --fm-liquid-surface-soft: rgba(255, 255, 255, .075);
    --fm-liquid-line: rgba(255, 255, 255, .22);
    --fm-liquid-highlight: rgba(255, 255, 255, .18);
    --fm-liquid-shadow: 0 16px 42px rgba(0, 0, 0, .27), inset 0 1px 0 rgba(255, 255, 255, .17), inset 0 -1px 0 rgba(255, 255, 255, .035);
    --fm-liquid-control-shadow: 0 8px 22px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .16);
    --fm-liquid-radius: 22px;
    --fm-liquid-control-radius: 16px;
    background-color: var(--body-color, #10131a);
    background-image:
        radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--dcolor) 17%, transparent) 0, transparent 34rem),
        radial-gradient(circle at 92% 28%, rgba(113, 92, 255, .10) 0, transparent 31rem);
    background-attachment: fixed;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-optical-sizing: auto;
}

body.theme-light.fm-liquid-glass-layout {
    --fm-liquid-surface: rgba(248, 251, 255, .62);
    --fm-liquid-surface-strong: rgba(248, 251, 255, .79);
    --fm-liquid-surface-soft: rgba(255, 255, 255, .40);
    --fm-liquid-line: rgba(255, 255, 255, .78);
    --fm-liquid-highlight: rgba(255, 255, 255, .72);
    --fm-liquid-shadow: 0 16px 40px rgba(34, 49, 76, .16), inset 0 1px 0 rgba(255, 255, 255, .94), inset 0 -1px 0 rgba(35, 48, 72, .05);
    --fm-liquid-control-shadow: 0 8px 20px rgba(42, 55, 78, .12), inset 0 1px 0 rgba(255, 255, 255, .94);
    background-color: var(--body-color, #f4f7fb);
}

body.theme-black.fm-liquid-glass-layout {
    --fm-liquid-surface: rgba(22, 22, 24, .67);
    --fm-liquid-surface-strong: rgba(18, 18, 20, .82);
    --fm-liquid-surface-soft: rgba(255, 255, 255, .065);
    --fm-liquid-line: rgba(255, 255, 255, .19);
    --fm-liquid-shadow: 0 16px 44px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(255, 255, 255, .025);
}

/* Large floating surfaces materialize as one continuous layer. */
body.fm-liquid-glass-layout .modal-content,
body.fm-liquid-glass-layout #waiterModal .modal-content,
body.fm-liquid-glass-layout #facilCategoryDrawer,
body.fm-liquid-glass-layout .customNavsideBar,
body.fm-liquid-glass-layout .shopping_cart,
body.fm-liquid-glass-layout .style_2.shopping_cart,
body.fm-liquid-glass-layout .fm-global-search-sheet,
body.fm-liquid-glass-layout .fm-qr-required-card,
body.fm-liquid-glass-layout .share_card_content,
body.fm-liquid-glass-layout .fm-games-shell,
body.fm-liquid-glass-layout .dininOrderInfo,
body.fm-liquid-glass-layout .order_page,
body.fm-liquid-glass-layout .guestLoginArea {
    background-color: var(--fm-liquid-surface-strong) !important;
    background-image: linear-gradient(145deg, var(--fm-liquid-highlight), transparent 54%) !important;
    border: 1px solid var(--fm-liquid-line) !important;
    border-radius: var(--fm-liquid-radius) !important;
    box-shadow: var(--fm-liquid-shadow) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
}

/* Header and mobile navigation retain their existing geometry. */
body.fm-liquid-glass-layout .UserMobileMenu,
body.fm-liquid-glass-layout .customNav {
    background-color: var(--fm-liquid-surface) !important;
    background-image: linear-gradient(150deg, var(--fm-liquid-highlight), transparent 58%) !important;
    border-color: var(--fm-liquid-line) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16), inset 0 1px 0 var(--fm-liquid-highlight) !important;
    -webkit-backdrop-filter: blur(24px) saturate(175%);
    backdrop-filter: blur(24px) saturate(175%);
}

/* backdrop-filter creates a containing block for fixed descendants in some
   browsers. Disable it only while the QR row is present so that Layout 1's
   fixed status geometry remains viewport-based and cannot overlap the header. */
body.fm-liquid-glass-layout .customNav.fm-qr-status-active {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Navigation matches Layout 1 exactly except for the menu-button back strip. */
body.fm-liquid-glass-layout #fm-menu-switch .fm-menu-tabs {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.fm-liquid-glass-layout #fm-menu-switch .fm-menu-tabs::before {
    display: none !important;
    content: none !important;
}

body.fm-liquid-glass-layout #fm-menu-switch .fm-menu-scroll-hint {
    background: transparent !important;
}

body.fm-liquid-glass-layout #fm-menu-switch .fm-menu-label {
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--fm-liquid-line) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.fm-liquid-glass-layout #fm-menu-switch .fm-menu-label[aria-current="page"] {
    background-color: transparent !important;
    background-image: none !important;
    border-color: color-mix(in srgb, var(--dcolor, var(--defaultColor)) 76%, white) !important;
    opacity: 1 !important;
}

/* Product cards keep the exact saved Grid/List geometry. */
body.fm-liquid-glass-layout .modern_item_card,
body.fm-liquid-glass-layout .grid_view .modern_item_card,
body.fm-liquid-glass-layout .list_view .modern_item_card,
body.fm-liquid-glass-layout .shopping_cart_content ul.cartItems > li {
    position: relative;
    isolation: isolate;
    background-color: var(--fm-liquid-surface) !important;
    background-image: linear-gradient(145deg, var(--fm-liquid-highlight), transparent 52%) !important;
    border: 1px solid var(--fm-liquid-line) !important;
    border-radius: var(--fm-liquid-radius) !important;
    box-shadow: var(--fm-liquid-shadow) !important;
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    transform: translateZ(0);
    transition: transform .32s cubic-bezier(.2, .75, .25, 1), box-shadow .32s ease, border-color .18s ease;
    will-change: transform;
}

body.fm-liquid-glass-layout .modern_item_card::before,
body.fm-liquid-glass-layout .shopping_cart_content ul.cartItems > li::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(118deg, rgba(255, 255, 255, .20), transparent 28%, transparent 72%, rgba(255, 255, 255, .055));
    opacity: .72;
    transition: opacity .22s ease, transform .34s cubic-bezier(.2, .75, .25, 1);
}

body.fm-liquid-glass-layout .modern_item_card > *,
body.fm-liquid-glass-layout .shopping_cart_content ul.cartItems > li > * {
    position: relative;
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
    body.fm-liquid-glass-layout .modern_item_card:hover {
        transform: translate3d(0, -5px, 0) scale(1.012);
        border-color: color-mix(in srgb, var(--dcolor) 36%, var(--fm-liquid-line)) !important;
        box-shadow: 0 22px 48px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
    }

    body.fm-liquid-glass-layout .modern_item_card:hover::before {
        opacity: 1;
        transform: translate3d(2%, -2%, 0);
    }
}

body.fm-liquid-glass-layout .modern_item_card:active,
body.fm-liquid-glass-layout .add_btn:active,
body.fm-liquid-glass-layout .fm-menu-label:active,
body.fm-liquid-glass-layout .view-btn:active,
body.fm-liquid-glass-layout .btn:active {
    transform: scale(.975);
    transition-duration: 90ms !important;
}

/* Scroll-triggered card reveal. The body class is added only after the small
   Layout 4 observer is ready, so cards remain visible if JavaScript is blocked. */
body.fm-liquid-glass-layout.fm-liquid-reveal-ready .items_row > .col-custom[data-fm-liquid-reveal="1"] {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition: opacity .52s cubic-bezier(.22, 1, .36, 1), transform .52s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--fm-liquid-reveal-delay, 0ms);
    will-change: opacity, transform;
}

body.fm-liquid-glass-layout.fm-liquid-reveal-ready .items_row > .col-custom[data-fm-liquid-reveal="1"].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

/* Controls retain restaurant colors while receiving the Liquid Glass depth. */
body.fm-liquid-glass-layout .add_btn,
body.fm-liquid-glass-layout .fm-menu-label,
body.fm-liquid-glass-layout .view-btn,
body.fm-liquid-glass-layout .fm-waiter-request-btn,
body.fm-liquid-glass-layout .fm-waiter-send-request,
body.fm-liquid-glass-layout .order-btn,
body.fm-liquid-glass-layout .btn,
body.fm-liquid-glass-layout button:not(.categoryItem),
body.fm-liquid-glass-layout input,
body.fm-liquid-glass-layout select,
body.fm-liquid-glass-layout textarea,
body.fm-liquid-glass-layout .select2-selection {
    border-color: var(--fm-liquid-line) !important;
    box-shadow: var(--fm-liquid-control-shadow);
    transition: transform .18s cubic-bezier(.2, .75, .25, 1), box-shadow .2s ease, opacity .2s ease, background-color .2s ease;
}

body.fm-liquid-glass-layout .add_btn,
body.fm-liquid-glass-layout .fm-menu-label,
body.fm-liquid-glass-layout .view-btn,
body.fm-liquid-glass-layout .fm-waiter-request-btn,
body.fm-liquid-glass-layout .fm-waiter-send-request,
body.fm-liquid-glass-layout .order-btn,
body.fm-liquid-glass-layout .btn {
    -webkit-backdrop-filter: blur(14px) saturate(165%);
    backdrop-filter: blur(14px) saturate(165%);
}

body.fm-liquid-glass-layout :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--dcolor) 76%, white) !important;
    outline-offset: 3px !important;
}

/* Product images use the same radius on all four corners and gain a little
   more visual area. Text is limited to two compact lines without empty slots. */
body.fm-liquid-glass-layout .grid_view .item_thumb_inner {
    grid-template-rows: 184px minmax(0, 1fr) !important;
}

body.fm-liquid-glass-layout .grid_view .modern_item_card.no_img .item_thumb_inner {
    grid-template-rows: minmax(0, 1fr) !important;
}

body.fm-liquid-glass-layout .grid_view .item_img_box {
    width: 100% !important;
    height: 184px !important;
    border-radius: calc(var(--fm-liquid-radius) - 1px) !important;
}

body.fm-liquid-glass-layout .grid_view .item_img {
    border-radius: inherit !important;
}

body.fm-liquid-glass-layout .grid_view .item_details {
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
    padding: 10px 12px 11px !important;
    gap: 4px !important;
}

body.fm-liquid-glass-layout .grid_view .item_title {
    min-height: 0 !important;
    max-height: 2.48em !important;
    margin: 0 !important;
    -webkit-line-clamp: 2 !important;
}

body.fm-liquid-glass-layout .grid_view .item_desc {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    min-height: 0 !important;
    max-height: 2.5em !important;
    margin: 0 !important;
    overflow: hidden !important;
}

body.fm-liquid-glass-layout .grid_view .item_price_action {
    min-height: 32px !important;
    margin-top: 3px !important;
}

body.fm-liquid-glass-layout .list_view .item_img_box {
    width: 84px !important;
    min-width: 84px !important;
    min-height: 100px !important;
    margin: 6px 0 6px 6px !important;
    border-radius: 16px !important;
}

body.fm-liquid-glass-layout .list_view .item_img {
    border-radius: inherit !important;
}

body.fm-liquid-glass-layout .sliderSectionArea,
body.fm-liquid-glass-layout .sliderSectionArea img {
    border-radius: inherit;
}

body.fm-liquid-glass-layout .modal.show .modal-content,
body.fm-liquid-glass-layout .shopping_cart.active .shopping_cart_content,
body.fm-liquid-glass-layout .customNavsideBar.activeNav {
    animation: fmLiquidMaterialize .18s cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes fmLiquidMaterialize {
    from { opacity: .72; filter: saturate(.88); }
    to { opacity: 1; filter: saturate(1); }
}

/* Graceful fallbacks: legibility takes priority over translucency. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body.fm-liquid-glass-layout {
        --fm-liquid-surface: rgba(25, 30, 42, .96);
        --fm-liquid-surface-strong: rgba(20, 25, 36, .98);
    }
    body.theme-light.fm-liquid-glass-layout {
        --fm-liquid-surface: rgba(248, 250, 253, .97);
        --fm-liquid-surface-strong: rgba(250, 252, 255, .99);
    }
}

@media (prefers-reduced-transparency: reduce) {
    body.fm-liquid-glass-layout {
        --fm-liquid-surface: #202633;
        --fm-liquid-surface-strong: #171c27;
    }
    body.theme-light.fm-liquid-glass-layout {
        --fm-liquid-surface: #f7f9fc;
        --fm-liquid-surface-strong: #ffffff;
    }
    body.fm-liquid-glass-layout * {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

@media (prefers-contrast: more) {
    body.fm-liquid-glass-layout {
        --fm-liquid-surface: rgba(15, 18, 25, .96);
        --fm-liquid-surface-strong: rgba(8, 10, 15, .98);
        --fm-liquid-line: rgba(255, 255, 255, .58);
    }
    body.theme-light.fm-liquid-glass-layout {
        --fm-liquid-surface: rgba(255, 255, 255, .97);
        --fm-liquid-surface-strong: #ffffff;
        --fm-liquid-line: rgba(14, 23, 38, .56);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.fm-liquid-glass-layout *,
    body.fm-liquid-glass-layout *::before,
    body.fm-liquid-glass-layout *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    body.fm-liquid-glass-layout .modern_item_card:hover,
    body.fm-liquid-glass-layout .modern_item_card:active {
        transform: none !important;
    }
}

@media (max-width: 767px) {
    body.fm-liquid-glass-layout {
        background-attachment: scroll;
    }
    body.fm-liquid-glass-layout .modern_item_card,
    body.fm-liquid-glass-layout .grid_view .modern_item_card,
    body.fm-liquid-glass-layout .list_view .modern_item_card {
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        backdrop-filter: blur(14px) saturate(160%);
        will-change: auto;
    }

    body.fm-liquid-glass-layout .grid_view .item_thumb_inner {
        grid-template-rows: 126px minmax(0, 1fr) !important;
    }

    body.fm-liquid-glass-layout .grid_view .modern_item_card.no_img .item_thumb_inner {
        grid-template-rows: minmax(0, 1fr) !important;
    }

    body.fm-liquid-glass-layout .grid_view .item_img_box {
        height: 126px !important;
        border-radius: 13px !important;
    }

    body.fm-liquid-glass-layout .grid_view .item_details {
        min-height: 0 !important;
        padding: 8px 9px 9px !important;
        gap: 3px !important;
    }
}