/* ==========================================================================
   IbdaaHost theme — child of Nexus (WHMCS 9)
   --------------------------------------------------------------------------
   This file REPLACES nexus/css/custom.css (a child's custom.css wins), so it
   defines every Nexus design token as well as ours. Colours live ONLY in the
   :root blocks (Constitution IV, check-tpl-hygiene.sh); everything else uses
   var(--…). Direction: logical properties only (Constitution III).
   Light is the default; dark comes from [data-theme="dark"] (set before
   first paint by header.tpl) or from the OS when no choice is stored.
   ========================================================================== */

/* ---- 1. Fonts (self-hosted, SIL OFL 1.1 — see ../fonts/LICENSE.txt) ---- */
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-wght.woff") format("woff"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-wght.woff") format("woff"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-500.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-600.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-700.woff") format("woff"); font-weight: 700; font-display: swap; }

/* ---- 2. Tokens ---------------------------------------------------------- */
:root {
    /* raw palette — light */
    --ibh-l-bg: #FAFAFB; --ibh-l-bg-2: #EAECF1; --ibh-l-surface: #FFFFFF;
    --ibh-l-text: #0D0F14; --ibh-l-text-2: #545B6B; --ibh-l-line: #DADDE4;
    --ibh-l-line-strong: #7F889B; --ibh-l-ink: #0D0F14; --ibh-l-ink-on: #FAFAFB; --ibh-l-focus: #1D3FD0; --ibh-l-ok: #0B7A62;
    --ibh-l-band: #0D0F14; --ibh-l-band-text: #F3F4F7; --ibh-l-band-text-2: #A7AEBD;
    --ibh-l-bp: #E9EEFA; --ibh-l-bp-text: #14244F; --ibh-l-bp-text-2: #4A5A85;
    --ibh-l-bp-grid: rgba(29, 63, 208, .07); --ibh-l-bp-line: rgba(29, 63, 208, .24);
    --ibh-l-bp-accent: #1D3FD0; --ibh-l-bp-btn: #14244F; --ibh-l-bp-btn-ink: #FFFFFF;
    --ibh-l-bp-canvas: rgba(255, 255, 255, .55); --ibh-l-shadow: rgba(13, 15, 20, .12);
    /* raw palette — dark */
    --ibh-d-bg: #0A0D14; --ibh-d-bg-2: #131928; --ibh-d-surface: #121621;
    --ibh-d-text: #EEF0F5; --ibh-d-text-2: #9CA3B4; --ibh-d-line: #262B38;
    --ibh-d-line-strong: #626B82; --ibh-d-ink: #EEF0F5; --ibh-d-ink-on: #0A0D14; --ibh-d-focus: #8FA3FF; --ibh-d-ok: #5BE3C0;
    --ibh-d-band: #151B2B; --ibh-d-band-text: #EEF0F5; --ibh-d-band-text-2: #A7AEBD;
    --ibh-d-bp: #131A2E; --ibh-d-bp-text: #E6EBFA; --ibh-d-bp-text-2: #A0ACD2;
    --ibh-d-bp-grid: rgba(143, 163, 255, .07); --ibh-d-bp-line: rgba(143, 163, 255, .22);
    --ibh-d-bp-accent: #FFD23F; --ibh-d-bp-btn: #FFD23F; --ibh-d-bp-btn-ink: #14120A;
    --ibh-d-bp-canvas: rgba(255, 255, 255, .04); --ibh-d-shadow: rgba(0, 0, 0, .5);
    --ibh-d-info: #8FA3FF; --ibh-d-warning: #F5A524; --ibh-d-error: #FB923C; --ibh-d-notice: #C4B5FD;
    /* shared */
    --ibh-yellow: #FFD23F; --ibh-yellow-ink: #14120A;
    --ibh-success: #0B7A62; --ibh-info: #1D3FD0; --ibh-warning: #B45309; --ibh-error: #C2410C; --ibh-notice: #6D28D9;

    /* active tokens (light) */
    --ibh-bg: var(--ibh-l-bg); --ibh-bg-2: var(--ibh-l-bg-2); --ibh-surface: var(--ibh-l-surface);
    --ibh-text: var(--ibh-l-text); --ibh-text-2: var(--ibh-l-text-2); --ibh-line: var(--ibh-l-line); --ibh-line-strong: var(--ibh-l-line-strong);
    --ibh-ink: var(--ibh-l-ink); --ibh-ink-on: var(--ibh-l-ink-on); --ibh-focus: var(--ibh-l-focus); --ibh-ok: var(--ibh-l-ok);
    --ibh-band: var(--ibh-l-band); --ibh-band-text: var(--ibh-l-band-text); --ibh-band-text-2: var(--ibh-l-band-text-2);
    --ibh-bp: var(--ibh-l-bp); --ibh-bp-text: var(--ibh-l-bp-text); --ibh-bp-text-2: var(--ibh-l-bp-text-2);
    --ibh-bp-grid: var(--ibh-l-bp-grid); --ibh-bp-line: var(--ibh-l-bp-line); --ibh-bp-accent: var(--ibh-l-bp-accent);
    --ibh-bp-btn: var(--ibh-l-bp-btn); --ibh-bp-btn-ink: var(--ibh-l-bp-btn-ink); --ibh-bp-canvas: var(--ibh-l-bp-canvas);
    --ibh-shadow: var(--ibh-l-shadow);

    --ibh-font: "Space Grotesk", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ibh-font-ar: "IBM Plex Sans Arabic", "Space Grotesk", system-ui, sans-serif;
    --ibh-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --ibh-radius: 10px; --ibh-radius-sm: 8px; --ibh-wrap: 1320px; --ibh-gutter: 28px;

    /* ---- Nexus design tokens, mapped onto ours (nexus/css/custom.css names) ---- */
    --white: #fff;
    --neutral-50: var(--ibh-bg); --neutral-100: var(--ibh-bg-2); --neutral-200: var(--ibh-line);
    --neutral-300: var(--ibh-line); --neutral-400: var(--ibh-text-2); --neutral-500: var(--ibh-text-2);
    --neutral-600: var(--ibh-text-2); --neutral-700: var(--ibh-text); --neutral-800: var(--ibh-text);
    --neutral-900: var(--ibh-text); --neutral-950: var(--ibh-text);
    --primary-50: var(--ibh-bg); --primary-100: var(--ibh-bg-2); --primary-200: var(--ibh-line); --primary-300: var(--ibh-line);
    --primary-400: var(--ibh-text-2); --primary-500: var(--ibh-text-2); --primary-600: var(--ibh-ink); --primary-700: var(--ibh-ink);
    --primary-800: var(--ibh-ink); --primary-900: var(--ibh-ink); --primary-950: var(--ibh-ink);
    --primary: var(--ibh-ink); --primary-lifted: var(--ibh-ink); --primary-accented: var(--ibh-text-2);
    --secondary: var(--ibh-text-2); --secondary-lifted: var(--ibh-text-2); --secondary-accented: var(--ibh-text);
    --success: var(--ibh-success); --success-lifted: var(--ibh-success); --success-accented: var(--ibh-success);
    --info: var(--ibh-info); --info-lifted: var(--ibh-info); --info-accented: var(--ibh-info);
    --notice: var(--ibh-notice); --notice-lifted: var(--ibh-notice); --notice-accented: var(--ibh-notice);
    --warning: var(--ibh-warning); --warning-lifted: var(--ibh-warning); --warning-accented: var(--ibh-warning);
    --error: var(--ibh-error); --error-lifted: var(--ibh-error); --error-accented: var(--ibh-error);
    --grayscale: var(--ibh-ink); --grayscale-lifted: var(--ibh-ink); --grayscale-accented: var(--ibh-text-2);
    --neutral: var(--ibh-text-2); --neutral-lifted: var(--ibh-text-2); --neutral-accented: var(--ibh-text);
    --text-inverted: var(--ibh-ink-on); --text-muted: var(--ibh-text-2); --text-lifted: var(--ibh-text-2);
    --text-accented: var(--ibh-text); --text: var(--ibh-text);
    --border-muted: var(--ibh-line); --border: var(--ibh-line); --border-lifted: var(--ibh-text-2); --border-accented: var(--ibh-text);
    --bg: var(--ibh-surface); --bg-muted: var(--ibh-bg); --bg-lifted: var(--ibh-bg-2); --bg-accented: var(--ibh-line); --bg-inverted: var(--ibh-ink);
    --yellow-200: #fff085; --yellow-300: #ffdf20; --teal-300: #46edd5; --teal-400: #00d5be; --emerald-300: #5ee9b5; --pink-400: #fb64b6;
    --text-xs: 0.625rem; --text-sm: 0.75rem; --text-md: 0.875rem; --text-lg: 1rem;
    --outline-sm: 1px; --outline-md: 2px; --outline-lg: 3px;
    --rounding-sm: 0.375rem; --rounding-md: 0.625rem; --rounding-lg: 0.875rem;
    --letter-spacing: 0em; --disabled-opacity: 25%;
    --font-family-sans-serif: var(--ibh-font);
    --font-family-monospace: var(--ibh-mono);
}

/* dark — explicit choice */
:root[data-theme="dark"] {
    --ibh-bg: var(--ibh-d-bg); --ibh-bg-2: var(--ibh-d-bg-2); --ibh-surface: var(--ibh-d-surface);
    --ibh-text: var(--ibh-d-text); --ibh-text-2: var(--ibh-d-text-2); --ibh-line: var(--ibh-d-line); --ibh-line-strong: var(--ibh-d-line-strong);
    --ibh-ink: var(--ibh-d-ink); --ibh-ink-on: var(--ibh-d-ink-on); --ibh-focus: var(--ibh-d-focus); --ibh-ok: var(--ibh-d-ok);
    --ibh-band: var(--ibh-d-band); --ibh-band-text: var(--ibh-d-band-text); --ibh-band-text-2: var(--ibh-d-band-text-2);
    --ibh-bp: var(--ibh-d-bp); --ibh-bp-text: var(--ibh-d-bp-text); --ibh-bp-text-2: var(--ibh-d-bp-text-2);
    --ibh-bp-grid: var(--ibh-d-bp-grid); --ibh-bp-line: var(--ibh-d-bp-line); --ibh-bp-accent: var(--ibh-d-bp-accent);
    --ibh-bp-btn: var(--ibh-d-bp-btn); --ibh-bp-btn-ink: var(--ibh-d-bp-btn-ink); --ibh-bp-canvas: var(--ibh-d-bp-canvas);
    --ibh-shadow: var(--ibh-d-shadow); --ibh-success: var(--ibh-d-ok); --ibh-info: var(--ibh-d-info); --ibh-warning: var(--ibh-d-warning); --ibh-error: var(--ibh-d-error); --ibh-notice: var(--ibh-d-notice);
    color-scheme: dark;
}
/* dark — follow the OS when no choice is stored */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ibh-bg: var(--ibh-d-bg); --ibh-bg-2: var(--ibh-d-bg-2); --ibh-surface: var(--ibh-d-surface);
        --ibh-text: var(--ibh-d-text); --ibh-text-2: var(--ibh-d-text-2); --ibh-line: var(--ibh-d-line); --ibh-line-strong: var(--ibh-d-line-strong);
        --ibh-ink: var(--ibh-d-ink); --ibh-ink-on: var(--ibh-d-ink-on); --ibh-focus: var(--ibh-d-focus); --ibh-ok: var(--ibh-d-ok);
        --ibh-band: var(--ibh-d-band); --ibh-band-text: var(--ibh-d-band-text); --ibh-band-text-2: var(--ibh-d-band-text-2);
        --ibh-bp: var(--ibh-d-bp); --ibh-bp-text: var(--ibh-d-bp-text); --ibh-bp-text-2: var(--ibh-d-bp-text-2);
        --ibh-bp-grid: var(--ibh-d-bp-grid); --ibh-bp-line: var(--ibh-d-bp-line); --ibh-bp-accent: var(--ibh-d-bp-accent);
        --ibh-bp-btn: var(--ibh-d-bp-btn); --ibh-bp-btn-ink: var(--ibh-d-bp-btn-ink); --ibh-bp-canvas: var(--ibh-d-bp-canvas);
        --ibh-shadow: var(--ibh-d-shadow); --ibh-success: var(--ibh-d-ok); --ibh-info: var(--ibh-d-info); --ibh-warning: var(--ibh-d-warning); --ibh-error: var(--ibh-d-error); --ibh-notice: var(--ibh-d-notice);
        color-scheme: dark;
    }
}

