/* ========================================================
   PAGE HERO / CUSTOM BREADCRUMB FOR SUPPORT
   ======================================================== */
.page-hero {
  background: var(--bg-soft);
  padding: 40px 0;
  border-bottom: 1px solid var(--border);
}

.hero-flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 12px;
}

.breadcrumb a:hover {
  color: var(--primary);
}

.breadcrumb-sep {
  color: #b1b8ce;
  font-weight: bold;
}

.page-hero h1 {
  font-size: 28px;
  font-weight: 900;
  color: var(--text);
}

.page-hero h1 .accent {
  background: linear-gradient(90deg, var(--primary), var(--accent-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-title-side {
  flex-shrink: 0;
}

.faded-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--text);
  opacity: 0.85;
  font-family: system-ui, sans-serif;
}

/* ========================================================
   LOGIN CARD STYLE (تعديل إضافي: أعرض بوضوح، وأصغر في الارتفاع والخطوط)
   ======================================================== */
.login-section {
  padding: 40px 0; /* تقليل المسافة الرأسية حول البوكس */
  background: #ffffff;
}

.login-card {
  max-width: 950px; /* تم زيادة العرض إلى 950px ليصبح أعرض بوضوح */
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 6px;
  padding: 20px 40px; /* تقليل الـ padding الرأسي جداً لجعل البوكس نحيفاً */
  text-align: center;
}

.login-card h2 {
  color: var(--primary);
  font-size: 19px; /* تصغير حجم العنوان الرئيسي */
  font-weight: 800;
  margin-bottom: 16px; /* تقليل الفراغ أسفل العنوان */
}

.login-card .form-group {
  margin-bottom: 10px; /* تقليل المسافة الرأسية بين حقول الإدخال */
  max-width: 460px; /* الحفاظ على أبعاد مريحة للمدخلات في المنتصف */
  margin-inline: auto;
}

.login-card .input-wrap input {
  width: 100%;
  padding: 8px 12px; /* تقليل حجم الحقل داخلياً ليصبح أنحف */
  border: 1px solid #8e8e8e;
  border-radius: 5px;
  font-family: inherit;
  font-size: 12px; /* تصغير الخط داخل الحقول */
  outline: none;
  text-align: center;
  transition: border-color 0.2s var(--ease);
}

.login-card .input-wrap input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(36, 84, 255, 0.1);
}

/* خيار تذكرني */
.form-options {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px; /* تقليل الفراغ */
}

.remember-me {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12.5px; /* تصغير خط كلمة تذكرني */
  font-weight: 700;
  color: #000000;
}

.remember-me input[type="checkbox"] {
  width: 13px; /* تصغير المربع */
  height: 13px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* زر تسجيل الدخول */
.btn-submit-login {
  display: block;
  width: 100%;
  max-width: 120px; /* تصغير عرض الزر */
  margin: 0 auto 14px;
  padding: 6px 16px; /* زر أصغر وأقل ارتفاعاً */
  background: #232333;
  color: #ffffff;
  font-size: 12.5px; /* تصغير خط الزر */
  font-weight: 700;
  border-radius: 5px;
  transition: all 0.25s var(--ease);
}

.btn-submit-login:hover {
  background: #11111a;
  transform: translateY(-1px);
}

/* روابط أسفل الكرت */
.login-links {
  display: flex;
  flex-direction: column;
  gap: 6px; /* مسافات صغيرة جداً بين الأسطر */
  align-items: center;
  margin-top: 5px;
}

.login-links a {
  font-size: 12px; /* تصغير حجم خط الروابط السفلى */
  font-weight: 700;
  color: #000000;
  transition: color 0.2s;
}

.login-links a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* responsive */
@media (max-width: 768px) {
  .hero-flex-container {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }
  .faded-title {
    font-size: 28px;
  }
  .login-card {
    padding: 30px 20px;
  }
}