:root{--navy:#0b1f3a;--blue:#1666d9;--gold:#d6a94a;--ink:#122033;--muted:#667085;--bg:#f6f8fc;--white:#fff;--border:#e9edf5}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{text-decoration:none;color:inherit}.container{width:min(1120px,92%);margin:auto}
header{position:sticky;top:0;z-index:20;background:rgba(11,31,58,.96);backdrop-filter:blur(10px);color:#fff}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between}.logo{font-weight:800;font-size:24px;letter-spacing:.5px}.logo span{color:var(--gold)}
nav{display:flex;gap:20px;font-size:15px;align-items:center}nav a{opacity:.9;transition:.2s}nav a:hover,nav a.active{color:var(--gold);opacity:1}
.hero{background:linear-gradient(135deg,#071a33 0%,#0d3564 65%,#155fc5 100%);color:#fff;padding:90px 0 80px;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:520px;height:520px;border:1px solid #ffffff20;border-radius:50%;right:-180px;top:-170px;box-shadow:0 0 0 70px #ffffff08,0 0 0 140px #ffffff05}
.hero h1{font-size:clamp(32px,4.5vw,56px);line-height:1.2;margin:0 0 22px;max-width:900px}.hero h1 span{color:var(--gold);display:block}
.hero p{font-size:18px;max-width:680px;color:#dce8f7}.buttons{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}.btn{padding:12px 24px;border-radius:8px;font-weight:700;cursor:pointer;border:none;display:inline-flex;align-items:center;justify-content:center;transition:.2s}.primary{background:var(--gold);color:#15243a}.primary:hover{background:#c4973b}.secondary{border:1px solid #ffffff55;color:#fff;background:transparent}.secondary:hover{background:#ffffff1a}
.btn-whatsapp{background:#25D366;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.2s}.btn-whatsapp:hover{background:#20ba5a}
.section{padding:70px 0}.eyebrow{color:var(--blue);font-weight:800;text-transform:uppercase;letter-spacing:1px;font-size:13px}.section h2{font-size:34px;margin:8px 0 12px}.lead{color:var(--muted);max-width:700px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px}.card{background:#fff;padding:28px;border-radius:14px;box-shadow:0 8px 30px #1020400d;border:1px solid var(--border)}.icon{width:44px;height:44px;border-radius:10px;background:#eaf2ff;color:var(--blue);display:grid;place-items:center;font-weight:900;font-size:18px}.card h3{margin:18px 0 8px}.card p{color:var(--muted);margin:0}

/* Unified Calculator Box Styling */
.unified-calc-box{background:#fff;border-radius:16px;padding:32px;box-shadow:0 10px 40px #1020400f;border:1px solid var(--border);margin-top:30px}
.master-salary-section{background:var(--bg);padding:20px;border-radius:12px;border:1px solid #cbd5e1;margin-bottom:25px}
.master-inputs-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:15px}
@media(max-width:800px){.master-inputs-grid{grid-template-columns:1fr}}

.form-group{margin-bottom:0}.form-group label{display:block;font-weight:700;margin-bottom:6px;font-size:14px;color:var(--navy)}
.form-control{width:100%;padding:12px 14px;border:1px solid #cbd5e1;border-radius:8px;font-size:15px;outline:none;transition:.2s}.form-control:focus{border-color:var(--blue);box-shadow:0 0 0 3px #1666d920}

/* Split Results Inside One Box */
.results-split-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:900px){.results-split-grid{grid-template-columns:1fr}}

.sub-res-column{background:var(--bg);border-radius:12px;padding:20px;border:1px solid #e2e8f0}
.sub-res-column h3{margin-top:0;color:var(--navy);font-size:18px;border-bottom:2px solid #cbd5e1;padding-bottom:10px;margin-bottom:15px}

.res-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #cbd5e1;font-size:14px}.res-row:last-child{border-bottom:none}.res-row.total{font-weight:800;font-size:15px;color:var(--blue);border-top:2px solid var(--blue);border-bottom:none;margin-top:8px;padding-top:10px}
.res-row.family{background:#eef2ff;padding:8px;border-radius:6px;border-bottom:1px solid #c7d2fe}.res-row.family span,.res-row.family b{color:var(--blue)}.res-row.family span{font-weight:bold}
.res-row.total.green{color:#16a34a;border-top-color:#16a34a}

.grand-totals{margin-top:25px;background:var(--navy);color:#fff;padding:20px;border-radius:12px;display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:center}
.grand-totals .label{font-size:13px;text-transform:uppercase;font-weight:bold;margin-bottom:5px}
.grand-totals .label.emp{color:var(--gold)}.grand-totals .label.pat{color:#4ade80}
.grand-totals .value{font-size:20px;font-weight:850}
.grand-totals .pat-col{border-left:1px solid rgba(255,255,255,.15)}

.contact{background:var(--navy);color:#fff}.contact .lead{color:#c7d5e8}.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:30px}.contactbox{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:14px;padding:28px}.contactbox strong{display:block;color:var(--gold);margin-bottom:5px}.contactbox div{margin-bottom:18px}
.action-buttons{display:flex;flex-direction:column;gap:12px;margin-top:15px}
.taamim-upload{background:#fff;padding:25px;border-radius:14px;border:1px solid var(--border);margin-bottom:30px}
.taamim-upload h3{margin-top:0;color:var(--navy);font-size:20px}
.upload-row{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px}
.upload-file{margin-bottom:15px}
.taamim-list,.forms-grid{display:grid;gap:15px}.taamim-item,.form-card{background:#fff;padding:20px;border-radius:12px;border:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 12px #00000005}
.taamim-info h4,.form-card h4{margin:0 0 5px;font-size:17px;color:var(--navy)}.taamim-info p,.form-card p{margin:0;font-size:13px;color:var(--muted)}
.taamim-actions,.form-actions{display:flex;gap:10px}
.btn-sm{padding:8px 16px;font-size:13px}
.btn-danger{border-color:#ef4444;color:#ef4444}
.empty-msg{color:var(--muted)}
.forms-filter{display:flex;gap:12px;margin-bottom:25px;flex-wrap:wrap}
footer{background:#061426;color:#aebdd0;padding:25px 0;font-size:13px}.footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:800px){.hero h1{font-size:32px}.grid,.contactgrid,.upload-row,.grand-totals{grid-template-columns:1fr}.grand-totals .pat-col{border-left:none}.hero{padding:60px 0}.section{padding:40px 0}.taamim-item,.form-card{flex-direction:column;align-items:flex-start;gap:15px}}

.msg{margin-top:12px;font-size:14px}
.msg.error{color:#ef4444}
.msg.ok{color:#16a34a}
.admin-bar{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-top:10px}
.btn-outline{border:1px solid var(--navy);color:var(--navy);background:transparent}
.btn-outline:hover{background:#0b1f3a12}
/* fixes the invisible white "MOF FORMS" button on the Forms page */
.forms-filter .secondary{color:var(--navy);border-color:var(--navy)}


.floating-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: transform 0.3s ease;
}
.floating-whatsapp:hover {
  transform: scale(1.1);
}
.floating-whatsapp img {
  width: 35px;
  height: 35px;
}

/* خلفية الصفحة الرئيسية */
body[data-page="home"]{
  background:
    linear-gradient(rgba(241,245,249,.35), rgba(241,245,249,.35)),
    url("../bg.jpeg") center / cover no-repeat fixed;
  background-color:#f1f5f9;
}

#calculators{background:transparent}


.unified-calc-box{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
}

.eyebrow h2{
  text-transform:none;
  letter-spacing:0;
}

.family-box{
  margin-top:25px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
  background:#eef2ff;
  border:1px solid #c7d2fe;
  border-radius:12px;
  padding:16px 20px;
  color:var(--blue);
  font-weight:700;
}
.family-box b{font-size:18px;font-weight:850}

.res-row{
  gap:12px;
  align-items:center;
}
.res-row span{
  white-space:nowrap;
}
.res-row b{
  white-space:nowrap;
  flex-shrink:0;
}
.res-row.total{
  font-size:14px;
}

/* العربية في سطر ثانٍ تحت الإنجليزية */
bdi.ar{
  display:block;
  direction:rtl;
  font-size:12.5px;
  font-weight:400;
  line-height:1.5;
  opacity:.8;
}
.res-row bdi.ar,
.family-box bdi.ar{text-align:left}
.grand-totals bdi.ar{text-align:center;margin-top:2px}
.res-row.total bdi.ar{font-weight:600}

@media(max-width:600px){
  .res-row span{white-space:normal}
}


@media(max-width:800px){

  .nav{height:auto;flex-direction:column;gap:8px;padding:10px 0}
  .logo{font-size:22px}
  nav{flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:14px}


  .section{padding:30px 0}
  .section h2,.eyebrow h2{font-size:24px;line-height:1.3}
  .lead{font-size:15px}


  .unified-calc-box{padding:16px;border-radius:12px}
  .master-salary-section{padding:14px}
  .sub-res-column{padding:14px}
  .sub-res-column h3{font-size:16px}
  .form-control{font-size:16px}


  .res-row{gap:10px;align-items:flex-start}
  .res-row span{white-space:normal}
  .res-row b{font-size:13px}


  .family-box{flex-direction:column;align-items:flex-start;gap:6px;padding:14px}


  .grand-totals{padding:16px;gap:16px}
  .grand-totals .pat-col{border-left:none;border-top:1px solid rgba(255,255,255,.15);padding-top:16px}
  .grand-totals .value{font-size:18px}


  .taamim-actions,.form-actions{flex-wrap:wrap;width:100%}
  .taamim-actions .btn,.form-actions .btn{flex:1;min-width:120px}
  .forms-filter .btn{flex:1;min-width:140px}


  .floating-whatsapp{width:52px;height:52px;bottom:14px;right:14px}
  .floating-whatsapp img{width:30px;height:30px}
}


@media(max-width:380px){
  nav{font-size:13px;gap:4px 12px}
  .res-row{font-size:13px}
  .grand-totals .value{font-size:16px}
}

.contact-light{min-height:70vh}
.contact-light .contactbox{background:#fff;border:1px solid var(--border);box-shadow:0 8px 30px #1020400d;color:var(--ink)}
.contact-light .contactbox strong{color:var(--navy)}
.contact-light .contactbox p{color:var(--muted)}
.contact-light .contactbox a:not(.btn){color:var(--blue);font-weight:700}
.contact-light .contactbox a:not(.btn):hover{color:var(--gold)}

/* Sticky footer: footer stays at the bottom even on short pages */
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
#site-header,#site-footer{display:contents}

/* Slideshow / app promo */
.promo{padding:30px 0 0}
.slideshow{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#071a33 0%,#0d3564 65%,#155fc5 100%);color:#fff;box-shadow:0 10px 40px #1020402a}
.slides{display:grid}
.slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s;padding:40px 72px 56px;display:flex;align-items:center;min-height:230px}
.slide.active{opacity:1;visibility:visible}
.slide-text{max-width:640px}
.slide h2{font-size:28px;line-height:1.25;margin:0 0 10px;color:#fff}
.slide p{margin:0 0 20px;color:#dce8f7;font-size:16px}
.slide-actions{display:flex;gap:12px;flex-wrap:wrap}
.slide-note{display:block;margin-top:14px;color:#aebdd0;font-size:12.5px}
.slide-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid #ffffff44;background:#ffffff14;color:#fff;font-size:16px;cursor:pointer;transition:.2s}
.slide-arrow:hover{background:#ffffff30}
.slide-arrow.prev{left:14px}.slide-arrow.next{right:14px}
.slide-dots{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.slide-dots button{width:10px;height:10px;border-radius:50%;border:none;background:#ffffff55;cursor:pointer;padding:0;transition:.2s}
.slide-dots button.active{background:var(--gold);width:26px;border-radius:6px}
@media(max-width:800px){
  .slide{padding:28px 20px 52px;min-height:260px}
  .slide h2{font-size:21px}
  .slide p{font-size:14.5px}
  .slide-arrow{display:none}
}
@media(prefers-reduced-motion:reduce){.slide{transition:none}}