/* ============================================================
   ROOT & RESET
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

:root {
  --sp: #1960a9;     /* school primary   — overridden by JS */
  --ss: #02a197;     /* school secondary — overridden by JS */
  --sa: #f9a825;     /* school accent    — overridden by JS */
  --bg:      #f0f4f9;
  --surface: #ffffff;
  --border:  #dde3ed;
  --text:    #1a2535;
  --muted:   #6b7d94;
  --shadow:  0 4px 20px rgba(0,0,0,.10);
  --shadow-md: 0 8px 32px rgba(0,0,0,.14);
  --radius:  18px;
  --rsm:     12px;
  --rxs:     8px;
  --t:       .22s ease;
}

html{scroll-behavior:smooth;}
body{
  font-family:'Cairo',Tahoma,Arial,sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100vh;direction:rtl;
}
a{text-decoration:none;}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(5,15,35,.85);
  backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  animation:fadeIn .3s ease;
}
.modal-overlay.hidden{display:none;}

.modal-card{
  background:#fff;border-radius:24px;
  box-shadow:0 16px 56px rgba(0,0,0,.25);
  width:100%;max-width:520px;overflow:hidden;
  animation:slideUp .4s cubic-bezier(.175,.885,.32,1.15);
}

.modal-brand{
  padding:30px 24px 24px;text-align:center;position:relative;overflow:hidden;
}
.modal-brand::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/svg%3E");
}
.modal-logo-wrap{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:160px;height:80px;
  background:#ffffff;border-radius:16px;
  margin-bottom:14px;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.modal-logo-img{width:148px;height:68px;object-fit:contain;padding:4px 10px;}
.modal-brand h2{
  position:relative;
  font-size:clamp(16px,4.5vw,20px);font-weight:900;color:white;margin-bottom:5px;
}
.modal-brand p{position:relative;font-size:13px;color:rgba(255,255,255,.78);}

.modal-body{padding:22px 24px 4px;}
.modal-alert-title{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:900;color:var(--sp);
  margin-bottom:14px;padding-bottom:12px;
  border-bottom:2px dashed var(--border);
}
.modal-alert-title i{color:var(--ss);}

.modal-list{list-style:none;display:flex;flex-direction:column;gap:10px;}
.modal-list li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:clamp(12px,3.2vw,13px);font-weight:600;
  color:var(--text);line-height:1.65;
  padding:10px 12px;background:#f8fafd;
  border-radius:var(--rxs);border:1px solid var(--border);
}
.modal-list li i{color:var(--ss);flex-shrink:0;margin-top:3px;}

.modal-accept-btn{
  display:block;width:calc(100% - 48px);
  margin:20px 24px 24px;
  padding:15px;color:white;border:none;border-radius:var(--rsm);
  font-family:'Cairo',sans-serif;font-size:15px;font-weight:900;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
  transition:transform var(--t),box-shadow var(--t);
}
.modal-accept-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.3);}
.modal-accept-btn:active{transform:scale(.98);}

/* ============================================================
   HEADER
   ============================================================ */
.school-header{
  position:sticky;top:0;z-index:100;
  box-shadow:0 4px 24px rgba(0,0,0,.25);
}
.school-header-inner{
  max-width:1100px;margin:0 auto;
  padding:10px 20px;
  display:flex;align-items:center;gap:12px;
}

.back-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex-shrink:0;
  background:rgba(255,255,255,.15);
  border-radius:10px;color:white;font-size:15px;
  border:1px solid rgba(255,255,255,.25);
  transition:background var(--t);
}
.back-btn:hover{background:rgba(255,255,255,.28);}

.school-header-logo-box{
  width:140px;height:60px;flex-shrink:0;
  background:#fff;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 12px rgba(0,0,0,.2);
  overflow:hidden;border:1px solid rgba(255,255,255,.3);
}
.school-header-logo-img{
  width:128px;height:54px;object-fit:contain;padding:4px 8px;
}

.school-header-text{flex:1;}
.school-header-text h1{
  font-size:clamp(13px,3.5vw,18px);font-weight:900;
  color:white;line-height:1.25;
}
.school-header-text p{
  font-size:clamp(10px,2.5vw,12px);
  color:rgba(255,255,255,.72);margin-top:2px;
}

.header-links{display:flex;gap:8px;flex-shrink:0;}
.h-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:20px;
  font-family:'Cairo',sans-serif;font-size:12px;font-weight:700;
  white-space:nowrap;transition:transform var(--t),opacity var(--t);
}
.h-link:hover{transform:translateY(-1px);opacity:.9;}
.h-link-web{
  background:rgba(255,255,255,.18);color:white;
  border:1px solid rgba(255,255,255,.3);
}
.h-link-reg{color:white;box-shadow:0 3px 10px rgba(0,0,0,.2);}

