/* ==========================================================================
   shared.css — قشرة التطبيق المشتركة بين منصات «مطارات الرياض»
   يُحمَّل بعد ra-brand.css وقبل app.css
   صفر لون صريح — كل شيء من --ra-*
   ========================================================================== */

/* ---------- الترويسة ---------- */
.ra-header {
  position: sticky; inset-block-start: 0; z-index: 40;
  background: var(--ra-surface);
  border-block-end: 1px solid var(--ra-border);
  backdrop-filter: saturate(180%) blur(8px);
}
.ra-header__bar {
  display: flex; align-items: center; gap: var(--ra-s-4);
  min-block-size: 64px; padding-block: var(--ra-s-2);
}
.ra-brandmark { display: flex; align-items: center; gap: var(--ra-s-3); text-decoration: none; color: inherit; flex: 0 1 auto; min-inline-size: 0; }
.ra-brandmark__name { font-family: var(--ra-font-display); font-weight: 700; font-size: var(--ra-fs-lg); line-height: 1.1; }
.ra-brandmark__sub { font-size: var(--ra-fs-xs); color: var(--ra-text-mute); line-height: 1.2; }

/* رقعة الشعار — تحافظ على قراءة الشعار الرسمي في الوضع الداكن */
.rq-logo-plate {
  background: var(--ra-neutral-0);
  border-radius: var(--ra-r-sm);
  padding: 6px var(--ra-s-2);
  display: grid; place-items: center; flex: none;
  border: 1px solid var(--ra-border);
}
.rq-logo-plate svg, .rq-logo-plate img { block-size: 26px; inline-size: auto; }
.rq-logo-plate--lg { padding: var(--ra-s-3) var(--ra-s-4); border-radius: var(--ra-r-md); }
.rq-logo-plate--lg svg, .rq-logo-plate--lg img { block-size: 44px; }
/* على الشاشات الضيقة يتجاوز الشعار الكبير عرض الجهاز — يُصغَّر بدل أن يقصّ */
@media (max-width: 560px) {
  .rq-logo-plate--lg { padding: var(--ra-s-2) var(--ra-s-3); }
  .rq-logo-plate--lg svg, .rq-logo-plate--lg img { block-size: 26px; }
  .ra-brandmark__name { font-size: var(--ra-fs-md); }
}

/* ---------- التنقّل ---------- */
.ra-nav { display: flex; gap: var(--ra-s-1); overflow-x: auto; scrollbar-width: none; }
.ra-nav::-webkit-scrollbar { display: none; }
.ra-nav a {
  display: inline-flex; align-items: center; gap: var(--ra-s-2);
  min-block-size: var(--ra-tap); padding-inline: var(--ra-s-4);
  border-radius: var(--ra-r-pill); text-decoration: none; white-space: nowrap;
  color: var(--ra-text-soft); font-weight: 600; font-size: var(--ra-fs-sm);
  transition: background .16s ease, color .16s ease;
}
.ra-nav a:hover { background: var(--ra-surface-sunk); color: var(--ra-text); }
.ra-nav a[aria-current="page"] { background: var(--ra-brand-soft); color: var(--ra-brand); }
.ra-nav svg { inline-size: 18px; block-size: 18px; flex: none; }

/* شريط سفلي على الجوال */
@media (max-width: 720px) {
  .ra-header__bar { flex-wrap: wrap; row-gap: var(--ra-s-2); }
  .ra-nav {
    position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 45;
    background: var(--ra-surface); border-block-start: 1px solid var(--ra-border);
    padding: var(--ra-s-1) var(--ra-s-2);
    padding-block-end: max(var(--ra-s-1), env(safe-area-inset-bottom));
    justify-content: space-between; box-shadow: var(--ra-sh-2);
  }
  .ra-nav a {
    flex-direction: column; gap: 2px; padding-inline: var(--ra-s-2);
    font-size: 10px; min-inline-size: 56px; border-radius: var(--ra-r-md);
    justify-content: center; min-block-size: 52px;
  }
  .ra-nav svg { inline-size: 20px; block-size: 20px; }
  body { padding-block-end: 68px; }
}

/* ---------- المحتوى ---------- */
.ra-main { padding-block: var(--ra-s-6) var(--ra-s-8); }
.ra-page-head { margin-block-end: var(--ra-s-5); }
.ra-page-head h1 { margin-block-end: var(--ra-s-1); }
.ra-page-head p { color: var(--ra-text-soft); font-size: var(--ra-fs-sm); max-inline-size: 62ch; }

