/**
 * Estilos personalizados para Contact Form 7
 * Classes para usar no admin do WordPress ao montar formulários
 */

/* ============================================
   LABELS
   ============================================ */

.cf7-label {
    display: block;
    color: #12161C;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    font-family: 'Excon Variable', sans-serif;
}

.cf7-label-required::after {
    content: " *";
    color: #F1853A;
}

/* ============================================
   INPUTS E TEXTAREA
   ============================================ */

.cf7-input,
.cf7-textarea,
.cf7-select {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    color: #12161C;
    background-color: #FFFFFF;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}

.cf7-input:focus,
.cf7-textarea:focus,
.cf7-select:focus {
    outline: none;
    border-color: #F1853A;
    box-shadow: 0 0 0 3px rgba(241, 133, 58, 0.1);
}

.cf7-input::placeholder,
.cf7-textarea::placeholder {
    color: #9CA3AF;
}

/* Input de texto */
.cf7-input {
    height: 48px;
}

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

/* Select */
.cf7-select {
    height: 48px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2312161C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* ============================================
   BOTÃO
   ============================================ */

.cf7-button,
.cf7-submit {
    display: inline-block;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    background-color: #F1853A !important;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Excon Variable', sans-serif;
    transition: all 0.3s ease;
    text-align: center;
}

.cf7-button:hover,
.cf7-submit:hover {
    background-color: #D97333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(241, 133, 58, 0.3);
}

.cf7-button:active,
.cf7-submit:active {
    transform: translateY(0);
}

.cf7-button:disabled,
.cf7-submit:disabled {
    background-color: #9CA3AF;
    cursor: not-allowed;
    transform: none;
}

/* Botão secondary (opcional) */
.cf7-button-secondary {
    background-color: #12161C;
}

.cf7-button-secondary:hover {
    background-color: #1F2937;
}

/* Botão outline (opcional) */
.cf7-button-outline {
    background-color: transparent;
    color: #F1853A;
    border: 2px solid #F1853A;
}

.cf7-button-outline:hover {
    background-color: #F1853A;
    color: #FFFFFF;
}

/* ============================================
   GRUPOS DE FORMULÁRIO
   ============================================ */

.cf7-form-group {
    margin-bottom: 20px;
}

.cf7-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.cf7-form-col {
    flex: 1;
}

/* ============================================
   CHECKBOX E RADIO
   ============================================ */

.cf7-checkbox-wrap,
.cf7-radio-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.cf7-checkbox,
.cf7-radio {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #F1853A;
}

.cf7-checkbox-label,
.cf7-radio-label {
    color: #12161C;
    font-size: 14px;
    cursor: pointer;
}

/* ============================================
   MENSAGENS DE ERRO E SUCESSO
   ============================================ */

.wpcf7-not-valid-tip {
    color: #EF4444;
    font-size: 13px;
    margin-top: 4px;
    display: block;
}

.wpcf7-response-output {
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
}

.wpcf7-mail-sent-ok {
    background-color: #D1FAE5;
    color: #065F46;
    border: 2px solid #10B981;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
    background-color: #FEE2E2;
    color: #991B1B;
    border: 2px solid #EF4444;
}

.wpcf7-spam-blocked {
    background-color: #FEF3C7;
    color: #92400E;
    border: 2px solid #F59E0B;
}

/* ============================================
   SPINNER DE LOADING
   ============================================ */

.wpcf7-spinner {
    margin-left: 12px;
}

/* ============================================
   RESPONSIVO
   ============================================ */

@media (max-width: 768px) {
    .cf7-form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .cf7-button,
    .cf7-submit {
        width: 100%;
    }
}

/* ============================================
   CLASSES UTILITÁRIAS
   ============================================ */

.cf7-full-width {
    width: 100%;
}

.cf7-half-width {
    width: 50%;
}

.cf7-text-center {
    text-align: center;
}

.cf7-mt-20 {
    margin-top: 20px;
}

.cf7-mb-20 {
    margin-bottom: 20px;
}