/* Qanattar Corporate Site v0.8.0.5 — audited mobile navigation isolation */

/* Desktop: drawer never participates in layout. */
.qcs-v0805 #qcs-mobile-navigation{display:none}

@media (max-width:820px){
  html.qcs-menu-open,
  body.qcs-menu-open{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  /* AUDIT FIX: visual-v0803 used body.qcs-menu-open .qcs-nav with !important
     and higher specificity than v0.8.0.4. Retire legacy nav deterministically. */
  html.qcs-menu-open body.qcs-menu-open .qcs-v0805 #qcs-navigation.qcs-nav,
  body.qcs-menu-open .qcs-v0805 #qcs-navigation.qcs-nav,
  .qcs-v0805 #qcs-navigation.qcs-nav{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    position:static!important;
    inset:auto!important;
    width:0!important;
    height:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    transform:none!important;
  }

  .qcs-v0805 .qcs-header{
    position:sticky;
    top:0;
    z-index:2147483001!important;
    isolation:isolate;
  }

  .qcs-v0805 .qcs-menu-toggle{
    position:relative;
    z-index:2147483002!important;
  }

  /* Drawer is now a sibling of header, not a child of the sticky header.
     This removes inherited clipping/stacking contexts and makes the overlay
     independent from historical header/navigation CSS. */
  .qcs-v0805 #qcs-mobile-navigation.qcs-mobile-drawer{
    display:none!important;
    position:fixed!important;
    z-index:2147483000!important;
    left:0!important;
    right:0!important;
    top:var(--qcs-mobile-drawer-top,74px)!important;
    bottom:auto!important;
    width:100vw!important;
    width:100dvw!important;
    height:var(--qcs-mobile-drawer-height,calc(100dvh - var(--qcs-mobile-drawer-top,74px)))!important;
    max-width:none!important;
    max-height:none!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:none!important;
    border:0!important;
    border-radius:0!important;
    background:#061126!important;
    background:
      radial-gradient(circle at 12% -4%,rgba(43,131,255,.21),transparent 38%),
      radial-gradient(circle at 94% 4%,rgba(237,43,72,.08),transparent 30%),
      linear-gradient(180deg,#061126 0%,#07152d 52%,#050b19 100%)!important;
    box-shadow:0 24px 70px rgba(0,0,0,.58),inset 0 1px 0 rgba(92,170,255,.18)!important;
    color:#fff!important;
    scrollbar-width:thin;
    scrollbar-color:rgba(79,177,255,.58) transparent;
  }

  .qcs-v0805 #qcs-mobile-navigation.qcs-mobile-drawer.is-open{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .qcs-v0805 #qcs-mobile-navigation::-webkit-scrollbar{width:5px}
  .qcs-v0805 #qcs-mobile-navigation::-webkit-scrollbar-thumb{background:rgba(79,177,255,.58);border-radius:999px}

  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-drawer-inner{
    display:block!important;
    width:100%!important;
    max-width:680px!important;
    min-width:0!important;
    margin:0 auto!important;
    padding:20px 18px calc(42px + env(safe-area-inset-bottom))!important;
    box-sizing:border-box!important;
  }

  .qcs-v0805 #qcs-mobile-navigation .qcs-lang-switch-drawer{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:9px!important;
    width:100%!important;
    margin:0 0 18px!important;
  }
  .qcs-v0805 #qcs-mobile-navigation .qcs-lang-switch-drawer>span{display:none!important}
  .qcs-v0805 #qcs-mobile-navigation .qcs-lang-switch-drawer a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    padding:10px 6px!important;
    box-sizing:border-box!important;
    border:1px solid rgba(91,164,255,.28)!important;
    border-radius:13px!important;
    background:rgba(11,31,66,.9)!important;
    color:#aac3e5!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:.1em!important;
    text-decoration:none!important;
  }
  .qcs-v0805 #qcs-mobile-navigation .qcs-lang-switch-drawer a.is-active,
  .qcs-v0805 #qcs-mobile-navigation .qcs-lang-switch-drawer a[aria-current="page"]{
    color:#fff!important;
    border-color:rgba(62,169,255,.76)!important;
    background:linear-gradient(135deg,rgba(20,95,205,.86),rgba(9,42,94,.96))!important;
    box-shadow:0 0 26px rgba(38,142,255,.14),inset 0 1px 0 rgba(255,255,255,.08)!important;
  }

  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-nav{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:11px!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
  }

  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-nav-main,
  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-nav-section-title{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
    width:100%!important;
    min-width:0!important;
    min-height:58px!important;
    padding:15px 16px!important;
    box-sizing:border-box!important;
    border:1px solid rgba(91,164,255,.23)!important;
    border-radius:15px!important;
    background:linear-gradient(135deg,rgba(10,30,64,.98),rgba(7,21,47,.98))!important;
    color:#edf6ff!important;
    font-size:17px!important;
    line-height:1.25!important;
    font-weight:750!important;
    letter-spacing:0!important;
    text-decoration:none!important;
    white-space:normal!important;
  }

  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-nav-main b,
  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-nav-section-title b{
    flex:0 0 auto!important;
    color:#55b9ff!important;
    font-size:21px!important;
    font-weight:500!important;
  }

  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-nav-main.is-active,
  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-nav-section-title.is-active{
    border-color:rgba(54,165,255,.62)!important;
    background:linear-gradient(135deg,rgba(15,74,157,.96),rgba(8,34,76,.98))!important;
    box-shadow:0 0 25px rgba(30,128,255,.11)!important;
  }

  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-nav-services{
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }
  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-nav-services>.qcs-mobile-nav-section-title{margin-bottom:10px!important}
  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-service-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    width:100%!important;
  }
  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-service-grid>a{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
    width:100%!important;
    min-width:0!important;
    min-height:58px!important;
    padding:13px 15px!important;
    box-sizing:border-box!important;
    border:1px solid rgba(82,149,236,.18)!important;
    border-radius:13px!important;
    background:rgba(7,24,53,.94)!important;
    color:#dcecff!important;
    text-decoration:none!important;
  }
  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-service-grid>a.is-current{
    border-color:rgba(54,165,255,.56)!important;
    background:rgba(12,52,108,.92)!important;
  }
  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-service-grid strong{
    color:#f7fbff!important;
    font-size:15px!important;
    line-height:1.25!important;
  }
  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-service-grid span{
    color:#90add3!important;
    font-size:12px!important;
    line-height:1.4!important;
  }

  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-nav-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    width:100%!important;
    margin-top:8px!important;
    padding-top:17px!important;
    border-top:1px solid rgba(85,155,240,.18)!important;
  }
  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-nav-actions>a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    min-height:54px!important;
    padding:12px!important;
    border:1px solid rgba(76,158,255,.34)!important;
    border-radius:14px!important;
    background:rgba(11,35,76,.96)!important;
    color:#fff!important;
    font-size:14px!important;
    font-weight:800!important;
    text-align:center!important;
    text-decoration:none!important;
  }
  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-nav-actions>a:last-child{
    border-color:rgba(238,49,77,.46)!important;
    background:linear-gradient(135deg,rgba(159,24,51,.5),rgba(52,19,49,.84))!important;
  }
}

@media (max-width:420px){
  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-drawer-inner{padding:16px 14px calc(36px + env(safe-area-inset-bottom))!important}
  .qcs-v0805 #qcs-mobile-navigation .qcs-mobile-nav-actions{grid-template-columns:1fr!important}
}

@media (min-width:821px){
  .qcs-v0805 #qcs-mobile-navigation{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  .qcs-v0805 #qcs-mobile-navigation,
  .qcs-v0805 #qcs-mobile-navigation a,
  .qcs-v0805 .qcs-menu-toggle span{transition:none!important}
}