/* ═══════════════════════════════════════════════════════════════════ */
/* FLOATING ACTION BUTTON (FAB) — Multi-Action Menu                   */
/* Version: 2.1 — Compact Size (matches scroll-top)                   */
/* ═══════════════════════════════════════════════════════════════════ */
/*                                                                     */
/*  التحديثات في هذه النسخة:                                          */
/*   ✅ تصغير الحجم ليطابق scroll-top (46×46 على الديسكتوب)           */
/*   ✅ 7 عناصر: WhatsApp, Email, Tours, Categories, Contact,         */
/*      Plan Trip, Enquire Now                                         */
/*   ✅ أيقونة رئيسية: fa-wand-magic-sparkles (✨)                     */
/*   ✅ Animation خفيف وسريع (GPU accelerated)                        */
/*   ✅ Staggered entry animation                                     */
/*   ✅ RTL Support كامل                                              */
/*   ✅ Dark Mode تلقائي                                              */
/*   ✅ Reduced Motion support                                        */
/*   ✅ Mobile Optimized + Overlay                                    */
/*                                                                     */
/* ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════ */
/* 1. ROOT CONTAINER                                                   */
/* ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════ */
/* RESET — للأزرار داخل FAB (button reset)                          */
/* ═══════════════════════════════════════════════════════════════════ */

.fab__item {
    /* ✅ Reset button defaults */
    border: none;
    background: #ffffff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* ✅ التأكد من flex layout */
    display: flex !important;
    align-items: center !important;
    gap: 8px;

    /* ✅ منع أي قيود افتراضية */
    min-height: auto;
    width: auto;
    max-width: none;
    box-sizing: border-box;
}

/* ✅ التأكد من ظهور الأيقونة */
.fab__item-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.fab__item-icon i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff !important;
    font-size: inherit;
    line-height: 1;
}

/* ✅ التأكد من ظهور النص */
.fab__item-label {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0;
}
.fab {
    position: fixed;

    /* ✅ نفس محاذاة scroll-top */
    bottom: 22px;
    inset-inline-end: 22px;
    z-index: 9000;

    /* ✅ أحجام مطابقة لـ scroll-top (46×46) */
    --fab-size: 46px;
    --fab-item-size: 38px;
    --fab-gap: 10px;

    --fab-color: #E07A3F;
    --fab-color-hover: #c96829;
    --fab-color-dark: #d16a30;

    /* ═══ Performance ═══ */
    will-change: transform;
    contain: layout style;
    transform: translateZ(0);
}


/* ═══════════════════════════════════════════════════════════════════ */
/* 2. MENU — القائمة العمودية                                         */
/* ═══════════════════════════════════════════════════════════════════ */

.fab__menu {
    position: absolute;
    bottom: calc(var(--fab-size) + 12px);
    inset-inline-end: 0;

    display: flex;
    flex-direction: column;
    gap: var(--fab-gap);

    /* ═══ Hidden by default ═══ */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.92);
    transform-origin: bottom right;
    pointer-events: none;

    /* ═══ Smooth animation ═══ */
    transition:
        opacity 0.25s cubic-bezier(.4, 0, .2, 1),
        transform 0.3s cubic-bezier(.34, 1.56, .64, 1),
        visibility 0.25s;

    /* ═══ Performance ═══ */
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* ═══ RTL ═══ */
[dir="rtl"] .fab__menu {
    transform-origin: bottom left;
}

/* ═══ Open state ═══ */
.fab.is-open .fab__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}


/* ═══════════════════════════════════════════════════════════════════ */
/* 3. MENU ITEMS — كل عنصر في القائمة                                 */
/* ═══════════════════════════════════════════════════════════════════ */

.fab__item {
    /* ═══ Layout ═══ */
    display: flex;
    align-items: center;
    gap: 8px;

    /* ═══ Colors ═══ */
    background: #ffffff;
    color: #1F2937;
    text-decoration: none;

    /* ═══ Spacing ═══ */
    padding: 5px 12px 5px 5px;
    border-radius: 999px;

    /* ═══ Shadow ═══ */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.06);

    /* ═══ Performance ═══ */
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);

    /* ═══ Micro-interactions ═══ */
    transition:
        transform 0.2s cubic-bezier(.34, 1.56, .64, 1),
        box-shadow 0.2s ease,
        background-color 0.2s ease;

    /* ═══ Entry animation (hidden) ═══ */
    opacity: 0;
    transform: translateX(20px);
}

