/* ═══════════════════════════════════════
 Café Salah SZ — Digital Menu Styles
 Theme: Bordeaux + Gold (from paper menu)
 ═══════════════════════════════════════ */

:root {
 --bg: #FDFAF6;
 --bg-card: #FFFFFF;
 --bg-header: #5C1A1B;
 --bg-header-glass: rgba(92,26,27,0.95);
 --text: #2D2019;
 --text-light: #7A6E64;
 --text-on-dark: #F5EDE4;
 --accent: #5C1A1B;
 --accent-light: #8B3A3B;
 --gold: #C9A44C;
 --gold-light: #E8D5A0;
 --border: #E8E0D6;
 --badge-best: #C9A44C;
 --badge-new: #2D8B4E;
 --badge-seafood: #1A6B8A;
 --shadow: 0 2px 12px rgba(45,32,25,0.08);
 --shadow-lg: 0 8px 32px rgba(45,32,25,0.12);
 --radius: 12px;
 --radius-sm: 8px;
 --font-display: 'Playfair Display', serif;
 --font-body: 'Inter', sans-serif;
 --font-arabic: 'Noto Sans Arabic', sans-serif;
 --header-height: 120px;
}

[data-theme="dark"] {
 --bg: #1A1412;
 --bg-card: #261E18;
 --bg-header: #2A1415;
 --bg-header-glass: rgba(42,20,21,0.96);
 --text: #F0E6DA;
 --text-light: #A89888;
 --text-on-dark: #F0E6DA;
 --border: #3D3028;
 --shadow: 0 2px 12px rgba(0,0,0,0.3);
 --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 8px); }

body {
 font-family: var(--font-body);
 background: var(--bg);
 color: var(--text);
 line-height: 1.5;
 min-height: 100vh;
 -webkit-font-smoothing: antialiased;
}

[dir="rtl"] body { font-family: var(--font-arabic); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: var(--font-arabic); }


#header {
 position: sticky;
 top: 0;
 z-index: 100;
 background: var(--bg-header-glass);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 padding: env(safe-area-inset-top, 0) 0 0;
}

.header-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 8px 16px 6px;
}

.logo-area {
 display: flex;
 align-items: center;
 gap: 10px;
}

.logo-icon {
 font-size: 24px;
 filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.logo-text h1 {
 font-family: var(--font-display);
 font-size: 16px;
 font-weight: 700;
 color: var(--gold);
 line-height: 1.15;
}

.logo-text p {
 font-size: 11px;
 color: var(--text-on-dark);
 opacity: 0.7;
 letter-spacing: 1px;
 text-transform: uppercase;
}

.lang-switcher {
 display: flex;
 gap: 4px;
}

.lang-btn {
 background: transparent;
 border: 1.5px solid rgba(255,255,255,0.25);
 color: var(--text-on-dark);
 font-size: 12px;
 font-weight: 600;
 padding: 5px 10px;
 border-radius: 6px;
 cursor: pointer;
 transition: all 0.2s;
}

.lang-btn.active {
 background: var(--gold);
 border-color: var(--gold);
 color: var(--bg-header);
}


.daily-special {
 background: linear-gradient(135deg, var(--gold), #D4AF37);
 color: var(--bg-header);
 padding: 8px 16px;
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 13px;
 font-weight: 500;
 overflow-x: auto;
 white-space: nowrap;
}

.special-badge {
 font-weight: 700;
 flex-shrink: 0;
}

.special-price {
 margin-inline-start: auto;
 font-weight: 700;
 background: var(--bg-header);
 color: var(--gold);
 padding: 2px 8px;
 border-radius: 4px;
 font-size: 12px;
 flex-shrink: 0;
}


.search-bar { padding:4px 12px 10px; position:relative; }

#search-input { width:100%; padding:12px 40px 12px 16px; border:none; border-radius:var(--radius-sm); background:rgba(255,255,255,0.15); color:var(--text-on-dark); font-size:15px; outline:none; transition:background 0.2s; }

#search-input::placeholder {
 color: rgba(255,255,255,0.4);
}

#search-input:focus {
 background: rgba(255,255,255,0.2);
}

.search-clear {
 position: absolute;
 right: 24px;
 top: 50%;
 transform: translateY(-50%);
 background: none;
 border: none;
 color: rgba(255,255,255,0.5);
 font-size: 16px;
 cursor: pointer;
 padding: 4px;
}


