/* ===============================
   Al Enjaz Al Motamad Recruitment (RTL)
   Palette:
   Navy #14243C / #1C2C44, Slate #445464, Accent Red #8C1C14
   =============================== */

/* ===============================
   Theme Tokens
=============================== */
:root{
  --bg:#07101c;
  --bg2:#0a1627;

  --navy:#14243C;
  --navy2:#1C2C44;
  --slate:#445464;
  --accent:#8C1C14;

  --card: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);

  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 18px;

  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.10);

  --glass-bg: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.10);

  --input-bg: rgba(255,255,255,.06);
  --input-border: rgba(255,255,255,.14);
  --input-placeholder: rgba(255,255,255,.55);
}

/* ===============================
   Base
=============================== */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
}

/* ===============================
   Light Mode (Professional)
=============================== */
body.light-mode{
  --bg:#f6f8fc;
  --bg2:#ffffff;

  --navy:#0b1a2e;
  --navy2:#132540;
  --slate:#475569;
  --accent:#8C1C14;

  --card: rgba(15,23,42,.04);
  --line: rgba(15,23,42,.12);
  --text: rgba(15,23,42,.92);
  --muted: rgba(15,23,42,.62);

  --shadow: 0 18px 60px rgba(15,23,42,.12);

  --surface: rgba(15,23,42,.04);
  --surface2: rgba(15,23,42,.08);

  --glass-bg: rgba(255,255,255,.78);
  --glass-border: rgba(15,23,42,.10);

  --input-bg: rgba(255,255,255,.92);
  --input-border: rgba(15,23,42,.16);
  --input-placeholder: rgba(15,23,42,.45);
}

/* ===============================
   Utilities
=============================== */
.muted{ color: var(--muted) !important; }

.glass{
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
}

.hr-soft{ border-color: rgba(255,255,255,.10); opacity: 1; }

/* ===============================
   Topbar
=============================== */
.topbar{
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar .mini{
  font-size: .9rem;
  color: var(--text);
}
.topbar .mini i{ margin-inline-end: .35rem; opacity:.9; }


.navbar{
  border-bottom: 1px solid var(--line);
}

/* Brand */
.navbar-brand{
  display:flex; align-items:center; gap:.75rem;
}
.brand-title{ color: var(--muted); font-weight: 950; letter-spacing: .2px; line-height: 1.2; }
.brand-sub{ font-size: .82rem; color: var(--muted); }

/* ✅ خلي الـ collapse عبارة عن صف واحد */
.navbar .navbar-collapse{
  display:flex !important;
  align-items:center;
}

/* ✅ القائمة تتمدد وتاخذ المساحة */
.navbar .navbar-collapse > ul{
  flex: 1 1 auto;
  min-width: 0;
}

/* ✅ الأزرار لا تنضغط ولا تتكسر */
.navbar .navbar-collapse > .d-flex{
  flex: 0 0 auto;
  white-space: nowrap;
  margin-inline-start: 10px;
}

/* ✅ القائمة صف واحد بدون لف */
.navbar .navbar-nav{
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* ✅ روابط القائمة (ثابتة ولا تنزل سطر بسهولة) */
.nav-link{
  color: var(--text) !important;
  border-radius: 999px;
  padding: .45rem .65rem !important; /* أقل من السابق */
  font-size: 0.95rem;              /* ثابت */
  line-height: 1.2;
}

.nav-link:hover{
  background: rgba(255,255,255,.06);
  color:#fff !important;
}

.nav-link.active{
  background: rgba(255,255,255,.08);
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.10);
}

/* Make Bootstrap toggler visible */
.navbar-toggler{ border-color: rgba(255,255,255,.14); }
.navbar-toggler-icon{ filter: invert(1) opacity(.9); }

/* ✅ اختياري: اخفاء السطر الانجليزي لتوفير مساحة في الشاشات المتوسطة */
@media (max-width: 1400px){
  .brand-sub{ display:none; }
}

/* ✅ تصغير خفيف للروابط في الشاشات الأقل (ديسكتوب متوسط) */
@media (max-width: 1199.98px){
  .nav-link{ padding: .45rem .55rem !important; font-size: .92rem; }
}

/* ===============================
   Buttons
=============================== */
.btn-accent{
  background: linear-gradient(90deg, rgb(27, 41, 66), rgb(67,81,102));
  border: none;
  color: #fff !important;
  font-weight: 900;
}
.btn-accent:hover{ filter: brightness(1.02); }

.btn-outline-accent{
  border-color: rgba(27, 41, 66,.45);
  color: var(--text);
}
.btn-outline-accent:hover{
  background: rgba(27, 41, 66,.12);
  border-color: rgba(27, 41, 66,.65);
  color:#fff;
}

/* ===============================
   Layout
=============================== */
.page{ padding: 2.2rem 0 4rem; }

/* ===============================
   Hero
=============================== */
.hero{ padding: 3.6rem 0 2.6rem; }
.hero h1{
  font-weight: 950;
  line-height: 1.25;
  font-size: clamp(2rem, 3.8vw, 3.05rem);
}
.hero p{
  color: var(--muted);
  line-height: 1.95;
  font-size: 1.05rem;
}

.badge-pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.28);
  color: var(--text);
  font-weight: 850;
}

