/* إعداد القسم الأساسي */
.glass-track-section {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1; 
}

/* تصميم القطرة السائلة المكبرة (الحجم الصغير) */
.liquid-magnifier {
    position: absolute;
    width: 55px;  /* تم تصغير العرض */
    height: 55px; /* تم تصغير الطول */
    
    /* التأثير الزجاجي/المكبر */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(6px) saturate(160%) brightness(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(160%) brightness(1.1);
    
    /* الإضاءة والعمق 3D (تم تعديل النسب لتناسب الحجم الجديد) */
    box-shadow: 
        inset 10px 10px 15px rgba(255, 255, 255, 0.4),
        inset -10px -10px 15px rgba(0, 0, 0, 0.1),
        0 8px 15px rgba(0, 0, 0, 0.2);
    
    /* حركة تموج السائل */
    animation: liquidMorph 4s ease-in-out infinite;
    
    /* لمنع القطرة من تعطيل النقر */
    pointer-events: none !important; 
    
    /* التوسيط والظهور */
    transform: translate(-50%, -50%);
    z-index: 9999 !important;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* إظهار القطرة عند مرور الماوس */
.glass-track-section:hover .liquid-magnifier {
    opacity: 1;
}

/* أنيميشن تشكيل السائل (Morphing) */
@keyframes liquidMorph {
    0%, 100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
    34% {
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
    }
    67% {
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
    }
}







/* 1. The Clean Frosted Glass Overlay */
#glass-rain-section {
    position: relative !important;
}

#glass-rain-section .glass-rain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Very subtle glass - removes the white tint */
    background: rgba(255, 255, 255, 0.02); 
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 10;
    overflow: hidden;
    pointer-events: none !important; /* Slider remains clickable */
}

/* 2. The Realistic Water Drops */
#glass-rain-section .water-drop {
    position: absolute;
    border-radius: 50%;
    background: transparent; /* Completely transparent like real water */
    
    /* The Secret: Light hits top-left, shadow on bottom-right */
    box-shadow: 
        inset 2px 2px 3px rgba(255, 255, 255, 0.7),
        inset -1px -1px 2px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1);
        
    /* Magnifies the slider image behind the drop */    
    backdrop-filter: blur(1px) brightness(1.3);
    -webkit-backdrop-filter: blur(1px) brightness(1.3);
    pointer-events: none;
}

/* 3. The Sliding Animation for falling drops */
#glass-rain-section .falling {
    /* Very slight oval shape for moving water */
    border-radius: 50% 50% 45% 45% / 55% 55% 45% 45%; 
    animation: slide-down linear forwards;
}

@keyframes slide-down {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 0.9; }
    80% { opacity: 0.9; }
    100% { transform: translateY(150px); opacity: 0; }
}






#rain-glass-container .lavida-content-wrapper {
        position: relative;
        z-index: 100000;
        font-family: 'Cairo', sans-serif;
        text-align: right;
        max-width: 600px;
        
        margin: 0 auto 0 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #rain-glass-container .lavida-heading {
        color: #001f36; 
        font-size: clamp(24px, 4vw, 36px);
        font-weight: 900;
        margin: 0;
        line-height: 1.2;
    }

    #rain-glass-container .lavida-body {
        color: #335976;
        font-size: clamp(14px, 2.5vw, 16px);
        line-height: 1.6;
        margin: 0;
        font-weight: 600;
    }

    #rain-glass-container .glass-rain-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 50% !important;
        pointer-events: none !important;
        z-index: 1000 !important; 
    }

    #rain-glass-container .water-drop {
        position: absolute;
        background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(62, 154, 151, 0.3) 100%);
        border-radius: 50%;
        z-index: 1001 !important;
    }

    #rain-glass-container .water-drop.falling {
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255, 255, 255, 0.8));
        width: 2px !important;
        animation: rain-fall linear forwards;
    }

    @keyframes rain-fall {
        0% { transform: translateY(-20px); opacity: 1; }
        100% { transform: translateY(100vh); opacity: 0; }
    }

    @media (max-width: 768px) {
        #rain-glass-container .lavida-content-wrapper {
            text-align: center;
            margin: 0 auto;
        }
    }