/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

/* Μy Custom Css */
#my-top-bar-layout {
    background: #132f56;
    color: #fff;
    font-size: 16px; 
    font-family: "Comfortaa", sans-serif;
    font-weight: 800; 
    border-bottom: 4px solid rgba(255, 255, 255, 0.25);
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    transition: transform 0.3s ease-out;
    transform: translateY(0);
}

#my-top-bar-layout.top-bar-hidden {
    transform: translateY(-100%);
}

.top-bar-inner {
    padding: 6px 0; 
    display: flex;
    flex-direction: row !important;
    justify-content: flex-end !important;
    direction: ltr !important;
    align-items: center;
    flex-wrap: wrap;
}

.top-bar-left {
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 1 !important;
}

.top-bar-left .top-bar-item {
    background: #ffffff; 
    border: none; 
    border-radius: 30px; 
    padding: 8px 22px; 
    font-size: 16px; 
    line-height: normal; 
    margin-right: 15px;
    display: inline-flex; 
    align-items: center;
    gap: 8px; 
    color: #132f56;
    text-decoration: none;
    font-weight: 800; 
}

.top-bar-item .fa-whatsapp,
.top-bar-item svg {
    color: #25D366 !important;
    width: 19px;  
    height: 19px; 
    display: block;
}

.top-bar-right {
    background: #ffffff; 
    border: none; 
    border-radius: 30px; 
    padding: 8px 22px; 
    font-size: 16px; 
    line-height: normal; 
    display: inline-flex;
    align-items: center;
    gap: 12px; 
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 2 !important;
    color: #132f56; 
}

.top-bar-right .label {
    margin-right: 2px;
    font-size: 16px; 
    font-weight: 800; 
    line-height: normal; 
    color: #132f56; 
}

.top-bar-social {
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #132f56; 
    border: none;
    font-size: 18px; 
    transition: color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
}

.top-bar-social:hover {
    background: transparent;
    color: #b1976b; 
    transform: scale(1.15); 
}

#site-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 990;
    margin-top: -1px;
    will-change: top;
}

#my-top-bar-layout.top-bar-hidden + #site-header {
    top: 0 !important;
}

/* ------ MOBILE SETTINGS ------ */

@media (max-width: 768px) {
    #my-top-bar-layout {
        position: relative !important; 
        transform: none !important;
    }
    
    #my-top-bar-layout .container {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    #site-header {
        top: 0 !important;
    }

    .top-bar-inner {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 8px 5px !important; 
        width: 100% !important;
        gap: 8px !important;
    }
    
    .top-bar-left .top-bar-item,
    .top-bar-right {
        padding: 6px 10px !important; 
        font-size: 14px !important; 
        margin: 0 !important; 
        width: auto !important;
        white-space: nowrap !important;
        border-radius: 30px;
    }

    .top-bar-item .fa-whatsapp,
    .top-bar-item svg {
        width: 16px !important;
        height: 16px !important;
    }

    .top-bar-social {
        font-size: 16px !important;
    }

    .top-bar-right .label {
        display: inline-block !important; 
        font-size: 14px !important;
        margin-right: 2px !important;
    }

}