/*
 * 3bili customer portal — design system.
 *
 * One stylesheet for every customer page (public site, sign-in, /member).
 * Semantic tokens first, then base, layout, components and motion. Colours,
 * durations and sizes live only in the token layer; components read tokens.
 * Direction: written with logical properties (Arabic, right-to-left, is the
 * default); [dir="rtl"] selectors only where a direction must flip.
 */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */

:root {
    color-scheme: light;

    /* Canvas and surfaces */
    --canvas: #f5f7fa;
    --surface: #ffffff;
    --surface-2: #f2f5f8;
    --surface-3: #e9eef3;
    --raised: #ffffff;
    --border: #e2e8ef;
    --border-strong: #c9d3de;
    --row-hover: #f4f7fa;
    --scrim: rgb(9 16 30 / 0.46);

    /* Text */
    --text: #0e1726;
    --text-2: #3a4759;
    --muted: #5a6a7f;

    /* Accent: 3bili cyan */
    --accent: #077a96;        /* 4.96:1 under white text */
    --accent-strong: #066379;
    --accent-soft: #e2f6fb;
    --accent-ink: #076580;
    --on-accent: #ffffff;
    --focus: #077a96;

    /* Status */
    --success: #12823f;
    --success-soft: #e6f6ec;
    --success-ink: #0f6b34;
    --warning: #b45309;
    --warning-soft: #fdf2df;
    --warning-ink: #8f4206;
    --danger: #c0281e;
    --danger-soft: #fdebe9;
    --danger-ink: #a11f17;
    --info: #2453c8;
    --info-soft: #e9efff;
    --info-ink: #1d45a8;

    /* Operators (entity hues) and their text tones on their own tint */
    --syriatel: #e30613;
    --syriatel-soft: #fde9ea;
    --syriatel-ink: #a5030d;
    --mtn: #f5b800;
    --mtn-soft: #fff6d6;
    --mtn-ink: #7a5800;

    /* Brand navigation area: identical in both themes */
    --nav-bg: #0a1222;
    --nav-bg-2: #101b30;
    --nav-border: #1a2740;
    --nav-text: #c8d3e3;
    --nav-muted: #7f8ea6;
    --nav-hover: rgb(255 255 255 / 0.05);
    --nav-active: rgb(34 211 238 / 0.13);
    --nav-accent: #22d3ee;

    /* Elevation: hairline contact + ambient */
    --shadow-1: 0 0 0 1px rgb(15 23 42 / 0.04), 0 1px 2px rgb(15 23 42 / 0.05);
    --shadow-2: 0 0 0 1px rgb(15 23 42 / 0.04), 0 1px 2px rgb(15 23 42 / 0.05), 0 10px 28px -12px rgb(15 23 42 / 0.16);
    --shadow-3: 0 0 0 1px rgb(15 23 42 / 0.05), 0 2px 4px rgb(15 23 42 / 0.06), 0 28px 56px -18px rgb(15 23 42 / 0.30);
    --highlight: inset 0 0 0 0 transparent;

    /* Spacing (4/8) */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;

    /* Radii */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-full: 999px;

    /* Type */
    --font: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;
    --fs-4xl: 2.875rem;

    /* Motion */
    --dur-fast: 120ms;
    --dur-base: 220ms;
    --dur-slow: 420ms;
    --stagger: 40ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-pop: cubic-bezier(0.34, 1.5, 0.64, 1);

    /* Layout */
    --content: 1120px;
    --content-wide: 1320px;
    --content-narrow: 720px;
    --sidebar-w: 268px;
    --sidebar-w-collapsed: 76px;
    --topbar-h: 64px;
    --control-h: 44px;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --canvas: #070c17;
    --surface: #0d1524;
    --surface-2: #121c2f;
    --surface-3: #18243a;
    --raised: #141f34;
    --border: #1e2a40;
    --border-strong: #2b3a55;
    --row-hover: #111a2c;
    --scrim: rgb(2 6 15 / 0.62);

    --text: #e7eef7;
    --text-2: #b6c2d4;
    --muted: #8493a9;

    --accent: #22d3ee;
    --accent-strong: #67e8f9;
    --accent-soft: rgb(34 211 238 / 0.12);
    --accent-ink: #7eeaf8;
    --on-accent: #032029;
    --focus: #67e8f9;

    --success: #4ade80;
    --success-soft: rgb(74 222 128 / 0.12);
    --success-ink: #86efac;
    --warning: #fbbf24;
    --warning-soft: rgb(251 191 36 / 0.12);
    --warning-ink: #fcd34d;
    --danger: #f87171;
    --danger-soft: rgb(248 113 113 / 0.12);
    --danger-ink: #fca5a5;
    --info: #93b4fd;
    --info-soft: rgb(147 180 253 / 0.12);
    --info-ink: #bfd2fe;

    --syriatel: #ff4d57;
    --syriatel-soft: rgb(255 77 87 / 0.13);
    --syriatel-ink: #ff9aa0;
    --mtn: #ffd23f;
    --mtn-soft: rgb(255 210 63 / 0.12);
    --mtn-ink: #ffe28a;

    --shadow-1: 0 0 0 1px rgb(255 255 255 / 0.02), 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 0 0 1px rgb(255 255 255 / 0.03), 0 12px 30px -14px rgb(0 0 0 / 0.65);
    --shadow-3: 0 0 0 1px rgb(255 255 255 / 0.04), 0 30px 60px -20px rgb(0 0 0 / 0.75);
    --highlight: inset 0 1px 0 0 rgb(255 255 255 / 0.04);
}

@media (pointer: coarse) {
    :root { --control-h: 48px; }
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.p-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--canvas);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Element defaults at element strength (:where), so every component class
   - .p-btn, .p-link, .p-hint - overrides them. */
:where(.p-body) :where(img, svg) { display: block; max-width: 100%; }
:where(.p-body) :where(a) { color: inherit; text-decoration: none; }
:where(.p-body) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.p-body) :where(h1, h2, h3, h4, p) { margin: 0; }
:where(.p-body) :where(ul, ol) { margin: 0; padding: 0; }

[x-cloak] { display: none !important; }

.p-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.p-skip {
    position: absolute;
    inset-inline-start: var(--s-4);
    top: -100px;
    z-index: 100;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-sm);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
}
.p-skip:focus { top: var(--s-4); }

.p-body :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* Figures that must keep their own order in right-to-left text */
.p-num { font-variant-numeric: tabular-nums; }
.p-ltr { direction: ltr; unicode-bidi: isolate; }
.p-mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; }

