/* Define a single container width variable so all pieces align consistently */
:root {
    /* Adjust this percentage to tweak how wide the menu appears on the page.
       The original menu uses a relatively wide content area, so 60% yields
       a similar look on desktop screens. */
    --container-width: 45%;
    --ink: #1b1a1a;
    --accent: #c8a46b;   /* toasted gold beige */
    --accent-2: #f3e6cf; /* soft linen */
    --muted: #5f574f;
    --surface: rgba(255, 255, 255, 0.96);
    --frosted: rgba(250, 247, 240, 0.9);
    --border: rgba(200, 164, 107, 0.26);
    --shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}
.menu-item-info .names span {
    background: none;
    color: var(--ink);
}
/* ÅÚÏÇÏÇÊ ÇáäÕ ÇáÕÛíÑ ÊÍÊ ÇáÇÓã */
.slogan {
    font-size: 0.9rem;
    opacity: 1;
    letter-spacing: 1px;
    margin-top: -7px;
}

/* ÑãÒ ® ÇáÕÛíÑ ÇáãÑÊÝÚ */
.tm {
    font-size: 0.50em;
    position: relative;
    top: -1.50em;
    margin-left: 4px;
}

/* ÊÑÊíÈ ÇáßæäÊíäÑ Çááí Ýíå ÇáåíÑæ + ÇáÓÇÈ äÇÝ */
#welcome {
    width: var(--container-width);
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* ÞÓã ÇáåíÑæ ÇáÚÇã */
#hero {
    display: block;
    margin-top: 1rem;
    width: 100%;
    box-sizing: border-box;
}

/* ÇáßÑÊ äÝÓå ÊÈÚ ÇáÕæÑÉ */
.hero-slide {
    width: 100%;
    height: 392px;
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    background: #121110;
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow:
        0 34px 60px rgba(0, 0, 0, 0.38),
        0 8px 20px rgba(0, 0, 0, 0.26);
    isolation: isolate;
}

.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 14% 18%, rgba(247, 217, 167, 0.25), transparent 38%),
        radial-gradient(circle at 86% 82%, rgba(200, 164, 107, 0.2), transparent 40%),
        linear-gradient(180deg, rgba(9, 8, 7, 0.04), rgba(9, 8, 7, 0.62));
    filter: blur(2px);
    z-index: 2;
    animation: hero-ambient-light 12s ease-in-out infinite alternate;
    pointer-events: none;
}

.hero-slide::after {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    z-index: 3;
    pointer-events: none;
}

.hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #171412;
    z-index: 0;
}

.hero-media-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease;
    will-change: opacity;
}

.hero-media-layer.is-active {
    opacity: 1;
}

.hero-media-layer img,
.hero-media-layer video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.03);
    filter: contrast(1.05) saturate(1.06);
}

.hero-media-layer img {
    animation: hero-image-zoom 9s ease-in-out both;
}

.hero-media-layer video {
    transform: none;
    filter: brightness(0.9) contrast(1.06) saturate(1.04);
}

@keyframes hero-image-zoom {
    from { transform: scale(1.03); }
    to { transform: scale(1.09); }
}

@keyframes hero-ambient-light {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-1.8%, 1.2%, 0) scale(1.04); }
    100% { transform: translate3d(1.6%, -1.1%, 0) scale(1.02); }
}

/* ÇáØÈÞÉ ÇáÓæÏÇÁ ÇáÔÝÇÝÉ ÝæÞ ÇáÕæÑÉ + ÊæÒíÚ ÇáäÕ Ýí ÇáäÕ */
.hero-slide .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at center, rgba(20, 18, 16, 0.16), rgba(6, 5, 4, 0.66)),
        linear-gradient(180deg, rgba(7, 7, 7, 0.24), rgba(7, 7, 7, 0.7));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    padding: 1.1rem;
    z-index: 4;
}

.hero-slide .overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 6%, rgba(255, 255, 255, 0.16), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0.45), transparent 58%);
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
}

.hero-slide .overlay::after {
    content: '';
    position: absolute;
    inset: -20%;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 2px, rgba(255, 255, 255, 0) 2px 7px);
    opacity: 0.16;
    mix-blend-mode: soft-light;
    z-index: 0;
    pointer-events: none;
}

.hero-brand {
    --hero-tilt-x: 0deg;
    --hero-tilt-y: 0deg;
    --hero-lift: 0px;
    position: relative;
    z-index: 1;
    width: min(446px, 92%);
    min-height: 276px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.58rem;
    padding: 1.3rem 1.45rem 1.35rem;
    border-radius: 24px;
    background: linear-gradient(165deg, rgba(35, 31, 29, 0.44), rgba(7, 7, 7, 0.74));
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 28px 54px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px) saturate(130%);
    transform: perspective(900px) rotateX(var(--hero-tilt-x)) rotateY(var(--hero-tilt-y)) translateY(var(--hero-lift));
    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
    will-change: transform;
}

.hero-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.35), rgba(247, 217, 167, 0.36), rgba(255, 255, 255, 0.2));
    opacity: 0.27;
    mix-blend-mode: screen;
    pointer-events: none;
}

.hero-brand::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.2), transparent 34%);
    opacity: 0.75;
    pointer-events: none;
}

.hero-brand:hover {
    --hero-lift: -6px;
    border-color: rgba(255, 255, 255, 0.45);
    background: linear-gradient(162deg, rgba(38, 33, 30, 0.5), rgba(9, 8, 8, 0.8));
    box-shadow:
        0 34px 60px rgba(0, 0, 0, 0.52),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #f7d9a7;
    background: linear-gradient(120deg, rgba(247, 217, 167, 0.16), rgba(247, 217, 167, 0.08));
    border: 1px solid rgba(247, 217, 167, 0.36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.hero-logo-shell {
    position: relative;
    width: clamp(98px, 11vw, 126px);
    height: clamp(98px, 11vw, 126px);
    padding: 0.54rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.07));
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        0 14px 30px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.hero-logo-shell::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: conic-gradient(from 0deg, rgba(247, 217, 167, 0), rgba(247, 217, 167, 0.6), rgba(255, 255, 255, 0), rgba(200, 164, 107, 0.45), rgba(247, 217, 167, 0));
    opacity: 0.78;
    animation: hero-logo-orbit 8s linear infinite;
    pointer-events: none;
}

