/* ==========================================================================
   static/pages/css/base/desktop-royal.css
   «العرش الملكي» — الصقل الجمالي لنسخة الكمبيوتر (الصفحة الرئيسية + العرض الموسّع فقط)

   الفكرة: نفس لغة الجوال الملكية (أسود/ذهبي، سبائك، أوسمة، بوابات سينمائية)
   لكن بمقياس الشاشة العريضة:
     • شريط علوي شفاف يتحول إلى زجاج عند التمرير + هالة نابضة للشعار
     • عنوان BUSINESS EMPEROR بظهور سينمائي وزخرفة ألماسة وهالة خلفية
     • «اختر الدولة» + أوسمة دائرية بحلقة ذهبية دوّارة
     • الفئات (برونزي/فضي/ذهبي) كسبائك معدنية على سكة زجاجية
     • الأقسام الثلاثة كأعمدة سينمائية بتصميم «المنصة» (الوسطى أعلى) مع ضوء يتبع المؤشر
     • العرض الموسّع: عنوان مركزي، شريط مدن زجاجي، مفتاح إيجار/بيع، فلاتر زجاجية،
       بطاقات بسعر ذهبي عائم، وتفاصيل بإطار صورة فاخر وشريط إجراءات عائم

   قواعد العزل (لا تمس شيئاً آخر):
     - كل القواعد داخل @media (min-width: 769px)  ← الجوال كما هو تماماً.
     - كل القواعد تبدأ بـ html body.emp-home ← الصنف يُضاف للصفحة الرئيسية فقط
       (index.html)، فلا تتأثر الصفحات الأخرى التي ترث القالب (لوحات التحكم، الدخول…).
     - لا يغيّر أي منطق/JS/HTML وظيفي؛ الألوان تتبع الثيمات (برونزي/فضي/ذهبي) عبر المتغيّرات.
   - يُحمَّل آخر ملف CSS في index.html.
   - المؤثرات الخفيفة (حالة الشريط، تتبع المؤشر) في js/modules/desktop-fx.js
   ========================================================================== */

/* قيمة رقمية قابلة للتحريك: شدّة ضوء المؤشر على البطاقات */
@property --d-sp { syntax: '<number>'; inherits: true; initial-value: 0; }

/* ---------- الحركات (أسماؤها d-* لتجنّب أي تعارض) ---------- */
@keyframes d-title-in {
    0%   { opacity: 0; letter-spacing: .42em; filter: blur(14px); transform: translateY(26px) scale(1.06); }
    60%  { opacity: 1; filter: blur(2px); }
    100% { opacity: 1; letter-spacing: .14em; filter: none; transform: none; }
}
@keyframes d-wipe-r {
    from { clip-path: inset(0 0 0 100%); opacity: 0; transform: translateX(18px); }
    to   { clip-path: inset(0 0 0 0);    opacity: 1; transform: none; }
}
@keyframes d-wipe-l {
    from { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateX(-18px); }
    to   { clip-path: inset(0 0 0 0);    opacity: 1; transform: none; }
}
@keyframes d-fade-up   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes d-drop      { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
@keyframes d-line-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes d-gem-pop   { 0% { transform: rotate(45deg) scale(0); } 70% { transform: rotate(225deg) scale(1.35); } 100% { transform: rotate(225deg) scale(1); } }
@keyframes d-breathe   { 0%, 100% { opacity: .55; scale: .94; } 50% { opacity: 1; scale: 1.06; } }
@keyframes d-spin      { to { transform: rotate(360deg); } }
@keyframes d-pulse     { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes d-dust      { from { transform: translateY(0); } to { transform: translateY(-900px); } }
@keyframes d-shine     { 0%, 55% { translate: 0 0; } 100% { translate: var(--shine-x, 500%) 0; } }
@keyframes d-nudge     { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
@keyframes d-kenburns  { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-2%, -2%, 0); } }
/* ملاحظة: d-card-in و d-rise-in بلا مرحلة «to» عمداً — فتنتهي الحركة عند القيمة الأصلية
   للعنصر ولا تُلغي رفعة الـ hover بعد انتهائها */
@keyframes d-card-in   { from { opacity: 0; transform: translateY(70px) scale(.95); } }
@keyframes d-card-out  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-18px) scale(.96); } }
@keyframes d-rise-in   { from { opacity: 0; transform: translateY(42px) scale(.97); } }
@keyframes d-detail-in { from { opacity: 0; transform: translateY(30px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes d-skel      { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (min-width: 769px) {

/* ==========================================================================
   0) المتغيّرات (تتبدل مع الثيم: ذهبي افتراضي / فضي-ألماسي / برونزي)
   ========================================================================== */
html body.emp-home {
    --d-gold: #d4af37;
    --d-gold-hi: #f5e7b2;
    --d-gold-lo: #b87c1a;
    --d-ivory: #fff4dc;
    --d-muted: #cdbf98;
    --d-line: rgba(212, 175, 55, .34);
    --d-line-soft: rgba(212, 175, 55, .16);
    --d-ease: cubic-bezier(.2, .8, .2, 1);
    --d-metal: linear-gradient(135deg, #fff3c4 0%, #f5e7b2 22%, #d4af37 55%, #b87c1a 100%);
    --d-panel: linear-gradient(180deg, rgba(24, 17, 42, .92), rgba(10, 7, 20, .94));
    --d-accent: 212, 175, 55;      /* لون الهالات والتوهج */
    --d-tint: 34, 22, 6;           /* لون أجواء الخلفية */
}
html body.emp-home.budget-mid { --d-accent: 150, 190, 255; --d-tint: 14, 28, 58; }
html body.emp-home.budget-low { --d-accent: 214, 150, 86;  --d-tint: 30, 18, 8; }

/* أداء/بطارية: لا تمويه خلفية (backdrop-filter) في الصفحة الرئيسية للكمبيوتر.
   كل عنصر بتمويه يُعيد المتصفح عيّنة وتمويه ما خلفه (الفيديو!) مع كل إطار؛ والواجهة هنا تعتمد
   أصلاً على لوحات معتمة (--d-panel) فلا فرق بصري يُذكر. نفس القاعدة مطبّقة أصلاً على الجوال. */
html body.emp-home *,
html body.emp-home *::before,
html body.emp-home *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ==========================================================================
   1) الأجواء السينمائية + شريط التقدّم
   ========================================================================== */
html body.emp-home .bg-overlay {
    overflow: hidden;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background:
        radial-gradient(110% 62% at 50% 0%, rgba(var(--d-tint), .62) 0%, rgba(3, 1, 8, 0) 72%),
        radial-gradient(125% 95% at 50% 46%, rgba(3, 1, 8, 0) 38%, rgba(2, 0, 6, .74) 100%),
        linear-gradient(180deg, rgba(3, 1, 8, .42) 0%, rgba(3, 1, 8, .72) 58%, rgba(3, 1, 8, .93) 100%);
}
/* غبار ذهبي عائم */
html body.emp-home .bg-overlay::after {
    content: '';
    position: absolute; left: 0; right: 0; top: 0;
    height: calc(100% + 900px);
    opacity: .6;
    background-repeat: repeat-y;
    background-size: 100% 900px;
    background-image:
        radial-gradient(circle 2px at 8% 9%,   rgba(245, 231, 178, .9),  rgba(245, 231, 178, 0)),
        radial-gradient(circle 1.5px at 24% 21%, rgba(212, 175, 55, .75),  rgba(212, 175, 55, 0)),
        radial-gradient(circle 2.5px at 37% 6%,  rgba(212, 175, 55, .85),  rgba(212, 175, 55, 0)),
        radial-gradient(circle 1.5px at 52% 33%, rgba(245, 231, 178, .7),  rgba(245, 231, 178, 0)),
        radial-gradient(circle 2px at 66% 17%,   rgba(245, 231, 178, .8),  rgba(245, 231, 178, 0)),
        radial-gradient(circle 1.5px at 81% 40%, rgba(212, 175, 55, .75),  rgba(212, 175, 55, 0)),
        radial-gradient(circle 2.5px at 93% 12%, rgba(245, 231, 178, .8),  rgba(245, 231, 178, 0)),
        radial-gradient(circle 2px at 14% 58%,   rgba(212, 175, 55, .8),   rgba(212, 175, 55, 0)),
        radial-gradient(circle 1.5px at 43% 66%, rgba(245, 231, 178, .7),  rgba(245, 231, 178, 0)),
        radial-gradient(circle 2px at 71% 74%,   rgba(212, 175, 55, .85),  rgba(212, 175, 55, 0)),
        radial-gradient(circle 1.5px at 88% 83%, rgba(245, 231, 178, .75), rgba(245, 231, 178, 0)),
        radial-gradient(circle 2px at 29% 92%,   rgba(212, 175, 55, .75),  rgba(212, 175, 55, 0));
    animation: d-dust 44s linear infinite;
}
html body.emp-home .ui-wrapper { overflow-x: clip; }

/* شريط تقدّم التمرير (الجوال يستعمل نفس العنصر؛ هنا نُظهره للكمبيوتر) */
html body.emp-home .m-progress {
    display: block;
    position: fixed; top: 0; left: 0; right: 0; height: 2px;
    z-index: 1700; pointer-events: none;
    background: var(--d-metal);
    box-shadow: 0 0 12px rgba(212, 175, 55, .8);
    transform-origin: right center;
    transform: scaleX(0);
}

/* ==========================================================================
   2) الشريط العلوي: شفاف فوق المشهد ← زجاج داكن عند التمرير
      [الشعار + الاسم] ............ [الروابط والإجراءات] [العملة]
   ========================================================================== */
html body.emp-home .navbar {
    position: sticky; top: 0; z-index: 1000;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    gap: .4rem 1.3rem;
    min-height: 94px; padding: .45rem 2.4rem;
    background: linear-gradient(180deg, rgba(3, 1, 8, .9) 0%, rgba(3, 1, 8, .55) 68%, rgba(3, 1, 8, 0) 100%);
    border: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    animation: d-drop 1s var(--d-ease) both;
    transition: background .45s ease, box-shadow .45s ease, min-height .45s var(--d-ease);
}
html body.emp-home .navbar.is-scrolled {
    min-height: 74px;
    background: rgba(6, 3, 14, .96);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .55);
}
html body.emp-home.budget-low .navbar.is-scrolled {
    background: linear-gradient(rgba(10, 5, 2, .9), rgba(10, 5, 2, .9)), url("../../images/wood-texture.ab7be0fbf7cb.png");
    background-size: cover; background-position: center;
}
/* خط ذهبي رفيع يتوهج عند التمرير */
html body.emp-home .navbar::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .85) 50%, transparent);
    box-shadow: 0 0 14px rgba(212, 175, 55, .55);
    opacity: .25; transition: opacity .45s ease;
}
html body.emp-home .navbar.is-scrolled::after { opacity: 1; }

/* الشعار + هالة نابضة */
html body.emp-home .navbar-logo { position: relative; order: 1; }
html body.emp-home .navbar-logo::before {
    content: '';
    position: absolute; left: 50%; top: 50%;
    width: 128px; height: 128px; margin: -64px 0 0 -64px;
    background: radial-gradient(closest-side, rgba(var(--d-accent), .42), rgba(var(--d-accent), 0));
    animation: d-breathe 4.5s ease-in-out infinite;
    pointer-events: none;
}
html body.emp-home .navbar-logo img {
    position: relative;
    max-height: 70px;
    filter: drop-shadow(0 0 12px rgba(var(--d-accent), .6));
    transition: max-height .45s var(--d-ease), filter .4s ease, transform .5s var(--d-ease);
}
html body.emp-home .navbar.is-scrolled .navbar-logo img { max-height: 54px; }
html body.emp-home .navbar-logo img:hover { transform: scale(1.06) rotate(-2deg); filter: drop-shadow(0 0 20px rgba(var(--d-accent), .9)); }

html body.emp-home .logo { order: 2; }
html body.emp-home .logo h1 { font-size: 2rem; letter-spacing: .06em; line-height: 1.15; }
html body.emp-home .logo p {
    margin-top: 0; text-align: right;
    font: 500 .58rem 'Cinzel', serif; letter-spacing: .36em;
}

/* الروابط والإجراءات */
html body.emp-home .nav-links {
    order: 3; margin: 0; margin-inline-start: auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem;
}
html body.emp-home .nav-links a:not(.btn-add-offer-green):not(.btn-profile-gold):not(.m-bell):not(.m-admin) {
    position: relative;
    padding: .5rem .95rem; border-radius: 999px;
    font-size: .95rem; font-weight: 600; color: #efe6cc;
    transition: color .3s ease, background .3s ease, text-shadow .3s ease;
}
html body.emp-home .nav-links a:not(.btn-add-offer-green):not(.btn-profile-gold):not(.m-bell):not(.m-admin):hover {
    color: var(--d-gold-hi); background: rgba(212, 175, 55, .1);
    text-shadow: 0 0 14px rgba(212, 175, 55, .55);
}
html body.emp-home .nav-links a:before {            /* خط التحديد: يتمدد من المنتصف */
    content: '';
    position: absolute; left: 22%; right: 22%; bottom: 3px; width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, var(--d-gold), transparent);
    transform: scaleX(0); transition: transform .4s var(--d-ease);
}
html body.emp-home .nav-links a:hover:before { width: auto; transform: scaleX(1); }
html body.emp-home .nav-links a.btn-add-offer-green:before,
html body.emp-home .nav-links a.btn-profile-gold:before,
html body.emp-home .nav-links a.m-bell:before,
html body.emp-home .nav-links a.m-admin:before { display: none; }

