/* --- GERAL E MOBILE FIRST PADRÃO --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', 'Helvetica Neue', sans-serif;
    background-color: #f7f7f7; 
    color: #333;
    /* Configuração para o Layout Mobile: */
    max-width: 600px; /* Limita o tamanho para simular a tela mobile */
    margin: 0 auto; 
    padding-top: 85px; /* Compensa o header fixo + tabs */
    padding-bottom: 75px; /* Compensa o rodapé CTA fixo */
}

a {
    text-decoration: none;
    color: inherit;
}

/* === 1. HEADER E NAVEGAÇÃO SUPERIOR (FIXOS) === */
.page-header-app {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 600px;
    margin: 0 auto;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    z-index: 1000;
}
.header-icons-left i, .header-icons-right i {
    font-size: 1.2rem;
    color: #555;
    margin-right: 15px;
}
.header-icons-left .fa-times {
    margin-left: 10px;
}
.cart-icon {
    position: relative;
    margin-right: 0 !important;
}
.cart-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: #ff0000;
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    padding: 2px 5px;
    font-weight: bold;
}

/* Tabs de Navegação */
.product-tabs-nav {
    position: fixed;
    top: 50px; /* Abaixo do header */
    left: 0;
    right: 0;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    background-color: white;
    border-bottom: 2px solid #e0e0e0;
    overflow-x: auto;
    white-space: nowrap;
    z-index: 900;
}
.tab-item {
    padding: 10px 15px;
    font-size: 0.9rem;
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    font-weight: 500;
}


/* === CONTEÚDO SCROLLÁVEL: GALERIA E VARIAÇÕES === */
.product-content-wrapper {
    background-color: white;
}

.image-gallery-container {
    position: relative;
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.main-product-image {
    width: 80%;
    max-width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
}
/* Estilo das Setas de Navegação (IDÊNTICO À IMAGEM) */
.arrow-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #555;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.fa-chevron-left { left: 10px; }
.fa-chevron-right { right: 10px; }
.carousel-dots-indicator {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
}
.dot {
    width: 8px;
    height: 8px;
    background-color: #bbb;
    border-radius: 50%;
}
.dot.active {
    background-color: #333;
}

/* Variações de Cor - Estilo da Imagem */
.color-variation-section {
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
}
.color-label-display {
    font-size: 0.9rem;
    margin-bottom: 10px;
}
.color-label-display strong {
    font-weight: bold;
}
.color-thumbs-selector {
    display: flex;
    gap: 10px;
}
.color-option-item {
    border: 1px solid #ddd;
    padding: 3px;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
}
/* Borda de Destaque da variação ativa (Fiel à imagem) */
.color-option-item.active {
    border-color: #ff5722; /* Cor da oferta */
    border-width: 2px;
}
.color-thumb-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
}

/* === 3. BARRA DE PREÇO FLUTUANTE (LARANJA/VERMELHA) === */
.price-offer-bar {
    background-color: #ff5722; /* Laranja/Vermelho (cor da oferta) */
    color: white;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.price-info {
    display: flex;
    flex-direction: column;
}
.discount-percent {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 0.8rem;
    align-self: flex-start;
    margin-bottom: 3px;
}
.price-start {
    font-size: 1.1rem;
    font-weight: 500;
}
.price-start strong {
    font-size: 1.5rem;
    font-weight: bold;
}
.price-old-value {
    font-size: 0.9rem;
    text-decoration: line-through;
    opacity: 0.8;
}

.offer-timer-box {
    text-align: right;
    font-size: 0.9rem;
    font-weight: 500;
}
.offer-timer-box .fas {
    color: #ffeb3b;
    margin-right: 5px;
}
.timer-display {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Título e Info */
.product-details-content {
    padding: 15px;
    background-color: white;
    border-bottom: 8px solid #f0f0f0; /* Separador */
}
.promo-tag-light {
    background-color: #f7f7f7; 
    color: #777; 
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    display: inline-block;
    margin-bottom: 10px;
}
.product-title-final {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
}

/* === 4. RODAPÉ FIXO DE COMPRA (CTA) === */
.buy-cta-fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 600px;
    margin: 0 auto;
    background-color: white;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-top: 1px solid #ddd;
    z-index: 1000;
}

.cta-icons-info {
    display: flex;
    align-items: center;
    margin-right: 10px;
    flex-shrink: 0;
}
.cta-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.7rem;
    color: #555;
    margin: 0 5px;
}
.cta-link-item .fas {
    font-size: 1.2rem;
    margin-bottom: 2px;
}

/* Botões de Ação (Adicionar e Comprar) */
.cta-button-add-cart {
    flex-grow: 1;
    background-color: #e0e0e0; /* Cinza do botão "Adicionar ao carrinho" */
    color: #333;
    padding: 12px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    margin-right: 8px;
    white-space: nowrap;
}

