/*!
 * ================================================================
 * AZKIWEB PREMIUM HEADER SYSTEM — GLOBAL / PHASE P1.3
 * Signature: AZKIWEB-P1.3-PREMIUM-HEADER-V7
 * Brand: Azkiweb / ازکی وب
 * Build: 2026-08-17
 * Purpose: Shared production header/menu visual system for all Azkiweb public pages — premium V7.
 * Note: Keep this signature when this file is consolidated later.
 * ================================================================
 */

.azki-premium-header {
  --az-h-bg: rgba(7, 10, 27, 0.72);
  --az-h-bg-sticky: rgba(7, 10, 24, 0.94);
  --az-h-border: rgba(255, 255, 255, 0.12);
  --az-h-border-strong: rgba(255, 255, 255, 0.19);
  --az-h-text: #f7f8ff;
  --az-h-muted: rgba(238, 241, 255, 0.72);
  --az-h-cyan: #27aae1;
  --az-h-blue: #596cff;
  --az-h-pink: #ec008c;
  --az-h-gold: #f9c932;
  --az-h-orange: #ff5d19;
  --az-h-orange-2: #ff8a00;
  --az-h-radius: 22px;
  --az-h-fast: 180ms;
  --az-h-normal: 320ms;
  top: 10px;
  height: 78px;
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
  transition: top var(--az-h-normal) ease, height var(--az-h-normal) ease;
}

.azki-premium-header .container {
  max-width: 1360px;
}

.azki-premium-header .wrapper {
  min-height: 68px;
  padding: 7px 10px 7px 14px;
  gap: 16px;
  border: 1px solid var(--az-h-border);
  border-radius: var(--az-h-radius);
  background:
    radial-gradient(circle at 84% -35%, rgba(39, 170, 225, 0.18), transparent 32%),
    radial-gradient(circle at 8% 140%, rgba(236, 0, 140, 0.11), transparent 28%),
    linear-gradient(135deg, rgba(16, 20, 42, 0.84), var(--az-h-bg));
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  isolation: isolate;
  overflow: visible;
  transition: border-color var(--az-h-normal) ease, background var(--az-h-normal) ease, box-shadow var(--az-h-normal) ease, transform var(--az-h-normal) ease;
}

.azki-premium-header .wrapper::before {
  content: "";
  position: absolute;
  inset: -1px 16% auto 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(39, 170, 225, 0.85), rgba(236, 0, 140, 0.7), rgba(249, 201, 50, 0.75), transparent);
  opacity: 0.78;
  pointer-events: none;
}

.azki-premium-header.sticky {
  top: 7px;
  height: 74px !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.azki-premium-header.sticky .wrapper {
  min-height: 64px;
  border-color: var(--az-h-border-strong);
  background:
    radial-gradient(circle at 86% -30%, rgba(39, 170, 225, 0.15), transparent 28%),
    linear-gradient(135deg, rgba(11, 14, 31, 0.97), var(--az-h-bg-sticky));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* -----------------------------------------------------------------
   Animated logo — preserve the original Azkiweb reveal interaction.
   ----------------------------------------------------------------- */
.azki-premium-header .header-item-left {
  width: 188px;
  min-width: 188px;
  height: 54px;
  align-items: center;
  overflow: visible;
  position: relative;
  z-index: 4;
}

.azki-premium-header .brandlogo {
  display: flex;
  align-items: center;
  width: 100%;
  height: 54px;
  overflow: visible;
  outline: none;
}

.azki-premium-header .logo-svg {
  max-width: 184px;
  width: 184px;
  right: -47px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.16));
  transform-origin: center;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1), right 360ms cubic-bezier(.2,.8,.2,1), filter 360ms ease;
}

.azki-premium-header .brandlogo:hover .logo-svg,
.azki-premium-header .brandlogo:focus-visible .logo-svg {
  transform: translateX(-3.15em);
  filter: drop-shadow(0 8px 20px rgba(39, 170, 225, 0.18));
}

.azki-premium-header .brandlogo:focus-visible {
  border-radius: 14px;
  box-shadow: 0 0 0 3px rgba(39, 170, 225, 0.22);
}

/* -----------------------------------------------------------------
   Desktop navigation
   ----------------------------------------------------------------- */
