:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

body { 
  font-family: 'Outfit', sans-serif; 
  background: var(--primary-gradient);
  min-height: 100vh;
}

.container { max-width: 700px; }

.main-card {
  border: none;
  border-radius: 2rem;
  background: #ffffff;
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.stelling-slide { display: none; }
.stelling-slide.active { display: block; animation: fadeIn 0.4s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.progress { height: 10px; background-color: #f0f0f0; border-radius: 10px; }
.progress-bar { background: var(--primary-gradient); border-radius: 10px; }

.choice-group { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  gap: 12px; 
}

.choice-label {
  border: 2px solid #f0f2f5;
  border-radius: 15px;
  padding: 20px 5px;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: white;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #4a4a4a;
}

/* Hover en Selected Kleuren */
.btn-check:hover + #eens-label, .btn-check:checked + #eens-label {
  background-color: #198754 !important; border-color: #198754 !important; color: white !important; transform: translateY(-3px);
}
.btn-check:hover + #neutraal-label, .btn-check:checked + #neutraal-label {
  background-color: #6c757d !important; border-color: #6c757d !important; color: white !important; transform: translateY(-3px);
}
.btn-check:hover + #oneens-label, .btn-check:checked + #oneens-label {
  background-color: #dc3545 !important; border-color: #dc3545 !important; color: white !important; transform: translateY(-3px);
}

.tool-btn {
  background: rgba(118, 75, 162, 0.05);
  border: none;
  color: #764ba2;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 15px;
  border-radius: 50px;
}

.partij-item { transition: all 0.2s; border: 1px solid transparent; }
.partij-item:hover { background-color: #f8f9fa !important; border-color: #dee2e6; }
.toggle-icon { transition: transform 0.3s; color: #764ba2; font-size: 1.2rem; }
.partij-item.open .toggle-icon { transform: rotate(180deg); color: #6c757d; }

.logo { max-height: 80px; margin-bottom: 25px; }

footer { margin-top: 40px; padding-bottom: 40px; color: rgba(255,255,255,0.8); text-align: center; }
footer hr { border-color: rgba(255,255,255,0.2); }
footer a { color: #ffffff; text-decoration: underline; font-weight: 600; }

/* Specifiek voor de resultaten */
.match-hero {
    box-shadow: 0 10px 20px rgba(118, 75, 162, 0.2);
}

.result-item {
    transition: transform 0.2s ease, border-color 0.2s ease;
    border: 1px solid #f0f2f5 !important;
}

.result-item:hover {
    border-color: #764ba2 !important;
    transform: scale(1.01);
}

.rotate-icon {
    transition: transform 0.3s ease;
}

.collapse-toggle[aria-expanded="true"] .rotate-icon {
    transform: rotate(135deg); /* Plus wordt een kruisje */
    color: #764ba2 !important;
}

.table thead th {
    letter-spacing: 1px;
    font-size: 0.7rem;
    padding-bottom: 15px;
}

.fw-600 { font-weight: 600; }

.match-hero span.text-primary {
    color: #ffffff !important;
}

@keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(1deg); }
  50% { transform: rotate(-1deg); }
  75% { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

.opval-knop {
    transition: all 0.3s ease;
    border: 1px solid #764ba2 !important;
    background: white !important;
    color: #764ba2 !important;
}

.opval-knop:hover {
    animation: shake 0.3s ease-in-out;
    background: #764ba2 !important;
    color: white !important;
    box-shadow: 0 5px 15px rgba(118, 75, 162, 0.3) !important;
}

.opval-knop:hover i {
    color: white !important;
}