/* ---- 3. Base ------------------------------------------------------------ */
body.ibh { background: var(--ibh-bg); color: var(--ibh-text); font-family: var(--ibh-font); -webkit-font-smoothing: antialiased; }
html[lang="ar"] body.ibh { font-family: var(--ibh-font-ar); }
:where(body.ibh) a { color: inherit; }
:where(body.ibh) a:hover { color: var(--ibh-text); }
body.ibh :focus-visible { outline: 3px solid var(--ibh-focus); outline-offset: 2px; }
body.ibh h1, body.ibh h2, body.ibh h3, body.ibh h4 { color: var(--ibh-text); }
.ibh-wrap { max-width: var(--ibh-wrap); margin-inline: auto; padding-inline: var(--ibh-gutter); }
.ibh [dir="ltr"], .ibh .ibh-ltr { unicode-bidi: isolate; }

/* ---- 4. Header ---------------------------------------------------------- */
body.ibh .ibh-header { background: var(--ibh-bg); color: var(--ibh-text); border-block-end: 1px solid var(--ibh-line); box-shadow: none; }
.ibh-header .topbar { background: var(--ibh-bg-2); color: var(--ibh-text-2); }
.ibh-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-block: 14px; }
.ibh-brand { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; text-decoration: none; color: var(--ibh-text); }
.ibh-brand:hover { text-decoration: none; }
.ibh-nav { flex: 1 1 auto; padding: 0; order: 2; }
body.ibh .ibh-header .ibh-nav { min-height: 0; }
.ibh-nav .navbar-nav { gap: 2px 18px; }
.ibh-nav .nav-link { color: var(--ibh-text-2); font-size: 15px; padding-block: 10px; padding-inline: 0; }
.ibh-nav .nav-link:hover, .ibh-nav .nav-link:focus { color: var(--ibh-text); }
.ibh .dropdown-menu { background: var(--ibh-surface); border: 1px solid var(--ibh-line); border-radius: var(--ibh-radius); box-shadow: 0 16px 40px -20px var(--ibh-shadow); }
.ibh .dropdown-item { color: var(--ibh-text); }
.ibh .dropdown-item:hover, .ibh .dropdown-item:focus { background: var(--ibh-bg-2); color: var(--ibh-text); }
.ibh-tools { display: flex; align-items: center; gap: 8px; order: 3; margin-inline-start: auto; }
.ibh-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--ibh-line); border-radius: var(--ibh-radius); background: transparent; color: var(--ibh-text); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
.ibh-tool:hover { color: var(--ibh-text); text-decoration: none; border-color: var(--ibh-text-2); }
.ibh-tool--icon { width: 44px; padding: 0; position: relative; }
.ibh-badge { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--ibh-ink); color: var(--ibh-ink-on); font-size: 11px; line-height: 18px; text-align: center; padding-inline: 4px; }
.ibh-icon--sun { display: none; }
:root[data-theme="dark"] .ibh-icon--sun { display: block; }
:root[data-theme="dark"] .ibh-icon--moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ibh-icon--sun { display: block; }
    :root:not([data-theme="light"]) .ibh-icon--moon { display: none; }
}
.ibh-account { flex-direction: row; }
.ibh-account .nav-link { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 16px; border-radius: var(--ibh-radius); background: var(--ibh-ink); color: var(--ibh-ink-on); font-weight: 600; font-size: 14px; }
.ibh-account .nav-link:hover { color: var(--ibh-ink-on); opacity: .9; }
.ibh-menu-btn { display: none; }
@media (max-width: 1299.98px) {
    .ibh-menu-btn { display: inline-flex; }
    .ibh-nav { order: 4; flex-basis: 100%; }
    .ibh-nav .navbar-nav { padding-block: 8px; }
}
@media (max-width: 575.98px) {
    :root { --ibh-gutter: 16px; }
    .ibh-account .nav-link { padding-inline: 10px; }
}
.ibh .master-breadcrumb { background: var(--ibh-bg-2); border-block-end: 1px solid var(--ibh-line); }
.ibh .master-breadcrumb .breadcrumb { background: transparent; }

/* ---- 5. Footer ---------------------------------------------------------- */
body.ibh .ibh-footer { background: var(--ibh-bg); color: var(--ibh-text-2); border-block-start: 1px solid var(--ibh-line); padding: 0; margin: 0; }
.ibh-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; padding-block: 48px 28px; font-size: 15px; }
.ibh-footer__brand { display: flex; flex-direction: column; gap: 8px; }
.ibh-footer__brand p { margin: 0; }
.ibh-footer__col { display: flex; flex-direction: column; gap: 8px; }
body.ibh .ibh-footer__col h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: var(--ibh-text); }
.ibh-footer a { color: var(--ibh-text-2); text-decoration: none; }
.ibh-footer a:hover { color: var(--ibh-text); text-decoration: underline; }
.ibh-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 18px 32px; border-block-start: 1px solid var(--ibh-line); font-size: 14px; }
.ibh-footer__base p { margin: 0; }

