/*
 Theme Name:   4thD Christmas Trees
 Theme URI:    
 Description:  Divi Child Theme
 Author:       Gareth du Plessis
 Author URI:   http://example.com
 Template:     Divi
 Version:      1.0.0
*/

/* Import parent theme styles */
@import url("../Divi/style.css");

/* Add your custom styles below */

/* Container styling to center the form elements */
.input-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    gap: 10px; /* Space between input and button */
    margin-bottom: 20px; /* Space below the container */
}

/* Installation Postcode Field */
.installation-postcode-field {
    margin-bottom: 20px;
}

.installation-postcode-field label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #006f52; /* Use brand color for labels */
}

.installation-postcode-field input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Input Field Styling */
#postcode-input {
    width: 100%; /* Make input full-width within the container */
    max-width: 400px; /* Optional: Limit the maximum width */
    padding: 12px 16px;
    font-size: 16px;
    color: #333;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#postcode-input:focus {
    border-color: #006f52; /* Use primary brand color on focus */
    box-shadow: 0 2px 6px rgba(0, 111, 82, 0.3);
    outline: none;
}

/* Button Styling */
#submit-postcode {
    padding: 12px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #006f52; /* Primary brand color */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#submit-postcode:hover {
    background-color: #004d3a; /* Darker shade on hover */
    box-shadow: 0 4px 8px rgba(0, 90, 141, 0.2);
}

#submit-postcode:focus {
    outline: none;
}

/* Result Text Styling */
#result-text {
    margin-top: 20px;
    font-size: 18px;
    color: #333;
    text-align: center;
    padding: 10px;
    background-color: #f4f9f4; /* Light greenish background */
    border-left: 4px solid #006f52; /* Primary brand color as an accent */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0; /* Initially hidden */
    transform: translateY(10px); /* Slightly off-screen */
}

#result-text.show {
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Slide into place */
}

/* Media Query for Mobile Responsiveness */
@media (max-width: 480px) {
    #postcode-input {
        width: 100%;
    }

    #submit-postcode {
        width: 100%;
        margin-left: 0; /* Remove margin on small screens */
        margin-top: 10px; /* Space between input and button on small screens */
    }

    .input-container {
        flex-direction: column;
    }
}

