/* ==========================================================================
   Clopra — Main stylesheet
   Brand: ink #1F2739 · coral #E0533D · slate #384047
   Logical properties are used throughout so the sheet works in RTL and LTR.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --navy-950: #12161F;
    --navy-900: #171C27;
    --navy-800: #1E2431;
    --navy-700: #1F2739;
    --navy-600: #2C3549;
    --navy-500: #3B475C;

    --brand-700: #A6321F;
    --brand-600: #C43F2B;
    --brand-500: #E0533D;
    --brand-400: #EC6B54;
    --brand-300: #F58C77;
    --brand-100: #FBDDD6;
    --brand-50: #FDF0EC;

    --slate-700: #384047;
    --slate-500: #5B6673;
    --slate-400: #8A94A3;
    --slate-300: #B9C1CC;
    --slate-200: #DCE2E9;
    --slate-100: #EDF1F5;
    --slate-50: #F6F8FA;

    --amber: #E8A33D;
    --white: #FFFFFF;

    /* ---------------------------------------------------------------
       رموز دلالية: النجاح والخطأ والتنبيه.
       كانت مثبَّتةً في ثلاثين موضعًا — والتغيير في ثلاثين موضعًا لا يحدث،
       فيبقى الأحمر أحمرين متقاربين لا يُفرَّق بينهما إلا بجانب بعضهما.
       Semantic tokens. These were hard-coded in thirty places, and a change
       in thirty places never happens — so the red stays two near-identical
       reds, distinguishable only side by side.
       --------------------------------------------------------------- */
    --ok:        #2F7D5B;
    --ok-deep:   #22624A;
    --ok-soft:   #EAF6F0;
    --ok-line:   #BFE0D0;
    --danger:    #B4453F;
    --danger-soft: #FBEDEC;
    --danger-line: #E8C4C1;
    --warn:      #C9922B;
    --warn-deep: #8A6410;
    --warn-soft: #FFF6E6;
    --sand-50:   #FAF7F4;
    --on-dark:   #6FD3A6;
    --off-dark:  #E88C86;

    /* ---------------------------------------------------------------
       مقياسان بدل الارتجال.
       كان في هذا الملف سبعٌ وخمسون قيمةَ تباعد وثلاثةَ عشرَ نصفَ قطر.
       لا يُرى الفرق بين ١٠ و١١ فرادى، ويُرى مجتمعًا: يبدو كأن كل عنصرٍ
       رُسم وحده على حدة — وهذا بعينه ما يُقرأ «غير منظّم».
       Two scales instead of improvisation. This file had fifty-seven spacing
       values and thirteen radii. Nobody sees 10px against 11px on its own;
       everybody sees it in aggregate, as the sense that every element was
       drawn on its own — which is exactly what reads as "unorganised".
       --------------------------------------------------------------- */
    --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;
    --sp-4: 1rem;    --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;

    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   18px;
    --r-pill: 999px;

    /* Semantic */
    --ink: var(--navy-700);
    --ink-soft: var(--slate-500);
    --line: var(--slate-200);
    --surface: var(--white);
    --surface-alt: var(--slate-50);

    /* Type */
    --font-base: 'Plus Jakarta Sans', system-ui, sans-serif;

    /* ★ اسْتُعمل في عشرين موضعًا ولم يُعرَّف قطّ — وكلّها أرقام: سعرُ الصنف،
       ومجموع السلّة، ورصيد النقاط، وسطور الدفتر. و`var()` بلا بديلٍ لمتغيّرٍ
       غير معرَّف تُسقط التصريح صامتةً، فخرجت الأرقام كلّها بخطّ المتن:
       أعرضُها متفاوتُ العرض فلا تصطفّ الخانات، والفاتورة تُقرأ رقمًا رقمًا.
       ★ Used in twenty places and never defined — every one of them a number:
       item price, cart total, points balance, ledger rows. A `var()` with no
       fallback for an undefined property drops the declaration silently, so
       every figure rendered in the body face: proportional digits that do not
       line up in columns, and a bill that has to be read digit by digit. */
    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

    /* لونٌ وسيط بين المتن والباهت — نقطة السوشل على غلافٍ فاتح */
    --ink-600: var(--navy-600);

    /* Radius & elevation */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(19, 26, 38, .06), 0 2px 8px rgba(19, 26, 38, .05);
    --shadow-md: 0 4px 12px rgba(19, 26, 38, .07), 0 12px 32px rgba(19, 26, 38, .07);
    --shadow-lg: 0 10px 24px rgba(19, 26, 38, .08), 0 28px 64px rgba(19, 26, 38, .12);
    --shadow-brand: 0 10px 30px rgba(224, 83, 61, .28);

    /* Rhythm */
    --section-y: clamp(64px, 8vw, 118px);
    --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    font-family: var(--font-base);
    color: var(--ink);
    background: var(--surface);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* The bundled Bootstrap build is the Bootswatch "Litera" theme, which sets
   p { font-family: Georgia, ..., serif }. Pull every text element back onto
   the brand face. Icon fonts declare their family with !important, so they
   are unaffected. */
body, p, li, a, span, small, strong, label, blockquote, figcaption,
button, input, select, textarea, .btn, .form-control, .form-select, .lead {
    font-family: var(--font-base);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-base);
    color: var(--navy-700);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.02em;
    margin: 0 0 .6em;
}

p {
    margin: 0 0 1rem;
    color: var(--ink-soft);
}

a {
    color: var(--brand-600);
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: var(--brand-500);
}

img {
    max-width: 100%;
    height: auto;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

::selection {
    background: var(--brand-500);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Arabic tuning — Tajawal runs small and tight next to Plus Jakarta Sans */
html[lang="ar"] body {
    line-height: 1.9;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 {
    letter-spacing: 0;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
/* ★ الحاوية الوحيدة في الموقع كلّه — وكانت بلا حشوٍ أفقيّ إطلاقًا.
   `max-width` وحدها تحدّ العرض على الشاشات الواسعة ولا تفعل شيئًا على
   الضيّقة: هناك تمتدّ الحاوية من صفر إلى صفر، فيلتصق كلُّ نصٍّ وكلُّ زرٍّ
   وكلُّ بطاقة بحافّتي الشاشة. صفحةٌ واحدة لا تشذّ، لأن الجميع يستعملها.
   ★ The one container in the whole site — and it had no horizontal padding at
   all. `max-width` alone bounds the width on wide screens and does nothing on
   narrow ones: there the container runs edge to edge, so every line of text,
   every button and every card sits flush against both sides. Not one page
   escapes it, because every page uses it.

   والحشو ينمو مع الشاشة: ١٦ بكسل على الهاتف تكفي الإبهام، و٣٢ على الحاسوب
   تُبعد النصّ عن الحافّة بما يريح العين.
   The gutter grows with the screen: 16px on a phone is enough for a thumb,
   32px on a desktop keeps text off the edge. */
.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.section {
    padding-block: var(--section-y);
    position: relative;
}

.section-sm {
    padding-block: clamp(48px, 5vw, 72px);
}

.section-alt {
    background: var(--surface-alt);
}

.section-dark {
    background: var(--navy-800);
    color: var(--slate-300);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: #fff;
}

.section-dark p {
    color: var(--slate-300);
}

.section-head {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 64px);
}

.section-head.start {
    text-align: start;
    margin-inline: 0;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-600);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    padding: .35rem .9rem;
    border-radius: var(--r-pill);
    margin-bottom: 1.1rem;
}

html[lang="ar"] .eyebrow {
    letter-spacing: 0;
    text-transform: none;
    font-size: .85rem;
}

.section-dark .eyebrow {
    background: rgba(236, 107, 84, .12);
    border-color: rgba(236, 107, 84, .28);
    color: var(--brand-300);
}

.section-title {
    font-size: clamp(1.85rem, 3.4vw, 2.85rem);
    margin-bottom: .5rem;
}

.section-sub {
    font-size: 1.05rem;
    margin-bottom: 0;
}

.text-gradient {
    background: linear-gradient(115deg, var(--brand-500), var(--brand-300));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
    --btn-py: .8rem;
    --btn-px: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: var(--btn-py) var(--btn-px);
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: .96rem;
    line-height: 1.4;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .22s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
    white-space: nowrap;
}

.btn:active {
    transform: translateY(1px);
}

.btn-sm {
    --btn-py: .5rem;
    --btn-px: 1.05rem;
    font-size: .875rem;
}

.btn-lg {
    --btn-py: .95rem;
    --btn-px: 2rem;
    font-size: 1.02rem;
}

.btn-brand {
    background: var(--brand-500);
    color: #fff;
    box-shadow: 0 4px 14px rgba(224, 83, 61, .3);
}

.btn-brand:hover {
    background: var(--brand-600);
    color: #fff;
    box-shadow: var(--shadow-brand);
    transform: translateY(-2px);
}

.btn-dark {
    background: var(--navy-700);
    color: #fff;
}

.btn-dark:hover {
    background: var(--navy-600);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background: transparent;
    color: var(--navy-700);
    border-color: var(--slate-200);
}

.btn-outline:hover {
    color: var(--brand-600);
    border-color: var(--brand-500);
    background: var(--brand-50);
}

.btn-ghost-light {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
}

.btn-ghost-light:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
    transform: translateY(-2px);
}

.btn-white {
    background: #fff;
    color: var(--navy-700);
}

.btn-white:hover {
    color: var(--brand-600);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Arrow that flips direction with the document */
.btn i.bi-arrow-right {
    transition: transform .2s ease;
}

html[dir="rtl"] .btn i.bi-arrow-right {
    transform: scaleX(-1);
}

.btn:hover i.bi-arrow-right {
    transform: translateX(3px);
}

html[dir="rtl"] .btn:hover i.bi-arrow-right {
    transform: scaleX(-1) translateX(3px);
}

/* --------------------------------------------------------------------------
   5. Header / navbar
   -------------------------------------------------------------------------- */
.site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.site-header.scrolled {
    background: rgba(255, 255, 255, .96);
    border-bottom-color: var(--line);
    box-shadow: 0 2px 20px rgba(19, 26, 38, .06);
}

.site-header .navbar {
    padding-block: .7rem;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 0;
}

.brand-mark {
    width: 40px;
    height: 45px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-name {
    font-weight: 700;
    font-size: 1.16rem;
    color: var(--navy-700);
    letter-spacing: -.02em;
}

.brand-name em {
    font-style: normal;
    color: var(--brand-500);
}

.brand-tag {
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--slate-400);
    font-weight: 500;
}

html[lang="ar"] .brand-tag {
    letter-spacing: 0;
    text-transform: none;
    font-size: .72rem;
}

.nav-main {
    margin-inline: auto;
    gap: .15rem;
}

.nav-main .nav-link {
    color: var(--slate-700);
    font-weight: 500;
    font-size: .94rem;
    padding: .5rem .85rem;
    border-radius: var(--r-sm);
    position: relative;
    transition: color .2s ease, background-color .2s ease;
}

.nav-main .nav-link:hover,
.nav-main .nav-link.active {
    color: var(--brand-600);
    background: var(--brand-50);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--slate-700);
    border-radius: var(--r-pill);
    padding: .42rem .85rem;
    font-size: .84rem;
    font-weight: 600;
    transition: all .2s ease;
}

.lang-switch:hover {
    border-color: var(--brand-500);
    color: var(--brand-600);
    background: var(--brand-50);
}

.navbar-toggler {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: .5rem .6rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: none !important;
}

.toggler-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--navy-700);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}

.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(2) {
    opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    padding-block: calc(var(--header-h) + clamp(48px, 7vw, 96px)) clamp(64px, 8vw, 110px);
    background: linear-gradient(168deg, var(--navy-900) 0%, var(--navy-700) 55%, #1D3A3C 100%);
    color: #fff;
    overflow: hidden;
}

.hero::before {
    /* engineering grid */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
}

.hero::after {
    content: '';
    position: absolute;
    inset-block-start: -220px;
    inset-inline-end: -180px;
    width: 680px;
    height: 680px;
    background: radial-gradient(circle, rgba(236, 107, 84, .3), transparent 62%);
    filter: blur(20px);
    pointer-events: none;
}

.hero > .container {
    position: relative;
    z-index: 2;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: rgba(236, 107, 84, .14);
    border: 1px solid rgba(245, 140, 119, .32);
    color: var(--brand-300);
    padding: .4rem 1rem;
    border-radius: var(--r-pill);
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.hero-badge .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-300);
    box-shadow: 0 0 0 0 rgba(245, 140, 119, .7);
    animation: pulse-dot 2.2s infinite;
}

@keyframes pulse-dot {
    70% { box-shadow: 0 0 0 9px rgba(245, 140, 119, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 140, 119, 0); }
}

.hero-title {
    font-size: clamp(2.2rem, 5vw, 3.75rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.1rem;
    letter-spacing: -.035em;
}

html[lang="ar"] .hero-title {
    letter-spacing: 0;
}

.hero-lead {
    font-size: clamp(1rem, 1.4vw, 1.16rem);
    color: rgba(255, 255, 255, .76);
    max-width: 34em;
    margin-bottom: 2rem;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-bottom: 2.4rem;
}

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.6rem;
}

.hero-points li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: rgba(255, 255, 255, .72);
}

.hero-points i {
    color: var(--brand-300);
    font-size: 1rem;
}

/* Hero visual — a live "drawing → nest → machine" panel */
.hero-visual {
    position: relative;
}

.hero-panel {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-xl);
    padding: 1rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}

.hero-panel-bar {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .2rem .4rem .85rem;
}

.hero-panel-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
}

.hero-panel-bar .title {
    width: auto;
    height: auto;
    background: none;
    margin-inline-start: auto;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
    font-weight: 600;
}

html[lang="ar"] .hero-panel-bar .title {
    letter-spacing: 0;
    text-transform: none;
}

.hero-canvas {
    background: rgba(13, 19, 30, .55);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: block;
    width: 100%;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    margin-top: .9rem;
}

.hero-stat {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-md);
    padding: .7rem .8rem;
    text-align: center;
}

.hero-stat b {
    display: block;
    font-size: 1.24rem;
    color: var(--brand-300);
    font-weight: 700;
    line-height: 1.2;
}

.hero-stat span {
    font-size: .72rem;
    color: rgba(255, 255, 255, .55);
}

/* --------------------------------------------------------------------------
   7. Trust strip
   -------------------------------------------------------------------------- */
.trust-strip {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding-block: 2.2rem;
}

.trust-label {
    text-align: center;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--slate-400);
    font-weight: 600;
    margin-bottom: 1.3rem;
}

html[lang="ar"] .trust-label {
    letter-spacing: 0;
    text-transform: none;
    font-size: .9rem;
}

.trust-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem 2.6rem;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--slate-500);
    font-weight: 600;
    font-size: .95rem;
    opacity: .75;
    transition: opacity .2s ease, color .2s ease;
}

.trust-item:hover {
    opacity: 1;
    color: var(--navy-700);
}

.trust-item i {
    font-size: 1.3rem;
    color: var(--brand-500);
}

/* --------------------------------------------------------------------------
   8. Pipeline (the 5 stages)
   -------------------------------------------------------------------------- */
.pipeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    position: relative;
}

.pipeline::before {
    content: '';
    position: absolute;
    inset-block-start: 44px; /* يحاذي مركز الأيقونة / lines up with the icon centre */
    inset-inline: 10%;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-100), var(--brand-400), var(--brand-100));
    z-index: 0;
}

.stage {
    position: relative;
    z-index: 1;
    text-align: center;
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: .6rem .8rem 1.2rem;
}

.stage-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto .9rem;
    border-radius: var(--r-lg);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    color: var(--brand-600);
    background: #fff;
    border: 1px solid var(--brand-100);
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}

.stage:hover .stage-icon {
    background: var(--brand-500);
    color: #fff;
    transform: translateY(-5px) scale(1.04);
    box-shadow: var(--shadow-brand);
}

.stage-num {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--brand-600);
    margin-bottom: .3rem;
}

.stage h3 {
    font-size: 1.02rem;
    margin-bottom: .35rem;
}

.stage p {
    font-size: .88rem;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   9. Feature cards
   -------------------------------------------------------------------------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.4rem;
}

.feature-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.9rem 1.7rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
}

.feature-card::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-300));
    transform: scaleX(0);
    transform-origin: left; /* transform-origin لا يقبل القيم المنطقية / no logical keywords here */
    transition: transform .3s ease;
}