/* ---- 6. Shared section bits ------------------------------------------- */
.ibh-main { display: block; }
.ibh-section { padding-block: 96px; }
.ibh-section--alt { background: var(--ibh-bg-2); border-block: 1px solid var(--ibh-line); }
.ibh-kicker { font-family: var(--ibh-mono); font-size: 14px; color: var(--ibh-text-2); letter-spacing: .02em; }
html[lang="ar"] .ibh-kicker { font-family: var(--ibh-font-ar); }
.ibh-h2 { margin: 0; font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -0.03em; line-height: 1.06; font-weight: 700; }
html[lang="ar"] .ibh-h2, html[lang="ar"] .ibh-h1 { letter-spacing: 0; line-height: 1.25; }
.ibh-lead { margin: 0; color: var(--ibh-text-2); font-size: 18px; }
.ibh-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; margin-block-end: 32px; }
.ibh-head > div { display: flex; flex-direction: column; gap: 12px; }
.ibh-head__aside { max-width: 30em; font-size: 16px; }
.ibh-h2--sm { font-size: clamp(30px, 3.4vw, 40px); }
.ibh-split--head { align-items: flex-end; margin-block-end: 44px; }
.ibh-split--head > :last-child { flex: 1 1 380px; }
.ibh-section--tight { padding-block: 80px; }
.ibh-section--last { padding-block: 0 80px; }
.ibh-about__title { max-width: 15em; }
.ibh-about__more { margin-block-start: 36px; }
.ibh-btn--start { align-self: flex-start; margin-block-start: 6px; }
.ibh-tile--mail { padding: 26px; gap: 14px; }
.ibh-tile--mail .ibh-btn { margin-block-start: auto; }
.ibh-plans thead td, .ibh-plans tbody td:first-child { border-block-end: 1px solid var(--ibh-line); }
.ibh-plans thead th > span { display: block; }
.ibh-plans thead th .ibh-plans__price, .ibh-plans thead th .ibh-plans__per { display: inline; }
.ibh-plans thead th .ibh-tag { display: inline-block; }

.ibh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: var(--ibh-radius); font-weight: 600; text-decoration: none; border: 2px solid transparent; cursor: pointer; font: inherit; font-weight: 600; }
.ibh-btn--solid { background: var(--ibh-ink); color: var(--ibh-ink-on); border-color: var(--ibh-ink); }
.ibh-btn--solid:hover { color: var(--ibh-ink-on); text-decoration: none; opacity: .92; }
.ibh-btn--line { background: transparent; color: var(--ibh-text); border-color: var(--ibh-line); }
.ibh-btn--line:hover { border-color: var(--ibh-text-2); text-decoration: none; }
.ibh-tile { background: var(--ibh-surface); border: 1px solid var(--ibh-line); border-radius: var(--ibh-radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ibh-text); }
.ibh-tile h3 { margin: 0; font-size: 19px; font-weight: 600; }
.ibh-tile p { margin: 0; color: var(--ibh-text-2); font-size: 15px; }
a.ibh-tile:hover { text-decoration: none; border-color: var(--ibh-text-2); }
.ibh-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* ---- 7. Set-up desk --------------------------------------------------- */
.ibh-desk { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; padding-block: 24px 64px; }
.ibh-desk__qs { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 36px; padding-block-start: 20px; }
.ibh-h1 { margin: 0; font-size: clamp(44px, 6vw, 84px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 700; }
.ibh-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.ibh-q[hidden], .ibh-js .ibh-q.is-off { display: none; }
/* without JavaScript the mode toggle can't work, so it isn't offered */
html:not(.ibh-js) #ibh-mode-toggle { display: none; }
.ibh-desk__head { display: flex; flex-direction: column; gap: 10px; }
.ibh-q__n { font-family: var(--ibh-mono); font-size: 15px; color: var(--ibh-text-2); padding-block-start: 4px; min-width: 28px; }
.ibh-q__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-inline-start: 48px; }
.ibh-q legend { display: flex; align-items: baseline; gap: 20px; font-size: 24px; font-weight: 600; padding: 0; margin: 0 0 14px; float: none; width: auto; }
@media (max-width: 575.98px) { .ibh-q__body { padding-inline-start: 0; } .ibh-q legend { font-size: 20px; gap: 10px; } }
.ibh-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ibh-chip { font: inherit; font-size: 17px; background: var(--ibh-surface); color: var(--ibh-text); border: 2px solid var(--ibh-line); border-radius: var(--ibh-radius); padding: 10px 18px; min-height: 48px; cursor: pointer; }
.ibh-chip:hover { border-color: var(--ibh-text-2); }
.ibh-opt { position: relative; margin: 0; display: inline-flex; }
.ibh-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ibh-chip { display: inline-flex; align-items: center; gap: 6px; }
.ibh-opt input:checked + .ibh-chip { background: var(--ibh-ink); color: var(--ibh-ink-on); border-color: var(--ibh-ink); font-weight: 600; }
.ibh-opt input:focus-visible + .ibh-chip { outline: 3px solid var(--ibh-focus); outline-offset: 2px; }
.ibh-opt:hover .ibh-chip { border-color: var(--ibh-text-2); }
.ibh-opt input:checked + .ibh-chip:hover { border-color: var(--ibh-ink); }
.ibh-chip--tld { font-family: var(--ibh-mono); font-size: 14px; padding: 8px 12px; min-height: 44px; border-width: 1px; border-radius: var(--ibh-radius-sm); }
.ibh-chip--tld span { opacity: .75; }
.ibh-name { display: flex; align-items: center; border-block-end: 3px solid var(--ibh-text); max-width: 620px; }
.ibh-name input { flex: 1 1 auto; min-width: 0; font-family: var(--ibh-mono); font-size: clamp(22px, 3vw, 32px); font-weight: 500; color: var(--ibh-text); background: transparent; border: 0; padding: 8px 0; }
.ibh-name input:focus { outline: none; }
.ibh-name:focus-within { border-color: var(--ibh-focus); }
.ibh-name__tld { font-family: var(--ibh-mono); font-size: clamp(22px, 3vw, 32px); color: var(--ibh-text-2); }

.ibh-bp { flex: 1 1 440px; min-width: 0; position: relative; background-color: var(--ibh-bp); color: var(--ibh-bp-text); border: 1px solid var(--ibh-bp-line); border-radius: var(--ibh-radius-sm); padding: 32px; display: flex; flex-direction: column; gap: 20px;
    background-image: linear-gradient(var(--ibh-bp-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ibh-bp-grid) 1px, transparent 1px); background-size: 24px 24px; }