/* ===============================
   Sections
=============================== */
.section{ padding: 3.2rem 0; }
.section-alt{
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.section-title{ font-weight: 950; margin: 0; }
.section-sub{ margin:.45rem 0 0; color: var(--muted); line-height: 1.9; }

/* ===============================
   Cards
=============================== */
.cardx{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 1.2rem;
  height: 100%;
  box-shadow: 0 14px 50px rgba(0,0,0,.28);
  transition: transform .18s ease, border-color .18s ease;
}
.cardx:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.35);
}
.iconbox{
  width: 54px; height: 54px;
  border-radius: 18px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: .85rem;
  font-size: 1.25rem;
}
.cardx h3{ font-weight: 950; font-size: 1.08rem; margin:0; }
.cardx p{ color: var(--muted); margin:.5rem 0 0; line-height: 1.85; }

/* ===============================
   Forms
=============================== */
.form-control, .form-select, textarea{
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
}
.form-control:focus, .form-select:focus, textarea:focus{
  border-color: rgba(27, 41, 66,.55) !important;
  box-shadow: 0 0 0 .2rem rgba(27, 41, 66,.16) !important;
}
.form-control::placeholder{
  color: var(--input-placeholder) !important;
}
.form-label{ color: rgba(255,255,255,.84); font-weight: 800; }

/* ===============================
   Footer (Always Dark + Always White Text)
=============================== */
.footer{
  padding: 2.6rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background-color: #0b1220 !important;
  background-image: none !important;
  color: #ffffff !important;
}
.footer::before,
.footer::after{ display:none !important; }

.footer,
.footer *,
.footer a,
.footer a:visited,
.footer .muted,
.footer .text-muted,
.footer small,
.footer .small,
.footer .footer-title{
  color:#ffffff !important;
  opacity:1 !important;
  filter:none !important;
}
.footer a{ text-decoration:none; }
.footer a:hover{ text-decoration:underline; color:#fff !important; }

.footer .hr-soft,
.footer hr{ border-color: rgba(255,255,255,.25) !important; }

.footer .badge{
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}

/* ===============================
   Loader
=============================== */
#layoutLoading{
  position: fixed;
  inset: 0;
  background: rgba(7,16,28,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  z-index: 99999;
}
.loader-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--accent);
  animation: b 1s infinite ease-in-out;
}
.loader-dot:nth-child(2){ animation-delay: .12s; opacity:.85; }
.loader-dot:nth-child(3){ animation-delay: .24s; opacity:.70; }
@keyframes b{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }

body.light-mode #layoutLoading{ background: rgba(246,248,252,.92); }
body.light-mode .loader-dot{ background: rgba(15,23,42,.35); }

/* ===============================
   Light Mode helpers (Navbar/Topbar)
=============================== */
body.light-mode .link-light,
body.light-mode .text-white,
body.light-mode .navbar .navbar-brand,
body.light-mode .navbar .navbar-brand *{
  color: var(--text) !important;
}
body.light-mode .topbar .mini{ color: var(--text) !important; }

body.light-mode .navbar .nav-link{ color: var(--text) !important; }
body.light-mode .navbar .nav-link:hover{ background: rgba(27, 41, 66,.06); color: var(--text) !important; }
body.light-mode .navbar .nav-link.active{
  background: rgba(27, 41, 66,.10);
  color: rgba(27, 41, 66,1) !important;
  border-color: rgba(27, 41, 66,.18);
}