html[dir="rtl"] .feature-card::after {
    transform-origin: right;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.feature-card:hover::after {
    transform: scaleX(1);
}

.feature-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--r-lg);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    background: var(--brand-50);
    color: var(--brand-600);
    margin-bottom: 1.15rem;
    transition: background-color .25s ease, color .25s ease;
}

.feature-card:hover .feature-icon {
    background: var(--brand-500);
    color: #fff;
}

.feature-card h3 {
    font-size: 1.12rem;
    margin-bottom: .55rem;
}

.feature-card p {
    font-size: .93rem;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   10. Nesting showcase
   -------------------------------------------------------------------------- */
.split-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.panel-board {
    background: var(--navy-800);
    border-radius: var(--r-xl);
    padding: 1.3rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, .08);
}

.panel-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .9rem;
    gap: 1rem;
}

.panel-board-head h4 {
    font-size: .92rem;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.nest-chip {
    font-size: .72rem;
    font-weight: 700;
    padding: .25rem .7rem;
    border-radius: var(--r-pill);
    background: rgba(236, 107, 84, .16);
    color: var(--brand-300);
    border: 1px solid rgba(236, 107, 84, .3);
}

.nest-sheet {
    display: block;
    width: 100%;
    border-radius: var(--r-md);
    background: rgba(13, 19, 30, .6);
}

.nest-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    margin-top: .9rem;
}

.nest-meta div {
    text-align: center;
    padding: .6rem .4rem;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .04);
}

.nest-meta b {
    display: block;
    color: #fff;
    font-size: 1.05rem;
}

.nest-meta span {
    font-size: .7rem;
    color: var(--slate-400);
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .95rem;
    color: var(--ink-soft);
    font-size: .97rem;
}

.check-list i {
    color: var(--brand-500);
    font-size: 1.15rem;
    margin-top: .18rem;
    flex-shrink: 0;
}

.check-list strong {
    color: var(--navy-700);
    display: block;
    font-weight: 600;
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   11. Integrations
   -------------------------------------------------------------------------- */
/* ثلاثة أعمدة ثابتة حتى لا تبقى بطاقة يتيمة في صف / a fixed 3-up so six cards
   land as 2 clean rows instead of 5 + 1 */
.integration-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}

.integration-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-lg);
    padding: 1.5rem 1.35rem;
    transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}

.integration-card:hover {
    transform: translateY(-4px);
    background: rgba(236, 107, 84, .09);
    border-color: rgba(236, 107, 84, .35);
}

.integration-card i {
    font-size: 1.7rem;
    color: var(--brand-300);
    margin-bottom: .8rem;
    display: block;
}

.integration-card h4 {
    font-size: 1.02rem;
    color: #fff;
    margin-bottom: .35rem;
}

.integration-card p {
    font-size: .87rem;
    color: var(--slate-400);
    margin: 0;
}

.format-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-top: 2.4rem;
}

.format-tag {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .05em;
    padding: .42rem 1rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    color: var(--slate-300);
    transition: all .2s ease;
}

.format-tag:hover {
    background: rgba(236, 107, 84, .16);
    border-color: rgba(236, 107, 84, .4);
    color: var(--brand-300);
}

/* --------------------------------------------------------------------------
   12. Workflow timeline
   -------------------------------------------------------------------------- */
.workflow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.6rem;
    counter-reset: step;
}

.workflow-step {
    position: relative;
    padding-inline-start: 3.6rem;
    counter-increment: step;
}

.workflow-step::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    width: 46px;
    height: 46px;
    border-radius: var(--r-lg);
    display: grid;
    place-items: center;
    background: var(--navy-700);
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    box-shadow: var(--shadow-sm);
}

.workflow-step:hover::before {
    background: var(--brand-500);
}

.workflow-step h3 {
    font-size: 1.06rem;
    margin-bottom: .4rem;
    padding-top: .5rem;
}

.workflow-step p {
    font-size: .92rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   13. Industries
   -------------------------------------------------------------------------- */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.industry-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.15rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-weight: 600;
    color: var(--navy-700);
    font-size: .96rem;
    transition: all .22s ease;
}

.industry-card:hover {
    border-color: var(--brand-300);
    background: var(--brand-50);
    transform: translateY(-3px);
    color: var(--brand-700);
}

.industry-card i {
    font-size: 1.4rem;
    color: var(--brand-500);
}

/* --------------------------------------------------------------------------
   14. Stats band
   -------------------------------------------------------------------------- */
.stats-band {
    background:
        linear-gradient(120deg, rgba(224, 83, 61, .96), rgba(14, 110, 98, .96)),
        var(--navy-800);
    color: #fff;
    border-radius: var(--r-xl);
    padding: clamp(2.2rem, 4vw, 3.2rem) clamp(1.4rem, 4vw, 3rem);
    position: relative;
    overflow: hidden;
}

.stats-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 38px 38px;
    opacity: .6;
}

.stats-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.6rem;
    text-align: center;
}

.stat b {
    display: block;
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
}

.stat span {
    font-size: .92rem;
    color: rgba(255, 255, 255, .82);
}

/* --------------------------------------------------------------------------
   15. Testimonials
   -------------------------------------------------------------------------- */
.quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.4rem;
}

.quote-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.9rem 1.7rem;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}

.quote-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.quote-mark {
    font-size: 1.9rem;
    color: var(--brand-300);
    line-height: 1;
    margin-bottom: .7rem;
}

.quote-card p {
    font-size: .97rem;
    color: var(--slate-700);
    flex-grow: 1;
}

.quote-author {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}

.quote-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--navy-700);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    flex-shrink: 0;
}

.quote-author b {
    display: block;
    font-size: .95rem;
    color: var(--navy-700);
    line-height: 1.3;
}

.quote-author span {
    font-size: .82rem;
    color: var(--slate-400);
}

/* --------------------------------------------------------------------------
   16. Pricing
   -------------------------------------------------------------------------- */
.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.4rem;
    align-items: stretch;
}

.price-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 2rem 1.8rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
}

.price-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.price-card.featured {
    background: var(--navy-800);
    border-color: var(--navy-800);
    box-shadow: var(--shadow-lg);
}

.price-card.featured h3,
.price-card.featured .price-amount {
    color: #fff;
}

.price-card.featured p,
.price-card.featured .price-features li {
    color: var(--slate-300);
}

.price-tag-popular {
    position: absolute;
    inset-block-start: -13px;
    inset-inline-end: 1.6rem;
    background: var(--brand-500);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: .32rem .9rem;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-brand);
}

.price-card h3 {
    font-size: 1.2rem;
    margin-bottom: .3rem;
}

.price-card > p {
    font-size: .9rem;
    min-height: 2.8em;
}

.price-amount {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--navy-700);
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-block: .6rem .2rem;
}

.price-amount small {
    font-size: .88rem;
    font-weight: 500;
    color: var(--slate-400);
    letter-spacing: 0;
}

.price-unit {
    display: block;
    font-size: .88rem;
    color: var(--slate-400);
}

.price-card.featured .price-unit {
    color: var(--slate-300);
}

.price-features {
    margin-block: 1.4rem;
    flex-grow: 1;
}

.price-features li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .91rem;
    color: var(--ink-soft);
    margin-bottom: .65rem;
}

.price-features i {
    color: var(--brand-500);
    margin-top: .22rem;
    flex-shrink: 0;
}

.price-card .btn {
    width: 100%;
}

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.faq-wrap {
    max-width: 820px;
    margin-inline: auto;
}

.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: .8rem;
    overflow: hidden;
    background: var(--surface);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.faq-item.open {
    border-color: var(--brand-300);
    box-shadow: var(--shadow-sm);
}

.faq-q {
    width: 100%;
    background: none;
    border: 0;
    text-align: start;
    padding: 1.1rem 1.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--navy-700);
    cursor: pointer;
}

.faq-q i {
    color: var(--brand-500);
    transition: transform .25s ease;
    flex-shrink: 0;
}

.faq-item.open .faq-q i {
    transform: rotate(45deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.faq-a p {
    padding: 0 1.3rem 1.2rem;
    margin: 0;
    font-size: .95rem;
}

/* --------------------------------------------------------------------------
   18. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
    background: linear-gradient(150deg, var(--navy-900), var(--navy-700) 60%, #1D3A3C);
    color: #fff;
    border-radius: var(--r-xl);
    padding: clamp(2.4rem, 5vw, 4rem) clamp(1.5rem, 5vw, 3.4rem);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-band::before {
    content: '';
    position: absolute;
    inset-block-start: -140px;
    inset-inline-start: 50%;
    width: 520px;
    height: 520px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(236, 107, 84, .28), transparent 65%);
}

.cta-band > * {
    position: relative;
}

.cta-band h2 {
    color: #fff;
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}

.cta-band p {
    color: rgba(255, 255, 255, .75);
    max-width: 40em;
    margin-inline: auto;
    margin-bottom: 1.9rem;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--navy-900);
    color: var(--slate-400);
    padding-block: clamp(3rem, 5vw, 4.5rem) 1.6rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 2.4rem;
    padding-bottom: 2.6rem;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
}

.footer-logo img {
    width: 40px;
    height: 45px;
    object-fit: contain;
}

.footer-logo .brand-name {
    color: #fff;
}

.footer-logo .brand-tag {
    color: var(--slate-400);
}

.footer-about {
    font-size: .9rem;
    color: var(--slate-400);
    max-width: 34em;
}

.footer-social {
    display: flex;
    gap: .55rem;
    margin-top: 1.1rem;
}

.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .06);
    color: var(--slate-300);
    font-size: 1rem;
    transition: all .22s ease;
}

.footer-social a:hover {
    background: var(--brand-500);
    color: #fff;
    transform: translateY(-3px);
}

.footer-col h4 {
    color: #fff;
    font-size: .95rem;
    margin-bottom: 1.1rem;
    font-weight: 600;
}

.footer-col li {
    margin-bottom: .6rem;
}

.footer-col a,
.footer-col span {
    color: var(--slate-400);
    font-size: .9rem;
}

.footer-col a:hover {
    color: var(--brand-300);
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.footer-contact i {
    color: var(--brand-400);
    margin-top: .25rem;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
}

.footer-bottom p {
    margin: 0;
    font-size: .86rem;
    color: var(--slate-500);
}

.footer-legal {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.footer-legal a {
    color: var(--slate-500);
}

.footer-legal a:hover {
    color: var(--brand-300);
}

/* --------------------------------------------------------------------------
   20. Back to top
   -------------------------------------------------------------------------- */
.back-to-top {
    position: fixed;
    inset-block-end: 22px;
    inset-inline-end: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand-500);
    color: #fff;
    box-shadow: var(--shadow-brand);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .25s ease;
    z-index: 1020;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--brand-600);
    color: #fff;
    transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   21. Inner page hero (about / contact / 404)
   -------------------------------------------------------------------------- */
.page-hero {
    background: linear-gradient(160deg, var(--navy-900), var(--navy-700));
    color: #fff;
    padding-block: calc(var(--header-h) + 56px) 60px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 30%, transparent 100%);
}

.page-hero > .container {
    position: relative;
}

.page-hero h1 {
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    margin-bottom: .6rem;
}

.page-hero p {
    color: rgba(255, 255, 255, .72);
    max-width: 46em;
    margin-inline: auto;
    margin-bottom: 0;
}

.breadcrumbs {
    display: flex;
    justify-content: center;
    gap: .5rem;
    font-size: .85rem;
    color: rgba(255, 255, 255, .5);
    margin-top: 1rem;
}

.breadcrumbs a {
    color: var(--brand-300);
}

/* Forms */
.form-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(1.6rem, 3vw, 2.4rem);
    box-shadow: var(--shadow-sm);
}

.form-label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--navy-700);
    margin-bottom: .4rem;
}

.form-control,
.form-select {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: .72rem .95rem;
    font-size: .95rem;
    color: var(--navy-700);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(224, 83, 61, .14);
}

.contact-tile {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.3rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: 1rem;
    transition: all .22s ease;
}

.contact-tile:hover {
    border-color: var(--brand-300);
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.contact-tile .ico {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: var(--brand-50);
    color: var(--brand-600);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.contact-tile b {
    display: block;
    color: var(--navy-700);
    font-size: .95rem;
}

.contact-tile span,
.contact-tile a {
    font-size: .9rem;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   22. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

[data-reveal].revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none;
    }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .pipeline {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.6rem;
    }

    .pipeline::before {
        display: none;
    }

    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    :root {
        --header-h: 70px;
    }

    .hero-grid,
    .split-grid {
        grid-template-columns: 1fr;
    }

    .hero-lead {
        max-width: none;
    }

    .navbar-collapse {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        margin-top: .8rem;
        padding: 1rem;
        box-shadow: var(--shadow-md);
    }

    .nav-main {
        margin-inline: 0;
        margin-bottom: .8rem;
    }

    .nav-actions {
        justify-content: flex-start;
        padding-top: .8rem;
        border-top: 1px solid var(--line);
    }

    .price-card.featured {
        order: -1;
    }

    .integration-grid,
    .industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .pipeline {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.8rem;
    }

    .brand-tag {
        display: none;
    }

    .hero-stats {
        grid-template-columns: 1fr;
    }

    .nest-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .pipeline {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .hero-cta .btn,
    .cta-actions .btn {
        width: 100%;
    }

    .integration-grid,
    .industry-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
    }
}

/* ==========================================================================
   صفحات الفرع / Branch pages
   موقعُ مطعمٍ لا موقعُ منتجٍ برمجي: المنيو والسعر والاتجاهات أولًا.
   ========================================================================== */

.branch-hero {
    padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem);
    background: linear-gradient(160deg, var(--navy-950) 0%, var(--navy-800) 100%);
    color: #fff;
}
.branch-hero .eyebrow {
    font-size: .82rem; font-weight: 700; letter-spacing: .08em;
    color: var(--brand-500); margin: 0 0 .5rem;
}
.branch-hero h1 {
    font-size: clamp(1.9rem, 5vw, 3.1rem); color: #fff; margin: 0 0 .7rem; line-height: 1.2;
}
.branch-hero .lead {
    font-family: var(--font-base); font-size: clamp(1rem, 2.2vw, 1.15rem);
    color: rgba(255,255,255,.82); max-width: 46rem; margin: 0 0 1.4rem;
}

.branch-hero-facts { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-bottom: 1.5rem; }
.branch-hero-facts .fact {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .88rem; color: rgba(255,255,255,.78); text-decoration: none;
}
.branch-hero-facts a.fact:hover { color: #fff; }
.branch-hero-facts .is-open  { color: var(--on-dark); font-weight: 700; }
.branch-hero-facts .is-shut  { color: var(--off-dark); font-weight: 700; }
.branch-hero-facts .is-open i, .branch-hero-facts .is-shut i { font-size: .5rem; }

.branch-hero-cta { display: flex; flex-wrap: wrap; gap: .6rem; }
.branch-hero-cta .btn-outline {
    border: 1px solid rgba(255,255,255,.28); color: #fff; background: transparent;
    padding: .6rem 1.1rem; border-radius: var(--r-pill); font-weight: 600; font-size: .92rem;
}
.branch-hero-cta .btn-outline:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }

/* ---------------------------------------------------------------- المنيو */

.page-head { padding: clamp(2rem, 6vw, 3.4rem) 0 1.4rem; border-bottom: 1px solid var(--line); }
.page-head .eyebrow { font-size: .82rem; font-weight: 700; color: var(--brand-600); margin: 0 0 .3rem; }
.page-head h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); margin: 0 0 .4rem; }
.page-head .lead { font-family: var(--font-base); color: var(--ink-soft); margin: 0; font-size: .95rem; }
.page-head .is-open { color: var(--ok); font-weight: 700; }
.page-head .is-shut { color: var(--danger); font-weight: 700; }