.cta-button-buy-now {
    flex-grow: 1.2;
    background-color: #e91e63; /* Rosa/Pink forte (Exatamente como na imagem) */
    color: white;
    padding: 12px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}
.cta-button-buy-now span {
    display: block;
    font-size: 0.7rem;
    font-weight: normal;
}

/* Ajustes de Desktop (Para não parecer minúsculo em tela grande) */
@media (min-width: 601px) {
    .page-header-app, .product-tabs-nav, .buy-cta-fixed-footer {
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
    }
}/* --- GERAL E MOBILE FIRST PADRÃO --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', 'Helvetica Neue', sans-serif;
    background-color: #f7f7f7; /* Cor de fundo geral */
    color: #333;
    max-width: 600px; /* Limita o corpo para simular a tela mobile */
    margin: 0 auto; 
    padding-top: 85px; /* Compensa o header fixo + tabs */
    padding-bottom: 75px; /* Compensa o rodapé CTA fixo */
    min-height: 100vh; /* Para garantir que o rodapé fixo funcione */
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
    color: inherit;
}

/* === 1. HEADER FIXO SUPERIOR === */
.app-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 600px;
    margin: 0 auto;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    z-index: 1000;
    border-bottom: 1px solid #eee; /* Linha sutil */
}
.header-icons-left i, .header-icons-right i {
    font-size: 1.2rem;
    color: #555;
    margin-right: 15px;
}
.header-icons-left .fa-times {
    margin-left: 10px;
}
.cart-icon {
    position: relative;
    margin-right: 0 !important;
}
.cart-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: #ff0000;
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    padding: 2px 5px;
    font-weight: bold;
}

/* === 2. ABAS DE NAVEGAÇÃO SUPERIOR === */
.app-tabs-nav {
    position: fixed;
    top: 50px; /* Abaixo do header */
    left: 0;
    right: 0;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    background-color: white;
    border-bottom: 2px solid #e0e0e0;
    overflow-x: auto; /* Permite rolar se houver muitas abas */
    white-space: nowrap;
    z-index: 900;
}
.tab-item {
    flex-shrink: 0; /* Impede que as abas encolham */
    padding: 10px 15px;
    font-size: 0.9rem;
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    font-weight: 500;
}


/* === 3. CONTEÚDO PRINCIPAL (SCROLLABLE) === */
.content-scrollable {
    flex-grow: 1; /* Permite que o conteúdo ocupe o espaço restante e role */
    overflow-y: auto; /* Adiciona barra de rolagem vertical se o conteúdo for maior que a tela */
    background-color: white; /* Fundo do conteúdo */
}

/* === SEÇÃO: VISÃO GERAL === */
#overview {
    padding-bottom: 8px; /* Espaço para o separador */
}

.product-main-title {
    font-size: 1.4rem;
    font-weight: 600;
    padding: 15px;
    line-height: 1.3;
}
.product-rating-sales {
    display: flex;
    align-items: center;
    padding: 0 15px 15px 15px;
    font-size: 0.9rem;
    color: #555;
    border-bottom: 8px solid #f0f0f0; /* Separador */
}
.rating-stars .fas {
    color: #ffc107; /* Amarelo das estrelas */
    margin-right: 3px;
}
.rating-text {
    font-weight: bold;
    color: #333;
    margin-left: 5px;
}
.sales-count {
    margin-left: 5px;
}

/* Bloco de Frete */
.shipping-block {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
}
.shipping-icon {
    font-size: 1.5rem;
    color: #28a745; /* Verde do caminhão */
    margin-right: 15px;
}
.shipping-details {
    flex-grow: 1;
}
.shipping-info {
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;
}
.free-shipping-tag {
    background-color: #e6ffe6; /* Fundo verde claro */
    color: #28a745;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
    margin-right: 5px;
}
.shipping-tax {
    font-size: 0.85rem;
    color: #777;
    margin-top: 3px;
}
.details-arrow {
    font-size: 1rem;
    color: #bbb;
}

/* Miniaturas de Cores/Modelos (2 CORES, 3 MODELOS) */
.models-options-block {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 8px solid #f0f0f0; /* Separador */
}
.icon-grid {
    font-size: 1.5rem;
    color: #555;
    margin-right: 15px;
}
.model-thumbs {
    display: flex;
    gap: 8px;
    margin-right: 15px;
}
.model-thumb {
    width: 45px; /* Tamanho menor para estas miniaturas */
    height: 45px;
    object-fit: contain;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
}
.model-thumb.active {
    border-color: #ff5722; /* Borda de destaque laranja/vermelho */
    border-width: 2px;
}
.models-count {
    flex-grow: 1;
    font-size: 0.9rem;
    color: #555;
}

