:root{
        --primary-green: #388e3c;
        --light-green: #e8f5e9;
        --dark-green: #1b5e20;
        --accent-gold: #1b5e20; /* تم إرجاع اللون الذهبي الأصلي */
        --white: #ffffff;
        --gray: #616161;
        --shadow: 0 20px 50px rgba(27, 94, 32, 0.3);
        --font-title: 'Cairo', sans-serif;
        --font-body: 'Cairo', sans-serif;
    }
    /* جعل المتغيرات مقتصرة على هذا القسم فقط */
    .tea-videos-section {
        position: relative;
        font-family: var(--font-body);
    }

    /* التنسيقات العامة داخل القسم */
    .tea-videos-section .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .tea-videos-section .section-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .tea-videos-section .main-title {
        font-family: var(--font-title);
        font-size: clamp(2.5rem, 5vw, 3.5rem);
        color: var(--dark-green);
        margin-bottom: 1rem;
    }

    .tea-videos-section .subtitle {
        font-size: clamp(1rem, 2.5vw, 1.2rem);
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.7;
    }

    /* تنسيقات السلايدر المخصصة */
    .tea-videos-section .swiper-container-wrapper {
        position: relative;
        opacity: 0;
        transition: opacity 0.5s ease;
    }
    .tea-videos-section .particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
    /* كلاس يتم إضافته عبر JS لإظهار الحاوية بسلاسة */
    .tea-videos-section .swiper-container-wrapper.loaded {
        opacity: 1;
    }

    .tea-videos-section .tea-video-swiper {
        width: 100%;
        height: 450px; 
    }

    .tea-videos-section .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 260px;
        height: 350px;
        border-radius: 16px;
        overflow: hidden;
        transition-property: transform, filter;
        transition-duration: 0.8s;
        transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        will-change: transform, filter;
    }
    .tea-videos-section .particles {
        position: absolute;
        inset: 10;
        width: 100%;
        height: 100%;
        z-index: -1; 
    }
    .tea-videos-section .swiper-slide:not(.swiper-slide-active) {
        filter: brightness(0.5) blur(4px);
        cursor: pointer;
    }
    
    .tea-videos-section .swiper-slide.swiper-slide-active {
        filter: brightness(1) blur(0px);
        box-shadow: var(--shadow), inset 0 0 15px rgba(255,255,255,0.2);
        cursor: pointer;
    }
    
    .tea-videos-section .swiper-slide.swiper-slide-active:hover .video-thumbnail img {
        transform: scale(1.05);
    }

    .tea-videos-section .video-thumbnail { width: 100%; height: 100%; position: relative; }
    .tea-videos-section .video-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); }
    .tea-videos-section .play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: 50px; height: 50px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--primary-green); font-size: 1.3rem; transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); opacity: 1; }
    .tea-videos-section .swiper-slide.swiper-slide-active:hover .play-overlay { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .tea-videos-section .video-duration { position: absolute; bottom: 10px; right: 10px; background: rgba(0, 0, 0, 0.7); color: var(--white); padding: 3px 8px; border-radius: 5px; font-size: 0.75rem; }
    
    /* تنسيقات أزرار التنقل والترقيم */
    .tea-videos-section .swiper-button-next, 
    .tea-videos-section .swiper-button-prev { color: var(--primary-green) !important; background-color: rgba(255, 255, 255, 0.9) !important; border-radius: 50% !important; width: 48px !important; height: 48px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: all 0.3s ease; top: 50%; transform: translateY(-50%); }
    .tea-videos-section .swiper-button-next:hover, 
    .tea-videos-section .swiper-button-prev:hover { background-color: var(--primary-green) !important; color: var(--white) !important; }
    .tea-videos-section .swiper-button-next:after, 
    .tea-videos-section .swiper-button-prev:after { font-size: 18px !important; font-weight: 900; }
    .tea-videos-section .swiper-pagination { bottom: 20px !important; }
    .tea-videos-section .swiper-pagination-bullet { width: 10px; height: 10px; background-color: #ccc; opacity: 1; transition: all 0.3s ease; }
    .tea-videos-section .swiper-pagination-bullet-active { background-color: var(--accent-gold) !important; width: 30px; border-radius: 5px; }
    
   /* --------------------------------------------------- */
    /* --- 2. تنسيقات النافذة المنبثقة (معزولة بالكامل) --- */
    /* --------------------------------------------------- */
    .tea-video-modal {
        display: none; /* أهم خاصية: إخفاء النافذة بشكل افتراضي */
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(10px);
        animation: fadeIn 0.3s ease;
        font-family: var(--font-body);
    }
    .tea-video-modal .tvm-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); width: 90%; max-width: 900px; background: var(--white, #fff); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); animation: zoomIn 0.4s ease forwards; }
    .tea-video-modal .tvm-header { display: flex; justify-content: space-between; align-items: center; padding:10px; border-bottom: 1px solid #eee; color: var(--dark-green, #1b5e20); }
    .tea-video-modal .tvm-close-btn { font-size: 2rem; color: #aaa; background: none; border: none; cursor: pointer; transition: color 0.2s; }
    .tea-video-modal .tvm-close-btn:hover { color: #333; }
    .tea-video-modal .tvm-video-container { position: relative; padding-bottom: 56.25%; height: 0; }
    .tea-video-modal .tvm-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
    
    /* Keyframes تبقى كما هي لأنها لا تتعارض */
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes zoomIn { from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }