/* ثيم alkabos — مجموعة «إنشاء الحساب والاستعادة».
   الصفحات: register.php ، forgot-password.php ، reset-password.php ،
   confirm-email.php.
   المصدر: _tpl/guest/signup.html و_tpl/guest/resetpassword.html — نُقلت كتلة
   <style> التي كانتا تحملانها في المتن إلى هنا مرّة واحدة.

   النطاق: الغلاف _guest_head.php يطبع $os_main_class على div.content، وصفحاتنا
   الأربع تضع فيه ".ak-auth" ومعه اسم الصفحة (ak-signup / ak-forgot / ak-reset /
   ak-confirm). كل محدّد أدناه يبدأ بأحد هذه الأسماء بلا استثناء: الأوراق
   السبع تُحمَّل على كل صفحة، فقاعدة بلا سند تُعيد كسوة صفحة مجموعة أخرى.

   ما تعرّفه ورقة القالب أصلًا ولا يُكرَّر هنا:
   .hero و.hero .content و.hero .card و.hero form و.input-group و.divider
   و.btn/.btn-primary/.btn-secondary/.btn-block و.google_login و.container
   — كلّها في assets/tpl/storage.perfectcdn.com/9ogllo/iyx2je5y2q7na6b4.css.
   و.alert.alert-success/.alert.alert-danger في 0c9xqm521s184lbn.css.

   الطبقة الضيفة في هذا القالب داكنة في الوضعين (‎:root‎ في ورقة الضيف يعيد
   تعريف ‎--bg-color‎ و‎--text-main‎ بقيم داكنة بعد ورقة اللوحة)، وصفحتا القالب
   المصدر داكنتان بألوان صريحة — فالألوان أدناه صريحة كما في المصدر، ومرجع
   اللون الأساسي ‎var(--main-color)‎ وهو ‎#E50914‎ في الوضعين. */

