/* =========================================================
   TAQA ELSWEDY — SAFE HEADER
   CSS-only styling. No DOM injection. No innerHTML replacement.
   Built against the native EasyOrders header markup.
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --taqa-ui-fg:#11161D;
  --taqa-ui-glass:rgba(255,255,255,.46);
  --taqa-ui-glass-soft:rgba(220,229,232,.14);
  --taqa-ui-border:rgba(17,22,29,.09);
  --taqa-ui-shadow:0 8px 22px rgba(18,28,38,.06);
  --taqa-ui-hover:rgba(192,96,36,.07);
  --taqa-ui-hover-border:rgba(192,96,36,.14);
}

/* Global theme module can override these variables safely. */
body.taqa-theme-dark{
  --taqa-ui-fg:#F4F7F8;
  --taqa-ui-glass:rgba(7,12,20,.34);
  --taqa-ui-glass-soft:rgba(77,113,131,.09);
  --taqa-ui-border:rgba(244,247,248,.09);
  --taqa-ui-shadow:0 10px 24px rgba(0,0,0,.13);
  --taqa-ui-hover:rgba(255,255,255,.055);
  --taqa-ui-hover-border:rgba(255,255,255,.075);
}

/* =========================================================
   NATIVE EASYORDERS HEADER SHELL
========================================================= */

.app_container > div.sticky.top-0.w-full.z-30{
  position:sticky !important;
  top:0 !important;
  z-index:30 !important;
  width:100% !important;

  background:transparent !important;
  background-color:transparent !important;

  border:0 !important;
  box-shadow:none !important;

  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* Kill the native white layers only inside the header. */
.app_container > div.sticky.top-0.w-full.z-30,
.app_container > div.sticky.top-0.w-full.z-30 > header.default_header,
.app_container > div.sticky.top-0.w-full.z-30 nav.default_header_container{
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
}

header.default_header{
  color:var(--taqa-ui-fg) !important;
}

nav.default_header_container{
  position:relative !important;
  font-family:"Space Grotesk","Manrope",sans-serif !important;
}

/* =========================================================
   TRUE CENTER LOGO
========================================================= */

nav.default_header_container > div:first-child{
  position:relative !important;
}

nav.default_header_container .default_header_logo{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;

  width:auto !important;
  max-width:none !important;
  z-index:5 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

nav.default_header_container .default_header_logo a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

nav.default_header_container .default_header_logo img{
  filter:drop-shadow(0 5px 14px rgba(0,0,0,.08));
}

/* =========================================================
   SEARCH + CART GLASS PILL
   Uses the EXISTING native <a> and <button>.
========================================================= */

nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end{
  width:max-content !important;
  flex:0 0 auto !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;

  gap:10px !important;
  padding:4px !important;

  border-radius:15px !important;
  border:1px solid var(--taqa-ui-border) !important;

  background:
    linear-gradient(145deg,var(--taqa-ui-glass),var(--taqa-ui-glass-soft)) !important;

  box-shadow:var(--taqa-ui-shadow) !important;

  -webkit-backdrop-filter:blur(15px) saturate(125%) !important;
  backdrop-filter:blur(15px) saturate(125%) !important;
}

/* Native Search */
nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"]{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;

  padding:0 !important;
  margin:0 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid transparent !important;
  border-radius:10px !important;

  color:var(--taqa-ui-fg) !important;
  background:transparent !important;
  opacity:1 !important;

  transition:
    background-color .22s ease,
    border-color .22s ease,
    color .3s ease !important;
}

/* Native Cart: direct button in the same action row */
nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;

  padding:0 !important;
  margin:0 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid transparent !important;
  border-radius:10px !important;

  color:var(--taqa-ui-fg) !important;
  background:transparent !important;
  opacity:1 !important;

  transition:
    background-color .22s ease,
    border-color .22s ease,
    color .3s ease !important;
}

nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"]:hover,
nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button:hover{
  background:var(--taqa-ui-hover) !important;
  border-color:var(--taqa-ui-hover-border) !important;
  opacity:1 !important;
}

nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"] svg{
  width:20px !important;
  height:20px !important;
  color:currentColor !important;
}

/* Keep the native cart counter visible and positioned correctly. */
nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button > div.absolute{
  z-index:3 !important;
  color:#C06024 !important;
}

nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button > div.absolute > span{
  color:#C06024 !important;
}

/* =========================================================
   DESKTOP NAV GLASS PILL
========================================================= */

nav.default_header_container > .hidden.lg\:block{
  width:max-content !important;
  margin:4px auto 0 !important;
  padding:5px !important;

  border-radius:16px !important;
  border:1px solid var(--taqa-ui-border) !important;

  background:
    linear-gradient(145deg,var(--taqa-ui-glass),var(--taqa-ui-glass-soft)) !important;

  box-shadow:var(--taqa-ui-shadow) !important;

  -webkit-backdrop-filter:blur(14px) saturate(125%) !important;
  backdrop-filter:blur(14px) saturate(125%) !important;
}

nav.default_header_container > .hidden.lg\:block > div{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
}

nav.default_header_container > .hidden.lg\:block a{
  min-height:34px !important;
  padding:0 13px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:11px !important;
  border:1px solid transparent !important;

  color:var(--taqa-ui-fg) !important;

  font-family:"Space Grotesk","Manrope",sans-serif !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:.018em !important;

  text-decoration:none !important;
  opacity:.86 !important;

  transition:
    color .30s ease,
    background-color .22s ease,
    border-color .22s ease,
    opacity .22s ease !important;
}

nav.default_header_container > .hidden.lg\:block a:hover{
  opacity:1 !important;
  text-decoration:none !important;
  background:var(--taqa-ui-hover) !important;
  border-color:var(--taqa-ui-hover-border) !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:1023px){
  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end{
    gap:4px !important;
    padding:3px !important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"],
  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
  }

  /* Native menu button remains untouched functionally. */
  nav.default_header_container > div:first-child > div:first-child > button{
    position:relative!important;
    color:var(--taqa-ui-fg) !important;
  }
}

