/* ==========================================
   CHDE — Design System (Redesign)
   هوية بصرية مستوحاة من التراث الجزائري:
   خلفية وردية/بيج ناعمة، أخضر عميق، ذهب نحاسي، وزخرفة الزليج.
   ========================================== */

:root {
    /* --- ألوان متوافقة مع لوحة الإدارة (أسماء قديمة، قيم جديدة) --- */
    --color-primary:        #77895F;   /* أخضر زيتوني - لون الشعار الرسمي */
    --color-primary-light:  #90A279;
    --color-secondary:      #C39A4E;   /* ذهب نحاسي - زخرفة تقليدية */
    --color-secondary-light:#D8B978;
    --color-cream:          #FBF6F0;   /* كريمي فاتح دافئ */
    --color-dark:           #3A452F;   /* أخضر زيتوني عميق (تذييل) */
    --color-text:           #2B2622;   /* حبر دافئ */
    --color-text-light:     #6E635B;   /* بنّي مغبّر — 5.4:1 على الكريمي (كان 3.7:1) */
    --color-muted:          #6b6b6b;   /* رمادي محايد للنصوص الثانوية */

    /* --- درجات «الحبر»: لون العلامة بعد تغميقه لتبلغ النصوص تباين WCAG AA (4.5:1).
       مشتقّة بـ color-mix حتى تتبع أي لون يختاره المسؤول من الإعدادات. ---
       الأخضر الأصلي يبقى للزخرفة والأسطح الكبيرة؛ الحبر للنص والأزرار الممتلئة. */
    --color-primary-ink:    color-mix(in srgb, var(--color-primary) 80%, #000);
    --color-primary-deep:   color-mix(in srgb, var(--color-primary) 66%, #000);
    --color-secondary-ink:  color-mix(in srgb, var(--color-secondary) 62%, #000);
    --color-border:         #E7D8CF;   /* حدّ بلون البشرة الوردية */
    --color-success:        #2F6B4F;
    --color-error:          #A6503F;

    /* --- رموز جديدة للواجهة الأمامية --- */
    --c-blush:      #F3E7E1;   /* خلفية الصفحة المسيطرة */
    --c-blush-deep: #EAD8CF;
    --c-paper:      #FFFFFF;

    /* Cairo: خط عربي عصري وواضح، مصمم بأوزان متعددة يناسب العناوين والنصوص معًا
       التي يقوم عليها الزليج، فيبدو حديثًا دون أن يفقد الجذر.
       IBM Plex Sans Arabic: واجهة حديثة بأوزان حقيقية ووضوح عالٍ في الأحجام الصغيرة. */
    --font-heading: 'Cairo', system-ui, sans-serif;
    --font-body:    'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* --- سلّم طباعي مرن: يتدرّج مع عرض الشاشة بدل القفز عند نقاط التوقف --- */
    --fs-xs:   0.8125rem;                            /* 13px */
    --fs-sm:   0.875rem;                             /* 14px */
    --fs-base: 1rem;                                 /* 16px */
    --fs-md:   clamp(1.0625rem, 0.25vw + 1rem, 1.1875rem);
    --fs-lg:   clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
    --fs-xl:   clamp(1.375rem, 1vw + 1.125rem, 1.75rem);
    --fs-2xl:  clamp(1.625rem, 1.8vw + 1.25rem, 2.125rem);
    --fs-3xl:  clamp(2rem, 3.2vw + 1.25rem, 3.25rem);

    /* --- سلّم مسافات ثابت الإيقاع --- */
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 72px;

    --radius:     16px;
    --radius-sm:  10px;
    --radius-pill: 999px;
    --shadow:      0 10px 30px rgba(74, 48, 40, 0.08);
    --shadow-lift: 0 18px 44px rgba(74, 48, 40, 0.14);
    --shadow-sm:   0 2px 8px rgba(74, 48, 40, 0.06);
    --transition:  all .28s cubic-bezier(.2, .7, .2, 1);

    /* --- حلقة التركيز: مرئية على كل خلفيات الموقع --- */
    --focus-ring: 0 0 0 3px var(--c-paper), 0 0 0 5px var(--color-primary-ink);
    --header-h: 76px;

    /* سهم القائمة المنسدلة */
    --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A7C72' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --zellige-star-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 61 24 85 15 76 39 100 50 76 61 85 85 61 76 50 100 39 76 15 85 24 61 0 50 24 39 15 15 39 24Z' fill='%23C39A4E'/%3E%3C/svg%3E");
    --zellige-rule-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 9'%3E%3Cpath d='M4.5 1.7 7.3 4.5 4.5 7.3 1.7 4.5Z' fill='%23C39A4E' opacity='.75'/%3E%3Cpath d='M18 0.2 18.77 2.65 21.04 1.46 19.85 3.73 22.3 4.5 19.85 5.27 21.04 7.54 18.77 6.35 18 8.8 17.23 6.35 14.96 7.54 16.15 5.27 13.7 4.5 16.15 3.73 14.96 1.46 17.23 2.65Z' fill='%23C39A4E'/%3E%3Cpath d='M31.5 1.7 34.3 4.5 31.5 7.3 28.7 4.5Z' fill='%23C39A4E' opacity='.75'/%3E%3C/svg%3E");
    /* نجمة الزليج الثمانية — مربّعان متراكبان بزاوية 45° */
    --zellige-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 61 24 85 15 76 39 100 50 76 61 85 85 61 76 50 100 39 76 15 85 24 61 0 50 24 39 15 15 39 24Z' fill='%23000'/%3E%3C/svg%3E");
    /* شريط زخرفي: نجمة صغيرة بين معيّنين، يتكرّر أفقيًا */
    --zellige-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 9'%3E%3Cpath d='M4.5 1.7 7.3 4.5 4.5 7.3 1.7 4.5Z' fill='%23000' opacity='.75'/%3E%3Cpath d='M18 0.2 18.77 2.65 21.04 1.46 19.85 3.73 22.3 4.5 19.85 5.27 21.04 7.54 18.77 6.35 18 8.8 17.23 6.35 14.96 7.54 16.15 5.27 13.7 4.5 16.15 3.73 14.96 1.46 17.23 2.65Z' fill='%23000'/%3E%3Cpath d='M31.5 1.7 34.3 4.5 31.5 7.3 28.7 4.5Z' fill='%23000' opacity='.75'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-cream);
    /* العربية تحتاج فراغًا رأسيًا أوسع بسبب التشكيل والنقاط */
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading); color: var(--color-primary-ink);
    line-height: 1.35; font-weight: 700; text-wrap: balance;
    /* العربية خط متصل: أي تباعد بين الحروف يفكّك الكلمة */
    letter-spacing: 0;
}

a { text-decoration: none; color: inherit; }
p { text-wrap: pretty; }
img { max-width: 100%; display: block; }

/* --- أرضية الوصولية: تركيز مرئي على كل عنصر تفاعلي --- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* تخطّي إلى المحتوى — أول عنصر في التبويب لمستخدمي لوحة المفاتيح */
.skip-link {
    position: absolute; inset-inline-start: 50%; top: -100px; z-index: 200;
    transform: translateX(-50%);
    background: var(--color-primary-ink); color: #fff;
    padding: 12px 22px; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-weight: 700; transition: top .2s ease;
}
.skip-link:focus { top: 0; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* ==========================================
   عنصر التوقيع: نجمة الزليج الثمانية
   ------------------------------------------
   مستمدّة من الزليج الجزائري التقليدي (النجمة الثمانية / خاتم سليمان)،
   وهي المفردة الزخرفية الأصيلة في هذا المجال — بديلاً عن الشرطة
   والمعيّن العامّين. تُرسم بـ SVG مضمّن حتى ترث لون --color-secondary.
   ========================================== */
/* الأساس: صورة بلون ذهبي مخبوز — تعمل في كل المتصفحات */
.section > .container > h2::before {
    content: "";
    display: block;
    width: 26px; height: 26px;
    margin: 0 auto 10px;
    background: var(--zellige-star-gold) center/contain no-repeat;
    transform: none;
    box-shadow: none;
    opacity: .9;
}

.section > .container > h2::after {
    content: "";
    display: block;
    width: 128px;
    height: 9px;
    margin: 14px auto 0;
    background: var(--zellige-rule-gold) center/auto 9px repeat-x;
    opacity: .55;
}

/* الترقية: قناع يجعل الزخرفة تتبع لون الأدمن.
   داخل @supports حتى لا يظهر مستطيل ذهبي صلب في متصفح لا يدعم mask. */
@supports ((-webkit-mask: url('')) or (mask: url(''))) {
    .section > .container > h2::before {
        background: var(--color-secondary);
        -webkit-mask: var(--zellige-star) center/contain no-repeat;
        mask: var(--zellige-star) center/contain no-repeat;
    }
    .section > .container > h2::after {
        background: var(--color-secondary);
        -webkit-mask: var(--zellige-rule) center/auto 9px repeat-x;
        mask: var(--zellige-rule) center/auto 9px repeat-x;
    }
}

/* ===== Header ===== */
/* سطر واحد دائمًا: الروابط لا تنكسر (nowrap) وما لا يتّسع يُنقل إلى الدرج
   عند 1200px. الحاوية أعرض من المحتوى (1320) لأن سبعة روابط عربية تحتاج ~830px. */
.site-header {
    background: color-mix(in srgb, var(--color-cream) 94%, transparent);
    backdrop-filter: saturate(1.3) blur(10px);
    -webkit-backdrop-filter: saturate(1.3) blur(10px);
    border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0; z-index: 100;
    transition: box-shadow .25s ease;
}
/* يظهر الظل فقط بعد التمرير (يضيفه app.js) */
.site-header.is-stuck { box-shadow: 0 8px 24px rgba(74, 48, 40, .08); }
.site-header > .container { max-width: 1320px; }
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: nowrap; min-height: var(--header-h);
    padding-block: var(--sp-3); gap: var(--sp-4);
}
.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo img { height: 48px; width: auto; display: block; }

.main-nav {
    display: flex; align-items: center; justify-content: center;
    gap: 2px; flex: 1 1 auto; min-width: 0;
}
.main-nav a {
    font-weight: 600; font-size: 15px; line-height: 1.4; white-space: nowrap;
    color: var(--color-text); padding: 9px 13px; border-radius: var(--radius-pill);
    transition: background-color .2s ease, color .2s ease;
}
.main-nav a:hover { color: var(--color-primary-ink); background: var(--c-blush); }
/* الصفحة الحالية: خلفية ممتلئة مؤشر واحد واضح (بدل خط سفلي + خلفية معًا) */
.main-nav a.is-current { color: var(--color-primary-ink); background: var(--c-blush-deep); }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.header-actions .btn { padding: 9px 20px; font-size: var(--fs-sm); }
.header-actions form { display: inline-flex; }

/* مفتاح اللغة: كبسولة موحّدة تُظهر الخيارات الثلاثة (لا تُخفى: الاكتشاف أهم من توفير 70px) */
.lang-switcher {
    display: flex; gap: 2px; font-size: 13px;
    background: var(--c-blush); padding: 3px; border-radius: var(--radius-pill);
}
.lang-switcher a {
    padding: 5px 11px; border-radius: var(--radius-pill); white-space: nowrap;
    color: var(--color-text-light); font-weight: 700;
    transition: background-color .2s ease, color .2s ease;
}
.lang-switcher a:hover { color: var(--color-primary-ink); }
.lang-switcher a.active { background: var(--color-primary-ink); color: #fff; }

/* بين 1201 و1439: زر «إنشاء حساب» يُخفى لتوفير ~110px (موجود في صفحة الدخول والدرج) */
@media (min-width: 1201px) and (max-width: 1439px) {
    .header-actions > a.btn-primary { display: none; }
    .main-nav a { padding-inline: 10px; }
}

/* ==========================================
   الأزرار
   الظلال مشتقّة من --color-primary عبر color-mix،
   فتتبع أي لون يختاره الأدمن من الإعدادات بدل قيمة ثابتة.
   ========================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: 12px 28px; border-radius: var(--radius-pill);
    font-weight: 700; font-size: 15px; line-height: 1.4;
    cursor: pointer; border: 1.5px solid transparent;
    font-family: inherit; text-align: center; white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease,
                box-shadow .2s ease, transform .12s ease;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ضغطة حقيقية: الزر ينخفض تحت الإصبع */
.btn:active { transform: translateY(1px) scale(.995); }

.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled {
    opacity: .5; cursor: not-allowed; transform: none;
    box-shadow: none; pointer-events: none;
}

/* --- أساسي --- */
.btn-primary {
    background: var(--color-primary-ink); color: #fff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 34%, transparent);
}
.btn-primary:hover {
    background: var(--color-primary-deep); transform: translateY(-2px);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--color-primary) 42%, transparent);
}
.btn-primary:active { box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 34%, transparent); }

