/* =========================================================
   CYBER CITY HEADER
   CLEAN FINAL MASTER CSS
========================================================= */

:root {

    --cy-green: #66f238;
    --cy-green-light: #8cff62;

    --cy-bg: #020502;
    --cy-bg-soft: #051007;

    --cy-white: #ffffff;
    --cy-muted: #9ca69c;

    --cy-border: rgba(102, 242, 56, .20);
    --cy-border-strong: rgba(102, 242, 56, .38);
}


/* =========================================================
   GLOBAL RESET
========================================================= */

.cyber-site-header,
.cyber-site-header *,
.cyber-drawer,
.cyber-drawer * {

    box-sizing: border-box;
}


/* =========================================================
   HEADER ROOT
========================================================= */

body .cyber-site-header {

    position: relative !important;

    z-index: 9000 !important;

    width: 100% !important;

    margin: 0 !important;

    /*
       BIG SPACE ON TOP
    */
    padding-top: 85px !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;

    overflow: visible !important;

    border: 0 !important;

    color: var(--cy-white) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    background:

        linear-gradient(
            180deg,
            #010301 0%,
            #020602 50%,
            #051008 100%
        ) !important;

    box-shadow:

        0 14px 38px
        rgba(0, 0, 0, .20) !important;
}


/* subtle tech pattern */

body .cyber-site-header::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:

        linear-gradient(
            rgba(102, 242, 56, .018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(102, 242, 56, .018) 1px,
            transparent 1px
        );

    background-size:
        48px 48px;

    pointer-events: none;
}


/* subtle green glow */

body .cyber-site-header::after {

    content: "";

    position: absolute;

    z-index: 0;

    width: 600px;
    height: 320px;

    left: 50%;
    top: 30px;

    transform:
        translateX(-50%);

    background:

        radial-gradient(
            circle,
            rgba(102, 242, 56, .07),
            transparent 70%
        );

    filter:
        blur(40px);

    pointer-events: none;
}


/* =========================================================
   TOP BAR
========================================================= */

body .cyber-topbar {

    position: relative !important;

    z-index: 2;

    width: 100% !important;

    max-width: 1880px !important;

    min-height: 176px !important;

    margin:
        0 auto !important;

    padding:
        22px 28px
        18px !important;

    display: grid !important;

    grid-template-columns:

        minmax(220px, 1fr)
        470px
        minmax(420px, 1fr) !important;

    align-items:
        center !important;

    column-gap:
        24px !important;

    overflow:
        visible !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}


/* =========================================================
   LEFT MENU AREA
========================================================= */

.cyber-topbar-left {

    height: 100%;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    position:
        relative !important;

    z-index: 5;
}


/* =========================================================
   MENU BUTTON
========================================================= */