body.light-mode .navbar-toggler{ border-color: rgba(15,23,42,.18); }
body.light-mode .navbar-toggler-icon{ filter: invert(1) grayscale(1) contrast(1.1); }
body.light-mode .form-label{ color: rgba(14, 13, 13, 0.84); font-weight: 800; }

/* ===============================
   Light Mode Buttons
=============================== */
body.light-mode .btn-accent{
  background: linear-gradient(90deg, rgba(27, 41, 66,1), rgba(67, 81, 102,1));
}
body.light-mode .btn-accent:hover{ filter: brightness(1.02); }

.btn-outline-accent{
  border-color: rgba(27, 41, 66,.45);
}
body.light-mode .btn-outline-accent:hover{
  background: rgba(27, 41, 66,.12);
  border-color: rgba(27, 41, 66,.65);
  color:#000;
}

body.light-mode .badge-pill{
  background: rgba(27, 41, 66,.12);
  border: 1px solid rgba(27, 41, 66,.28);
  font-weight: 850;
}

body.light-mode .country-btn{
  background: rgba(27, 41, 66,.10);
  border: 1px solid rgba(27, 41, 66,.20);
}

body.light-mode .country-btn:hover{
  background: rgba(27, 41, 66,.16);
  border-color: rgba(27, 41, 66,.35);
}

/* ===============================
   Light Mode Cards
=============================== */

body.light-mode .cardx:hover{
  border-color: rgba(27, 41, 66,.35);
}

/* ===============================
   Theme Switch (Pro Toggle)
=============================== */
.theme-switch{
  display:flex;
  align-items:center;
  gap:.55rem;
  user-select:none;
}

.theme-switch input{
  position:absolute;
  opacity:0;
  width:1px; height:1px;
}

.theme-switch .switch-track{
  width: 54px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  padding: 3px;
  transition: .25s ease;
}

body.light-mode .theme-switch .switch-track{
  background: rgba(15,23,42,.06);
}

.theme-switch .switch-thumb{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--text);
  transition: .25s ease;
}

/* default position (unchecked) */
.theme-switch .switch-thumb{ transform: translateX(0); }

/* checked position (LTR) */
.theme-switch input:checked + .switch-track .switch-thumb{
  transform: translateX(22px);
}

/* RTL flip */
html[dir="rtl"] .theme-switch input:checked + .switch-track .switch-thumb{
  transform: translateX(-22px);
}

body.light-mode .theme-switch .switch-thumb{
  background: #fff;
  border-color: rgba(235, 238, 243, 0.12);
}

.theme-switch input:focus + .switch-track{
  outline: 3px solid rgba(27, 41, 66,.20);
  outline-offset: 2px;
}
/* ===============================
   Sticky Footer (Footer always at bottom)
=============================== */
html, body { height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#appHeader{ flex: 0 0 auto; }
#appFooter{ flex: 0 0 auto; margin-top: auto; }

/* لازم يكون عندك عنصر محتوى بينهما */
.page{
  flex: 1 0 auto;
  width: 100%;
}






/* Countries Section */
.section-countries{
  padding: 3.2rem 0;
}

.country-card{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 1.25rem;
  height: 100%;
  box-shadow: 0 14px 50px rgba(0,0,0,.20);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  text-align: center;
}

body.light-mode .country-card{
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 14px 40px rgba(15,23,42,.10);
}

.country-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.35);
}

.country-flag{
  width: 62px;
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
}

body.light-mode .country-flag{
  background:#fff;
  border-color: rgba(15,23,42,.10);
}

.country-flag img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.country-title{
  font-weight: 950;
  font-size: 1.15rem;
  margin: .25rem 0 .5rem;
}

.country-desc{
  color: var(--muted);
  line-height: 1.85;
  min-height: 58px; /* يخلي البطاقات متساوية */
  margin: 0 0 .9rem;
}

.country-btn{
  width: 100%;
  border-radius: 12px;
  padding: .75rem .9rem;
  font-weight: 850;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  color: var(--text);
}

.country-btn:hover{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.35);
  color: var(--text);
}







/* ===============================
   References Section
=============================== */
.section-references{
  position: relative;
  overflow: hidden;
}

/* الحاوية */
.references-wrap{
  position: relative;
  background: var(--surface);
  border-radius: 18px;
  padding: 1.8rem 1.2rem;
  border: 1px solid var(--line);
}