.p-muted { color: var(--muted); }
.p-text-2 { color: var(--text-2); }
.p-strong { font-weight: 700; color: var(--text); }

/* ── 3. Layout ─────────────────────────────────────────────────────────── */

.p-container { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--s-4); }
.p-container--narrow { max-width: var(--content-narrow); }
@media (min-width: 640px) { .p-container { padding-inline: var(--s-6); } }

.p-stack > * + * { margin-block-start: var(--s-6); }
.p-stack--sm > * + * { margin-block-start: var(--s-3); }
.p-stack--lg > * + * { margin-block-start: var(--s-10); }
.p-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.p-row--between { justify-content: space-between; }
.p-grid { display: grid; gap: var(--s-4); }
@media (min-width: 720px) {
    .p-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Global progress line along the top (background refresh / navigation) */
.p-progress {
    position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 90;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
    pointer-events: none;
}
.p-progress.is-active { opacity: 1; animation: p-progress 1.1s var(--ease-in-out) infinite; }
@keyframes p-progress { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* Public header */
.p-header {
    position: sticky; top: 0; z-index: 40;
    border-block-end: 1px solid var(--border);
    background: color-mix(in srgb, var(--canvas) 82%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
}
.p-header__bar { display: flex; align-items: center; gap: var(--s-4); min-height: var(--topbar-h); }
.p-header__nav { display: none; gap: var(--s-1); margin-inline-start: var(--s-6); }
.p-header__nav a {
    padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
    color: var(--text-2); font-size: var(--fs-sm); font-weight: 500;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.p-header__nav a:hover { background: var(--surface-2); color: var(--text); }
.p-header__nav a[aria-current="page"] { color: var(--accent-ink); background: var(--accent-soft); }
.p-header__end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-2); }
/* On phone widths the header row (brand + theme, sign-in and menu buttons)
   can need more than the space inside the container's padding - at 320px it
   needed 322 of 288px, and the brand name is set in the CMS, so a longer one
   overflows at 360px too. Flex items do not shrink below their content, so the
   row pushed the page sideways. Tighten only the spacing there: every item
   stays, and icon buttons keep their 44px touch target. */
@media (max-width: 399.98px) {
    .p-header__bar { gap: var(--s-2); padding-inline: var(--s-3); }
    .p-header__end { gap: var(--s-1); }
    .p-header__end .p-btn--sm { padding-inline: var(--s-2); }
    .p-header .p-brand { gap: var(--s-1); }
}
/* Below 360px a long brand name (set in the CMS) plus three controls cannot
   share one row: the account button moves into the menu, with its icon and
   text, instead of the brand being squeezed or clipped. */
.p-header .p-brand__mark { flex-shrink: 0; }
@media (max-width: 359.98px) { .p-header__end .p-header__account { display: none; } }
@media (min-width: 360px) { .p-sheet .p-sheet__account { display: none; } }
@media (min-width: 900px) { .p-header__nav { display: flex; } .p-header .p-header__menu-btn { display: none; } }

.p-brand { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 800; font-size: var(--fs-lg); color: var(--text); }
.p-brand__mark {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
    background: linear-gradient(140deg, #22d3ee, #0a8fb0); color: #032029;
    font-weight: 800; font-size: 1.05rem; box-shadow: var(--shadow-1);
}
.p-brand__sub { display: block; font-size: 10px; letter-spacing: 0.08em; font-weight: 600; color: var(--muted); line-height: 1; margin-top: 2px; }

/* Mobile menu sheet for the public header */
.p-sheet { border-block-start: 1px solid var(--border); padding-block: var(--s-3); }
.p-sheet a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-sm); color: var(--text-2); font-weight: 500; }
.p-sheet a:hover { background: var(--surface-2); color: var(--text); }

/* Public footer */
.p-footer { margin-block-start: var(--s-16); border-block-start: 1px solid var(--border); background: var(--surface); }
.p-footer__inner { display: grid; gap: var(--s-6); padding-block: var(--s-10); }
@media (min-width: 720px) { .p-footer__inner { grid-template-columns: 2fr 1fr 1fr; } }
.p-footer h2 { font-size: var(--fs-sm); font-weight: 700; color: var(--text); margin-block-end: var(--s-3); }
.p-footer li { list-style: none; margin-block: var(--s-2); }
.p-footer a { color: var(--text-2); font-size: var(--fs-sm); }
.p-footer a:hover { color: var(--accent-ink); }
/* The Abili app: official store badges + who runs the service, one quiet strip. */
.p-appstrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-6); border-block-start: 1px solid var(--border); padding-block: var(--s-4); }
.p-appstrip__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.p-appstrip__badges li { list-style: none; display: flex; align-items: center; gap: var(--s-2); }
.p-appstrip__badge { display: inline-flex; line-height: 0; border-radius: 7px; }
.p-appstrip__badge img { display: block; width: auto; max-width: none; }
.p-appstrip__badge--apple img { height: 34px; }
/* Google's artwork carries its own clear space (the badge is 68% of the image
   height): sized so the badge itself is 34px, the clear space overlapping. */
.p-appstrip__badge--google img { height: 50px; margin: -8px; }
.p-appstrip__badge.is-pending { opacity: .45; filter: grayscale(1); cursor: default; }
.p-appstrip__soon { font-size: var(--fs-xs); color: var(--muted); }
.p-appstrip__note { font-size: var(--fs-xs); color: var(--muted); }
.p-appstrip__note .p-nowrap { white-space: nowrap; }
.p-footer .p-appstrip__note a { font-size: var(--fs-xs); color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; margin-inline-start: var(--s-1); }
.p-footer .p-appstrip__badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.p-footer__legal { border-block-start: 1px solid var(--border); padding-block: var(--s-4); font-size: var(--fs-xs); color: var(--muted); }

