/* Velox Component: Header */
/* =========================================================
   SABALOKA HEADER
   ========================================================= */

.velox-component--header :root{
    --sabaloka-ink: #17354f;
    --sabaloka-muted: #667d8d;

    --sabaloka-mint: #66d9c4;
    --sabaloka-mint-soft: #eaf9f5;

    --sabaloka-blue: #72bdf4;
    --sabaloka-blue-soft: #edf7ff;

    --sabaloka-yellow: #f7cb58;
    --sabaloka-yellow-soft: #fff7dc;

    --sabaloka-border: rgba(23, 53, 79, 0.10);

    --sabaloka-header-bg: rgba(255, 255, 255, 0.92);

    --sabaloka-radius: 18px;

    --sabaloka-shell: 1280px;
}


/* ---------------------------------------------------------
   HEADER WRAPPER
   --------------------------------------------------------- */

.velox-component--header .sabaloka-header{
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    background: var(--sabaloka-header-bg);

    border-bottom: 1px solid var(--sabaloka-border);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* ---------------------------------------------------------
   INNER CONTAINER
   --------------------------------------------------------- */

.velox-component--header .sabaloka-header-inner{
    width: min(
        calc(100% - 48px),
        var(--sabaloka-shell)
    );

    min-height: 84px;

    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 36px;
}


/* ---------------------------------------------------------
   LOGO
   --------------------------------------------------------- */

.velox-component--header .sabaloka-brand{
    flex-shrink: 0;

    display: flex;
    align-items: center;

    text-decoration: none;
}


.velox-component--header .sabaloka-logo{
    display: block;

    width: auto;
    height: 47px;

    object-fit: contain;
}


/* ---------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------- */

.velox-component--header .sabaloka-nav{
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 6px;
}


.velox-component--header .sabaloka-nav-link{
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 0 14px;

    border-radius: 12px;

    color: var(--sabaloka-muted);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}


.velox-component--header .sabaloka-nav-link:hover{
    color: var(--sabaloka-ink);

    background: rgba(102, 217, 196, 0.09);
}


/* Active page */

.velox-component--header .sabaloka-nav-link.active{
    color: var(--sabaloka-ink);

    background: var(--sabaloka-mint-soft);
}


/* tiny active indicator */

.velox-component--header .sabaloka-nav-link.active::after{
    content: "";

    position: absolute;

    left: 50%;
    bottom: 4px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--sabaloka-mint);

    transform: translateX(-50%);
}


/* ---------------------------------------------------------
   COFFEE BUTTON
   --------------------------------------------------------- */

.velox-component--header .sabaloka-coffee{
    margin-left: 10px;

    min-height: 46px;

    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 1px solid rgba(224, 171, 42, 0.20);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #fff9e6,
            #fff2c4
        );

    color: #765918;

    box-shadow:
        0 7px 20px rgba(197, 148, 27, 0.08);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

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

    text-decoration: none;

    white-space: nowrap;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.velox-component--header .sabaloka-coffee:hover{
    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #fff8df,
            #ffeaa2
        );

    box-shadow:
        0 11px 25px rgba(197, 148, 27, 0.14);
}


.velox-component--header .coffee-icon{
    font-size: 15px;
}


/* ---------------------------------------------------------
   MOBILE MENU CONTROLS
   --------------------------------------------------------- */

.velox-component--header .sabaloka-menu-toggle{
    display: none;
}


.velox-component--header .sabaloka-menu-button{
    display: none;

    width: 44px;
    height: 44px;

    margin-left: auto;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;

    border: 1px solid var(--sabaloka-border);

    border-radius: 13px;

    background: #ffffff;

    cursor: pointer;
}