.ibh-bp__top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--ibh-mono); font-size: 14px; color: var(--ibh-bp-text-2); border-block-end: 1px solid var(--ibh-bp-line); padding-block-end: 12px; }
html[lang="ar"] .ibh-bp__top, html[lang="ar"] .ibh-bp__k { font-family: var(--ibh-font-ar); }
.ibh-bp__svg { width: 100%; height: auto; }
html[dir="rtl"] .ibh-bp__svg { transform: scaleX(-1); }
.ibh-bp__svg .ibh-accent { stroke: var(--ibh-bp-accent); }
.ibh-bp.is-email .ibh-bp__server { opacity: .25; }
.ibh-bp__line[hidden] { display: none; }
.ibh-bp__msg[hidden], .ibh-bp__note[hidden] { display: none; }
.ibh-bp__lines { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ibh-bp__line { display: flex; flex-direction: column; gap: 2px; }
.ibh-bp__row { display: flex; align-items: baseline; gap: 10px; }
.ibh-bp__k { font-family: var(--ibh-mono); font-size: 13px; letter-spacing: .06em; color: var(--ibh-bp-text-2); min-width: 72px; text-transform: uppercase; }
.ibh-bp__dots { flex: 1 1 auto; border-block-end: 1px dotted var(--ibh-bp-line); transform: translateY(-4px); }
.ibh-bp__price { font-weight: 700; color: var(--ibh-bp-accent); font-size: 18px; }
.ibh-bp__v { font-size: 20px; font-weight: 500; padding-inline-start: 82px; overflow-wrap: anywhere; }
.ibh-bp__foot { border-block-start: 1px solid var(--ibh-bp-line); padding-block-start: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.ibh-bp__total { display: flex; flex-direction: column; }
.ibh-bp__total strong { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.ibh-bp__go { white-space: nowrap; background: var(--ibh-bp-btn); color: var(--ibh-bp-btn-ink); border: 0; padding: 16px 26px; border-radius: var(--ibh-radius-sm); font: inherit; font-weight: 700; font-size: 18px; min-height: 56px; cursor: pointer; }
.ibh-bp__go:disabled { opacity: .6; cursor: progress; }
.ibh-bp__note { font-size: 14px; color: var(--ibh-bp-text-2); margin: 0; }
.ibh-bp__msg { font-size: 15px; margin: 0; padding: 10px 12px; border: 1px solid var(--ibh-bp-line); border-radius: var(--ibh-radius-sm); }
.ibh-bp__msg a { font-weight: 600; text-decoration: underline; }
.ibh-bp__stamp { position: absolute; inset-block-start: 58px; inset-inline-end: -14px; border: 2px solid var(--ibh-bp-accent); color: var(--ibh-bp-accent); background: var(--ibh-bp); font-family: var(--ibh-mono); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 4px; transform: rotate(-8deg); }
html[dir="rtl"] .ibh-bp__stamp { transform: rotate(8deg); }
.ibh-bp-mini { display: none; }
@media (max-width: 719.98px) {
    .ibh-desk { padding-block-end: 140px; }
    .ibh-bp__v { padding-inline-start: 0; }
    .ibh-bp__stamp { inset-inline-end: 8px; }
    .ibh-bp-mini { display: flex; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 1030; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--ibh-bp); color: var(--ibh-bp-text); border-block-start: 1px solid var(--ibh-bp-line); box-shadow: 0 -16px 40px -24px var(--ibh-shadow); }
    .ibh-bp-mini strong { font-size: 18px; }
    .ibh-bp-mini .ibh-bp__go { min-height: 48px; padding: 10px 18px; font-size: 16px; }
}

/* ---- 8. Homepage sections --------------------------------------------- */
.ibh-jump { border-block: 1px solid var(--ibh-line); background: var(--ibh-bg-2); }
.ibh-jump .ibh-wrap { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-block: 14px; font-size: 15px; color: var(--ibh-text-2); }
.ibh-jump a { color: var(--ibh-text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.ibh-table-box { overflow-x: auto; border: 1px solid var(--ibh-line); border-radius: var(--ibh-radius); background: var(--ibh-surface); }
.ibh-plans { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 16px; color: var(--ibh-text); }
.ibh-plans th, .ibh-plans td { padding: 14px 20px; border-block-end: 1px solid var(--ibh-line); text-align: start; vertical-align: bottom; }
.ibh-plans thead th { padding-block: 22px; }
.ibh-plans tbody th { font-weight: 500; }
.ibh-plans .is-popular { background: var(--ibh-bg-2); }
.ibh-plans thead th.is-popular { box-shadow: inset 0 4px 0 var(--ibh-ink); }
.ibh-plans__name { display: block; font-size: 22px; font-weight: 700; }
.ibh-plans__price { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.ibh-plans__per { color: var(--ibh-text-2); font-weight: 400; }
.ibh-tag { display: inline-block; font-size: 13px; font-weight: 700; background: var(--ibh-ink); color: var(--ibh-ink-on); padding: 2px 8px; border-radius: 4px; margin-block-end: 4px; }
.ibh-plans tr:last-child th, .ibh-plans tr:last-child td { border-block-end: 0; }
.ibh-plans .ibh-btn { width: 100%; }
.ibh-foot { font-size: 14px; color: var(--ibh-text-2); margin: 16px 0 0; }
.ibh-feat-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--ibh-text-2); flex-grow: 1; }
.ibh-feat-list li { display: flex; gap: 10px; }
.ibh-feat-list li::before { content: "✓" / ""; color: var(--ibh-ok); }
.ibh-tile svg { color: var(--ibh-text); }
.ibh-band-bp { margin-block-start: 16px; background-color: var(--ibh-bp); color: var(--ibh-bp-text); border: 1px solid var(--ibh-bp-line); border-radius: var(--ibh-radius); padding: 26px 28px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center;
    background-image: linear-gradient(var(--ibh-bp-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ibh-bp-grid) 1px, transparent 1px); background-size: 24px 24px; }
.ibh-band-bp svg { color: var(--ibh-bp-accent); flex: none; }
.ibh-band-bp div { flex: 1 1 360px; display: flex; flex-direction: column; gap: 4px; }
.ibh-band-bp b { font-size: 22px; }
.ibh-band-bp span { color: var(--ibh-bp-text-2); }
.ibh-split { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.ibh-split > :first-child { flex: 1 1 420px; display: flex; flex-direction: column; gap: 18px; }
.ibh-split > :last-child { flex: 999 1 560px; min-width: 0; }
.ibh-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 17px; counter-reset: ibhstep; }
.ibh-steps li { display: flex; gap: 14px; align-items: baseline; counter-increment: ibhstep; }
.ibh-steps li::before { content: "0" counter(ibhstep); font-family: var(--ibh-mono); font-size: 14px; color: var(--ibh-text-2); }
.ibh-builder { background-color: var(--ibh-bp); color: var(--ibh-bp-text); border: 1px solid var(--ibh-bp-line); border-radius: var(--ibh-radius); padding: 18px; display: flex; gap: 14px; height: 440px;
    background-image: linear-gradient(var(--ibh-bp-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ibh-bp-grid) 1px, transparent 1px); background-size: 24px 24px; }
.ibh-builder__pal { flex: 0 0 150px; display: flex; flex-direction: column; gap: 8px; border-inline-end: 1px solid var(--ibh-bp-line); padding-inline-end: 14px; }
.ibh-builder__pal span { border: 1px dashed var(--ibh-bp-line); border-radius: 6px; padding: 8px 10px; font-size: 14px; }
.ibh-builder__pal .ibh-bp__k { margin-block-end: 4px; }
.ibh-builder__page { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; background: var(--ibh-bp-canvas); border: 1px solid var(--ibh-bp-line); border-radius: 6px; padding: 14px; }
.ibh-bk { border: 1.5px solid currentColor; border-radius: 4px; }
.ibh-bk--nav { height: 26px; display: flex; align-items: center; justify-content: space-between; padding-inline: 10px; }
.ibh-bk i, .ibh-bk s { display: block; text-decoration: none; border-radius: 4px; background: currentColor; }
.ibh-bk--nav i { width: 60px; height: 8px; opacity: .7; }
.ibh-bk--nav s { width: 90px; height: 6px; opacity: .35; }
.ibh-bk--hero s { width: 75%; height: 7px; opacity: .35; }
.ibh-bk--form { display: flex; align-items: center; justify-content: center; }
.ibh-bk--form s { width: 120px; height: 8px; opacity: .5; }
.ibh-bk--hero { flex: 0 0 130px; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px; }
.ibh-bk--hero i { display: block; height: 14px; width: 55%; border-radius: 4px; background: currentColor; opacity: .8; }
.ibh-bk--hero b { display: block; height: 24px; width: 90px; border-radius: 4px; background: var(--ibh-bp-accent); }
.ibh-bk--cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 0; }
.ibh-bk--cards span { height: 90px; border: 1.5px solid currentColor; border-radius: 4px; opacity: .85; }
.ibh-bk--form { height: 52px; border-style: dashed; }
.ibh-bk--pub { margin-block-start: auto; align-self: flex-end; background: var(--ibh-bp-btn); color: var(--ibh-bp-btn-ink); font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 6px; border: 0; }
@media (max-width: 575.98px) { .ibh-builder { height: auto; flex-direction: column; } .ibh-builder__pal { flex: none; flex-direction: row; flex-wrap: wrap; border: 0; padding: 0; } }
.ibh-search { flex: 1 1 300px; max-width: 520px; min-width: 0; display: flex; gap: 8px; border-block-end: 3px solid var(--ibh-text); }
.ibh-search input { flex: 1 1 auto; min-width: 0; width: 1px; font-family: var(--ibh-mono); font-size: 22px; color: var(--ibh-text); background: transparent; border: 0; padding: 10px 0; }
.ibh-search input:focus { outline: none; }
.ibh-search .ibh-btn { min-height: 44px; margin-block-end: 6px; }
.ibh-domtiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-block: 24px; }
.ibh-domtiles b { font-family: var(--ibh-mono); font-size: 24px; }
.ibh-domtiles span { color: var(--ibh-text-2); font-size: 15px; }
.ibh-links { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 16px; }
.ibh-links a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ibh-mail { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.ibh-mail > :first-child { flex: 1 1 380px; display: flex; flex-direction: column; gap: 14px; }
.ibh-mail > :last-child { flex: 999 1 560px; min-width: 0; }
.ibh-price { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.ibh-years { display: grid; grid-template-columns: repeat(var(--ibh-years, 9), minmax(0, 1fr)); gap: 6px; margin-block: 40px; }
.ibh-years span { display: flex; flex-direction: column; gap: 8px; font-family: var(--ibh-mono); font-size: 13px; color: var(--ibh-text-2); }
.ibh-years span::before { content: ""; display: block; height: 8px; border-radius: 4px; background: var(--ibh-text); }
.ibh-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
.ibh-points div { display: flex; flex-direction: column; gap: 8px; border-block-start: 2px solid var(--ibh-text); padding-block-start: 16px; }
.ibh-points h3 { margin: 0; font-size: 20px; font-weight: 600; }
.ibh-points p { margin: 0; color: var(--ibh-text-2); }
.ibh-apps { background: var(--ibh-band); color: var(--ibh-band-text); border-radius: 12px; padding: 56px 48px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
body.ibh .ibh-apps h2 { margin: 0 0 12px; font-size: 40px; letter-spacing: -0.03em; font-weight: 700; color: var(--ibh-band-text); }
.ibh-apps p { margin: 0; color: var(--ibh-band-text-2); font-size: 18px; max-width: 34em; }
.ibh-apps > div { flex: 999 1 460px; min-width: 0; }
.ibh-apps .ibh-btn { background: var(--ibh-yellow); color: var(--ibh-yellow-ink); border-color: var(--ibh-yellow); }
.ibh-plans tbody td, .ibh-plans tbody th { vertical-align: top; }
.ibh-plans tbody tr:last-child td { vertical-align: middle; }
@media (max-width: 575.98px) { .ibh-apps { padding: 36px 24px; } .ibh-section { padding-block: 64px; } }

/* ---- 9. Motion (only when the visitor has not asked for less) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .ibh-bp__svg [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ibh-dash 1.1s ease-out forwards; }
    .ibh-bp__svg [pathLength]:nth-child(2) { animation-delay: .7s; }
    .ibh-bp__svg [pathLength]:nth-child(3) { animation-delay: .9s; }
    .ibh-bp__svg [pathLength]:nth-child(4) { animation-delay: 1.5s; }
    .ibh-bp__svg [pathLength]:nth-child(5) { animation-delay: 1.8s; }
    .ibh-bp__svg [pathLength]:nth-child(6) { animation-delay: 2s; }
    .ibh-bp__svg [pathLength]:nth-child(7) { animation-delay: 2.6s; }
    .ibh-bp__lines.is-a .ibh-bp__line, .ibh-bp__total.is-a strong { animation: ibh-draw-a .5s ease-out both; }
    .ibh-bp__lines.is-b .ibh-bp__line, .ibh-bp__total.is-b strong { animation: ibh-draw-b .5s ease-out both; }
    .ibh-bp__line:nth-child(2) { animation-delay: .08s !important; }
    .ibh-bp__line:nth-child(3) { animation-delay: .16s !important; }
    .ibh-bp__line:nth-child(4) { animation-delay: .24s !important; }
    .ibh-bp__line:nth-child(5) { animation-delay: .32s !important; }
    .ibh-bp__stamp { animation: ibh-stamp .6s 2.8s ease-out both; }
    .ibh-bp__cursor { animation: ibh-blink 1s step-end 5; }
    .ibh-tile, .ibh-chip { transition: transform .2s ease, border-color .2s ease; }
    a.ibh-tile:hover, .ibh-grid .ibh-tile:hover { transform: translateY(-3px); }
    .ibh-bk { animation: ibh-build 8s ease-out 2; }
    .ibh-bk--hero { animation-delay: .5s; } .ibh-bk--cards { animation-delay: 1s; } .ibh-bk--form { animation-delay: 1.5s; } .ibh-bk--pub { animation-delay: 2s; }
    .ibh-years.is-visible span::before { animation: ibh-year 4s ease-out both; animation-delay: calc(var(--i, 0) * .25s); }
}
@keyframes ibh-dash { to { stroke-dashoffset: 0; } }
@keyframes ibh-draw-a { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ibh-draw-b { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ibh-stamp { 0% { opacity: 0; scale: 1.6; } 60% { opacity: 1; scale: .95; } 100% { opacity: 1; scale: 1; } }
@keyframes ibh-blink { 50% { opacity: 0; } }
@keyframes ibh-build { 0%, 8% { opacity: 0; transform: translateY(14px) scale(.98); } 16%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes ibh-year { 0%, 10% { background: var(--ibh-line); } 20%, 100% { background: var(--ibh-text); } }

/* ---- 10. Client area & stock pages: re-colour only (FR-027) ----------- */
body.ibh #main-body { background: var(--ibh-bg); color: var(--ibh-text); }
body.ibh .card, body.ibh .panel, body.ibh .list-group-item, body.ibh .modal-content, body.ibh .popover,
body.ibh .table, body.ibh .tile, body.ibh .sidebar .card, body.ibh .client-home-cards .card { background-color: var(--ibh-surface); color: var(--ibh-text); border-color: var(--ibh-line); }
body.ibh .card-header, body.ibh .card-footer, body.ibh .modal-header, body.ibh .modal-footer { background-color: var(--ibh-bg-2); border-color: var(--ibh-line); color: var(--ibh-text); }
body.ibh .table td, body.ibh .table th, body.ibh .table thead th { border-color: var(--ibh-line); color: var(--ibh-text); }
body.ibh .table-striped tbody tr:nth-of-type(odd) { background-color: var(--ibh-bg-2); }
body.ibh .form-control, body.ibh .custom-select, body.ibh .input-group-text { background-color: var(--ibh-surface); color: var(--ibh-text); border-color: var(--ibh-line); }
body.ibh .form-control:focus { border-color: var(--ibh-focus); box-shadow: 0 0 0 3px var(--ibh-bp-line); }
body.ibh .form-control::placeholder { color: var(--ibh-text-2); }
body.ibh .text-muted, body.ibh small, body.ibh .small { color: var(--ibh-text-2) !important; }
body.ibh .btn-default, body.ibh .btn-light, body.ibh .btn-secondary { background-color: var(--ibh-surface); color: var(--ibh-text); border-color: var(--ibh-line); }
body.ibh .btn-primary, body.ibh .btn-success { background-color: var(--ibh-ink); border-color: var(--ibh-ink); color: var(--ibh-ink-on); }
body.ibh .btn-primary:hover, body.ibh .btn-success:hover { color: var(--ibh-ink-on); opacity: .92; }
body.ibh .list-group-item.active { background-color: var(--ibh-ink); border-color: var(--ibh-ink); color: var(--ibh-ink-on); }
body.ibh .page-link { background-color: var(--ibh-surface); border-color: var(--ibh-line); color: var(--ibh-text); }
body.ibh .alert-info { background-color: var(--ibh-bp); border-color: var(--ibh-bp-line); color: var(--ibh-bp-text); }
body.ibh .close { color: var(--ibh-text); }
body.ibh hr { border-color: var(--ibh-line); }
body.ibh .bg-white { background-color: var(--ibh-surface) !important; }
body.ibh .modal-localisation .modal-content { background-color: var(--ibh-band); color: var(--ibh-band-text); }
body.ibh .modal-localisation .item { color: var(--ibh-band-text); }

/* ---- 11. Cart steps (standard_cart, light DOM) ------------------------
   standard_cart/css/all.min.css loads after this file and uses
   #order-standard_cart selectors, so these restate with the same ID. -- */
/* ---- standard_cart steps: surfaces ------------------------------------ */
body.ibh #order-standard_cart { color: var(--ibh-text); }
body.ibh #order-standard_cart h1, body.ibh #order-standard_cart .font-size-36 { font-weight: 700; letter-spacing: -0.03em; color: var(--ibh-text); }
html[lang="ar"] body.ibh #order-standard_cart h1 { letter-spacing: 0; }
body.ibh #order-standard_cart .product-info,
body.ibh #order-standard_cart .view-cart-items,
body.ibh #order-standard_cart .domain-checker-container,
body.ibh #order-standard_cart .sidebar-collapsed .panel,
body.ibh #order-standard_cart .domain-selection-options .option,
body.ibh #order-standard_cart .addon-products .panel-addon,
body.ibh #order-standard_cart .field-container,
body.ibh #order-standard_cart .account,
body.ibh #order-standard_cart .cc-input-container,
body.ibh #order-standard_cart .order-confirmation { background-color: var(--ibh-surface); color: var(--ibh-text); border-color: var(--ibh-line); }
body.ibh #order-standard_cart .view-cart-items-header,
body.ibh #order-standard_cart .domain-selection-options .option-selected,
body.ibh #order-standard_cart .addon-products .panel-addon-selected { background-color: var(--ibh-bg-2); color: var(--ibh-text); border-color: var(--ibh-text-2); }
body.ibh #order-standard_cart .item, body.ibh #order-standard_cart .view-cart-items .item { border-color: var(--ibh-line); }
body.ibh #order-standard_cart .sub-heading { border-color: var(--ibh-line); }
body.ibh #order-standard_cart .sub-heading span { background-color: var(--ibh-bg); color: var(--ibh-text-2); }
body.ibh #order-standard_cart .prepend-icon .field-icon { color: var(--ibh-text-2); }
body.ibh #order-standard_cart label, body.ibh #order-standard_cart .text-muted { color: var(--ibh-text-2); }

/* ---- the order summary reads as the blueprint ------------------------- */
body.ibh #order-standard_cart .order-summary,
body.ibh #order-standard_cart .summary-container {
    background-color: var(--ibh-bp); color: var(--ibh-bp-text); border: 1px solid var(--ibh-bp-line); border-radius: var(--ibh-radius-sm);
    background-image: linear-gradient(var(--ibh-bp-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ibh-bp-grid) 1px, transparent 1px); background-size: 24px 24px;
}
body.ibh #order-standard_cart .order-summary h2 { background: transparent; color: var(--ibh-bp-text-2); font-family: var(--ibh-mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; border-block-end: 1px solid var(--ibh-bp-line); }
html[lang="ar"] body.ibh #order-standard_cart .order-summary h2 { font-family: var(--ibh-font-ar); letter-spacing: 0; }
body.ibh #order-standard_cart .order-summary .summary-container { border: 0; background: transparent; }
body.ibh #order-standard_cart .order-summary .product-name, body.ibh #order-standard_cart .order-summary .total-due-today .amt { color: var(--ibh-bp-text); }
body.ibh #order-standard_cart .order-summary .total-due-today .amt { font-weight: 700; letter-spacing: -0.02em; }
body.ibh #order-standard_cart .order-summary .product-group, body.ibh #order-standard_cart .order-summary .total-due-today span:not(.amt) { color: var(--ibh-bp-text-2); }
body.ibh #order-standard_cart .order-summary .bordered-totals { border-color: var(--ibh-bp-line); }
body.ibh #order-standard_cart .order-summary .loader { color: var(--ibh-bp-accent); }

/* ---- actions ---------------------------------------------------------- */
body.ibh #order-standard_cart .btn-checkout,
body.ibh #order-standard_cart #btnCompleteProductConfig,
body.ibh #order-standard_cart #btnCompleteOrder,
body.ibh #order-standard_cart .btn-primary { background-color: var(--ibh-bp-btn); border-color: var(--ibh-bp-btn); color: var(--ibh-bp-btn-ink); font-weight: 700; border-radius: var(--ibh-radius-sm); min-height: 48px; }
body.ibh #order-standard_cart .btn-checkout:hover,
body.ibh #order-standard_cart #btnCompleteProductConfig:hover,
body.ibh #order-standard_cart #btnCompleteOrder:hover,
body.ibh #order-standard_cart .btn-primary:hover { color: var(--ibh-bp-btn-ink); opacity: .92; }
body.ibh #order-standard_cart .btn-default, body.ibh #order-standard_cart .btn-link { color: var(--ibh-text); }
body.ibh #order-standard_cart .btn-default { background-color: var(--ibh-surface); border-color: var(--ibh-line); }
body.ibh #order-standard_cart .alert-warning, body.ibh #order-standard_cart .alert-info { background-color: var(--ibh-bg-2); border-color: var(--ibh-line); color: var(--ibh-text); }
body.ibh #order-standard_cart .alert-danger { background-color: var(--ibh-bg-2); border-color: var(--ibh-error); color: var(--ibh-text); }

/* ---- payment method & choice tiles (radios as set-up desk chips) ------ */
body.ibh #order-standard_cart #paymentGatewaysContainer label,
body.ibh #order-standard_cart .domain-selection-options label { color: var(--ibh-text); }
body.ibh #order-standard_cart .iradio_square-blue, body.ibh #order-standard_cart .icheckbox_square-blue { filter: grayscale(1); }

/* ---- standard_cart's own #order-standard_cart rules win on specificity,
        so the generic client-area re-colour is restated here ----------- */
body.ibh #order-standard_cart .panel, body.ibh #order-standard_cart .card,
body.ibh #order-standard_cart .panel-body, body.ibh #order-standard_cart .card-body,
body.ibh #order-standard_cart .panel-heading, body.ibh #order-standard_cart .card-header,
body.ibh #order-standard_cart .primary-bg-color { background-color: var(--ibh-surface); color: var(--ibh-text); border-color: var(--ibh-line); }
body.ibh #order-standard_cart .panel-heading .panel-title, body.ibh #order-standard_cart .card-header .card-title { color: var(--ibh-text); }
body.ibh #order-standard_cart .panel-price { background-color: var(--ibh-bg-2); color: var(--ibh-text); }
body.ibh #order-standard_cart .panel-add { background-color: var(--ibh-ink); color: var(--ibh-ink-on); }
body.ibh #order-standard_cart .form-control, body.ibh #order-standard_cart .custom-select,
body.ibh #order-standard_cart select, body.ibh #order-standard_cart textarea,
body.ibh #order-standard_cart input[type="text"], body.ibh #order-standard_cart input[type="email"],
body.ibh #order-standard_cart input[type="password"], body.ibh #order-standard_cart input[type="tel"],
body.ibh #order-standard_cart input[type="number"] { background-color: var(--ibh-surface); color: var(--ibh-text); border-color: var(--ibh-line); }
body.ibh #order-standard_cart .form-control:focus { border-color: var(--ibh-focus); }
body.ibh .sidebar .panel-heading, body.ibh .sidebar .card-header { background-color: var(--ibh-bg-2); color: var(--ibh-text); }
body.ibh #order-standard_cart .alert-success, body.ibh .alert-success { background-color: var(--ibh-bp); border-color: var(--ibh-bp-line); color: var(--ibh-bp-text); }
body.ibh #order-standard_cart .btn-info, body.ibh .btn-info { background-color: transparent; border-color: var(--ibh-line); color: var(--ibh-text); }

/* ---- 12. Stock pages with hard-coded white (domain pricing, DataTables).
   The featured-TLD tiles stay white on purpose: their logos are images
   drawn for a white background. ------------------------------------- */
body.ibh table.dataTable tbody tr, body.ibh table.dataTable tbody td, body.ibh table.dataTable thead th,
body.ibh .table td, body.ibh .table th,
body.ibh .dataTables_wrapper .form-control, body.ibh .dataTables_wrapper .page-link { background-color: var(--ibh-surface); color: var(--ibh-text); border-color: var(--ibh-line); }
body.ibh .dataTables_wrapper .page-item.active .page-link { background-color: var(--ibh-ink); color: var(--ibh-ink-on); border-color: var(--ibh-ink); }

/* ---- 13. Logged-in client area: surfaces Nexus paints with fixed light colours */
body.ibh .ibh-header .topbar { background-color: var(--ibh-bg-2); color: var(--ibh-text-2); border-block-end: 1px solid var(--ibh-line); }
body.ibh .ibh-header .topbar .btn, body.ibh .ibh-header .topbar a { color: var(--ibh-text-2); }
body.ibh .verification-banner { background-color: var(--ibh-bg-2); color: var(--ibh-text); border-color: var(--ibh-line); }
body.ibh .card .card-footer, body.ibh .client-home-cards .card .card-footer { background-color: var(--ibh-bg-2); border-color: var(--ibh-line); color: var(--ibh-text); }
body.ibh .btn.btn-default, body.ibh .card .btn.btn-default { background-color: var(--ibh-surface); color: var(--ibh-text); border-color: var(--ibh-line); }
body.ibh .btn.btn-success { background-color: var(--ibh-ink); border-color: var(--ibh-ink); color: var(--ibh-ink-on); }
body.ibh .primary-content .client-home-cards .card .card-header .btn { background-color: var(--ibh-surface); color: var(--ibh-text); border-color: var(--ibh-line); }

/* ---- 14. Header on wide screens: keep brand, nav and tools on one row --- */
@media (min-width: 1300px) {
    .ibh-bar__inner { flex-wrap: nowrap; }
    .ibh-nav { min-width: 0; }
    .ibh-nav .navbar-nav { flex-wrap: nowrap; gap: 2px 14px; }
    .ibh-nav .nav-link { white-space: nowrap; }
    .ibh-nav .nav-link { font-size: 14px; }
    .ibh-tools { flex: none; }
}
body.ibh .ibh-nav #nav > li > a, body.ibh .ibh-nav .navbar-nav > li > a { color: var(--ibh-text-2); }
body.ibh .ibh-nav #nav > li > a:hover, body.ibh .ibh-nav #nav > li > a:focus, body.ibh .ibh-nav .navbar-nav > li.active > a { color: var(--ibh-text); }

/* ---- 15. Hero: say what we sell, with live "from" prices, name box first - */
.ibh-desk .ibh-h1 { font-size: clamp(40px, 5.2vw, 72px); }
.ibh-desk__lead { margin: 10px 0 0; color: var(--ibh-text-2); font-size: 18px; max-width: 34em; }
.ibh-q--name legend { font-size: 26px; }
.ibh-q--name .ibh-name { border-block-end-width: 4px; max-width: 680px; }
.ibh-q--name .ibh-name input, .ibh-q--name .ibh-name__tld { font-size: clamp(26px, 3.4vw, 38px); }
@media (prefers-reduced-motion: no-preference) {
    .ibh-price-tag::after { transform: scaleX(0); transform-origin: left; animation: ibh-underline .7s cubic-bezier(.2,.7,.2,1) both; }
    .ibh-prices .ibh-price-tag:nth-of-type(1)::after { animation-delay: .5s; }
    .ibh-prices .ibh-price-tag:nth-of-type(2)::after { animation-delay: .75s; }
    .ibh-prices .ibh-price-tag:nth-of-type(3)::after { animation-delay: 1s; }
}
@media (max-width: 575.98px) {
    .ibh-desk__lead { font-size: 16px; }
}
@media (max-width: 719.98px) {
    .ibh-bp-mini.is-hidden { visibility: hidden; transform: translateY(100%); }
}
@media (prefers-reduced-motion: no-preference) { .ibh-bp-mini { transition: transform .25s ease, visibility .25s; } }
@keyframes ibh-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- 16. Store product listing (cart.php?gid / store/…) in dark mode ---- */
body.ibh #order-standard_cart .products .product,
body.ibh #order-standard_cart .products .product header,
body.ibh #order-standard_cart .products .product footer { background-color: var(--ibh-surface); color: var(--ibh-text); border-color: var(--ibh-line); }
body.ibh #order-standard_cart .products .product header span,
body.ibh #order-standard_cart .products .product .product-desc,
body.ibh #order-standard_cart .products .product .price { color: var(--ibh-text); }
body.ibh #order-standard_cart .products .product .qty, body.ibh #order-standard_cart .products .product footer small { color: var(--ibh-text-2); }

/* ---- 17. Hero layout: one sentence of real prices; the blueprint is the picture.
   Grid areas so the drawing sits next to the headline on wide screens and
   directly under it on tablets — never pushed below the questions. ------- */
.ibh-prices { margin: 4px 0 0; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.6; max-width: 32em; color: var(--ibh-text-2); }
.ibh-price-tag { position: relative; display: inline-flex; align-items: baseline; gap: 2px; color: var(--ibh-text); text-decoration: none; white-space: nowrap; }
:where(body.ibh) a.ibh-price-tag:hover { color: var(--ibh-text); text-decoration: none; }
.ibh-price-tag b { font-family: var(--ibh-mono); font-weight: 700; font-size: 1.05em; letter-spacing: -0.02em; }
.ibh-price-tag small { font-family: var(--ibh-mono); font-size: .62em; color: var(--ibh-text-2); }
.ibh-price-tag::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 2px; block-size: 3px; border-radius: 2px; background: var(--ibh-bp-accent); }
html[dir="rtl"] .ibh-price-tag::after { transform-origin: right; }
.ibh-price-tag:hover::after { block-size: 5px; }
.ibh-desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); grid-template-areas: "head bp" "qs bp"; gap: 32px 56px; align-items: start; }
.ibh-desk__head { grid-area: head; }
.ibh-desk__qs { grid-area: qs; padding-block-start: 0; }
.ibh-desk > .ibh-bp { grid-area: bp; position: sticky; inset-block-start: 24px; }
@media (max-width: 1099.98px) {
    .ibh-desk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "bp" "qs"; }
    .ibh-desk > .ibh-bp { position: relative; inset-block-start: auto; }
    .ibh-bp__svg { max-inline-size: 520px; margin-inline: auto; }
}
html[lang="ar"] .ibh-price-tag small { font-family: var(--ibh-font-ar); font-size: .7em; }
@media (max-width: 719.98px) {
    .ibh-desk { grid-template-areas: "head" "qs" "bp"; }
}