/* Member shell: brand navigation panel + content */
.p-shell { min-height: 100vh; min-height: 100dvh; }
.p-sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60;
    width: var(--sidebar-w);
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--nav-bg), var(--nav-bg-2));
    color: var(--nav-text);
    border-inline-end: 1px solid var(--nav-border);
    transform: translateX(calc(var(--dir-x, -1) * 100%));
    transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
}
[dir="rtl"] .p-sidebar { --dir-x: 1; }
.p-sidebar.is-open { transform: none; box-shadow: var(--shadow-3); }
.p-sidebar__head { display: flex; align-items: center; gap: var(--s-3); height: var(--topbar-h); padding-inline: var(--s-5); border-block-end: 1px solid var(--nav-border); }
.p-sidebar__head .p-brand { color: #fff; }
.p-sidebar__head .p-brand__sub { color: var(--nav-muted); }
.p-sidebar__nav { flex: 1; overflow-y: auto; padding: var(--s-4) var(--s-3); }
.p-sidebar__foot { padding: var(--s-3); border-block-start: 1px solid var(--nav-border); }

.p-nav__group + .p-nav__group { margin-block-start: var(--s-5); }
.p-nav__label { padding-inline: var(--s-3); margin-block-end: var(--s-2); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--nav-muted); }
.p-nav__item {
    position: relative;
    display: flex; align-items: center; gap: var(--s-3);
    min-height: 42px; padding-inline: var(--s-3); margin-block: 2px;
    border-radius: var(--r-md);
    color: var(--nav-text); font-size: var(--fs-sm); font-weight: 500;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.p-nav__item:hover { background: var(--nav-hover); color: #fff; }
.p-nav__icon {
    flex: none; display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 9px;
    color: var(--nav-muted);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.p-nav__item[aria-current="page"] { background: var(--nav-active); color: #fff; font-weight: 700; }
.p-nav__item[aria-current="page"] .p-nav__icon { background: var(--nav-accent); color: #04222a; }
.p-nav__item[aria-current="page"]::before {
    content: ""; position: absolute; inset-block: 9px; inset-inline-start: -12px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--nav-accent);
    animation: p-grow var(--dur-base) var(--ease-out) backwards;
}
[dir="rtl"] .p-nav__item[aria-current="page"]::before { border-radius: 3px 0 0 3px; }
.p-nav__badge { margin-inline-start: auto; min-width: 22px; padding: 0 7px; border-radius: var(--r-full); background: var(--nav-accent); color: #04222a; font-size: 11px; font-weight: 800; text-align: center; line-height: 20px; }
.p-nav__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes p-grow { from { transform: scaleY(0); } }

.p-scrim { position: fixed; inset: 0; z-index: 55; background: var(--scrim); animation: p-fade var(--dur-base) var(--ease-out) backwards; }

.p-main-wrap { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; transition: padding var(--dur-base) var(--ease-out); }
.p-topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: var(--s-3);
    height: var(--topbar-h); padding-inline: var(--s-4);
    border-block-end: 1px solid var(--border);
    background: color-mix(in srgb, var(--canvas) 84%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
}
.p-topbar__end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-1); }
.p-main { flex: 1; width: 100%; max-width: var(--content-wide); margin-inline: auto; padding: var(--s-6) var(--s-4) var(--s-16); }
@media (min-width: 640px) { .p-main { padding-inline: var(--s-8); } }

@media (min-width: 1024px) {
    .p-sidebar { transform: none; }
    .p-main-wrap { padding-inline-start: var(--sidebar-w); }
    .p-topbar .p-topbar__menu { display: none; }
    .p-shell.is-collapsed .p-sidebar { width: var(--sidebar-w-collapsed); }
    .p-shell.is-collapsed .p-main-wrap { padding-inline-start: var(--sidebar-w-collapsed); }
    .p-shell.is-collapsed .p-nav__text,
    .p-shell.is-collapsed .p-nav__label,
    .p-shell.is-collapsed .p-nav__badge,
    .p-shell.is-collapsed .p-brand__words { display: none; }
    .p-shell.is-collapsed .p-nav__item { justify-content: center; padding-inline: 0; }
    .p-shell.is-collapsed .p-sidebar__head { justify-content: center; padding-inline: 0; }
    .p-scrim { display: none; }
}
@media (max-width: 1023.98px) { .p-topbar .p-collapse-btn { display: none; } }

/* Collapsed-navigation tooltip (hover and keyboard focus) */
.p-tip {
    position: fixed; z-index: 70;
    padding: 6px 10px; border-radius: var(--r-sm);
    background: #0b1220; color: #fff; font-size: var(--fs-xs); font-weight: 600;
    box-shadow: var(--shadow-2); pointer-events: none; white-space: nowrap;
    animation: p-fade var(--dur-fast) var(--ease-out) backwards;
}

/* Breadcrumbs */
.p-crumbs { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--muted); min-width: 0; }
.p-crumbs a:hover { color: var(--text); }
.p-crumbs [aria-current="page"] { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-crumbs .p-icon { width: 14px; height: 14px; }

/* ── 4. Components ─────────────────────────────────────────────────────── */

/* Icon */
.p-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.p-icon--sm { width: 16px; height: 16px; }
.p-icon--lg { width: 24px; height: 24px; }
[dir="rtl"] .p-icon--dir { transform: scaleX(-1); }

/* Buttons */
.p-btn {
    --btn-bg: var(--surface); --btn-fg: var(--text); --btn-border: var(--border-strong);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: var(--control-h); padding: 0 var(--s-5);
    border: 1px solid var(--btn-border); border-radius: var(--r-md);
    background: var(--btn-bg); color: var(--btn-fg);
    font-size: var(--fs-sm); font-weight: 700; line-height: 1; white-space: nowrap;
    cursor: pointer; user-select: none;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.p-btn:hover { background: var(--surface-2); }
.p-btn:active { transform: scale(0.98); }
.p-btn[disabled], .p-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.p-btn--primary { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-border: var(--accent); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.p-btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.p-btn--ghost { --btn-bg: transparent; --btn-border: transparent; }
.p-btn--ghost:hover { background: var(--surface-2); }
.p-btn--danger { --btn-bg: var(--danger-soft); --btn-fg: var(--danger-ink); --btn-border: transparent; }
.p-btn--danger:hover { background: color-mix(in srgb, var(--danger-soft) 70%, var(--danger) 12%); }
.p-btn--sm { min-height: 36px; padding: 0 var(--s-3); font-size: var(--fs-xs); border-radius: var(--r-sm); }
.p-btn--lg { min-height: 52px; padding: 0 var(--s-6); font-size: var(--fs-base); }
.p-btn--block { width: 100%; }
.p-btn--icon { width: var(--control-h); padding: 0; }
.p-btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.p-btn.is-busy::after {
    content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--btn-fg); border-inline-end-color: transparent;
    animation: p-spin 0.7s linear infinite;
}
@keyframes p-spin { to { transform: rotate(360deg); } }

/* Link-style */
.p-link { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-ink) 35%, transparent); text-underline-offset: 3px; }
.p-link:hover { text-decoration-color: currentColor; }

/* Cards and sections */
.p-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1), var(--highlight); }
.p-card--raised { box-shadow: var(--shadow-2), var(--highlight); }
.p-card--pad { padding: var(--s-5); }
@media (min-width: 640px) { .p-card--pad { padding: var(--s-6); } }
.p-card--interactive { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.p-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-2), var(--highlight); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.p-card__head { display: flex; align-items: center; gap: var(--s-3); justify-content: space-between; padding: var(--s-4) var(--s-5); border-block-end: 1px solid var(--border); }
.p-card__title { font-size: var(--fs-base); font-weight: 700; }
.p-card__body { padding: var(--s-5); }
.p-card__foot { padding: var(--s-4) var(--s-5); border-block-start: 1px solid var(--border); background: var(--surface-2); border-end-start-radius: var(--r-lg); border-end-end-radius: var(--r-lg); }

