/* ============================================================
   🟦 VTV 2025 – DATEPICKER ELEMENT (ACTIEVE TAB CONSISTENTIE)
   ============================================================ */

.vtv-datepicker {
  font-family: 'Inter', sans-serif;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === SLIDER WRAPPER (nu statisch, geen scroll meer) === */
.vtv-date-slider-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  position: relative;
}

/* === SLIDER RAIL (tabs gelijkmatig verspreid) === */
.vtv-date-slider {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  gap: 15px; /* 🔹 15px ruimte tussen de kaartjes */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === DATE CARD === */
.vtv-date-card {
  flex: 1 1 auto;
  text-align: center;
  background: #fff;
  border: 3px solid #d4dae6; /* 🔹 Standaard ook 3px voor consistente breedte */
  border-radius: 6px;
  padding: 12px 0;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-sizing: border-box; /* 🔹 Zorgt dat border binnen de breedte blijft */
}

/* Hover: kleur behouden, geen beweging */
.vtv-date-card:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(84, 124, 182, 0.08) 95%);
  border-color: #5d6ca8;
  box-shadow: 0 2px 6px rgba(93, 108, 168, 0.15);
  transform: none;
}

/* Actieve tab (kleur aangepast naar #002baa, zonder extra padding) */
.vtv-date-card.vtv-active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(84, 124, 182, 0.15) 95%);
  border-color: #002baa; /* 🔹 Alleen de kleur verandert, niet de breedte */
  box-shadow: 0 3px 8px rgba(0, 43, 186, 0.25);
}

/* === TEKST === */
.vtv-date-card-day {
  font-size: 14px;
  font-weight: 600;
  color: #1e1f27;
  margin: 0 0 3px 0;
  line-height: 1.2;
}

.vtv-date-card-date {
  font-size: 12px;
  color: #4B5163;
  font-weight: 500;
  margin: 0;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .vtv-date-slider {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px; /* 🔹 Kleinere gap op mobiel */
  }

  .vtv-date-card {
    flex: 1 1 calc(33.33% - 6px); /* 🔹 Aangepast voor de gap */
    margin-bottom: 6px;
  }

  .vtv-date-card-day {
    font-size: 13px;
  }

  .vtv-date-card-date {
    font-size: 11px;
  }
}