.hero-logo-shell::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.24);
    pointer-events: none;
}

@keyframes hero-logo-orbit {
    to { transform: rotate(360deg); }
}

.hero-logo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
    animation: hero-logo-float 5.6s ease-in-out infinite;
}

@keyframes hero-logo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ÅÚÏÇÏÇÊ ÚäæÇä VIEW CAFE */
.hero-slide .overlay h1 {
    margin: 0.1rem 0 0;
    font-size: clamp(1.58rem, 2.7vw, 2.02rem);
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    font-family: 'Playfair Display', 'Cormorant Garamond', serif;
    text-shadow: 0 10px 24px rgba(0, 0, 0, 0.68);
}

.hero-tagline {
    margin: -0.08rem 0 0;
    font-size: 0.79rem;
    letter-spacing: 0.17em;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 238, 221, 0.88);
}

.hero-brand .slogan {
    margin-top: 0;
    letter-spacing: 0.11em;
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: lowercase;
    opacity: 0.96;
    display: inline-flex;
    align-items: center;
    gap: 0.22ch;
    color: rgba(255, 247, 237, 0.96);
}

#hero-changing-slogan {
    display: inline-block;
    min-width: 16.6ch;
    text-align: center;
    text-shadow: 0 6px 14px rgba(0, 0, 0, 0.52);
}

.typing-cursor {
    display: inline-block;
    width: 0.6ch;
    margin-left: 0.1ch;
    animation: hero-cursor-blink 0.9s steps(1) infinite;
    color: #f7d9a7;
    text-shadow: 0 0 12px rgba(247, 217, 167, 0.65);
}

@keyframes hero-cursor-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide::before {
        animation: none;
    }
    .hero-media-layer {
        transition: none;
    }
    .hero-media-layer img {
        animation: none;
        transform: none;
    }
    .hero-logo {
        animation: none;
    }
    .hero-brand,
    .hero-logo-shell::before,
    .typing-cursor {
        animation: none;
        transition: none;
    }
}

.hero-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0.03em;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
    backdrop-filter: blur(6px);
}

.cta-button.primary {
    background: linear-gradient(120deg, var(--accent), #f7d9a7);
    color: #1b1a1a;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.cta-button.ghost {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    color: #1b1a1a;
    border-color: rgba(255, 255, 255, 0.55);
}

.order-page .slogan {
    letter-spacing: 0.02em;
}

.checkout-section {
    width: var(--container-width);
    max-width: 760px;
    margin: 2.2rem auto 0;
}

.checkout-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.6rem;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(8px);
}

.checkout-header h2 {
    margin: 0.2rem 0 0.35rem;
    font-size: 1.4rem;
}

.checkout-sub {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
    font-weight: 700;
}

