:root{--bg-primary:#f7f5e9;--color-primary:#07594d;--color-accent:#c4530d;--color-text:#1a1a1a;--color-text-light:#666;--color-white:#fff;--color-gray-100:#f5f5f5;--color-gray-200:#e0e0e0;--color-gray-300:#ccc;--color-success:#16a34a;--color-warning:#d97706;--color-error:#dc2626;--font-inter:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-arabic:'Noto Sans Arabic',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--shadow-sm:0 1px 3px #0000001a;--shadow-md:0 4px 6px #0000001a;--shadow-lg:0 10px 15px #0000001a;--shadow-xl:0 20px 25px #0000001a;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--spacing-xs:.5rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;--transition:all .3s cubic-bezier(0.4,0,0.2,1)}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
*{scroll-behavior:smooth}
body{font-family:var(--font-inter);background-color:var(--bg-primary);color:var(--color-text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[dir="rtl"] body{font-family:var(--font-arabic)}
[dir="rtl"] .chevron{transform:scaleX(-1)}
h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2;margin-bottom:var(--spacing-sm)}
h1{font-size:2rem}
h2{font-size:1.75rem}
h3{font-size:1.5rem}
h4{font-size:1.25rem}
h5{font-size:1.125rem}
h6{font-size:1rem}
p{margin-bottom:var(--spacing-sm)}
.container{max-width:1200px;margin:0 auto;padding-inline:var(--spacing-md)}
.header{background-color:var(--color-white);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100}
.header-content{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:var(--spacing-md)}
.logo-section{display:flex;align-items:center;gap:var(--spacing-sm)}
.logo{height:60px;width:auto;object-fit:contain}
.restaurant-name{color:var(--color-primary);font-size:1.5rem;font-weight:600;margin-bottom:0}
.location{color:var(--color-text-light);font-size:.875rem;margin-bottom:0}
.language-switcher{position:relative}
.lang-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background:var(--color-white);border:2px solid var(--color-gray-200);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);font-size:.875rem;font-weight:500}
.lang-btn:hover,.lang-btn:focus{border-color:var(--color-primary);outline:none}
.lang-btn[aria-expanded="true"] .chevron{transform:rotate(180deg)}
[dir="rtl"] .lang-btn[aria-expanded="true"] .chevron{transform:rotate(180deg) scaleX(-1)}
.lang-dropdown{position:absolute;top:100%;right:0;background:var(--color-white);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:150px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:var(--transition);z-index:1000;list-style:none;padding:var(--spacing-xs);margin-top:var(--spacing-xs)}
[dir="rtl"] .lang-dropdown{left:0;right:auto}
.lang-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}
.lang-dropdown li{margin:0}
.lang-dropdown button{width:100%;padding:var(--spacing-xs) var(--spacing-sm);border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition);font-size:.875rem;text-align:start}
[dir="rtl"] .lang-dropdown button{text-align:end}
.lang-dropdown button:hover,.lang-dropdown button:focus{background:var(--color-gray-100);outline:none}
.menu-section{padding:var(--spacing-xl) 0}
.menu-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg);margin-bottom:var(--spacing-xl)}
@media (min-width: 768px) {
.menu-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width: 1024px) {
.menu-grid{grid-template-columns:repeat(3,1fr)}
}
.menu-card{background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;cursor:default}
.menu-card:focus-within{outline:2px solid var(--color-primary);outline-offset:2px}
.card-image-container{position:relative;aspect-ratio:16/10;overflow:hidden}
.card-image{width:100%;height:100%;object-fit:cover;transition:var(--transition)}
.menu-card:hover .card-image{transform:scale(1.05)}
.card-content{padding:var(--spacing-sm)}
.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.25rem;gap:var(--spacing-sm)}
.card-title{font-size:1.25rem;font-weight:600;color:var(--color-primary);margin:0;flex:1}
.card-price{font-size:1.125rem;font-weight:600;color:var(--color-accent);margin:0;flex-shrink:0}
.card-weight{font-size:.875rem;color:var(--color-text-light);margin:.25rem 0 .5rem;font-weight:500}
.card-description{font-size:.875rem;color:var(--color-text-light);margin-bottom:0;line-height:1.5;line-clamp:2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-image-container{position:relative;aspect-ratio:16/10;overflow:hidden;cursor:pointer}
.card-image-container:focus{outline:2px solid var(--color-primary);outline-offset:2px}
.skeleton{background:linear-gradient(90deg,var(--color-gray-200) 25%,var(--color-gray-100) 50%,var(--color-gray-200) 75%);background-size:200% 100%;animation:shimmer 2s infinite}
.skeleton-card{background:var(--color-white);border-radius:var(--radius-lg);overflow:hidden}
.skeleton-image{aspect-ratio:16/10;background:var(--color-gray-200)}
.skeleton-content{padding:var(--spacing-md)}
.skeleton-title{height:1.5rem;border-radius:var(--radius-sm);margin-bottom:var(--spacing-sm)}
.skeleton-price{height:1.25rem;width:60%;border-radius:var(--radius-sm);margin-bottom:var(--spacing-sm)}
.skeleton-button{height:2.5rem;border-radius:var(--radius-md)}
@keyframes shimmer {
0%{background-position:-200% 0}
100%{background-position:200% 0}
}
.quality-note{display:flex;align-items:center;gap:var(--spacing-sm);background:var(--color-white);padding:var(--spacing-md);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border-left:4px solid var(--color-success)}
.quality-icon{color:var(--color-success);flex-shrink:0}
.quality-note p{margin:0;font-weight:500;color:var(--color-text)}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:var(--transition);padding:var(--spacing-md)}
.modal-overlay.show{opacity:1;visibility:visible}
.modal{background:var(--color-white);border-radius:var(--radius-lg);position:relative;transform:scale(0.9);transition:var(--transition)}
.modal-image{max-width:90vw;max-height:90vh;width:auto;height:auto;object-fit:contain;display:block}
.modal-overlay.show .modal{transform:scale(1)}
.modal-close{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);background:#00000080;color:var(--color-white);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);z-index:1}
[dir="rtl"] .modal-close{left:var(--spacing-sm);right:auto}
.modal-close:hover,.modal-close:focus{background:#000000b3;outline:none}
.modal-image-container{max-width:90vw;max-height:90vh;border-radius:var(--radius-lg);overflow:hidden;display:flex;align-items:center;justify-content:center}
.footer{background:var(--color-primary);color:var(--color-white);padding:var(--spacing-xl) 0;margin-top:auto}
.footer-content{display:grid;grid-template-columns:1fr;gap:var(--spacing-xl)}
@media (min-width: 768px) {
.footer-content{grid-template-columns:2fr 1fr}
}
.about-section h2,.contact-section h3{color:var(--color-white);margin-bottom:var(--spacing-md)}
.about-text{line-height:1.7;opacity:.9}
.contact-info p{margin-bottom:var(--spacing-xs);opacity:.9}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.modal-overlay .modal :focus{outline:2px solid var(--color-primary);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce) {
*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (prefers-contrast: high) {
.menu-card{border:2px solid var(--color-text)}
.lang-btn,.more-info-btn{border:2px solid currentColor}
}
@media print {
.header,.footer,.modal-overlay{display:none}
.menu-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}
.menu-card{break-inside:avoid;box-shadow:none;border:1px solid var(--color-gray-300)}
}