.elementor-35 .elementor-element.elementor-element-500bb76{--display:flex;--min-height:0px;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35 .elementor-element.elementor-element-0febe00{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-35 .elementor-element.elementor-element-071875c{--display:flex;}.elementor-35 .elementor-element.elementor-element-3bcaffa{width:100%;max-width:100%;}.elementor-35 .elementor-element.elementor-element-6aec099{--display:flex;}.elementor-35 .elementor-element.elementor-element-14dbe19{--display:flex;}@media(max-width:767px){.elementor-35 .elementor-element.elementor-element-500bb76{--width:1600px;}.elementor-35 .elementor-element.elementor-element-0febe00{width:100%;max-width:100%;}}@media(min-width:768px){.elementor-35 .elementor-element.elementor-element-500bb76{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-0febe00 *//* --- تصميم الشاشة الخلفية (Overlay) --- */
.modal-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 99999; /* لضمان الظهور فوق كل شيء */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

/* --- منطق الإظهار عند الضغط --- */
.modal-gate:checked ~ .modal-screen {
    opacity: 1;
    visibility: visible;
}

.screen-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

/* --- تصميم جسم النافذة --- */
.modal-frame {
    position: relative;
    width: 90%;
    max-width: 400px;
    background: #050511;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transform: scale(0.8);
    transition: 0.3s;
}

.modal-gate:checked ~ .modal-screen .modal-frame {
    transform: scale(1);
}

/* --- تفاصيل التصميم (الألوان والخطوط) --- */
.modal-header-glow {
    background: linear-gradient(90deg, rgba(188, 19, 254, 0.2), rgba(0, 243, 255, 0.2));
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-header-glow h3 { color: #fff; margin: 0; font-family: 'Cairo'; font-size: 18px; }
.x-close { color: #555; font-size: 24px; cursor: pointer; }

.modal-main-body { padding: 25px; direction: rtl; text-align: right; }

.info-row { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }

.num-box {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; border: 2px solid;
}
.cyan-glow { border-color: #00f3ff; color: #00f3ff; background: rgba(0, 243, 255, 0.1); }
.purple-glow { border-color: #bc13fe; color: #bc13fe; background: rgba(188, 19, 254, 0.1); }
.green-glow { border-color: #22c55e; color: #22c55e; background: rgba(34, 197, 94, 0.1); }

.info-row p { color: #ccc; margin: 0; font-family: 'Cairo'; font-size: 14px; }

.done-btn {
    display: block; width: 100%; text-align: center;
    padding: 10px; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px; color: #fff; cursor: pointer;
    font-weight: bold; margin-top: 10px;
}/* End custom CSS */