/*
========================================================
ASNETWORKZONE — WEBACHIEVER HEADER
Clean final implementation.
Old sticky/scroll patches intentionally removed.
========================================================
*/

:root {
    --asn-header-space: 128px;
}


/* =====================================================
   PAGE CLEARANCE
   ===================================================== */

body {
    padding-top: var(--asn-header-space) !important;
}


/* =====================================================
   FIXED WRAPPER
   ===================================================== */

#asn-rescue-header-wrap {
    position: fixed !important;
    top: 17px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 2147483000 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

.admin-bar #asn-rescue-header-wrap {
    top: 49px !important;
}


/* =====================================================
   OUTER SHELL
   ===================================================== */

#asn-rescue-header-shell {
    position: relative !important;
    width: min(1800px, calc(100% - 34px)) !important;
    margin: 0 auto !important;
    transition: width .28s ease !important;
    pointer-events: none !important;
}


/* =====================================================
   MAIN GLASS NAVBAR
   ===================================================== */

#asn-rescue-header {
    min-height: 92px !important;
    padding: 0 26px !important;

    border-radius: 36px !important;

    display: grid !important;
    grid-template-columns:
        minmax(155px, .8fr)
        auto
        minmax(155px, .8fr) !important;

    align-items: center !important;

    gap: 18px !important;

    position: relative !important;
    overflow: visible !important;

    pointer-events: auto !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.90),
            rgba(255,255,255,.67)
        ) !important;

    border:
        1px solid rgba(255,255,255,.90) !important;

    box-shadow:
        0 22px 60px rgba(44,52,90,.10),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    backdrop-filter:
        blur(24px) saturate(160%) !important;

    -webkit-backdrop-filter:
        blur(24px) saturate(160%) !important;

    transition:
        min-height .28s ease,
        border-radius .28s ease,
        box-shadow .28s ease,
        background .28s ease !important;
}


/* subtle glass shine */

#asn-rescue-header::before {
    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    border-radius: inherit !important;

    pointer-events: none !important;

    opacity: .35 !important;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255,255,255,.64) 18%,
            transparent 34%
        ) !important;
}

#asn-rescue-header > * {
    position: relative !important;
    z-index: 2 !important;
}


/* =====================================================
   WEBACHIEVER SCROLLED STATE
   ===================================================== */

#asn-rescue-header-wrap.asn-rescue-scrolled {
    top: 0 !important;
}

.admin-bar
#asn-rescue-header-wrap.asn-rescue-scrolled {
    top: 32px !important;
}

#asn-rescue-header-wrap.asn-rescue-scrolled
#asn-rescue-header-shell {
    width: 100% !important;
}

#asn-rescue-header-wrap.asn-rescue-scrolled
#asn-rescue-header {
    min-height: 74px !important;

    border-radius: 0 !important;

    box-shadow:
        0 12px 36px rgba(15,23,42,.12),
        inset 0 1px 0 rgba(255,255,255,.95)
        !important;
}


/* =====================================================
   BRAND
   ===================================================== */

.asn-rescue-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    min-width: 0 !important;

    text-decoration: none !important;
}

.asn-rescue-logo {
    display: block !important;

    width: 150px !important;
    height: 88px !important;

    max-width: 150px !important;

    object-fit: contain !important;

    margin: 0 !important;

    transition:
        width .28s ease,
        height .28s ease,
        transform .28s ease !important;
}

#asn-rescue-header-wrap.asn-rescue-scrolled
.asn-rescue-logo {
    width: 118px !important;
    height: 68px !important;
}


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

.asn-rescue-nav {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    padding: 7px !important;

    margin: 0 !important;

    border-radius: 999px !important;

    white-space: nowrap !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.54),
            rgba(255,255,255,.25)
        ) !important;

    border:
        1px solid rgba(255,255,255,.72) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.94),
        0 8px 24px rgba(15,23,42,.05)
        !important;

    backdrop-filter: blur(18px) !important;

    overflow: visible !important;
}


/* normal nav links */

.asn-rescue-nav > a,
.asn-nav-parent-button {
    min-height: 42px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 10px 14px !important;

    border-radius: 999px !important;

    border: 0 !important;

    background: transparent !important;

    color: #111827 !important;

    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    text-decoration: none !important;

    cursor: pointer !important;

    white-space: nowrap !important;

    box-shadow: none !important;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease !important;
}


.asn-rescue-nav > a:hover,
.asn-nav-parent-button:hover {
    color: #4f46e5 !important;

    background:
        rgba(255,255,255,.76) !important;
}


/* active item */

.asn-rescue-nav > a.active,
.asn-nav-parent-button.active {
    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #6648f2,
            #7c3aed,
            #22a8ee
        ) !important;

    box-shadow:
        0 12px 28px rgba(79,70,229,.28),
        inset 0 1px 0 rgba(255,255,255,.46)
        !important;
}


/* =====================================================
   DESKTOP SUB MENUS
   ===================================================== */

.asn-nav-parent {
    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;
}