/* المسار */
.references-track{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

/* كل عنصر */
.ref-item{
  flex: 1 1 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease;
}

.ref-item:hover{
  opacity: 1;
  transform: translateY(-2px);
}

/* الصور */
.ref-item img{
  max-height: 70px;
  max-width: 160px;
  object-fit: contain;

  transition: filter .25s ease;
  filter: brightness(0) invert(1);
}

.ref-item:hover img{
  filter: grayscale(0%);
}

/* لايت مود */
body.light-mode .references-wrap{
  background: #ffffff;
  border-color: rgba(15,23,42,.12);
}

/* موبايل */
@media (max-width: 767.98px){
  .references-track{
    gap: 24px;
  }
  .ref-item img{
    max-height: 56px;
  }
}



/* ===============================
   FIX MOBILE NAVBAR TOGGLER
=============================== */

/* ديسكتوب فقط */
@media (min-width: 992px){
  .navbar .navbar-collapse{
    display: flex !important;
    align-items: center;
  }
}

/* موبايل: رجّع سلوك Bootstrap الطبيعي */
@media (max-width: 991.98px){
  .navbar .navbar-collapse{
    display: none !important;
    width: 100%;
  }

  .navbar .navbar-collapse.show{
    display: block !important;
  }

  /* ترتيب القائمة */
  .navbar-nav{
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
  }

  /* الأزرار */
  .navbar .navbar-collapse > .d-flex{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 12px;
  }

  .navbar .navbar-collapse > .d-flex .btn{
    width: 100%;
    justify-content: center;
  }

  /* السويتش */
  .theme-switch{
    margin: 8px auto 0;
  }
}

/* ===============================
   Auto Moving References
=============================== */
.references-wrap {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.6rem 0;
}

.references-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: ref-marquee 150s linear infinite;
}

@keyframes ref-marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

/* العناصر */
.ref-item{
  flex: 0 0 auto;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ref-item img{
  max-height: 70px;
  max-width: 160px;
  object-fit: contain;
  opacity: .85;
}

/* توقف الحركة عند hover (احترافي) */
.references-wrap:hover .references-track{
  animation-play-state: paused;
}

/* لايت مود */
body.light-mode .references-wrap{
  background: #fff;
  border-color: rgba(15,23,42,.12);
}




.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: #e8e9eb;
    text-align: right;
    background-color: rgba(15,23,42,.12);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}

 .accordion-button:not(.collapsed) {
    /* color: #f0f2f5;
    background-color: rgba(82, 83, 87, 0.12); */
    /* box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); */
    background: rgba(255,255,255,.08);
    color:#fff !important;
    /* border: 1px solid rgba(255,255,255,.10); */
    border-top-left-radius: var(--bs-border-radius-xl)  !important;
    border-top-right-radius: var(--bs-border-radius-xl) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border:0px;
}

/* لايت مود اكورد */

body.light-mode .accordion-button:not(.collapsed) {
    background: rgba(27, 41, 66,.10);
    color: var(--text) !important;
    border-color: rgba(27, 41, 66,.18);
    /* box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); */
}

body.light-mode .accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: var(--text) !important;
    text-align: right;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}

/* Light Mode Images */

body.light-mode .ref-item img{
  filter: grayscale(0%);
}

.accordion-button:focus{
    box-shadow:none;
}

.accordion {
      --bs-accordion-border-color:rgba(255,255,255,0);
}


.accordion-header {
    margin-bottom: 0;
     border-radius: 0;
}




/* ===============================
   Steps Section (Musaned)
=============================== */
.section-steps{
  position: relative;
}

/* خلفية خفيفة أنيقة */
.section-steps::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 85% 10%, rgba(140,28,20,.08), transparent 55%),
    radial-gradient(900px 500px at 10% 70%, rgba(20,36,60,.20), transparent 55%);
  pointer-events:none;
  opacity:.65;
}


body.light-mode .section-steps::before{
  opacity:.45;
}

.section-steps .container{ position:relative; }

/* كرت الخطوة */
.step-card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  overflow: hidden;
  display:flex;
  min-height: 150px;
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.light-mode .step-card{
  box-shadow: 0 14px 35px rgba(15,23,42,.10);
}

.step-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.35);
}

body.light-mode .step-card:hover{
  transform: translateY(-4px);
  border-color: rgba(27, 41, 66,.35);
}

/* العمود الجانبي */
.step-side{
  width: 92px;
  background:linear-gradient(90deg, rgb(27, 41, 66), rgb(67, 81, 102));
  border-inline-start: 1px solid rgba(140,28,20,.10);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 10px;
}

