/*
    Theme Name:   woodmart-child  <-- اسم دلخواه برای قالب فرزندت
    Theme URI:    http://example.com/woodmart-child/  <-- لینک سایتت (اختیاری)
    Template:     woodmart
    Version:      1.0.0
    Description:  A child theme for the woodmart theme.  <-- توضیحات دلخواه
    Author:       farnoud  <-- نام خودت یا تیمت
    Author URI: http://themeforest.net/user/xtemos  <-- لینک سایتت (اختیاری)
    License: GNU General Public License version 3.0
    License URI: http://www.gnu.org/licenses/gpl-3.0.html
    Tags:         child-theme, responsive-layout
    Text Domain:  woodmart
    */

    
/* Main container for the form */
.custom-contact-form {
    width: 100%;
    max-width: 700px; /* Adjust max-width as needed */
    margin: 20px auto; /* Center the form and add space above/below */
    padding: 30px;
    background-color: #f9f9f9; /* Light background for the form container */
    border-radius: 10px; /* Rounded corners for the container */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    font-family: 'YourDesiredFont', sans-serif; /* Set a font if needed */
}

/* Styling for all rows */
.custom-contact-form .form-row {
    display: flex; /* Use flexbox for easy alignment */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    margin-bottom: 10px; /* Space between rows */
    gap: 20px; /* Space between items in the row */
}

/* Specific styling for two-column rows */
.custom-contact-form .form-row.two-columns .form-field {
    flex: 1; /* Each field takes equal space */
    min-width: 250px; /* Minimum width for each field before wrapping */
}

/* Style for the message row specifically */
.custom-contact-form .form-row.message-row {
    margin-bottom: 10px;
}

/* Style for the submit row */
.custom-contact-form .form-row.submit-row {
    margin-top: 20px; /* More space above the button */
    justify-content: center; /* Center the button */
}

/* Styling for individual form fields (inputs and textarea) */
.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form input[type="tel"],
.custom-contact-form textarea {
    width: 100%; /* Occupy full width of their parent container */
    padding: 15px 20px; /* Padding inside the fields */
    border: 1px solid #d1d1d1; /* Lighter border color */
    border-radius: 8px; /* More rounded corners */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-size: 16px; /* Readable font size */
    color: #333; /* Dark text color */
    background-color: #ffffff; /* White background for inputs */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

/* Placeholder text styling */
.custom-contact-form input::placeholder,
.custom-contact-form textarea::placeholder {
    color: #888; /* Grey color for placeholder text */
    font-weight: normal; /* Ensure placeholder is not bold */
}

/* Specific styling for the phone number input placeholder */
/* This targets the placeholder specifically for the phone input */
.custom-contact-form input[type="tel"]::placeholder {
    text-align: right; /* Right-align the placeholder text */
}

/* Styling for input fields when focused */
.custom-contact-form input[type="text"]:focus,
.custom-contact-form input[type="email"]:focus,
.custom-contact-form input[type="tel"]:focus,
.custom-contact-form textarea:focus {
    border-color: #007bff; /* Blue border on focus */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Subtle glow */
    outline: none; /* Remove default outline */
}

/* Specific styling for textarea */
.custom-contact-form textarea {
    min-height: 180px; /* Minimum height for the message box */
    resize: vertical; /* Allow vertical resizing by the user */
}

/* Styling for the submit button */
.custom-contact-form .wpcf7-submit {
    display: inline-block; /* Changed to inline-block to respect padding/margin */
    padding: 15px 30px; /* Larger padding for the button */
    background-color: #007bff; /* Primary blue color, like your example */
    color: white; /* White text */
    border: none; /* No border */
    border-radius: 8px; /* Rounded corners matching inputs */
    font-size: 18px; /* Larger font size */
    font-weight: bold; /* Bold text */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3); /* Shadow for the button */
}

/* Hover effect for the submit button */
.custom-contact-form .wpcf7-submit:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: translateY(-1px); /* Slight lift effect */
}

/* --- Responsive Adjustments --- */

/* For screens smaller than 768px (tablets and phones) */
@media (max-width: 768px) {
    .custom-contact-form {
        padding: 20px;
        margin-top: 10px; /* Adjusted margin-top for mobile */
    }
    /* On smaller screens, stack all fields by making them full width */
    .custom-contact-form .form-row .form-field {
        flex-basis: 100%; /* Take full width */
        min-width: 0; /* Reset min-width */
    }
    .custom-contact-form .form-row {
        gap: 0; /* Remove gap when stacked */
    }
    .custom-contact-form input[type="text"],
    .custom-contact-form input[type="email"],
    .custom-contact-form input[type="tel"],
    .custom-contact-form textarea {
        margin-bottom: 10px; /* Add margin below stacked fields */
    }

    /* Right-align placeholder for phone input on mobile too */
    .custom-contact-form input[type="tel"]::placeholder {
        text-align: right;
    }
    
    .custom-contact-form .form-row.submit-row {
        justify-content: flex-start; /* Align button to left on mobile */
    }
    .custom-contact-form .wpcf7-submit {
        width: 100%; /* Full width button */
    }
}

/* Hide the actual labels if they are present and not part of the placeholder */
.custom-contact-form .wpcf7-form label {
    display: none !important;
}

/* Ensure the parent containers for floating elements don't collapse */
.custom-contact-form .wpcf7-form-control-wrap {
    display: block !important; /* Make sure wrappers are block elements */
    width: 100%; /* Make sure they take full width */
}