.wpcf7 {
margin: 0;
} .wpcf7 .screen-reader-response {
display: none !important;
}
.wpcf7-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
} .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 select,
.wpcf7-form textarea {
width: 100%;
height: 2.75rem;
padding: 0 1rem;
border-radius: 0.5rem;
border: 1px solid var(--na-border, #3f3f46);
background: var(--na-bg, #18181b);
color: var(--na-text, #ffffff);
font-size: 0.875rem;
font-family: inherit;
transition: border-color 0.2s, box-shadow 0.2s;
outline: none;
}
.wpcf7-form input[type="text"]::placeholder,
.wpcf7-form input[type="email"]::placeholder,
.wpcf7-form input[type="tel"]::placeholder,
.wpcf7-form textarea::placeholder {
color: #6b7280;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
outline: none;
border-color: var(--na-primary, #ff4057);
box-shadow: 0 0 0 1px var(--na-primary, #ff4057);
} .wpcf7-form textarea {
height: 7rem;
padding: 0.75rem 1rem;
resize: none;
} .wpcf7-form select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23a1a1aa' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1.5rem;
padding-right: 2.5rem;
cursor: pointer;
} .wpcf7-form label {
display: block;
color: var(--na-text-muted, #a1a1aa);
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: 0.05em;
} .wpcf7-form label .wpcf7-form-control-wrap {
display: block;
margin-top: 0.5rem;
} .wpcf7-form p {
margin: 0;
} .wpcf7-form .form-row-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
@media (max-width: 640px) {
.wpcf7-form .form-row-2col {
grid-template-columns: 1fr;
}
} .wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
width: 100%;
height: 3rem;
margin-top: 1rem;
background: var(--na-primary, #ff4057);
color: #ffffff;
border: none;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 0 20px -5px rgba(255, 64, 87, 0.3);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover {
background: var(--na-primary-dark, #e63950);
box-shadow: 0 0 30px -5px rgba(255, 64, 87, 0.5);
} .wpcf7-form input[type="submit"]::after,
.wpcf7-form button[type="submit"]::after {
content: '';
display: inline-block;
width: 0.875rem;
height: 0.875rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
} .wpcf7-not-valid-tip {
color: #ef4444;
font-size: 0.75rem;
margin-top: 0.375rem;
display: block;
text-transform: none !important;
font-weight: 500;
animation: slideDown 0.3s ease-out;
}
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
border-color: #ef4444 !important;
animation: shake 0.4s ease-in-out;
} .wpcf7-response-output {
border-radius: 0.75rem !important;
padding: 1rem 1.25rem !important;
margin: 1.5rem 0 0 0 !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
text-transform: none !important;
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
animation: slideDown 0.4s ease-out !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
border-left-color: transparent !important;
} .wpcf7-response-output {
display: none !important;
} .wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
display: flex !important;
} .wpcf7-form.sent .wpcf7-response-output {
display: flex !important;
} .wpcf7-form.spam .wpcf7-response-output {
display: flex !important;
} .wpcf7-mail-sent-ok {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
border: 1px solid rgba(34, 197, 94, 0.4);
color: #22c55e;
position: relative;
overflow: hidden;
}
.wpcf7-mail-sent-ok::before {
content: '✓';
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
background: #22c55e;
color: white;
border-radius: 50%;
font-weight: bold;
font-size: 1rem;
flex-shrink: 0;
}
.wpcf7-mail-sent-ok::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: shimmer 2s infinite;
} .wpcf7-mail-sent-ng,
.wpcf7-validation-errors,
.wpcf7-acceptance-missing {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%) !important;
border: 1px solid rgba(239, 68, 68, 0.4) !important;
color: #ef4444 !important;
}
.wpcf7-mail-sent-ng::before,
.wpcf7-validation-errors::before,
.wpcf7-acceptance-missing::before {
content: '⚠';
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
background: #ef4444;
color: white;
border-radius: 50%;
font-weight: bold;
font-size: 1rem;
flex-shrink: 0;
} .wpcf7 div.wpcf7-validation-errors,
.wpcf7 div.wpcf7-acceptance-missing,
div.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-form div.wpcf7-response-output,
.wpcf7 .wpcf7-response-output,
form.wpcf7-form .wpcf7-response-output {
border: 1px solid rgba(239, 68, 68, 0.4) !important;
border-top: 1px solid rgba(239, 68, 68, 0.4) !important;
border-right: 1px solid rgba(239, 68, 68, 0.4) !important;
border-bottom: 1px solid rgba(239, 68, 68, 0.4) !important;
border-left: 1px solid rgba(239, 68, 68, 0.4) !important;
border-width: 1px !important;
border-style: solid !important;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%) !important;
background-color: rgba(239, 68, 68, 0.05) !important;
background-image: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%) !important;
} .wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
background-color: rgba(239, 68, 68, 0.05) !important;
background-image: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%) !important;
border-color: rgba(239, 68, 68, 0.4) !important;
} .wpcf7-spam-blocked {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.05) 100%);
border: 1px solid rgba(251, 191, 36, 0.4);
color: #fbbf24;
}
.wpcf7-spam-blocked::before {
content: '🛡';
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
background: #fbbf24;
color: white;
border-radius: 50%;
font-weight: bold;
font-size: 0.875rem;
flex-shrink: 0;
} @keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
@keyframes shimmer {
0% { left: -100%; }
100% { left: 100%; }
} .wpcf7-spinner {
display: none;
margin: 0.5rem 0 0 0;
width: 1.5rem;
height: 1.5rem;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #ffffff;
border-radius: 50%;
animation: wpcf7-spin 0.6s linear infinite;
vertical-align: middle;
}
.wpcf7-form.submitting .wpcf7-spinner {
display: inline-block;
}
@keyframes wpcf7-spin {
to { transform: rotate(360deg); }
} .wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
width: auto;
margin-right: 0.5rem;
accent-color: var(--na-primary, #ff4057);
}
.wpcf7-list-item {
margin: 0 0 0.5rem 0;
}
.wpcf7-list-item-label {
color: var(--na-text, #ffffff);
font-weight: normal;
text-transform: none;
letter-spacing: normal;
} .wpcf7-form input[type="file"] {
padding: 0.5rem;
font-size: 0.875rem;
} .wpcf7-form .grecaptcha-badge {
margin: 1rem 0;
} .wpcf7-form .form-info-text {
font-size: 0.75rem;
text-align: center;
color: var(--na-text-muted, #a1a1aa);
margin-top: 1.5rem;
}