/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: Child theme for Hello Elementor. Add custom CSS and PHP here so changes are not removed when Hello Elementor updates.
Author: Abdul Rehman
Author URI: https://devabdulrehman.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Add your custom CSS below this line */


/* DEFAULT DARK COLORS */
:root,
.elementor-kit-6 {
    --e-global-color-primary: #00B88C;
    --e-global-color-secondary: #FC141B;
    --e-global-color-text: #FFFFFF;
    --e-global-color-accent: #0a483d;

    --e-global-color-f13e9bf: #000000;
    --e-global-color-d234ea2: #FFFFFF;
    --e-global-color-d680b55: #1B2933;
    --e-global-color-d65140d: #02010100;
    --e-global-color-da984a2: #101A22;
}

/* LIGHT MODE VARIABLES */
body.light-mode,
body.light-mode .elementor-kit-6,
.elementor-kit-6.light-mode {
    --e-global-color-primary: #00856A !important;
    --e-global-color-secondary: #d7dee3  !important;
    --e-global-color-text: #1A1A1A !important;
    --e-global-color-accent: #00B894 !important;

    --e-global-color-f13e9bf: #FFFFFF !important;
    --e-global-color-d234ea2: #111111 !important;
    --e-global-color-d680b55: #eae8e8 !important;
    --e-global-color-d65140d: #FFFFFF00 !important;
    --e-global-color-da984a2: #E8EEF2 !important;
}

/* FORCE HARDCODED DARK BACKGROUNDS TO LIGHT */
body.light-mode,
body.light-mode .elementor,
body.light-mode .elementor-section,
body.light-mode .elementor-top-section,
body.light-mode .elementor-container,
body.light-mode .elementor-widget-wrap,
body.light-mode .elementor-widget-container {
    background-color: #FFFFFF !important;
}

/* DARK SURFACE COLOR TO LIGHT SURFACE */
body.light-mode [style*="#101A22"],
body.light-mode [style*="#101a22"],
body.light-mode [style*="rgb(16, 26, 34)"] {
    background-color: #E8EEF2 !important;
}

/* MAIN DARK BACKGROUND TO WHITE */
body.light-mode [style*="#070D12"],
body.light-mode [style*="#070d12"],
body.light-mode [style*="rgb(7, 13, 18)"] {
    background-color: #FFFFFF !important;
}

/* BORDER DARK COLOR TO LIGHT */
body.light-mode [style*="#1B2933"],
body.light-mode [style*="#1b2933"],
body.light-mode [style*="rgb(27, 41, 51)"] {
    border-color: #F4F7F9 !important;
}

/* WHITE TEXT TO BLACK */
body.light-mode [style*="#FFFFFF"],
body.light-mode [style*="#ffffff"],
body.light-mode [style*="rgb(255, 255, 255)"] {
    color: #1A1A1A !important;
}

/* ELEMENTOR GLOBAL TEXT COLOR */
body.light-mode {
    background-color: #FFFFFF !important;
    color: #1A1A1A !important;
}

/* TOGGLE BUTTON */
#theme-toggle {
    cursor: pointer;
    width: 58px;
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;

    background: var(--e-global-color-da984a2);
    color: var(--e-global-color-primary);
    border: 1px solid var(--e-global-color-d680b55);

    font-size: 22px;
    box-shadow: 0 0 8px rgba(0,0,0,.25);
    transition: all .3s ease;
}

#theme-toggle:hover {
    transform: scale(1.08);
    color: var(--e-global-color-accent);
}

#theme-text {
    display: none;
}

html,
body {
    overflow-x: hidden !important;
}


.woocommerce-message {
    border-top-color: var(--e-global-color-primary) !important;
}

.woocommerce-message::before {
	color: var(--e-global-color-primary) !important;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
    color: var(--e-global-color-primary);
}

.elementor-menu-cart__product-price.product-price span.quantity {
    border: none !important;
}