/*
Theme Name: 99 Restaurant & Cafe (Dark Mode)
Author: Sizar
Description: This Theme is made especially for 99 Restaurant & Cafe in Khanaqin
Version: 3.0
*/

:root {
    /* --- NEW COLOR PALETTE --- */
    --primary: #9638ff; /* Your Accent Purple */
    --primary-dim: rgba(150, 56, 255, 0.2); /* Low opacity purple for backgrounds */
    
    --bg-body: #121212;      /* Very dark grey (almost black) */
    --bg-card: #1e1e1e;      /* Slightly lighter for cards */
    --bg-header: #181818;    /* Header background */
    
    --text-main: #ffffff;    /* White text */
    --text-muted: #b0b0b0;   /* Light grey text */
    
    --border: #333333;       /* Dark borders */
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    margin: 0; 
    padding: 0; 
    color: var(--text-main); 
    background: var(--bg-body); 
    /* padding-bottom: 80px; /* Space for footer */
}

.container { max-width: 800px; margin: 0 auto; padding: 0 20px; }

/* --- HEADER --- */
header { 
    background: var(--bg-header); 
    padding: 20px 0; 
    text-align: center; 
    border-bottom: 1px solid var(--border); 
}
header h1 { margin: 0; font-size: 1.8rem; color: var(--text-main); }
header p { margin: 5px 0 0; color: var(--text-muted); font-size: 0.9rem; }

/* --- STICKY CATEGORY NAV --- */
.category-nav {
    position: sticky;
    top: 0;
    background: var(--bg-body); /* Match body bg so it hides content behind it */
    z-index: 100;
    padding: 15px 0;
    white-space: nowrap;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    -webkit-overflow-scrolling: touch;
    display: flex;
    gap: 10px;
}
.category-nav::-webkit-scrollbar { display: none; } 

/* Navigation Buttons */
.nav-pill {
    display: inline-block;
    padding: 10px 20px;
    background: var(--bg-card); /* Dark grey button */
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    font-family: inherit;
}

/* Active State */
.nav-pill.active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary);
    box-shadow: 0 0 15px var(--primary-dim); /* Purple Glow */
}

/* --- OFFERS SECTION --- */
.offers-section { padding: 20px 0; overflow-x: auto; white-space: nowrap; display: flex; gap: 15px; }
.offer-card { 
    background: linear-gradient(145deg, #2a1a3a, #1e1e1e); /* Subtle purple gradient */
    border: 1px solid #3d2a55; 
    padding: 15px; 
    border-radius: 12px; 
    min-width: 250px; 
    display: inline-block;
    vertical-align: top;
    white-space: normal;
}
.offer-card h3 { margin-top: 0; color: var(--primary); font-size: 1.1rem; }
.offer-card div { color: var(--text-muted); font-size: 0.9rem; }

/* --- MENU SECTIONS --- */
.menu-section-title { 
    margin-top: 40px; 
    margin-bottom: 15px; 
    font-size: 1.5rem; 
    color: var(--text-main);
    border-bottom: 2px solid var(--primary); 
    display: inline-block; 
    padding-bottom: 5px;
    text-shadow: 0 0 10px var(--primary-dim);
}

/* --- MENU ITEMS --- */
.menu-item { 
    display: flex; 
    justify-content: space-between; 
    padding: 18px 0; 
    border-bottom: 1px solid var(--border); 
}
.menu-details { flex: 1; padding-right: 15px; }

.menu-title { 
    font-weight: 700; 
    font-size: 1.1rem; 
    margin-bottom: 6px; 
    display: block; 
    color: var(--text-main);
}

.menu-desc { 
    font-size: 0.85rem; 
    color: var(--text-muted); 
    line-height: 1.5; 
    margin: 0; 
}

.menu-price { 
    font-weight: 700; 
    font-size: 1.1rem; 
    color: var(--primary); 
    white-space: nowrap; 
    text-shadow: 0 0 5px var(--primary-dim);
}

.menu-section-container {
    margin-bottom: 30px;
}

.gradient {
  height: 100%;
  background: linear-gradient(334deg, #6b97f7, #7525e2, #f7137e);
  background-size: 180% 180%;
  -webkit-animation: gradient-animation 6s ease infinite;
          animation: gradient-animation 6s ease infinite;
}

@-webkit-keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* --- FOOTER --- */
footer { text-align: center; font-size: 0.8rem; color: #555; margin-top: 50px; }
footer hr { border-color: var(--border); }
footer strong { color: var(--text-muted); }
footer { 
    background: var(--bg-header); 
    padding: 20px 0 20; 
    text-align: center; 
    border-top: 1px solid var(--border); 
}

/* --- MULTI-LANGUAGE TOGGLE LOGIC --- */
.show-en, .show-ar, .show-ku { display: none; }

/* English */
body.lang-en .show-en { display: block; }
body.lang-en .show-ar { display: none; }
body.lang-en .show-ku { display: none; }

/* Arabic */
body.lang-ar .show-en { display: none; }
body.lang-ar .show-ar { display: block; }
body.lang-ar .show-ku { display: none; }

/* Kurdish */
body.lang-ku .show-en { display: none; }
body.lang-ku .show-ar { display: none; }
body.lang-ku .show-ku { display: block; }

/* --- RTL SUPPORT --- */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .menu-details { padding-left: 15px; padding-right: 0; }
html[dir="rtl"] .menu-price { text-align: left; }
html[dir="rtl"] header h1, html[dir="rtl"] header p { text-align: center; }