/* Serviços TikTok Shop */
.tiktok-services-block {
    padding: 15px;
    border-bottom: 8px solid #f0f0f0; /* Separador */
}
.tiktok-services-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.tiktok-services-header p {
    flex-grow: 1;
    font-weight: 500;
    margin-left: 10px;
    font-size: 0.95rem;
}
.service-icon {
    font-size: 1.5rem;
    color: #e91e63; /* Cor rosa do TikTok */
}
.service-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas */
    gap: 10px;
    font-size: 0.9rem;
}
.service-item .fa-check {
    color: #28a745;
    margin-right: 5px;
}

/* GALERIA DE IMAGENS PRINCIPAL (TRANSFERIDA PARA AQUI) */
.product-gallery-app {
    position: relative;
    text-align: center;
    padding: 10px 0;
    background-color: #fff; /* Fundo branco, sem cinza */
    border-bottom: 1px solid #f0f0f0;
}
.main-product-image {
    width: 90%;
    max-width: 450px; /* Ajuste para preencher melhor a tela mobile */
    height: auto;
    display: block;
    margin: 0 auto;
}
/* Estilo das Setas de Navegação (IDÊNTICO À IMAGEM) */
.arrow-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #555;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.fa-chevron-left { left: 10px; }
.fa-chevron-right { right: 10px; }
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
}
.dot {
    width: 8px;
    height: 8px;
    background-color: #bbb;
    border-radius: 50%;
}
.dot.active {
    background-color: #333;
}

/* Variações de Cor - Estilo da Imagem (Repetição, mas aqui para o contexto da Visão Geral) */
.color-options-block {
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
}
.color-label {
    font-size: 0.9rem;
    margin-bottom: 10px;
}
.color-label strong {
    font-weight: bold;
}
.color-thumbnails-container {
    display: flex;
    gap: 10px;
}
.color-option {
    border: 1px solid #ddd;
    padding: 3px;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
}
.color-option.active {
    border-color: #ff5722; /* Borda de destaque da variação ativa */
    border-width: 2px;
}
.color-thumb {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
}

/* BARRA DE PREÇO FLUTUANTE (LARANJA/VERMELHA) */
.price-bar-float {
    background-color: #ff5722; /* Cor da oferta, fiel à imagem */
    color: white;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra para o efeito flutuante */
    border-bottom: 8px solid #f0f0f0; /* Separador */
}
.price-info {
    display: flex;
    flex-direction: column;
}
.discount {
    background-color: rgba(0, 0, 0, 0.2); /* Fundo sutil */
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 0.8rem;
    align-self: flex-start;
    margin-bottom: 3px;
}
.price-start {
    font-size: 1.1rem;
    font-weight: 500;
}
.price-start strong {
    font-size: 1.5rem;
    font-weight: bold;
}
.price-old {
    font-size: 0.9rem;
    text-decoration: line-through;
    opacity: 0.8;
}

.offer-timer {
    text-align: right;
    font-size: 0.9rem;
    font-weight: 500;
}
.offer-timer .fas {
    color: #ffeb3b;
    margin-right: 5px;
}
.timer-ends {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* === SEÇÃO: AVALIAÇÕES === */
#reviews, #description, #recommendations {
    padding: 15px;
    background-color: white;
    margin-bottom: 8px; /* Espaçamento entre seções */
}
.section-heading {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Card de Avaliação Individual */
.review-card {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.review-card:last-of-type {
    border-bottom: none; /* Remove a borda do último card */
}
.reviewer-info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.reviewer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}
.reviewer-details {
    display: flex;
    flex-direction: column;
}
.reviewer-name {
    font-weight: bold;
    font-size: 0.95rem;
}
.review-stars .fas {
    color: #ffc107;
    font-size: 0.8rem;
}
.reviewer-location {
    font-size: 0.8rem;
    color: #777;
}
.review-text {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 10px;
}
.review-product-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #eee;
}

/* Avaliações da Loja */
.shop-reviews-block {
    padding-top: 20px;
    border-top: 8px solid #f0f0f0;
    margin-top: 20px;
}
.shop-info-card {
    display: flex;
    align-items: center;
    background-color: #f7f7f7;
    padding: 15px;
    border-radius: 8px;
}
.shop-logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 1px solid #eee;
}
.shop-details {
    flex-grow: 1;
}
.shop-name {
    font-weight: bold;
    font-size: 1rem;
}
.shop-products {
    font-size: 0.85rem;
    color: #777;
}
.follow-button {
    background-color: #e0e0e0;
    color: #333;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.9rem;
}

/* === SEÇÃO: DESCRIÇÃO === */
.product-description-details {
    padding-bottom: 20px;
}
.product-description-details h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #333;
}
.product-description-details ul {
    list-style: none;
    padding: 0;
    margin-bottom: 15px;
}
.product-description-details li {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 5px;
}
.detail-icon {
    margin-right: 8px;
    color: #999; /* Ícones mais suaves */
}
.product-description-details p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 15px;
    color: #555;
}

