@charset "UTF-8";
/* MUST stay the first bytes of this file. The Arabic in the comments below is UTF-8,
   and the production server (LiteSpeed/Hostinger) serves .css without a charset
   parameter — the browser then decoded these bytes as Latin-1, mangled the first
   comment, and abandoned the parse 83 rules in, dropping :root and everything after
   it. Declaring the encoding in the file itself travels with the file. */
/* عقدي — design system.
   A hand-written port of shadcn/ui's design language to plain CSS. shadcn ships as React +
   Radix + Tailwind source you copy into a project with a build step; this app is vanilla PHP
   on shared hosting with no Node and no build, so what's ported here is the part that
   actually defines the look: the HSL token model, the neutral palette, the 0.5rem radius,
   the 1px borders over flat surfaces, the focus ring, and the component anatomies
   (button/card/input/badge/alert/switch/progress/sheet/table/tabs) under their shadcn names.

   Written RTL-first with logical properties, so the same rules serve both directions.
   Replaces the previous MDC Web build — no CDN CSS/JS is loaded any more. */

/* ═══════════════════════════════════════════════════════════
   Fonts
   ═══════════════════════════════════════════════════════════ */

/* Both brand faces are single-file Arabic display faces with no separate bold: the weight
   range claims 400–900 so the browser reuses this file for `font-weight:700` instead of
   synthesising a smeared fake-bold over an already-heavy face. */