/* ---- 18. Client-area surfaces Nexus paints with fixed light colours (T053)
   Found by auditing the logged-in pages in dark mode. Each selector restates
   the rule that out-ranks §10–§13 (theme.min.css is more specific). -------- */
body.ibh .dataTables_wrapper .dataTables_filter label .form-control { background-color: var(--ibh-surface); color: var(--ibh-text); border-color: var(--ibh-line); }
body.ibh .dataTables_wrapper table.table-list thead th,
body.ibh .dataTables_wrapper table.table-list thead th.sorting_asc,
body.ibh .dataTables_wrapper table.table-list thead th.sorting_desc { background-color: var(--ibh-bg-2); color: var(--ibh-text); border-color: var(--ibh-line); }
body.ibh .alert-danger { background-color: var(--ibh-bg-2); border-color: var(--ibh-error); color: var(--ibh-text); }
body.ibh .alert-warning { background-color: var(--ibh-bg-2); border-color: var(--ibh-warning); color: var(--ibh-text); }
body.ibh .md-editor, body.ibh .md-editor > .md-header, body.ibh .md-editor > .md-footer,
body.ibh .md-editor > textarea { background-color: var(--ibh-surface); color: var(--ibh-text); border-color: var(--ibh-line); }
/* theme.min.css declares `.md-editor > .btn-toolbar`, `.md-preview` and `textarea.markdown-editor` as `background: … !important`; only !important can beat it, and it stays scoped to body.ibh (this theme). */
body.ibh .md-editor > .btn-toolbar, body.ibh .md-editor > .md-header { background-color: var(--ibh-bg-2) !important; }
body.ibh .md-editor > .md-preview, body.ibh .md-editor > textarea.markdown-editor { background-color: var(--ibh-surface) !important; color: var(--ibh-text) !important; }
body.ibh .custom-file-label, body.ibh .custom-file-label::after { background-color: var(--ibh-surface); color: var(--ibh-text); border-color: var(--ibh-line); }
/* register.php: theme.min.css styles `#registration .field` by id, which out-ranks the generic form rules */
body.ibh #registration .field, body.ibh #registration .form-control, body.ibh #registration .custom-select { background-color: var(--ibh-surface); color: var(--ibh-text); border-color: var(--ibh-line); }
body.ibh .progress { background-color: var(--ibh-line); }

