/* ==========================================================
   ALSHIFA MEDTOUR - MASTER HEADER CSS (PRODUCTION GRADE v1.7.2)
   Zero-FOUC, Display-None Drawer Isolation, Theme-Resilient Buttons
   ========================================================== */

/* 1. Strict Brand Palette */
:root {
  --alshifa-primary: #0E9FDF;        /* Clean Medical Light Blue */
  --alshifa-primary-dark: #0284C7;   /* Medical Blue Active */
  --alshifa-bisleri: #00A887;        /* Signature Bisleri Green */
  --alshifa-bisleri-hover: #007A62;  /* Bisleri Green Dark Hover */
  --alshifa-slate: #1E293B;          /* Dark Crisp Headings/Icons */
  --alshifa-body: #475569;           /* Body Slate */
  --alshifa-light-bg: #F0F8FD;       /* Soft Light Blue Background */
  --alshifa-border: #E2E8F0;         /* Clean Soft Border */
  --alshifa-white: #FFFFFF;          /* Pure White */
  --alshifa-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 2. Global Reset for Header and Drawer */
.alshifa-header-wrapper,
.alshifa-drawer-panel {
  box-sizing: border-box !important;
  font-family: var(--alshifa-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.alshifa-header-wrapper *,
.alshifa-header-wrapper *::before,
.alshifa-header-wrapper *::after,
.alshifa-drawer-panel *,
.alshifa-drawer-panel *::before,
.alshifa-drawer-panel *::after {
  box-sizing: border-box !important;
}

.alshifa-header-wrapper a,
.alshifa-header-wrapper button,
.alshifa-header-wrapper span,
.alshifa-header-wrapper nav,
.alshifa-drawer-panel a,
.alshifa-drawer-panel button,
.alshifa-drawer-panel span {
  font-family: var(--alshifa-font) !important;
}

/* Strict Removal of Any Bullet Points from Theme */
.alshifa-header-wrapper ul,
.alshifa-header-wrapper ol,
.alshifa-drawer-panel ul,
.alshifa-drawer-panel ol,
.alshifa-menu-list {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.alshifa-header-wrapper li,
.alshifa-drawer-panel li,
.alshifa-menu-list li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.alshifa-header-wrapper {
  width: 100%;
  background: var(--alshifa-white);
  position: relative;
  z-index: 999;
}

/* 3. ICON & SVG STRICT RULES */
.alshifa-icon-svg {
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* Helpline Icon */
.alshifa-btn-helpline .alshifa-icon-svg {
  width: 15px !important;
  height: 15px !important;
  fill: var(--alshifa-primary) !important;
}

/* WhatsApp Icon */
.alshifa-btn-cta .alshifa-icon-svg {
  width: 18px !important;
  height: 18px !important;
  fill: var(--alshifa-white) !important;
}

/* Mobile Quick Call Icon */
.alshifa-mobile-call .alshifa-icon-svg {
  width: 16px !important;
  height: 16px !important;
  fill: var(--alshifa-primary) !important;
}

/* Drawer Arrow Icon */
.alshifa-drawer-arrow-svg {
  width: 12px !important;
  height: 12px !important;
  fill: #94A3B8 !important;
  transition: fill 0.2s ease, transform 0.2s ease;
}

.alshifa-drawer-nav ul li a:hover .alshifa-drawer-arrow-svg,
.alshifa-drawer-nav ul li.current-menu-item a .alshifa-drawer-arrow-svg {
  fill: var(--alshifa-primary) !important;
  transform: translateX(2px);
}

/* ==========================================================
   4. TOP BAR (LOGO + HELPLINE + CTA)
   ========================================================== */
.alshifa-top-row {
  width: 100%;
  background: var(--alshifa-white);
  border-bottom: 1px solid var(--alshifa-border);
  padding: 12px 0;
}

.alshifa-header-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.alshifa-logo-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.alshifa-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  text-decoration: none !important;
  outline: none !important;
}

.alshifa-logo-img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.alshifa-logo-link:hover .alshifa-logo-img {
  transform: scale(1.015);
}

.alshifa-actions-desktop {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* Helpline Pill Button */
.alshifa-btn-helpline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--alshifa-light-bg) !important;
  color: var(--alshifa-primary) !important;
  border: 1.5px solid #BAE6FD !important;
  padding: 10px 18px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.25s ease !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 1.2 !important;
}

.alshifa-btn-helpline:hover {
  background: #E0F2FE !important;
  border-color: var(--alshifa-primary) !important;
  color: var(--alshifa-primary-dark) !important;
  transform: translateY(-1px);
}

/* Bisleri Green CTA Button */
.alshifa-btn-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--alshifa-bisleri) !important;
  color: var(--alshifa-white) !important;
  border: none !important;
  padding: 11px 22px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 14px rgba(0, 168, 135, 0.28) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  line-height: 1.2 !important;
}

.alshifa-btn-cta:hover {
  background: var(--alshifa-bisleri-hover) !important;
  color: var(--alshifa-white) !important;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 20px rgba(0, 122, 98, 0.35) !important;
}

/* ==========================================================
   5. NAVIGATION BAR (LIGHT BLUE STRIP)
   ========================================================== */
.alshifa-nav-row {
  width: 100%;
  background: var(--alshifa-primary);
  box-shadow: 0 2px 8px rgba(14, 159, 223, 0.15);
}

.alshifa-nav-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alshifa-desktop-nav {
  display: block;
  width: 100%;
}

.alshifa-desktop-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: wrap;
}