/* --- محدّد --- */
.btn-outline { border-color: var(--color-primary-ink); color: var(--color-primary-ink); background: transparent; }
.btn-outline:hover { background: var(--color-primary-ink); color: #fff; }

/* --- ذهبي: للإجراء المميّز (طلب تصميم مخصّص) --- */
.btn-secondary {
    background: var(--color-secondary); color: var(--color-text);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-secondary) 34%, transparent);
}
.btn-secondary:hover {
    background: var(--color-secondary-light); transform: translateY(-2px);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--color-secondary) 42%, transparent);
}

/* --- هادئ: إجراء ثانوي داخل البطاقات --- */
.btn-ghost { background: var(--c-blush); color: var(--color-primary-ink); }
.btn-ghost:hover { background: var(--c-blush-deep); }

/* --- خطر: الحذف --- */
.btn-danger { background: var(--color-error); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); transform: translateY(-2px); }

/* --- المقاسات --- */
.btn-sm { padding: 8px 18px; font-size: var(--fs-sm); }
.btn-lg { padding: 15px 36px; font-size: 16px; }
.btn-block { display: flex; width: 100%; }

/* --- حالة الإرسال --- */
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading::after {
    content: ""; position: absolute; width: 17px; height: 17px;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; animation: btn-spin .7s linear infinite;
    color: #fff;
}
.btn-outline.is-loading::after, .btn-ghost.is-loading::after { color: var(--color-primary-ink); }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* --- زر نصّي --- */
.btn-link {
    background: none; border: none; color: var(--color-text-light);
    cursor: pointer; font-weight: 600; font-family: inherit; font-size: inherit;
    padding: 6px 4px; border-radius: var(--radius-sm);
    transition: color .2s ease;
}
.btn-link:hover { color: var(--color-primary-ink); }
.btn-link:disabled { opacity: .5; cursor: not-allowed; }
.btn-link-danger { color: var(--color-error); }

/* ===== Hero ===== */
.hero {
    position: relative; overflow: hidden; text-align: center;
    padding: 128px 0 104px;
    background:
        linear-gradient(180deg, rgba(58, 69, 47, 0.80) 0%, rgba(38, 46, 30, 0.86) 55%, rgba(28, 34, 22, 0.94) 100%),
        url('/assets/images/hero-bg.jpg') center 38% / cover no-repeat;
}
.hero-inner { position: relative; }
.hero-logo-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-paper); border-radius: var(--radius); padding: 10px 14px;
    margin-bottom: var(--sp-5); box-shadow: var(--shadow-lift);
}
.hero-logo-badge img { height: 48px; width: auto; display: block; }
.hero h1 {
    color: #fff; font-size: 50px; max-width: 820px; margin: 0 auto var(--sp-4); line-height: 1.25;
    text-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.hero p { color: rgba(255,255,255,0.88); font-size: 19px; max-width: 600px; margin: 0 auto 34px; }
.hero-actions { display: flex; gap: 16px; justify-content: center; margin-bottom: 42px; flex-wrap: wrap; }
.hero-search {
    display: flex; max-width: 560px; margin: 0 auto; background: var(--c-paper);
    border-radius: 40px; overflow: hidden; box-shadow: var(--shadow-lift); border: 1px solid var(--color-border);
    padding: 6px 6px 6px 8px;
}
.hero-search input { flex: 1; border: none; padding: 14px 20px; font-size: 15px; font-family: inherit; background: transparent; }
.hero-search input:focus { outline: none; }
.hero-search button {
    background: var(--color-secondary); color: var(--color-text); border: none; padding: 0 30px;
    font-weight: 700; cursor: pointer; border-radius: 40px; font-family: inherit; transition: var(--transition);
}
.hero-search button:hover { background: var(--color-secondary-light); }
.hero-actions .btn-outline { border-color: rgba(255,255,255,0.75); color: #fff; }
.hero-actions .btn-outline:hover { background: #fff; color: var(--color-primary-ink); border-color: #fff; }

/* ===== Sections ===== */
.section { padding: 74px 0; }
.section:nth-of-type(even) { background: var(--c-blush); }
.section:nth-of-type(odd)  { background: var(--color-cream); }
.section h2 { font-size: 33px; margin-bottom: 34px; text-align: center; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; }
.section-head h2 { margin: 0; text-align: start; font-size: 30px; position: relative; padding-bottom: 12px; }
.section-head h2::after {
    content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
    width: 52px; height: 3px; border-radius: 2px; background: var(--color-secondary);
}
.section-head a {
    color: var(--color-primary-ink); font-weight: 700; white-space: nowrap;
    display: inline-flex; align-items: center; gap: var(--sp-2); padding-block: var(--sp-2);
}
.section-head a:hover { color: var(--color-secondary-ink); }

/* أسهم منطقية: تنقلب تلقائيًا مع اتجاه اللغة (→ للأمام في LTR، ← في RTL) */
.arrow-fwd::after  { content: "\2192"; display: inline-block; transition: transform .2s ease; }
.arrow-back::before { content: "\2190"; display: inline-block; }
[dir="rtl"] .arrow-fwd::after  { content: "\2190"; }
[dir="rtl"] .arrow-back::before { content: "\2192"; }
a:hover > .arrow-fwd::after { transform: translateX(4px); }
[dir="rtl"] a:hover > .arrow-fwd::after { transform: translateX(-4px); }
.section-subtitle { text-align: center; color: var(--color-text-light); max-width: 580px; margin: -20px auto 40px; font-size: 15.5px; }

/* ===== Grid & Cards ===== */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); gap: 18px; }

.design-card, .project-card {
    display: flex; flex-direction: column;
    background: var(--c-paper); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); transition: var(--transition); border: 1px solid rgba(231, 216, 207, 0.7);
    text-align: center; text-decoration: none; color: inherit; cursor: pointer;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.design-card:hover, .project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.design-card img, .project-card img {
    width: 100%; height: 210px; object-fit: cover; object-position: center; display: block; margin: 0 auto; transition: transform 0.35s ease;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.design-card:hover img { transform: scale(1.04); }
.design-card-media {
    position: relative; overflow: hidden;
    pointer-events: none;
}
.design-card :is(h2, h3, p, span), .project-card :is(h2, h3, p, span) {
    pointer-events: none;
}
.design-card-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 52px; height: 52px; border-radius: 50%; background: rgba(20, 20, 15, 0.55);
    display: flex; align-items: center; justify-content: center; color: #fff;
    backdrop-filter: blur(2px); transition: var(--transition);
}
.design-card-play svg { width: 22px; height: 22px; margin-inline-start: 3px; }
.design-card:hover .design-card-play { background: var(--color-secondary); transform: translate(-50%, -50%) scale(1.08); }
.design-card :is(h2, h3), .project-card :is(h2, h3) { font-size: 18px; padding: 16px 18px 4px; color: var(--color-primary-ink); text-align: center; transition: color 0.2s ease; }
.design-card:hover :is(h2, h3), .project-card:hover :is(h2, h3) { color: var(--color-secondary-ink); }
.design-style { display: block; padding: 0 18px 18px; color: var(--color-text-light); font-size: 13px; text-align: center; }

.category-card, .occasion-card {
    background: var(--c-paper); border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 26px 22px; text-align: center; font-weight: 700; color: var(--color-primary-ink); transition: var(--transition);
}
.grid-6 .category-card { padding: 20px 12px; font-size: 14px; }
.category-card:hover, .occasion-card:hover {
    background: var(--color-primary-ink); color: #fff; border-color: var(--color-primary-ink); transform: translateY(-4px);
}

.style-card {
    background: var(--c-paper); border: 1px solid var(--color-border); border-top: 3px solid var(--color-secondary);
    border-radius: var(--radius); padding: 26px 22px; text-align: center; font-weight: 700;
    color: var(--color-primary-ink); transition: var(--transition);
}
.style-card:hover { background: var(--color-secondary); color: var(--color-text); border-color: var(--color-secondary); transform: translateY(-4px); }

/* صندوق وسائط موحّد 80×80: صورة أو رمز، فتتحاذى أسماء التصنيفات على خط واحد */
.category-icon {
    display: flex; align-items: center; justify-content: center;
    width: 80px; height: 80px; margin: 0 auto 10px; font-size: 36px; line-height: 1;
    background: var(--c-blush); border-radius: var(--radius-sm);
}
.category-cover { display: block; width: 80px; height: 80px; margin: 0 auto 10px; border-radius: var(--radius-sm); overflow: hidden; }
.category-cover img { width: 100%; height: 100%; object-fit: cover; }
.category-name { display: block; }
.category-card.is-active { border-color: var(--color-primary-ink); background: var(--color-primary-ink); }
.category-card.is-active .category-name { color: #fff; }

/* ===== Consultation CTA banner ===== */
.consultation-banner { padding: var(--sp-7) 0; }
.consultation-inner {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    background: linear-gradient(135deg, var(--color-primary-ink) 0%, var(--color-dark) 100%);
    border-radius: var(--radius); padding: 40px 44px; color: #fff;
}
.consultation-icon {
    flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.14); display: flex; align-items: center; justify-content: center;
}
.consultation-icon svg { width: 32px; height: 32px; color: #fff; }
.consultation-text { flex: 1; min-width: 240px; }
.consultation-text h2 { color: #fff; margin: 0 0 6px; font-size: 24px; }
.consultation-text p { color: rgba(255, 255, 255, 0.85); margin: 0; }
.consultation-inner .btn { flex-shrink: 0; }

/* ===== 3D Hall Designer Interactive Banner ===== */
.hall-3d-feature-section {
    padding: var(--sp-6) 0;
}
.hall-3d-banner-card {
    background: linear-gradient(135deg, #2D3723 0%, #1F2718 60%, #171E12 100%);
    border: 1px solid rgba(195, 154, 78, 0.4);
    border-radius: var(--radius);
    padding: 44px 48px;
    color: #fff;
    display: grid;
    grid-template-columns: 1.25fr 0.85fr;
    gap: 36px;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(45, 55, 35, 0.22);
}
.hall-3d-banner-card::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(195, 154, 78, 0.2) 0%, transparent 70%);
    pointer-events: none;
}
.hall-3d-banner-card::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: 20%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(119, 137, 95, 0.22) 0%, transparent 70%);
    pointer-events: none;
}
.hall-3d-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.hall-3d-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(195, 154, 78, 0.16);
    border: 1px solid rgba(195, 154, 78, 0.45);
    color: #ffd98f;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    width: fit-content;
}
.hall-3d-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 8px #00e676;
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}
.hall-3d-title {
    color: #fff;
    font-size: clamp(1.4rem, 2vw + 1rem, 2rem);
    line-height: 1.35;
    margin: 0;
}
.hall-3d-desc {
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--fs-base);
    line-height: 1.8;
    margin: 0;
}
.hall-3d-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.hall-3d-tag {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    color: #f1f4ee;
}
.hall-3d-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.hall-3d-cta-btn {
    background: linear-gradient(135deg, var(--color-secondary) 0%, #aa8237 100%) !important;
    border: 1px solid #ffd88a !important;
    color: #1a1711 !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    padding: 13px 28px !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 20px rgba(195, 154, 78, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.28s ease !important;
    text-decoration: none !important;
}
.hall-3d-cta-btn:hover {
    background: linear-gradient(135deg, #d8ac57 0%, #b88d3e 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(195, 154, 78, 0.45) !important;
    color: #000 !important;
}
.hall-3d-cta-btn .arrow-fwd {
    transition: transform 0.25s ease;
}
.hall-3d-cta-btn:hover .arrow-fwd {
    transform: translateX(-4px);
}
[dir="ltr"] .hall-3d-cta-btn:hover .arrow-fwd {
    transform: translateX(4px);
}
.hall-3d-note {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}
.hall-3d-visual {
    position: relative;
    z-index: 2;
    display: block;
    text-decoration: none;
    height: 100%;
}
.hall-3d-visual-card {
    background: radial-gradient(circle at 50% 40%, rgba(119, 137, 95, 0.25) 0%, rgba(18, 22, 16, 0.85) 100%), #141a12;
    border: 1px solid rgba(195, 154, 78, 0.3);
    border-radius: 20px;
    padding: 30px 24px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.4);
}
.hall-3d-visual:hover .hall-3d-visual-card {
    border-color: var(--color-secondary);
    transform: translateY(-4px) scale(1.02);
    box-shadow: inset 0 0 30px rgba(195, 154, 78, 0.15), 0 16px 40px rgba(0, 0, 0, 0.55);
}
.hall-3d-preview-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(18, 22, 15, 0.4);
    backdrop-filter: blur(2px);
    transition: all 0.3s;
}
.hall-3d-visual:hover .hall-3d-preview-overlay {
    background: rgba(18, 22, 15, 0.2);
}
.hall-3d-play-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-secondary) 0%, #a88137 100%);
    color: #121510;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(195, 154, 78, 0.5);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hall-3d-visual:hover .hall-3d-play-btn {
    transform: scale(1.12);
}
.hall-3d-preview-label {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.hall-3d-preview-graphic {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 600px;
}
.cube-3d-wireframe {
    width: 74px;
    height: 74px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate-cube 12s linear infinite;
}
@keyframes rotate-cube {
    0% { transform: rotateX(20deg) rotateY(0deg); }
    100% { transform: rotateX(20deg) rotateY(360deg); }
}
.cube-face {
    position: absolute;
    width: 74px;
    height: 74px;
    border: 1.5px solid rgba(195, 154, 78, 0.6);
    background: rgba(119, 137, 95, 0.08);
    box-shadow: inset 0 0 12px rgba(195, 154, 78, 0.2);
}
.cube-face.front  { transform: translateZ(37px); }
.cube-face.back   { transform: rotateY(180deg) translateZ(37px); }
.cube-face.right  { transform: rotateY(90deg) translateZ(37px); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(37px); }
.cube-face.top    { transform: rotateX(90deg) translateZ(37px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(37px); }

.hall-badge-3d {
    position: absolute;
    bottom: 12px;
    left: 14px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--color-secondary);
    background: rgba(0, 0, 0, 0.5);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(195, 154, 78, 0.25);
}

/* Responsive adjustments for 3D Banner */
@media (max-width: 991px) {
    .hall-3d-banner-card {
        grid-template-columns: 1fr;
        padding: 32px 24px;
        gap: 24px;
    }
    .hall-3d-visual-card {
        min-height: 180px;
    }
}
@media (max-width: 576px) {
    .hall-3d-banner-card {
        padding: 24px 18px;
        border-radius: 14px;
    }
    .hall-3d-title {
        font-size: 1.3rem;
    }
    .hall-3d-desc {
        font-size: 0.92rem;
    }
    .hall-3d-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .hall-3d-cta-btn {
        width: 100%;
        justify-content: center;
    }
    .hall-3d-note {
        text-align: center;
    }
}

/* ===== Works / gallery — circular thumbnails ===== */
.works-grid { row-gap: 32px; }
.project-circle { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--color-primary-ink); transition: var(--transition); }
.project-circle-image {
    width: 130px; height: 130px; border-radius: 50%; overflow: hidden; display: block;
    border: 3px solid var(--c-paper); box-shadow: var(--shadow); transition: var(--transition);
}
.project-circle-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-circle:hover .project-circle-image { border-color: var(--color-secondary); box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.project-circle-title { font-weight: 700; font-size: 14px; }

.empty-state { color: var(--color-text-light); text-align: center; grid-column: 1/-1; padding: 44px 0; }

/* ===== Gallery project detail page ===== */
.gallery-show .back-link { display: inline-block; margin-bottom: 16px; color: var(--color-text-light); font-weight: 600; }
.gallery-show .back-link:hover { color: var(--color-primary-ink); }
.gallery-show h1 { margin-bottom: 10px; }
.gallery-show-desc { color: var(--color-text-light); max-width: 720px; margin-bottom: 16px; }
.gallery-show-meta { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 28px; }
.gallery-show-meta li {
    background: var(--c-blush); border: 1px solid var(--color-border); border-radius: 20px;
    padding: 6px 16px; font-size: 13px; font-weight: 700; color: var(--color-primary-ink);
}
.gallery-section-title { font-size: 22px; color: var(--color-primary-ink); margin: 32px 0 18px; }

/* Before/After comparison slider */
.ba-sliders { display: flex; flex-direction: column; gap: 24px; }
.ba-slider {
    position: relative; width: 100%; max-width: 780px; aspect-ratio: 4 / 3; border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow); --x: 50%; touch-action: pan-y;
}
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.ba-after-img { z-index: 1; }
.ba-before-wrap { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.ba-divider {
    position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; background: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 0 14px rgba(0,0,0,.25); transform: translateX(-50%); z-index: 3; pointer-events: none;
}
.ba-divider-grip {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-lift);
    display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--color-primary-ink);
}
.ba-tag {
    position: absolute; top: 12px; z-index: 4; background: rgba(20, 20, 15, 0.6); color: #fff;
    font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 20px; pointer-events: none;
}
.ba-tag-before { left: 12px; }
.ba-tag-after { right: 12px; }
.ba-range {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0;
    cursor: ew-resize; z-index: 5; -webkit-appearance: none; appearance: none;
}

