/* --- FONTS & VARS --- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=Roboto:wght@400;500&display=swap');

:root {
    --color-lime: #cfef58;  /* De felle achtergrondkleur */
    --color-pink: #e93864;  /* De accentkleur (knoppen/balken) */
    --color-dark: #1b1b38;  /* De donkere footer/tekst kleur */
    --color-light: #f4f4f0; /* Off-white voor leesbaarheid */
}

/* --- RESET & BASIS --- */
* { box-sizing: border-box; }

body { 
    margin: 0; padding: 0; 
    font-family: 'Roboto', sans-serif; /* Leestekst */
    background: var(--color-lime);     /* Polderfest groen! */
    color: var(--color-dark); 
    -webkit-font-smoothing: antialiased; 
    display: flex; flex-direction: column; min-height: 100vh; 
}

a { text-decoration: none; color: inherit; transition: 0.2s; }
h1, h2, h3, h4 { margin: 0; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px; }

/* --- CHECKERBOARD PATROON (DE BLOKJES) --- */
.checker-strip {
    height: 20px;
    width: 100%;
    background-image: 
        linear-gradient(45deg, var(--color-pink) 25%, transparent 25%), 
        linear-gradient(-45deg, var(--color-pink) 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, var(--color-pink) 75%), 
        linear-gradient(-45deg, transparent 75%, var(--color-pink) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    opacity: 1;
}

/* --- HEADER --- */
header { 
    background-color: var(--color-dark); 
    color: var(--color-lime); 
    height: 70px; 
    display: flex; align-items: center; 
    border-bottom: 4px solid var(--color-pink);
}

.header-inner { 
    width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; 
    display: flex; justify-content: space-between; align-items: center; 
}

.logo { font-family: 'Oswald', sans-serif; font-size: 2em; font-weight: 700; font-style: italic; color: white; }
.logo span { color: var(--color-pink); }

.user-menu { 
    font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 1.1em; 
    background: var(--color-pink); padding: 5px 15px; border-radius: 4px; color: white !important;
    transform: skew(-10deg); /* Schuine knop voor snelheid */
}
.user-menu:hover { background: white; color: var(--color-pink) !important; text-decoration: none; }

/* --- HERO MET VIDEO --- */
.hero { 
    position: relative; /* Nodig om de video erin te positioneren */
    height: 350px; 
    overflow: hidden; /* Zorgt dat de video niet buiten de box komt */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    color: white;
    border-bottom: 4px solid var(--color-pink);
    background-color: var(--color-dark); /* Achtergrondkleur voor als video nog laadt */
}

/* De video zelf */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zorgt dat de video het hele vlak vult zonder vervorming */
    z-index: 0; /* Helemaal achteraan */
}

/* De donkere laag over de video */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(27, 27, 56, 0.6); /* Donkerblauw transparant */
    z-index: 1; /* Boven de video */
}

/* De tekst */
.hero-content { 
    position: relative;
    z-index: 2; /* Boven de video én de overlay */
    max-width: 800px; 
    padding: 20px; 
}

/* De styling voor de tekst blijft hetzelfde */
.hero-tag { font-family: 'Oswald', sans-serif; font-size: 1.2em; color: var(--color-lime); margin-bottom: 10px; }
.hero h1 { font-size: 4em; color: white; text-shadow: 4px 4px 0px var(--color-pink); line-height: 1; transform: rotate(-2deg); }

@media (max-width: 800px) {
    .hero h1 { font-size: 2.5em; }
}
/* --- TABS --- */
.tabs-bar { background: var(--color-dark); position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 0 rgba(0,0,0,0.1); }
.tabs-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; }
.tab { 
    padding: 15px 30px; font-family: 'Oswald', sans-serif; font-size: 1.2em; 
    color: white; border-bottom: 4px solid transparent; opacity: 0.7; 
}
.tab:hover { opacity: 1; color: var(--color-lime); }
.tab.active { color: var(--color-lime); border-bottom: 4px solid var(--color-lime); opacity: 1; background: rgba(255,255,255,0.05); }

/* --- CONTENT GRID --- */
.container { max-width: 1200px; margin: 40px auto; padding: 0 20px; display: grid; grid-template-columns: 2fr 1fr; gap: 40px; flex: 1; }
.full-width { grid-column: 1 / -1; }

/* --- CARDS --- */
.card { 
    background: var(--color-light); /* Beige achtergrond voor leesbaarheid */
    border: 4px solid var(--color-dark); 
    box-shadow: 8px 8px 0px rgba(0,0,0,0.2); 
    margin-bottom: 20px; 
}
.card-header { 
    background: var(--color-pink); color: white; 
    padding: 20px 30px; border-bottom: 4px solid var(--color-dark); 
}
.card-header h2 { font-size: 1.8em; transform: skew(-5deg); }
.card-body { padding: 30px; }

/* --- TICKETS --- */
.secure-badge { background: var(--color-dark); color: var(--color-lime); padding: 5px 10px; font-family: 'Oswald', sans-serif; font-size: 0.9em; transform: skew(-10deg); }

.ticket-row { 
    padding: 20px; border-bottom: 2px dashed #ccc; 
    display: flex; justify-content: space-between; align-items: center; 
    background: white; margin-bottom: 10px; border: 2px solid transparent;
}
.ticket-row:hover { border: 2px solid var(--color-pink); box-shadow: 4px 4px 0 rgba(0,0,0,0.1); }

.ticket-name { font-family: 'Oswald', sans-serif; font-size: 1.3em; color: var(--color-dark); text-transform: uppercase; }

