/* ==========================================================
MERITZA CLASSES
BOOK SESSION
========================================================== */

:root {
--primary: #0A1946;
--primary-light: #16307d;
--secondary: #D4AF37;
--secondary-light: #f5d97a;
--success: #198754;
--danger: #dc3545;
--white: #ffffff;
--text-dark: #212529;
--text-light: #6c757d;
--border: #e7ebf2;
--background: #f6f8fc;
--shadow-sm: 0 8px 20px rgba(10,25,70,.06);
--shadow-md: 0 18px 40px rgba(10,25,70,.10);
--shadow-lg: 0 28px 60px rgba(10,25,70,.16);
--radius-sm: 10px;
--radius: 18px;
--radius-lg: 28px;
--transition: all .30s ease;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
font-family:"Inter",sans-serif;
background:var(--background);
color:var(--text-dark);
line-height:1.7;
}

.book-counselling{
    padding:0 0 70px;
    position:relative;
}
.booking-card{
    margin-top:30px;
}
.book-counselling .container{ position:relative; z-index:2; }

.back-home{
display:inline-flex; align-items:center; gap:10px;
margin-bottom:18px; color:var(--primary); font-weight:600;
text-decoration:none; transition:var(--transition);
}
.back-home i{ font-size:18px; }
.back-home:hover{ color:var(--secondary); }

.booking-card{
background:var(--white);
border-radius:18px;
border:1px solid rgba(10,25,70,.08);
box-shadow:0 16px 36px rgba(10,25,70,.08);
overflow:hidden;
transition:var(--transition);
max-width:860px;
margin:0 auto;
animation:fadeUp .7s ease both;
}
.booking-card:hover{ box-shadow:var(--shadow-lg); }

.booking-card-header{
background:linear-gradient(135deg,var(--primary),var(--primary-light));
color:var(--white);
text-align:center;
padding:26px 26px 24px;
}
.booking-card-header h1{ margin:0; font-size:1.6rem; font-weight:700; line-height:1.3; }
.booking-card-header p{ margin:0; opacity:.9; line-height:1.45; font-size:.88rem; }
.text-gold{ color:var(--secondary); }

.booking-card-body{ padding:28px; }

#formAlert{ border-radius:var(--radius-sm); margin-bottom:25px; }

.form-label{ font-size:.84rem; margin-bottom:6px; color:var(--primary); display:block; }
.form-label .text-danger{ color:var(--danger)!important; }
.form-label .text-muted{ font-weight:400; font-size:.78rem; }

.form-control,
.form-select{
height:42px;
border:1px solid var(--border);
border-radius:14px;
background:#fff;
padding:8px 14px;
font-size:.97rem;
transition:var(--transition);
box-shadow:none;
width:100%;
}
.form-control:focus,
.form-select:focus{
border-color:var(--primary);
box-shadow:0 0 0 .20rem rgba(10,25,70,.10);
outline:none;
}
.form-control::placeholder{ color:#9aa3af; }

textarea.form-control{
height:auto; min-height:130px; resize:vertical; padding-top:14px;
}

.subject-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:14px;
}
.subject-option{
display:flex; align-items:center; gap:10px;
padding:10px 14px;
background:#fff;
border:1px solid var(--border);
border-radius:14px;
cursor:pointer;
transition:var(--transition);
font-size:.88rem;
font-weight:500;
}
.subject-option:hover{ border-color:var(--primary); background:#f7f9ff; }
.subject-option input{ width:18px; height:18px; }

.btn-primary{
background:linear-gradient(135deg,var(--primary),var(--primary-light));
border:none;
border-radius:14px;
height:48px;
font-weight:700;
font-size:1rem;
transition:var(--transition);
color:#fff;
}
.btn-primary:hover{
transform:translateY(-2px);
background:linear-gradient(135deg,var(--primary-light),var(--primary));
box-shadow:0 12px 26px rgba(10,25,70,.20);
}
.btn-primary:focus{ box-shadow:0 0 0 .25rem rgba(10,25,70,.18); }
.btn-primary:disabled{ opacity:.75; cursor:not-allowed; }

#submitSpinner{ width:1rem; height:1rem; vertical-align:middle; }

.form-control.is-invalid,
.form-select.is-invalid{ border-color:var(--danger); box-shadow:none; }
.form-control.is-valid,
.form-select.is-valid{ border-color:var(--success); box-shadow:none; }
.invalid-feedback{ font-size:.88rem; margin-top:6px; }

.modal-content{ border:none; border-radius:24px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.20); }
.success-icon{
width:90px; height:90px; margin:0 auto 22px;
display:flex; align-items:center; justify-content:center;
border-radius:50%; background:rgba(25,135,84,.10);
}
.success-icon i{ color:var(--success); font-size:48px; }
.modal-body{ padding:36px; color:var(--text-dark); line-height:1.9; }

.page-loader{
position:fixed; inset:0;
background:rgba(255,255,255,.92);
display:flex; align-items:center; justify-content:center;
z-index:99999;
transition:opacity .35s ease, visibility .35s ease;
}
.page-loader.hidden{ opacity:0; visibility:hidden; }
.loader-circle{
width:64px; height:64px;
border:5px solid rgba(10,25,70,.12);
border-top-color:var(--secondary);
border-radius:50%;
animation:loaderSpin .9s linear infinite;
}

@keyframes loaderSpin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(30px);} to{ opacity:1; transform:translateY(0);} }

@media (max-width:991.98px){
.booking-card-header{ padding:34px 28px; }
.booking-card-body{ padding:32px; }
}

@media (max-width:767.98px){
.book-counselling{ padding:45px 0 70px; }
.booking-card{ border-radius:20px; }
.booking-card-header{ padding:28px 22px; }
.booking-card-header h1{ font-size:1.45rem; }
.booking-card-body{ padding:24px 20px; }
.form-control,
.form-select{ height:50px; font-size:.95rem; }
textarea.form-control{ min-height:120px; }
.btn-primary{ height:54px; font-size:.96rem; }
.modal-body{ padding:26px 22px; }
}

@media (max-width:575.98px){
.booking-card-header{ padding:24px 18px; }
.booking-card-body{ padding:20px 16px; }
}

::selection{ background:var(--secondary); color:var(--primary); }