@font-face {
    font-family: 'PT Bold Heading';
    src: url('/assets/fonts/PTBoldHeading.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mohammad Bold Art';
    src: url('/assets/fonts/MohammadBoldArt.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

/* ═══════════════════════════════════════════════════════════
   Tokens — shadcn's variable contract, HSL triplets so any
   consumer can add its own alpha via hsl(var(--x) / 0.5)
   ═══════════════════════════════════════════════════════════ */

:root {
    --background: 0 0% 100%;
    --foreground: 212 45% 12%;

    --card: 0 0% 100%;
    --card-foreground: 212 45% 12%;

    --popover: 0 0% 100%;
    --popover-foreground: 212 45% 12%;

    /* Aqdi's navy is the shadcn `primary` slot, so brand colour flows through every
       component that references the token rather than being painted on per-component. */
    --primary: 212 71% 20%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96%;
    --secondary-foreground: 212 47% 15%;

    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;

    /* Brand gold — the call-to-action accent. */
    --accent: 40 67% 51%;
    --accent-foreground: 212 60% 14%;

    --destructive: 0 72% 45%;
    --destructive-foreground: 210 40% 98%;

    --success: 160 84% 30%;

    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 212 71% 20%;

    --radius: 0.5rem;

    --font-heading: 'PT Bold Heading', 'Cairo', Tahoma, sans-serif;
    --font-sans: 'Mohammad Bold Art', 'Cairo', Tahoma, sans-serif;

    --header-height: 60px;
}

/* shadcn ships light + dark as one system. Following the viewer's OS setting keeps that
   true here without a toggle to persist. */
@media (prefers-color-scheme: dark) {
    :root {
        --background: 212 43% 7%;
        --foreground: 210 40% 96%;

        --card: 212 40% 10%;
        --card-foreground: 210 40% 96%;

        --popover: 212 40% 10%;
        --popover-foreground: 210 40% 96%;

        --primary: 210 40% 96%;
        --primary-foreground: 212 47% 11%;

        --secondary: 213 28% 17%;
        --secondary-foreground: 210 40% 96%;

        --muted: 213 28% 17%;
        --muted-foreground: 215 20% 65%;

        --accent: 40 67% 55%;
        --accent-foreground: 212 60% 10%;

        --destructive: 0 63% 45%;
        --destructive-foreground: 210 40% 96%;

        --success: 160 60% 45%;

        --border: 213 28% 20%;
        --input: 213 28% 20%;
        --ring: 213 27% 70%;
    }
}

/* ═══════════════════════════════════════════════════════════
   Base
   ═══════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
    box-sizing: border-box;
    border-color: hsl(var(--border));
}

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

body {
    margin: 0;
    /* Column flex + `flex:1` on <main> keeps the footer at the bottom of the viewport on
       short pages (the wizard's choice steps are only a few hundred pixels tall). */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

/* One focus ring for the whole system, matching shadcn's offset ring. */
:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

::selection {
    background: hsl(var(--primary) / 0.15);
}

/* ═══════════════════════════════════════════════════════════
   Button
   ═══════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding-inline: 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.btn:hover {
    background: hsl(var(--primary) / 0.9);
}

.btn:disabled,
.btn[aria-disabled='true'] {
    opacity: 0.5;
    pointer-events: none;
}

.btn--secondary {
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

.btn--secondary:hover {
    background: hsl(var(--secondary) / 0.8);
}

.btn--outline {
    background: hsl(var(--background));
    border-color: hsl(var(--input));
    color: hsl(var(--foreground));
}

.btn--outline:hover {
    background: hsl(var(--secondary));
}

.btn--ghost {
    background: transparent;
    color: hsl(var(--foreground));
}

.btn--ghost:hover {
    background: hsl(var(--secondary));
}

.btn--destructive {
    background: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
}

.btn--destructive:hover {
    background: hsl(var(--destructive) / 0.9);
}

/* Brand CTA — gold, used for the one primary action on a page. */
.btn--accent {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.btn--accent:hover {
    background: hsl(var(--accent) / 0.88);
}

.btn--sm {
    height: 2.25rem;
    padding-inline: 0.75rem;
    font-size: 0.8125rem;
}

.btn--lg {
    height: 2.75rem;
    padding-inline: 2rem;
    font-size: 0.95rem;
}

.btn--icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
}

.btn--block {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   Card
   ═══════════════════════════════════════════════════════════ */

.card {
    display: flex;
    flex-direction: column;
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) + 0.25rem);
}

.card-header {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.25rem 1.5rem;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.card-description {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
}

.card-content {
    padding: 0 1.5rem 1.5rem;
}

.card-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.5rem 1.5rem;
}

/* Interactive card — the whole surface is a link. */
.card--link {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.card--link:hover {
    border-color: hsl(var(--primary) / 0.35);
    box-shadow: 0 1px 3px 0 hsl(var(--foreground) / 0.08), 0 1px 2px -1px hsl(var(--foreground) / 0.08);
}

/* ═══════════════════════════════════════════════════════════
   Input / Label / Field
   ═══════════════════════════════════════════════════════════ */

.label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.label .required {
    color: hsl(var(--destructive));
}

.input {
    display: block;
    width: 100%;
    height: 2.5rem;
    padding-inline: 0.75rem;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input::placeholder {
    color: hsl(var(--muted-foreground));
}

.input:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.25);
}

.input[aria-invalid='true'] {
    border-color: hsl(var(--destructive));
}

/* Latin-shaped values (dates, national IDs) read wrong when the RTL paragraph
   direction reorders them — pin those inputs to LTR while keeping them right-aligned. */
.input[type='date'],
.input[type='number'] {
    direction: ltr;
    text-align: right;
}

/* Phone: dialling-code select butted against the number box, rendered as one control.
   The code sits at the start edge (right, in RTL) so it reads in dialling order. */
.phone-input {
    display: flex;
    align-items: stretch;
}

.phone-input__code {
    flex: 0 0 auto;
    width: auto;
    max-width: 11rem;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-inline-end: 0;
    background: hsl(var(--muted) / 0.6);
    font-size: 0.8125rem;
    padding-inline: 0.5rem;
    cursor: pointer;
}

.phone-input__number {
    flex: 1 1 auto;
    min-width: 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

/* Focus has to lift the joined edge above its neighbour or the ring gets clipped. */
.phone-input__code:focus,
.phone-input__number:focus {
    position: relative;
    z-index: 1;
}

@media (max-width: 420px) {
    .phone-input__code {
        max-width: 8rem;
    }
}

.field-error {
    color: hsl(var(--destructive));
    font-size: 0.8125rem;
    margin: 0.375rem 0 0;
}

.field-hint {
    color: hsl(var(--muted-foreground));
    font-size: 0.8125rem;
    margin: 0.375rem 0 0;
}

/* ═══════════════════════════════════════════════════════════
   Badge
   ═══════════════════════════════════════════════════════════ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.625rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.badge--secondary {
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

.badge--outline {
    background: transparent;
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
}

.badge--accent {
    background: hsl(var(--accent) / 0.15);
    color: hsl(var(--accent) / 0.95);
    border-color: hsl(var(--accent) / 0.35);
}

.badge--success {
    background: hsl(var(--success) / 0.12);
    color: hsl(var(--success));
    border-color: hsl(var(--success) / 0.3);
}

.badge--destructive {
    background: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
}

/* ═══════════════════════════════════════════════════════════
   Alert
   ═══════════════════════════════════════════════════════════ */

.alert {
    padding: 0.875rem 1rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--background));
    font-size: 0.875rem;
}

.alert-title {
    font-family: var(--font-heading);
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.alert-description {
    color: hsl(var(--muted-foreground));
    margin: 0;
}

.alert--destructive {
    border-color: hsl(var(--destructive) / 0.5);
    background: hsl(var(--destructive) / 0.06);
    color: hsl(var(--destructive));
}

.alert--destructive .alert-description {
    color: hsl(var(--destructive) / 0.9);
}

.alert--success {
    border-color: hsl(var(--success) / 0.4);
    background: hsl(var(--success) / 0.07);
}

/* ═══════════════════════════════════════════════════════════
   Separator
   ═══════════════════════════════════════════════════════════ */

.separator {
    height: 1px;
    border: 0;
    margin: 0;
    background: hsl(var(--border));
}

/* ═══════════════════════════════════════════════════════════
   Switch
   ═══════════════════════════════════════════════════════════ */

.switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.switch__track {
    display: block;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: hsl(var(--muted-foreground) / 0.4);
    transition: background-color 0.15s ease;
}

.switch__track::after {
    content: '';
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.125rem;
    border-radius: 9999px;
    background: hsl(var(--background));
    box-shadow: 0 1px 2px hsl(var(--foreground) / 0.2);
    transition: transform 0.15s ease;
}

.switch input:checked + .switch__track {
    background: hsl(var(--primary));
}

/* RTL: the thumb travels toward the start edge, i.e. leftwards on screen. */
.switch input:checked + .switch__track::after {
    transform: translateX(-1.25rem);
}

.switch input:focus-visible + .switch__track {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   Progress
   ═══════════════════════════════════════════════════════════ */

.progress {
    position: relative;
    height: 0.5rem;
    width: 100%;
    overflow: hidden;
    border-radius: 9999px;
    background: hsl(var(--secondary));
}

.progress__indicator {
    height: 100%;
    border-radius: 9999px;
    background: hsl(var(--primary));
    transition: width 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════
   Tabs (used as the catalog's category filter row)
   ═══════════════════════════════════════════════════════════ */

.tabs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--radius);
    background: hsl(var(--muted));
}

.tabs-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border: 0;
    border-radius: calc(var(--radius) - 0.125rem);
    background: transparent;
    color: hsl(var(--muted-foreground));
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tabs-trigger:hover {
    color: hsl(var(--foreground));
}

.tabs-trigger[data-state='active'] {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    box-shadow: 0 1px 2px hsl(var(--foreground) / 0.08);
}

/* ═══════════════════════════════════════════════════════════
   Table
   ═══════════════════════════════════════════════════════════ */

.table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) + 0.25rem);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    caption-side: bottom;
}

