/*
 * General Forms Plugin - Base Forms Styles
 *
 * This file provides basic styling for multi-step forms generated by the plugin.
 * Customize these styles to match your WordPress theme.
 */

/* --- Font Imports (Add these to your theme's functions.php or enqueued CSS) ---
 * Example for functions.php:
 * function gfp_enqueue_google_fonts() {
 * wp_enqueue_style( 'gfp-google-fonts', 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Poppins:wght@400;500;600&display=swap', array(), null );
 * }
 * add_action( 'wp_enqueue_scripts', 'gfp_enqueue_google_fonts' );
 * IMPORTANT: Ensure this is correctly enqueued in your main plugin file or theme's functions.php
 * If you're not using a functions.php enqueue, you can try adding @import at the very top of this CSS file:
 * @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Poppins:wght@400;500;600&display=swap');
*/

/* --- General Form Container Styles --- */
.multi-step-form {
    background-color: #f8f9fa; /* Lighter background for the whole form area */
    border: 1px solid #e9ecef; /* Subtle border */
    border-radius: 12px; /* More rounded corners */
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* More pronounced shadow for the container */
    max-width: 1000px; /* Constrain width for better readability */
    margin: 40px auto; /* Center the form with more top/bottom margin */
    font-family: 'Poppins', sans-serif; /* Modern sans-serif font */
    color: #333;
    position: relative; /* For z-index if needed for transitions */
    overflow: hidden; /* Ensures elements don't spill during transitions */
}

/* --- Headings within the form --- */
.multi-step-form h2 { /* Targeting h2 as generated in the form PHP */
    font-family: 'Montserrat', sans-serif; /* A slightly more striking font for headings */
    font-size: 2em; /* Larger, more impactful heading */
    color: #2c3e50; /* Darker, modern heading color */
    margin-bottom: 25px;
    padding-bottom: 15px; /* More padding below heading */
    border-bottom: 2px solid #e0e0e0; /* Subtle underline */
    text-align: left; /* Align headings to the left */
}

/* --- Paragraph text within the form --- */
.multi-step-form p {
    font-size: 1.05em; /* Slightly larger body text */
    line-height: 1.6;
    margin-bottom: 20px; /* Adjusted spacing */
    text-align: left; /* Align text to the left for better readability in question sections */
}

/* --- Form Step Styles --- */
.form-step {
    /* Initially hidden and off-screen for animation */
    display: none; /* Controlled by JavaScript */
    opacity: 0;
    transform: translateX(20px); /* Start slightly to the right for sliding effect */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Smooth transitions */

    padding: 25px; /* Internal padding for each step */
    background-color: #fff; /* White background for individual steps */
    border-radius: 10px; /* Rounded corners for step containers */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Soft shadow for depth */
    margin-bottom: 20px; /* Space between steps (if they were stacked) and navigation */
}

/* Class added by JS to show the current active step */
.form-step.active-step {
    display: block; /* Make it visible */
    opacity: 1;
    transform: translateX(0px); /* Slide into place */
}

/* --- Labels and Input Fields --- */
.multi-step-form label {
    display: block;
    font-weight: 500; /* Medium weight, less heavy than bold */
    margin-bottom: 10px;
    color: #444; /* Slightly softer color */
    font-size: 1em; /* Standard font size */
    cursor: pointer; /* Indicate it's clickable */
}

.multi-step-form input[type="text"],
.multi-step-form input[type="email"],
.multi-step-form input[type="number"],
.multi-step-form textarea,
.multi-step-form select {
    width: calc(100% - 24px); /* Account for padding and border */
    padding: 12px; /* More generous padding */
    margin-bottom: 20px; /* More space below inputs */
    border: 1px solid #ddd; /* Lighter, subtle border */
    border-radius: 8px; /* Slightly more rounded corners */
    font-size: 1em;
    transition: all 0.3s ease-in-out; /* Smooth transition for focus */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Subtle inner shadow */
}

.multi-step-form input[type="text"]:focus,
.multi-step-form input[type="email"]:focus,
.multi-step-form input[type="number"]:focus,
.multi-step-form textarea:focus,
.multi-step-form select:focus {
    border-color: #007bff; /* A modern blue for focus */
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Subtle glow on focus */
}

