@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:#dcefe2;
--clr-green-dark:#4b9562;
--clr-red:#fff7f7;
--clr-red-dark:#A83232;
--clr-text-link:#021E3B;
--clr-primary-dark:#021E3B; 
--sidebar-hover:#10385f; 

--page-bg:#f5f7fb; 
--text-primary:#1f2d3d; 
--text-secondary:#6c7a89; 
--text-muted: #6b7b96;
--border-colour:#e2e8f0; 
--success-bg:#e5f4ea; 
--success-text:#287044; 
--warning-bg:#fff4df; 
--warning-text:#9a6510; 
--inactive-bg:#edf0f4; 
--inactive-text:#64707d;
--border-radius:15px;

}

body { margin:0; background:var(--page-bg); 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:80px; color:#fff; position:fixed; border:0; padding:40px; }
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; }


/* =========================================
   LetsEnroll - Enrollment Page
   ========================================= */

:root {
    --le-navy-dark: #172d5b;
    --le-navy-light: #31559a;
    --le-bg: #f5f8fc;
}


/* =========================================
   PAGE / HERO
   ========================================= */
.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; }
.school-logo { height: 52px; width: auto; }
.header-contact { color: var(--clr-primary); font-size: 0.95rem; font-weight: 500; }
.header-contact i { color: var(--clr-primary-dark); margin-right: 8px; }
.language-selector { border: 1px solid var(--bs-border-color); border-radius: 12px; padding: 9px 14px; background: #fff; color: var(--clr-primary-dark); font-weight: 500; }
.lang-selector-box { color:#425466; }
.language-globe { color:#425466; }
.lang-text-display { color:#425466 !important; }
.language-chevron { color:#425466 !important; }
.lang-dropdown option { color:#425466; }

/* 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; }
.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: 40px; 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 { 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(--le-navy-light);  box-shadow: 0 0 0 3px rgba(49, 85, 154, 0.12); }

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

.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-waiting { --bs-btn-color:#fff; --bs-btn-bg:#E2A900; --bs-btn-border-color:#E2A900; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#C99400; --bs-btn-hover-border-color:#C99400; }
.btn-resend { --bs-btn-color:#fff; --bs-btn-bg:#1D5BA2; --bs-btn-border-color:#1D5BA2; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#174B86; --bs-btn-hover-border-color:#174B86; }
.btn-withdraw { --bs-btn-color:#fff; --bs-btn-bg:#D97706; --bs-btn-border-color:#D97706; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#B45309; --bs-btn-hover-border-color:#B45309; }
.btn-reject { --bs-btn-color:#fff; --bs-btn-bg:#C73E3E; --bs-btn-border-color:#C73E3E; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#A83232; --bs-btn-hover-border-color:#A83232; }
.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-delete { --bs-btn-color:#fff; --bs-btn-bg:#8F2630; --bs-btn-border-color:#8F2630; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#701D25; --bs-btn-hover-border-color:#701D25; }
.btn-offer i, .btn-waiting i, .btn-resend i, .btn-withdraw i, .btn-reject i, .btn-decline i, .btn-delete i { color:#fff !important; }
.btn-action-outline { border:1px solid; background:transparent; font-weight:500; }
.btn-action-outline.offer { color:#198754; border-color:#198754; } 
.btn-action-outline.offer:hover { color:#fff; background:#198754; }
.btn-action-outline.waiting { color:#B17C00; border-color:#D9A300; }
.btn-action-outline.resend { color:#1D5BA2; border-color:#1D5BA2; }
.btn-action-outline.withdraw { color:#B45309; border-color:#D97706; } 
.btn-action-outline.reject {color:#B83232;  border-color:#C73E3E; } 
.btn-action-outline.delete { color:#8F2630; border-color:#8F2630; }


.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 { 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 { background:var(--clr-red) !important; }
.offer-accept.declined .offer-accept-icon { background:var(--clr-red-dark) !important; }

@media (max-width: 991.98px) {
    .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: 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; }
}

@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; }
}