/* Basic resets */
html, body {
    margin: 0;
    padding: 0;
    font-size: 16px; /* Ensures readability on small devices */
    font-family: 'Arial', sans-serif; /* Consistent and clear font for the application */
    background-color: #f4f4f4; /* Light gray background for better readability */
    direction: rtl; /* Supports right-to-left text orientation */
}

/* Wrapper for the content to ensure flexibility and responsiveness */
.content-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allows elements to stack responsively on smaller screens */
    justify-content: center; /* Centers the content horizontally */   
    padding: 20px;
}

/* Form wrapper for structure and aesthetics */
.form-wrapper {
    flex: 1 1 100%; /* Full width on smaller screens for better accessibility */
    box-sizing: border-box; /* Includes padding and border in the width calculation */
    padding: 20px;
    background-color: #fff; /* Provides a clean, distraction-free background for forms */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Adds depth with a subtle shadow */
    margin-bottom: 20px; /* Separates forms when stacked */
}

/* Styling for page titles */
.page-title {
    text-align: right;
    padding-right: 30px;
    margin: 10px 0 20px;
}

/* Styling for labels and form elements */
.le-container > .fe-title, .fe-title {
    display: block; /* Correct display for right-to-left languages */
    margin: 5px 0; /* Spacing around form titles */
}

/* Generic form element styling */
.form-element {
    margin: 10px 0; /* Margin around form elements for clarity */
}

/* Text inputs and text areas to hold approximately 100 characters */
input[type="text"], .ta-felem {
    width: 100%; /* Width set to 100% for better responsiveness */
    max-width: 1000px; /* Maximum width to fit approximately 100 characters */
    padding: 8px;
    border: 1px solid #ccc;
    height: auto; /* Ensures the height adjusts based on content */
}

/* Wrapper for displaying results */
.result-warpper {
    padding: 10px 0 0; /* Padding above the result area */
}

/* Media queries for adaptive responsive design */
@media (min-width: 600px) {
    .content-wrapper {
        padding: 25px 10px; /* Increased padding for larger screens */
    }

    .form-wrapper {
        flex: 1 1 50%; /* Adjusts to 50% width on larger screens for side-by-side layout */
    }

    .separator {
        display: block; /* Re-display the separator on larger screens */
        position: relative;
        width: 1px; /* Thin vertical line as separator */
        background-color: #bebebe; /* Grey color for visibility */
        margin: 0 10px; /* Space between form sections */
    }
}