/* الجرس + لوحة الإدارة: دوائر زجاجية */
html body.emp-home .nav-links a.m-bell,
html body.emp-home .nav-links a.m-admin {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-width: 42px; height: 42px; padding: 0 .85rem; border-radius: 999px;
    color: var(--d-gold-hi); font-size: .95rem; font-weight: 700;
    background: rgba(8, 5, 16, .62); border: 1px solid var(--d-line);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    transition: background .3s ease, box-shadow .3s ease, transform .3s var(--d-ease);
}
html body.emp-home .nav-links a.m-bell { padding: 0; width: 42px; }
html body.emp-home .nav-links a.m-bell:hover,
html body.emp-home .nav-links a.m-admin:hover {
    background: rgba(212, 175, 55, .2); transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .45), 0 0 18px rgba(212, 175, 55, .35);
}
html body.emp-home .notification-badge { top: -4px; right: -4px; }

/* زر «إضافة عرض»: زمرد داكن بحافة ذهبية ولمعة */
html body.emp-home .btn-add-offer-green {
    position: relative; overflow: hidden;
    padding: .6rem 1.5rem; font-size: .95rem; font-weight: 800;
    background: linear-gradient(135deg, #0d5a38 0%, #17895a 55%, #0d5a38 100%);
    border: 1px solid rgba(245, 231, 178, .55);
    box-shadow: 0 8px 20px rgba(13, 90, 56, .45), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .35s var(--d-ease), box-shadow .35s ease;
}
html body.emp-home .btn-add-offer-green:hover {
    background: linear-gradient(135deg, #12704a 0%, #1fa56e 55%, #12704a 100%);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(13, 90, 56, .55), 0 0 22px rgba(212, 175, 55, .3), inset 0 1px 0 rgba(255, 255, 255, .3);
}
html body.emp-home .btn-add-offer-green::after,
html body.emp-home .btn-profile-gold::after {
    content: '';
    position: absolute; top: 0; bottom: 0; left: -70%; width: 40%; --shine-x: 500%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    transform: skewX(-18deg); animation: d-shine 5s ease-in-out infinite; pointer-events: none;
}
/* زر الملف الشخصي (ذهبي معدني) */
html body.emp-home .btn-profile-gold {
    position: relative; overflow: hidden;
    padding: .6rem 1.5rem; font-size: .95rem; font-weight: 800;
    background: var(--d-metal);
    border: 0; color: #1a1205 !important;
    box-shadow: 0 8px 20px rgba(212, 175, 55, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
    transition: transform .35s var(--d-ease), box-shadow .35s ease;
}
html body.emp-home .btn-profile-gold:hover {
    background: var(--d-metal);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(212, 175, 55, .5), 0 0 24px rgba(245, 231, 178, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* العملة: شريحة زجاجية في أقصى الطرف */
html body.emp-home .currency-selector-wrapper { order: 4; }
html body.emp-home .nav-link-currency {
    padding: .55rem 1.05rem; gap: 8px;
    font-size: .85rem; font-weight: 700; color: var(--d-gold-hi);
    background: rgba(8, 5, 16, .62); border: 1px solid var(--d-line);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    transition: background .3s ease, box-shadow .3s ease, transform .3s var(--d-ease);
}
html body.emp-home .nav-link-currency:hover {
    color: var(--d-ivory); background: rgba(212, 175, 55, .16);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .45), 0 0 18px rgba(212, 175, 55, .28);
}
html body.emp-home .nav-link-currency .cur-ico { display: inline; color: var(--d-gold); font-size: .85rem; }
html body.emp-home .currency-dropdown {
    left: 0; right: auto; margin-top: 10px; min-width: 230px; padding: .55rem;
    border-radius: 20px; background: rgba(8, 5, 16, .98); border: 1px solid var(--d-line);
    box-shadow: 0 26px 54px rgba(0, 0, 0, .65), 0 0 30px rgba(212, 175, 55, .1);
}
html body.emp-home .currency-dropdown li { padding: .7rem 1rem; border-radius: 13px; font-weight: 700; color: var(--d-ivory); }
html body.emp-home .currency-dropdown li:hover { background: rgba(212, 175, 55, .18); color: var(--d-gold-hi); }

/* ==========================================================================
   3) الرئيسية — الترحيب: زخرفة + عنوان سينمائي + سطران بكشف متدرّج
   ========================================================================== */
html body.emp-home .hero {
    position: relative; isolation: isolate;
    margin: clamp(2.2rem, 6vh, 4.4rem) auto 0; padding: 0 2rem;
    animation: none;
}
html body.emp-home .hero::before {                       /* هالة ذهبية خلف العنوان */
    content: '';
    position: absolute; z-index: -1; left: 50%; top: 50%;
    width: min(980px, 92%); height: 360px; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(var(--d-accent), .26), rgba(var(--d-accent), 0));
    animation: d-breathe 6s ease-in-out infinite;
    pointer-events: none;
}
html body.emp-home .hero::after {                        /* خط سفلي يتلاشى من الطرفين */
    content: '';
    display: block; width: min(360px, 60%); height: 1px; margin: 2.2rem auto 0;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .8), transparent);
    box-shadow: 0 0 12px rgba(212, 175, 55, .5);
    opacity: 1;
    transform-origin: center; animation: d-line-grow 1.4s 1.2s var(--d-ease) both;
}
html body.emp-home .hero-orn {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    width: min(340px, 60%); margin: 0 auto 18px;
}
html body.emp-home .hero-orn i {
    flex: 1; height: 1px; transform: scaleX(0);
    animation: d-line-grow 1.2s .45s var(--d-ease) forwards;
}
html body.emp-home .hero-orn i:first-child { background: linear-gradient(270deg, transparent, var(--d-gold)); transform-origin: left center; }
html body.emp-home .hero-orn i:last-child  { background: linear-gradient(90deg, transparent, var(--d-gold));  transform-origin: right center; }
html body.emp-home .hero-orn b {
    width: 11px; height: 11px; background: var(--d-metal);
    box-shadow: 0 0 16px rgba(212, 175, 55, .95);
    transform: rotate(45deg) scale(0);
    animation: d-gem-pop .9s .3s var(--d-ease) forwards;
}
html body.emp-home .hero h2 {
    margin: 0; padding-left: .14em;
    font-size: clamp(2.6rem, 5.2vw, 5rem); font-weight: 900; line-height: 1.12;
    letter-spacing: .14em; text-align: center;
    animation: d-title-in 1.7s var(--d-ease) both, silverShimmer 6s ease-in-out 1.7s infinite;
}
html body.emp-home.budget-mid .hero h2 { animation: d-title-in 1.7s var(--d-ease) both, diamondShimmer 4s linear 1.7s infinite; }
html body.emp-home.budget-low .hero h2 { animation: d-title-in 1.7s var(--d-ease) both, platinumShimmer 6s ease-in-out 1.7s infinite; }

html body.emp-home .hero .sub {
    max-width: 820px; margin: 1.5rem auto 0; padding: 0;
    letter-spacing: 0; font-weight: 400; text-shadow: none;
}
html body.emp-home .hero .sub .sub-ar {
    display: block;
    font: 700 clamp(1.15rem, 1.7vw, 1.55rem)/1.8 'Cairo', sans-serif;
    color: #fff6dc;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .95), 0 0 28px rgba(212, 175, 55, .42);
    animation: d-wipe-r 1.3s .85s var(--d-ease) both;
}
html body.emp-home .hero .sub .sub-sep { display: none; }
html body.emp-home .hero .sub .sub-en {
    display: block; margin-top: 2px; direction: ltr;
    font: 500 clamp(.8rem, 1vw, .98rem)/1.9 'Cinzel', serif; letter-spacing: .2em;
    color: var(--d-gold-hi);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .95);
    animation: d-wipe-l 1.3s 1.2s var(--d-ease) both;
}

