/* ============================================================================
   istqdam — Auth pages (login / register / forgot / reset) — Phase 1.5
   Modern split-screen: brand aside + form card. Restyles the theme auth classes
   to the Arabic identity WITHOUT changing form markup/JS. Scoped to
   .registar-section so it never affects other pages.
   ============================================================================ */

.registar-section {
  min-height: calc(100vh - 74px);
  display: flex; align-items: stretch; justify-content: center;
  gap: 0;
  background:
    radial-gradient(1000px 500px at 100% -10%, var(--ist-primary-soft), transparent 60%),
    var(--ist-bg);
  padding: 48px 20px;
  font-family: var(--ist-font-ar);
}

/* The joined pair (aside + card) */
.registar-section .ist-auth-aside,
.registar-section .register-area-wraper {
  box-shadow: 0 22px 60px rgba(16, 42, 55, .12);
}

/* ---------- Brand aside ---------- */
.ist-auth-aside {
  flex: 0 0 400px; max-width: 400px;
  background: linear-gradient(150deg, #0A4E32 0%, #0E6B45 60%, #1a9e8c 100%);
  color: #fff; padding: 46px 38px;
  border-start-start-radius: 22px; border-end-start-radius: 22px;
  display: flex; flex-direction: column; justify-content: center;
}
.ist-auth-aside__brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.5rem; margin-bottom: 28px; }
.ist-auth-aside__mark { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.ist-auth-aside__title { font-size: 1.7rem; font-weight: 800; line-height: 1.5; margin: 0 0 14px; }
.ist-auth-aside__text { color: #d9f1ec; margin: 0 0 26px; line-height: 1.9; }
.ist-auth-aside__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ist-auth-aside__list li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: #eafaf6; }
.ist-auth-aside__list li::before { content: "✓"; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  background: rgba(255,255,255,.2); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }

/* ---------- Form card ---------- */
.registar-section .register-area-wraper {
  flex: 0 0 500px; max-width: 500px;
  background: var(--ist-card);
  border-start-end-radius: 22px; border-end-end-radius: 22px;
  padding: 50px 46px;
  display: flex; align-items: center;
}
.registar-section .signup-as-client,
.registar-section .signup-as-provider,
.registar-section .signup-as-area,
.registar-section .signup-as { width: 100%; }

/* Titles */
.registar-section .title-4,
.registar-section h3 {
  font-family: var(--ist-font-ar);
  font-weight: 800; font-size: 1.6rem; color: var(--ist-text);
  text-align: start; margin-bottom: 8px !important;
}
.registar-section .signup-as-area .title-4 { text-align: center; margin-bottom: 24px !important; }

/* Labels & inputs */
.registar-section .custom-label { font-family: var(--ist-font-ar); font-weight: 700; color: var(--ist-text); display: inline-block; }
.registar-section .input-wraper { width: 100%; }
.registar-section .custom-input,
.registar-section .custom-select,
.registar-section select,
.registar-section input[type="text"],
.registar-section input[type="email"],
.registar-section input[type="password"],
.registar-section input[type="tel"] {
  width: 100%; border: 1px solid var(--ist-border); border-radius: 10px;
  padding: 13px 14px; font-family: var(--ist-font-ar); font-size: 1rem; color: var(--ist-text);
  background: #fff; outline: none; transition: .15s; margin-top: 6px;
}
.registar-section .custom-input:focus,
.registar-section .custom-select:focus,
.registar-section select:focus,
.registar-section input:focus { border-color: var(--ist-primary); box-shadow: 0 0 0 3px var(--ist-primary-soft); }

/* password show/hide — icon vertically centered on the input, on the side (RTL: left) */
.registar-section .password-show-wraper { position: relative; margin-top: 6px; }
.registar-section .password-show-wraper .custom-input,
.registar-section .password-show-wraper input { margin-top: 0; }
.registar-section .password-show-wraper .show-hide-password {
  position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%);
  cursor: pointer; color: var(--ist-text-muted); font-size: 1.1rem; line-height: 1;
  display: inline-flex; align-items: center;
}
/* keep the password text clear of the icon */
.registar-section .password-show-wraper .custom-input { padding-inline-end: 42px; }

/* remember + forgot row */
.registar-section .remember-me { display: flex; align-items: center; gap: 8px; }
.registar-section .remember-me .custom-label { font-weight: 600; margin: 0; }
.registar-section .forgot-password { color: var(--ist-primary); text-decoration: none; font-weight: 700; font-size: .92rem; }
.registar-section .forgot-password:hover { text-decoration: underline; }

/* Primary button */
.registar-section .cmn-btn,
.registar-section .cmn-btn.primary-btn {
  width: 100%; background: var(--ist-primary) !important; color: #fff !important;
  border: 0; border-radius: 12px; padding: 14px 20px; font-family: var(--ist-font-ar);
  font-weight: 700; font-size: 1.05rem; cursor: pointer; transition: .18s; display: inline-block; text-align: center;
}
.registar-section .cmn-btn:hover,
.registar-section .cmn-btn.primary-btn:hover { background: var(--ist-primary-dark) !important; }

/* switch links */
.registar-section .alredy-account { margin-top: 22px; text-align: center; color: var(--ist-text-muted); }
.registar-section .primary-text,
.registar-section a.primary-text { color: var(--ist-primary); font-weight: 700; text-decoration: none; }
.registar-section .primary-text:hover { text-decoration: underline; }
.registar-section .alert { border-radius: 10px; font-family: var(--ist-font-ar); }

/* ---------- Register-as role cards ---------- */
.registar-section .signup-as-selector-wraper { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 22px; }
.registar-section .signup-as-selector {
  border: 2px solid var(--ist-border); border-radius: 14px; padding: 22px 14px; text-align: center;
  cursor: pointer; transition: .15s; margin: 0; font-weight: 700; color: var(--ist-text); background: #fff;
}
.registar-section .signup-as-selector:hover { border-color: var(--ist-primary); background: var(--ist-primary-soft); }
.registar-section .signup-as-selector:has(input:checked) { border-color: var(--ist-primary); background: var(--ist-primary-soft); color: var(--ist-primary); }
.registar-section .signup-as-selector .d-block { font-size: 1.05rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .registar-section { flex-direction: column; align-items: center; }
  .ist-auth-aside { display: none; }
  .registar-section .register-area-wraper {
    flex: 1 1 auto; max-width: 480px; width: 100%;
    border-radius: 22px; padding: 38px 28px;
  }
}
@media (max-width: 520px) {
  .registar-section .register-area-wraper { padding: 30px 22px; }
  .registar-section .signup-as-selector-wraper { grid-template-columns: 1fr; }
}