.checkout-hint {
    margin: 0.6rem 0 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.eyebrow {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0;
    font-weight: 800;
}

.checkout-stats {
    display: flex;
    gap: 0.8rem;
    margin: 0.9rem 0;
    flex-wrap: wrap;
}

.stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.85rem;
    background: linear-gradient(180deg, rgba(243, 230, 207, 0.4), rgba(255, 255, 255, 0.95));
    border: 1px solid var(--border);
    border-radius: 12px;
    font-weight: 800;
    color: var(--ink);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.stat-chip .label {
    color: var(--muted);
    font-size: 0.85rem;
}

.stat-chip .value {
    font-size: 1rem;
}

.checkout-form {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.checkout-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.checkout-form label {
    font-weight: 800;
    color: var(--ink);
}

.checkout-form input,
.checkout-form select,
.checkout-form textarea {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 0.8rem;
    font-size: 0.98rem;
    font-family: inherit;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.checkout-form textarea {
    resize: vertical;
}

.checkout-form .split {
    display: flex;
    gap: 0.8rem;
}

.checkout-form .split .field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.payment-note {
    background: rgba(200, 164, 107, 0.12);
    border: 1px dashed var(--border);
    color: var(--muted);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-weight: 700;
}

.checkout-pay {
    margin-top: 0.2rem;
    background: linear-gradient(120deg, var(--accent), #f7d9a7);
    color: #1b1a1a;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.checkout-pay:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
}

.checkout-pay:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
    filter: brightness(1.02);
}

.checkout-status {
    min-height: 1.2rem;
    font-weight: 800;
    margin-top: 0.35rem;
    color: var(--muted);
}

.checkout-status.success {
    color: #0b7c3b;
}

.checkout-status.error {
    color: #b02a2a;
}

.booking-panel {
    gap: 0.9rem;
}

.booking-summary h3 {
    margin: 0 0 0.4rem;
    color: var(--ink);
}

.cart-count-line {
    font-weight: 700;
    color: var(--ink);
    margin: 0.25rem 0;
}

.cart-empty {
    color: var(--muted);
    font-weight: 700;
    padding: 0.4rem 0;
}

.booking-fields {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 0.4rem;
}

.booking-fields .form-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.booking-fields .two-cols {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.booking-fields .field {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.booking-fields label {
    font-weight: 800;
    color: var(--ink);
}

.booking-fields input,
.booking-fields textarea {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 0.8rem;
    font-size: 0.98rem;
    font-family: inherit;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.booking-fields textarea {
    resize: vertical;
}

.booking-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.cta-button.small {
    padding: 0.55rem 0.9rem;
    font-size: 0.92rem;
}

.location-section {
    width: var(--container-width);
    max-width: 760px;
    margin: 1.6rem auto 0;
}

.location-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.4rem;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.location-header h2 {
    margin: 0.1rem 0 0.25rem;
    font-size: 1.3rem;
}

.location-sub {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

.location-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.menu-item-info .price {
    background: rgba(255, 255, 255, 0.96);
    color: #1b1a1a !important;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid rgba(200, 164, 107, 0.95);
    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px);
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.slogan {
    font-size: 0.9rem;   /* ÕÛøÑ ÇáÑÞã ÅÐÇ ÈÏß ÃÕÛÑ */
    opacity: 1;        /* äÚæãÉ */
    letter-spacing: 1px; /* ãÓÇÝÇÊ áØíÝÉ Èíä ÇáÍÑæÝ */
    margin-top: -7px;    /* ÑÝÚ ááÃÚáì (ÇÎÊíÇÑí) */
}
.tm {
     font-size: 0.50em;     
    position: relative;
    top: -1.50em;           
    margin-left: 4px; 
    
}
.flag {
    width: 18px;
    height: 12px;
    object-fit: cover;
    margin: 0 6px -2px 4px; /* ãÓÇÝÇÊ ãËÇáíÉ */
    border-radius: 2px;
}

.location-line {
    font-size: 0.9rem;
    margin-top: -5px;
    display: inline-block;
    color: var(--muted);
}

.location-line a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    margin-right: 4px;
}

.location-line a:hover {
    color: var(--accent-2);
}

body {
    /* Modern sans with Arabic fallback */
    font-family: 'Manrope', 'Cairo', 'Montserrat', Arial, sans-serif;
    margin: 0;
    padding: 0;
    /* Minimal beige / ivory gradient */
    background:
        radial-gradient(circle at 16% 70%, rgba(243, 230, 207, 0.24), transparent 46%),
        radial-gradient(circle at 84% 24%, rgba(200, 164, 107, 0.16), transparent 40%),
        linear-gradient(180deg, #fdf8f1 0%, #f7f0e6 48%, #ffffff 100%);
    color: var(--ink);
    /* Create space at the bottom for the taller fixed navigation bar */
    padding-bottom: 190px;
}

#landing-grid {
    width: min(92vw, 780px);
    margin: 1.8rem auto 1.6rem;
    padding: 1.8rem 1.4rem 1.2rem;
    text-align: center;
    background: radial-gradient(circle at 18% 14%, rgba(200,164,107,0.14), transparent 34%), linear-gradient(180deg, #fefaf3 0%, #f4e8d4 100%);
    border: 1px solid rgba(200, 164, 107, 0.28);
    border-radius: 26px;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.14);
}

.landing-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    position: relative;
}

.landing-brand::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 3px;
    background: linear-gradient(120deg, var(--accent), #f1d9a4);
    border-radius: 999px;
}

.landing-logo {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

.landing-title {
    margin: 0.1rem 0 0;
    font-size: 1.8rem;
    letter-spacing: 0.09em;
}

.landing-tagline {
    margin: 0;
    font-weight: 800;
    color: var(--ink);
    font-size: 1.05rem;
}

.landing-subtag {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
    letter-spacing: 0.04em;
}

.landing-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 2.1rem 0 0.8rem;
}

.landing-btn {
    display: block;
    width: 100%;
    padding: 1.2rem 1.2rem;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 800;
    text-align: center;
    border: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 1.02rem;
}

.landing-btn.primary {
    background: linear-gradient(120deg, var(--accent), #f1d9a4);
    color: #1b1a1a;
    border-color: rgba(200, 164, 107, 0.6);
}

.landing-btn.accent {
    background: #1b1a1a;
    color: #fff;
}

.landing-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
    border-color: var(--accent);
}

.landing-btn .btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    line-height: 1.2;
}

.landing-btn .btn-text strong {
    font-size: 1.05rem;
}

.landing-btn .btn-text small {
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.65);
}

.landing-btn.accent .btn-text small {
    color: rgba(255, 255, 255, 0.8);
}

.landing-meta-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--muted);
    padding: 0.5rem 0.6rem;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
}

.landing-meta-links .dot {
    color: var(--border);
}

.text-link {
    text-decoration: none;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.text-link:hover {
    color: var(--accent);
}

.jobs-card {
    width: min(92vw, 720px);
    margin: 0 auto 2rem;
    padding: 1.1rem 1.4rem;
    border: 1px dashed var(--border);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 236, 222, 0.9));
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
}
.jobs-eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 800;
}
.jobs-title {
    margin: 0.15rem 0 0.25rem;
    font-size: 1.1rem;
    color: var(--ink);
}
.jobs-copy {
    margin: 0;
    color: var(--muted);
    font-weight: 600;
}
.jobs-btn {
    padding: 0.75rem 1.1rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(120deg, #1b1a1a, var(--ink));
    border: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.jobs-btn:hover {
    background: linear-gradient(120deg, var(--accent), #f1d9a4);
    color: #1b1a1a;
}

#jobs {
    scroll-margin-top: 120px;
}

header {
    background-color: var(--frosted);
    border: 1px solid var(--border);
    color: var(--ink);
    padding: 1rem;
    text-align: center;
    /* Use the container width for header */
    width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
}
/* Top navigation bar for sub-categories */
/*
  The sub navigation bar is composed of three parts:
  1. A left arrow button to scroll backwards.
  2. A horizontal scrolling container (#sub-nav-buttons) that holds the sub?category buttons.
  3. A right arrow button to scroll forwards.

  The bar has a refined, elegant appearance with rounded corners, a light
  background, and a subtle shadow. The container itself does not scroll;
  instead, the inner button wrapper handles horizontal overflow.
*/
#sub-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Increase vertical padding for a taller top navigation bar.  This
       provides more breathing room around the text and arrows. */
    padding: 0.8rem 0;
    /* Refined translucent background with a stronger blur for a luxe effect */
    background-color: var(--frosted);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    /* Ensure the nav bar inherits the same width as the menu container
       from its parent (#welcome).  When the .fixed class is applied via
       JavaScript, the bar will still respect var(--container-width). */
    /* Include the border in the element's width calculation so the
       sub?navigation bar matches the width of the hero and menu precisely. */
    box-sizing: border-box;
}

/* Container for subcategory buttons inside the nav.  It scrolls horizontally
   to reveal additional buttons when needed. */
#sub-nav-buttons {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    flex: 1;
    padding: 0 0.25rem;
    scroll-behavior: smooth;
}

