/* ==========================================================================
   توثيق الأكل اليمني — نظام تصميم تراثي تحريري (RTL)
   ========================================================================== */
:root{
  --paper:#f4ede0; --paper-2:#faf6ed; --card:#fffdf8;
  --ink:#241c15; --ink-soft:#5d5040; --ink-faint:#8a7c69;
  --clay:#a8412a; --clay-dark:#87331f; --clay-tint:#f3ddd4;
  --saffron:#d4901f; --saffron-tint:#f7e9cc;
  --green:#34503f; --green-tint:#dde8df;
  --gold:#c9a25a; --line:#e3d7c2; --line-soft:#ece2d1;
  --shadow:0 1px 2px rgba(60,40,20,.05),0 8px 28px -12px rgba(80,50,20,.18);
  --shadow-lg:0 30px 60px -28px rgba(70,40,15,.42);
  --font-body:'Cairo',system-ui,sans-serif; --font-head:'Reem Kufi',sans-serif; --radius:14px; --radius-sm:9px; --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16.5px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 12% -10%,var(--saffron-tint) 0,transparent 38%),
    radial-gradient(circle at 95% 0%,var(--clay-tint) 0,transparent 30%);
  background-attachment:fixed;
}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:600; line-height:1.3; color:var(--ink); margin:0 0 .5em}
a{color:var(--clay); text-decoration:none}
a:hover{color:var(--clay-dark)}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

/* ---------- Header / Nav ---------- */
.site-head{position:sticky; top:0; z-index:40; background:rgba(244,237,224,.85);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:8px; height:68px}
.brand{display:flex; align-items:center; gap:11px; margin-inline-end:auto; font-family:var(--font-head); font-weight:700; font-size:1.28rem; color:var(--ink)}
.brand .seal{width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--clay),var(--saffron)); color:#fff; font-size:1.1rem; box-shadow:var(--shadow)}
.nav a.navlink{padding:8px 13px; border-radius:9px; color:var(--ink-soft); font-weight:600; font-size:.95rem}
.nav a.navlink:hover{background:var(--line-soft); color:var(--ink)}
.nav .sp{flex:1}
@media(max-width:760px){.nav{height:auto; flex-wrap:wrap; padding:11px 0; gap:4px}.brand{width:100%; margin-bottom:6px}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:11px;
  font-family:var(--font-body); font-weight:700; font-size:.97rem; cursor:pointer; border:1px solid transparent;
  transition:transform .12s ease,box-shadow .2s ease,background .2s; text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--clay); color:#fff; box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--clay-dark); color:#fff}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{background:var(--card); border-color:var(--clay)}
