@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200; 300; 400; 500; 600; 700&display=swap'); 

:root { 
    --clr-primary:#174d8f; 
    --clr-primary-dark:#021E3B; 
    --clr-accent:#F6C039;
    --clr-accent-dark:#D6990F;
    --clr-green:#e5f2e8;
    --clr-green-dark:#246b35; 
    --clr-red:#fff7f7;
    --clr-red-dark:#A83232;
    --clr-navy-light:#31559a;
    --clr-text-link:#021E3B;

    --text-primary:#1f2d3d; 
    --text-muted:#6b7b96;
    --border-colour:#e2e8f0; 
    --border-radius:15px;
}

body { margin:0; background:#f5f7fb; color:var(--text-primary); font-family:'Inter', "Segoe UI", Verdana, Geneva, Tahoma, sans-serif; font-size:15px; }
.app { display:flex;  }
.app, .sidebar { min-height:100vh;  }

/* Custom button definitions */
.btn { transition:background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow:0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; }

/* Blue (Primary) & Green (Secondary) */
.btn-blue { background-color:var(--clr-primary); color:#fff; border:none; } .btn-blue:hover { background-color:var(--clr-accent-dark); } .text-blue { color:var(--clr-primary) !important; }
.btn-gold { background-color:var(--clr-accent-dark); color:#fff; border:none; } .btn-gold:hover { background-color:var(--clr-accent); } .text-gold { color:var(--clr-accent) !important; }
.btn:hover { transform:translateY(1px); box-shadow:0 7px 18px rgba(31, 55, 109, 0.25); text-decoration:none; }

/* Generic styles */
a { color:var(--clr-text-link); text-decoration:none; }
a:hover { text-decoration:underline; }

.floating-alert { min-width:340px; max-width:480px; background:#fff8e1; color:#664d03; border-left:5px solid #ffc107 !important; animation:floatingAlertIn 0.3s ease-out; }
.floating-alert-icon { width:38px; height:38px; min-width:38px; border-radius:50%; background:#ffc107; color:#212529; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; }
.progress-bar { background-color:var(--clr-accent-dark); }
.error-reference { margin:20px 0; }
.error-reference .error-code { color:var(--bs-code-color); font-weight:600; }

.alert-danger .floating-alert { background:#fff5f5; color:#842029; border-left:5px solid #dc3545 !important; }
.alert-danger .floating-alert .floating-alert-icon { background:#dc3545; color:#fff; }
.alert-primary .floating-alert { background:#f2f8ff; color:#055160; border-left:5px solid #0d6efd !important; }
.alert-primary .floating-alert .floating-alert-icon { background:#0d6efd; color:#fff; }
@keyframes floatingAlertIn { from { opacity:0; transform:translateY(-15px);} to { opacity:1; transform:translateY(0); } }

.info-section { color:#fff; }
footer { height:fit-content; color:#fff; position:fixed; border:0; padding:20px 40px; text-align:center; }
footer a { color:#fff; }

.heading-section { padding:20px; margin:30px 0; border-radius:var(--border-radius); background-color:white !important; border:1px solid var(--border-colour); box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
.heading-section h3, .heading-section i { color:var(--clr-primary-dark); margin-bottom:20px; }

.control-yes_or_no input[type="radio"], .Form-Checkbox input[type="checkbox"] { margin:0 10px; }
.control-yes_or_no td { padding-right:20px; }
input[type="radio"], input[type="checkbox"] { margin-right:10px; }
.form-control, .form-select { min-height:38px; border-color:#d8e0e8; font-size:14px; display:block; width:100%; padding:.375rem .75rem; font-weight:400; line-height:1.5; color:var(--bs-body-color); -webkit-appearance:none; -moz-appearance:none; appearance:none; background-color:var(--bs-body-bg); background-clip:padding-box; border:var(--bs-border-width) solid var(--bs-border-color);  border-radius:var(--bs-border-radius); transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.form-control:focus, .form-select:focus { border-color:var(--clr-primary); box-shadow:0 0 0 .2rem rgba(23,77,143,.12);  }
.control-file_upload { display:block; }


.enrollment-content { min-height:calc(100vh - 168px); padding-top:65px; padding-bottom:65px; }
.enrollment-page { min-height:100vh; position:relative; overflow:hidden; background-image:url('../../Images/enrollment_hero_bg.png'); background-size:cover; background-position:center; background-attachment:fixed; }
/* Navy overlay over school photograph */
.enrollment-page::before { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient( 90deg, rgba(20, 42, 82, 0.90) 0%, rgba(20, 42, 82, 0.82) 38%, rgba(20, 42, 82, 0.70) 70%, rgba(20, 42, 82, 0.76) 100% ); }
/* Everything inside sits above the image */
.enrollment-page > * { position:relative; z-index:1; }

/* Header */
.enrollment-header { background:rgba(255, 255, 255, 0.97); border-bottom:1px solid rgba(20, 42, 82, 0.10); min-height:78px; }
.header-contact { color:var(--clr-primary); font-size:0.95rem; font-weight:500; }
.site-logo { height:55px; }
.header-contact i { color:var(--clr-primary-dark); margin-right:8px; }
.lang-selector-box {padding:9px 14px; border:1px solid var(--bs-border-color); border-radius:10px; color:var(--clr-primary-dark); font-weight:500; background:white; display:flex; align-items:center; gap:8px; position:relative; min-width:120px; cursor:pointer; transition:all 0.2s; }
.lang-selector-box:hover { border-color:#0056b3; background:#f8fbff; }
.lang-selector-box i.fa-globe { color:var(--clr-text-link); font-size:16px; }
.lang-dropdown { position:absolute; top:0; left:0; width:100%;  height:100%; opacity:0; cursor:pointer; z-index:2; }
.lang-text-display { font-size:14px; font-weight:500; color:var(--clr-primary-dark); flex-grow:1; }
.lang-selector-box .fa-chevron-down { font-size:10px; color:#a3acb9; }

.lang-selector-box { color:var(--clr-primary-dark); }
.language-globe { color:var(--clr-primary-dark); }
.lang-text-display { color:var(--clr-primary-dark) !important; }
.language-chevron { color:var(--clr-primary-dark) !important; }
.lang-dropdown option { color:var(--clr-primary-dark); }

/* Left-hand text */
.enrollment-intro { color:white; /*padding-right:40px;*/ }
.enrollment-eyebrow { color:var(--clr-accent); font-size:1rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:20px; }
.enrollment-title { color:#fff; font-size:clamp(3rem, 5vw, 4.5rem); line-height:1.02; font-weight:750; letter-spacing:-0.035em; margin-bottom:25px; max-width:500px; display:flex; align-items:flex-start; column-gap:10px; }
.enrollment-title .school-logo { max-height:150px; max-width:130px; width:auto; height:fit-content; }
.enrollment-title .school-40 { font-size:2rem; }
.enrollment-title .school-30 { font-size:3rem; }
.enrollment-title .school-20 { font-size:3.5rem; }
.enrollment-description { color:rgba(255, 255, 255, 0.92); font-size:1.15rem; line-height:1.65; max-width:520px; }
.application-dates { display:flex; align-items:center; gap:18px; margin-top:25px; padding:18px 24px; max-width:440px; background:rgba(255, 255, 255, 0.16); border:1px solid rgba(255, 255, 255, 0.18); border-radius:18px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.application-dates-icon { width:52px; height:52px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:50%; background:var(--clr-primary-dark); color:var(--clr-accent); font-size:1.25rem;}
.application-dates-label { color:rgba(255, 255, 255, 0.85); font-size:0.9rem; margin-bottom:3px; }
.application-dates-value, .application-dates-value a { color:white; font-size:1rem; font-weight:700; }

/* Form heading */
.enrollment-card { background:rgba(255, 255, 255, 0.98); border:0; border-radius:var(--border-radius); padding:42px; box-shadow:0 25px 70px rgba(10, 30, 65, 0.25); position:relative; }
.enrollment-form-header { display:flex; align-items:flex-start; gap:18px; /*margin-bottom:32px;*/ }
.enrollment-form-icon { width:60px; height:60px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:50%; background:var(--clr-accent); color:var(--clr-primary-dark); font-size:1.35rem; }
.enrollment-form-title { color:var(--clr-primary-dark); font-size:1.45rem; font-weight:700; margin:0 0 3px; }
.enrollment-form-subtitle { color:var(--text-muted); margin:0; }
.applicant-details { margin-top:30px; }

.form-label { font-size:0.92rem; font-weight:600; margin-bottom:8px; }
.form-control, .form-select { min-height:50px; padding:0.75rem 1rem; transition:border-color 0.2s ease, box-shadow 0.2s ease; }
.form-control::placeholder { color:#8b99ad; }
.form-control:focus, .enrollment-card .form-select:focus { border-color:var(--clr-navy-light);  box-shadow:0 0 0 3px rgba(49, 85, 154, 0.12); }

.heading-section a { color:var(--clr-primary-dark); text-decoration:underline; font-weight:600; }
.heading-section a:hover { text-decoration:underline; font-weight:700; }

.enrollment-input-group { position:relative; }
.enrollment-input-group > i { position:absolute; font-size:19px; left:17px; top:27px; transform:translateY(-50%); z-index:3; }
.enrollment-input-group .form-control { padding-left:45px; }
.enrollment-info { display:flex; align-items:flex-start; gap:12px; margin-top:8px; padding:15px 17px; background:#edf4ff; border-radius:12px; color:#41628f; font-size:0.9rem; line-height:1.5; }
.enrollment-info i { color:#3972c9; margin-top:2px; font-size:20px; }

.input-group-custom { position:relative; }
.input-group-custom .bi { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#6c757d; z-index:2; font-size:18px; }
.input-group-custom .form-control { padding-left:42px; }

.auto-save-status { position:fixed; right:25px; bottom:25px; display:inline-flex; align-items:center; gap:8px; padding:10px 18px; min-height:44px; box-sizing:border-box; border-radius:999px; font-size:15px; font-weight:600; line-height:1; opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease; background:#e5f2e8; color:#246b35;}
.auto-save-status.show { z-index:9999; opacity:1; transform:translateY(0); }
.auto-save-status.success { background:var(--clr-green-dark); color:var(--clr-green); }
.auto-save-status.saving { background:var(--clr-primary-dark); color:var(--clr-primary); }
.auto-save-status.error { background:var(--clr-red-dark); color:var(--clr-red); }

.required-fields-status { position:absolute; bottom:-5px; display:inline-flex; right:30%; align-items:center; gap:8px; padding:10px 18px; min-height:44px; box-sizing:border-box; border-radius:999px; font-size:15px; font-weight:600; line-height:1; opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
.required-fields-status.show { z-index:9999; opacity:1; transform:translateY(0); }
.required-fields-status.error { background:var(--clr-red); color:var(--clr-red-dark); border:1px solid var(--clr-red-dark); }

.btn-offer { --bs-btn-color:#fff; --bs-btn-bg:#198754; --bs-btn-border-color:#198754; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#157347; --bs-btn-hover-border-color:#146c43; }
.btn-decline { --bs-btn-color:#A83232; --bs-btn-bg:#fff; --bs-btn-border-color:#A83232; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#842828; --bs-btn-hover-border-color:#842828; }
.btn-offer i, .btn-decline i { color:#fff !important; }


.offer-summary { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); background:#eef5fa; border-radius:10px; padding:24px 28px; margin:25px 0; }
.offer-details { padding-right:30px; }

.offer-details .detail-row { display:flex; align-items:center; gap:16px; min-height:62px; }
.offer-details .detail-row + .detail-row { margin-top:4px; }
.offer-details .detail-icon { width:30px; flex:0 0 30px; display:flex; justify-content:center; }
.offer-details .detail-icon i { font-size:20px; }
.offer-details .detail-row span { display:block; color:#7184a2; font-size:14px; margin-bottom:2px; }
.offer-details .detail-row .detail-value { display:block; color:var(--clr-primary-dark) !important; font-size:16px; font-weight:650; }

.offer-message { border-left:1px solid #c4d5e5; padding-left:30px; display:flex; flex-direction:column; justify-content:center; }
.status-badge { display:inline-flex; align-items:center; align-self:flex-start; gap:8px; color:var(--clr-green-dark); background:var(--clr-green); padding:7px 13px; border-radius:999px; font-size:14px; font-weight:700; margin-bottom:14px; }

.expired { color:var(--clr-red-dark) !important; background:var(--clr-red) !important;}

.status-badge.expired i { background-color:var(--clr-red-dark) !important; color:var(--clr-red); padding:7px 9px; border-radius:15px; font-size:10px; }

.status-check { width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; color:#ffffff; background:var(--clr-green-dark); border-radius:50%; font-size:13px; font-weight:800; }
.expired .status-check { background:var(--clr-red-dark); }
.offer-message p { color:#30435d; font-size:15px; line-height:1.55; margin:0 0 8px; }
.offer-message p:last-child { margin-bottom:0; }

.offer-summary.expired .offer-message { border-color:var(--clr-red-dark) !important }

.offer-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:30px; }
.offer-footer .deadline { display:flex; align-items:center; gap:14px; min-width:350px; }
.offer-footer .deadline-icon { flex:0 0 20px; }
.offer-footer .deadline-icon i { font-size:20px; }
.offer-footer .deadline strong { display:block; color:var(--clr-primary-dark); font-size:14px;font-weight:700; margin-bottom:2px; }
.offer-footer .deadline span { display:block; color:var(--text-muted); font-size:13px; }
.offer-actions { display:flex; gap:14px; flex-shrink:0; margin:0 auto; }

.offer-actions .btn { min-width:185px; padding:13px 20px; border-radius:9px; font-size:15px; font-weight:650; transition:transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
.offer-actions .btn span { margin-right:7px; font-size:17px; }

.offer-accept { display:grid; background:var(--clr-green); border-radius:10px; padding:24px 28px; margin:25px 0; }
.offer-accept-header { display:flex; align-items:flex-start; gap:18px; /*margin-bottom:32px;*/ }
.offer-accept-header h2 { margin-bottom:20px;}
.offer-accept-icon {  width:60px; height:60px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:50%; background:var(--clr-green-dark); color:#fff; font-size:1.35rem; }
/*.offer-accept-icon .declined, .offer-accept-icon .withdrawn { background:var(--clr-red-dark); color:#fff; font-size:1.35rem; }*/
.offer-accept-title { color:var(--clr-primary-dark); font-size:1.45rem; font-weight:700; margin:0 0 3px; }

.offer-accept.declined, .offer-accept.declineplace, .offer-accept.withdrawn { background:var(--clr-red) !important; }
.offer-accept.declined .offer-accept-icon, .offer-accept.declineplace .offer-accept-icon, .offer-accept.withdrawn .offer-accept-icon { background:var(--clr-red-dark) !important; }

.offer-accept.waitinglist { background:#FFF8E7 !important; }
.offer-accept.waitinglist .offer-accept-icon { background:var(--clr-accent-dark) !important; }

@media (max-width:1199px) {
    .enrollment-title .school-logo { max-width:110px; }
    .enrollment-title .school-40 { font-size:1.5rem; }
    .enrollment-title .school-30 { font-size:2.5rem; }
    .enrollment-title .school-20 { font-size:3rem; }
}

@media (max-width:991px) {
    .enrollment-page { background-attachment:scroll; }
    .enrollment-content { padding-top:45px; padding-bottom:45px; }
    .enrollment-intro { padding-right:0; margin-bottom:35px; }
    .enrollment-title { font-size:3.25rem; }
    .enrollment-card { padding:32px; }
}


@media (max-width:767px) {
    .offer-summary { grid-template-columns:1fr; padding:15px; }
    .offer-message { border-top:1px solid #c4d5e5; border-left:0; margin-top:30px; padding-top:30px; padding-left:0; }
}

@media (max-width:575.98px) {
    .enrollment-header { min-height:65px; }
    .enrollment-logo { height:42px; }
    .enrollment-content { padding-top:30px; padding-bottom:30px; }
    .enrollment-title { font-size:2.7rem; }
    .enrollment-description { font-size:1rem; }
    .application-dates { padding:15px; }
    .enrollment-card { padding:24px 20px; border-radius:20px; }
    .enrollment-form-header { gap:13px; }
    .enrollment-form-icon {  width:50px; height:50px; }
    .enrollment-form-title { font-size:1.2rem; }
}