/* default login css */

/*intro css */
#login_logo { height:70px; }
#intro_top {width:100%;height:100%;z-index:1;position:relative;background: #ffffff;background-repeat:no-repeat;background-size:cover;background-position:center center;background-attachment:fixed;}
#login_wrap { width:100%; height:100%; }
#login_all {width:800px;max-width:94%;border-radius:20px;display:block;margin:0 auto;color:#fff;}
.login_not_member { text-align:center; padding-top:5px; }
#intro_lang { position:absolute; top:10px; right:20px; width:40px; height:40px; }

/* section css */
.section { width:100%; height:auto; margin:0 auto; }
.section_content { width:100%; max-width:1100px; margin:0 auto; }
.section_inside { margin:0 auto; }

@media screen and (max-width:1120px){
	.section_inside { width:96%; }
}




/* القواعد الأساسية المشتركة */
button {
    font-family: 'Almarai', sans-serif;
    padding: 17px 15px;
    border-radius: 10px;
    font-size: clamp(25px, 4vw, 25px); /* تكيف أفضل مع الشاشات الصغيرة */
    font-weight: 800;
    box-shadow: #ccc 0 2px 4px 0;
    transition: all 0.3s ease;
    white-space: nowrap;
    width: 260px;
    text-align: center;
    border: none;
    cursor: pointer;
    margin: 5px 0;
    justify-content: center;
    align-items: center;
}

.btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
}

.btn-text {
    flex-grow: 1;
    text-align: right;
    font-size: inherit; /* يرث حجم الخط من الزر */
}

.btn-separator {
    opacity: 0.7;
    color: #a1ada7;
    margin: 0 12px;
    font-size: inherit; /* يرث حجم الخط من الزر */
}

.btn-icon {
    font-size: 1em; /* حجم الأيقونة يساوي حجم النص */
    width: 1em; /* ثبات عرض الأيقونة */
    height: 1em; /* ثبات ارتفاع الأيقونة */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* تخصيص زر Guest Login */
.getGuestLogin {
    background: linear-gradient(117deg, #009688, #4caf50);
    color: #fff;
    margin-top: 5px;
    position: relative;
    overflow: hidden; /* لإخفاء أي جزء زائد من الأيقونة الخلفية */
}

.getGuestLogin::before {
    content: "\f0c2"; /* كود أيقونة الصاروخ في Font Awesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    opacity: 0.3; /* شفافية الأيقونة الخلفية */
    z-index: 0;
    color: #c0ecc2;
}

.getGuestLogin .btn-content {
    position: relative;
    z-index: 1; /* لجعل المحتوى يظهر فوق الخلفية */
}

.getGuestLogin .left-icon {
    margin-right: 10px;
    font-size: 0.9em;
    display: none; /* إخفاء الأيقونة اليسرى في الوضع العادي */
}

.getGuestLogin .right-icon {
    margin-left: 5px;
}

/* تعديلات للشاشات الصغيرة */
@media (max-width: 480px) {
    .getGuestLogin::before {
        font-size: 1em;
        left: 10px;
    }
    
    .getGuestLogin .left-icon {
         /* إظهار الأيقونة اليسرى في الشاشات الصغيرة */
    }
}


.getLogin {
    background: linear-gradient(117deg, #9204ab, #673ab7);
    color: #fff;
    margin-top: 10px;
}

.getRegistration {
    background: linear-gradient(117deg, #fe9150, #fe6446);
    color: #fff;
    margin-top: 10px;
}

/* تعديلات للشاشات الصغيرة */
@media (max-width: 480px) {
    button {
        min-width: 70%;
        width: 260px; /* تصغير عرض الزر */
        font-size: clamp(25px, 4vw, 25px); /* تصغير حجم النص */
    }
    
    .btn-separator {
        margin: 0 8px; /* تقليل المسافة بين النص والفاصل */
    }
    
    .btn-icon {
        font-size: 0.9em; /* تصغير حجم الأيقونة */
    }
}

@media (max-width: 360px) {
    button {
        font-size: clamp(25px, 4vw, 25px);
    }
    
    .btn-icon {
        font-size: 0.8em;
    }
}










 
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.separator {
    border-top: 1px solid #e1e1e1;
    width: 260px;
    margin: 20px 0 30px 0;
}

.ugc-box {
    width: 260px;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background-color: white;
    box-shadow: -15px -15px 20px rgb(57 65 124 / 8%), 15px 15px 20px rgb(57 65 124 / 8%);
    text-align: center;
}

.ugc-title {
    color: red;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.ugc-content {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    text-align: right;
}








.release-container {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 20px;
}

.release-box {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 15px 40px;
    display: inline-block;
}

.release-content {
    align-items: center;
    gap: 15px;
    position: relative;
    color: #7b7b7b;
}

.version-text {
    white-space: nowrap;
    font-size: 16px;
}

.icon-left {
    color: #ff4757;
    font-size: 18px;
}

.icon-right {
    color: #2ed573;
    font-size: 18px;
}













.security-box {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 40px auto;
    padding: 7px 20px;
    border-top: none;
    border-radius: 8px;
    background-color: white;
    text-align: center;
}

.notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 100px); /* 50px من كل جانب */
    height: 1px;
    border: 1px solid #e0e0e0;
}

.shield-icon {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    padding: 0 20px;
}

.shield-icon i {
    color: #4CAF50;
    font-size: 25px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.box-content {
    padding-top: 10px;
}

.arabic-line {
    color: #333;
    font-size: 10px;
    margin-bottom: 10px;
    direction: rtl;
}

.english-line {
    color: #333;
    font-size: 10px;
    direction: ltr;
}


.ad-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}