@media(max-width:600px){
  .header-links{display:none;}
  .school-header-logo-box{width:100px;height:46px;}
  .school-header-logo-img{width:90px;height:40px;}
}
@media(max-width:380px){
  .school-header-logo-box{width:78px;height:38px;}
  .school-header-logo-img{width:70px;height:32px;}
}

/* ============================================================
   LAYOUT
   ============================================================ */
.school-main{
  max-width:1100px;margin:0 auto;
  padding:22px 16px 36px;
  display:flex;flex-direction:column;gap:20px;
}

/* ============================================================
   CARD
   ============================================================ */
.s-card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
}

.s-section-title{
  display:flex;align-items:center;gap:10px;
  padding:15px 22px;
  background:linear-gradient(135deg,#f0f4fb,#f8faff);
  border-bottom:1px solid var(--border);
  font-size:15px;font-weight:900;
}
.s-section-title i{font-size:17px;}

/* ============================================================
   NOTICE
   ============================================================ */
.s-notice{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 22px;
  font-size:clamp(11px,3vw,13px);font-weight:600;line-height:1.55;
}
.s-notice i{flex-shrink:0;margin-top:2px;}
.s-notice-info{background:#e8f7f8;border-bottom:1px solid #b2e8eb;color:#006064;}
.s-notice-info i{color:#02a197;}
.s-notice-warning{background:#fff8e1;border-bottom:1px solid #ffe082;color:#7a5c1a;}
.s-notice-warning i{color:#f9a825;}

/* ============================================================
   CALENDAR TOGGLE
   ============================================================ */
.cal-toggle-wrap{display:flex;gap:10px;padding:18px 22px 0;}
.cal-toggle-btn{
  flex:1;padding:11px 14px;
  border:2px solid var(--border);border-radius:var(--rsm);
  background:#f8fafc;color:var(--muted);
  font-family:'Cairo',sans-serif;font-size:clamp(12px,3vw,14px);font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
  transition:all var(--t);
}
.cal-toggle-btn:hover{border-color:var(--ss);color:var(--ss);}
.cal-toggle-btn.active{
  background:linear-gradient(135deg,var(--ss),var(--sp));
  color:white;border-color:transparent;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.cal-toggle-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ============================================================
   DATE DROPDOWNS
   ============================================================ */
.date-dropdowns{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:12px;padding:16px 22px 0;
}
.field-name{grid-column:1/-1;}
@media(min-width:600px){
  .date-dropdowns{grid-template-columns:1fr 1fr 1fr 2fr;}
  .field-name{grid-column:auto;}
}

.field-label{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:6px;}
.field-label i{margin-left:4px;color:var(--ss);}
.optional{font-weight:400;color:#b0bac9;}

.sel-input{
  width:100%;padding:11px 14px;
  border:2px solid var(--border);border-radius:var(--rsm);
  font-family:'Cairo',sans-serif;font-size:14px;color:var(--text);
  background:#fff;cursor:pointer;
  transition:border-color var(--t),box-shadow var(--t);
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7d94' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 12px center;
}
.sel-input:focus{outline:none;border-color:var(--ss);box-shadow:0 0 0 3px rgba(0,0,0,.08);}

/* ============================================================
   ACTIONS
   ============================================================ */
.form-actions{
  display:flex;gap:10px;flex-wrap:wrap;
  padding:18px 22px 22px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border:none;border-radius:var(--rsm);
  font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;
  cursor:pointer;transition:transform var(--t),box-shadow var(--t);
}
.btn:active{transform:scale(.97);}
.btn-primary{
  background:linear-gradient(135deg,var(--ss),var(--sp));
  color:white;box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.28);}
.btn-ghost{background:#f0f4f8;color:var(--sp);border:2px solid var(--border);}
.btn-ghost:hover{background:#e0e8f5;}
.btn-print{background:#f0f4f8;color:#455a64;border:2px solid var(--border);}
.btn-print:hover{background:#eceff1;}

@media(max-width:480px){
  .form-actions{flex-direction:column;}
  .form-actions .btn{width:100%;}
  .cal-toggle-wrap{flex-direction:column;}
}

/* ============================================================
   RESULT
   ============================================================ */
.result-box-wrap{margin:0 22px 22px;}

.s-result{
  border-radius:var(--rsm);padding:26px 20px;
  text-align:center;
  animation:popIn .38s cubic-bezier(.175,.885,.32,1.25);
}

.r-age-line{font-size:clamp(12px,3.5vw,14px);font-weight:700;color:var(--text);margin-bottom:8px;}
.r-age-badge{
  display:inline-block;background:rgba(255,255,255,.82);
  border-radius:var(--rsm);padding:6px 24px;
  font-size:clamp(17px,5vw,24px);font-weight:900;color:#1a2535;
  margin-bottom:14px;box-shadow:0 2px 10px rgba(0,0,0,.1);
}
.r-grade-line{font-size:13px;color:var(--muted);font-weight:700;margin-bottom:8px;}

.r-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 24px;border-radius:30px;
  font-size:clamp(14px,4vw,18px);font-weight:900;
  color:white;margin-bottom:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
}
.r-badge{
  display:inline-block;background:rgba(255,255,255,.25);
  border-radius:10px;padding:2px 10px;font-size:12px;font-weight:700;
}

/* Two options (conditional) */
.r-two-options{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin:8px 0 14px;
}
.r-option{
  display:flex;align-items:center;gap:8px;
  padding:12px 20px;border-radius:var(--rsm);
  font-size:clamp(13px,3.5vw,15px);font-weight:700;
  box-shadow:0 3px 10px rgba(0,0,0,.15);
}
.r-opt1{background:#fb8c00;color:white;}
.r-opt1 i{color:rgba(255,255,255,.8);}
.r-opt2{background:#7e57c2;color:white;}
.r-opt2 i{color:rgba(255,255,255,.8);}

.r-birth{font-size:clamp(11px,3vw,12px);color:var(--muted);font-weight:600;margin-top:6px;}
.r-hijri{display:block;font-size:11px;color:var(--muted);margin-top:3px;}

.r-desc{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:14px;padding:12px 16px;
  background:rgba(255,255,255,.75);border-radius:var(--rxs);
  border-right:4px solid rgba(0,0,0,.15);
  font-size:clamp(11px,3vw,13px);font-weight:700;
  text-align:right;color:#3d4f6a;line-height:1.6;
}
.r-desc i{flex-shrink:0;margin-top:2px;color:var(--muted);}
.r-error{font-size:14px;font-weight:700;color:#c62828;margin-top:8px;}

/* ============================================================
   SCHOOL LINKS CARD
   ============================================================ */
.school-links-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:14px;padding:18px 22px 22px;
}
@media(max-width:440px){.school-links-grid{grid-template-columns:1fr;}}

.school-link-btn{
  display:flex;flex-direction:column;align-items:center;
  gap:6px;padding:20px 16px;
  border-radius:var(--rsm);color:white;
  text-align:center;
  box-shadow:var(--shadow);
  transition:transform var(--t),box-shadow var(--t);
}
.school-link-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.school-link-btn i{font-size:1.6rem;margin-bottom:4px;}
.school-link-btn span{font-size:16px;font-weight:900;}
.school-link-btn small{font-size:11px;opacity:.8;font-weight:600;}

/* ============================================================
   FOOTER
   ============================================================ */
.school-footer{padding:14px 20px;}
.school-footer-inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  gap:0;flex-wrap:nowrap;
}
.footer-school-logo{
  width:80px;height:36px;
  object-fit:contain;flex-shrink:0;
  background:white;border-radius:8px;
  padding:3px 7px;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.footer-divider{width:1px;height:24px;background:rgba(255,255,255,.22);margin:0 14px;flex-shrink:0;}
.footer-school-name{font-size:clamp(11px,2.5vw,13px);font-weight:900;color:white;white-space:nowrap;flex-shrink:0;}
.footer-dot{width:4px;height:4px;background:rgba(255,255,255,.5);border-radius:50%;margin:0 10px;flex-shrink:0;}
.footer-note{font-size:clamp(10px,2vw,11px);font-weight:600;color:rgba(255,255,255,.45);white-space:nowrap;}
@media(max-width:500px){.footer-note{display:none;}}
@media(max-width:380px){.footer-school-name{font-size:10px;}.footer-school-logo{width:60px;height:28px;}}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes slideUp{
  from{opacity:0;transform:translateY(36px) scale(.95);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes popIn{
  from{opacity:0;transform:scale(.86);}
  to{opacity:1;transform:scale(1);}
}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  .school-header,.school-footer,.links-card,
  .modal-overlay,.form-actions,.cal-toggle-wrap,
  .back-btn,.header-links{display:none!important;}
  .s-card{box-shadow:none;border:1px solid #ddd;}
  body{background:white;}
}