/* ============================================
   Pagarme Checkout Form Styles
   Usando variáveis CSS do FluentCart
   ============================================ */

/* Container do formulário */
.pagarme-card-form {
    max-width: 100%;
}

/* Wrapper de cada campo */
.pagarme-form-row {
    margin-bottom: 20px;
}

/* Labels - seguir padrão FluentCart */
.pagarme-form-row label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 14px;
    color: var(--fct-checkout-primary-text-color);
    padding-left: 5px;
}

.pagarme-form-row .required {
    color: rgb(240 68 56);
}

/* Inputs e Select - seguir padrão FluentCart
   Especificidade aumentada para sobrescrever .fct_checkout input */
.fct_checkout input.pagarme-input,
.fct_checkout select.pagarme-input {
    margin: 0;
    min-height: 40px;
    width: 100%;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--fct-checkout-input-border-color);
    background-color: var(--fct-checkout-input-bg-color);
    padding: 10px 16px;
    font-size: 15px;
    line-height: 1;
    color: var(--fct-checkout-input-text-color);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease;
}

/* Placeholder */
.fct_checkout input.pagarme-input::placeholder,
.fct_checkout select.pagarme-input::placeholder {
    font-size: 14px;
    color: var(--fct-checkout-input-placeholder-text-color);
}

/* Focus - usar variável FluentCart e manter border-width uniforme */
.fct_checkout input.pagarme-input:focus,
.fct_checkout select.pagarme-input:focus {
    border-width: 1px;
    border-color: var(--fct-checkout-active-border-color);
}

/* Select de parcelas - adicionar seta dropdown */
.fct_checkout select.pagarme-input {
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%232F3448"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
}

/* Grid de 2 colunas (Validade + CVV) */
.pagarme-form-row-two-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.pagarme-form-column {
    display: flex;
    flex-direction: column;
}

/* Responsividade - mobile */
@media (max-width: 768px) {
    .pagarme-form-row-two-columns {
        grid-template-columns: 1fr;
    }
}