@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap");

:root {
  --ref-navy: #0A192F;
  --ref-navy-soft: #10223f;
  --ref-gold: #C5A059;
  --ref-text: #2D3748;
  --ref-muted: #718096;
  --ref-bg: #F8FAFC;
  --ref-card: #ffffff;
  --ref-border: #E2E8F0;
  --ref-radius: 12px;
  --ref-radius-lg: 18px;
  --ref-shadow: 0 18px 40px rgba(10, 25, 47, 0.08);
  --ref-shadow-soft: 0 10px 24px rgba(10, 25, 47, 0.06);
  --ref-transition: all .35s cubic-bezier(.4,0,.2,1);
}

html, body, button, input, select, textarea, .btn, .form-control, .form-select, .sw, .sw * {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

body {
  background: var(--ref-bg);
  color: var(--ref-text);
}

.form-control,
.form-select,
.input-ctrl,
.registration-page input,
.registration-page select,
.registration-page textarea {
  min-height: 52px;
  border-radius: var(--ref-radius) !important;
  border: 1.5px solid var(--ref-border) !important;
  background: var(--ref-bg) !important;
  color: var(--ref-text) !important;
  box-shadow: none !important;
  transition: var(--ref-transition);
  font-size: .95rem !important;
}

.form-control:focus,
.form-select:focus,
.input-ctrl:focus,
.registration-page input:focus,
.registration-page select:focus,
.registration-page textarea:focus {
  background: #fff !important;
  border-color: var(--ref-navy) !important;
  box-shadow: 0 0 0 4px rgba(10,25,47,.05) !important;
}

.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder {
  color: #94A3B8 !important;
}

.btn,
.sw-btn-next,
.sw-btn-prev,
#btn-register,
.open-map,
.map-modal-container .btn,
.verify-btn,
.verify-submit-btn {
  border-radius: var(--ref-radius) !important;
  font-weight: 600 !important;
  transition: var(--ref-transition) !important;
}

.btn-primary,
.registration-page .sw-btn-next,
.registration-page #btn-register,
.verify-btn,
.verify-submit-btn,
.map-modal-container .btn-primary {
  background: var(--ref-navy) !important;
  border-color: var(--ref-navy) !important;
  color: #fff !important;
}

.btn-primary:hover,
.registration-page .sw-btn-next:hover,
.registration-page #btn-register:hover,
.verify-btn:hover,
.verify-submit-btn:hover,
.map-modal-container .btn-primary:hover {
  background: var(--ref-navy-soft) !important;
  border-color: var(--ref-navy-soft) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(10,25,47,.12);
}

.btn-outline-primary,
.registration-page .sw-btn-prev,
.btn-ghost,
.map-modal-container .btn-light {
  background: transparent !important;
  color: var(--ref-muted) !important;
  border: 1.5px solid var(--ref-border) !important;
}

.btn-outline-primary:hover,
.registration-page .sw-btn-prev:hover,
.btn-ghost:hover,
.map-modal-container .btn-light:hover {
  background: #f1f5f9 !important;
  color: var(--ref-navy) !important;
  border-color: #d6dde6 !important;
}

.required { color: #dc3545 !important; margin-inline-start:4px; }
.registration-page .field-icon { display:none !important; }

.registration-page {
  background: var(--ref-bg) !important;
  min-height: 100vh;
}
.registration-page .registration-shell { padding: 34px 0 46px !important; }
.registration-page .registration-container { max-width: 1320px !important; }
.registration-page .registration-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-top: 28px !important;
}
.registration-page .registration-card > .card-body { padding: 0 !important; }
.registration-page .registration-header header {
  background: #fff !important;
  border: 1px solid var(--ref-border) !important;
  border-radius: var(--ref-radius-lg) !important;
  box-shadow: var(--ref-shadow-soft) !important;
  padding: 24px 28px !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.registration-page .registration-header .brand-copy h2 {
  color: var(--ref-navy) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  margin:0 0 4px !important;
}
.registration-page .registration-header .brand-copy p {
  color: var(--ref-muted) !important;
  margin:0 !important;
  font-size:.95rem !important;
}
.registration-page .registration-header .brand-logo {
  width:72px; height:72px; border-radius:14px; border:1px solid var(--ref-border); background:#fff; object-fit:contain; padding:8px; box-shadow:var(--ref-shadow-soft);
}

.registration-page .smartwizard-wrapper.sw,
.registration-page #smartwizard {
  display:grid !important;
  grid-template-columns: minmax(0,1fr) 324px;
  gap:26px;
  align-items:start;
}
.registration-page .smartwizard-wrapper > .nav,
.registration-page #smartwizard > .nav {
  order:2;
  background: var(--ref-navy) !important;
  border-radius: 18px !important;
  padding: 34px 28px !important;
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  box-shadow: var(--ref-shadow) !important;
  min-height: 100%;
}
.registration-page .smartwizard-wrapper > .nav .nav-link,
.registration-page #smartwizard > .nav .nav-link {
  position:relative;
  display:block !important;
  padding: 0 28px 34px 0 !important;
  border-right: 2px solid rgba(255,255,255,.12) !important;
  border-radius:0 !important;
  background:transparent !important;
  color: rgba(255,255,255,.45) !important;
  font-size: 1rem !important;
  font-weight:500 !important;
}
.registration-page .smartwizard-wrapper > .nav .nav-item:last-child .nav-link,
.registration-page #smartwizard > .nav .nav-item:last-child .nav-link { padding-bottom:0 !important; }
.registration-page .smartwizard-wrapper > .nav .nav-link::after,
.registration-page #smartwizard > .nav .nav-link::after {
  content:''; position:absolute; top:2px; right:-7px; width:12px; height:12px; border-radius:50%; background:var(--ref-navy); border:2px solid currentColor;
}
.registration-page .smartwizard-wrapper > .nav .nav-link .num,
.registration-page #smartwizard > .nav .nav-link .num {
  display:inline-block !important; min-width:22px; margin-inline-start:8px; background:transparent !important; color:inherit !important; font-weight:600 !important;
}
.registration-page .smartwizard-wrapper > .nav .nav-link.active,
.registration-page #smartwizard > .nav .nav-link.active { color: var(--ref-gold) !important; border-right-color: var(--ref-gold) !important; font-weight:600 !important; }
.registration-page .smartwizard-wrapper > .nav .nav-link.done,
.registration-page #smartwizard > .nav .nav-link.done { color: rgba(255,255,255,.92) !important; border-right-color: rgba(255,255,255,.4) !important; }
.registration-page .smartwizard-wrapper .tab-content,
.registration-page #smartwizard .tab-content {
  order:1;
  background:#fff !important;
  border-radius:18px !important;
  border:1px solid var(--ref-border) !important;
  box-shadow: var(--ref-shadow-soft) !important;
  padding: 40px 36px 28px !important;
}
.registration-page .progress {
  order:3;
  grid-column:1;
  height:8px !important;
  border-radius:999px !important;
  overflow:hidden !important;
  background:#edf2f7 !important;
  margin-top:20px !important;
}
.registration-page .progress-bar { background: linear-gradient(90deg,var(--ref-navy),var(--ref-gold)) !important; }
.registration-page .sw-toolbar,
.registration-page .toolbar {
  order:4;
  grid-column:1;
  padding-top:26px !important;
  margin-top:0 !important;
  border-top:1px solid var(--ref-border) !important;
  display:flex !important;
  gap:14px;
  justify-content:flex-start;
}
.registration-page .sw-toolbar .btn,
.registration-page .toolbar .btn,
.registration-page .sw-btn-group .btn,
.registration-page #btn-register { min-width:170px; padding:14px 28px !important; font-size:.95rem !important; }
.registration-page .sw-toolbar .btn.sw-btn-prev,
.registration-page .toolbar .btn.sw-btn-prev { order:2; }
.registration-page .sw-toolbar .btn.sw-btn-next,
.registration-page .toolbar .btn.sw-btn-next,
.registration-page .sw-toolbar #btn-register { order:1; }
.registration-page .section-title {
  color: var(--ref-navy) !important; font-size: 2rem !important; font-weight:700 !important; line-height:1.3 !important; text-transform:none !important; margin-bottom:28px !important;
}
.registration-page .field-label {
  color:#4A5568 !important; font-size:.88rem !important; font-weight:600 !important; margin-bottom:8px !important; display:block;
}
.registration-page .name-grid { gap:14px !important; }
.registration-page .ownership-card,
.registration-page .ownership-blocked,
.registration-page .policy-modal .modal-content,
.registration-page .map-modal-container .modal-content {
  border-radius:16px !important; border:1px solid var(--ref-border) !important; box-shadow: var(--ref-shadow-soft) !important;
}
.registration-page .checkbox-read,
.registration-page .form-check-input { accent-color: var(--ref-navy); }
.registration-page .open-map { background: var(--ref-navy) !important; border-color: var(--ref-navy) !important; color:#fff !important; min-height:48px; }
.registration-page .open-map:hover { background: var(--ref-navy-soft) !important; }
.registration-page .policy-subtitle,
.registration-page .modal-title,
.registration-page .ownership-title { color: var(--ref-navy) !important; font-weight:700 !important; }
.registration-page .policy-modal p,
.registration-page .policy-modal li,
.registration-page .policy-modal td,
.registration-page .policy-modal th { font-size:.92rem !important; }

.verify-page, .verify-page * { font-family:'IBM Plex Sans Arabic', sans-serif !important; }
.verify-page { min-height:100vh; background:var(--ref-bg); color:var(--ref-text); }
.verify-page .verify-dashboard { min-height:100vh; display:grid; grid-template-columns:350px 1fr; background:#fff; }
.verify-page .verify-side { background:var(--ref-navy); color:#fff; padding:50px 40px; display:flex; flex-direction:column; justify-content:space-between; }
.verify-page .verify-side h1 { font-size:1.8rem; font-weight:600; border-right:4px solid var(--ref-gold); padding-right:15px; margin-bottom:10px; }
.verify-page .verify-track { list-style:none; margin-top:40px; padding:0; }
.verify-page .verify-track li { position:relative; padding:0 30px 35px 0; border-right:2px solid rgba(255,255,255,.1); color:rgba(255,255,255,.45); font-size:.95rem; }
.verify-page .verify-track li.active { color:var(--ref-gold); border-right-color:var(--ref-gold); font-weight:600; }
.verify-page .verify-track li::after { content:''; position:absolute; top:0; right:-7px; width:12px; height:12px; background:var(--ref-navy); border:2px solid currentColor; border-radius:50%; }
.verify-page .verify-main { padding:60px 8%; overflow-y:auto; display:flex; align-items:center; justify-content:center; }
.verify-page .container { width:100%; max-width:520px; background:transparent !important; box-shadow:none !important; }
.verify-page .header { background:transparent !important; color:inherit !important; padding:0 0 24px !important; text-align:right !important; }
.verify-page .header .logo { width:82px; height:82px; border-radius:18px; background:#fff; border:1px solid var(--ref-border); box-shadow:var(--ref-shadow-soft); margin:0 0 18px auto; display:flex; align-items:center; justify-content:center; }
.verify-page .header .logo img { max-width:76%; max-height:76%; object-fit:contain; }
.verify-page .header h1 { color:var(--ref-navy); font-size:1.8rem; font-weight:700; margin-bottom:8px; }
.verify-page .header p { color:var(--ref-muted); font-size:.96rem; }
.verify-page .form-container { background:#fff; border:1px solid var(--ref-border); border-radius:18px; box-shadow:var(--ref-shadow); padding:32px !important; }
.verify-page .verification-code { background: rgba(197,160,89,.10) !important; border: 1px solid rgba(197,160,89,.22) !important; }
.verify-page .verification-code,
.verify-page .success-message,
.verify-page .error-message,
.verify-page .diagnostic-box { border-radius:14px !important; }
.verify-page .footer { color:var(--ref-muted) !important; margin-top:20px !important; }

body.thankyou-v24,
.thankyou-v24 * { font-family:'IBM Plex Sans Arabic', sans-serif !important; }
body.thankyou-v24 { background: var(--ref-bg) !important; color: var(--ref-text) !important; }
.thankyou-v24 .confirmation-card { border-radius:18px !important; border:1px solid var(--ref-border) !important; box-shadow: var(--ref-shadow) !important; }
.thankyou-v24 .top-bar { background: linear-gradient(90deg,var(--ref-navy),var(--ref-gold)) !important; }
.thankyou-v24 .confirmation-title,
.thankyou-v24 .student-name,
.thankyou-v24 .fees-details h3,
.thankyou-v24 .contact-number,
.thankyou-v24 .confirmation-subtitle { color: var(--ref-navy) !important; }
.thankyou-v24 .student-info,
.thankyou-v24 .fees-details,
.thankyou-v24 .contact-info { border-radius:14px !important; border:1px solid var(--ref-border) !important; background:#f8fafc !important; }

@media (max-width: 1000px) {
  .verify-page .verify-dashboard { grid-template-columns:1fr; }
  .verify-page .verify-side { padding:30px; }
  .verify-page .verify-track { display:none; }
  .verify-page .verify-main { padding:30px 20px; }
}

@media (max-width: 992px) {
  .registration-page .smartwizard-wrapper.sw,
  .registration-page #smartwizard { grid-template-columns:1fr; }
  .registration-page .smartwizard-wrapper > .nav,
  .registration-page #smartwizard > .nav { order:1; min-height:auto; padding:20px 18px !important; }
  .registration-page .smartwizard-wrapper .tab-content,
  .registration-page #smartwizard .tab-content,
  .registration-page .progress,
  .registration-page .sw-toolbar,
  .registration-page .toolbar { grid-column:auto; }
}

@media (max-width: 767px) {
  .registration-page .registration-header header { padding:16px !important; }
  .registration-page .registration-header .brand-copy h2 { font-size:1rem !important; }
  .registration-page .registration-header .brand-copy p { font-size:.84rem !important; }
  .registration-page .registration-header .brand-logo { width:56px; height:56px; }
  .registration-page .smartwizard-wrapper .tab-content,
  .registration-page #smartwizard .tab-content { padding:22px 18px 18px !important; }
  .registration-page .section-title { font-size:1.35rem !important; }
  .registration-page .name-grid { grid-template-columns:1fr 1fr !important; }
  .registration-page .sw-toolbar,
  .registration-page .toolbar { flex-wrap:wrap; }
  .registration-page .sw-toolbar .btn,
  .registration-page .toolbar .btn,
  .registration-page .sw-btn-group .btn,
  .registration-page #btn-register { width:100%; min-width:0; }
}