/* ==========================================================================
   RTM Mini SVG Calendar (Plan je reis)
   Bestandsnaam: mini-svg-calendar.css
   ========================================================================== */

/* Container */
.rtm-mini-svg-cal,
.rtm-mini-cal {
  width: 100%;
  max-width: 300px; /* pas aan naar wens */
  margin: 0 auto;
}

/* SVG wrapper (jij gebruikt .rtm-mini-svg-cal__svg of .rtm-mini-cal__svg) */
.rtm-mini-svg-cal__svg,
.rtm-mini-cal__svg {
  position: relative;
  display: block;
  width: 100%;
}

/* Zorg dat de inline SVG responsive is */
.rtm-mini-svg-cal__svg svg,
.rtm-mini-cal__svg svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Loading state */
.rtm-mini-svg-cal__svg.is-loading,
.rtm-mini-cal__svg.is-loading {
  opacity: 0.6;
  filter: saturate(0.9);
  transition: opacity 160ms ease, filter 160ms ease;
}

/* Error box */
.rtm-mini-svg-cal__error,
.rtm-mini-cal__error {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.7);
  font-size: 14px;
}

/* ==========================================================================
   Interactie: controls (pijlen + CTA)
   ========================================================================== */

/* Pijlen: maak ze net iets duidelijker bij hover/focus */
.rtm-mini-svg-cal__svg svg #nav-prev,
.rtm-mini-svg-cal__svg svg #nav-next,
.rtm-mini-cal__svg svg #nav-prev,
.rtm-mini-cal__svg svg #nav-next {
  transition: transform 120ms ease, opacity 120ms ease;
}

.rtm-mini-svg-cal__svg svg #nav-prev:hover,
.rtm-mini-svg-cal__svg svg #nav-next:hover,
.rtm-mini-cal__svg svg #nav-prev:hover,
.rtm-mini-cal__svg svg #nav-next:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

/* CTA button group */
.rtm-mini-svg-cal__svg svg #cta-book,
.rtm-mini-cal__svg svg #cta-book {
  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}

.rtm-mini-svg-cal__svg svg #cta-book:hover,
.rtm-mini-cal__svg svg #cta-book:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.rtm-mini-svg-cal__svg svg #cta-book:active,
.rtm-mini-cal__svg svg #cta-book:active {
  transform: translateY(0px);
  filter: brightness(0.98);
}

/* Focus-ring voor toetsenbordnavigatie (als JS role/tabindex zet) */
.rtm-mini-svg-cal__svg svg #nav-prev:focus,
.rtm-mini-svg-cal__svg svg #nav-next:focus,
.rtm-mini-svg-cal__svg svg #cta-book:focus,
.rtm-mini-cal__svg svg #nav-prev:focus,
.rtm-mini-cal__svg svg #nav-next:focus,
.rtm-mini-cal__svg svg #cta-book:focus {
  outline: none;
}

/* ==========================================================================
   Dagen: basis (witte dagen niet interactief, rijdagen wél)
   ========================================================================== */

/* Default: dagen NIET klikbaar (JS zet pointer-events aan op rijdagen) */
.rtm-mini-svg-cal__svg svg g[id^="m-"],
.rtm-mini-cal__svg svg g[id^="m-"] {
  pointer-events: none;
}

/* Als jouw JS rijdagen “activeert”, laat die dan herkenbaar hoveren.
   Omdat we geen extra class op de daggroepen zetten, gebruiken we een
   generieke hover styling: werkt alleen als pointer-events aan staat. */
.rtm-mini-svg-cal__svg svg g[id^="m-"]:hover,
.rtm-mini-cal__svg svg g[id^="m-"]:hover {
  filter: brightness(1.06);
}

/* Extra duidelijke hover: geef de achtergrond-rect in de daggroep een rand.
   Dit raakt zowel groen als rood. */
.rtm-mini-svg-cal__svg svg g[id^="m-"]:hover rect,
.rtm-mini-cal__svg svg g[id^="m-"]:hover rect {
  stroke: rgba(0,0,0,0.18);
  stroke-width: 2;
}

/* Active click “press” effect (alleen bij klikbare dagen) */
.rtm-mini-svg-cal__svg svg g[id^="m-"]:active,
.rtm-mini-cal__svg svg g[id^="m-"]:active {
  transform: translateY(0.5px);
}

/* Focus styling voor toetsenbord (als jij later tabindex/role zou zetten) */
.rtm-mini-svg-cal__svg svg g[id^="m-"][role="button"]:focus rect,
.rtm-mini-cal__svg svg g[id^="m-"][role="button"]:focus rect {
  stroke: rgba(0,0,0,0.35);
  stroke-width: 3;
}

/* Cursor alleen als pointer-events aan staat (JS zet cursor:pointer al) */
.rtm-mini-svg-cal__svg svg g[id^="m-"] *,
.rtm-mini-cal__svg svg g[id^="m-"] * {
  /* voorkomt dat tekst/select rare dingen doet */
  user-select: none;
}

/* ==========================================================================
   Kleine toegankelijkheids/UX verbeteringen
   ========================================================================== */

/* Voorkom dat SVG-elementen als tekst selecteren */
.rtm-mini-svg-cal__svg svg,
.rtm-mini-cal__svg svg {
  -webkit-user-select: none;
  user-select: none;
}

/* Op mobiele devices: iets minder “hover” effect */
@media (hover: none) {
  .rtm-mini-svg-cal__svg svg g[id^="m-"]:hover,
  .rtm-mini-cal__svg svg g[id^="m-"]:hover {
    filter: none;
  }

  .rtm-mini-svg-cal__svg svg g[id^="m-"]:hover rect,
  .rtm-mini-cal__svg svg g[id^="m-"]:hover rect {
    stroke: none;
  }
}