/* ===== ICC Student Registration Portal ===== */
:root {
  --srp-primary: #1b4d79;
  --srp-accent:  #f6b83d;
  --srp-hero:    #0a1d30;
}

.srp-wrap { max-width:900px; margin:0 auto; font-family:'Segoe UI',Arial,sans-serif; color:#1a202c; }

/* ── HEADER ── */
.srp-header {
  background: var(--srp-hero);
  color:#fff;
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 28px;
  border-radius:12px 12px 0 0;
}
.srp-logo {
  width:80px; height:80px;
  object-fit:contain;
  border-radius:50%;
  background:#fff;
  padding:4px;
  border:3px solid var(--srp-accent);
  flex-shrink:0;
}
.srp-header-text h1 { margin:0; font-size:22px; font-weight:800; letter-spacing:.3px; }
.srp-header-text p  { margin:4px 0 0; font-size:13px; opacity:.8; }
.srp-title-bar {
  background:#f1f5f9;
  text-align:center;
  padding:9px;
  font-weight:700;
  font-size:13px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  border:1px solid #ddd;
  border-top:none;
  color:#334155;
}

/* ── STEP INDICATORS ── */
.srp-steps-bar {
  display:flex;
  align-items:center;
  background:#fff;
  padding:14px 28px;
  border:1px solid #e2e8f0;
  border-top:none;
  margin-bottom:22px;
}
.srp-step-item {
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition:all .2s;
}
.srp-step-circle {
  width:34px; height:34px;
  border-radius:50%;
  border:2px solid #cbd5e1;
  background:#f8fafc;
  color:#94a3b8;
  font-size:14px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .3s;
}
.srp-step-label {
  font-size:13px;
  font-weight:600;
  color:#94a3b8;
  white-space:nowrap;
  transition:color .2s;
}
.srp-step-line {
  flex:1;
  height:2px;
  background:#e2e8f0;
  margin:0 10px;
  position:relative;
  transition:background .3s;
}
.srp-step-item.active .srp-step-circle {
  background:var(--srp-primary);
  border-color:var(--srp-primary);
  color:#fff;
  box-shadow:0 0 0 4px rgba(27,77,121,.15);
}
.srp-step-item.active .srp-step-label { color:var(--srp-primary); }
.srp-step-item.done .srp-step-circle  {
  background:#22c55e;
  border-color:#22c55e;
  color:#fff;
}
.srp-step-item.done .srp-step-label { color:#16a34a; }
.srp-step-line.done { background:var(--srp-primary); }

/* ── MESSAGES ── */
#srp-msg { margin-bottom:16px; }
.srp-success { background:#f0fff4; border:1px solid #86efac; color:#15803d; padding:16px 20px; border-radius:10px; font-size:14px; font-weight:600; }
.srp-error   { background:#fff5f5; border:1px solid #fca5a5; color:#b91c1c; padding:16px 20px; border-radius:10px; font-size:14px; font-weight:600; }

/* ── CARD ── */
.srp-card {
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:20px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.srp-card-head {
  background:var(--srp-primary);
  color:#fff;
  padding:11px 20px;
  font-weight:700;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.srp-part-badge {
  background:rgba(255,255,255,.22);
  border-radius:5px;
  padding:1px 8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.5px;
}
.srp-badge-warn { background:rgba(0,0,0,.15); }
.srp-decl-head { background:#92400e !important; }
.srp-card-body { padding:20px; }

/* ── PHOTO ROW ── */
.srp-photo-row { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.srp-photo-fields { flex:1; min-width:220px; }
.srp-photo-box {
  width:140px;
  border:2px dashed #93c5fd;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:14px 10px;
  background:#f8fafc;
  text-align:center;
  flex-shrink:0;
}
.srp-photo-box img {
  width:96px; height:124px;
  object-fit:cover;
  border:2px solid #cbd5e1;
  border-radius:6px;
  margin-bottom:8px;
  background:#e2e8f0;
}
.srp-upload-label { cursor:pointer; font-size:12px; font-weight:700; color:var(--srp-primary); text-decoration:underline; margin-bottom:4px; }
.srp-photo-box small { font-size:10px; color:#94a3b8; }
.srp-hidden { display:none; }

/* ── FIELDS ── */
.srp-field { display:flex; flex-direction:column; gap:4px; }
.srp-field label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#475569; }
.req { color:#e53e3e; }
.srp-field input,
.srp-field select,
.srp-field textarea {
  border:1.5px solid #cbd5e1;
  border-radius:8px;
  padding:8px 12px;
  font-size:13px;
  width:100%;
  box-sizing:border-box;
  transition:border .2s, box-shadow .2s;
  outline:none;
  font-family:inherit;
  background:#fff;
}
.srp-field input:focus,
.srp-field select:focus,
.srp-field textarea:focus {
  border-color:var(--srp-primary);
  box-shadow:0 0 0 3px rgba(27,77,121,.12);
}
.srp-field input[readonly] { background:#f1f5f9; color:#64748b; }

/* ── RADIO GROUP ── */
.srp-radios { display:flex; gap:12px; padding:8px 0; flex-wrap:wrap; }
.srp-radios label { font-size:13px; font-weight:500; display:flex; align-items:center; gap:5px; text-transform:none; letter-spacing:0; cursor:pointer; }
.srp-radios input[type=radio] { accent-color:var(--srp-primary); }

/* ── GRIDS ── */
.srp-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.srp-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.srp-sub-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#64748b; display:flex; align-items:center; gap:6px; }

/* ── TABLE ── */
.srp-table { width:100%; border-collapse:collapse; font-size:12px; min-width:680px; }
.srp-table th { background:#f1f5f9; padding:9px 8px; border:1px solid #e2e8f0; font-size:11px; font-weight:700; text-transform:uppercase; color:#475569; text-align:left; }
.srp-table td { padding:7px 8px; border:1px solid #e2e8f0; vertical-align:middle; }
.srp-table tr:hover td { background:#f8fafc; }
.srp-exam-name { font-weight:700; color:#334155; white-space:nowrap; }
.srp-table input[type=text],
.srp-table input[type=number] { border:1px solid #cbd5e1; border-radius:6px; padding:5px 7px; width:100%; box-sizing:border-box; font-size:12px; }
.srp-sm { width:70px !important; }
.srp-file-input { font-size:11px; }

/* ── DECLARATION ── */
.srp-decl-scroll { background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:14px 16px; font-size:13px; color:#713f12; line-height:1.75; max-height:160px; overflow-y:auto; margin-bottom:14px; }
.srp-decl-scroll p { margin:0 0 8px; }
.srp-decl-check { display:flex; gap:10px; align-items:flex-start; font-size:13px; font-weight:600; color:#1a202c; cursor:pointer; line-height:1.5; }
.srp-decl-check input[type=checkbox] { margin-top:3px; accent-color:var(--srp-primary); width:16px; height:16px; flex-shrink:0; }

/* ── NAV BUTTONS ── */
.srp-nav-row { display:flex; justify-content:space-between; align-items:center; margin-top:4px; margin-bottom:8px; }
.srp-btn {
  padding:11px 26px;
  border:none;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s;
  font-family:inherit;
}
.srp-btn-back { background:#f1f5f9; color:#475569; border:1.5px solid #cbd5e1; }
.srp-btn-back:hover { background:#e2e8f0; }
.srp-btn-next { background:var(--srp-primary); color:#fff; }
.srp-btn-next:hover { filter:brightness(1.1); transform:translateY(-1px); }
.srp-btn-submit { background:#15803d; color:#fff; }
.srp-btn-submit:hover { background:#166534; transform:translateY(-1px); }
.srp-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ── FOOTER ── */
.srp-footer { text-align:center; font-size:12px; color:#94a3b8; padding:14px; border-top:1px solid #e2e8f0; margin-top:4px; background:#fff; }

/* ── RESPONSIVE ── */
* { -webkit-tap-highlight-color: transparent; }
.srp-wrap { width:100%; box-sizing:border-box; }
.srp-wrap * { box-sizing:border-box; }

@media(max-width:640px) {
  .srp-wrap { padding:0 10px; }
  .srp-header { flex-direction:column; text-align:center; padding:16px; gap:10px; }
  .srp-logo { width:64px; height:64px; }
  .srp-header-text h1 { font-size:18px; }
  .srp-header-text p { font-size:12px; }
  .srp-steps-bar { padding:12px 8px; gap:4px; }
  .srp-step-label { display:none; }
  .srp-step-circle { width:28px; height:28px; font-size:12px; }
  .srp-step-line { margin:0 4px; }
  .srp-grid-2,.srp-grid-3 { grid-template-columns:1fr; }
  .srp-photo-row { flex-direction:column-reverse; }
  .srp-photo-box { width:100%; flex-direction:row; gap:14px; padding:10px; }
  .srp-photo-box img { width:70px; height:90px; margin-bottom:0; flex-shrink:0; }
  .srp-card-body { padding:14px; }
  .srp-card-head { padding:10px 14px; font-size:13px; }

  /* Nav buttons: stack full-width so both are easy to tap */
  .srp-nav-row { flex-direction:column-reverse; gap:10px; align-items:stretch; }
  .srp-nav-row span { display:none; }
  .srp-btn { width:100%; padding:13px 20px; font-size:15px; }

  /* Academic table: allow horizontal scroll with a visible hint */
  .srp-card-body[style*="overflow-x"] { -webkit-overflow-scrolling:touch; }
  .srp-table { min-width:620px; }

  .srp-decl-scroll { max-height:130px; font-size:12px; padding:12px; }
  .srp-decl-check { font-size:12.5px; }
  .srp-title-bar { font-size:11px; letter-spacing:1px; padding:8px; }
}

@media(max-width:420px) {
  .srp-header-text h1 { font-size:16px; }
  .srp-field input, .srp-field select, .srp-field textarea { font-size:16px; } /* prevents iOS zoom-on-focus */
  .srp-photo-box img { width:60px; height:78px; }
}