/*
Theme Name: Reclame Aqui
Theme URI: https://www.reclameaqui.com.br
Description: Theme WordPress được tạo từ Reclame Aqui website
Author: Reclame Aqui
Version: 1.2.3
Text Domain: reclameaqui
*/

/* ============================================
   PERFORMANCE OPTIMIZATIONS - SCROLL PERFORMANCE
   ============================================ */

/* Disable smooth scroll for better performance */
html {
    scroll-behavior: auto !important; /* Changed from smooth to auto */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Optimize scroll performance */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Optimize rendering performance */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* GPU acceleration for sections - Optimized */
.banner-home,
.consumer-shortcut,
.melhores-empresas,
.blog-section-v2,
.home-rankings,
.melhores-descontos {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    isolation: isolate;
    contain: layout style paint;
}

/* Optimize images */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    max-width: 100%;
    height: auto;
    transform: translateZ(0);
}

/* Lazy loading placeholder */
img[loading="lazy"],
img[data-src] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded,
img[data-src].loaded {
    opacity: 1;
}

/* Reduce repaints on scroll - Enhanced */
.site-main {
    contain: layout style paint;
    isolation: isolate;
    transform: translateZ(0);
    overscroll-behavior: contain;
}

/* Optimize body scroll - Enhanced */
body {
    overflow-x: hidden;
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
    contain: layout style;
    overscroll-behavior: contain;
    /* Force GPU acceleration for scroll */
    will-change: scroll-position;
}

/* Optimize all sections for smooth scrolling - Consolidated */
.site-main > section {
    contain: layout style paint;
    isolation: isolate;
    min-height: 1px;
    transform: translate3d(0, 0, 0);
    will-change: auto;
    backface-visibility: hidden;
}

/* Optimize font loading */
@font-face {
    font-display: swap;
}

/* Optimize animations - use transform instead of position/top/left */
.banner-home,
.consumer-shortcut,
.melhores-empresas,
.blog-section-v2,
.home-rankings {
    transform: translate3d(0, 0, 0);
    contain: layout style paint;
    isolation: isolate;
    backface-visibility: hidden;
}

/* Optimize hover effects */
a, button {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

a:hover, button:hover {
    transform: translateZ(0);
}

/* Optimize images loading */
img[loading="lazy"] {
    content-visibility: auto;
}

/* Optimize container queries */
.site-main {
    contain: layout style paint;
}

/* Header Logo Styles */
.ra-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.ra-logo img {
    max-width: 100%;
    height: auto;
    display: block;
    min-width: 180px; /* Mobile default */
    height: 50px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .ra-logo img {
        min-width: 200px;
        height: 60px;
    }
}

@media (min-width: 1024px) {
    .ra-logo img {
        min-width: 220px;
        height: 65px;
    }
}

/* Icon "Selo RA não verificada" - Smaller size - High specificity to override all rules */
.ra-not-verified-icon,
img.ra-not-verified-icon,
img[src*="not-rav.svg"],
img[src*="not-rav.svg"].ra-not-verified-icon {
    width: 12px !important;
    height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Override any SVG width rules for this specific icon - Higher specificity */
img.ra-not-verified-icon[src$=".svg"],
img[src*="not-rav.svg"][src$=".svg"] {
    width: 12px !important;
    max-width: 12px !important;
    min-width: 12px !important;
}

/* Override WordPress/theme SVG rules specifically for this icon */
img[src$=".svg"].ra-not-verified-icon,
.attachment img[src$=".svg"].ra-not-verified-icon,
.media-icon img[src$=".svg"].ra-not-verified-icon {
    width: 12px !important;
    max-width: 12px !important;
}

/* Styles sẽ được thêm vào từ HTML */