/* واجهة موحدة لنادي الأزهر - لا تغيّر وظائف النموذج */
html,body{
    min-height:100%;
    background:
      radial-gradient(circle at 15% 15%,rgba(255,255,255,.28),transparent 28%),
      linear-gradient(135deg,#0eacb6 0%,#2799b6 48%,#826cb0 100%) !important;
}
body{background-attachment:fixed !important;}

.page{
    min-height:100vh !important;
    padding:28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:transparent !important;
}

.shell{
    width:min(1400px,calc(100vw - 56px)) !important;
    height:min(820px,calc(100vh - 56px)) !important;
    min-height:650px !important;
    display:grid !important;
    grid-template-columns:42% 58% !important;
    direction:ltr !important;
    border-radius:32px !important;
    overflow:hidden !important;
    padding:12px !important;
    gap:12px !important;
    background:rgba(255,255,255,.14) !important;
    border:1px solid rgba(255,255,255,.34) !important;
    box-shadow:0 24px 70px rgba(21,48,68,.22) !important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.visual{
    grid-column:1 !important;
    position:relative !important;
    min-width:0 !important;
    height:100% !important;
    border-radius:23px !important;
    overflow:hidden !important;
    background:transparent !important;
    padding:0 !important;
    direction:rtl !important;
}

/* نخفي الهوية القديمة أعلى الجانب لأن الصورة نفسها تحمل الهوية */
.visual .brand{display:none !important;}

.side-art{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    pointer-events:none !important;
}
.side-art img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
}

.form-side{
    grid-column:2 !important;
    min-width:0 !important;
    height:100% !important;
    padding:38px 44px !important;
    border-radius:23px !important;
    overflow:hidden !important;
    background:rgba(255,255,255,.96) !important;
    box-shadow:0 10px 35px rgba(24,49,74,.08) !important;
    direction:rtl !important;
}

.type-card,input,select,textarea,.upload{
    background:rgba(255,255,255,.86) !important;
}
.type-card:hover{border-color:#0eacb6 !important;}

@media(max-width:900px){
    .page{padding:14px !important;}
    .shell{
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        min-height:0 !important;
        display:flex !important;
        flex-direction:column !important;
        padding:10px !important;
        gap:10px !important;
        border-radius:24px !important;
    }
    .visual{
        width:100% !important;
        height:auto !important;
        aspect-ratio:1053/1212 !important;
        border-radius:18px !important;
    }
    .form-side{
        width:100% !important;
        height:auto !important;
        min-height:620px !important;
        padding:26px 22px !important;
        border-radius:18px !important;
    }
}


/* إصلاح ظهور أزرار السابق/التالي داخل جميع الخطوات */
.form-side{
    overflow:hidden !important;
}
.steps{
    flex:1 !important;
    min-height:0 !important;
    overflow:hidden !important;
}
.step{
    height:100% !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-bottom:82px !important;
}
.step.active{
    display:block !important;
}
.actions{
    position:sticky !important;
    bottom:0 !important;
    z-index:20 !important;
    margin-top:18px !important;
    padding:12px 0 4px !important;
    background:linear-gradient(to top,rgba(255,255,255,1) 72%,rgba(255,255,255,.88) 88%,rgba(255,255,255,0)) !important;
}
@media(max-width:900px){
    .form-side{overflow:visible !important;}
    .steps{overflow:visible !important;}
    .step{height:auto !important;overflow:visible !important;padding-bottom:20px !important;}
    .actions{position:static !important;background:none !important;}
}


/* === إصلاح نهائي: الأزرار بعد الحقول وليست فوقها === */
.form-side{
    overflow:hidden !important;
}
.steps{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-left:4px !important;
}
.step{
    display:none !important;
    height:auto !important;
    min-height:100% !important;
    overflow:visible !important;
    padding:2px 2px 18px !important;
}
.step.active{
    display:block !important;
}
.actions{
    position:static !important;
    inset:auto !important;
    margin-top:20px !important;
    padding:0 0 8px !important;
    background:none !important;
    z-index:auto !important;
}
@media(max-width:900px){
    .form-side{overflow:visible !important;}
    .steps{overflow:visible !important;}
    .step{min-height:0 !important;}
}


/* === تحسين أزرار التنقل واختيار مجال الانضمام === */

/* تثبيت منطقة الأزرار أسفل يسار بطاقة النموذج مع رفعها قليلًا */
.form-side{position:relative !important;}
.actions{
    position:absolute !important;
    left:44px !important;
    right:auto !important;
    bottom:26px !important;
    width:auto !important;
    display:flex !important;
    flex-direction:row !important;
    gap:10px !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    z-index:30 !important;
}

/* مساحة آمنة أسفل الخطوات حتى لا تمر الحقول خلف الأزرار */
.steps{
    padding-bottom:86px !important;
}

/* الخيار المحدد: نفس تدرج هوية الخلفية */
.type-card{
    transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease !important;
}
.type-card:has(input:checked){
    background:linear-gradient(135deg,#0eacb6 0%,#3198b5 52%,#826cb0 100%) !important;
    border-color:transparent !important;
    color:#fff !important;
    box-shadow:0 8px 20px rgba(52,111,154,.18) !important;
}
.type-card:has(input:checked) b,
.type-card:has(input:checked) small{
    color:#fff !important;
}

/* الجوال: الأزرار تعود لتدفق الصفحة الطبيعي */
@media(max-width:900px){
    .actions{
        position:static !important;
        margin-top:18px !important;
        justify-content:flex-start !important;
    }
    .steps{padding-bottom:0 !important;}
}