/* Stylesheet for WooCommerce Checkout Block ViaCEP & Address Fields */

/* Ensure the address form uses flexbox to support custom ordering */
.wc-block-components-address-form,
.wc-block-checkout__shipping-address .wc-block-components-address-form,
.wc-block-checkout__billing-address .wc-block-components-address-form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    /* reset default grid gap to use exact percentages */
}

.wc-block-components-address-form .wc-block-components-address-form__email {
    width: 100% !important;
}

/* Row 1: Nome (50% width) & Sobrenome (50% width) */
.wc-block-components-address-form .wc-block-components-address-form__first-name,
.wc-block-components-address-form .wc-block-components-address-form__first_name {
    order: 1 !important;
    width: 49% !important;
    margin-right: 2% !important;
    flex: none !important;
}

.wc-block-components-address-form .wc-block-components-address-form__last-name,
.wc-block-components-address-form .wc-block-components-address-form__last_name {
    order: 2 !important;
    width: 49% !important;
    margin-right: 0 !important;
    flex: none !important;
}

/* Optional: Company field */
.wc-block-components-address-form .wc-block-components-address-form__company {
    order: 3 !important;
    width: 100% !important;
    flex: none !important;
}

/* Row 2: Telefone (100% width) */
.wc-block-components-address-form .wc-block-components-address-form__phone {
    order: 4 !important;
    width: 100% !important;
    flex: none !important;
}

/* Hide Country field completely */
.wc-block-components-address-form .wc-block-components-address-form__country {
    display: none !important;
}

/* Row 3: CEP (30% width) + Cidade (56% width) + Estado/UF (12% width) */
.wc-block-components-address-form .wc-block-components-address-form__postcode {
    order: 10 !important;
    width: 20% !important;
    margin-right: 2% !important;
    flex: none !important;
}

.wc-block-components-address-form .wc-block-components-address-form__city {
    order: 11 !important;
    width: 56% !important;
    margin-right: 2% !important;
    flex: none !important;
}

.wc-block-components-address-form .wc-block-components-address-form__state {
    order: 12 !important;
    width: 20% !important;
    margin-right: 0 !important;
    flex: none !important;
}

/* Row 4: Endereço/Logradouro (78% width) + Número (20% width) */
.wc-block-components-address-form .wc-block-components-address-form__address_1,
.wc-block-components-address-form .wc-block-components-address-form__address-1 {
    order: 20 !important;
    width: 78% !important;
    margin-right: 2% !important;
    flex: none !important;
}

.wc-block-components-address-form .wc-block-components-address-form__wc-viacep-number,
.wc-block-components-address-form div[class*="wc-viacep-number"],
.wc-block-components-address-form div[class*="wc-viacep_number"] {
    order: 21 !important;
    width: 20% !important;
    margin-right: 0 !important;
    flex: none !important;
}

/* Row 5: Bairro (100% width) */
.wc-block-components-address-form .wc-block-components-address-form__wc-viacep-neighborhood,
.wc-block-components-address-form div[class*="wc-viacep-neighborhood"],
.wc-block-components-address-form div[class*="wc-viacep_neighborhood"] {
    order: 30 !important;
    width: 100% !important;
    margin-right: 0 !important;
    flex: none !important;
}

/* Row 6: Complemento toggle/input (100% width) - placed last after neighborhood */
.wc-block-components-address-form .wc-block-components-address-form__address_2,
.wc-block-components-address-form .wc-block-components-address-form__address-2,
.wc-block-components-address-form .wc-block-components-address-form__address_2-toggle,
.wc-block-components-address-form .wc-block-components-address-form__address-2-toggle {
    order: 35 !important;
    width: 100% !important;
    margin-right: 0 !important;
    flex: none !important;
}

/* Loading state spinner for CEP input field */
.loading-cep {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 50 50'%3E%3Cpath fill='%23999' d='M25,5A20,20,0,1,0,45,25,20,20,0,0,0,25,5Zm0,36A16,16,0,1,1,41,25,16,16,0,0,1,25,41Z'/%3E%3Cpath fill='%23007cba' d='M25,5A20,20,0,0,1,45,25h-4A16,16,0,0,0,25,9Z'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") no-repeat right 12px center !important;
    background-size: 20px 20px !important;
    padding-right: 40px !important;
}

/* Responsive layout adjustments for mobile screens (under 768px) */
@media screen and (max-width: 768px) {

    .wc-block-components-address-form .wc-block-components-address-form__first-name,
    .wc-block-components-address-form .wc-block-components-address-form__first_name,
    .wc-block-components-address-form .wc-block-components-address-form__last-name,
    .wc-block-components-address-form .wc-block-components-address-form__last_name,
    .wc-block-components-address-form .wc-block-components-address-form__postcode,
    .wc-block-components-address-form .wc-block-components-address-form__city,
    .wc-block-components-address-form .wc-block-components-address-form__state,
    .wc-block-components-address-form .wc-block-components-address-form__address_1,
    .wc-block-components-address-form .wc-block-components-address-form__address-1,
    .wc-block-components-address-form .wc-block-components-address-form__wc-viacep-number,
    .wc-block-components-address-form div[class*="wc-viacep-number"],
    .wc-block-components-address-form div[class*="wc-viacep_number"],
    .wc-block-components-address-form .wc-block-components-address-form__address_2,
    .wc-block-components-address-form .wc-block-components-address-form__address-2,
    .wc-block-components-address-form .wc-block-components-address-form__address_2-toggle,
    .wc-block-components-address-form .wc-block-components-address-form__address-2-toggle,
    .wc-block-components-address-form .wc-block-components-address-form__wc-viacep-neighborhood,
    .wc-block-components-address-form div[class*="wc-viacep-neighborhood"],
    .wc-block-components-address-form div[class*="wc-viacep_neighborhood"] {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
        flex: none !important;
    }
}