/* ===== Catalog design detail page ===== */
/* صفحة التفاصيل: الوسائط بجانب المعلومات فيظهر الإجراء الرئيسي دون تمرير طويل */
.catalog-show-layout {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--sp-7); align-items: start; margin-top: var(--sp-4);
}
.catalog-show-info h1 { margin-bottom: var(--sp-3); }
.catalog-desc { max-width: 62ch; }
.catalog-desc p, .catalog-desc ul { margin: 0 0 var(--sp-3); }
/* فقرات مضبوطة الحواف بدل أسطر متفاوتة الطول */
.catalog-desc p { line-height: 1.95; text-align: justify; text-justify: inter-word; overflow-wrap: anywhere; hyphens: auto; }
.catalog-desc ul { padding-inline-start: 1.3em; line-height: 1.9; }
.catalog-desc li { margin-bottom: var(--sp-1); }
.request-cta-form { max-width: 400px; margin-top: var(--sp-3); }
.request-cta-form .btn { margin-top: var(--sp-4); }
.catalog-show-info .request-cta { margin-block: var(--sp-5); }
/* مواصفات التصميم: جدول هادئ تسميات/قيم بدل فقرة طويلة */
.spec-list {
    margin: var(--sp-5) 0 var(--sp-2); padding: 0; overflow: hidden;
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
}
.spec-row { display: grid; grid-template-columns: minmax(104px, 34%) 1fr; gap: var(--sp-3); padding: 12px var(--sp-4); }
.spec-row + .spec-row { border-top: 1px solid var(--color-border); }
.spec-row dt { color: var(--color-text-light); font-weight: 600; font-size: var(--fs-sm); }
.spec-row dd { margin: 0; color: var(--color-text); font-weight: 700; }
.spec-note { margin: var(--sp-2) 0 var(--sp-4); color: var(--color-text-light); font-size: 13px; }
.catalog-show-media .catalog-show-videos { margin-top: var(--sp-4); }
@media (max-width: 900px) {
    .catalog-show-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}

