/* ============================================================================
   معالج الإعداد الأولي — تصميم store-setup-settings.html (لوحة بعمودين):
   شريط أقسام لاصق بحالة إنجاز وتقدّم + مسرح ألواح (رأس/جسم/قدم).
   كل الأصناف .ob-* محصورة بالطبقة #onboardingOverlay، والألوان/الظلال/الأنصاف
   من توكنز Modernize (base.css/dark.css) فيتبع الوضعَين تلقائياً.
   ========================================================================== */

#onboardingOverlay.ob-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500; /* فوق كل السطوح — المعالج استيلاء كامل */
    display: flex;
    flex-direction: column;
    background: var(--bg-main);
    color: var(--text-main);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: obFade 0.25s var(--ease, ease);
    font-family: var(--app-font-family);
}
@keyframes obFade { from { opacity: 0; } to { opacity: 1; } }
#onboardingOverlay .su-num { font-variant-numeric: tabular-nums; }

/* حواف دائرية داخل الطبقة وحدها: الحقول بِلّي كاملة (999px) كحقول البحث
   في البرنامج (ot-search)، والبطاقات (pane) 14px والألواح الكبيرة (xl)
   20px — بلا لمس توكنز التطبيق خارج المعالج. */
#onboardingOverlay {
    --pane-radius: 14px;
    --radius-xl: 20px;
}

/* ===== الترويسة ===== */
#onboardingOverlay .ob-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px clamp(14px, 3vw, 30px);
    background: color-mix(in srgb, var(--surface-solid) 86%, transparent);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-block-end: 1px solid var(--border-main);
}
#onboardingOverlay .ob-brand { display: flex; align-items: center; gap: 10px; min-inline-size: 0; }
#onboardingOverlay .ob-brand-mark {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 12px;
    flex: none;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 70%, transparent);
    overflow: hidden;
}
#onboardingOverlay .ob-brand-mark img { inline-size: 100%; block-size: 100%; object-fit: cover; }
#onboardingOverlay .ob-brand-name { font-size: 15px; font-weight: 800; color: var(--text-title, var(--text-main)); line-height: 1.2; }
#onboardingOverlay .ob-brand-sub { font-size: 11px; color: var(--text-secondary); font-weight: 600; }
#onboardingOverlay .ob-topbar-mid { flex: 1; display: flex; justify-content: center; min-inline-size: 0; }
#onboardingOverlay .ob-topbar-meter { display: none; align-items: center; gap: 10px; max-inline-size: 300px; inline-size: 100%; }
#onboardingOverlay .ob-topbar-meter .ob-meter-bar { flex: 1; }
#onboardingOverlay .ob-meter-count { font-size: 11px; font-weight: 700; color: var(--text-secondary); }
#onboardingOverlay .ob-topbar-actions { display: flex; align-items: center; gap: 8px; }

#onboardingOverlay .ob-theme-toggle,
#onboardingOverlay .ob-close-btn {
    inline-size: 36px;
    block-size: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid var(--border-main);
    cursor: pointer;
    background: var(--surface-solid);
    color: var(--text-secondary);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
#onboardingOverlay .ob-theme-toggle:hover,
#onboardingOverlay .ob-close-btn:hover {
    background: var(--surface-hover);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border-main));
}
body.dark-mode #onboardingOverlay .ob-theme-ico-light { display: none; }
#onboardingOverlay .ob-theme-ico-dark { display: none; }
body.dark-mode #onboardingOverlay .ob-theme-ico-dark { display: block; }

/* ===== الأزرار ===== */
#onboardingOverlay .ob-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}
#onboardingOverlay .ob-btn svg { flex: none; }
#onboardingOverlay .ob-btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 2px rgb(145 158 171 / 18%), 0 8px 18px -8px color-mix(in srgb, var(--primary) 70%, transparent);
}
#onboardingOverlay .ob-btn-primary:hover { background: var(--primary-hover); }
#onboardingOverlay .ob-btn-secondary { background: var(--surface-solid); color: var(--text-title, var(--text-main)); border-color: var(--border-main); box-shadow: var(--shadow-sm, none); }
#onboardingOverlay .ob-btn-secondary:hover { background: var(--surface-hover); border-color: color-mix(in srgb, var(--primary) 30%, var(--border-main)); }
#onboardingOverlay .ob-btn-ghost { background: transparent; color: var(--text-secondary); }
#onboardingOverlay .ob-btn-ghost:hover { background: var(--surface-hover); color: var(--text-title, var(--text-main)); }
#onboardingOverlay .ob-btn-sm { padding: 7px 14px; font-size: 12px; }
#onboardingOverlay .ob-btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* ===== الهيكل — عمودان ===== */
#onboardingOverlay .ob-shell {
    display: grid;
    grid-template-columns: 296px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    max-inline-size: 1320px;
    inline-size: 100%;
    margin-inline: auto;
    padding: 22px clamp(14px, 3vw, 30px) 64px;
}

/* ---- شريط الأقسام ---- */
#onboardingOverlay .ob-rail {
    position: sticky;
    inset-block-start: 78px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#onboardingOverlay .ob-rail-card {
    background: var(--surface-solid);
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-md, none);
    padding: 18px;
}
#onboardingOverlay .ob-rail-hi { font-size: 17px; font-weight: 800; color: var(--text-title, var(--text-main)); }
#onboardingOverlay .ob-rail-sub { font-size: 12px; color: var(--text-secondary); margin-block-start: 4px; }