.table thead tr {
    border-bottom: 1px solid hsl(var(--border));
}

.table th {
    padding: 0.75rem 1rem;
    text-align: start;
    font-family: var(--font-heading);
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
}

.table td {
    padding: 0.75rem 1rem;
    text-align: start;
    vertical-align: middle;
}

.table tbody tr {
    border-bottom: 1px solid hsl(var(--border));
    transition: background-color 0.15s ease;
}

.table tbody tr:last-child {
    border-bottom: 0;
}

.table tbody tr:hover {
    background: hsl(var(--muted) / 0.5);
}

/* ═══════════════════════════════════════════════════════════
   App shell — header, sheet (drawer), main, footer
   ═══════════════════════════════════════════════════════════ */

.app-header {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--header-height);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-inline: 1rem;
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--background) / 0.85);
    backdrop-filter: blur(8px);
}

.app-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Brand mark — a filled square with the glyph knocked out, so the wordmark has an anchor
   instead of floating as bare text next to the hamburger. */
.app-header__mark {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: calc(var(--radius) - 0.125rem);
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.app-header__nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-inline-start: auto;
}

.app-header__nav a {
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    transition: background-color 0.15s ease, color 0.15s ease;
}

.app-header__nav a:hover {
    background: hsl(var(--secondary));
    color: hsl(var(--foreground));
}