.catalog-show-videos { display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 24px 0; }
.catalog-show-video { width: 100%; max-width: 780px; border-radius: var(--radius); box-shadow: var(--shadow); background: #000; display: block; }

/* ===== Why Choose CHDE (Features) ===== */
.features-section {
    background:
        radial-gradient(120% 140% at 15% 0%, rgba(119, 137, 95, 0.55) 0%, transparent 55%),
        var(--color-dark) !important;
}
.features-section h2 { color: #fff; }
.features-section .section-subtitle { color: rgba(255, 255, 255, 0.78); }
.features-section > .container > h2::before { background: var(--color-secondary-light); box-shadow: 0 0 0 4px rgba(216, 185, 120, 0.2); }
.features-section > .container > h2::after {
    background:
        linear-gradient(90deg, transparent 0 24px, var(--color-secondary-light) 24px 26px, transparent 26px 48px, var(--color-secondary-light) 48px 50px, transparent 50px) center/100% 2px no-repeat;
}
.feature-card { text-align: center; padding: 14px; }
.feature-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px;
    border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--color-secondary-light);
    margin-bottom: 20px; border: 1px solid rgba(216, 185, 120, 0.35);
}
.feature-icon svg { width: 34px; height: 34px; }
.feature-card h3 { font-size: 19px; margin-bottom: 10px; color: #fff; }
.feature-card p { color: rgba(255, 255, 255, 0.72); font-size: 14.5px; line-height: 1.75; }

/* ===== Testimonials ===== */
.testimonial-card {
    background: var(--c-paper); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 30px; display: flex; flex-direction: column; gap: 15px; border: 1px solid rgba(231, 216, 207, 0.7);
    position: relative;
}
.testimonial-card::before {
    content: "\201D"; position: absolute; top: 10px; inset-inline-end: 22px;
    font-family: var(--font-heading); font-size: 64px; line-height: 1; color: rgba(195, 154, 78, 0.22);
}
.testimonial-rating { color: var(--color-border); font-size: 16px; letter-spacing: 2px; }
.testimonial-rating .star.filled { color: color-mix(in srgb, var(--color-secondary) 80%, #000); }  /* 3:1+ للرسوم ذات المعنى */
.testimonial-comment { color: var(--color-text); line-height: 1.95; flex: 1; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.author-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--color-primary-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.author-name { font-weight: 700; color: var(--color-primary-ink); }

/* ===== Contact Teaser ===== */
.contact-teaser {
    background: linear-gradient(135deg, var(--color-dark) 0%, #232B1C 100%) !important;
    color: #fff;
}
.contact-teaser-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.contact-teaser-text h2 { color: #fff; text-align: start; margin-bottom: 10px; }
.contact-teaser-text p { color: rgba(255, 255, 255, 0.82); max-width: 520px; }
.contact-teaser-info { list-style: none; display: flex; gap: 24px; margin-top: 16px; flex-wrap: wrap; }
.contact-teaser-info li { color: #fff; font-weight: 700; }
.contact-teaser-info li::before { content: "\2713"; color: var(--color-secondary-light); margin-inline-end: 6px; }
.contact-teaser .btn-primary { background: var(--color-secondary); color: var(--color-text); flex-shrink: 0; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }
.contact-teaser .btn-primary:hover { background: var(--color-secondary-light); }

/* ===== جداول ومكوّنات مشتركة (واجهة + عميل + إدارة) ===== */
.admin-table { width: 100%; border-collapse: collapse; background: var(--c-paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.admin-table th, .admin-table td { padding: 13px 16px; text-align: start; border-bottom: 1px solid var(--color-border); }
.admin-table th { background: #F3EBDF; font-size: 13px; font-weight: 600; color: var(--color-primary-ink); }
.admin-table tr:last-child td { border-bottom: none; }

.badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.badge-received { background: #E4EEE6; color: #2c5c42; }
.badge-in_progress { background: #FBF0D6; color: #9a7412; }
.badge-completed { background: #E6F4EC; color: var(--color-success); }
.badge-cancelled { background: #F7E4E0; color: var(--color-error); }
.badge-review, .badge-contact, .badge-preparing, .badge-waiting_approval { background: #FBF0D6; color: #9a7412; }
.badge-delivered { background: #E4EEE6; color: #2c5c42; }

.existing-images { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.existing-image { position: relative; width: 100px; display: block; }
.existing-image img, .existing-image video { width: 100px; height: 80px; object-fit: cover; border-radius: 8px; display: block; background: #000; }
.image-type-tag {
    position: absolute; bottom: 4px; left: 4px; background: rgba(20, 20, 15, 0.7); color: #fff;
    font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; pointer-events: none;
}

/* ===== Forms / Auth ===== */
.auth-page { display: flex; justify-content: center; padding: 70px 20px; }
.auth-card { background: var(--c-paper); padding: 42px; border-radius: var(--radius); box-shadow: var(--shadow-lift); max-width: 444px; width: 100%; border: 1px solid var(--color-border); }
.auth-logo { height: 56px; width: auto; margin: 0 auto 18px; }
.auth-card h1 { text-align: center; margin-bottom: 26px; font-size: 28px; }
/* ==========================================
   حقول الكتابة
   قاعدة موحّدة تشمل نماذج الموقع ولوحة الإدارة معًا،
   بدل حصر التنسيق داخل .form كما كان.
   ========================================== */
.form { display: flex; flex-direction: column; gap: 6px; }
.form { gap: 7px; }
.form label {
    font-weight: 600; font-size: var(--fs-sm);
    color: var(--color-text); margin-top: 16px; margin-bottom: 1px;
}

.form input, .form select, .form textarea,
.admin-filters input, .admin-filters select,
.field-control {
    width: 100%;
    padding: 15px 17px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font-family: inherit; font-size: var(--fs-base); font-weight: 400;
    line-height: 1.6; color: var(--color-text);
    background: #fff;
    box-shadow: 0 1px 2px rgba(74, 48, 40, .04);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* تمييز الحقل عند المرور قبل النقر */
.form input:hover:not(:disabled), .form select:hover:not(:disabled),
.form textarea:hover:not(:disabled), .field-control:hover:not(:disabled) {
    border-color: var(--color-text-light);
}

/* حقول الاختيار وأزرار الراديو تحتفظ بحجمها الطبيعي */
.form input[type="checkbox"], .form input[type="radio"] { width: auto; padding: 0; }

/* --- نص الإرشاد: تباين كافٍ بدل الرمادي الافتراضي --- */
.form ::placeholder, .field-control::placeholder {
    color: var(--color-text-light); opacity: .75;
}

/* --- التركيز: مشتقّ من اللون الثانوي فيتبع إعدادات الأدمن --- */
.form input:focus, .form select:focus, .form textarea:focus,
.admin-filters input:focus, .admin-filters select:focus,
.field-control:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(119, 137, 95, .13);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* --- معطّل / للقراءة فقط --- */
.form input:disabled, .form select:disabled, .form textarea:disabled, .field-control:disabled {
    background: var(--c-blush); color: var(--color-text-light);
    cursor: not-allowed; border-style: dashed;
}
.form input[readonly], .form textarea[readonly] { background: var(--c-blush); }

/* --- إدخال غير صالح: بعد محاولة الكتابة فقط، لا عند فتح الصفحة --- */
.form input:user-invalid, .form textarea:user-invalid, .form select:user-invalid {
    border-color: var(--color-error);
}
.form input:user-invalid:focus, .form textarea:user-invalid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 20%, transparent);
}

/* --- منطقة النص --- */
.form textarea { resize: vertical; min-height: 110px; line-height: 1.8; }

/* --- القائمة المنسدلة: سهم مخصّص يحترم اتجاه الصفحة --- */
.form select, .admin-filters select {
    appearance: none; -webkit-appearance: none;
    padding-inline-end: 42px;
    background-image: var(--select-caret);
    background-repeat: no-repeat;
    background-position: left 15px center;
    background-size: 12px auto;
    cursor: pointer;
}
/* الافتراضي للعربية (RTL): السهم يسارًا. تُقلب في الاتجاه اللاتيني. */
[dir="ltr"] .form select, [dir="ltr"] .admin-filters select { background-position: right 15px center; }

/* --- حقل رفع الملفات --- */
.form input[type="file"] {
    padding: 10px 12px;
    background: var(--c-blush);
    border: 1.5px dashed var(--color-border);
    cursor: pointer; font-size: var(--fs-sm);
}
.form input[type="file"]:hover { border-color: var(--color-secondary); background: var(--c-blush-deep); }
.form input[type="file"]::-webkit-file-upload-button,
.form input[type="file"]::file-selector-button {
    font-family: inherit; font-weight: 700; font-size: var(--fs-sm);
    padding: 9px 18px; margin-inline-end: 12px;
    border: none; border-radius: var(--radius-pill);
    background: var(--color-primary); color: #fff; cursor: pointer;
    transition: background-color .2s ease;
}
.form input[type="file"]::-webkit-file-upload-button:hover,
.form input[type="file"]::file-selector-button:hover { background: var(--color-primary-light); }

/* --- خانات الاختيار وأزرار الراديو: هدف لمس أكبر ولون العلامة من الهوية --- */
.form input[type="checkbox"], .form input[type="radio"] {
    accent-color: var(--color-primary);
    width: 18px; height: 18px; cursor: pointer;
}

/* --- نص مساعد أسفل الحقل --- */
.field-hint { color: var(--color-text-light); font-size: var(--fs-xs); line-height: 1.7; margin-top: 2px; }
.field-error { color: var(--color-error); font-size: var(--fs-xs); font-weight: 700; margin-top: 2px; }
.password-field { position: relative; }
.password-field input { padding-inline-end: 44px; width: 100%; }
.password-toggle {
    position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-light); border-radius: 6px; transition: var(--transition);
}
.password-toggle:hover { color: var(--color-primary-ink); }
.password-toggle svg { width: 19px; height: 19px; display: block; }
.form-row-between { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin: 10px 0; }
.checkbox { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 14px; color: var(--color-text-light); }
.auth-switch a { color: var(--color-secondary-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.account-type-toggle { display: flex; gap: 10px; margin-top: 8px; }
.account-type-option {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
    cursor: pointer; font-weight: 700; margin-top: 0; transition: var(--transition);
}
.account-type-option:has(input:checked) { border-color: var(--color-secondary); background: rgba(195, 154, 78, 0.08); color: var(--color-secondary-ink); }
.account-type-option input { width: auto; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.form-grid-2 label { margin-top: 10px; }
@media (max-width: 640px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* ===== Alerts ===== */
.alert {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 14px 18px; border-radius: 12px; margin: 16px auto;
    max-width: 1180px; font-weight: 600;
    animation: alert-in .32s cubic-bezier(.2,.7,.2,1);
}
@keyframes alert-in { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .alert { animation: none; } }
.alert-text { flex: 1; }
.alert-icon {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: currentColor; color: #fff; font-size: 14px; font-weight: 700;
}
.alert-success .alert-icon { color: #E6F4EC; }
.alert-error   .alert-icon { color: #F7E4E0; }
.alert-close {
    flex-shrink: 0; background: none; border: none; cursor: pointer;
    font-size: 22px; line-height: 1; color: inherit; opacity: .6;
    padding: 4px 8px; border-radius: 6px; font-family: inherit;
}
.alert-close:hover { opacity: 1; }

/* مرئي لقارئ الشاشة فقط */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.alert-success { background: #E6F4EC; color: var(--color-success); border: 1px solid #B8DCC5; }
.alert-error { background: #F7E4E0; color: var(--color-error); border: 1px solid #E7C3BA; }

/* ===== Footer ===== */
.site-footer { background: var(--color-dark); color: #C9D4CD; padding: 56px 0 26px; margin-top: 0; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; }
.footer-brand .footer-brand-name { margin: 0 0 10px; color: #fff; font-family: var(--font-heading); font-size: 25px; font-weight: 700; letter-spacing: 2px; }
.footer-brand p { max-width: 320px; color: rgba(255, 255, 255, 0.66); }
.footer-links { display: flex; gap: 22px; align-items: flex-start; }
.footer-links a { color: #C9D4CD; transition: var(--transition); }
.footer-links a:hover { color: var(--color-secondary-light); }
.footer-copy { width: 100%; text-align: center; margin-top: 34px; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 22px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }

.error-page { text-align: center; padding: 110px 0; }
.error-page h1 { font-size: 84px; color: var(--color-secondary-ink); }

/* ===== Design Request Modal ===== */
.design-request-cta-wrap {
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
    align-items: center; justify-content: center;
    text-align: center; margin-top: 40px;
}
@media (max-width: 520px) {
    .design-request-cta-wrap { flex-direction: column; }
    .design-request-cta-wrap .btn { width: 100%; }
}

.modal-overlay {
    position: fixed; inset: 0; background: rgba(24, 20, 16, 0.58);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
    padding: 20px; opacity: 0; pointer-events: none; transition: var(--transition);
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-card {
    background: var(--c-paper); border-radius: var(--radius); max-width: 640px; width: 100%;
    max-height: 90vh; overflow-y: auto; padding: 36px; position: relative;
    box-shadow: var(--shadow-lift); transform: translateY(24px); transition: var(--transition);
}
.modal-overlay.active .modal-card { transform: translateY(0); }
.modal-close {
    position: absolute; top: 16px; inset-inline-end: 16px; background: none; border: none;
    font-size: 26px; line-height: 1; cursor: pointer; color: var(--color-text-light);
    width: 34px; height: 34px; border-radius: 50%; transition: var(--transition);
}
.modal-close:hover { color: var(--color-primary-ink); background: var(--c-blush); }
.modal-card h2 { font-size: 23px; margin-bottom: 4px; text-align: center; padding-inline-end: 30px; }
.modal-step-label { text-align: center; color: var(--color-text-light); font-size: 13px; margin-bottom: 20px; }
.modal-step { display: none; }
.modal-step.active { display: block; }

.modal-step label { display: block; font-weight: 700; font-size: 14px; margin: 14px 0 4px; }
.modal-step input[type="text"], .modal-step input[type="tel"], .modal-step select, .modal-step textarea {
    display: block; width: 100%; padding: 13px 15px; border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm); font-family: inherit; font-size: 15px; background: #fff; transition: var(--transition);
    box-sizing: border-box;
}
.modal-step input[type="text"]:focus, .modal-step input[type="tel"]:focus,
.modal-step select:focus, .modal-step textarea:focus {
    outline: none; border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(195, 154, 78, 0.15);
}
.modal-step textarea { resize: vertical; min-height: 80px; }

.color-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.color-swatch {
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer; position: relative;
    border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--color-border); transition: var(--transition);
}
.color-swatch.selected { box-shadow: 0 0 0 2px var(--color-secondary); transform: scale(1.08); }
.color-swatch.selected::after {
    content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.field-hint { font-size: 12px; color: var(--color-text-light); margin: 3px 0 2px; }
.field-error { color: var(--color-error); font-size: 12.5px; margin-top: 3px; display: block; }

.radio-card-group { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.radio-card {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm); cursor: pointer; font-weight: 700; transition: var(--transition); margin-top: 0;
}
.radio-card:has(input:checked) { border-color: var(--color-secondary); background: rgba(195, 154, 78, 0.08); }
.radio-card input { width: auto; margin: 0; }

.modal-actions { display: flex; gap: 12px; margin-top: 26px; }
.modal-actions .btn { flex: 1; }

.modal-success { text-align: center; padding: 16px 0 6px; }
.modal-success-icon {
    width: 66px; height: 66px; border-radius: 50%; background: #E6F4EC; color: var(--color-success);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.modal-success-icon svg { width: 32px; height: 32px; }
.modal-success h2 { padding-inline-end: 0; }
.modal-success p { color: var(--color-text-light); margin-top: 8px; }

@media (max-width: 600px) {
    .modal-card { padding: 26px 20px; }
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-6 { grid-template-columns: repeat(3, 1fr); }
    .main-nav { display: none; }
    .hero h1 { font-size: 40px; }
}

@media (max-width: 600px) {
    .grid-4, .grid-3 { grid-template-columns: 1fr; }
    .grid-6 { grid-template-columns: repeat(2, 1fr); }
    .hero { padding: 70px 0 60px; }
    .hero h1 { font-size: 31px; }
    .hero-logo-badge img { height: 30px; }
    .hero p { font-size: 16px; }
    .header-inner { flex-wrap: wrap; gap: 12px; }
    .section { padding: 54px 0; }
    .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .contact-teaser-inner { flex-direction: column; align-items: flex-start; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .design-card:hover, .project-card:hover, .btn-primary:hover,
    .category-card:hover, .occasion-card:hover, .style-card:hover,
    .project-circle:hover .project-circle-image { transform: none; }
}

/* ==========================================
   لوحة تحكم الحرفي (Craftsman area)
   ========================================== */

.craft-page { padding-top: 28px; }

/* --- ترويسة الهوية والتنقّل --- */
.craft-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 18px; padding-bottom: 20px; margin-bottom: 26px;
    border-bottom: 1px solid var(--color-border);
}
.craft-identity { display: flex; align-items: center; gap: 14px; }
.craft-avatar {
    width: 62px; height: 62px; border-radius: 16px; object-fit: cover;
    border: 2px solid var(--color-border); background: var(--c-paper); flex-shrink: 0;
}
.craft-avatar-empty {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-size: 26px; font-weight: 700;
    color: var(--color-primary-ink); background: var(--c-blush-deep);
}
.craft-title { font-size: 26px; margin: 0; color: var(--color-primary-ink); }
.craft-sub { color: var(--color-text-light); font-size: 14px; margin-top: 2px; }

.craft-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.craft-nav a {
    padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 15px;
    color: var(--color-text-light); transition: var(--transition);
}
.craft-nav a:hover { color: var(--color-primary-ink); background: var(--c-blush); }
.craft-nav a.is-active { color: var(--color-primary-ink); background: var(--c-blush-deep); }
.craft-nav .craft-cta { color: #fff; }
.craft-nav .craft-cta:hover { color: #fff; }

/* --- نفس شريط التنقّل، بلا رأس/شعار، لصفحات لوحة تحكم العميل --- */
.dash-nav { padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }

/* --- بطاقات الإحصاء --- */
.craft-stats {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 14px; margin-bottom: 30px;
}
.craft-stat {
    background: var(--c-paper); border-radius: var(--radius); padding: 18px 20px;
    box-shadow: var(--shadow); border: 2px solid transparent;
    display: flex; flex-direction: column; gap: 2px; transition: var(--transition);
}
a.craft-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.craft-stat.is-active { border-color: var(--color-primary); }
.craft-stat .num {
    font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--color-primary-ink);
    font-family: var(--font-body);
}
.craft-stat .label { font-size: 13px; color: var(--color-text-light); font-weight: 600; }
.craft-stat.stat-ok    .num { color: var(--color-success); }
.craft-stat.stat-wait  .num { color: #9a7412; }
.craft-stat.stat-no    .num { color: var(--color-error); }
.craft-stat.stat-views .num { color: var(--color-secondary-ink); }

/* --- ترويسة القائمة --- */
.craft-listhead {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.craft-listhead h2 { font-size: 22px; margin: 0; color: var(--color-primary-ink); }
.craft-clear { color: var(--color-error); font-weight: 700; font-size: 14px; }

/* --- جدول الأعمال --- */
.craft-table td { vertical-align: middle; }
.craft-work { display: flex; align-items: center; gap: 11px; }
.craft-work img {
    width: 58px; height: 46px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--color-border); flex-shrink: 0;
}
.craft-work span { font-weight: 700; }
.craft-reason { margin-top: 6px; color: var(--color-error); font-size: 13px; line-height: 1.5; }
.craft-date { color: var(--color-text-light); font-size: 13px; white-space: nowrap; }
.craft-note {
    margin-top: 18px; color: var(--color-text-light); font-size: 13px; text-align: center;
}

/* --- الحالة الفارغة --- */
.craft-empty {
    background: var(--c-paper); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 54px 24px; text-align: center;
}
.craft-empty p { margin-bottom: 10px; font-weight: 700; }
.craft-empty .craft-hint { color: var(--color-text-light); font-weight: 400; margin-bottom: 20px; }

/* --- صفحة الملف الشخصي --- */
.craft-profile-grid {
    display: grid; grid-template-columns: 1.65fr 1fr; gap: 22px; align-items: start;
}
.craft-card {
    background: var(--c-paper); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 26px 28px;
}
.craft-card-title {
    font-size: 20px; color: var(--color-primary-ink); margin: 0 0 14px;
    padding-bottom: 10px; border-bottom: 1px solid var(--color-border);
}
.craft-logo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.craft-logo {
    width: 88px; height: 88px; border-radius: 14px; object-fit: cover;
    border: 2px solid var(--color-border); flex-shrink: 0;
}
.craft-logo-empty {
    display: flex; align-items: center; justify-content: center;
    background: var(--c-blush); color: var(--color-text-light); font-size: 13px;
}
.craft-logo-field { flex: 1; }
.craft-logo-field small { color: var(--color-text-light); font-size: 12px; display: block; margin-top: 4px; }
.craft-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .req { color: var(--color-error); }

.craft-dl { margin: 0; }
.craft-dl dt { font-size: 13px; color: var(--color-text-light); margin-top: 12px; font-weight: 600; }
.craft-dl dd { margin: 3px 0 0; font-weight: 700; word-break: break-all; }
.craft-hr { border: none; border-top: 1px solid var(--color-border); margin: 20px 0 16px; }
.craft-summary { list-style: none; margin: 0; padding: 0; }
.craft-summary li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px dashed var(--color-border); font-size: 14px;
}
.craft-summary li:last-child { border-bottom: none; }
.craft-summary span { color: var(--color-text-light); }
.craft-summary b { color: var(--color-primary-ink); font-size: 16px; }

/* --- استجابة الشاشات --- */
@media (max-width: 1000px) {
    .craft-stats { grid-template-columns: repeat(3, 1fr); }
    .craft-profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .craft-stats { grid-template-columns: repeat(2, 1fr); }
    .craft-header { flex-direction: column; align-items: flex-start; }
    .craft-two-col { grid-template-columns: 1fr; }
    .craft-table thead { display: none; }
    .craft-table, .craft-table tbody, .craft-table tr, .craft-table td { display: block; width: 100%; }
    .craft-table tr {
        margin-bottom: 14px; border-radius: var(--radius-sm);
        background: var(--c-paper); box-shadow: var(--shadow); overflow: hidden;
    }
    .craft-table td { border-bottom: 1px solid var(--color-border); }
    .craft-table td:last-child { border-bottom: none; }
}

/* --- لافتات حالة الحرفي --- */
.craft-banner {
    border-radius: var(--radius); padding: 16px 20px; margin-bottom: 22px;
    border: 1px solid; line-height: 1.8;
}
.craft-banner b { display: block; margin-bottom: 2px; }
.craft-banner-warn { background: #FBF0D6; border-color: #E4CE94; color: #7a5c0e; }
.craft-banner-stop { background: #F7E4E0; border-color: #E4B6AC; color: #8c3f30; }
.craft-banner a { color: inherit; text-decoration: underline; font-weight: 700; }

.craft-statusline { margin-top: 5px; }
.craft-cta-locked {
    padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 14px;
    background: var(--c-blush-deep); color: var(--color-text-light); cursor: not-allowed;
}

/* --- ملاحظة معلومات الاتصال --- */
.craft-contact-note {
    color: var(--color-text-light); font-size: 13px; line-height: 1.8;
    margin: -6px 0 6px;
}

/* ==========================================
   ترقية الواجهة: تنقّل الجوال + صقل عام
   ========================================== */

/* --- زر فتح القائمة (يظهر تحت 1200px فقط) --- */
.nav-toggle {
    display: none;
    width: 46px; height: 46px;
    align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); cursor: pointer;
    color: var(--color-primary-ink); flex-shrink: 0;
}
.nav-toggle:hover { background: var(--c-blush); }
.nav-toggle span {
    display: block; position: relative;
    width: 20px; height: 2px; border-radius: 2px;
    background: currentColor; transition: var(--transition);
}
.nav-toggle span::before,
.nav-toggle span::after {
    content: ""; position: absolute; inset-inline-start: 0;
    width: 20px; height: 2px; border-radius: 2px;
    background: currentColor; transition: var(--transition);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

/* حالة الفتح: تتحوّل إلى × */
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* --- الدرج الجانبي --- */
.nav-drawer {
    position: fixed; inset: 0; z-index: 120;
    visibility: hidden; pointer-events: none;
}
.nav-drawer[data-open="true"] { visibility: visible; pointer-events: auto; }

.nav-drawer-backdrop {
    position: absolute; inset: 0;
    background: rgba(43, 38, 34, .5);
    opacity: 0; transition: opacity .3s ease;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.nav-drawer[data-open="true"] .nav-drawer-backdrop { opacity: 1; }

.nav-drawer-panel {
    position: absolute; inset-block: 0; inset-inline-end: 0;
    width: min(340px, 86vw); height: 100%;
    background: var(--c-paper);
    box-shadow: -14px 0 44px rgba(74, 48, 40, .18);
    padding: 22px 24px 32px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: var(--sp-4);
    transform: translateX(105%);
    transition: transform .34s cubic-bezier(.2, .7, .2, 1);
}
[dir="rtl"] .nav-drawer-panel { transform: translateX(-105%); }
.nav-drawer[data-open="true"] .nav-drawer-panel { transform: translateX(0); }

.nav-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: var(--sp-4); border-bottom: 1px solid var(--color-border);
}
.nav-drawer-head img { height: 40px; width: auto; }
.nav-drawer-close {
    width: 40px; height: 40px; border: none; background: var(--c-blush);
    border-radius: 50%; cursor: pointer; color: var(--color-primary-ink);
    font-size: 22px; line-height: 1; font-family: inherit;
}
.nav-drawer-close:hover { background: var(--c-blush-deep); }

.nav-drawer-links { display: flex; flex-direction: column; }
.nav-drawer-links a {
    padding: 14px 10px; font-weight: 700; font-size: var(--fs-md);
    color: var(--color-text); border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--color-border);
    transition: var(--transition);
}
.nav-drawer-links a:last-child { border-bottom: none; }
.nav-drawer-links a:hover { color: var(--color-primary-ink); background: var(--c-blush); }

.nav-drawer-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: auto; }
.nav-drawer-actions .btn { width: 100%; text-align: center; }
.nav-drawer-actions form { width: 100%; }
.nav-drawer-actions .btn-link { padding: 12px; width: 100%; }

.nav-drawer-lang {
    display: flex; gap: var(--sp-2); justify-content: center;
    padding-top: var(--sp-4); border-top: 1px solid var(--color-border);
}
.nav-drawer-lang a {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 8px 20px; border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    color: var(--color-text-light); font-weight: 700; font-size: var(--fs-sm);
}
.nav-drawer-lang a.active { background: var(--color-primary-ink); color: #fff; border-color: var(--color-primary-ink); }

/* منع تمرير الصفحة خلف الدرج */
body.nav-open { overflow: hidden; }

/* --- إظهار زر القائمة وإخفاء الأدوات المزدحمة على الشاشات المتوسطة --- */
@media (max-width: 1200px) {
    .main-nav { display: none; }
    .nav-toggle { display: inline-flex; }
    .header-actions .lang-switcher,
    .header-actions .btn-outline,
    .header-actions .btn-link,
    .header-actions form,
    .header-actions .btn-primary { display: none; }
    .header-inner { gap: var(--sp-3); }
}
@media (min-width: 1201px) {
    .nav-drawer { display: none; }
}

/* --- صقل عام مبني على السلّم الطباعي الجديد --- */
.hero h1 { font-size: var(--fs-3xl); }
.hero p   { font-size: var(--fs-lg); }
.section h2 { font-size: var(--fs-2xl); }
.section-head h2 { font-size: var(--fs-xl); }
.design-card :is(h2, h3), .project-card :is(h2, h3) { font-size: var(--fs-md); margin: 0; }

/* وضعية الصور في البطاقات:
   - منتجات (تصاميم الكتالوج والحرفيين): مربّعة 1:1 بقصّ من المنتصف، فيُقصّ أقل من الصور الطولية.
   - أعمال (3D والمشاريع): 4:3 بلا أي قصّ (contain) على خلفية هادئة، لأنها تحمل نصوصًا ولقطات شاشة.
   نسبة ثابتة تمنع قفز التخطيط أثناء التحميل. */
.design-card img { aspect-ratio: 1 / 1; height: auto; }
.project-card img { aspect-ratio: 4 / 3; height: auto; }
.design-card--work img, .project-card img { aspect-ratio: 4 / 3; object-fit: contain; background: var(--c-blush); }

/* أهداف لمس مريحة على الجوال */
@media (max-width: 600px) {
    .btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
    .lang-switcher a { padding: 10px 14px; }
    .container { padding-inline: var(--sp-4); }
}

/* حركة مخفّضة: يشمل الدرج الجديد */
@media (prefers-reduced-motion: reduce) {
    .nav-drawer-panel, .nav-drawer-backdrop { transition: none !important; }
    html { scroll-behavior: auto !important; }
}

/* --- ترويسة نتائج الكتالوج --- */
.catalog-results-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-4);
    padding-bottom: var(--sp-3); border-bottom: 1px solid var(--color-border);
}
.catalog-results-head h2 {
    font-size: var(--fs-xl); margin: 0;
    display: flex; align-items: center; gap: var(--sp-2);
}
.catalog-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 26px; padding: 0 9px;
    background: var(--c-blush-deep); color: var(--color-primary-deep);
    border-radius: var(--radius-pill);
    font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700;
}
.catalog-clear { color: var(--color-error); font-weight: 700; font-size: var(--fs-sm); }
.catalog-clear:hover { text-decoration: underline; }

/* حالة فراغ داخل شبكة التصاميم */
.catalog-empty {
    grid-column: 1 / -1; text-align: center;
    background: var(--c-paper); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 48px 24px;
}
.catalog-empty p { font-weight: 700; margin-bottom: var(--sp-4); }

/* بطاقة "كل التصنيفات" */
.category-card .category-icon { font-size: 22px; line-height: 1; }

/* --- وسائط أعمال 3D --- */

/* ==========================================
   مسار التصفّح الموحّد (Harmonized Breadcrumbs)
   ========================================== */

.crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--color-text-light);
    margin-bottom: 24px;
    padding: 8px 18px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 8px rgba(74, 48, 40, 0.04);
    transition: var(--transition);
}

.crumb a {
    color: var(--color-primary-ink);
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.crumb a:hover {
    color: var(--color-secondary-ink);
    text-decoration: none;
}

.crumb .crumb-sep, .crumb [aria-hidden="true"] {
    color: var(--color-border);
    font-weight: 400;
    font-size: 12px;
}

.crumb-current {
    color: var(--color-text-light);
    font-weight: 600;
}

/* حركة دخول وانتقال الصفحات الناعمة */
main#main-content {
    animation: page-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes page-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- ترويسة الصنف --- */
.cat-head {
    display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
    padding-bottom: var(--sp-5); margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--color-border);
}
.cat-head-img {
    width: 104px; height: 104px; border-radius: 20px; object-fit: cover;
    border: 3px solid var(--c-paper); box-shadow: var(--shadow); flex-shrink: 0;
}
.cat-head-icon {
    width: 104px; height: 104px; border-radius: 20px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 46px; background: var(--c-blush-deep);
}
.cat-head-text h1 { margin: 0 0 4px; }
.cat-head-text p { color: var(--color-text-light); margin: 0; }
.cat-count { font-weight: 700; color: var(--color-secondary-ink) !important; margin-top: 6px !important; }

.cat-empty {
    background: var(--c-paper); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 54px 24px; text-align: center;
}
.cat-empty p { margin-bottom: 16px; font-weight: 700; }

.design-card-price {
    display: block; padding: 0 14px 14px; font-size: var(--fs-sm);
    font-weight: 700; color: var(--color-secondary-ink); text-align: center;
}

.design-card-desc {
    margin: 0; padding: 0 18px 10px; font-size: var(--fs-sm);
    color: var(--color-muted, #6b6b6b); line-height: 1.85;
    /* وصف مرتّب: ثلاثة أسطر كحدّ أقصى بحواف مضبوطة (آخر سطر في الوسط) وقصّ بنقاط بدل قطع في منتصف كلمة */
    text-align: justify; text-align-last: center; text-justify: inter-word; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}

.design-card-tag {
    display: inline-block; margin: 0 auto 10px; padding: 3px 10px;
    border-radius: 999px; font-size: 12px; font-weight: 700;
    background: var(--c-paper, #f4efe6); color: var(--color-primary-ink);
    border: 1px solid var(--color-border);
    width: fit-content;
}

/* --- بطاقة الحرفي على صفحة المنتج --- */
.maker-card {
    background: var(--c-paper); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 24px 26px;
    margin-top: var(--sp-6); box-shadow: var(--shadow);
}

/* --- دعوة إتمام الطلب (نموذج/تسجيل الدخول) أسفل صفحة المنتج --- */
.request-cta {
    background: var(--c-paper); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 22px 24px;
    margin-top: var(--sp-4); box-shadow: var(--shadow-sm);
}
.request-cta-title { font-size: var(--fs-lg); margin: 0; }
.maker-head { display: flex; align-items: center; gap: var(--sp-4); }
.maker-logo {
    width: 72px; height: 72px; border-radius: 18px; object-fit: cover;
    border: 2px solid var(--color-border); flex-shrink: 0;
}
.maker-logo-empty {
    display: flex; align-items: center; justify-content: center;
    background: var(--c-blush-deep); color: var(--color-primary-ink);
    font-family: var(--font-heading); font-size: 30px; font-weight: 700;
}
.maker-label {
    display: block; font-size: var(--fs-xs); color: var(--color-text-light);
    font-weight: 700; margin-bottom: 2px;
}
.maker-id :is(h2, h3) { margin: 0; font-size: var(--fs-lg); }
.maker-loc { color: var(--color-text-light); font-size: var(--fs-sm); margin: 2px 0 0; }
.maker-meta { color: var(--color-secondary-ink); font-size: var(--fs-sm); font-weight: 700; margin: 4px 0 0; }
.maker-bio {
    margin-top: var(--sp-4); padding-top: var(--sp-4);
    border-top: 1px solid var(--color-border); line-height: 1.9;
}

.maker-contact {
    list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-4) 0 0;
    border-top: 1px solid var(--color-border);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3);
}
.maker-contact li { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.maker-contact li > span:first-child { color: var(--color-text-light); font-size: var(--fs-xs); font-weight: 700; }
.maker-contact a { color: var(--color-primary-ink); font-weight: 700; }
.maker-contact a:hover { text-decoration: underline; }

.maker-social { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.maker-social a {
    padding: 8px 18px; border-radius: var(--radius-pill);
    background: var(--c-blush); color: var(--color-primary-ink);
    font-weight: 700; font-size: var(--fs-sm);
}
.maker-social a:hover { background: var(--c-blush-deep); }

@media (max-width: 600px) {
    .cat-head { gap: var(--sp-4); }
    .cat-head-img, .cat-head-icon { width: 76px; height: 76px; font-size: 34px; }
    .maker-head { flex-direction: column; align-items: flex-start; }
}

/* ==========================================
   الدائرة اللونية + واتساب + أعمال الحرفيين
   ========================================== */

/* --- الدائرة اللونية داخل شريط العيّنات --- */
.color-wheel {
    position: relative; width: 34px; height: 34px; border-radius: 50%;
    cursor: pointer; flex-shrink: 0;
    border: 2px dashed var(--color-border);
    display: inline-flex; align-items: center; justify-content: center;
    background:
      conic-gradient(#e74c3c, #f1c40f, #2ecc71, #1abc9c, #3498db, #9b59b6, #e74c3c);
    transition: var(--transition);
}
.color-wheel:hover { transform: scale(1.08); border-color: var(--color-primary); }
.color-wheel input[type="color"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
    width: 100%; height: 100%; padding: 0; border: none;
}
.color-wheel-plus {
    color: #fff; font-weight: 700; font-size: 18px; line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,.5); pointer-events: none;
}

.color-chosen { margin-top: 10px; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.color-chosen-label { font-size: var(--fs-xs); color: var(--color-text-light); font-weight: 700; }
.color-chosen-list { display: flex; gap: 6px; flex-wrap: wrap; }
.color-dot {
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-border);
    transition: var(--transition);
}
.color-dot:hover { transform: scale(1.12); box-shadow: 0 0 0 2px var(--color-error); }

.field-optional {
    font-weight: 400; font-size: var(--fs-xs); color: var(--color-text-light);
    margin-inline-start: 6px;
}

/* --- زر واتساب ---
   الأخضر الرسمي لواتساب (#25D366) فاتح جدًا؛ نص أبيض عليه لا يحقق نسبة
   تباين مقبولة (١.٩٨:١ فقط، والمطلوب ٤.٥:١). نستخدم نصًّا داكنًا بدل
   الأبيض فيبقى اللون المميّز لواتساب مع تباين ممتاز (~١٠.٦:١). */
.btn-wa { background: #25D366; color: #073B1E; }
.btn-wa:hover { background: #1FB855; color: #073B1E; transform: translateY(-2px); }
.maker-wa { margin-top: var(--sp-4); }
.wa-note {
    font-size: var(--fs-sm); color: var(--color-text-light);
    margin-top: var(--sp-3); line-height: 1.8;
}

/* --- أعمال الحرفيين حسب الصنف --- */
.cs-group { margin-bottom: var(--sp-7); }
.cs-group-head {
    display: flex; align-items: center; gap: var(--sp-3);
    margin-bottom: var(--sp-4); padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--color-border);
}
.cs-cat-img {
    width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex-shrink: 0;
    border: 2px solid var(--c-paper); box-shadow: var(--shadow-sm);
}
.cs-cat-icon {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; background: var(--c-blush-deep);
}
.cs-group-head h3 { margin: 0; font-size: var(--fs-lg); flex: 1; }
.cs-more { color: var(--color-primary-ink); font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }
.cs-more:hover { text-decoration: underline; }
.cs-maker {
    display: block; padding: 0 14px 4px; text-align: center;
    font-size: var(--fs-xs); color: var(--color-text-light); font-weight: 600;
}

/* ==========================================
   المناطق: معروضاتنا · أعمال الحرفيين · الاستشارة · الآراء
   ========================================== */

.zone { padding-top: var(--sp-5); }
.zone-head { max-width: 720px; margin-bottom: var(--sp-6); }
.zone-head h1 { margin-bottom: var(--sp-2); }
.zone-intro { color: var(--color-text-light); font-size: var(--fs-md); line-height: 1.9; }

/* --- بطاقة صنف: صورة + اسم + عدد + سهم --- */
.zone-grid {
    display: grid; gap: var(--sp-4);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.zone-card {
    display: flex; align-items: center; gap: var(--sp-4);
    background: var(--c-paper); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease;
}
.zone-card:hover {
    transform: translateY(-3px); box-shadow: var(--shadow-lift);
    border-color: var(--color-secondary);
}
.zone-card-media {
    width: 74px; height: 74px; border-radius: 14px; overflow: hidden; flex-shrink: 0;
    background: var(--c-blush-deep); display: flex; align-items: center; justify-content: center;
}
.zone-card-media img { width: 100%; height: 100%; object-fit: cover; }
.zone-card-icon { font-size: 30px; color: var(--color-primary-ink); }
.zone-card-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zone-card-name { font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 600; color: var(--color-primary-ink); }
.zone-card-count { font-size: var(--fs-xs); color: var(--color-text-light); font-weight: 600; }
.zone-card-go {
    color: var(--color-secondary-ink); font-size: 20px; flex-shrink: 0;
    transition: transform .22s ease;
}
[dir="rtl"] .zone-card-go { transform: scaleX(-1); }
.zone-card:hover .zone-card-go { transform: translateX(-4px); }
[dir="rtl"] .zone-card:hover .zone-card-go { transform: scaleX(-1) translateX(-4px); }

.zone-empty {
    background: var(--c-paper); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 56px 24px; text-align: center;
}
.zone-empty p { margin-bottom: var(--sp-4); font-weight: 700; }
.zone-soon {
    margin-top: var(--sp-5); color: var(--color-text-light);
    font-size: var(--fs-sm); text-align: center;
}
.cat-back { margin-inline-start: auto; }

/* --- خطوات الاستشارة --- */
.flow-steps {
    list-style: none; padding: 0; margin: 0 0 var(--sp-6);
    display: grid; gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    counter-reset: flow;
}
.flow-steps li {
    background: var(--c-paper); border-radius: var(--radius);
    padding: 26px 24px; box-shadow: var(--shadow); position: relative;
}
.flow-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--color-primary); color: #fff;
    font-weight: 700; font-size: var(--fs-md); margin-bottom: var(--sp-3);
}
.flow-steps :is(h2, h3) { font-size: var(--fs-md); margin-bottom: 6px; }
.flow-steps p { color: var(--color-text-light); font-size: var(--fs-sm); line-height: 1.85; }
.flow-cta { text-align: center; }
.flow-cta .field-hint { margin-top: var(--sp-3); }

/* --- الصفحة الحالية في القائمة --- */
.main-nav a.is-current,
.nav-drawer-links a.is-current {
    color: var(--color-primary-ink); font-weight: 700; position: relative;
}
.main-nav a.is-current { background: var(--c-blush); }
.main-nav a.is-current::after { transform: scaleX(1); }
.nav-drawer-links a.is-current { background: var(--c-blush); }

/* --- انتقال هادئ بين الصفحات --- */
@media (prefers-reduced-motion: no-preference) {
    main { animation: page-in .34s cubic-bezier(.2,.7,.2,1); }
    @keyframes page-in { from { opacity: 0; transform: translateY(6px); } }

    /* حركة خروج قصيرة قبل مغادرة صفحات "التصفّح" (معروضاتنا/أعمال الحرفيين) — app.js يضيف الصنف */
    main.page-fade-out { animation: page-out .2s ease forwards; }
    @keyframes page-out { to { opacity: 0; transform: translateY(-6px); } }

    /* ظهور متدرّج لبطاقات الأصناف والمنتجات داخل مناطق التصفّح (.zone) وصفحة الكتالوغ الموحّدة */
    .zone-grid .zone-card,
    .zone .design-card,
    .grid-4 > .design-card,
    .grid-6 > .category-card {
        opacity: 0;
        animation: card-in .5s cubic-bezier(.2,.7,.2,1) forwards;
    }
    @keyframes card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

    .zone-grid .zone-card:nth-child(1), .zone .design-card:nth-child(1), .grid-4 > .design-card:nth-child(1), .grid-6 > .category-card:nth-child(1) { animation-delay: .03s; }
    .zone-grid .zone-card:nth-child(2), .zone .design-card:nth-child(2), .grid-4 > .design-card:nth-child(2), .grid-6 > .category-card:nth-child(2) { animation-delay: .07s; }
    .zone-grid .zone-card:nth-child(3), .zone .design-card:nth-child(3), .grid-4 > .design-card:nth-child(3), .grid-6 > .category-card:nth-child(3) { animation-delay: .11s; }
    .zone-grid .zone-card:nth-child(4), .zone .design-card:nth-child(4), .grid-4 > .design-card:nth-child(4), .grid-6 > .category-card:nth-child(4) { animation-delay: .15s; }
    .zone-grid .zone-card:nth-child(5), .zone .design-card:nth-child(5), .grid-4 > .design-card:nth-child(5), .grid-6 > .category-card:nth-child(5) { animation-delay: .19s; }
    .zone-grid .zone-card:nth-child(6), .zone .design-card:nth-child(6), .grid-4 > .design-card:nth-child(6), .grid-6 > .category-card:nth-child(6) { animation-delay: .23s; }
    .zone-grid .zone-card:nth-child(7), .zone .design-card:nth-child(7), .grid-4 > .design-card:nth-child(7) { animation-delay: .27s; }
    .zone-grid .zone-card:nth-child(8), .zone .design-card:nth-child(8), .grid-4 > .design-card:nth-child(8) { animation-delay: .31s; }
    .zone-grid .zone-card:nth-child(n+9), .zone .design-card:nth-child(n+9), .grid-4 > .design-card:nth-child(n+9) { animation-delay: .34s; }
}

/* --- اختيار التقييم بالنجوم (تقييم العميل لطلبه) --- */
.rating-input {
    display: flex; flex-direction: row-reverse; justify-content: flex-end;
    gap: 4px; font-size: 30px;
}
.rating-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.rating-input label {
    cursor: pointer; color: var(--color-border);
    transition: color .15s ease, transform .15s ease;
}
.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label {
    color: var(--color-secondary);
}
.rating-input input:focus-visible + label {
    outline: none; box-shadow: var(--focus-ring); border-radius: 50%;
}
.rating-input label:hover { transform: scale(1.12); }

.review-submitted {
    background: var(--c-paper); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.admin-pagination {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
    margin-top: var(--sp-6); font-weight: 700;
}
.admin-pagination a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; border-radius: 999px;
    background: var(--c-paper); border: 1px solid var(--color-border);
    color: var(--color-primary-ink); font-size: var(--fs-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.admin-pagination a:hover {
    transform: translateY(-2px); box-shadow: var(--shadow-sm);
    border-color: var(--color-secondary); background: var(--c-blush);
}
.admin-pagination .pagination-info {
    color: var(--color-text-light); font-weight: 600; font-size: var(--fs-sm);
}
/* --- محتوى الصفحات الثابتة (من نحن / الخصوصية / الشروط) --- */
.static-page-content {
    max-width: 780px; margin-top: 20px; line-height: 1.9;
    color: var(--color-text); font-size: var(--fs-base);
}
.static-page-content p { margin-bottom: 14px; }

/* ===== حركة مخفّضة: تشمل الأسهم والانتقالات الجديدة ===== */
@media (prefers-reduced-motion: reduce) {
    .arrow-fwd::after, .site-header { transition: none !important; }
    a:hover > .arrow-fwd::after { transform: none !important; }
}

/* الصفحات الداخلية: القسم بعرض الحاوية لا يرسم خلفية «لوحة» فوق خلفية الصفحة */
main > .section.container { background: transparent; }

/* دعوة لتسجيل الدخول: تلميح هادئ وليس رسالة خطأ */
.request-cta-note { margin: 0 0 var(--sp-3); color: var(--color-text); font-weight: 600; }
.request-cta-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* حقل البحث في البطل: الحلقة على الحاوية كلها لأن الحقل نفسه بلا إطار */
.hero-search:focus-within { box-shadow: var(--focus-ring), var(--shadow-lift); }

/* روابط مسار التنقل: هدف لمس مريح (44px) دون تغيير مظهر السطر */
.crumb a { display: inline-block; padding-block: 9px; }

/* ==========================================================================
   صور قابلة للتكبير + لوحة العرض (Lightbox)
   ========================================================================== */
.zoom-item { margin: 0; text-align: center; }
.zoomable {
    position: relative; display: block; overflow: hidden; cursor: zoom-in;
    border-radius: var(--radius-sm); background: var(--c-blush); box-shadow: var(--shadow);
}
.zoomable img {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
    transition: transform .4s ease;
}
.zoomable:hover img { transform: scale(1.04); }
/* أيقونة العدسة: تُعلن أن الصورة قابلة للتكبير (ظاهرة دائمًا لأن اللمس لا يعرف hover) */
.zoomable-hint {
    position: absolute; inset-block-end: var(--sp-2); inset-inline-end: var(--sp-2);
    width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: var(--color-primary-ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18); transition: transform .2s ease; pointer-events: none;
}
.zoomable:hover .zoomable-hint, .zoomable:focus-visible .zoomable-hint { transform: scale(1.12); }
/* نص الصورة: في الوسط تحتها دائمًا */
.zoom-caption {
    margin: var(--sp-2) 0 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.5;
    color: var(--color-text-light); text-align: center; text-wrap: balance;
}

/* الصورة الرئيسية كاملة بلا قصّ ومتوسّطة داخل إطارها */
.zoom-item--stage .zoomable img { object-fit: contain; }
.zoom-item--stage { max-width: 960px; margin: var(--sp-5) auto; }
.zoom-item--stage .zoomable { aspect-ratio: 16 / 10; max-height: 70vh; }

/* شبكة المصغّرات: صفوف متوسّطة بقياس موحّد */
.media-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-6); }
.media-grid > .zoom-item { flex: 0 1 240px; max-width: 100%; }
.media-grid .zoomable { aspect-ratio: 4 / 3; }

/* معرض الكتالوج: كل الصور بقياس واحد وشبكة متوازنة (لا «كبيرة + صغيرة تحتها»):
   صورة واحدة = كاملة العرض، صورتان أو أربع = عمودان، وما عدا ذلك = ثلاثة في الصف (والصف الأخير في الوسط) */
.media-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
.media-gallery > .zoom-item { flex: 0 0 calc((100% - 2 * var(--sp-3)) / 3); max-width: calc((100% - 2 * var(--sp-3)) / 3); }
.media-gallery[data-count="2"] > .zoom-item, .media-gallery[data-count="4"] > .zoom-item { flex-basis: calc((100% - var(--sp-3)) / 2); max-width: calc((100% - var(--sp-3)) / 2); }
.media-gallery[data-count="1"] > .zoom-item { flex-basis: 100%; max-width: 100%; }
.media-gallery .zoomable { aspect-ratio: 1 / 1; }
.media-gallery[data-count="1"] .zoomable { max-height: 80vh; }
.media-gallery[data-count="1"] .zoomable img { object-fit: contain; }
.zoom-item--video video {
    display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
    border-radius: var(--radius-sm); background: #000;
}

/* فيديو 3D: متوسّط، وعنوانه تحته لا فوقه */
.three-d-video { max-width: 960px; margin: var(--sp-5) auto 0; text-align: center; }
.three-d-video video {
    display: block; width: 100%; max-height: 560px; object-fit: contain;
    background: #000; border-radius: var(--radius); box-shadow: var(--shadow);
}

/* صفحات المعرض و3D: عنوان ووصف ووسوم في الوسط فوق الوسائط المتوسّطة */
.gallery-show h1, .gallery-show-desc, .gallery-section-title { text-align: center; }
.gallery-show-desc { margin-inline: auto; }
.gallery-show-meta { justify-content: center; }
.ba-sliders { align-items: center; }

/* ----- لوحة العرض ----- */
body.lb-open { overflow: hidden; }
.lb {
    position: fixed; inset: 0; z-index: 1000; display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: rgba(18, 22, 15, .97); color: #fff; animation: lb-in .2s ease;
}
.lb[hidden], .lb [hidden] { display: none !important; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb-top {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: var(--sp-3) var(--sp-4); padding-top: max(var(--sp-3), env(safe-area-inset-top, 0px));
}
.lb-close { justify-self: start; }
.lb-zoom { justify-self: end; }
.lb-counter { font-size: var(--fs-sm); font-weight: 700; color: rgba(255, 255, 255, .85); text-align: center; }
.lb-btn {
    width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; cursor: pointer;
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .1); color: #fff; transition: background-color .2s ease;
}
.lb-btn:hover { background: rgba(255, 255, 255, .22); }
.lb .lb-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .95); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.lb-prev { inset-inline-start: var(--sp-3); }
.lb-next { inset-inline-end: var(--sp-3); }
[dir="rtl"] .lb-nav svg { transform: scaleX(-1); }
.lb-stage {
    direction: ltr; overflow: auto; min-height: 0; padding: 0 var(--sp-4);
    display: flex; align-items: center; justify-content: center; -webkit-overflow-scrolling: touch;
}
.lb-img {
    display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
    border-radius: 6px; cursor: zoom-in; user-select: none; -webkit-user-drag: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .45); transition: opacity .25s ease;
}
.lb-img.is-loading { opacity: .25; }
.lb.is-zoomed .lb-stage { display: block; padding: 0; }
.lb.is-zoomed .lb-img { max-width: none; max-height: none; width: 200%; cursor: grab; border-radius: 0; }
.lb.is-zoomed .lb-caption { display: none; }
/* تفاصيل الصورة: في الوسط تحتها */
.lb-caption {
    width: 100%; max-width: 760px; margin-inline: auto; text-align: center;
    padding: var(--sp-3) var(--sp-5); padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom, 0px));
}
.lb-title { margin: 0 0 var(--sp-1); color: #fff; font-size: var(--fs-lg); text-wrap: balance; }
.lb-text { margin: 0 0 var(--sp-2); color: rgba(255, 255, 255, .82); font-size: var(--fs-sm); }
.lb-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.lb-meta li {
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius-pill); padding: 3px 12px; font-size: 12px; font-weight: 700;
}
@media (max-width: 600px) {
    .lb-stage { padding: 0 var(--sp-2); }
    /* على الجوال الأسهم فوق حافتي الصورة (السحب هو الوسيلة الأساسية) فلا تزاحم النص تحتها */
    .lb-nav { width: 40px; height: 40px; background: rgba(0, 0, 0, .5); }
    .lb-prev { inset-inline-start: var(--sp-2); }
    .lb-next { inset-inline-end: var(--sp-2); }
}
@media (prefers-reduced-motion: reduce) {
    .lb { animation: none; }
    .zoomable img, .lb-img, .zoomable-hint { transition: none; }
}

/* مرشّحات جداول الإدارة: صف واحد متجاوب بدل حقول بعرض كامل متراصّة عموديًا
   (القاعدة المشتركة مع .form تضبط width:100% وهذا مناسب للنماذج لا للمرشّحات) */
.admin-filters { align-items: center; }
.admin-filters input, .admin-filters select { width: auto; flex: 1 1 160px; max-width: 240px; padding: 10px 14px; font-size: 14px; }
.admin-filters input[type="text"], .admin-filters input[type="search"] { flex: 2 1 240px; max-width: 340px; }
.admin-filters .btn { flex: 0 0 auto; }
@media (max-width: 600px) { .admin-filters input, .admin-filters select { max-width: none; flex-basis: 100%; } }

/* بطاقة الكتالوج القابلة للتكبير: الصورة تفتح لوحة العرض والعنوان يفتح التفاصيل */
.design-card--zoom .zoomable { border-radius: 0; box-shadow: none; aspect-ratio: 1 / 1; }
.design-card--zoom h2 a { color: inherit; }
.design-card--zoom h2 a:hover { color: var(--color-secondary-ink); text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   CHDE 2026 UI/UX Overhaul — New Component System & Interactive Upgrades
   ========================================================================== */

/* --- 1. Hero Enhancements & Trust Badges --- */
.hero {
    position: relative;
    padding: 110px 0 90px;
    background:
        radial-gradient(ellipse at center 20%, rgba(119, 137, 95, 0.35) 0%, transparent 70%),
        linear-gradient(180deg, rgba(38, 46, 30, 0.88) 0%, rgba(28, 34, 22, 0.96) 100%),
        url('/assets/images/hero-bg.jpg') center 38% / cover no-repeat;
}

.hero-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.hero-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.hero-badge-pill svg, .hero-badge-pill .badge-icon {
    width: 16px;
    height: 16px;
    color: var(--color-secondary-light);
}

.hero-title {
    font-size: clamp(2.1rem, 4vw + 1rem, 3.4rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
}

.hero-subtitle {
    font-size: clamp(1.05rem, 1.2vw + 0.8rem, 1.25rem);
    max-width: 640px;
    margin: 0 auto 34px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
}

.hero-search-container {
    max-width: 620px;
    margin: 0 auto;
}

.hero-search {
    background: #ffffff;
    border-radius: var(--radius-pill);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
    border: 2px solid rgba(255, 255, 255, 0.85);
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.hero-search:focus-within {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(195, 154, 78, 0.4);
    border-color: var(--color-secondary);
}

.hero-search input {
    flex: 1;
    border: none;
    padding: 12px 18px;
    font-size: 15px;
    background: transparent;
    color: var(--color-text);
}

.hero-search input:focus {
    box-shadow: none;
    border: none;
}

.hero-search button {
    border-radius: var(--radius-pill);
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
}

.hero-quick-tags {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.hero-quick-tags span {
    font-weight: 600;
}

.hero-quick-tag {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: var(--transition);
}

.hero-quick-tag:hover {
    background: var(--color-secondary);
    color: #1a2016;
    border-color: var(--color-secondary);
}

/* --- 2. Categories Redesign --- */
.grid-6 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
}

.category-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 24px 16px;
    text-align: center;
    font-weight: 700;
    color: var(--color-primary-ink);
    box-shadow: 0 4px 16px rgba(74, 48, 40, 0.04);
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.28s ease, border-color 0.28s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.category-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    border: 2px solid transparent;
    transition: border-color 0.25s ease;
    pointer-events: none;
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(74, 48, 40, 0.1);
    border-color: var(--color-secondary);
    background: #ffffff;
    color: var(--color-primary-ink);
}

.category-card:hover::before {
    border-color: var(--color-secondary);
}

.category-cover {
    display: block;
    width: 90px;
    height: 90px;
    margin: 0 auto 14px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--c-blush);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease;
}

.category-card:hover .category-cover {
    transform: scale(1.06);
}

.category-name {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
}

/* --- 3. 3D Works Cinematic Display --- */
.design-card--work {
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.design-card--work .design-card-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #1c2b23;
}

.design-card--work .design-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.design-card--work:hover .design-card-media img {
    transform: scale(1.05);
}

.design-card--work .design-card-play {
    width: 60px;
    height: 60px;
    background: rgba(30, 36, 24, 0.75);
    border: 2px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(6px);
}

.design-card--work:hover .design-card-play {
    background: var(--color-secondary);
    color: #1a2016;
    border-color: #fff;
    transform: translate(-50%, -50%) scale(1.12);
}

.design-card--work h3, .design-card--work h2 {
    padding: 18px 20px;
    font-size: 17px;
    text-align: start;
    margin: 0;
}

/* 3D Show Details Page */
.three-d-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 36px;
    align-items: start;
    margin-top: 24px;
}

@media (max-width: 900px) {
    .three-d-layout { grid-template-columns: 1fr; }
}

.three-d-theater {
    background: #11160f;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.three-d-theater video {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    background: #000;
}

.three-d-panel {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
}

/* --- 4. Catalog Filters & Product Details --- */
.catalog-nav-header {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px 28px;
    margin-bottom: 32px;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 20px rgba(74, 48, 40, 0.04);
}

.catalog-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: var(--c-blush);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: var(--transition);
}

.filter-pill:hover {
    background: var(--c-blush-deep);
    color: var(--color-primary-ink);
}

.filter-pill.is-active {
    background: var(--color-primary-ink);
    color: #ffffff;
    border-color: var(--color-primary-ink);
}

.design-card-price-tag {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary-ink);
    background: rgba(195, 154, 78, 0.14);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(195, 154, 78, 0.3);
}

/* Catalog Detail Show Layout */
.catalog-show-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 20px;
}

@media (max-width: 960px) {
    .catalog-show-layout { grid-template-columns: 1fr; }
}

.media-gallery-enhanced {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gallery-main-frame {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-lift);
    border: 1px solid var(--color-border);
    background: #ffffff;
}

.gallery-main-frame img {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
}

.specs-modern-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 28px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    margin: 24px 0;
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
}

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

.spec-item {
    background: var(--c-blush);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(231, 216, 207, 0.6);
}

.spec-label {
    font-size: 12px;
    color: var(--color-text-light);
    font-weight: 600;
}

.spec-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary-ink);
}

/* WhatsApp Order Banner */
.whatsapp-order-card {
    background: linear-gradient(135deg, #1f653e 0%, #174b2e 100%);
    color: #ffffff;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 14px 36px rgba(31, 101, 62, 0.25);
    margin-top: 24px;
}

.whatsapp-order-card h3 {
    color: #ffffff;
    margin-bottom: 8px;
    font-size: 20px;
}

.whatsapp-order-card p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    margin-bottom: 20px;
}

.btn-whatsapp-glow {
    background: #25D366;
    color: #ffffff;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    transition: var(--transition);
}

.btn-whatsapp-glow:hover {
    background: #22bf5b;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.5);
    color: #ffffff;
}

/* --- 5. Consultation Interactive Journey --- */
.consultation-timeline-modern {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 44px 0;
    position: relative;
}

@media (max-width: 900px) {
    .consultation-timeline-modern { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 550px) {
    .consultation-timeline-modern { grid-template-columns: 1fr; }
}

.timeline-step-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 28px 22px;
    position: relative;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.timeline-step-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-lift);
}

.step-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: #1c2b23;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 16px;
    box-shadow: 0 6px 16px rgba(195, 154, 78, 0.35);
}

.timeline-step-card h3 {
    font-size: 17px;
    margin-bottom: 10px;
    color: var(--color-primary-ink);
}

.timeline-step-card p {
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.6;
}

/* --- 6. Reviews Score Summary & Badges --- */
.reviews-stat-hero {
    background: linear-gradient(135deg, var(--color-primary-ink) 0%, #22291d 100%);
    border-radius: 24px;
    padding: 40px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 40px;
    box-shadow: 0 16px 40px rgba(46, 53, 37, 0.18);
}

.rating-score-block {
    display: flex;
    align-items: center;
    gap: 20px;
}

.score-huge {
    font-size: 54px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-secondary-light);
}

.score-stars-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stars-gold {
    color: #FFB800;
    font-size: 24px;
    letter-spacing: 2px;
}

.score-count {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

.testimonial-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #2F6B4F;
    background: rgba(47, 107, 79, 0.12);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    margin-inline-start: 8px;
}

/* --- 7. Contact Split-Screen --- */
.contact-split-layout {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 44px;
    margin-top: 32px;
    align-items: start;
}

@media (max-width: 900px) {
    .contact-split-layout { grid-template-columns: 1fr; }
}

.contact-channels-box {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 36px;
    box-shadow: var(--shadow);
}

.contact-channels-box h2 {
    font-size: 24px;
    margin-bottom: 12px;
    text-align: start;
}

.contact-channel-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--c-blush);
    border-radius: 16px;
    margin-bottom: 14px;
    text-decoration: none;
    color: var(--color-text);
    transition: var(--transition);
}

.contact-channel-item:hover {
    background: var(--c-blush-deep);
    transform: translateX(-4px);
}

[dir="ltr"] .contact-channel-item:hover {
    transform: translateX(4px);
}

.channel-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--color-primary-ink);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* --- 8. Modern Auth Card --- */
.auth-card-modern {
    background: #ffffff;
    padding: 44px 36px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(74, 48, 40, 0.12);
    max-width: 480px;
    width: 100%;
    border: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}

.auth-card-modern::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.role-switcher-segmented {
    display: flex;
    background: var(--c-blush);
    padding: 4px;
    border-radius: var(--radius-pill);
    margin: 18px 0 22px;
    gap: 4px;
}

.role-switcher-segmented label {
    flex: 1;
    text-align: center;
    padding: 10px 14px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text);
    transition: var(--transition);
    margin: 0;
}

.role-switcher-segmented label:has(input:checked) {
    background: #ffffff;
    color: var(--color-primary-ink);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.role-switcher-segmented input {
    display: none;
}

/* --- 9. Customer & Craftsman Dashboard Enhancements --- */
.dash-header-bar {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 24px 30px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 4px 16px rgba(74, 48, 40, 0.04);
}

.dash-nav-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dash-nav-pill {
    padding: 9px 20px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    background: var(--c-blush);
    text-decoration: none;
    transition: var(--transition);
}

.dash-nav-pill:hover {
    background: var(--c-blush-deep);
    color: var(--color-primary-ink);
}

.dash-nav-pill.is-active {
    background: var(--color-primary-ink);
    color: #ffffff;
}

.dash-kpis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.dash-kpi-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 22px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-kpi-num {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-primary-ink);
    line-height: 1.1;
}

.dash-kpi-label {
    font-size: 14px;
    color: var(--color-text-light);
    font-weight: 600;
}

/* Multi-step Design Studio Modal Progress Bar */
.modal-stepper-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.stepper-indicator-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary-ink);
    background: var(--c-blush);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
}

.stepper-indicator-pill .pill-number {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: #1c2b23;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}