/**
 * Contact Form 7 Styling - FINAL ULTRA-SPECIFIC VERSION
 * This targets the exact classes from your form HTML
 * Replace your contact-form-7.css file with this
 */

/* ===== CONTAINER ===== */
div.wpcf7 {
    max-width: 900px !important;
    margin: 2rem auto !important;
    padding: 3rem !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.wpcf7-form {
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== PARAGRAPHS ===== */
.wpcf7 p {
    margin-bottom: 1.5rem !important;
}

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

/* ===== LABELS ===== */
.wpcf7 label {
    display: block !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.5 !important;
}

/* ===== TEXT INPUTS ===== */
.wpcf7 input.wpcf7-form-control.wpcf7-text,
.wpcf7 input.wpcf7-form-control.wpcf7-email,
.wpcf7 input.wpcf7-form-control.wpcf7-tel,
.wpcf7 input.wpcf7-form-control.wpcf7-url,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem 1rem !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #1a1a1a !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    transition: border-color 150ms ease-out !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}

.wpcf7 input.wpcf7-form-control:focus {
    outline: none !important;
    border-color: #0066cc !important;
    box-shadow: 0 0 0 3px #e6f2ff !important;
}

/* ===== SELECT DROPDOWN ===== */
.wpcf7 select.wpcf7-form-control.wpcf7-select {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem 2.5rem 0.75rem 1rem !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #1a1a1a !important;
    background-color: #ffffff !important;
    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='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 12px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    transition: border-color 150ms ease-out !important;
    margin: 0 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    display: block !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.wpcf7 select.wpcf7-form-control:focus {
    outline: none !important;
    border-color: #0066cc !important;
    box-shadow: 0 0 0 3px #e6f2ff !important;
}

/* ===== TEXTAREA ===== */
.wpcf7 textarea.wpcf7-form-control.wpcf7-textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 180px !important;
    padding: 0.75rem 1rem !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.625 !important;
    color: #1a1a1a !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    transition: border-color 150ms ease-out !important;
    margin: 0 !important;
    resize: vertical !important;
    box-sizing: border-box !important;
    display: block !important;
}

.wpcf7 textarea.wpcf7-form-control:focus {
    outline: none !important;
    border-color: #0066cc !important;
    box-shadow: 0 0 0 3px #e6f2ff !important;
}

/* ===== SUBMIT BUTTON ===== */
.wpcf7 input.wpcf7-form-control.wpcf7-submit,
.wpcf7 button.wpcf7-submit,
.wpcf7 input[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem 2rem !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    background-color: #0066cc !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 250ms ease-out !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    margin: 1rem 0 0 0 !important;
    width: auto !important;
    min-width: 150px !important;
}

.wpcf7 input.wpcf7-submit:hover,
.wpcf7 button.wpcf7-submit:hover {
    background-color: #0052a3 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

.wpcf7 input.wpcf7-submit:active,
.wpcf7 button.wpcf7-submit:active {
    transform: translateY(0) !important;
}

/* ===== CLOUDFLARE TURNSTILE ===== */
.cf7-cf-turnstile,
.cf-turnstile {
    margin: 1.5rem 0 !important;
}

/* Hide the extra br tag */
br.cf-turnstile-br {
    display: none !important;
}

/* ===== VALIDATION MESSAGES ===== */
span.wpcf7-not-valid-tip {
    color: #dc2626 !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
    display: block !important;
}

div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
    background-color: #fee2e2 !important;
    border: none !important;
    border-left: 4px solid #dc2626 !important;
    color: #dc2626 !important;
    padding: 1rem !important;
    border-radius: 10px !important;
    margin: 1.5rem 0 !important;
    font-size: 1rem !important;
}

div.wpcf7-mail-sent-ok {
    background-color: #d1fae5 !important;
    border: none !important;
    border-left: 4px solid #059669 !important;
    color: #059669 !important;
    padding: 1rem !important;
    border-radius: 10px !important;
    margin: 1.5rem 0 !important;
    font-size: 1rem !important;
}

div.wpcf7-response-output {
    margin: 1.5rem 0 0 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* ===== SPINNER ===== */
span.wpcf7-spinner,
.wpcf7 .ajax-loader {
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    border: 3px solid #e5e5e5 !important;
    border-top-color: #0066cc !important;
    border-radius: 50% !important;
    animation: wpcf7-spin 0.6s linear infinite !important;
    margin-left: 0.75rem !important;
    vertical-align: middle !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.wpcf7 .ajax-loader:not(.is-active),
.wpcf7-spinner:not(.is-active) {
    display: none !important;
}

@keyframes wpcf7-spin {
    to { transform: rotate(360deg); }
}

/* ===== FORM CONTROL WRAP ===== */
span.wpcf7-form-control-wrap {
    display: block !important;
}

/* ===== SCREEN READER ===== */
div.screen-reader-response {
    position: absolute !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    height: 1px !important;
    width: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
    div.wpcf7 {
        padding: 1.5rem !important;
        margin: 1rem !important;
    }
    
    .wpcf7 input.wpcf7-submit,
    .wpcf7 button.wpcf7-submit {
        width: 100% !important;
        padding: 1rem 1.5rem !important;
    }
}