/* General Form Styling */
.wpcf7 form {
    background-color: #f5f5f5; /* Light background for contrast */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

/* Label Styling */
.wpcf7 form label {
    color: #006f52; /* Primary brand color for labels */
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

/* Input and Select Styling */
.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form input[type="tel"],
.wpcf7 form textarea,
.wpcf7 form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #006f52; /* Primary brand color for input borders */
    border-radius: 5px;
    box-sizing: border-box;
}

/* Radio and Checkbox Styling */
.wpcf7 form input[type="radio"],
.wpcf7 form input[type="checkbox"] {
    margin-right: 5px;
}

/* Submit Button Styling */
.wpcf7 form .submit-button {
    text-align: center;
}

.wpcf7 form .submit-button input[type="submit"] {
    background-color: #006f52; /* Primary brand color */
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.wpcf7 form .submit-button input[type="submit"]:hover {
    background-color: #004d3a; /* Darker shade on hover */
}

/* Adjust the thumbnail columns in Composite Products */
/* Set the component thumbnails to 4 columns */
.component_option_thumbnails.columns-3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.component_option_thumbnail_container {
    width: 23%; /* Each column takes approximately 23% of the width to fit 4 columns */
    margin-bottom: 15px; /* Space between rows */
}

/* Ensure no additional margin on the last item in each row */
.component_option_thumbnail_container:nth-child(4n) {
    margin-right: 0;
}

/* Optional: Adjust thumbnail image size to fit within the new layout */
.component_option_thumbnail img {
    width: 100%;
    height: auto;
}

.woocommerce div.product form.composite_form {
    width: 100% !important;
    max-width: 1200px !important;
}

.woocommerce-page #primary,
.woocommerce-page #content {
    width: 100% !important;
  max-width: 1200px !important;
}

.woocommerce-page .site-content {
    width: 100% !important;
    max-width: 1200px !important;
}

/* Dropdown styling */
/* General dropdown styling */
.woocommerce select {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23006f52" d="M7 10l5 5 5-5z"/></svg>'); /* Primary brand color for arrow */
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
}

/* Dropdown hover and focus effects */
.woocommerce select:focus,
.woocommerce select:hover {
    border-color: #006f52; /* Primary brand color */
    box-shadow: 0 2px 6px rgba(0, 111, 82, 0.2);
    outline: none;
}

/* Modern dropdown list styling */
.woocommerce select option {
    padding: 12px 16px;
    font-size: 16px;
    background-color: #f9f9f9; /* Light background for dropdown options */
    color: #333;
}

/* Hover effect for dropdown options */
.woocommerce select option:hover,
.woocommerce select option:focus {
    background-color: #b9d53c; /* Secondary brand color */
    color: #fff;
}

.wpcf7-mail-sent-ok {
    background-color: #f0f9f0; /* Light green background for success */
    color: #2f8a2d; /* Dark green text for clarity */
    border: 2px solid #2f8a2d; /* Dark green border */
    padding: 20px;
    font-size: 18px;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    text-align: center;
    font-family: 'Arial', sans-serif; /* Clean, modern font */
}

.wpcf7-mail-sent-ok h2 {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: bold;
}

.wpcf7-mail-sent-ok p {
    margin: 0;
    padding: 0;
}


/* Ensure dropdown styling applies correctly across all browsers */
.woocommerce select::-ms-expand {
    display: none; /* Hide default arrow in IE */
}

.woocommerce select::-webkit-inner-spin-button,
.woocommerce select::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove arrows from number input in Safari */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove arrows from dropdown list in Firefox */
select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

/* Mobile Styling for touch-friendly dropdowns */
@media screen and (max-width: 768px) {
    .woocommerce select {
        font-size: 18px;
        padding: 14px 20px;
        border-radius: 10px;
        background-position: right 12px center;
    }
}

/* Dropdown list on hover and active state */
.woocommerce select optgroup,
.woocommerce select option:hover,
.woocommerce select option:active {
    background-color: #b9d53c; /* Secondary brand color */
    color: #fff;
}

/* Style the dropdown itself when expanded */
.woocommerce select {
    position: relative;
}

.woocommerce select:focus-visible option {
    background-color: #b9d53c; /* Secondary brand color */
    color: #fff;
}

.et-db #et-boc .et-l .et_pb_wc_add_to_cart form.cart .variations td select 
{
    padding: 20px !important;
    font-size: 16px;
}
.result-text {
    margin-top: 20px;
    font-size: 1.2em;
}

.important-message {
    margin-top: 20px;
    padding: 10px;
	text-align: center;
    background-color: #ffdddd;
    border: 1px solid #f5c2c2;
    color: #a94442;
    font-size: 1.1em;
    display: none; /* Hidden initially */
}

.clear-button {
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #006f52;
	font-size: 14px;
	text-align: center;
    color: white;
    border: none;
    cursor: pointer;
    display: none; /* Hidden initially */
}

.clear-button:hover {
    background-color: #006f52;
}

.inline-fields {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.field-group {
    flex: 1;
}

.field-group label {
    display: block;
    margin-bottom: 5px;
}

textarea, select, input[type="text"], input[type="email"], input[type="tel"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 10px;
}

.submit-button {
    text-align: center;
    margin-top: 20px;
}

.component_selections .component_content .product.content.summary_content.populated.bundle_form .composited_product_details_wrapper .bundled_product_summary.product {
	display: none;
}


/* span.summary_element_content span.content_bundled_product_title
{
	display: none;
}
*/

.composited_product_details_wrapper {
    display: flex; /* Use flexbox to align the children side by side */
    justify-content: space-between; /* Ensure equal spacing */
}

.composited_product_images {
    width: 40% !important; /* Set the width to 50% */
}

.details {
    width: 60% !important; /* Set the width to 50% */
}

.composite_pagination {
    display: block !important;
}

.woocommerce ul.component_option_thumbnails_container li.component_option_thumbnail_container .thumbnail_description .price
{
	display: none !important
}

/* Specific styling for the select2 dropdown inside the .installinfo field */
.installinfo .select2-selection__rendered {
    background-color: #f9f9f9 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 5px !important;
}

/* Style individual selected items in the select2 multiple selection */
.installinfo .select2-selection__choice {
    background-color: #007cba !important;
    color: #fff !important;
    padding: 2px 5px !important;
    border-radius: 3px !important;
    margin-right: 3px !important;
}

/* Change the color of the mobile menu icon (hamburger icon) */
.et_mobile_menu {
    color: #b9d53c !important;
}

/* Ensure the menu icon bars are the right color */
.mobile_menu_bar:before {
    background-color: #b9d53c !important;
}

.cas-pick-h1
{
	display: none !important
}