#sub-nav.rtl {
    direction: rtl;
}

#sub-nav.rtl #sub-nav-buttons {
    direction: rtl;
}

#sub-nav.rtl #sub-nav-buttons button {
    text-align: right;
}


/* Hide horizontal scrollbar for the button container */
#sub-nav-buttons::-webkit-scrollbar {
    display: none;
}

/* Arrow buttons to scroll the sub-navigation horizontally */
.nav-arrow {
    border: 1px solid var(--border);
    background-color: rgba(255, 255, 255, 0.65);
    color: var(--accent);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s, box-shadow 0.2s;
    /* Add horizontal margin so the arrows are not flush against the bar edges */
    margin: 0 0.6rem;
}
.nav-arrow:hover {
    background-color: rgba(200, 164, 107, 0.18);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.08);
    color: var(--accent);
}

/* Hide scrollbar in WebKit-based browsers */
#sub-nav::-webkit-scrollbar {
    display: none;
}

/* When the sub navigation bar should stick to the top of the viewport, a
   `.fixed` class is applied via JavaScript.  This class turns the bar into
   a fixed positioned element and centers it horizontally based on the
   configured container width. */
#sub-nav.fixed {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--container-width);
    max-width: 650px;
    z-index: 1000;
    /* Ensure borders are included when fixed */
    box-sizing: border-box;
}
/* Styling for buttons inside both navigation bars (main and sub). */
#main-nav button,
#sub-nav-buttons button,
#utility-nav-buttons button {
    border: none;
    background-color: transparent;
    box-shadow: none;
    padding: 0.4rem 0.7rem;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 0;
    color: var(--ink);
    font-weight: 600;
    transition: color 0.2s, background-color 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    position: relative;
}

/* Active state for nav buttons */
#main-nav button.active,
#sub-nav-buttons button.active,
#utility-nav-buttons button.active {
    color: var(--accent);
    font-weight: 700;
}

#main-nav button.active::after,
#sub-nav-buttons button.active::after,
#utility-nav-buttons button.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    border-radius: 4px;
}

/* Hover effect for nav buttons */
#main-nav button:hover,
#sub-nav-buttons button:hover,
#utility-nav-buttons button:hover {
    color: var(--accent);
    background: rgba(200, 164, 107, 0.18);
    border-radius: 8px;
}

#menu-content {
    padding: 1rem;
    /* The main content should share the same width as the header and nav */
    width: var(--container-width);
    /* Allow the content area to grow wider to better mirror the reference menu */
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    /* Light background behind the cards to match the original design */
    background-color: var(--frosted);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    /* Ensure border and padding are included in the width */
    box-sizing: border-box;
}

/* Page loader overlay */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: transparent;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.55rem 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(200, 164, 107, 0.28);
    box-shadow: 0 16px 32px rgba(32, 28, 20, 0.14);
    color: var(--ink);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 10px 28px rgba(32, 28, 20, 0.16);
    text-align: center;
}

.loader-ring {
    position: relative;
    width: 70px;
    height: 3px;
    border-radius: 999px;
    background: rgba(200, 164, 107, 0.25);
    overflow: hidden;
}

.loader-text {
    font-size: 0.95rem;
    max-width: min(84vw, 540px);
    line-height: 1.5;
}

.loader-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 35%;
    margin-left: -35%;
    background: linear-gradient(90deg, transparent, rgba(200, 164, 107, 0.9), transparent);
    animation: loaderSweep 1.1s ease-in-out infinite;
}

@keyframes loaderSweep {
    0% { transform: translateX(0); opacity: 0; }
    25% { opacity: 1; }
    100% { transform: translateX(185%); opacity: 0; }
}

/* Motion cues when switching language */
:root {
    --lang-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --lang-stagger: 28ms;
}

#menu-content.lang-switching {
    animation: langShell 0.45s var(--lang-ease);
}

#main-nav.lang-switching,
#sub-nav.lang-switching,
#utility-nav.lang-switching {
    animation: langBar 0.35s var(--lang-ease);
}

#main-nav.lang-switching .nav-item,
#sub-nav.lang-switching #sub-nav-buttons button,
#utility-nav.lang-switching button,
#menu-content.lang-switching section h2,
#menu-content.lang-switching .menu-item-card {
    animation: langItem 0.48s var(--lang-ease) both;
    animation-delay: calc(var(--lang-i, 0) * var(--lang-stagger));
}

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

@keyframes langBar {
    from {
        opacity: 0.6;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media (prefers-reduced-motion: reduce) {
    #menu-content.lang-switching,
    #main-nav.lang-switching,
    #sub-nav.lang-switching,
    #utility-nav.lang-switching,
    #main-nav.lang-switching .nav-item,
    #sub-nav.lang-switching #sub-nav-buttons button,
    #utility-nav.lang-switching button,
    #menu-content.lang-switching section h2,
    #menu-content.lang-switching .menu-item-card {
        animation: none;
    }
    .loader-ring {
        animation: none;
    }
    .loader-ring::after {
        animation: none;
    }
}
.menu-item-card {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 16px;
    background-color: var(--frosted);
    backdrop-filter: blur(16px) saturate(120%);
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow);
    /* Ensure each card has a consistent height. Further reduce the height for a more compact layout */
    min-height: 160px;
}
.menu-item-card img {
    /* Reduce the image width further to match the reduced card height */
    width: 160px;
    /* Make the image height stretch to the full height of its parent card so it
       aligns perfectly with the white card background.  Using 100% here
       allows the image to fill the height of the flex container instead of
       using a fixed size. */
    height: 100%;
    object-fit: cover;
    border-right: 1px solid var(--border);
}
.menu-item-info {
    padding: 0.75rem 0.75rem 3rem;
    flex: 1;
    position: relative;
}
.menu-item-info .names {
    display: flex;
    flex-direction: column;
    font-weight: bold;
    margin-bottom: 0.25rem;
    gap: 2px;
}
.menu-item-info .description {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--muted);
}