.azki-premium-header .header-item-center {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.azki-premium-header .menu-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.azki-premium-header .menu > ul > li {
  margin: 0;
  display: flex;
  align-items: center;
}

.azki-premium-header .menu > ul > li > a {
  min-height: 44px;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 13px;
  color: var(--az-h-text) !important;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.15px;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  isolation: isolate;
  transition: color var(--az-h-fast) ease, background var(--az-h-fast) ease, transform var(--az-h-fast) ease, box-shadow var(--az-h-fast) ease;
}

.azki-premium-header .menu > ul > li > a::before {
  content: "";
  position: absolute;
  right: 12px;
  left: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--az-h-cyan), var(--az-h-pink), var(--az-h-gold));
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform var(--az-h-normal) cubic-bezier(.2,.8,.2,1), opacity var(--az-h-fast) ease;
}

.azki-premium-header .menu > ul > li > a:hover,
.azki-premium-header .menu > ul > li > a:focus-visible,
.azki-premium-header .menu > ul > li.menu-item-has-children:focus-within > a {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055);
  transform: translateY(-1px);
}

.azki-premium-header .menu > ul > li > a:hover::before,
.azki-premium-header .menu > ul > li > a:focus-visible::before,
.azki-premium-header .menu > ul > li.menu-item-has-children:focus-within > a::before,
.azki-premium-header .menu > ul > li > a[aria-current="page"]::before {
  transform: scaleX(1);
  opacity: 1;
}

.azki-premium-header .menu > ul > li > a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.055);
}

.azki-premium-header .menu-item-has-children > a > i {
  font-size: 11px;
  margin: 0 2px 0 0;
  color: rgba(255, 255, 255, 0.6);
  transition: transform var(--az-h-normal) ease, color var(--az-h-fast) ease;
}

.azki-premium-header .menu-item-has-children:hover > a > i,
.azki-premium-header .menu-item-has-children:focus-within > a > i {
  color: var(--az-h-cyan);
  transform: rotate(180deg);
}

/* -----------------------------------------------------------------
   Premium dropdown panels
   ----------------------------------------------------------------- */
@media (min-width: 1200px) {
  .azki-premium-header .menu > ul > li .menu-subs {
    top: calc(100% + 8px);
    right: 0;
    min-width: 245px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background:
      radial-gradient(circle at 90% 0, rgba(39, 170, 225, 0.13), transparent 35%),
      linear-gradient(150deg, rgba(16, 20, 40, 0.98), rgba(7, 10, 25, 0.98));
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transform: translateY(10px) scale(0.985);
    transform-origin: top right;
    transition: opacity 220ms ease, visibility 220ms ease, transform 280ms cubic-bezier(.2,.8,.2,1);
  }

  .azki-premium-header .menu > ul > li.menu-item-has-children:hover .menu-subs,
  .azki-premium-header .menu > ul > li.menu-item-has-children:focus-within .menu-subs {
    top: calc(100% + 8px);
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  .azki-premium-header .menu > ul > li .menu-subs > ul {
    margin: 0;
    padding: 0;
  }

  .azki-premium-header .menu > ul > li .menu-subs > ul > li {
    line-height: 1.3;
    margin: 1px 0;
  }

  .azki-premium-header .menu > ul > li .menu-subs > ul > li > a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 42px;
    padding: 9px 11px 9px 34px;
    border-radius: 11px;
    color: rgba(247, 248, 255, 0.86) !important;
    font-size: 14px;
    font-weight: 450;
    text-decoration: none;
    position: relative;
    transition: background var(--az-h-fast) ease, color var(--az-h-fast) ease, padding var(--az-h-fast) ease, transform var(--az-h-fast) ease;
  }

  .azki-premium-header .menu > ul > li .menu-subs > ul > li > a::after {
    content: "";
    position: absolute;
    left: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--az-h-cyan), var(--az-h-pink));
    opacity: 0.35;
    box-shadow: 0 0 0 4px rgba(39, 170, 225, 0.04);
    transition: opacity var(--az-h-fast) ease, transform var(--az-h-fast) ease, box-shadow var(--az-h-fast) ease;
  }

  .azki-premium-header .menu > ul > li .menu-subs > ul > li > a:hover,
  .azki-premium-header .menu > ul > li .menu-subs > ul > li > a:focus-visible {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(39, 170, 225, 0.11), rgba(236, 0, 140, 0.055));
    padding-right: 15px;
    transform: translateX(-2px);
  }

  .azki-premium-header .menu > ul > li .menu-subs > ul > li > a:hover::after,
  .azki-premium-header .menu > ul > li .menu-subs > ul > li > a:focus-visible::after {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 0 5px rgba(39, 170, 225, 0.08), 0 0 14px rgba(39, 170, 225, 0.35);
  }
}