#onboardingOverlay .ob-progress { margin-block-start: 16px; }
#onboardingOverlay .ob-progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-block-end: 7px; }
#onboardingOverlay .ob-progress-top span { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-secondary); }
#onboardingOverlay .ob-progress-top b { font-size: 13px; color: var(--primary); }
#onboardingOverlay .ob-meter-bar { block-size: 6px; border-radius: 999px; background: var(--border-main); overflow: hidden; }
#onboardingOverlay .ob-meter-bar i {
    display: block;
    block-size: 100%;
    inline-size: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: inline-size 420ms var(--ease, ease);
}
#onboardingOverlay .ob-progress-note { margin-block-start: 8px; }

#onboardingOverlay .ob-tabs { display: flex; flex-direction: column; gap: 4px; margin-block-start: 8px; }
#onboardingOverlay .ob-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    inline-size: 100%;
    text-align: start;
    padding: 9px 10px;
    border-radius: var(--pane-radius, 7px);
    border: 0;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    transition: background 0.2s, color 0.2s;
}
#onboardingOverlay .ob-tab:hover { background: var(--surface-hover); }
#onboardingOverlay .ob-tab-ico {
    inline-size: 32px;
    block-size: 32px;
    flex: none;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--light-primary, var(--surface-hover));
    color: var(--primary);
    transition: background 0.2s, color 0.2s;
}
#onboardingOverlay .ob-tab-txt { min-inline-size: 0; flex: 1; display: block; }
#onboardingOverlay .ob-tab-txt b { display: block; font-size: 13px; font-weight: 700; color: var(--text-title, var(--text-main)); line-height: 1.35; }
#onboardingOverlay .ob-tab-txt i { display: block; font-style: normal; font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#onboardingOverlay .ob-tab-state { inline-size: 18px; block-size: 18px; flex: none; display: grid; place-items: center; }
#onboardingOverlay .ob-tab-state .ob-dot { inline-size: 7px; block-size: 7px; border-radius: 999px; border: 1.5px solid var(--border-main); }
#onboardingOverlay .ob-tab-state .ob-tick { display: none; color: var(--mint, #1FCBB0); }
#onboardingOverlay .ob-tab.is-done .ob-tab-state .ob-tick { display: block; }
#onboardingOverlay .ob-tab.is-done .ob-tab-state .ob-dot { display: none; }
#onboardingOverlay .ob-tab.is-active {
    background: var(--primary);
    box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--primary) 80%, transparent);
}
#onboardingOverlay .ob-tab.is-active .ob-tab-txt b { color: #fff; }
#onboardingOverlay .ob-tab.is-active .ob-tab-txt i { color: #fff; opacity: 0.78; }
#onboardingOverlay .ob-tab.is-active .ob-tab-ico { background: rgb(255 255 255 / 18%); color: #fff; }
#onboardingOverlay .ob-tab.is-active .ob-tab-state .ob-tick { color: #fff; }
#onboardingOverlay .ob-tab.is-active .ob-tab-state .ob-dot { border-color: rgb(255 255 255 / 55%); }
#onboardingOverlay .ob-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

#onboardingOverlay .ob-rail-help {
    background: var(--light-primary, var(--surface-hover));
    border-radius: var(--radius-xl, 16px);
    padding: 16px 18px;
    display: flex;
    gap: 11px;
    align-items: flex-start;
}
#onboardingOverlay .ob-rail-help svg { color: var(--primary); flex: none; margin-block-start: 2px; }
#onboardingOverlay .ob-rail-help b { display: block; font-size: 12.5px; color: var(--text-title, var(--text-main)); }
#onboardingOverlay .ob-rail-help p { font-size: 11.5px; color: var(--text-secondary); margin-block-start: 3px; }

/* ---- مسرح الألواح ---- */
#onboardingOverlay .ob-main { min-inline-size: 0; }
#onboardingOverlay .ob-stage {
    background: var(--surface-solid);
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-md, none);
    overflow: hidden;
}
#onboardingOverlay .ob-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(18px, 2.4vw, 26px) 24px 18px;
    border-block-end: 1px solid var(--border-main);
}
#onboardingOverlay .ob-panel-ico {
    inline-size: 44px;
    block-size: 44px;
    flex: none;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--light-primary, var(--surface-hover));
    color: var(--primary);
}
#onboardingOverlay .ob-panel-head h2 { font-size: 20px; line-height: 1.3; margin: 0; color: var(--text-title, var(--text-main)); }
#onboardingOverlay .ob-panel-head p { font-size: 13px; color: var(--text-secondary); margin-block-start: 5px; max-inline-size: 68ch; }
#onboardingOverlay .ob-panel-head-txt { flex: 1; min-inline-size: 0; }
#onboardingOverlay .ob-panel-body { padding: 0 24px; }
#onboardingOverlay .ob-panel-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-block-start: 1px solid var(--border-main);
    background: color-mix(in srgb, var(--bg-main) 60%, var(--surface-solid));
}
#onboardingOverlay .ob-foot-spacer { flex: 1; }
#onboardingOverlay .ob-save-note { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); font-weight: 600; }
#onboardingOverlay .ob-save-dot { inline-size: 7px; block-size: 7px; border-radius: 999px; background: var(--mint, #1FCBB0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint, #1FCBB0) 22%, transparent); }

