/* Adiciona box-sizing para todos os elementos para melhor controle de layout */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Estilos para o container da seção "Compre Junto" */
.meu-bundle-woocommerce-container {
    border: 1px solid #eee; /* Borda leve */
    padding: 15px; /* Preenchimento interno */
    margin-top: 20px; /* Margem superior para separar do conteúdo anterior */
    background-color: #f9f9f9; /* Fundo suave */
    border-radius: 8px; /* Cantos arredondados um pouco mais pronunciados */
    box-shadow: 0 4px 8px rgba(0,0,0,0.08); /* Sombra mais visível para profundidade */
    max-width: 100%; /* Garante que não ultrapasse a largura do pai */
    overflow: hidden; /* Evita quebra de layout se o conteúdo for muito grande */
}

/* Estilos para o título da seção */
.meu-bundle-woocommerce-container h3 {
    margin-top: 0; /* Remove margem superior padrão */
    font-size: 1.4em; /* Tamanho da fonte um pouco maior */
    color: #222; /* Cor do texto mais escura */
    border-bottom: 1px solid #ddd; /* Linha inferior mais suave */
    padding-bottom: 12px; /* Preenchimento abaixo da linha */
    margin-bottom: 18px; /* Margem inferior */
    text-align: center; /* Centraliza o título */
}

/* Estilos para o parágrafo de instrução */
.meu-bundle-woocommerce-container p {
    font-size: 1em; /* Tamanho da fonte padrão */
    color: #555;
    margin-bottom: 15px;
    text-align: center; /* Centraliza o texto */
}

/* Estilos para o campo de seleção (dropdown) */
.meu-bundle-woocommerce-container select {
    width: 100%; /* Largura total */
    padding: 12px 15px; /* Preenchimento maior para toque */
    margin-bottom: 20px; /* Margem inferior */
    border: 1px solid #bbb; /* Borda um pouco mais escura */
    border-radius: 6px; /* Cantos arredondados */
    background-color: #fff; /* Fundo branco */
    font-size: 1.1em; /* Tamanho da fonte maior para legibilidade */
    cursor: pointer; /* Cursor de ponteiro */
    appearance: none; /* Remove estilo padrão do sistema */
    -webkit-appearance: none; /* Para navegadores Webkit */
    -moz-appearance: none; /* Para navegadores Mozilla */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-5.4H18.2c-4.8%200-9.3%201.8-13.2%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.9%209.5%205.4%2013.2l128%20127.9c3.6%203.6%208.1%205.4%2013.2%205.4s9.6-1.8%2013.2-5.4l128-127.9c3.6-3.6%205.4-8.1%205.4-13.2%200-5-1.8-9.5-5.4-13.2z%22%2F%3E%3C%2Fsvg%3E'); /* Seta customizada */
    background-repeat: no-repeat;
    background-position: right 15px center; /* Posição da seta ajustada */
    background-size: 14px auto; /* Tamanho da seta ajustado */
    transition: border-color 0.3s ease; /* Transição suave na borda */
}

.meu-bundle-woocommerce-container select:focus {
    outline: none;
    border-color: #0073aa; /* Cor da borda ao focar */
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.2); /* Sombra ao focar */
}

/* Estilos para o preço total do bundle */
#meu-bundle-woocommerce-total-price {
    font-size: 1.3em; /* Tamanho da fonte maior */
    font-weight: bold; /* Negrito */
    color: #444; /* Cor do texto mais escura */
    margin-top: 15px; /* Margem superior */
    text-align: right; /* Alinha o texto à direita */
    padding-top: 15px;
    border-top: 1px dashed #ccc; /* Linha tracejada superior mais clara */
}

/* Estilos para o valor do preço dentro do total */
#meu-bundle-woocommerce-total-price .price {
    color: #0073aa; /* Cor primária do WooCommerce ou a que você preferir */
    font-size: 1.4em; /* Torna o preço ainda maior */
    display: inline-block; /* Garante que o span se comporte como bloco para margens/padding */
    margin-left: 8px; /* Pequena margem para separar do texto "Preço Total com Bundle:" */
}

/* Estilos para o novo botão de adicionar ao carrinho do bundle */
#meu-bundle-add-to-cart-button {
    width: 100%; /* Largura total */
    padding: 12px 20px; /* Preenchimento */
    margin-top: 20px; /* Margem superior para separar do preço */
    background-color: pink; /* Cor pink */
    color: #fff; /* Texto branco */
    border: none; /* Sem borda */
    border-radius: 6px; /* Cantos arredondados */
    font-size: 1.1em; /* Tamanho da fonte */
    font-weight: bold; /* Negrito */
    cursor: pointer; /* Cursor de ponteiro */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transições suaves */
    text-transform: uppercase; /* Texto em maiúsculas */
    letter-spacing: 0.5px; /* Espaçamento entre letras */
}

#meu-bundle-add-to-cart-button:hover {
    background-color: #FF1493; /* Cor pink mais escura ao passar o mouse */
    transform: translateY(-2px); /* Efeito de "levantar" */
}

#meu-bundle-add-to-cart-button:active {
    transform: translateY(0); /* Efeito de "clicar" */
}

#meu-bundle-add-to-cart-button.loading {
    opacity: 0.7;
    cursor: not-allowed;
}


/* Estilos responsivos */
@media (max-width: 768px) {
    .meu-bundle-woocommerce-container {
        padding: 12px;
        margin-top: 15px;
        border-radius: 6px;
    }

    .meu-bundle-woocommerce-container h3 {
        font-size: 1.2em;
        padding-bottom: 10px;
        margin-bottom: 12px;
    }

    .meu-bundle-woocommerce-container p {
        font-size: 0.9em;
        margin-bottom: 12px;
    }

    .meu-bundle-woocommerce-container select {
        padding: 10px 12px;
        font-size: 1em;
        background-position: right 10px center;
        background-size: 12px auto;
    }

    #meu-bundle-woocommerce-total-price {
        font-size: 1.1em;
        padding-top: 12px;
    }

    #meu-bundle-woocommerce-total-price .price {
        font-size: 1.2em;
    }

    #meu-bundle-add-to-cart-button {
        padding: 10px 15px;
        font-size: 1em;
        margin-top: 15px;
    }
}

@media (max-width: 480px) {
    .meu-bundle-woocommerce-container {
        padding: 10px;
        margin-top: 10px;
    }

    .meu-bundle-woocommerce-container h3 {
        font-size: 1.1em;
        padding-bottom: 8px;
        margin-bottom: 10px;
    }

    .meu-bundle-woocommerce-container p {
        font-size: 0.85em;
        margin-bottom: 10px;
    }

    .meu-bundle-woocommerce-container select {
        padding: 8px 10px;
        font-size: 0.9em;
        background-position: right 8px center;
        background-size: 10px auto;
    }

    #meu-bundle-woocommerce-total-price {
        font-size: 1em;
        padding-top: 10px;
    }

    #meu-bundle-woocommerce-total-price .price {
        font-size: 1.1em;
    }

    #meu-bundle-add-to-cart-button {
        padding: 8px 12px;
        font-size: 0.9em;
        margin-top: 12px;
    }
}