/* ---- عنوان اختيار الدولة ---- */
html body.emp-home .m-realm-label {
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 16px;
    width: max-content; max-width: 100%; white-space: nowrap;
    margin: 2.2rem auto 0;
    color: var(--d-gold-hi); font: 700 1rem 'Cairo', sans-serif;
    animation: d-fade-up .9s 1.35s var(--d-ease) both;
}
html body.emp-home .m-realm-label::before,
html body.emp-home .m-realm-label::after {
    content: ''; flex: 0 1 120px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--d-line));
}
html body.emp-home .m-realm-label::after { background: linear-gradient(270deg, transparent, var(--d-line)); }
html body.emp-home .m-realm-label em { font: 500 .66rem 'Cinzel', serif; font-style: normal; letter-spacing: .3em; opacity: .7; }

/* ---- الدولة: أوسمة دائرية ---- */
html body.emp-home .main-countries-bar {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
    gap: 14px 28px; margin: 1rem auto 0; overflow: visible;
    animation: d-fade-up .9s 1.5s var(--d-ease) both;
}
html body.emp-home .main-countries-bar .country-btn,
html body.emp-home .main-countries-bar .country-btn:hover,
html body.emp-home .main-countries-bar .country-btn.active {
    flex: 0 0 auto; width: 118px; position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 11px;
    padding: 8px 0 2px; margin: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    color: var(--d-muted);
    font: 700 1rem/1.2 'Cairo', sans-serif;
}
html body.emp-home .main-countries-bar .country-btn .cb-flag {
    position: relative;
    display: grid; place-items: center;
    width: 82px; height: 82px; border-radius: 50%;
    font-size: 2.6rem; line-height: 1;
    background: radial-gradient(circle at 32% 24%, #3b2e55 0%, #130c24 62%, #07040f 100%);
    box-shadow: inset 0 0 0 1px var(--d-line), 0 10px 26px rgba(0, 0, 0, .55);
    transition: transform .5s var(--d-ease), box-shadow .5s ease;
}
html body.emp-home .main-countries-bar .country-btn .cb-flag:empty::after {
    content: attr(data-code); font: 700 1.1rem 'Cinzel', serif; color: var(--d-gold-hi);
}
html body.emp-home .main-countries-bar .country-btn .cb-flag::before {          /* حلقة ذهبية للمختار */
    content: ''; position: absolute; inset: -5px; border-radius: 50%;
    background: conic-gradient(from 0deg, #b87c1a, #fff3c4, #d4af37, #5c3f0a, #f5e7b2, #b87c1a);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    opacity: 0; transform: scale(.85);
    transition: opacity .4s ease, transform .5s var(--d-ease);
    animation: d-spin 7s linear infinite paused;
}
html body.emp-home .main-countries-bar .country-btn:hover .cb-flag {
    transform: translateY(-3px) scale(1.05);
    box-shadow: inset 0 0 0 1px rgba(255, 243, 196, .45), 0 0 26px rgba(212, 175, 55, .35), 0 14px 26px rgba(0, 0, 0, .6);
}
html body.emp-home .main-countries-bar .country-btn.active .cb-flag::before { opacity: 1; transform: scale(1); animation-play-state: running; }
html body.emp-home .main-countries-bar .country-btn.active .cb-flag {
    transform: translateY(-4px) scale(1.08);
    box-shadow: inset 0 0 0 1px rgba(255, 243, 196, .5), 0 0 0 7px rgba(212, 175, 55, .1), 0 0 38px rgba(212, 175, 55, .5), 0 16px 26px rgba(0, 0, 0, .6);
}
html body.emp-home .main-countries-bar .country-btn.active,
html body.emp-home .main-countries-bar .country-btn:hover { color: var(--d-gold-hi); }
html body.emp-home .main-countries-bar .country-btn.active .cb-name::after {
    content: ''; display: block; width: 24px; height: 2px; margin: 7px auto 0;
    border-radius: 2px; background: var(--d-metal); box-shadow: 0 0 10px rgba(212, 175, 55, .8);
}

/* ==========================================================================
   4) الفئات (برونزي / فضي / ذهبي) — سبائك معدنية على سكة زجاجية
   ========================================================================== */
html body.emp-home .class-buttons {
    display: grid; grid-template-columns: repeat(3, minmax(0, 190px)); justify-content: center;
    gap: 12px; width: fit-content; max-width: 100%;
    margin: 1.7rem auto .4rem; padding: 10px;
    background: rgba(8, 5, 16, .55);
    border: 1px solid var(--d-line-soft); border-radius: 30px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 243, 196, .08);
    animation: d-fade-up .9s 1.65s var(--d-ease) both;
}
html body.emp-home .class-btn {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-width: 0; height: 62px; padding: 0 1.2rem;
    font: 800 1.05rem/1 'Cairo', sans-serif; letter-spacing: 0;
    border-radius: 21px; border: 1px solid rgba(255, 255, 255, .22);
    transform: none;
    filter: saturate(.5) brightness(.62);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .5s var(--d-ease), filter .4s ease, box-shadow .4s ease;
}
html body.emp-home .class-btn::before {
    font: 900 1.05rem/1 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
}
html body.emp-home .class-bronze::before { content: '\f5a2'; }
html body.emp-home .class-silver::before { content: '\f559'; }
html body.emp-home .class-gold::before   { content: '\f521'; }
html body.emp-home .class-btn::after {                   /* لمعة معدنية تمر على الفئة المختارة */
    content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 42%; --shine-x: 476%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
    transform: skewX(-18deg);
    animation: d-shine 3.4s ease-in-out infinite paused;
    pointer-events: none;
}
html body.emp-home .class-btn:hover { filter: saturate(.9) brightness(.9); transform: translateY(-3px); }
html body.emp-home .class-btn.active,
html body.emp-home .class-btn.active:hover {
    transform: translateY(-5px) scale(1.05);
    filter: none;
    border-color: rgba(255, 255, 255, .85);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 30px var(--d-cglow, rgba(212, 175, 55, .7)), 0 18px 26px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
}
html body.emp-home .class-btn.active::after { animation-play-state: running; }
html body.emp-home .class-bronze { --d-cglow: rgba(224, 142, 74, .75); }
html body.emp-home .class-silver { --d-cglow: rgba(214, 222, 242, .65); }
html body.emp-home .class-gold   { --d-cglow: rgba(212, 175, 55, .8); }

/* ==========================================================================
   5) الأقسام الثلاثة — أعمدة سينمائية بتصميم «المنصة» (الوسطى أعلى)
   ========================================================================== */
html body.emp-home .cards-section { max-width: 1320px; padding: 2.4rem 2.4rem 1rem; }
html body.emp-home .cards-section::after { display: none; }
html body.emp-home .cards-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.7rem; align-items: end;
    margin-top: 1rem; counter-reset: d-gate;
}