.cat-nav { display:flex; gap:6px; padding:0 12px 10px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; } .cat-nav::-webkit-scrollbar { display:none; }

.cat-btn { flex-shrink:0; background:rgba(255,255,255,0.12); border:none; color:var(--text-on-dark); font-size:12px; font-weight:600; padding:8px 14px; border-radius:18px; cursor:pointer; transition:all 0.2s; white-space:nowrap; }

.cat-btn.active, .cat-btn:hover {
 background: var(--gold);
 color: var(--bg-header);
}


main { padding:10px 12px 100px; max-width:680px; margin:0 auto; }


.loading {
 display: flex;
 justify-content: center;
 padding: 60px 0;
}

.spinner {
 width: 36px;
 height: 36px;
 border: 3px solid var(--border);
 border-top-color: var(--accent);
 border-radius: 50%;
 animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }


.cat-section { margin-bottom:20px; }

.cat-title { font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--accent); padding-bottom:6px; margin-bottom:10px; border-bottom:2px solid var(--gold-light); display:flex; align-items:center; gap:8px; }

[dir="rtl"] .cat-title {
 font-family: var(--font-arabic);
}

.cat-icon {
 font-size: 16px;
}


.item-card { display:flex; gap:12px; padding:12px 14px; min-height:170px; background:var(--bg-card); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:8px; cursor:pointer; transition:transform 0.15s,box-shadow 0.15s; position:relative; overflow:hidden; }

.item-card:active {
 transform: scale(0.985);
}

.item-img-wrap { width:160px; height:160px; border-radius:var(--radius-sm); overflow:hidden; flex-shrink:0; background:var(--border); }

.item-img-wrap img {
 border-radius: 10px;
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}

.item-placeholder {
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 28px;
 background: linear-gradient(135deg, var(--border), var(--bg));
}

.item-info {
 flex: 1;
 min-width: 0;
 display: flex;
 flex-direction: column;
 justify-content: center;
}

.item-name { font-size:15px; font-weight:600; color:var(--text); margin-bottom:2px; line-height:1.35; }

.item-desc { font-size:13px; color:var(--text-light); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.item-price { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--accent); margin-top:4px; white-space:nowrap; }

.price-currency {
 font-size: 12px;
 font-weight: 500;
 color: var(--text-light);
}


.item-badge {
 position: absolute;
 top: 8px;
 right: 8px;
 font-size: 10px;
 font-weight: 700;
 padding: 2px 8px;
 border-radius: 4px;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

[dir="rtl"] .item-badge {
 right: auto;
 left: 8px;
}

.badge-bestseller {
 background: var(--badge-best);
 color: #fff;
}

.badge-new {
 background: var(--badge-new);
 color: #fff;
}

.badge-seafood {
 background: var(--badge-seafood);
 color: #fff;
}


.no-results {
 text-align: center;
 padding: 40px 20px;
 color: var(--text-light);
 font-size: 15px;
}


.modal {
 position: fixed;
 inset: 0;
 z-index: 200;
 background: rgba(0,0,0,0.85);
 backdrop-filter: blur(4px);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 20px;
}

.modal-close {
 position: absolute;
 top: env(safe-area-inset-top, 16px);
 right: 16px;
 background: rgba(255,255,255,0.15);
 border: none;
 color: #fff;
 font-size: 28px;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
}

#modal-img {
 max-width: 100%;
 max-height: 60vh;
 border-radius: var(--radius);
 object-fit: contain;
}

.modal-info {
 color: #fff;
 text-align: center;
 margin-top: 16px;
 max-width: 400px;
}

.modal-info h3 {
 font-family: var(--font-display);
 font-size: 16px;
 color: var(--gold);
 margin-bottom: 4px;
}

.modal-info p {
 font-size: 13px;
 opacity: 0.8;
 margin-bottom: 6px;
}

.modal-info .modal-price {
 font-size: 22px;
 font-weight: 700;
 color: var(--gold);
}


.whatsapp-float {
 position: fixed;
 bottom: calc(20px + env(safe-area-inset-bottom, 0));
 right: 16px;
 z-index: 90;
 width: 52px;
 height: 52px;
 background: #25D366;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 4px 16px rgba(37,211,102,0.4);
 transition: transform 0.2s;
 text-decoration: none;
}

[dir="rtl"] .whatsapp-float {
 right: auto;
 left: 16px;
}

