/* Styles for Car Value Estimator - car-value-estimator.css */

.calcufacil-car_value_estimator.calcufacil-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 30px; /* Space between left and right columns */
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: #f9f9f9;
    max-width: 900px; /* Adjust max width as needed */
    margin: 20px auto; /* Center the container */
    font-family: sans-serif; /* Basic font */
}

.calcufacil-car_value_estimator .calcufacil-left,
.calcufacil-car_value_estimator .calcufacil-right {
    flex: 1; /* Each column takes equal space */
    min-width: 300px; /* Minimum width before wrapping */
}

/* Headings */
.calcufacil-car_value_estimator .calcufacil-left h2,
.calcufacil-car_value_estimator .calcufacil-right h2 {
    margin-top: 0;
    color: #333;
    border-bottom: 2px solid #0073aa; /* WordPress blue */
    padding-bottom: 8px;
    margin-bottom: 25px; /* Space below heading */
    font-size: 1.4em; /* Slightly larger heading */
}

/* Form Input Groups */
.calcufacil-car_value_estimator .input-group,
.calcufacil-car_value_estimator .input-group-row {
    margin-bottom: 18px; /* Space between input groups/rows */
}

.calcufacil-car_value_estimator .input-group-row {
    display: flex;
    gap: 15px; /* Space between inputs in the same row */
    flex-wrap: wrap; /* Allow inputs in a row to wrap */
}
.calcufacil-car_value_estimator .input-group-row .input-group {
   flex: 1; /* Inputs in a row share space */
   min-width: 150px; /* Minimum width for inputs in a row */
   margin-bottom: 0; /* Row handles bottom margin */
}
.calcufacil-car_value_estimator .input-group.full-width {
    width: 100%; /* For single inputs taking full width */
}


/* Labels */
.calcufacil-car_value_estimator label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
    color: #555;
    font-size: 0.9em;
}

/* Input Fields & Selects */
.calcufacil-car_value_estimator input[type="text"],
.calcufacil-car_value_estimator input[type="number"],
.calcufacil-car_value_estimator select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Include padding in width */
    font-size: 1em; /* Consistent font size */
}

.calcufacil-car_value_estimator input:focus,
.calcufacil-car_value_estimator select:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa; /* Subtle focus outline */
    outline: none;
}

/* Style Select Dropdowns */
.calcufacil-car_value_estimator .input-group.select-group select {
     appearance: none; /* Remove default arrow */
     -webkit-appearance: none; /* Safari/Chrome */
     -moz-appearance: none; /* Firefox */
     background-color: #fff;
     background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5%208l5%205%205-5z%22%20fill%3D%22%23555%22/%3E%3C/svg%3E'); /* Basic SVG dropdown arrow */
     background-repeat: no-repeat;
     background-position: right 10px center;
     background-size: 16px 16px;
     padding-right: 35px; /* Make space for the arrow */
     cursor: pointer;
}

/* Checkbox Group Styling */
.calcufacil-car_value_estimator .checkbox-group {
    margin-top: 10px;
    border: 1px solid #e0e0e0;
    padding: 15px 15px 5px 15px; /* Padding around checkboxes */
    border-radius: 4px;
    background-color: #fff;
}

.calcufacil-car_value_estimator .checkbox-group > label { /* Style the main label for the group */
    font-weight: bold;
    margin-bottom: 12px;
}

.calcufacil-car_value_estimator .checkbox-item {
    display: flex;
    align-items: center; /* Vertically align checkbox and label */
    margin-bottom: 10px;
}
.calcufacil-car_value_estimator .checkbox-item input[type="checkbox"] {
    width: auto; /* Let checkbox size itself */
    margin-right: 10px; /* Space between checkbox and its label */
    flex-shrink: 0; /* Prevent checkbox from shrinking */
    cursor: pointer;
}
.calcufacil-car_value_estimator .checkbox-item label {
    margin-bottom: 0; /* Reset label margin */
    font-weight: normal; /* Normal weight for checkbox labels */
    font-size: 0.95em;
    cursor: pointer; /* Indicate label is clickable */
    flex-grow: 1;
}

/* Submit Button */
.calcufacil-car_value_estimator button[type="submit"] {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background-color: #0073aa; /* WP Blue */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    margin-top: 25px; /* Space above button */
    transition: background-color 0.2s ease-in-out;
}

.calcufacil-car_value_estimator button[type="submit"]:hover,
.calcufacil-car_value_estimator button[type="submit"]:focus {
    background-color: #005a87; /* Darker WP Blue */
    outline: none;
}

