/* ==========================================================================
   صفحات الدخول الموحّد (sso.qiwa.sa) — مطابقة لصفحة «تسجيل الدخول» في قوى
   تُحمّل بعد qiwa-public.css وتستخدم نفس المكوّنات (الهيدر، الأزرار، الفوتر)
   مع اختلافات هذه الصفحات: هيدر بعرض كامل، شريط حكومي مصغّر، فوتر بأعمدة مختلفة.
   ========================================================================== */

/* الشريط الحكومي في sso: بعرض كامل وحشوة 6/32 ونص 12px */
.gov--sso .gov__wrap { padding: 6px 32px; }
.gov--sso .gov__row { gap: 8px; padding: 0; }
.gov--sso .gov__title { gap: 8px; }
.gov--sso .gov__text { font-size: 12px; line-height: 18px; }
.gov--sso .gov__help { gap: 4px; font-weight: 500; }
.gov--sso .gov__help .q-chev { width: 20px; height: 20px; }

/* الهيدر بعرض كامل (بدون حاوية) — حشوة 32 يميناً و22 يساراً */
.qh--static { position: relative; z-index: 2; }
.qh--full .qh__inner { padding-inline: 32px 22px; height: 79px; }
.qh--full .qh__bar { border-bottom: 0; }
.qh--full .qh__line { height: 1px; background: var(--q-gray-200); }

/* ------------------------------- جسم الصفحة ------------------------------- */

.sso { display: flex; justify-content: space-between; min-height: 820px; }
.sso__col { flex: 1; display: flex; justify-content: center; margin: 75px 0; }
.sso__card { width: 100%; max-width: 455px; padding: 15px; display: flex; flex-direction: column; }
.sso__title { margin: 2px 0 24px; font-size: 36px; font-weight: 600; line-height: 47.88px; color: var(--q-ink); }

.sso-field { display: flex; flex-direction: column; gap: 8px; }
.sso-field + .sso-field { margin-top: 24px; }
.sso-field--first { margin-top: 24px; }
.sso-field--pw { margin-bottom: 16px; }
#loginForm { display: flex; flex-direction: column; }
.sso-field__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; }
.sso-field__label { font-weight: 500; color: var(--q-ink); }
.sso-link { font-weight: 500; color: var(--q-navy-800); text-decoration: underline; }
.sso-link:hover { color: var(--q-muted); }

.sso-input { position: relative; display: flex; align-items: center; border-radius: 4px; overflow: hidden; }
.sso-input input {
  width: 100%; height: 44px; padding-block: 12px; padding-inline: 16px 12px;
  background: #fff; color: var(--q-ink); border: 1px solid var(--q-gray-400); border-radius: 4px;
  font-family: inherit; font-size: 16px; line-height: 1.5;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  transition: border-color .1s ease-in; z-index: 1;
}
.sso-input input::placeholder { color: var(--q-text); opacity: 1; }
.sso-input input:hover { border-color: var(--q-muted); }
.sso-input input:focus { outline: none; background: #fff; border-color: var(--q-gray-400); color: var(--q-text); }
.sso-input input:active { border-color: var(--q-ink-2); background: var(--q-gray-100); }
/* خط التركيز السفلي يتمدد من المنتصف (200ms) كما في قوى */
.sso-input__bar {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 0; height: 2px; margin: 0 auto;
  background: var(--q-ink-2); z-index: 1; transition: max-width .2s ease-in;
}
.sso-input input:focus + .sso-input__bar { max-width: 100%; }
.sso-input--pw input { padding-inline-end: 44px; }
.sso-input__eye {
  position: absolute; inset-inline-end: 12px; z-index: 2;
  width: 24px; height: 24px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; color: var(--q-ink);
  transition: background-color .1s;
}
.sso-input__eye:hover { background: var(--q-gray-100); color: var(--q-muted); }
.sso-input__eye svg { width: 24px; height: 24px; }
.sso-field.is-error input { border-color: #D92D20; }
.sso-field__error { font-size: 14px; line-height: 20px; color: #B42318; }

.sso-actions { display: flex; flex-direction: column; margin-top: 16px; }
.sso-actions .q-btn { width: 100%; height: 44px; }
.sso-actions .q-btn--dark:disabled { opacity: .6; cursor: default; }
.sso-register { display: flex; gap: 12px; margin-top: 24px; }
.sso-register p { color: var(--q-ink); }
.sso-or { position: relative; display: flex; justify-content: center; margin: 24px 0; }
.sso-or::before { content: ''; position: absolute; right: 0; top: 11px; width: 100%; height: 1px; background: #E7E7E7; z-index: 5; }
.sso-or p { position: relative; z-index: 10; padding: 0 8px; background: #FAFAFA; font-size: 14px; line-height: 21px; color: #6C7276; }
.sso-nafath { gap: 0; height: 44px !important; padding: 10px 20px !important; background-color: transparent !important; }
.sso-nafath:hover { background-color: var(--q-gray-200) !important; border-color: var(--q-gray-300) !important; }
.sso-nafath span { display: flex; align-items: center; gap: 4px; font-size: 16px; line-height: 24px; }
.sso-nafath img { width: 36px; height: 16px; }
.sso-nafath b { font-weight: 500; color: #199B8F; margin-inline-start: 8px; }

/* تنبيه الخطأ/المعلومة أعلى النموذج */
.sso-alert { display: none; gap: 8px; align-items: flex-start; margin-bottom: 24px; padding: 12px 16px; border-radius: 8px; font-size: 14px; line-height: 20px; }
.sso-alert.is-shown { display: flex; }
.sso-alert svg { width: 20px; height: 20px; flex: none; }
.sso-alert--error { background: #FEF3F2; border: 1px solid #FECDCA; color: #B42318; }
.sso-alert--info { background: #EFF8FF; border: 1px solid #B2DDFF; color: #175CD3; }

/* اللوحة الجانبية: خلفية #343D4D ثم الصورة تظهر تدريجياً (300ms) بعد تحميلها */
.sso__side { flex: 1; position: relative; overflow: hidden; background: #343D4D; }
.sso__side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease-in; }
.sso__side img.is-loaded { opacity: 1; }

/* ------------------------------- فوتر sso ------------------------------- */
.qf--sso .qf__legal { flex: none; }
.qf--sso .qf__logos { flex: none; justify-content: space-between; }
.qf--sso .qf__logo-tk-wrap { padding-inline-end: 16px; }
.qf--sso .qf__tools-row { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; }
.qf--sso .qf__tools-row .q-btn { width: 100%; }

@media (max-width: 992px) {
  .sso__side { display: none; }
  .qh--full .qh__inner { padding-inline: 16px; }
}
@media (max-width: 768px) {
  .gov--sso .gov__wrap { padding: 6px 16px; }
  /* الجوال كما في قوى: بلا هامش علوي، حشوة البطاقة 24/15/15، وفوتر بحشوة 24/16 */
  .sso { min-height: 0; }
  .sso__col { margin: 0 0 75px; }
  .sso__card { padding: 24px 15px 15px; max-width: none; }
  .sso__title { font-size: 32px; line-height: 41.92px; }
  .qf--sso { padding: 24px 0 16px; }
}