.cyber-menu-button {

    appearance:
        none !important;

    min-width:
        190px !important;

    height:
        60px !important;

    margin:
        0 !important;

    padding:
        0 32px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        16px !important;

    border:

        1px solid
        rgba(102, 242, 56, .48) !important;

    border-radius:
        32px !important;

    background:

        linear-gradient(
            135deg,
            #50d51c,
            #7bf63d
        ) !important;

    color:
        #031003 !important;

    cursor:
        pointer !important;

    box-shadow:

        0 12px 30px
        rgba(0, 0, 0, .24),

        0 0 25px
        rgba(102, 242, 56, .09) !important;

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


.cyber-menu-button:hover {

    transform:
        translateY(-2px);

    filter:
        brightness(1.06);

    box-shadow:

        0 15px 36px
        rgba(0, 0, 0, .30),

        0 0 34px
        rgba(102, 242, 56, .16) !important;
}


.cyber-menu-text {

    display:
        inline-block !important;

    color:
        #031003 !important;

    font-size:
        16px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .8px !important;

    line-height:
        1 !important;
}


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

.cyber-menu-lines {

    width:
        28px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        6px !important;
}


.cyber-menu-lines i {

    display:
        block !important;

    width:
        28px !important;

    height:
        2px !important;

    background:
        #031003 !important;

    transition:
        .20s ease !important;
}


.cyber-menu-button.is-open
.cyber-menu-lines i:nth-child(1) {

    transform:
        translateY(8px)
        rotate(45deg);
}


.cyber-menu-button.is-open
.cyber-menu-lines i:nth-child(2) {

    opacity: 0;
}


.cyber-menu-button.is-open
.cyber-menu-lines i:nth-child(3) {

    transform:
        translateY(-8px)
        rotate(-45deg);
}


/* =========================================================
   LOGO AREA
========================================================= */

.cyber-topbar-logo {

    position:
        relative !important;

    width:
        470px !important;

    height:
        158px !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    overflow:
        visible !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    z-index: 8;
}


.cyber-logo-link {

    width:
        100% !important;

    height:
        100% !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    text-decoration:
        none !important;
}


/* =========================================================
   LOGO IMAGE
========================================================= */

.cyber-logo-img {

    display:
        block !important;

    width:
        auto !important;

    height:
        auto !important;

    /*
       BIGGER LOGO
    */

    max-width:
        455px !important;

    max-height:
        150px !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    object-fit:
        contain !important;

    object-position:
        center center !important;

    position:
        static !important;

    transform:
        none !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    filter:

        drop-shadow(
            0 10px 22px
            rgba(0, 0, 0, .34)
        )

        drop-shadow(
            0 0 20px
            rgba(102, 242, 56, .15)
        ) !important;

    transition:
        transform .20s ease,
        filter .20s ease !important;
}


.cyber-logo-link:hover
.cyber-logo-img {

    transform:
        scale(1.018) !important;

    filter:

        drop-shadow(
            0 12px 26px
            rgba(0, 0, 0, .38)
        )

        drop-shadow(
            0 0 27px
            rgba(102, 242, 56, .23)
        ) !important;
}


/* fallback text */

.cyber-logo-text {

    color:
        var(--cy-green) !important;

    font-size:
        30px !important;

    font-weight:
        900 !important;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.cyber-topbar-actions {

    height:
        100%;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    margin:
        0 !important;

    padding:
        0 !important;

    position:
        relative !important;

    z-index: 5;
}


/* =========================================================
   ACCOUNT LINKS
========================================================= */

.cyber-action-link {

    min-height:
        56px !important;

    padding:
        0 23px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        10px !important;

    border-right:

        1px solid
        rgba(102, 242, 56, .13) !important;

    color:
        #ffffff !important;

    background:
        rgba(0, 0, 0, .015) !important;

    text-decoration:
        none !important;

    font-size:
        14px !important;

    font-weight:
        500 !important;

    white-space:
        nowrap !important;

    transition:
        color .20s ease,
        background .20s ease !important;
}


.cyber-action-link:first-child {

    border-left:

        1px solid
        rgba(102, 242, 56, .13) !important;
}


.cyber-action-link:hover {

    color:
        var(--cy-green) !important;

    background:
        rgba(102, 242, 56, .045) !important;
}


.cyber-action-link svg {

    width:
        23px !important;

    height:
        23px !important;

    fill:
        none !important;

    stroke:
        currentColor !important;

    stroke-width:
        1.7 !important;

    stroke-linecap:
        round !important;

    stroke-linejoin:
        round !important;
}


/* =========================================================
   CART
========================================================= */

.cyber-cart-icon {

    position:
        relative !important;

    display:
        flex !important;
}


.cyber-cart-count {

    position:
        absolute !important;

    top:
        -11px !important;

    right:
        -12px !important;

    min-width:
        22px !important;

    height:
        22px !important;

    padding:
        0 5px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border-radius:
        30px !important;

    background:
        var(--cy-green) !important;

    color:
        #031003 !important;

    font-size:
        9px !important;

    font-weight:
        900 !important;

    box-shadow:

        0 0 15px
        rgba(102, 242, 56, .28);
}


/* =========================================================
   SEARCH ROW
========================================================= */

.cyber-search-row {

    position:
        relative !important;

    z-index: 5;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        2px 60px
        32px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;
}


/* =========================================================
   SEARCH BAR
========================================================= */

.cyber-search-form {

    width:

        min(
            1450px,
            100%
        ) !important;

    height:
        66px !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    display:
        grid !important;

    grid-template-columns:

        minmax(0, 1fr)
        92px !important;

    overflow:
        hidden !important;

    border:

        1px solid
        rgba(102, 242, 56, .29) !important;

    border-radius:
        18px !important;

    background:

        linear-gradient(
            90deg,
            rgba(2, 8, 3, .96),
            rgba(12, 23, 17, .94)
        ) !important;

    box-shadow:

        0 18px 44px
        rgba(0, 0, 0, .31),

        0 5px 15px
        rgba(0, 0, 0, .12),

        0 0 0 1px
        rgba(102, 242, 56, .03) !important;

    backdrop-filter:
        blur(13px);

    -webkit-backdrop-filter:
        blur(13px);

    transition:
        border-color .20s ease,
        box-shadow .20s ease !important;
}


.cyber-search-form:focus-within {

    border-color:

        rgba(102, 242, 56, .55) !important;

    box-shadow:

        0 20px 50px
        rgba(0, 0, 0, .34),

        0 0 28px
        rgba(102, 242, 56, .07) !important;
}


/* =========================================================
   SEARCH INPUT
========================================================= */

.cyber-search-field {

    width:
        100% !important;

    height:
        100% !important;

    display:
        flex !important;

    align-items:
        center !important;
}


.cyber-search-field
input[type="search"] {

    width:
        100% !important;

    height:
        66px !important;

    margin:
        0 !important;

    padding:
        0 32px !important;

    border:
        0 !important;

    outline:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    color:
        #75f349 !important;

    box-shadow:
        none !important;

    font-size:
        15px !important;

    font-weight:
        500 !important;
}


.cyber-search-field
input[type="search"]::placeholder {

    color:

        rgba(96, 216, 46, .74) !important;

    opacity:
        1 !important;
}


/* =========================================================
   SEARCH BUTTON
========================================================= */

.cyber-search-button {

    appearance:
        none !important;

    width:
        92px !important;

    height:
        66px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border:
        0 !important;

    border-radius:

        0 17px 17px 0 !important;

    background:

        linear-gradient(
            135deg,
            #50d91c,
            #76f33a
        ) !important;

    cursor:
        pointer !important;

    transition:
        filter .20s ease,
        box-shadow .20s ease !important;
}


.cyber-search-button:hover {

    filter:
        brightness(1.07);

    box-shadow:

        -8px 0 26px
        rgba(102, 242, 56, .09);
}


.cyber-search-button svg {

    width:
        29px !important;

    height:
        29px !important;

    fill:
        none !important;

    stroke:
        #031003 !important;

    stroke-width:
        2.1 !important;
}


/* =========================================================
   MENU OVERLAY
========================================================= */

.cyber-menu-overlay {

    position:
        fixed !important;

    z-index:
        99990 !important;

    inset:
        0 !important;

    background:

        rgba(0, 0, 0, .74) !important;

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    opacity:
        0 !important;

    visibility:
        hidden !important;

    pointer-events:
        none !important;

    transition:
        opacity .25s ease,
        visibility .25s ease !important;
}


.cyber-menu-overlay.is-open {

    opacity:
        1 !important;

    visibility:
        visible !important;

    pointer-events:
        auto !important;
}


/* =========================================================
   DRAWER
========================================================= */

.cyber-drawer {

    position:
        fixed !important;

    z-index:
        99999 !important;

    top:
        0 !important;

    left:
        0 !important;

    width:
        410px !important;

    max-width:
        92vw !important;

    height:
        100dvh !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    overflow-y:
        auto !important;

    background:

        linear-gradient(
            180deg,
            #080d08,
            #020402
        ) !important;

    border-right:

        1px solid
        rgba(102, 242, 56, .50) !important;

    box-shadow:

        25px 0 75px
        rgba(0, 0, 0, .67),

        4px 0 35px
        rgba(102, 242, 56, .07) !important;

    transform:
        translateX(-105%) !important;

    visibility:
        hidden !important;

    transition:
        transform .30s ease,
        visibility .30s ease !important;
}


.cyber-drawer.is-open {

    transform:
        translateX(0) !important;

    visibility:
        visible !important;
}


/* =========================================================
   DRAWER HEADER
========================================================= */

.cyber-drawer-head {

    padding:
        31px 28px
        24px !important;

    display:
        flex !important;

    align-items:
        flex-start !important;

    justify-content:
        space-between !important;

    border-bottom:

        1px solid
        rgba(102, 242, 56, .16) !important;
}


.cyber-drawer-brand {

    display:
        block !important;

    margin-bottom:
        6px !important;

    color:
        var(--cy-green) !important;

    font-size:
        9px !important;

    font-weight:
        900 !important;

    letter-spacing:
        2.2px !important;
}


.cyber-drawer-head h2 {

    margin:
        0 !important;

    color:
        #ffffff !important;

    font-size:
        30px !important;
}


.cyber-drawer-close {

    width:
        44px !important;

    height:
        44px !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border:

        1px solid
        rgba(102, 242, 56, .27) !important;

    background:

        rgba(102, 242, 56, .04) !important;

    color:
        #ffffff !important;

    font-size:
        27px !important;

    cursor:
        pointer !important;
}


/* =========================================================
   DRAWER NAVIGATION
========================================================= */

.cyber-drawer-nav {

    flex:
        1 !important;

    padding:
        16px 28px
        25px !important;
}


.cyber-drawer-main-link {

    min-height:
        51px !important;

    padding:
        0 10px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    border-bottom:

        1px solid
        rgba(255, 255, 255, .055) !important;

    color:
        #d0d6d0 !important;

    text-decoration:
        none !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;
}


.cyber-drawer-main-link:hover {

    color:
        var(--cy-green) !important;
}


/* =========================================================
   BIKES & RIDES
========================================================= */

.cyber-bike-section {

    margin:
        19px 0 !important;

    padding:
        18px !important;

    border:

        1px solid
        rgba(102, 242, 56, .23) !important;

    border-radius:
        14px !important;

    background:

        linear-gradient(
            135deg,
            rgba(102, 242, 56, .055),
            rgba(2, 7, 3, .36)
        ) !important;
}


.cyber-bike-heading {

    margin-bottom:
        12px !important;

    padding-bottom:
        12px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        3px !important;

    border-bottom:

        1px solid
        rgba(102, 242, 56, .14) !important;
}


.cyber-bike-heading span {

    color:
        var(--cy-green) !important;

    font-size:
        14px !important;

    font-weight:
        900 !important;

    letter-spacing:
        1px !important;
}


.cyber-bike-heading small {

    color:
        #687268 !important;

    font-size:
        8px !important;

    font-weight:
        800 !important;
}


.cyber-bike-parent {

    min-height:
        43px !important;

    padding:
        0 10px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    border-radius:
        8px !important;

    background:

        rgba(102, 242, 56, .045) !important;

    color:
        #95ff72 !important;

    text-decoration:
        none !important;

    font-size:
        12px !important;
}


.cyber-bike-list {

    display:
        flex !important;

    flex-direction:
        column !important;
}


.cyber-bike-link {

    min-height:
        42px !important;

    padding:
        0 9px !important;

    display:
        grid !important;

    grid-template-columns:
        8px 1fr auto !important;

    align-items:
        center !important;

    gap:
        9px !important;

    border-bottom:

        1px solid
        rgba(255, 255, 255, .04) !important;

    color:
        #a9b2a9 !important;

    text-decoration:
        none !important;

    font-size:
        12px !important;
}


.cyber-bike-link:hover {

    color:
        var(--cy-green) !important;
}


.cyber-bike-link i {

    width:
        5px !important;

    height:
        5px !important;

    border-radius:
        50% !important;

    background:
        var(--cy-green) !important;

    box-shadow:

        0 0 7px
        rgba(102, 242, 56, .35);
}


/* =========================================================
   OTHER DRAWER LINKS
========================================================= */

.cyber-drawer-other {

    display:
        flex !important;

    flex-direction:
        column !important;
}


.cyber-drawer-other a {

    min-height:
        48px !important;

    padding:
        0 10px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    border-bottom:

        1px solid
        rgba(255, 255, 255, .05) !important;

    color:
        #9da69d !important;

    text-decoration:
        none !important;

    font-size:
        12px !important;
}


.cyber-drawer-other a:hover {

    color:
        var(--cy-green) !important;
}


/* =========================================================
   CUSTOMER DRAWER
========================================================= */

.cyber-drawer-customer {

    padding:
        18px 28px
        23px !important;

    border-top:

        1px solid
        rgba(102, 242, 56, .15) !important;
}


.cyber-drawer-section-title {

    display:
        block !important;

    margin-bottom:
        6px !important;

    color:
        var(--cy-green) !important;

    font-size:
        9px !important;

    font-weight:
        900 !important;
}


.cyber-drawer-customer a {

    min-height:
        44px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    border-bottom:

        1px solid
        rgba(255, 255, 255, .04) !important;

    color:
        #929c92 !important;

    text-decoration:
        none !important;

    font-size:
        12px !important;
}


.cyber-drawer-customer a:hover {

    color:
        var(--cy-green) !important;
}


.cyber-drawer-cart-count {

    min-width:
        23px !important;

    height:
        23px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border:

        1px solid
        rgba(102, 242, 56, .25) !important;

    color:
        var(--cy-green) !important;
}


.cyber-drawer-bottom {

    padding:
        0 28px
        25px !important;

    color:
        #465046 !important;

    font-size:
        8px !important;

    letter-spacing:
        1.4px !important;
}


body.cyber-drawer-open {

    overflow:
        hidden !important;
}


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

@media (max-width: 1100px) {

    body .cyber-site-header {

        padding-top:
            65px !important;
    }


    body .cyber-topbar {

        min-height:
            158px !important;

        padding:
            18px 26px
            14px !important;

        grid-template-columns:

            160px
            255px
            160px !important;

        column-gap:
            18px !important;
    }


    .cyber-menu-button {

        min-width:
            158px !important;

        height:
            52px !important;

        padding:
            0 22px !important;
    }


    .cyber-topbar-logo {

        width:
            300px !important;

        height:
            116px !important;
    }


    .cyber-logo-img {

        max-width:
            292px !important;

        max-height:
            110px !important;
    }


    .cyber-action-link {

        width:
            46px !important;

        padding:
            0 !important;

        border:
            0 !important;
    }


    .cyber-action-link
    > span:not(.cyber-cart-icon) {

        display:
            none !important;
    }


    .cyber-search-row {

        padding:
            0 26px
            23px !important;
    }


    .cyber-search-form {

        height:
            59px !important;

        grid-template-columns:

            minmax(0, 1fr)
            72px !important;

        border-radius:
            14px !important;
    }


    .cyber-search-field
    input[type="search"] {

        height:
            59px !important;
    }


    .cyber-search-button {

        width:
            72px !important;

        height:
            59px !important;
    }

}


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

@media (max-width: 700px) {

    body .cyber-site-header {

        padding-top:
            42px !important;
    }


    body .cyber-topbar {

        min-height:
            108px !important;

        padding:
            12px 10px
            9px !important;

        grid-template-columns:

            46px
            minmax(130px, 1fr)
            86px !important;

        column-gap:
            7px !important;
    }


    .cyber-menu-button {

        min-width:
            44px !important;

        width:
            44px !important;

        height:
            44px !important;

        padding:
            0 !important;

        border-radius:
            50% !important;
    }


    .cyber-menu-text {

        display:
            none !important;
    }


    .cyber-menu-lines,
    .cyber-menu-lines i {

        width:
            18px !important;
    }


    .cyber-topbar-logo {

        width:
            100% !important;

        height:
            82px !important;
    }


    .cyber-logo-img {

        max-width:
            205px !important;

        max-height:
            86px !important;
    }


    .cyber-track-link {

        display:
            none !important;
    }


    .cyber-action-link {

        width:
            24px !important;

        min-height:
            40px !important;

        padding:
            0 !important;

        border:
            0 !important;
    }


    .cyber-action-link
    > span:not(.cyber-cart-icon) {

        display:
            none !important;
    }


    .cyber-search-row {

        padding:
            0 10px
            15px !important;
    }


    .cyber-search-form {

        height:
            52px !important;

        grid-template-columns:

            minmax(0, 1fr)
            57px !important;

        border-radius:
            12px !important;
    }


    .cyber-search-field
    input[type="search"] {

        height:
            52px !important;

        padding:
            0 17px !important;

        font-size:
            13px !important;
    }


    .cyber-search-button {

        width:
            57px !important;

        height:
            52px !important;
    }


    .cyber-drawer {

        width:
            340px !important;

        max-width:
            92vw !important;
    }

}


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

@media (max-width: 390px) {

    body .cyber-site-header {

        padding-top:
            35px !important;
    }


    .cyber-logo-img {

        max-width:
            185px !important;
    }

}

/* =========================================================
   CYBER CITY HEADER — 2026 WIDTH / LOGO / MOBILE SEARCH PATCH
   Added for a wider floating shell, stronger logo presence,
   and reliable touch interaction on mobile search.
========================================================= */

body .cyber-topbar {
    width: calc(100% - 20px) !important;
    max-width: 1880px !important;
    border: 1px solid rgba(102, 242, 56, .22) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(135deg, rgba(4, 10, 5, .97), rgba(2, 6, 3, .97)) !important;
    box-shadow:
        0 22px 58px rgba(0, 0, 0, .28),
        inset 0 0 0 1px rgba(102, 242, 56, .025) !important;
}

.cyber-topbar-logo,
.cyber-logo-link,
.cyber-logo-img {
    pointer-events: auto !important;
}

/* Search must always remain clickable/tappable. */
.cyber-search-row {
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;
}

.cyber-search-form,
.cyber-search-field,
.cyber-search-field input[type="search"],
.cyber-search-button {
    position: relative !important;
    z-index: 51 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

.cyber-search-field input[type="search"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    user-select: text !important;
    -webkit-user-select: text !important;
}

@media (max-width: 1100px) {
    body .cyber-topbar {
        width: calc(100% - 16px) !important;
    }
}

@media (max-width: 700px) {
    body .cyber-site-header {
        padding-top: 24px !important;
    }

    body .cyber-topbar {
        width: calc(100% - 12px) !important;
        min-height: 112px !important;
        padding: 10px 8px 8px !important;
        grid-template-columns: 44px minmax(150px, 1fr) 84px !important;
        column-gap: 6px !important;
        border-radius: 14px !important;
    }

    .cyber-topbar-logo {
        height: 88px !important;
    }

    .cyber-logo-img {
        max-width: 205px !important;
        max-height: 86px !important;
    }

    .cyber-search-row {
        display: flex !important;
        width: 100% !important;
        padding: 7px 6px 14px !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    .cyber-search-form {
        display: grid !important;
        width: 100% !important;
        max-width: none !important;
        height: 54px !important;
        grid-template-columns: minmax(0,1fr) 58px !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: hidden !important;
    }

    .cyber-search-field {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .cyber-search-field input[type="search"] {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 54px !important;
        padding: 0 16px !important;
        font-size: 16px !important; /* prevents iOS zoom */
        line-height: 54px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .cyber-search-button {
        display: flex !important;
        width: 58px !important;
        height: 54px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (max-width: 390px) {
    body .cyber-topbar {
        grid-template-columns: 42px minmax(135px, 1fr) 78px !important;
    }

    .cyber-logo-img {
        max-width: 185px !important;
    }
}