/* أساسيات البوب أب والتراكب (Overlay) */
#lyp-popup-overlay {
    position: fixed;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;

    /* Grid لضمان التموضع في 9 نقاط */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto 1fr;
}

/* إخفاء البوب أب بشكل كامل عند عدم الظهور */
.lyp-hidden {
    display: none !important;
}

/* التنسيق العام لمحتوى البوب أب (الحاوية البيضاء) */
#lyp-popup-content {
    background: #fff;
    padding: 0px; /* **[إصلاح الشريط الأبيض]** تصفير الـ padding هنا */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    position: relative;
    max-width: 90%;
    
    border-radius: 8px; /* قيمة احتياطية */
    border: none; /* إزالة الحافة الثابتة */

    transform: scale(0.8);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); 

    /* الوضع الافتراضي: الوسط */
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: center;
}

/* ---------------------------------------------------------------- */
/* قواعد التموضع المُعززة بـ !important لإجبار المحاذاة */
/* ---------------------------------------------------------------- */

/* الصف العلوي */
/* **[إصلاح المحاذاة لليمين]** grid-column 1, justify-self: end تعني أقصى اليمين (في grid) */
#lyp-popup-overlay.top-right #lyp-popup-content    { grid-column: 1 !important; grid-row: 1 !important; align-self: start !important; justify-self: end !important; margin: 20px 20px 0 0 !important; }
#lyp-popup-overlay.top-center #lyp-popup-content   { grid-column: 2 !important; grid-row: 1 !important; align-self: start !important; justify-self: center !important; margin: 20px 0 0 0 !important; }
#lyp-popup-overlay.top-left #lyp-popup-content     { grid-column: 3 !important; grid-row: 1 !important; align-self: start !important; justify-self: start !important; margin: 20px 0 0 20px !important; }

/* الصف الأوسط */
#lyp-popup-overlay.middle-right #lyp-popup-content { grid-column: 1 !important; grid-row: 2 !important; align-self: center !important; justify-self: end !important; margin: 0 20px 0 0 !important; }
#lyp-popup-overlay.center #lyp-popup-content       { grid-column: 2 !important; grid-row: 2 !important; align-self: center !important; justify-self: center !important; margin: 0 !important; }
#lyp-popup-overlay.middle-left #lyp-popup-content  { grid-column: 3 !important; grid-row: 2 !important; align-self: center !important; justify-self: start !important; margin: 0 0 0 20px !important; }

/* الصف السفلي */
#lyp-popup-overlay.bottom-right #lyp-popup-content { grid-column: 1 !important; grid-row: 3 !important; align-self: end !important; justify-self: end !important; margin: 0 20px 20px 0 !important; }
#lyp-popup-overlay.bottom-center #lyp-popup-content{ grid-column: 2 !important; grid-row: 3 !important; align-self: end !important; justify-self: center !important; margin: 0 0 20px 0 !important; }
#lyp-popup-overlay.bottom-left #lyp-popup-content  { grid-column: 3 !important; grid-row: 3 !important; align-self: end !important; justify-self: start !important; margin: 0 0 20px 20px !important; }

/* ---------------------------------------------------------------- */
/* تنسيقات الفيديو */
/* ---------------------------------------------------------------- */

#lyp-video-container {
    background-color: #000;
    overflow: hidden;
    min-width: 100px; 
    min-height: 100px;
    padding: 0 !important; /* **[إصلاح الشريط الأبيض]** تصفير الـ padding هنا أيضاً */
}
#lyp-video-container iframe {
    /* قواعد قوية لضمان عرض الـ iframe بالكامل */
    width: 100% !important; 
    height: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    margin: 0 !important; /* **[إصلاح الشريط الأبيض]** تصفير الـ margin على الـ iframe */
    padding: 0 !important; /* **[إصلاح الشريط الأبيض]** تصفير الـ padding على الـ iframe */
}

/* ---------------------------------------------------------------- */
/* بقية تنسيقات زر الإغلاق والتأثيرات (لم تتغير) */
/* ---------------------------------------------------------------- */

/* التنسيق الأساسي لزر الإغلاق */
.lyp-close-button {
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    line-height: 20px;
    z-index: 10;
    transition: color 0.2s;
}
.lyp-close-button:hover {
    color: #000;
}

/* شكل دائرة بخلفية (الافتراضي) */
.lyp-close-button.lyp-close-circle {
    top: -15px; 
    right: -15px; 
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    padding: 0 7px 5px 7px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-size: 24px;
    line-height: 1.1;
    color: #555;
}
.lyp-close-button.lyp-close-circle:hover {
    color: #1a73e8;
}

/* شكل علامة X بسيطة */
.lyp-close-button.lyp-close-x {
    top: 5px;
    right: 15px;
    background: none;
    border-radius: 0;
    padding: 0;
    font-size: 30px;
    line-height: 20px;
}

/* شكل أيقونة في الزاوية العلوية اليسرى */
.lyp-close-button.lyp-close-corner {
    top: 5px;
    left: 15px; 
    right: auto;
    background: none;
    border-radius: 0;
    padding: 0;
    font-size: 26px;
    line-height: 20px;
    color: #888;
}

/* تأثيرات الدخول والخروج */
#lyp-popup-overlay.show.fade-in { opacity: 1; visibility: visible; }
#lyp-popup-overlay.show.fade-in #lyp-popup-content { transform: scale(1); }
#lyp-popup-overlay.show.slide-up { opacity: 1; visibility: visible; }
#lyp-popup-overlay.show.slide-up #lyp-popup-content { transform: translateY(0) scale(1); }
.slide-up #lyp-popup-content { transform: translateY(50px) scale(0.8); }
#lyp-popup-overlay.show.zoom-in { opacity: 1; visibility: visible; }
#lyp-popup-overlay.show.zoom-in #lyp-popup-content { transform: scale(1); }
#lyp-popup-overlay.fade-out { opacity: 0; visibility: hidden; }
#lyp-popup-overlay.slide-down { opacity: 0; visibility: hidden; }
#lyp-popup-overlay.slide-down #lyp-popup-content { transform: translateY(50px) scale(0.8); }
#lyp-popup-overlay.zoom-out { opacity: 0; visibility: hidden; }
#lyp-popup-overlay.zoom-out #lyp-popup-content { transform: scale(0.5); }