@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

.overlay-text p,
.overlay-text-desktop p,
.overlay-text-mobile p,
.overlay-text div,
.overlay-text-desktop div,
.overlay-text-mobile div {
    color: #fff !important;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #222 !important; /* Texto mais escuro */
}
        
p, div, span {
    color: #222;
}

h1, h2, h3, h4, h5, h6 {
    color: #222;
}

span.fw-bold {
    color: #222;
}       

h1:focus {
    outline: none;
}

/* ====================================================
   WATERMARK "USED" - ESTILOS GLOBAIS PARA TODO O SITE
   ==================================================== */

/* Estilo global para todas as watermarks "USED" */
.watermark,
.product-detail-watermark {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 10 !important;
    max-width: 80px !important;
    max-height: 40px !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none !important; /* Evita interferir com cliques na imagem */
    display: block !important;
}

/* Garantir que todos os containers de imagem sejam posicionados relativamente */
.image-container,
.carousel-watermark-container,
.product-detail-carousel-container .carousel-watermark-container {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* ====================================================
   CAROUSELS MOBILE - LARGURA CONSISTENTE ENTRE TÍTULO E DESCRIÇÃO
   ==================================================== */

/* Estilos específicos para mobile - garantir que watermark fique sobre a imagem */
@media (max-width: 767.98px) {
    .watermark,
    .product-detail-watermark {
        top: 0 !important;
        left: 0 !important;
        max-width: 60px !important;
        max-height: 30px !important;
        z-index: 15 !important; /* Aumentar z-index para mobile */
        position: absolute !important;
    }
    
    /* Garantir que todos os containers de imagem no mobile mantenham o posicionamento relativo */
    .image-container,
    .carousel-watermark-container,
    .product-detail-carousel-container .carousel-watermark-container,
    .product-slider-mobile-card .image-container,
    .card .image-container {
        position: relative !important;
        overflow: hidden !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 0 !important;
    }
    
    /* Garantir que as imagens mobile tenham display block e posição relativa */
    .product-slider-mobile-img,
    .card-img-top.img-fluid,
    .card-img-top {
        position: relative !important;
        display: block !important;
        z-index: 1 !important;
        border-radius: 0 !important;
    }
    
    /* Garantir que os links das imagens não interfiram com o posicionamento */
    .image-container a,
    .product-slider-mobile-card .image-container a,
    .card .image-container a {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 0 !important;
    }
    
    /* Forçar todos os cards mobile a usar layout correto */
    .product-slider-mobile-card,
    .card.product-slider-mobile-card {
        border-radius: 0 !important;
        overflow: visible !important;
    }
    
    /* Garantir que spans indesejadas (como used-badge-mobile) sejam escondidas */
    .used-badge-mobile {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* ====================================================
       LARGURA CONSISTENTE - TÍTULO E DESCRIÇÃO MOBILE
       ==================================================== */
    
    /* Garantir que título e descrição tenham exatamente a mesma largura no mobile */
    .product-slider-mobile-title,
    .product-slider-mobile-desc {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }
    
    /* Garantir que qualquer conteúdo aninhado dentro do título e descrição respeite a mesma largura */
    .product-slider-mobile-title *,
    .product-slider-mobile-desc * {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-indent: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Especificações adicionais para diferentes tipos de carousel */
    .card-text.product-slider-mobile-desc,
    p.product-slider-mobile-desc,
    .card-header.product-slider-mobile-title,
    p.product-slider-mobile-title {
        padding: 0 0.5rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ====================================================
   ESTILOS DE LINKS CONTEXTUAIS - NÃO MAIS TODOS AZUIS
   ==================================================== */

/* Links padrão - cor mais neutra */
a {
    color: #495057 !important;
    text-decoration: none;
}

a:hover {
    color: #ff6700 !important;
    text-decoration: underline;
}

/* Links específicos do navbar - mantém azul apenas no menu de navegação */
.navbar-nav .nav-link {
    color: #0d6efd !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: #0a58ca !important;
    text-decoration: underline !important;
}

/* Botões link - mantém azul apenas quando especificamente necessário */
.btn-link {
    color: #0d6efd !important;
}

.btn-link:hover,
.btn-link:focus {
    color: #0a58ca !important;
    text-decoration: underline !important;
}

/* Links em breadcrumbs e contextos específicos onde azul faz sentido */
.breadcrumb a,
.pagination a {
    color: #0d6efd !important;
}

.breadcrumb a:hover,
.pagination a:hover {
    color: #0a58ca !important;
}

/* ====================================================
   CORES E FUNDOS - RESTAURAÇÃO DOS ESTILOS ORIGINAIS
   ==================================================== */

/* Classe essencial para o fundo laranja do footer */
.bg-orange {
    background-color: #ff6700 !important;
}

/* Cores de texto laranja */
.text-orange {
    color: #ff6700 !important;
}

/* Link laranja personalizado */
.link-orange {
    color: #ff6700 !important;
    text-decoration: none;
}

.link-orange:hover {
    color: #e05a00 !important;
    text-decoration: underline;
}

/* Botão primário usado (laranja) */
.btn-primary-used {
    background-color: #ff6700 !important;
    border-color: #ff6700 !important;
    color: white !important;
}

.btn-primary-used:hover {
    background-color: #e05a00 !important;
    border-color: #e05a00 !important;
    color: white !important;
}

/* Text Color Override para .text-primary (usado no Index e outras páginas) */
.text-primary {
    color: #ff6700 !important;
}

/* ====================================================
   BOTÕES "MORE" OTIMIZADOS - INTERFACE MODERNA E RÁPIDA
   ==================================================== */

/* Estilo base para botões "More" - Design Simplificado e Eficiente */
.btn-outline-secondary,
.btn.btn-outline-secondary,
.btn.btn-sm.btn-outline-secondary,
a.btn.btn-outline-secondary,
a.btn.btn-sm.btn-outline-secondary,
button.btn.btn-outline-secondary,
button.btn.btn-sm.btn-outline-secondary {
    /* Estados Base - Simplificado */
    color: #495057 !important;
    border: 2px solid #6c757d !important;
    background-color: #ffffff !important;
    
    /* Typography & Spacing */
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    min-width: 70px !important;
    
    /* Visual Enhancement - Simplificado */
    border-radius: 0.375rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    
    /* Smooth Transitions - Otimizado */
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
}

/* Estado Hover - Fundo Branco e Texto Azul (Como Solicitado) */
.btn-outline-secondary:hover,
.btn.btn-outline-secondary:hover,
.btn.btn-sm.btn-outline-secondary:hover,
a.btn.btn-outline-secondary:hover,
a.btn.btn-sm.btn-outline-secondary:hover,
button.btn.btn-outline-secondary:hover,
button.btn.btn-sm.btn-outline-secondary:hover {
    /* Cores Solicitadas */
    color: #0d6efd !important;
    background-color: #ffffff !important;
    border-color: #0d6efd !important;
    
    /* Efeitos Visuais Moderados */
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

/* Estado Focus - Acessibilidade */
.btn-outline-secondary:focus,
.btn.btn-outline-secondary:focus,
.btn.btn-sm.btn-outline-secondary:focus,
a.btn.btn-outline-secondary:focus,
a.btn.btn-sm.btn-outline-secondary:focus,
button.btn.btn-outline-secondary:focus,
button.btn.btn-sm.btn-outline-secondary:focus {
    color: #0a58ca !important;
    background-color: #ffffff !important;
    border-color: #0a58ca !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
    text-decoration: none !important;
}

/* Estado Active - Feedback Tátil */
.btn-outline-secondary:active,
.btn.btn-outline-secondary:active,
.btn.btn-sm.btn-outline-secondary:active,
a.btn.btn-outline-secondary:active,
a.btn.btn-sm.btn-outline-secondary:active,
button.btn.btn-outline-secondary:active,
button.btn.btn-sm.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn.btn-outline-secondary.active,
.btn.btn-sm.btn-outline-secondary.active {
    color: #ffffff !important;
    background-color: #0a58ca !important;
    border-color: #0a58ca !important;
    transform: translateY(0px) !important;
    box-shadow: 0 2px 4px rgba(10, 88, 202, 0.3) !important;
    text-decoration: none !important;
}

/* Estado Disabled */
.btn-outline-secondary:disabled,
.btn.btn-outline-secondary:disabled,
.btn.btn-sm.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled,
.btn.btn-outline-secondary.disabled,
.btn.btn-sm.btn-outline-secondary.disabled {
    color: #9ca3af !important;
    background-color: #f8f9fa !important;
    border-color: #d1d5db !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Específico para Cards de Produtos */
.card .btn-group .btn-outline-secondary,
.card .btn-group .btn.btn-outline-secondary,
.card .btn-group .btn.btn-sm.btn-outline-secondary {
    min-width: 70px !important;
    padding: 0.425rem 0.875rem !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    border-radius: 0.375rem !important;
}

/* Melhorias Específicas para Mobile - Otimizado */
@media (max-width: 768px) {
    .btn-outline-secondary,
    .btn.btn-outline-secondary,
    .btn.btn-sm.btn-outline-secondary {
        min-width: 80px !important;
        padding: 0.5rem 1.2rem !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        border-radius: 0.5rem !important;
    }
    
    .btn-outline-secondary:hover,
    .btn.btn-outline-secondary:hover,
    .btn.btn-sm.btn-outline-secondary:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(13, 110, 253, 0.3) !important;
    }
    
    .btn-outline-secondary:active,
    .btn.btn-outline-secondary:active,
    .btn.btn-sm.btn-outline-secondary:active {
        transform: translateY(0px) !important;
        transition: all 0.1s ease !important;
    }
}

/* Otimizações de Performance */
@media (prefers-reduced-motion: reduce) {
    .btn-outline-secondary,
    .btn.btn-outline-secondary,
    .btn.btn-sm.btn-outline-secondary,
    .btn-outline-secondary:hover,
    .btn.btn-outline-secondary:hover,
    .btn.btn-sm.btn-outline-secondary:hover,
    .btn-outline-secondary:active,
    .btn.btn-outline-secondary:active,
    .btn.btn-sm.btn-outline-secondary:active {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
}

/* Garantir que não haja conflitos com navegação */
.btn-outline-secondary[href],
a.btn-outline-secondary,
.btn-outline-secondary[onclick] {
    cursor: pointer !important;
    text-decoration: none !important;
}

.btn-outline-secondary[href]:hover,
a.btn-outline-secondary:hover,
.btn-outline-secondary[onclick]:hover {
    text-decoration: none !important;
}