#onboardingOverlay .ob-tag {
    flex: none;
    align-self: flex-start;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--surface-hover);
    color: var(--text-secondary);
}
#onboardingOverlay .ob-tag-req { background: color-mix(in srgb, var(--primary) 12%, var(--surface-solid)); color: var(--primary); }

/* ---- كتلة داخل اللوح ---- */
#onboardingOverlay .ob-block { padding-block: 22px; }
#onboardingOverlay .ob-block + .ob-block { border-block-start: 1px solid var(--border-main); }
#onboardingOverlay .ob-block-head { display: flex; align-items: flex-start; gap: 12px; margin-block-end: 14px; }
#onboardingOverlay .ob-block-head h3 { font-size: 15px; margin: 0; color: var(--text-title, var(--text-main)); }
#onboardingOverlay .ob-block-head p { font-size: 12.5px; color: var(--text-secondary); margin-block-start: 3px; max-inline-size: 66ch; }
#onboardingOverlay .ob-block-head-txt { flex: 1; min-inline-size: 0; }

/* ===== الحقول ===== */
#onboardingOverlay .ob-field { display: block; margin-block-end: 14px; }
#onboardingOverlay .ob-field:last-child { margin-block-end: 0; }
#onboardingOverlay .ob-field-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-title, var(--text-main)); margin-block-end: 7px; }
#onboardingOverlay .ob-req { color: var(--danger); }
/* الحقول — بِلّي كاملة كحقول البحث في البرنامج (ot-search): نصف قطر 999px
   مع حشوة أفقية أوسع قليلاً كي لا يلتصق النص بالقوس. */
#onboardingOverlay .ob-input {
    inline-size: 100%;
    padding: 11px 16px;
    border-radius: 999px;
    border: 1px solid var(--input-border, var(--border-main));
    background: var(--surface-main, var(--surface-solid));
    color: var(--text-title, var(--text-main));
    font: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
#onboardingOverlay .ob-input:hover:not(:disabled) { border-color: color-mix(in srgb, var(--primary) 35%, var(--border-main)); }
#onboardingOverlay .ob-input:focus { outline: 0; border-color: var(--primary); box-shadow: var(--input-shadow-focus, 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent)); }
#onboardingOverlay .ob-is-ltr { direction: ltr; text-align: start; unicode-bidi: isolate; }
#onboardingOverlay .ob-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
#onboardingOverlay .ob-help { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; color: var(--text-secondary); margin-block-start: 6px; }
#onboardingOverlay .ob-help-dot { color: var(--primary); }
#onboardingOverlay .ob-select-wrap { position: relative; }
#onboardingOverlay .ob-select-wrap svg { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; translate: 0 -50%; color: var(--text-muted); pointer-events: none; }
#onboardingOverlay select.ob-input { appearance: none; background-image: none; padding-inline-end: 34px; }
#onboardingOverlay .ob-field-suffix {
    padding-inline: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--surface-hover);
    display: grid;
    place-items: center;
    flex: none;
}

/* ===== الشعار ===== */
#onboardingOverlay .ob-logo-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
#onboardingOverlay .ob-logo-preview {
    inline-size: 92px;
    block-size: 92px;
    flex: none;
    border-radius: 18px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--primary) 80%, transparent);
}
#onboardingOverlay .ob-logo-preview img { inline-size: 100%; block-size: 100%; object-fit: contain; }
#onboardingOverlay .ob-logo-col { flex: 1; min-inline-size: 240px; }
#onboardingOverlay .ob-logo-drop {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px;
    cursor: pointer;
    text-align: start;
    border: 1.5px dashed color-mix(in srgb, var(--primary) 34%, var(--border-main));
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 4%, var(--surface-solid));
    color: var(--text-secondary);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
#onboardingOverlay .ob-logo-drop:hover,
#onboardingOverlay .ob-logo-drop:focus-visible {
    background: var(--light-primary, var(--surface-hover));
    border-color: var(--primary);
    color: var(--text-title, var(--text-main));
}
#onboardingOverlay .ob-logo-drop svg { color: var(--primary); flex: none; }
#onboardingOverlay .ob-logo-drop b { display: block; font-size: 13px; color: var(--text-title, var(--text-main)); }
#onboardingOverlay .ob-logo-drop span { font-size: 11.5px; color: var(--text-secondary); }
#onboardingOverlay .ob-logo-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: 12px; }

/* ===== الدول ===== */
#onboardingOverlay .ob-country-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block-end: 14px; }
#onboardingOverlay .ob-country-search-wrap { position: relative; flex: 1; min-inline-size: 200px; }
#onboardingOverlay .ob-country-search { padding-inline-start: 38px; }
#onboardingOverlay .ob-country-search-ico { position: absolute; inset-inline-start: 12px; inset-block-start: 50%; translate: 0 -50%; color: var(--text-muted); pointer-events: none; }
#onboardingOverlay .ob-country-count { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); }
#onboardingOverlay .ob-country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
    gap: 8px;
    max-block-size: 310px;
    overflow-y: auto;
    padding: 4px;
    margin: -4px;
}
#onboardingOverlay .ob-country-group {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 6px 8px 2px;
}
#onboardingOverlay .ob-country-card {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: start;
    padding: 9px 11px;
    border-radius: var(--pane-radius, 7px);
    cursor: pointer;
    border: 1px solid var(--border-main);
    background: var(--surface-solid);
    color: var(--text-main);
    font: inherit;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
