@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');




/* ── ① متغيرات الألوان — غيّر هنا وهيتغير كل حاجة ── */
:root {
  /* --- اللون الرئيسي للفورم --- */
  --c-primary       : #6C63FF;   /* 🎨 لون الهيدر + الزر + تركيز الحقول + الـ checkbox */
  --c-primary-dk    : #4F46E5;   /* 🎨 اللون الرئيسي الداكن (gradient) */

  /* --- ألوان الحالات --- */
  --c-error         : #EF4444;   /* 🎨 لون الخطأ + النجمة الإلزامية */
  --c-error-bg      : #FEE2E2;   /* 🎨 خلفية رسالة الخطأ */
  --c-success       : #059669;   /* 🎨 لون رسالة النجاح */
  --c-success-bg    : #D1FAE5;   /* 🎨 خلفية رسالة النجاح */

  /* --- ألوان النصوص --- */
  --c-text          : #1E1B4B;   /* 🎨 لون النص الرئيسي والـ labels */
  --c-muted         : #6B7280;   /* 🎨 لون النصوص الثانوية والـ placeholder */

  /* --- ألوان البطاقة والحقول --- */
  --c-card-bg       : rgba(255,255,255,0.72); /* 🎨 خلفية بطاقة الفورم (glass) */
  --c-card-border   : rgba(255,255,255,0.55); /* 🎨 حدود بطاقة الفورم */
  --c-input-bg      : rgba(255,255,255,0.65); /* 🎨 خلفية حقول الإدخال */
  --c-input-border  : rgba(0,0,0,0.13);       /* 🎨 حدود حقول الإدخال */
  --c-footer-border : rgba(0,0,0,0.08);       /* 🎨 خط الفوتر */

  /* --- badge اختياري --- */
  --c-opt-txt       : #9CA3AF;   /* 🎨 لون نص "اختياري" */
  --c-opt-bg        : #F3F4F6;   /* 🎨 خلفية badge "اختياري" */

  /* --- ثوابت --- */
  --radius          : 16px;
  --radius-sm       : 10px;
  --font            : 'Cairo', sans-serif;
  --tr              : .2s ease;
}

/* ── ② Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family    : var(--font);
  direction      : rtl;
  /*
    ⬇ خلفية الصفحة — الفورم شفاف وبيتأثر بأي لون تحطه هنا
    لو هتحطه جوه موقع، شيل السطرين دول وخلي الـ body بتاع الموقع يتحكم
  */
  background     : linear-gradient(135deg,#e8e6ff 0%,#f0f4ff 50%,#fef9ec 100%); /* 🎨 خلفية الصفحة — غيّرها أو شيلها */
  min-height     : 100vh;
}


#preloader{
    background: #FFFFFF url(img/pre.gif) no-repeat center center;
    background-size: 80px;
    height: 100vh;
    width: 100%;
    position: fixed;
   z-index: 100;
}
/*navbar*/

.navbar-expand-lg{
    background-color: #ced4da;
}
.navbar-collapse{
    justify-content: end;
}
.navbar-brand{
    font-family: "Roboto", sans-serif
}
.nav-link{
      font-family: "Cairo", sans-serif; 
}





/* ── ③ Page Wrapper — 100vh دايماً ── */
.page-wrapper {
  min-height     : 100vh;
  height         : 100vh;
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : 1rem;
  overflow       : hidden;
}

