/* ============================================================
 * Pagar.me – CNPJ Empresarial no Checkout
 * Destaque visual do bloco "Pagar como Pessoa Jurídica".
 *
 * O objetivo é que o checkbox não se confunda com os campos de
 * dados pessoais logo acima/abaixo dele.
 * ============================================================ */

/* Garante largura total mesmo em checkouts em grid (FunnelKit, blocos,
   temas com colunas), evitando que o bloco vire uma coluna estreita. */
#billing_is_company_field.pcnpj-field,
#billing_company_razao_field.pcnpj-field,
#billing_cnpj_pj_field.pcnpj-field {
    grid-column: 1 / -1;
    width: 100%;
    float: none;
    clear: both;
}

/* Caixa de destaque do checkbox */
#billing_is_company_field.pcnpj-checkbox-field {
    background: #fff8e8;
    border: 1px solid #f0a500;
    border-left-width: 4px;
    border-radius: 6px;
    padding: 14px 16px;
    margin: 16px 0 !important;
    box-sizing: border-box;
}

#billing_is_company_field.pcnpj-checkbox-field label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    cursor: pointer;
    font-size: 15px;
    color: #4a3a10;
    /* Neutraliza floating labels de temas de checkout customizado, que
       posicionam o <label> em absolute sobre o campo. */
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}

#billing_is_company_field.pcnpj-checkbox-field input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0 0;
    accent-color: #f0a500;
}

/* Texto de apoio abaixo do checkbox */
#billing_is_company_field.pcnpj-checkbox-field .description {
    display: block !important;
    margin: 8px 0 0 28px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: #6b5a2b;
    opacity: 1;
}

/* Campos de Razão Social / CNPJ: começam ocultos e são exibidos pelo JS.
   Não usamos display:none no CSS para que, se o JS falhar, os campos
   continuem acessíveis em vez de sumirem de vez. */
#billing_company_razao_field.pcnpj-pj-field,
#billing_cnpj_pj_field.pcnpj-pj-field {
    border-left: 4px solid #f0a500;
    padding-left: 12px;
    margin-top: 10px !important;
    box-sizing: border-box;
}

#billing_cnpj_pj_field.pcnpj-pj-field {
    margin-bottom: 16px !important;
}

#billing_cnpj_pj {
    text-transform: uppercase;
}