/* دليل العارضين — نفس ألوان وخطوط التوب السوداني، صفحات خفيفة للجوال */
:root{
  --henna:#a8432a; --henna-d:#7f2f1c; --gold:#d9a640; --gold-l:#f1d08a;
  --cream:#f3e6d3; --paper:#fbf5ea; --card:#fffaf2; --ink:#2b1810; --muted:#7a6153;
  --line:rgba(43,24,16,.12); --ok:#14633b; --bad:#8a2a14;
  --hdr:calc(60px + env(safe-area-inset-top, 0px));
  --nav:calc(62px + env(safe-area-inset-bottom, 0px));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:var(--paper);
  font:400 16px/1.65 "Tajawal",system-ui,sans-serif;
  overflow-x:clip; min-height:100vh; min-height:100svh;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button,input,select,textarea{font:inherit}
h1,h2,h3{font-family:"Cairo","Tajawal",sans-serif; line-height:1.25; font-weight:900; margin:0}
.sr,.hp{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.wrap{width:min(1040px, calc(100% - 32px)); margin-inline:auto}
main{padding-bottom:calc(var(--nav) + 24px)}

.bar{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top, 0px);
}
.bar-in{display:flex; align-items:center; gap:10px; min-height:60px}
.logo{display:flex; align-items:center; gap:8px; text-decoration:none; font-family:"Cairo",sans-serif; font-weight:900; font-size:1.05rem; min-width:0}
.logo span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.logo svg,.logo-img{width:34px; height:34px; flex:none}
.hnav{display:none; gap:4px; margin-inline-start:auto}
.hnav a{text-decoration:none; font-weight:800; padding:8px 12px; border-radius:999px; min-height:44px; display:inline-flex; align-items:center}
.hnav a[aria-current="page"],.hnav a:hover{background:rgba(43,24,16,.08)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:10px 18px; border-radius:999px; border:0; cursor:pointer;
  background:var(--henna); color:#fff; font-weight:800; text-decoration:none; text-align:center;
}
.btn:hover{background:var(--henna-d)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:3px solid var(--gold); outline-offset:2px;
}
.btn.sm{min-height:44px; padding:8px 14px; font-size:.95rem}
.bar-in > .btn.sm{margin-inline-start:auto}
.btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(43,24,16,.28)}
.btn.ghost:hover{background:rgba(217,166,64,.16)}
.btn.full{width:100%}
.btn.danger{background:#fde3dc; color:var(--bad)}
.btn[disabled]{opacity:.55}

.bnav{
  position:fixed; inset-inline:0; bottom:0; z-index:30; display:flex;
  background:var(--card); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.bnav a{
  flex:1; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; text-decoration:none; color:var(--muted); font-size:.875rem; font-weight:800;
}
.bnav svg{width:22px; height:22px}
.bnav a[aria-current="page"]{color:var(--henna)}

.page{padding:22px 0 8px}
.crumbs ol{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0 0 12px; padding:0; color:var(--muted); font-size:.875rem}
.crumbs li{display:flex; align-items:center; gap:6px; min-height:24px}
.crumbs li+li::before{content:"/"; color:var(--gold)}
.crumbs a{font-weight:800; text-decoration:none}
.crumbs [aria-current="page"]{color:var(--ink); font-weight:800}
.kicker{
  display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:.92rem;
  background:rgba(168,67,42,.1); color:var(--henna-d); border-radius:999px; padding:4px 12px; margin-bottom:10px;
}
.lead{color:#4a3328; font-size:1.05rem; margin:8px 0 0; max-width:38rem}
h1{font-size:clamp(1.8rem, 7vw, 2.6rem)}

.alert{border-radius:14px; padding:12px 14px; font-weight:700; margin:0 0 14px}
.alert.ok{background:#dff1e8; color:var(--ok)}
.alert.bad{background:#fde3dc; color:var(--bad)}
.note{color:var(--muted); font-size:.95rem; margin:6px 0 0}

.chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; margin:16px 0}
.chips::-webkit-scrollbar{display:none}
.chips a{
  flex:none; min-height:44px; display:inline-flex; align-items:center; padding:8px 14px;
  border-radius:999px; text-decoration:none; background:rgba(43,24,16,.06); font-weight:800;
}
.chips a[aria-current="page"]{background:var(--ink); color:var(--paper)}

.search{display:flex; gap:8px; margin-top:14px}
.search input{flex:1; min-width:0}

.list{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:10px}
.ex{
  display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--line); text-decoration:none;
}
.ex .ph{
  width:72px; height:72px; border-radius:18px; overflow:hidden; background:var(--cream);
  display:grid; place-items:center; border:1px solid var(--line);
}
.ex .ph img{width:72px; height:72px; object-fit:cover}
.mono{font-family:"Cairo",sans-serif; font-weight:900; font-size:1.6rem; color:var(--henna)}
.ex h2{font-size:1.15rem}
.ex p{margin:2px 0 0; color:var(--muted); font-size:.95rem}
.ex .meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.tag{font-size:.875rem; font-weight:800; color:var(--henna-d); background:rgba(217,166,64,.28); border-radius:999px; padding:2px 8px}

.empty{padding:28px 0 12px}
.empty a{color:var(--henna); font-weight:800}

.hero{display:grid; gap:16px; padding-top:8px}
.brandline{display:flex; gap:14px; align-items:center}
.brandline .ph{width:88px; height:88px; border-radius:22px; overflow:hidden; background:var(--cream); display:grid; place-items:center; border:1px solid var(--line); flex:none}
.brandline .ph img{width:88px; height:88px; object-fit:cover}
.who{margin:4px 0 0; color:var(--muted)}
.bio{font-size:1.05rem; margin:14px 0}
.links{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 18px}
.links a{min-height:44px; display:inline-flex; align-items:center; padding:8px 14px; border-radius:999px; background:var(--card); border:1px solid var(--line); text-decoration:none; font-weight:800}

.gal{
  display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; margin-inline:-16px; padding-inline:16px;
}
.gal figure{flex:0 0 min(78%, 320px); scroll-snap-align:center; margin:0}
.gal img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:18px; background:var(--cream)}
.gal figcaption{margin-top:6px; font-weight:800; font-size:.95rem}

.wa{
  position:fixed; inset-inline:16px; bottom:calc(var(--nav) + 10px); z-index:25;
  min-height:52px; display:flex; align-items:center; justify-content:center;
  background:#128C4A; color:#fff; text-decoration:none; font-weight:800; border-radius:999px;
  box-shadow:0 10px 24px -16px #0c3d22;
}

.steps{margin:8px 0 18px}
.barline{height:6px; border-radius:999px; background:rgba(43,24,16,.08); overflow:hidden}
.barline i{display:block; height:100%; background:var(--gold); width:0}
.steps p{margin:8px 0 0; font-weight:800; font-size:.92rem}
form.wiz .step{display:none}
form.wiz .step.on{display:block}
.step h2{font-size:1.35rem; margin-bottom:12px}
label{display:grid; gap:6px; font-weight:800; margin-bottom:12px}
input,select,textarea{
  width:100%; min-height:48px; padding:10px 12px; border-radius:14px;
  border:1.5px solid #e4d3bc; background:#fff; color:var(--ink); font-size:16px;
}
textarea{min-height:120px; resize:vertical}
.choices{display:grid; gap:8px}
.choices label{
  display:flex; align-items:center; gap:10px; min-height:52px; margin:0;
  padding:10px 12px; border-radius:16px; border:1.5px solid #e4d3bc; background:#fff;
}
.choices input{width:22px; height:22px; min-height:0; accent-color:var(--henna)}
.row-actions{display:flex; gap:8px; margin-top:8px}
.row-actions .btn{flex:1}
.preview-img{width:96px; height:96px; object-fit:cover; border-radius:16px; margin-bottom:8px}

.stats{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0 20px}
.stat{padding:12px 0; border-top:1px solid var(--line)}
.stat b{display:block; font-family:"Cairo",sans-serif; font-size:1.8rem; font-variant-numeric:tabular-nums; line-height:1}
.stat span{color:var(--muted); font-size:.92rem}
.section{padding:8px 0 18px; border-top:1px solid var(--line); margin-top:8px}
.prod{display:grid; grid-template-columns:84px minmax(0,1fr); gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line)}
.prod img{width:84px; height:84px; object-fit:cover; border-radius:14px}
.prod form{margin-top:6px}

.qsheet{display:grid; gap:14px; justify-items:center; padding:16px 0 32px}
.qcard{
  width:min(100%, 360px); background:var(--paper); color:var(--ink);
  border:3px solid var(--henna); outline:1px solid var(--gold); outline-offset:-8px;
  border-radius:18px; padding:22px 16px 16px; text-align:center;
}
.qhead{display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:8px}
.qhead svg,.qhead img{width:36px; height:36px}
.qhead strong{display:block; font-family:"Cairo",sans-serif}
.qhead small{display:block; letter-spacing:.04em; color:var(--muted); font-size:.875rem}
.qcard h2{font-size:1.45rem; margin-top:6px}
.qcat{margin:4px 0 8px; color:var(--henna-d); font-weight:800}
.qrim{width:min(62%, 220px); height:auto; margin:8px auto; background:#fff; padding:8px; border-radius:8px}
.qshot{font-family:"Cairo",sans-serif; font-weight:900; font-size:1.15rem; margin:8px 0 0}
.qdom{margin:2px 0 0; font-weight:800; letter-spacing:.02em}
.toolbar{display:flex; gap:8px; justify-content:center; margin:8px 0 16px}

@media (min-width:700px){
  .list{grid-template-columns:1fr 1fr; column-gap:28px}
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,.9fr); align-items:start}
  .gal{margin-inline:0; padding-inline:0}
}
@media (min-width:900px){
  .hnav{display:flex}
  .bnav{display:none}
  main{padding-bottom:48px}
  .wa{bottom:16px; inset-inline:auto; left:24px; min-width:240px}
  .bar-in > .btn.sm{margin-inline-start:auto}
}
@media print{
  .bar,.bnav,.toolbar,.noprint{display:none !important}
  body{background:#fff}
  main{padding:0}
  .qsheet{display:grid; grid-template-columns:1fr 1fr; gap:6mm; justify-items:stretch}
  .qcard{width:auto; break-inside:avoid; height:88mm}
  .qrim{width:34mm}
}
@page{size:A4; margin:8mm}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
}

[hidden]{display:none!important}