/* Beta notice — a persistent strip above the header. Deliberately not dismissible: a
   visitor who closes it and comes back later would have no way of knowing the contracts
   are still under review, which is exactly what they need to know before relying on one. */
.beta-banner {
    position: relative;
    z-index: 41;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid hsl(var(--accent) / 0.35);
    background: hsl(var(--accent) / 0.12);
    color: hsl(var(--foreground));
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: center;
}

.beta-banner__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 9999px;
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.beta-banner__text {
    color: hsl(var(--muted-foreground));
}

@media (prefers-color-scheme: dark) {
    .beta-banner {
        background: hsl(var(--accent) / 0.16);
    }
}

/* The banner scrolls away; the header stays. Stacking it above keeps the header's own
   sticky offset at 0 so nothing needs a magic number. */
.app-header {
    z-index: 40;
}

/* Small "تجريبي" chip beside the wordmark, so the state is still visible once the banner
   has scrolled out of view. */
.app-header__beta {
    padding: 0.0625rem 0.375rem;
    border: 1px solid hsl(var(--accent) / 0.5);
    border-radius: 0.25rem;
    color: hsl(var(--accent));
    font-family: var(--font-heading);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

/* Sheet — Radix's side panel, which is what shadcn's mobile nav uses. */
.sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: hsl(212 45% 6% / 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.sheet-content {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 51;
    width: 18rem;
    max-width: 85vw;
    display: flex;
    flex-direction: column;
    background: hsl(var(--background));
    border-inline-end: 1px solid hsl(var(--border));
    /* Off-screen toward the start edge; RTL puts that on the right, LTR on the left. */
    transform: translateX(calc(100% * var(--sheet-dir, 1)));
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

[dir='rtl'] .sheet-content {
    --sheet-dir: 1;
}

[dir='ltr'] .sheet-content {
    --sheet-dir: -1;
}

.sheet.is-open .sheet-overlay {
    opacity: 1;
    visibility: visible;
}

.sheet.is-open .sheet-content {
    transform: translateX(0);
}

.sheet-header {
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid hsl(var(--border));
}

.sheet-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
}

.sheet-description {
    color: hsl(var(--muted-foreground));
    font-size: 0.8125rem;
    margin: 0.125rem 0 0;
}

.sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
}

/* Sidebar nav list inside the sheet. */
.nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.nav-list__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    line-height: 1;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-list__item:hover {
    background: hsl(var(--secondary));
    color: hsl(var(--foreground));
}

.nav-list__item[aria-current='page'] {
    background: hsl(var(--secondary));
    color: hsl(var(--foreground));
}

.nav-list__label {
    padding: 0.75rem 0.75rem 0.375rem;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: hsl(var(--muted-foreground));
    letter-spacing: 0.02em;
}

/* Full-bleed grid. Sections normally sit in the centre `content` column; .section--muted
   asks for `full` and reaches the window edges. The earlier version did this with
   `calc(50% - 50vw)`, which overflowed by the scrollbar width on any page long enough to
   scroll — 100vw counts the scrollbar, 100% does not. No viewport units here, so the
   gutters stay exact whether or not a scrollbar is present. */
.app-main {
    flex: 1;
    width: 100%;
    display: grid;
    align-content: start;
    grid-template-columns:
        [full-start] minmax(1rem, 1fr)
        [content-start] minmax(0, 1120px) [content-end]
        minmax(1rem, 1fr) [full-end];
    padding-block: 2rem 4rem;
}

.app-main > * {
    grid-column: content;
}

.app-footer {
    border-top: 1px solid hsl(var(--border));
    background: hsl(var(--muted) / 0.4);
}

.app-footer p {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.8125rem;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   Page sections
   ═══════════════════════════════════════════════════════════ */

/* Sections alternate plain / muted so a long page has rhythm instead of one
   uninterrupted white field. The muted ones bleed full-width, hence the negative
   inline margin against .app-main's padding. */
.section {
    padding-block: 3.5rem;
}

.section--muted {
    grid-column: full;
    /* Re-inset the content to line up with the centre column above and below it. */
    padding-inline: max(1rem, calc((100% - 1120px) / 2));
    background: hsl(var(--muted) / 0.45);
    border-block: 1px solid hsl(var(--border));
}

.section__head {
    max-width: 44rem;
    margin-bottom: 2rem;
}

.section__eyebrow {
    display: block;
    margin-bottom: 0.625rem;
    color: hsl(var(--accent));
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.section__head h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.02em;
}

.section__head p {
    max-width: 38rem;
    margin: 0.625rem 0 0;
    color: hsl(var(--muted-foreground));
    font-size: 0.95rem;
}

/* ─── Hero ─── */

.hero {
    position: relative;
    padding: 5rem 0 4rem;
    text-align: center;
}

/* Faint dot grid, masked to an ellipse so it fades out well before the edges — gives the
   hero a surface without putting anything behind the text that competes with it. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(hsl(var(--foreground) / 0.13) 1px, transparent 1px);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(ellipse 55% 65% at 50% 35%, #000 10%, transparent 70%);
    mask-image: radial-gradient(ellipse 55% 65% at 50% 35%, #000 10%, transparent 70%);
    pointer-events: none;
}

.hero > * {
    position: relative;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.3125rem 0.875rem;
    border: 1px solid hsl(var(--border));
    border-radius: 9999px;
    background: hsl(var(--background));
    color: hsl(var(--muted-foreground));
    font-size: 0.75rem;
    font-weight: 600;
}

.hero__badge svg {
    color: hsl(var(--accent));
}

.hero h1 {
    /* 20ch was tuned by eye on Latin and left "دقائق" stranded on its own line — Arabic
       runs denser per character, so the measure has to be wider to hold the same phrase.
       `text-wrap: balance` then evens the rag out wherever it does wrap. */
    max-width: 28ch;
    margin: 0 auto;
    font-size: clamp(2rem, 5.5vw, 3.25rem);
    line-height: 1.18;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.hero__lead {
    max-width: 38rem;
    text-wrap: pretty;
    margin: 1.125rem auto 0;
    color: hsl(var(--muted-foreground));
    font-size: 1.0625rem;
    line-height: 1.75;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* Trust strip under the hero CTAs — short, factual, no decorative filler. */
.hero__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.75rem;
    margin-top: 2.5rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.8125rem;
}

.hero__facts span {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
}

.hero__facts svg {
    color: hsl(var(--accent));
}

/* ─── Grids ─── */

.grid {
    display: grid;
    gap: 1rem;
}

.grid--categories {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.grid--contracts {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* ─── Tile (category / contract card) ─── */

.tile {
    padding: 1.5rem;
}

/* Icon plate — bordered muted square that picks up the brand colour on hover, which is
   what ties the whole grid together visually. */
.tile__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.125rem;
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 0.125rem);
    background: hsl(var(--muted) / 0.7);
    color: hsl(var(--muted-foreground));
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.card--link:hover .tile__icon {
    border-color: hsl(var(--primary) / 0.35);
    background: hsl(var(--primary) / 0.08);
    color: hsl(var(--primary));
}

@media (prefers-color-scheme: dark) {
    .card--link:hover .tile__icon {
        border-color: hsl(var(--accent) / 0.4);
        background: hsl(var(--accent) / 0.12);
        color: hsl(var(--accent));
    }
}

.tile__title {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tile__desc {
    display: block;
    margin-top: 0.375rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.6;
}

.tile__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed hsl(var(--border));
}

.tile__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.8125rem;
}

/* Arrow nudges toward the reading direction on hover — RTL, so leftwards. */
.tile__arrow {
    color: hsl(var(--muted-foreground));
    transition: transform 0.15s ease, color 0.15s ease;
}

.card--link:hover .tile__arrow {
    transform: translateX(-0.25rem);
    color: hsl(var(--foreground));
}

/* ─── Empty state ─── */

.empty-state {
    display: grid;
    place-items: center;
    gap: 0.75rem;
    padding: 4rem 1.5rem;
    border: 1px dashed hsl(var(--border));
    border-radius: calc(var(--radius) + 0.25rem);
    text-align: center;
}

.empty-state__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

.empty-state__title {
    font-family: var(--font-heading);
    font-weight: 700;
}

.empty-state p {
    max-width: 28rem;
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
}

/* ─── Page header (catalog / inner pages) ─── */

.page-header {
    padding-bottom: 1.75rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid hsl(var(--border));
}

.page-header h1 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.02em;
}

.page-header > p {
    max-width: 42rem;
    margin: 0.5rem 0 0;
    color: hsl(var(--muted-foreground));
    font-size: 0.9375rem;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.8125rem;
}

.breadcrumb a:hover {
    color: hsl(var(--foreground));
}

.breadcrumb [aria-current='page'] {
    color: hsl(var(--foreground));
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   Wizard
   ═══════════════════════════════════════════════════════════ */

.wizard {
    max-width: 44rem;
    margin: 0 auto;
}

.wizard-header {
    margin-bottom: 1.75rem;
}

.wizard-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
    color: hsl(var(--muted-foreground));
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
}

.wizard-question {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin-top: 1.5rem;
}

.wizard-question__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 0.125rem);
    background: hsl(var(--muted) / 0.7);
    color: hsl(var(--muted-foreground));
}

