/* ============================================================================
   Melhorias de Formulários e Visualização
   ============================================================================ */

/* ============================================================================
   Campos de Entrada Globais
   ============================================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="search"],
textarea,
select {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 2px solid #333333 !important;
    border-radius: 8px !important;
    padding: 0.875rem 1rem !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
input[type="date"]::placeholder,
input[type="time"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
    color: #888888 !important;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
    border-color: var(--section-divider, #22c55e) !important;
    background-color: #252525 !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--section-divider, #22c55e) !important;
    background-color: #252525 !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}

/* ============================================================================
   Select Customizado
   ============================================================================ */

select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1.5em 1.5em !important;
    padding-right: 2.5rem !important;
}

select option {
    background-color: #ffffff !important;
    color: #000000 !important;
    padding: 0.75rem !important;
}

select option:checked {
    background-color: #252525 !important;
    color: var(--section-divider, #22c55e) !important;
}

/* ============================================================================
   Checkbox e Radio Customizados
   ============================================================================ */

input[type="checkbox"],
input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    accent-color: var(--section-divider, #22c55e) !important;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    opacity: 0.8 !important;
}

/* ============================================================================
   Labels
   ============================================================================ */

label {
    color: #ffffff !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

label.required::after {
    content: " *";
    color: #ef4444;
    font-weight: bold;
}

/* ============================================================================
   Textarea
   ============================================================================ */

textarea {
    min-height: 120px !important;
    resize: vertical !important;
    font-family: inherit !important;
}

/* ============================================================================
   Botões
   ============================================================================ */

button,
input[type="button"],
input[type="submit"],
.button {
    background-color: var(--section-divider, #22c55e) !important;
    color: #000000 !important;
    border: none !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover {
    background-color: #16a34a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(34, 197, 94, 0.2) !important;
}

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

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
.button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ============================================================================
   Mensagens de Erro e Sucesso
   ============================================================================ */

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    padding: 1rem !important;
    border-radius: 8px !important;
    margin-bottom: 1.5rem !important;
    border-left: 4px solid !important;
}

.woocommerce-error {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-left-color: #ef4444 !important;
    color: #fca5a5 !important;
}

.woocommerce-message {
    background-color: rgba(34, 197, 94, 0.1) !important;
    border-left-color: var(--section-divider, #22c55e) !important;
    color: #86efac !important;
}

.woocommerce-info {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-left-color: #3b82f6 !important;
    color: #93c5fd !important;
}

/* ============================================================================
   Tabelas
   ============================================================================ */

table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 1.5rem !important;
}

table th {
    background-color: rgba(34, 197, 94, 0.1) !important;
    color: #ffffff !important;
    padding: 1rem !important;
    text-align: left !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--section-divider, #22c55e) !important;
}

table td {
    padding: 1rem !important;
    border-bottom: 1px solid #333333 !important;
    color: #ffffff !important;
}

table tr:hover {
    background-color: rgba(34, 197, 94, 0.05) !important;
}

/* ============================================================================
   Fieldset e Legend
   ============================================================================ */

fieldset {
    border: 2px solid #333333 !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

legend {
    color: var(--section-divider, #22c55e) !important;
    font-weight: 700 !important;
    padding: 0 0.5rem !important;
}

/* ============================================================================
   Responsivo
   ============================================================================ */

@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="search"],
    textarea,
    select {
        padding: 0.75rem 0.875rem !important;
        font-size: 16px !important;
    }

    button,
    input[type="button"],
    input[type="submit"],
    .button {
        width: 100% !important;
        padding: 0.875rem 1rem !important;
    }

    table th,
    table td {
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    input[type="checkbox"],
    input[type="radio"] {
        width: 24px !important;
        height: 24px !important;
    }

    label {
        font-size: 0.95rem !important;
    }

    button,
    input[type="button"],
    input[type="submit"],
    .button {
        padding: 0.75rem 1rem !important;
        font-size: 0.95rem !important;
    }
}