/* ISO Qualification Portal — front-end
   Scoped under .isoqp-root so it never fights the site theme. */

.isoqp-root{
  --paper:#EDF2F0; --surface:#FFFFFF; --surface-2:#F6FAF8;
  --ink:#10211F; --ink-2:#2C403C; --muted:#5C6E6A; --line:#D5DFDB; --line-2:#E7EEEB;
  --accent:#0A6B60; --accent-ink:#FFFFFF; --accent-weak:#E0EFEB; --accent-line:#8FC4BB;
  --gb:#A62531; --seal:#8A5E1A; --seal-weak:#F4EBDB; --crit:#A33A2E;
  --shadow:0 1px 2px rgba(16,33,31,.06), 0 8px 24px rgba(16,33,31,.05);
  --r:12px; --maxw:960px;
  --dsp:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic","Readex Pro",system-ui,sans-serif;

  direction:rtl; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-align:right;
}
.isoqp-root *,.isoqp-root *::before,.isoqp-root *::after{box-sizing:border-box}
.isoqp-root h1,.isoqp-root h2,.isoqp-root h3{font-family:var(--dsp); text-wrap:balance; margin:0; color:var(--ink)}
.isoqp-root p{margin:0}
.isoqp-root a{color:var(--accent); text-decoration:none}
.isoqp-root img{max-width:100%; height:auto}
.isoqp-root ol,.isoqp-root ul{margin:0; padding:0; list-style:none}

/* ---------- header ---------- */
.isoqp-top{position:sticky; top:0; z-index:30; background:rgba(237,242,240,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); box-shadow:inset 0 -3px 0 -2px var(--gb)}
.isoqp-top-in{max-width:var(--maxw); margin:0 auto; padding:12px 16px; display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:space-between}
.isoqp-brandbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0}
.isoqp-chip{background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px 11px; display:flex;
  align-items:center; height:52px}
.isoqp-chip img{max-height:100%; width:auto; object-fit:contain; display:block}
.isoqp-tabs{display:flex; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px}
.isoqp-tabs button{font:500 12.5px/1 var(--body); color:var(--muted); background:none; border:0; padding:8px 14px;
  border-radius:999px; cursor:pointer}
.isoqp-tabs button[aria-selected="true"]{background:var(--accent-weak); color:var(--accent)}
@media (max-width:560px){ .isoqp-chip{height:40px; padding:5px 8px} }

/* ---------- rail ---------- */
.isoqp-railwrap{overflow-x:auto; border-bottom:1px solid var(--line); background:var(--surface)}
.isoqp-rail{max-width:var(--maxw); margin:0 auto; padding:10px 16px; display:flex; gap:6px; min-width:max-content}
.isoqp-rail button{display:flex; align-items:center; gap:7px; background:none; border:0; padding:7px 10px; border-radius:8px;
  cursor:pointer; color:var(--muted); font:500 12.5px/1 var(--body); white-space:nowrap}