.wizard-question h1 {
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    margin: 0;
}

.wizard-question p {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

.wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid hsl(var(--border));
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.field--full {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .field-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Choice cards — radio/checkbox groups styled as selectable surfaces. */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}

/* single_choice steps wrap each option in its own <form> so the click submits directly.
   That form would otherwise be the grid item, leaving the button inside it unstretched and
   the row ragged whenever one option's description wraps. `display: contents` hands the
   grid slot to the button itself. */
.choice-grid > form {
    display: contents;
}

.choice-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    width: 100%;
    padding: 1rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    font-family: var(--font-sans);
    font-size: 0.9rem;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.choice-card:hover {
    border-color: hsl(var(--primary) / 0.4);
    background: hsl(var(--secondary) / 0.5);
}

.choice-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* :has() drives the selected state straight off the input, so no JS keeps it in sync. */
.choice-card:has(input:checked) {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.06);
    box-shadow: inset 0 0 0 1px hsl(var(--primary));
}

.choice-card:has(input:focus-visible) {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* shadcn's RadioGroup-in-a-card pattern: a ring that fills in when selected. Replaces the
   emoji that used to sit here — a real indicator tells you the state, an emoji only
   decorates it. Rendered from the wrapper so a plain <button> option gets one too. */
.choice-card__indicator {
    width: 1rem;
    height: 1rem;
    margin-top: 0.1875rem;
    border: 1px solid hsl(var(--muted-foreground) / 0.6);
    border-radius: 9999px;
    display: grid;
    place-items: center;
    transition: border-color 0.15s ease;
}

.choice-card__indicator::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: hsl(var(--primary));
    transform: scale(0);
    transition: transform 0.15s ease;
}