#onboardingOverlay .ob-country-card:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border-main)); background: var(--surface-hover); }
#onboardingOverlay .ob-country-text { flex: 1; min-inline-size: 0; }
#onboardingOverlay .ob-country-name { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-title, var(--text-main)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#onboardingOverlay .ob-country-code { font-size: 10.5px; font-weight: 800; color: var(--text-muted); letter-spacing: 0.04em; }
#onboardingOverlay .ob-country-meta { display: block; font-size: 11px; color: var(--text-secondary); }
#onboardingOverlay .ob-country-check {
    inline-size: 18px;
    block-size: 18px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--border-main);
    color: transparent;
    transition: background 0.2s, color 0.2s;
}
#onboardingOverlay .ob-country-card.is-selected {
    border-color: var(--primary);
    background: var(--light-primary, var(--surface-hover));
    box-shadow: 0 0 0 1px var(--primary) inset;
}
#onboardingOverlay .ob-country-card.is-selected .ob-country-check { background: var(--primary); color: #fff; }
#onboardingOverlay .ob-country-toggle {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px;
    border-radius: var(--pane-radius, 7px);
    border: 1px dashed color-mix(in srgb, var(--primary) 34%, var(--border-main));
    background: transparent;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, border-color 0.2s;
}
#onboardingOverlay .ob-country-toggle:hover { background: var(--light-primary, var(--surface-hover)); border-color: var(--primary); }
#onboardingOverlay .ob-country-empty { grid-column: 1 / -1; padding: 26px; text-align: center; color: var(--text-secondary); font-size: 12.5px; margin: 0; }
#onboardingOverlay .ob-derived {
    padding: 13px 15px;
    border-radius: var(--pane-radius, 7px);
    background: var(--light-primary, var(--surface-hover));
    font-size: 12.5px;
    color: var(--text-secondary);
}
#onboardingOverlay .ob-derived b { color: var(--text-title, var(--text-main)); }
#onboardingOverlay .ob-derived:empty { display: none; }

/* ===== الأقاليم والمدن ===== */
#onboardingOverlay .ob-region-card {
    border: 1px solid var(--border-main);
    border-radius: var(--pane-radius, 7px);
    padding: 12px;
    margin-block-end: 10px;
    background: var(--surface-solid);
}
#onboardingOverlay .ob-region-card.is-new { border-style: dashed; }
#onboardingOverlay .ob-region-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#onboardingOverlay .ob-region-badge {
    inline-size: 26px;
    block-size: 26px;
    flex: none;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--light-primary, var(--surface-hover));
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
}
#onboardingOverlay .ob-region-name-input {
    flex: 1;
    min-inline-size: 150px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--input-border, var(--border-main));
    background: var(--surface-main, var(--surface-solid));
    color: var(--text-title, var(--text-main));
    font: inherit;
}
#onboardingOverlay .ob-region-name-input:focus { outline: 0; border-color: var(--primary); box-shadow: var(--input-shadow-focus, 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent)); }
#onboardingOverlay .ob-region-fee { display: flex; align-items: stretch; inline-size: 158px; flex: none; border: 1px solid var(--input-border, var(--border-main)); border-radius: 999px; overflow: hidden; background: var(--surface-main, var(--surface-solid)); }
#onboardingOverlay .ob-region-fee .ob-input { border: 0; box-shadow: none; flex: 1; min-inline-size: 0; inline-size: auto; }
#onboardingOverlay .ob-region-fee .ob-input:focus { box-shadow: none; }
#onboardingOverlay .ob-region-actions { display: flex; gap: 6px; }
#onboardingOverlay .ob-region-act {
    inline-size: 30px;
    block-size: 30px;
    border-radius: 999px;
    border: 1px solid var(--border-main);
    cursor: pointer;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--surface-solid);
    color: var(--text-muted);
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
#onboardingOverlay .ob-region-act:hover {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border-main));
    background: color-mix(in srgb, var(--danger) 9%, var(--surface-solid));
}

