/*
 Theme Name:   Aljazyah Camps
 Theme URI:    https://iskills.sa/
 Description:  Custom theme design by <a ref=\"https://iskills.sa/\">Integrated Skills</a> for Aljazyah Camps
 Author:       Integrated Skills
 Author URI:   https://iskills.sa/
 Template:     astra
 Version:      1.0.0
 Text Domain:  aljazyah-camps
*/

/* General Form Wrapper Styles */
.wpcf7-form-wrapper {
    /* Removed: background-color: #ffffff; */
    padding: 0 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: 'Alexandria', 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 */
}
.wpcf7-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 */
}
.wpcf7-form-wrapper label {
	margin-bottom:5px;
}

/* RTL Style for all input fields and textareas */
.wpcf7-form-wrapper input[type="text"],
.wpcf7-form-wrapper input[type="email"],
.wpcf7-form-wrapper input[type="tel"],
.wpcf7-form-wrapper textarea {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 5px; /* Space between fields */
    border: 1px solid #e0e0e0; /* Light grey border */
    border-radius: 12px; /* Adjusted: Slightly more rounded corners for inputs */
    background-color: #0B2C1C; /* Green background */
    font-size: 14px;
    color: #f1f1f1; /* lighter 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 left */
}
/* LTR Style for all input fields and textareas */
.wpcf7-form-wrapper-en input[type="text"],
.wpcf7-form-wrapper-en input[type="email"],
.wpcf7-form-wrapper-en input[type="tel"],
.wpcf7-form-wrapper-en textarea {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 5; /* Space between fields */
    border: 1px solid #e0e0e0; /* Light grey border */
    border-radius: 12px; /* Adjusted: Slightly more rounded corners for inputs */
    background-color: #0B2C1C; /* 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 lecft */
}

/* Focus state for input fields and textareas */
.wpcf7 input.wpcf7-form-control:not([type=submit]):focus,
.wpcf7 select.wpcf7-form-control:focus,
.wpcf7 textarea.wpcf7-form-control:focus {
	    border-style: disable;
	border-color: #f1f1f1;
	border-width: thin;
	box-shadow: none;
	outline:  0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow on focus */
	background-color: #224735;
	color: #f1f1f1; /* lighter text color for input */
		/* color: var(--ast-form-input-focus-text,#475569); */
}

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

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

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

/* Textarea specific height */
.wpcf7-form-wrapper textarea {
    min-height: 80px; /* Taller height for message area */
	height: 120px;
    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 */
.wpcf7-form-wrapper input[type="submit"] {
    display: flex; /* Use flexbox for icon and text alignment */
    align-items: center;
    justify-content: flex-start;
    background: linear-gradient(to right, #224735, #227035); /* Orange to red gradient */
	
    color: #ffffff; /* White text */
    padding: 15px 30px;
    border: none;
    border-radius: 50px; /* Very rounded button */
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(107, 255, 255, 0.4); /* Larger blur radius for softer shadow */
    width: auto; /* Adjust width to content */
    margin: 10px 0 10px 0; /* Center the button */
    text-align: center;
    direction: rtl; /* Ensure RTL for button content */
}

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

/* Add the arrow icon using a pseudo-element */
.wpcf7-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 */
.wpcf7-form-wrapper label {
    display: block; /* Ensure labels take full width */
    margin-bottom: 5px; /* Remove default label margin if you're using placeholders */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .wpcf7-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 */
    }
}