.choice-card:has(input:checked) .choice-card__indicator {
    border-color: hsl(var(--primary));
}

.choice-card:has(input:checked) .choice-card__indicator::after {
    transform: scale(1);
}

/* Submit-button options (single_choice steps) have no input to reflect, so their ring
   stays empty until hover hints that it is pickable. */
.choice-card:hover .choice-card__indicator {
    border-color: hsl(var(--primary));
}

.choice-card__label {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.choice-card__desc {
    grid-column: 2;
    color: hsl(var(--muted-foreground));
    font-size: 0.8125rem;
    line-height: 1.6;
}

/* Optional-clause list: a switch per clause, revealing its own sub-fields. */
.clause-card {
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) + 0.25rem);
    background: hsl(var(--card));
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.clause-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.clause-card__title {
    font-family: var(--font-heading);
    font-weight: 700;
}

.clause-card__body {
    display: none;
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid hsl(var(--border));
    padding-top: 1.25rem;
}

.clause-card.is-open .clause-card__body {
    display: block;
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
}

.toggle-row__label {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
}

/* "ليه ده مهم؟" — a small inline disclosure. */
.explainer-toggle {
    padding: 0;
    margin-inline-start: 0.5rem;
    border: 0;
    background: none;
    color: hsl(var(--primary));
    font-family: var(--font-sans);
    font-size: 0.75rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

@media (prefers-color-scheme: dark) {
    .explainer-toggle {
        color: hsl(var(--accent));
    }
}

.explainer-box {
    display: none;
    margin-top: 0.5rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--muted) / 0.6);
    color: hsl(var(--muted-foreground));
    font-size: 0.8125rem;
    line-height: 1.7;
}