/* ---- المدن: رقائق + نموذج سطرٍ واحد (نمط store-setup-settings) ---- */
#onboardingOverlay .ob-cities {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-block-start: 10px;
    padding-block-start: 10px;
    border-block-start: 1px dashed var(--border-main);
}
#onboardingOverlay .ob-city {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 6px 5px 11px;
    border-radius: 999px;
    background: var(--surface-hover);
    border: 1px solid var(--border-main);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-title, var(--text-main));
}
#onboardingOverlay .ob-city b { font-variant-numeric: tabular-nums; color: var(--primary); font-size: 11.5px; }
#onboardingOverlay .ob-city button {
    inline-size: 20px;
    block-size: 20px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    flex: none;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--text-muted);
    position: relative;
}
#onboardingOverlay .ob-city button:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
#onboardingOverlay .ob-city button::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; inline-size: 32px; block-size: 32px; }
#onboardingOverlay .ob-city-add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px dashed color-mix(in srgb, var(--primary) 40%, var(--border-main));
    cursor: pointer;
    background: transparent;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
}
#onboardingOverlay .ob-city-add:hover { background: var(--light-primary, var(--surface-hover)); }
#onboardingOverlay .ob-city-form { display: none; gap: 6px; align-items: center; flex-wrap: wrap; }
#onboardingOverlay .ob-city-form.is-on { display: inline-flex; }
#onboardingOverlay .ob-city-form .ob-input { padding: 7px 12px; font-size: 12px; }
#onboardingOverlay .ob-city-name { inline-size: 150px; }
#onboardingOverlay .ob-city-fee { inline-size: 92px; }
#onboardingOverlay .ob-input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
#onboardingOverlay .ob-region-note { margin-block-start: 8px; font-size: 11px; color: var(--text-muted); }
/* حالة فراغ الأقاليم — بطاقة موجّهة (نمط su-empty في store-setup-settings) */
#onboardingOverlay .ob-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 20px;
    border-radius: var(--pane-radius, 7px);
    background: var(--surface-hover);
    border: 1px dashed var(--border-main);
    margin-block-end: 10px;
}
#onboardingOverlay .ob-empty-art {
    inline-size: 54px;
    block-size: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--light-primary, var(--surface-hover));
    color: var(--primary);
    margin-block-end: 12px;
}
#onboardingOverlay .ob-empty b { font-size: 14px; color: var(--text-title, var(--text-main)); }
#onboardingOverlay .ob-empty p { font-size: 12.5px; color: var(--text-secondary); margin-block-start: 5px; max-inline-size: 46ch; }
#onboardingOverlay .ob-add-region {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    inline-size: 100%;
    padding: 13px;
    border-radius: var(--pane-radius, 7px);
    cursor: pointer;
    border: 1.5px dashed color-mix(in srgb, var(--primary) 34%, var(--border-main));
    background: transparent;
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    transition: background 0.2s, border-color 0.2s;
}
#onboardingOverlay .ob-add-region:hover { background: var(--light-primary, var(--surface-hover)); border-color: var(--primary); }

/* ===== المفاتيح (toggles) ===== */
#onboardingOverlay .ob-toggles { display: flex; flex-direction: column; gap: 8px; }
#onboardingOverlay .ob-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 13px 14px;
    border-radius: var(--pane-radius, 7px);
    border: 1px solid var(--border-main);
    background: var(--surface-solid);
    transition: border-color 0.2s, background 0.2s;
}
#onboardingOverlay .ob-toggle:hover { border-color: color-mix(in srgb, var(--primary) 34%, var(--border-main)); }
#onboardingOverlay .ob-toggle input { position: absolute; opacity: 0; pointer-events: none; }
#onboardingOverlay .ob-toggle-track {
    inline-size: 40px;
    block-size: 23px;
    border-radius: 999px;
    flex: none;
    position: relative;
    background: color-mix(in srgb, var(--text-muted) 34%, var(--border-main));
    transition: background 0.2s;
}
#onboardingOverlay .ob-toggle-track::after {
    content: "";
    position: absolute;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    inline-size: 17px;
    block-size: 17px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 5px rgb(0 0 0 / 22%);
    transition: translate 0.2s var(--ease, ease);
}
#onboardingOverlay .ob-toggle input:checked + .ob-toggle-track { background: var(--primary); }
/* إزاحة القبعة منطقية لا فيزيائية: translate الموجب يتحرك يميناً دائماً،
   وفي RTL (الافتراضية) كانت تدفع القبعة خارج المسار — نعكسها هنا، والقاعدة
   الأصلية تبقى للإنجليزية (LTR). */
#onboardingOverlay .ob-toggle input:checked + .ob-toggle-track::after { translate: 17px 0; }
html[dir="rtl"] #onboardingOverlay .ob-toggle input:checked + .ob-toggle-track::after { translate: -17px 0; }
#onboardingOverlay .ob-toggle input:focus-visible + .ob-toggle-track { outline: 2px solid var(--primary); outline-offset: 2px; }
#onboardingOverlay .ob-toggle-txt b { display: block; font-size: 13px; color: var(--text-title, var(--text-main)); font-weight: 700; }
#onboardingOverlay .ob-toggle-txt span { display: block; font-size: 11.5px; color: var(--text-secondary); margin-block-start: 2px; }
#onboardingOverlay .ob-toggle input:checked ~ .ob-toggle-txt b { color: var(--primary); }

/* ===== المصادر — مقطوعةSegmented Control ك«من وين أجى طلبك» في إضافة
   طلب (.ao-source-row/.ao-source-btn في order-add.css): علبة واحدة بِلّية
   وأزرار أيقونية صغيرة، القطعة المفعّلة ترتفع بخلفية صلبة وظل وأيقونتها
   بلون العلامة — لا حدود ولا بطاقات. ===== */
#onboardingOverlay .ob-source-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--bg-main);
    border: 1px solid var(--border-main);
    border-radius: 999px;
    padding: 5px;
}
#onboardingOverlay .ob-source-btn {
    flex: 1 1 44px;
    min-inline-size: 0;
    block-size: 38px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font: inherit;
    --brand: var(--text-muted);
    transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
#onboardingOverlay .ob-source-btn:hover { color: var(--text-secondary); }
#onboardingOverlay .ob-source-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* القطعة النشطة: ترتفع بخلفية صلبة وظل، وأيقونتها بلون العلامة. */
#onboardingOverlay .ob-source-btn.is-active {
    background: var(--surface-solid);
    box-shadow: var(--shadow-sm, none);
    color: var(--brand);
}
#onboardingOverlay .ob-source-btn svg { inline-size: 19px; block-size: 19px; display: block; }
/* ألوان العلامات التجارية لكل مصدر (نفس --brand في order-add.css). */
#onboardingOverlay .ob-source-btn.fb { --brand: var(--brand-facebook); }
#onboardingOverlay .ob-source-btn.ig { --brand: var(--brand-instagram); }
#onboardingOverlay .ob-source-btn.web { --brand: var(--brand-website); }
#onboardingOverlay .ob-source-btn.wa { --brand: var(--wa-primary); }
#onboardingOverlay .ob-source-btn.tel { --brand: var(--secondary); }
#onboardingOverlay .ob-source-btn.sto { --brand: var(--mint); }
#onboardingOverlay .ob-source-btn.tt { --brand: var(--primary-deep); }

