/**
 * Ideal Centro Automotivo - Custom Styles
 *
 * @package Ideal_Centro_Automotivo
 * @version 2.0
 */

/* ==========================================
   Scrollbar Styling
   ========================================== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #e63946;
}

/* ==========================================
   Selection
   ========================================== */
::selection {
    background: rgba(230, 57, 70, 0.3);
    color: #fff;
}

/* ==========================================
   Smooth Scroll
   ========================================== */
html {
    scroll-behavior: smooth;
}

/* ==========================================
   Swiper Custom Pagination
   ========================================== */
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #334155;
    opacity: 1;
    border-radius: 9999px;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    background: #e63946;
    width: 30px;
}

/* ==========================================
   Google Maps iframe
   ========================================== */
.rounded-2xl iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 500px;
    border: 0;
    border-radius: 16px;
}

/* ==========================================
   WordPress Pagination
   ========================================== */
.navigation .nav-links {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.navigation .nav-links a,
.navigation .nav-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.navigation .nav-links a {
    background: #1e293b;
    color: #94a3b8;
    border: 1px solid #334155;
}

.navigation .nav-links a:hover {
    background: #e63946;
    color: #fff;
    border-color: #e63946;
}

.navigation .nav-links .current {
    background: #e63946;
    color: #fff;
    border: 1px solid #e63946;
}

/* ==========================================
   Animations
   ========================================== */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.4); }
    50% { box-shadow: 0 0 20px 10px rgba(230, 57, 70, 0); }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* ==========================================
   Gallery Masonry Fix
   ========================================== */
@media (min-width: 768px) {
    .grid-cols-2.md\:grid-cols-3 > div:nth-child(1),
    .grid-cols-2.md\:grid-cols-3 > div:nth-child(4) {
        grid-row: span 2;
    }

    .grid-cols-2.md\:grid-cols-3 > div:nth-child(1) img,
    .grid-cols-2.md\:grid-cols-3 > div:nth-child(4) img {
        height: 100%;
    }
}

/* ==========================================
   WhatsApp Button Glow
   ========================================== */
a[aria-label="WhatsApp"] {
    animation: pulse-glow 2s ease-in-out infinite;
}

a[aria-label="WhatsApp"]:hover {
    animation: none;
}

/* ==========================================
   Loading State
   ========================================== */
body {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* ==========================================
   Focus States (Acessibilidade)
   ========================================== */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #e63946;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================
   Fix admin bar offset
   ========================================== */
body.admin-bar #main-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar #main-header {
        top: 46px;
    }
}