/*
Folha de estilos para a página de checkout (checkout.html)
*/

/* --- Seletor de Método de Pagamento --- */
.payment-method-selector {
    display: flex;
    justify-content: center;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #d1d5db;
    margin-bottom: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.payment-tab {
    flex: 1;
    padding: 0.5rem 1rem;
    text-align: center;
    cursor: pointer;
    background-color: #f9fafb;
    color: #374151;
    font-weight: 600;
    transition: background-color 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.payment-tab:not(:last-child) {
    border-right: 1px solid #d1d5db;
}

.payment-tab.active {
    background-color: #10b981;
    color: white;
}

.payment-tab .check-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

/* --- Estrutura e Campos do Formulário --- */

/* Estilo unificado para inputs e selects */
.form-group input,
.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: white; /* Garante fundo branco */
    -webkit-appearance: none; /* Remove estilo padrão do iOS */
    -moz-appearance: none;
    appearance: none;
}

/* Adiciona uma seta para o select */
.form-group select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}


/* Espaçamento entre seções */
.form-step + .form-step,
#card-payment-content:not(.hidden) {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

/* --- Conteúdo Dinâmico --- */
.payment-content.hidden {
    display: none;
}

/* --- Seção de Doação (Ajustes Anteriores) --- */
@media (min-width: 640px) {
    .donation-options-container {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}

.donation-options .btn-option {
    flex-grow: 0;
    flex-basis: 120px;
}