/* ===== العلامة البصرية — الوضع والثيمات والخطوط ===== */
#onboardingOverlay .ob-mode-group {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    border-radius: 999px;
    background: var(--surface-hover);
    border: 1px solid var(--border-main);
}
#onboardingOverlay .ob-mode-pill {
    padding: 7px 20px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    background: transparent;
    color: var(--text-secondary);
    transition: background 0.2s, color 0.2s;
}
#onboardingOverlay .ob-mode-pill:hover { color: var(--text-title, var(--text-main)); }
#onboardingOverlay .ob-mode-pill.is-active { background: var(--primary); color: #fff; }

#onboardingOverlay .ob-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; margin-block-start: 14px; }
#onboardingOverlay .ob-theme-card {
    display: block;
    inline-size: 100%;
    text-align: start;
    padding: 9px;
    cursor: pointer;
    border-radius: var(--pane-radius, 7px);
    border: 1px solid var(--border-main);
    background: var(--surface-solid);
    font: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
#onboardingOverlay .ob-theme-card:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border-main)); }
#onboardingOverlay .ob-theme-preview { display: flex; gap: 3px; block-size: 34px; border-radius: 8px; overflow: hidden; }
#onboardingOverlay .ob-theme-preview .ob-bar { display: block; flex: 1; }
#onboardingOverlay .ob-theme-preview .ob-bar:first-child { flex: 2.4; }
#onboardingOverlay .ob-theme-name { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-title, var(--text-main)); margin-block-start: 8px; }
#onboardingOverlay .ob-theme-tokens { display: inline-flex; gap: 3px; margin-inline-start: auto; }
#onboardingOverlay .ob-theme-tokens span { inline-size: 12px; block-size: 12px; border-radius: 999px; border: 1px solid var(--border-main); }
#onboardingOverlay .ob-theme-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; background: var(--light-primary, var(--surface-hover)); }

#onboardingOverlay .ob-font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; }
#onboardingOverlay .ob-font-card {
    display: block;
    inline-size: 100%;
    text-align: start;
    padding: 13px 14px;
    cursor: pointer;
    border-radius: var(--pane-radius, 7px);
    border: 1px solid var(--border-main);
    background: var(--surface-solid);
    font: inherit;
    transition: border-color 0.2s, background 0.2s;
}
#onboardingOverlay .ob-font-card:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border-main)); background: var(--surface-hover); }
#onboardingOverlay .ob-font-sample { display: block; font-size: 17px; font-weight: 700; color: var(--text-title, var(--text-main)); line-height: 1.5; }
#onboardingOverlay .ob-font-meta { display: block; font-size: 11px; color: var(--text-secondary); font-weight: 600; margin-block-start: 4px; }
#onboardingOverlay .ob-font-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; background: var(--light-primary, var(--surface-hover)); }

/* ===== الفريق ===== */
#onboardingOverlay .ob-team-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block-end: 14px; }
#onboardingOverlay .ob-team-meta { flex: 1; min-inline-size: 220px; }
#onboardingOverlay .ob-team-title { font-size: 14px; font-weight: 800; color: var(--text-title, var(--text-main)); }
#onboardingOverlay .ob-team-desc { font-size: 12px; color: var(--text-secondary); margin-block-start: 3px; }
#onboardingOverlay .ob-team-roles-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-block-end: 12px; }
#onboardingOverlay .ob-team-roles-summary:empty { display: none; }
#onboardingOverlay .ob-team-role-count { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); }
#onboardingOverlay .ob-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--surface-hover);
    color: var(--text-secondary);
}
#onboardingOverlay .ob-role-pill.role-owner { background: color-mix(in srgb, var(--primary) 14%, var(--surface-solid)); color: var(--primary); }
#onboardingOverlay .ob-role-pill.role-admin { background: color-mix(in srgb, var(--info, #5B86D8) 14%, var(--surface-solid)); color: var(--info, #5B86D8); }
#onboardingOverlay .ob-role-pill.role-staff { background: color-mix(in srgb, var(--mint, #1FCBB0) 16%, var(--surface-solid)); color: color-mix(in srgb, var(--mint, #1FCBB0) 78%, #05261f); }
#onboardingOverlay .ob-role-pill.role-viewer { background: color-mix(in srgb, var(--warning, #EBA02E) 16%, var(--surface-solid)); color: color-mix(in srgb, var(--warning, #EBA02E) 84%, #3a2400); }