.isoqp-rail button .n{width:20px; height:20px; flex:none; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; font-size:11px; font-variant-numeric:tabular-nums}
.isoqp-rail button[data-state="now"]{color:var(--ink); background:var(--accent-weak)}
.isoqp-rail button[data-state="now"] .n{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.isoqp-rail button[data-state="done"] .n{background:var(--accent-weak); color:var(--accent); border-color:var(--accent-line)}

/* ---------- page ---------- */
.isoqp-main{max-width:var(--maxw); margin:0 auto; padding:22px 16px 120px}
.isoqp-root.isoqp-nobar .isoqp-main{padding-bottom:48px}

.isoqp-hero{display:flex; flex-direction:column; gap:14px; padding:6px 0 4px}
.isoqp-eyebrow{font-size:11.5px; letter-spacing:.11em; font-weight:600; color:var(--gb); text-transform:uppercase}
.isoqp-hero h1{font-size:clamp(25px,5.2vw,38px); font-weight:600; letter-spacing:-.015em; line-height:1.25}
.isoqp-lead{color:var(--ink-2); font-size:15.5px; max-width:60ch}
.isoqp-ctarow{display:flex; gap:10px; flex-wrap:wrap; margin-top:2px}
.isoqp-facts{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.isoqp-fact{background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:6px 13px;
  font-size:12.5px; color:var(--muted)}

.isoqp-sec{margin-top:36px; display:flex; flex-direction:column; gap:4px}
.isoqp-sec > h2{font-size:21px; font-weight:600}
.isoqp-sub{color:var(--muted); font-size:13.5px; max-width:64ch}

.isoqp-badge{display:inline-block; font-family:var(--dsp); font-weight:700; font-size:12px; color:var(--c,var(--accent));
  border:1.5px solid var(--c,var(--accent)); background:var(--surface-2); border-radius:999px; padding:2px 9px;
  white-space:nowrap; font-variant-numeric:tabular-nums}

.isoqp-stdgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px; margin-top:12px}
.isoqp-stdcard{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 13px;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.isoqp-stdcard .ar{font-size:13.5px; font-weight:600; line-height:1.4}
.isoqp-stdcard .en{font-size:11px; color:var(--muted); direction:ltr; text-align:right}

.isoqp-svcgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:10px; margin-top:12px}
.isoqp-svc{background:var(--surface-2); border:1px solid var(--line-2); border-radius:10px; padding:13px 14px}
.isoqp-svc b{display:block; font-size:13.5px; font-weight:600; margin-bottom:3px}
.isoqp-svc span{font-size:12px; color:var(--muted); line-height:1.55}

.isoqp-steps{margin-top:12px; display:grid; gap:9px}
.isoqp-steps li{display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px}
.isoqp-steps .k{flex:none; width:26px; height:26px; border-radius:50%; background:var(--accent-weak); color:var(--accent);
  display:grid; place-items:center; font-family:var(--dsp); font-weight:700; font-size:12.5px; font-variant-numeric:tabular-nums}
.isoqp-steps b{display:block; font-size:13.5px; font-weight:600}
.isoqp-steps .d{font-size:12.5px; color:var(--muted); line-height:1.55}

.isoqp-partners{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px}
@media (max-width:640px){ .isoqp-partners{grid-template-columns:1fr} }
.isoqp-partner{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; display:flex;
  flex-direction:column; align-items:center; gap:11px; text-align:center}
.isoqp-partner .plate{background:#fff; border:1px solid var(--line-2); border-radius:10px; height:104px; width:100%;
  display:flex; align-items:center; justify-content:center; padding:12px}
.isoqp-partner .plate img{max-height:100%; max-width:100%; object-fit:contain}
.isoqp-partner b{font-size:14px; font-weight:600; line-height:1.35}
.isoqp-partner span{font-size:11.5px; color:var(--muted); direction:ltr; line-height:1.4}

.isoqp-faq{margin-top:12px; display:grid; gap:8px}
.isoqp-faq details{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px}
.isoqp-faq summary{cursor:pointer; font-weight:600; font-size:13.5px; list-style:none; display:flex;
  justify-content:space-between; gap:10px; align-items:center}
.isoqp-faq summary::-webkit-details-marker{display:none}
.isoqp-faq summary::after{content:"+"; color:var(--accent); font-weight:700; font-size:16px; line-height:1}
.isoqp-faq details[open] summary::after{content:"\2212"}
.isoqp-faq details p{margin-top:9px; font-size:13px; color:var(--ink-2); line-height:1.7}

.isoqp-cta{margin-top:36px; background:var(--accent); color:var(--accent-ink); border-radius:14px; padding:22px 24px;
  display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.isoqp-cta h2{font-size:20px; font-weight:600; color:var(--accent-ink)}
.isoqp-cta p{font-size:13px; margin-top:5px; opacity:.88; max-width:52ch}
.isoqp-cta .isoqp-btn{background:var(--surface); color:var(--accent); border-color:var(--surface)}

.isoqp-foot{margin-top:28px; padding-top:16px; border-top:1px solid var(--line); display:flex; gap:10px; flex-wrap:wrap;
  justify-content:space-between; font-size:12px; color:var(--muted)}

/* ---------- form ---------- */
.isoqp-lede{margin-bottom:18px}
.isoqp-lede h1{font-size:clamp(22px,4.4vw,30px); font-weight:600}
.isoqp-lede p{color:var(--muted); margin-top:8px; max-width:62ch; font-size:14px}
.isoqp-note{margin-top:14px; display:flex; gap:10px; align-items:flex-start; background:var(--seal-weak);
  border:1px solid rgba(138,94,26,.28); border-radius:10px; padding:11px 13px; font-size:12.5px; color:var(--ink-2)}
.isoqp-note b{color:var(--seal); font-family:var(--dsp); font-weight:600}

.isoqp-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  padding:20px; display:flex; flex-direction:column; gap:18px}
.isoqp-stephead{display:flex; flex-direction:column; gap:4px; padding-bottom:14px; border-bottom:1px solid var(--line-2)}
.isoqp-stephead .eyebrow{font-size:11px; letter-spacing:.09em; color:var(--accent); font-weight:600}
.isoqp-stephead h2{font-size:19px; font-weight:600}
.isoqp-stephead p{color:var(--muted); font-size:13px}

.isoqp-grid{display:grid; gap:14px 16px; grid-template-columns:repeat(2,minmax(0,1fr))}
.isoqp-span2{grid-column:1/-1}
@media (max-width:640px){ .isoqp-grid{grid-template-columns:1fr} .isoqp-span2{grid-column:auto} }

.isoqp-f{display:flex; flex-direction:column; gap:6px; min-width:0}
.isoqp-f > label,.isoqp-gl{font-size:12.5px; font-weight:600; color:var(--ink-2)}
.isoqp-hint{font-size:11.5px; color:var(--muted)}
.isoqp-req::after{content:" *"; color:var(--crit); font-weight:700}
.isoqp-root input[type=text],.isoqp-root input[type=email],.isoqp-root input[type=tel],.isoqp-root input[type=url],
.isoqp-root input[type=number],.isoqp-root input[type=date],.isoqp-root select,.isoqp-root textarea{
  width:100%; font:400 14px/1.5 var(--body); color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line); border-radius:9px; padding:10px 12px; margin:0;
  transition:border-color .15s, box-shadow .15s; box-shadow:none; max-width:100%}