.menu-jump {
    display: flex; gap: .4rem; flex-wrap: wrap;
    padding-bottom: 1.4rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: var(--surface, #fff); z-index: 5;
    padding-top: .8rem;
}
.menu-jump a {
    padding: .35rem .85rem; border: 1px solid var(--line); border-radius: var(--r-pill);
    font-size: .85rem; font-weight: 600; color: var(--ink-soft); text-decoration: none;
    white-space: nowrap;
}
.menu-jump a:hover { border-color: var(--brand-500); color: var(--brand-600); background: var(--brand-50, #FDF0EC); }

.menu-cat { margin-bottom: 2.6rem; scroll-margin-top: 5rem; }
.menu-cat-title {
    display: flex; align-items: center; gap: .55rem;
    font-size: 1.3rem; margin: 0 0 1rem; padding-bottom: .6rem;
    border-bottom: 2px solid var(--brand-500);
}
.menu-cat-title i { color: var(--brand-500); }
.menu-cat-count {
    margin-inline-start: auto; font-size: .78rem; font-weight: 600;
    color: var(--ink-soft); background: var(--slate-100, #EDF1F5);
    padding: .1rem .55rem; border-radius: var(--r-pill);
}

.menu-list { display: grid; gap: .2rem; }
.menu-item {
    display: flex; align-items: flex-start; gap: .9rem;
    padding: .9rem .2rem; border-bottom: 1px solid var(--line);
}
.menu-item:last-child { border-bottom: 0; }
.menu-item-img { width: 76px; height: 76px; border-radius: var(--r-md); object-fit: cover; flex-shrink: 0; }
.menu-item-body { flex: 1; min-width: 0; }
.menu-item-body h3 { font-size: 1rem; margin: 0 0 .2rem; }
.menu-item-desc {
    font-family: var(--font-base); font-size: .87rem; color: var(--ink-soft);
    margin: 0 0 .3rem; line-height: 1.55;
}
.menu-item-opts { font-family: var(--font-base); font-size: .8rem; color: var(--brand-600); margin: 0; }
.menu-item-meta { display: flex; gap: .8rem; font-size: .78rem; color: var(--ink-soft); margin: .25rem 0 0; }
.menu-item-price {
    font-weight: 800; font-size: 1.05rem; color: var(--brand-600);
    white-space: nowrap; flex-shrink: 0;
}
.menu-item-price small { font-size: .72rem; font-weight: 600; opacity: .7; }

.menu-note { font-family: var(--font-base); font-size: .82rem; color: var(--ink-soft); text-align: center; margin-top: 2rem; }

/* ------------------------------------------------------------ لمحة المنيو */

.section-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.2rem; }
.section-head h2 { margin: 0; font-size: 1.5rem; }
.section-head a { margin-inline-start: auto; font-size: .9rem; font-weight: 600; }

/* ------------------------------------------- بطاقة «من المنيو» / Teaser card

   ★ كل بطاقةٍ داكنةٌ بالنسبة نفسها، صورةً حملت أو لم تحمل. القاعدة أن
   **الهندسة لا تتغيّر بوجود البيانات**: مطعمٌ صوّر عشرة أصنافٍ من مئتين
   يجعل شبكةً نصفُها بطاقاتٌ بيضاء قصيرة ونصفُها صورٌ طويلة — وذلك يُقرأ
   عطلًا لا تصميمًا. فالنسبة واحدة، والخطّ واحد، والحواف واحدة، والفارق
   الوحيد ما يقع **تحت** الحجاب.

   ★ Every card is dark at the same ratio, photo or no photo. The rule is that
   **geometry does not change with the data**: a restaurant that photographed
   ten items out of two hundred would otherwise get a grid half short white
   cards and half tall images, which reads as a fault, not a design. The
   ratio, the type and the corners are identical; the only difference is what
   sits **under** the scrim.
   -------------------------------------------------------------------------- */

.teaser-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 1rem; }

.teaser-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 4 / 3;
    min-height: 150px;
    padding: .9rem;
    border-radius: var(--r-md);
    overflow: hidden;
    isolation: isolate;
    /* تدرّج العلامة هو الأرضية دائمًا: تحته الصورة إن وُجدت، وهو وحده إن لم
       توجد — فلا تخرج بطاقةٌ بيضاء بين جاراتها الداكنة. */
    background: linear-gradient(150deg, var(--brand-600, #C43F2B), var(--navy-900, #171C27));
}

.teaser-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* ★ الحجاب: نصٌّ أبيض فوق صورة طعامٍ فاتحة لا يُقرأ إطلاقًا، والحجابُ
   المتدرّج يضمن التباين مهما كانت الصورة — لا «أكثر الصور داكنة».
   ★ The scrim: white text over a light food photo is unreadable, and a
   gradient scrim guarantees contrast whatever the photo is — not "most
   photos are dark". */
.teaser-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,
        rgba(12, 14, 20, .88) 0%,
        rgba(12, 14, 20, .55) 42%,
        rgba(12, 14, 20, .12) 100%);
}

/* علامةٌ باهتة للبطاقة بلا صورة: تملأ الفراغ ولا تنافس النصّ */
.teaser-mark {
    position: absolute;
    inset-block-start: -.4rem;
    inset-inline-end: -.4rem;
    font-size: 4.5rem;
    color: rgba(255, 255, 255, .1);
    z-index: -1;
    pointer-events: none;
}

.teaser-txt { display: flex; flex-direction: column; gap: .15rem; }
.teaser-cat { font-size: .72rem; font-weight: 700; color: rgba(255, 255, 255, .72); }
.teaser-card h3 {
    font-size: 1rem;
    margin: 0;
    color: #fff;
    /* اسمٌ طويل يبقى سطرين ولا يمدّ البطاقة: النسبة ثابتة */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.teaser-price { font-weight: 800; color: #fff; font-size: .95rem; }
.teaser-price small { font-size: .72rem; opacity: .7; font-weight: 600; }

/* ------------------------------------------------------------ الساعات */

.hours-table { width: 100%; border-collapse: collapse; max-width: 30rem; }
.hours-table th, .hours-table td { padding: .6rem .3rem; border-bottom: 1px solid var(--line); text-align: start; }
.hours-table th { font-weight: 600; color: var(--ink-soft); font-size: .9rem; }
.hours-table td { font-weight: 700; font-size: .92rem; }
.hours-table tr.is-today th, .hours-table tr.is-today td { color: var(--brand-600); }
.hours-table .is-shut { color: var(--ink-soft); font-weight: 500; }

/* ------------------------------------------------------- الفروع الأخرى */

.sibling-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem; margin-top: 1.1rem; }
.sibling-card {
    display: flex; align-items: center; gap: .6rem;
    padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md);
    background: #fff; text-decoration: none; color: inherit; font-weight: 600;
}
.sibling-card:hover { border-color: var(--brand-500); color: var(--brand-700); }
.sibling-card > i:first-child { color: var(--brand-500); font-size: 1.15rem; }
.sibling-card .go { margin-inline-start: auto; opacity: .5; }

/* --------------------------------------------------------- قريبًا / فراغ */

.holding { min-height: 68vh; display: grid; place-items: center; padding: 3rem 0; }
.holding-card { text-align: center; max-width: 34rem; margin: 0 auto; }
.holding-card > i { font-size: 3rem; color: var(--brand-500); }
.holding-card h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); margin: .5rem 0 .6rem; }
.holding-card .eyebrow { font-size: .85rem; font-weight: 700; color: var(--ink-soft); margin: .8rem 0 0; }
.holding-card .lead { font-family: var(--font-base); color: var(--ink-soft); margin: 0 0 1.4rem; }
.holding-contact { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; justify-content: center; font-size: .9rem; }
.holding-contact i { color: var(--brand-500); }

.empty-note { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); }
.empty-note i { font-size: 2.4rem; opacity: .4; display: block; margin-bottom: .6rem; }

.container.narrow { max-width: 46rem; }
.prose { font-family: var(--font-base); line-height: 1.85; color: var(--ink-soft); }

/* ==========================================================================
   محفظة العميل / Customer wallet
   ========================================================================== */

.auth { min-height: 70vh; display: grid; place-items: center; padding: 3rem 0; }
.auth-card { text-align: center; max-width: 26rem; margin: 0 auto; }
.auth-icon { font-size: 2.6rem; color: var(--brand-500); }
.auth-card h1 { font-size: 1.7rem; margin: .6rem 0 .5rem; }
.auth-card .lead { font-family: var(--font-base); color: var(--ink-soft); font-size: .95rem; margin: 0 0 1.6rem; }

.auth-msg { font-family: var(--font-base); font-size: .9rem; padding: .6rem .9rem; border-radius: var(--r-sm); margin: 0 0 1rem; }
.auth-msg.is-error { background: var(--danger-soft); color: var(--danger); }
.auth-msg.is-ok    { background: var(--ok-soft); color: var(--ok-deep); }
.auth-dev {
    font-family: var(--font-base); font-size: .85rem; background: #FBF3E7; color: #8A5A1E;
    padding: .6rem .9rem; border-radius: var(--r-sm); border: 1px dashed #D9B87A; margin: 0 0 1rem;
}
.auth-dev strong { font-family: var(--font-mono); font-size: 1.15rem; letter-spacing: .12em; }

.auth-form { display: flex; flex-direction: column; gap: .5rem; text-align: start; }
.auth-form label { font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.auth-input {
    padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--r-md);
    font-size: 1.05rem; font-family: var(--font-mono); text-align: center;
}
.auth-input:focus { outline: 2px solid var(--brand-500); outline-offset: 1px; border-color: var(--brand-500); }
.auth-code { font-size: 1.7rem; letter-spacing: .5em; padding-inline-start: 1.4rem; }
.auth-submit { margin-top: .4rem; width: 100%; padding: .7rem; font-size: 1rem; }
.auth-again { margin-top: .8rem; }
.auth-again button {
    background: none; border: 0; color: var(--brand-600); font-size: .87rem;
    cursor: pointer; text-decoration: underline; font-family: var(--font-base);
}
.auth-fine { font-family: var(--font-base); font-size: .78rem; color: var(--ink-soft); margin-top: 1.6rem; }

/* ------------------------------------------------------------- البطاقة */

.wallet { padding: 2rem 0 4rem; }
.wallet-card {
    background: linear-gradient(155deg, var(--navy-900) 0%, var(--navy-700) 100%);
    color: #fff; border-radius: var(--r-lg); padding: 1.5rem; text-align: center;
    box-shadow: 0 10px 30px rgba(20,24,34,.16);
}
.wallet-card-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.wallet-merchant { font-size: .9rem; font-weight: 700; color: rgba(255,255,255,.78); }
.wallet-tier { font-size: .75rem; font-weight: 800; padding: .18rem .65rem; border-radius: var(--r-pill); }

.wallet-balance { margin: 1.1rem 0 .2rem; display: flex; align-items: baseline; justify-content: center; gap: .4rem; }
.wallet-balance .n { font-size: clamp(2.6rem, 12vw, 3.6rem); font-weight: 800; line-height: 1; font-family: var(--font-mono); }
.wallet-balance .u { font-size: 1rem; color: rgba(255,255,255,.7); }
.wallet-worth { font-family: var(--font-base); font-size: .85rem; color: rgba(255,255,255,.65); margin: 0 0 1.2rem; }

.wallet-next { margin: 0 auto 1.2rem; max-width: 22rem; }
.wallet-bar { height: 6px; background: rgba(255,255,255,.16); border-radius: var(--r-pill); overflow: hidden; }
.wallet-bar span { display: block; height: 100%; background: var(--brand-500); border-radius: var(--r-pill); }
.wallet-next p { font-family: var(--font-base); font-size: .82rem; color: rgba(255,255,255,.75); margin: .5rem 0 0; }

.wallet-qr { background: #fff; border-radius: var(--r-lg); padding: 1rem; margin-top: 1.2rem; }
.wallet-qr svg { width: min(190px, 62vw); height: auto; display: block; margin: 0 auto; }
.wallet-code {
    font-size: 1.05rem; font-weight: 700; letter-spacing: .12em;
    color: var(--navy-700); margin: .5rem 0 .1rem;
}
.wallet-hint { font-family: var(--font-base); font-size: .78rem; color: var(--ink-soft); margin: 0; }

.wallet-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1rem 0 1.8rem; }
.wallet-stats > div {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    padding: .8rem .5rem; text-align: center;
}
.wallet-stats .k { display: block; font-size: .76rem; color: var(--ink-soft); }
.wallet-stats .v { display: block; font-size: 1.25rem; font-weight: 800; font-family: var(--font-mono); }

.wallet-block { margin-bottom: 2rem; }
.wallet-block h2 { font-size: 1.15rem; margin: 0 0 .9rem; display: flex; align-items: center; gap: .45rem; }
.wallet-block h2 i { color: var(--brand-500); }
.wallet-empty { font-family: var(--font-base); color: var(--ink-soft); font-size: .9rem; }

.voucher {
    display: flex; align-items: center; gap: .8rem; justify-content: space-between;
    padding: .8rem 1rem; border: 1px dashed var(--brand-500); border-radius: var(--r-md);
    background: #FDF0EC; margin-bottom: .5rem;
}
.voucher-meta { display: block; font-size: .78rem; color: var(--ink-soft); }
.voucher-code {
    font-family: var(--font-mono); font-weight: 800; font-size: 1rem;
    background: #fff; padding: .3rem .6rem; border-radius: var(--r-sm); color: var(--brand-700);
}

.reward-list { display: flex; flex-direction: column; gap: .5rem; }
.reward {
    display: flex; align-items: center; gap: 1rem; justify-content: space-between;
    padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff;
}
.reward.is-ready { border-color: var(--brand-500); }
.reward-meta { display: block; font-size: .78rem; color: var(--ink-soft); }
.reward-cost { text-align: end; flex-shrink: 0; }
.reward-cost .pts { display: block; font-size: 1.1rem; font-weight: 800; font-family: var(--font-mono); }
.reward-cost .state { font-size: .74rem; color: var(--ink-soft); }
.reward.is-ready .reward-cost .pts, .reward.is-ready .reward-cost .state { color: var(--brand-600); }

.ledger-list { list-style: none; margin: 0; padding: 0; }
.ledger-list li {
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem .2rem; border-bottom: 1px solid var(--line);
}
.ledger-list li > i { color: var(--ink-soft); font-size: 1.1rem; }
.ledger-body { flex: 1; min-width: 0; }
.ledger-body strong { display: block; font-size: .9rem; }
.ledger-meta { font-size: .77rem; color: var(--ink-soft); }
.ledger-pts { font-family: var(--font-mono); font-weight: 800; font-size: .98rem; }
.ledger-pts.is-pos { color: var(--ok); }
.ledger-pts.is-neg { color: var(--danger); }

.wallet-out { text-align: center; margin-top: 2rem; }
.wallet-out button {
    background: none; border: 1px solid var(--line); border-radius: var(--r-pill);
    padding: .45rem 1.2rem; color: var(--ink-soft); cursor: pointer;
    font-family: var(--font-base); font-size: .87rem;
}
.wallet-out button:hover { border-color: var(--danger); color: var(--danger); }

/* ==========================================================================
   الطلب من الموقع / Web ordering
   ========================================================================== */

.menu-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; flex-shrink: 0; }