.multi-step-form textarea {
    resize: vertical;
    min-height: 100px;
}

/* --- Radio and Checkbox Groups --- */
.form-group label { /* Applies to all labels, including radio/checkbox for consistent flexbox */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically align input and text */
    font-weight: normal; /* Labels within groups are not bold */
    cursor: pointer;
    margin-bottom: 12px; /* Spacing between options */
    font-size: 1em;
    color: #444;
}

.form-group input[type="radio"],
.form-group input[type="checkbox"] {
    margin-right: 12px; /* More space */
    min-width: 20px; /* Slightly larger targets */
    min-height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #007bff; /* Changes default checkbox/radio color if supported */
}

/* Styles for conditional sub-fields */
.sub-field {
    margin-top: 15px;
    padding-left: 25px; /* Indent conditional fields more */
    border-left: 4px solid #e0e0e0; /* More prominent visual separator */
    background-color: #fcfcfc; /* Very subtle different background */
    padding-top: 15px;
    padding-bottom: 5px;
    border-radius: 0 8px 8px 0; /* Rounded only on the right side */
    transition: all 0.4s ease-in-out;
}
.sub-field label {
    font-weight: 500;
    font-size: 0.95em; /* Slightly smaller for sub-labels */
    color: #555;
}
.sub-field input[type="number"],
.sub-field textarea {
    width: calc(100% - 15px); /* Adjust for internal padding */
    margin-bottom: 10px; /* Less margin for tight sub-fields */
}


/* --- Progress Bar --- */
.progress-indicator-container { /* This matches the HTML now */
    width: 100%;
    background-color: #e9ecef; /* Light background for the bar track */
    border-radius: 10px; /* Rounded ends */
    height: 12px; /* Slightly thicker bar */
    overflow: hidden; /* Ensure rounded corners clip content */
    margin-bottom: 25px; /* More space below */
}

.progress-indicator { /* This matches the HTML now */
    height: 100%;
    width: 0%; /* Controlled by JavaScript */
    background-color: #007bff; /* Primary color for progress */
    border-radius: 10px; /* Rounded ends */
    transition: width 0.4s ease-in-out;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.4); /* More visible subtle glow */
}

.progress-text {
    text-align: center;
    margin-top: 15px; /* More space above text */
    font-size: 0.9em; /* Slightly smaller for compactness */
    color: #6c757d;
    font-weight: 500;
}

/* --- Navigation Buttons --- */
.form-navigation {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right by default */
    gap: 15px; /* Space between buttons */
    margin-top: 30px;
    padding-top: 25px; /* More padding above buttons */
    border-top: 1px solid #eee;
}

.form-navigation button {
    background-color: #007bff; /* Primary color */
    color: #fff;
    border: none;
    padding: 12px 25px; /* More generous padding */
    border-radius: 30px; /* Pill-shaped buttons */
    cursor: pointer;
    font-size: 1em;
    font-weight: 600; /* Slightly bolder text */
    transition: all 0.3s ease-in-out; /* Smooth hover transition */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    min-width: 130px; /* Ensure consistent button width */
    text-align: center;
}

.form-navigation button:hover {
    background-color: #0056b3; /* Darker shade on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Slightly larger shadow on hover */
    transform: translateY(-2px); /* Lift effect */
}

/* Specific button styles */
.form-navigation .prev-button {
    background-color: #6c757d; /* Muted gray for previous */
    box-shadow: none; /* Remove shadow for previous button to make it less prominent */
}

.form-navigation .prev-button:hover {
    background-color: #5a6268;
    box-shadow: none;
    transform: translateY(-1px);
}

.form-navigation .submit-button {
    background-color: #28a745; /* Green for submit */
}

.form-navigation .submit-button :hover {
    background-color: #218838;
}

/* --- Utility / Help Text --- */
.help-text {
    font-size: 0.85em;
    color: #6c757d;
    margin-top: -10px; /* Pull it closer to the input field */
    margin-bottom: 20px;
    padding-left: 5px; /* Small indent */
}