/* -----------------------------------------------------------------
   Header actions
   ----------------------------------------------------------------- */
.azki-premium-header .header-item-right {
  flex: 0 0 auto;
}

.azki-premium-header .headeraction ul {
  gap: 8px;
  margin: 0;
  padding: 0;
}

.azki-premium-header .header-item-right .menu-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff !important;
  background: linear-gradient(145deg, rgba(68, 94, 255, 0.95), rgba(39, 170, 225, 0.92));
  box-shadow: 0 10px 24px rgba(42, 104, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform var(--az-h-fast) ease, box-shadow var(--az-h-fast) ease, filter var(--az-h-fast) ease;
}

.azki-premium-header .header-item-right .menu-icon:hover,
.azki-premium-header .header-item-right .menu-icon:focus-visible {
  transform: translateY(-2px) rotate(-5deg);
  filter: saturate(1.12);
  box-shadow: 0 13px 30px rgba(42, 104, 255, 0.34), 0 0 0 4px rgba(39, 170, 225, 0.08);
}

.azki-premium-header .header-btn {
  min-height: 44px;
  line-height: 44px;
  padding: 0 17px;
  border-radius: 13px;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.1px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
  transition: transform var(--az-h-fast) ease, box-shadow var(--az-h-fast) ease, border-color var(--az-h-fast) ease, background var(--az-h-fast) ease;
}

.azki-premium-header .header-btn::after {
  display: none;
}

.azki-premium-header .header-btn--seo {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(39, 170, 225, 0.34);
}

.azki-premium-header .header-btn--seo:hover,
.azki-premium-header .header-btn--seo:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(39, 170, 225, 0.75);
  background: rgba(39, 170, 225, 0.13) !important;
  box-shadow: 0 10px 24px rgba(39, 170, 225, 0.12), 0 0 0 4px rgba(39, 170, 225, 0.055);
}

.azki-premium-header .header-btn--order {
  color: #fff !important;
  border-color: rgba(255, 139, 36, 0.55);
  background: linear-gradient(135deg, var(--az-h-orange), var(--az-h-orange-2)) !important;
  box-shadow: 0 12px 26px rgba(255, 93, 25, 0.23);
}

.azki-premium-header .header-btn--order:hover,
.azki-premium-header .header-btn--order:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 184, 91, 0.8);
  box-shadow: 0 16px 32px rgba(255, 93, 25, 0.32), 0 0 0 4px rgba(255, 109, 25, 0.07);
}

/* -----------------------------------------------------------------
   Tablet / mobile drawer — RTL-native and consistent with desktop.
   Existing Blueket menu behavior is preserved; this file only styles it.
   ----------------------------------------------------------------- */
