/* ============================================================
   DMA · Templates — Use-cases filter grid + Quiz
   Layers on site.css + components.css. Arabic-primary (RTL).
   ============================================================ */

/* ===================== USE CASES ===================== */
.uc-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:30px; }
.seg{ display:inline-flex; background:var(--mint-100); border-radius:999px; padding:5px; gap:4px; }
.seg button{ border:0; background:transparent; color:var(--teal-800); border-radius:999px; padding:10px 18px;
  font-size:calc(14px*var(--fs)); font-weight:700; display:inline-flex; align-items:center; gap:8px; transition:.16s; white-space:nowrap; }
.seg button svg{ width:16px; height:16px; }
.seg button.active{ background:#fff; color:var(--site-accent); box-shadow:var(--shadow-sm); }
.uc-count{ font-size:calc(14px*var(--fs)); color:var(--ink-500); font-weight:600; }
.uc-cats{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.catchip{ border:1.5px solid var(--line-200); background:#fff; color:var(--ink-700); border-radius:999px;
  padding:7px 15px; font-size:calc(13px*var(--fs)); font-weight:700; transition:.16s; }
.catchip:hover{ border-color:var(--mint-300); }
.catchip.active{ background:var(--teal-900); border-color:var(--teal-900); color:#fff; }

.uc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:26px; }
.uc-card{ background:#fff; border:1px solid var(--line-200); border-radius:20px; padding:24px; display:flex; flex-direction:column;
  transition:transform .16s, box-shadow .16s; position:relative; overflow:hidden; }
.uc-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.uc-card__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.uc-card__ico{ width:46px; height:46px; border-radius:13px; background:var(--mint-100); color:var(--site-accent);
  display:flex; align-items:center; justify-content:center; }
.uc-card__ico svg{ width:24px; height:24px; }
.uc-tag{ font-size:calc(11px*var(--fs)); font-weight:700; letter-spacing:.04em; padding:5px 11px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px; }
.uc-tag svg{ width:13px; height:13px; }
.uc-tag--ind{ background:rgba(0,185,179,.12); color:var(--teal-800); }
.uc-tag--org{ background:#EAF0F1; color:var(--teal-900); }
.uc-tag--both{ background:var(--mint-100); color:var(--teal-800); }
.uc-card h3{ font-size:calc(18px*var(--fs)); color:var(--ink-900); margin:0 0 3px; line-height:1.25; }
.uc-card .en{ font-size:calc(13px*var(--fs)); color:var(--site-accent); font-weight:600; }
.uc-card p{ font-size:calc(14px*var(--fs)); color:var(--ink-500); line-height:1.6; margin:12px 0 16px; }
.uc-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto;
  padding-top:14px; border-top:1px solid var(--line-200); }
.uc-card__cat{ font-size:calc(12px*var(--fs)); font-weight:700; color:var(--ink-500); }
.uc-mat{ display:flex; align-items:center; gap:8px; font-size:calc(11.5px*var(--fs)); color:var(--ink-500); font-weight:600; }
.uc-mat .dots{ display:flex; gap:3px; }
.uc-mat .dots b{ width:7px; height:7px; border-radius:50%; background:var(--mint-200); }
.uc-mat .dots b.on{ background:var(--site-accent); }
.uc-empty{ grid-column:1/-1; text-align:center; color:var(--ink-500); padding:40px; font-size:calc(15px*var(--fs)); }

/* ===================== QUIZ ===================== */
.quizwrap{ max-width:720px; margin:0 auto; }
.quiz{ background:#fff; border:1px solid var(--line-200); border-radius:24px; box-shadow:var(--shadow-md);
  padding:34px; position:relative; overflow:hidden; }
.quiz__head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; }
.quiz__step{ font-size:calc(13px*var(--fs)); font-weight:700; color:var(--site-accent); }
.quiz__bar{ flex:1; height:7px; background:var(--mint-100); border-radius:999px; overflow:hidden; margin-inline-start:14px; }
.quiz__fill{ height:100%; background:var(--brand); border-radius:999px; transition:width .35s; }
.quiz__q{ font-size:calc(22px*var(--fs)); font-weight:700; color:var(--ink-900); line-height:1.4; margin:0 0 22px; }
.quiz__opts{ display:flex; flex-direction:column; gap:12px; }
.quiz__opt{ text-align:start; border:1.5px solid var(--line-200); background:#fff; border-radius:14px; padding:16px 18px;
  font-size:calc(16px*var(--fs)); font-weight:500; color:var(--ink-700); display:flex; align-items:center; gap:13px; transition:.16s; }
.quiz__opt:hover:not(:disabled){ border-color:var(--mint-300); background:var(--mint-050); }
.quiz__opt .mk{ width:26px; height:26px; border-radius:50%; border:2px solid var(--line-200); flex:none;
  display:flex; align-items:center; justify-content:center; color:transparent; font-size:0; }
.quiz__opt .mk svg{ width:15px; height:15px; }
.quiz__opt.correct{ border-color:var(--site-accent); background:rgba(0,185,179,.07); color:var(--ink-900); }
.quiz__opt.correct .mk{ border-color:var(--site-accent); background:var(--site-accent); color:#fff; }
.quiz__opt.wrong{ border-color:#E4889A; background:#FDEced; color:var(--ink-900); }
.quiz__opt.wrong .mk{ border-color:#C0445A; background:#C0445A; color:#fff; }
.quiz__opt:disabled{ cursor:default; }
.quiz__fb{ margin-top:18px; border-radius:14px; padding:16px 18px; font-size:calc(14.5px*var(--fs)); line-height:1.6; display:none; }
.quiz__fb.show{ display:block; }
.quiz__fb.ok{ background:rgba(0,185,179,.07); color:var(--teal-900); border:1px solid var(--mint-300); }
.quiz__fb.no{ background:#FDEced; color:#7C2230; border:1px solid #F2C2CC; }
.quiz__actions{ display:flex; justify-content:flex-end; margin-top:24px; }
.quiz__result{ text-align:center; padding:20px 0; }
.quiz__score{ width:120px; height:120px; border-radius:50%; margin:0 auto 20px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; background:conic-gradient(var(--brand) var(--p,0%), var(--mint-100) 0); }
.quiz__score .inner{ width:96px; height:96px; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.quiz__score b{ font-size:calc(30px*var(--fs)); color:var(--ink-900); line-height:1; }
.quiz__score span{ font-size:calc(12px*var(--fs)); color:var(--ink-500); }
.quiz__result h3{ font-size:calc(24px*var(--fs)); color:var(--ink-900); margin:0 0 8px; }
.quiz__result p{ font-size:calc(15px*var(--fs)); color:var(--ink-500); margin:0 0 22px; }

@media (max-width:980px){
  .uc-grid{ grid-template-columns:1fr; }
  .uc-toolbar{ flex-direction:column; align-items:stretch; }
}