body.light-mode .step-side{
  background: linear-gradient(90deg, rgba(27, 41, 66, 1), rgba(67, 81, 102, 1));
}

/* رقم الخطوة */
.step-badge {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    color: #141111;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    border: 1px solid rgba(15,23,42,.08);
    /* box-shadow: 0 10px 18px rgba(140, 28, 20, .25); */
}
/* الأيقونة */
.step-ico{
  font-size: 28px;
  color: rgba(20,36,60,.95);
  background: rgba(255,255,255,.75);
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(15,23,42,.08);
}

body:not(.light-mode) .step-ico{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
}

body:not(.light-mode) .step-badge{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
}

/* محتوى الكرت */
.step-body{
  flex: 1;
  padding: 18px 18px 16px;
}

.step-body h3{
  margin: 0 0 8px;
  font-weight: 950;
  font-size: 1.08rem;
  color: var(--text);
}

.step-body p{
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
}

/* موبايل */
@media (max-width: 575.98px){
  .step-side{ width: 80px; }
  .step-ico{ width: 42px; height: 42px; font-size: 24px; }
}







/* ===============================
   Steps Flip Animation
=============================== */
.step-anim{
  opacity: 0;
  transform: perspective(900px) rotateY(35deg) translateY(18px) scale(.98);
  transform-origin: center;
  transition: transform .75s cubic-bezier(.2,.75,.2,1), opacity .55s ease;
  will-change: transform, opacity;
}

.step-anim.is-visible{
  opacity: 1;
  transform: perspective(900px) rotateY(0deg) translateY(0) scale(1);
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .step-anim{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}










/* ===============================
   Legal Pages (Privacy / Terms)
=============================== */

.legal-hero{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 1.35rem 1.35rem;
  border: 1px solid var(--line);
  background:
    radial-gradient(900px 500px at 85% 10%, rgba(140,28,20,.14), transparent 60%),
    radial-gradient(900px 500px at 10% 70%, rgba(20,36,60,.35), transparent 60%),
    var(--glass-bg);
  box-shadow: var(--shadow);
}

body.light-mode .legal-hero{
  background:
    radial-gradient(900px 500px at 85% 10%, rgba(140,28,20,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 70%, rgba(20,36,60,.12), transparent 60%),
    var(--glass-bg);
}

.legal-title{
  font-weight: 950;
  line-height: 1.2;
  margin: 0 0 .35rem;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.legal-sub{
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
}

.legal-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  align-items:center;
  justify-content:space-between;
  margin-top: .9rem;
}

.legal-meta .badge-pill{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
}

body.light-mode .legal-meta .badge-pill{
  background: rgba(27,41,66,.10);
  border: 1px solid rgba(27,41,66,.18);
}

.legal-actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}

.legal-layout{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
  align-items:start;
}

@media (max-width: 991.98px){
  .legal-layout{ grid-template-columns: 1fr; }
}

.legal-nav{
  position: sticky;
  top: 92px; 
}

@media (max-width: 991.98px){
  .legal-nav{ position: static; top:auto; }
}

.legal-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding: .75rem .85rem;
  border-radius: 14px;
  text-decoration:none;
  color: var(--text);
  background: var(--card);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .18s ease, border-color .18s ease;
}

body.light-mode .legal-nav a{
  border-color: rgba(15,23,42,.10);
}

.legal-nav a:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.30);
}

body.light-mode .legal-nav a:hover{
  border-color: rgba(27,41,66,.30);
}

.legal-nav .small{
  color: var(--muted);
  font-weight: 800;
}

.legal-section{
  scroll-margin-top: 110px;
}

.legal-section h3{
  font-weight: 950;
  font-size: 1.15rem;
  margin: 0 0 .65rem;
  display:flex;
  align-items:center;
  gap:.55rem;
}

.legal-section p{
  color: var(--muted);
  margin: 0;
  line-height: 1.95;
}

.legal-list{
  margin: .35rem 0 0;
  padding: 0 1.1rem 0 0;
  color: var(--muted);
  line-height: 1.95;
}

.legal-list li{ margin: .35rem 0; }

.legal-callout{
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.20);
  color: var(--text);
}

body.light-mode .legal-callout{
  background: rgba(27,41,66,.06);
  border-color: rgba(27,41,66,.22);
}