/* ---- layout ---- */
:root{
  --ink:#0f172a;           /* deep navy for text */
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#0d1a38;         /* hero bg */
  --accent:#2563eb;        /* buttons */
  --err:#dc2626;
  --ok:#0ea5e9;
}
*{ box-sizing:border-box; }
body{ margin:0; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); background:#fff; }
.container{ width:min(1100px, 92vw); margin:0 auto; }

/* ---- hero ---- */
.sr-hero{ background:var(--brand); color:#fff; padding:40px 0 44px; }
.sr-hero .eyebrow{ text-transform:uppercase; letter-spacing:.06em; opacity:.8; margin:0 0 6px; font-size:12px; }
.sr-hero h1{ margin:0 0 6px; font-size:34px; font-weight:800; }
.sr-hero .sub{ margin:0; opacity:.85; }

/* ---- form ---- */
.sr-form{ padding:28px 0 60px; }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:16px; }
@media (max-width: 800px){ .grid{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; gap:8px; }
.field > span{ font-weight:600; }
.field b{ color:var(--err); font-weight:700; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 12px; border:1px solid var(--line); border-radius:10px; outline:none;
}
.field textarea{ resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--ok); box-shadow:0 0 0 3px rgba(14,165,233,.2);
}
.err{ color:var(--err); min-height:1.1em; }

.resume-box{ border:1px solid var(--line); border-radius:14px; padding:16px; margin:8px 0 18px; }
.resume-box legend{ font-weight:700; }
.resume-box .note{ margin:6px 0 12px; color:var(--muted); }

.radio-tabs{ display:flex; gap:22px; flex-wrap:wrap; margin-bottom:12px; }
.radio-tabs input{ transform:translateY(1px); margin-right:8px; }

.mode.hidden{ display:none; }
.drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border:1px dashed var(--line); border-radius:12px; padding:30px; text-align:center; background:#fafafa;
}
.drop input[type="file"]{ display:block; }
.muted{ color:var(--muted); }

.elig{ border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:8px 0 16px; }
.elig legend{ font-weight:700; }
.elig label{ display:block; margin:6px 0; }

.check{ display:flex; align-items:flex-start; gap:10px; margin:8px 0 18px; }
.check a{ color:var(--accent); text-decoration:none; }
.check a:hover{ text-decoration:underline; }

.actions{ display:flex; align-items:center; gap:16px; }
.btn{
  background:var(--accent); color:#fff; border:none; border-radius:999px; padding:12px 22px; cursor:pointer; font-weight:700;
}
.btn:hover{ filter:brightness(1.05); }
.form-msg{ color:var(--muted); }

/* invalid visuals */
.is-invalid input, .is-invalid select, .is-invalid textarea{ border-color:var(--err); box-shadow:0 0 0 3px rgba(220,38,38,.15); }