@media (max-width: 1199px) {
  .azki-premium-header {
    top: 8px;
    height: 72px;
  }

  .azki-premium-header .wrapper {
    min-height: 62px;
    padding: 5px 10px;
    border-radius: 19px;
  }

  .azki-premium-header .header-item-left {
    width: 165px;
    min-width: 165px;
    height: 50px;
  }

  .azki-premium-header .brandlogo {
    height: 50px;
  }

  .azki-premium-header .logo-svg {
    width: 162px;
    max-width: 162px;
    right: -41px;
  }

  .azki-premium-header .header-item-center {
    flex: 0 0 auto;
  }

  .azki-premium-header .menu {
    top: 0;
    right: 0;
    left: auto;
    width: min(88vw, 390px);
    max-width: 390px;
    height: 100dvh;
    padding: 0 0 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    background:
      radial-gradient(circle at 90% 0, rgba(39, 170, 225, 0.15), transparent 28%),
      linear-gradient(155deg, rgba(15, 18, 37, 0.995), rgba(6, 8, 20, 0.995));
    box-shadow: -30px 0 70px rgba(0, 0, 0, 0.44);
    transform: translateX(105%);
    opacity: 1;
    transition: transform 360ms cubic-bezier(.2,.8,.2,1);
  }

  .azki-premium-header .menu.active {
    transform: translateX(0);
  }

  .azki-premium-header .menu .menu-mobile-header {
    position: sticky;
    top: 0;
    height: 64px;
    padding: 7px 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 11, 27, 0.92);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  .azki-premium-header .menu .menu-mobile-title {
    color: #fff;
    font-size: 14px;
    font-weight: 650;
  }

  .azki-premium-header .menu .menu-mobile-title:empty::before {
    content: "منوی ازکی وب";
    color: rgba(255, 255, 255, 0.88);
  }

  .azki-premium-header .menu .menu-mobile-header .menu-mobile-close,
  .azki-premium-header .menu .menu-mobile-header .menu-mobile-arrow {
    width: 43px;
    height: 43px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .azki-premium-header .menu .menu-section {
    height: calc(100dvh - 64px);
    padding: 12px 12px 26px;
  }

  .azki-premium-header .menu > ul > li {
    margin: 3px 0;
    border: 0;
  }

  .azki-premium-header .menu > ul > li > a {
    width: 100%;
    height: auto;
    min-height: 50px;
    line-height: 1.5;
    justify-content: flex-start;
    padding: 12px 15px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: rgba(248, 249, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.025);
    font-size: 15px;
  }

  .azki-premium-header .menu > ul > li > a::before {
    right: 15px;
    left: auto;
    bottom: 9px;
    width: 26px;
  }

  .azki-premium-header .menu > ul > li > a:hover,
  .azki-premium-header .menu > ul > li > a:focus-visible {
    background: rgba(255, 255, 255, 0.065);
    border-color: rgba(255, 255, 255, 0.07);
    transform: none;
  }

  .azki-premium-header .menu > ul > li > a i {
    right: auto;
    left: 4px;
    top: 50%;
    width: 42px;
    height: 42px;
    transform: translateY(-50%) rotate(90deg);
    color: rgba(255, 255, 255, 0.55);
  }

  .azki-premium-header .menu > ul > li .menu-subs,
  .azki-premium-header .menu > ul > li .menu-subs.menu-mega {
    top: 0;
    right: 0;
    left: auto;
    width: 100%;
    height: 100%;
    padding: 78px 12px 22px;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle at 90% 0, rgba(236, 0, 140, 0.1), transparent 32%),
      linear-gradient(155deg, #11152d, #080a19);
    box-shadow: none;
  }

  .azki-premium-header .menu > ul > li .menu-subs > ul > li > a {
    width: 100%;
    display: block;
    padding: 13px 15px;
    margin: 3px 0;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 12px;
    color: rgba(248, 249, 255, 0.84) !important;
    background: rgba(255, 255, 255, 0.025);
    font-size: 14px;
  }

  .azki-premium-header .menu > ul > li .menu-subs > ul > li > a:hover,
  .azki-premium-header .menu > ul > li .menu-subs > ul > li > a:focus-visible {
    padding-right: 18px;
    color: #fff !important;
    background: rgba(39, 170, 225, 0.085);
    border-color: rgba(39, 170, 225, 0.16);
  }

  .azki-premium-header .overlay {
    z-index: 105;
    background: rgba(3, 5, 15, 0.72);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }

  .azki-premium-header .menu-mobile-toggle {
    width: 42px;
    height: 42px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
  }

  .azki-premium-header .menu-mobile-toggle span,
  .azki-premium-header.sticky .menu-mobile-toggle span,
  .darkmode .azki-premium-header .menu-mobile-toggle span {
    width: 20px;
    height: 2px;
    left: 10px;
    background: #fff;
  }

  .azki-premium-header .menu-mobile-toggle span:nth-child(1) { top: 12px; }
  .azki-premium-header .menu-mobile-toggle span:nth-child(2),
  .azki-premium-header .menu-mobile-toggle span:nth-child(3) { top: 19px; }
  .azki-premium-header .menu-mobile-toggle span:nth-child(4) { top: 26px; }
}

@media (max-width: 900px) {
  .azki-premium-header .header-btn--seo {
    display: none;
  }
}

@media (max-width: 767px) {
  .azki-premium-header {
    top: 6px;
    height: 66px;
  }

  .azki-premium-header .container {
    padding-right: 8px;
    padding-left: 8px;
  }

  .azki-premium-header .wrapper {
    min-height: 56px;
    padding: 4px 7px;
    gap: 7px;
    border-radius: 17px;
  }

  .azki-premium-header .header-item-left {
    width: 128px;
    min-width: 128px;
    height: 46px;
  }

  .azki-premium-header .brandlogo {
    height: 46px;
  }

  .azki-premium-header .logo-svg {
    width: 126px;
    max-width: 126px;
    right: -31px;
  }

  .azki-premium-header .brandlogo:hover .logo-svg,
  .azki-premium-header .brandlogo:focus-visible .logo-svg {
    transform: translateX(-2.65em);
  }

  .azki-premium-header .headeraction ul {
    gap: 5px;
  }

  .azki-premium-header .header-btn--order {
    min-height: 40px;
    line-height: 40px;
    padding: 0 11px;
    border-radius: 11px;
    font-size: 12px;
  }

  .azki-premium-header .header-item-right .menu-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 14px;
  }

  .azki-premium-header .menu-mobile-toggle {
    width: 40px;
    height: 40px;
  }

  .azki-premium-header .menu-mobile-toggle span { left: 9px; }
  .azki-premium-header .menu-mobile-toggle span:nth-child(1) { top: 11px; }
  .azki-premium-header .menu-mobile-toggle span:nth-child(2),
  .azki-premium-header .menu-mobile-toggle span:nth-child(3) { top: 18px; }
  .azki-premium-header .menu-mobile-toggle span:nth-child(4) { top: 25px; }
}

