/*
 Theme Name: Hello Elementor Child
 Theme URI: https://elementor.com/hello-theme/
 Description: Hello Elementor Child Theme
 Author: Elementor Team (Modified by Avichai Cohen)
 Author URI: https://elementor.com/
 Template: hello-elementor
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: hello-elementor-child
*/

@import url("../hello-elementor/style.css");
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* ---- START: De Haas Simple Design Test Skin V2.3 - Brighter Buttons with Floating Effect ---- */

/* General Body Styling */
body {
    font-family: "Afek", sans-serif;
    background-color: #F9F9F9;
    color: #333;
    line-height: 1.6;
}

/* WP Customer Area Container */
#cuar-js-content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Sidebar Menu Container */
#cuar-js-content-container > .cuar-menu-container {
    background-color: #3C493F; /* Dark background */
    padding: 15px;
    border-radius: 8px;
}

/* Navbar Styling with High Specificity */
body.customer-area-active #cuar-js-content-container > .cuar-menu-container .navbar {
    background-color: #3C493F !important; /* Ensure dark background */
    border: none;
}

/* Navigation List */
body.customer-area-active #cuar-js-content-container > .cuar-menu-container .navbar-nav {
    list-style: none;
    padding: 0;
}

/* Menu Items with Modern Font, Brighter Buttons, and Floating Effect */
body.customer-area-active #cuar-js-content-container > .cuar-menu-container .navbar-nav > li {
    margin-bottom: 10px;
}

body.customer-area-active #cuar-js-content-container > .cuar-menu-container .navbar-nav > li > a {
    color: #B3BFB8 !important; /* Light grey text */
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    border-radius: 20px; /* Rounded buttons */
    transition: all 0.3s ease; /* Smooth hover effect */
    background-color: #7E8D85; /* Brighter default color */
    font-family: "Roboto", sans-serif; /* Modern font */
    font-weight: 500; /* Medium weight for attractiveness */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

body.customer-area-active #cuar-js-content-container > .cuar-menu-container .navbar-nav > li > a:hover,
body.customer-area-active #cuar-js-content-container > .cuar-menu-container .navbar-nav > li.active > a {
    background-color: #5F6F68; /* Slightly darker on hover/active for contrast */
    color: #F0F7F4; /* Light text */
    transform: translateY(-4px); /* Stronger lift effect */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

/* Sub-Menus */
body.customer-area-active #cuar-js-content-container > .cuar-menu-container .dropdown-menu {
    background-color: #3C493F;
    border-radius: 4px;
    padding: 5px 0;
}

body.customer-area-active #cuar-js-content-container > .cuar-menu-container .dropdown-menu > li > a {
    color: #B3BFB8;
    padding: 8px 20px;
    border-radius: 20px; /* Rounded sub-menu buttons */
    font-family: "Roboto", sans-serif; /* Modern font */
    font-weight: 500;
    background-color: #7E8D85; /* Brighter default color */
    transition: all 0.3s ease;
}

body.customer-area-active #cuar-js-content-container > .cuar-menu-container .dropdown-menu > li > a:hover,
body.customer-area-active #cuar-js-content-container > .cuar-menu-container .dropdown-menu > li.active > a {
    background-color: #5F6F68; /* Slightly darker on hover/active */
    color: #F0F7F4;
    transform: translateY(-4px); /* Lift effect */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Main Content Area */
#cuar-js-content-container > .cuar-page,
#cuar-js-content-container > .cuar-single-post-wrapper {
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Panels Styling */
.cuar-page .panel,
.cuar-single-post-wrapper .panel {
    background-color: #FFFFFF;
    border: 1px solid #E0E6E3;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.cuar-page .panel-heading,
.cuar-single-post-wrapper .panel-heading {
    background-color: #F0F7F4;
    color: #3C493F;
    border-bottom: 1px solid #E0E6E3;
    border-radius: 8px 8px 0 0;
}

.cuar-page .panel-body,
.cuar-single-post-wrapper .panel-body {
    color: #333;
}

/* Buttons */
.cuar-page .btn,
.cuar-single-post-wrapper .btn {
    border-radius: 20px; /* Rounded buttons in content */
    padding: 8px 15px;
    transition: all 0.3s ease;
}

.cuar-page .btn-primary,
.cuar-single-post-wrapper .btn-primary {
    background-color: #3C493F;
    color: #F0F7F4;
    border: none;
}

.cuar-page .btn-primary:hover,
.cuar-single-post-wrapper .btn-primary:hover {
    background-color: #7E8D85;
    transform: translateY(-2px); /* Lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    #cuar-js-content-container > .cuar-menu-container {
        width: 100%;
        margin-bottom: 20px;
    }

    #cuar-js-content-container > .cuar-page,
    #cuar-js-content-container > .cuar-single-post-wrapper {
        width: 100%;
    }
}

/* ---- END: De Haas Simple Design Test Skin V2.3 ---- */

/* === Pink Color Override and Accessibility Fix === */
body.customer-area-active #cuar-js-content-container > .cuar-menu-container .navbar,
body.customer-area-active #cuar-js-content-container > .cuar-menu-container .navbar.in,
body.customer-area-active #cuar-js-content-container > .cuar-menu-container .navbar.open {
    background-color: #3C493F !important; /* Override any pink */
}

body.customer-area-active #cuar-js-content-container > .cuar-menu-container .navbar-nav > li > a,
body.customer-area-active #cuar-js-content-container > .cuar-menu-container .dropdown-menu > li > a {
    background-color: transparent !important; /* Explicitly override pink */
}

body.enable-filter-highContrast #cuar-js-content-container > .cuar-menu-container .navbar {
    background-color: #3C493F !important;
}

body.enable-filter-highContrast #cuar-js-content-container > .cuar-menu-container .navbar-nav > li > a,
body.enable-filter-highContrast #cuar-js-content-container > .cuar-menu-container .dropdown-menu > li > a {
    background-color: transparent !important;
    color: #B3BFB8 !important;
}