/* ===== two-column page layout ===== */
.sr-wrap{ padding:40px 0 80px; background:#f8f9fb; }
.sr-grid{
  display:flex; gap:28px; align-items:flex-start;
}
.sr-copy{
  flex:0 0 40%;
  max-width:40%;
  background:#fff; border-radius:12px; padding:24px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.sr-panel{
  flex:0 0 60%;
  max-width:60%;
  background:#faf8f3; /* subtle panel like the reference */
  border:1px solid #eee;
  border-radius:12px; padding:24px;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}
.sr-panel-title{ margin:0 0 14px; font-weight:800; color:#0f172a; }
.sr-h{ margin:0 0 8px; font-size:28px; font-weight:800; color:#0f172a; }
.sr-sub{ margin:0 0 18px; color:#6b7280; }

.sr-bullets{ padding-left:20px; }
.sr-bullets li{ margin:8px 0; }

/* keep your existing .sr-form, .grid, .field etc. from earlier file */

/* Responsive: stack on small screens */
@media (max-width: 980px){
  .sr-grid{ flex-direction:column; }
  .sr-copy, .sr-panel{ max-width:100%; flex-basis:auto; }
}


/* --- Compact panel --- */
.sr-panel--compact{ padding:18px; }
.sr-form--compact .grid{ margin:0 0 12px; }
.sr-form--compact .field{ margin:0; }
.sr-form--compact .field span{ font-size:14px; }
.sr-form--compact input,
.sr-form--compact select{
  padding:9px 10px;
  border-radius:6px;
  font-size:14px;
}
.sr-form--compact .help{ color:#6b7280; font-size:12px; }

/* two-column on desktop, single on mobile */
.grid.grid--2{
  display:grid; gap:12px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px){
  .grid.grid--2{ grid-template-columns: 1fr; }
}

/* Minimal radios stacked inside the field */
.field--stack .radio{
  display:block; margin:4px 0; font-size:14px;
}

/* Make the whole right box visually smaller */
.sr-panel--compact{
  max-width: 780px;   /* narrows the panel so it fits higher on the page */
}

.elig {
  border: 1px solid #ddd;
  padding: 12px 14px;
  border-radius: 6px;
  background: #fafafa;
  font-size: 14px;
  margin-top: 12px;
}

.elig legend {
  font-weight: 600;
  margin-bottom: 6px;
}

.elig label {
  display: block;
  margin: 6px 0;
}

/* --- Form sections --- */
.form-section{
  border-top: 1px solid #eee;
  padding-top: 12px;
  margin-top: 14px;
}
.form-section:first-child{ border-top:0; padding-top:0; margin-top:0; }

.section-title{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 16px;
  color:#0f172a;
}

/* 3-up row for name/phone/email (wraps responsively) */
.grid.grid--3{
  display:grid; gap:12px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1100px){ .grid.grid--3{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px){  .grid.grid--3{ grid-template-columns: 1fr; } }

/* 2-up row (upload + category) */
.grid.grid--2{
  display:grid; gap:12px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px){ .grid.grid--2{ grid-template-columns: 1fr; } }

/* tighter compact spacing */
.sr-form--compact .grid{ margin-bottom:10px; }
.sr-form--compact .field,
.sr-form--compact fieldset{ margin:0; padding:0; }
.sr-form--compact input,
.sr-form--compact select{ padding:8px 9px; font-size:14px; }

/* eligibility box */
.elig{
  border:1px solid #ddd;
  background:#fafafa;
  border-radius:6px;
  padding:12px 14px;
  margin-top:10px;
}
.elig legend{ font-weight:600; margin-bottom:6px; }
.elig label{ display:block; margin:6px 0; font-size:14px; }


/* Content section (standalone) */
.content-wrap{ padding:28px 0 12px; }
.content-card{
  background:#fff; border:1px solid #eef1f6; border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  padding:20px 22px;
}

/* Resume section: make the panel span full width of container */
.resume-wrap{ padding:10px 0 50px; }
.sr-panel--full{
  width:100%;
  max-width:none;      /* remove any narrow max width */
  padding:20px;        /* a bit tighter so more fits above the fold */
}

/* Keep compact grids */
.grid.grid--3{ display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width:1100px){ .grid.grid--3{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:680px){  .grid.grid--3{ grid-template-columns: 1fr; } }

.grid.grid--2{ display:grid; gap:12px; grid-template-columns: 1fr 1fr; }
@media (max-width:900px){ .grid.grid--2{ grid-template-columns: 1fr; } }

/* Tighten vertical rhythm */
.sr-form--compact .grid{ margin-bottom:10px; }
.sr-form--compact input, .sr-form--compact select{ padding:8px 9px; font-size:14px; }
.form-section{ border-top:1px solid #eee; padding-top:12px; margin-top:14px; }
.form-section:first-child{ border-top:0; padding-top:0; margin-top:0; }
.section-title{ margin:0 0 10px; font-weight:800; font-size:16px; }

/* Eligibility box */
.elig{ border:1px solid #ddd; background:#fafafa; border-radius:6px; padding:12px 14px; margin-top:10px; }
.elig legend{ font-weight:600; margin-bottom:6px; }
.elig label{ display:block; margin:6px 0; font-size:14px; }

/* Hide empty error/help placeholders */
.field small.err:empty,
.field small.help:empty {
  display: none;
}

/* Optional: style only when they actually have text */
.field small.err {
  color: #d9534f; /* red for error */
  font-size: 12px;
  margin-top: 4px;
  display: block;
}
.field small.help {
  color: #6c757d; /* muted gray for helper text */
  font-size: 12px;
  margin-top: 4px;
  display: block;
}


/* === 3-up feature grid === */
.features3{ padding: 24px 0 8px; }
.f3-grid{
  display:flex; flex-wrap:wrap; gap:20px;
}
.f3-card{
  flex: 1 1 calc(33.333% - 20px);
  min-width: 260px;
  background:#fff;
  border:1px solid #e8edf4;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.f3-card:hover{
  transform: translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.12);
  border-color:#dde6f3;
}
.f3-img{
  aspect-ratio: 16/9;      /* keeps consistent card heights */
  background:#eef3fa;
  overflow:hidden;
}
.f3-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .3s ease;
}
.f3-card:hover .f3-img img{ transform: scale(1.04); }

.f3-body{ padding:16px 16px 18px; }
.f3-body h3{
  margin:0 0 8px; font-size:18px; font-weight:800; color:#0f172a; text-transform:capitalize;
}
.f3-body p{ margin:0; color:#4b5563; line-height:1.5; font-size:14.5px; }

/* Responsive: 3 → 2 → 1 */
@media (max-width: 1024px){
  .f3-card{ flex-basis: calc(50% - 20px); }
}
@media (max-width: 640px){
  .f3-card{ flex-basis: 100%; }
}

.features3 {
  padding: 60px 0; /* equal top & bottom padding */
}

.features3 .f3-grid {
  margin: 0 auto;
  max-width: 1200px; /* keeps cards centered */
}

/* Reduce gap between resume and features grid */
.resume-wrap {
  margin-bottom: 20px;   /* was probably 60–80px */
  padding-bottom: 20px;  /* keep a little breathing room */
}

.features3 {
  margin-top: 10px;         /* remove extra margin */
  padding-top: 20px;     /* tighten spacing */
}

.resume-wrap {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f9ff 50%, #fdfdff 100%);
  padding: 50px 0;
}

.sr-panel--full {
  background: #ffffff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

/* ==========================================
   FORCE dark, centered resume panel (matches screenshot)
   ========================================== */

/* Panel */
section.resume-wrap,
body .resume-wrap{
  --bg:##FEF8DD;              /* dark teal */
  --bg2:##FEF8DD;             /* slightly lighter */
  --text:#e8f4ff;
  --muted:#9fc3d1;
  --field-bg:#ffffff;
  --field-text:#0e2b36;
  --field-border:#dfe8ec;
  --focus:#00c2ff;
  --btn:#ffd400;
  --btn-text:#08222b;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%) !important;
  color: var(--text) !important;
  padding: 64px 0 !important;
  border: none !important;
}

/* Container width & centering */
.resume-wrap > .container{
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* Titles */
.resume-wrap .sr-panel-title{
  color: var(--text) !important;
  font-size: clamp(32px, 4vw, 44px) !important;
  font-weight: 800 !important;
  margin: 0 0 20px !important;
  letter-spacing: -0.02em !important;
}
.resume-wrap .section-title{
  color: var(--muted) !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin: 28px 0 12px !important;
  border: 0 !important;
}

/* Grid layout (override any older grids) */
.resume-wrap .grid{ display:grid !important; gap:13px !important; }
.resume-wrap .grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
.resume-wrap .grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
@media (max-width: 900px){
  .resume-wrap .grid--3, .resume-wrap .grid--2{ grid-template-columns: 1fr !important; }
}

/* Labels */
.resume-wrap .field > span{
  display:block !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  margin: 0 0 6px !important;
}

/* Inputs / selects / file */
.resume-wrap .field input[type="text"],
.resume-wrap .field input[type="tel"],
.resume-wrap .field input[type="email"],
.resume-wrap .field input[type="file"],
.resume-wrap .field select{
  width:100% !important;
  height:54px !important;
  border-radius:12px !important;
  background: var(--field-bg) !important;
  color: var(--field-text) !important;
  border:1px solid var(--field-border) !important;
  padding:0 14px !important;
  font-size:16px !important;
  outline: none !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) !important;
}
.resume-wrap .field select{
  appearance:none !important;
  background-image: linear-gradient(45deg, transparent 50%, #7aa0ad 50%),
                    linear-gradient(135deg, #7aa0ad 50%, transparent 50%) !important;
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50% !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
}
.resume-wrap .field input[type="file"]{ padding-left:12px !important; }
.resume-wrap .field input[type="file"]::file-selector-button{
  height:40px; padding:0 14px; margin-right:12px;
  border:1px solid var(--field-border);
  border-radius:10px; background:#f5fafc; color:#184653; cursor:pointer;
}

/* Focus */
.resume-wrap .field input:focus,
.resume-wrap .field select:focus{
  border-color: var(--focus) !important;
  box-shadow: 0 0 0 3px rgba(0,194,255,.25) !important;
}

/* Section divider */
.resume-wrap .form-section + .form-section{
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* Fieldset (eligibility) */
.resume-wrap fieldset.elig{
  background: rgba(8,58,74,.35) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius:14px !important;
  padding:16px 18px !important;
  color: var(--text) !important;
}
.resume-wrap fieldset.elig legend{
  color: var(--muted) !important;
  font-size: 13px !important;
  padding: 0 6px !important;
}
.resume-wrap fieldset.elig label{
  display:block !important;
  padding:10px 0 !important;
}

/* Custom radios / checkbox */
.resume-wrap input[type="radio"],
.resume-wrap input[type="checkbox"]{
  appearance:none !important;
  width:18px !important; height:18px !important;
  border:2px solid #9ac3d1 !important;
  border-radius:50% !important;
  margin-right:10px !important; vertical-align:-4px !important;
  background:transparent !important; cursor:pointer !important;
}
.resume-wrap input[type="checkbox"]{ border-radius:6px !important; }
.resume-wrap input[type="radio"]:checked{
  border-color: var(--focus) !important;
  box-shadow: inset 0 0 0 4px var(--focus) !important;
}
.resume-wrap input[type="checkbox"]:checked{
  background: var(--focus) !important; border-color: var(--focus) !important;
  box-shadow: inset 0 0 0 2px #002733 !important;
}

/* Consent + link underline off */
.resume-wrap .check{ display:flex !important; gap:12px !important; align-items:flex-start !important; margin-top:16px !important; }
.resume-wrap .check a{ color:#7fe1ff !important; text-decoration:none !important; }

/* Submit button */
.resume-wrap .actions{ display:flex !important; gap:18px !important; align-items:center !important; margin-top:20px !important; }
.resume-wrap .btn{
  background: var(--btn) !important; color: var(--btn-text) !important;
  border:none !important; border-radius:999px !important;
  padding:14px 26px !important; font-weight:800 !important; letter-spacing:.02em !important;
  box-shadow: 0 6px 20px rgba(255,212,0,.25) !important; cursor:pointer !important;
}
.resume-wrap .btn:hover{ transform: translateY(-1px) !important; }
.resume-wrap .form-msg{ color: var(--muted) !important; }

/* Center heading */
.resume-wrap .sr-panel-title{
  text-align: center !important;
  font-size: clamp(28px, 3.5vw, 40px) !important;
  margin-bottom: 36px !important;
}

/* Reduce input box height and font size */
.resume-wrap .field input[type="text"],
.resume-wrap .field input[type="tel"],
.resume-wrap .field input[type="email"],
.resume-wrap .field input[type="file"],
.resume-wrap .field select{
  height: 44px !important;         /* smaller height */
  font-size: 15px !important;      /* slightly smaller text */
  padding: 0 12px !important;      /* reduce padding */
  border-radius: 8px !important;   /* little tighter corners */
}

/* File input button smaller too */
.resume-wrap .field input[type="file"]::file-selector-button{
  height: 34px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
}

/* Reduce gap between label and fields */
.resume-wrap .field > span{
  font-size: 12px !important;
  margin-bottom: 4px !important;
}

/* Eligibility box spacing tighter */
.resume-wrap fieldset.elig{
  padding: 12px 14px !important;
}
.resume-wrap fieldset.elig label{
  font-size: 14px !important;
  padding: 6px 0 !important;
}

/* Submit button still prominent */
.resume-wrap .btn{
  padding: 12px 22px !important;
  font-size: 15px !important;
}

/* Reduce vertical gap between form fields */
.resume-wrap .grid{
  gap: 12px !important;   /* smaller than 18px */
}

/* Reduce spacing between sections */
.resume-wrap .form-section{
  margin-bottom: 20px !important;
}
.resume-wrap .form-section + .form-section{
  margin-top: 16px !important;
  padding-top: 16px !important;
}

/* Tighten labels and inputs */
.resume-wrap .field{
  margin-bottom: 10px !important;
}
.resume-wrap .field > span{
  font-size: 12px !important;
  margin-bottom: 3px !important;
}

/* Eligibility fieldset spacing tighter */
.resume-wrap fieldset.elig{
  margin-top: 14px !important;
  padding: 10px 14px !important;
}
.resume-wrap fieldset.elig label{
  padding: 4px 0 !important;
  font-size: 14px !important;
}

/* Checkbox line tighter */
.resume-wrap .check{
  margin-top: 12px !important;
  line-height: 1.3 !important;
}

/* Submit button spacing */
.resume-wrap .actions{
  margin-top: 16px !important;
}


/* --- FIX RADIO/CHECKBOX --- */
.resume-wrap input[type="radio"],
.resume-wrap input[type="checkbox"]{
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid #9ac3d1 !important;
  background: transparent !important;   /* no white fill */
  margin-right: 8px !important;
  cursor: pointer !important;
  position: relative !important;
}

/* Round for radios, square for checkboxes */
.resume-wrap input[type="radio"]{ border-radius: 50% !important; }
.resume-wrap input[type="checkbox"]{ border-radius: 4px !important; }

/* Checked state */
.resume-wrap input[type="radio"]:checked {
  border-color: var(--focus) !important;
  box-shadow: inset 0 0 0 4px var(--focus) !important;
}
.resume-wrap input[type="checkbox"]:checked {
  background: var(--focus) !important;
  border-color: var(--focus) !important;
  box-shadow: inset 0 0 0 2px #002733 !important;
}

/* --- TIGHTEN FIELD SPACING --- */
.resume-wrap .grid{ gap: 8px !important; }   /* closer fields */
.resume-wrap .form-section{ margin-bottom: 14px !important; }
.resume-wrap .form-section + .form-section{ margin-top: 14px !important; padding-top: 14px !important; }
.resume-wrap .field{ margin-bottom: 6px !important; }
.resume-wrap .field > span{ margin-bottom: 2px !important; }

/* Eligibility section spacing */
.resume-wrap fieldset.elig{ padding: 8px 12px !important; margin-top: 10px !important; }
.resume-wrap fieldset.elig label{ padding: 3px 0 !important; }

/* Consent line spacing */
.resume-wrap .check{ margin-top: 10px !important; }


/* Add more space on left and right */
.resume-wrap > .container{
  max-width: 720px !important;   /* narrower container */
  margin: 0 auto !important;     /* center it */
  padding: 0 30px !important;    /* side padding */
}

/* Ensure grids shrink nicely */
.resume-wrap .grid--3,
.resume-wrap .grid--2{
  grid-template-columns: 1fr 1fr !important;   /* 2 columns instead of 3 if too tight */
  gap: 12px !important;
}
@media (max-width: 768px){
  .resume-wrap .grid--3,
  .resume-wrap .grid--2{
    grid-template-columns: 1fr !important;     /* stack on mobile */
  }
}

/* Inputs full width inside container */
.resume-wrap .field input,
.resume-wrap .field select{
  width: 100% !important;
}


/* Resume section background and text color */
.resume-wrap{
  background-color: #adcfde !important;  /* soft green background */
  color: #000 !important;                /* black text */
  padding: 60px 0 !important;
}

/* Headings */
.resume-wrap .sr-panel-title,
.resume-wrap .section-title{
  color: #000 !important;
}

/* Labels */
.resume-wrap .field > span,
.resume-wrap fieldset.elig legend,
.resume-wrap fieldset.elig label,
.resume-wrap .check span{
  color: #000 !important;
}

/* Inputs stay white but with black text */
.resume-wrap .field input,
.resume-wrap .field select{
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #ccc !important;
}

/* File input button */
.resume-wrap .field input[type="file"]::file-selector-button{
  background: #f0f0f0 !important;
  color: #000 !important;
  border: 1px solid #bbb !important;
}

/* Radio / checkbox borders in black */
.resume-wrap input[type="radio"],
.resume-wrap input[type="checkbox"]{
  border: 2px solid #000 !important;
}
.resume-wrap input[type="radio"]:checked{
  box-shadow: inset 0 0 0 4px #000 !important;
}
.resume-wrap input[type="checkbox"]:checked{
  background: #000 !important;
  border-color: #000 !important;
  box-shadow: inset 0 0 0 2px #fff !important;
}

/* Submit button (optional: yellow like before, or black/green) */
.resume-wrap .btn{
  background: #000 !important;
  color: #fff !important;
  border-radius: 25px !important;
  padding: 12px 24px !important;
}
.resume-wrap .btn:hover{
  background: #333 !important;
}


/* Force resume section background and text color */
section.resume-wrap {
  background-color: #e0e6c8 !important;  /* new bg color */
  color: #000 !important;                /* black text */
  padding: 60px 0 !important;
}

/* Make sure headings are black */
.resume-wrap .sr-panel-title,
.resume-wrap .section-title {
  color: #000 !important;
}

/* Labels and field legends */
.resume-wrap .field > span,
.resume-wrap fieldset.elig legend,
.resume-wrap fieldset.elig label,
.resume-wrap .check span {
  color: #000 !important;
}

/* Input fields */
.resume-wrap .field input,
.resume-wrap .field select {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #666 !important;
}

/* File input button */
.resume-wrap .field input[type="file"]::file-selector-button {
  background: #eaeaea !important;
  color: #000 !important;
  border: 1px solid #555 !important;
}

/* Radio and checkbox */
.resume-wrap input[type="radio"],
.resume-wrap input[type="checkbox"] {
  border: 2px solid #000 !important;
}
.resume-wrap input[type="radio"]:checked {
  box-shadow: inset 0 0 0 4px #000 !important;
}
.resume-wrap input[type="checkbox"]:checked {
  background: #000 !important;
  border-color: #000 !important;
  box-shadow: inset 0 0 0 2px #fff !important;
}

/* Submit button (black style) */
.resume-wrap .btn {
  background: #000 !important;
  color: #fff !important;
  border-radius: 25px !important;
  padding: 12px 24px !important;
}
.resume-wrap .btn:hover {
  background: #333 !important;
}

/* ---------- tighten overall spacing ---------- */
.resume-wrap .sr-panel-title{
  margin: 16px 0 20px !important;   /* less space above/below H1 */
}

.resume-wrap .section-title{
  margin: 16px 0 8px !important;    /* "Your details" / "Role & resume" */
  letter-spacing: .06em !important;
}

.resume-wrap .form-section{ 
  margin-bottom: 18px !important;   /* space after each section */
}
.resume-wrap .form-section + .form-section{
  margin-top: 12px !important;
  padding-top: 12px !important;     /* subtle separation only */
  border-top: 1px solid rgba(0,0,0,.06) !important;
}

.resume-wrap .grid{ gap: 10px !important; }  /* field-to-field gap */
.resume-wrap .field{ margin-bottom: 6px !important; }
.resume-wrap .field > span{ margin-bottom: 3px !important; }

/* ---------- Employment Eligibility block ---------- */
.resume-wrap fieldset.elig{
  padding: 10px 12px !important;     /* tighter box */
  margin-top: 10px !important;
  border-radius: 14px !important;
}
.resume-wrap fieldset.elig legend{
  margin-bottom: 4px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.resume-wrap fieldset.elig label{
  padding: 4px 0 !important;         /* less gap between radio rows */
  line-height: 1.35 !important;
}

/* Remove the stray white dot/capsule that appears at the bottom-left */
.resume-wrap fieldset.elig .err{ display:none !important; }  /* the empty <small class="err"> */
.resume-wrap .err:empty{ display:none !important; }          /* hide any empty error placeholders */

/* Radios/checkboxes – no white fill when unchecked */
.resume-wrap input[type="radio"],
.resume-wrap input[type="checkbox"]{
  appearance:none !important;
  width:16px !important; height:16px !important;
  border:2px solid #000 !important;
  background:transparent !important;   /* no white center */
  margin-right:8px !important;
  vertical-align:-3px !important;
  cursor:pointer !important;
}
.resume-wrap input[type="radio"]{ border-radius:50% !important; }
.resume-wrap input[type="checkbox"]{ border-radius:4px !important; }

.resume-wrap input[type="radio"]:checked{
  box-shadow: inset 0 0 0 4px #000 !important;
}
.resume-wrap input[type="checkbox"]:checked{
  background:#000 !important;
  border-color:#000 !important;
  box-shadow: inset 0 0 0 2px #fff !important;
}


/* Make Employment Eligibility look like other field labels */
.resume-wrap .elig-field > span {
  display: block;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 0 6px !important;
  color: #000 !important;
}

/* Box styling consistent with inputs */
.resume-wrap fieldset.elig {
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  background: #f7f7f7 !important;
  padding: 10px 14px !important;
}
.resume-wrap fieldset.elig legend { display: none !important; }

.resume-wrap fieldset.elig label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}
.resume-wrap fieldset.elig label:last-child {
  margin-bottom: 0;
}