/* NoorVista 3.0.126 — refined public services mega menu.
   A restrained clinical navigation pattern: clear hierarchy, quiet motion,
   no full-row hover fills, no decorative arrows, and hidden scrollbars. */

@media (min-width: 861px) {
  body:not([data-panel-role]) .navbar .mega-menu {
    width: min(1010px, calc(100vw - 44px)) !important;
    max-height: min(68vh, 590px) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 0 !important;
    padding: 16px 14px 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    border: 1px solid rgba(148, 163, 184, .24) !important;
    border-radius: 20px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .995), rgba(248, 252, 254, .985)) !important;
    box-shadow:
      0 24px 58px rgba(15, 23, 42, .12),
      0 2px 10px rgba(15, 23, 42, .04) !important;
    backdrop-filter: blur(18px) saturate(118%) !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 0 !important;
    gap: 1px !important;
    padding: 8px 26px 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col + .mega-col {
    border-inline-start: 1px solid rgba(148, 163, 184, .20) !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col strong {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 11px !important;
    padding: 0 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #123f59 !important;
    box-shadow: none !important;
    text-align: right !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.65 !important;
    letter-spacing: -.22px !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col strong::before {
    content: none !important;
    display: none !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col strong::after {
    content: "" !important;
    position: absolute !important;
    inset-inline-start: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: 36px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #0ea5b7, #38bdf8) !important;
    opacity: .92 !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 37px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 7px 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #526174 !important;
    box-shadow: none !important;
    text-align: right !important;
    font-size: 13.5px !important;
    font-weight: 760 !important;
    line-height: 1.55 !important;
    transform: translateX(0) !important;
    transition:
      color .18s ease,
      transform .18s ease !important;
  }

  /* Short accent line under the beginning of the hovered/current label. */
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a::before {
    content: "" !important;
    position: absolute !important;
    inset-inline-start: 0 !important;
    bottom: 4px !important;
    display: block !important;
    width: 0 !important;
    height: 1.5px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #0891b2, #38bdf8) !important;
    opacity: 0 !important;
    transition: width .18s ease, opacity .18s ease !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col a::after {
    content: none !important;
    display: none !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col a:hover,
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a:focus-visible,
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a.active,
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a[aria-current="page"] {
    padding: 7px 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #087f98 !important;
    box-shadow: none !important;
    transform: translateX(-4px) !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col a:hover::before,
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a:focus-visible::before,
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a.active::before,
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a[aria-current="page"]::before {
    width: 28px !important;
    opacity: 1 !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col a:focus-visible {
    outline: 2px solid rgba(14, 165, 233, .32) !important;
    outline-offset: 3px !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .nv-lasik-guide-menu {
    background: transparent !important;
    border-color: rgba(148, 163, 184, .20) !important;
  }
}

@media (min-width: 861px) and (max-height: 760px) {
  body:not([data-panel-role]) .navbar .mega-menu {
    max-height: calc(100vh - 108px) !important;
    padding-block: 11px !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col {
    padding-block: 5px 8px !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col a {
    min-height: 34px !important;
    padding-block: 5px 7px !important;
  }
}

@media (max-width: 860px) {
  body:not([data-panel-role]) .navbar .mega-menu {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col {
    gap: 0 !important;
    padding: 11px 13px 13px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col:last-child {
    border-bottom: 0 !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col strong {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    margin: 0 0 7px !important;
    padding: 0 0 9px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #0f526e !important;
    box-shadow: none !important;
    text-align: right !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col strong::before {
    content: none !important;
    display: none !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col strong::after {
    content: "" !important;
    position: absolute !important;
    inset-inline-start: 0 !important;
    bottom: 0 !important;
    width: 30px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #0ea5b7, #38bdf8) !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col a {
    position: relative !important;
    min-height: 36px !important;
    padding: 7px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #4b5b6e !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 740 !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col a::before {
    content: "" !important;
    position: absolute !important;
    inset-inline-start: 0 !important;
    bottom: 3px !important;
    width: 0 !important;
    height: 1.5px !important;
    border-radius: 999px !important;
    background: #0ea5b7 !important;
    opacity: 0 !important;
    transition: width .16s ease, opacity .16s ease !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col a::after {
    content: none !important;
    display: none !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col a:active,
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a.active,
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a[aria-current="page"] {
    background: transparent !important;
    color: #087f98 !important;
    box-shadow: none !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col a:active::before,
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a.active::before,
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a[aria-current="page"]::before {
    width: 24px !important;
    opacity: 1 !important;
  }
}

/* NoorVista 3.0.127 — viewport-centred full-width mega menu.
   The dropdown is anchored to the navbar instead of the Services item, so it
   cannot drift beyond the left edge. Rows also receive enough vertical room
   for long Persian labels without crowding. */
@media (min-width: 861px) {
  body:not([data-panel-role]) .navbar {
    overflow: visible !important;
  }

  body:not([data-panel-role]) .navbar .nav-inner,
  body:not([data-panel-role]) .navbar nav,
  body:not([data-panel-role]) .navbar .menu,
  body:not([data-panel-role]) .navbar .menu > li.has-mega {
    position: static !important;
  }

  /* The old bridge was positioned relative to the Services item. Once the
     panel spans the navbar it is unnecessary and could create a stray layer. */
  body:not([data-panel-role]) .navbar .menu > li.has-mega::after {
    content: none !important;
    display: none !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu {
    top: calc(100% - 1px) !important;
    right: auto !important;
    left: 50% !important;
    width: min(1900px, calc(100% - 24px)) !important;
    max-width: none !important;
    max-height: min(650px, calc(100dvh - 132px)) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 20px clamp(18px, 2.5vw, 48px) 24px !important;
    border-radius: 0 0 22px 22px !important;
    transform: translate(-50%, 10px) !important;
    transform-origin: top center !important;
  }

  body:not([data-panel-role]) .navbar .has-mega:hover .mega-menu,
  body:not([data-panel-role]) .navbar .has-mega:focus-within .mega-menu,
  body:not([data-panel-role]) .navbar .has-mega.submenu-open .mega-menu,
  body:not([data-panel-role]) .navbar .has-mega.is-open .mega-menu,
  body:not([data-panel-role]) .navbar .has-mega.open .mega-menu {
    transform: translate(-50%, 0) !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col {
    gap: 5px !important;
    padding: 10px clamp(20px, 2.4vw, 42px) 16px !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col strong {
    margin-bottom: 14px !important;
    padding-bottom: 14px !important;
    font-size: 15.5px !important;
    line-height: 1.75 !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col a {
    min-height: 45px !important;
    padding: 9px 8px 10px !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col a:hover,
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a:focus-visible,
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a.active,
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a[aria-current="page"] {
    padding: 9px 8px 10px !important;
  }
}

/* Shorter desktop windows still keep readable rows, with the panel itself
   scrolling only when the available viewport genuinely runs out. */
@media (min-width: 861px) and (max-height: 700px) {
  body:not([data-panel-role]) .navbar .mega-menu {
    max-height: calc(100dvh - 124px) !important;
    padding-block: 14px 18px !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col {
    gap: 3px !important;
    padding-block: 6px 10px !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col strong {
    margin-bottom: 9px !important;
    padding-bottom: 10px !important;
  }

  body:not([data-panel-role]) .navbar .mega-menu .mega-col a,
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a:hover,
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a:focus-visible,
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a.active,
  body:not([data-panel-role]) .navbar .mega-menu .mega-col a[aria-current="page"] {
    min-height: 40px !important;
    padding-block: 7px 8px !important;
    line-height: 1.65 !important;
  }
}

/* Keep the hover path continuous from the Services label to the navbar-wide
   panel. The bridge is attached to the label itself, so it does not open the
   menu when the pointer crosses unrelated parts of the navbar. */
@media (min-width: 861px) {
  body:not([data-panel-role]) .navbar .has-mega > a::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    right: -20px !important;
    left: -20px !important;
    width: auto !important;
    height: 30px !important;
    background: transparent !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}