/* === SEÇÃO: VOCÊ TAMBÉM PODE GOSTAR (RECOMENDADOS) === */
.recommended-products-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas */
    gap: 10px;
}
.product-card {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.card-header-icons {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
}
.card-header-icons .fas {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 5px;
    font-size: 0.9rem;
    color: #555;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.product-card-image {
    width: 100%;
    height: 150px; /* Altura fixa para as imagens dos cards */
    object-fit: contain;
    margin-bottom: 10px;
}
.product-card-name {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
    height: 3em; /* Limita o nome a 2 linhas */
    overflow: hidden;
    margin-bottom: 5px;
}
.product-card-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 3px;
}
.card-price-current {
    font-size: 1.1rem;
    font-weight: bold;
    color: #c0392b;
}
.card-price-old {
    font-size: 0.8rem;
    text-decoration: line-through;
    color: #999;
}
.product-card-discount {
    background-color: #fee2e2; /* Fundo rosa claro do desconto */
    color: #e74c3c; /* Texto vermelho do desconto */
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 5px;
}
.product-card-sales {
    font-size: 0.8rem;
    color: #777;
}
.card-rating-stars .fas {
    color: #ffc107;
}

/* RODAPÉ EXPANDIDO (MENU COM CHEVRONS) */
.expanded-footer-menu {
    border-top: 8px solid #f0f0f0;
    padding-top: 20px;
    margin-top: 20px;
}
.footer-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
    color: #333;
    cursor: pointer;
}
.footer-menu-item .fas {
    color: #777;
}


/* === 4. RODAPÉ FIXO DE COMPRA (CTA) === */
.buy-cta-fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 600px;
    margin: 0 auto;
    background-color: white;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-top: 1px solid #ddd;
    z-index: 1000;
}

.cta-icons-info {
    display: flex;
    align-items: center;
    margin-right: 10px;
    flex-shrink: 0;
}
.cta-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.7rem;
    color: #555;
    margin: 0 5px;
}
.cta-link-item .fas {
    font-size: 1.2rem;
    margin-bottom: 2px;
}

/* Botões de Ação (Adicionar e Comprar) */
.cta-button-add-cart {
    flex-grow: 1;
    background-color: #e0e0e0;
    color: #333;
    padding: 12px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    margin-right: 8px;
    white-space: nowrap;
}

.cta-button-buy-now {
    flex-grow: 1.2;
    background-color: #e91e63; /* Rosa/Pink forte (Exatamente como na imagem) */
    color: white;
    padding: 12px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}
.cta-button-buy-now span {
    display: block;
    font-size: 0.7rem;
    font-weight: normal;
}

/* Ajustes de Desktop (Para não parecer minúsculo em tela grande) */
@media (min-width: 601px) {
    .app-header-fixed, .app-tabs-nav, .buy-cta-fixed-footer {
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
    }
}

/* --- CSS NOVO PARA O TÍTULO LOGO ABAIXO DA BARRA DE PREÇO --- */
.product-info-title-block {
    padding: 15px;
    background-color: white;
}
.product-main-title-small {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 5px; /* Espaço entre a tag promo e o título */
}
.promo-tag-light {
    background-color: #fce4ec; /* Cor de fundo Rosa Claro da tag "Promo do Mês" */
    color: #c2185b; /* Texto Rosa Escuro */
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    display: inline-block;
}

/* --- AJUSTES NO CSS JÁ EXISTENTE --- */

/* O Título grande do topo que estava no CSS anterior deve ser removido ou alterado. 
   Remover esta regra se ela existir (ou garantir que ela não afete o novo título pequeno): */
/*
.product-main-title { 
    font-size: 1.4rem;
    font-weight: 600;
    padding: 15px;
    line-height: 1.3;
}
*/

/* O bloco de Rating, Frete, Serviços (que começa abaixo do título na imagem corrigida) */
.product-rating-sales-info-container {
    background-color: white; /* Garante que o fundo seja branco para o conteúdo */
}

.product-rating-sales {
    /* Mantendo o estilo do rating, mas ajustando o padding se necessário */
    display: flex;
    align-items: center;
    padding: 15px 15px; /* Adicionado padding vertical */
    font-size: 0.9rem;
    color: #555;
    border-bottom: 8px solid #f0f0f0; /* Separador após o Rating/Vendas */
}

