:root{
  --main-blue:#0a2a3c;
  --main-orange:#29c8b6;
  --main-blue-light:#415a66;
  --main-orange-light:#a9e9e1;
  --bg-light:#f5fcfa;
  --white:#fff;
  --shadow:0 4px 18px 0 #0a2a3c11;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Cairo',Arial,sans-serif;
  background:var(--bg-light);
  color:var(--main-blue);
  line-height:1.65;
}

/* Safety: background watermark layers must never block clicks */
.background-watermark,
.background-watermark *{
  pointer-events:none !important;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

.container{
  width:min(1200px, calc(100% - 40px));
  margin:32px auto;
}

.file-warning{
  position:fixed;
  left:12px; right:12px; bottom:12px;
  background:#fff6ed;
  border:1px solid #ffd6b3;
  color:#7a3e00;
  border-radius:14px;
  padding:12px 14px;
  box-shadow:0 10px 40px rgba(0,0,0,.12);
  z-index:9999;
  display:none;
  font-size:14px;
}
.file-warning strong{color:#5a2c00}
.file-warning .hint{opacity:.9;margin-top:4px}

.navbar{
  background:var(--white);
  padding:14px 22px;
  min-height:64px;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  box-shadow:var(--shadow);
  position:sticky;
  top:0;
  /* IMPORTANT: keep the navbar (and notifications dropdown) above any hero/banner layers */
  z-index:100000 !important;
  /* Some pages set overflow:hidden in inline styles; this clips the notifications dropdown */
  overflow:visible !important;
}

.navbar .logo{
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:.3px;
}

.navbar .menu-toggle{
  display:none;
  border:none;
  background:transparent;
  font-size:24px;
  cursor:pointer;
  padding:6px 10px;
  border-radius:10px;
}

.navbar .nav-links{
  list-style:none;
  display:flex;
  gap:10px;
  align-items:center;
  margin:0;
  padding:0;
}

.navbar .nav-links a{
  display:inline-block;
  font-weight:700;
  padding:8px 12px;
  border-radius:10px;
  transition:background .2s ease,color .2s ease;
  color:var(--main-blue);
  white-space:nowrap;
  line-height:1.2;
  flex:0 0 auto;
}

.navbar .nav-links a:hover{
  background:var(--main-orange);
  color:var(--white);
}

.navbar .nav-links a.active{
  background:#e8fbf7;
  color:var(--main-blue);
  border:1px solid #c5f4ea;
}

@media (max-width: 980px){
  .navbar .menu-toggle{display:block}
  .navbar .nav-links{
    position:fixed;
    inset:70px 12px auto 12px;
    background:var(--white);
    border-radius:18px;
    box-shadow:0 18px 70px rgba(0,0,0,.12);
    padding:12px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    display:none;
  }
  .navbar.open .nav-links{display:flex}
  .navbar .nav-links a{
    width:100%;
    text-align:center;
    padding:12px;
  }
}


/* =================== Notifications =================== */
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  flex:0 0 auto;
}
.nav-bell{
  border:none;
  background:#f1f5f9;
  color:var(--main-blue);
  cursor:pointer;
  border-radius:12px;
  padding:8px 10px;
  font-size:18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.nav-bell:hover{ background:#e8fff9; }
.notif-badge{
  min-width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#b91919;
  color:#fff;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  padding:0 7px;
}
.notif-dropdown{
  position:absolute;
  top:48px;
  right:0;
  left:auto;
  width:min(340px, calc(100vw - 24px));
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.12);
  overflow:hidden;
  /* Must stay above page sections & banners */
  z-index:100001 !important;
}
.notif-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  background:linear-gradient(90deg,var(--main-blue),var(--main-orange));
  color:#fff;
  font-weight:900;
}
.notif-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.notif-enable-push{
  border:1px solid #ffffff66;
  background:#ffffff24;
  color:#fff;
  cursor:pointer;
  border-radius:10px;
  padding:6px 10px;
  font-weight:800;
  font-size:12px;
}
.notif-enable-push:hover{
  background:#ffffff35;
}
.notif-close{
  border:none;
  background:#ffffff22;
  color:#fff;
  cursor:pointer;
  border-radius:10px;
  padding:6px 10px;
  font-weight:900;
}
.notif-list{
  max-height:340px;
  overflow:auto;
  background:linear-gradient(145deg, rgba(6, 27, 47, 0.98), rgba(9, 62, 86, 0.94));
}
.notif-item{
  width:100%;
  border:none;
  background:transparent;
  text-align:right;
  padding:10px 12px;
  cursor:pointer;
  display:block;
  border-bottom:1px solid rgba(189,233,245,.22);
  color:#eafcff;
}
.notif-item:hover{ background:rgba(66,181,207,.16); }
.notif-item.seen{ opacity:.72; }
.notif-title{ font-weight:900; color:#f5fdff; }
.notif-meta{ font-size:12px; opacity:.86; margin-top:4px; color:#caeefd; }
.notif-empty{ padding:18px 12px; color:#d4f2ff; text-align:center; }

/* Toast */
.hakim-toast{
  position:fixed;
  left:14px;
  bottom:90px;
  z-index:99999;
  background:#0a2a3c;
  color:#fff;
  padding:10px 12px;
  border-radius:14px;
  box-shadow:0 14px 50px rgba(0,0,0,.2);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease;
  font-weight:800;
  max-width:min(340px, calc(100vw - 28px));
}
.hakim-toast.show{
  opacity:1;
  transform:translateY(0);
}

/* =================== Quick WhatsApp Button =================== */
.support-fab{
  position:fixed !important;
  left:16px !important;
  right:auto !important;
  bottom:16px !important;
  min-width:56px;
  height:56px;
  border:none;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  background:linear-gradient(135deg,#1fa855,#25d366);
  color:#fff;
  box-shadow:0 16px 50px rgba(0,0,0,.2);
  font-size:22px;
  font-weight:900;
  text-decoration:none;
  z-index:100010 !important;
  pointer-events:auto !important;
}

.support-fab:hover{
  filter:brightness(1.05);
}

.support-fab .support-fab-label{
  font-size:14px;
  line-height:1;
}

/* Side panel (NOT centered modal) */
.support-panel{
  position:fixed !important;
  left:16px !important;
  right:auto !important;
  bottom:86px !important;
  width:min(420px, calc(100vw - 32px));
  height:min(560px, calc(100vh - 170px));
  max-height:calc(100vh - 140px);
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 22px 70px rgba(0,0,0,.18);
  display:none;
  flex-direction:column;
  overflow:hidden;
  z-index:100015 !important;
  pointer-events:auto !important;
}
.support-panel.open{ display:flex; }

/* Minimized state: show header only */
.support-panel.minimized{
  height:auto !important;
  max-height:none !important;
}
.support-panel.minimized .support-body,
.support-panel.minimized .support-foot{
  display:none;
}

.support-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  background:linear-gradient(90deg,var(--main-blue),var(--main-orange));
  color:#fff;
  font-weight:900;
}
.support-title{ font-size:1.02em; }
.support-head-actions{ display:flex; gap:6px; align-items:center; }
.support-close,
.support-min{
  border:none;
  background:#ffffff22;
  color:#fff;
  cursor:pointer;
  border-radius:10px;
  padding:6px 10px;
  font-weight:900;
  line-height:1;
}

.support-body{
  flex:1;
  overflow:auto;
  padding:10px 10px 12px;
  background:#f7fafd;
}
.support-empty{
  text-align:center;
  color:#777;
  margin-top:20px;
}
.support-foot{
  display:flex;
  gap:8px;
  padding:10px;
  background:#fff;
  border-top:1px solid #eef2f7;
}
.support-foot input{
  flex:1;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  font-family:inherit;
  font-size:1em;
}
.support-foot button{
  border:none;
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
  background:linear-gradient(135deg,var(--main-blue),var(--main-orange));
  color:#fff;
  font-weight:900;
}
.support-foot button:disabled,
.support-foot input:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.support-msg{ display:flex; margin:6px 0; }
.support-msg.me{ justify-content:flex-end; }
.support-msg.them{ justify-content:flex-start; }
.support-bubble{
  max-width:86%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#fff;
  box-shadow:0 1px 8px rgba(0,0,0,.06);
}
.support-msg.me .support-bubble{
  background:#e8fff9;
  border-color:#c5f4ea;
}
.support-text{ white-space:pre-wrap; }
.support-time{ font-size:12px; opacity:.65; margin-top:6px; text-align:left; }

/* =========================
   Footer (global)
   ========================= */
footer{
  background: var(--main-blue, #0a2a3c);
  color: var(--main-orange-light, #a9e9e1);
  padding: 34px 24px 20px 24px;
  box-shadow: 0 -4px 24px rgba(10,42,60,.19);
  font-size: 1.05em;
}
.footer-cols{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.footer-col h4,
.footer-col h3,
.footer-col .footer-title{
  margin-bottom: 12px;
  font-size: 1.15em;
  color: var(--main-orange, #29c8b6);
}
.footer-col ul{ list-style: none; padding: 0; margin: 0; }
.footer-col ul li{ margin-bottom: 10px; }
.footer-col ul li a{
  color: #fbeedc;
  font-size: 1.06em;
  transition: color .18s;
}
.footer-col ul li a:hover{ color: var(--main-orange, #29c8b6); }
.footer-bottom{
  text-align: center;
  font-size: 1em;
  color: #fae6cc;
}

footer.footer-lite{
  padding:26px 14px 14px;
}

.footer-lite-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px;
  margin:0 auto 12px;
}

.footer-lite-col{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:12px;
}

.footer-lite-col .footer-title{
  margin:0 0 8px;
  font-size:1rem;
}

.footer-lite-col ul{
  list-style:none;
  margin:0;
  padding:0;
}

.footer-lite-col li{
  margin-bottom:7px;
}

.footer-lite-col a{
  font-size:.95rem;
}

.section-title{margin:18px 0 10px;font-size:1.25em;color:var(--main-orange,#29c8b6);}


.seo-block{background:rgba(41,200,182,.06);border:1px solid rgba(41,200,182,.18);padding:18px;border-radius:14px;margin:16px auto;line-height:1.9;}
.seo-block h2{margin:0 0 8px;font-size:1.15em;}
.seo-block ul{margin:8px 0 0 0;padding-inline-start:18px;}
.seo-block li{margin:6px 0;}
.seo-inline-links a{font-weight:700;}