:root{--primary-rgb:102,153,51;--primary:rgb(var(--primary-rgb));--primary-hover:rgba(var(--primary-rgb),0.9);--primary-light:rgba(var(--primary-rgb),0.1);--primary-gradient:linear-gradient(135deg,rgb(102,153,51),rgb(76,122,34));--accent-rgb:229,57,53;--accent:rgb(var(--accent-rgb));--accent-hover:rgba(var(--accent-rgb),0.9);--accent-light:rgba(var(--accent-rgb),0.1);--accent-gradient:linear-gradient(135deg,rgb(229,57,53),rgb(198,40,40));--neutral-50:#fcfdfa;--neutral-100:#f3f6f0;--neutral-200:#e7ebd9;--neutral-300:#d4dbc1;--neutral-400:#b5c29a;--neutral-500:#93a373;--neutral-600:#718151;--neutral-700:#54623a;--neutral-800:#3b4528;--neutral-900:#252b19;--bg-app:#fcfdfa;--bg-card:#ffffff;--bg-elevated:#ffffff;--text-primary:#252b19;--text-secondary:#718151;--text-disabled:#b5c29a;--border-color:#e7ebd9;--border-focus:rgb(var(--primary-rgb));--shadow-sm:0 2px 8px rgba(37,43,25,0.04);--shadow-md:0 8px 24px rgba(37,43,25,0.06);--shadow-lg:0 16px 40px rgba(37,43,25,0.08);--shadow-glass:0 8px 32px 0 rgba(102,153,51,0.08);--glass-bg:rgba(255,255,255,0.75);--glass-border:rgba(231,235,217,0.5);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-full:9999px;--font-arabic:var(--font-cairo),"Cairo",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-latin:var(--font-inter),"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-normal:250ms cubic-bezier(0.4,0,0.2,1);--transition-slow:350ms cubic-bezier(0.4,0,0.2,1);--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-drawer:1040;--z-modal:1050;--z-toast:1060;--mobile-bottom-offset:0px}[data-theme=dark]{--neutral-50:#12150d;--neutral-100:#1a1e12;--neutral-200:#252b1a;--neutral-300:#3b4528;--neutral-400:#54623a;--neutral-500:#718151;--neutral-600:#93a373;--neutral-700:#b5c29a;--neutral-800:#d4dbc1;--neutral-900:#f3f6f0;--bg-app:#12150d;--bg-card:#1a1e12;--bg-elevated:#252b1a;--text-primary:#f3f6f0;--text-secondary:#b5c29a;--text-disabled:#54623a;--border-color:#252b1a;--border-focus:#93a373;--shadow-sm:0 2px 8px rgba(0,0,0,0.2);--shadow-md:0 8px 24px rgba(0,0,0,0.3);--shadow-lg:0 16px 40px rgba(0,0,0,0.4);--shadow-glass:0 8px 32px 0 rgba(0,0,0,0.3);--glass-bg:rgba(26,30,18,0.8);--glass-border:rgba(37,43,26,0.5)}.material-symbols-outlined{font-family:Material Symbols Outlined,sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga";-webkit-font-smoothing:antialiased}*,:after,:before{box-sizing:border-box;padding:0;margin:0;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}html{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;font-size-adjust:none!important}body,html{max-width:100vw;overflow-x:clip;background-color:var(--bg-app);color:var(--text-primary);font-family:var(--font-latin);font-size:16px;line-height:1.5;transition:background-color var(--transition-normal),color var(--transition-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-synthesis:none!important;font-size-adjust:none!important}a,body,button,div,h1,h2,h3,h4,h5,h6,html,input,label,p,select,span,textarea{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}@supports (-moz-appearance:none){body,html{font-size-adjust:none!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;-moz-text-size-adjust:100%!important}}[dir=rtl],[dir=rtl] *,[dir=rtl] body,[lang=ar],[lang=ar] *,[lang=ar] body,[lang=fa],[lang=fa] body,[lang=he],[lang=he] body{font-family:var(--font-arabic)}a{color:inherit;text-decoration:none}button{background:none;border:none;cursor:pointer}button,input,select,textarea{font-family:inherit}.w-full{width:100%}.h-full{height:100%}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-app)}::-webkit-scrollbar-thumb{background:var(--neutral-300);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--neutral-400)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideDown{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}to{transform:scale(1);opacity:1}}@keyframes pulse-ring{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(var(--primary-rgb),.5)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(var(--primary-rgb),0)}to{transform:scale(.95);box-shadow:0 0 0 0 rgba(var(--primary-rgb),0)}}@keyframes spin{to{transform:rotate(1turn)}}.animate-fade-in{animation:fadeIn var(--transition-normal) forwards}.animate-slide-up{animation:slideUp var(--transition-slow) cubic-bezier(.16,1,.3,1) forwards}.animate-slide-down{animation:slideDown var(--transition-slow) cubic-bezier(.16,1,.3,1) forwards}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}@media print{body{background:white;color:black;font-size:12pt}.no-print{display:none!important}.print-only{display:block!important}.recipe-card{box-shadow:none!important;border:1px solid #ccc}}.app-shell-root{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding-top:56px;padding-bottom:80px}header{height:56px!important;line-height:1.2!important}header,header a,header button,header span{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}header a,header button,header span{font-size-adjust:none!important}.app-bottom-nav{position:fixed;bottom:0;left:0;right:0;height:68px;padding-bottom:env(safe-area-inset-bottom,0);background-color:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--glass-border);display:flex;align-items:center;justify-content:space-around;z-index:1000;box-shadow:0 -4px 16px rgba(0,0,0,.08);transition:transform var(--transition-normal)}.header-btn:hover{background-color:var(--neutral-100)}.nav-link{display:flex;flex-direction:column;align-items:center;color:var(--text-secondary);padding:8px 16px;border-radius:var(--radius-md);transition:all var(--transition-fast)}.nav-link:hover{background-color:var(--primary-light)}.nav-link.active,.nav-link:hover{color:var(--primary)}.center-cook-btn:hover{transform:translateY(-15px) scale(1.05)!important;box-shadow:0 2px 20px rgba(102,153,51,.5)!important}.drawer-item-btn:hover{background-color:var(--neutral-50);color:var(--text-primary)!important;border-radius:var(--radius-sm)}@media (max-width:640px){:root{--step-flex-dir:column;--step-gap:8px;--step-padding:12px 16px;--step-num-size:24px;--step-num-font:0.85rem}.hide-on-mobile{display:none!important}}.recipe-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px;width:100%}.mobile-name-block{display:inline}@media (max-width:640px){.recipe-grid{grid-template-columns:repeat(1,minmax(0,1fr))!important;gap:12px}.mobile-name-block{display:block!important}}@keyframes flameFlicker{0%,to{transform:translateY(-50%) scale(1) rotate(-3deg);filter:drop-shadow(0 0 6px rgba(255,69,0,.9)) drop-shadow(0 0 12px rgba(255,140,0,.7))}25%{transform:translateY(-50%) scale(1.18) rotate(4deg);filter:drop-shadow(0 0 10px rgba(255,140,0,1)) drop-shadow(0 0 18px rgba(255,215,0,.9))}50%{transform:translateY(-50%) scale(.92) rotate(-4deg);filter:drop-shadow(0 0 7px rgba(255,69,0,.8)) drop-shadow(0 0 14px rgba(255,140,0,.8))}75%{transform:translateY(-50%) scale(1.12) rotate(3deg);filter:drop-shadow(0 0 12px rgba(255,69,0,.95)) drop-shadow(0 0 20px rgba(255,215,0,1))}}@keyframes flameGlowPulse{0%,to{box-shadow:0 0 10px rgba(255,69,0,.6),0 0 20px rgba(255,140,0,.4)}50%{box-shadow:0 0 18px rgba(255,69,0,.9),0 0 32px rgba(255,140,0,.7)}}@keyframes flameGradientShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.craving-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media (min-width:640px){.craving-grid{grid-template-columns:repeat(4,1fr)}}.craving-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:var(--radius-full);font-weight:700;font-size:.875rem;border:1px solid rgba(102,153,51,.3);background-color:var(--bg-card);color:var(--primary);transition:all var(--transition-fast);cursor:pointer;width:100%}.craving-btn:hover{background-color:var(--primary-light);border-color:var(--primary);transform:translateY(-1px)}.craving-btn.active{background-color:var(--primary);color:#ffffff;border-color:var(--primary);box-shadow:0 4px 14px rgba(102,153,51,.25)}body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 480 460'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23FF9900'/%3E%3Cstop offset='1' stop-color='%23FF0000'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M127 113L342 196L271 250L214 321Z' fill='none' stroke='url(%23g)' stroke-width='30' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 8 8,auto}[role=button],a,button,input[type=button],input[type=submit],select{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 480 460'%3E%3Cg stroke='%235D9433' stroke-width='30' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='380' y='340' width='65' height='30' rx='15' fill='none' transform='rotate(-25 380 355)'/%3E%3Cpath fill='%23E6EDE4' d='M130 140V262L97 229A56 56 0 0 0 19 307L130 396H375V140A122.5 122.5 0 0 0 130 140Z'/%3E%3Cpath fill='%23E6EDE4' d='M130 396H375V444H130Z'/%3E%3C/g%3E%3C/svg%3E") 16 0,auto!important}[contenteditable=true],input:not([type]),input[type=email],input[type=number],input[type=password],input[type=search],input[type=text],textarea{cursor:url("data:image/svg+utf8,") 16 16,text!important}.legal-layout-grid{display:grid;grid-template-columns:280px 1fr;gap:32px;width:100%}.legal-card,.legal-content-card,.legal-hero-card{padding:36px;overflow-wrap:break-word;word-break:break-word}@media (max-width:900px){.legal-layout-grid{grid-template-columns:1fr!important;gap:20px!important}.legal-sidebar{position:relative!important;top:0!important;width:100%!important}}@media (max-width:600px){.legal-card,.legal-content-card,.legal-hero-card{padding:20px 16px!important;border-radius:var(--radius-md)!important}.legal-hero-title{font-size:1.45rem!important}.legal-section-title{font-size:1.15rem!important}.legal-container{padding:12px 6px 40px!important}.step-item{flex-direction:column!important;gap:8px!important}}.notification-banner-text{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.35}@media (max-width:640px){.notification-banner-text{line-height:1.35;max-height:2.7em;white-space:normal}.notification-banner-text,.notification-body-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.notification-body-text{line-height:1.4;max-height:2.8em}}@media print{@page{size:A4 portrait;margin:10mm 12mm 10mm 12mm}*,:after,:before{background:transparent!important;box-shadow:none!important;text-shadow:none!important;filter:none!important}body,html{background-color:#ffffff!important;background:#ffffff!important;color:#111827!important;font-size:10.5pt!important;line-height:1.4!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}.app-bottom-nav,.drawer-backdrop,.drawer-container,.drawer-item-btn,.modal-container,.modal-overlay,.no-print,.notification-banner-text,.toast-container,[role=dialog],a[href*="/cook"],a[href*="q="],button,footer,header,iframe,nav,video{display:none!important}.app-shell-root,main{padding:0!important;margin:0!important;width:100%!important;max-width:100%!important}main{position:static!important}main:before{content:"ShiTayib | شي طيب";display:block;font-size:1.25rem;font-weight:800;color:#669933!important;text-align:center;border-bottom:2px solid #669933;padding-bottom:6px;margin-bottom:12px}main>div{gap:10px!important}main img{max-height:180px!important;object-fit:cover!important;border-radius:8px!important}main div[style*=aspect-ratio],main div[style*=aspectRatio]{aspect-ratio:auto!important;height:180px!important;margin-bottom:4px!important;border-radius:8px!important;box-shadow:none!important}h1{font-size:1.4rem!important;margin-bottom:2px!important}h1,h3{color:#000000!important;font-weight:800!important}h3{font-size:1.1rem!important;margin-top:8px!important;margin-bottom:6px!important;page-break-after:avoid;break-after:avoid}p{color:#374151!important;font-size:.9rem!important;line-height:1.45!important}div[style*=border-top][style*=border-bottom],div[style*=borderTop][style*=borderBottom]{padding:8px 0!important;gap:6px!important;margin:4px 0!important;border-color:#e5e7eb!important;page-break-inside:avoid;break-inside:avoid}ul{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:4px 16px!important;padding:0!important;margin:4px 0!important;list-style:none!important}ul li{padding:4px 0!important;border-bottom:1px solid #f3f4f6!important;font-size:.88rem!important;page-break-inside:avoid;break-inside:avoid}ul li button{display:none!important}ol{display:flex!important;flex-direction:column!important;gap:8px!important;padding:0!important;list-style:none!important}ol li{padding:8px 12px!important;margin:0!important;border:1px solid #e5e7eb!important;background-color:#fafafa!important;border-radius:6px!important;page-break-inside:avoid!important;break-inside:avoid!important;font-size:.9rem!important}ol li img{max-height:32px!important;width:auto!important}#dietation,#nutrition_data,div[style*="rgba(245, 158, 11"],div[style*=linear-gradient]{page-break-inside:avoid!important;break-inside:avoid!important;padding:8px 12px!important;margin-top:8px!important;border-radius:6px!important}.nutrition-grid-responsive{grid-template-columns:repeat(6,1fr)!important;gap:4px!important}a{text-decoration:none!important;color:inherit!important}}

Iftar

Oatmeal with Dates for Iftar

Oatmeal with Dates for Iftar