.menu-item-card {
    animation: fadeUp 0.5s ease forwards;
}
#sub-nav-buttons {
    scroll-behavior: smooth;
}
.menu-item-card img {
    transition: 0.3s ease;
}
.fade-scroll {
    opacity: 0;
    transform: translateY(10px);
    transition: 0.6s ease;
}

.fade-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.menu-item-card:hover img {
    transform: scale(1.05);
    filter: brightness(1.05);
}

.menu-item-info .names {
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
.menu-item-card img {
    filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.1));
}

.menu-item-card {
    background: var(--frosted);
}

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


#menu-content.rtl .menu-item-info .price {
    right: auto;
    left: 10px;
}




body {
    padding-bottom: 120px;
}
/* Main navigation bar styles */
/* Wrapper for stacked bottom bar */
#nav-wrapper {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--container-width);
    max-width: 680px;
    background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(250,247,240,0.6));
    backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
    padding: 0.6rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    box-sizing: border-box;
    z-index: 1000;
}

/* Main navigation bar (categories row) */
#main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
#main-nav::-webkit-scrollbar { display: none; }

#main-nav.rtl #main-nav-buttons {
    direction: rtl;
}

#main-nav.rtl #main-nav-buttons .nav-item {
    text-align: right;
}

/* Utility navigation bar (language + cart row) */
#utility-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    width: 100%;
    border-top: 1px solid var(--border);
    padding-top: 0.25rem;
}

#utility-nav-buttons {
    display: flex;
    gap: 0.45rem;
}

#cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 0 8px;
    border-radius: 12px;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
}


/* Reduce padding and font size specifically for bottom navigation buttons so that
   more categories (e.g., Hookah and language toggle) can fit within the
   half?width bar without overflowing. These overrides come after the shared
   nav button styles above to ensure they apply only to the main navigation. */
#main-nav button {
    /* Strip default button styling for a cleaner look.  Remove borders and
       backgrounds so that categories appear as simple labels with icons.
       Increase font size and padding for better readability. */
    border: none;
    background-color: transparent;
    box-shadow: none;
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    color: var(--ink);
    font-weight: 600;
}

/* When using icons in the bottom navigation, stack the icon above the label
   and center them.  The `.nav-item` class is applied to buttons created
   dynamically by loadMainCategories(). */
#main-nav button.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Increase the gap between icon and label for clearer separation */
    gap: 0.35rem;
    font-size: 1rem;
}
/* Constrain the size of the icon within the nav buttons */
#main-nav button.nav-item .nav-icon {
    width: 56px;
    height: 56px;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.12));
    transition: transform 0.18s ease, filter 0.18s ease;
}

#main-nav button.nav-item.active .nav-icon {
    transform: translateY(-1px) scale(1.04);
    filter: brightness(1.08) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.16));
}

/* Horizontal scroll container for main categories and language toggle */
#main-nav-buttons {
    display: flex;
    gap: 0.2rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* Hide horizontal scrollbar for main nav buttons in WebKit browsers */
#main-nav-buttons::-webkit-scrollbar {
    display: none;
}

/*
 * Layout adjustments based on language selection.  When the user toggles to
 * Arabic, the menu content container will receive a `.rtl` class; for
 * English or both languages, it will receive `.ltr`.  These classes
 * control text direction and alignment within menu item cards.
 */
#menu-content.rtl .menu-item-info {
    direction: rtl;
    text-align: right;
}

#menu-content.rtl .menu-item-card {
    flex-direction: row-reverse;
}

#menu-content.rtl .menu-item-card img {
    border-right: none;
    border-left: 1px solid var(--border);
}

#menu-content.ltr .menu-item-info {
    direction: ltr;
    text-align: left;
}

#menu-content.rtl section h2 {
    font-family: 'Cairo', sans-serif;
    letter-spacing: normal;
    text-transform: none;
    text-align: right;
    direction: rtl;
}

#menu-content.ltr section h2 {
    text-align: left;
}

/* Removed arrow button styles from bottom navigation as the bar now shows all
   items without horizontal scrolling. */


#menu-content section {
    margin-bottom: 2rem;
}
#menu-content section h2 {
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid rgba(200, 164, 107, 0.4);
    font-size: 1.2rem;
    color: var(--ink);
    backdrop-filter: blur(6px);
    font-family: 'Playfair Display', 'Cormorant Garamond', serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.menu-item-info .names span {
    font-size: 1rem;
    /*
      The item names were previously inheriting the body text color (white),
      which caused them to disappear against the white card background.
      Explicitly set a dark color here so the names remain visible.
    */
    color: var(--ink);
}
.menu-item-info .description {
    font-size: 0.95rem;
}
.menu-item-info .price {
    font-size: 1rem;
}

/* ====== ITEM MODAL (frosted glass) ====== */

#item-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 19, 26, 0.45);
    backdrop-filter: blur(8px);
    z-index: 2000;
}

#item-modal.open {
    display: flex;
}

#item-modal .modal-dialog {
    position: relative;
    width: min(520px, 94vw);
    background: var(--frosted);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 1rem;
    display: grid;
    gap: 0.8rem;
    backdrop-filter: blur(14px) saturate(120%);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s, box-shadow 0.2s;
}

.modal-close:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
}

