/**
 * Modern Contact Forms Styling
 * Enhanced visual design for Contact Form 7 and WPForms
 */

/* ============================================
   GENERAL FORM STYLING
   ============================================ */

.wpcf7-form,
.wpforms-form,
.contact-form {
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* ============================================
   INPUT FIELDS - Modern Design
   ============================================ */

/* Text inputs, email, tel, textarea */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select,
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="url"],
.wpforms-form input[type="number"],
.wpforms-form input[type="date"],
.wpforms-form textarea,
.wpforms-form select,
input[type="text"].wpcf7-form-control,
input[type="email"].wpcf7-form-control,
input[type="tel"].wpcf7-form-control,
textarea.wpcf7-form-control,
select.wpcf7-form-control {
    width: 100% !important;
    padding: 14px 18px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #333333 !important;
    background-color: #ffffff !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Placeholder styling */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder,
.wpforms-form input::placeholder,
.wpforms-form textarea::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

/* Focus state - modern blue highlight */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form input[type="date"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus,
.wpforms-form input[type="text"]:focus,
.wpforms-form input[type="email"]:focus,
.wpforms-form input[type="tel"]:focus,
.wpforms-form input[type="url"]:focus,
.wpforms-form input[type="number"]:focus,
.wpforms-form input[type="date"]:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus {
    border-color: #007bff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
    background-color: #f8f9fa !important;
}

/* Textarea specific */
.wpcf7-form textarea,
.wpforms-form textarea,
textarea.wpcf7-form-control {
    min-height: 140px !important;
    resize: vertical !important;
}

/* ============================================
   SELECT DROPDOWN - Custom Arrow
   ============================================ */

.wpcf7-form select,
.wpforms-form select,
select.wpcf7-form-control {
    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='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 12px !important;
    padding-right: 40px !important;
}

/* ============================================
   LABELS - Better Typography
   ============================================ */

.wpcf7-form label,
.wpforms-form label,
.wpcf7-form-control-wrap label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
}

/* ============================================
   SUBMIT BUTTON - Modern & Eye-catching
   ============================================ */

.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"],
.wpforms-form input[type="submit"],
.wpforms-form button[type="submit"],
.wpcf7-submit {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 16px 40px !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important;
    width: auto !important;
    min-width: 200px !important;
    display: inline-block !important;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover,
.wpforms-form input[type="submit"]:hover,
.wpforms-form button[type="submit"]:hover,
.wpcf7-submit:hover {
    background: linear-gradient(135deg, #0056b3 0%, #003d82 100%) !important;
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

.wpcf7-form input[type="submit"]:active,
.wpcf7-form button[type="submit"]:active,
.wpforms-form input[type="submit"]:active,
.wpforms-form button[type="submit"]:active,
.wpcf7-submit:active {
    transform: translateY(0) !important;
}

/* ============================================
   CHECKBOX & RADIO - Modern Style
   ============================================ */

.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"],
.wpforms-form input[type="checkbox"],
.wpforms-form input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}

.wpcf7-form .wpcf7-list-item,
.wpforms-form .wpforms-field-radio li,
.wpforms-form .wpforms-field-checkbox li {
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
}

.wpcf7-form .wpcf7-list-item label,
.wpforms-form .wpforms-field-radio label,
.wpforms-form .wpforms-field-checkbox label {
    margin-bottom: 0 !important;
    cursor: pointer !important;
    font-weight: 400 !important;
}

/* ============================================
   ACCEPTANCE / GDPR CHECKBOX
   ============================================ */

.wpcf7-form .wpcf7-acceptance,
.wpforms-form .wpforms-field-gdpr-checkbox {
    margin: 20px 0 !important;
    padding: 15px !important;
    background: #f8f9fa !important;
    border-left: 4px solid #007bff !important;
    border-radius: 4px !important;
}

/* ============================================
   VALIDATION & ERROR MESSAGES
   ============================================ */

/* Invalid field */
.wpcf7-form .wpcf7-not-valid,
.wpforms-form .wpforms-error input,
.wpforms-form .wpforms-error textarea,
.wpforms-form .wpforms-error select {
    border-color: #dc3545 !important;
    background-color: #fff5f5 !important;
}

.wpcf7-form .wpcf7-not-valid:focus,
.wpforms-form .wpforms-error input:focus,
.wpforms-form .wpforms-error textarea:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}

/* Error message text */
.wpcf7-form .wpcf7-not-valid-tip,
.wpforms-form .wpforms-error-message {
    color: #dc3545 !important;
    font-size: 13px !important;
    margin-top: 6px !important;
    display: block !important;
    font-weight: 500 !important;
}

/* Form validation response */
.wpcf7-form .wpcf7-response-output,
.wpforms-form .wpforms-confirmation-container {
    border: 2px solid #28a745 !important;
    background: #d4edda !important;
    color: #155724 !important;
    padding: 15px 20px !important;
    border-radius: 6px !important;
    margin-top: 20px !important;
    font-weight: 500 !important;
}

.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ng {
    border-color: #dc3545 !important;
    background: #f8d7da !important;
    color: #721c24 !important;
}

/* ============================================
   SPINNER / LOADING STATE
   ============================================ */

.wpcf7-form .wpcf7-spinner,
.wpforms-form .wpforms-submit-spinner {
    margin-left: 15px !important;
    vertical-align: middle !important;
}

/* Disable submit button during processing */
.wpcf7-form.submitting input[type="submit"],
.wpforms-form.wpforms-submit-processing input[type="submit"] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* ============================================
   FORM FIELDS SPACING
   ============================================ */

.wpcf7-form p,
.wpcf7-form .wpcf7-form-control-wrap,
.wpforms-form .wpforms-field {
    margin-bottom: 20px !important;
}

.wpcf7-form p:last-of-type,
.wpforms-form .wpforms-field:last-of-type {
    margin-bottom: 0 !important;
}

/* ============================================
   FILE UPLOAD - Custom Style
   ============================================ */

.wpcf7-form input[type="file"],
.wpforms-form input[type="file"] {
    padding: 12px !important;
    border: 2px dashed #e0e0e0 !important;
    border-radius: 6px !important;
    background: #f8f9fa !important;
    cursor: pointer !important;
}

.wpcf7-form input[type="file"]:hover,
.wpforms-form input[type="file"]:hover {
    border-color: #007bff !important;
    background: #e7f1ff !important;
}

/* ============================================
   REQUIRED FIELD ASTERISK
   ============================================ */

.wpcf7-form .wpcf7-form-control-wrap abbr,
.wpforms-form .wpforms-required-label {
    color: #dc3545 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media only screen and (max-width: 768px) {
    .wpcf7-form,
    .wpforms-form,
    .contact-form {
        padding: 25px 20px !important;
    }

    .wpcf7-form input[type="text"],
    .wpcf7-form input[type="email"],
    .wpcf7-form input[type="tel"],
    .wpcf7-form textarea,
    .wpforms-form input[type="text"],
    .wpforms-form input[type="email"],
    .wpforms-form input[type="tel"],
    .wpforms-form textarea {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }

    .wpcf7-form input[type="submit"],
    .wpforms-form input[type="submit"],
    .wpcf7-submit {
        width: 100% !important;
        padding: 14px 20px !important;
    }
}

@media only screen and (max-width: 480px) {
    .wpcf7-form,
    .wpforms-form,
    .contact-form {
        padding: 20px 15px !important;
    }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus visible for keyboard navigation */
.wpcf7-form input:focus-visible,
.wpcf7-form textarea:focus-visible,
.wpcf7-form select:focus-visible,
.wpcf7-form button:focus-visible,
.wpforms-form input:focus-visible,
.wpforms-form textarea:focus-visible,
.wpforms-form select:focus-visible,
.wpforms-form button:focus-visible {
    outline: 3px solid #007bff !important;
    outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wpcf7-form input,
    .wpcf7-form textarea,
    .wpcf7-form select,
    .wpforms-form input,
    .wpforms-form textarea,
    .wpforms-form select {
        border-width: 3px !important;
    }
}

/* ============================================
   MULTI-COLUMN FORMS (if used)
   ============================================ */

.wpcf7-form .form-row,
.wpforms-form .wpforms-field-row {
    display: flex !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

.wpcf7-form .form-row > *,
.wpforms-form .wpforms-field-row > * {
    flex: 1 !important;
    min-width: 250px !important;
}

@media only screen and (max-width: 600px) {
    .wpcf7-form .form-row,
    .wpforms-form .wpforms-field-row {
        flex-direction: column !important;
    }

    .wpcf7-form .form-row > *,
    .wpforms-form .wpforms-field-row > * {
        min-width: 100% !important;
    }
}