/* Page header */
.p-page-head { display: grid; gap: var(--s-4); margin-block-end: var(--s-8); }
@media (min-width: 720px) { .p-page-head { grid-template-columns: 1fr auto; align-items: end; } }
.p-page-head__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-ink); margin-block-end: var(--s-3); }
.p-eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; color: var(--accent-ink); margin-block-end: var(--s-2); }
.p-h1 { font-size: var(--fs-2xl); line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; }
@media (min-width: 720px) { .p-h1 { font-size: var(--fs-3xl); } }
.p-h2 { font-size: var(--fs-xl); line-height: 1.3; font-weight: 800; }
.p-h3 { font-size: var(--fs-lg); line-height: 1.35; font-weight: 700; }
.p-lead { margin-block-start: var(--s-2); color: var(--text-2); font-size: var(--fs-base); max-width: 62ch; }
.p-page-head__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Fields */
.p-field { display: grid; gap: var(--s-2); }
.p-label { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.p-label__opt { font-weight: 500; color: var(--muted); margin-inline-start: var(--s-1); }
.p-label__req { color: var(--danger); margin-inline-start: 2px; }
.p-hint { font-size: var(--fs-xs); color: var(--muted); }
.p-error { font-size: var(--fs-xs); font-weight: 600; color: var(--danger-ink); animation: p-rise var(--dur-base) var(--ease-out) backwards; }
.p-input, .p-select, .p-textarea {
    width: 100%; min-height: var(--control-h); padding: 0 var(--s-4);
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    background: var(--surface); color: var(--text);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.p-textarea { padding-block: var(--s-3); min-height: 120px; resize: vertical; }
.p-input::placeholder, .p-textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.p-input:focus, .p-select:focus, .p-textarea:focus {
    outline: 2px solid transparent;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent);
}
.p-input[aria-invalid="true"], .p-select[aria-invalid="true"], .p-textarea[aria-invalid="true"] { border-color: var(--danger); }
.p-input--lg { min-height: 56px; font-size: var(--fs-xl); letter-spacing: 0.04em; }
.p-input[dir="ltr"] { text-align: left; }
.p-field-group { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-2); min-width: 0; }
.p-field-group > legend { padding: 0; margin-block-end: var(--s-2); }

/* Form sections */
.p-form-section { display: grid; gap: var(--s-4); padding-block: var(--s-6); border-block-end: 1px solid var(--border); }
.p-form-section:last-of-type { border-block-end: 0; }
@media (min-width: 900px) { .p-form-section { grid-template-columns: 240px 1fr; gap: var(--s-8); } }
.p-form-section__title { font-weight: 700; }
.p-form-section__desc { font-size: var(--fs-sm); color: var(--muted); margin-block-start: var(--s-1); }
.p-actionbar {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; align-items: center; gap: var(--s-3); justify-content: flex-end; flex-wrap: wrap;
    padding: var(--s-3) var(--s-4); margin-block-start: var(--s-6);
    border: 1px solid var(--border); border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: var(--shadow-2);
}
.p-actionbar__state { margin-inline-end: auto; font-size: var(--fs-sm); color: var(--warning-ink); font-weight: 600; }

/* Badges and status */
.p-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: var(--r-full);
    background: var(--surface-3); color: var(--text-2);
    font-size: var(--fs-xs); font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.p-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.p-badge--success { background: var(--success-soft); color: var(--success-ink); }
.p-badge--warning { background: var(--warning-soft); color: var(--warning-ink); }
.p-badge--danger { background: var(--danger-soft); color: var(--danger-ink); }
.p-badge--info { background: var(--info-soft); color: var(--info-ink); }
.p-badge--accent { background: var(--accent-soft); color: var(--accent-ink); }

/* Operator chip */
.p-op { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; }
.p-op::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--op); }
.p-op--syriatel { --op: var(--syriatel); background: var(--syriatel-soft); color: var(--syriatel-ink); }
.p-op--mtn { --op: var(--mtn); background: var(--mtn-soft); color: var(--mtn-ink); }

/* Option tiles (few choices: radio semantics, aria-pressed buttons) */
.p-tiles { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .p-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-tile {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);
    width: 100%; padding: var(--s-5); text-align: start;
    border: 1.5px solid var(--border); border-radius: var(--r-lg);
    background: var(--surface); color: var(--text); cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.p-tile:hover:not([disabled]) { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.p-tile[aria-pressed="true"], .p-tile[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.p-tile[disabled] { cursor: not-allowed; opacity: 0.5; }
.p-tile__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-2); color: var(--accent-ink); transition: background var(--dur-fast) var(--ease-out); }
.p-tile[aria-pressed="true"] .p-tile__icon { background: var(--accent); color: var(--on-accent); }
.p-tile__title { font-size: var(--fs-lg); font-weight: 800; }
.p-tile__desc { font-size: var(--fs-sm); color: var(--muted); }
.p-tile__check { position: absolute; inset-block-start: var(--s-3); inset-inline-end: var(--s-3); color: var(--accent); opacity: 0; transform: scale(0.6); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-pop); }
.p-tile[aria-pressed="true"] .p-tile__check { opacity: 1; transform: none; }

