/* ==========================================================================
   GABENAUDIO - HIVATALOS PI CAR AUDIO PARTNER STÍLUSLAP (assets/css/style.css)
   ========================================================================== */

body {
    background-color: #070a0f;
    color: #f1f5f9;
    overflow-x: hidden;
    background-image: radial-gradient(circle at 50% 15%, rgba(255, 102, 0, 0.05) 0%, transparent 65%);
}

.active-nav {
    border-bottom: 2px solid #ff6600;
    color: #ff6600 !important;
    background-color: #151c2a !important;
    border-color: #ff6600 !important;
}

/* FELSŐ MOZGÓ SZALAGCÍM */
@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
.marquee-track {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 26s linear infinite;
}
.marquee-container:hover .marquee-track {
    animation-play-state: paused;
}

/* GABEN ÁLTAL AJÁNLOTT TERMÉKEK FUTÓ SÁVJA */
@keyframes product-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.product-slider-track {
    display: flex;
    width: max-content;
    animation: product-scroll 34s linear infinite;
}
.product-slider-track:hover {
    animation-play-state: paused;
}

.card-hover:hover {
    border-color: #ff6600;
    box-shadow: 0 4px 20px rgba(255, 102, 0, 0.25);
}

/* FIX OLDALSÓ LOGÓK - SZIGORÚAN A TARTALOM MÖGÖTT */
#side-left, #side-right {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* KATEGÓRIA TÉGLALAP GOMBOK HOVER EFFEKTJE */
.cat-pill {
    background-color: #0c111a;
    border: 1px solid #1c2638;
    color: #94a3b8;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.cat-pill:hover {
    background-color: #172133 !important;
    border-color: #ff6600 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.25);
    transform: translateY(-1px);
}
.cat-pill.active-cat {
    background-color: #ff6600 !important;
    border-color: #ff6600 !important;
    color: #000000 !important;
    font-weight: 900;
    box-shadow: 0 4px 18px rgba(255, 102, 0, 0.4);
}

/* FADE IN & FADE OUT NÉZETVÁLTÁS ÉS MODÁLOK */
.page-view {
    transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.page-fade-out {
    opacity: 0 !important;
    transform: translateY(6px) scale(0.995);
}
.page-fade-in {
    opacity: 1 !important;
    transform: translateY(0) scale(1);
}

.modal-backdrop {
    transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.26s;
    will-change: opacity;
}
.modal-box {
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}
.modal-backdrop.modal-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.modal-backdrop.modal-hidden .modal-box {
    transform: scale(0.95) translateY(12px);
    opacity: 0;
}
.modal-backdrop.modal-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.modal-backdrop.modal-visible .modal-box {
    transform: scale(1) translateY(0);
    opacity: 1;
}