/* Art direction: academic admissions portal -> clean institutional UI, warm red identity, balanced density */
:root {
  --primary: #de3939;
  --primary-dark: #b52c2c;
  --primary-light: #fdeeee;
  --text-dark: #2b2b2b;
  --muted: #7a7a7a;
  --border-radius: 14px;
  --shadow-soft: 0 8px 24px rgba(222, 57, 57, 0.08);
  --shadow-hover: 0 12px 32px rgba(222, 57, 57, 0.15);
  --transition: all 0.28s ease;
}
body { background: linear-gradient(160deg, #fff7f7 0%, #fef2f2 100%); font-family: 'Poppins', 'Segoe UI', sans-serif; color: var(--text-dark); }
.college-header { background: linear-gradient(120deg, var(--primary), var(--primary-dark)); color: #fff; padding: 24px 0; box-shadow: var(--shadow-soft); }
.college-header .logo { height: 64px; margin-right: 16px; }
.college-header h1 { font-size: 1.9rem; font-weight: 700; margin: 0; }
.college-header p { margin: 0; opacity: .95; font-size: .95rem; }
.wizard-card { background: #fff; border-radius: var(--border-radius); box-shadow: var(--shadow-soft); padding: 2.5rem; margin: 2rem auto; max-width: 980px; }
.progress-wrapper { margin-bottom: 2.5rem; }
.step-progress { display: flex; justify-content: space-between; position: relative; gap: 4px; }
.step-progress::before { content: ''; position: absolute; top: 20px; left: 5%; right: 5%; height: 4px; background: #f0d5d5; z-index: 0; border-radius: 4px; }
.step-progress .fill-bar { position: absolute; top: 20px; left: 5%; height: 4px; background: var(--primary); z-index: 1; border-radius: 4px; transition: width .45s ease; }
.step-item { position: relative; z-index: 2; text-align: center; flex: 1; }
.step-circle { width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 3px solid #f0d5d5; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-weight: 600; color: #bbb; transition: var(--transition); }
.step-item.active .step-circle { border-color: var(--primary); background: var(--primary); color: #fff; transform: scale(1.08); }
.step-item.completed .step-circle { border-color: var(--primary); background: #fff; color: var(--primary); }
.step-label { font-size: .78rem; color: #888; font-weight: 500; }
.step-item.active .step-label { color: var(--primary); font-weight: 700; }
.form-step { display: none; animation: fadeIn .35s ease; }
.form-step.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px);} to {opacity:1; transform:translateY(0);} }
.step-title { color: var(--primary-dark); font-weight: 700; margin-bottom: 1.5rem; border-left: 5px solid var(--primary); padding-left: 12px; }
.form-floating > label { color: #8a8a8a; padding: .9rem 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transform-origin: left top; }
.form-floating > .form-control, .form-floating > .form-select { height: calc(3.65rem + 2px); min-height: calc(3.65rem + 2px); padding: 1.65rem 1rem .6rem; border-radius: 10px; border: 1.5px solid #e7dede; }
.form-floating > textarea.form-control { height: auto !important; min-height: 110px; padding-top: 1.8rem; }
.form-control, .form-select { transition: var(--transition); }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(222,57,57,.12); }
.form-control.is-valid, .form-select.is-valid { border-color: #17a05d; background-image: none; }
.form-control.is-invalid, .form-select.is-invalid { border-color: #dc3545; background-image: none; }
.invalid-feedback, .valid-feedback { display: block; font-size: .8rem; margin-top: .25rem; }
.select2-container { width: 100% !important; }
.select2-container .select2-selection--single { height: 58px !important; border-radius: 10px !important; border: 1.5px solid #e7dede !important; display: flex !important; align-items: flex-end !important; padding: 20px 36px 6px 10px !important; background: #fff !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4 !important; padding-left: 0 !important; color: var(--text-dark) !important; font-size: 1rem; width: 100%; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 58px !important; right: 8px !important; }
.select2-floating { position: relative; }
.select2-floating > label { position: absolute; left: 12px; top: 7px; font-size: .78rem; color: #8a8a8a; z-index: 4; background: #fff; padding: 0 4px; max-width: calc(100% - 40px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-primary-custom { background: var(--primary); border: none; color: #fff; padding: .75rem 2rem; border-radius: 30px; font-weight: 600; transition: var(--transition); box-shadow: 0 4px 12px rgba(222,57,57,.22); }
.btn-primary-custom:hover { background: var(--primary-dark); color: #fff; transform: translateY(-2px); }
.btn-outline-custom { border: 2px solid var(--primary); color: var(--primary); background: transparent; padding: .7rem 2rem; border-radius: 30px; font-weight: 600; transition: var(--transition); }
.btn-outline-custom:hover { background: var(--primary-light); color: var(--primary-dark); }
.photo-dropzone { border: 2.5px dashed #f0c0c0; border-radius: var(--border-radius); padding: 2rem; text-align: center; transition: var(--transition); background: var(--primary-light); cursor: pointer; }
.photo-dropzone.dragover { border-color: var(--primary); background: #fbe0e0; }
.photo-preview-wrap { position: relative; width: 160px; height: 190px; margin: 0 auto; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-soft); border: 3px solid #fff; }
.photo-preview-wrap img { width: 100%; height: 100%; object-fit: cover; }
.photo-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.dynamic-row { background: #fffafa; border: 1px solid #f4dede; border-radius: 12px; padding: 1rem; margin-bottom: 1rem; position: relative; }
.remove-row-btn { position: absolute; top: 10px; right: 10px; color: var(--primary); cursor: pointer; font-size: 1rem; background: none; border: none; z-index: 3; }
.add-row-btn { border: 2px dashed var(--primary); color: var(--primary); background: var(--primary-light); border-radius: 10px; padding: .7rem 1.2rem; font-weight: 600; width: 100%; }
.review-card { background: #fffafa; border-radius: 12px; border: 1px solid #f4dede; padding: 1.25rem; margin-bottom: 1rem; }
.review-card h6 { color: var(--primary-dark); font-weight: 700; border-bottom: 2px solid var(--primary-light); padding-bottom: 8px; margin-bottom: 12px; }
.review-item { font-size: .92rem; margin-bottom: 6px; word-break: break-word; }
.achievement-grid { display: grid; grid-template-columns: 2.2fr 1.3fr 1fr 38px; gap: 12px; align-items: start; }
.achievement-grid .trash-col { display: flex; align-items: center; justify-content: center; padding-top: 10px; }
.qualification-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 12px; }
.qualification-grid .col-span-3 { grid-column: span 3; }
.qualification-grid .col-span-4 { grid-column: span 4; }
.upload-progress { height: 8px; border-radius: 8px; overflow: hidden; margin-top: 8px; display: none; }
.application-chip { background: #fff; border: 1px solid rgba(255,255,255,.35); color: #fff; padding: .45rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 600; }
@media (max-width: 991px) {
  .achievement-grid { grid-template-columns: 1fr 1fr; }
  .achievement-grid .trash-col { justify-content: flex-end; padding-top: 0; }
}
@media (max-width: 768px) {
  .wizard-card { padding: 1.15rem; margin: 1rem; }
  .step-label { display: none; }
  .college-header h1 { font-size: 1.2rem; }
  .college-header .logo { height: 46px; }
  .achievement-grid, .qualification-grid { grid-template-columns: 1fr !important; }
  .qualification-grid .col-span-3, .qualification-grid .col-span-4 { grid-column: span 1; }
}
@media print { body * { visibility: hidden; } .print-area, .print-area * { visibility: visible; } .print-area { position: absolute; left: 0; top: 0; width: 100%; } .no-print { display: none !important; } }

.application-chip { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34); color: #ffffff !important; }
.application-chip span { color: #ffffff !important; }
.swal2-popup .review-card { text-align: left; }
.swal2-html-container { max-height: 70vh; overflow: auto; }