@font-face {
  font-family: 'Vazirmatn';
  font-weight: 400;
  font-display: swap;
  src: url('/site/assets/fonts/vazirmatn-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Vazirmatn';
  font-weight: 400;
  font-display: swap;
  src: url('/site/assets/fonts/vazirmatn-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F;
}

:root {
  color-scheme: dark;
  --ground: #0b1216;
  --panel: #142127;
  --rule: #34464e;
  --ink: #edf3f5;
  --muted: #a5b7bf;
  --action: #0b6276;
  --action-hover: #117a91;
  --ok: #34d399;
  --warn: #f5b70a;
  --fail: #ff6b7a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font: 13px/1.45 'Vazirmatn', Tahoma, ui-sans-serif, system-ui, sans-serif;
}

.pg { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; min-width: 0; }
.pg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; min-width: 0; overflow-x: auto; }
.pg-back { color: var(--ink); text-decoration: none; }
.pg-back:hover { text-decoration: underline; }
.pg-lang {
  background: transparent; color: var(--ink); border: 1px solid var(--rule);
  border-radius: 999px; padding: 4px 14px; cursor: pointer; font: inherit;
}
h1 { font-size: 17px; margin: 0 0 4px; }
.pg-lead { color: var(--muted); margin: 0 0 16px; font-size: 12.5px; }

.pg-card {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 10px;
  padding: 16px; margin-bottom: 16px; min-width: 0; overflow: hidden;
}
.pg-card label { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 6px; }
.pg-card select {
  width: 100%; background: var(--ground); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 8px; padding: 8px 10px; font: inherit;
}
.pg-hint { color: var(--muted); font-size: 12.5px; min-height: 1.5em; margin: 8px 0 12px; }
.pg-hint a { color: #ff9bad; }
.pg-run {
  background: var(--action); color: #fff; border: 0; border-radius: 999px;
  padding: 8px 22px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.pg-run:hover:not(:disabled) { background: var(--action-hover); }
.pg-run:disabled { opacity: .45; cursor: not-allowed; }

.pg-widget { min-height: 8px; margin-bottom: 8px; }
.pg { max-width:1200px; }
.pg-workspace { display:grid;grid-template-columns:minmax(235px, .65fr) minmax(0,1.35fr);gap:20px;align-items:start; }
.pg-workspace .pg-card { margin:0; }
.pg-controls { grid-row:span 2;display:grid;gap:14px; }
.pg-controls label,.pg-controls .pg-hint { margin:0; }
.pg-controls .pg-run { width:100%; }
.pg-card h2 { font-size:16px;margin:0;font-weight:600; }
.pg-stage-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px; }
.pg-secondary,.pg-preview-tools button { border:1px solid var(--rule);background:transparent;color:var(--ink);font:inherit;padding:9px 14px;min-height:44px;border-radius:8px;cursor:pointer; }
.pg-secondary:disabled { opacity:.45;cursor:not-allowed; }
.pg-preview-tools { display:flex;gap:8px;margin-bottom:24px; }
.pg-preview-tools [aria-pressed=true] { border-color:var(--muted);background:var(--ground); }
.pg-widget { margin-inline:auto;max-width:100%;min-height:132px; }
.pg-widget[data-width=phone] { width:320px; }
.pg-empty { color:var(--muted);padding-block:30px;text-align:center;line-height:2; }
.pg-config { margin:0;display:grid;gap:10px; }
.pg-config>div { display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;border-bottom:1px solid var(--rule);padding-bottom:10px; }
.pg-config dt { color:var(--muted); }
.pg-config dd { margin:0;overflow-wrap:anywhere;unicode-bidi:isolate; }
.pg-settings { color:var(--ink);text-underline-offset:5px; }
.pg-policy-note { color:var(--muted);line-height:1.9;font-size:12px;margin:0; }
.pg-result { min-height:24px;line-height:1.9;overflow-wrap:anywhere;margin:16px 0 0; }
body[data-result=verified] .pg-result { color:var(--ok); }
body[data-result=failed] .pg-result { color:var(--fail); }
.pg-expiry { color:var(--muted);font-variant-numeric:tabular-nums; }
.pg-step { position:relative; }
.pg-wait::before { box-shadow:0 0 0 4px color-mix(in srgb,var(--warn),transparent 85%); }
.pg-step { animation:pg-enter 160ms ease-out; }
button { transition:background-color 160ms ease,transform 120ms ease; }
button:active:not(:disabled) { transform:translateY(1px); }
button:focus-visible,select:focus-visible,a:focus-visible { outline:2px solid var(--ink);outline-offset:4px; }
[hidden] { display:none!important; }
@keyframes pg-enter { from {opacity:0;transform:translateY(4px)} to {opacity:1;transform:none} }
@media(max-width:760px) { .pg-workspace {grid-template-columns:minmax(0,1fr)} .pg-controls {grid-row:auto} .pg-card {padding:18px!important} .pg {padding-inline:12px} }
@media(prefers-reduced-motion:reduce) { .pg-step {animation:none} button {transition:none} }
.pg-widget iframe { width: 304px; max-width: 100%; height: 88px; border: 0; background: transparent; }
.pg-steps { list-style: none; margin: 0; padding: 0; }
.pg-step {
  display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; justify-content: space-between;
  padding: 8px 0; border-top: 1px solid var(--rule);
}
.pg-step:first-child { border-top: 0; }
.pg-step::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; align-self: center; }
.pg-step span { flex: 1 1 12em; min-width: 0; unicode-bidi: isolate; }
.pg-step code { flex: 1 1 8em; min-width: 0; font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); unicode-bidi: isolate; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-ok::before { background: var(--ok); }
.pg-wait::before { background: var(--warn); }
.pg-fail::before { background: var(--fail); }
.pg-fail code { color: var(--fail); }
.dc-gc { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; }
.dc-mosparo-form { display: grid; gap: 8px; margin-bottom: 12px; font-family: 'Vazirmatn', Tahoma, sans-serif; }
.dc-mosparo-form label { font-size: 13px; color: var(--muted); }
.dc-mosparo-form input, .dc-mosparo-form textarea {
  width: 100%; border: 1px solid var(--rule); border-radius: 8px; background: #fff; color: #111;
  font: 13px/20px 'Vazirmatn', Tahoma, sans-serif; padding: 8px 10px;
}
.mosparo__container,
.mosparo__container .mosparo__label,
.mosparo__container .mosparo__error-message,
.mosparo__container .mosparo__loader-text {
  font-family: 'Vazirmatn', Tahoma, sans-serif;
}
.mosparo__container {
  --mosparo-font-size: 12.5px;
  --mosparo-line-height: 18px;
  --mosparo-show-logo: block;
  --mosparo-container-min-width: 0px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.mosparo__container .mosparo__label,
.mosparo__container .mosparo__error-message,
.mosparo__container .mosparo__loader-text {
  font-size: 12.5px;
  line-height: 18px;
}
.mosparo__container:not(.mosparo__checked):not(.mosparo__invalid):not(.mosparo__loading):after {
  display: var(--mosparo-show-logo, block);
  background: var(--mosparo-text-color, rgb(0, 0, 0));
  -webkit-mask: url(/widget/vendor/mosparo-logo.svg) no-repeat center;
  mask: url(/widget/vendor/mosparo-logo.svg) no-repeat center;
}
@media (prefers-reduced-motion: reduce) {
  .mosparo__container { --mosparo-ping-animation-name: none; }
  .mosparo__container.mosparo__loading .mosparo__checkbox_column .mosparo__checkbox:after { animation: none; }
}
.dc-mosparo-form textarea { min-height: 72px; resize: vertical; }

/* Same product family, with a quiet operational reading surface */
.pg { max-width:1200px; padding-top:30px; }
.pg-head { overflow:visible; flex-wrap:wrap; padding-bottom:20px; border-bottom:1px solid var(--rule); margin-bottom:28px; }
.pg-back,.pg-lang { min-height:44px; display:inline-flex; align-items:center; }
.pg-lang { border-radius:8px; }
h1 { font-size:clamp(22px,3.4vw,28px); line-height:1.7; margin-bottom:12px; }
.pg-lead { font-size:14px; line-height:2; margin-bottom:25px; }
.pg-card { border-radius:12px; padding:24px; }
.pg-card select,.pg-run { min-height:44px; border-radius:8px; }
.pg-card label,.pg-hint,.pg-step { font-size:13px; line-height:1.9; }
.pg-run { padding-inline:24px; }
.pg-guides { display:flex; gap:20px; flex-wrap:wrap; margin:0 0 25px; }
.pg-guides a { color:var(--ink); min-height:44px; display:inline-flex; align-items:center; text-underline-offset:5px; }
:focus-visible { outline:2px solid var(--fail); outline-offset:4px; }
@media(max-width:480px) { .pg-card { padding:18px; } .pg { padding-top:20px; } }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { .pg-run,.pg-lang { transition:background-color 150ms ease,border-color 150ms ease; } }

:root[data-theme=light]{color-scheme:light;--ground:#f2f6f7;--panel:#fff;--rule:#b4c3ca;--ink:#192c35;--muted:#4d6570;--action:#0b6276;--action-hover:#084c5b;--ok:#176445;--warn:#79530d;--fail:#a02043}
:root[data-theme=light] .pg-back,:root[data-theme=light] .pg-hint a{color:var(--action)}
.pg-theme-toggle{display:inline-flex;align-items:center;justify-content:space-around;gap:8px;width:64px;height:44px;padding:8px;border:1px solid var(--rule);border-radius:10px;background:var(--panel);color:var(--muted);cursor:pointer}
.pg-theme-toggle .i{width:20px;height:20px;fill:currentColor}
.pg-theme-toggle[aria-checked=true]{border-color:var(--action);color:var(--action)}

/* Keep the official Cap component and branding, using the host product theme */
.pg-widget cap-widget {
  display: block;
  max-width: 100%;
  --cap-background: var(--ground);
  --cap-color: var(--ink);
  --cap-border-color: var(--rule);
  --cap-border-radius: 10px;
  --cap-checkbox-background: var(--panel);
  --cap-checkbox-border: 1px solid var(--muted);
  --cap-spinner-color: var(--ok);
  --cap-spinner-background-color: var(--rule);
  --cap-widget-width: min(230px, calc(100vw - 130px));
}

@media(max-width:640px) {input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important;} }

/* Shared managed-service theme; component sizing follows its actual container */
:root,:root[data-theme=light]{--ground:var(--dc-ground);--panel:var(--dc-surface);--rule:var(--dc-rule-strong);--ink:var(--dc-ink);--muted:var(--dc-muted);--action:var(--dc-action);--action-hover:var(--dc-action-hover);--ok:var(--dc-ok);--warn:var(--dc-warn);--fail:var(--dc-fail)}
.pg-run{color:var(--dc-action-ink)}
.pg-challenge{overflow:visible;min-width:0}
.pg-widget{container-type:inline-size;max-inline-size:100%;min-inline-size:0}
.pg-widget>*,.pg-widget form{max-inline-size:100%;min-inline-size:0}
.pg-widget cap-widget{width:min(304px,100%);max-width:100%;--cap-widget-width:100%}
.pg-preview-tools{display:flex;flex-wrap:wrap;gap:8px;padding:0;border:0;min-width:0}
.pg-preview-tools legend{font-size:12px;line-height:1.9;margin-bottom:10px;color:var(--muted)}
.pg-preview-tools button{min-width:44px;padding-inline:12px;font-variant-numeric:tabular-nums}
.pg-share{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-block:16px 24px}
.pg-share label{flex-basis:100%;margin:0}.pg-share input{flex:1 1 180px;min-width:0;max-width:100%;min-height:44px;border:1px solid var(--rule);border-radius:8px;background:var(--ground);color:var(--ink);padding:8px 10px;font:12px/1.6 ui-monospace,monospace}
#pg-copy-status{flex-basis:100%;font-size:12px;color:var(--muted)}
.pg-skip{position:fixed;top:8px;inset-inline-start:12px;z-index:100;padding:10px 16px;border-radius:8px;background:var(--ink);color:var(--ground);transform:translateY(-200%)}.pg-skip:focus{transform:none}
:is(a,button,input,select,textarea):focus-visible{outline:2px solid var(--dc-focus);outline-offset:4px}
#pg-main:focus{outline:none}
.theme-switching *,.theme-switching *::before,.theme-switching *::after{transition:none!important}
