/* Form container */
.custom-contact-form {
    backdrop-filter: blur(3px); /* Subtle blur effect */
    background-color: rgba(0, 0, 0, 0.2); /* Slightly transparent background */
    padding: 20px;
    border-radius: 15px;
    max-width: 100%; /* Optional: Define max width for the form */
    margin: 0 auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Soft shadow */
    color: #ffffff;
    font-family: Arial, sans-serif;
    direction: rtl; /* Support RTL for Hebrew */
    text-align: center; /* Center-align text */
    position: relative; /* Position relative to apply shadow correctly */
}



/* Full-width input boxes with less round borders */
.custom-contact-form .name input[type="text"],
.custom-contact-form .number input[type="text"],
.custom-contact-form .note textarea {
    width: 100% !important; /* Make inputs full width */
    max-width: 100%; /* Ensure no overflow */
    padding: 10px; /* Add some padding for better spacing */
    border: 1px solid #ffffff; /* White border for inputs */
    border-radius: 3px; /* Slightly rounded corners (can be 0px for squared) */
    font-size: 16px; /* Adjust font size for readability */
    background-color: #ffffff; /* White background */
    color: #000000; /* Black text */
    box-sizing: border-box; /* Prevent layout shifts */
	 box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* White outer glow when focused */
	
}

/* Add padding to titles (labels) to create space between input fields */
.custom-contact-form .name label,
.custom-contact-form .number label,
.custom-contact-form .note label {
    padding-bottom: 2px; /* Add 2px padding below the labels */
    display: block; /* Ensure labels are block-level elements */
    margin-bottom: 5px; /* Optional: Space between label and input */
}

/* Apply Noto Sans Hebrew font to labels */
.custom-contact-form .name label,
.custom-contact-form .number label,
.custom-contact-form .note label {
    font-family: 'Noto Sans Hebrew', sans-serif; /* Apply Noto Sans Hebrew font */
    padding-bottom: 2px; /* Add 2px padding below the labels */
    display: block; /* Ensure labels are block-level elements */
    margin-bottom: 5px; /* Optional: Space between label and input */
}

/* Full-width dropdown menu for the 'living' field */
.custom-contact-form .living select {
    width: 100% !important; /* Make the dropdown full width */
    max-width: 100%; /* Ensure no overflow */
    padding: 10px; /* Add padding for better spacing */
    border: 1px solid #ffffff; /* White border */
    border-radius: 3px; /* Slightly rounded corners (can be 0px for square) */
    font-size: 16px; /* Adjust font size for readability */
    background-color: #ffffff; /* White background */
    color: #000000; /* Black text */
    box-sizing: border-box; /* Prevent layout shifts */
}

/* Center the dropdown menu */
.custom-contact-form .living {
    display: flex;
    justify-content: center; /* Center the dropdown horizontally */
    align-items: center; /* Center the dropdown vertically (if needed) */
    width: 100%; /* Ensure it takes the full width of the form */
}

/* Ensure the container of the dropdown is stretched */
.custom-contact-form .living {
    width: 100%; /* Full width of the form container */
    display: block; /* Ensure it behaves as a block-level element */
    margin: 0; /* Remove any default margin */
}

/* Style for the dropdown menu */
.custom-contact-form .living select {
    width: 100% !important; /* Make the dropdown take full width */
    max-width: 100% !important; /* Ensure no overflow */
    padding: 15px; /* Add padding for better spacing */
    border: 1px solid #ffffff; /* White border */
    border-radius: 3px; /* Slightly rounded corners */
    font-size: 16px; /* Adjust font size */
    background-color: #ffffff; /* White background */
    color: #000000; /* Black text */
    box-sizing: border-box; /* Ensure padding and borders are included in width */
    text-align: center; /* Align text to the left inside the dropdown */
    display: block; /* Ensure it’s a block-level element to stretch */
	 box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* White outer glow when focused */
}



/* Customize the button with the class 'wp-forms-button' */
.wp-forms-button {
    background-color: #858104; /* Default background color */
    color: white; /* White text color */
    font-size: 18px; /* Font size for button text */
    font-family: 'Noto Sans Hebrew', sans-serif; /* Apply Noto Sans Hebrew font */
    padding: 12px 24px; /* Padding for vertical and horizontal spacing */
    border-radius: 8px; /* Rounded corners */
    border: none; /* Remove border */
    width: 45%; /* Allow button width to be flexible */
    max-width: 100%; /* Ensure button doesn't exceed container width */
    cursor: pointer; /* Add pointer cursor on hover */	
    text-align: center; /* Center the text inside the button */
    box-sizing: border-box; /* Ensure padding is included in button width */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition on hover and glow */
}

/* Hover effect for the button */
.wp-forms-button:hover {
    background-color: #5e5b02; /* Darker background on hover */
}

/* Glowing effect keyframes */
@keyframes white-glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
    }
}

/* Glowing effect when the button text is 'שולח...' */
.wp-forms-button.glow {
    animation: white-glow 1s infinite; /* Apply glowing animation */
}

/* Responsive design: Button adjusts width on smaller screens */
@media (max-width: 768px) {
    .wp-forms-button {
        width: 100%; /* Make button full width on smaller screens */
    }
}