html body.emp-home .card {
    --k: 0; --d-sp: 0;
    counter-increment: d-gate;
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "tt tt" "ds ds" "ct go";
    align-content: end; align-items: center; row-gap: 8px;
    min-height: clamp(430px, 62vh, 500px);
    padding: 1.7rem 1.8rem 1.6rem;
    text-align: right;
    border-radius: 32px;
    background: #0b0716; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid var(--d-line);
    box-shadow: 0 28px 56px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 243, 196, .26);
    opacity: 1; transform: none;
    animation: d-card-in 1s var(--d-ease) both;
    animation-delay: calc(var(--k) * .14s);
    transition: transform .6s var(--d-ease), border-color .4s ease, box-shadow .6s ease, --d-sp .5s ease;
}
html body.emp-home .card:nth-child(1) { --k: 0; }
html body.emp-home .card:nth-child(2) { --k: 1; min-height: clamp(480px, 70vh, 560px); }     /* المنصة: الوسطى أعلى */
html body.emp-home .card:nth-child(3) { --k: 2; }
html body.emp-home .card.card-fade-in  { animation: d-card-in .8s var(--d-ease) both; }
html body.emp-home .card.card-fade-out { animation: d-card-out .35s ease forwards; }

html body.emp-home .card:hover,
html body.emp-home.budget-mid .card:hover,
html body.emp-home.budget-low .card:hover {
    --d-sp: 1;
    transform: translateY(-14px);
    background: #0b0716;
    border-color: rgba(255, 243, 196, .72);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, .3), 0 44px 80px rgba(0, 0, 0, .7), 0 0 70px rgba(var(--d-accent), .26), inset 0 1px 0 rgba(255, 243, 196, .4);
}
html body.emp-home .card:active { scale: .985; }

/* خلفية البطاقة: صورة/فن + تعتيم متدرّج + ضوء يتبع المؤشر */
html body.emp-home .card::before {
    content: '';
    position: absolute; inset: 0; z-index: -2;
    background-size: cover; background-position: center;
    animation: d-kenburns 22s ease-in-out infinite alternate;
    transition: scale .9s var(--d-ease), filter .6s ease;
}
html body.emp-home .card:hover::before { scale: 1.1; filter: saturate(1.15) brightness(1.08); }
html body.emp-home .card::after {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), rgba(var(--d-accent), calc(.3 * var(--d-sp))), rgba(var(--d-accent), 0) 62%),
        linear-gradient(180deg, rgba(5, 3, 12, .12) 0%, rgba(5, 3, 12, .5) 46%, rgba(5, 3, 12, .96) 100%),
        linear-gradient(90deg, rgba(212, 175, 55, .1), transparent 45%);
}
/* 01: السيارات — خط الأفق الذهبي */
html body.emp-home .card:nth-child(1)::before {
    background-image: url("../../images/background.d74a47f96372.jpg");
    background-position: 76% 62%;
}
/* 02: الدراجات — قماش دافئ بشعار الدراجة الضخم */
html body.emp-home .card:nth-child(2)::before {
    content: '\f21c';
    font: 900 19rem/1 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
    color: rgba(212, 175, 55, .14);
    display: grid; place-items: start end; text-align: left;
    padding: 76px 14px 0 0;
    background:
        radial-gradient(70% 55% at 24% 36%, rgba(184, 124, 26, .5), rgba(184, 124, 26, 0) 70%),
        repeating-linear-gradient(115deg, transparent 0 22px, rgba(212, 175, 55, .07) 22px 24px),
        linear-gradient(135deg, #1d1109 0%, #2c180a 42%, #0b0716 100%);
}
/* 03: العقارات — شرفة البنتهاوس عند الغروب */
html body.emp-home .card:nth-child(3)::before {
    background-image: url("../../images/background-buildings.e0d49fdf752e.jpg");
    background-position: 38% 50%;
}

/* ختم الأيقونة: أعلى البطاقة */
html body.emp-home .card .card-ico {
    position: absolute; top: 1.5rem; right: 1.6rem;
    display: grid; place-items: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(8, 5, 16, .62);
    border: 1px solid var(--d-line);
    box-shadow: 0 0 0 6px rgba(212, 175, 55, .08), inset 0 0 18px rgba(212, 175, 55, .22);
    transition: transform .6s var(--d-ease), box-shadow .5s ease;
}
html body.emp-home .card:hover .card-ico {
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 0 0 8px rgba(212, 175, 55, .12), 0 0 28px rgba(212, 175, 55, .4), inset 0 0 18px rgba(212, 175, 55, .3);
}
html body.emp-home .card .card-ico i,
html body.emp-home.budget-mid .card .card-ico i,
html body.emp-home.budget-low .card .card-ico i,
html body.emp-home .card:hover .card-ico i {
    margin: 0; font-size: 1.6rem; transform: none;
    background: var(--d-metal);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent; filter: none;
}
html body.emp-home .card h3,
html body.emp-home.budget-mid .card h3,
html body.emp-home.budget-low .card h3 {
    grid-area: tt; margin: 0;
    font: 800 clamp(1.9rem, 2.6vw, 2.7rem)/1.15 'Cairo', sans-serif; letter-spacing: 0;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .95), 0 0 30px rgba(212, 175, 55, .3);
}
html body.emp-home .card h3::before {                   /* الرقم التسلسلي 01 · 02 · 03 */
    content: counter(d-gate, decimal-leading-zero);
    display: block; margin-bottom: 4px;
    font: 900 .9rem/1 'Cinzel', serif; letter-spacing: .38em;
    color: var(--d-gold);
}
html body.emp-home .card h3 small,
html body.emp-home.budget-mid .card h3 small,
html body.emp-home.budget-low .card h3 small {
    display: block; margin-top: 6px;
    font: 500 .7rem/1.5 'Cinzel', serif; letter-spacing: .32em;
    color: var(--d-gold-hi); text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}
