/* ===== Suzan Faisal — إنشاء حساب الطالب =====
   الكارت والفورم واللوحة الزرقا مشتركين مع login.css — هنا الإضافات بس */

/* الفورم أطول من الدخول: اللوحة تمشي معاه */
.sf-create-page .sf-auth-card { grid-template-columns: 1.15fr .85fr; }
.sf-create-page .sf-auth-form { padding-top: 44px; padding-bottom: 40px; }
.sf-create-page .sf-auth-lead { margin-bottom: 22px; }

/* حقلين جنب بعض */
.sf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.sf-grid > div { min-width: 0; }

/* عنوان القوايم (مش label عشان مفيش input) */
.sf-auth-form .sf-label { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.sf-auth-form .sf-label i, .sf-auth-form .sf-label svg { color: var(--blue) !important; font-size: 14px; }

/* ===== القوايم المنسدلة (create-account.js بيضيف .active-select) ===== */
.custom-dropdowns { margin: 0; }
.custom-dropdown { position: relative; margin-bottom: 18px; }
.custom-dropdown .selected {
  position: relative; display: flex; align-items: center; height: 54px; padding: 0 16px 0 44px; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--soft); color: #8A97B3; font-size: 15px; cursor: pointer; user-select: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .2s, background .2s, box-shadow .2s;
}
.custom-dropdown .selected[data-value] { color: var(--ink); }
.custom-dropdown .selected::after {
  content: ""; position: absolute; left: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .25s, margin .25s;
}
.custom-dropdown .selected:hover { border-color: rgba(30,123,234,.4); }
.custom-dropdown.active-select .selected { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(30,123,234,.12); }
.custom-dropdown.active-select .selected::after { transform: rotate(-135deg); margin-top: -2px; border-color: var(--blue); }

.custom-dropdown .dropdown-options {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; margin: 0; padding: 6px; list-style: none;
  max-height: 260px; overflow-y: auto; border-radius: 16px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 24px 44px -20px rgba(11,42,111,.45);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s;
}
.custom-dropdown.active-select .dropdown-options { opacity: 1; visibility: visible; transform: none; }
.custom-dropdown .dropdown-options li { padding: 11px 14px; border-radius: 10px; font-size: 15px; color: var(--ink); cursor: pointer; text-align: right; transition: background .15s, color .15s; }
.custom-dropdown .dropdown-options li:hover { background: var(--soft); color: var(--blue); }
.custom-dropdown .dropdown-options::-webkit-scrollbar { width: 6px; }
.custom-dropdown .dropdown-options::-webkit-scrollbar-thumb { background: rgba(11,42,111,.2); border-radius: 6px; }

/* كلمة السر: عين الإظهار جوه الحقل */
.sf-create-page .sf-auth-form form .sf-field input#password,
.sf-create-page .sf-auth-form form .sf-field input#confirm-password { padding-left: 48px !important; }

/* ===== لوحة الهوية: نقاط المميزات ===== */
.sf-create-page .sf-auth-side { min-height: 720px; }
.sf-auth-points { position: relative; z-index: 1; margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sf-auth-points li { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; background: rgba(255,255,255,.1); font-size: 14px; color: #EAF1FF; }
.sf-auth-points li i, .sf-auth-points li svg { color: #39C6F4 !important; }
.sf-create-page .sf-auth-img { height: 46%; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .sf-create-page .sf-auth-card { grid-template-columns: 1fr; }
  .sf-create-page .sf-auth-side { min-height: 0; }
  .sf-create-page .sf-auth-img { height: 92%; }
  .sf-auth-points { display: none; }
}
@media (max-width: 560px) {
  .sf-grid { grid-template-columns: 1fr; }
}