.explainer-box.is-open {
    display: block;
}

/* Number stepper (−/+). */
.number-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    overflow: hidden;
}

.number-stepper button {
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.number-stepper button:hover {
    background: hsl(var(--secondary));
}

.number-stepper output {
    min-width: 3.5rem;
    padding-inline: 0.5rem;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 700;
    border-inline: 1px solid hsl(var(--input));
    line-height: 2.5rem;
}

/* ─── Completion card (end of wizard) ─── */

.completion {
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 2rem;
    text-align: center;
}

.completion__icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: hsl(var(--success) / 0.12);
    color: hsl(var(--success));
}

.completion__title {
    font-size: 1.375rem;
    letter-spacing: -0.02em;
}

.completion__text {
    max-width: 30rem;
    margin: 0 0 0.75rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.9375rem;
}

/* ═══════════════════════════════════════════════════════════
   Contract preview
   ═══════════════════════════════════════════════════════════ */

/* Preview page header — title block on one side, the download action on the other. */
.preview-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.contract-sheet {
    padding: 2rem clamp(1rem, 4vw, 2.5rem);
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) + 0.25rem);
    background: hsl(var(--card));
}

/* Same font pairing as the generated PDF, so the preview matches the download. */
.aqdi-contract-text {
    font-family: var(--font-sans);
    line-height: 2;
}

.aqdi-contract-text h1 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    text-align: center;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid hsl(var(--border));
}

.aqdi-contract-text h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    margin: 1.25rem 0 0.25rem;
}

.aqdi-contract-text p {
    margin: 0 0 0.75rem;
}

.aqdi-contract-text .signatures {
    width: 100%;
    margin-top: 2.5rem;
    border-collapse: collapse;
}