html body.emp-home .card p,
html body.emp-home.budget-mid .card p,
html body.emp-home.budget-low .card p {
    grid-area: ds; margin: 4px 0 0; max-width: 34ch;
    font: 500 .98rem/1.8 'Cairo', sans-serif; color: #eadfbe;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .95);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
html body.emp-home .card .card-count {
    grid-area: ct; justify-self: start; align-self: center;
    margin: 12px 0 0 !important; padding: 6px 15px;
    font-size: .82rem !important; font-weight: 700;
    color: var(--d-gold-hi) !important;
    border-radius: 999px;
    background: rgba(212, 175, 55, .16); border: 1px solid var(--d-line);
}
html body.emp-home .card .card-category-image { display: none; }

/* زر الدخول: قرص ذهبي بسهم يتحرك */
html body.emp-home .card .btn-emp,
html body.emp-home .card .btn-emp:hover,
html body.emp-home.budget-mid .card .btn-emp,
html body.emp-home.budget-mid .card .btn-emp:hover,
html body.emp-home.budget-low .card .btn-emp,
html body.emp-home.budget-low .card .btn-emp:hover {
    grid-area: go; justify-self: end; margin: 10px 0 0; padding: 0;
    display: grid; place-items: center;
    width: 60px; height: 60px; border-radius: 50%;
    font-size: 0; line-height: 0;
    background: var(--d-metal); border: 0; text-shadow: none;
    box-shadow: 0 0 0 6px rgba(212, 175, 55, .16), 0 0 30px rgba(212, 175, 55, .5);
    transform: none;
    transition: scale .5s var(--d-ease), box-shadow .5s ease;
}
html body.emp-home .card:hover .btn-emp {
    scale: 1.12;
    box-shadow: 0 0 0 9px rgba(212, 175, 55, .2), 0 0 44px rgba(245, 231, 178, .7);
}
html body.emp-home .card .btn-emp i,
html body.emp-home.budget-mid .card .btn-emp i,
html body.emp-home.budget-low .card .btn-emp i,
html body.emp-home .card:hover .btn-emp i {
    margin: 0; font-size: 1.3rem;
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    color: #1a1205; -webkit-text-fill-color: #1a1205; filter: none; transform: none;
    animation: d-nudge 1.8s ease-in-out infinite;
}

/* ==========================================================================
   6) التذييل
   ========================================================================== */
html body.emp-home .footer {
    position: relative; margin-top: 3rem; padding: 2.8rem 2.4rem 1.5rem;
    background: linear-gradient(180deg, rgba(4, 2, 10, 0) 0%, rgba(4, 2, 10, .9) 40%);
    border: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
html body.emp-home .footer::before {
    content: '';
    position: absolute; top: 0; left: 50%; width: min(560px, 60%); height: 1px; transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--d-gold), transparent);
    box-shadow: 0 0 14px rgba(212, 175, 55, .5);
}
html body.emp-home .footer-center p { font-size: .92rem; line-height: 1.9; }
html body.emp-home .footer-sub { font-size: .76rem !important; letter-spacing: .04em; }
html body.emp-home .social-item,
html body.emp-home .footer-link-item {
    background: rgba(8, 5, 16, .62); border: 1px solid var(--d-line);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
    transition: transform .35s var(--d-ease), background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
html body.emp-home .social-item:hover,
html body.emp-home .footer-link-item:hover {
    background: rgba(212, 175, 55, .16); border-color: rgba(245, 231, 178, .6);
    transform: translateY(-3px);
    box-shadow: 0 12px 22px rgba(0, 0, 0, .4), 0 0 18px rgba(212, 175, 55, .3);
}

/* ==========================================================================
   7) العرض الموسّع — الرأس والعنوان
   ========================================================================== */
html body.emp-home .expanded-view { max-width: 1320px; margin: 1.4rem auto 2rem; padding: 0 2.2rem 3.5rem; }
html body.emp-home .expanded-header { padding: .4rem 0 0; }
html body.emp-home .back-btn,
html body.emp-home.budget-mid .back-btn,
html body.emp-home.budget-low .back-btn {
    padding: .7rem 1.5rem .7rem 1.3rem; font-size: .95rem; font-weight: 700; border-radius: 999px;
    color: var(--d-gold-hi); text-shadow: none;
    background: rgba(8, 5, 16, .66); border: 1px solid var(--d-line);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
    transition: transform .4s var(--d-ease), background .3s ease, box-shadow .3s ease, color .3s ease;
}
html body.emp-home .back-btn:hover,
html body.emp-home.budget-mid .back-btn:hover,
html body.emp-home.budget-low .back-btn:hover {
    background: var(--d-metal); color: #1a1205; border-color: transparent;
    transform: translateX(6px);
    box-shadow: 0 12px 26px rgba(212, 175, 55, .42);
}

html body.emp-home .expanded-title-wrapper {
    position: relative;
    margin: .4rem auto 1.6rem; padding: 0; width: auto; max-width: none;
    text-align: center; border: 0; border-radius: 0;
    background: none !important; backdrop-filter: none; -webkit-backdrop-filter: none;
}
html body.emp-home .expanded-title-wrapper::after {      /* زخرفة: خط + ألماسة + خط */
    content: '';
    display: block; width: 240px; height: 11px; margin: 16px auto 0;
    background:
        radial-gradient(circle 5px at 50% 50%, #f5e7b2 0 70%, rgba(245, 231, 178, 0) 72%),
        linear-gradient(90deg, transparent, rgba(212, 175, 55, .9) 38%, transparent 38.5%) left center / 50% 1px no-repeat,
        linear-gradient(270deg, transparent, rgba(212, 175, 55, .9) 38%, transparent 38.5%) right center / 50% 1px no-repeat;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, .7));
    transform-origin: center; animation: d-line-grow .9s .35s var(--d-ease) both;
}
html body.emp-home .expanded-title {
    display: block; font: 800 clamp(2rem, 3.4vw, 3.1rem)/1.3 'Cairo', sans-serif; letter-spacing: 0;
    animation: d-wipe-r 1s var(--d-ease) both, goldShimmer 8s ease-in-out 1s infinite;
}
html body.emp-home.budget-mid .expanded-title { animation: d-wipe-r 1s var(--d-ease) both, diamondShimmer 4s linear 1s infinite; }
html body.emp-home.budget-low .expanded-title { animation: d-wipe-r 1s var(--d-ease) both, platinumShimmer 6s ease-in-out 1s infinite; }
html body.emp-home .expanded-title .et-sep { display: none; }
html body.emp-home .expanded-title .et-en {
    display: block; margin-top: 4px; font: 500 .8rem/1.4 'Cinzel', serif !important;
    letter-spacing: .42em; opacity: .9;
}

/* ==========================================================================
   8) العرض الموسّع — أقسام التحكم: الفئات + المدن + إيجار/بيع
   ========================================================================== */
html body.emp-home .control-section {
    background: none; border: 0; border-radius: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 0; margin: .5rem 0; width: 100%; display: block;
}
html body.emp-home #classButtonsExpanded { margin: .4rem auto; animation: none; }
html body.emp-home #classButtonsExpanded .class-btn { height: 54px; font-size: 1rem; }