.velox-component--header .sabaloka-menu-button span{
    display: block;

    width: 18px;
    height: 2px;

    border-radius: 999px;

    background: var(--sabaloka-ink);

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


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

@media (max-width: 1050px) {

    .velox-component--header .sabaloka-header-inner{
        gap: 20px;
    }


    .velox-component--header .sabaloka-nav-link{
        padding: 0 10px;

        font-size: 13px;
    }


    .velox-component--header .sabaloka-coffee{
        padding: 0 14px;

        font-size: 13px;
    }

}


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

@media (max-width: 860px) {

    .velox-component--header .sabaloka-header{
        position: sticky;
    }


    .velox-component--header .sabaloka-header-inner{
        position: relative;

        width: min(
            calc(100% - 32px),
            var(--sabaloka-shell)
        );

        min-height: 74px;

        flex-wrap: wrap;

        gap: 0;
    }


    /* Logo */

    .velox-component--header .sabaloka-logo{
        height: 39px;
    }


    /* Hamburger */

    .velox-component--header .sabaloka-menu-button{
        display: flex;
    }


    /* Navigation panel */

    .velox-component--header .sabaloka-nav{
        display: none;

        order: 3;

        width: 100%;

        margin: 0;
        padding: 10px 0 20px;

        flex-direction: column;
        align-items: stretch;

        gap: 5px;
    }


    /* Show menu */

    .velox-component--header .sabaloka-menu-toggle:checked ~ .sabaloka-nav{
        display: flex;
    }


    /* Animate hamburger */

    .velox-component--header .sabaloka-menu-toggle:checked
    + .sabaloka-menu-button
    span:nth-child(1){
        transform:
            translateY(7px)
            rotate(45deg);
    }


    .velox-component--header .sabaloka-menu-toggle:checked
    + .sabaloka-menu-button
    span:nth-child(2){
        opacity: 0;
    }


    .velox-component--header .sabaloka-menu-toggle:checked
    + .sabaloka-menu-button
    span:nth-child(3){
        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    /* Mobile links */

    .velox-component--header .sabaloka-nav-link{
        width: 100%;

        min-height: 48px;

        padding: 0 15px;

        justify-content: flex-start;

        border-radius: 13px;

        font-size: 15px;
    }


    .velox-component--header .sabaloka-nav-link.active::after{
        display: none;
    }


    .velox-component--header .sabaloka-nav-link.active{
        background:
            linear-gradient(
                135deg,
                var(--sabaloka-mint-soft),
                var(--sabaloka-blue-soft)
            );
    }


    /* Coffee CTA */

    .velox-component--header .sabaloka-coffee{
        width: 100%;

        min-height: 50px;

        margin: 8px 0 0;

        font-size: 15px;
    }

}


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

@media (max-width: 480px) {

    .velox-component--header .sabaloka-header-inner{
        width: calc(100% - 24px);
    }


    .velox-component--header .sabaloka-logo{
        height: 35px;
    }


    .velox-component--header .sabaloka-menu-button{
        width: 42px;
        height: 42px;
    }

}

/* Velox Component: Buttons */
/* =========================================================
   SABALOKA BUTTON SYSTEM
   Elementor-friendly classes
   ========================================================= */


/* ---------------------------------------------------------
   SHARED BUTTON VARIABLES
   --------------------------------------------------------- */

.velox-component--buttons :root{

    --sbl-ink: #17354f;
    --sbl-muted: #667d8d;

    --sbl-mint: #66d9c4;
    --sbl-mint-dark: #45bda8;
    --sbl-mint-soft: #eaf9f5;

    --sbl-blue: #72bdf4;
    --sbl-blue-soft: #edf7ff;

    --sbl-yellow: #f7cb58;
    --sbl-yellow-soft: #fff4c8;

    --sbl-border: rgba(23, 53, 79, 0.12);

}


/* =========================================================
   IMPORTANT:
   Elementor puts the class on the widget wrapper, not
   directly on the <a> tag.

   Therefore these selectors target Elementor's button inside.
   ========================================================= */


/* =========================================================
   1. PRIMARY BUTTON
   Main CTA
   ========================================================= */

.velox-component--buttons .sbl-btn-primary .elementor-button{

    min-height: 52px;

    padding: 0 24px !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 1px solid rgba(53, 169, 147, 0.16) !important;

    border-radius: 15px !important;

    background:
        linear-gradient(
            135deg,
            #76dfca 0%,
            #58cbb5 100%
        ) !important;

    color: #123d36 !important;

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

    line-height: 1 !important;

    text-decoration: none !important;

    box-shadow:
        0 8px 22px rgba(58, 173, 151, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease !important;

}


.velox-component--buttons .sbl-btn-primary .elementor-button:hover{

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(58, 173, 151, 0.24);

    filter: saturate(1.05);

    color: #123d36 !important;

}


/* =========================================================
   2. SECONDARY BUTTON
   White / outline CTA
   ========================================================= */

.velox-component--buttons .sbl-btn-secondary .elementor-button{

    min-height: 52px;

    padding: 0 24px !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border:
        1px solid rgba(23, 53, 79, 0.14) !important;

    border-radius: 15px !important;

    background:
        rgba(255, 255, 255, 0.82) !important;

    color: var(--sbl-ink) !important;

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

    line-height: 1 !important;

    text-decoration: none !important;

    box-shadow:
        0 7px 20px rgba(31, 67, 86, 0.06);

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

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease !important;

}


.velox-component--buttons .sbl-btn-secondary .elementor-button:hover{

    transform: translateY(-2px);

    border-color:
        rgba(74, 187, 166, 0.30) !important;

    background:
        #ffffff !important;

    box-shadow:
        0 11px 26px rgba(31, 67, 86, 0.10);

    color: var(--sbl-ink) !important;

}


/* =========================================================
   3. BUY ME A COFFEE BUTTON
   Warm supporting CTA
   ========================================================= */

.velox-component--buttons .sbl-btn-coffee .elementor-button{

    min-height: 52px;

    padding: 0 24px !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border:
        1px solid rgba(215, 163, 34, 0.18) !important;

    border-radius: 15px !important;

    background:
        linear-gradient(
            135deg,
            #fff8dd 0%,
            #ffe79a 100%
        ) !important;

    color: #755817 !important;

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

    line-height: 1 !important;

    text-decoration: none !important;

    box-shadow:
        0 8px 22px rgba(199, 151, 32, 0.13);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease !important;

}


.velox-component--buttons .sbl-btn-coffee .elementor-button:hover{

    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #fff5ce 0%,
            #ffdf72 100%
        ) !important;

    box-shadow:
        0 12px 28px rgba(199, 151, 32, 0.20);

    color: #755817 !important;

}


/* =========================================================
   4. SOFT BUTTON
   Very understated tertiary CTA
   ========================================================= */

.velox-component--buttons .sbl-btn-soft .elementor-button{

    min-height: 48px;

    padding: 0 21px !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border:
        1px solid rgba(77, 179, 160, 0.10) !important;

    border-radius: 14px !important;

    background:
        var(--sbl-mint-soft) !important;

    color: #357565 !important;

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

    line-height: 1 !important;

    text-decoration: none !important;

    box-shadow: none;

    transition:
        transform 0.2s ease,
        background 0.2s ease !important;

}


.velox-component--buttons .sbl-btn-soft .elementor-button:hover{

    transform: translateY(-1px);

    background:
        #dcf5ee !important;

    color: #2d6a5c !important;

}


/* =========================================================
   5. SMALL BUTTON SIZE
   Add together with a button style if needed.

   Example Elementor classes:
   sbl-btn-secondary sbl-btn-small
   ========================================================= */

.velox-component--buttons .sbl-btn-small .elementor-button{

    min-height: 42px !important;

    padding:
        0 17px !important;

    border-radius:
        12px !important;

    font-size:
        13px !important;

}


/* =========================================================
   6. LARGE / HERO BUTTON SIZE

   Example:
   sbl-btn-primary sbl-btn-large
   ========================================================= */

.velox-component--buttons .sbl-btn-large .elementor-button{

    min-height:
        58px !important;

    padding:
        0 29px !important;

    border-radius:
        17px !important;

    font-size:
        16px !important;

}


/* =========================================================
   ICONS INSIDE ELEMENTOR BUTTONS
   ========================================================= */

.velox-component--buttons .sbl-btn-primary .elementor-button-icon, .velox-component--buttons .sbl-btn-secondary .elementor-button-icon, .velox-component--buttons .sbl-btn-coffee .elementor-button-icon, .velox-component--buttons .sbl-btn-soft .elementor-button-icon{

    display: inline-flex;
    align-items: center;

    font-size: 0.9em;

}


.velox-component--buttons .sbl-btn-primary .elementor-button-icon svg, .velox-component--buttons .sbl-btn-secondary .elementor-button-icon svg, .velox-component--buttons .sbl-btn-coffee .elementor-button-icon svg, .velox-component--buttons .sbl-btn-soft .elementor-button-icon svg{

    width: 1em;
    height: 1em;

}


/* =========================================================
   FOCUS / ACCESSIBILITY
   ========================================================= */

.velox-component--buttons .sbl-btn-primary .elementor-button:focus-visible, .velox-component--buttons .sbl-btn-secondary .elementor-button:focus-visible, .velox-component--buttons .sbl-btn-coffee .elementor-button:focus-visible, .velox-component--buttons .sbl-btn-soft .elementor-button:focus-visible{

    outline:
        3px solid rgba(114, 189, 244, 0.30);

    outline-offset:
        3px;

}


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

@media (max-width: 767px) {

    .velox-component--buttons .sbl-btn-primary .elementor-button, .velox-component--buttons .sbl-btn-secondary .elementor-button, .velox-component--buttons .sbl-btn-coffee .elementor-button{

        min-height:
            50px;

        padding:
            0 21px !important;

        font-size:
            14px !important;

    }


    .velox-component--buttons .sbl-btn-large .elementor-button{

        min-height:
            54px !important;

        padding:
            0 24px !important;

        font-size:
            15px !important;

    }

}


/* =========================================================
   OPTIONAL FULL-WIDTH MOBILE BUTTON

   Add:
   sbl-btn-mobile-full

   together with any button style.
   ========================================================= */

@media (max-width: 767px) {

    .velox-component--buttons .sbl-btn-mobile-full, .velox-component--buttons .sbl-btn-mobile-full .elementor-button-wrapper{

        width:
            100%;

    }


    .velox-component--buttons .sbl-btn-mobile-full .elementor-button{

        width:
            100%;

    }

}