/* ---- 19. Control edges at 3:1 (WCAG 1.4.11) -------------------------------
   --ibh-line stays the faint divider for cards and sections; anything the
   visitor presses or types into gets --ibh-line-strong so it reads as a
   control. Placed last so it wins over the earlier border-color rules;
   hover/checked states below still win by specificity. ------------------- */
.ibh-chip, .ibh-tool, .ibh-btn--line { border-color: var(--ibh-line-strong); }
body.ibh .form-control, body.ibh .custom-select, body.ibh .input-group-text,
body.ibh .dataTables_wrapper .dataTables_filter label .form-control,
body.ibh #registration .field, body.ibh #registration .form-control, body.ibh #registration .custom-select,
body.ibh #order-standard_cart .form-control, body.ibh #order-standard_cart .custom-select,
body.ibh #order-standard_cart select, body.ibh #order-standard_cart textarea,
body.ibh #order-standard_cart input[type="text"], body.ibh #order-standard_cart input[type="email"],
body.ibh #order-standard_cart input[type="password"], body.ibh #order-standard_cart input[type="tel"],
body.ibh #order-standard_cart input[type="number"],
body.ibh .md-editor, body.ibh .custom-file-label { border-color: var(--ibh-line-strong); }
body.ibh .form-control:focus, body.ibh #order-standard_cart .form-control:focus { border-color: var(--ibh-focus); }