.whatsapp-float:active { transform: scale(0.9); }


.theme-toggle {
 position: fixed;
 bottom: calc(80px + env(safe-area-inset-bottom, 0));
 right: 16px;
 z-index: 90;
 width: 40px;
 height: 40px;
 background: var(--bg-card);
 border: 1.5px solid var(--border);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 box-shadow: var(--shadow);
 font-size: 16px;
}

[dir="rtl"] .theme-toggle {
 right: auto;
 left: 16px;
}


footer {
 background: linear-gradient(180deg, var(--bg-header), #3D1011);
 color: var(--text-on-dark);
 padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0));
 text-align: center;
}

.footer-gold-line {
 height: 3px;
 background: linear-gradient(90deg, transparent, var(--gold), transparent);
 margin-bottom: 28px;
}

.footer-info {
 display: flex;
 gap: 32px;
 justify-content: center;
 flex-wrap: wrap;
 margin-bottom: 24px;
 padding: 0 16px;
}

.footer-section {
 min-width: 160px;
}

.footer-section h3 {
 font-size: 14px;
 color: var(--gold);
 text-transform: uppercase;
 letter-spacing: 1.5px;
 margin-bottom: 10px;
 font-weight: 700;
}

.footer-section p {
 font-size: 14px;
 opacity: 0.85;
 line-height: 1.6;
}

.footer-section a {
 color: var(--gold);
 font-size: 13px;
 text-decoration: none;
 transition: color 0.2s;
}

.footer-section a:hover {
 color: #fff;
}

.footer-social {
 display: flex;
 gap: 16px;
 justify-content: center;
 margin-bottom: 20px;
 padding: 0 16px;
}

.footer-social a {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background: rgba(255,255,255,0.1);
 color: var(--text-on-dark);
 text-decoration: none;
 font-size: 20px;
 transition: all 0.3s;
 border: 1.5px solid rgba(255,255,255,0.15);
}

.footer-social a:hover {
 background: var(--gold);
 color: var(--bg-header);
 border-color: var(--gold);
 transform: translateY(-2px);
}

.footer-social a svg {
 width: 22px;
 height: 22px;
 fill: currentColor;
}

.footer-copy {
 font-size: 12px;
 opacity: 0.35;
 padding: 0 16px;
}


@media (min-width: 480px) {
 .item-card { padding: 14px; }
 .item-img-wrap { width: 180px; height: 180px; }
 .item-name { font-size: 16px; }
}

@media (min-width: 600px) {
 main { padding: 20px 24px 100px; }
}


@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
 animation-duration: 0.01ms !important;
 transition-duration: 0.01ms !important;
 }
 html { scroll-behavior: auto; }
}


@media print {
 #header, .whatsapp-float, .theme-toggle, .search-bar { display: none !important; }
 main { padding: 0; }
 .item-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
}

@media (max-width: 420px) { .item-img-wrap { width:140px; height:140px; } .item-name { font-size:14px; } .item-price { font-size:16px; } .cat-title { font-size:18px; } .logo-text h1 { font-size:14px; } .logo-text p { font-size:9px; } }


.hero-slider {
 direction: ltr;
 position: relative;
 width: 100%;
 overflow: hidden;
 background: var(--bg-header);
}

.slider-track {
 display: flex;
 transition: transform 0.5s ease;
 will-change: transform;
}

.slide {
 min-width: 100%;
 height: 200px;
 flex-shrink: 0;
}

.slide img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}

.slider-dots {
 position: absolute;
 bottom: 10px;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 gap: 6px;
 z-index: 10;
}

.slider-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: rgba(255,255,255,0.4);
 border: none;
 cursor: pointer;
 padding: 0;
 transition: all 0.3s;
}

.slider-dot.active {
 background: var(--gold);
 width: 20px;
 border-radius: 4px;
}

@media (min-width: 480px) {
 .slide { height: 260px; }
}

@media (min-width: 600px) {
 .slide { height: 320px; }
}



@media (max-width: 480px) {
 .footer-info {
 flex-direction: column;
 gap: 20px;
 align-items: center;
 text-align: center;
 }
 .footer-section {
 min-width: auto;
 width: 100%;
 }
 .footer-social {
 margin-top: 8px;
 margin-bottom: 24px;
 }
 .footer-social a {
 width: 50px;
 height: 50px;
 }
 .footer-social a svg {
 width: 26px;
 height: 26px;
 }
}