/* المدن: رف زجاجي بشرائح معدنية */
html body.emp-home .cities-bar,
html body.emp-home .control-section .cities-bar {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px 11px; width: auto; max-width: 1120px;
    margin: .9rem auto .5rem; padding: 1.1rem 1.4rem;
    background: var(--d-panel);
    border: 1px solid var(--d-line); border-radius: 28px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 243, 196, .1);
}
html body.emp-home .city-btn,
html body.emp-home.budget-mid .city-btn,
html body.emp-home.budget-low .city-btn {
    padding: .55rem 1.35rem; font: 700 .95rem 'Cairo', sans-serif; letter-spacing: 0;
    border-radius: 999px;
    background: rgba(14, 10, 26, .88);
    border: 1px solid var(--d-line-soft);
    color: #e9e2c7; text-shadow: none;
    box-shadow: none;
    transition: transform .35s var(--d-ease), background .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
html body.emp-home .city-btn:hover,
html body.emp-home.budget-mid .city-btn:hover,
html body.emp-home.budget-low .city-btn:hover {
    background: rgba(212, 175, 55, .14); border-color: var(--d-gold); color: var(--d-gold-hi);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .4), 0 0 16px rgba(212, 175, 55, .22);
}
html body.emp-home .city-btn.active,
html body.emp-home .city-btn.active:hover,
html body.emp-home.budget-mid .city-btn.active,
html body.emp-home.budget-low .city-btn.active {
    background: var(--d-metal); color: #1a1205; font-weight: 800; text-shadow: none;
    border-color: transparent; transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(212, 175, 55, .45);
}

/* إيجار / بيع: مفتاح مقسوم */
html body.emp-home .rent-sale-buttons {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    width: fit-content; min-width: 300px; margin: 1.1rem auto 1.3rem; padding: 5px;
    background: rgba(8, 5, 16, .85);
    border: 1px solid var(--d-line); border-radius: 999px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
}
html body.emp-home .rent-sale-btn,
html body.emp-home .rent-sale-btn:hover {
    padding: .7rem 1.4rem; font: 700 1.05rem 'Cairo', sans-serif; letter-spacing: 0;
    border: 0; background: transparent; border-radius: 999px;
    box-shadow: none; transform: none; color: var(--d-muted);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: background .35s ease, color .35s ease, box-shadow .35s ease;
}
html body.emp-home .rent-sale-btn:hover { color: var(--d-gold-hi); }
html body.emp-home .rent-sale-btn.active,
html body.emp-home .rent-sale-btn.active:hover {
    background: var(--d-metal); color: #1a1205; font-weight: 800;
    box-shadow: 0 6px 18px rgba(212, 175, 55, .42);
}

/* فئات العقارات: بطاقات زجاجية بأيقونة في قرص */
html body.emp-home .realestate-categories-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.1rem; margin: 1rem 0 1.6rem; }
html body.emp-home .realestate-category-card {
    padding: 1.2rem .9rem 1.1rem; border-radius: 24px;
    background: var(--d-panel); backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid var(--d-line-soft);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 243, 196, .08);
    transition: transform .45s var(--d-ease), border-color .3s ease, box-shadow .4s ease, background .3s ease;
}
html body.emp-home .realestate-category-card:hover {
    transform: translateY(-8px); border-color: var(--d-gold);
    background: linear-gradient(180deg, rgba(40, 28, 66, .95), rgba(14, 10, 26, .96));
    box-shadow: 0 24px 44px rgba(0, 0, 0, .55), 0 0 28px rgba(212, 175, 55, .22);
}
html body.emp-home .realestate-category-card i {
    display: inline-grid; place-items: center;
    width: 58px; height: 58px; margin-bottom: .7rem; border-radius: 50%;
    font-size: 1.5rem;
    background: radial-gradient(circle at 35% 25%, #2d2142, #0a0614 72%);
    box-shadow: inset 0 0 0 1px var(--d-line), 0 0 0 5px rgba(212, 175, 55, .07);
    color: var(--d-gold); -webkit-text-fill-color: var(--d-gold);
}
html body.emp-home .realestate-category-card h4 { font: 800 1.15rem 'Cairo', sans-serif; color: var(--d-ivory); }
html body.emp-home .realestate-category-card p { font-size: .8rem; color: var(--d-muted); }
html body.emp-home .realestate-category-card.active {
    background: linear-gradient(180deg, rgba(212, 175, 55, .26), rgba(212, 175, 55, .08));
    border-color: var(--d-gold-hi); transform: translateY(-4px);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, .35), 0 18px 38px rgba(0, 0, 0, .5), 0 0 30px rgba(212, 175, 55, .3);
}
html body.emp-home .realestate-category-card.disabled-category { opacity: .45 !important; }

/* ==========================================================================
   9) العرض الموسّع — الفلاتر
   ========================================================================== */
