/* =========================================
   GOLFVERSAND INFO BAR
   ========================================= */

:root {

    --color-primary: #6CABDD;
    --color-navy: #1C2C5B;
    --color-deep-blue: #001E50;
    --color-accent: #DB0A40;
    --color-highlight: #FFCC00;
    --color-white: #FFFFFF;

    --gv-info-height: 36px;

}


/* =========================================
   INFO BAR
   ========================================= */

#jtl-nav-wrapper
#header-top-bar {

    position: relative;

    z-index: 130;

    display: flex !important;

    min-height:
        var(--gv-info-height);

    background:
        var(--color-deep-blue) !important;

    color:
        var(--color-white);

    border: 0;

}


/* =========================================
   INFO BAR INNER
   ========================================= */

#jtl-nav-wrapper
#header-top-bar
> .container {

    position: relative;

    display: flex;

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

    width: 100%;

    max-width: 1520px;

    min-height:
        var(--gv-info-height);

    margin-left: auto;
    margin-right: auto;

    padding-left: 5vw;
    padding-right: 5vw;

}


/* =========================================
   ORIGINAL JTL TOPBAR AUSBLENDEN
   ========================================= */

#jtl-nav-wrapper
#header-top-bar
.topbar-main {

    display: none !important;

}


/* =========================================
   INFO SLIDER
   ========================================= */

.gv-info-slider {

    position: relative;

    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr)
        34px;

    align-items: center;

    width:
        min(
            100%,
            820px
        );

    min-height:
        var(--gv-info-height);

    margin:
        0
        auto;

}


/* =========================================
   VIEWPORT
   ========================================= */

.gv-info-slider__viewport {

    position: relative;

    height:
        var(--gv-info-height);

    overflow: hidden;

}


/* =========================================
   TRACK
   ========================================= */

.gv-info-slider__track {

    position: relative;

    width: 100%;

    height: 100%;

}


/* =========================================
   SLIDES
   ========================================= */

.gv-info-slider__slide {

    position: absolute;

    inset: 0;

    display: flex;

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

    padding:
        3px
        14px
        4px;

    visibility: hidden;

    will-change:
        transform;

}


/* =========================================
   TEXT
   ========================================= */

.gv-info-slider__text,
.gv-info-slider__link {

    display: flex;

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

    width: 100%;

    min-height: 29px;

    overflow: hidden;

    font-size: 11px;

    font-weight: 500;

    line-height: 1.35;

    letter-spacing: 0.035em;

    text-align: center;

    white-space: nowrap;

    text-overflow: ellipsis;

    color:
        rgba(
            255,
            255,
            255,
            0.90
        );

}


/* =========================================
   LINK
   ========================================= */

/* =========================================
   LINK
   ========================================= */

#jtl-nav-wrapper
#header-top-bar
.gv-info-slider__link,
#jtl-nav-wrapper
#header-top-bar
.gv-info-slider__link:link,
#jtl-nav-wrapper
#header-top-bar
.gv-info-slider__link:visited {

    color:
        rgba(
            255,
            255,
            255,
            0.90
        ) !important;

    text-decoration:
        none !important;

    transition:
        color 0.2s ease;

}


#jtl-nav-wrapper
#header-top-bar
.gv-info-slider__link:hover,
#jtl-nav-wrapper
#header-top-bar
.gv-info-slider__link:focus {

    color:
        #FFFFFF !important;

    text-decoration:
        none !important;

}


/* =========================================
   BUTTONS
   ========================================= */

.gv-info-slider__button {

    position: relative;

    display: flex;

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

    width: 34px;
    height: 34px;

    margin: 0;

    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        rgba(
            255,
            255,
            255,
            0.58
        );

    cursor:
        pointer;

    transition:
        color 0.2s ease;

}


.gv-info-slider__button:hover {

    color:
        var(--color-white);

}


/* =========================================
   CHEVRONS
   ========================================= */

.gv-info-slider__chevron {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 7px;
    height: 7px;

    border-top:
        1.5px solid
        currentColor;

    border-right:
        1.5px solid
        currentColor;

}


.gv-info-slider__chevron--left {

    transform:
        translate(-35%, -50%)
        rotate(-135deg);

}


.gv-info-slider__chevron--right {

    transform:
        translate(-65%, -50%)
        rotate(45deg);

}


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

@media (max-width: 991px) {

    /*
     * JTL blendet die Topbar normalerweise
     * über d-none aus.
     *
     * Wir machen unseren Info-Banner bewusst
     * auch mobil sichtbar.
     */

    #jtl-nav-wrapper
    #header-top-bar.d-none {

        display:
            flex !important;

    }


    #jtl-nav-wrapper
    #header-top-bar {

        height:
            var(--gv-info-height);

        min-height:
            var(--gv-info-height);

    }


    #jtl-nav-wrapper
    #header-top-bar
    > .container {

        height:
            var(--gv-info-height);

        min-height:
            var(--gv-info-height);

        padding-left: 10px;

        padding-right: 10px;

    }


    .gv-info-slider {

        grid-template-columns:
            28px
            minmax(0, 1fr)
            28px;

        width: 100%;

    }


    .gv-info-slider__button {

        width: 28px;
        height: 34px;

    }


    .gv-info-slider__slide {

        padding:
            3px
            7px
            4px;

    }


    .gv-info-slider__text,
    .gv-info-slider__link {

        font-size: 10px;

        letter-spacing: 0.02em;

    }

}