.modal-image {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.modal-image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

.modal-details h3 {
    margin: 0 0 0.35rem 0;
    color: var(--ink);
    font-family: 'Playfair Display', 'Cormorant Garamond', serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.modal-details p {
    margin: 0 0 0.6rem 0;
    color: var(--muted);
}

#menu-content.rtl .modal-details h3 {
    font-family: 'Cairo', sans-serif;
    letter-spacing: normal;
    text-transform: none;
}

.modal-price {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.96);
    color: #1b1a1a !important;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    border: 1.5px solid rgba(200, 164, 107, 1);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(8px);
}
.modal-actions {
    margin-top: 0.6rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.modal-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #c7a46a 0%, #ad8a52 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    min-width: 160px;
}
.modal-add:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}
.modal-feedback {
    margin-top: 0.5rem;
    text-align: right;
    font-weight: 700;
    color: var(--accent);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.modal-feedback.show {
    opacity: 1;
    transform: translateY(0);
}

/* ====== CART PANEL ====== */

.cart-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--accent);
    border-radius: 6px;
    padding: 0.35rem 0.45rem;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    justify-content: center;
}
.cart-button:hover {
    color: var(--accent-2);
}
.cart-submit {
    margin-top: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(120deg, var(--accent), #f1d9a4);
    color: #1b1a1a;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(0,0,0,0.12);
}

.cart-text {
    font-weight: 700;
    color: var(--accent);
}

.cart-paren {
    color: var(--accent-2);
    font-weight: 700;
}

#cart-panel {
    position: fixed;
    right: 12px;
    bottom: 92px;
    width: min(360px, 90vw);
    background: var(--frosted);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 0.75rem;
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1600;
    backdrop-filter: blur(12px) saturate(120%);
}
#cart-panel.open {
    display: flex;
}
.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    color: var(--ink);
}
.cart-header button {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.cart-items {
    max-height: 240px;
    overflow-y: auto;
    display: grid;
    gap: 0.4rem;
}
.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.82);
}
.cart-item-name {
    font-weight: 600;
    color: var(--ink);
    max-width: 70%;
}
.cart-item-price {
    color: var(--muted);
    font-weight: 600;
}
.cart-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: var(--ink);
    padding-top: 0.25rem;
    border-top: 1px solid var(--border);
}

/* ====== RESPONSIVE TWEAKS ====== */

@media (max-width: 768px) {
    :root {
        --container-width: 94%;
    }
    #hero .hero-slide {
        height: 322px;
    }
    .hero-brand {
        width: min(360px, 94%);
        min-height: 234px;
        padding: 1rem 0.95rem 1.06rem;
        gap: 0.48rem;
        border-radius: 20px;
    }
    .hero-pill {
        font-size: 0.55rem;
        padding: 0.26rem 0.62rem;
    }
    .hero-logo-shell {
        width: 86px;
        height: 86px;
    }
    .hero-slide .overlay h1 {
        font-size: 1.18rem;
        letter-spacing: 0.12em;
    }
    .hero-tagline {
        font-size: 0.68rem;
        letter-spacing: 0.13em;
    }
    .hero-brand .slogan {
        font-size: 0.72rem;
        letter-spacing: 0.09em;
    }
    #hero-changing-slogan {
        min-width: 14.3ch;
    }
    #sub-nav {
        padding: 0.45rem 0;
        border-radius: 18px;
    }
    #sub-nav-buttons {
        gap: 0.35rem;
        padding: 0 0.15rem;
    }
    #sub-nav-buttons button {
        font-size: 0.82rem;
        padding: 0.3rem 0.5rem;
    }
    .nav-arrow {
        width: 34px;
        height: 34px;
        font-size: 1.15rem;
        margin: 0 0.32rem;
    }
    #nav-wrapper {
        padding: 0.45rem 0.5rem;
        gap: 0.28rem;
        border-radius: 12px 12px 0 0;
    }
    #main-nav {
        padding: 0.35rem 0;
    }
    #main-nav button.nav-item {
        font-size: 0.78rem;
        padding: 0.32rem 0.46rem;
        gap: 0.22rem;
    }
    #main-nav button.nav-item .nav-icon {
        width: 42px;
        height: 42px;
        object-fit: contain;
    }
    #utility-nav {
        padding-top: 0.18rem;
        gap: 0.3rem;
    }
    #utility-nav-buttons button,
    #cart-toggle {
        font-size: 0.8rem;
        padding: 0.28rem 0.4rem;
    }
    #cart-count {
        min-width: 20px;
        font-size: 0.72rem;
        padding: 0 6px;
    }
    #cart-panel {
        bottom: 76px;
    }
    .menu-item-card {
        flex-direction: column;
        min-height: unset;
    }
    .menu-item-card img {
        width: 100%;
        height: clamp(180px, 45vw, 260px);
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .menu-item-info {
        padding: 0.75rem 0.75rem 2.8rem;
    }
    #item-modal .modal-dialog {
        width: min(420px, 94vw);
    }
    #item-modal .modal-image img {
        height: clamp(200px, 60vw, 300px);
    }
    .hero-actions {
        flex-direction: column;
    }
    .checkout-card {
        padding: 1.25rem;
    }
    .checkout-stats {
        flex-direction: column;
    }
    .checkout-form .split {
        flex-direction: column;
    }
    .location-actions {
        flex-direction: column;
    }
    .booking-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 540px) {
    :root {
        --container-width: 98%;
    }
    #hero .hero-slide {
        height: 336px;
        border-radius: 20px;
    }
    .hero-brand {
        width: min(360px, 96%);
        min-height: 248px;
        padding: 1.02rem 0.9rem 1.04rem;
        border-radius: 18px;
    }
    .hero-pill {
        font-size: 0.58rem;
        letter-spacing: 0.12em;
        padding: 0.24rem 0.58rem;
    }
    .hero-logo-shell {
        width: 90px;
        height: 90px;
    }
    .hero-slide .overlay h1 {
        font-size: 1.16rem;
        letter-spacing: 0.12em;
    }
    .hero-tagline {
        font-size: 0.7rem;
        letter-spacing: 0.13em;
    }
    .hero-brand .slogan {
        font-size: 0.76rem;
        letter-spacing: 0.08em;
    }
    #hero-changing-slogan {
        min-width: 14.2ch;
    }
    #sub-nav {
        padding: 0.38rem 0;
        border-radius: 16px;
    }
    #sub-nav-buttons {
        gap: 0.28rem;
        padding: 0 0.1rem;
    }
    #sub-nav-buttons button {
        font-size: 0.76rem;
        padding: 0.24rem 0.4rem;
    }
    .nav-arrow {
        width: 30px;
        height: 30px;
        font-size: 1rem;
        margin: 0 0.22rem;
    }
    #nav-wrapper {
        width: 100%;
        max-width: none;
        border-radius: 10px 10px 0 0;
        padding: 0.34rem 0.38rem calc(0.32rem + env(safe-area-inset-bottom));
        gap: 0.22rem;
    }
    #main-nav {
        padding: 0.24rem 0;
    }
    #menu-content section h2 {
        font-size: 1rem;
    }
    .menu-item-info .names span {
        font-size: 0.95rem;
    }
    .menu-item-info .description {
        font-size: 0.82rem;
    }
    .menu-item-card {
        gap: 0.35rem;
    }
    .menu-item-info {
        padding: 0.65rem 0.65rem 2.6rem;
    }
    #main-nav button.nav-item {
        font-size: 0.72rem;
        padding: 0.24rem 0.34rem;
        gap: 0.18rem;
    }
    #main-nav button.nav-item .nav-icon {
        width: 36px;
        height: 36px;
        object-fit: contain;
    }
    #utility-nav {
        padding-top: 0.14rem;
        gap: 0.22rem;
    }
    #utility-nav-buttons {
        gap: 0.28rem;
    }
    #utility-nav-buttons button,
    #cart-toggle {
        font-size: 0.74rem;
        padding: 0.22rem 0.32rem;
    }
    #cart-count {
        min-width: 18px;
        font-size: 0.68rem;
        padding: 0 5px;
    }
    body {
        padding-bottom: 132px;
    }
    #cart-panel {
        bottom: 68px;
        width: min(340px, 94vw);
    }
    #item-modal .modal-dialog {
        width: min(360px, 96vw);
        padding: 0.85rem;
    }
    #item-modal .modal-image img {
        height: clamp(180px, 55vw, 240px);
    }
    .checkout-card {
        padding: 1.05rem;
    }
    .checkout-header h2 {
        font-size: 1.2rem;
    }
    .booking-actions .cta-button.small {
        width: 100%;
        text-align: center;
    }
}