#onboardingOverlay .ob-team-table-wrap { border: 1px solid var(--border-main); border-radius: var(--pane-radius, 7px); overflow: hidden; overflow-x: auto; }
#onboardingOverlay .ob-team-table { inline-size: 100%; border-collapse: collapse; min-inline-size: 560px; }
#onboardingOverlay .ob-team-table th {
    text-align: start;
    padding: 12px 14px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-title, var(--text-main));
    background: var(--surface-solid);
    border-block-end: 1px solid var(--border-main);
    white-space: nowrap;
}
#onboardingOverlay .ob-team-table td { padding: 12px 14px; font-size: 12.5px; border-block-end: 1px solid var(--border-main); vertical-align: middle; }
#onboardingOverlay .ob-team-table tbody tr:last-child td { border-block-end: 0; }
#onboardingOverlay .ob-team-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-main) 60%, var(--surface-solid)); }
#onboardingOverlay .ob-team-table .center { text-align: center; }
#onboardingOverlay .ob-team-user-cell { display: flex; align-items: center; gap: 10px; }
#onboardingOverlay .ob-team-avatar {
    inline-size: 32px;
    block-size: 32px;
    border-radius: 999px;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--light-primary, var(--surface-hover));
    color: var(--primary);
    font-weight: 800;
    font-size: 12.5px;
}
#onboardingOverlay .ob-team-avatar.av-1 { background: color-mix(in srgb, var(--mint, #1FCBB0) 18%, var(--surface-solid)); color: color-mix(in srgb, var(--mint, #1FCBB0) 78%, #05261f); }
#onboardingOverlay .ob-team-avatar.av-2 { background: color-mix(in srgb, var(--warning, #EBA02E) 18%, var(--surface-solid)); color: color-mix(in srgb, var(--warning, #EBA02E) 84%, #3a2400); }
#onboardingOverlay .ob-team-user-meta .n { font-size: 12.5px; font-weight: 700; color: var(--text-title, var(--text-main)); }
#onboardingOverlay .ob-team-user-meta small { font-size: 10.5px; color: var(--text-secondary); }
#onboardingOverlay .ob-team-email { direction: ltr; text-align: start; unicode-bidi: isolate; color: var(--text-secondary); }
#onboardingOverlay .ob-team-row-actions { display: inline-flex; gap: 6px; }
#onboardingOverlay .ob-status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: color-mix(in srgb, var(--mint, #1FCBB0) 78%, #05261f); }
#onboardingOverlay .ob-status-dot::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 999px; background: var(--mint, #1FCBB0); }
#onboardingOverlay .ob-status-dot.off { color: var(--text-muted); }
#onboardingOverlay .ob-status-dot.off::before { background: var(--text-muted); }
#onboardingOverlay .ob-btn-mini {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-main);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    background: transparent;
    color: var(--text-secondary);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
#onboardingOverlay .ob-btn-mini.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
#onboardingOverlay .ob-btn-mini.soft:hover { border-color: color-mix(in srgb, var(--warning, #EBA02E) 40%, var(--border-main)); color: color-mix(in srgb, var(--warning, #EBA02E) 84%, #3a2400); }
#onboardingOverlay .ob-btn-mini.soft-ready:hover { border-color: color-mix(in srgb, var(--mint, #1FCBB0) 40%, var(--border-main)); color: color-mix(in srgb, var(--mint, #1FCBB0) 78%, #05261f); }
#onboardingOverlay .ob-btn-mini.soft-danger:hover { border-color: color-mix(in srgb, var(--danger) 40%, var(--border-main)); color: var(--danger); }
#onboardingOverlay .ob-team-table-empty { text-align: center; color: var(--text-secondary); padding: 22px 14px !important; }
#onboardingOverlay .ob-team-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-block-start: 14px;
    padding: 13px 15px;
    border-radius: var(--pane-radius, 7px);
    background: var(--light-primary, var(--surface-hover));
    font-size: 12px;
    color: var(--text-secondary);
}
#onboardingOverlay .ob-team-note svg { color: var(--primary); flex: none; margin-block-start: 1px; }
#onboardingOverlay .ob-team-note b { color: var(--text-title, var(--text-main)); }

/* ===== طبقة الإنهاء (نمط su-done): حلقة صحّ + ملخّص chips + زرّ الدخول ===== */
#onboardingOverlay .ob-done {
    position: fixed;
    inset: 0;
    z-index: 9700;
    display: none;
    place-items: center;
    padding: 20px;
    background: var(--bg-main);
}
#onboardingOverlay .ob-done.is-on { display: grid; animation: obFade 0.3s var(--ease, ease); }
#onboardingOverlay .ob-done-card { text-align: center; max-inline-size: 520px; }
#onboardingOverlay .ob-done-ring {
    inline-size: 96px;
    block-size: 96px;
    margin-inline: auto;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--mint, #1FCBB0) 14%, var(--surface-solid));
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--mint, #1FCBB0) 8%, transparent);
    color: var(--mint, #1FCBB0);
}
#onboardingOverlay .ob-done-ring path { stroke-dasharray: 34; stroke-dashoffset: 34; animation: obDraw 0.7s 0.16s var(--ease, ease) forwards; }
@keyframes obDraw { to { stroke-dashoffset: 0; } }
#onboardingOverlay .ob-done-card h2 { font-size: 26px; margin-block-start: 22px; color: var(--text-title, var(--text-main)); }
#onboardingOverlay .ob-done-card p { font-size: 14px; color: var(--text-secondary); margin-block-start: 10px; }
#onboardingOverlay .ob-done-sum { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-block: 22px; }
#onboardingOverlay .ob-done-chip {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--surface-hover);
    border: 1px solid var(--border-main);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}
