/*
 * CSS Infantil - Estilos específicos para fraldas infantis
 * Fraldas ZOO - Clean Care
 * Paleta colorida e divertida
 */

:root {
    --primary-color: #1F4F88;
    --secondary-color: #00BFFF;
    --light-bg: #f8f9fa;
    --dark-bg: #212529;

    /* Cores variadas e vibrantes */
    --color-1: #1F4F88;
    --color-2: #519EF9;
    --color-3: #479D37;
    --color-4: #A01885;
    --color-5: #DB1252;

    /* Tons claros */
    --color-1-light: #C9DEF6;
    --color-2-light: #E5F1FF;
    --color-3-light: #DDF5D9;
    --color-4-light: #FFCCF5;
    --color-5-light: #FFCDDD;

    /* Shadow para formulários */
    --primary-shadow: rgba(31, 79, 136, 0.25);
}

/* Títulos com cor primária */
h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
}

/* Sobrescrever cores primárias do Bootstrap */
.bg-primary,
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #173a66 !important;
    border-color: #173a66 !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

/* Navegação */
.navbar {
    background-color: var(--secondary-color);
}

/* Seção Apresentação */
#apresentacao {
    background-color: var(--secondary-color);
}

/* Ícones de features do produto com cores variadas */
#produto .list-unstyled li:nth-child(1) .product-feature-icon {
    background: linear-gradient(135deg, #00BFFF, #1E90FF);
}

#produto .list-unstyled li:nth-child(2) .product-feature-icon {
    background: linear-gradient(135deg, #FF6B6B, #FF5252);
}

#produto .list-unstyled li:nth-child(3) .product-feature-icon {
    background: linear-gradient(135deg, #4CAF50, #45A049);
}

#produto .list-unstyled li:nth-child(4) .product-feature-icon {
    background: linear-gradient(135deg, #FFA726, #FF9800);
}

/* Cores personalizadas para cada tamanho */
.size-item[data-size="P"] .size-label {
    color: var(--color-1) !important;
}

.size-item[data-size="M"] .size-label {
    color: var(--color-2) !important;
}

.size-item[data-size="G"] .size-label {
    color: var(--color-3) !important;
}

.size-item[data-size="XG"] .size-label {
    color: var(--color-4) !important;
}

.size-item[data-size="XXG"] .size-label {
    color: var(--color-5) !important;
}

.size-item[data-size="P"].active .size-card {
    border: 4px solid var(--color-1);
}

.size-item[data-size="M"].active .size-card {
    border: 4px solid var(--color-2);
}

.size-item[data-size="G"].active .size-card {
    border: 4px solid var(--color-3);
}

.size-item[data-size="XG"].active .size-card {
    border: 4px solid var(--color-4);
}

.size-item[data-size="XXG"].active .size-card {
    border: 4px solid var(--color-5);
}

/* Tooltip de Tamanhos */
.size-tooltip {
    background-color: #f8f9fa;
}

/* Cores específicas para cada ícone de benefício */
.benefit-icon-1 {
    background-color: var(--color-2);
    --benefit-icon-color: var(--color-2);
}

.benefit-icon-2 {
    background-color: var(--color-3);
    --benefit-icon-color: var(--color-3);
}

.benefit-icon-3 {
    background-color: var(--color-4);
    --benefit-icon-color: var(--color-4);
}

.benefit-icon-4 {
    background-color: var(--color-5);
    --benefit-icon-color: var(--color-5);
}

/* Imagem central dos benefícios */
.benefit-center-image img.border-color-1 {
    border-color: var(--color-2);
}

.benefit-center-image img.border-color-2 {
    border-color: var(--color-3);
}

.benefit-center-image img.border-color-3 {
    border-color: var(--color-4);
}

.benefit-center-image img.border-color-4 {
    border-color: var(--color-5);
}

/* Depoimentos */
.testimonial-card .footer.color-1 {
    --tesimonial-color: var(--color-5);
}

.testimonial-card .footer.color-2 {
    --tesimonial-color: var(--color-4);
}

.testimonial-card .footer.color-3 {
    --tesimonial-color: #67AAFA;
}

/* FAQ Accordion */
.accordion-item:nth-child(1) {
    --accordion-color: var(--color-1-light);
}

.accordion-item:nth-child(2) {
    --accordion-color: var(--color-2-light);
}

.accordion-item:nth-child(3) {
    --accordion-color: var(--color-3-light);
}

.accordion-item:nth-child(4) {
    --accordion-color: var(--color-4-light);
}

.accordion-item:nth-child(5) {
    --accordion-color: var(--color-5-light);
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(31, 79, 136, 0.25);
}

/* CTA Section */
.cta-section {
    background-color: var(--color-5) !important;
}

/* Ícones de Contato - Cores variadas */
.contact-icon-phone {
    background-color: var(--color-5);
}

.contact-icon-email {
    background-color: var(--color-2);
}

.contact-icon-whatsapp {
    background-color: var(--color-3);
}

/* Footer */
footer.bg-primary {
    background-color: var(--primary-color) !important;
}