.alshifa-desktop-nav ul li {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.alshifa-desktop-nav ul li a {
  display: inline-block;
  color: var(--alshifa-white) !important;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 20px;
  text-decoration: none !important;
  transition: all 0.25s ease;
  position: relative;
  letter-spacing: 0.2px;
}

/* Underline Indicator */
.alshifa-desktop-nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: var(--alshifa-bisleri);
  border-radius: 3px 3px 0 0;
  transition: width 0.25s ease;
}

.alshifa-desktop-nav ul li:hover > a,
.alshifa-desktop-nav ul li.current-menu-item > a {
  background: rgba(255, 255, 255, 0.12);
  color: var(--alshifa-white) !important;
}

.alshifa-desktop-nav ul li:hover > a::after,
.alshifa-desktop-nav ul li.current-menu-item > a::after {
  width: 70%;
}

/* ==========================================================
   6. MOBILE CONTROLS & HAMBURGER (THEME-COLLISION PROOF)
   ========================================================== */
.alshifa-mobile-controls {
  display: none;
  align-items: center;
  gap: 10px;
}

/* Call Button - EXACT CIRCLE */
.alshifa-mobile-call {
  all: unset !important;
  box-sizing: border-box !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 50% !important;
  background: var(--alshifa-light-bg) !important;
  border: 1.5px solid #BAE6FD !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.alshifa-mobile-call:hover,
.alshifa-mobile-call:focus {
  background: #E0F2FE !important;
  border-color: var(--alshifa-primary) !important;
}

/* Hamburger Button - CLEAN 3-LINE SVG (ZERO COLLAPSE) */
button.alshifa-hamburger-btn {
  all: unset !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  background-color: var(--alshifa-white) !important;
  border: 1.5px solid var(--alshifa-border) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

button.alshifa-hamburger-btn:hover,
button.alshifa-hamburger-btn:focus {
  background-color: var(--alshifa-light-bg) !important;
  border-color: var(--alshifa-primary) !important;
}

.alshifa-hamburger-svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  stroke: var(--alshifa-slate) !important;
  transition: stroke 0.2s ease !important;
}

button.alshifa-hamburger-btn:hover .alshifa-hamburger-svg,
button.alshifa-hamburger-btn:focus .alshifa-hamburger-svg {
  stroke: var(--alshifa-primary) !important;
}

/* ==========================================================
   7. OFFCANVAS MOBILE DRAWER (GUARANTEED HIDDEN BY DEFAULT)
   ========================================================== */
.alshifa-drawer-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 99998 !important;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.alshifa-drawer-overlay.active {
  display: block !important;
  opacity: 1;
}

.alshifa-drawer-panel {
  position: fixed !important;
  top: 0 !important;
  right: -340px !important;
  width: 320px !important;
  max-width: 86vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  background: var(--alshifa-white) !important;
  z-index: 99999 !important;
  box-shadow: -8px 0 35px rgba(0, 0, 0, 0.18) !important;
  display: none;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)) 16px !important;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.alshifa-drawer-panel.active {
  display: flex !important;
  right: 0 !important;
}

/* Drawer Header */
.alshifa-drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--alshifa-border) !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  width: 100% !important;
}

.alshifa-drawer-logo {
  max-width: 160px !important;
  max-height: 38px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Circular Close Button - NORMALLY PROPORTIONED 18PX CROSS */
button.alshifa-drawer-close {
  all: unset !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #F1F5F9 !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid var(--alshifa-border) !important;
  color: var(--alshifa-slate) !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
}

.alshifa-close-svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  stroke: var(--alshifa-slate) !important;
  transition: stroke 0.2s ease !important;
}

button.alshifa-drawer-close:hover,
button.alshifa-drawer-close:focus {
  background: var(--alshifa-light-bg) !important;
  border-color: var(--alshifa-primary) !important;
}

button.alshifa-drawer-close:hover .alshifa-close-svg,
button.alshifa-drawer-close:focus .alshifa-close-svg {
  stroke: var(--alshifa-primary) !important;
}

/* Drawer Nav Links */
.alshifa-drawer-nav {
  padding: 14px 0 !important;
  flex: 1 0 auto !important;
}

.alshifa-drawer-nav ul {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.alshifa-drawer-nav ul li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.alshifa-drawer-nav ul li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: var(--alshifa-slate) !important;
  text-decoration: none !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  padding: 11px 14px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.alshifa-drawer-nav ul li a:hover,
.alshifa-drawer-nav ul li.current-menu-item a {
  background: var(--alshifa-light-bg) !important;
  color: var(--alshifa-primary) !important;
}

/* Drawer Footer */
.alshifa-drawer-footer {
  padding-top: 14px !important;
  border-top: 1px solid var(--alshifa-border) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  width: 100% !important;
}

.alshifa-drawer-footer .alshifa-btn-cta,
.alshifa-drawer-footer .alshifa-btn-helpline {
  width: 100% !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* ==========================================================
   8. RESPONSIVE BREAKPOINTS (STRICT ENFORCEMENT)
   ========================================================== */
@media (max-width: 991px) {
  .alshifa-nav-row {
    display: none !important;
  }

  .alshifa-actions-desktop {
    display: none !important;
  }

  .alshifa-mobile-controls {
    display: flex !important;
  }

  .alshifa-top-row {
    padding: 10px 0 !important;
  }

  .alshifa-logo-img {
    max-width: 210px !important;
  }
}

@media (min-width: 992px) {
  .alshifa-nav-row {
    display: block !important;
  }

  .alshifa-actions-desktop {
    display: flex !important;
  }

  .alshifa-mobile-controls {
    display: none !important;
  }
}

@media (max-width: 576px) {
  .alshifa-header-container {
    padding: 0 14px !important;
  }

  .alshifa-logo-img {
    max-width: 175px !important;
  }

  .alshifa-drawer-panel {
    width: 300px !important;
    padding: 14px 14px 28px 14px !important;
  }
}