:root {
  --ihsan-maroon: #8b2828;
  --ihsan-maroon-dark: #651c21;
  --ihsan-maroon-soft: #f8edef;
  --ihsan-gold: #c9a13a;
  --ihsan-gold-light: #f6edcf;
  --ihsan-ink: #373434;
  --ihsan-muted: #756f6d;
  --ihsan-line: #e8ded7;
  --ihsan-surface: #ffffff;
  --ihsan-canvas: #fbf7f2;
  --ihsan-success: #28755e;
  --ihsan-shadow: 0 22px 55px rgba(75, 41, 39, .12);
}

* { box-sizing: border-box; }
body {
  font-family: 'Tajawal', sans-serif !important;
  color: var(--ihsan-ink);
  background:
    radial-gradient(circle at 10% 5%, rgba(201, 161, 58, .14), transparent 26rem),
    radial-gradient(circle at 92% 92%, rgba(139, 40, 40, .10), transparent 30rem),
    var(--ihsan-canvas) !important;
}

a { color: var(--ihsan-maroon); }
a:hover { color: var(--ihsan-maroon-dark); }

/* Shared field treatment */
.form-label { color: var(--ihsan-ink) !important; font-weight: 700 !important; margin-bottom: .5rem; }
.form-control, .form-select {
  min-height: 48px !important;
  border: 1px solid #ddd2ca !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  background-color: #fff !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ihsan-gold) !important;
  box-shadow: 0 0 0 .22rem rgba(201, 161, 58, .18) !important;
}
.form-text { color: var(--ihsan-muted); }

.btn-submit, .btn-primary, .ihsan-primary-btn {
  min-height: 50px;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--ihsan-maroon), var(--ihsan-maroon-dark)) !important;
  box-shadow: 0 10px 18px rgba(101, 28, 33, .20);
  font-weight: 700 !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-submit:hover, .btn-primary:hover, .ihsan-primary-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 14px 22px rgba(101, 28, 33, .28);
}
.btn-submit:active, .btn-primary:active, .ihsan-primary-btn:active { transform: translateY(0); }

/* Registration journey */
.survey-wrapper { max-width: 1000px !important; }
.survey-card {
  border: 1px solid rgba(139, 40, 40, .08);
  border-radius: 22px !important;
  box-shadow: var(--ihsan-shadow) !important;
}
.header-section {
  position: relative;
  overflow: hidden;
  min-height: 154px;
  padding: 30px 24px !important;
  background: linear-gradient(128deg, var(--ihsan-maroon-dark), var(--ihsan-maroon) 57%, #a44035) !important;
  color: #fff !important;
}
.header-section::before, .header-section::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  opacity: .16;
  pointer-events: none;
}
.header-section::before { width: 230px; height: 230px; left: -78px; top: -130px; border: 34px solid var(--ihsan-gold); }
.header-section::after { width: 160px; height: 160px; right: -52px; bottom: -92px; background: var(--ihsan-gold); }
.header-section > * { position: relative; z-index: 1; }
.header-section > i { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 7px; border: 1px solid rgba(255,255,255,.36); border-radius: 16px; background: rgba(255,255,255,.12); font-size: 28px !important; }
.header-section p { color: rgba(255,255,255,.83); }
.form-section { padding: 30px !important; }

