/**
Theme Name: Tasa Express
Author: Integrated Skills
Author URI: https://iskills.sa/
Description: Custom theme design by <a ref=\"https://iskills.sa/\">Integrated Skills</a> for Tasa Express.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tasa-express
Template: astra
*/

/* General Form Wrapper Styles */
.cf7-form-wrapper {
    /* Removed: background-color: #ffffff; */
    padding: 30px; /* Adjust as needed */
    border-radius: 15px; /* Subtle rounded corners for the overall form container */
    /* Removed: box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); */
    max-width: 700px; /* Adjusted: Max width for the form, closer to image */
    margin: 40px auto; /* Center the form on the page */
    font-family: 'Inter', sans-serif; /* Use Inter font or your preferred font */
    direction: rtl; /* Ensure RTL layout for the form */
    text-align: right; /* Align text to the right */
}
.cf7-form-wrapper-en {
    /* Removed: background-color: #ffffff; */
    padding: 30px; /* Adjust as needed */
    border-radius: 15px; /* Subtle rounded corners for the overall form container */
    /* Removed: box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); */
    max-width: 700px; /* Adjusted: Max width for the form, closer to image */
    margin: 40px auto; /* Center the form on the page */
    font-family: 'Inter', sans-serif; /* Use Inter font or your preferred font */
    direction: ltr; /* Ensure LTR layout for the form */
    text-align: left; /* Align text to the left */
}

/* RTL Style for all input fields and textareas */
.cf7-form-wrapper input[type="text"],
.cf7-form-wrapper input[type="email"],
.cf7-form-wrapper input[type="tel"],
.cf7-form-wrapper textarea {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 20px; /* Space between fields */
    border: 1px solid #e0e0e0; /* Light grey border */
    border-radius: 12px; /* Adjusted: Slightly more rounded corners for inputs */
    background-color: #f8f8f8; /* Very light grey background */
    font-size: 16px;
    color: #333; /* Darker text color for input */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    text-align: right; /* Align input text to the right */
}
/* LTR Style for all input fields and textareas */
.cf7-form-wrapper-en input[type="text"],
.cf7-form-wrapper-en input[type="email"],
.cf7-form-wrapper-en input[type="tel"],
.cf7-form-wrapper-en textarea {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 20px; /* Space between fields */
    border: 1px solid #e0e0e0; /* Light grey border */
    border-radius: 12px; /* Adjusted: Slightly more rounded corners for inputs */
    background-color: #f8f8f8; /* Very light grey background */
    font-size: 16px;
    color: #333; /* Darker text color for input */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    text-align: left; /* Align input text to the right */
}

/* Focus state for input fields and textareas */
.cf7-form-wrapper input[type="text"]:focus,
.cf7-form-wrapper input[type="email"]:focus,
.cf7-form-wrapper input[type="tel"]:focus,
.cf7-form-wrapper textarea:focus {
    border-color: #a0a0a0; /* Slightly darker border on focus */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow on focus */
    outline: none; /* Remove default outline */
}

/* Placeholder text style */
.cf7-form-wrapper ::placeholder {
    color: #999; /* Light grey for placeholder text */
    opacity: 1; /* Ensure placeholder is visible */
    text-align: right; /* Align placeholder text to the right */
}

.cf7-form-wrapper :-ms-input-placeholder { /* For Microsoft Edge */
    color: #999;
    text-align: right;
}

.cf7-form-wrapper ::-ms-input-placeholder { /* For Internet Explorer 10-11 */
    color: #999;
    text-align: right;
}

/* Textarea specific height */
.cf7-form-wrapper textarea {
    min-height: 120px; /* Taller height for message area */
    resize: vertical; /* Allow vertical resizing */
}

/* Two-column layout for email and phone */
.form-row-two-columns {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 20px; /* Space between columns */
    margin-bottom: 10px; /* Space below the row */
}

.form-row-two-columns label {
    flex: 1 1 calc(50% - 10px); /* Each item takes 50% minus half the gap */
}

/* Submit Button Styles */
.cf7-form-wrapper input[type="submit"] {
    display: flex; /* Use flexbox for icon and text alignment */
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, #ff6b6b, #ffa07a); /* Orange to red gradient */
    color: #ffffff; /* White text */
    padding: 15px 30px;
    border: none;
    border-radius: 50px; /* Very rounded button */
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4); /* Larger blur radius for softer shadow */
    width: auto; /* Adjust width to content */
    margin: 20px auto 0 auto; /* Center the button */
    text-align: center;
    direction: rtl; /* Ensure RTL for button content */
}

.cf7-form-wrapper input[type="submit"]:hover {
    background: linear-gradient(to right, #ffa07a, #ff6b6b); /* Reverse gradient on hover */
    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.6); /* More prominent shadow on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

/* Add the arrow icon using a pseudo-element */
.cf7-form-wrapper input[type="submit"]::before {
    content: '←'; /* Left arrow character */
    font-size: 20px;
    margin-left: 10px; /* Space between arrow and text */
    transform: scaleX(1); /* Ensure arrow is not flipped by RTL */
    display: inline-block; /* Ensure it respects margin */
}

/* Contact Form 7 specific messages (success, error) */
.wpcf7-response-output {
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    direction: rtl;
}

.wpcf7-mail-sent-ok {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green text */
    border: 1px solid #c3e6cb;
}

.wpcf7-mail-sent-ng,
.wpcf7-validation-errors {
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red text */
    border: 1px solid #f5c6cb;
}

.wpcf7-spam-blocked {
    background-color: #fff3cd; /* Light yellow */
    color: #856404; /* Dark yellow text */
    border: 1px solid #ffeeba;
}

/* Hide labels if you only use placeholders, as per the image */
.cf7-form-wrapper label {
    display: block; /* Ensure labels take full width */
    margin-bottom: 20px; /* Remove default label margin if you're using placeholders */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .cf7-form-wrapper {
        padding: 20px;
        margin: 20px auto;
    }

    .form-row-two-columns label {
        min-width: 100%; /* Stack columns on small screens */
    }

    .form-row-two-columns {
        gap: 0; /* Remove gap when stacked */
    }
}

/* Footer adjustments*/
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] .ast-builder-grid-row, .site-primary-footer-wrap[data-section="section-primary-footer-builder"] .site-footer-section {
	align-items: center;
}