html body.emp-home .filters-panel {
    margin: 1rem 0 1.4rem; padding: 1.4rem 1.6rem; gap: 1rem;
    border-radius: 28px;
    background: var(--d-panel); backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid var(--d-line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 243, 196, .1);
}
html body.emp-home .filters-panel .primary-row { gap: 1rem; align-items: flex-end; }
html body.emp-home .filters-panel .primary-row .filter-group label,
html body.emp-home .filter-group label {
    font-size: .85rem; font-weight: 700; color: var(--d-gold-hi); margin-bottom: .4rem;
}
html body.emp-home .filters-panel .primary-row select,
html body.emp-home .filter-group select,
html body.emp-home .filter-group input,
html body.emp-home .range-vertical .range-row input {
    height: 48px; padding-top: 0; padding-bottom: 0; border-radius: 16px;
    background-color: rgba(4, 2, 10, .78);
    border: 1px solid var(--d-line-soft); color: #f5e7b2;
    transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
html body.emp-home .filter-group select { padding-right: 1rem; padding-left: 2.2rem; }
html body.emp-home .filters-panel .primary-row select:hover,
html body.emp-home .filter-group select:hover,
html body.emp-home .filter-group input:hover,
html body.emp-home .range-vertical .range-row input:hover { border-color: rgba(212, 175, 55, .6); }
html body.emp-home .filter-group select:focus,
html body.emp-home .filter-group input:focus,
html body.emp-home .range-vertical .range-row input:focus {
    border-color: var(--d-gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, .16), 0 0 18px rgba(212, 175, 55, .22);
}
html body.emp-home .filters-panel .btn-all,
html body.emp-home .filters-panel .btn-extra {
    height: 48px; padding: 0 1.3rem; border-radius: 16px; font-size: .98rem;
    background: rgba(212, 175, 55, .12); border: 1px solid var(--d-line); color: var(--d-gold-hi);
    transition: transform .35s var(--d-ease), background .3s ease, color .3s ease, box-shadow .3s ease;
}
html body.emp-home .filters-panel .btn-all:hover,
html body.emp-home .filters-panel .btn-extra:hover {
    background: var(--d-metal); color: #1a1205; border-color: transparent;
    transform: translateY(-2px); box-shadow: 0 10px 22px rgba(212, 175, 55, .35);
}
html body.emp-home #toggleCarExtraFiltersBtn { margin-top: 0; }
html body.emp-home .filters-panel .extra-content { padding-top: 1.2rem; border-top: 1px solid var(--d-line-soft); }
html body.emp-home .filters-panel .extra-content.show {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem 1.4rem;
    animation: d-fade-up .5s var(--d-ease) both;
}
html body.emp-home .filters-panel .extra-content .filter-group { margin: 0; }
html body.emp-home .filters-panel .extra-content .checkbox-group,
html body.emp-home .filters-panel .extra-content .filter-buttons { grid-column: 1 / -1; margin: 0; }
html body.emp-home .range-vertical .range-sep { color: var(--d-gold); font-size: 1.1rem; }
html body.emp-home .checkbox-group { gap: .7rem; }
html body.emp-home .checkbox-group label {
    padding: .55rem 1.05rem; border-radius: 14px; font-size: .9rem;
    background: rgba(0, 0, 0, .4); border: 1px solid var(--d-line-soft);
    transition: border-color .3s ease, background .3s ease;
}
html body.emp-home .checkbox-group label:hover { border-color: var(--d-gold); background: rgba(212, 175, 55, .1); }
html body.emp-home .checkbox-group input { accent-color: #d4af37; }
html body.emp-home .filter-buttons { gap: .9rem; margin-top: .4rem; }
html body.emp-home .filter-btn {
    height: 48px; border-radius: 16px; font-size: .98rem; font-weight: 700;
    background: linear-gradient(135deg, rgba(212, 175, 55, .2), rgba(0, 0, 0, .4));
    border: 1px solid var(--d-line);
    transition: transform .35s var(--d-ease), background .3s ease, color .3s ease, box-shadow .3s ease;
}
html body.emp-home .filter-btn:hover {
    background: var(--d-metal); color: #1a1205; border-color: transparent;
    transform: translateY(-2px); box-shadow: 0 10px 22px rgba(212, 175, 55, .35);
}
html body.emp-home .select2-container--default .select2-selection--single {
    min-height: 48px; border-radius: 16px !important;
    border-color: var(--d-line-soft) !important;
}
html body.emp-home .select2-dropdown { border-radius: 16px !important; }

/* ==========================================================================
   10) العرض الموسّع — بطاقات العروض: صورة كبيرة وسعر ذهبي عائم
   ========================================================================== */
html body.emp-home .realestate-items-grid,
html body.emp-home .products-grid {
    gap: 1.8rem; margin-top: 1.4rem; align-items: stretch;
}
html body.emp-home .realestate-item-card,
html body.emp-home .card-item {
    position: relative;
    display: flex; flex-direction: column;
    padding: 0; text-align: right; overflow: hidden;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(24, 17, 42, .95), rgba(9, 6, 18, .97));
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid var(--d-line);
    box-shadow: 0 22px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 243, 196, .12);
    animation: d-rise-in .8s var(--d-ease) both;
    transition: transform .55s var(--d-ease), border-color .35s ease, box-shadow .55s ease;
}
html body.emp-home .realestate-item-card:hover,
html body.emp-home .card-item:hover,
html body.emp-home.budget-mid .card-item:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 243, 196, .7);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, .28), 0 38px 66px rgba(0, 0, 0, .65), 0 0 46px rgba(var(--d-accent), .2), inset 0 1px 0 rgba(255, 243, 196, .3);
}
/* طبقة الضوء الذهبي التابع للمؤشر — وتحلّ محل إطار الإنستغرام الملوّن (لا يليق بالذهب) */
html body.emp-home .realestate-item-card { --d-sp: 0; }
html body.emp-home .realestate-item-card:hover { --d-sp: 1; }
html body.emp-home .realestate-item-card,
html body.emp-home .card-item { transition: transform .55s var(--d-ease), border-color .35s ease, box-shadow .55s ease, --d-sp .5s ease; }
html body.emp-home .realestate-item-card::before,
html body.emp-home .realestate-item-card.featured-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2;
    border-radius: inherit; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(var(--d-accent), calc(.16 * var(--d-sp))), rgba(var(--d-accent), 0) 62%);
    background-size: auto; animation: none;
}
html body.emp-home .card-item.featured-card::before { display: none; }
html body.emp-home .realestate-item-card.featured-card {
    border: 1px solid rgba(245, 231, 178, .75);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, .3), 0 24px 52px rgba(212, 175, 55, .16);
}
@supports (animation-timeline: view()) {
    html body.emp-home .realestate-item-card {
        animation: d-card-in linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }
}
html body.emp-home .realestate-item-card .card-image-wrapper { overflow: hidden; background: #000; }
html body.emp-home .realestate-item-card .card-image-wrapper::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
    background: linear-gradient(180deg, rgba(9, 6, 18, 0), rgba(9, 6, 18, .96));
    pointer-events: none;
}
html body.emp-home .realestate-item-card .card-image-wrapper > img:first-child {
    display: block; width: 100%; height: auto !important;
    aspect-ratio: 16 / 11; object-fit: cover; margin: 0; border-radius: 0;
    transition: scale .9s var(--d-ease);
}
html body.emp-home .realestate-item-card:hover .card-image-wrapper > img:first-child { scale: 1.08; }
html body.emp-home .realestate-item-card > div:last-child {
    flex: 1; display: flex; flex-direction: column;
    padding: 0 1.4rem 1.4rem !important;
}
html body.emp-home .realestate-item-card .price {                       /* السعر: شارة ذهبية على حافة الصورة */
    order: -1; align-self: flex-start; position: relative; z-index: 3;
    margin: -26px 0 12px;
    padding: .5rem 1.3rem; border-radius: 999px;
    background: var(--d-metal); color: #1a1205;
    font: 900 1.2rem/1.3 'Cairo', sans-serif; text-shadow: none;
    box-shadow: 0 0 0 5px rgba(9, 6, 18, .95), 0 12px 26px rgba(0, 0, 0, .55), 0 0 28px rgba(212, 175, 55, .35);
}
html body.emp-home .realestate-item-card h4 {
    font: 800 1.3rem/1.5 'Cairo', sans-serif; color: var(--d-ivory); margin: 0 0 3px !important;
    text-shadow: none;
}
html body.emp-home .realestate-item-card p {
    font-size: .88rem !important; color: var(--d-muted); margin: 0 0 8px !important; text-shadow: none;
}
html body.emp-home .realestate-item-card > div:last-child > p::before {
    content: '\f3c5'; font: 900 .85rem 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
    color: var(--d-gold); margin-left: 8px;
}
html body.emp-home .realestate-item-card .quick-info {
    justify-content: flex-start; flex-wrap: wrap; gap: 7px; margin: 2px 0 10px;
}
html body.emp-home .realestate-item-card .quick-info span {
    padding: 5px 13px; font-size: .8rem; border-radius: 999px;
    background: rgba(212, 175, 55, .1); border: 1px solid var(--d-line-soft); color: #f1e6c4;
}
html body.emp-home .realestate-item-card .re-rep { justify-content: flex-start !important; gap: 8px !important; margin-bottom: 6px !important; }
html body.emp-home .realestate-item-card .re-owner { font-size: .85rem !important; margin-top: 2px !important; }
html body.emp-home .realestate-item-card .re-stats {
    flex-direction: row !important; flex-wrap: wrap; gap: 4px 14px !important;
    margin-top: 8px !important; font-size: .75rem !important;
}
html body.emp-home .realestate-item-card .btn-detail,
html body.emp-home .realestate-item-card .btn-detail:hover {
    position: relative; overflow: hidden;
    width: 100% !important; margin-top: auto !important;
    padding: .95rem 1rem !important; font: 800 1rem 'Cairo', sans-serif !important;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: 18px;
    background: var(--d-metal); color: #1a1205 !important; text-shadow: none;
    box-shadow: 0 12px 26px rgba(212, 175, 55, .3);
    transform: none;
    transition: box-shadow .4s ease, filter .3s ease;
}
html body.emp-home .realestate-item-card .btn-detail:hover { box-shadow: 0 16px 34px rgba(212, 175, 55, .5); filter: brightness(1.06); }
html body.emp-home .realestate-item-card .btn-detail::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 40%; --shine-x: 500%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .65), rgba(255, 255, 255, 0));
    transform: skewX(-18deg); animation: d-shine 4s ease-in-out infinite paused; pointer-events: none;
}
html body.emp-home .realestate-item-card:hover .btn-detail::after,
html body.emp-home .realestate-item-card .btn-detail:focus-visible::after { animation-play-state: running; }
/* ضمان وجود مسافة فوق الزر مهما كان محتوى البطاقة */
html body.emp-home .realestate-item-card .btn-detail { margin-bottom: 0; }
html body.emp-home .featured-badge,
html body.emp-home .featured-badge:hover {
    top: 14px; right: auto; left: 14px; z-index: 4;
    padding: .38rem .9rem; font: 800 .78rem 'Cairo', sans-serif; border-radius: 999px;
    background: var(--d-metal); color: #1a1205; text-shadow: none; border: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 0 18px rgba(212, 175, 55, .5); animation: none;
}
html body.emp-home .featured-badge::before { display: none; }
html body.emp-home .skeleton-card { border-radius: 30px; border-color: var(--d-line-soft); }
html body.emp-home .skeleton-image {
    background: linear-gradient(90deg, #1b1430 25%, #2e2348 50%, #1b1430 75%); background-size: 200% 100%;
    animation: d-skel 1.6s linear infinite;
}

/* ==========================================================================
   11) العرض الموسّع — تفاصيل العرض
   ========================================================================== */
html body.emp-home .property-detail-view,
html body.emp-home.property-detail-bg .property-detail-view {
    padding: 0; background: transparent; box-shadow: none; border-radius: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
html body.emp-home.property-detail-bg .property-detail-view { animation: d-detail-in .8s var(--d-ease) both; }

html body.emp-home .main-image-container {
    position: relative;
    height: clamp(340px, 56vh, 560px); margin: .6rem 0 1rem;
    border-radius: 32px;
    background: radial-gradient(90% 100% at 50% 50%, #120c20, #04020a);
    border: 1px solid var(--d-line);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .65), 0 0 0 7px rgba(212, 175, 55, .06), inset 0 1px 0 rgba(255, 243, 196, .15);
}
html body.emp-home .main-image-container::after {                          /* ظل داخلي رقيق */
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 0 70px rgba(0, 0, 0, .55);
}
html body.emp-home .main-img { transition: transform .8s var(--d-ease); }
html body.emp-home .main-img:hover { transform: scale(1.025); }

html body.emp-home .thumbnails-scroll {
    max-width: min(100%, 780px); margin: 0 auto 1.4rem; padding: .4rem .2rem;
    border-radius: 18px;
}
html body.emp-home .thumbnails-wrapper { gap: .8rem; }
html body.emp-home .thumb-img,
html body.emp-home .thumb-placeholder {
    width: 112px; height: 84px; border-radius: 16px;
    border: 2px solid rgba(212, 175, 55, .4);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
    transition: transform .4s var(--d-ease), border-color .3s ease, box-shadow .3s ease;
}
html body.emp-home .thumb-img:hover {
    transform: translateY(-4px) scale(1.04); border-color: var(--d-gold-hi);
    box-shadow: 0 14px 24px rgba(0, 0, 0, .55), 0 0 18px rgba(212, 175, 55, .35);
}

html body.emp-home .detail-header {
    margin: 0 0 1.1rem; padding: 1.4rem 5rem 1.3rem 1.8rem; text-align: right;
    border: 1px solid var(--d-line); border-radius: 28px;
    background: var(--d-panel); backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 243, 196, .1);
}
html body.emp-home .detail-title,
html body.emp-home.property-detail-bg .detail-title {
    font: 800 clamp(1.5rem, 2.3vw, 2.1rem)/1.5 'Cairo', sans-serif;
    color: var(--d-ivory); text-shadow: 0 0 22px rgba(212, 175, 55, .38);
}
html body.emp-home .detail-badge,
html body.emp-home.property-detail-bg .detail-badge {
    margin: .6rem 0 0; padding: .3rem 1.1rem; font-size: .85rem; font-weight: 700;
    border-radius: 999px; color: var(--d-gold-hi);
    background: rgba(212, 175, 55, .16); border: 1px solid var(--d-line); box-shadow: none;
}
html body.emp-home .favorite-star {
    background: rgba(8, 5, 16, .7); border: 1px solid var(--d-line); color: var(--d-gold-hi);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .4);
}
html body.emp-home .favorite-star:hover { background: rgba(212, 175, 55, .22); border-color: var(--d-gold); box-shadow: 0 0 22px rgba(212, 175, 55, .4); }
html body.emp-home .favorite-star.active { background: var(--d-metal); color: #1a1205; border-color: transparent; text-shadow: none; }

html body.emp-home .detail-description,
html body.emp-home.property-detail-bg .detail-description {
    padding: 1.3rem 1.6rem; margin-bottom: 1.1rem; line-height: 1.95; font-size: 1rem;
    border-radius: 24px; color: #efe5c8;
    background: rgba(12, 8, 22, .9); border: 1px solid var(--d-line-soft);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
html body.emp-home .detail-info-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; margin-top: 0; }
html body.emp-home .info-item,
html body.emp-home.property-detail-bg .info-item {
    padding: 1rem 1.2rem; border-radius: 20px;
    background: rgba(14, 10, 26, .92); border: 1px solid var(--d-line-soft); border-right: 3px solid var(--d-gold);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: transform .4s var(--d-ease), box-shadow .4s ease, border-color .3s ease;
}
html body.emp-home .info-item:hover {
    transform: translateY(-4px); border-color: rgba(212, 175, 55, .5);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .45), 0 0 20px rgba(212, 175, 55, .14);
}
html body.emp-home .info-label { font-size: .8rem; font-weight: 600; }
html body.emp-home .info-value { font-size: 1.02rem; word-break: break-word; }
html body.emp-home .features-list span {
    padding: .45rem 1.05rem; border: 1px solid var(--d-line-soft);
    background: rgba(212, 175, 55, .1);
}

