/**
 * Quote Form Styles
 * Ed's Sewer & Water Repair
 *
 * Carried over from the WordPress Contact Form 7 styles (cf7-styles.css);
 * selectors renamed for the ported static .quote-form.
 */

/* ==================== QUOTE FORM CONTAINER ==================== */

.quote-form {
    background-color: var(--color-background-secondary, #f9fafb);
    padding: var(--space-12, 3rem);
    border-radius: var(--radius-2xl, 1.5rem);
    box-shadow: var(--shadow-lg);
    max-width: 896px;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .quote-form {
        padding: var(--space-8, 2rem);
    }
}


/* ==================== QUOTE FORM FIELDS ==================== */

.quote-form input[type="text"],
.quote-form input[type="email"],
.quote-form input[type="tel"],
.quote-form input[type="url"],
.quote-form input[type="number"],
.quote-form input[type="date"],
.quote-form select,
.quote-form textarea {
    width: 100%;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    font-size: var(--font-size-base, 1rem);
    font-family: var(--font-primary, 'Inter', sans-serif);
    color: var(--color-text-primary, #1B3A52);
    background-color: var(--color-white, #ffffff);
    border: 1px solid var(--color-border-medium, #d1d5db);
    border-radius: var(--radius-md, 0.5rem);
    transition: var(--transition-all, all 0.3s ease);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
    outline: none;
    border-color: var(--color-aqua, #008e97);
    box-shadow: 0 0 0 3px rgba(0, 142, 151, 0.1);
}

.quote-form input::placeholder,
.quote-form textarea::placeholder {
    color: var(--color-text-muted, #9ca3af);
}

/* Textarea specific */
.quote-form textarea {
    resize: vertical;
    min-height: 120px;
}

/* Select dropdown arrow */
.quote-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234b5563' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    padding-right: 2.5rem;
}

/* ==================== QUOTE FORM LABELS ==================== */

.quote-form label {
    display: block;
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1B3A52);
    margin-bottom: var(--space-2, 0.5rem);
}

/* ==================== QUOTE FORM RADIO BUTTONS ==================== */

.quote-form input[type="checkbox"],
.quote-form input[type="radio"] {
    width: auto;
    margin-right: 0.5rem;
    cursor: pointer;
}

.quote-form fieldset {
    display: inline-block;
    margin-top: 0.5rem;
    border: none;
    padding: 0;
}

.quote-form fieldset legend {
    display: block;
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1B3A52);
    margin-bottom: var(--space-2, 0.5rem);
    padding: 0;
}

.quote-form fieldset label {
    display: inline-block;
    margin: 0 2rem 0 0; /* Space between Yes and No */
    font-weight: var(--font-weight-normal, 400);
    cursor: pointer;
}

.quote-form fieldset label:last-child {
    margin-right: 0;
}

/* ==================== QUOTE FORM SUBMIT BUTTON ==================== */

.quote-form button[type=submit] {
    width: 100%;
    padding: 1rem 2rem;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-bold, 700);
    font-family: var(--font-primary, 'Inter', sans-serif);
    color: var(--color-white, #ffffff);
    background-color: var(--color-aqua, #008e97);
    border: none;
    border-radius: var(--radius-md, 0.5rem);
    cursor: pointer;
    transition: var(--transition-all, all 0.3s ease);
    text-transform: none;
}

.quote-form button[type=submit]:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 142, 151, 0.4);
    filter: brightness(1.1);
}

.quote-form button[type=submit]:focus {
    outline: 2px solid var(--color-aqua, #008e97);
    outline-offset: 2px;
}

/* ==================== QUOTE FORM VALIDATION ==================== */

.quote-form .field-error {
    color: #ff5f15;
    font-size: .875rem;
    margin-top: .25rem;
}

.quote-form .is-invalid {
    border-color: var(--color-orange, #ff5f15) !important;
}

/* ==================== QUOTE FORM UPLOAD PROGRESS ==================== */

.quote-form .upload-progress {
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 3px;
    overflow: hidden;
}

.quote-form .upload-progress > span {
    display: block;
    height: 100%;
    background: var(--color-aqua);
    width: 0;
}