/* ==========================================================================
   MARIO KART MODE - Easter Egg (1 Aprile 2026)
   Attivato digitando "mariokart" sulla tastiera
   ========================================================================== */

/* Font Mario Kart */
@font-face {
    font-family: 'MarioKart';
    src: url('/frontend/fonts/SuperMario256.ttf') format('truetype');
    font-display: swap;
}

/* ==========================================================================
   STAR POWER-UP OVERLAY
   ========================================================================== */

.mk-star-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(ellipse at center, rgba(255, 200, 0, 0.15), transparent 70%);
}

.mk-star-overlay .mk-star-logo {
    font-size: 120px;
    line-height: 1;
    color: #ffdd00;
    animation: mk-logo-entrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    filter: drop-shadow(0 0 50px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 100px rgba(255, 100, 0, 0.5));
    z-index: 2;
}

.mk-star-overlay .mk-star-rings {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 3px solid rgba(255, 215, 0, 0.4);
    animation: mk-ring-expand 1.5s ease-out forwards;
    opacity: 0;
}

.mk-star-overlay .mk-star-rings:nth-child(2) { animation-delay: 0.15s; }
.mk-star-overlay .mk-star-rings:nth-child(3) { animation-delay: 0.3s; border-color: rgba(255, 0, 255, 0.3); }
.mk-star-overlay .mk-star-rings:nth-child(4) { animation-delay: 0.45s; border-color: rgba(0, 200, 255, 0.3); }

.mk-star-overlay .mk-star-rays {
    position: absolute;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 0, 0, 0.2) 30deg,
        transparent 60deg,
        rgba(255, 165, 0, 0.2) 90deg,
        transparent 120deg,
        rgba(255, 255, 0, 0.2) 150deg,
        transparent 180deg,
        rgba(0, 255, 0, 0.2) 210deg,
        transparent 240deg,
        rgba(0, 200, 255, 0.2) 270deg,
        transparent 300deg,
        rgba(180, 0, 255, 0.2) 330deg,
        transparent 360deg
    );
    animation: mk-rays-spin 2s linear infinite;
    z-index: 0;
}

.mk-star-overlay .mk-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: mk-flash-cycle 0.12s ease-in-out 12;
    z-index: 1;
}

.mk-star-overlay .mk-star-text {
    position: absolute;
    bottom: 30%;
    font-family: 'MarioKart', 'Outfit', sans-serif;
    font-size: 2.5rem;
    color: #ffdd00;
    text-shadow: 3px 3px 0 #cc0000, 0 0 30px rgba(255, 221, 0, 0.8);
    opacity: 0;
    animation: mk-text-appear 0.6s ease-out 0.8s forwards;
    letter-spacing: 4px;
    z-index: 2;
}

