*{margin:0;padding:0;box-sizing:border-box;font-family:'Tajawal',sans-serif;}
    .container{width:100%;max-width:500px;z-index:10;}
    .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;
        animation:fadeIn 0.8s ease-out forwards;
        transform-style: preserve-3d;
    }
    @keyframes fadeIn{
        0%{opacity:0;transform:translateY(30px) scale(0.95);}
        100%{opacity:1;transform:translateY(0) scale(1);}
    }
    .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;
    }
    .seven-badge{
        position:absolute;top:-20px;right:-20px;
        background:linear-gradient(135deg,#f8e71c 0%,#ffb400 100%);
        color:#7b3911;width:80px;height:80px;
        border-radius:50%;display:flex;
        justify-content:center;align-items:center;
        font-weight:900;font-size:28px;
        box-shadow:0 5px 20px rgba(0,0,0,0.2);
        z-index:5;
        animation:pulse 3s infinite;
        border:2px solid rgba(255,255,255,0.5);
    }
    @keyframes pulse{
        0%{transform:scale(1) rotate(0deg);}
        50%{transform:scale(1.05) rotate(5deg);}
        100%{transform:scale(1) rotate(0deg);}
    }
    
    @keyframes rotate{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(360deg);}
    }
    .logo-container i{
        font-size:55px;
        background:linear-gradient(135deg,#fff 0%,#e6e6e6 100%);
        -webkit-background-clip:text;-webkit-text-fill-color:transparent;
        z-index:2;padding:15px;border-radius:50%;
    }
    .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:20px 0;position:relative;
        letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,0.2);
    }
    .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);
    }
    .message{font-size:18px;line-height:1.8;margin:25px 0;color:#f0f0f0;font-weight:500;text-align:center;padding:0 10px;text-shadow:0 1px 2px rgba(0,0,0,0.2);}
    .stats-container{display:flex;justify-content:space-around;margin:30px 0;}
    .stat-item{background:rgba(255,255,255,0.1);backdrop-filter:blur(5px);padding:15px;border-radius:12px;border:1px solid rgba(255,255,255,0.2);width:30%;transition:transform 0.3s;}
    .stat-item:hover{transform:translateY(-5px);background:rgba(255,255,255,0.15);}
    .stat-number{font-size:24px;font-weight:700;color:#fff;margin-bottom:5px;text-shadow:0 2px 4px rgba(0,0,0,0.2);}
    .stat-label{font-size:14px;color:#e6e6e6;}
    .signature{margin-top:25px;font-style:italic;color:#fff;font-weight:300;position:relative;padding-top:15px;}
    .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);}
    .highlight{color:#ffd700;font-weight:700;position:relative;display:inline-block;}
    .highlight::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:6px;background:rgba(255,215,0,0.2);z-index:-1;border-radius:2px;}
    .continuity{display:flex;justify-content:center;margin:20px 0;}
    .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;}
    .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);}}
    .accent-bg{background:rgba(50,167,180,0.4);border-radius:10px;padding:15px;margin:15px 0;border:1px solid rgba(50,167,180,0.5);}
    .gold-accent{color:#ffd700;text-shadow:0 0 5px rgba(255,215,0,0.4);}
    .popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex; justify-content: center; align-items: center;
    z-index: 9999;
    opacity: 0; /* نخليها مخفية بالبداية */
    pointer-events: none; /* تمنع التفاعل قبل ظهورها */
}

.popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.514);
    display: flex; justify-content: center; align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none; /* تمنع التفاعل قبل الظهور */
}

.popup-overlay.show {
    opacity: 1;
    pointer-events: all;
}

/* ظهور من اليمين للشمال */
@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.slide-in {
    animation: slideInLeft 0.8s ease-out forwards;
}

.glass-popup.slide-out {
    animation: slideOutRight 0.5s forwards;
}