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

:root { --burgundy:#650031; --burgundy-2:#87003f; --cyan:#5cdfe6; --cream:#fff8f2; --paper:#fff; --ink:#220011; --muted:#735a65; --line:#e8dfe3; --success:#257c57; font-family:Tajawal,system-ui,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { min-width:320px; margin:0; background:var(--paper); } button,input { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } .app-shell { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.app-nav { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; }.app-brand img { width:110px; display:block; }.app-nav__links { display:flex; gap:28px; margin-right:auto; font-weight:800; font-size:.94rem; }.app-nav__links a:hover { color:var(--burgundy); }.app-nav__account { display:flex; gap:9px; direction:rtl; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 16px; border:1.5px solid var(--burgundy); border-radius:12px; background:transparent; color:var(--burgundy); font-size:.92rem; font-weight:900; line-height:1; transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease; }.button:hover { transform:translateY(-2px); box-shadow:0 7px 16px rgba(101,0,49,.15); }.button--primary { border-color:var(--burgundy); background:var(--burgundy); color:#fff; }.button--quiet { border-color:transparent; }.button--cyan { border-color:var(--cyan); background:var(--cyan); }.button--large { min-height:50px; padding-inline:24px; font-size:1rem; }.button:disabled { cursor:wait; opacity:.65; transform:none; box-shadow:none; }
.intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,.85fr); gap:68px; align-items:center; min-height:500px; padding:56px 0 70px; }.intro h1 { margin:0; color:var(--burgundy); font-size:clamp(3rem,6.2vw,5.6rem); font-weight:900; letter-spacing:-.075em; line-height:.86; }.intro h1 span { color:var(--cyan); text-shadow:1px 1px 0 var(--burgundy); }.intro__copy>p { max-width:535px; margin:25px 0 0; color:var(--muted); font-size:1.08rem; font-weight:700; line-height:1.9; }.intro__actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:32px; }.text-action { padding-bottom:3px; border-bottom:2px solid var(--burgundy); color:var(--burgundy); font-size:.93rem; font-weight:900; }.text-action span { margin-right:8px; }.intro__art { position:relative; min-height:360px; overflow:hidden; border-radius:34px; background:var(--cream); }.intro__orbit { position:absolute; width:455px; height:455px; top:-100px; left:-120px; border:2px solid rgba(101,0,49,.18); border-radius:50%; }.intro__plate { position:absolute; inset:44px 39px 38px 75px; display:flex; flex-direction:column; justify-content:space-between; padding:31px; border:11px solid #f9f4ee; border-radius:50%; background:radial-gradient(circle at 67% 25%,#f9e5b0 0 5%,transparent 5.5%),radial-gradient(circle at 31% 70%,#4eac64 0 13%,transparent 13.5%),radial-gradient(circle at 65% 64%,#e77d53 0 11%,transparent 11.5%),radial-gradient(circle at 49% 45%,#f0c683 0 21%,#d9a85c 22% 29%,#f7e5bc 30% 31%,#fff 32%); box-shadow:0 24px 34px rgba(101,0,49,.12); transform:rotate(-10deg); }.intro__plate span { color:var(--burgundy); font-size:.75rem; font-weight:900; letter-spacing:.06em; direction:ltr; }.intro__plate strong { width:180px; color:var(--burgundy); font-size:1.55rem; font-weight:900; line-height:1.1; transform:rotate(10deg); }.intro__leaf { position:absolute; width:104px; height:44px; border-radius:100% 0 100% 0; background:var(--cyan); }.intro__leaf--one { top:36px; right:29px; transform:rotate(-28deg); }.intro__leaf--two { bottom:42px; left:27px; background:var(--burgundy); transform:rotate(146deg); }
.catalog-section { padding:65px 0 80px; border-top:1px solid var(--line); }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:30px; }.section-heading p { margin:0 0 7px; color:var(--burgundy); font-size:.86rem; font-weight:900; }.section-heading h2 { margin:0; color:var(--ink); font-size:clamp(2rem,4.2vw,3.45rem); font-weight:900; letter-spacing:-.05em; line-height:.96; }.live-indicator { display:inline-flex; align-items:center; gap:8px; margin-bottom:5px; color:var(--success); font-size:.79rem; font-weight:800; white-space:nowrap; }.live-indicator i { width:9px; height:9px; border-radius:50%; background:var(--success); box-shadow:0 0 0 4px rgba(37,124,87,.12); }.package-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.package-card { display:flex; flex-direction:column; min-height:455px; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 12px 32px rgba(54,5,27,.06); }.package-card__image { width:100%; aspect-ratio:1.62/1; object-fit:cover; background:var(--cream); }.package-card__body { display:flex; flex:1; flex-direction:column; padding:23px; }.package-card__type { margin:0 0 10px; color:var(--burgundy); font-size:.72rem; font-weight:900; letter-spacing:.07em; }.package-card h3 { margin:0; color:var(--ink); font-size:1.5rem; font-weight:900; }.package-card__description { min-height:48px; margin:8px 0 0; color:var(--muted); font-size:.91rem; font-weight:700; line-height:1.7; }.package-card ul { min-height:76px; margin:18px 0 22px; padding:0; list-style:none; color:#513443; font-size:.84rem; font-weight:700; line-height:1.8; }.package-card li::before { content:'•'; margin-left:7px; color:var(--burgundy); }.package-card__bottom { display:flex; align-items:end; justify-content:space-between; gap:13px; margin-top:auto; padding-top:17px; border-top:1px solid var(--line); }.price-label { display:block; color:var(--muted); font-size:.72rem; font-weight:800; }.package-card__price { display:block; margin-top:3px; color:var(--burgundy); font-size:1.45rem; font-weight:900; direction:rtl; }.package-card__price small { font-size:.79rem; }.package-card__button { flex:0 0 auto; }.pricing-note { max-width:740px; margin:21px 0 0; color:var(--muted); font-size:.82rem; font-weight:700; line-height:1.75; }.state-card { grid-column:1/-1; padding:45px 20px; border:1px dashed #cdbbc3; border-radius:18px; color:var(--muted); text-align:center; font-weight:800; }.state-card--error { color:#a71945; }.state-card--menu { border-color:rgba(101,0,49,.22); background:#fff; }
.menu-section { padding:70px 0; background:#f3fcfc; }.section-heading--menu { margin-bottom:28px; }.section-heading time { color:var(--burgundy); font-size:.9rem; font-weight:900; }.daily-menu { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.meal-card { overflow:hidden; border:1px solid #d9eded; border-radius:18px; background:#fff; }.meal-card__image { display:block; width:100%; aspect-ratio:1.55/1; object-fit:cover; background:#eaf8f9; }.meal-card__body { padding:17px; }.meal-card__category { display:inline-block; margin-bottom:9px; padding:4px 9px; border-radius:999px; background:var(--cyan); color:var(--burgundy); font-size:.71rem; font-weight:900; }.meal-card h3 { margin:0; font-size:1.16rem; font-weight:900; }.meal-card p { min-height:42px; margin:7px 0 13px; color:var(--muted); font-size:.83rem; font-weight:700; line-height:1.65; }.macro-list { display:flex; flex-wrap:wrap; gap:8px 12px; padding:0; margin:0; list-style:none; color:#5b4650; font-size:.72rem; font-weight:800; }.macro-list strong { color:var(--burgundy); }
.membership { display:grid; grid-template-columns:1.1fr .75fr auto; align-items:center; gap:36px; margin:74px auto; padding:39px 43px; border-radius:20px; background:var(--burgundy); color:#fff; }.membership p { margin:0 0 7px; color:var(--cyan); font-size:.86rem; font-weight:900; }.membership h2 { margin:0; font-size:clamp(1.7rem,3vw,2.6rem); font-weight:900; letter-spacing:-.045em; line-height:1.05; }.membership>p { color:#e8d8df; font-size:.9rem; font-weight:700; line-height:1.8; }
.app-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0 40px; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; font-weight:700; }.app-footer img { width:77px; }.app-footer p { margin:0; }.app-footer nav { display:flex; flex-wrap:wrap; gap:15px; }.app-footer a:hover { color:var(--burgundy); }
.auth-dialog { width:min(480px,calc(100% - 28px)); padding:0; border:0; border-radius:22px; color:var(--ink); background:#fff; box-shadow:0 24px 70px rgba(37,0,19,.27); }.auth-dialog::backdrop { background:rgba(37,0,19,.54); backdrop-filter:blur(3px); }.auth-dialog__frame { position:relative; padding:33px; }.dialog-close { position:absolute; top:15px; left:15px; width:32px; height:32px; padding:0; border:0; border-radius:50%; color:var(--burgundy); background:var(--cream); font-size:1.5rem; line-height:1; }.auth-dialog__header img { width:83px; }.auth-dialog__header h2 { margin:17px 0 5px; color:var(--burgundy); font-size:2rem; font-weight:900; }.auth-dialog__header p { margin:0; color:var(--muted); font-size:.88rem; font-weight:700; }.auth-switch { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin:25px 0 20px; border-radius:12px; background:var(--cream); }.auth-switch button { min-height:36px; border:0; border-radius:9px; color:var(--muted); background:transparent; font-size:.85rem; font-weight:900; }.auth-switch button[aria-selected="true"] { color:var(--burgundy); background:#fff; box-shadow:0 2px 7px rgba(101,0,49,.1); }.form-row { display:grid; gap:7px; margin:0 0 14px; }.form-row label,.legal-checks { color:#5e4350; font-size:.83rem; font-weight:800; }.form-row input { width:100%; min-height:45px; padding:10px 12px; border:1px solid #d9cbd1; border-radius:10px; outline:none; color:var(--ink); background:#fff; direction:rtl; }.form-row input:focus { border-color:var(--burgundy); box-shadow:0 0 0 3px rgba(101,0,49,.1); }.legal-checks { display:grid; gap:9px; margin:4px 0 14px; line-height:1.5; }.legal-checks label { display:flex; align-items:flex-start; gap:8px; }.legal-checks input { margin-top:3px; accent-color:var(--burgundy); }.legal-checks a { color:var(--burgundy); text-decoration:underline; }.form-status { min-height:21px; margin:0 0 9px; color:#a71945; font-size:.8rem; font-weight:800; }.form-status[data-kind="success"] { color:var(--success); }.button--submit { width:100%; min-height:48px; }.forgot-password { display:block; margin:17px auto 0; padding:4px; border:0; color:var(--burgundy); background:transparent; font-size:.82rem; font-weight:800; }.forgot-password:hover { text-decoration:underline; }
/* Layout rules must not override the semantic hidden state used by the auth tabs. */
.form-row[hidden],.legal-checks[hidden] { display:none !important; }
@media (max-width:850px) { .intro { grid-template-columns:1fr; gap:30px; padding-top:37px; }.intro__art { min-height:295px; }.package-grid { grid-template-columns:1fr 1fr; }.membership { grid-template-columns:1fr auto; }.membership>p { grid-column:1/-1; grid-row:2; }.daily-menu { grid-template-columns:1fr 1fr; } }
@media (max-width:620px) { .app-shell { width:min(100% - 30px,1180px); }.app-nav { min-height:72px; }.app-brand img { width:88px; }.app-nav__links { display:none; }.app-nav__account { gap:2px; }.button { min-height:38px; padding:8px 10px; font-size:.8rem; }.intro { min-height:0; padding:34px 0 47px; }.intro h1 { font-size:clamp(2.65rem,13vw,4rem); }.intro__copy>p { font-size:.96rem; }.intro__art { min-height:260px; border-radius:22px; }.intro__plate { inset:33px 35px 30px 54px; }.catalog-section,.menu-section { padding:48px 0; }.section-heading { align-items:flex-start; flex-direction:column; margin-bottom:24px; }.section-heading h2 { font-size:2rem; }.live-indicator { margin:0; }.package-grid,.daily-menu { grid-template-columns:1fr; }.package-card { min-height:0; }.package-card__description,.package-card ul { min-height:0; }.membership { grid-template-columns:1fr; gap:22px; margin:48px auto; padding:30px 25px; }.membership>p { grid-column:auto; grid-row:auto; }.membership .button { width:max-content; }.app-footer { align-items:flex-start; flex-direction:column; }.app-footer nav { gap:10px 15px; }.auth-dialog__frame { padding:27px 22px; }.auth-dialog__header h2 { font-size:1.8rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.button { transition:none; } }