/* ═══ RTL ═══ */
[dir="rtl"] .fab__item {
    transform: translateX(-20px);
}

/* ═══ Open state — fade in ═══ */
.fab.is-open .fab__item {
    opacity: 1;
    transform: translateX(0);
}

/* ═══ RTL open state ═══ */
[dir="rtl"] .fab.is-open .fab__item {
    transform: translateX(0);
}


/* ═══════════════════════════════════════════════════════════════════ */
/* 4. STAGGERED ENTRY ANIMATION                                       */
/* ═══════════════════════════════════════════════════════════════════ */

.fab.is-open .fab__item:nth-child(1) { transition-delay: 0.35s; }
.fab.is-open .fab__item:nth-child(2) { transition-delay: 0.30s; }
.fab.is-open .fab__item:nth-child(3) { transition-delay: 0.25s; }
.fab.is-open .fab__item:nth-child(4) { transition-delay: 0.20s; }
.fab.is-open .fab__item:nth-child(5) { transition-delay: 0.15s; }
.fab.is-open .fab__item:nth-child(6) { transition-delay: 0.10s; }
.fab.is-open .fab__item:nth-child(7) { transition-delay: 0.05s; }


/* ═══════════════════════════════════════════════════════════════════ */
/* 5. ITEM HOVER & ACTIVE                                             */
/* ═══════════════════════════════════════════════════════════════════ */

.fab__item:hover {
    transform: translateX(-4px) scale(1.03);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.14),
        0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ═══ RTL hover ═══ */
[dir="rtl"] .fab__item:hover {
    transform: translateX(4px) scale(1.03);
}

.fab__item:active {
    transform: translateX(0) scale(0.97);
}

/* ═══ Focus (accessibility) ═══ */
.fab__item:focus-visible {
    outline: 3px solid rgba(224, 122, 63, 0.4);
    outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════ */
/* 6. ITEM ICON — أيقونة دائرية                                       */
/* ═══════════════════════════════════════════════════════════════════ */

.fab__item-icon {
    width: var(--fab-item-size);
    height: var(--fab-item-size);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    color: #ffffff;
    font-size: 15px;

    flex-shrink: 0;

    transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1);
}

.fab__item:hover .fab__item-icon {
    transform: rotate(-8deg) scale(1.08);
}


/* ═══════════════════════════════════════════════════════════════════ */
/* 7. ITEM LABEL — النص                                               */
/* ═══════════════════════════════════════════════════════════════════ */

.fab__item-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Tahoma', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: #1F2937;
    padding-inline-end: 4px;
}


/* ═══════════════════════════════════════════════════════════════════ */
/* 8. COLORS — لون كل عنصر                                            */
/* ═══════════════════════════════════════════════════════════════════ */