.btn-green{background:var(--green); color:#fff}
.btn-green:hover{background:#27402f; color:#fff}
.btn-sm{padding:7px 13px; font-size:.86rem; border-radius:9px}
.btn-danger{background:#9e3024; color:#fff}
.btn-block{width:100%; justify-content:center}

/* ---------- Cards / Surfaces ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.pad{padding:22px}
.section{padding:54px 0}
.section-title{display:flex; align-items:baseline; gap:14px; margin-bottom:26px}
.section-title h2{font-size:1.75rem; margin:0}
.section-title .rule{flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent)}

/* ---------- Hero ---------- */
.hero{position:relative; padding:74px 0 60px; text-align:center; overflow:hidden}
.hero .kicker{display:inline-block; font-weight:700; letter-spacing:.04em; color:var(--clay);
  background:var(--clay-tint); padding:6px 16px; border-radius:999px; font-size:.85rem; margin-bottom:20px}
.hero h1{font-size:clamp(2.3rem,6vw,4rem); margin:0 0 16px; letter-spacing:-.01em}
.hero p.lead{font-size:1.2rem; color:var(--ink-soft); max-width:620px; margin:0 auto 30px}
.hero .cta{display:flex; gap:13px; justify-content:center; flex-wrap:wrap}
.hero .ornament{font-size:2rem; color:var(--gold); margin-bottom:14px; letter-spacing:.3em}

/* ---------- Grid of dishes ---------- */
.grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.dish{display:flex; flex-direction:column; overflow:hidden; transition:transform .18s ease,box-shadow .25s ease}
.dish:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.dish .thumb{aspect-ratio:4/3; background:linear-gradient(135deg,var(--saffron-tint),var(--clay-tint)); position:relative; display:grid; place-items:center}
.dish .thumb .glyph{font-family:var(--font-head); font-size:2.6rem; color:rgba(168,65,42,.32)}
.dish .thumb img{width:100%; height:100%; object-fit:cover}
.dish .body{padding:16px 17px; display:flex; flex-direction:column; gap:8px; flex:1}
.dish h3{font-size:1.18rem; margin:0}
.dish .meta{font-size:.85rem; color:var(--ink-faint); margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ---------- Badges ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:999px;
  font-size:.78rem; font-weight:700; border:1px solid transparent; white-space:nowrap}
.badge--green{background:var(--green-tint); color:var(--green); border-color:#c4d6c8}
.badge--orange{background:var(--saffron-tint); color:#9a6510; border-color:#ecd6a6}
.badge--blue{background:#dde6ef; color:#395d80; border-color:#c4d4e3}
.badge--gray{background:#eae2d4; color:#6e6253; border-color:#ddd1bd}
.badge--yellow{background:#f7eec6; color:#8a6a13; border-color:#ebdca0}
.badge--red{background:#f4dcd6; color:#9e3024; border-color:#e6c3ba}

/* ---------- Forms ---------- */
.field{margin-bottom:17px}
.field label{display:block; font-weight:700; font-size:.92rem; margin-bottom:6px; color:var(--ink)}
.field .hint{font-size:.82rem; color:var(--ink-faint); font-weight:400}
.input,select.input,textarea.input{width:100%; padding:11px 13px; border:1px solid var(--line);
  border-radius:10px; background:var(--paper-2); font-family:var(--font-body); font-size:1rem; color:var(--ink); transition:border .15s,box-shadow .15s}
.input:focus{outline:none; border-color:var(--clay); box-shadow:0 0 0 3px var(--clay-tint)}
textarea.input{min-height:120px; resize:vertical}
.err{color:#9e3024; font-size:.84rem; margin-top:5px; font-weight:600}
.checkrow{display:flex; align-items:center; gap:9px; font-weight:600}
.checkrow input{width:18px; height:18px; accent-color:var(--clay)}

/* ---------- Alerts ---------- */
.alert{padding:13px 17px; border-radius:11px; margin-bottom:20px; font-weight:600; border:1px solid}
.alert-success{background:var(--green-tint); color:var(--green); border-color:#bcd2c1}
.alert-error{background:#f4dcd6; color:#9e3024; border-color:#e6c3ba}

/* ---------- Page header ---------- */
.page-head{padding:40px 0 8px}
.page-head h1{font-size:2.1rem; margin-bottom:6px}
.page-head .sub{color:var(--ink-soft)}
.breadcrumb{font-size:.86rem; color:var(--ink-faint); margin-bottom:14px}
.breadcrumb a{color:var(--ink-soft)}

/* ---------- Dish detail ---------- */
.detail-cover{height:330px; border-radius:var(--radius); overflow:hidden; background:linear-gradient(135deg,var(--saffron-tint),var(--clay-tint)); display:grid; place-items:center; margin-bottom:26px}
.detail-cover .glyph{font-family:var(--font-head); font-size:5rem; color:rgba(168,65,42,.3)}
.detail-grid{display:grid; grid-template-columns:1fr 320px; gap:34px}
@media(max-width:860px){.detail-grid{grid-template-columns:1fr}}
.story{font-family:'Amiri',serif; font-size:1.28rem; line-height:2.1; color:#33271c}
.story-unknown{font-family:'Amiri',serif; font-style:italic; color:var(--ink-faint); padding:18px; border-inline-start:3px solid var(--gold); background:var(--paper-2); border-radius:0 10px 10px 0}
.ingredients{list-style:none; padding:0; margin:0}
.ingredients li{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px dashed var(--line)}
.ingredients .amt{color:var(--ink-faint); font-size:.92rem}

/* ---------- Derivation tree ---------- */
.tree{background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:18px}
.tree .node{display:flex; align-items:center; gap:9px; padding:9px 12px; background:var(--card); border:1px solid var(--line); border-radius:9px; margin:5px 0}
.tree .node.self{border-color:var(--clay); background:var(--clay-tint)}
.tree .arrow{color:var(--gold); text-align:center; font-size:1.2rem}

/* ---------- Stats (admin) ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px}
.stat{padding:20px; text-align:center}
.stat .num{font-family:var(--font-head); font-size:2.2rem; font-weight:700; color:var(--clay)}
.stat .lbl{color:var(--ink-soft); font-size:.9rem; font-weight:600}

/* ---------- Table ---------- */
.table{width:100%; border-collapse:collapse; background:var(--card); border-radius:12px; overflow:hidden; border:1px solid var(--line)}
.table th,.table td{padding:13px 15px; text-align:start; border-bottom:1px solid var(--line-soft)}
.table th{background:var(--paper-2); font-family:var(--font-head); font-size:.92rem; color:var(--ink-soft)}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:var(--paper-2)}

/* ---------- Plans ---------- */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; max-width:760px; margin:0 auto}
.plan{text-align:center; padding:32px 26px; position:relative}
.plan.feature{border-color:var(--clay); box-shadow:var(--shadow-lg)}
.plan .price{font-family:var(--font-head); font-size:2.6rem; color:var(--ink); font-weight:700}
.plan .price small{font-size:1rem; color:var(--ink-faint); font-weight:400}
.plan ul{list-style:none; padding:0; margin:20px 0; text-align:start}
.plan ul li{padding:7px 0; border-bottom:1px dashed var(--line)}
.plan ul li::before{content:'✔'; color:var(--green); font-weight:700; margin-inline-end:8px}

/* ---------- Pagination ---------- */
.pager{display:flex; gap:6px; justify-content:center; margin-top:34px; flex-wrap:wrap}
.pager a,.pager span{padding:8px 13px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft); font-weight:600; font-size:.9rem}
.pager a:hover{border-color:var(--clay); color:var(--clay)}
.pager .active span{background:var(--clay); color:#fff; border-color:var(--clay)}
.pager .disabled span{opacity:.4}

/* ---------- Empty state ---------- */
.empty{text-align:center; padding:60px 20px; color:var(--ink-faint)}
.empty .big{font-size:3rem; color:var(--gold); margin-bottom:10px}

/* ---------- Footer ---------- */
.site-foot{margin-top:70px; border-top:1px solid var(--line); background:var(--paper-2); padding:34px 0; color:var(--ink-faint); font-size:.9rem}
.site-foot .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px}

/* ---------- Utilities ---------- */
.muted{color:var(--ink-faint)}
.mt{margin-top:18px}.mt-lg{margin-top:30px}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.between{justify-content:space-between}
.cols-2{display:grid; grid-template-columns:1fr 1fr; gap:15px}
@media(max-width:640px){.cols-2{grid-template-columns:1fr}.detail-grid{gap:22px}}
.stack-sm>*+*{margin-top:6px}

/* ---------- الشعار والبنرات ---------- */
.brand-logo{height:38px; width:auto; border-radius:8px; display:block}
.banner-zone{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:0 auto; padding:14px 22px; max-width:var(--maxw)}
.banner-item{display:block; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--card); max-width:100%}
.banner-item img{display:block; max-width:100%; height:auto}
.banner-item span{display:flex; align-items:center; justify-content:center; padding:18px 26px; font-family:var(--font-head); color:var(--ink-soft)}
.banner-header,.banner-footer{width:100%}
.banner-sidebar{flex-direction:column}
/* ثيم ليلي: تحسينات تباين بسيطة */
.theme-night .card{box-shadow:none}

/* ---------- معاينة الثيم في الإعدادات ---------- */
.theme-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.theme-opt{border:2px solid var(--line); border-radius:12px; padding:12px; cursor:pointer; text-align:center; transition:border .15s}
.theme-opt.sel{border-color:var(--clay)}
.theme-opt .swatches{display:flex; gap:5px; justify-content:center; margin-bottom:8px}
.theme-opt .sw{width:24px; height:24px; border-radius:50%; border:1px solid rgba(0,0,0,.1)}
.theme-opt input{margin-top:6px; accent-color:var(--clay)}