/* Results Area Styling */
.calcufacil-car_value_estimator .results {
    background-color: #fff;
    padding: 25px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.calcufacil-car_value_estimator .results-header h2 {
    text-align: center;
    margin-bottom: 25px;
}

.calcufacil-car_value_estimator .results-breakdown {
    margin-top: 15px;
    margin-bottom: 20px;
    border-top: 1px dashed #ccc;
    padding-top: 20px;
}

.calcufacil-car_value_estimator .breakdown-item {
    display: flex;
    justify-content: space-between; /* Label left, value right */
    align-items: center; /* Align items vertically */
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 1em;
    line-height: 1.4;
}
.calcufacil-car_value_estimator .breakdown-item:last-child {
    border-bottom: none;
}

.calcufacil-car_value_estimator .breakdown-item span:first-child {
    color: #555; /* Label color */
    padding-right: 10px; /* Space between label and value */
}
.calcufacil-car_value_estimator .breakdown-item span:last-child {
    font-weight: bold;
    color: #333; /* Value color */
    text-align: right;
}

/* Highlight the Main Result */
.calcufacil-car_value_estimator .main-result {
    background-color: #f0f8ff; /* AliceBlue */
    padding: 15px;
    margin: 0 -15px 15px -15px; /* Extend background slightly */
    border-radius: 4px;
    border-bottom: none; /* Remove bottom border for main result */
}
.calcufacil-car_value_estimator .main-result span:first-child {
    font-weight: bold;
}
.calcufacil-car_value_estimator .main-result span:last-child {
    font-size: 1.6em;
    color: #0073aa; /* WP Blue for emphasis */
    font-weight: bold;
}

/* Notes and Basis Text */
.calcufacil-car_value_estimator .note,
.calcufacil-car_value_estimator .calculation-basis {
    font-size: 0.85em;
    color: #777;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    line-height: 1.5;
}
.calcufacil-car_value_estimator .calculation-basis {
    font-style: italic;
}
.calcufacil-car_value_estimator .results > p:first-of-type { /* Style initial prompt text */
    font-size: 1em;
    color: #555;
    text-align: center;
    padding: 10px 0;
}
.calcufacil-car_value_estimator .results > .note { /* Style note below initial prompt */
     border-top: none;
     padding-top: 0;
     margin-top: 5px;
     text-align: center;
}


/* Disclaimer Box Styling */
.calcufacil-car_value_estimator .disclaimer {
    margin-top: 25px;
    padding: 15px 20px;
    background-color: #fff8e1; /* Light yellow background */
    border: 1px solid #ffecb3; /* Lighter yellow border */
    border-left: 4px solid #ffc107; /* Amber left border for emphasis */
    border-radius: 4px;
}
.calcufacil-car_value_estimator .disclaimer h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #c77700; /* Darker amber/orange color */
    font-size: 1.1em;
}
.calcufacil-car_value_estimator .disclaimer ul {
    margin: 0;
    padding-left: 20px;
    font-size: 0.9em;
    color: #555;
    list-style: disc; /* Standard bullets */
}
.calcufacil-car_value_estimator .disclaimer li {
    margin-bottom: 8px; /* Space between list items */
}
.calcufacil-car_value_estimator .disclaimer li:last-child {
    margin-bottom: 0;
}


/* Error Message Styling */
.calcufacil-car_value_estimator .errors {
    background-color: #ffebee; /* Light red background */
    border: 1px solid #ffcdd2; /* Lighter red border */
    border-left: 4px solid #d32f2f; /* Red left border */
    color: #c62828; /* Darker red text */
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 0.95em;
}
.calcufacil-car_value_estimator .errors strong {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}
.calcufacil-car_value_estimator .errors ul {
   margin: 0;
   padding-left: 18px; /* Indent list items */
   list-style: disc;
}
.calcufacil-car_value_estimator .errors li {
    margin-bottom: 5px;
}
.calcufacil-car_value_estimator .errors li:last-child {
    margin-bottom: 0;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .calcufacil-car_value_estimator.calcufacil-container {
        flex-direction: column; /* Stack columns vertically */
        padding: 15px; /* Reduce padding on small screens */
    }
    .calcufacil-car_value_estimator .calcufacil-left,
    .calcufacil-car_value_estimator .calcufacil-right {
        min-width: 100%; /* Allow columns to take full width */
    }

    .calcufacil-car_value_estimator .input-group-row {
       flex-direction: column; /* Stack inputs within rows vertically */
       gap: 18px; /* Maintain gap between stacked inputs */
    }
    .calcufacil-car_value_estimator .input-group-row .input-group {
       min-width: 100%; /* Allow inputs to take full width when stacked */
    }

    .calcufacil-car_value_estimator .main-result {
        padding: 10px;
        margin-left: 0;
        margin-right: 0;
    }
     .calcufacil-car_value_estimator .main-result span:last-child {
         font-size: 1.4em; /* Slightly smaller main result font */
     }
}