/*
 Theme Name:   Bella Divi
 Theme URI:    https://bellaetco.com/
 Description:  A custom child theme for the Divi theme, built for Bella projects.
 Author:       Sean Ephraim
 Author URI:   https://bellaetco.com/
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         divi, bella, child theme
 Text Domain:  bella-divi
*/
body {
    font-family: "Arial", sans-serif; /* Change the font family to Arial */
    font-size: 16px; /* Set the base font size to 16px */
    line-height: 1.5; /* Set line height for better readability */
    color: #333; /* Dark gray text color for better contrast */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    background-color: #f4f4f4; /* Light gray background for the entire site */
}
.underlined {
    border-bottom: 2px solid #7abb7d; /* Add an underline with a specific color */
    padding-bottom: 0px; /* Add space below the underline */
}
.bella-wc-dashboard-hero {
    background-image: url("https://lightning.home-supervision.ch/wp-content/uploads/2025/04/Groupe-152.png");
    background-size: cover;
    background-position: center;
    height: 348px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}
.bella-wc-dashboard-hero h1 {
    font-size: 68px;
    font-weight: 700;
}
.bella-wc-dashboard-sidebar h2 {
    color: #495651; /* Set sidebar heading color to match the theme */
    font-size: 28px; /* Increase font size for better readability */
    font-weight: 600; /* Make the heading bold */
    margin-bottom: 50px; /* Add space below the heading */
}
nav.woocommerce-MyAccount-navigation ul {
    list-style: none; /* Remove default list style */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    max-width: 300px; /* Set a maximum width for the navigation */
}
nav.woocommerce-MyAccount-navigation ul li {
    margin-block: 20px; /* Add space between list items */
    font-size: 16px; /* Increase font size for better readability */
}
nav.woocommerce-MyAccount-navigation ul li a {
    padding: 0px 10px; /* Add vertical padding for better clickability */
    color: #495651; /* Set text color to match the theme */
    transition: all 0.6s ease; /* Smooth transition for hover effects */
}
nav.woocommerce-MyAccount-navigation ul li a:hover {
    color: #000000; /* Change text color on hover */
    background-color: #d7ead8;
}
nav.woocommerce-MyAccount-navigation ul li.is-active {
    background-color: #7abb7d;
}
nav.woocommerce-MyAccount-navigation ul li.is-active a {
    color: #ffffff; /* Change text color to white for active menu item */
}