/* ====== FOOTER - Luxe style ====== */

#footer {
    width: var(--container-width);
    max-width: 720px;
    margin: 3rem auto 2.2rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(243, 230, 207, 0.2), rgba(200, 164, 107, 0.12)), var(--frosted);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--ink);
    font-family: 'Cairo', sans-serif;
    backdrop-filter: blur(16px) saturate(130%);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
    padding: 2.4rem 1.6rem 2rem;
    position: relative;
    overflow: hidden;
}

#footer::before {
    content: '';
    position: absolute;
    inset: -20% -10%;
    background:
        radial-gradient(circle at 18% 32%, rgba(243, 230, 207, 0.24), transparent 52%),
        radial-gradient(circle at 82% 68%, rgba(200, 164, 107, 0.16), transparent 48%);
    opacity: 0.9;
    pointer-events: none;
}

#footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64%;
    height: 3px;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    border-radius: 999px;
    opacity: 0.9;
}

.footer-brand {
    margin-bottom: 1.3rem;
    position: relative;
    z-index: 1;
}

.footer-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: 0.08em;
}

.footer-slogan {
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
    opacity: 0.78;
    letter-spacing: 0.06em;
}

.footer-meta {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.9rem;
    margin: 1.1rem 0 1.4rem;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.footer-meta-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.footer-meta-label {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 800;
}

.footer-meta-text {
    margin: 0;
    font-weight: 800;
    color: var(--ink);
}

/* ÕÝ ÇáÃíÞæäÇÊ ÇáÏÇÆÑíÉ */
.footer-icons-row {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.footer-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 247, 240, 0.85));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
    text-decoration: none;
    transition: background 0.2s, transform 0.2s,
                box-shadow 0.2s, border-color 0.2s, color 0.2s;
}

.footer-icon i {
    font-size: 1.35rem;
    color: var(--ink);
}

/* ???? */
.footer-icon:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
    border-color: var(--accent);
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    color: #fff;
}

.footer-icon:hover i {
    color: #fff;
}

/* ???????? ??????? ???? ??? */
.footer-icon--active {
    border-color: var(--accent);
}

.footer-icon--active i {
    color: var(--accent);
}

/* ÓØÑ ÇáÅíãíá æÇáÑÞã */
.footer-contact-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;
    font-size: 0.9rem;
    margin: 0.6rem 0 0.6rem;
    padding-top: 0.8rem;
    color: var(--muted);
    border-top: 1px solid rgba(200, 164, 107, 0.24);
}

.footer-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
}

.footer-contact-icon {
    font-size: 1.05rem;
    color: var(--muted);
}

.footer-link {
    text-decoration: none;
    color: var(--ink);
    font-weight: 700;
}

.footer-link:hover {
    color: var(--accent);
}

.footer-location-text {
    position: relative;
    z-index: 1;
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0.4rem 0 0.3rem;
}

.footer-dev {
    position: relative;
    z-index: 1;
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0;
    letter-spacing: 0.02em;
}



.media-area {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 0.3rem;
  height: clamp(280px, 38vw, 420px);
}

.gallery {
  position: relative;
  width: 100%;
  height: 100%;
}

.shot {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 18px;
  overflow: hidden;
  width: clamp(320px, 48vw, 520px);
  height: clamp(320px, 48vw, 520px);
  background: #f4ebdd;
  border: 1px solid rgba(200, 164, 107, 0.38);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
  isolation: isolate;
  transform-origin: center center;
  transition: transform 0.6s ease, opacity 0.6s ease;
  opacity: 0;
}

.shot::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
  transition: transform 0.9s ease;
}

.shot::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.shot[data-image="one"]::before { background-image: url('coming soon/IMG_0462.jpg'); }
.shot[data-image="two"]::before { background-image: url('coming soon/IMG_0463.jpg'); }
.shot[data-image="three"]::before { background-image: url('coming soon/IMG_0464.jpg'); }
.shot[data-image="four"]::before { background-image: url('coming soon/IMG_0465.jpg'); }
.shot[data-image="five"]::before { background-image: url('coming soon/IMG_0467.jpg'); }
.shot[data-image="six"]::before { background-image: url("coming soon/Crack Chicken Burger Recipe – Juicy & Cheesy.jpg"); }
.shot[data-image="seven"]::before { background-image: url("coming soon/Delicious Keto Recipe_ Grilled Ribeye Steak with Garlic Herb Butter for a Healthy Meal.jpg"); }

