/*
 * CSS Geriátrico - Estilos específicos para fraldas geriátricas
 * Fraldas ZOO - Clean Care
 * Paleta monocromática elegante e sóbria
 */

:root {
    /* Cor primária #1F4F88 e evolução de tons */
    --primary-color: #1F4F88;
    --secondary-color: #3D6AA5;
    --light-bg: #f8f9fa;
    --dark-bg: #2C3E50;

    /* Tons progressivos da cor primária para elementos geriátricos */
    --geriatric-1: #1F4F88;
    --geriatric-2: #2F5F98;
    --geriatric-3: #4A7AB0;
    --geriatric-4: #6694C8;

    /* Tons claros da cor primária */
    --geriatric-1-light: #D4E1F0;
    --geriatric-2-light: #DCE7F3;
    --geriatric-3-light: #E5EDF7;
    --geriatric-4-light: #EDF3FA;

    /* 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);
    background-image: none !important;
    animation: none !important;
}

/* Ícones de features do produto - tons da cor primária */
#produto .list-unstyled li:nth-child(1) .product-feature-icon {
    background: linear-gradient(135deg, var(--geriatric-1), var(--geriatric-2));
}

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

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

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

/* Cores para cada tamanho - apenas cor primária */
.size-item[data-size="P"] .size-label,
.size-item[data-size="M"] .size-label,
.size-item[data-size="G"] .size-label,
.size-item[data-size="XG"] .size-label,
.size-item[data-size="XXG"] .size-label {
    color: var(--geriatric-1) !important;
}

.size-item[data-size="P"].active .size-card,
.size-item[data-size="M"].active .size-card,
.size-item[data-size="G"].active .size-card,
.size-item[data-size="XG"].active .size-card,
.size-item[data-size="XXG"].active .size-card {
    border: 4px solid var(--geriatric-1);
}

/* Tooltip de Tamanhos - cor primária */
.size-tooltip {
    background-color: var(--geriatric-1);
}

/* Ícones de benefício - tons da cor primária */
.benefit-icon-1 {
    background-color: var(--geriatric-1);
    --benefit-icon-color: var(--geriatric-1);
}

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

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

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

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

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

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

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

/* Depoimentos - tons da cor primária */
.testimonial-card .footer.color-1 {
    --tesimonial-color: var(--geriatric-1);
}

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

.testimonial-card .footer.color-3 {
    --tesimonial-color: var(--geriatric-3);
}

/* FAQ Accordion - tons claros da cor primária */
.accordion-item:nth-child(1) {
    --accordion-color: var(--geriatric-1-light);
}

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

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

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

.accordion-item:nth-child(5) {
    --accordion-color: #F5F7FA;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem var(--primary-shadow);
}

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

/* Ícones de Contato - tons da cor primária */
.contact-icon-phone {
    background-color: var(--geriatric-1);
}

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

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

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

/* Cards com bordas mais suaves */
.card {
    border-color: var(--geriatric-1-light);
}

.card:hover {
    border-color: var(--geriatric-2-light);
}

/* Links com cor primária */
a {
    color: var(--primary-color);
}

a:hover {
    color: #173a66;
}

/* Fundo elegante para seções da página geriátrica */
.bg-geriatrico {
    background: linear-gradient(135deg, #D4E1F0 0%, #E5EDF7 50%, #D4E1F0 100%);
    position: relative;
}

/* Adiciona um padrão sutil de textura */
.bg-geriatrico::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 35px,
            rgba(31, 79, 136, 0.04) 35px,
            rgba(31, 79, 136, 0.04) 70px
        );
    pointer-events: none;
}