/* Garantindo que o espaçamento do bloco de frete e serviços seja correto */
.shipping-block {
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.models-options-block {
    padding: 15px;
    border-bottom: 1px solid #eee; /* Borda mais fina aqui */
}

.tiktok-services-block {
    padding: 15px;
    border-bottom: 8px solid #f0f0f0; /* Separador antes das Avaliações */
}

/* ======================================================= */
/* ESTILOS PARA SERVIÇOS DO TIKTOK SHOP E MODAL */
/* ======================================================= */

/* Estilo do cabeçalho de serviços (para parecer com a Imagem 2) */
.tiktok-services-block {
    background-color: #fcf6ef; /* Um tom de bege claro para o bloco inteiro */
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px; /* Adiciona um pouco de espaço abaixo */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Sutil sombra */
}

.tiktok-services-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px; /* Espaço entre o header e a lista de serviços */
    border-bottom: 1px solid #eee; /* Linha divisória */
    cursor: pointer; /* Indica que é clicável */
    font-weight: bold;
    color: #333;
}

.tiktok-services-header p {
    flex-grow: 1; /* Faz o texto ocupar o espaço central */
    margin-left: 10px; /* Espaço entre o ícone e o texto */
    font-size: 1.1em;
}

.tiktok-services-header .service-icon.verified-icon {
    color: #e6a700; /* Cor dourada para o ícone de verificado */
    font-size: 1.2em;
}

.tiktok-services-header .details-arrow {
    color: #999;
}

/* Estilo da lista de serviços no bloco principal (Imagem 2) */
.tiktok-services-block .service-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas */
    gap: 10px; /* Espaçamento entre os itens */
    padding-top: 10px;
}

.tiktok-services-block .service-item {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: #555;
}

.tiktok-services-block .service-item .fa-check {
    color: #28a745; /* Cor verde para o checkmark */
    margin-right: 5px;
}

/* ======================================================= */
/* ESTILOS DO MODAL (POPUP - Imagem 3) */
/* ======================================================= */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Ocupa a altura total */
    background-color: rgba(0, 0, 0, 0.6); 
    display: flex;
    justify-content: center;
    /* NOVO: Alinha o modal no espaço restante, acima do footer */
    align-items: flex-end; 
    z-index: 1000; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    
    /* NOVO: Adiciona um padding/margem na parte inferior
       igual à altura do seu footer fixo para não cobri-lo. 
       Assumindo que seu footer tenha cerca de 80px de altura. */
    padding-bottom: 80px; 
    box-sizing: border-box; 
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: #fff;
    width: 100%;
    max-width: 500px; 
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(100%); 
    transition: transform 0.3s ease-in-out;
    
    /* NOVO: Define a altura para preencher o espaço acima do padding-bottom */
    height: auto; 
    max-height: 90vh; /* Mantém uma altura máxima razoável */
    display: flex;
    flex-direction: column; 
    
    /* NOVO: Adiciona a transição de slide */
    transition: transform 0.3s ease-in-out;
}

.modal-overlay.active .modal-content {
    transform: translateY(0); 
}

/* Remova a regra CSS que esconde o footer, caso você a tenha adicionado: */
/* body > .buy-cta-fixed-footer { display: none; } */


