/* --- Variabelen --- */
:root {
    --gold: #d4af37;
    --gold-dark: #b8860b;
    --gold-glow: rgba(212, 175, 55, 0.25);
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.1);
    --dark-bg: #0a0a0a;
    --text-main: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.6);
}

/* --- Basis Structuur --- */
body { background-color: var(--dark-bg); color: var(--text-main); font-family: 'Inter', system-ui, sans-serif; line-height: 1.6; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin: 30px 0; }

/* --- Intro Sectie --- */
.intro-flex-container { 
    display: flex; align-items: center; gap: 40px; flex-wrap: wrap; 
    margin-bottom: 50px; background: var(--glass-bg); padding: 40px; 
    border-radius: 28px; border: 1px solid var(--glass-border); 
    backdrop-filter: blur(10px);
}
.intro-image-container { position: relative; flex-shrink: 0; }
.intro-profile-img { 
    width: 130px; height: 130px; border-radius: 50%; object-fit: cover; 
    border: 4px solid var(--gold); position: relative; z-index: 2; 
    box-shadow: 0 0 40px var(--gold-glow);
}
.glow-effect { 
    position: absolute; width: 140px; height: 140px; border-radius: 50%; 
    background: radial-gradient(circle, var(--gold) 0%, transparent 70%); 
    filter: blur(20px); z-index: 1; opacity: 0.7;
}

/* --- Medium Kaarten --- */
.product-card { 
    padding: 35px; border-radius: 28px; 
    border: 1px solid var(--glass-border); 
    background: linear-gradient(180deg, rgba(30,30,30,0.7) 0%, rgba(10,10,10,0.95) 100%);
    text-align: center; transition: all 0.5s cubic-bezier(0.3, 0, 0.3, 1);
    backdrop-filter: blur(20px);
}
.product-card:hover { 
    transform: translateY(-15px) scale(1.02); 
    border-color: var(--gold); 
    box-shadow: 0 25px 50px rgba(0,0,0,0.7), 0 0 20px rgba(212,175,55,0.1); 
}

/* --- Status & Avatars --- */
.medium-avatar-container { position: relative; display: inline-block; margin-bottom: 25px; }
.medium-avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); }
.status-dot { 
    position: absolute; bottom: 8px; right: 8px; width: 18px; height: 18px; 
    border-radius: 50%; border: 4px solid var(--dark-bg); animation: pulse 2.5s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
    50% { transform: scale(1.2); box-shadow: 0 0 0 10px rgba(255,255,255,0); }
    100% { transform: scale(1); }
}

/* --- Status Kleuren --- */
.status-bg-online { background-color: #2ecc71; box-shadow: 0 0 15px #2ecc71; }
.status-bg-bezet { background-color: #e74c3c; box-shadow: 0 0 15px #e74c3c; }
.status-bg-pauze { background-color: #f1c40f; box-shadow: 0 0 15px #f1c40f; }

/* --- Knoppen & Acties --- */
.medium-actions-grid { display: flex; justify-content: center; gap: 20px; margin-top: 30px; padding-top: 25px; border-top: 1px solid var(--glass-border); }
.action-btn { 
    width: 52px; height: 52px; border-radius: 50%; 
    background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border); 
    display: flex; align-items: center; justify-content: center; 
    color: var(--gold); transition: 0.4s ease; font-size: 1.2rem;
}
.action-btn:hover { 
    background: var(--gold); color: #000; 
    transform: translateY(-8px) scale(1.15); 
    box-shadow: 0 10px 20px var(--gold-glow); 
}
.action-btn.disabled { opacity: 0.25; cursor: not-allowed; }

/* --- Pakketten --- */
.btn-gold { 
    width: 100%; padding: 18px; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); 
    color: #000; border: none; border-radius: 16px; cursor: pointer; 
    font-weight: 900; text-transform: uppercase; letter-spacing: 2px; transition: 0.4s;
    margin-top: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.btn-gold:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.25); box-shadow: 0 0 30px var(--gold-glow); }
.card-badge-discount { background: #e74c3c; color: white; padding: 6px 16px; border-radius: 10px; font-size: 0.75rem; font-weight: 800; margin-bottom: 12px; display: inline-block; text-transform: uppercase; }
.price-tag { font-size: 1.8rem; font-weight: 900; display: block; margin: 18px 0; color: var(--gold); }
.old-price { text-decoration: line-through; opacity: 0.4; font-size: 1.1rem; margin-right: 10px; color: #fff; }

/* Premium border met subtiele glow */
.premium-border {
    border: 1px solid rgba(212, 175, 55, 0.3);
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05); /* Zorgt voor het glass-card effect */
}

/* Goudkleurig tekstverloop voor je naam */
.gradient-text {
    background: linear-gradient(45deg, #d4af37, #f3e5ab);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

/* Neon gloed voor de saldobalk */
.neon-shadow {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
    border: 1px solid rgba(212, 175, 55, 0.6);
}

/* Pulse animatie voor de avatar */
.pulse-animation {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

/* Zweef-effect voor iconen */
.floating {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Aanvullende styling voor de badge */
.premium-gradient {
    background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
    padding: 10px 20px;
    border-radius: 50px;
    display: inline-block;
}