@media (max-width: 520px) {
  .azki-premium-header .header-btn--order {
    display: none;
  }

  .azki-premium-header .header-item-left {
    width: 138px;
    min-width: 138px;
  }

  .azki-premium-header .logo-svg {
    width: 136px;
    max-width: 136px;
    right: -34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .azki-premium-header *,
  .azki-premium-header *::before,
  .azki-premium-header *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* =================================================================
   AZKIWEB P1.3 PREMIUM HEADER — V2 REFINEMENT
   Signature: AZKIWEB-P1.3-PREMIUM-HEADER-V7
   Scope: Homepage only until visual approval, then shared header rollout.
   Changes: contact control, mobile hamburger, mobile CTA action deck.
   ================================================================= */

/* Desktop contact control: asymmetric glass-tech key, not a generic circle. */
.azki-premium-header .header-item-right .premium-phone {
  position: relative;
  width: 52px;
  height: 44px;
  min-width: 52px;
  border-radius: 15px 15px 15px 7px;
  border: 1px solid rgba(116, 222, 255, 0.42);
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.28), transparent 28%),
    linear-gradient(145deg, rgba(37, 215, 255, .96) 0%, rgba(68, 93, 255, .98) 56%, rgba(134, 51, 255, .96) 100%);
  box-shadow:
    0 12px 28px rgba(35, 113, 255, .30),
    0 0 0 1px rgba(111, 218, 255, .05),
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -8px 18px rgba(33, 22, 118, .16);
  overflow: visible;
  isolation: isolate;
  transform: translateZ(0);
}

.azki-premium-header .header-item-right .premium-phone::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: 11px 11px 11px 5px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(155deg, rgba(255,255,255,.07), rgba(255,255,255,0));
  pointer-events: none;
}

.azki-premium-header .header-item-right .premium-phone::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #75ffba;
  border: 2px solid rgba(5, 12, 29, .78);
  box-shadow: 0 0 0 4px rgba(117,255,186,.08), 0 0 13px rgba(117,255,186,.78);
  animation: azPhoneSignal 2.2s ease-in-out infinite;
}

.azki-premium-header .header-item-right .premium-phone i {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 16px;
  transform: rotate(-9deg);
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.22));
  transition: transform 260ms cubic-bezier(.2,.8,.2,1);
}

.azki-premium-header .header-item-right .premium-phone:hover,
.azki-premium-header .header-item-right .premium-phone:focus-visible {
  transform: translateY(-3px) scale(1.035);
  filter: saturate(1.16) brightness(1.05);
  border-color: rgba(159, 235, 255, .78);
  box-shadow:
    0 18px 36px rgba(35, 113, 255, .38),
    0 0 0 4px rgba(39, 170, 225, .07),
    0 0 26px rgba(101, 80, 255, .18),
    inset 0 1px 0 rgba(255,255,255,.44);
}

.azki-premium-header .header-item-right .premium-phone:hover i,
.azki-premium-header .header-item-right .premium-phone:focus-visible i {
  transform: rotate(-16deg) scale(1.08);
}

