/* --- KONTENER SIATKI (GRID) DLA BILETÓW VR --- */
.tickets-list-vr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 30px;
    padding: 30px 15px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto; 
}

/* Kiedy ekran jest większy (np. laptop, tablet panoramiczny) -> przełączamy na 2 kolumny */
@media (min-width: 768px) {
    .tickets-list-vr {
        /* Wymuszamy 2 kolumny i blokujemy nadpisywanie przez inne skrypty strony */
        grid-template-columns: 1fr 1fr !important; 
    }
}

/* --- GŁÓWNA KONSTRUKCJA BILETU (PROPORCJE 840x360) --- */
.card-ticket-57, .card-ticket-72, .card-ticket-74, .card-ticket-71, .card-ticket-75, .card-ticket-76 {
    position: relative;
    width: 100%;             
    aspect-ratio: 840 / 360; 
    
    /* ZMIANA: Zamiast zwykłego 'margin: 0 auto;' dajemy margines dolny z !important */
    margin: 0 auto 30px auto !important; 
    
    display: block;
    
    border-radius: 16px;
    overflow: hidden;
    border: none;
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* Ustawienia głębi 3D dla mocnego tiltu */
    perspective: 1000px;
    transform-style: preserve-3d;
    
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.3, 1), 
                box-shadow 0.5s ease, 
                filter 0.5s ease;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* --- TILT 3D PRZY NAJECHANIU --- */
.card-ticket-57:hover, .card-ticket-72:hover, .card-ticket-74:hover, .card-ticket-71:hover, .card-ticket-75:hover, .card-ticket-76:hover {
    transform: translateY(-10px) rotateX(14deg) rotateY(-8deg) scale(1.04);
    box-shadow: -10px 25px 50px rgba(0, 0, 0, 0.5);
    filter: brightness(1.15) saturate(1.1);
    z-index: 10; 
}

/* --- GLOŁ XD --- */
.card-ticket-57::after, .card-ticket-72::after, .card-ticket-74::after, .card-ticket-71::after, .card-ticket-75::after, .card-ticket-76::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg, 
        transparent 0%, 
        transparent 35%, 
        rgba(0, 255, 255, 0.25) 45%,  
        rgba(255, 255, 255, 0.4) 50%,  
        rgba(255, 0, 255, 0.2) 55%,   
        transparent 65%, 
        transparent 100%
    );
    background-size: 300% 300%;
    animation: vr-holo 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes vr-holo {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- LINKI --- */
.card-ticket-57 { background-image: url('https://my.plan4u.pl/hit/ice/docs/GRAFIKI-ONLINE/vr_BILET_1.png'); }
.card-ticket-72 { background-image: url('https://my.plan4u.pl/hit/ice/docs/GRAFIKI-ONLINE/vr_BILET_3.png'); }
.card-ticket-74 { background-image: url('https://my.plan4u.pl/hit/ice/docs/GRAFIKI-ONLINE/vr_BILET_1_week.png'); }
.card-ticket-71 { background-image: url('https://my.plan4u.pl/hit/ice/docs/GRAFIKI-ONLINE/vr_BILET_3_week.png'); }
.card-ticket-75 { background-image: url('https://my.plan4u.pl/hit/ice/docs/GRAFIKI-ONLINE/monster_normalny.png'); }
.card-ticket-76 { background-image: url('https://my.plan4u.pl/hit/ice/docs/GRAFIKI-ONLINE/monster_ulgowy.png'); }

/* --- EFEKT DLA WYBRANEGO BILETU (AKTYWNY) --- */
.card-ticket-57 .selectedVT, .card-ticket-72 .selectedVT, 
.card-ticket-74 .selectedVT, .card-ticket-71 .selectedVT,
.card-ticket-75 .selectedVT, .card-ticket-76 .selectedVT {
    border: 4px solid #0ea5e9;
    box-shadow: 0 0 35px rgba(14, 165, 233, 0.8);
    animation: vr-pulse 1.4s infinite alternate ease-in-out;
}

@keyframes vr-pulse {
    from { opacity: 0.8; transform: scale(0.99); }
    to { opacity: 1; transform: scale(1.01); }
}

/* --- UKRYWANIE ELEMENTÓW SYSTEMOWYCH --- */
.vtLabel-57, .vtLabel-72, .vtLabel-74, .vtLabel-71, .vtLabel-75, .vtLabel-76 { display: none !important; }