.asn-nav-arrow {
    display: inline-block !important;

    margin-left: 6px !important;

    font-size: 15px !important;

    line-height: 1 !important;

    transition: transform .2s ease !important;
}


.asn-nav-submenu {
    position: absolute !important;

    top: calc(100% + 12px) !important;

    left: 50% !important;

    transform:
        translate(-50%, 8px) !important;

    width: 235px !important;

    padding: 10px !important;

    border-radius: 22px !important;

    background:
        rgba(255,255,255,.94) !important;

    border:
        1px solid rgba(255,255,255,.90) !important;

    box-shadow:
        0 24px 60px rgba(15,23,42,.16) !important;

    backdrop-filter:
        blur(22px) !important;

    -webkit-backdrop-filter:
        blur(22px) !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease !important;

    z-index: 999999 !important;
}

.asn-nav-parent:hover
.asn-nav-submenu,
.asn-nav-parent:focus-within
.asn-nav-submenu {
    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    transform:
        translate(-50%, 0) !important;
}

.asn-nav-parent:hover
.asn-nav-arrow {
    transform: rotate(180deg) !important;
}


.asn-nav-submenu a {
    display: flex !important;

    align-items: center !important;

    min-height: 44px !important;

    padding: 10px 14px !important;

    border-radius: 14px !important;

    color: #111827 !important;

    font-size: 14px !important;
    font-weight: 750 !important;

    text-decoration: none !important;

    background: transparent !important;
}

.asn-nav-submenu a:hover {
    color: #4f46e5 !important;

    background:
        #f3f1ff !important;
}


/* =====================================================
   RIGHT ACTIONS
   ===================================================== */

.asn-rescue-actions {
    display: flex !important;

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

    gap: 10px !important;

    min-width: 0 !important;
}


/* CTA */

.asn-rescue-cta {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    padding: 13px 26px !important;

    min-height: 48px !important;

    border-radius: 999px !important;

    border:
        1px solid rgba(255,255,255,.44) !important;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #6648f2,
            #7c3aed,
            #22a8ee
        ) !important;

    font-size: 15px !important;
    font-weight: 900 !important;

    box-shadow:
        0 14px 34px rgba(79,70,229,.28),
        inset 0 1px 0 rgba(255,255,255,.42)
        !important;

    cursor: pointer !important;

    white-space: nowrap !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease !important;
}

.asn-rescue-cta:hover {
    transform: translateY(-2px) !important;

    box-shadow:
        0 18px 38px rgba(79,70,229,.35)
        !important;
}


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

.asn-rescue-menu-btn {
    display: none !important;

    width: 44px !important;
    height: 44px !important;

    padding: 0 !important;

    border-radius: 15px !important;

    background:
        rgba(255,255,255,.62) !important;

    border:
        1px solid rgba(255,255,255,.82) !important;

    box-shadow: none !important;

    cursor: pointer !important;

    align-items: center !important;
    justify-content: center !important;

    flex-direction: column !important;

    gap: 5px !important;
}

.asn-rescue-menu-btn span {
    display: block !important;

    width: 21px !important;
    height: 2px !important;

    background: #111827 !important;

    border-radius: 20px !important;

    transition:
        transform .2s ease,
        opacity .2s ease !important;
}

.asn-rescue-menu-btn.open
span:nth-child(1) {
    transform:
        translateY(7px) rotate(45deg) !important;
}

.asn-rescue-menu-btn.open
span:nth-child(2) {
    opacity: 0 !important;
}

.asn-rescue-menu-btn.open
span:nth-child(3) {
    transform:
        translateY(-7px) rotate(-45deg) !important;
}


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

.asn-rescue-dropdown {
    display: none !important;

    width:
        min(1800px, calc(100% - 34px))
        !important;

    margin: 12px auto 0 !important;

    padding: 12px !important;

    max-height:
        calc(100vh - 125px) !important;

    overflow-y: auto !important;

    border-radius: 24px !important;

    background:
        rgba(255,255,255,.94) !important;

    border:
        1px solid rgba(255,255,255,.88) !important;

    box-shadow:
        0 20px 54px rgba(15,23,42,.16)
        !important;

    backdrop-filter:
        blur(22px) !important;

    -webkit-backdrop-filter:
        blur(22px) !important;

    pointer-events: auto !important;
}

.asn-rescue-dropdown.open {
    display: block !important;
}


.asn-rescue-dropdown > a,
.asn-mobile-parent {
    display: flex !important;

    width: 100% !important;

    align-items: center !important;
    justify-content: space-between !important;

    min-height: 48px !important;

    padding: 12px 16px !important;

    border-radius: 15px !important;

    border: 0 !important;

    color: #111827 !important;

    background: transparent !important;

    font-size: 15px !important;
    font-weight: 850 !important;

    text-decoration: none !important;

    text-align: left !important;

    cursor: pointer !important;

    box-shadow: none !important;
}