@keyframes azPhoneSignal {
  0%, 100% { transform: scale(.86); opacity: .78; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* Mobile action deck is intentionally absent on desktop. */
.azki-premium-header .az-mobile-action-deck {
  display: none;
}

@media (max-width: 1199px) {
  /* Header on mobile is intentionally minimal: brand + one premium control. */
  .azki-premium-header .header-btn,
  .azki-premium-header .header-item-right .premium-phone {
    display: none !important;
  }

  .azki-premium-header .headeraction ul {
    gap: 0;
  }

  /* Drawer becomes a stable flex shell: nav scroll area + always-visible CTAs. */
  .azki-premium-header .menu {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .azki-premium-header .menu .menu-section {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    height: auto;
    min-height: 0;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(93, 141, 255, .42) transparent;
    padding: 12px 12px 16px;
  }

  /* Mobile navigation must be vertical — one full-width item per row. */
  .azki-premium-header .menu .menu-section > li {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .azki-premium-header .menu .menu-section > li > a {
    display: flex !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .azki-premium-header .menu .menu-section::-webkit-scrollbar { width: 5px; }
  .azki-premium-header .menu .menu-section::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(var(--az-h-cyan), var(--az-h-blue), var(--az-h-pink));
  }

  /* High-end hamburger: horizontal strokes with varied lengths and glass shell. */
  .azki-premium-header .menu-mobile-toggle {
    display: flex !important;
    position: relative;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 44px;
    min-width: 48px;
    padding: 0 !important;
    gap: 0;
    border-radius: 14px 14px 14px 7px;
    border: 1px solid rgba(255,255,255,.14) !important;
    background:
      radial-gradient(circle at 28% 20%, rgba(39,170,225,.16), transparent 35%),
      linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 10px 22px rgba(0,0,0,.20);
    overflow: hidden;
    cursor: pointer;
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
  }

  .azki-premium-header .menu-mobile-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 22%, rgba(255,255,255,.16) 46%, transparent 66%);
    transform: translateX(-125%);
    transition: transform 540ms cubic-bezier(.2,.8,.2,1);
  }

  .azki-premium-header .menu-mobile-toggle:hover::before,
  .azki-premium-header .menu-mobile-toggle:focus-visible::before {
    transform: translateX(125%);
  }

  .azki-premium-header .menu-mobile-toggle:hover,
  .azki-premium-header .menu-mobile-toggle:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(83, 203, 255, .48) !important;
    background: linear-gradient(145deg, rgba(39,170,225,.15), rgba(92,82,255,.10)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 13px 28px rgba(32, 95, 224, .20);
  }

  .azki-premium-header .menu-mobile-toggle span,
  .azki-premium-header.sticky .menu-mobile-toggle span,
  .darkmode .azki-premium-header .menu-mobile-toggle span {
    display: block !important;
    position: absolute !important;
    right: auto !important;
    height: 2px !important;
    border-radius: 99px;
    background: linear-gradient(90deg, #75e7ff 0%, #fff 48%, #c6a8ff 100%) !important;
    box-shadow: 0 0 9px rgba(93, 197, 255, .16);
    opacity: 1;
    transform-origin: center;
    transition: width 220ms ease, transform 280ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease, top 280ms ease;
  }

  .azki-premium-header .menu-mobile-toggle span:nth-child(1) {
    top: 13px !important;
    left: 12px !important;
    width: 24px !important;
  }
  .azki-premium-header .menu-mobile-toggle span:nth-child(2) {
    top: 20px !important;
    left: 16px !important;
    width: 20px !important;
  }
  .azki-premium-header .menu-mobile-toggle span:nth-child(3) {
    top: 20px !important;
    left: 16px !important;
    width: 20px !important;
    opacity: 0;
  }
  .azki-premium-header .menu-mobile-toggle span:nth-child(4) {
    top: 27px !important;
    left: 12px !important;
    width: 24px !important;
  }

  /* Existing JS controls menu.active; :has gives the trigger a premium X state without JS changes. */
  .azki-premium-header:has(.menu.active) .menu-mobile-toggle span:nth-child(1) {
    top: 20px !important;
    transform: rotate(45deg);
  }
  .azki-premium-header:has(.menu.active) .menu-mobile-toggle span:nth-child(2),
  .azki-premium-header:has(.menu.active) .menu-mobile-toggle span:nth-child(3) {
    opacity: 0;
    transform: scaleX(.25);
  }
  .azki-premium-header:has(.menu.active) .menu-mobile-toggle span:nth-child(4) {
    top: 20px !important;
    transform: rotate(-45deg);
  }

  /* Premium CTA deck at the bottom of the mobile drawer. */
  .azki-premium-header .az-mobile-action-deck {
    display: block;
    flex: 0 0 auto;
    padding: 12px 12px max(14px, env(safe-area-inset-bottom));
    border-top: 0;
    background: transparent !important;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .azki-premium-header .az-mobile-action-deck__eyebrow {
    margin: 0 4px 8px;
    color: rgba(230, 236, 255, .52);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
  }

  .azki-premium-header .az-mobile-action-deck__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .azki-premium-header .az-mobile-action {
    min-width: 0;
    min-height: 68px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 8px;
    padding: 9px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px;
    color: #fff !important;
    text-decoration: none;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }

  .azki-premium-header .az-mobile-action::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .9;
  }

  .azki-premium-header .az-mobile-action--seo::before {
    background: linear-gradient(145deg, rgba(21,105,166,.24), rgba(65,71,190,.12));
  }
  .azki-premium-header .az-mobile-action--order::before {
    background: linear-gradient(145deg, rgba(236,0,140,.19), rgba(255,134,0,.13));
  }

  .azki-premium-header .az-mobile-action--seo { border-color: rgba(39,170,225,.20); }
  .azki-premium-header .az-mobile-action--order { border-color: rgba(255,121,49,.23); }

  .azki-premium-header .az-mobile-action__icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px 11px 11px 5px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 13px;
  }

  .azki-premium-header .az-mobile-action--seo .az-mobile-action__icon {
    color: #7de7ff;
    box-shadow: inset 0 0 18px rgba(39,170,225,.08);
  }
  .azki-premium-header .az-mobile-action--order .az-mobile-action__icon {
    color: #ffd195;
    box-shadow: inset 0 0 18px rgba(255,102,31,.08);
  }

  .azki-premium-header .az-mobile-action__copy {
    min-width: 0;
    display: block;
    line-height: 1.2;
  }
  .azki-premium-header .az-mobile-action__copy strong {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }
  .azki-premium-header .az-mobile-action__copy small {
    display: block;
    overflow: hidden;
    color: rgba(233,237,255,.56);
    font-size: 9px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .azki-premium-header .az-mobile-action__arrow {
    margin: 0 !important;
    color: rgba(255,255,255,.45);
    font-size: 10px;
  }

  .azki-premium-header .az-mobile-action:active {
    transform: scale(.985);
  }

  .azki-premium-header .az-mobile-call {
    min-height: 54px;
    display: grid;
    grid-template-columns: 8px 34px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 15px 15px 15px 7px;
    border: 1px solid rgba(109, 238, 190, .16);
    color: #fff !important;
    text-decoration: none;
    background: linear-gradient(145deg, rgba(36, 156, 133, .13), rgba(27, 64, 128, .11));
  }

  .azki-premium-header .az-mobile-call__signal {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #75ffba;
    box-shadow: 0 0 12px rgba(117,255,186,.7);
    animation: azPhoneSignal 2.2s ease-in-out infinite;
  }
  .azki-premium-header .az-mobile-call__icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px 11px 11px 5px;
    color: #94ffd1;
    background: rgba(117,255,186,.07);
    border: 1px solid rgba(117,255,186,.12);
  }
  .azki-premium-header .az-mobile-call__copy {
    min-width: 0;
    line-height: 1.18;
  }
  .azki-premium-header .az-mobile-call__copy strong {
    display: block;
    font-size: 12px;
    font-weight: 800;
  }
  .azki-premium-header .az-mobile-call__copy small {
    display: block;
    margin-top: 3px;
    color: rgba(232,244,240,.52);
    font-size: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .azki-premium-header .az-mobile-call__badge {
    padding: 4px 6px;
    border-radius: 8px;
    color: #91ffd0;
    background: rgba(117,255,186,.06);
    border: 1px solid rgba(117,255,186,.10);
    font: 700 8px/1.2 Consolas, monospace;
    letter-spacing: .8px;
  }

  /* Mobile drawer header gets a subtle brand signature. */
  .azki-premium-header .menu .menu-mobile-header {
    height: 66px;
    padding: 8px 10px;
    background:
      radial-gradient(circle at 88% 0, rgba(39,170,225,.12), transparent 32%),
      rgba(8, 11, 27, .94);
  }
  .azki-premium-header .menu .menu-mobile-title:empty::before {
    content: "AZKI WEB  •  منو";
    font-size: 12px;
    letter-spacing: .15px;
  }
}

@media (max-width: 767px) {
  .azki-premium-header .wrapper {
    padding-right: 8px;
    padding-left: 8px;
  }

  .azki-premium-header .menu-mobile-toggle {
    width: 46px;
    height: 42px;
    min-width: 46px;
  }
  .azki-premium-header .menu-mobile-toggle span:nth-child(1),
  .azki-premium-header .menu-mobile-toggle span:nth-child(4) {
    left: 11px !important;
  }
  .azki-premium-header .menu-mobile-toggle span:nth-child(2),
  .azki-premium-header .menu-mobile-toggle span:nth-child(3) {
    left: 15px !important;
  }
}

@media (max-width: 390px) {
  .azki-premium-header .az-mobile-action-deck__grid {
    grid-template-columns: 1fr;
  }
  .azki-premium-header .az-mobile-action {
    min-height: 58px;
  }
}

/* =================================================================
   MOBILE SUBMENU EXPERIENCE — FULL DRAWER / NO TINY NESTED SCROLLER
   Signature: AZKIWEB-P1.3-PREMIUM-HEADER-V7
   The legacy submenu was sizing itself against the parent <li>, which
   could leave only a small scrollable panel on mobile. On mobile/tablet
   every submenu now uses the full drawer area beneath the mobile header.
   ================================================================= */
@media (max-width: 1199px) {
  .azki-premium-header .menu > ul > li .menu-subs,
  .azki-premium-header .menu > ul > li .menu-subs.menu-mega {
    position: fixed !important;
    top: 64px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(88vw, 390px) !important;
    height: calc(100dvh - 64px) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px 12px max(22px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(93, 141, 255, .42) transparent;
    z-index: 130 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 88% 0, rgba(39,170,225,.11), transparent 31%),
      radial-gradient(circle at 10% 100%, rgba(236,0,140,.065), transparent 34%),
      linear-gradient(160deg, rgba(15,18,37,.995), rgba(6,8,20,.998)) !important;
    box-shadow: none !important;
  }

  .azki-premium-header .menu > ul > li .menu-subs::-webkit-scrollbar {
    width: 5px;
  }

  .azki-premium-header .menu > ul > li .menu-subs::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(var(--az-h-cyan), var(--az-h-blue), var(--az-h-pink));
  }

  .azki-premium-header .menu > ul > li .menu-subs > ul {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Services/mega submenu uses two compact columns so almost all choices
     remain visible without forcing the user through a tiny inner scroller. */
  .azki-premium-header .menu > ul > li .menu-subs.menu-mega > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .azki-premium-header .menu > ul > li .menu-subs > ul > li {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .azki-premium-header .menu > ul > li .menu-subs > ul > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    border: 1px solid rgba(255,255,255,.065) !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
  }

  .azki-premium-header .menu > ul > li .menu-subs > ul > li > a:active {
    transform: scale(.985);
  }
}

@media (max-width: 355px) {
  .azki-premium-header .menu > ul > li .menu-subs.menu-mega > ul {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* =================================================================
   MOBILE QUICK ACCESS — RAISED POSITION
   Signature: AZKIWEB-P1.3-PREMIUM-HEADER-V7
   Raises the quick-access deck above the absolute bottom edge of the
   mobile drawer while keeping the transparent integrated appearance.
   ================================================================= */
@media (max-width: 1199px) {
  .azki-premium-header .az-mobile-action-deck {
    margin-bottom: clamp(34px, 7vh, 68px) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-height: 700px) and (max-width: 1199px) {
  .azki-premium-header .az-mobile-action-deck {
    margin-bottom: 24px !important;
  }
}

/* Shared-header active section state for CMS/service routes. */
.azki-premium-header .menu > ul > li.az-nav-section-current > a {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.055);
}
.azki-premium-header .menu > ul > li.az-nav-section-current > a::before {
  transform: scaleX(1);
  opacity: 1;
}