/* NOVO (Ajuste a altura do seu footer original se necessário) */
/* Se a altura do seu footer for diferente de 80px, ajuste o padding-bottom acima! */
.buy-cta-fixed-footer {
    height: 80px; /* Exemplo: defina a altura exata do seu footer */
    /* ... Mantenha o seu posicionamento 'position: fixed;' original ... */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.modal-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.close-modal-btn {
    font-size: 1.5em;
    color: #999;
    cursor: pointer;
}

.modal-body {
    padding: 15px 20px;
}

.service-detail-item {
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    color: #fff; /* Texto branco para contrastar com os fundos coloridos */
}

.service-detail-item:last-child {
    margin-bottom: 0;
}

.service-detail-item .service-detail-title {
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.service-detail-item .service-detail-title .fa-check {
    color: #fff; /* Checkmark branco */
    margin-right: 8px;
}

.service-detail-item .service-detail-description {
    font-size: 0.9em;
    line-height: 1.4;
    margin-left: 25px; /* Alinha a descrição com o texto do título */
}

/* Cores de fundo para os itens do modal */
.green-bg { background-color: #e6f6ee; color: #28a745; } /* Fundo verde claro, texto verde escuro */
.green-bg .fa-check { color: #28a745; }
.green-bg .service-detail-description { color: #4CAF50; }

.blue-bg { background-color: #e0f2f7; color: #17a2b8; } /* Fundo azul claro, texto azul escuro */
.blue-bg .fa-check { color: #17a2b8; }
.blue-bg .service-detail-description { color: #2196F3; }

.orange-bg { background-color: #fff2e0; color: #ffc107; } /* Fundo laranja claro, texto laranja escuro */
.orange-bg .fa-check { color: #ffc107; }
.orange-bg .service-detail-description { color: #FF9800; }

.purple-bg { background-color: #f3e5f5; color: #9c27b0; } /* Fundo roxo claro, texto roxo escuro */
.purple-bg .fa-check { color: #9c27b0; }
.purple-bg .service-detail-description { color: #9C27B0; }

/* ======================================================= */
/* ESTILOS PARA SEÇÃO DE FRETE (ESTÁTICO) */
/* ======================================================= */

.shipping-info-block {
    display: flex;
    align-items: center;
    /* Alinhamento à esquerda, já que não tem seta à direita */
    justify-content: flex-start; 
    padding: 10px 15px; 
    margin-bottom: 15px;
    border: none; /* Geralmente é sem borda para blocos informativos */
    cursor: default; /* Remove o cursor de 'clicável' */
}

.shipping-info-block .shipping-icon {
    /* O ícone na imagem é verde */
    font-size: 1.8em;
    color: #4CAF50; 
    margin-right: 15px;
}

.shipping-info-block .shipping-details {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

.shipping-info-block .shipping-main-line {
    font-size: 1em;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
    display: flex;
    align-items: center;
}

.shipping-info-block .free-shipping-tag {
    /* Estilo da etiqueta verde de 'Frete grátis' */
    background-color: #e8f5e9; 
    color: #4CAF50; 
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 4px;
    margin-right: 8px;
    white-space: nowrap; 
}

.shipping-info-block .shipping-tax {
    font-size: 0.9em;
    color: #777;
    margin-top: 2px;
}

/* IMPORTANTE: Desativar a seta caso ela ainda exista em alguma classe */
.shipping-info-block .details-arrow {
    display: none;
}

/* ======================================================= */
/* ESTILO DO BLOCO DE FRETE NA PÁGINA */
/* ======================================================= */

.shipping-info-block {
    display: flex;
    align-items: center;
    /* Ajustado para acomodar a seta à direita */
    justify-content: space-between; 
    padding: 10px 15px; 
    margin-bottom: 15px;
    border: 1px solid #eee; /* Borda para demarcar a área */
    cursor: pointer; /* Indica que é clicável */
}

.shipping-info-block .shipping-icon {
    font-size: 1.8em;
    color: #4CAF50; 
    margin-right: 15px;
}

.shipping-info-block .shipping-details {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

.shipping-info-block .free-shipping-tag {
    background-color: #e8f5e9; 
    color: #4CAF50; 
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 4px;
    margin-right: 8px;
    white-space: nowrap; 
}

.shipping-info-block .details-arrow {
    /* Seta clicável */
    color: #999;
    margin-left: 10px;
}

/* ======================================================= */
/* ESTILO DO MODAL (REAPROVEITANDO SUAS CLASSES) */
/* ======================================================= */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: flex-end; /* CRÍTICO: Faz o modal deslizar de baixo para cima */
    z-index: 1000;
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    padding-bottom: 80px; /* Espaço para o footer fixo */
    box-sizing: border-box; 
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    /* ... outras regras de estilo e bordas do modal ... */
    transform: translateY(100%); /* Escondido fora da tela */
    transition: transform 0.3s ease-in-out;
    /* ... outras regras ... */
}

.modal-overlay.active .modal-content {
    transform: translateY(0); /* Desliza para cima */
}

/* Estilo para itens internos do modal (detalhes do frete) */
.shipping-detail-item {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.shipping-detail-item .shipping-detail-title {
    font-weight: bold;
    font-size: 1.1em;
    color: #333;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.shipping-detail-item .shipping-detail-title i {
    color: #4CAF50;
    margin-right: 10px;
}

.shipping-detail-item .shipping-detail-description {
    font-size: 0.95em;
    color: #555;
    line-height: 1.4;
    padding-left: 28px;
}
.shipping-info-block .details-arrow {
    color: #999;
    margin-left: 10px;
    display: block !important; /* Força a seta a ser exibida, caso alguma regra a esconda */
}
/* Estilo do bloco da loja Kabum (Baseado em image_2560e2.png) */
.shop-info-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
}

.shop-logo {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 50%;
}

.shop-details {
    flex-grow: 1;
}

.shop-name {
    font-weight: bold;
    margin: 0;
}

.shop-products {
    font-size: 0.9em;
    color: #777;
    margin: 0;
}

.follow-button {
    /* Estilo inicial: Cinza Claro */
    background-color: #f0f0f0;
    color: #333;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.follow-button.followed {
    /* Estilo quando já está seguindo (Opcional: Mudar para verde ou outra cor) */
    background-color: #4CAF50;
    color: #fff;
}
/* ======================================================= */
/* ESTILOS DO TOAST DE SEGUIMENTO (image_256123.png) */
/* ======================================================= */
.follow-toast {
    position: fixed;
    top: -150px; /* Escondido fora da tela */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    padding: 15px 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 1500; /* Acima de tudo */
    opacity: 0;
    transition: top 0.4s ease-out, opacity 0.4s ease-out;
}

.follow-toast.show {
    top: 15px; /* Posição visível */
    opacity: 1;
}

.follow-toast .toast-title {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 5px;
    color: #333;
}

.follow-toast .toast-message {
    font-size: 0.9em;
    color: #555;
    line-height: 1.3;
}

/* ======================================================= */
/* ESTILOS PARA MENU EXPANSÍVEL (FOOTER) */
/* ======================================================= */

.expanded-footer-menu {
    border-top: 1px solid #eee;
    background-color: #fff;
    /* Remover padding do pai, pois você já tem no HTML inline (style="padding: 15px;") */
}

.footer-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    font-weight: 500;
    color: #333;
}

/* Estilo para a seta (Chevron) */
.footer-menu-item i {
    transition: transform 0.3s ease;
    color: #999;
}

/* Rotação da seta quando o menu está ativo/aberto */
.footer-menu-item.active i {
    transform: rotate(180deg);
}

/* Opcional: Se o conteúdo for um div vizinho, precisa ser estilizado */
.expanded-menu-content {
    /* NOTA: Seus itens de menu são todos irmãos no HTML. 
       Você precisará envolver o conteúdo em um div dentro do .footer-menu-item, 
       ou usar classes separadas para o conteúdo de cada item se quiser expandir. */
    /* Se a estrutura do seu HTML for:
       <div class="footer-menu-item">Título + Seta</div> 
       <div class="expanded-menu-content">Conteúdo</div>
       O JS acima precisa de ajuste. O código fornecido pressupõe que o conteúdo está 
       dentro do item, ou é o próximo irmão. Vou simplificar no CSS:
    */
    /* Se você tem um conteúdo visível, apenas estilize-o. Se for expansível: */
    
    /* Esta regra é para o caso de ter um div de conteúdo adjacente ou interno que você quer esconder/mostrar */
    max-height: 0; 
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

/* --- ESTILOS GERAIS PARA MODAIS (JÁ DEVEM EXISTIR, MAS GARANTINDO) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none; /* Inicia oculto */
    z-index: 1000;
}

.modal-overlay.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    width: 90%;
    max-width: 400px;
    border-radius: 10px;
    position: relative;
    padding-bottom: 0; /* Ajustado para bottom-sheet */
}

/* --- ESTILO DE BOTTOM SHEET (Para modais de Loja e Chat) --- */
.modal-bottom-sheet .modal-content {
    position: absolute;
    bottom: 0; /* Fica fixo na parte inferior */
    width: 100%; 
    max-width: 100%; /* Ocupa a largura total */
    border-radius: 10px 10px 0 0;
    animation: slideUp 0.3s ease-out; /* Efeito de subida */
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* --- ESTILOS ESPECÍFICOS DO MODAL LOJA --- */
.store-details-body {
    padding: 15px 20px;
}

.shop-info-line {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.shop-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.shop-rating-info {
    color: #666;
    font-size: 0.85em;
}

.detail-item-store {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    color: #333;
    font-size: 0.95em;
}

.detail-item-store i {
    color: #ff9900; /* Cor de destaque (Laranja/Amarelo) */
    margin-right: 10px;
}

.store-about-section {
    margin-top: 20px;
}

/* --- ESTILOS ESPECÍFICOS DO MODAL CHAT --- */
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

.chat-info {
    display: flex;
    align-items: center;
}

.chat-avatar {
    width: 35px;
    height: 35px;
}

.online-status {
    color: #4CAF50; /* Verde de "Online agora" */
    font-size: 0.75em;
    margin-top: -3px;
}

.chat-body {
    padding: 15px 15px 0 15px;
    max-height: 70vh; /* Limita a altura do chat */
    overflow-y: auto;
}

.chat-message {
    display: flex;
    margin-bottom: 15px;
}

.bot-message p {
    background-color: #f1f1f1;
    border-radius: 15px;
    padding: 10px 15px;
    max-width: 80%;
}

/* Estilo para a mensagem do usuário (simulada) */
.user-message {
    justify-content: flex-end;
}

.user-message p {
    background-color: #000;
    color: white;
    border-radius: 15px;
    padding: 10px 15px;
    max-width: 80%;
}

.bot-message .chat-avatar {
    margin-right: 10px;
    align-self: flex-start;
}

.quick-questions-section {
    margin-top: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.quick-questions-section h4 {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
    font-weight: normal;
}

.quick-question-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 0.95em;
    color: #333;
    transition: background-color 0.2s;
}

.quick-question-btn:hover {
    background-color: #f9f9f9;
}

/* Oculta a área de perguntas quando a conversa começa */
.quick-questions-section.hidden {
    display: none;
}

/* --- Dependência Básica --- */
/* Para impedir a rolagem do body quando um modal estiver ativo */
body.no-scroll {
    overflow: hidden;
    height: 100vh;
}

/* ===================================== */
/* ESTILOS DE MODAL GERAL E BOTTOM SHEET */
/* ===================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    visibility: visible;
    opacity: 1;
}

/* Base do Conteúdo do Modal */
.modal-content {
    background: white;
    width: 90%;
    max-width: 400px; /* Limite para modais centrais */
    border-radius: 10px;
    position: relative;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease-out;
}

/* Estilo do modal que sobe de baixo (Bottom Sheet) */
.modal-content.modal-bottom-sheet {
    width: 100%;
    max-width: 100%; /* Ocupa a largura total da tela */
    border-radius: 15px 15px 0 0; 
    transform: translateY(100%); /* Começa fora da tela */
    transition: transform 0.3s ease-out;
}

.modal-overlay.active .modal-content.modal-bottom-sheet {
    transform: translateY(0); /* Sobe para a posição final */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.modal-title {
    font-size: 1.1em;
    font-weight: bold;
}

.close-modal-btn {
    cursor: pointer;
    font-size: 1.2em;
    color: #777;
    padding: 5px; 
}

.modal-body {
    padding: 15px;
}

/* --- ESTILOS ESPECÍFICOS DO MODAL LOJA --- */
.store-details-body {
    padding: 15px 20px 20px; 
}

.shop-info-line {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.shop-logo {
    width: 45px; 
    height: 45px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
}

.shop-name {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 3px;
}

.shop-rating-info {
    color: #666;
    font-size: 0.85em;
    display: flex;
    align-items: center;
}
.shop-rating-info i {
    color: #ffc107;
    margin-left: 5px;
    font-size: 0.9em;
}

.detail-item-store {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    color: #333;
    font-size: 0.95em;
    display: flex;
    align-items: center;
}

.detail-item-store:last-of-type {
    border-bottom: none;
}

.detail-item-store i {
    color: #ff9900;
    margin-right: 12px;
    font-size: 1.1em;
}

.store-about-section {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.store-about-section h4 {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 10px;
}

.store-about-section p {
    font-size: 0.9em;
    color: #666;
    line-height: 1.5;
}


/* --- ESTILOS ESPECÍFICOS DO MODAL CHAT --- */
.chat-header {
    background-color: white;
    border-bottom: 1px solid #eee;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-info {
    display: flex;
    align-items: center;
}

.chat-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.chat-info .modal-title {
    font-size: 1.05em;
    margin-bottom: 2px;
}

.online-status {
    color: #4CAF50;
    font-size: 0.75em;
    margin-top: -3px;
    display: flex;
    align-items: center;
}
.online-status::before {
    content: '•';
    color: #4CAF50;
    font-size: 1.5em;
    line-height: 0;
    margin-right: 4px;
}

.chat-body {
    padding: 15px 15px 0 15px;
    height: calc(100vh - 180px); /* Altura adaptável */
    max-height: 500px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background-color: #f9f9f9;
}

.chat-message {
    display: flex;
    margin-bottom: 15px;
    max-width: 100%;
}

.bot-message p {
    background-color: #e0e0e0;
    border-radius: 15px 15px 15px 5px;
    padding: 10px 15px;
    max-width: 75%;
    font-size: 0.9em;
    line-height: 1.4;
    color: #333;
}

.user-message {
    justify-content: flex-end;
}

.user-message p {
    background-color: #000;
    color: white;
    border-radius: 15px 15px 5px 15px;
    padding: 10px 15px;
    max-width: 75%;
    font-size: 0.9em;
    line-height: 1.4;
}

.bot-message .chat-avatar {
    margin-right: 10px;
    align-self: flex-start;
    flex-shrink: 0;
}

.quick-questions-section {
    margin-top: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    background-color: white;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
    transition: all 0.3s ease-in-out;
}

.quick-questions-section.hidden {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border-bottom: none;
}

.quick-questions-section h4 {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
    font-weight: normal;
}

.quick-question-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: #f0f0f0;
    border: none;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 0.95em;
    color: #333;
    transition: background-color 0.2s;
}

.quick-question-btn:hover {
    background-color: #e5e5e5;
}

.chat-conversation {
    padding-top: 10px;
    flex-grow: 1;
}

/* ===================================== */
/* ESTILOS ACORDION DO FOOTER */
/* ===================================== */

/* Estilos já existentes do .expanded-footer-menu e .footer-menu-item */

.accordion-content {
    /* Define o estado inicial: Altura zero e esconde o excesso */
    max-height: 0; 
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease;
    padding: 0 15px; /* Padding horizontal mantido */
}

.footer-menu-item.active + .accordion-content {
    /* Estado ativo: Altura suficiente para mostrar o conteúdo */
    /* Valor alto para garantir que se expanda para qualquer conteúdo */
    max-height: 500px; 
    padding-bottom: 15px; /* Adiciona padding vertical quando aberto */
}

.accordion-text {
    font-size: 0.9em;
    color: #666;
    line-height: 1.5;
    margin-top: 10px;
    margin-bottom: 0;
};