/* Badges styling update */
.type-badge { font-family: 'Oswald', sans-serif; text-transform: uppercase; border-radius: 0; transform: skew(-10deg); display:inline-block; }
.type-parking { background: var(--color-dark); color: var(--color-lime); border: none; }
.type-ticket { background: var(--color-pink); color: white; border: none; }
.type-shared { background: #333; color: white; border: none; }

.price-tag { font-family: 'Oswald', sans-serif; font-size: 1.5em; color: var(--color-pink); }
.qty-input { 
    border: 2px solid var(--color-dark); font-family: 'Oswald', sans-serif; 
    font-weight: bold; background: var(--color-light);
}

/* --- TOTAL BOX --- */
.total-box { background: white; padding: 30px; border-top: 4px solid var(--color-dark); display: none; }
.grand-total-row { color: var(--color-pink); border-top: 2px dashed var(--color-dark); }

.btn-primary { 
    background: var(--color-pink); color: white; 
    font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 1.4em; letter-spacing: 1px;
    border: 4px solid transparent; border-radius: 0; 
    box-shadow: 5px 5px 0 var(--color-dark);
    transition: 0.1s;
}
.btn-primary:hover { 
    background: white; color: var(--color-pink); border: 4px solid var(--color-pink); 
    box-shadow: 2px 2px 0 var(--color-dark); transform: translate(3px, 3px);
}

/* --- ACCORDION (INFO PAGE) --- */
.faq-item { margin-bottom: 15px; }
.faq-header {
    background: var(--color-pink); color: white;
    padding: 15px 20px; cursor: pointer;
    font-family: 'Oswald', sans-serif; font-size: 1.2em;
    display: flex; justify-content: space-between;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
    transition: 0.2s;
}
.faq-header:hover { transform: scale(1.01); background: #ff4d7a; }
.faq-content {
    background: white; padding: 20px; border: 2px solid var(--color-pink); border-top: none;
    display: none; /* JS needed to toggle */
}

/* --- SIDEBAR --- */
.info-card { 
    background: var(--color-dark); color: white; 
    border: none; box-shadow: 8px 8px 0 rgba(0,0,0,0.2);
    border-left: none; padding: 30px;
}
.info-card h3 { color: var(--color-lime); border-bottom: 2px solid var(--color-pink); padding-bottom: 10px; margin-bottom: 20px; }
.info-item strong { color: var(--color-pink); font-family: 'Oswald', sans-serif; font-size: 1.1em; }
.info-item p { color: #ddd; }
.info-icon { filter: invert(1); } /* Maak icoontjes wit */

/* --- FOOTER --- */
footer { background: var(--color-dark); color: white; margin-top: auto; padding-top: 0; }
.footer-inner { padding-top: 40px; border-bottom: 1px solid #444; }
.f-col h4 { color: var(--color-lime); }
.f-col li { color: #aaa; }

@media (max-width: 800px) {
    .container { grid-template-columns: 1fr; }
    .hero h1 { font-size: 2.5em; }
}
/* --- LINE-UP SPECIFIEK --- */

/* De balk met Stage namen */
.stage-bar {
    background: var(--color-light);
    color: var(--color-dark);
    padding: 20px;
    display: flex; justify-content: center; gap: 40px; align-items: center;
    font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 1.2em;
    border-bottom: 4px solid var(--color-dark);
    flex-wrap: wrap;
}
.stage-item { display: flex; align-items: center; gap: 10px; font-weight: bold; }
.stage-icon { color: var(--color-pink); font-size: 1.4em; }

.map-btn {
    border: 2px solid var(--color-dark); padding: 5px 15px;
    text-decoration: none; transform: skew(-10deg); font-weight: bold;
    transition: 0.2s;
}
.map-btn:hover { background: var(--color-dark); color: white; }

/* Wrapper voor de crème achtergrond */
.lineup-wrapper {
    background-color: #f4f4f0; /* Crème kleur uit screenshot */
    padding: 60px 20px;
    text-align: center;
    border-bottom: 4px solid var(--color-dark);
}

.teaser-text {
    font-family: 'Oswald', sans-serif; color: #3b3b8e; /* De blauw/paarse kleur */
    font-size: 2.5em; margin-bottom: 50px; text-transform: uppercase;
    transform: rotate(-2deg); display: inline-block;
}

/* Het grid voor de artiesten */
.artist-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Automatisch passend */
    gap: 20px; max-width: 1200px; margin: 0 auto;
}

/* De Mystery Card */
.mystery-card {
    background: var(--color-dark);
    height: 300px;
    position: relative;
    border: 4px solid var(--color-dark);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: transform 0.2s;
    box-shadow: 8px 8px 0 rgba(0,0,0,0.1);
    overflow: hidden;
}
.mystery-card:hover { transform: translate(-5px, -5px); box-shadow: 12px 12px 0 var(--color-pink); }

/* Vraagteken styling */
.q-mark {
    font-size: 8em; font-family: 'Oswald', sans-serif; font-weight: bold;
    color: transparent; -webkit-text-stroke: 4px var(--color-lime);
    opacity: 0.5; z-index: 1;
}

.mystery-label {
    background: var(--color-pink); color: white;
    font-family: 'Oswald', sans-serif; padding: 5px 15px;
    font-size: 1.2em; transform: skew(-10deg);
    position: absolute; bottom: 30px; z-index: 2;
}

/* Fotostrip onderaan */
.photo-strip {
    display: grid; grid-template-columns: repeat(4, 1fr);
    height: 250px; width: 100%;
}
.strip-img {
    width: 100%; height: 100%; object-fit: cover;
    border-right: 4px solid var(--color-dark);
    filter: grayscale(20%);
}
.strip-img:last-child { border-right: none; }

@media (max-width: 768px) {
    .photo-strip { grid-template-columns: 1fr 1fr; height: auto; }
    .strip-img { height: 200px; border-bottom: 4px solid var(--color-dark); }
}