/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
.login-logout-button {display:inline-block;padding:6px 20px;background-color:#3a8935;color:#fff;max-height:44px;font-size:18px;text-decoration:none;border:none;border-radius:8px;cursor:pointer;transition:background-color 0.3s ease-in-out;}
.custom-login-logout a, .create-account a {
    display: inline-flex; /* Use inline-flex for better alignment */
    align-items: center; /* Vertically centers the content */
    justify-content: center; /* Horizontally centers the content */
    padding: 2px 10px; /* Adjusted padding for consistency */
    background-color: #3a8935;
    color: #ffffff !important;
    max-height: 42px;
    font-size: 18px;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.login-logout-button a {
    display: inline-flex; /* Use inline-flex for better alignment */
    align-items: center; /* Vertically centers the content */
    justify-content: center; /* Horizontally centers the content */
    padding: 2px 10px; /* Adjusted padding for consistency */
    background-color: #3a8935;
    color: #fff !important;
    max-height: 42px;
    font-size: 18px;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}


.login-logout-button:hover {background-color:#333333;}
select {background-color: #fff;color: #555555;border: 2px solid #fff;border-radius:0px;padding: 0px 12px;}
.woocommerce-MyAccount-navigation {display:none;}
.bottom-container {position: relative;height: 200px;border: 0px solid #ccc;}
.bottom-container img {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);}
.logout-button {display:flex;align-items:center;justify-content:flex-start;background-color:black;color:black;border:none;padding:10px 20px;font-size:20px;line-height:1.5;cursor:pointer;border-radius:20px;}
.logout-button i {margin-right:10px;margin-top:2px;}
.bricks-products-widgets {font-size:1.8rem;}
.orderby {border:1px solid #000;}

.products li {
    max-height: 600px;
    border: 0px solid #ccc; /* Changed from 1px to 0px */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    padding: 10px;
    box-sizing: border-box;
    display: flex; /* Flex container for vertical alignment */
    flex-direction: column; /* Stack items vertically */
}

.products li img {
    width: 100%;
    height: auto;
    padding: 10px 0;
    display: block;
}

.products li h5 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: black;
    height: auto;
    padding: 0.5rem 1rem;
    font-size: 1.85rem;
    border-bottom: 1px solid #555555;
    margin-bottom: 2rem; /* Space between title and price/button row */
}

/* Price and Add to Cart Button in a row */
.products li .woocommerce-Price-amount {
    font-size: 24px;
    font-weight: 800;
    color:#000000;
    margin: 0 0 10px 0;
    line-height: 1; /* Ensure it's not taller than necessary */
    float:right;
}

.products li .add_to_cart_button {
    background-color: #3a8935;
    color: #ffffff;
    padding: 10px 20px; /* Adjust padding to match line-height of price */
    border: none;
    margin: 0 0 10px 0;
    line-height: 1; /* Ensure text is not taller than necessary */
    white-space: nowrap; /* Prevent wrapping */
    max-height: none; /* Ensure button can shrink to fit content */
    float:right;
}


@media (max-width: 768px) {
    .products .product-info {
        flex-direction: column;
        align-items: flex-start;
    }
}




/* .product-card {border: 0px solid #ccc;box-shadow: 0 2px 5px rgba(0,0,0,0.1);margin: 20px;padding: 15px;width: 400px;} */
/* .product-card img {width: 100%;height: auto;padding:10px 0;} */
/* .product-card h5 { display:flex;align-items:center;justify-content:center;background-color:#fff;color:black;height:80px;padding:0.5rem 1rem;font-size:1.85rem;border-bottom:1px solid #aaa;} */
/* .product-card .amount {color:#000000;font-size:24px;} */
.add_to_cart_button {background-color:#0000fe;color:#fff;font-size:1.8rem;}
.divider {margin: 10px 0;border-top: 1px solid #eee;}
.custom-text-field label, .custom-image-upload label {color:#000;font-size:1.8rem;font-weight:600;}
.custom-text-field{margin-top:0.5rem;}

/* Style for all input fields */
form input[type="text"],
form input[type="email"],
form input[type="password"],
form textarea,
form select {
    border: 1px solid #aaa; /* Set the border color */
    border-radius: 4px; /* Optional: rounded corners */
    padding: 10px; /* Padding inside the input field */
    font-size: 16px; /* Font size */
    color: #000000; /* Text color */
    background-color: #fff; /* Background color */
}

/* Hover effect for input fields */
form input[type="text"]:hover,
form input[type="email"]:hover,
form input[type="password"]:hover,
form textarea:hover,
form select:hover {
    border-color: #aaa; /* Change border color on hover */
    color: 000000;
}

/* Focus effect for input fields */
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form textarea:focus,
form select:focus {
    border-color: #aaa; /* Change border color when focused */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Add shadow for focus effect */
    color: #000000;
}

/* Style for select fields */
form select {
    border: 2px solid #555; /* Dark border color */
    border-radius: 4px; /* Rounded corners */
    padding: 8px; /* Padding inside the select field */
    font-size: 16px; /* Font size */
    color: #333; /* Text color */
    background-color: #fff; /* Background color */
    border-color: #555; /* Border color */
    color: #000000;
    appearance: none; /* Remove default styling in some browsers */
}

/* Optional: Add a hover effect */
form select:hover {
    border-color: #555; /* Border color */
    color: #000000;
}

/* Optional: Add a focus effect */
form select:focus {
    border-color: #555; /* Change border color when focused */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Add shadow for focus effect */
    color: #000000;
}



/* Product container styling for four columns */
.dashboard-featured ul.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Individual product item styling */
.dashboard-featured ul.products li.product {
    flex: 1 1 calc(25% - 15px); /* Default to four columns */
    min-width: 250px; /* Set a minimum width for each item */
    margin-bottom: 20px;
    margin-right: 15px; /* Right margin for column gap */
    background-color: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .dashboard-featured ul.products li.product {
        flex: 1 1 calc(33.33% - 15px); /* Three columns on medium screens */
    }
}

@media (max-width: 768px) {
    .dashboard-featured ul.products li.product {
        flex: 1 1 calc(50% - 10px); /* Two columns on smaller screens */
    }
}

@media (max-width: 480px) {
    .dashboard-featured ul.products li.product {
        flex: 1 1 100%; /* One column on mobile screens */
    }
}

/* Title styles within the dashboard */
.dashboard-featured .woocommerce-loop-product__title {
    font-size: 20px; /* Set a smaller font size */
    margin: 8px 0; /* Adjust spacing if necessary */
    font-weight: 700; /* Optional: Change font weight if needed */
    color: #000000; /* Optional: Adjust color if needed */
}


/* Center the price and button, and increase price font size */
.dashboard-featured .price {
    font-size: 22px; /* Increase price font size */
    color: #000000; /* Darker color for price text */
    margin-right: 15px;
    margin-bottom: 15px; /* Add space between price and button */
    text-align: center; /* Center-align the price */
    font-weight: bold; /* Make the price text bold */
}

/* Style the button with a green background and white text, centered below the price */
.dashboard-featured ul.products li.product .add_to_cart_button {
    background-color: #28a745; /* Green background color */
    color: #ffffff; /* White text color for button */
    padding: 10px 20px; /* Padding for button */
    border-radius: 5px; /* Rounded corners */
    display: inline-block; /* Make button inline-block to control spacing */
    text-align: center; /* Center text within the button */
    margin: 0 auto; /* Center the button within the container */
    font-weight: bold; /* Bold button text */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for button */
.dashboard-featured ul.products li.product .add_to_cart_button:hover {
    background-color: #218838; /* Darker green on hover */
}

.dashboard-featured h2 {margin-bottom: 20px;}

.badge {
    display: inline-block;
    padding: 10px 15px;
    background-color: #ff5733!important; /* Bright red-orange background */
    color: white; /* White text color */
    font-size: 14px; /* Font size */
    font-weight: bold; /* Bold text */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 1px; /* Spacing between letters */
    transition: transform 0.2s ease; /* Smooth scaling effect on hover */
}

.badge:hover {
    transform: scale(1.1); /* Slightly enlarge the badge on hover */
}

.onsale {background-color:green!important;color:white!important;padding:5px 20px!important;}

.badge:visited {
    background-color: #ff5733!important;
}

.badge:visited:hover {
    background-color: #c0392b;
}

.wc-block-components-checkout-place-order-button {background-color: navy;color:white;padding:12px 30px;}

.woocommerce-form-coupon-toggle .woocommerce-info {margin-top:30px;border:1px solid navy;background-color:blue;color:white;font-size:20px;}
/* Style for all input types in WooCommerce billing fields */
.woocommerce-billing-fields input[type="text"], .woocommerce-billing-fields input[type="email"], .woocommerce-billing-fields input[type="tel"], .woocommerce-billing-fields textarea, .woocommerce-billing-fields select {border: 1px solid #999; border-radius: 5px; padding: 5px 10px; font-size: 16px; color: #000; width: 100%; box-sizing: border-box;}
.woocommerce-shipping-fields input[type="checkbox"] {transform: scale(1.5); margin:10px; width:20px; height:20px;}
 .shipping_address {margin-top:30px;}
/* Focus effect for better user experience */
.woocommerce-billing-fields input[type="text"]:focus, .woocommerce-billing-fields input[type="email"]:focus, .woocommerce-billing-fields input[type="tel"]:focus, .woocommerce-billing-fields textarea:focus, .woocommerce-billing-fields select:focus {border-color: #007cba; box-shadow: 0 0 5px rgba(0, 123, 188, 0.5);}
.woocommerce-checkout-payment {background-color:#e0f4ff;}
.order-total {font-size:20px;}
.cart-subtotal, .woocommerce-shipping-totals, .order-total {margin:0;padding: 5px 10px;line-height:1;}
#brxe-dwhpxi {border: 3px solid #0b7dda; border-radius:20px; background-color:#e5f3ff; padding:20px;}
#order_review {border:none!important;}
#order_review .woocommerce-checkout-review-order-table {margin-top:20px;border:none;}
#order_review thead .product-name {background-color:navy;color:white;}
#order_review thead .product-total {background-color:navy;color:white;}
.wc_payment_methods .payment_box {background-color:white;}
.wc_payment_methods .payment_box {background-color:white !important;color:black;}
.payment_box input[type="checkbox"].input-radio, input[type="checkbox"].input-checkbox {vertical-align: middle; margin-top: 0;}
.payment_box label {display: inline-block; margin-left: 5px; line-height: 1.5;}
.payment_method_paystack input[type="checkbox"] {width: auto; vertical-align: middle; margin: 0; margin-top:5px;}
.payment_method_paystack label {display: inline-block; margin-left: 15px; line-height: 1.5; vertical-align: top;}
#payment {box-shadow: 0 4px 15px #ccc, 0 1px 10px #ccc; border:1px solid #0b7dda; border-radius: 20px; transition: box-shadow 0.3s ease;} #payment:hover {box-shadow: 0 6px 20px #ccc, 0 2px 15px #ccc;}

#brx-content .brxe-post-content {font-size:20px;margin-bottom:20px;}
#brx-content .brxe-post-author {font-size:16px;width:45%;display:none;}
#brx-content article.brxe-container {width:100%;margin:5rem 8rem 8rem;}
#brxe-swtoua .cart {margin-top: 30px;}
.cart tbody tr:nth-child(odd) {background-color: #b1f5fa; color: #000;}
#brxe-taogoj .cart_totals {padding-right:20px;}
#brxe-taogoj .cart_totals .shop_table {border:none;}
.cart_totals .order-total th {margin-top: 10px; border-bottom: 3px solid #0b7dda;}
#brxe-taogoj .cart_totals .shop_table td {margin-top: 10px; border-bottom: 3px solid #0b7dda;}
.cart_totals .wc-proceed-to-checkout {margin: 15px -5px 8px 10px; float:right;}

button, #button, .button  {margin-top:10px;background:green !important;color:white !important;}