/* =========================================================
   MOBILE HEADER — UNIFIED 44PX CONTROL SYSTEM
========================================================= */
@media (max-width:767px){
  nav.default_header_container{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  nav.default_header_container > div:first-child{
    height:48px!important;
    min-height:48px!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end{
    width:84px!important;
    height:44px!important;
    min-width:84px!important;
    min-height:44px!important;
    gap:4px!important;
    padding:3px!important;
    border-radius:14px!important;
    border:1px solid var(--taqa-mobile-control-border,var(--taqa-ui-border))!important;
    background:var(--taqa-mobile-control-bg,linear-gradient(145deg,var(--taqa-ui-glass),var(--taqa-ui-glass-soft)))!important;
    box-shadow:var(--taqa-mobile-control-shadow,var(--taqa-ui-shadow))!important;
    -webkit-backdrop-filter:blur(18px) saturate(128%)!important;
    backdrop-filter:blur(18px) saturate(128%)!important;
    isolation:isolate!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"],
  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    border-radius:11px!important;
    color:var(--taqa-header-fg,var(--taqa-ui-fg))!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"] svg{
    width:19px!important;
    height:19px!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button svg{
    width:21px!important;
    height:21px!important;
  }

  nav.default_header_container > div:first-child > div:first-child > button{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    padding:0!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid var(--taqa-mobile-control-border,var(--taqa-ui-border))!important;
    border-radius:14px!important;
    color:var(--taqa-header-fg,var(--taqa-ui-fg))!important;
    background:var(--taqa-mobile-control-bg,linear-gradient(145deg,var(--taqa-ui-glass),var(--taqa-ui-glass-soft)))!important;
    box-shadow:var(--taqa-mobile-control-shadow,var(--taqa-ui-shadow))!important;
    -webkit-backdrop-filter:blur(18px) saturate(128%)!important;
    backdrop-filter:blur(18px) saturate(128%)!important;
    transition:border-color .22s ease,background .28s ease,box-shadow .28s ease!important;
  }

  nav.default_header_container > div:first-child > div:first-child > button svg{
    width:22px!important;
    height:22px!important;
    transform:none!important;
    opacity:0!important;
  }

  /* Clean, equal hamburger strokes with exact optical centering. */
  nav.default_header_container > div:first-child > div:first-child > button::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    z-index:2;
    width:18px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;
    transform:translate(-50%,-50%);
    pointer-events:none;
  }

  nav.default_header_container .default_header_logo{
    width:110px!important;
    height:44px!important;
    max-width:110px!important;
  }

  nav.default_header_container .default_header_logo a,
  nav.default_header_container .default_header_logo a > div,
  nav.default_header_container .default_header_logo img{
    width:110px!important;
    height:44px!important;
    max-width:110px!important;
    max-height:44px!important;
    object-fit:contain!important;
  }

  body.taqa-theme-dark nav.default_header_container .default_header_logo img,
  body.taqa-theme-light nav.default_header_container .default_header_logo img{
    filter:drop-shadow(0 5px 12px rgba(0,0,0,.14))!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end::before,
  nav.default_header_container > div:first-child > div:first-child > button::before{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 34%,transparent 72%,rgba(192,96,36,.055));
    opacity:.72;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end{
    position:relative!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > *,
  nav.default_header_container > div:first-child > div:first-child > button > *{
    position:relative;
    z-index:1;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"]:active,
  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button:active,
  nav.default_header_container > div:first-child > div:first-child > button:active{
    background:var(--taqa-mobile-control-active,rgba(192,96,36,.10))!important;
  }
}

@media (max-width:360px){
  nav.default_header_container .default_header_logo,
  nav.default_header_container .default_header_logo a,
  nav.default_header_container .default_header_logo a > div,
  nav.default_header_container .default_header_logo img{
    width:104px!important;
    max-width:104px!important;
  }
}


/* =========================================================
   MOBILE MENU — MATCH SEARCH/CART GLASS SURFACE
========================================================= */
@media (max-width:767px){
  nav.default_header_container > div:first-child > div:first-child > button{
    background:
      var(--taqa-mobile-control-bg,
        linear-gradient(145deg,var(--taqa-ui-glass),var(--taqa-ui-glass-soft))
      ) !important;

    border:1px solid
      var(--taqa-mobile-control-border,var(--taqa-ui-border)) !important;

    box-shadow:
      var(--taqa-mobile-control-shadow,var(--taqa-ui-shadow)) !important;

    -webkit-backdrop-filter:blur(18px) saturate(128%) !important;
    backdrop-filter:blur(18px) saturate(128%) !important;
  }
}


/* =========================================================
   TAQA HEADER — DUAL LOGO LOCKUP
   Original TAQA logo + ESP logo side by side
========================================================= */

nav.default_header_container .default_header_logo{
  width:auto !important;
  max-width:none !important;
  overflow:visible !important;
}

nav.default_header_container .default_header_logo a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:40px !important;
  width:auto !important;
  max-width:none !important;
  overflow:visible !important;
}

nav.default_header_container .default_header_logo a::after{
  content:"" !important;
  display:block !important;
  flex:0 0 auto !important;

  width:118px !important;
  height:50px !important;

  background-image:url("https://pub-e9715f44ef4d4ff88751fb3c934ea86e.r2.dev/esplogolightmode.webp") !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:contain !important;

  pointer-events:none !important;
}

@media (max-width:1023px){
  nav.default_header_container .default_header_logo a{
    gap:24px !important;
  }

  nav.default_header_container .default_header_logo a::after{
    width:92px !important;
    height:42px !important;
  }
}

@media (max-width:767px){
  nav.default_header_container .default_header_logo{
    width:auto !important;
    max-width:none !important;
    height:44px !important;
  }

  nav.default_header_container .default_header_logo a{
    width:auto !important;
    max-width:none !important;
    height:44px !important;
    gap:14px !important;
  }

  nav.default_header_container .default_header_logo a > div,
  nav.default_header_container .default_header_logo img{
    width:74px !important;
    max-width:74px !important;
    height:36px !important;
    max-height:36px !important;
    object-fit:contain !important;
  }

  nav.default_header_container .default_header_logo a::after{
    width:74px !important;
    height:34px !important;
  }
}

@media (max-width:360px){
  nav.default_header_container .default_header_logo a{
    gap:5px !important;
  }

  nav.default_header_container .default_header_logo a > div,
  nav.default_header_container .default_header_logo img{
    width:66px !important;
    max-width:66px !important;
  }

  nav.default_header_container .default_header_logo a::after{
    width:66px !important;
    height:32px !important;
  }
}


/* =========================================================
   TAQA HEADER — DUAL LOGO MICRO ALIGNMENT V2
   Desktop: shift full lockup 2px right
   Phone: slightly smaller logos + preserved center gap
========================================================= */

nav.default_header_container .default_header_logo{
  transform:translate(-50%,-50%) !important;
}

@media (max-width:767px){
  nav.default_header_container .default_header_logo a{
    gap:12px !important;
  }

  nav.default_header_container .default_header_logo a > div,
  nav.default_header_container .default_header_logo img{
    width:66px !important;
    max-width:66px !important;
    height:32px !important;
    max-height:32px !important;
  }

  nav.default_header_container .default_header_logo a::after{
    width:66px !important;
    height:31px !important;
  }
}

@media (max-width:360px){
  nav.default_header_container .default_header_logo a{
    gap:10px !important;
  }

  nav.default_header_container .default_header_logo a > div,
  nav.default_header_container .default_header_logo img{
    width:60px !important;
    max-width:60px !important;
    height:30px !important;
    max-height:30px !important;
  }

  nav.default_header_container .default_header_logo a::after{
    width:60px !important;
    height:29px !important;
  }
}


/* =========================================================
   TAQA HEADER — DESKTOP LOGO LOCKUP RIGHT SHIFT
   Desktop only: move BOTH logos together to the right.
========================================================= */
@media (min-width:1024px){
  nav.default_header_container .default_header_logo{
    left:50% !important;
    transform:translate(calc(-50% + 12px),-50%) !important;
  }
}


/* =========================================================
   TAQA HEADER — MOBILE DUAL LOGO GAP WIDER
========================================================= */
@media (max-width:767px){
  nav.default_header_container .default_header_logo a{
    gap:18px !important;
  }
}

@media (max-width:360px){
  nav.default_header_container .default_header_logo a{
    gap:14px !important;
  }
}


/* =========================================================
   TAQA HEADER — MOBILE OPTICAL CENTER AROUND CHAIN
   Keep the pair centered as a group, but move each visible
   logo outward so the chain runs through the visual midpoint.
========================================================= */
@media (max-width:767px){

  /* Keep the whole lockup mathematically centered */
  nav.default_header_container .default_header_logo{
    left:50% !important;
    transform:translate(-50%,-50%) !important;
  }

  /* Original TAQA logo: nudge to the RIGHT */
  nav.default_header_container .default_header_logo a > div{
    transform:translateX(5px) !important;
  }

  /* ESP logo: nudge to the LEFT */
  nav.default_header_container .default_header_logo a::after{
    transform:translateX(-5px) !important;
  }
}

@media (max-width:360px){
  nav.default_header_container .default_header_logo a > div{
    transform:translateX(4px) !important;
  }

  nav.default_header_container .default_header_logo a::after{
    transform:translateX(-4px) !important;
  }
}