/* ---- 20. Navbar: stronger hierarchy, current page, sticky, skip link ------ */
html { scroll-padding-block-start: 96px; }
/* theme.min.css gives body height:100%, which would cap a sticky header to the first screen */
body.ibh { height: auto; min-height: 100%; }
body.ibh .ibh-header { position: sticky; inset-block-start: 0; z-index: 1020; }
.ibh-brand { font-size: 24px; }
body.ibh .ibh-nav #nav > li > a, body.ibh .ibh-nav .navbar-nav > li > a { color: var(--ibh-text); font-weight: 500; }
body.ibh .ibh-nav #nav > li > a:hover, body.ibh .ibh-nav #nav > li > a:focus { color: var(--ibh-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
body.ibh .ibh-nav #nav > li > a[aria-current="page"], body.ibh .ibh-nav #nav > li.ibh-has-current > a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; font-weight: 600; }
body.ibh .ibh-nav .dropdown-item a[aria-current="page"] { font-weight: 700; }
@media (min-width: 1500px) { .ibh-nav .nav-link, body.ibh .ibh-nav #nav > li > a { font-size: 15px; } }
.ibh-skip { position: absolute; inset-inline-start: 8px; inset-block-start: -120px; z-index: 2000; padding: 12px 18px; border-radius: var(--ibh-radius-sm); background: var(--ibh-ink); color: var(--ibh-ink-on); font-weight: 600; text-decoration: none; }
.ibh-skip:focus { inset-block-start: 8px; color: var(--ibh-ink-on); }

/* Between Bootstrap's xl break (1200) and ours (1300) the stock rules would still
   show the full menu, which does not fit next to the brand and tools: keep it
   collapsed behind the Menu button until there is room (see §4 and §14). */
@media (min-width: 1200px) and (max-width: 1299.98px) {
    .ibh-nav .navbar-collapse:not(.show) { display: none !important; }
    .ibh-nav .navbar-collapse.show { display: block !important; }
    .ibh-nav .navbar-nav { flex-direction: column; }
}

/* Top bar (signed in): the "Logged in as" label inherited white-on-light from Nexus */
body.ibh .ibh-header .topbar .input-group-text { background: transparent; border: 0; color: var(--ibh-text-2); }

/* ---- 21. Footer legal line and in-copy links ------------------------------ */
.ibh-footer__legal { display: flex; flex-direction: column; gap: 2px; }
body.ibh .ibh-footer address { margin: 0; font-style: normal; }
body.ibh .ibh-footer .copyright { margin: 0; }
.ibh-points p a { color: var(--ibh-text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.ibh-points p a:hover { text-decoration-thickness: 2px; }

/* ---- 22. Navbar polish (owner report 2026-10-23, dark mode) ---------------
   theme.min.css fixes a dark grey on `header.header .navbar a`, which out-ranks
   the earlier link rules: dropdown links were dark grey on the dark panel and
   only the hovered item was readable. These selectors outrank it, and give the
   panel a real surface, 44px items and a visible hover/focus state. ------- */
body.ibh .ibh-header { background: var(--ibh-surface); }
body.ibh .ibh-bar { background: var(--ibh-surface); }
body.ibh .ibh-nav #nav > li > a, body.ibh .ibh-nav .navbar-nav > li > a { padding-block: 14px; }
body.ibh .ibh-nav .dropdown-menu, body.ibh .ibh-account .dropdown-menu {
    background: var(--ibh-surface); border: 1px solid var(--ibh-line-strong); border-radius: var(--ibh-radius);
    padding: 6px; min-width: 250px; margin-block-start: 6px; z-index: 1040; box-shadow: 0 20px 44px -14px var(--ibh-shadow);
}
body.ibh .ibh-header .navbar .dropdown-item, body.ibh .ibh-header .navbar .dropdown-item a { color: var(--ibh-text); }
body.ibh .ibh-header .navbar .dropdown-item { padding: 0; border-radius: var(--ibh-radius-sm); background: transparent; }
body.ibh .ibh-header .navbar .dropdown-item > a { display: flex; align-items: center; min-height: 44px; padding: 10px 14px !important; font-size: 15px; text-decoration: none; border-radius: var(--ibh-radius-sm); }
body.ibh .ibh-header .navbar .dropdown-item:hover, body.ibh .ibh-header .navbar .dropdown-item:focus-within { background: var(--ibh-bg-2); color: var(--ibh-text); }
body.ibh .ibh-header .navbar .dropdown-item > a:hover, body.ibh .ibh-header .navbar .dropdown-item > a:focus { color: var(--ibh-text); background: transparent; text-decoration: none; }
body.ibh .ibh-header .navbar .dropdown-item > a:focus-visible { outline: 3px solid var(--ibh-focus); outline-offset: -3px; }
body.ibh .ibh-header .navbar .dropdown-item > a:active { background: var(--ibh-ink); color: var(--ibh-ink-on); }
body.ibh .ibh-header .navbar .dropdown-divider, body.ibh .ibh-header .nav-divider { border-color: var(--ibh-line); margin-block: 6px; }
body.ibh .ibh-header .navbar .dropdown-item a[aria-current="page"] { font-weight: 700; }

/* ---- 23. About page and the infrastructure map (feature 005) ---------------
   Roles reuse existing tokens so the map has light/dark parity with no new
   colours: back-office = blueprint accent, hosting = ok, DNS = warning,
   Tawaasal = notice. The stage is forced left-to-right (geography does not
   mirror); tooltips and the list are ordinary text and follow the page. ------ */
.ibh-r-backend { --role: var(--ibh-bp-accent); }
.ibh-r-hosting { --role: var(--ibh-ok); }
.ibh-r-dns { --role: var(--ibh-warning); }
.ibh-r-app { --role: var(--ibh-notice); }

.ibh-about-hero { padding-block: 72px 24px; }
.ibh-about-hero .ibh-h1 { margin-block: 14px 20px; max-width: 14em; }
.ibh-about-hero__lead { max-width: 38em; font-size: 20px; }
.ibh-facts { margin: 0; display: flex; flex-direction: column; border-block-start: 2px solid var(--ibh-text); }
.ibh-facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; padding-block: 14px; border-block-end: 1px solid var(--ibh-line); }
.ibh-facts dt { font-family: var(--ibh-mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ibh-text-2); font-weight: 400; }
html[lang="ar"] .ibh-facts dt { font-family: var(--ibh-font-ar); letter-spacing: 0; text-transform: none; font-size: 14px; }
.ibh-facts dd { margin: 0; font-size: 17px; font-weight: 500; }
.ibh-facts address { margin: 0; font-style: normal; }

.ibh-map { overflow-x: clip; position: relative; background-color: var(--ibh-bp); color: var(--ibh-bp-text); border: 1px solid var(--ibh-bp-line); border-radius: var(--ibh-radius); padding: 22px; display: flex; flex-direction: column; gap: 14px;
    background-image: linear-gradient(var(--ibh-bp-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ibh-bp-grid) 1px, transparent 1px); background-size: 24px 24px; }
.ibh-map__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.ibh-map__filter { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--ibh-line-strong); border-radius: var(--ibh-radius-sm); background: var(--ibh-surface); color: var(--ibh-text); font: inherit; font-size: 15px; cursor: pointer; }
.ibh-map__filter i, .ibh-map__list h4 i { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--role); }
.ibh-map__filter[aria-pressed="false"] { background: transparent; color: var(--ibh-text-2); text-decoration: line-through; }
.ibh-map__filter[aria-pressed="false"] i { background: transparent; box-shadow: inset 0 0 0 2px var(--role); }
.ibh-map__stage { position: relative; max-width: 860px; margin-inline: auto; width: 100%; }
.ibh-map__svg { display: block; width: 100%; height: auto; }
.ibh-map__land path { fill: none; stroke: var(--ibh-bp-text-2); stroke-width: 3.4; stroke-linecap: round; opacity: .38; }
.ibh-flow { fill: none; stroke: var(--role); stroke-width: 1.6; stroke-dasharray: 3 9; stroke-linecap: round; opacity: .6; transition: opacity .25s ease; }
.ibh-packet { fill: var(--role); display: none; }
.ibh-node { transition: opacity .25s ease; }
.ibh-node__dot { fill: var(--role); }
.ibh-node__ring { fill: none; stroke: var(--role); stroke-width: 1.5; opacity: .55; transform-box: fill-box; transform-origin: center; }
.ibh-node__second { fill: none; stroke: var(--role); stroke-width: 2; }
.ibh-node.is-edge .ibh-node__dot { opacity: .85; }
.ibh-node.is-lit .ibh-node__dot { filter: drop-shadow(0 0 7px var(--role)); }
.ibh-node.is-lit .ibh-node__ring { opacity: 1; stroke-width: 2.5; }
.ibh-node.is-off, .ibh-flow.is-off, .ibh-packet.is-off, .ibh-pin.is-off { opacity: 0; pointer-events: none; }
.ibh-packet.is-off { display: none; }
.ibh-map__list > div.is-off { opacity: .35; }
.ibh-map__pins { position: absolute; inset: 0; pointer-events: none; }
.ibh-pin { position: absolute; width: 30px; height: 30px; transform: translate(-50%, -50%); pointer-events: auto; }
.ibh-pin.is-edge { width: 20px; height: 20px; }
.ibh-pin__tip { position: absolute; inset-block-end: calc(100% + 4px); inset-inline-start: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 10px; border-radius: var(--ibh-radius-sm); background: var(--ibh-ink); color: var(--ibh-ink-on); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 2; }
.ibh-pin.is-left .ibh-pin__tip { inset-inline-start: 0; transform: none; }
.ibh-pin.is-right .ibh-pin__tip { inset-inline-start: auto; inset-inline-end: 0; transform: none; }
.ibh-pin:hover .ibh-pin__tip, .ibh-pin.is-lit .ibh-pin__tip { opacity: 1; }
.ibh-map__note { margin: 0; font-size: 14px; color: var(--ibh-bp-text-2); }
.ibh-map__list-h { margin: 36px 0 14px; font-size: 20px; font-weight: 600; }
.ibh-map__list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ibh-map__list > div { background: var(--ibh-surface); border: 1px solid var(--ibh-line); border-radius: var(--ibh-radius); padding: 18px 20px; transition: opacity .25s ease; }
.ibh-map__list h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.ibh-map__list ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.ibh-map__list li { padding-block: 2px; }
.ibh-map__list li span { color: var(--ibh-text-2); }
.ibh-map__list p { margin: 0; font-size: 15px; color: var(--ibh-text-2); }
@media (max-width: 575.98px) { .ibh-map { padding: 14px; } .ibh-about-hero { padding-block: 48px 8px; } .ibh-about-hero__lead { font-size: 18px; } .ibh-pin__tip { font-size: 12px; } }