/* Package grid */
.p-packages { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .p-packages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .p-packages { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.p-package { align-items: stretch; gap: var(--s-1); padding: var(--s-4); }
/* A package says two things: what the customer receives (value) and what
   they pay (price). Each is labelled; the price, the amount they transfer,
   is the strongest line. */
.p-package__label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.p-package__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-1); min-width: 0; }
.p-package__units { font-size: var(--fs-lg); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.p-package__unit-label { font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); }
.p-package__pay { display: flex; flex-direction: column; gap: 2px; margin-block-start: var(--s-2); padding-block-start: var(--s-2); border-block-start: 1px dashed var(--border); }
.p-package__price { font-size: var(--fs-xl); font-weight: 800; line-height: 1.2; color: var(--accent-ink); align-self: flex-start; white-space: nowrap; }
.p-line__price { display: inline-flex; align-items: baseline; gap: var(--s-1); white-space: nowrap; }

/* Wizard steps */
.p-steps { display: grid; grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: var(--s-2); counter-reset: step; }
.p-step { display: grid; gap: var(--s-2); font-size: var(--fs-xs); color: var(--muted); }
.p-step__bar { height: 4px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.p-step__bar::after { content: ""; display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width var(--dur-slow) var(--ease-out); }
.p-step.is-done .p-step__bar::after, .p-step.is-current .p-step__bar::after { width: 100%; }
.p-step.is-current { color: var(--accent-ink); font-weight: 700; }
.p-step.is-done { color: var(--text-2); }

/* Summary rows (review, cart, detail) */
.p-kv { display: grid; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.p-kv__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--surface); }
.p-kv__row + .p-kv__row { border-block-start: 1px solid var(--border); }
.p-kv__key { color: var(--muted); font-size: var(--fs-sm); }
/* A value too long to sit beside its label (a 32-character Sham Cash code
   on a phone) moves to its own line, and breaks only if a whole line is too short. */
.p-kv__row { flex-wrap: wrap; row-gap: var(--s-2); }
.p-kv__val { font-weight: 700; text-align: end; min-width: 0; max-width: 100%; margin-inline-start: auto; }

/* Lists (orders, cart lines) */
.p-list { display: grid; gap: var(--s-3); }
.p-line {
    display: grid; gap: var(--s-3); padding: var(--s-4);
    border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.p-line:hover { border-color: var(--border-strong); }
.p-line--warn { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); background: color-mix(in srgb, var(--warning-soft) 60%, var(--surface)); }
@media (min-width: 640px) { .p-line { grid-template-columns: 1fr auto; align-items: center; } }
.p-line__main { display: grid; gap: var(--s-1); min-width: 0; }
.p-line__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
.p-line__side { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
@media (min-width: 640px) { .p-line__side { justify-content: flex-end; } }
.p-amount { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Table for wide screens, cards on phones */
.p-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.p-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.p-table th { padding: var(--s-3) var(--s-4); text-align: start; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--muted); background: var(--surface-2); border-block-end: 1px solid var(--border-strong); white-space: nowrap; }
.p-table td { padding: var(--s-3) var(--s-4); border-block-end: 1px solid var(--border); vertical-align: middle; }
.p-table tbody tr:last-child td { border-block-end: 0; }
.p-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.p-table tbody tr:hover, .p-table tbody tr:focus-within { background: var(--row-hover); box-shadow: inset 3px 0 0 var(--accent); }
[dir="rtl"] .p-table tbody tr:hover, [dir="rtl"] .p-table tbody tr:focus-within { box-shadow: inset -3px 0 0 var(--accent); }
.p-table td.p-end, .p-table th.p-end { text-align: end; }

/* Alerts */
.p-alert { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border-radius: var(--r-md); border: 1px solid transparent; font-size: var(--fs-sm); animation: p-rise var(--dur-base) var(--ease-out) backwards; }
.p-alert__body { flex: 1; min-width: 0; }
.p-alert__title { font-weight: 700; margin-block-end: 2px; }
.p-alert--danger { background: var(--danger-soft); color: var(--danger-ink); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.p-alert--warning { background: var(--warning-soft); color: var(--warning-ink); border-color: color-mix(in srgb, var(--warning) 25%, transparent); }
.p-alert--success { background: var(--success-soft); color: var(--success-ink); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
.p-alert--info { background: var(--info-soft); color: var(--info-ink); border-color: color-mix(in srgb, var(--info) 25%, transparent); }

/* Empty state */
.p-empty { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-12) var(--s-6); text-align: center; }
.p-empty__mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-ink); }
.p-empty__title { font-weight: 800; font-size: var(--fs-lg); }
.p-empty__text { color: var(--muted); max-width: 42ch; font-size: var(--fs-sm); }
.p-empty--compact { padding: var(--s-6); }

/* Skeleton */
.p-skel { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: p-shimmer 1.4s ease infinite; }
@keyframes p-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
[aria-busy="true"] > .p-dim-when-busy { opacity: 0.55; transition: opacity var(--dur-base) var(--ease-out) 150ms; }

/* Toasts */
.p-toasts { position: fixed; z-index: 80; inset-block-end: var(--s-4); inset-inline-start: 50%; transform: translateX(-50%); display: grid; gap: var(--s-2); width: min(420px, calc(100vw - 32px)); pointer-events: none; }
[dir="rtl"] .p-toasts { transform: translateX(50%); }
.p-toast { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: #0b1220; color: #fff; box-shadow: var(--shadow-3); font-size: var(--fs-sm); font-weight: 600; pointer-events: auto; animation: p-rise var(--dur-base) var(--ease-out) backwards; }
.p-toast--success .p-icon { color: #4ade80; }
.p-toast--error .p-icon { color: #f87171; }

/* Dialog (native) and side panel */
.p-dialog { width: min(480px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); color: var(--text); box-shadow: var(--shadow-3); }
.p-dialog::backdrop { background: var(--scrim); }
.p-dialog[open] { animation: p-pop var(--dur-base) var(--ease-out) backwards; }
.p-dialog__body { padding: var(--s-6); display: grid; gap: var(--s-3); }
.p-dialog__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--warning-soft); color: var(--warning-ink); }
.p-dialog__actions { display: flex; gap: var(--s-2); justify-content: flex-end; flex-wrap: wrap; padding: var(--s-4) var(--s-6); border-block-start: 1px solid var(--border); background: var(--surface-2); }

/* Menu (account) */
.p-menu { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 50; min-width: 240px; padding: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--shadow-3); animation: p-pop var(--dur-fast) var(--ease-out) backwards; }
.p-menu__head { padding: var(--s-3); border-block-end: 1px solid var(--border); margin-block-end: var(--s-2); }
.p-menu a, .p-menu button { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font-size: var(--fs-sm); text-align: start; cursor: pointer; }
.p-menu a:hover, .p-menu button:hover { background: var(--surface-2); color: var(--text); }

