/***  form style  css — Apply V2 ***/
.wizard {
 max-width: 80%;
 width: 100%;
 margin: 0 auto;
 background: white;
 border-radius: 28px;
 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
 /* overflow: hidden removed — flatpickr calendar needs to escape the container */
 }
 .form-header {
 background: linear-gradient(135deg, #002147, #001a33, #00122a);
 padding: 2rem 2rem 1.5rem 2rem;
 position: relative;
 overflow: hidden;
 border-top-left-radius: 30px;
  border-top-right-radius: 30px;
 }
 .mt-10{margin-top:10px;}
 .mt-15{margin-top:15px;}
 .mb-15{margin-bottom:15px !important;}
 .my-10{margin-bottom:10px !important; margin-top:10px !important;}
 .form-header::before {
 content: '';
 position: absolute;
 top: -50%;
 right: -20%;
 width: 300px;
 height: 300px;
 background: radial-gradient(circle, rgba(212, 175, 55, 0.1), transparent);
 border-radius: 50%;
 }
 .form-header::after {
 content: '';
 position: absolute;
 bottom: -30%;
 left: -10%;
 width: 250px;
 height: 250px;
 background: radial-gradient(circle, rgba(212, 175, 55, 0.08), transparent);
 border-radius: 50%;
 }
 .header-top {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 margin-bottom: 1.5rem;
 position: relative;
 z-index: 2;
 }
 .main-title {
 font-size: 1.8rem;
 font-weight: 800;
 color: white;
 line-height: 1.2;
 letter-spacing: -0.5px;
 margin-bottom: 0.5rem;
 }
 .main-title span {
 color: #d4af37;
 display: inline-block;
 }
 .sub-title {
 font-size: 0.8rem;
 color: rgba(255,255,255,0.75);
 margin-top: 0.3rem;
 line-height: 1.4;
 }
 .sub-title i { margin-right: 6px; color: #d4af37; }
 .header-right { text-align: right; }
 .form-number {
 background: rgba(212, 175, 55, 0.15);
 border: 1px solid rgba(212, 175, 55, 0.3);
 border-radius: 40px;
 padding: 0.4rem 1.2rem;
 display: inline-block;
 }
 .form-number .form-id { font-size: 0.8rem; font-weight: 600; color: #d4af37; }
 .form-number .revision { font-size: 0.7rem; color: rgba(255,255,255,0.6); margin-left: 8px; }
 .dept-info { margin-top: 0.5rem; font-size: 0.7rem; color: rgba(255,255,255,0.6); line-height:1.5; }
 .dept-info i { margin-right: 4px; color: #d4af37; }
 .omb { margin-top: 0.3rem; font-size: 0.7rem; color: rgba(255,255,255,0.5); }
 .header-bottom {
 border-top: 1px solid rgba(212, 175, 55, 0.3);
 padding-top: 1rem;
 margin-top: 0.5rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 gap: 0.8rem;
 position: relative;
 z-index: 2;
 }
 .website-link {
 font-size: 0.75rem;
 color: #d4af37;
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 transition: all 0.2s;
 }
 .website-link:hover { color: white; text-decoration: underline; }
 .instruction-badge {
 /* background: rgba(212, 175, 55, 0.1);
 border-radius: 30px;
 padding: 0.3rem 1rem;
 font-size: 0.7rem;
 color: #d4af37;
 display: inline-flex;
 align-items: center;
 gap: 6px; */
  background: #d4af37;
  padding: 5px 14px;
  border-radius: 40px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #002147;
 }
 .instruction-badge a { color: #fff; }
 /* INFO & APP TYPE ROW */
 .info-app-row {
 display: flex;
 flex-wrap: wrap;
 gap: 1rem;
 padding: 1rem 2rem;
 background: linear-gradient(135deg, #f8fafc, #ffffff);
 border-bottom: 1px solid #eef2ff;
 }
 .info-section {
 flex: 0 0 70%;
 background: #f0f7ff;
 border-left: 4px solid #d4af37;
 padding: 1rem 1.2rem;
 border-radius: 16px;
 }
 .info-title { font-weight: 700; font-size: 16px; color: #002147; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 8px; }
 .info-title i { color: #d4af37; font-size: 0.9rem; }
 .info-text { font-size: 16px; color: #334155; line-height: 1.5; margin-bottom: 0.3rem; }
 .info-bullet { font-size: 0.7rem; color: #222222; display: flex; align-items: flex-start; gap: 8px; }
 .info-bullet i { color: #d4af37; font-size: 0.65rem; margin-top: 2px; }
 /* Application Type */
 .app-type-wrapper {
 flex: 0 0 calc(30% - 1rem);
 background: linear-gradient(135deg, #ffffff, #fef9e6);
 border-radius: 16px;
 padding: 0.8rem 1rem;
 border: 1px solid #f0e6d0;
 box-shadow: 0 2px 8px rgba(0,0,0,0.02);
 }
 .app-type-title { font-weight: 700; font-size: 0.75rem; color: #002147; letter-spacing: 0.5px; margin-bottom: 0.7rem; display: flex; align-items: center; gap: 6px; }
 .app-type-title i { color: #d4af37; }
 .app-type-options { display: flex; flex-direction: column; gap: 0.6rem; }
 .app-type-option {
 display: flex;
 align-items: center;
 gap: 12px;
 cursor: pointer;
 padding: 0.6rem 1rem;
 background: white;
 border-radius: 50px;
 transition: all 0.3s ease;
 border: 1.5px solid #e9edf2;
 position: relative;
 overflow: hidden;
 }
 .app-type-option::before {
 content: '';
 position: absolute;
 left: 0; top: 0; bottom: 0;
 width: 0;
 background: linear-gradient(135deg, #002147, #001a33);
 transition: width 0.3s ease;
 z-index: 0;
 border-radius: 50px;
 }
 .app-type-option:hover { border-color: #d4af37; transform: translateX(3px); box-shadow: 0 2px 8px rgba(0,33,71,0.1); }
 .app-type-option.selected { background: linear-gradient(135deg, #002147, #001a33); border-color: #d4af37; box-shadow: 0 4px 12px rgba(0,33,71,0.3); }
 .app-type-option.selected .option-icon { color: #d4af37; }
 .app-type-option.selected .option-text { color: white; font-weight: 600; }
 .app-type-option.selected::before { width: 100%; }
 .option-icon { font-size: 1rem; color: #94a3b8; transition: all 0.3s ease; position: relative; z-index: 1; }
 .option-text { font-size: 0.8rem; color: #334155; transition: all 0.3s ease; position: relative; z-index: 1; font-weight: 500; }
 .option-check { display: none; margin-left: auto; position: relative; z-index: 1; }
 .app-type-option.selected .option-check { display: inline-block; margin-left: auto; color: #d4af37; font-size: 0.8rem; }
 @media (max-width: 700px) {
 .info-app-row { flex-direction: column; }
 .info-section { flex: 1; }
 .app-type-wrapper { flex: 1; margin-top: 0.5rem; }
 }
 /* Step Indicators */
 .steps-header { padding: 1.5rem 2rem 1rem 2rem; background: white; border-bottom: 1px solid #eff3f8; }
 .steps-track { display: flex; align-items: center; justify-content: space-between; position: relative; margin-bottom: 0.5rem; }
 .step { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; flex: 1; cursor: pointer; }
 .step-circle {
 width: 48px; height: 48px;
 background: #f8fafc;
 border: 2px solid #e2e8f0;
 border-radius: 24px;
 display: flex; align-items: center; justify-content: center;
 font-weight: 700; font-size: 1.1rem; color: #94a3b8;
 transition: all 0.2s;
 }
 .step.active .step-circle { background: #002147; border-color: #002147; color: white; box-shadow: 0 4px 12px rgba(0,33,71,0.2); }
 .step.completed .step-circle { background: #d4af37; border-color: #d4af37; color: #002147; }
 .step-label { margin-top: 0.5rem; font-size: 0.7rem; font-weight: 600; color: #94a3b8; letter-spacing: 0.5px; }
 .step.active .step-label { color: #002147; font-weight: 700; }
 .step.completed .step-label { color: #d4af37; }
 .progress-rail { position: absolute; top: 24px; left: 0; right: 0; height: 3px; background: #eef2ff; z-index: 1; border-radius: 10px; overflow: hidden; }
 .progress-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, #002147, #d4af37); border-radius: 10px; transition: width 0.35s ease; }
 /* Panels */
 .panels-container { padding: 2rem; background: white; }
 .panel { display: none; animation: fadeInV2 0.3s ease; }
 .panel.active-panel { display: block; }
 @keyframes fadeInV2 { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
 /* Section Cards */
 .section-card { background: white; border-radius: 20px; margin-bottom: 1.8rem; border: 1px solid #f0f2f5; overflow: hidden; }
 .section-title { padding: 1rem 1.3rem; background: #fafbff; border-bottom: 1px solid #f0f0ff; display: flex; align-items: center; gap: 10px; }
 .section-title i { font-size: 1rem; color: #d4af37; }
 .section-title h3 { font-size: 18px; font-weight: 700; color: #002147; }
 .section-title .badge { background: #ead37d; color: #e54c4c; font-size: 12px; padding: 0.2rem 0.6rem; border-radius: 30px; margin-left: auto; font-weight: 600; }
 .section-body { padding: 1.3rem; }
 .instruction-box { background: #fef9e6; border-left: 4px solid #d4af37; padding: 1rem 1.2rem; border-radius: 14px; margin-bottom: 1rem; font-size: 0.85rem; color: #5a4a1a; line-height: 1.5; }
 .instruction-box i { margin-right: 8px; color: #d4af37; }
 .caution-box { background: #fee2e2; border-left: 4px solid #ef4444; padding: 1rem 1.2rem; border-radius: 14px; margin-bottom: 1.2rem; font-size: 0.85rem; color: #991b1b; line-height: 1.5; }
 .caution-box i { margin-right: 8px; color: #ef4444; }
 /* Grid layouts */
 .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; }
 .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
 .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; }
 /* Form fields */
 .form-field { margin-bottom: 0; }
 .form-field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 0.35rem; color: #222222; text-transform: capitalize; letter-spacing: 0.3px; }
 .form-field input, .form-field select { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid #e9edf2; border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 16px; background: transparent; outline: none; position: relative; z-index: 11;}
 .form-field input:focus, .form-field select:focus { border-color: #d4af37; box-shadow: 0 0 0 3px rgba(212,175,55,0.1); }
 .full-width-field { margin-bottom: 1rem; }
 .full-width-field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 0.35rem; color: #222222; text-transform: capitalize; letter-spacing: 0.3px; }
 .full-width-field input { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid #e9edf2; border-radius: 12px; }
 /* Checkbox rows */
 .checkbox-row { display: flex; align-items: flex-start; gap: 12px; padding: 0.6rem 0; cursor: pointer; border-radius: 10px; transition: background 0.2s; }
 .checkbox-row:hover { background: #f8fafc; }
 .checkbox-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: #002147; cursor: pointer; flex-shrink: 0; }
 .checkbox-row label { cursor: pointer; font-size: 16px; color: #334155; line-height: 1.4; flex: 1; }
 .checkbox-row label span { background: #fbedb8; padding: 2px 8px; border-radius: 20px; font-size: 12px; margin-left: 8px; }
 /* Conditional boxes */
 .conditional-box { margin-left: 2rem; padding-left: 1rem; border-left: 2px solid #d4af37; margin-bottom: 1rem; }
 .conditional-box input { width: 100%; padding: 0.7rem 1rem; border: 1.5px solid #e9edf2; border-radius: 12px; }
 /* Radio / doc chips */
 .radio-group, .doc-group { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
 .radio-chip, .doc-chip { display: flex; align-items: center; gap: 6px; padding: 0.5rem 1.2rem; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 40px; font-size: 0.8rem; font-weight: 500; color: #222222; cursor: pointer; transition: all 0.2s; }
 .radio-chip:hover, .doc-chip:hover { border-color: #d4af37; background: #fef9e6; }
 /* Selected state for radio-chip (JS adds .selected, or :has for checkbox) */
 .radio-chip.selected, .radio-chip:has(input:checked) { background: #002147; border-color: #002147; color: white; }
 .doc-chip:has(input:checked) { background: #002147; border-color: #002147; color: white; }
 /* Hide native radio/checkbox inside chips — the pill style is the indicator */
 .doc-chip input[type="radio"],
 .doc-chip input[type="checkbox"],
 .radio-chip input[type="radio"],
 .radio-chip input[type="checkbox"] { display: none; }
 .full-width-field label.doc-chip { display: flex; }

 /* Checkbox chip with visible checkmark indicator */
 .doc-chip-check {
   display: inline-flex; align-items: center; gap: 8px;
   padding: 0.5rem 1rem 0.5rem 0.7rem;
   background: #f8fafc; border: 1.5px solid #e2e8f0;
   border-radius: 40px; font-size: 0.82rem; font-weight: 500;
   color: #334155; cursor: pointer; transition: all 0.2s;
   user-select: none; white-space: nowrap;
 }
 .doc-chip-check:hover { border-color: #d4af37; background: #fef9e6; }
 .doc-chip-check input[type="checkbox"] { display: none; }
 .chip-check-icon {
   width: 18px; height: 18px; border-radius: 5px;
   border: 1.5px solid #cbd5e1; background: white;
   display: inline-flex; align-items: center; justify-content: center;
   flex-shrink: 0; transition: all 0.2s;
   font-size: 0.65rem; color: transparent;
 }
 .doc-chip-check.checked .chip-check-icon,
 .doc-chip-check:has(input:checked) .chip-check-icon {
   background: #002147; border-color: #002147; color: white;
 }
 .doc-chip-check.checked,
 .doc-chip-check:has(input:checked) {
   background: #002147; border-color: #002147; color: white;
 }

 /* Document block header */
 .doc-block-header {
   display: flex; align-items: center; gap: 8px;
   background: #f0f4f8; border-radius: 10px;
   padding: 0.55rem 1rem; margin-bottom: 0.8rem;
   font-size: 0.85rem; font-weight: 700; color: #002147;
 }
 .doc-block-header i { color: #d4af37; }
 /* OTP digit inputs */
 .otp-row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1rem; }
 .otp-group { flex: 1; min-width: 240px; }
 .otp-label { font-weight: 600; font-size: 0.7rem; margin-bottom: 0.5rem; color: #222222; text-transform: uppercase; }
 .otp-digit-container { display: flex; gap: 0.35rem; flex-wrap: wrap; }
 .otp-digit { width: 40px; height: 44px; text-align: center; font-size: 1rem; font-weight: 600; border: 1.5px solid #e2e8f0; border-radius: 10px; background: white; font-family: monospace; }
 .otp-digit:focus { border-color: #d4af37; outline: none; }
 hr { margin: 1.2rem 0; border: none; border-top: 1px solid #eef2ff; }
 /* Declaration */
 .declaration-text { background: #fef9e6; padding: 1rem; border-radius: 12px; font-size: 0.75rem; color: #5a4a1a; line-height: 1.5; margin-bottom: 1rem; border-left: 3px solid #d4af37; }
 /* Upload areas */
 .document-upload-group { background: #fef9e6; border-radius: 18px; padding: 15px; margin-top: 12px; border-left: 4px solid #fdb913; }
 .document-upload-cus { margin-bottom: 15px; }
 .upload-area { background: #fafcff; border: 2px dashed #cbd5e1; border-radius: 20px; padding: 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
 .upload-label { background: #1e6f9f; color: white !important; padding: 8px 18px; border-radius: 40px; font-size: 0.8rem; cursor: pointer; }
 .file-name { font-size: 0.75rem; color: #2b825b; }
 /* Buttons bar */
 .buttons-bar { display: flex; justify-content: space-between; padding: 0.8rem 2rem 1.8rem 2rem; background: white; border-top: 1px solid #eff3f8; border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;}
 .btn-v2 { font-weight: 600; padding: 0.7rem 1.8rem; border-radius: 40px; border: none; cursor: pointer; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; }
 .btn-v2-primary { background: #002147; color: white; }
 .btn-v2-primary:hover { background: #001a33; transform: translateY(-1px); }
 .btn-v2-secondary { background: #f1f5f9; color: #222222; }
 .btn-v2-secondary:hover { background: #e2e8f0; }
 /* Inline field errors */
 .field-inline-error-v2 { color: #dc3545; font-size: 0.78rem; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
 .is-invalid-field-v2 { border-color: #dc3545 !important; }
 /* Form logo */
 .form-logo img { height: 80px; }
 .header-middle { text-align: center; }


/* ── Inline validation errors ── */
.field-inline-error {
  color: #dc3545;
  font-size: 0.78rem;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.is-invalid-field {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}
/* ── OTP separator ── */
.otp-sep {
  font-weight: 700;
  color: #94a3b8;
  align-self: center;
  font-size: 1.1rem;
}
/* ── Upload area click cursor ── */
.upload-area { cursor: pointer; }
/* ── Final submit button ── */
.btn-final-submit {
  background: #002147;
  color: white;
  border: none;
  padding: 0.8rem 2.5rem;
  border-radius: 40px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}
.btn-final-submit:hover { background: #001a33; transform: translateY(-1px); }
.btn-final-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
/* ── Prev / Next buttons ── */
.btn-prev, .btn-next {
  font-weight: 600;
  padding: 0.7rem 1.8rem;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}
.btn-next { background: #002147; color: white; }
.btn-next:hover { background: #001a33; transform: translateY(-1px); }
.btn-prev { background: #f1f5f9; color: #222222; }
.btn-prev:hover { background: #e2e8f0; }
.btn-prev:disabled { opacity: 0.4; cursor: not-allowed; }
/* ── Radio chip selected state (JS-toggled) ── */
label.radio-chip.selected,
label.doc-chip.selected {
  background: #002147;
  border-color: #002147;
  color: white;
}
/* ── Required asterisk ── */
.required { color: #dc3545; }
/* ── Reason letter badge ── */
.reason-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #d4af3720;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.75rem;
  color: #a67c1e;
  flex-shrink: 0;
}
.reason-note { font-size: 0.75rem; color: #94a3b8; font-style: italic; margin-left: 6px; }
/* ── Upload hint text ── */
.upload-hint { font-size: 0.72rem; color: #94a3b8; margin: 0; }
.upload-icon { font-size: 1.5rem; color: #d4af37; }
.file-name-display { font-size: 0.75rem; color: #2b825b; font-weight: 500; }

/* ── Aliases so form-field-group / form-field-input / form-field-label work ── */
.form-field-group { margin-bottom: 0; }
.form-field-group label,
.form-field-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 0.35rem;
  color: #222222;
  text-transform: capitalize;
  letter-spacing: 0.3px;
}
.form-field-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid #e9edf2;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  background: white;
  outline: none;
  color: #334155;
}
.form-field-input:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}
.form-field-input::placeholder { color: #94a3b8; }
/* date inputs */
input[type="date"].form-field-input { color: #334155; }
/* select */
select.form-field-input { cursor: pointer; }
/* radio-chip-group layout */
.radio-chip-group { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* ── Base .btn styles (used by nav buttons and final submit) ── */
.btn {
  font-weight: 600;
  padding: 0.7rem 1.8rem;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
}
.btn-primary {
  background: #002147;
  color: white !important;
}
.btn-primary:hover {
  background: #001a33;
  transform: translateY(-1px);
  color: white !important;
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.btn-secondary {
  background: #f1f5f9;
  color: #222222 !important;
}
.btn-secondary:hover {
  background: #e2e8f0;
}
.btn-secondary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* ── Step validation error banner ── */
.step-validation-banner {
  background: #fee2e2;
  border-left: 4px solid #ef4444;
  color: #991b1b;
  padding: 0.8rem 1.2rem;
  border-radius: 12px;
  margin: 0 2rem 1rem 2rem;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Inline validation banner beside Continue button ── */
#stepValidationBannerWrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.step-validation-banner {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 420px;
  text-align: center;
}

/* ── Flatpickr overrides ── */
.flatpickr-alt-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid #e9edf2;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  background: white;
  outline: none;
  color: #334155;
  cursor: pointer;
}
.flatpickr-alt-input:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}
.flatpickr-alt-input::placeholder { color: #94a3b8; }

/* Calendar popup */
.flatpickr-calendar {
  z-index: 99999 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
  border: 1px solid #e2e8f0 !important;
  font-family: 'Inter', sans-serif;
  background: #ffffff !important;
  overflow: visible !important;
  padding: 0 !important;
}
.flatpickr-calendar.open { display: block; max-width: 284px;}

/* Header bar */
.flatpickr-months {
  background: #002147;
  border-radius: 14px 14px 0 0;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0;
}
.flatpickr-month {
  flex: 1;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  fill: white;
  overflow: visible;
}
.flatpickr-current-month {
  position: static;
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  color: white;
}
/* Month select — keep native, style it white */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: white;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 2px;
  -webkit-appearance: none;
  appearance: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: #002147;
  color: white;
}
/* Year input — white bg, dark text, gold border so it's clearly visible */
.flatpickr-current-month .numInputWrapper {
  width: 70px;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.flatpickr-current-month .numInputWrapper input.numInput {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #002147;
  background: #ffffff;
  border-radius: 6px;
  outline: none;
  text-align: center;
  width: 100%;
  padding: 3px 22px 3px 6px;
  -moz-appearance: textfield;
  height: 31px;
}
.flatpickr-current-month .numInputWrapper input.numInput::-webkit-inner-spin-button,
.flatpickr-current-month .numInputWrapper input.numInput::-webkit-outer-spin-button { -webkit-appearance: none; }
.flatpickr-current-month .numInputWrapper input.numInput:focus {
  /* border-color: #d4af37;
  box-shadow: 0 0 0 2px rgba(212,175,55,0.3); */
}
/* Year up/down arrows */
.flatpickr-current-month .numInputWrapper span {
  position: absolute;
  right: 2px;
  width: 16px;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  padding: 0;
  opacity: 1;
}
.flatpickr-current-month .numInputWrapper span.arrowUp  { top: 1px; }
.flatpickr-current-month .numInputWrapper span.arrowDown { bottom: 1px; }
.flatpickr-current-month .numInputWrapper span:hover { background: rgba(212,175,55,0.2); border-radius: 3px; }
.flatpickr-current-month .numInputWrapper span::after {
  content: '';
  display: block;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.flatpickr-current-month .numInputWrapper span.arrowUp::after  { border-bottom: 5px solid #002147; }
.flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top: 5px solid #002147; }

/* Prev / next arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
  height: 50px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center;
  fill: rgba(255,255,255,0.8) !important;
  color: rgba(255,255,255,0.8) !important;
  top: 0 !important;
}
.flatpickr-prev-month:hover, .flatpickr-next-month:hover { background: rgba(255,255,255,0.1); }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: #d4af37 !important; }

/* Weekday row */
.flatpickr-weekdays { background: #f0f4f8; padding: 0; height: 38px;}
.flatpickr-weekdaycontainer { display: flex; justify-content: space-around; width: 100%; }
span.flatpickr-weekday {
  color: #002147;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex: 1;
  text-align: center;
}

/* Days grid */
.flatpickr-days { background: #ffffff; width: 100% !important; border-radius: 0 0 14px 14px; }
.dayContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 6px 8px 10px;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}
.flatpickr-day {
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #334155;
  background: transparent;
  border: 1.5px solid transparent;
  height: 38px;
  line-height: 35px;
  flex: 0 0 calc(100% / 7);
  max-width: calc(100% / 7);
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.flatpickr-day:hover:not(.disabled):not(.selected):not(.prevMonthDay):not(.nextMonthDay) {
  background: #fef9e6;
  border-color: #d4af37;
  color: #002147;
}
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: #002147 !important;
  border-color: #002147 !important;
  color: white !important;
  font-weight: 700;
}
.flatpickr-day.today:not(.disabled) {
  border-color: #d4af37;
  color: #002147;
  font-weight: 700;
  background: #fef9e6;
}
.flatpickr-day.today:not(.disabled):hover { background: #fbedb8; }
/* Disabled */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover,
.flatpickr-day.today.disabled,
.flatpickr-day.today.disabled:hover {
  color: #c9d4dc !important;
  background: transparent !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
  font-weight: 400;
  position: relative;
}
.flatpickr-day.disabled::after,
.flatpickr-day.today.disabled::after {
  content: '';
  position: absolute;
  left: 20%; right: 20%;
  top: 50%;
  height: 1px;
  background: #cfd8dc;
  transform: translateY(-50%);
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #d1d9e0; font-weight: 400; }
.flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { background: transparent; border-color: transparent; cursor: default; }

/* Invalid alt input */
.flatpickr-alt-input.is-invalid-field {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220,53,69,0.1) !important;
}

/* Extra specificity to beat flatpickr.css defaults on disabled days */
.flatpickr-calendar .flatpickr-day.disabled,
.flatpickr-calendar .flatpickr-day.disabled:hover,
.flatpickr-calendar .flatpickr-day.today.disabled,
.flatpickr-calendar .flatpickr-day.today.disabled:hover {
  color: #c8d6df !important;
  background: #f7f9fb !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

/* ── Document section shared fields ── */
.doc-fields-always { margin-top: 0.5rem; }
/* Ensure field-inline-error inside grid-4 doesn't break column alignment */
.grid-4 .form-field { display: flex; flex-direction: column; }
.grid-4 .form-field .field-inline-error { margin-top: 4px; font-size: 0.75rem; }
/* Doc attachment block spacing */
.document-upload-cus.mt-10 { margin-top: 10px; }

/* ── Confirm Submission Modal ── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,0.55);
  align-items: center;
  justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-container {
  background: white;
  border-radius: 24px;
  max-width: 520px;
  width: 92%;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  transform: scale(0.95);
  transition: transform 0.25s ease;
  position: relative;
}
.modal-overlay.active .modal-container { transform: scale(1); }
.modal-header {
  background: #002147;
  color: white;
  padding: 1.2rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-header i { font-size: 1.5rem; color: #d4af37; }
.modal-header h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.modal-body { padding: 1.5rem; text-align: center; }
.modal-body p { color: #334155; font-size: 0.9rem; margin-bottom: 1rem; }
.modal-body .info-icon { font-size: 3rem; color: #d4af37; margin-bottom: 0.8rem; }
.preview-content {
  max-height: 320px;
  overflow-y: auto;
  text-align: left;
  background: #f8fafc;
  border-radius: 14px;
  padding: 0.8rem 1rem;
  margin-top: 0.5rem;
  border: 1px solid #e2e8f0;
}
.preview-item {
  padding: 0.55rem 0;
  border-bottom: 1px solid #e9edf2;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.preview-item:last-child { border-bottom: none; }
.preview-label { font-weight: 700; color: #002147; min-width: 130px; font-size: 0.78rem; flex-shrink: 0; }
.preview-value { flex: 1; color: #334155; font-size: 0.82rem; word-break: break-word; }
.modal-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: 0 1.5rem 1.5rem;
}
.modal-btn {
  padding: 0.7rem 1.8rem;
  border-radius: 40px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}
.modal-btn-preview { background: #f1f5f9; color: #222222; }
.modal-btn-preview:hover { background: #e2e8f0; }
.modal-btn-submit { background: #002147; color: white; }
.modal-btn-submit:hover { background: #001a33; }
.modal-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.close-modal {
  position: absolute;
  top: 0.85rem;
  right: 1.1rem;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  z-index: 1;
}
.close-modal:hover { color: #d4af37; }

/* ── Step 4 Application Preview ── */
#applicationPreviewContainer table tr:nth-child(even) td {
  background: #f8fafc;
}
#applicationPreviewContainer table tr:hover td {
  background: #fef9e6;
}
#applicationPreviewContainer table td {
  border-bottom: 1px solid #f0f2f5;
  transition: background 0.15s;
}

/* ── Step validation banner — inline inside panel (styled like caution box) ── */
.step-validation-banner-inline {
  background: #fee2e2;
  border-left: 4px solid #ef4444;
  /* color: #991b1b; */
  padding: 0.9rem 1.2rem;
  border-radius: 14px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.step-validation-banner-inline i { color: #ef4444; font-size: 1rem; flex-shrink: 0; }

/* ── Optional field label ── */
.field-optional {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 400;
  margin-left: 6px;
  font-style: italic;
}


.flatpickr-weekdaycontainer{padding: 0rem 0.875rem 0px;}
.dob-cus{position: relative;}
.dob-cus i{position: absolute; top: 14px; right: 15px; font-size: 20px; color: #939495; z-index: 0;}

/* Target the specific class found in your HTML */
.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover {
  color: #c8d6df !important;
  background: #f7f9fb !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

.section-tl{display: flex; align-items: center;}
.section-tl i{margin-right: 10px;}


@media (max-width: 1500px) { 
  .form-logo img { height: 60px; margin-right: 20px; } 
  .main-title { font-size: 1.2rem; } 
}
@media (max-width: 1199px) {
  .info-section{flex: 0 0 60%;}
  .app-type-wrapper{flex: 0 0 calc(40% - 1rem);}
  .wizard{max-width: 95%;}
}
@media (max-width: 991px) { 
  .form-header .header-top { flex-direction: column; align-items: center;} 
  .form-header .header-top .dept-info { text-align: center; margin-top: 20px; line-height: 2; } 
  .form-header .header-top .omb { text-align: center; } 
  .header-bottom { flex-direction: column; } 
  .header-right{margin-top: 15px;}
  .app-type-wrapper{flex: 0 0 calc(45% - 1rem);}
  .info-section{flex: 0 0 55%;}
  .grid-4{grid-template-columns: repeat(2, 1fr);}
  .grid-3{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 767px) { 
  .header-left { flex-direction: column; text-align: center; width: 100%; } 
  .header-right { text-align: center; margin: 15px auto 0; } 
  .form-header .header-top .dept-info { text-align: center; } 
  .form-header .header-top .omb { text-align: center; } 
  .wizard{width: 100%;}
}
@media (max-width: 750px) { 
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 0.8rem; } 
  .otp-row { flex-direction: column; } 
}
@media (max-width: 574px) { 
  .step-label{max-width: 55px; text-align: center;}
  .section-title{flex-direction: column; align-items: baseline;}
  .section-title .badge{margin-left: inherit;}

}