@media (prefers-reduced-motion: no-preference) {
    .ibh-flow { animation: ibh-flow 1.6s linear infinite; }
    .ibh-packet { display: block; offset-distance: 0%; animation: ibh-packet 5.5s linear infinite; animation-delay: calc(var(--i, 0) * -1.4s); }
    .ibh-node__ring { animation: ibh-ping 3.2s ease-out infinite; animation-delay: calc(var(--i, 0) * -.45s); }
    .ibh-node.is-edge .ibh-node__ring { animation-duration: 4.4s; }
}
@keyframes ibh-flow { to { stroke-dashoffset: -24; } }
@keyframes ibh-packet { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes ibh-ping { 0% { transform: scale(.8); opacity: .8; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* ---- 24. Tawaasal is our own product, not hosting: it is marked everywhere -
   diamond markers on the map, a dashed chip/card edge, an "Our own product"
   tag, and a note. The tools list and the Tawaasal card sit in §23's system. -- */
.ibh-own { display: inline-block; margin-inline-start: 6px; padding: 2px 8px; border: 1px solid var(--role, var(--ibh-notice)); border-radius: 4px; color: var(--role, var(--ibh-notice)); font-size: 13px; font-weight: 700; letter-spacing: .03em; line-height: 1.4; vertical-align: middle; }
html[lang="ar"] .ibh-own { letter-spacing: 0; }
.ibh-r-app .ibh-map__filter i, .ibh-map__list .ibh-r-app h4 i, .ibh-map__list--own h4 i { border-radius: 2px; transform: rotate(45deg) scale(.85); }
.ibh-map__filter.ibh-r-app { border-style: dashed; }
.ibh-node__diamond { fill: var(--role); }
.ibh-map__list--own { border: 1.5px dashed var(--role); }
.ibh-map__list li b { font-weight: 600; }
.ibh-map__own-note { margin-block-start: 14px !important; font-size: 14px; color: var(--ibh-text-2); }
.ibh-tools-list { margin: 0 0 28px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.ibh-tools-list li { padding: 10px 18px; border: 1px solid var(--ibh-line-strong); border-radius: var(--ibh-radius-sm); background: var(--ibh-surface); font-family: var(--ibh-mono); font-size: 15px; font-weight: 500; }
.ibh-own-card { max-width: 880px; padding: 28px; border: 2px dashed var(--role); border-radius: var(--ibh-radius); background: var(--ibh-surface); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ibh-own-card .ibh-own { margin: 0; }
.ibh-own-card h3 { margin: 0; font-size: 24px; font-weight: 600; }
.ibh-own-card p { margin: 0; color: var(--ibh-text-2); font-size: 17px; max-width: 46em; }
@media (max-width: 575.98px) { .ibh-own-card { padding: 20px; } .ibh-own-card h3 { font-size: 21px; } }