.shot:hover::before { transform: scale(1.06); }

.shot span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  background: rgba(20, 17, 15, 0.58);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  backdrop-filter: blur(8px);
  letter-spacing: 0.03em;
}

:root {
    --container-width: 95%;
}

@media (min-width: 992px) {
  :root {
      --container-width: 60%;
  }
}

/* ====== Responsive Hardening (all screen sizes) ====== */

:root {
    --bottom-nav-safe: calc(116px + env(safe-area-inset-bottom));
}

body {
    padding-bottom: max(120px, var(--bottom-nav-safe));
}

#welcome,
#menu-content,
#footer,
.checkout-section,
.location-section {
    width: min(var(--container-width), 100%);
    max-width: min(760px, calc(100vw - 12px));
}

#menu-content {
    padding: clamp(0.65rem, 1.5vw, 1rem);
    margin-top: 0.85rem;
    overflow: hidden;
}

#menu-content section h2,
.menu-item-info .names span,
.menu-item-info .description {
    overflow-wrap: anywhere;
}

#sub-nav,
#sub-nav.fixed,
#nav-wrapper {
    max-width: min(760px, calc(100vw - 10px));
}

#main-nav-buttons,
#sub-nav-buttons {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#main-nav-buttons::-webkit-scrollbar,
#sub-nav-buttons::-webkit-scrollbar {
    display: none;
}

#main-nav button.nav-item .nav-text {
    white-space: nowrap;
}

.menu-item-card {
    min-height: clamp(150px, 22vw, 190px);
    align-items: stretch;
}

.menu-item-info {
    min-width: 0;
}

.menu-item-info .names span {
    font-size: clamp(0.9rem, 1.2vw, 1rem);
}

.menu-item-info .description {
    font-size: clamp(0.82rem, 1.06vw, 0.95rem);
    line-height: 1.45;
}

#item-modal .modal-dialog {
    width: min(560px, calc(100vw - 16px));
    max-height: min(92vh, 860px);
    overflow-y: auto;
}

#cart-panel {
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(82px + env(safe-area-inset-bottom));
    width: min(380px, calc(100vw - 18px));
    max-height: min(72vh, 560px);
}

.footer-meta {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

@media (min-width: 1440px) {
    :root {
        --container-width: 52%;
    }
}

@media (min-width: 992px) and (max-width: 1439px) {
    :root {
        --container-width: 60%;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    :root {
        --container-width: 82%;
    }
    #nav-wrapper {
        padding: 0.5rem 0.6rem;
    }
    #main-nav button.nav-item {
        font-size: 0.84rem;
        padding: 0.3rem 0.5rem;
    }
    #main-nav button.nav-item .nav-icon {
        width: 44px;
        height: 44px;
        object-fit: contain;
    }
    .menu-item-card img {
        width: clamp(140px, 24vw, 190px);
    }
}

@media (max-width: 768px) {
    #menu-content {
        margin-top: 0.7rem;
        border-radius: 14px;
    }
    /* Keep the same card layout for both languages on phones/tablets */
    #menu-content.rtl .menu-item-card,
    #menu-content.ltr .menu-item-card,
    .menu-item-card {
        flex-direction: column;
    }
    #menu-content.rtl .menu-item-card img,
    #menu-content.ltr .menu-item-card img,
    .menu-item-card img {
        width: 100%;
        height: clamp(180px, 45vw, 260px);
        border-right: none;
        border-left: none;
        border-bottom: 1px solid var(--border);
    }
    #sub-nav.fixed {
        top: 4px;
    }
}

@media (max-width: 540px) {
    :root {
        --container-width: 98%;
        --bottom-nav-safe: calc(128px + env(safe-area-inset-bottom));
    }
    #welcome,
    #menu-content,
    #footer {
        max-width: calc(100vw - 8px);
    }
    #main-nav button.nav-item .nav-text {
        font-size: 0.7rem;
    }
    #main-nav button.nav-item .nav-icon {
        width: 34px;
        height: 34px;
    }
    .menu-item-card {
        border-radius: 14px;
    }
    .menu-item-info {
        padding: 0.62rem 0.62rem 2.5rem;
    }
    .menu-item-info .price {
        bottom: 8px;
        right: 8px;
        font-size: 0.9rem;
        padding: 5px 10px;
    }
    #menu-content.rtl .menu-item-info .price {
        left: 8px;
    }
    .footer-meta {
        grid-template-columns: 1fr;
    }
    .shot {
        width: min(88vw, 420px);
        height: min(88vw, 420px);
    }
}

@media (max-width: 400px) {
    #hero .hero-slide {
        height: 316px;
    }
    .hero-brand {
        width: min(338px, 96%);
        min-height: 232px;
        padding: 0.94rem 0.8rem 0.96rem;
    }
    .hero-logo-shell {
        width: 82px;
        height: 82px;
    }
    .hero-slide .overlay h1 {
        font-size: 1.04rem;
        letter-spacing: 0.11em;
    }
    .hero-tagline {
        font-size: 0.64rem;
    }
    .hero-brand .slogan {
        font-size: 0.69rem;
    }
    #hero-changing-slogan {
        min-width: 13ch;
    }
    #nav-wrapper {
        width: 100%;
        max-width: none;
        border-radius: 10px 10px 0 0;
        padding: 0.32rem 0.34rem calc(0.3rem + env(safe-area-inset-bottom));
    }
    #cart-panel {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100vw - 10px);
    }
    #sub-nav {
        border-radius: 14px;
    }
    .nav-arrow {
        width: 28px;
        height: 28px;
        margin: 0 0.16rem;
    }
}

@media (min-width: 992px) {
    .menu-item-card img {
        width: clamp(150px, 20vw, 190px);
    }
}