p.bella-wc-dashboard-summary-pre-content {
    color: #495651; /* Set text color to match the theme */
    font-size: 16px; /* Increase font size for better readability */
}
p.bella-wc-dashboard-summary-pre-content a {
    color: #7abb7d; /* Set link color to match the theme */
    text-decoration: none; /* Remove underline from links */
    font-weight: 600; /* Make links bold */
    transition: all 0.3s ease; /* Smooth transition for color change */
}
p.bella-wc-dashboard-summary-pre-content a:hover {
    color: #495651; /* Set text color to match the theme */
}
.bella-wc-dashboard-summary-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 50px;
    row-gap: 25px;
    margin-block: 50px;
    margin-inline: auto;
}
.bella-wc-dashboard-summary-icons figure {
    text-align: center; /* Center the content of the figure */
    background-color: #d7ead8;
    padding: 30px 20px;
    --caption-color: #495651; /* Set caption color */
    --filter-type: brightness(1); /* Set filter type for images */
}
.bella-wc-dashboard-summary-icons figure:hover {
    background-color: #7abb7d; /* Change background color on hover */
    transition: background-color 0.6s ease; /* Smooth transition for background color */
    cursor: pointer; /* Change cursor to pointer on hover */
    --caption-color: #ffffff; /* Change caption color on hover */
    --filter-type: brightness(0) invert(1); /* Darken image on hover */
}
.bella-wc-dashboard-summary-icons figure img {
    width: auto; /* Set a fixed width for the images */
    height: 60px; /* Maintain aspect ratio */
    margin-bottom: 30px; /* Add space below the image */
    filter: var(--filter-type); /* Apply filter type */
}
.bella-wc-dashboard-summary-icons figure figcaption {
    color: var(--caption-color);
    text-transform: uppercase; /* Make text uppercase */
    transition: filter 0.6s ease; /* Smooth transition for filter */
}
/**
*
*/
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
    border: none;
}
.bella-wc-login-form-container-input {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px; /* Add space between input fields */
}
.bella-wc-login-form-container-input label {
    color: #495651; /* Set label color to match the theme */
    font-size: 16px; /* Increase font size for better readability */
    margin-bottom: 5px; /* Add space below the label */
    font-weight: 600; /* Make label bold */
}
.bella-wc-login-form-container-input input,
.woocommerce form.woocommerce-form-register .form-row input.input-text,
.woocommerce form.woocommerce-EditAccountForm .form-row input {
    border: 1px solid #7abb7d; /* Set border for input fields */
    padding: 10px; /* Add padding for better spacing */
    border-radius: 5px; /* Add rounded corners to input fields */
    font-size: 16px; /* Increase font size for better readability */
    box-shadow: #495651a3 0px 3px 2px; /* Add a subtle shadow for depth */
    transition: border-color 0.3s ease; /* Smooth transition for border color */
    background-color: #ffffff; /* Set background color to white */
}
.bella-wc-login-form-container-input input[type="checkbox"] {
    box-shadow: none; /* Remove shadow for checkbox button */
    border-radius: 50%; /* Make checkbox button circular */
}
.woocommerce
    .woocommerce-form-login
    .bella-wc-login-form-container-input.bella-wc-login-form-container-submit
    button.woocommerce-form-login__submit,
.woocommerce-page .container-register-submit button.button,
body .woocommerce-MyAccount-content button.button {
    background-color: #7abb7d; /* Set button background color */
    color: #ffffff; /* Set button text color to white */
    border: none; /* Remove default border */
    padding: 11px 35px; /* Add padding for better spacing */
    font-size: 16px; /* Increase font size for better readability */
    border-radius: 23px; /* Add rounded corners to button */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
    margin: 10px auto; /* Center the button and add margin */
    width: fit-content; /* Adjust width to fit content */
}
.woocommerce-page .container-register-submit button.button {
    background-color: #495651a6; /* Set button background color for register button with 65% opacity in hex */
}
.woocommerce form .form-row.container-register-submit,
.woocommerce form .container-edit-submit {
    margin-top: 20px; /* Add space above the register button */
    text-align: center; /* Center the register button */
}
.woocommerce button.button:hover:after,
.woocommerce-page button.button:hover:after {
    opacity: 0;
}
.bella-wc-login-form-container-input.bella-wc-login-form-container-submit
    .bella-wc-login-form-rememberme {
    display: grid;
    grid-template-columns: repeat(
        2,
        1fr
    ); /* Create a two-column layout for the remember me checkbox */
    margin-top: 15px;
}
.bella-wc-login-form-container-input.bella-wc-login-form-container-submit
    .bella-wc-login-form-rememberme
    > p.lost_password {
    text-align: right; /* Align the text to the right */
}
.bella-wc-login-form-container-input.bella-wc-login-form-container-submit
    .bella-wc-login-form-rememberme
    label {
    font-weight: 400;
}
.bella-wc-login-form-container-input.bella-wc-login-form-container-submit
    .bella-wc-login-form-rememberme
    > p.lost_password
    a,
.woocommerce-Address-title.title a.edit {
    color: #7abb7d;
    transition: all 0.4s ease; /* Smooth transition for color change */
}
body .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
    background-color: #7abb7d;
}
.woocommerce-Address-title.title a.edit:hover {
    color: #495651; /* Set text color to match the theme */
}
.woocommerce .woocommerce-info a.button {
    color: #f1c40f;
    transition: all 0.3s ease;
}
.woocommerce .woocommerce-info a.button:hover {
    background-color: #f1c40f;
    color: black;
}