/**
 * Tivimate Premium - Custom CSS
 * Additional styles and overrides
 * 
 * @package Tivimate_Premium
 */

/* ========================================
   CUSTOM ANIMATIONS
   ======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.5s ease forwards;
}

/* ========================================
   CUSTOM SCROLLBAR
   ======================================== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* ========================================
   SELECTION HIGHLIGHT
   ======================================== */
::selection {
    background: var(--accent);
    color: white;
}

::-moz-selection {
    background: var(--accent);
    color: white;
}

/* ========================================
   FOCUS STYLES
   ======================================== */
*:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

/* ========================================
   IMAGE LAZY LOADING PLACEHOLDER
   ======================================== */
img[loading="lazy"] {
    background: var(--bg-tertiary);
}

/* ========================================
   ADDITIONAL HELPERS
   ======================================== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.no-scroll {
    overflow: hidden;
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .site-header,
    .site-footer,
    .whatsapp-float,
    .scroll-to-top,
    .mobile-nav-panel,
    .mobile-nav-overlay {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    a {
        text-decoration: underline;
    }
}