/* ── ④ بطاقة الفورم — Glass Effect ── */
.form-card {
  width          : 100%;
  max-width      : 580px;
  max-height     : 96vh;
  background     : var(--c-card-bg);         /* 🎨 خلفية البطاقة */
  border         : 1px solid var(--c-card-border); /* 🎨 حدود البطاقة */
  border-radius  : 24px;
  backdrop-filter: blur(20px);               /* تأثير الزجاج */
  -webkit-backdrop-filter: blur(20px);
  box-shadow     : 0 8px 40px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.6) inset;
  overflow-y     : auto;
  overflow-x     : hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--c-primary) transparent; /* 🎨 لون شريط التمرير */
  animation      : fadeUp .4s ease both;
}
.form-card::-webkit-scrollbar       { width: 4px; }
.form-card::-webkit-scrollbar-thumb {
  background    : var(--c-primary); /* 🎨 لون شريط التمرير */
  border-radius : 4px;
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── ⑤ Header ── */
.form-header {
  padding        : 1.75rem 2rem 1.5rem;
  text-align     : center;
  background     : linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dk) 100%); /* 🎨 تدرج الهيدر */
  color          : #fff;
  border-radius  : 23px 23px 0 0;
}
.header-icon {
  font-size      : 1.6rem;
  display        : block;
  margin-bottom  : .4rem;
  animation      : spin 10s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.form-title { font-size:1.65rem; font-weight:900; margin-bottom:.3rem; }
.form-sub   { font-size:.85rem; font-weight:300; opacity:.88; line-height:1.7; }

/* ── ⑥ Alerts ── */
.alert {
  display        : flex;
  align-items    : center;
  gap            : .6rem;
  padding        : .8rem 1.5rem;
  font-size      : .85rem;
  font-weight    : 600;
}
.alert--success { background:var(--c-success-bg); color:#065F46; } /* 🎨 رسالة النجاح */
.alert--error   { background:var(--c-error-bg);   color:#991B1B; } /* 🎨 رسالة الخطأ */
.d-none         { display:none !important; }

/* ── ⑦ Form Body ── */
.form-body {
  padding        : 1.4rem 1.75rem 1.2rem;
  display        : flex;
  flex-direction : column;
  gap            : 1rem;
}

/* ── ⑧ Row ── */
.row-2 {
  display        : grid;
  grid-template-columns: 1fr 1fr;
  gap            : .8rem;
}

/* ── ⑨ Field ── */
.field { display:flex; flex-direction:column; gap:.28rem; }

/* ── ⑩ Label ── */
.lbl {
  font-size      : .8rem;
  font-weight    : 700;
  color          : var(--c-text);    /* 🎨 لون الـ labels */
  display        : flex;
  align-items    : center;
  gap            : .35rem;
}
.req { color:var(--c-error); }       /* 🎨 لون النجمة الإلزامية */
.opt {
  font-size      : .7rem;
  font-weight    : 600;
  color          : var(--c-opt-txt); /* 🎨 لون نص "اختياري" */
  background     : var(--c-opt-bg);  /* 🎨 خلفية badge "اختياري" */
  padding        : .08rem .4rem;
  border-radius  : 20px;
}

/* ── ⑪ Input / Textarea ── */
.inp {
  width          : 100%;
  padding        : .62rem .85rem;
  font-family    : var(--font);
  font-size      : .9rem;
  color          : var(--c-text);          /* 🎨 لون نص المدخلات */
  background     : var(--c-input-bg);      /* 🎨 خلفية حقول الإدخال */
  border         : 1.5px solid var(--c-input-border); /* 🎨 حدود الحقول */
  border-radius  : var(--radius-sm);
  outline        : none;
  direction      : rtl;
  transition     : border-color var(--tr), box-shadow var(--tr), background var(--tr);
}
.inp::placeholder { color:var(--c-muted); opacity:.75; } /* 🎨 لون placeholder */

.inp:focus {
  border-color   : var(--c-primary);       /* 🎨 لون حدود الحقل عند التركيز */
  background     : rgba(255,255,255,.9);
  box-shadow     : 0 0 0 3px rgba(108,99,255,.15); /* 🎨 توهج التركيز */
}
.inp.is-err {
  border-color   : var(--c-error);         /* 🎨 لون حدود الحقل الخاطئ */
  box-shadow     : 0 0 0 3px rgba(239,68,68,.1);
}

.inp--ta    { resize:vertical; min-height:90px;  line-height:1.7; }
.inp--ta-sm { resize:vertical; min-height:68px; }

/* ── ⑫ Char counter ── */
.char-row {
  font-size      : .72rem;
  color          : var(--c-muted);    /* 🎨 لون عداد الأحرف */
  text-align     : left;
  margin-top     : .1rem;
}

/* ── ⑬ Error message ── */
.ferr {
  font-size      : .75rem;
  font-weight    : 600;
  color          : var(--c-error);    /* 🎨 لون رسائل الخطأ */
  min-height     : 1em;
}

/* ── ⑭ Checkbox ── */
.chk-wrap {
  display        : flex;
  align-items    : center;
  gap            : .55rem;
  cursor         : pointer;
  font-size      : .85rem;
  color          : var(--c-muted);    /* 🎨 لون نص الـ checkbox */
  user-select    : none;
}
.chk-inp { display:none; }
.chk-box {
  width          : 18px;
  height         : 18px;
  flex-shrink    : 0;
  border         : 2px solid var(--c-input-border); /* 🎨 حدود الـ checkbox */
  border-radius  : 5px;
  background     : var(--c-input-bg);
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : background var(--tr), border-color var(--tr);
}
.chk-box::after {
  content        : '';
  width          : 4px; height:8px;
  border         : 2px solid transparent;
  border-top     : none; border-left:none;
  transform      : rotate(45deg) translateY(-1px);
  transition     : border-color var(--tr);
}
.chk-inp:checked ~ .chk-box {
  background     : var(--c-primary);  /* 🎨 خلفية الـ checkbox عند التفعيل */
  border-color   : var(--c-primary);
}
.chk-inp:checked ~ .chk-box::after { border-color:#fff; }

/* ── ⑮ Link ── */
.lnk {
  color          : var(--c-primary);  /* 🎨 لون الروابط */
  text-decoration: none;
  font-weight    : 700;
}
.lnk:hover { color:var(--c-primary-dk); text-decoration:underline; }

/* ── ⑯ Submit Button ── */
.btn-send {
  width          : 100%;
  padding        : .82rem 2rem;
  background     : linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dk) 100%); /* 🎨 تدرج زر الإرسال */
  color          : #fff;
  font-family    : var(--font);
  font-size      : .98rem;
  font-weight    : 700;
  border         : none;
  border-radius  : var(--radius-sm);
  cursor         : pointer;
  box-shadow     : 0 4px 18px rgba(108,99,255,.3); /* 🎨 ظل الزر */
  transition     : transform var(--tr), box-shadow var(--tr), opacity var(--tr);
  margin-top     : .15rem;
}
.btn-send:hover:not(:disabled) {
  transform      : translateY(-2px);
  box-shadow     : 0 8px 26px rgba(108,99,255,.4); /* 🎨 ظل الزر عند hover */
}
.btn-send:active:not(:disabled) { transform:translateY(0); }
.btn-send:disabled { opacity:.6; cursor:not-allowed; }

/* ── ⑰ Spinner ── */
.spin-wrap {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : .45rem;
}
.spinner {
  width          : 16px; height:16px;
  border         : 2.5px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius  : 50%;
  animation      : rot .65s linear infinite;
}
@keyframes rot { to { transform:rotate(360deg); } }

/* ── ⑱ Footer ── */
.form-footer {
  padding        : .95rem 1.75rem 1.3rem;
  text-align     : center;
  border-top     : 1px solid var(--c-footer-border); /* 🎨 خط الفوتر */
  font-size      : .8rem;
  color          : var(--c-muted);
}

/* ── ⑲ Responsive ── */
@media (max-width:580px) {
  .page-wrapper  { padding:.5rem; align-items:flex-start; padding-top:.6rem; }
  .form-card     { max-height:98vh; border-radius:18px; }
  .form-header   { padding:1.3rem 1.25rem 1.1rem; border-radius:17px 17px 0 0; }
  .form-title    { font-size:1.4rem; }
  .form-body     { padding:1.1rem 1.25rem 1rem; gap:.85rem; }
  .form-footer   { padding:.8rem 1.25rem 1.1rem; }
  .row-2         { grid-template-columns:1fr; }
}
@media (max-width:360px) {
  .form-title    { font-size:1.2rem; }
  .btn-send      { font-size:.88rem; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
}