@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&display=swap');

:root {
    --primary: #FF5722;
    /* Original Orange */
    --primary-dark: #E64A19;
    --dark-bg: #1a1a1a;
    --dark-card: #252525;
    --light-bg: #f8f9fa;
    --text-main: #2d3436;
    --text-muted: #636e72;
    --radius-lg: 24px;
    --radius-md: 16px;
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Cairo', sans-serif;
    margin: 0;
    background-color: var(--light-bg);
    color: var(--text-main);
    padding-bottom: 80px;
    /* Space for bottom nav or just aesthetics */
}

/* --- HERO SECTION --- */
.hero-section {
    position: relative;
    height: 35vh;
    /* Larger hero */
    min-height: 250px;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url('https://images.unsplash.com/photo-1514362545857-3bc16549766b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80') center/cover;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: -30px;
    /* Overlap effect */
    z-index: 10;
}

.hero-content h1 {
    font-size: 2.5rem;
    font-weight: 900;
    margin: 0;
    letter-spacing: -1px;
}

.hero-content p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-top: 5px;
}

/* --- STIKCY NAV --- */
.category-nav-container {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    padding: 10px 0;
    margin-top: 10px;
}

.category-nav {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 15px 20px;
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
    -ms-overflow-style: none;
    /* Hide scrollbar IE */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    margin: 0 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

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

.cat-btn {
    white-space: nowrap;
    padding: 10px 24px;
    border-radius: 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 700;
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cat-btn.active {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 15px rgba(201, 162, 39, 0.4);
}

/* --- MENU GRID --- */
.container {
    padding: 40px 20px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    /* Mobile-optimized grid */
    gap: 15px;
}

/* Mobile: List view option or smaller cards? Let's go with rich cards */
@media (min-width: 768px) {
    .menu-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 25px;
    }
}

/* --- PRODUCT CARD --- */
.menu-card {
    background: white;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
}

.menu-card:active {
    transform: scale(0.98);
}

.menu-card-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    background: #eee;
}

.menu-card-content {
    padding: 12px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.menu-card-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 5px;
    color: var(--text-main);
}

.menu-card-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.menu-card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-tag {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--primary-dark);
}

.add-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.2rem;
}

/* --- MODAL --- */
.product-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    /* Bottom sheet on mobile */
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.product-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-card {
    background: white;
    width: 100%;
    max-width: 500px;
    border-radius: 25px 25px 0 0;
    /* Bottom sheet radius */
    overflow: hidden;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

@media (min-width: 768px) {
    .product-modal {
        align-items: center;
    }

    .modal-card {
        border-radius: 20px;
        transform: translateY(20px);
        width: 90%;
    }
}

.product-modal.active .modal-card {
    transform: translateY(0);
}

.modal-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    /* RTL check: right or left? usually 'x' is consistent but verify RTL */
    background: rgba(0, 0, 0, 0.5);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    z-index: 10;
}

.modal-body {
    padding: 25px;
}

.modal-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 10px;
}

.modal-desc {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* --- ANIMATIONS --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.4s ease forwards;
}

/* --- PROMO SLIDER --- */
/* --- PROMO TICKER --- */
.ticker-container {
    width: 100%;
    background: var(--primary);
    /* The "Old Orange"/Gold */
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 12px 0;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
    color: white;
    border-radius: 8px;
    /* Slight rounded corners */
}

.ticker-wrapper {
    display: inline-block;
    white-space: nowrap;
    animation: ticker-move 20s linear infinite;
    padding-left: 100%;
    /* Start off-screen */
}

.ticker-item {
    display: inline-block;
    padding: 0 2rem;
    font-size: 1.1rem;
    font-weight: 700;
}

/* RTL Animation: From Left to Right? 
   Standard tickers usually move Right to Left (text enters from right).
   But for Arabic reading order, maybe we want it to move so you read it naturally?
   Let's stick to standard Right-to-Left scrolling (translate X negative).
*/
@keyframes ticker-move {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(100%, 0, 0);
        /* Move to Right for RTL? No wait. */
    }
}

/* Ensure RTL directionality logic:
   In RTL info flows Right to Left.
   If we want text to enter from Left and exit Right? 
   Or enter Right exit Left?
   Let's try standard 'marquee' which usually goes Right-to-Left. 
   But wait, Arabic reads Right to Left. So if text moves Right to Left (<<<<), you read the start first.
*/
@keyframes ticker-move {
    0% {
        transform: translateX(-100%);
    }

    /* Start far left */
    100% {
        transform: translateX(100%);
    }

    /* Move to far right */
}

/* Actually simplest is just animating 'text-indent' or translate. 
   Let's try a standard translate.
*/
@keyframes ticker-move {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(50%, 0, 0);
        /* Just sliding? */
    }
}

/* Let's go with a specific RTL friendly keyframe */
@keyframes ticker-rtl {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Wait, in specific RTL mode, standard Marquee behavior is usually fine. 
   I will use a simple container with negative animation. */

.ticker-wrapper {
    animation: floatText 15s infinite linear;
    min-width: 100%;
}

@keyframes floatText {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}