/* Avatar */
.p-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; font-size: var(--fs-sm); flex: none; }
.p-avatar img { width: 100%; height: 100%; object-fit: cover; }
.p-avatar--lg { width: 72px; height: 72px; font-size: var(--fs-xl); }

/* Identifier with copy */
.p-ident { display: inline-flex; align-items: center; gap: var(--s-1); padding: 2px 4px 2px 8px; border-radius: var(--r-sm); background: var(--surface-2); font-family: var(--font-mono); font-size: var(--fs-sm); direction: ltr; unicode-bidi: isolate; }
.p-ident button { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.p-ident button:hover { background: var(--surface-3); color: var(--text); }

/* Pager */
.p-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-start: var(--s-6); font-size: var(--fs-sm); color: var(--muted); }

/* Stat (real figures only) */
.p-stat__value { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.p-stat__label { font-size: var(--fs-sm); color: var(--muted); }

/* Timeline (order progress) */
.p-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.p-timeline__step { display: grid; gap: var(--s-2); justify-items: center; text-align: center; font-size: var(--fs-xs); color: var(--muted); position: relative; }
.p-timeline__dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); color: var(--muted); z-index: 1; }
.p-timeline__step::before { content: ""; position: absolute; top: 15px; inset-inline-start: calc(-50% + 16px); inset-inline-end: calc(50% + 16px); height: 2px; background: var(--border-strong); }
.p-timeline__step:first-child::before { display: none; }
.p-timeline__step.is-done .p-timeline__dot { border-color: var(--success); background: var(--success); color: #fff; }
.p-timeline__step.is-done::before, .p-timeline__step.is-current::before { background: var(--success); }
.p-timeline__step.is-current .p-timeline__dot { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.p-timeline__step.is-done, .p-timeline__step.is-current { color: var(--text); font-weight: 700; }

/* Hero (public home) */
.p-hero { position: relative; overflow: hidden; padding-block: var(--s-12) var(--s-10); }
.p-hero::before {
    content: ""; position: absolute; inset: -40% -10% auto; height: 520px; z-index: -1;
    background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}
.p-hero__title { font-size: clamp(2rem, 4.2vw, var(--fs-4xl)); line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; }
.p-hero__title em { font-style: normal; color: var(--accent-ink); }
.p-hero__lead { margin-block-start: var(--s-4); font-size: var(--fs-lg); color: var(--text-2); max-width: 46ch; }
.p-trust { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-block-start: var(--s-6); color: var(--text-2); font-size: var(--fs-sm); }
.p-trust span { display: inline-flex; align-items: center; gap: var(--s-2); }
.p-trust .p-icon { color: var(--success); }

/* Legal documents */
.p-prose { line-height: 1.8; color: var(--text-2); }
.p-prose h1 { font-size: var(--fs-2xl); font-weight: 800; color: var(--text); margin-block-end: var(--s-6); }
.p-prose h2 { font-size: var(--fs-lg); font-weight: 700; color: var(--text); margin-block: var(--s-8) var(--s-3); }
.p-prose h3 { font-weight: 700; color: var(--text); margin-block: var(--s-6) var(--s-2); }
.p-prose p, .p-prose ul, .p-prose ol { margin-block-end: var(--s-4); }
.p-prose ul { list-style: disc; padding-inline-start: var(--s-6); }
.p-prose ol { list-style: decimal; padding-inline-start: var(--s-6); }
.p-prose a { color: var(--accent-ink); text-decoration: underline; }

/* ── 5. Motion ─────────────────────────────────────────────────────────── */

@keyframes p-fade { from { opacity: 0; } }
@keyframes p-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes p-enter { from { opacity: 0; transform: translateY(10px); } }
@keyframes p-pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
@keyframes p-slide-in { from { opacity: 0; transform: translateX(calc(var(--slide-dir, 1) * 16px)); } }
[dir="rtl"] { --slide-dir: -1; }

/* Page/section entrance: fill-mode backwards so nothing keeps a transform afterwards */
.p-enter { animation: p-enter var(--dur-slow) var(--ease-out) backwards; animation-delay: calc(min(var(--i, 0), 8) * var(--stagger)); }
.p-arrive { animation: p-rise var(--dur-base) var(--ease-out) backwards; }
.p-step-panel { animation: p-slide-in var(--dur-base) var(--ease-out) backwards; }
.p-pop-in { animation: p-pop var(--dur-base) var(--ease-pop) backwards; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
    .p-skel { animation: none; }
    .p-progress.is-active { animation: none; background: var(--accent); opacity: 0.6; }
    .p-card--interactive:hover, .p-tile:hover:not([disabled]) { transform: none; }
}

/* ── 6. Forced colours ─────────────────────────────────────────────────── */

@media (forced-colors: active) {
    .p-badge, .p-op, .p-nav__badge, .p-tile[aria-pressed="true"], .p-btn { border: 1px solid CanvasText; }
    .p-nav__item[aria-current="page"] { outline: 2px solid Highlight; }
    .p-step__bar::after, .p-timeline__dot { forced-color-adjust: none; }
    .p-input:focus, .p-select:focus, .p-textarea:focus { outline: 2px solid Highlight; }
}

/* Theme-dependent icons, small-screen helpers */
:root[data-theme="dark"] .p-theme-light-only, :root:not([data-theme="dark"]) .p-theme-dark-only { display: none; }
@media (max-width: 559.98px) { .p-hide-sm { display: none !important; } }
@media (min-width: 900px) { .p-sheet { display: none !important; } }

/* Recharge wizard */
.p-wizard { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1024px) { .p-wizard { grid-template-columns: minmax(0, 1fr) 300px; } }
.p-wizard__main { display: grid; gap: var(--s-5); min-width: 0; }
.p-wizard__panel { padding: var(--s-5); }
@media (min-width: 640px) { .p-wizard__panel { padding: var(--s-8); } }
.p-wizard__aside { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); display: none; }
@media (min-width: 1024px) { .p-wizard__aside { display: block; } }
.p-cart-total { display: flex; align-items: baseline; justify-content: space-between; margin-block-start: var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-2xl); font-weight: 800; }
.p-cart-total .p-muted { font-size: var(--fs-sm); font-weight: 600; }
.p-cartbar { position: sticky; bottom: var(--s-3); z-index: 25; }
@media (min-width: 1024px) { .p-cartbar { display: none !important; } }
.p-back-icon { transform: scaleX(-1); }
[dir="rtl"] .p-back-icon { transform: none; }
[data-step-heading]:focus { outline: none; }