.aqdi-contract-text .signatures td {
    width: 50%;
    padding-top: 2rem;
    vertical-align: top;
}

/* ═══════════════════════════════════════════════════════════
   Accounts
   ═══════════════════════════════════════════════════════════ */

.auth-shell {
    max-width: 26rem;
    margin: 2rem auto;
}

.auth-card__footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid hsl(var(--border));
    background: hsl(var(--muted) / 0.4);
    color: hsl(var(--muted-foreground));
    font-size: 0.8125rem;
    text-align: center;
}

.auth-card__footer a,
.field-hint a {
    color: hsl(var(--primary));
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
    .auth-card__footer a,
    .field-hint a {
        color: hsl(var(--accent));
    }
}

/* ─── Saved contract row ─── */

.saved-contract {
    padding: 1rem 1.25rem;
    gap: 1rem;
}

.saved-contract__main {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.saved-contract__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 0.125rem);
    background: hsl(var(--muted) / 0.7);
    color: hsl(var(--muted-foreground));
}

.saved-contract__text {
    flex: 1;
    min-width: 0;
}

.saved-contract__title {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
}

.saved-contract__meta {
    display: block;
    color: hsl(var(--muted-foreground));
    font-size: 0.8125rem;
}

.saved-contract__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.875rem;
    border-top: 1px dashed hsl(var(--border));
}

/* <details> as a lightweight menu — no JS, and it closes on Escape for free. */
.saved-contract__more {
    margin-inline-start: auto;
    position: relative;
}

.saved-contract__more > summary {
    list-style: none;
    cursor: pointer;
}

.saved-contract__more > summary::-webkit-details-marker {
    display: none;
}

.saved-contract__menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.25rem);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 17rem;
    padding: 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--popover));
    box-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
}

/* ─── Header account area ─── */

.app-header__account {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.app-header__avatar {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
}

/* ─── Flash ─── */

.flash {
    max-width: 1120px;
    margin: 0 auto 1.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid hsl(var(--success) / 0.4);
    border-radius: var(--radius);
    background: hsl(var(--success) / 0.08);
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════
   Utilities
   ═══════════════════════════════════════════════════════════ */

.stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.muted {
    color: hsl(var(--muted-foreground));
}

.text-sm {
    font-size: 0.875rem;
}

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

/* ═══════════════════════════════════════════════════════════
   Visitor-written clauses
   ═══════════════════════════════════════════════════════════ */

.custom-clause {
    padding: 0;
    overflow: hidden;
}

.custom-clause__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    list-style: none;
}

.custom-clause__head::-webkit-details-marker {
    display: none;
}

.custom-clause__index {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: calc(var(--radius) - 0.125rem);
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
}

.custom-clause__title {
    flex: 1;
    font-family: var(--font-heading);
    font-weight: 700;
}

.custom-clause__head .aqdi-hint {
    color: hsl(var(--muted-foreground));
    font-size: 0.75rem;
}

/* Collapsed summary of the text, hidden once the editor is open so the same words are
   never on screen twice. */
.custom-clause__preview {
    margin: 0;
    padding: 0 1.25rem 1rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.8125rem;
    line-height: 1.7;
}

.custom-clause details[open] ~ .custom-clause__preview,
.custom-clause > details[open] + .custom-clause__preview {
    display: none;
}

.custom-clause__form {
    padding: 0 1.25rem 1rem;
    border-top: 1px solid hsl(var(--border));
    padding-top: 1rem;
}

.custom-clause__body {
    height: auto;
    min-height: 9rem;
    padding: 0.75rem;
    line-height: 1.9;
    resize: vertical;
}

.custom-clause--add .custom-clause__index {
    background: hsl(var(--accent) / 0.15);
    color: hsl(var(--accent));
}

.custom-clause__controls {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0 1.25rem 1rem;
}

.custom-clause__controls form:last-child {
    margin-inline-start: auto;
}