.add-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .75rem; border: 1px solid var(--brand-500); border-radius: var(--r-pill);
    background: #fff; color: var(--brand-600); font-size: .82rem; font-weight: 700;
    cursor: pointer; white-space: nowrap; list-style: none; font-family: var(--font-base);
}
.add-btn::-webkit-details-marker { display: none; }
.add-btn:hover { background: var(--brand-500); color: #fff; }

.add-opts[open] .add-btn { background: var(--brand-500); color: #fff; }
.add-form {
    position: absolute; inset-inline-end: 0; z-index: 6; margin-top: .4rem;
    width: min(19rem, 78vw); background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-md); padding: .9rem; box-shadow: var(--shadow-md); text-align: start;
}
.add-opts { position: relative; }
.add-form fieldset { border: 0; padding: 0; margin: 0 0 .8rem; }
.add-form legend { font-size: .85rem; font-weight: 700; padding: 0; margin-bottom: .3rem; }
.add-form legend small { font-weight: 500; color: var(--brand-600); font-size: .72rem; }
.add-form label {
    display: flex; align-items: center; gap: .45rem; padding: .25rem 0;
    font-size: .87rem; font-family: var(--font-base); cursor: pointer;
}
.add-form label span { flex: 1; }
.add-form label em { font-style: normal; font-family: var(--font-mono); font-size: .8rem; color: var(--brand-600); }
.add-form .btn { width: 100%; }

.cart-bar {
    position: sticky; bottom: 1rem; z-index: 8;
    display: flex; align-items: center; gap: .7rem;
    background: var(--navy-800); color: #fff; border-radius: var(--r-pill);
    padding: .7rem 1.2rem; margin: 1.5rem auto 0; max-width: 30rem;
    text-decoration: none; box-shadow: 0 8px 24px rgba(20,24,34,.25);
    font-weight: 700;
}
.cart-bar:hover { color: #fff; background: var(--navy-700); }
.cart-bar .n {
    background: var(--brand-500); border-radius: var(--r-pill); min-width: 1.6rem;
    height: 1.6rem; display: grid; place-items: center; font-size: .85rem;
}
.cart-bar .amt { margin-inline-start: auto; font-family: var(--font-mono); }

/* ------------------------------------------------------------- السلّة */

.cart-lines { border-top: 1px solid var(--line); margin-bottom: 1.2rem; }
.cart-line {
    display: flex; align-items: center; gap: .8rem;
    padding: .85rem .2rem; border-bottom: 1px solid var(--line);
}
.cart-line.is-gone { opacity: .6; }
.cart-line-body { flex: 1; min-width: 0; }
.cart-opts { display: block; font-size: .79rem; color: var(--ink-soft); }
.cart-gone { display: block; font-size: .79rem; color: var(--danger); font-weight: 600; }
.cart-line-total { font-weight: 800; font-family: var(--font-mono); white-space: nowrap; }

.cart-qty { display: flex; align-items: center; gap: .2rem; }
.cart-qty button {
    width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: #fff; cursor: pointer; color: var(--ink-soft); line-height: 1;
}
.cart-qty button:hover { border-color: var(--brand-500); color: var(--brand-600); }
.cart-qty button.rm:hover { border-color: var(--danger); color: var(--danger); }
.cart-qty span { min-width: 1.6rem; text-align: center; font-weight: 700; font-family: var(--font-mono); }

.cart-totals { padding: .8rem 0; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; }
.cart-totals > div { display: flex; justify-content: space-between; font-weight: 700; }
.cart-note { font-family: var(--font-base); font-size: .8rem; color: var(--ink-soft); margin: .4rem 0 0; }
.cart-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.cart-signin { font-family: var(--font-base); font-size: .87rem; color: var(--ink-soft); margin-top: 1.4rem; }
.cart-signin i { color: var(--brand-500); }

.btn-outline-quiet {
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    padding: .6rem 1.2rem; border-radius: var(--r-pill); font-weight: 600; display: inline-block;
}
.btn-outline-quiet:hover { border-color: var(--brand-500); color: var(--brand-600); }

/* --------------------------------------------------------- إتمام الطلب */

.checkout h2 { font-size: 1.05rem; margin: 1.6rem 0 .7rem; }
.checkout h2:first-child { margin-top: 0; }

.type-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .5rem; }
.type-opt input { position: absolute; opacity: 0; pointer-events: none; }
.type-opt > span {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    padding: .8rem .4rem; border: 1px solid var(--line); border-radius: var(--r-md);
    font-size: .85rem; font-weight: 600; cursor: pointer; text-align: center;
}
.type-opt > span i { font-size: 1.3rem; }
.type-opt input:checked + span {
    border-color: var(--brand-500); background: #FDF0EC; color: var(--brand-700);
    box-shadow: inset 0 0 0 1px var(--brand-500);
}

.checkout-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.checkout-fields label { display: flex; flex-direction: column; gap: .25rem; }
.checkout-fields label.wide { grid-column: 1 / -1; }
.checkout-fields span { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.checkout-fields .field, .points-row .field {
    padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--r-sm);
    font-family: var(--font-base); font-size: .95rem; width: 100%;
}
@media (max-width: 540px) { .checkout-fields { grid-template-columns: 1fr; } }

.points-box { background: #FDF0EC; border: 1px solid #FBDDD6; border-radius: var(--r-md); padding: .9rem 1rem; }
.points-box p { font-family: var(--font-base); font-size: .87rem; margin: 0 0 .6rem; }
.points-row { display: flex; gap: .5rem; }
.points-row .field { max-width: 9rem; font-family: var(--font-mono); }

.bill { border: 1px solid var(--line); border-radius: var(--r-md); padding: .9rem 1.1rem; }
.bill > div { display: flex; justify-content: space-between; padding: .18rem 0; font-size: .92rem; }
.bill .off { color: var(--danger); }
.bill .grand {
    margin-top: .5rem; padding-top: .6rem; border-top: 1px dashed var(--line);
    font-size: 1.1rem; font-weight: 800;
}

.checkout-hint { font-family: var(--font-base); font-size: .84rem; color: var(--ink-soft); margin: .8rem 0; }
.checkout-hint i { color: var(--brand-500); }
.checkout-submit {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; padding: .85rem 1.3rem; font-size: 1rem; margin-top: 1.2rem;
}
.checkout-submit span { font-family: var(--font-mono); }
.checkout-back { display: block; text-align: center; margin-top: .9rem; font-size: .87rem; }

/* -------------------------------------------------------- متابعة الطلب */

.track-steps { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.track-steps li {
    display: flex; align-items: center; gap: .7rem; padding: .6rem .2rem;
    font-family: var(--font-base); font-size: .95rem;
}
.track-steps li i { font-size: 1.2rem; width: 1.5rem; }
.track-steps li.is-done { color: var(--ok); font-weight: 700; }
.track-steps li.is-wait { color: var(--ink-soft); }

.track-bill { border: 1px solid var(--line); border-radius: var(--r-md); padding: .9rem 1.1rem; margin: 1.2rem 0; }
.track-line { display: flex; justify-content: space-between; padding: .2rem 0; font-size: .9rem; }
.track-line.grand {
    margin-top: .5rem; padding-top: .6rem; border-top: 1px dashed var(--line);
    font-weight: 800; font-size: 1.05rem;
}

/* ==========================================================================
   منيو الفرع — هيكل شبيه بتطبيق
   عمود ضيّق يُقرأ بالإبهام، وترويسة وشريط تصنيفات لا يفارقان أعلى الشاشة.
   A narrow, thumb-read column with a header and category rail that never
   leave the top of the screen.
   ========================================================================== */

.mapp {
    --rail-h: 46px;
    max-width: 620px;
    margin: 0 auto;
    /* ★ يحجز ارتفاع ترويسة الموقع. هي `position: fixed` فلا تحجز شيئًا،
       فيبدأ تدفّق المنيو عند y=0 تحتها. وترويسةُ المنيو `sticky` عند
       `top: var(--header-h)`: عند أعلى الصفحة موضعُها الطبيعيّ صفر، وهو
       فوق حدّ الالتصاق، فتُدفع نزولًا و**تغطّي** أوّل مئةٍ وثلاثة عشر
       بكسلًا من التدفّق — عنوانُ القسم الأول وأولُ صنفٍ فيه.
       ولا يكشفه قياسٌ بعد التمرير: هناك تكون الترويسة قد غادرت موضعها
       الطبيعيّ فلا تغطّي شيئًا. العلّة عند `scrollY = 0` وحدها.
       ★ Reserves the site header's height. It is `position: fixed` and
       reserves nothing, so the menu's flow starts at y=0 beneath it. The
       menu header is `sticky` at `top: var(--header-h)`: at the top of the
       page its natural position is zero, above the stick threshold, so it
       is pushed down and **covers** the first 113 pixels of the flow — the
       first section's title and its first item. A measurement taken after
       scrolling cannot see it: by then the header has left its natural
       position and covers nothing. The fault exists only at `scrollY = 0`. */
    padding-top: var(--header-h, 0px);
    padding-bottom: 5.5rem;
    background: #F7F8FA;
    min-height: 70vh;
}

/* --------------------------------------------------------- الترويسة */

/* ★ تلتصق **تحت** ترويسة الموقع لا عندها. ترويسة الموقع `position: fixed`
   تشغل أعلى الشاشة دائمًا، فلاصقةٌ عند `top: 0` تنزلق تحتها ويختفي
   ثلثاها — الشعارُ واسمُ الفرع وأزرارُ المحفظة والنقاط — ولا يبقى ظاهرًا
   إلا شريط الأقسام. وهذا لا يقع في عدّة الفرع: تُنشر وحدها بلا ترويسةٍ
   عامة فوقها، ولذلك `top: 0` صحيحٌ هناك والملفّان منفصلان.
   ★ It sticks **below** the site header, not at it. The site header is
   `position: fixed` and always occupies the top of the screen, so a bar
   stuck at `top: 0` slides underneath and loses two thirds of itself —
   the logo, the branch name, the wallet and points buttons — leaving only
   the category rail visible. This cannot happen in the branch kit, which
   deploys on its own with no site header above it; there `top: 0` is
   right, and the two stylesheets are separate. */
.mapp-head {
    position: sticky;
    top: var(--header-h, 0px);
    z-index: 20;
    background: linear-gradient(140deg, var(--navy-950, #12161F), var(--navy-700, #1F2739));
    color: #fff;
    padding: .9rem 1rem 0;
    box-shadow: 0 4px 20px rgba(18, 22, 31, .14);
}
.mapp-head-top { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }

.mapp-brand { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.mapp-mark {
    width: 40px; height: 40px; border-radius: var(--r-md); flex-shrink: 0;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700, #A6321F));
    display: grid; place-items: center; font-size: 1.15rem; color: #fff;
}
.mapp-brand > span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.mapp-brand b { font-size: 1.02rem; font-weight: 800; }
.mapp-brand small { font-size: .76rem; color: rgba(255, 255, 255, .6); }
.mapp-brand small i { font-size: .42rem; vertical-align: middle; }
.mapp-brand small .is-open { color: var(--on-dark); }
.mapp-brand small .is-shut { color: var(--off-dark); }

.mapp-chip {
    margin-inline-start: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16);
    padding: .38rem .8rem; border-radius: var(--r-pill);
    font-size: .82rem; font-weight: 700; color: #fff; text-decoration: none;
}
.mapp-chip:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* ------------------------------------------------ شريط التصنيفات */

.mapp-rail {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: var(--rail-h);
    align-items: center;
    /* الهامش السالب يمدّ الشريط إلى حافّتي الشاشة، فيبدو التمرير طبيعيًا */
    margin-inline: -1rem;
    padding-inline: 1rem;
    /* ★ تلاشٍ عند الحافّتين. القصُّ الحادّ يُقرأ خطأً في التخطيط لا دعوةً
       إلى التمرير — ولا شريط تمرير هنا (`scrollbar-width: none`) فلا شيء
       آخر يقول إن وراء الحافّة أقسامًا. والقناع في الطرفين معًا فيصحّ في
       الاتجاهين بلا قاعدةٍ لكلٍّ منهما.
       ★ A fade at both edges. A hard cut reads as a layout mistake rather
       than an invitation to scroll — and the scrollbar is hidden here, so
       nothing else says there are more sections past the edge. Masking both
       ends makes it correct in either direction with no per-direction
       rule. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.1rem,
                                        #000 calc(100% - 1.1rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 1.1rem,
                               #000 calc(100% - 1.1rem), transparent 100%);
}
.mapp-rail::-webkit-scrollbar { display: none; }

.mapp-rail a {
    flex-shrink: 0;
    padding: .34rem .85rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .72);
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
}
.mapp-rail a i { margin-inline-end: .25rem; opacity: .8; }
.mapp-rail a:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.mapp-rail a.active { background: var(--brand-500); color: #fff; }

/* ------------------------------------------------------- المحتوى */

.mapp-body { padding: 1rem .9rem 0; }

.mapp-cat {
    /* الترويسة لاصقة، فالمرساة تحتاج إزاحةً بقدر ارتفاعها وإلا اختفى
       عنوان القسم تحتها عند القفز إليه.
       The header is sticky, so an anchor needs an offset its height or the
       section title lands underneath it. */
    /* الترويستان معًا: العامّة الثابتة وترويسة المنيو اللاصقة تحتها.
       بحسبان واحدةٍ فقط يقفز عنوان القسم إلى ما خلف الأخرى.
       Both bars: the fixed site header and the menu header stuck below it.
       Counting only one lands the section title behind the other. */
    scroll-margin-top: calc(var(--header-h, 0px) + var(--rail-h) + 4.6rem);
    margin-bottom: 1.6rem;
}
.mapp-cat > h2 {
    display: flex; align-items: center; gap: .45rem;
    font-size: 1.08rem; margin: 0 0 .6rem; padding-inline: .2rem;
}
/* خطٌّ يملأ ما بعد العنوان: يفصل الأقسام بلا مساحةٍ إضافية في قائمةٍ طويلة */
.mapp-cat > h2::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}
.mapp-cat > h2 i { color: var(--brand-500); }
.mapp-cat > h2 span {
    margin-inline-start: auto; font-size: .74rem; font-weight: 700;
    color: var(--ink-soft); background: #EDF1F5; padding: .08rem .5rem; border-radius: var(--r-pill);
}

/* ------------------------------------------------------ صفّ الصنف */

.mrow {
    position: relative;
    display: flex; align-items: center; gap: .6rem;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: .55rem .75rem; margin-bottom: .4rem;
    min-height: 3.4rem;
}
/* ★ الصورة خلفيةُ الصفّ كلِّه، وفوقها حجابٌ يشتدّ نحو النصّ.

   وأوّل صياغةٍ ثبّتتها في طرف الصفّ وحده: بدت سليمةً حتى نُظر إلى اللقطة —
   **مُدرّجُ الكمية يقع في ذلك الطرف نفسه**، فخرج الزرّ فوق الصورة. وتحريكُ
   الصورة إلى ما بين النصّ والمُدرّج يجعل موضعَها مرهونًا بعرض عناصر تتغيّر
   مع اللغة والسعر.

   فالخلفية تغطّي الصفّ، والحجاب يكفل التباين: معتمٌ تمامًا حيث الاسم
   والسعر، ويرقّ حيث لا نصّ. لا اصطدام، ولا موضعٌ محسوبٌ بالعين.

   ★ The photo backs the whole row, with a scrim that thickens toward the
   text.

   The first version anchored it to the row's far edge. It looked right until
   the screenshot was read — **the quantity stepper sits at that same edge**,
   so the button landed on top of the picture. Moving the image to between the
   text and the stepper would tie its position to the widths of elements that
   change with language and price.

   So the backdrop covers the row and the scrim guarantees contrast: fully
   opaque where the name and price are, thinning where there is no text. No
   collision, and no position guessed by eye. */
.mrow { overflow: hidden; }

/* ★ ثلاث طبقاتٍ بأرقامٍ صريحة. `::before` و`.mrow-bg` كانا كلاهما عند
   `z-index: 0`، وعند التساوي يغلب المتأخّر في الشجرة — والعنصرُ متأخّرٌ عن
   الزائف دائمًا — فرُسم الحجاب **تحت** الصورة ولم يظهر له أثر: خرج الاسم
   والسعر على صورةٍ كاملة القوّة، واختفى السعر تمامًا لأن لونه من لون
   العلامة والصورة كذلك.
   ★ Three layers with explicit numbers. `::before` and `.mrow-bg` both sat
   at `z-index: 0`, and on a tie the later node in the tree wins — and an
   element always comes after a pseudo-element — so the scrim painted
   **beneath** the photo and did nothing: the name and price landed on the
   image at full strength, and the price vanished outright because its
   colour is the brand's and so was the photo. */
.mrow-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* الحجاب. `to left` تصير الاتجاه الخطأ في RTL فيُغطّى الطرف الفارغ ويبقى
   النصّ على الصورة — والخاصّية المنطقية لا تعمل في التدرّجات، فيُقلب
   بمتغيّر. A logical direction is not available inside gradients, so the
   direction is flipped through a custom property. */
.mrow.has-img::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to var(--mrow-fade, left),
        rgba(255, 255, 255, .97) 0%,
        rgba(255, 255, 255, .93) 38%,
        rgba(255, 255, 255, .58) 72%,
        rgba(255, 255, 255, .34) 100%);
}
html[dir="rtl"] .mrow.has-img::before { --mrow-fade: left; }
html[dir="ltr"] .mrow.has-img::before { --mrow-fade: right; }

.mrow > *:not(.mrow-bg) { position: relative; z-index: 2; }

/* ★ ولا ارتفاعَ زائد لذي الصورة. أوّل صياغةٍ أعطته `min-height` أكبر —
   وهي تخالف القاعدة المكتوبة أعلاه بيدي: الهندسة لا تتغيّر بوجود
   البيانات. فخرجت قائمةٌ صفوفُها متفاوتة الارتفاع بحسب من صُوّر ومن
   لم يُصوَّر، وذلك أوّلُ ما تراه العين في قائمةٍ طويلة.
   ★ And no extra height for a row with a photo. The first version gave it
   a larger `min-height`, which breaks the rule written above by my own
   hand: geometry does not change with the data. It produced a list whose
   row heights varied by which items happened to be photographed — the
   first thing the eye catches in a long list. */
.mrow-body { flex: 1; min-width: 0; }
.mrow-body h3 { font-size: .95rem; margin: 0 0 .1rem; }
.mrow-body p {
    font-family: var(--font-base); font-size: .8rem; color: var(--ink-soft);
    margin: 0 0 .2rem; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* ★ عمودُ الأسعار: عرضٌ أدنى وأرقامٌ جدوليّة. بلا `tabular-nums` يختلف
   عرضُ الرقم ١ عن ٧، فلا تصطفّ الفواصل ولا يُقرأ العمود عمودًا.
   ★ The price column: a floor width and tabular figures. Without
   `tabular-nums` a 1 is narrower than a 7, the decimal points do not line
   up, and the column stops reading as one. */
.mrow-price {
    flex: 0 0 auto;
    min-width: 4.6rem;
    text-align: end;
    font-weight: 800;
    color: var(--brand-600, #C43F2B);
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}
.mrow-price small { font-size: .68rem; font-weight: 600; opacity: .65; }
.mrow-meta { display: block; font-size: .74rem; color: var(--ink-soft); margin-top: .1rem; }

/* --------------------------------------------------- مُدرّج الكمية */

.mstep {
    display: flex; align-items: center; gap: .1rem; flex-shrink: 0;
    background: #F1F3F9; border-radius: var(--r-pill); padding: .18rem;
}
.mstep-btn {
    width: 32px; height: 32px; border-radius: 50%; border: 0;
    background: #fff; color: var(--ink); font-size: 1.15rem; font-weight: 700;
    cursor: pointer; display: grid; place-items: center; line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06); transition: transform .12s ease, background-color .16s ease;
    font-family: var(--font-base); list-style: none;
}
.mstep-btn::-webkit-details-marker { display: none; }
.mstep-btn.add { background: linear-gradient(135deg, var(--brand-500), var(--brand-700, #A6321F)); color: #fff; }
.mstep-btn:active { transform: scale(.9); }

/* الناقص والعدّاد يظهران فقط بعد أول إضافة: زرٌّ واحد أوضح من ثلاثة
   على صنفٍ لم يُطلب بعد.
   Minus and count appear only after the first add: one button reads more
   clearly than three on an item nobody has ordered yet. */
.mstep .minus, .mstep .mstep-qty { display: none; }
.mstep.has-qty .minus, .mstep.has-qty .mstep-qty { display: grid; }
.mstep-qty {
    min-width: 1.5rem; text-align: center; font-weight: 800;
    font-size: .95rem; font-family: var(--font-mono); place-items: center;
}

/* ------------------------------------------- خيارات الصنف المركّب */

.mopt { position: relative; flex-shrink: 0; }
.mopt > summary { cursor: pointer; }

/* 🚨 ★ **لوحٌ من أسفل الشاشة لا صندوقٌ معلّقٌ بالصفّ.** كان النموذج `absolute` داخل
   `.mrow` — والصفّ `overflow: hidden` (لخلفية الصورة) وكلُّ ابنٍ فيه `z-index: 2`:
   فيُقصّ اللوح عند حدّ صفّه ويُرسم الصفّ التالي فوقه. قِيس بلقطة الهاتف: خيطٌ رفيعٌ
   تحت «قهوة عربية» والخيارات كلُّها مخفيّة. واللوح الثابت يُفلت من القصّ، والصفّ
   المفتوح يُرفع فوق جيرانه وفوق الترويسة وشريط السلّة.
   🚨 ★ A sheet from the foot of the screen, not a box hung off the row: the row
   clips (`overflow: hidden`) and every later row paints over it. */
.mrow:has(.mopt[open]) { z-index: 70; overflow: visible; }
.mopt[open] { z-index: 70; }
html.mopt-lock { overflow: hidden; }

/* ★ الخلفية زائفةُ الملخّص نفسه: لمسُها لمسٌ للملخّص فيُغلق اللوح **بلا سكربت** */
.mopt[open] > summary::before {
    content: '';
    position: fixed; inset: 0; z-index: 0;
    background: rgba(18, 22, 31, .5);
    cursor: default;
    animation: mopt-fade .2s ease-out;
}
.mopt[open] > .mopt-form {
    position: fixed; z-index: 1;
    inset-inline: 0; bottom: 0; top: auto;
    width: 100%; max-width: 620px; margin: 0 auto;
    max-height: 86vh; max-height: 86dvh;
    overflow-y: auto; overscroll-behavior: contain;
    background: #fff; border: 0; border-radius: 20px 20px 0 0;
    padding: 0 1rem calc(1rem + env(safe-area-inset-bottom));
    box-shadow: 0 -14px 36px rgba(18, 22, 31, .28);
    text-align: start;
    animation: mopt-up .26s cubic-bezier(.32, .72, 0, 1);
}
@keyframes mopt-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes mopt-fade { from { opacity: 0; } to { opacity: 1; } }

.mopt-head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: .6rem;
    margin: 0 -1rem .8rem; padding: .95rem 1rem .75rem;
    background: #fff; border-bottom: 1px solid var(--line);
}
.mopt-head::before {
    content: ''; position: absolute; top: .4rem; left: 50%; transform: translateX(-50%);
    width: 2.6rem; height: .25rem; border-radius: 99px; background: var(--line);
}
.mopt-title { flex: 1; min-width: 0; font-weight: 800; font-size: 1.02rem; margin: 0; color: var(--ink); }
/* ★ لونُ المتن صريحًا: الملخّص يرث لون زرّ «+» الأبيض فخرج الاسم باهتًا في لقطة الشاشة */
.mopt-form { color: var(--ink); }
.mopt-price { font-family: var(--font-mono); font-weight: 800; color: var(--brand-600, #C43F2B); white-space: nowrap; }
.mopt-price small { font-size: .7rem; opacity: .65; }
.mopt-x {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}

.mopt-form fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.mopt-form legend {
    display: flex; align-items: center; gap: .4rem; width: 100%;
    font-size: .92rem; font-weight: 800; padding: 0; margin-bottom: .45rem;
}
.mopt-form legend small {
    margin-inline-start: auto; font-weight: 700; font-size: .72rem;
    color: var(--brand-600, #C43F2B); background: #FFF1EC; border-radius: 99px; padding: .05rem .5rem;
}
/* ★ كلُّ خيارٍ صفٌّ يُلمس بالإبهام لا مربّعٌ صغير — ويُرى المختار بلونه */
.mopt-form label {
    display: flex; align-items: center; gap: .55rem;
    min-height: 46px; padding: .5rem .75rem; margin-bottom: .35rem;
    border: 1px solid var(--line); border-radius: 12px;
    font-size: .92rem; font-family: var(--font-base); cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease;
}
.mopt-form label:has(input:checked) { border-color: var(--brand-500); background: #FFF6F3; font-weight: 700; }
.mopt-form label input { accent-color: var(--brand-600, #C43F2B); width: 1.1rem; height: 1.1rem; margin: 0; flex: 0 0 auto; }
.mopt-form label span { flex: 1; }
.mopt-form label em { font-style: normal; font-family: var(--font-mono); font-size: .84rem; font-weight: 700; color: var(--brand-600, #C43F2B); }
.mopt-add {
    position: sticky; bottom: 0;
    width: 100%; min-height: 50px; border: 0; border-radius: 12px; padding: .7rem;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700, #A6321F));
    color: #fff; font-weight: 800; font-size: 1rem; cursor: pointer; font-family: var(--font-base);
    box-shadow: 0 -10px 16px 4px #fff;
}
@media (prefers-reduced-motion: reduce) {
    .mopt[open] > .mopt-form, .mopt[open] > summary::before { animation: none; }
}

/* ------------------------------------------- نافذة تفاصيل الصنف (upgrade60)
   ★ ورقةٌ من أسفل على الهاتف — كلوح الخيارات، فالإبهامُ يصل كلَّ شيء — وبطاقةٌ في
   الوسط على الشاشة العريضة. والصورةُ صندوقٌ بنسبةٍ ثابتة: صورةً حملت أو لم تحمل
   (القاعدة ١٧). والصفّ القابلُ للفتح يقول ذلك بمؤشّره وبتركيزٍ ظاهر.
   ★ A bottom sheet on a phone, a centred card when wide; the photo box keeps
   its ratio with or without a photo (rule 17). */
.mrow.has-det .mrow-body { cursor: pointer; border-radius: 8px; }
.mrow.has-det .mrow-body:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; }
.mrow.has-det .mrow-body h3 { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
    transition: text-decoration-color .15s ease; }
@media (hover: hover) { .mrow.has-det .mrow-body:hover h3 { text-decoration-color: currentColor; } }
html.mdet-lock { overflow: hidden; }

.mdet {
    padding: 0; border: 0; color: var(--ink); background: #fff;
    width: 100%; max-width: 620px; max-height: 92vh; max-height: 92dvh;
    margin: auto auto 0; border-radius: 22px 22px 0 0;
    box-shadow: 0 -14px 40px rgba(18, 22, 31, .3);
    display: none; flex-direction: column; overflow: hidden;
}
.mdet[open] { display: flex; animation: mopt-up .28s cubic-bezier(.32, .72, 0, 1); }
.mdet::backdrop { background: rgba(18, 22, 31, .55); animation: mopt-fade .2s ease-out; }
@media (min-width: 720px) {
    .mdet { max-width: 520px; margin: auto; border-radius: 22px; max-height: 88vh; }
    .mdet[open] { animation: mdet-pop .22s ease-out; }
}
@keyframes mdet-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

.mdet-close-form { position: absolute; top: .7rem; inset-inline-end: .7rem; z-index: 3; margin: 0; }
.mdet-x {
    width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
    display: grid; place-items: center; font-size: 1rem;
    background: rgba(255, 255, 255, .92); color: var(--ink);
    box-shadow: 0 2px 10px rgba(18, 22, 31, .18);
}
.mdet-media {
    position: relative; flex: 0 0 auto; aspect-ratio: 16 / 10; max-height: 42vh; width: 100%;
    display: grid; place-items: center; overflow: hidden;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700, #A6321F));
    color: rgba(255, 255, 255, .85); font-size: 3rem;
}
.mdet-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ★ بلا صورة: شريطٌ قصير بالعلامة لا كتلةٌ حمراء بحجم الصورة — النافذةُ تُفتح لصنفٍ واحد،
   فلا صفوفَ متجاورة تتفاوت (القاعدة ١٧ تخصّ القائمة)، وكتلةٌ فارغة بعرض الشاشة تُقرأ
   صورةً لم تُحمَّل. ★ Without a photo: a short brand band, not an empty slab. */
.mdet-media:not(.has-img) { aspect-ratio: auto; height: 5.5rem; font-size: 2.2rem; }
.mdet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.15rem .4rem; }
.mdet-head { display: flex; align-items: flex-start; gap: .8rem; }
.mdet-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 1.25rem; line-height: 1.35; font-weight: 800; }
.mdet-price {
    flex: 0 0 auto; white-space: nowrap; font-family: var(--font-mono); font-weight: 800;
    font-size: 1.15rem; color: var(--brand-600, #C43F2B); font-variant-numeric: tabular-nums;
}
.mdet-price small { font-size: .72rem; opacity: .65; }
.mdet-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.mdet-chip {
    font-family: var(--font-base); font-size: .78rem; font-weight: 600;
    padding: .2rem .65rem; border-radius: 99px; background: #F3F5F8; color: var(--ink-soft);
}
.mdet-chip.is-few { background: #FFF1EC; color: var(--brand-600, #C43F2B); }
.mdet-desc {
    font-family: var(--font-base); font-size: .95rem; line-height: 1.8; color: var(--ink-soft);
    margin: .85rem 0 0; white-space: pre-line;
}
.mdet-groups { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.mdet-group + .mdet-group { margin-top: .8rem; }
.mdet-group h3 { display: flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 800; margin: 0 0 .4rem; }
.mdet-group h3 small {
    margin-inline-start: auto; font-size: .7rem; font-weight: 700;
    color: var(--brand-600, #C43F2B); background: #FFF1EC; border-radius: 99px; padding: .05rem .5rem;
}
.mdet-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.mdet-group li {
    display: inline-flex; align-items: baseline; gap: .4rem;
    font-family: var(--font-base); font-size: .84rem; padding: .3rem .7rem;
    border: 1px solid var(--line); border-radius: 10px;
}
/* ⚠️ الفارقُ معزولٌ باتّجاهه صراحةً، والفجوةُ من `gap` لا `margin-inline-start`: داخل
   عنصرٍ `ltr` يصير «البداية» يسارَه فيلتصق الرقمُ بالاسم، ويخرج «−0.50» مقلوبًا «0.50−». */
.mdet-group li em { font-style: normal; font-family: var(--font-mono); font-weight: 700; font-size: .78rem;
    color: var(--brand-600, #C43F2B); direction: ltr; unicode-bidi: isolate; }
.mdet-foot { flex: 0 0 auto; padding: .75rem 1.15rem calc(.85rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.mdet-foot:empty { display: none; }
.mdet-step { display: flex; align-items: center; gap: .6rem; }
.mdet-incart { font-family: var(--font-base); font-size: .82rem; color: var(--ink-soft); }
.mdet-qty { font-family: var(--font-mono); font-weight: 800; font-size: 1.1rem; min-width: 1.4rem; text-align: center; }
.mdet-btn {
    width: 48px; height: 48px; flex: 0 0 auto; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 1.4rem; font-weight: 700;
}
.mdet-add {
    flex: 1; min-height: 50px; border: 0; border-radius: 12px; padding: .7rem 1rem; cursor: pointer;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700, #A6321F));
    color: #fff; font-weight: 800; font-size: 1rem; font-family: var(--font-base);
}
.mdet-step.has-qty .mdet-add { flex: 0 0 auto; width: 48px; min-height: 48px; padding: 0; font-size: 1.4rem; margin-inline-start: auto; }
.mdet-out { margin: 0; text-align: center; font-weight: 700; color: var(--ink-soft); font-family: var(--font-base); }
@media (prefers-reduced-motion: reduce) {
    .mdet[open], .mdet::backdrop { animation: none; }
}

/* ------------------------------------------------ شريط السلّة الثابت */

.mapp-bar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
    max-width: 620px; margin: 0 auto;
    display: flex; align-items: center; gap: .7rem;
    background: var(--navy-800, #1E2431); color: #fff;
    padding: .85rem 1.1rem; text-decoration: none; font-weight: 700;
    box-shadow: 0 -4px 22px rgba(18, 22, 31, .18);
    transition: transform .22s ease;
}
.mapp-bar.is-hidden { transform: translateY(110%); }
.mapp-bar:hover { color: #fff; }
.mapp-bar .n {
    background: var(--brand-500); border-radius: var(--r-pill);
    min-width: 1.7rem; height: 1.7rem; display: grid; place-items: center; font-size: .85rem;
}
.mapp-bar .amt { margin-inline-start: auto; font-family: var(--font-mono); }

.mapp-note { text-align: center; font-family: var(--font-base); font-size: .78rem; color: var(--ink-soft); padding: .5rem 0 1rem; }
.mapp-empty { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); }
.mapp-empty i { font-size: 2.4rem; opacity: .35; display: block; margin-bottom: .5rem; }

@media (min-width: 640px) {
    .mapp { border-inline: 1px solid var(--line); }
    .mapp-bar { border-radius: var(--r-lg) 14px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mapp-rail, .mapp-bar, .mstep-btn { transition: none; scroll-behavior: auto; }
}

/* ومضة تأكيد الإضافة على الصفّ */
@keyframes mrow-added {
    0%   { border-color: var(--brand-500); background: #FFF6F3; }
    100% { border-color: var(--line); background: #fff; }
}
.mrow.just-added { animation: mrow-added .75s ease-out; }
@media (prefers-reduced-motion: reduce) { .mrow.just-added { animation: none; } }

/* ==========================================================================
   لوح السلّة / Basket sheet
   يصعد من أسفل الشاشة على الجوال — حيث الإبهام — ويتوسّط على الشاشة الكبيرة.
   Rises from the foot of the screen on a phone, where the thumb is, and
   centres on a larger one.
   ========================================================================== */

.csheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
.csheet[hidden] { display: none; }

.csheet-scrim {
    position: absolute; inset: 0; background: rgba(18, 22, 31, .5);
    opacity: 0; transition: opacity .22s ease;
}
.csheet.is-open .csheet-scrim { opacity: 1; }

.csheet-panel {
    position: relative; width: 100%; max-width: 620px; margin: 0 auto;
    background: #fff; border-radius: var(--r-lg) 20px 0 0;
    max-height: 88vh; display: flex; flex-direction: column;
    box-shadow: 0 -8px 40px rgba(18, 22, 31, .22);
    transform: translateY(100%); transition: transform .24s cubic-bezier(.32, .72, 0, 1);
}
.csheet.is-open .csheet-panel { transform: translateY(0); }

.csheet-head {
    position: relative; display: flex; align-items: center; gap: .6rem;
    padding: 1.1rem 1.1rem .7rem; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.csheet-head h2 { font-size: 1.1rem; margin: 0; }
.csheet-grip {
    position: absolute; top: .45rem; inset-inline: 0; margin: 0 auto;
    width: 38px; height: 4px; border-radius: var(--r-pill); background: var(--slate-200, #DCE2E9);
}
.csheet-x {
    margin-inline-start: auto; width: 32px; height: 32px; border-radius: 50%;
    border: 0; background: #F1F3F9; color: var(--ink); cursor: pointer;
    display: grid; place-items: center; font-size: .9rem;
}
.csheet-x:hover { background: var(--slate-200, #DCE2E9); }

.csheet-body { overflow-y: auto; flex: 1; min-height: 0; }

/* -------------------------------------------------------- الأسطر */

.csheet-lines { padding: .3rem 1.1rem; }
.csheet-line {
    display: flex; align-items: center; gap: .7rem;
    padding: .8rem 0; border-bottom: 1px solid var(--slate-100, #EDF1F5);
}
.csheet-line:last-child { border-bottom: 0; }
.csheet-line.is-gone { opacity: .55; }
.csheet-line-body { flex: 1; min-width: 0; }
.csheet-line-body strong { font-size: .93rem; }
.csheet-opts { display: block; font-size: .78rem; color: var(--ink-soft); }
.csheet-gone { display: block; font-size: .78rem; color: var(--danger); font-weight: 600; }
.csheet-line-total { font-weight: 800; font-family: var(--font-mono); white-space: nowrap; font-size: .93rem; }

.csheet-qty { display: flex; align-items: center; gap: .15rem; flex-shrink: 0; }
.csheet-qty button {
    width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: #fff; cursor: pointer; color: var(--ink-soft); line-height: 1; font-size: .95rem;
}
.csheet-qty button:hover { border-color: var(--brand-500); color: var(--brand-600, #C43F2B); }
.csheet-qty button.rm:hover { border-color: var(--danger); color: var(--danger); }
.csheet-qty span { min-width: 1.5rem; text-align: center; font-weight: 800; font-family: var(--font-mono); }

/* -------------------------------------------------------- الأسفل */

.csheet-foot {
    padding: .9rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line); background: #FAFBFC; flex-shrink: 0;
}
.csheet-sum { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.csheet-sum strong { font-size: 1.25rem; font-family: var(--font-mono); }
.csheet-note { font-family: var(--font-base); font-size: .78rem; color: var(--ink-soft); margin: .3rem 0 .8rem; }

.csheet-go {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; padding: .9rem; border-radius: var(--r-md); text-decoration: none;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700, #A6321F));
    color: #fff; font-weight: 800; font-size: 1rem;
}
.csheet-go:hover { color: #fff; filter: brightness(1.06); }
.csheet-shut { text-align: center; font-family: var(--font-base); font-size: .88rem; color: var(--danger); margin: 0; }
.csheet-signin { font-family: var(--font-base); font-size: .82rem; color: var(--ink-soft); margin: .7rem 0 0; text-align: center; }
.csheet-signin i { color: var(--brand-500); }

.csheet-empty { text-align: center; padding: 3rem 1.5rem; color: var(--ink-soft); }
.csheet-empty i { font-size: 2.4rem; opacity: .3; display: block; margin-bottom: .5rem; }

@media (min-width: 640px) {
    .csheet { align-items: center; padding: 1.5rem; }
    .csheet-panel { border-radius: var(--r-lg); max-height: 82vh; transform: translateY(16px) scale(.98); opacity: 0;
                    transition: transform .2s ease, opacity .2s ease; }
    .csheet.is-open .csheet-panel { transform: translateY(0) scale(1); opacity: 1; }
    .csheet-grip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .csheet-panel, .csheet-scrim { transition: none; }
}

/* فاتورة الطاولة / The table's bill */
.tbill { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.1rem; }
.tbill h2 { font-size: 1rem; margin: 0 0 .8rem; display: flex; align-items: center; gap: .45rem; }
.tbill h2 i { color: var(--brand-500); }
.tbill-line { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .92rem; }
.tbill-line b { color: var(--brand-600, #C43F2B); }
.tbill-line.is-sum { color: var(--ink-soft); font-size: .86rem; }
.tbill-line.is-sum:first-of-type { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.tbill-line.is-total {
    margin-top: .4rem; padding-top: .6rem; border-top: 1px dashed var(--line);
    font-weight: 800; font-size: 1.1rem;
}
.tbill-line span[dir="ltr"] { font-family: var(--font-mono); white-space: nowrap; }

.tpoints {
    margin-top: 1rem; text-align: center; padding: 1.3rem 1.1rem;
    border-radius: var(--r-lg); background: #FDF0EC; border: 1px solid #FBDDD6;
}
.tpoints > i { font-size: 2rem; color: var(--brand-500); }
.tpoints p { font-family: var(--font-base); font-size: .9rem; color: var(--ink-soft); margin: .4rem 0 .1rem; }
.tpoints strong { display: block; font-size: 1.5rem; font-weight: 800; color: var(--brand-700, #A6321F); margin-bottom: .9rem; }
.tpoints .csheet-go { max-width: 20rem; margin: 0 auto; }
.tpoints > a { display: inline-block; margin-top: .3rem; font-size: .9rem; font-weight: 700; }
.tpoints.is-mine { background: var(--ok-soft); border-color: var(--ok-line); }
.tpoints.is-mine > i { color: var(--ok); }
.tpoints.is-mine strong { color: var(--ok-deep); }

/* ================================================================
   موقع المجموعة / The group site
   صفحة السلسلة على نطاقها الجذر: تعرّف بها ثم توصل إلى فروعها.
   البادئة `g` تفصلها عن `branch-*` — فالفرقُ نطاقٌ لا قسمٌ في صفحة.
   ================================================================ */

.ghero {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(3.4rem, 9vw, 6rem) 0 clamp(2.6rem, 7vw, 4.4rem);
    background: linear-gradient(135deg, var(--brand-500), #1F2739 140%);
    color: #fff; text-align: center;
}
/* الغلاف خلف تدرّج داكن: صورةٌ بلا حجاب تبتلع النصّ فوقها */
.ghero-bg {
    position: absolute; inset: 0; z-index: -1;
    background-size: cover; background-position: center; opacity: .3;
}
.ghero .eyebrow { color: rgba(255,255,255,.8); font-weight: 700; font-size: .88rem; margin: 0 0 .5rem; }
.ghero h1 { font-size: clamp(2rem, 6vw, 3.4rem); margin: 0 0 .7rem; color: #fff; line-height: 1.15; }
.ghero .lead {
    font-family: var(--font-base); color: rgba(255,255,255,.86);
    max-width: 44rem; margin: 0 auto; font-size: clamp(.95rem, 2.2vw, 1.08rem);
}

.ghero-stats {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem;
    margin: 1.6rem 0 0; font-size: .9rem; color: rgba(255,255,255,.85);
}
.ghero-stats b { font-size: 1.15rem; color: #fff; margin-inline-end: .2rem; }

.ghero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.8rem; }
.ghero-cta .btn-outline {
    border: 1px solid rgba(255,255,255,.3); color: #fff; background: transparent;
    padding: .68rem 1.3rem; border-radius: var(--r-pill); font-weight: 600;
}
.ghero-cta .btn-outline:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); }

/* ---------------------------------------------------------- الفروع */

.gbranches { padding: clamp(2.6rem, 7vw, 4.4rem) 0; scroll-margin-top: 4.5rem; }

.gbranch-grid {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
}

.gbranch {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gbranch:hover { transform: translateY(-3px); border-color: var(--brand-500); box-shadow: 0 12px 28px rgba(31,39,57,.1); }
/* الفرع الموقوف يُعرَض باهتًا حين يُطلب عرضه — لا يُخفى فيُظنّ مغلقًا للأبد */
.gbranch.is-off { opacity: .58; }

.gbranch-top { position: relative; aspect-ratio: 16 / 9; background: #F4F1EE; }
.gbranch-top img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gbranch-blank {
    display: grid; place-items: center; height: 100%;
    background: linear-gradient(135deg, var(--brand-500) 0%, #1F2739 160%);
}
.gbranch-blank i { font-size: 2.4rem; color: rgba(255,255,255,.55); }

.gbranch-state {
    position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .22rem .6rem; border-radius: var(--r-pill); font-size: .76rem; font-weight: 700;
    background: rgba(255,255,255,.94); backdrop-filter: blur(4px);
}
.gbranch-state i { font-size: .5rem; }
.gbranch-state.is-open { color: var(--ok); }
.gbranch-state.is-shut { color: var(--danger); }

.gbranch-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.gbranch-body h3 { font-size: 1.08rem; margin: 0 0 .35rem; }
.gbranch-blurb { font-size: .88rem; color: var(--ink-soft); margin: 0 0 .7rem; line-height: 1.6; }

.gbranch-facts { list-style: none; padding: 0; margin: 0 0 .9rem; display: grid; gap: .3rem; }
.gbranch-facts li { display: flex; gap: .45rem; font-size: .85rem; color: var(--ink-soft); }
.gbranch-facts i { color: var(--brand-500); flex: 0 0 auto; margin-top: .15rem; }
.gbranch-facts a { color: inherit; text-decoration: none; }
.gbranch-facts .yes { color: var(--ok); font-weight: 600; }
.gbranch-facts .yes i { color: var(--ok); }

.gbranch-hours { width: 100%; margin: 0 0 .9rem; font-size: .82rem; border-collapse: collapse; }
.gbranch-hours th { text-align: start; font-weight: 500; color: var(--ink-soft); padding: .14rem 0; }
.gbranch-hours td { text-align: end; color: var(--ink-soft); padding: .14rem 0; }
.gbranch-hours .is-today th, .gbranch-hours .is-today td { color: var(--ink); font-weight: 700; }

/* الأزرار في الأسفل مهما اختلف طول النصوص، فتستوي البطاقات في صفّ */
.gbranch-cta { display: flex; align-items: center; gap: .5rem; margin-top: auto; flex-wrap: wrap; }
.gbranch-cta .btn-sm { padding: .45rem .95rem; font-size: .85rem; border-radius: var(--r-pill); }
.gbranch-map {
    margin-inline-start: auto; width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft); text-decoration: none;
}
.gbranch-map:hover { border-color: var(--brand-500); color: var(--brand-500); }

/* بحث الفروع — يظهر فوق خمسة فروع فقط */
.gfilter { position: relative; max-width: 24rem; margin: 0 0 1.6rem; }
.gfilter i { position: absolute; inset-inline-start: .9rem; top: 50%; transform: translateY(-50%); color: var(--ink-soft); }
.gfilter input {
    width: 100%; padding: .65rem 1rem; padding-inline-start: 2.4rem;
    border: 1px solid var(--line); border-radius: var(--r-pill); font: inherit; font-size: .92rem;
}
.gfilter input:focus { outline: 2px solid var(--brand-500); outline-offset: 1px; border-color: transparent; }
.gfilter-none { margin-top: 1.2rem; }

/* ---------------------------------------------------- عن المجموعة */

.gabout { padding: clamp(2.6rem, 7vw, 4.4rem) 0; background: var(--sand-50, var(--sand-50)); scroll-margin-top: 4.5rem; }
.gabout-grid { display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr; align-items: start; }
.gabout h2 { font-size: clamp(1.4rem, 3.6vw, 2rem); margin: 0 0 .9rem; }
.gabout p { color: var(--ink-soft); line-height: 1.9; margin: 0 0 .9rem; }
.gstory {
    position: relative; padding: 1.6rem 1.4rem 1.2rem; background: #fff;
    border: 1px solid var(--line); border-radius: var(--r-lg);
    border-inline-start: 3px solid var(--brand-500);
}
.gstory > i { font-size: 2rem; color: var(--brand-500); opacity: .35; line-height: 1; }
.gstory p { font-size: .95rem; font-style: italic; }
@media (max-width: 820px) { .gabout-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------- برنامج النقاط */

.gloyalty { padding: clamp(2.6rem, 7vw, 4.4rem) 0; }
.gloyalty-card {
    display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
    padding: clamp(1.6rem, 4vw, 2.6rem);
    background: linear-gradient(135deg, var(--brand-500), #1F2739 150%);
    border-radius: var(--r-lg); color: #fff;
}
.gloyalty-card .eyebrow { color: rgba(255,255,255,.78); font-weight: 700; font-size: .84rem; margin: 0 0 .35rem; }
.gloyalty-card h2 { font-size: clamp(1.3rem, 3.4vw, 1.9rem); margin: 0 0 .6rem; color: #fff; }
.gloyalty-card .lead { font-family: var(--font-base); color: rgba(255,255,255,.86); margin: 0 0 1rem; font-size: .95rem; }
.gloyalty-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.gloyalty-facts li { display: flex; gap: .5rem; align-items: center; font-size: .9rem; color: rgba(255,255,255,.9); }
.gloyalty-facts i { color: #fff; opacity: .8; }
.gloyalty-card .btn-lg { padding: .85rem 1.6rem; font-size: 1rem; border-radius: var(--r-pill); background: #fff; color: var(--ink); white-space: nowrap; }
.gloyalty-card .btn-lg:hover { background: rgba(255,255,255,.9); }
@media (max-width: 720px) {
    .gloyalty-card { grid-template-columns: 1fr; }
    .gloyalty-card .btn-lg { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------- التواصل */

.gcontact { padding: clamp(2.4rem, 6vw, 4rem) 0; background: var(--sand-50, var(--sand-50)); scroll-margin-top: 4.5rem; }
.gcontact-row { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.gcontact-item {
    display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: inherit;
    padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
}
a.gcontact-item:hover { border-color: var(--brand-500); }
.gcontact-item > i { font-size: 1.3rem; color: var(--brand-500); margin-bottom: .3rem; }
.gcontact-item span { font-size: .8rem; color: var(--ink-soft); }
.gcontact-item b { font-size: .95rem; }

.gsocial { display: flex; gap: .6rem; justify-content: center; margin-top: 1.6rem; }
.gsocial a {
    width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 50%; background: #fff;
    color: var(--ink-soft); font-size: 1.1rem; text-decoration: none;
}
.gsocial a:hover { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }

/* أزرار الفروع على صفحة تجهيز المجموعة */
.holding-branches { margin: 1.4rem 0; }
.holding-branches p { font-size: .9rem; color: var(--ink-soft); margin: 0 0 .6rem; }
.holding-branches .btn-sm { margin: .2rem; border-radius: var(--r-pill); padding: .42rem .95rem; font-size: .86rem; }

/* ================================================================
   صفحة مطالبة النقاط — ما يفتحه العميل بعد مسح رمز الكاشير
   شاشةُ هاتفٍ يقرؤها واقفٌ عند الصندوق: بطاقةٌ واحدة، وحقلٌ واحد.
   ================================================================ */

.claim { min-height: 78vh; display: grid; place-items: center; padding: 2rem 0; }
.claim .narrow { width: min(28rem, 100%); }

.claim-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: clamp(1.4rem, 5vw, 2.2rem); text-align: center;
    box-shadow: 0 12px 40px rgba(31,39,57,.08);
}
.claim-card > i { font-size: 3rem; color: var(--brand-500); display: block; margin-bottom: .5rem; }
.claim-card.is-good > i { color: var(--ok); }
.claim-card.is-bad  > i { color: var(--ink-soft); }
.claim-card h1 { font-size: clamp(1.35rem, 4.5vw, 1.9rem); margin: 0 0 .5rem; }
.claim-eyebrow { font-size: .84rem; font-weight: 700; color: var(--ink-soft); margin: 0 0 .3rem; }

.claim-bill {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    background: var(--sand-50, var(--sand-50)); border-radius: var(--r-md);
    padding: .8rem 1rem; margin: 1rem 0 .6rem;
}
.claim-bill span { font-size: .88rem; color: var(--ink-soft); }
.claim-bill b { font-size: 1.35rem; font-weight: 800; }

.claim-earn { font-size: .95rem; font-weight: 700; color: var(--brand-600); margin: 0 0 1.2rem; }
.claim-earn i { margin-inline-end: .2rem; }

.claim-form { display: grid; gap: .5rem; text-align: start; }
.claim-form label { font-size: .85rem; font-weight: 700; }
.claim-form .field {
    width: 100%; padding: .85rem 1rem; border: 1px solid var(--line);
    border-radius: var(--r-md); font: inherit; font-size: 1.05rem;
}
.claim-form .field:focus { outline: 2px solid var(--brand-500); outline-offset: 1px; border-color: transparent; }
.claim-form #phone { font-family: ui-monospace, Menlo, monospace; letter-spacing: .06em; }
.btn-block { width: 100%; justify-content: center; margin-top: .5rem; padding: .9rem 1.2rem; font-size: 1rem; }

.claim-note  { font-size: .82rem; color: var(--ink-soft); margin: 0; }
.claim-error { background: var(--danger-soft); color: var(--danger); font-size: .88rem; padding: .6rem .9rem;
               border-radius: var(--r-md); margin: 0 0 .9rem; text-align: start; }
.claim-fine  { font-size: .78rem; color: var(--ink-soft); margin: 1rem 0 0; }

/* لحظة النجاح */
.claim-points { font-size: clamp(2.6rem, 12vw, 3.6rem); color: var(--ok); margin: 0; line-height: 1; }
.claim-points small { font-size: 1rem; font-weight: 600; color: var(--ink-soft); display: block; }
.claim-lead { color: var(--ink-soft); font-size: .92rem; margin: .6rem 0 1rem; }
.claim-balance {
    display: grid; gap: .1rem; background: var(--sand-50, var(--sand-50));
    border-radius: var(--r-md); padding: .9rem; margin-bottom: 1.2rem;
}
.claim-balance span { font-size: .82rem; color: var(--ink-soft); }
.claim-balance b { font-size: 1.8rem; font-weight: 800; }
.claim-balance small { font-size: .8rem; color: var(--ink-soft); }

/* صفحة المطالبة: حقل الرمز وقيمة الحسم */
.claim-code { font-family:ui-monospace,Menlo,monospace; font-size:1.6rem !important;
              letter-spacing:.5em; text-align:center; padding-inline-start:.5em !important; }
.claim-form #points { font-family:ui-monospace,Menlo,monospace; font-size:1.3rem; text-align:center; }

/* ================================================================
   أرضيّة القراءة وأهداف اللمس على الجوال

   قياسٌ في متصفّح حقيقي على شاشة ٣٦٠ بكسل أظهر نصوصًا دون ١٢ بكسل في كل
   صفحة من صفحات الأوضاع الثلاثة، وروابطَ ارتفاعُها ارتفاعُ حرفها.
   ١٢ بكسل هو الحدّ الذي يُقرأ دونه بالتقريب لا بالنظر؛ و٢٨ هو أصغر ما
   يُصيبه إبهامٌ بثقة. الرقمان ليسا ذوقًا.

   Measured in a real browser at 360px: text under twelve pixels on every page
   of all three modes, and links as tall as their letters. Twelve pixels is
   where reading turns into guessing; twenty-eight is the smallest a thumb
   hits with confidence. Neither number is a matter of taste.
   ================================================================ */
@media (max-width: 46rem) {

    /* الأرضيّة: لا نصّ دون ١٢ بكسل */
    .brand-tag, .teaser-cat, .stage-num, .price-tag-popular,
    .fact, .menu-item-meta, .footer-legal, .card-note,
    small, .small { font-size: .78rem !important; }

    /* الشعار الفرعي يختفي على الضيّق بدل أن يُصغَّر:
       سطرٌ ثانٍ بجانب الاسم يزاحمه على شاشةٍ عرضها ٣٦٠، وحذفُه أنظف من
       تصغيره حتى لا يُقرأ.
       The tagline hides rather than shrinks: a second line beside the name
       crowds a 360px screen, and dropping it is cleaner than shrinking it
       past legibility. */
    .brand-tag { display: none; }

    /* روابط الذيل والتنقّل كتلًا لها حشوٌ رأسيّ: الرابط السطريّ ارتفاعه
       ارتفاعُ حرفه، فيُصاب بالحظّ لا بالقصد. */
    .footer-col ul a,
    .footer-contact a,
    .footer-legal a { display: inline-block; padding-block: var(--sp-2); }

    .footer-social a,
    .gsocial a { min-width: 2.75rem; min-height: 2.75rem; }

    /* الحقائق على واجهة الفرع: شارات تُقرأ وتُلمس */
    .branch-hero-facts .fact,
    .hero-facts .fact { padding: var(--sp-2) var(--sp-3); }
}

/* حالة التركيز موحّدة في الموقع كلّه: من يتنقّل بلوحة المفاتيح يجب أن يرى
   أين هو. كانت متروكةً للمتصفّح، فتختلف من عنصر لآخر ومن متصفّح لآخر.
   One focus style across the site: whoever navigates by keyboard must see
   where they are. It was left to the browser, so it differed per element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* تكملة الأرضيّة — مواضع بعينها كشفها القياس على ٣٦٠ بكسل */
@media (max-width: 46rem) {

    /* شارة عدد الأصناف بجانب اسم القسم */
    .menu-cat-title span { font-size: .78rem; }

    /* بطاقة العضوية على واجهة المنتَج: نصٌّ زخرفيّ يبقى نصًّا يُقرأ */
    .hero-panel-bar .title,
    .hero-stat span { font-size: .78rem; }

    /* فتات الخبز وروابط التواصل: ٢٦ و٢٧ بكسل أقلّ من هدفٍ يُصاب بثقة */
    .breadcrumbs a { display: inline-block; padding-block: var(--sp-1); }
    .contact-info a,
    .contact-card a { display: inline-block; padding-block: var(--sp-1); }
}

/* آخر موضعين كشفهما القياس */
@media (max-width: 46rem) {
    /* شارة عدد الأصناف في عنوان القسم — صيغة قشرة التطبيق */
    .mapp-cat h2 span,
    .menu-cat h2 span { font-size: .78rem; }

    /* بطاقات التواصل: الرابط فيها سطرٌ داخل <div> بلا فئة */
    .contact-tile a { display: inline-block; padding-block: var(--sp-1); }
}

/* رابط «الكل» في ترويسة القسم — ٢٧ بكسل قبل الحشو */
@media (max-width: 46rem) {
    .section-head a { display: inline-block; padding-block: var(--sp-1); }
}

/* ================================================================
   إعادة ضبط الواجهات — تحسينٌ بُني على لقطاتٍ مقروءة لا على تخمين

   ما ظهر في اللقطات: الشعار الفرعي يُقصّ تحت الترويسة اللاصقة، والتدرّج
   برتقاليٌّ إلى بنّي يبدو موحلًا، وسطرُ الأرقام مزدحمٌ على ٣٩٠ بكسل،
   وعنوانُ القسم بجانب شرحه فلا هرميّة بينهما.
   Built on screenshots actually read, not guesses: the eyebrow was clipped
   under the sticky header, the orange-to-brown gradient looked muddy, the
   stats line was crowded at 390px, and section headings sat beside their own
   description so neither led.
   ================================================================ */

/* ---------------------------------------------------------- الواجهة */

.ghero, .branch-hero {
    /* ★ التدرّج بلونٍ واحد بعمقين بدل لونين متنافرين: البرتقالي إلى البنّي
       يمرّ بدرجاتٍ طينيّة في المنتصف. هذا يبقى في عائلة اللون.
       ★ One hue at two depths instead of two colours fighting: orange into
       brown passes through mud in the middle. This stays in the family. */
    background:
        radial-gradient(120% 100% at 80% 0%, rgba(255,255,255,.14), transparent 60%),
        linear-gradient(165deg, var(--brand-500) 0%, var(--brand-700) 100%);
    /* ★ الترويسة `position: fixed`، فهي خارج التدفّق ولا تحجز ارتفاعها.
       أول عنصرٍ في الواجهة يختفي تحتها ما لم يُضَف ارتفاعُها إلى الحشو —
       وهو ما كان يقصّ الشعار الفرعي نصفين على الهاتف.
       ★ The header is `position: fixed`, so it is out of flow and reserves no
       height. The first element of a hero hides beneath it unless its height
       is added to the padding — which is what cut the eyebrow in half. */
    padding-top: calc(var(--header-h) + clamp(1.6rem, 5vw, 3rem));
}

.ghero .eyebrow, .branch-hero .eyebrow {
    display: inline-block;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    font-size: .82rem;
    letter-spacing: .01em;
    margin-bottom: var(--sp-4);
}

.ghero h1 { margin-bottom: var(--sp-3); letter-spacing: -.01em; }
.ghero .lead { font-size: clamp(.98rem, 2.4vw, 1.1rem); line-height: 1.75; }

/* الأرقام: أعمدة تُقرأ لا سطرٌ مزدحم */
.ghero-stats {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    gap: 0;
    margin-top: var(--sp-5);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    width: fit-content;
    margin-inline: auto;
}
.ghero-stats span {
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: var(--sp-3) var(--sp-5);
    font-size: .8rem; color: rgba(255,255,255,.82);
    border-inline-start: 1px solid rgba(255,255,255,.14);
    text-align: center;
}
.ghero-stats span:first-child { border-inline-start: 0; }
.ghero-stats b { font-size: 1.4rem; color: #fff; margin: 0; line-height: 1.1; }

@media (max-width: 34rem) {
    /* على الضيّق تصير عمودين وسطرين بدل ثلاثة أعمدة مضغوطة */
    .ghero-stats { grid-auto-flow: row; grid-template-columns: 1fr 1fr; width: 100%; }
    .ghero-stats span:nth-child(1) { border-inline-start: 0; }
    .ghero-stats span:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.14); border-inline-start: 0; }
}

.ghero-cta { margin-top: var(--sp-5); gap: var(--sp-3); }

/* --------------------------------------------------- ترويسة القسم */

/* ★ العنوان فوق شرحه لا بجانبه: المتجاوران يتنافسان على البداية، ولا
   يعرف القارئ أيّهما يبدأ به. */
.section-head {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: var(--sp-2); margin-bottom: var(--sp-5);
}
.section-head h2 { margin: 0; letter-spacing: -.01em; }
.section-head p { margin: 0; color: var(--ink-soft); max-width: 44rem; font-size: .95rem; }
.section-head a { margin-inline-start: 0; }
@media (min-width: 46rem) {
    /* على الواسع يعود الرابط إلى الطرف، والعنوان والشرح يبقيان متراكبين */
    .section-head { flex-direction: row; flex-wrap: wrap; align-items: baseline; }
    .section-head h2 { flex: 0 0 auto; }
    .section-head p { flex: 1 1 20rem; }
    .section-head a { margin-inline-start: auto; }
}

/* ------------------------------------------------------ بطاقة فرع */

.gbranch-top {
    /* ٣:٢ بدل ١٦:٩: الصورة الأقصر تُبقي الاسم والحقائق فوق الطيّة */
    aspect-ratio: 3 / 2;
    background: var(--slate-100);
}

/* البديل حين لا صورة: نقشٌ خفيف بدل مستطيلٍ مصمت — المصمت يبدو خطأً
   في التحميل، والنقش يبدو اختيارًا.
   A light pattern instead of a solid block: a solid one reads as a failed
   image, a pattern reads as a choice. */
.gbranch-blank {
    background:
        repeating-linear-gradient(135deg,
            rgba(255,255,255,.06) 0 10px, transparent 10px 20px),
        linear-gradient(160deg, var(--brand-500), var(--brand-700));
}
.gbranch-blank i { font-size: 2rem; color: rgba(255,255,255,.5); }

/* الشارة في الزاوية نفسها دائمًا ومقروءة فوق أي صورة */
.gbranch-state {
    inset-block-start: var(--sp-3);
    inset-inline-start: var(--sp-3);
    box-shadow: 0 2px 8px rgba(20,26,36,.18);
}

.gbranch { border-radius: var(--r-lg); }
.gbranch-body { padding: var(--sp-4) var(--sp-4) var(--sp-4); gap: 0; }
.gbranch-body h3 { margin-bottom: var(--sp-2); letter-spacing: -.01em; }
.gbranch-blurb { margin-bottom: var(--sp-3); }
.gbranch-facts { margin-bottom: var(--sp-4); gap: var(--sp-2); }
.gbranch-cta { gap: var(--sp-2); }

/* ------------------------------------------------- إيقاع الأقسام */

.gbranches, .gabout, .gloyalty, .gcontact { padding-block: clamp(2.2rem, 6vw, 3.6rem); }
.gloyalty-card { border-radius: var(--r-lg); }

/* ================================================================
   ================================================================
   الموقع الرئيسي — الهوية الجديدة

   اللغة نفسها التي بُني بها موقع الفرع، لا لغةٌ ثانية: من يبيع النظام
   ومن يشتريه يجب أن يبدو موقعاهما من عائلةٍ واحدة. أربعة مبادئ:

     ١. الورق لا الطلاء — خلفيةٌ بيضاء دافئة، واللون العلامة لهجةٌ على
        الأسعار والأفعال لا طلاءٌ يغمر الشاشة.
     ٢. وجهان للخطّ — «ريم كوفي» للعناوين وتجوال للمتن. الوجه الواحد
        يُسطّح الصفحة مهما ضُبطت مقاساتها.
     ٣. عمقٌ وطبقات — الواجهة لوحٌ داكن محدود يجلس فوق الورق، لا لونٌ
        مسطّح يملأ الشاشة. اللوح يعطي الصفحة سُمكًا.
     ٤. الحدّ الرفيع بدل الظلّ الثقيل.

   The same language the branch site was built in, not a second one: whoever
   sells the system and whoever buys it should have sites that look related.
   ================================================================
   ================================================================ */

:root {
    --display: 'Tajawal', 'Reem Kufi', system-ui, sans-serif;

    /* ورقٌ بلمسة دفء بدل الأبيض الطبّي، وحبرٌ أسود دافئ */
    --paper:    #FDFCFB;
    --paper-2:  #F7F4F0;
    --paper-3:  #EFEAE4;
    --ink-0:    #0C0A09;
    --ink:      #1C1917;
    --ink-soft: #6B6259;
    --line:     #E4DDD4;
    --line-2:   #CFC5B8;

    --t--1: clamp(.8rem, .77rem + .14vw, .875rem);
    --t-0:  clamp(.95rem, .92rem + .16vw, 1rem);
    --t-1:  clamp(1.1rem, 1.04rem + .3vw, 1.25rem);
    --t-2:  clamp(1.35rem, 1.22rem + .6vw, 1.75rem);
    --t-3:  clamp(1.9rem, 1.4rem + 2.2vw, 3.25rem);
    --t-4:  clamp(2.6rem, 1.7rem + 4.4vw, 5.5rem);
}

body { background: var(--paper); color: var(--ink); }

/* ------------------------------------------------------ ١) الخطّ */
h1, h2, h3, h4,
.brand-name, .section-title, .hero-title,
.gbranch h3, .claim-points, .stat-num, .price-amount {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: 0;
}
h1 { font-weight: 700; font-size: var(--t-4); line-height: 1.03; }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-1); }

/* --------------------------------------------- ٢) الترويسة الورقية */
.site-header {
    background: rgba(253,252,251,.86);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid transparent;
}
.site-header.scrolled {
    background: rgba(253,252,251,.96);
    border-bottom-color: var(--line);
    box-shadow: none;
}
.nav-link { color: var(--ink-soft); font-weight: 700; font-size: var(--t--1); }
.nav-link:hover, .nav-link.active { color: var(--ink); }
.brand-name { font-family: var(--display); font-weight: 700; }

/* الأزرار: حبرٌ داكن للفعل الأول، وحدٌّ رفيع للثاني */
.btn { border-radius: 999px; font-weight: 700; font-size: var(--t--1); min-height: 2.9rem; }
.btn-brand { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-brand:hover { background: var(--ink-0); border-color: var(--ink-0); color: var(--paper); }
.btn-outline { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--ink); background: var(--paper-2); color: var(--ink); }

/* ================================================================
   ٣) الواجهات — لوحٌ داكن يجلس فوق الورق
   ================================================================ */
.ghero, .branch-hero, .hero {
    background: transparent;
    color: var(--ink);
    padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 3rem);
    padding-top: calc(var(--header-h) + clamp(1.2rem, 3vw, 2rem));
}
.ghero > .container, .branch-hero > .container, .hero > .container {
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: 26px;
    padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.6rem, 5vw, 4rem);
    background: #0c0a095c;
    color: var(--paper);
    max-width: 1200px;
}
/* ضوء العلامة يدخل من زاوية + حُبيبات تعطي إحساس المادّة */
.ghero > .container::before, .branch-hero > .container::before, .hero > .container::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(90% 120% at 88% -10%, color-mix(in srgb, var(--brand-500) 85%, transparent), transparent 58%),
        radial-gradient(70% 90% at 8% 110%, color-mix(in srgb, var(--brand-500) 28%, transparent), transparent 62%);
}
.ghero > .container::after, .branch-hero > .container::after, .hero > .container::after {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: .13;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.ghero h1, .branch-hero h1, .hero h1, .hero-title { color: #fff; max-width: 15ch; }
.ghero .lead, .branch-hero .lead, .hero .lead, .hero-sub {
    color: rgba(255,255,255,.76); font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem); max-width: 46ch;
}

/* الشعار الصغير: خطٌّ قصير ثم كلمة */
.ghero .eyebrow, .branch-hero .eyebrow, .hero .eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    background: transparent; border: 0; padding: 0;
    font-size: var(--t--1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: color-mix(in srgb, var(--brand-500) 42%, #fff);
    margin-bottom: 1rem;
}
.ghero .eyebrow::before, .branch-hero .eyebrow::before, .hero .eyebrow::before {
    content: ''; width: 1.6rem; height: 1px; background: currentColor; opacity: .65;
}

/* الأزرار داخل اللوح تنقلب: الأبيض هو الفعل الأول */
.ghero .btn-brand, .branch-hero .btn-brand, .hero .btn-brand {
    background: #fff; border-color: #fff; color: var(--ink-0);
}
.ghero .btn-brand:hover, .branch-hero .btn-brand:hover, .hero .btn-brand:hover { background: rgba(255,255,255,.88); color: var(--ink-0); }
.ghero .btn-outline, .branch-hero .btn-outline, .hero .btn-outline {
    border-color: rgba(255,255,255,.32); color: #fff;
}
.ghero .btn-outline:hover, .branch-hero .btn-outline:hover, .hero .btn-outline:hover {
    background: rgba(255,255,255,.1); border-color: #fff; color: #fff;
}

/* ★ الأرقام **داخل** اللوح لا راكبةً على حافّته.
   الهامش السالب كان يسحبها إلى داخله فتقع فوق سطر الشرح وتحجبه: هي شقيقةٌ
   للنصّ في الحاوية نفسها، لا عنصرٌ بعدها. الحيلة التي نجحت في موقع الفرع
   فشلت هنا لأن البنية مختلفة — والحيلة تتبع البنية لا العكس.
   ★ The numbers sit *inside* the panel rather than riding its edge. The
   negative margin pulled them in over the lead line and hid it: here they are
   a sibling of the text within the same container, not an element after it.
   The trick that worked on the branch site fails here because the structure
   differs — and the trick follows the structure, never the reverse. */
.ghero-stats {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0; margin: 2rem auto 0; width: fit-content;
    background: transparent; border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px; overflow: hidden;
}
.ghero-stats span {
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    background: rgba(255,255,255,.06); color: rgba(255,255,255,.7);
    border: 0; border-inline-start: 1px solid rgba(255,255,255,.14);
    padding: .85rem 1.6rem; text-align: center; font-size: var(--t--1);
}
.ghero-stats span:first-child { border-inline-start: 0; }
.ghero-stats b { font-family: var(--display); color: #fff; font-size: var(--t-1); line-height: 1.1; }
@media (max-width: 34rem) {
    .ghero-stats { width: 100%; }
    .ghero-stats span { flex: 1 1 8rem; padding-inline: .75rem; }
}

.branch-hero-facts .fact, .hero-facts .fact {
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #fff;
}

/* ================================================================
   ٤) الأقسام والبطاقات — حدٌّ رفيع بدل الظلّ
   ================================================================ */
.section { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.section.alt, .sect--tint { background: var(--paper-2); border-block: 1px solid var(--line); }
.section-title, .section-head h2 { font-family: var(--display); }
.section-head p { color: var(--ink-soft); }

.gbranch, .card, .contact-tile, .feature-card, .plan-card, .claim-card {
    border: 1px solid var(--line); border-radius: 18px;
    background: var(--paper); box-shadow: none;
}
.gbranch:hover, .card:hover, .contact-tile:hover { border-color: var(--line-2); box-shadow: none; transform: none; }

.gbranch-top { aspect-ratio: 3 / 2; }
.gbranch-blank {
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px),
        linear-gradient(160deg, var(--ink-0), var(--brand-700));
}
.gbranch-state { background: rgba(253,252,251,.95); box-shadow: 0 2px 10px rgba(12,10,9,.16); }
.gbranch h3 { font-family: var(--display); }
.gbranch .btn-brand { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* بطاقة برنامج النقاط: ورقٌ بحدّ لا تدرّجٌ برتقالي */
.gloyalty-card {
    background: var(--ink-0); border-radius: 22px; position: relative; isolation: isolate; overflow: hidden;
}
.gloyalty-card::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(80% 120% at 90% 0%, color-mix(in srgb, var(--brand-500) 70%, transparent), transparent 60%);
}
.gloyalty-card .btn-lg { background: #fff; color: var(--ink-0); }

/* ================================================================
   التذييل — ورقٌ فاتح بحدٍّ علويّ لا سبيكةٌ سوداء
   ================================================================ */
.site-footer {
    background: var(--paper-2); color: var(--ink-soft);
    border-top: 1px solid var(--line);
}
.site-footer .brand-name, .site-footer h4 { color: var(--ink); }
.site-footer h4 { font-family: var(--display); font-size: var(--t--1); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--brand-600); }
.footer-about { color: var(--ink-soft); }
.footer-social a, .gsocial a {
    background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft);
}
.footer-social a:hover, .gsocial a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.footer-bottom { border-top-color: var(--line); color: var(--ink-soft); }

/* بطاقة المطالبة والمحفظة */
.claim-card { box-shadow: none; }
.claim-points { font-family: var(--display); }

/* ================================================================
   الصفحات الداخلية والترويسة الثابتة

   ★ `.site-header` بـ`position: fixed` — خارج التدفّق فلا تحجز ارتفاعها.
   عالجتُ ذلك للواجهات الثلاث، وبقيت الصفحات الداخلية: المحفظة والانضمام
   ومطالبة النقاط والمتابعة. أولُ عنصرٍ في كلٍّ منها يدخل تحت الشريط.
   الإصلاح على كل صفحةٍ يُنسى مع الصفحة التالية، فيوضع على القاعدة.

   ★ `.site-header` is `position: fixed`, so it reserves no height. I fixed
   that for the three heroes and left the inner pages — wallet, join, claim,
   tracking — where the first element slides under the bar. Fixing it page by
   page is forgotten by the next page anyone adds, so it goes on the rule.
   ================================================================ */
.wallet, .auth, .claim, .track-page, .page-head {
    padding-top: calc(var(--header-h) + clamp(1.2rem, 4vw, 2.5rem));
}

/* شعار الفرع في الدليل: يُعرض كاملًا على أرضيّة الفرع لا مقصوصًا —
   شعارٌ يُقصّ يفقد اسمه وهو كلّ ما فيه. */
.gbranch-logo { display: grid; place-items: center; height: 100%; padding: 1.5rem; }
.gbranch-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* ---------------------------------------------------------------
   واجهة الفرع: الغلاف والشبكات والنموذج
   Branch front page: cover, socials and the form
   --------------------------------------------------------------- */

.branch-hero.has-cover { position: relative; isolation: isolate; }

/* الغلاف صورةٌ حقيقية لا خلفية CSS: المتصفّح يعطيها أولويةً ويحمّلها مبكرًا،
   وخلفيةُ CSS تنتظر ورقة الأنماط ثم تُطلب — فيرى الزائر مستطيلًا فارغًا.
   A real <img>, not a CSS background: the browser prioritises and preloads
   it, whereas a background waits for the stylesheet and then gets requested,
   leaving the visitor looking at an empty rectangle. */
.branch-hero-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* ★ الحجاب ليس زينة: نصٌّ أبيض على صورةٍ لا يُعرف لونها هو نصٌّ قد يختفي
   تمامًا. والتدرّج يُبقي التباين مقروءًا مهما كانت الصورة.
   ★ The veil is not decoration: white text over an image of unknown colour
   is text that may vanish. The gradient keeps contrast legible whatever the
   photograph turns out to be. */
.branch-hero-veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom,
        rgba(18, 20, 24, .72), rgba(18, 20, 24, .55) 45%, rgba(18, 20, 24, .82));
}

.branch-hero.has-cover,
.branch-hero.has-cover h1,
.branch-hero.has-cover .lead,
.branch-hero.has-cover .eyebrow,
.branch-hero.has-cover .fact { color: #fff; }

.branch-hero.has-cover .fact { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .22); }
.branch-hero.has-cover .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .45); }
.branch-hero.has-cover .btn-outline:hover { background: rgba(255, 255, 255, .12); }

.branch-hero-social {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.social-review {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .85rem;
    border-radius: 99px;
    font-size: .87rem;
    font-weight: 700;
    background: #fff;
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, .1);
}

.social-review i { color: #f4b400; }
.social-review:hover { transform: translateY(-1px); }

.social-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    font-size: 1rem;
    border: 1px solid currentColor;
    opacity: .82;
}

.social-dot:hover { opacity: 1; }
.branch-hero:not(.has-cover) .social-dot { color: var(--ink-600); }
.branch-hero.has-cover .social-dot { color: #fff; border-color: rgba(255, 255, 255, .4); }

/* ── النموذج ── */

.bform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
@media (max-width: 620px) { .bform { grid-template-columns: 1fr; } }

.bform-row { display: flex; flex-direction: column; gap: .3rem; }
.bform-row.is-wide { grid-column: 1 / -1; }
.bform-row label { font-size: .85rem; font-weight: 600; color: var(--ink-700, #333); }
.bform-row.is-bad .field { border-color: #c0392b; }
.bform-bad { font-size: .78rem; color: #c0392b; }

.bform-check { flex-direction: row; align-items: center; gap: .5rem; display: flex; }
.bform-check input { width: 1.05rem; height: 1.05rem; }

.bform-send { grid-column: 1 / -1; }

/* ★ الفخّ يُخفى بلا `display:none`: بعض الآليّات تتخطّى المخفيّ صراحةً،
   ولا تتخطّى ما أُزيح خارج الشاشة. ★ Hidden without `display:none`: some
   bots explicitly skip what is display-none but not what is moved away. */
.bform-trap {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------------------
   المحفظة: أين كُسبت النقاط / Wallet: where the points came from
   --------------------------------------------------------------- */

.wallet-where { margin-top: .7rem; text-align: start; }

.wallet-where summary {
    cursor: pointer;
    font-size: .86rem;
    opacity: .85;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    list-style: none;
}

.wallet-where summary::-webkit-details-marker { display: none; }
.wallet-where summary::marker { content: ''; }
.wallet-where[open] summary { margin-bottom: .4rem; }

.wallet-where ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }

.wallet-where li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: .88rem;
    padding: .18rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .16);
}

.wallet-where li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-where li b { font-weight: 700; }
.wallet-where li em { font-style: normal; opacity: .62; font-size: .82rem; }
.wallet-where-note { font-size: .78rem; opacity: .6; margin: .45rem 0 0; }

/* ═══════════════════════════════════════════════════════════════
 |  صنفٌ نفدت مادّته / An item whose ingredients ran out
 |
 |  ★ يبقى في مكانه بارتفاعه — القاعدة ١٧: الهندسة لا تتغيّر بحال البيانات.
 |  لو انكمش الصفّ أو اختفى لتغيّر ترتيب المنيو بين زيارةٍ وأخرى، وزبونٌ
 |  يمرّر إلى موضعٍ يحفظه يجد صنفًا آخر.
 |  ★ It keeps its place and its height — rule 17: geometry does not change
 |  with the state of the data. If the row shrank or vanished the menu would
 |  reorder between visits, and a customer scrolling to a remembered spot
 |  would land on a different item.
 ═══════════════════════════════════════════════════════════════ */
.mrow.is-out .mrow-body h3,
.mrow.is-out .mrow-price { opacity: .45; }
.mrow.is-out .mrow-bg    { filter: grayscale(1); opacity: .28; }

.mrow-out {
    display: inline-block; margin-top: .25rem;
    font-size: .72rem; font-weight: 700; color: var(--danger, #b42318);
}
.mrow-few {
    display: inline-block; margin-top: .25rem;
    font-size: .72rem; font-weight: 700; color: var(--amber, #b54708);
}

/* ★ يشغل عرض المُدرّج نفسه، وإلّا زحف السعر يمينًا في الصفوف النافدة وحدها
   فبدت الأعمدة مكسورة — والعمود هو كيف يُقرأ المنيو.
   ★ Occupies the stepper's own width; otherwise the price slides across in
   sold-out rows alone and the columns look broken — and the column is how a
   menu is read. */
.mstep-none {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.4rem; min-height: 2rem;
    color: var(--ink-soft); opacity: .5;
}

/* ═══════════════════════════════════════════════════════════════
   خدمات الفرع — الوجه الثاني للكتالوج (`catalog_style = services`)
   Branch services — the catalogue's second face
   ★ بطاقةٌ تُقرأ سطرًا واحدًا: الاسم ثمّ الوصف ثمّ السعر في عمودٍ تمشي
   عليه العين نزولًا (القاعدة ١٩) — ولا مُدرّجَ كميةٍ ولا زرَّ سلّة.
   ═══════════════════════════════════════════════════════════════ */
.srv-state { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; font-weight: 700; }
.srv-state i { font-size: .5rem; }
.srv-state .is-open { color: var(--ok); }
.srv-state .is-shut { color: var(--ink-soft); }

/* ★ `minmax(min(19rem, 100%), 1fr)` لا `19rem`: العمود لا ينزل تحت عرضه
   فيفيض على هاتفٍ عرضه ٣٢٠ (القاعدة ١٤). */
.srv-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
}

.srv-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.srv-card.is-out { opacity: .6; }

.srv-img, .srv-ico {
    flex: 0 0 auto;            /* ما لا يجوز ضغطه لا يُضغط (القاعدة ١٤) */
    inline-size: 3rem; block-size: 3rem;
    border-radius: var(--r-md);
    object-fit: cover;
}
.srv-ico {
    display: grid; place-items: center;
    background: var(--brand-50); color: var(--brand-600);
    font-size: 1.15rem;
}

.srv-body { flex: 1 1 auto; min-inline-size: 0; }   /* `1fr` لا ينزل تحت محتواه */
.srv-name { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); }
.srv-desc {
    margin: .15rem 0 0; font-size: .85rem; color: var(--ink-soft);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.srv-out {
    display: inline-block; margin-top: .3rem;
    font-size: .75rem; font-weight: 700; color: var(--danger);
}

/* ★ `tabular-nums` وإلّا اختلف عرض ١ عن ٧ فلا تصطفّ الفواصل (القاعدة ١٩) */
.srv-price {
    flex: 0 0 auto;
    font-family: var(--font-mono, inherit);
    font-variant-numeric: tabular-nums;
    font-weight: 700; color: var(--ink);
}
.srv-price small { font-size: .7em; color: var(--ink-soft); font-weight: 600; }

.srv-none {
    padding: 1.5rem; text-align: center; color: var(--ink-soft);
    border: 1px dashed var(--line); border-radius: var(--r-lg);
}
.srv-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.srv-cta .section-title { margin: 0; }
/* معلوماتُ الفرع أسفل صفحة الخدمات: عمودان يلتقيان في عمودٍ على الهاتف */
.srv-info { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.srv-info .section-title { font-size: 1.1rem; margin-bottom: .6rem; }
.srv-fact { display: flex; align-items: center; gap: .5rem; margin: .25rem 0; color: var(--ink-soft); }
.srv-fact a { color: inherit; }