/* ═══ WhatsApp — أخضر واتساب ═══ */
.fab__item--wa .fab__item-icon {
    background: linear-gradient(135deg, #25D366, #128C7E);
}
.fab__item--wa:hover {
    background: #ECFDF5;
}

/* ═══ Email — برتقالي دافئ ═══ */
.fab__item--email .fab__item-icon {
    background: linear-gradient(135deg, #E07A3F, #c96829);
}
.fab__item--email:hover {
    background: #FEF3E7;
}

/* ═══ Tours — أزرق ملكي ═══ */
.fab__item--tours .fab__item-icon {
    background: linear-gradient(135deg, #3B82F6, #1E40AF);
}
.fab__item--tours:hover {
    background: #EFF6FF;
}

/* ═══ Categories — بنفسجي ═══ */
.fab__item--cats .fab__item-icon {
    background: linear-gradient(135deg, #A78BFA, #7C3AED);
}
.fab__item--cats:hover {
    background: #F5F3FF;
}

/* ═══ Contact — أزرق سماوي ═══ */
.fab__item--contact .fab__item-icon {
    background: linear-gradient(135deg, #38BDF8, #0284C7);
}
.fab__item--contact:hover {
    background: #F0F9FF;
}

/* ═══ Plan Trip — ذهبي ═══ */
.fab__item--plan .fab__item-icon {
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
}
.fab__item--plan:hover {
    background: #FFFBEB;
}

/* ═══ Enquire Now — أخضر زمردي ═══ */
.fab__item--enquire .fab__item-icon {
    background: linear-gradient(135deg, #34D399, #059669);
}
.fab__item--enquire:hover {
    background: #ECFDF5;
}


/* ═══════════════════════════════════════════════════════════════════ */
/* 9. TRIGGER BUTTON — الزر الرئيسي                                   */
/* ═══════════════════════════════════════════════════════════════════ */

.fab__trigger {
    position: relative;

    width: var(--fab-size);
    height: var(--fab-size);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;
    cursor: pointer;

    /* ═══ Gradient Background ═══ */
    background: linear-gradient(135deg, #E07A3F, #d16a30);
    color: #ffffff;
    font-size: 18px;

    /* ═══ Shadow ═══ */
    box-shadow:
        0 8px 24px rgba(224, 122, 63, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.12);

    /* ═══ Performance ═══ */
    will-change: transform, box-shadow;
    backface-visibility: hidden;
    transform: translateZ(0);

    /* ═══ Transition ═══ */
    transition:
        transform 0.3s cubic-bezier(.34, 1.56, .64, 1),
        box-shadow 0.3s ease,
        background 0.35s ease;
}

/* ═══ Hover ═══ */
.fab__trigger:hover {
    transform: scale(1.08);
    box-shadow:
        0 12px 32px rgba(224, 122, 63, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ═══ Hover — أيقونة wand تتمايل ═══ */
.fab__trigger:hover .fab__trigger-icon--open {
    transform: rotate(-12deg) scale(1.1);
}

/* ═══ Active ═══ */
.fab__trigger:active {
    transform: scale(0.95);
}

/* ═══ Focus (accessibility) ═══ */
.fab__trigger:focus-visible {
    outline: 3px solid rgba(224, 122, 63, 0.4);
    outline-offset: 3px;
}

/* ═══ Open state — يتحول للرمادي الداكن ═══ */
.fab.is-open .fab__trigger {
    background: linear-gradient(135deg, #1F2937, #111827);
    box-shadow:
        0 8px 24px rgba(31, 41, 55, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.15);
}

.fab.is-open .fab__trigger:hover {
    box-shadow:
        0 12px 32px rgba(31, 41, 55, 0.55),
        0 4px 12px rgba(0, 0, 0, 0.2);
}


/* ═══════════════════════════════════════════════════════════════════ */
/* 10. TRIGGER ICONS — تبديل ✨ ↔ ✕                                   */
/* ═══════════════════════════════════════════════════════════════════ */

.fab__trigger-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        opacity 0.25s ease,
        transform 0.4s cubic-bezier(.34, 1.56, .64, 1);

    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* ═══ أيقونة الفتح (wand-magic-sparkles) ═══ */
.fab__trigger-icon--open {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ═══ أيقونة الإغلاق (×) ═══ */
.fab__trigger-icon--close {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

/* ═══ Open state — wand يختفي ═══ */
.fab.is-open .fab__trigger-icon--open {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

/* ═══ Open state — × يظهر ═══ */
.fab.is-open .fab__trigger-icon--close {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}


/* ═══════════════════════════════════════════════════════════════════ */
/* 11. PULSE — نبضة ذهبية سحرية                                       */
/* ═══════════════════════════════════════════════════════════════════ */

.fab__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;

    /* ═══ تدرج ذهبي برتقالي ═══ */
    background: linear-gradient(135deg, #E07A3F, #F59E0B);

    opacity: 0;
    pointer-events: none;
    z-index: -1;

    /* ═══ نعومة إضافية ═══ */
    filter: blur(4px);
}

/* ═══ يظهر فقط عند الـ hover والـ FAB مغلق ═══ */
.fab:not(.is-open) .fab__trigger:hover .fab__pulse {
    animation: fabPulse 1.8s ease-out infinite;
}

@keyframes fabPulse {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }
    70% {
        opacity: 0.15;
    }
    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}


/* ═══════════════════════════════════════════════════════════════════ */
/* 12. OVERLAY — خلفية معتمة (موبايل فقط)                             */
/* ═══════════════════════════════════════════════════════════════════ */

.fab__overlay {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    z-index: 8999;

    /* ═══ Hidden by default ═══ */
    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s;

    will-change: opacity;
}

.fab__overlay.is-active {
    opacity: 1;
    visibility: visible;
}


/* ═══════════════════════════════════════════════════════════════════ */
/* 13. MOBILE OPTIMIZATIONS                                            */
/* ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .fab {
        /* ✅ نفس محاذاة scroll-top على الموبايل */
        bottom: 16px;
        inset-inline-end: 16px;

        /* ✅ مطابقة كاملة مع scroll-top (42×42) */
        --fab-size: 42px;
        --fab-item-size: 34px;
        --fab-gap: 9px;
    }

    .fab__trigger {
        font-size: 16px;
    }

    .fab__item {
        padding: 4px 11px 4px 4px;
    }

    .fab__item-icon {
        font-size: 13.5px;
    }

    .fab__item-label {
        font-size: 11px;
    }

    .fab__menu {
        bottom: calc(var(--fab-size) + 10px);
    }
}

/* ═══ Very Small Phones ═══ */
@media (max-width: 380px) {
    .fab {
        --fab-size: 40px;
        --fab-item-size: 32px;
        --fab-gap: 8px;
    }

    .fab__trigger {
        font-size: 15px;
    }

    .fab__item-label {
        font-size: 10.5px;
    }

    .fab__item {
        padding: 4px 9px 4px 4px;
    }

    .fab__item-icon {
        font-size: 13px;
    }
}


/* ═══════════════════════════════════════════════════════════════════ */
/* 14. DESKTOP LARGE                                                   */
/* ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {
    .fab {
        bottom: 28px;
        inset-inline-end: 28px;

        /* ✅ أكبر قليلاً لكن يبقى متناسباً (مثل scroll-top الكبير) */
        --fab-size: 50px;
        --fab-item-size: 42px;
        --fab-gap: 11px;
    }

    .fab__trigger {
        font-size: 19px;
    }

    .fab__item-icon {
        font-size: 16px;
    }

    .fab__item-label {
        font-size: 13px;
    }

    .fab__item {
        padding: 5px 13px 5px 5px;
    }
}


/* ═══════════════════════════════════════════════════════════════════ */
/* 15. DARK MODE                                                       */
/* ═══════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
    .fab__item {
        background: #1F2937;
        color: #F9FAFB;
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.4),
            0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .fab__item-label {
        color: #F9FAFB;
    }

    .fab__item:hover {
        box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.5),
            0 2px 6px rgba(0, 0, 0, 0.35);
    }

    /* ═══ Hover states — Dark ═══ */
    .fab__item--wa:hover      { background: #064E3B; }
    .fab__item--email:hover   { background: #431407; }
    .fab__item--tours:hover   { background: #1E3A8A; }
    .fab__item--cats:hover    { background: #4C1D95; }
    .fab__item--contact:hover { background: #0C4A6E; }
    .fab__item--plan:hover    { background: #78350F; }
    .fab__item--enquire:hover { background: #064E3B; }
}


/* ═══════════════════════════════════════════════════════════════════ */
/* 16. ACCESSIBILITY — Reduced Motion                                 */
/* ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .fab,
    .fab__trigger,
    .fab__item,
    .fab__menu,
    .fab__trigger-icon,
    .fab__pulse,
    .fab__overlay {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .fab__pulse {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════ */
/* 17. PRINT — إخفاء في الطباعة                                        */
/* ═══════════════════════════════════════════════════════════════════ */

@media print {
    .fab,
    .fab__overlay {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════ */
/* 18. HIGH CONTRAST MODE                                              */
/* ═══════════════════════════════════════════════════════════════════ */

@media (prefers-contrast: high) {
    .fab__item {
        border: 2px solid #000;
    }

    .fab__trigger {
        border: 2px solid #000;
    }

    .fab__item:focus-visible,
    .fab__trigger:focus-visible {
        outline-width: 4px;
    }
}




/* ═══════════════════════════════════════════════════════════════════ */
/* 19. FAB — Weather & Language Buttons                                */
/* ═══════════════════════════════════════════════════════════════════ */

/* ═══ Weather Button — أزرق سماوي ═══ */
.fab__item--weather .fab__item-icon {
    background: linear-gradient(135deg, #60A5FA, #3B82F6);
}
.fab__item--weather:hover {
    background: #EFF6FF;
}

/* ═══ Language Button — أخضر زمردي ═══ */
.fab__item--lang .fab__item-icon {
    background: linear-gradient(135deg, #34D399, #10B981);
}
.fab__item--lang:hover {
    background: #ECFDF5;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* 20. WEATHER MODAL — Live Morocco                                */
/* ═══════════════════════════════════════════════════════════════════ */

.mw-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: mwFadeIn 0.3s ease;
}

.mw-modal[hidden] { display: none; }

@keyframes mwFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ─── Backdrop ─── */
.mw-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 22, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
}

/* ─── Panel ─── */
.mw-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 920px;
    max-height: 90vh;
    background: linear-gradient(145deg, #FFFFFF 0%, #FAF6F0 100%);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 40px 100px -20px rgba(26, 35, 50, 0.4),
        0 20px 50px -10px rgba(224, 122, 63, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(224, 122, 63, 0.15);
    display: flex;
    flex-direction: column;
    animation: mwSlideUp 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes mwSlideUp {
    from {
        transform: translateY(30px) scale(0.97);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* ─── Header ─── */
.mw-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px;
    background: linear-gradient(135deg, #1A2332 0%, #243044 100%);
    color: #FFFFFF;
    position: relative;
    flex-shrink: 0;
}

.mw-modal__header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 26px;
    right: 26px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(212, 165, 116, 0.3),
        transparent);
}

.mw-modal__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mw-modal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #FFD166;
}

.mw-modal__eyebrow i {
    font-size: 11px;
    animation: mwPulse 2s ease-in-out infinite;
}

@keyframes mwPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.2); }
}

.mw-modal__title {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.mw-modal__close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.mw-modal__close:hover {
    background: #E07A3F;
    border-color: #E07A3F;
    transform: rotate(90deg);
}

/* ─── Body ─── */
.mw-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 26px 28px;
    background: #FAF6F0;
}

.mw-modal__body::-webkit-scrollbar { width: 6px; }
.mw-modal__body::-webkit-scrollbar-thumb {
    background: rgba(224, 122, 63, 0.3);
    border-radius: 3px;
}
.mw-modal__body::-webkit-scrollbar-thumb:hover {
    background: rgba(224, 122, 63, 0.5);
}

/* ─── Grid ─── */
.mw-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (max-width: 640px) {
    .mw-modal__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ─── City Card ─── */
.mw-city {
    position: relative;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 18px 20px;
    border: 1.5px solid rgba(224, 122, 63, 0.10);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
}

.mw-city::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, #E07A3F, #D4A574);
    border-radius: 0 4px 4px 0;
    transition: height 0.3s ease;
}

.mw-city:hover {
    transform: translateY(-3px);
    border-color: rgba(224, 122, 63, 0.35);
    box-shadow:
        0 12px 32px -8px rgba(26, 35, 50, 0.12),
        0 4px 12px -2px rgba(224, 122, 63, 0.10);
}

.mw-city:hover::before {
    height: 60%;
}

.mw-city.is-active {
    background: linear-gradient(135deg,
        rgba(224, 122, 63, 0.08),
        rgba(212, 165, 116, 0.04));
    border-color: rgba(224, 122, 63, 0.35);
}

.mw-city.is-active::before {
    height: 70%;
}

/* ─── City Icon ─── */
.mw-city__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1A2332, #243044);
    color: #FFD166;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(26, 35, 50, 0.15);
    transition: transform 0.3s ease;
}

.mw-city:hover .mw-city__icon {
    transform: scale(1.08) rotate(-6deg);
}

.mw-city.is-active .mw-city__icon {
    background: linear-gradient(135deg, #E07A3F, #C25A2A);
    color: #FFFFFF;
}

/* ─── City Info ─── */
.mw-city__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mw-city__name {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    font-weight: 700;
    color: #1A2332;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-city__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #6B7280;
    letter-spacing: 0.2px;
}

.mw-city__status i {
    font-size: 10px;
    color: #10B981;
}

.mw-city.is-active .mw-city__status {
    color: #C25A2A;
}

/* ─── City Weather ─── */
.mw-city__weather {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.mw-city__temp {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 900;
    color: #1A2332;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.mw-city__time {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #E07A3F;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

.mw-city__icon-weather {
    font-size: 20px;
    color: #FFD166;
    filter: drop-shadow(0 2px 4px rgba(255, 209, 102, 0.4));
    transition: transform 0.3s ease;
}

.mw-city:hover .mw-city__icon-weather {
    transform: scale(1.15) rotate(8deg);
}

/* ─── Loading State ─── */
.mw-city__temp.is-loading,
.mw-city__time.is-loading {
    color: #D1D5DB;
}

.mw-city__temp.is-loading::after {
    content: '…';
    animation: mwDots 1.4s infinite;
}

@keyframes mwDots {
    0%, 20% { content: '.'; }
    40%     { content: '..'; }
    60%, 100% { content: '...'; }
}

/* ─── Modal Responsive ─── */
@media (max-width: 640px) {
    .mw-modal {
        padding: 12px;
        align-items: flex-end;
    }

    .mw-modal__panel {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 22px 22px 0 0;
    }

    .mw-modal__header {
        padding: 18px 20px;
    }

    .mw-modal__title {
        font-size: 17px;
    }

    .mw-modal__body {
        padding: 18px 18px 22px;
    }

    .mw-city {
        padding: 14px 16px;
        gap: 12px;
        border-radius: 14px;
    }

    .mw-city__icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
        border-radius: 12px;
    }

    .mw-city__name { font-size: 15px; }
    .mw-city__temp { font-size: 20px; }
    .mw-city__time { font-size: 11px; }
    .mw-city__icon-weather { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* 21. LANGUAGE MODAL                                              */
/* ═══════════════════════════════════════════════════════════════════ */

.lang-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: lmFadeIn 0.3s ease;
}

.lang-modal[hidden] { display: none; }

@keyframes lmFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lang-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 22, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
}

.lang-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    background: linear-gradient(145deg, #FFFFFF 0%, #FAF6F0 100%);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 40px 100px -20px rgba(26, 35, 50, 0.4),
        0 20px 50px -10px rgba(224, 122, 63, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(224, 122, 63, 0.15);
    display: flex;
    flex-direction: column;
    animation: lmSlideUp 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes lmSlideUp {
    from {
        transform: translateY(30px) scale(0.97);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.lang-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px;
    background: linear-gradient(135deg, #1A2332 0%, #243044 100%);
    color: #FFFFFF;
    position: relative;
    flex-shrink: 0;
}

.lang-modal__header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 26px;
    right: 26px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(212, 165, 116, 0.3),
        transparent);
}

.lang-modal__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.lang-modal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #FFD166;
}

.lang-modal__eyebrow i { font-size: 11px; }

.lang-modal__title {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.lang-modal__close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.lang-modal__close:hover {
    background: #E07A3F;
    border-color: #E07A3F;
    transform: rotate(90deg);
}

.lang-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #FAF6F0;
}

.lang-modal__body::-webkit-scrollbar { width: 6px; }
.lang-modal__body::-webkit-scrollbar-thumb {
    background: rgba(224, 122, 63, 0.3);
    border-radius: 3px;
}

.lang-modal__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ─── Language Item ─── */
.lang-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1.5px solid rgba(224, 122, 63, 0.10);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    text-align: left;
    font-family: inherit;
    width: 100%;
}

.lang-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, #E07A3F, #D4A574);
    transition: height 0.3s ease;
}

.lang-item:hover {
    transform: translateX(4px);
    border-color: rgba(224, 122, 63, 0.35);
    box-shadow:
        0 8px 24px -8px rgba(26, 35, 50, 0.10),
        0 2px 8px -2px rgba(224, 122, 63, 0.08);
}

.lang-item:hover::before {
    height: 60%;
}

.lang-item.is-active {
    background: linear-gradient(135deg,
        rgba(224, 122, 63, 0.10),
        rgba(212, 165, 116, 0.05));
    border-color: rgba(224, 122, 63, 0.40);
}

.lang-item.is-active::before {
    height: 70%;
}

.lang-item__flag {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.lang-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lang-item__native {
    font-size: 15px;
    font-weight: 700;
    color: #1A2332;
    line-height: 1.2;
}

.lang-item__english {
    font-size: 11.5px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.lang-item__check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.lang-item.is-active .lang-item__check {
    opacity: 1;
    transform: scale(1);
}

/* ─── Language Modal Responsive ─── */
@media (max-width: 640px) {
    .lang-modal {
        padding: 12px;
        align-items: flex-end;
    }

    .lang-modal__panel {
        max-width: 100%;
        max-height: 88vh;
        border-radius: 22px 22px 0 0;
    }

    .lang-modal__header {
        padding: 18px 20px;
    }

    .lang-modal__title {
        font-size: 17px;
    }

    .lang-modal__body {
        padding: 12px;
    }

    .lang-item {
        padding: 12px 14px;
        gap: 12px;
        border-radius: 12px;
    }

    .lang-item__flag {
        font-size: 24px;
        width: 32px;
    }

    .lang-item__native {
        font-size: 14px;
    }

    .lang-item__english {
        font-size: 10.5px;
    }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* 22. Body Lock — عند فتح Modal                                     */
/* ═══════════════════════════════════════════════════════════════════ */

body.has-mw-modal-open,
body.has-lang-modal-open {
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* 23. FAB Dark Mode — Items جديدة                                    */
/* ═══════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
    .fab__item--weather:hover { background: #1E3A8A; }
    .fab__item--lang:hover    { background: #064E3B; }
}