/* =====================================================
   FOOTURE - CHECKOUT
   ===================================================== */


/* =====================================================
   CAMPOS PADRÃO
   ===================================================== */

.woocommerce-checkout .form-group input.form-control,
.woocommerce-checkout .form-group input.input-text,
.woocommerce-checkout .form-group select.form-control {
    height: 42px !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
}


/* =====================================================
   SELECT2
   País, Estado e outros selects WooCommerce
   ===================================================== */

.woocommerce-checkout
.select2-container
.select2-selection--single {
    height: 42px !important;
    min-height: 42px !important;

    display: flex !important;
    align-items: center !important;

    box-sizing: border-box !important;
}


/*
 * Centraliza verticalmente o texto.
 */
.woocommerce-checkout
.select2-container
.select2-selection--single
.select2-selection__rendered {
    height: auto !important;
    line-height: 1.25 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/*
 * Centraliza também a seta.
 */
.woocommerce-checkout
.select2-container
.select2-selection--single
.select2-selection__arrow {
    height: 42px !important;
    top: 0 !important;
}


/* =====================================================
   PADRÃO DE OBRIGATORIEDADE
   ===================================================== */

/*
 * O checkout está gerando:
 *
 * <abbr class="required">*</abbr>
 * +
 * <span class="required">*</span>
 *
 * Mantemos somente o primeiro.
 *
 * Resultado:
 *
 * Campo *
 *
 * em vez de:
 *
 * Campo **
 */
.woocommerce-checkout
.form-group
> label
> span.required {
    display: none !important;
}

/* =====================================================
   REMOVE TEXTO "(OPCIONAL)"
   ===================================================== */

/*
 * Convenção visual do checkout Footure:
 *
 * * = obrigatório
 * sem * = opcional
 *
 * WooCommerce / THWCFD gera:
 * <span class="optional">(opcional)</span>
 */
.woocommerce-checkout span.optional {
    display: none !important;
}

/*
 * Campos opcionais do Estrangeiro
 * não exibem nenhum asterisco.
 */
.woocommerce-checkout
.footure-foreign-optional
> label
> abbr.required,

.woocommerce-checkout
.footure-foreign-optional
> label
> span.required {
    display: none !important;
}


/*
 * Proteção contra eventual asterisco
 * criado pelo tema via CSS.
 */
.woocommerce-checkout
.footure-foreign-optional
> label::before,

.woocommerce-checkout
.footure-foreign-optional
> label::after {
    content: none !important;
}


/* =====================================================
   PAÍS
   ===================================================== */

#billing_country_field {
    min-width: 190px !important;
}


#billing_country_field
.select2-container {
    width: 100% !important;
    min-width: 190px !important;
}


/*
 * Dropdown pode ser maior que o campo
 * para países com nomes extensos.
 */
.select2-container--open
.select2-dropdown {
    min-width: 280px !important;
}


.select2-results__option {
    white-space: nowrap !important;
}


/* =====================================================
   TIPO DE PESSOA + EMPRESA
   ===================================================== */

#billing_persontype_field,
#billing_company_field {
    width: calc(50% - 6px) !important;
    max-width: none !important;

    box-sizing: border-box !important;
}


#billing_persontype_field {
    float: left !important;
    margin-right: 12px !important;
}


#billing_company_field {
    float: left !important;
    margin-right: 0 !important;
}


#billing_company_field input,
#billing_company_field .input-text {
    width: 100% !important;
    max-width: none !important;
}


#billing_persontype_field select,
#billing_persontype_field .select2-container {
    width: 100% !important;
}

/* =====================================================
   DDI + TELEFONE + E-MAIL
   ===================================================== */

.footure-phone-row {
    width: 100% !important;

    display: flex !important;
    align-items: flex-end !important;
    gap: 12px !important;

    clear: both !important;

    box-sizing: border-box !important;
}


/* DDI */
.footure-phone-row
#billing_phone_country_code_field {
    flex: 0 0 100px !important;

    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;

    float: none !important;
    clear: none !important;

    margin: 0 !important;
}


/* Telefone */
.footure-phone-row
#billing_phone_field {
    flex: 0 0 180px !important;

    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;

    float: none !important;
    clear: none !important;

    margin: 0 !important;
}


/* E-mail ocupa todo o espaço restante */
.footure-phone-row
#billing_email_field {
    flex: 1 1 0 !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    float: none !important;
    clear: none !important;

    margin: 0 !important;
}


/* Inputs/selects ocupam o container inteiro */
.footure-phone-row
#billing_phone_country_code_field select,
.footure-phone-row
#billing_phone_country_code_field .select2-container,
.footure-phone-row
#billing_phone_field input,
.footure-phone-row
#billing_email_field input {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* =====================================================
   RESPONSIVO
   ===================================================== */

@media (max-width: 767px) {

    #billing_persontype_field,
    #billing_company_field {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }

    #billing_country_field {
        min-width: 0 !important;
    }

    #billing_country_field .select2-container {
        width: 100% !important;
        min-width: 0 !important;
    }

    .footure-phone-row {
        width: 100% !important;

        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-end !important;

        gap: 12px !important;

        clear: both !important;
    }

    .footure-phone-row
    #billing_phone_country_code_field {
        flex: 0 0 100px !important;

        width: 100px !important;
        min-width:100px !important;
        max-width: 100px !important;
    }

    .footure-phone-row
    #billing_phone_field {
        flex: 1 1 calc(100% - 112px) !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .footure-phone-row
    #billing_email_field {
        flex: 0 0 100% !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}