/* شريط الإجراءات: لوح زجاجي عائم أسفل الشاشة */
html body.emp-home .detail-actions {
    position: sticky; bottom: 20px; z-index: 800;
    flex-wrap: nowrap; gap: .8rem;
    width: fit-content; max-width: 100%; margin: 1.8rem auto 0; padding: .6rem;
    background: rgba(6, 3, 14, .94);
    border: 1px solid var(--d-line); border-radius: 26px;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, .55), 0 18px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(212, 175, 55, .12);
}
html body.emp-home .detail-actions button {
    padding: .85rem 1.8rem; font-size: .98rem; font-weight: 700; border-radius: 19px;
    background: rgba(212, 175, 55, .1); border: 1px solid var(--d-line-soft); color: var(--d-gold-hi);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: transform .35s var(--d-ease), background .3s ease, color .3s ease, box-shadow .3s ease;
}
html body.emp-home .detail-actions button:hover {
    background: rgba(212, 175, 55, .24); color: var(--d-ivory); border-color: var(--d-gold);
    transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .4);
}
html body.emp-home .detail-actions .contact-btn,
html body.emp-home .detail-actions .contact-btn:hover {
    background: var(--d-metal); color: #1a1205; border-color: transparent; font-weight: 800;
    box-shadow: 0 10px 26px rgba(212, 175, 55, .38);
}
html body.emp-home .detail-actions .contact-btn:hover { box-shadow: 0 14px 34px rgba(212, 175, 55, .55); filter: brightness(1.06); }
/* في وضع التفاصيل تبقى خلفية الصورة ظاهرة، فنُعتّمها بلطف لتبقى اللوحات مقروءة */
html body.emp-home.property-detail-bg .expanded-view { background: linear-gradient(180deg, rgba(4, 2, 10, .3), rgba(4, 2, 10, .52)); border-radius: 36px; }

} /* end @media (min-width: 769px) */

/* ==========================================================================
   شاشات اللابتوب: شريط علوي من صف واحد قدر الإمكان
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1500px) {
    html body.emp-home .nav-link-currency .cur-text { display: none; }          /* يبقى الرمز + العملة */
}
@media (min-width: 769px) and (max-width: 1360px) {
    html body.emp-home .navbar { padding: .45rem 1.3rem; gap: .4rem .8rem; }
    html body.emp-home .logo h1 { font-size: 1.7rem; }
    html body.emp-home .nav-links { gap: .3rem .35rem; }
    html body.emp-home .nav-links a:not(.btn-add-offer-green):not(.btn-profile-gold):not(.m-bell):not(.m-admin) { padding: .5rem .65rem; font-size: .9rem; }
    html body.emp-home .btn-add-offer-green,
    html body.emp-home .btn-profile-gold { padding: .55rem 1.05rem; font-size: .9rem; }
    html body.emp-home .nav-links a.m-admin { padding: 0 .7rem; font-size: .88rem; }
    html body.emp-home .nav-link-currency { padding: .5rem .85rem; }
}
@media (min-width: 769px) and (max-width: 1180px) {                           /* صفّان: الهوية + العملة، ثم الروابط */
    html body.emp-home .currency-selector-wrapper { order: 3; margin-inline-start: auto; }
    html body.emp-home .nav-links { order: 4; flex-basis: 100%; justify-content: center; margin-inline-start: 0; }
    html body.emp-home .navbar { row-gap: .3rem; }
}

/* ==========================================================================
   شاشات كمبيوتر أضيق (769–1000px): عمود واحد للأقسام
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1000px) {
    html body.emp-home .cards-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
    html body.emp-home .card,
    html body.emp-home .card:nth-child(2) { min-height: 360px; }
    html body.emp-home .navbar { padding: .45rem 1.2rem; }
    html body.emp-home .class-buttons { grid-template-columns: repeat(3, minmax(0, 150px)); }
}

/* ==========================================================================
   احترام تقليل الحركة
   ========================================================================== */
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
    html body.emp-home *,
    html body.emp-home *::before,
    html body.emp-home *::after {
        animation: none !important; transition: none !important; scroll-behavior: auto !important;
    }
    html body.emp-home .hero-orn i { transform: scaleX(1); }
    html body.emp-home .hero-orn b { transform: rotate(225deg) scale(1); }
}