.ihsan-progress {
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--ihsan-line);
  background: linear-gradient(180deg, #fff, #fdfaf6);
}
.ihsan-progress__top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }
.ihsan-progress__eyebrow { display:flex; align-items:center; gap:8px; color: var(--ihsan-maroon); font-size:.88rem; font-weight:700; }
.ihsan-progress__eyebrow i { color: var(--ihsan-gold); font-size:1.15rem; }
.ihsan-progress__counter { color: var(--ihsan-muted); font-size:.86rem; font-weight:700; }
.ihsan-progress__track { height: 7px; border-radius: 999px; overflow: hidden; background: #eee4dc; margin-bottom: 17px; }
.ihsan-progress__bar { display:block; height:100%; border-radius:inherit; background: linear-gradient(90deg, var(--ihsan-gold), #e3c15e); box-shadow: 0 0 14px rgba(201, 161, 58, .54); }
.ihsan-progress__steps { display:grid; grid-template-columns: repeat(8, minmax(48px, 1fr)); gap:5px; }
.ihsan-step { position:relative; min-width:0; text-align:center; color:#a49a94; font-size:.71rem; font-weight:700; line-height:1.3; }
.ihsan-step__dot { width:31px; height:31px; display:grid; place-items:center; margin:0 auto 7px; border:1px solid #ded4cb; border-radius:50%; background:#fff; color:#a49a94; font-size:.82rem; }
.ihsan-step.is-complete { color: var(--ihsan-success); }
.ihsan-step.is-complete .ihsan-step__dot { background: var(--ihsan-success); border-color: var(--ihsan-success); color:#fff; }
.ihsan-step.is-current { color: var(--ihsan-maroon); }
.ihsan-step.is-current .ihsan-step__dot { background: var(--ihsan-maroon); border-color: var(--ihsan-maroon); color:#fff; box-shadow: 0 0 0 5px rgba(139,40,40,.12); }

/* Field groups and selection states */
.survey-card .form-check, .survey-card .file-field, .survey-card .file-input, .survey-card .child-card, .survey-card .total-box, .survey-card .custom-note {
  border-radius: 14px !important;
}
.survey-card .form-check { border: 1px solid #eee5df; padding: 13px 42px 13px 15px; background: #fffdfa; }
.survey-card .form-check-input { margin-right: -1.6em; border-color: #c6b9af; }
.survey-card .form-check-input:checked { background-color: var(--ihsan-maroon); border-color: var(--ihsan-maroon); }
.survey-card .file-field, .survey-card .file-input { border-color: #d8bb78 !important; background: #fffdf8 !important; }
.survey-card .total-box, .survey-card .custom-note { border-color: #e7d6a2 !important; background: #fff9e8 !important; color: var(--ihsan-ink) !important; }
.survey-card .child-card { border-color: #eadeda !important; background:#fffaf6 !important; }

/* Auth screens */
.ihsan-auth-page {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:30px 16px;
}
.ihsan-auth-shell { width:min(100%, 1030px); display:grid; grid-template-columns: minmax(0, .94fr) minmax(360px, .86fr); overflow:hidden; border:1px solid rgba(139,40,40,.10); border-radius:24px; background:#fff; box-shadow:var(--ihsan-shadow); }
.ihsan-auth-aside { position:relative; overflow:hidden; padding:46px 42px; color:#fff; background: linear-gradient(135deg, var(--ihsan-maroon-dark), var(--ihsan-maroon) 58%, #a34338); }
.ihsan-auth-aside::after { content:''; position:absolute; left:-72px; bottom:-85px; width:260px; height:260px; border:40px solid rgba(201,161,58,.31); border-radius:50%; }
.ihsan-auth-logo { position:relative; z-index:1; width:min(240px, 80%); height:auto; margin-bottom:35px; padding:10px; border-radius:15px; background:#fff; }
.ihsan-auth-role { position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.13); color:#fff; font-size:.87rem; font-weight:700; }
.ihsan-auth-aside h1 { position:relative; z-index:1; margin:0 0 13px; font-size:2.1rem; line-height:1.35; font-weight:700; }
.ihsan-auth-aside p { position:relative; z-index:1; max-width:390px; margin:0; color:rgba(255,255,255,.83); font-size:1.02rem; line-height:1.9; }
.ihsan-auth-form { padding:42px 38px; background:#fff; }
.ihsan-auth-form__header { margin-bottom:26px; }
.ihsan-auth-form__header h2 { color:var(--ihsan-ink); font-size:1.55rem; font-weight:700; margin:0 0 7px; }
.ihsan-auth-form__header p { margin:0; color:var(--ihsan-muted); }
.ihsan-input { position:relative; }
.ihsan-input > i:first-child { position:absolute; z-index:2; right:15px; top:50%; transform:translateY(-50%); color:var(--ihsan-maroon); font-size:1.15rem; pointer-events:none; }
.ihsan-input .form-control { padding-right:45px; }
.ihsan-password-toggle { position:absolute; z-index:3; left:11px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:#8d8380; line-height:1; padding:6px; }
.ihsan-password-toggle:hover { color:var(--ihsan-maroon); }
.ihsan-auth-footer { margin-top:22px; padding-top:19px; border-top:1px solid var(--ihsan-line); color:var(--ihsan-muted); text-align:center; }
.ihsan-auth-footer a { font-weight:700; text-decoration:none; }
.ihsan-back-link { display:inline-flex; align-items:center; gap:6px; margin-top:18px; color:#756f6d; font-weight:700; text-decoration:none; }
.ihsan-back-link:hover { color:var(--ihsan-maroon); }
.ihsan-alert { border:0; border-radius:13px; padding:12px 14px; font-weight:600; }

/* Start / registration entry */
.ihsan-entry-page { min-height:100vh; padding:26px 12px; }
.ihsan-entry-card { max-width:850px; margin:0 auto; overflow:hidden; border:1px solid rgba(139,40,40,.10); border-radius:22px; background:#fff; box-shadow:var(--ihsan-shadow); }
.ihsan-entry-header { position:relative; padding:28px 28px 22px; overflow:hidden; border-top:7px solid var(--ihsan-maroon); text-align:center; background:linear-gradient(150deg,#fff,#fdf8f1); }
.ihsan-entry-header::before { content:''; position:absolute; top:-90px; right:-80px; width:200px; height:200px; border:30px solid rgba(201,161,58,.15); border-radius:50%; }
.ihsan-entry-logo { position:relative; width:min(276px, 78%); height:auto; z-index:1; }
.ihsan-entry-header h1 { position:relative; z-index:1; margin:11px 0 5px; color:var(--ihsan-ink); font-weight:700; font-size:1.48rem; }
.ihsan-entry-header p { position:relative; z-index:1; margin:0; color:var(--ihsan-muted); }
.ihsan-entry-body { padding:30px; }
.ihsan-info-band { display:flex; align-items:flex-start; gap:10px; margin-bottom:23px; padding:13px 14px; border:1px solid #efe1b9; border-radius:13px; background:#fffbef; color:#746239; font-size:.94rem; }
.ihsan-info-band i { margin-top:2px; color:var(--ihsan-gold); font-size:1.18rem; }
.ihsan-service-links { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:22px; padding-top:20px; border-top:1px solid var(--ihsan-line); }
.ihsan-service-links a { font-weight:700; text-decoration:none; }

@media (max-width: 800px) {
  .ihsan-auth-shell { grid-template-columns:1fr; max-width:530px; }
  .ihsan-auth-aside { min-height:270px; padding:30px 28px; }
  .ihsan-auth-logo { width:190px; margin-bottom:18px; }
  .ihsan-auth-aside h1 { font-size:1.65rem; }
}
@media (max-width: 680px) {
  .form-section, .ihsan-entry-body { padding:22px 17px !important; }
  .ihsan-progress { padding:18px 12px 16px; }
  .ihsan-progress__steps { gap:2px; }
  .ihsan-step { font-size:0; }
  .ihsan-step__dot { width:27px; height:27px; margin-bottom:0; font-size:.75rem; }
  .ihsan-auth-form { padding:30px 23px; }
  .ihsan-entry-header { padding-left:16px; padding-right:16px; }
}
@media (max-width: 390px) {
  .ihsan-step__dot { width:24px; height:24px; font-size:.68rem; }
}

/* Compatibility layer for the full beneficiary registration page */
.register-wrapper { max-width: 980px !important; }
.register-card {
  border: 1px solid rgba(139, 40, 40, .09) !important;
  border-radius: 22px !important;
  box-shadow: var(--ihsan-shadow) !important;
}
.register-card .header-section { min-height: 154px; }
.register-card .form-section { padding: 30px !important; }
.btn-cancel {
  min-height: 50px;
  border-radius: 12px !important;
  border: 1px solid #d7cbc4 !important;
  color: var(--ihsan-ink) !important;
  background: #fff !important;
  font-weight: 700 !important;
}
.btn-cancel:hover { background: #faf5ef !important; color: var(--ihsan-maroon) !important; }
.btn-tab { border-color: #dfd4ca !important; color: var(--ihsan-muted) !important; background: #fff !important; border-radius: 12px !important; }
.btn-tab.active { border-color: var(--ihsan-maroon) !important; color: #fff !important; background: var(--ihsan-maroon) !important; }
.btn-tab.disabled { opacity: .58; }
.ihsan-previous-btn {
  min-height: 50px;
  border: 1px solid #dacdc5 !important;
  border-radius: 12px !important;
  color: var(--ihsan-ink) !important;
  background: #fff !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
.ihsan-previous-btn:hover { color: var(--ihsan-maroon) !important; border-color: var(--ihsan-maroon) !important; background: var(--ihsan-maroon-soft) !important; }
@media (max-width: 500px) {
  .register-card .form-section { padding: 22px 17px !important; }
  .ihsan-previous-btn { min-width: 54px; font-size: 0; }
  .ihsan-previous-btn i { font-size: 1.25rem; margin: 0 !important; }
}