.asn-rescue-dropdown > a:hover,
.asn-mobile-parent:hover {
    color: #4f46e5 !important;

    background: #f3f1ff !important;
}


.asn-mobile-submenu {
    display: none !important;

    padding:
        2px 8px 8px 16px !important;
}

.asn-mobile-group.open
.asn-mobile-submenu {
    display: block !important;
}

.asn-mobile-group.open
.asn-mobile-parent span {
    transform: rotate(180deg) !important;
}


.asn-mobile-submenu a {
    display: block !important;

    padding: 11px 14px !important;

    margin: 2px 0 !important;

    border-radius: 13px !important;

    color: #334155 !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
}

.asn-mobile-submenu a:hover {
    color: #4f46e5 !important;

    background: #f7f7ff !important;
}


/* =====================================================
   GET STARTED POPUP
   ===================================================== */

#asn-rescue-popup {
    display: none !important;

    position: fixed !important;

    inset: 0 !important;

    z-index: 2147483500 !important;

    background:
        rgba(15,23,42,.54) !important;

    backdrop-filter:
        blur(14px) !important;

    -webkit-backdrop-filter:
        blur(14px) !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 18px !important;
}

#asn-rescue-popup.active {
    display: flex !important;
}


.asn-rescue-popup-box {
    width: min(430px,94vw) !important;

    padding:
        34px 30px 28px !important;

    border-radius: 30px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.94),
            rgba(255,255,255,.75)
        ) !important;

    border:
        1px solid rgba(255,255,255,.88)
        !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.95)
        !important;

    text-align: center !important;

    position: relative !important;
}


.asn-rescue-popup-close {
    position: absolute !important;

    top: 16px !important;
    right: 16px !important;

    width: 36px !important;
    height: 36px !important;

    padding: 0 !important;

    border-radius: 50% !important;

    border:
        1px solid rgba(255,255,255,.82)
        !important;

    background:
        rgba(255,255,255,.78) !important;

    color: #111827 !important;

    font-size: 22px !important;

    cursor: pointer !important;
}


.asn-popup-icon {
    font-size: 34px !important;
}


.asn-rescue-popup-box h3 {
    margin: 10px 0 8px !important;

    color: #07111f !important;

    font-size: 24px !important;
    font-weight: 900 !important;
}


.asn-rescue-popup-box p {
    color: #475569 !important;

    margin: 0 0 20px !important;
}


.asn-rescue-popup-options {
    display: grid !important;

    gap: 11px !important;
}


.asn-rescue-popup-options a {
    min-height: 58px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius: 18px !important;

    font-weight: 850 !important;

    text-decoration: none !important;
}

.asn-pop-wa {
    background: #25d366 !important;
    color: #fff !important;
}

.asn-pop-call {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

.asn-pop-mail {
    background: #fff !important;
    color: #07111f !important;
}


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

@media (max-width: 1180px) {

    #asn-rescue-header {
        grid-template-columns:
            130px 1fr auto !important;

        padding:
            0 18px !important;
    }

    .asn-rescue-logo {
        width: 125px !important;
    }

    .asn-rescue-nav > a,
    .asn-nav-parent-button {
        padding:
            10px 10px !important;

        font-size:
            13px !important;
    }

    .asn-rescue-cta {
        padding:
            12px 18px !important;
    }

}


@media (max-width: 960px) {

    :root {
        --asn-header-space:
            112px;
    }

    #asn-rescue-header {
        grid-template-columns:
            1fr auto !important;

        min-height:
            78px !important;

        padding:
            0 16px !important;
    }

    .asn-rescue-nav {
        display:
            none !important;
    }

    .asn-rescue-menu-btn {
        display:
            flex !important;
    }

    .asn-rescue-logo {
        width:
            118px !important;

        height:
            70px !important;
    }

    #asn-rescue-header-wrap.asn-rescue-scrolled
    .asn-rescue-logo {
        width:
            105px !important;

        height:
            62px !important;
    }

}


@media (max-width: 520px) {

    :root {
        --asn-header-space:
            96px;
    }

    #asn-rescue-header-wrap {
        top:
            8px !important;
    }

    .admin-bar
    #asn-rescue-header-wrap {
        top:
            54px !important;
    }

    #asn-rescue-header-shell {
        width:
            calc(100% - 16px) !important;
    }

    #asn-rescue-header {
        min-height:
            68px !important;

        border-radius:
            24px !important;

        padding:
            0 12px !important;
    }

    #asn-rescue-header-wrap.asn-rescue-scrolled {
        top:
            0 !important;
    }

    .asn-rescue-logo {
        width:
            100px !important;

        height:
            60px !important;
    }

    .asn-rescue-cta {
        padding:
            10px 13px !important;

        min-height:
            42px !important;

        font-size:
            12px !important;
    }

    .asn-rescue-menu-btn {
        width:
            40px !important;

        height:
            40px !important;

        border-radius:
            13px !important;
    }

    .asn-rescue-dropdown {
        width:
            calc(100% - 16px) !important;

        margin-top:
            8px !important;
    }

}