#onboardingOverlay .ob-done-chip b, #onboardingOverlay .ob-done-chip .su-num { color: var(--text-title, var(--text-main)); }

/* ===== نافذة إضافة/تعديل عضو ===== */
#onboardingOverlay .ob-team-modal {
    position: fixed;
    inset: 0;
    z-index: 9600;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: color-mix(in srgb, #0d1522 62%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
#onboardingOverlay .ob-team-modal.is-open { display: flex; animation: obFade 0.24s var(--ease, ease); }
#onboardingOverlay .ob-team-modal-card {
    inline-size: min(660px, 100%);
    max-block-size: 90vh;
    overflow-y: auto;
    background: var(--surface-solid);
    border-radius: 24px;
    box-shadow: var(--shadow-lg, none);
    padding: 24px;
}
#onboardingOverlay .ob-team-modal-head { display: flex; align-items: center; gap: 12px; margin-block-end: 18px; }
#onboardingOverlay .ob-team-modal-title { font-size: 17px; font-weight: 800; flex: 1; color: var(--text-title, var(--text-main)); }
#onboardingOverlay .ob-team-modal-close {
    inline-size: 30px;
    block-size: 30px;
    border-radius: 999px;
    border: 1px solid var(--border-main);
    cursor: pointer;
    display: grid;
    place-items: center;
    background: var(--surface-solid);
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1;
}
#onboardingOverlay .ob-team-modal-close:hover { background: var(--surface-hover); color: var(--danger); }
#onboardingOverlay .ob-perm-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-block-end: 10px; }
#onboardingOverlay .ob-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
#onboardingOverlay .ob-perm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--border-main);
    border-radius: var(--pane-radius, 7px);
    background: var(--surface-solid);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-title, var(--text-main));
    cursor: pointer;
}
#onboardingOverlay .ob-perm-item input { accent-color: var(--primary); }
#onboardingOverlay .ob-perm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: 10px; }
#onboardingOverlay .ob-team-modal-foot {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-block-start: 20px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--border-main);
}

/* ===== حركة الظهور عند تبديل القسم =====
   الأقسام تُخفى بـ style.display (لا hidden) — إعادة العرض تعيد تشغيل
   الحركة تلقائياً، فلا حاجة لإعادة تشغيل يدوية من JS. */
#onboardingOverlay .ob-panel-body > .ob-block { animation: obRise 0.34s var(--ease, ease) both; }
#onboardingOverlay .ob-panel-body > .ob-block:nth-child(2) { animation-delay: 45ms; }
@keyframes obRise { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    #onboardingOverlay *, #onboardingOverlay *::before, #onboardingOverlay *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== الاستجابة — العمودان ينهاران ===== */
@media (max-width: 1060px) {
    #onboardingOverlay .ob-topbar-meter { display: flex; }
    #onboardingOverlay .ob-shell { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block-start: 14px; }
    #onboardingOverlay .ob-rail { position: sticky; inset-block-start: 62px; z-index: 30; gap: 10px; }
    #onboardingOverlay .ob-rail-card { padding: 12px; border-radius: var(--pane-radius, 7px); }
    #onboardingOverlay .ob-rail-hi, #onboardingOverlay .ob-rail-sub, #onboardingOverlay .ob-progress-note { display: none; }
    #onboardingOverlay .ob-progress { margin-block-start: 0; }
    #onboardingOverlay .ob-tabs {
        flex-direction: row;
        overflow-x: auto;
        gap: 6px;
        padding-block-end: 2px;
        scroll-snap-type: x proximity;
    }
    #onboardingOverlay .ob-tab { inline-size: auto; flex: none; scroll-snap-align: start; padding: 7px 12px 7px 10px; }
    #onboardingOverlay .ob-tab-txt i { display: none; }
    #onboardingOverlay .ob-tab-state { inline-size: 14px; }
    #onboardingOverlay .ob-tab-state .ob-dot { display: none; }
    #onboardingOverlay .ob-rail-help { display: none; }
}
@media (max-width: 760px) {
    #onboardingOverlay .ob-topbar { padding: 10px 14px; gap: 10px; }
    #onboardingOverlay .ob-brand-sub { display: none; }
    #onboardingOverlay .ob-shell { padding-inline: 10px; padding-block-end: 40px; }
    #onboardingOverlay .ob-stage { border-radius: 12px; }
    #onboardingOverlay .ob-panel-head, #onboardingOverlay .ob-panel-body, #onboardingOverlay .ob-panel-foot { padding-inline: 16px; }
    #onboardingOverlay .ob-panel-head { padding-block: 16px 14px; }
    #onboardingOverlay .ob-panel-head h2 { font-size: 17px; }
    #onboardingOverlay .ob-panel-ico { inline-size: 38px; block-size: 38px; border-radius: 10px; }
    #onboardingOverlay .ob-panel-foot { position: sticky; inset-block-end: 0; z-index: 10; }
    #onboardingOverlay .ob-panel-foot .ob-btn-primary { inline-size: 100%; }
    #onboardingOverlay .ob-save-note { display: none; }
    #onboardingOverlay .ob-country-grid { max-block-size: 260px; }
    #onboardingOverlay .ob-logo-row { gap: 12px; }
    #onboardingOverlay .ob-logo-preview { inline-size: 68px; block-size: 68px; border-radius: 14px; font-size: 26px; }
    #onboardingOverlay .ob-team-modal-card { border-radius: 14px; padding: 16px; }
}