/* ═════════ المسرح والبطاقة ═════════ */
.ak-auth .hero {
   padding: 48px 20px;
   background:
      radial-gradient(circle at 50% 20%, rgba(229, 9, 20, .12), transparent 30%),
      linear-gradient(135deg, #111111 0%, #000000 58%);
}

/* ‎.hero .content‎ في الورقة ‎space-between‎ بفجوة ٥٠px لأنها بُنيت لعمودَي
   الصفحة الرئيسة (نصّ + بطاقة). صفحاتنا بطاقة واحدة، فتُوسَّط. */
.ak-auth .hero > .content {
   justify-content: center;
   align-items: center;
   gap: 0;
}

.ak-auth .hero .card {
   width: min(100%, 500px);
   flex: 0 1 500px;
   padding: 34px 38px;
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 18px;
   background: linear-gradient(145deg, #171717 0%, #0b0b0b 100%);
   box-shadow: 0 22px 55px rgba(0, 0, 0, .55), 0 0 26px rgba(229, 9, 20, .09);
}

/* بطاقة الاستعادة والتأكيد أضيق — نموذج من حقل واحد أو رسالة وزرّ. */
.ak-forgot .hero .card,
.ak-reset .hero .card,
.ak-confirm .hero .card {
   width: min(100%, 460px);
   flex: 0 1 460px;
}

/* ═════════ رأس البطاقة ═════════ */
.ak-auth .hero .card .form-header {
   margin-bottom: 26px;
   text-align: center;
}
.ak-auth .hero .card .form-header h3 {
   margin: 0 0 6px;
   color: #ffffff;
   font-size: 27px;
   font-weight: 800;
   line-height: 1.4;
}
.ak-auth .hero .card .form-header p {
   margin: 0;
   color: #a7afbf;
   font-size: 14px;
   line-height: 1.7;
}

/* ═════════ الحقول ═════════
   ‎.hero form‎ في الورقة عمودٌ بفجوة ١٥px، فلا هوامش على الأبناء هنا. */
.ak-auth .hero .input-group {
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
}
.ak-auth .hero .input-group > i {
   position: absolute;
   z-index: 1;
   right: 16px;
   top: 50%;
   transform: translateY(-50%);
   color: #7d8799;
   pointer-events: none;
}

/* ‎.form-control‎ في ورقة اللوحة تسند ‎background:var(--bg-body)‎ وهو متغيّر
   غير معرَّف في هذا الثيم — فالحقل يخرج شفّافًا بلا هذه القاعدة. وحقول وحدة
   «الإعدادات ▸ Signup form» تصل بلا ‎.input-group‎ وبلا أيقونة، فتُكسى هنا
   بالكسوة نفسها. */
.ak-auth .hero .form-control {
   width: 100%;
   height: 50px;
   padding: 0 15px;
   border: 1px solid #333d4e;
   border-radius: 9px;
   outline: none;
   color: #ffffff;
   background: #273143;
   font-size: 14px;
   font-weight: 600;
   text-align: start;
   transition: border-color .2s ease, box-shadow .2s ease;
}
.ak-auth .hero .input-group .form-control { padding: 0 45px 0 15px; }
.ak-auth .hero .form-control::placeholder { color: #a8b1c0; opacity: 1; }
.ak-auth .hero .form-control:focus {
   border-color: var(--main-color, #E50914);
   box-shadow: 0 0 0 3px rgba(229, 9, 20, .18);
}

/* الأيقونة في الورقة مثبَّتة يمينًا (القالب عربيّ) — والاتجاه يأتي من
   ‎gf_dir()‎، فحين تكون اللغة إنجليزية تنتقل الأيقونة والحشوة معها. */
[dir="ltr"] .ak-auth .hero .input-group > i { right: auto; left: 16px; }
[dir="ltr"] .ak-auth .hero .input-group .form-control { padding: 0 15px 0 45px; }

/* حقول وحدة Signup form: ‎.form-group > .form-label + .form-control-wrap‎ */
.ak-auth .hero .form-label {
   display: block;
   margin: 0 0 6px;
   color: #b6becd;
   font-size: 13px;
   font-weight: 700;
}
.ak-auth .hero .form-control-wrap { width: 100%; }

/* ═════════ خانة الموافقة على الشروط ═════════ */
.ak-auth .hero .checkbox label {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   color: #b6becd;
   font-size: 13px;
   line-height: 1.7;
   cursor: pointer;
}
.ak-auth .hero .checkbox input {
   margin-top: 5px;
   flex: none;
   accent-color: var(--main-color, #E50914);
}
.ak-auth .hero .checkbox a { color: #ff3942; font-weight: 700; }

/* ═════════ الأزرار ═════════ */
.ak-auth .hero .btn.btn-primary {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   min-height: 50px;
   padding: 12px 20px;
   border: 1px solid var(--main-color, #E50914);
   border-radius: 9px;
   color: #ffffff;
   background: var(--main-color, #E50914);
   box-shadow: 0 8px 20px rgba(229, 9, 20, .28);
   font-size: 16px;
   font-weight: 800;
   transition: .2s ease;
}
.ak-auth .hero .btn.btn-primary:hover {
   border-color: #ff1a25;
   background: #ff1a25;
   transform: translateY(-2px);
}

/* زرّ جوجل: الشعار رسمٌ ضمنيّ، ولا يُحمَّل أي أصل خارجي. */
.ak-auth .hero .ak-google-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   width: 100%;
   min-height: 50px;
   border: 1px solid #dadce0;
   border-radius: 9px;
   background: #ffffff;
   color: #3c4043;
   font-size: 14px;
   font-weight: 700;
}
.ak-auth .hero .ak-google-btn:hover { background: #f1f3f4; }
.ak-auth .hero .google_login { width: 100%; }

/* ═════════ الفاصل ═════════
   الورقة ترسم خطّيه بـ‎border-bottom‎ شبه شفّاف — نُظهره على خلفية البطاقة. */
.ak-auth .hero .divider {
   gap: 12px;
   color: #9fa8b7;
   font-size: 12px;
}
.ak-auth .hero .divider::before,
.ak-auth .hero .divider::after {
   height: 1px;
   border: 0;
   background: #2c2c2c;
}
.ak-auth .hero .divider span { padding: 0; }

/* ═════════ التنبيهات ═════════
   ‎.alert.alert-danger‎/‎.alert-success‎ في الورقة مصمَّمة لصفّ «نصّ + زرّ
   إغلاق»: حشوة ٤٦px من جهة والمحاذاة للوسط. رسالتنا بلا زرّ إغلاق وقد تكون
   سطرين، فتبدأ من جهة القراءة والأيقونة تعلو معها. */
.ak-auth .hero .alert {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 10px;
   width: 100%;
   margin: 0 0 4px;
   padding: 14px 16px;
   text-align: start;
   line-height: 1.8;
}
.ak-auth .hero .alert > i { flex: none; font-size: 18px; line-height: 1.6; }
.ak-auth .hero .alert > span { flex: 1 1 auto; min-width: 0; }

/* ‎alert-info‎ لا وجود له في أي ورقة من أوراق هذا القالب، و‎confirm-email.php‎
   يسنده للحالات «قيد الانتظار» و«انتظر» و«ابدأ» — بلا هذه القاعدة يخرج
   التنبيه بلا خلفية ولا لون. */
.ak-auth .hero .alert.alert-info {
   position: relative;
   border: none;
   border-radius: 16px;
   color: #ffffff;
   background: linear-gradient(135deg, #334155, #64748b);
   box-shadow: 0 16px 40px rgba(15, 23, 42, .35);
   font-size: 14px;
}

/* ═════════ سطور الروابط والملاحظات ═════════ */
.ak-auth .hero .login-link {
   margin: 0;
   text-align: center;
   color: #b6becd;
   font-size: 13.5px;
   line-height: 1.9;
}
.ak-auth .hero .card > .login-link { margin-top: 20px; }
.ak-auth .hero .login-link a { color: var(--main-color, #E50914); font-weight: 800; }

.ak-auth .hero .ce-note {
   margin: 0;
   color: #9fa8b7;
   font-size: 13px;
   line-height: 1.9;
   text-align: start;
}

/* صفّ زرَّي صفحة التأكيد: زرّان عربيّان طويلان يخرجان من البطاقة بلا التفاف،
   و‎.btn-secondary‎ في الورقة يحمل ‎margin-left:10px‎ يكسر التوزيع. */
.ak-auth .hero .ce-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   width: 100%;
   margin-top: 4px;
}
.ak-auth .hero .ce-actions > .btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   flex: 1 1 160px;
   width: auto;
   min-height: 48px;
   margin: 0;
   padding: 12px 16px;
   border-radius: 9px;
   font-size: 14px;
   font-weight: 700;
}
.ak-auth .hero .ce-actions > .btn.btn-secondary {
   color: #ffffff;
   border: 1px solid rgba(255, 255, 255, .18);
   background: rgba(255, 255, 255, .04);
}
.ak-auth .hero .ce-actions > .btn.btn-secondary:hover { background: rgba(255, 255, 255, .09); }

/* ═════════ الجوال ═════════ */
@media (max-width: 575px) {
   .ak-auth .hero { padding: 32px 14px; }
   .ak-auth .hero .card { padding: 28px 20px; }
   .ak-auth .hero .card .form-header { margin-bottom: 20px; }
   .ak-auth .hero .card .form-header h3 { font-size: 22px; }
   .ak-auth .hero .card .form-header p { font-size: 13px; }
   .ak-auth .hero .ce-actions > .btn { flex: 1 1 100%; }
}