/* ====================================
   FORM-STYLES.CSS
   Dedicated styles for form elements,
   used on pages like book-pooja.php and donation.php.
   ==================================== */

/* === FORMS CONTAINER === */
.form-container {
    max-width: 600px; /* Use the smaller width from the original form-styles */
    margin: 40px auto; /* Use the spacing from the original form-styles */
    padding: 30px; /* Use the spacing from the original form-styles */
    background-color: #fff3E0; /* Use the background color from the original form-styles */
    border-radius: 10px; /* Use the border-radius from the original form-styles */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Use the shadow from the original form-styles */
}

.form-title {
    text-align: center;
    color: #FF8C42; /* Orange from original form-styles */
    margin-bottom: 20px;
    font-size: 2em;
}

.form-subtitle {
    text-align: center;
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: #555;
}

/* Page titles should be styled by the main style sheet, but including .page-title for completeness if used with forms. */
.page-title {
    text-align: center;
    color: #ff6600; /* Orange from main styles */
    margin-bottom: 10px;
}

/* === FORM GROUPS (Labels and Inputs) === */
.form-group {
    width: 500px;
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* Spacing from original form-styles */
    */
}

.form-group label {
    width: 120px;
    margin-right: 10px;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: right;
    color: #333;
    flex-shrink: 0;
}

.input-wrapper {
    /* Allow the input wrapper to take up the remaining space */
    flex-grow: 1;
    /* Ensure contents (icon and input) are also aligned horizontally */
    display: flex; 
    align-items: center;
    position: relative;
}

/* Icon Styling */
.input-wrapper i {
    margin-right: 8px;
    position: absolute;
    left: 15px; /* Adjusted left position to accommodate padding */
    top: 50%;
    transform: translateY(-50%);
    color: #FF8C42; /* Orange icon from original form-styles */
    z-index: 10; /* Ensure icon is above input */
}

.form-control {
    width: 100%;
    padding: 12px 12px 12px 45px; /* Added padding-left for icon */
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    transition: border-color 0.3s;
    box-sizing: border-box; /* Crucial for width: 100% to work with padding */
}

.form-control:focus {
    border-color: #FF8C42; /* Orange focus */
    outline: none;
    box-shadow: 0 0 5px rgba(255, 140, 66, 0.5);
}

.input-wrapper:focus-within i {
    color: #FF8C42;
}

.input-wrapper textarea.form-control {
    min-height: 80px;
    resize: vertical;
    padding: 12px 12px 12px 45px; /* Maintain icon padding for textarea */
}

/* Specific styling for Select elements (from original form-styles) */
select.form-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px; 
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M9.293%2012.95l.707.707L15.657%208l-1.414-1.414L10%2010.828%205.757%206.586%204.343%208z%22%20fill%3D%22%23FF8C42%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-left: 40px; /* Remove icon padding for select since it doesn't support the icon well */
}

/* Checkbox/Radio Styling (from original form-styles) */
.checkbox-group {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    width: auto;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
}

/* === BUTTONS === */
/* Using .cta-button for form submission (as decided in the previous step) */
.cta-button {
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    border: none;
    background-color: #FF8C42; /* Orange from original form-styles */
    color: white;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #FF6F61; /* Darker Orange from original form-styles */
}

/* === FEEDBACK MESSAGES (from original form-styles) === */
.success-message, .error-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}

.success-message {
    background-color: #d4edda; /* Light Green */
    color: #155724; /* Dark Green */
    border: 1px solid #c3e6cb;
}

.error-message {
    background-color: #f8d7da; /* Light Red */
    color: #721c24; /* Dark Red */
    border: 1px solid #f5c6cb;
}

/* === MEDIA QUERIES (Form specific) === */
@media (max-width: 650px) {
    .form-container {
        margin: 20px 10px;
        padding: 20px;
    }
}
/* For smaller screens where space is tight, remove right-alignment on label */
@media (max-width: 500px) {
    .form-group {
        flex-direction: column;
        align-items: flex-start;
    }
    .form-group label {
        min-width: auto;
        text-align: left;
        margin-right: 0;
    }
}