.popup-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex; 
            justify-content: center; 
            align-items: center;
            z-index: 9999;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }
        
        .popup-overlay.show {
            opacity: 1;
            pointer-events: all;
        }
        
        .glass-popup {
            background: rgba(50, 167, 180, 0.397);
            backdrop-filter: blur(12px);
            border-radius: 20px;
            border: 1px solid rgba(50, 167, 180, 0.425);
            box-shadow: 0 15px 35px rgba(0,0,0,0.3);
            padding: 35px;
            text-align: center;
            position: relative;
            overflow: hidden;
            width: 90%;
            max-width: 500px;
            transform-style: preserve-3d;
            animation: slideInLeft 0.8s ease-out forwards;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 600px;
        }
        
        .glass-popup.slide-out {
            animation: slideOutRight 0.5s forwards;
        }
        
        @keyframes slideInLeft {
            0% { opacity: 0; transform: translateX(100%); }
            100% { opacity: 1; transform: translateX(0); }
        }
        
        @keyframes slideOutRight {
            0% { opacity: 1; transform: translateX(0); }
            100% { opacity: 0; transform: translateX(100%); }
        }
        
        .glass-popup::before {
            content: '';
            position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
            transform: rotate(45deg);
            animation: shimmer 6s infinite;
            pointer-events: none;
        }
        
        @keyframes shimmer {
            0% { transform: translateX(-100%) rotate(45deg); }
            100% { transform: translateX(100%) rotate(45deg); }
        }
        
        .close-btn {
            position: absolute; top: 20px; left: 20px;
            background: rgba(255,255,255,0.2);
            color: #fff; width: 40px; height: 40px;
            border-radius: 50%; display: flex;
            justify-content: center; align-items: center;
            font-weight: bold; cursor: pointer;
            transition: all 0.4s;
            z-index: 10;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255,255,255,0.3);
        }
        
        .close-btn:hover {
            transform: rotate(90deg);
            background: rgba(255,255,255,0.3);
            color: #ff9f43;
        }
        
        .gold-border {
            position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px;
            border: 1px solid rgba(255,215,0,0.4);
            border-radius: 15px; pointer-events: none;
        }
        
        /* تصميم جديد ومحسّن للرقم 7 في المنتصف */
        .seven-badge {
            position: relative;
            width: 220px;
            height: 220px;
            margin: 30px auto 25px; /* زيادة المسافة العلوية */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 5;
            order: 3; /* جعل الرقم يظهر بعد الشعار */
        }
        
        .seven-badge .number-7 {
            font-size: 160px;
            font-weight: 900;
            background: linear-gradient(135deg, #ffd700 0%, #ffb400 30%, #ff8c00 70%, #ff7700 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 
                0 0 20px rgba(255, 215, 0, 0.5),
                0 0 40px rgba(255, 166, 0, 0.3),
                0 0 60px rgba(255, 140, 0, 0.2);
            position: relative;
            line-height: 1;
            animation: numberPulse 3s infinite;
        }
        
        .seven-badge .years-text {
            font-size: 28px;
            font-weight: 700;
            color: #ffd700;
            margin-top: 5px;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
            background: rgba(0, 0, 0, 0.3);
            padding: 8px 20px;
            border-radius: 20px;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }
        
        @keyframes numberPulse {
            0% { transform: scale(1) rotate(0deg); text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
            50% { transform: scale(1.05) rotate(0.5deg); text-shadow: 0 0 40px rgba(255, 166, 0, 0.6); }
            100% { transform: scale(1) rotate(0deg); text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
        }
        
        .main-title {
            font-size: 32px; font-weight: 700;
            background: linear-gradient(to right, #fff, #f0f0f0, #fff);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            margin: 10px 0 20px; position: relative;
            letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0,0,0,0.2);
            order: 1; /* العنوان في الأعلى */
        }
        
        .main-title::after {
            content: ''; position: absolute; bottom: -10px; left: 30%; width: 40%; height: 2px;
            background: linear-gradient(to right, transparent, rgba(255,255,255,0.5), transparent);
        }
        
        .slogan {
            font-size: 24px;
            font-weight: bold;
            color: #ffd700;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
            margin: 20px 0 10px; /* زيادة المسافة السفلية لتكون أبعد عن الرقم */
            padding: 12px 15px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            animation: glow 2s infinite alternate;
            order: 2; /* الشعار فوق الرقم */
            position: relative;
            z-index: 2;
        }
        
        .continuity {
            display: flex; justify-content: center; margin: 15px 0;
            order: 4; /* دوائر الاستمرارية بعد الرقم */
        }
        
        .circle {
            width: 12px; height: 12px; background: rgba(255,255,255,0.3); 
            border-radius: 50%; margin: 0 8px; position: relative; cursor: pointer;
        }
        
        .circle.active {
            background: #ffd700; box-shadow: 0 0 10px rgba(255,215,0,0.5);
        }
        
        .circle::before {
            content: ''; position: absolute; top: 50%; left: -9px; width: 8px; height: 2px; 
            background: rgba(255,255,255,0.3);
        }
        
        .circle:first-child::before {
            display: none;
        }
        
        .special-message {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 15px;
            margin: 15px 0;
            border-right: 3px solid #ffd700;
            text-align: center;
            font-size: 16px;
            line-height: 1.7;
            color: #f0f0f0;
            order: 5; /* الرسالة الخاصة بعد الدوائر */
        }
        
        .signature {
            margin-top: 15px; font-style: italic; color: #fff; 
            font-weight: 300; position: relative; padding-top: 15px;
            order: 6; /* التوقيع في الأسفل */
        }
        
        .signature::before {
            content: ''; position: absolute; top: 0; left: 30%; width: 40%; height: 1px; 
            background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
        }
        
        .floating-elements {
            position: absolute; width: 100%; height: 100%; top: 0; left: 0; 
            pointer-events: none; z-index: -1;
        }
        
        .floating-element {
            position: absolute; background: rgba(255,255,255,0.1); 
            border: 1px solid rgba(255,255,255,0.15); 
            border-radius: 10px; 
            animation: float 15s infinite ease-in-out;
        }
        
        .floating-element:nth-child(1) {
            width: 60px; height: 60px; top: 10%; left: 20%; animation-delay: 0s;
        }
        
        .floating-element:nth-child(2) {
            width: 40px; height: 40px; top: 60%; left: 10%; animation-delay: -2s;
        }
        
        .floating-element:nth-child(3) {
            width: 50px; height: 50px; top: 30%; right: 15%; animation-delay: -5s;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(10deg); }
        }
        
        @keyframes glow {
            from { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
            to { text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.6); }
        }
        
        /* تأثيرات إضافية للرقم 7 */
        .seven-badge::before {
            content: '';
            position: absolute;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,215,0,0.2) 0%, transparent 70%);
            z-index: -1;
            animation: ripple 3s infinite;
        }
        
        @keyframes ripple {
            0% { transform: scale(0.8); opacity: 0.5; }
            50% { transform: scale(1.1); opacity: 0.3; }
            100% { transform: scale(0.8); opacity: 0.5; }
        }
        
        .seven-badge::after {
            content: '';
            position: absolute;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            border: 2px solid rgba(255, 215, 0, 0.3);
            z-index: -2;
            animation: rotate 20s linear infinite;
        }
        
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* مسافة إضافية بين العناصر */
        .spacer {
            height: 20px;
            order: 2;
            width: 100%;
        }