/* === المتغيرات والألوان === */
        :root {
            --bg-color: #050505;
            --color-red: #e30614;
            --color-yellow: #f9e30e;
            --color-orange: #f49921;
            --color-green: #e30614;
            --glass-bg: rgba(20, 20, 20, 0.65);
            --glass-border: rgba(255, 255, 255, 0.1);
            --text-main: #ffffff;
            --text-muted: #cccccc;
            --solid-card-bg: #151515; /* خلفية داكنة صلبة للأيقونات */
        }

      
    
        /* === خلفية الكانفس === */
        #canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        /* === الحاوية الرئيسية === */
        .main-wrapper {
            position: relative;
            z-index: 2;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            padding-bottom: 100px;
        }

        /* === تصميم الزجاج للأقسام الرئيسية === */
  .glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 20px;
    margin: 0 auto 25px;
    max-width: 380px; /* صغري الرقم أو كبريه حسب المطلوب */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
         
        /* === Order Section === */
        .order-title {
            display: flex; justify-content: center; align-items: center; gap: 10px;
            color: var(--color-yellow); text-decoration: none; font-size: 1.4rem; font-weight: bold;
            margin-bottom: 15px; text-shadow: 0 0 10px rgba(249, 227, 14, 0.5);
        }
        .order-banner {
            display: block; position: relative; text-decoration: none; border-radius: 15px; overflow: hidden;
            border: 2px solid var(--color-orange);
        }
        .order-banner img { width: 100%; height: auto; display: block; border-radius: 13px; }
        .image-badge {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.7); color: var(--color-orange); padding: 10px 20px;
            border-radius: 30px; font-weight: bold; text-align: center; border: 1px solid var(--color-orange);
            backdrop-filter: blur(5px); white-space: nowrap;
        }

        /* === Menu Section === */
        .menu-title {
            display: flex; justify-content: center; align-items: center; gap: 10px;
            color: var(--color-green); text-decoration: none; font-size: 1.4rem; font-weight: bold;
            margin-bottom: 15px; text-shadow: 0 0 10px rgba(90, 178, 73, 0.5);
        }
        .menu-image { display: block; border-radius: 15px; overflow: hidden; border: 1px solid rgba(90, 178, 73, 0.3); }
        .menu-image img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; }
        .menu-image:hover img { transform: scale(1.05); }

        /* === Social Icons Grid (Updated Solid Style) === */
        .lux-icons {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }

        .lux-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: white;
            
            /* التغيير هنا: خلفية صلبة بدلاً من الشفافة */
            background-color: var(--solid-card-bg);
            
            padding: 20px 10px;
            border-radius: 15px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #333; /* حدود رمادية داكنة */
            box-shadow: 0 4px 6px rgba(0,0,0,0.5);
        }

        .lux-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.8);
            border-color: #555;
        }

        .lux-icon {
            font-size: 1.8rem;
            margin-bottom: 10px;
            width: 55px;
            height: 55px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            
            /* الأيقونات الدائرية ملونة بألوانها الرسمية */
            color: #fff;
            box-shadow: 0 4px 8px rgba(0,0,0,0.4);
        }

        /* ألوان الأيقونات (Solid Colors) */
        
        /* 1. Call Us */
        .lux-item:nth-child(1) .lux-icon {
            background: #00a8ff;
            border-bottom: 3px solid #008ecc;
        }

        /* 2. WhatsApp */
        .lux-item:nth-child(2) .lux-icon {
            background: #25d366;
            border-bottom: 3px solid #1da851;
        }

        /* 3. Gallery */
        .lux-item:nth-child(3) .lux-icon {
            background: #e84393;
            border-bottom: 3px solid #c32675;
        }

        /* 4. Facebook */
        .lux-item:nth-child(4) .lux-icon {
            background: #1877f2;
            border-bottom: 3px solid #0d5eb5;
        }

        /* 5. Instagram (Gradient) */
        .lux-item:nth-child(5) .lux-icon {
            background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            border-bottom: 3px solid #8e24aa;
        }

        /* 6. TikTok */
        .lux-item:nth-child(6) .lux-icon {
            background: #000000; /* أسود */
            border: 1px solid #333;
            color: #fff;
            box-shadow: inset 0 0 10px #222;
        }
        /* لإضافة لمعة التيك توك */
        .lux-item:nth-child(6) .lux-icon i {
            background: -webkit-linear-gradient(45deg, #00f2ea, #ff0050);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900;
        }


        /* === Address & Map === */
        .lux-card { text-align: center; }
        .lux-card .lux-icon {
            margin: 0 auto 15px; color: var(--color-red); font-size: 2rem;
            border: 2px solid var(--color-red); background: transparent; box-shadow: 0 0 10px var(--color-red);
        }
        .lux-title { margin-bottom: 10px; font-size: 1.3rem; color: var(--color-orange); }
        .lux-text { line-height: 1.6; margin-bottom: 20px; color: var(--text-muted); font-size: 0.95rem; }
        
        .lux-map-btn {
            display: inline-block; background: var(--color-green); color: #fff;
            padding: 10px 25px; border-radius: 25px; text-decoration: none;
            font-weight: bold; margin-bottom: 20px; box-shadow: 0 0 15px rgba(90, 178, 73, 0.4);color: #ffffff !important;
        }
        
        .map-embed { width: 100%; height: 200px; border-radius: 15px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
        .map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.5) invert(0.9) contrast(1.2); }
.lux-item,
.lux-item span,
.lux-item .lux-icon,
.lux-item .lux-icon i {
  color: #ffffff;
}