/*
Theme Name: Cerla Child
Theme URI: http://www.wpbingosite.com/cerla
Author: wpbingo
Description: This is a child theme for Cerla
Version: 1.0
Author URI: http://wpbingosite.com
Template: cerla
Text Domain: cerla-child
*/
/*************** ADD YOUR CUSTOM CSS HERE  ***************/
/**************************************************************
   CHECKOUT PREMIUM – GRID 2 COLUNAS ESTÁVEL (50% + 50%)
   TODOS OS CAMPOS LADO A LADO SEM PORCENTAGEM
**************************************************************/

/* Transformar wrapper em grid */
.woocommerce-billing-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 20px !important;
    row-gap: 18px !important;
}

/* Por padrão todos ocupam 2 colunas */
.woocommerce-billing-fields__field-wrapper .form-row {
    grid-column: span 2 !important;
}

/* Agora selecionar apenas os que você quer MEIO A MEIO */

/* Nome + Sobrenome */
#billing_first_name_field,
#billing_last_name_field {
    grid-column: span 1 !important;
}

/* Tipo de pessoa + CPF/CNPJ */
#billing_persontype_field,
#billing_cpf_field,
#billing_cnpj_field {
    grid-column: span 1 !important;
}

/* CEP + País (se quiser junto também) */
/* #billing_postcode_field,
#billing_country_field { grid-column: span 1 !important; } */

/* Endereço + Número */
#billing_address_1_field,
#billing_number_field {
    grid-column: span 1 !important;
}

/* Complemento + Bairro */
#billing_address_2_field,
#billing_neighborhood_field {
    grid-column: span 1 !important;
}

/* Cidade + Estado */
#billing_city_field,
#billing_state_field {
    grid-column: span 1 !important;
}

/* Telefone + Celular */
#billing_phone_field,
#billing_cellphone_field {
    grid-column: span 1 !important;
}

/* E-mail sozinho */
#billing_email_field { grid-column: span 2 !important; }

/**************************************************************
   ESTILO PREMIUM DOS INPUTS
**************************************************************/

.woocommerce-billing-fields__field-wrapper input,
.woocommerce-billing-fields__field-wrapper select {
    padding: 14px 16px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    border: 1px solid #ddd !important;
    background: #fafafa !important;
    transition: .2s ease;
}

.woocommerce-billing-fields__field-wrapper input:focus,
.woocommerce-billing-fields__field-wrapper select:focus {
    border-color: #c78e83 !important;
    background: #fff !important;
    box-shadow: 0 0 0 2px rgba(199,142,131,.25) !important;
}

/* Labels */
.woocommerce-billing-fields__field-wrapper label {
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    display: block;
    color: #333;
}

/**************************************************************
   BOTÃO FINALIZAR PEDIDO – PREMIUM
**************************************************************/

#place_order {
    background: #c78e83 !important;
    color: #fff !important;
    padding: 18px !important;
    border-radius: 10px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    width: 100% !important;
    transition: .3s ease;
}

#place_order:hover {
    background: #b77a6f !important;
    transform: translateY(-2px);
}

/**************************************************************
   MOBILE – TUDO FICA 1 COLUNA
**************************************************************/
@media (max-width: 768px) {
    .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: 1fr !important;
    }

    .woocommerce-billing-fields__field-wrapper .form-row {
        grid-column: span 1 !important;
    }
}
/**************************************************************
   COLAR ABAIXO DAQUI
**************************************************************/
/* -----------------------------
   ESTILIZAÇÃO GERAL DOS CAMPOS
------------------------------ */

/* Caixa do formulário de envio */
.woocommerce-shipping-fields__field-wrapper p.form-row {
    margin-bottom: 18px !important;
}

/* Inputs */
.woocommerce-shipping-fields__field-wrapper input.input-text,
.woocommerce-shipping-fields__field-wrapper textarea,
.woocommerce-shipping-fields__field-wrapper select {
    width: 100%;
    padding: 10px 12px !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 15px;
    transition: .2s ease;
}

/* Focus */
.woocommerce-shipping-fields__field-wrapper input:focus,
.woocommerce-shipping-fields__field-wrapper textarea:focus,
.woocommerce-shipping-fields__field-wrapper select:focus {
    border-color: #c78e83 !important;
    box-shadow: 0 0 0 2px rgba(199, 142, 131, 0.25);
    outline: none !important;
}

/* Labels */
.woocommerce-shipping-fields__field-wrapper label {
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
    font-size: 14px;
    color: #333;
}

/* -----------------------------
   GRID RESPONSIVO DE 2 COLUNAS
------------------------------ */

.woocommerce-shipping-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.woocommerce-shipping-fields__field-wrapper p.form-row {
    padding: 0 8px;
}

/* Duas colunas padrão */
.woocommerce-shipping-fields__field-wrapper .form-row-first,
.woocommerce-shipping-fields__field-wrapper .form-row-last {
    width: 50%;
}

/* Campos largos */
.woocommerce-shipping-fields__field-wrapper .form-row-wide {
    width: 100%;
}

/* -----------------------------
   AJUSTES ESPECÍFICOS POR CAMPO
------------------------------ */

/* CEP ocupa 40% */
#shipping_postcode_field {
    width: 40% !important;
}

/* Endereço — sempre 100% */
#shipping_address_1_field {
    width: 100% !important;
}

/* Número — 30% da linha */
#shipping_number_field {
    width: 30% !important;
}

/* Complemento — 40% */
#shipping_address_2_field {
    width: 40% !important;
}

/* Bairro — 60% */
#shipping_neighborhood_field {
    width: 60% !important;
}

/* Cidade — 60% */
#shipping_city_field {
    width: 60% !important;
}

/* Estado — 40% */
#shipping_state_field {
    width: 40% !important;
}

/* Responsividade */
@media(max-width: 768px) {
    .woocommerce-shipping-fields__field-wrapper p.form-row {
        width: 100% !important;
    }
}
/* LABELS OCULTOS */ 
/* Reativar todos os labels escondidos como screen-reader-text */
.woocommerce form .form-row label.screen-reader-text,
.woocommerce-page form .form-row label.screen-reader-text {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    white-space: normal !important;
    display: block !important;
    margin-bottom: 6px !important;
    color: #333 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}