/* ==========================================================================
   Clopr Loyality — 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;

    /* 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-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.teaser-card {
    display: flex; flex-direction: column; gap: .25rem;
    padding: .9rem; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff;
}
.teaser-card img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--r-sm); margin-bottom: .4rem; }
.teaser-cat { font-size: .74rem; font-weight: 700; color: var(--brand-600); }
.teaser-card h3 { font-size: .95rem; margin: 0; }
.teaser-price { font-weight: 800; color: var(--ink); margin-top: auto; padding-top: .4rem; }
.teaser-price small { font-size: .72rem; opacity: .65; }

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

.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;
    padding-bottom: 5.5rem;
    background: #F7F8FA;
    min-height: 70vh;
}

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

.mapp-head {
    position: sticky;
    top: 0;
    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;
}
.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. */
    scroll-margin-top: calc(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 .7rem; padding-inline: .2rem;
}
.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: .75rem;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: .7rem .8rem; margin-bottom: .55rem;
}
.mrow-img {
    width: 56px; height: 56px; border-radius: var(--r-md); object-fit: cover; flex-shrink: 0;
    background: #EDF1F5;
}
.mrow-img.is-blank { display: grid; place-items: center; color: var(--slate-300, #B9C1CC); font-size: 1.3rem; }
.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;
}
.mrow-price { font-weight: 800; color: var(--brand-600, #C43F2B); font-size: .95rem; }
.mrow-price small { font-size: .68rem; font-weight: 600; opacity: .65; }
.mrow-meta { font-size: .74rem; color: var(--ink-soft); margin-inline-start: .5rem; }

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

.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; }
.mopt-form {
    position: absolute; inset-inline-end: 0; top: calc(100% + .4rem); z-index: 15;
    width: min(19rem, 76vw); background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: .9rem; box-shadow: var(--shadow-md); text-align: start;
}
.mopt-title { font-weight: 800; font-size: .95rem; margin: 0 0 .6rem; }
.mopt-form fieldset { border: 0; padding: 0; margin: 0 0 .7rem; }
.mopt-form legend { font-size: .84rem; font-weight: 700; padding: 0; margin-bottom: .25rem; }
.mopt-form legend small { font-weight: 500; color: var(--brand-600, #C43F2B); font-size: .7rem; }
.mopt-form label {
    display: flex; align-items: center; gap: .45rem; padding: .22rem 0;
    font-size: .87rem; font-family: var(--font-base); cursor: pointer;
}
.mopt-form label span { flex: 1; }
.mopt-form label em { font-style: normal; font-family: var(--font-mono); font-size: .78rem; color: var(--brand-600, #C43F2B); }
.mopt-add {
    width: 100%; border: 0; border-radius: var(--r-sm); padding: .6rem;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700, #A6321F));
    color: #fff; font-weight: 700; font-size: .9rem; cursor: pointer; font-family: var(--font-base);
}

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

.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: 'Reem Kufi', 'Tajawal', 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: var(--ink-0);
    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; }