.isoqp-root textarea{resize:vertical; min-height:84px}
.isoqp-root input:focus,.isoqp-root select:focus,.isoqp-root textarea:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-weak)}
.isoqp-f.isoqp-bad input,.isoqp-f.isoqp-bad select,.isoqp-f.isoqp-bad textarea{border-color:var(--crit)}
.isoqp-fe{font-size:11.5px; color:var(--crit); font-weight:500}
.isoqp-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.isoqp-opts{display:grid; gap:8px; border:1px solid transparent; border-radius:9px}
.isoqp-opts.cols{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){ .isoqp-opts.cols{grid-template-columns:1fr} }
.isoqp-opt{display:flex; gap:9px; align-items:flex-start; background:var(--surface-2); border:1px solid var(--line);
  border-radius:9px; padding:10px 12px; cursor:pointer; transition:border-color .15s, background .15s}
.isoqp-opt:hover{border-color:var(--accent-line)}
.isoqp-opt input{margin:2px 0 0; accent-color:var(--accent); width:16px; height:16px; flex:none}
.isoqp-opt .t{font-size:13.5px; font-weight:500; line-height:1.4}
.isoqp-opt .d{font-size:11.5px; color:var(--muted); display:block; font-weight:400}
.isoqp-opt.checked{border-color:var(--accent); background:var(--accent-weak)}
.isoqp-opt.row{padding:8px 11px}
.isoqp-opts.inline{display:flex; flex-wrap:wrap; gap:8px}
.isoqp-opts.inline .isoqp-opt{flex:1 1 150px}
.isoqp-opts.std .isoqp-opt{align-items:center}
.isoqp-opts.std .t{font-size:13px}
.isoqp-opts.std .isoqp-badge{margin-left:6px}
.isoqp-picked{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12.5px;
  color:var(--muted); background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:8px 12px}
.isoqp-picked.on{background:var(--accent-weak); border-color:var(--accent-line); color:var(--accent); font-weight:600}
.isoqp-link{background:none; border:0; padding:0; cursor:pointer; font:600 12.5px/1 var(--body); color:var(--muted);
  text-decoration:underline; text-underline-offset:3px}

.isoqp-rev section{border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:10px}
.isoqp-rev h3{background:var(--surface-2); padding:9px 13px; font-size:13px; font-weight:600; border-bottom:1px solid var(--line)}
.isoqp-rev dl{margin:0; display:grid; grid-template-columns:minmax(120px,34%) 1fr}
.isoqp-rev dt{padding:8px 13px; font-size:12.5px; color:var(--muted); border-bottom:1px solid var(--line-2)}
.isoqp-rev dd{padding:8px 13px; margin:0; font-size:13px; border-bottom:1px solid var(--line-2)}
@media (max-width:520px){ .isoqp-rev dl{grid-template-columns:1fr} .isoqp-rev dt{padding-bottom:0; border-bottom:0} }

.isoqp-bar{position:fixed; inset-inline:0; bottom:0; z-index:40; background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px))}
.isoqp-bar-in{max-width:var(--maxw); margin:0 auto; padding:0 16px; display:flex; gap:10px; align-items:center;
  justify-content:space-between}
.isoqp-meter{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.isoqp-btn{font:600 13.5px/1 var(--body); border-radius:9px; padding:11px 18px; cursor:pointer; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); transition:filter .15s, border-color .15s; display:inline-block}
.isoqp-btn:hover{border-color:var(--accent-line)}
.isoqp-btn.pri{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.isoqp-btn.pri:hover{filter:brightness(1.08)}
.isoqp-btn:disabled{opacity:.45; cursor:not-allowed}

.isoqp-done{text-align:center; padding:34px 18px; display:flex; flex-direction:column; align-items:center; gap:12px}
.isoqp-seal{width:64px; height:64px; border-radius:50%; border:2px solid var(--accent); color:var(--accent);
  display:grid; place-items:center; font-family:var(--dsp); font-weight:700; font-size:22px}
.isoqp-refno{font-family:var(--dsp); font-weight:700; font-size:22px; letter-spacing:.06em; background:var(--accent-weak);
  color:var(--accent); padding:8px 16px; border-radius:9px; font-variant-numeric:tabular-nums}
.isoqp-done p{color:var(--muted); font-size:13.5px; max-width:52ch}
.isoqp-done .row{display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-top:6px}

.isoqp-toast{position:fixed; inset-inline:16px; bottom:calc(76px + env(safe-area-inset-bottom,0px)); z-index:60;
  max-width:420px; margin-inline:auto; background:var(--ink); color:#fff; padding:11px 15px; border-radius:10px;
  font-size:13px; text-align:center; box-shadow:var(--shadow)}
.isoqp-hidden{display:none !important}

@media (prefers-reduced-motion:no-preference){
  .isoqp-card,.isoqp-done{animation:isoqp-rise .28s ease-out}
  @keyframes isoqp-rise{from{opacity:.4; transform:translateY(5px)}to{opacity:1; transform:none}}
}