/* Checkout result */
.p-result__head { display: grid; justify-items: start; gap: var(--s-3); margin-block-end: var(--s-6); }
.p-result__grid { display: grid; gap: var(--s-5); margin-block-start: var(--s-6); align-items: start; }
@media (min-width: 1024px) { .p-result__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

/* Home */
.p-home-hero { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 1024px) { .p-home-hero { grid-template-columns: 1.15fr 1fr; gap: var(--s-12); } }
.p-home-start { padding: var(--s-6); }
.p-home-ops { display: grid; gap: var(--s-3); margin-block-start: var(--s-5); }
.p-home-ops li { list-style: none; }
.p-home-op { flex-direction: row; align-items: center; gap: var(--s-4); padding: var(--s-4); }
.p-home-op__go { margin-inline-start: auto; color: var(--muted); transition: transform var(--dur-base) var(--ease-out); }
.p-home-op:hover .p-home-op__go { transform: translateX(calc(var(--slide-dir, 1) * 4px)); color: var(--accent-ink); }
[dir="rtl"] .p-home-op:hover .p-home-op__go { transform: scaleX(-1) translateX(4px); }
.p-home-section { padding-block: var(--s-10); }
.p-home-steps { display: grid; gap: var(--s-4); margin-block-start: var(--s-6); }
.p-home-steps li { list-style: none; position: relative; }
@media (min-width: 900px) { .p-home-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-home-steps__num { position: absolute; inset-block-start: var(--s-5); inset-inline-end: var(--s-5); font-size: var(--fs-3xl); font-weight: 800; color: var(--surface-3); line-height: 1; }
.p-home-help { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .p-home-help { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Sign-in and registration */
.p-auth { display: grid; gap: var(--s-8); align-items: start; padding-block: var(--s-10) var(--s-12); }
@media (min-width: 960px) { .p-auth { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: var(--s-12); } }
.p-auth__card { padding: var(--s-6); }
@media (min-width: 640px) { .p-auth__card { padding: var(--s-8); } }
.p-auth__aside { padding-block-start: var(--s-6); }
.p-auth__perks { display: grid; gap: var(--s-3); margin-block-start: var(--s-4); }
.p-auth__perks li { list-style: none; display: flex; align-items: center; gap: var(--s-3); color: var(--text-2); }
.p-auth__perks .p-icon { color: var(--accent-ink); }
.p-auth__foot { margin-block-start: var(--s-6); padding-block-start: var(--s-5); border-block-start: 1px solid var(--border); text-align: center; font-size: var(--fs-sm); color: var(--muted); }

/* Older member pages (utility classes, no Tailwind reset) inside the new shell */
.p-legacy :where(button) { background: transparent; border: 0; padding: 0; cursor: pointer; }
.p-legacy :where(input, select, textarea) { border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); padding: 6px 10px; }
.p-legacy :where(h1, h2, h3, h4, p, ul, ol) { margin: 0; }
.p-legacy :where(ul, ol) { list-style: none; padding: 0; }
.p-legacy :where(table) { border-collapse: collapse; }
.p-legacy :where(img, svg) { display: inline-block; }

/* Member dashboard: lead row (attention + quick recharge), orders, side column */
.p-dash { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
    .p-dash { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
    .p-dash__attention { grid-column: 1; }
    .p-dash__quick { grid-column: 2; }
    .p-dash__orders { grid-column: 1; }
    .p-dash__side { grid-column: 2; grid-row: 2; }
}
.p-dash__side { display: grid; gap: var(--s-5); }
.p-dash__rows li { list-style: none; }
.p-dash__rows li + li { border-block-start: 1px solid var(--border); }
.p-dash__row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); transition: background var(--dur-fast) var(--ease-out); }
.p-dash__row:hover, .p-dash__row:focus-visible { background: var(--row-hover); }
.p-dash__row-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.p-dash__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-block-start: var(--s-4); }
.p-dash__stats > div { display: flex; flex-direction: column-reverse; gap: var(--s-1); }

/* Lists: stage segments and a search box above them */
.p-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-5); }
.p-segments { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface-2); overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.p-segments__item { padding: 6px 14px; border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.p-segments__item:hover { color: var(--text); }
.p-segments__item[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.p-search { position: relative; flex: 0 1 260px; min-width: 200px; }
.p-search .p-input { padding-inline-start: 38px; }
.p-search__icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

/* Orders: a table from tablet up, cards on phones */
.p-orders-cards { display: none; gap: var(--s-3); }
.p-orders-cards > li { list-style: none; }
.p-order-card__link { display: grid; gap: var(--s-2); padding: var(--s-4); }
.p-order-card__top, .p-order-card__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.p-order-card__phone { font-size: var(--fs-lg); text-align: start; }
@media (max-width: 640px) {
    .p-orders-table { display: none; }
    .p-orders-cards { display: grid; }
    .p-search { flex: 1 1 100%; }
}

/* Order detail */
.p-order { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .p-order { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); } }
.p-order__pay { display: grid; gap: var(--s-4); margin-block-start: var(--s-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 640px) { .p-order__pay:has(.p-order__qr) { grid-template-columns: minmax(0, 1fr) auto; } }
.p-order__qr { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); background: #fff; border: 1px solid var(--border); }
.p-order__qr img { width: 168px; height: 168px; }
.p-order__qr .p-hint { color: #475569; }

/* A file picker that reads as a drop area */
.p-upload { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); color: var(--muted); font-size: var(--fs-sm); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); overflow-wrap: anywhere; }
.p-upload:hover { border-color: var(--accent); background: var(--accent-soft); }
.p-upload:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Profile */
.p-profile { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .p-profile { grid-template-columns: 280px minmax(0, 1fr); } .p-profile__id { position: sticky; top: calc(var(--topbar-h, 64px) + var(--s-4)); } }
.p-profile__id { display: flex; gap: var(--s-4); align-items: center; }
@media (min-width: 1000px) { .p-profile__id { flex-direction: column; text-align: center; } .p-profile__id .p-row { justify-content: center; } }
.p-avatar--xl { width: 88px; height: 88px; font-size: var(--fs-2xl, 1.75rem); }
.p-avatar-field { display: flex; gap: var(--s-4); align-items: center; }
.p-grid-2 { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .p-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-inline-form { display: grid; gap: var(--s-3); align-items: start; }
@media (min-width: 640px) { .p-inline-form { grid-template-columns: minmax(0, 1fr) auto; } .p-inline-form > .p-btn { margin-block-start: 28px; } }
.p-verify { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--accent-soft); }
.p-card--danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }

/* Tabs */
.p-tabs { display: flex; gap: var(--s-1); margin-block-end: var(--s-5); border-block-end: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.p-tabs__tab { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); margin-block-end: -1px; border: 0; border-block-end: 2px solid transparent; background: none; color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.p-tabs__tab:hover { color: var(--text); }
.p-tabs__tab[aria-selected="true"] { color: var(--accent-ink); border-block-end-color: var(--accent); }
.p-tabs__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-sm); }
.p-tabs__panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--r-md); }
.p-tabs__panel[hidden] { display: none; }

/* Radio choices as chips */
.p-choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.p-choice { position: relative; }
.p-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.p-choice span { display: inline-flex; align-items: center; gap: var(--s-2); padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2, var(--text)); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.p-choice input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.p-choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* A save bar that says whether anything is unsaved */
.p-savebar { position: sticky; bottom: var(--s-3); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); box-shadow: var(--shadow-2); }
.p-savebar.is-dirty { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.p-dialog--wide { width: min(640px, calc(100vw - 32px)); }
.p-addresses { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .p-addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-address { list-style: none; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); }
.p-address.is-default { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* Support conversation */
.p-thread { display: grid; gap: var(--s-4); }
.p-msg { list-style: none; max-width: min(92%, 640px); padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface-2); }
.p-msg--me { justify-self: start; border-start-start-radius: var(--r-sm); }
.p-msg--them { justify-self: end; border-start-end-radius: var(--r-sm); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.p-msg__meta { display: flex; gap: var(--s-3); justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); margin-block-end: var(--s-2); }
.p-msg__body { white-space: pre-line; overflow-wrap: anywhere; font-size: var(--fs-sm); line-height: 1.75; }
.p-attachments { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-3); }
.p-attachments li { list-style: none; }
.p-attachment { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 260px; padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-xs); }
.p-attachment span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-attachment img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--r-sm); }
.p-attachment:hover { border-color: var(--accent); }
.p-form-narrow { max-width: 720px; }

/* Notifications */
.p-note { align-items: flex-start; }
.p-note.is-unread { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.p-note__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--r-md); background: var(--info-soft, var(--accent-soft)); color: var(--info-ink, var(--accent-ink)); }
.p-note__icon--success { background: var(--success-soft); color: var(--success-ink); }
.p-note__icon--warning { background: var(--warning-soft); color: var(--warning-ink); }
.p-note__icon--danger { background: var(--danger-soft); color: var(--danger-ink); }
.p-note__dot { width: 8px; height: 8px; margin-block-start: 8px; border-radius: 50%; background: var(--accent); flex: none; }

/* Saved numbers */
.p-contacts { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.p-contact { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); }
.p-contact__head { display: flex; align-items: center; gap: var(--s-3); }
.p-contact__head .p-op { margin-inline-start: auto; }
.p-sync { margin-block-end: var(--s-5); display: grid; gap: var(--s-2); }
.p-meter { height: 6px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.p-meter span { display: block; height: 100%; background: var(--accent); transition: inline-size var(--dur-base) var(--ease-out); }
[x-cloak] { display: none !important; }

/* Error pages */
.p-error-shell { min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: var(--s-8); padding-block: var(--s-10); position: relative; }
.p-error-card { width: 100%; text-align: center; display: grid; justify-items: center; }
.p-error-card .p-lead { max-width: 46ch; }
.p-error-theme { position: absolute; top: var(--s-4); inset-inline-end: 0; }

/* Pager on phones: the label on its own line, full-size buttons */
@media (max-width: 600px) {
    .p-pager { flex-wrap: wrap; }
    .p-pager > span:first-child { flex-basis: 100%; }
    .p-pager .p-btn { min-height: var(--control-h); }
}

/* Phones: every control a full touch target; the stage chips wrap instead of scrolling */
@media (max-width: 600px) {
    .p-btn--sm { min-height: var(--control-h); }
    .p-ident button { width: 40px; height: 40px; }
    .p-segments { flex-wrap: wrap; overflow: visible; border-radius: var(--r-lg); }
}
/* A checkbox row: the whole row is the touch target */
.p-check { min-height: var(--control-h); cursor: pointer; flex-wrap: nowrap; }

/* Payment instructions card */
@media (min-width: 1024px) { .p-result__grid.p-result__grid--single { grid-template-columns: minmax(0, 1fr); } }
.p-pay__amount { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--accent-soft); }
.p-pay__amount .p-muted { flex-basis: 100%; font-size: var(--fs-sm); }
.p-pay__total { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 800; color: var(--accent-ink); letter-spacing: -0.01em; }
.p-pay__grid { display: grid; gap: var(--s-5); margin-block-start: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 720px) { .p-pay__grid.has-qr { grid-template-columns: minmax(0, 1fr) auto; } }
.p-pay__ref { background: var(--warning-soft); }
.p-ident--strong { font-size: var(--fs-lg); font-weight: 800; }
.p-ident { max-width: 100%; overflow-wrap: anywhere; }
/* A name (an Arabic one joins its letters): the text face, its own direction. */
.p-ident--name { font-family: inherit; direction: inherit; unicode-bidi: plaintext; }
.p-pay__qr { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); max-width: 260px; margin-inline: auto; }
.p-pay__qr img { width: 200px; height: 200px; }
.p-pay__qr .p-hint { color: #475569; text-align: center; max-width: 22ch; }
.p-pay__steps { margin-block-start: var(--s-5); padding-inline-start: var(--s-5); display: grid; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
.p-pay__steps li { list-style: decimal; }

/* Payment card and its receipt panel side by side on wide screens */
.p-pay-pair { display: grid; gap: var(--s-5); margin-block-end: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .p-pay-pair { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); } }
.p-receipt__list { display: grid; gap: var(--s-2); font-size: var(--fs-sm); }
.p-receipt__list li { list-style: none; display: flex; align-items: center; gap: var(--s-2); color: var(--success-ink); }
.p-receipt__list li .p-muted { color: var(--muted); }
.p-upload--lg { padding: var(--s-6) var(--s-4); flex-direction: column; text-align: center; }