/* ---------- الحساب ---------- */
.ra-user {
  display: flex; align-items: center; gap: var(--ra-s-2);
  padding: var(--ra-s-1) var(--ra-s-2) var(--ra-s-1) var(--ra-s-3);
  background: var(--ra-surface-sunk); border-radius: var(--ra-r-pill);
  font-size: var(--ra-fs-xs);
}
.ra-user__avatar {
  inline-size: 30px; block-size: 30px; border-radius: 50%; flex: none;
  background: var(--ra-brand); color: var(--ra-on-brand);
  display: grid; place-items: center; font-weight: 700; font-size: var(--ra-fs-xs);
}
.ra-user__name { font-weight: 600; line-height: 1.2; }
.ra-user__role { color: var(--ra-text-mute); line-height: 1.2; }

/* ---------- التذييل ---------- */
.ra-footer {
  border-block-start: 1px solid var(--ra-border);
  margin-block-start: var(--ra-s-8);
  padding-block: var(--ra-s-5);
  background: var(--ra-surface);
}
.ra-footer__inner { display: flex; flex-wrap: wrap; gap: var(--ra-s-3); align-items: center; justify-content: space-between; }
.ra-demo-note {
  display: inline-flex; align-items: center; gap: var(--ra-s-2);
  padding: var(--ra-s-1) var(--ra-s-3); border-radius: var(--ra-r-pill);
  background: var(--ra-warning-soft); color: var(--ra-warning);
  font-size: var(--ra-fs-xs); font-weight: 600;
}

/* ---------- شاشة الدخول ---------- */
.ra-login { min-block-size: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .ra-login { grid-template-columns: 1.05fr .95fr; } }

.ra-login__aside {
  background: linear-gradient(150deg, var(--ra-brand-800) 0%, var(--ra-brand-700) 45%, var(--ra-accent-700) 100%);
  color: var(--ra-neutral-0);
  padding: var(--ra-s-7) var(--ra-s-5);
  display: flex; flex-direction: column; justify-content: center; gap: var(--ra-s-5);
  position: relative; overflow: hidden;
}
.ra-login__aside::after {
  content: ""; position: absolute; inset-block-start: -30%; inset-inline-end: -20%;
  inline-size: 60%; aspect-ratio: 1; border-radius: 50%;
  background: var(--ra-accent-500); opacity: .18; filter: blur(40px);
}
.ra-login__aside > * { position: relative; z-index: 1; }
.ra-login__aside h1 { font-size: var(--ra-fs-4xl); color: var(--ra-neutral-0); letter-spacing: -.02em; }
.ra-login__aside p { color: var(--ra-neutral-0); opacity: .88; max-inline-size: 48ch; }
.ra-login__tag {
  display: inline-flex; align-items: center; gap: var(--ra-s-2); align-self: flex-start;
  padding: var(--ra-s-1) var(--ra-s-4); border-radius: var(--ra-r-pill);
  background: var(--ra-veil); color: var(--ra-neutral-0);
  font-size: var(--ra-fs-sm); font-weight: 600;
  border: 1px solid var(--ra-veil-border);
}
.ra-login__facts { display: flex; flex-wrap: wrap; gap: var(--ra-s-5); }
.ra-login__fact strong { display: block; font-family: var(--ra-font-display); font-size: var(--ra-fs-2xl); line-height: 1.1; }
.ra-login__fact span { font-size: var(--ra-fs-xs); opacity: .85; }

.ra-login__panel { display: grid; place-items: center; padding: var(--ra-s-6) var(--ra-s-5); }
.ra-login__form { inline-size: min(420px, 100%); display: flex; flex-direction: column; gap: var(--ra-s-4); }

.ra-demo-accounts { border: 1px dashed var(--ra-border-strong); border-radius: var(--ra-r-md); padding: var(--ra-s-4); }
.ra-demo-accounts h3 { font-size: var(--ra-fs-sm); margin-block-end: var(--ra-s-3); }
.ra-demo-accounts button {
  inline-size: 100%; text-align: start; cursor: pointer;
  background: var(--ra-surface-sunk); border: 1px solid transparent;
  border-radius: var(--ra-r-sm); padding: var(--ra-s-2) var(--ra-s-3);
  min-block-size: var(--ra-tap); transition: border-color .16s ease, background .16s ease;
}
.ra-demo-accounts button:hover { border-color: var(--ra-brand); background: var(--ra-brand-soft); }
.ra-demo-accounts strong { display: block; font-size: var(--ra-fs-sm); }
.ra-demo-accounts span { font-family: var(--ra-font-mono); font-size: var(--ra-fs-xs); color: var(--ra-text-mute); }