@keyframes mk-logo-entrance {
    0% { transform: scale(0) rotate(-360deg); opacity: 0; }
    50% { transform: scale(1.4) rotate(15deg); opacity: 1; }
    70% { transform: scale(0.9) rotate(-5deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes mk-ring-expand {
    0% { transform: scale(0.2); opacity: 0.8; }
    100% { transform: scale(3); opacity: 0; }
}

@keyframes mk-text-appear {
    0% { opacity: 0; transform: translateY(20px) scale(0.8); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mk-rays-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes mk-flash-cycle {
    0% { background: rgba(255, 0, 0, 0.12); }
    16% { background: rgba(255, 165, 0, 0.12); }
    33% { background: rgba(255, 255, 0, 0.12); }
    50% { background: rgba(0, 255, 0, 0.12); }
    66% { background: rgba(0, 200, 255, 0.12); }
    83% { background: rgba(180, 0, 255, 0.12); }
    100% { background: rgba(255, 0, 255, 0.12); }
}

@keyframes mk-overlay-fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ==========================================================================
   RAINBOW ROAD BACKGROUND
   ========================================================================== */

.mariokart-mode {
    background: linear-gradient(135deg, #0a0015 0%, #1a0030 25%, #0d0040 50%, #0a0025 75%, #150020 100%) !important;
    color: #ffffff !important;
    transition: background 0.8s ease, color 0.5s ease;
}

/* Animated stars background */
.mariokart-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 10% 20%, #fff 50%, transparent 100%),
        radial-gradient(2px 2px at 30% 60%, #fff 50%, transparent 100%),
        radial-gradient(1px 1px at 50% 10%, #fff 50%, transparent 100%),
        radial-gradient(2px 2px at 70% 80%, #fff 50%, transparent 100%),
        radial-gradient(1px 1px at 90% 40%, #fff 50%, transparent 100%),
        radial-gradient(2px 2px at 15% 90%, #fff 50%, transparent 100%),
        radial-gradient(1px 1px at 45% 45%, #fff 50%, transparent 100%),
        radial-gradient(2px 2px at 80% 15%, #fff 50%, transparent 100%),
        radial-gradient(1px 1px at 60% 70%, #fff 50%, transparent 100%),
        radial-gradient(2px 2px at 25% 35%, #fff 50%, transparent 100%),
        radial-gradient(1px 1px at 85% 55%, #fff 50%, transparent 100%),
        radial-gradient(2px 2px at 5% 75%, #fff 50%, transparent 100%);
    animation: mk-stars-twinkle 4s ease-in-out infinite alternate;
}

@keyframes mk-stars-twinkle {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* ==========================================================================
   RAINBOW ROAD STRIPE (bottom edge animated)
   ========================================================================== */

.mariokart-mode::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 4px;
    z-index: 9998;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        #ff0000 0px, #ff0000 40px,
        #ff8800 40px, #ff8800 80px,
        #ffff00 80px, #ffff00 120px,
        #00ff00 120px, #00ff00 160px,
        #00ccff 160px, #00ccff 200px,
        #8800ff 200px, #8800ff 240px,
        #ff00ff 240px, #ff00ff 280px
    );
    animation: mk-rainbow-slide 3s linear infinite;
}

@keyframes mk-rainbow-slide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.mariokart-mode .site-header {
    background: rgba(10, 0, 30, 0.95) !important;
    backdrop-filter: blur(20px);
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ccff, #8800ff, #ff00ff) 1;
}

.mariokart-mode .header-logo img {
    content: url('//cdn.noleggiamoauto.it/images/mkna.png');
}

.mariokart-mode .nav-link {
    color: #ffffff !important;
    font-family: 'MarioKart', 'Outfit', sans-serif;
    letter-spacing: 1px;
}

.mariokart-mode .nav-link:hover {
    color: #ffdd00 !important;
    text-shadow: 0 0 10px rgba(255, 221, 0, 0.5);
}

.mariokart-mode .btn-header-login {
    background: linear-gradient(135deg, #ff0000, #ff4400) !important;
    color: #fff !important;
    border: none !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* ==========================================================================
   CONTAINER & CONTENT
   ========================================================================== */

.mariokart-mode .container,
.mariokart-mode .main-content {
    position: relative;
    z-index: 1;
}

.mariokart-mode h1,
.mariokart-mode h2,
.mariokart-mode h3 {
    font-family: 'MarioKart', 'Outfit', sans-serif !important;
    color: #ffffff !important;
}

.mariokart-mode h2 {
    text-shadow: 0 0 20px rgba(255, 221, 0, 0.6), 0 0 40px rgba(255, 100, 0, 0.3);
    color: #ffdd00 !important;
}

.mariokart-mode p,
.mariokart-mode span,
.mariokart-mode div {
    color: #e0d0ff;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.mariokart-mode .hero-section {
    background: linear-gradient(180deg, rgba(20, 0, 50, 0.95) 0%, rgba(10, 0, 25, 1) 100%) !important;
}

.mariokart-mode .parco-auto-hero {
    background: linear-gradient(135deg, rgba(20, 0, 50, 0.95), rgba(10, 0, 40, 1)) !important;
}

.mariokart-mode .parco-auto-hero h1,
.mariokart-mode .hero-section h1 {
    font-family: 'MarioKart', 'Outfit', sans-serif !important;
    color: #ffdd00 !important;
    text-shadow:
        0 0 20px rgba(255, 221, 0, 0.8),
        0 0 40px rgba(255, 100, 0, 0.5),
        3px 3px 0 #cc0000;
    letter-spacing: 2px;
}

/* Hero form card - dark theme */
.mariokart-mode .hero-form-card {
    background: rgba(15, 5, 30, 0.92) !important;
    border: 1px solid rgba(255, 0, 255, 0.3) !important;
    box-shadow: 0 0 30px rgba(130, 0, 255, 0.2), inset 0 0 30px rgba(80, 0, 150, 0.1) !important;
}

.mariokart-mode .hero-title {
    color: #ffdd00 !important;
    font-family: 'MarioKart', 'Outfit', sans-serif !important;
    text-shadow: 2px 2px 0 #cc0000;
}

.mariokart-mode .hero-subtitle {
    color: #b8a0e0 !important;
}

/* Hero form inputs */
.mariokart-mode .hero-search-group input,
.mariokart-mode .hero-select-group select {
    background: rgba(30, 0, 60, 0.7) !important;
    border-color: rgba(180, 0, 255, 0.3) !important;
    color: #ffffff !important;
}

.mariokart-mode .hero-search-group input::placeholder {
    color: #8870b0 !important;
}

.mariokart-mode .hero-search-group input:focus,
.mariokart-mode .hero-select-group select:focus {
    border-color: #ff00ff !important;
    box-shadow: 0 0 0 3px rgba(255, 0, 255, 0.15) !important;
}

.mariokart-mode .hero-search-group i,
.mariokart-mode .hero-select-icon {
    color: #b8a0e0 !important;
}

.mariokart-mode .hero-budget-group label {
    color: #b8a0e0 !important;
}

.mariokart-mode .hero-budget-values span {
    color: #00ff88 !important;
}

.mariokart-mode .hero-slider-track {
    background: rgba(100, 0, 200, 0.3) !important;
}

/* Hero client toggle */
.mariokart-mode .hero-client-btn {
    background: rgba(30, 0, 60, 0.6) !important;
    color: #b8a0e0 !important;
    border-color: rgba(180, 0, 255, 0.3) !important;
}

.mariokart-mode .hero-client-btn.active {
    background: linear-gradient(135deg, #ff0000, #ff4400) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* Hero search button */
.mariokart-mode .hero-search-btn {
    background: linear-gradient(135deg, #8800ff, #ff00ff) !important;
    box-shadow: 0 0 20px rgba(136, 0, 255, 0.5) !important;
}

.mariokart-mode .hero-search-btn:hover {
    box-shadow: 0 0 35px rgba(136, 0, 255, 0.8) !important;
}

/* Hero car image - rotation animation */
.mariokart-mode .hero-car-img {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    filter: drop-shadow(0 0 30px rgba(255, 200, 0, 0.5));
}

.mariokart-mode .hero-car-img.mk-fade-out {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
}

.mariokart-mode .hero-car-img.mk-fade-in {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* Hero stats */
.mariokart-mode .hero-stats {
    background: rgba(15, 5, 30, 0.9) !important;
    border: 1px solid rgba(255, 0, 255, 0.3) !important;
    box-shadow: 0 0 20px rgba(130, 0, 255, 0.2) !important;
}

.mariokart-mode .hero-stat-num {
    color: #ffdd00 !important;
    font-family: 'MarioKart', 'Outfit', sans-serif !important;
    text-shadow: 1px 1px 0 #cc0000;
}

.mariokart-mode .hero-stat-label {
    color: #b8a0e0 !important;
}

.mariokart-mode .hero-stat-num i {
    color: #ffdd00 !important;
}

/* Hero background icon */
.mariokart-mode .hero-bg-icon {
    opacity: 0.08 !important;
    filter: brightness(0) invert(1);
}

/* Parco auto hero icon */
.mariokart-mode .parco-auto-hero-icon {
    background-color: #ff00ff !important;
}

.mariokart-mode .parco-auto-hero-text p {
    color: #b8a0e0 !important;
}

/* ==========================================================================
   FILTER BAR
   ========================================================================== */

.mariokart-mode .filter-bar {
    background: rgba(15, 0, 35, 0.9) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 0, 255, 0.3);
    box-shadow: 0 0 20px rgba(130, 0, 255, 0.2);
}

.mariokart-mode .filter-bar input,
.mariokart-mode .filter-bar select,
.mariokart-mode .filter-dropdown-btn {
    background: rgba(30, 0, 60, 0.8) !important;
    color: #ffffff !important;
    border-color: rgba(255, 0, 255, 0.3) !important;
}

.mariokart-mode .client-type-filter-btn {
    color: #e0d0ff !important;
}

.mariokart-mode .client-type-filter-btn.active {
    background: linear-gradient(135deg, #ff0000, #ff4400) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   CAR CARDS - RAINBOW NEON STYLE
   ========================================================================== */

.mariokart-mode .guest-card {
    background: rgba(15, 5, 30, 0.85) !important;
    border: 2px solid transparent;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    animation: mk-card-glow 3s ease-in-out infinite;
    cursor: pointer;
}

/* Rainbow border glow */
.mariokart-mode .guest-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 18px;
    z-index: -1;
    background: linear-gradient(
        var(--mk-glow-angle, 0deg),
        #ff0000, #ff8800, #ffff00, #00ff00, #00ccff, #8800ff, #ff00ff, #ff0000
    );
    animation: mk-border-rotate 4s linear infinite;
    opacity: 0.7;
}

@keyframes mk-border-rotate {
    from { --mk-glow-angle: 0deg; }
    to { --mk-glow-angle: 360deg; }
}

/* Fallback for browsers without @property */
@supports not (background: paint(id)) {
    .mariokart-mode .guest-card::before {
        background: linear-gradient(45deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ccff, #8800ff, #ff00ff);
        animation: mk-border-fallback 4s linear infinite;
    }

    @keyframes mk-border-fallback {
        0% { filter: hue-rotate(0deg); }
        100% { filter: hue-rotate(360deg); }
    }
}

@keyframes mk-card-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 0, 255, 0.3), 0 0 30px rgba(130, 0, 255, 0.1); }
    50% { box-shadow: 0 0 25px rgba(0, 200, 255, 0.4), 0 0 50px rgba(130, 0, 255, 0.2); }
}

.mariokart-mode .guest-card:hover {
    transform: translateY(-10px) scale(1.03) !important;
    box-shadow: 0 0 40px rgba(255, 0, 255, 0.5), 0 0 80px rgba(130, 0, 255, 0.3) !important;
}

/* Card image */
.mariokart-mode .guest-card-img-wrapper {
    background: radial-gradient(ellipse at center, rgba(80, 0, 150, 0.3), transparent) !important;
}

.mariokart-mode .guest-card-img {
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(255, 200, 0, 0.4));
    transition: filter 0.3s ease;
}

.mariokart-mode .guest-card:hover .guest-card-img {
    filter: drop-shadow(0 0 25px rgba(255, 200, 0, 0.7));
}

/* Card text */
.mariokart-mode .guest-card-model {
    font-family: 'MarioKart', 'Outfit', sans-serif !important;
    color: #ffdd00 !important;
    text-shadow: 2px 2px 0 rgba(200, 0, 0, 0.5);
}

.mariokart-mode .guest-card-version {
    color: #b8a0e0 !important;
    font-style: italic;
}

.mariokart-mode .guest-card-brand-logo {
    display: none !important;
}

.mariokart-mode .mk-character-name {
    display: block !important;
    font-family: 'MarioKart', 'Outfit', sans-serif;
    font-size: 0.85rem;
    color: #00ffcc;
    text-shadow: 0 0 8px rgba(0, 255, 200, 0.5);
}

/* Spec pills */
.mariokart-mode .spec-pill {
    background: rgba(100, 0, 200, 0.3) !important;
    color: #e0c0ff !important;
    border: 1px solid rgba(180, 0, 255, 0.4) !important;
}

/* Price */
.mariokart-mode .price-label {
    color: #b8a0e0 !important;
}

.mariokart-mode .price-main {
    color: #00ff88 !important;
    font-family: 'MarioKart', 'Outfit', sans-serif !important;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.mariokart-mode .price-sub {
    color: #8870b0 !important;
}

/* Badge override */
.mariokart-mode .badge-offer {
    background: linear-gradient(135deg, #ff0000, #ff4400) !important;
    font-family: 'MarioKart', 'Outfit', sans-serif !important;
}

.mariokart-mode .badge-qty {
    background: rgba(100, 0, 200, 0.8) !important;
}

/* Action button */
.mariokart-mode .btn-showroom-action {
    background: linear-gradient(135deg, #ff0000, #ff6600) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
}

.mariokart-mode .btn-showroom-action:hover {
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.7) !important;
}

/* ==========================================================================
   SECTIONS & FOOTER
   ========================================================================== */

.mariokart-mode section,
.mariokart-mode .cta-discover,
.mariokart-mode .come-funziona,
.mariokart-mode .servizi-section,
.mariokart-mode .reviews-section,
.mariokart-mode .cta-banner,
.mariokart-mode .numero-verde-section {
    background: rgba(10, 0, 25, 0.9) !important;
    border-top: 1px solid rgba(130, 0, 255, 0.2);
}

.mariokart-mode footer,
.mariokart-mode .site-footer {
    background: rgba(5, 0, 15, 0.95) !important;
    color: #b8a0e0 !important;
}

.mariokart-mode footer a {
    color: #00ccff !important;
}

/* ==========================================================================
   LOAD MORE BUTTON
   ========================================================================== */

.mariokart-mode #btnLoadMore,
.mariokart-mode .btn-view-all-cars {
    background: linear-gradient(135deg, #8800ff, #ff00ff) !important;
    color: #ffffff !important;
    border: none !important;
    font-family: 'MarioKart', 'Outfit', sans-serif !important;
    letter-spacing: 1px;
    box-shadow: 0 0 20px rgba(136, 0, 255, 0.4);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.mariokart-mode #btnLoadMore:hover,
.mariokart-mode .btn-view-all-cars:hover {
    box-shadow: 0 0 35px rgba(136, 0, 255, 0.7) !important;
    transform: scale(1.05);
}

/* ==========================================================================
   HOME SECTION HEADER
   ========================================================================== */

.mariokart-mode .home-section-header h2 {
    font-family: 'MarioKart', 'Outfit', sans-serif !important;
    color: #ffdd00 !important;
    text-shadow: 0 0 20px rgba(255, 221, 0, 0.6), 3px 3px 0 #cc0000;
}

.mariokart-mode .home-section-header p {
    color: #b8a0e0 !important;
}

/* ==========================================================================
   FILTER DROPDOWNS (expanded)
   ========================================================================== */

.mariokart-mode .filter-dropdown-content {
    background: rgba(15, 5, 30, 0.95) !important;
    border: 1px solid rgba(255, 0, 255, 0.3) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.mariokart-mode .filter-option {
    color: #e0d0ff !important;
}

.mariokart-mode .filter-option:hover {
    background: rgba(100, 0, 200, 0.3) !important;
}

.mariokart-mode .filter-option.active {
    background: rgba(136, 0, 255, 0.4) !important;
    color: #ffffff !important;
}

/* Search in filter */
.mariokart-mode .filter-search-input {
    background: rgba(30, 0, 60, 0.7) !important;
    color: #ffffff !important;
    border-color: rgba(180, 0, 255, 0.3) !important;
}

/* Price range in filter bar */
.mariokart-mode .price-range-label,
.mariokart-mode .slider-values span {
    color: #00ff88 !important;
}

/* ==========================================================================
   REVIEWS SECTION
   ========================================================================== */

.mariokart-mode .review-card {
    background: rgba(15, 5, 30, 0.85) !important;
    border: 1px solid rgba(130, 0, 255, 0.3) !important;
}

.mariokart-mode .review-card * {
    color: #e0d0ff !important;
}

.mariokart-mode .review-stars i {
    color: #ffdd00 !important;
}

.mariokart-mode .review-author {
    color: #00ccff !important;
}

/* ==========================================================================
   CTA SECTIONS
   ========================================================================== */

.mariokart-mode .cta-discover *,
.mariokart-mode .come-funziona *,
.mariokart-mode .servizi-section *,
.mariokart-mode .cta-banner *,
.mariokart-mode .numero-verde-section * {
    color: #e0d0ff !important;
}

.mariokart-mode .cta-discover h2,
.mariokart-mode .come-funziona h2,
.mariokart-mode .servizi-section h2,
.mariokart-mode .cta-banner h2,
.mariokart-mode .numero-verde-section h2 {
    color: #ffdd00 !important;
    font-family: 'MarioKart', 'Outfit', sans-serif !important;
    text-shadow: 2px 2px 0 #cc0000;
}

/* CTA buttons in sections */
.mariokart-mode .cta-btn,
.mariokart-mode .btn-cta,
.mariokart-mode .cta-discover a,
.mariokart-mode .cta-banner a {
    background: linear-gradient(135deg, #ff0000, #ff4400) !important;
    color: #ffffff !important;
}

/* Step cards / service cards */
.mariokart-mode .step-card,
.mariokart-mode .service-card,
.mariokart-mode .funziona-step {
    background: rgba(15, 5, 30, 0.7) !important;
    border: 1px solid rgba(130, 0, 255, 0.2) !important;
}

/* ==========================================================================
   AUDIO CONTROL BUTTON
   ========================================================================== */

.mk-audio-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff0000, #ff4400);
    border: 2px solid rgba(255, 215, 0, 0.6);
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    transition: transform 0.2s, box-shadow 0.2s;
    animation: mk-audio-pulse 2s ease-in-out infinite;
}

.mk-audio-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.7);
}

@keyframes mk-audio-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
    50% { box-shadow: 0 0 30px rgba(255, 0, 0, 0.7), 0 0 50px rgba(255, 100, 0, 0.3); }
}

/* ==========================================================================
   MOBILE HAMBURGER MENU
   ========================================================================== */

.mariokart-mode .mobile-menu-toggle span {
    background-color: #ffffff !important;
}

.mariokart-mode .hamburger-menu {
    background: rgba(10, 0, 30, 0.98) !important;
}

.mariokart-mode .hamburger-menu * {
    color: #e0d0ff !important;
}

.mariokart-mode .hamburger-menu .filter-option.active {
    color: #ffffff !important;
    background: rgba(136, 0, 255, 0.4) !important;
}

/* ==========================================================================
   RESULTS INFO
   ========================================================================== */

.mariokart-mode #resultsInfo {
    color: #b8a0e0 !important;
}

/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

.mariokart-mode::-webkit-scrollbar {
    width: 8px;
}

.mariokart-mode::-webkit-scrollbar-track {
    background: #0a0015;
}

.mariokart-mode::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8800ff, #ff00ff);
    border-radius: 4px;
}

/* ==========================================================================
   OFFERTE DEL MESE — info card (blue → pink)
   ========================================================================== */

.mariokart-mode .offerte-mese-info-card {
    background: linear-gradient(135deg, #cc00aa, #ff00ff) !important;
    border: none !important;
    box-shadow: 0 0 30px rgba(255, 0, 200, 0.5), 0 0 60px rgba(200, 0, 255, 0.2) !important;
    animation: mk-offer-pulse 2s ease-in-out infinite;
}

@keyframes mk-offer-pulse {
    0%, 100% { box-shadow: 0 0 30px rgba(255, 0, 200, 0.5), 0 0 60px rgba(200, 0, 255, 0.2); }
    50% { box-shadow: 0 0 50px rgba(255, 0, 200, 0.8), 0 0 100px rgba(200, 0, 255, 0.4); }
}

.mariokart-mode .offerte-mese-info-card * {
    color: #ffffff !important;
}

.mariokart-mode .offerte-mese-info-card h2 {
    font-family: 'MarioKart', 'Outfit', sans-serif !important;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.3) !important;
    color: #ffffff !important;
}

.mariokart-mode .offerte-mese-icon-img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.25 !important;
}

/* OFFERTE DEL MESE — car cards (dark gold star theme) */
.mariokart-mode #offerteGrid .guest-card {
    background: rgba(20, 10, 5, 0.9) !important;
    border: 2px solid rgba(255, 200, 0, 0.5) !important;
    box-shadow: 0 0 20px rgba(255, 180, 0, 0.2), inset 0 0 20px rgba(255, 150, 0, 0.05) !important;
    animation: mk-gold-pulse 3s ease-in-out infinite !important;
}

.mariokart-mode #offerteGrid .guest-card::before {
    background: linear-gradient(45deg, #ffaa00, #ffdd00, #ff8800, #ffcc00) !important;
    animation: mk-border-fallback 3s linear infinite !important;
    opacity: 0.6 !important;
}

@keyframes mk-gold-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 180, 0, 0.2), inset 0 0 20px rgba(255, 150, 0, 0.05); }
    50% { box-shadow: 0 0 35px rgba(255, 200, 0, 0.4), inset 0 0 30px rgba(255, 150, 0, 0.08); }
}

.mariokart-mode #offerteGrid .guest-card:hover {
    transform: translateY(-10px) scale(1.03) !important;
    box-shadow: 0 0 50px rgba(255, 200, 0, 0.5), 0 0 100px rgba(255, 150, 0, 0.2) !important;
}

.mariokart-mode #offerteGrid .guest-card .guest-card-model {
    color: #ffdd00 !important;
    text-shadow: 1px 1px 0 rgba(180, 80, 0, 0.6) !important;
}

.mariokart-mode #offerteGrid .guest-card .price-main {
    color: #ffcc00 !important;
    text-shadow: 0 0 10px rgba(255, 200, 0, 0.5) !important;
}

.mariokart-mode #offerteGrid .guest-card .badge-offer {
    background: linear-gradient(135deg, #ff8800, #ffcc00) !important;
    color: #1a0a00 !important;
    font-weight: 900 !important;
}

/* ==========================================================================
   COME FUNZIONA CARDS (blue → pink gradient)
   ========================================================================== */

.mariokart-mode .come-funziona-section {
    background: rgba(10, 0, 25, 0.95) !important;
}

.mariokart-mode .come-funziona-card {
    background: linear-gradient(135deg, #aa00cc, #ff00cc) !important;
    border: none !important;
    box-shadow: 0 0 20px rgba(255, 0, 200, 0.3), 0 8px 32px rgba(0,0,0,0.4) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mariokart-mode .come-funziona-card:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 0 40px rgba(255, 0, 200, 0.6), 0 16px 48px rgba(0,0,0,0.5) !important;
}

.mariokart-mode .come-funziona-card * {
    color: #ffffff !important;
}

.mariokart-mode .come-funziona-num {
    color: rgba(255, 255, 255, 0.5) !important;
    font-family: 'MarioKart', 'Outfit', sans-serif !important;
    font-size: 3rem !important;
}

.mariokart-mode .come-funziona-card h3 {
    font-family: 'MarioKart', 'Outfit', sans-serif !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3) !important;
}

.mariokart-mode .come-funziona-title {
    color: #ffdd00 !important;
    font-family: 'MarioKart', 'Outfit', sans-serif !important;
    text-shadow: 2px 2px 0 #cc0000 !important;
}

.mariokart-mode .come-funziona-subtitle {
    color: #b8a0e0 !important;
}

.mariokart-mode .come-funziona-icon {
    background-color: #ff00ff !important;
}

/* ==========================================================================
   SERVIZI PILLS (white boxes → dark neon outline)
   ========================================================================== */

.mariokart-mode .servizi-section {
    background: rgba(10, 0, 25, 0.95) !important;
}

.mariokart-mode .servizi-title {
    color: #ffdd00 !important;
    font-family: 'MarioKart', 'Outfit', sans-serif !important;
    text-shadow: 2px 2px 0 #cc0000 !important;
}

.mariokart-mode .servizi-subtitle {
    color: #b8a0e0 !important;
}

.mariokart-mode .servizi-pill {
    background: rgba(20, 5, 40, 0.8) !important;
    border: 1px solid rgba(255, 0, 200, 0.4) !important;
    color: #e0d0ff !important;
    box-shadow: 0 0 10px rgba(200, 0, 255, 0.1) !important;
    transition: border-color 0.3s, box-shadow 0.3s, color 0.3s;
}

.mariokart-mode .servizi-pill:hover {
    border-color: #ff00ff !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(255, 0, 200, 0.3) !important;
}

/* ==========================================================================
   NUMERO VERDE (phone section)
   ========================================================================== */

.mariokart-mode .numero-verde-section {
    background: rgba(10, 0, 25, 0.95) !important;
}

.mariokart-mode .numero-verde-label {
    color: #b8a0e0 !important;
}

.mariokart-mode .numero-verde-icon {
    background: linear-gradient(135deg, #cc00aa, #ff00ff) !important;
    box-shadow: 0 0 15px rgba(255, 0, 200, 0.5) !important;
}

.mariokart-mode .numero-verde-number {
    color: #ffffff !important;
    font-family: 'MarioKart', 'Outfit', sans-serif !important;
}

/* ==========================================================================
   FOOTER — logo + links
   ========================================================================== */

.mariokart-mode .footer-logo {
    content: url('//cdn.noleggiamoauto.it/images/mkna.png');
}

.mariokart-mode .footer-links a {
    color: #ff88ff !important;
}

.mariokart-mode .footer-links a:hover {
    color: #ffdd00 !important;
    text-shadow: 0 0 8px rgba(255, 221, 0, 0.5) !important;
}

.mariokart-mode .footer-title {
    color: #ffffff !important;
    font-family: 'MarioKart', 'Outfit', sans-serif !important;
}

.mariokart-mode .footer-bottom p {
    color: #8870b0 !important;
}

.mariokart-mode .footer-logos-sep {
    color: #8870b0 !important;
}

/* Phone/CTA buttons that were blue */
.mariokart-mode a[href^="tel"],
.mariokart-mode .btn-cta-blue,
.mariokart-mode .primary-blue-btn {
    background: linear-gradient(135deg, #cc00aa, #ff00ff) !important;
    box-shadow: 0 0 15px rgba(255, 0, 200, 0.4) !important;
}

/* Any remaining --primary-blue references */
.mariokart-mode * {
    --primary-blue: #ff00cc !important;
}

/* ==========================================================================
   FLOATING PARTICLES
   ========================================================================== */

.mk-particle {
    position: fixed;
    top: -60px;
    z-index: 9990;
    pointer-events: none;
    user-select: none;
    animation: mk-particle-fall linear forwards;
    will-change: transform, opacity;
}

@keyframes mk-particle-fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ==========================================================================
   RAINBOW SCROLL PROGRESS BAR
   ========================================================================== */

.mk-scroll-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    z-index: 99998;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        #ff0000, #ff8800, #ffff00, #00ff00, #00ccff, #8800ff, #ff00ff
    );
    background-size: 200% 100%;
    animation: mk-scrollbar-shift 3s linear infinite;
    box-shadow: 0 0 8px rgba(255, 100, 255, 0.6);
    transition: width 0.1s linear;
}

@keyframes mk-scrollbar-shift {
    from { background-position: 0% 0%; }
    to   { background-position: 200% 0%; }
}

/* ==========================================================================
   BLUE SHELL OVERLAY
   ========================================================================== */

.mk-blueshell-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99997;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    animation: mk-blueshell-bg 3s ease-out forwards;
}

/* The shell falls from above */
.mk-blueshell-img {
    width: 200px;
    height: auto;
    filter: drop-shadow(0 0 30px rgba(0, 150, 255, 0.9));
    animation: mk-blueshell-crash 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transform-origin: center center;
}

/* Impact shockwave ring */
.mk-blueshell-impact {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 6px solid rgba(0, 200, 255, 0.9);
    opacity: 0;
    animation: mk-shockwave 0.6s ease-out 0.65s forwards;
}

.mk-blueshell-impact:nth-child(2) { animation-delay: 0.75s; border-color: rgba(0, 150, 255, 0.7); }
.mk-blueshell-impact:nth-child(3) { animation-delay: 0.85s; border-color: rgba(100, 100, 255, 0.5); }

/* Flash on impact */
.mk-blueshell-flash {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 180, 255, 0.6);
    opacity: 0;
    animation: mk-impact-flash 0.15s ease-out 0.65s forwards;
}

.mk-blueshell-text {
    font-family: 'MarioKart', 'Outfit', sans-serif;
    font-size: 3rem;
    color: #00ccff;
    text-shadow: 3px 3px 0 #000080, 0 0 40px rgba(0, 200, 255, 1);
    opacity: 0;
    letter-spacing: 4px;
    animation: mk-text-appear 0.4s ease-out 0.85s forwards;
    margin-top: 16px;
}

@keyframes mk-blueshell-crash {
    0%   { transform: translateY(-120vh) rotate(-1080deg) scale(0.5); }
    85%  { transform: translateY(0) rotate(0deg) scale(1.3); }
    92%  { transform: translateY(10px) scale(0.9); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes mk-shockwave {
    0%   { transform: scale(1);   opacity: 1; }
    100% { transform: scale(18);  opacity: 0; }
}

@keyframes mk-impact-flash {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes mk-blueshell-bg {
    0%   { background: transparent; }
    68%  { background: transparent; }
    72%  { background: rgba(0, 50, 150, 0.55); }
    85%  { background: rgba(0, 30, 100, 0.45); }
    100% { background: transparent; }
}

/* PAGE SHAKE — molto più forte */
@keyframes mk-page-shake {
    0%   { transform: translate(0, 0) rotate(0deg); }
    5%   { transform: translate(-18px, -12px) rotate(-1.5deg); }
    10%  { transform: translate(18px, 12px) rotate(1.5deg); }
    15%  { transform: translate(-15px, 10px) rotate(-1deg); }
    20%  { transform: translate(15px, -10px) rotate(1deg); }
    25%  { transform: translate(-20px, -8px) rotate(-1.5deg); }
    30%  { transform: translate(20px, 8px) rotate(1.5deg); }
    40%  { transform: translate(-12px, -6px) rotate(-0.8deg); }
    50%  { transform: translate(12px, 6px) rotate(0.8deg); }
    60%  { transform: translate(-8px, -4px) rotate(-0.4deg); }
    70%  { transform: translate(8px, 4px) rotate(0.4deg); }
    85%  { transform: translate(-4px, -2px) rotate(-0.2deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.mk-shake {
    animation: mk-page-shake 0.9s ease-out !important;
}

/* ==========================================================================
   DEACTIVATION TRANSITION
   ========================================================================== */

.mariokart-deactivating {
    animation: mk-deactivate 0.5s ease-out forwards;
}

@keyframes mk-deactivate {
    0% { filter: hue-rotate(0deg) brightness(1); }
    50% { filter: hue-rotate(180deg) brightness(1.3); }
    100% { filter: hue-rotate(0deg) brightness(1); }
}

/* ==========================================================================
   CUSTOM CURSOR — anche su elementi cliccabili
   ========================================================================== */

.mariokart-mode,
.mariokart-mode *,
.mariokart-mode a,
.mariokart-mode button,
.mariokart-mode input,
.mariokart-mode select,
.mariokart-mode [onclick],
.mariokart-mode [role="button"] {
    cursor: inherit !important;
}

/* CSS custom property for animated border (modern browsers) */
@property --mk-glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}