/* Gedeelde styling voor de "3 beste opties"-kaarten (BestTravelTimeOptionsPartial.cshtml) - gekleurde
   badge/rand per optie (best/2e/3e) + cursor:pointer zodat duidelijk is dat de kaarten klikbaar zijn.
   Deze regels stonden origineel alleen in mobella-MakeAppointment-redesign.css (publieke portal-pagina's),
   maar dezelfde partial wordt ook gebruikt op de interne Calendar-pagina (Views/Shared/Calendar.cshtml,
   bijv. /Calendar/CreateAppointmentFromClient) - daar ontbrak deze CSS, waardoor de resultaten daar kaal
   (geen kleur/rand) en visueel niet-klikbaar oogden. Losgetrokken naar dit bestand en globaal geladen
   (_Layout.cshtml) zodat beide plekken dezelfde opmaak krijgen, zonder de hele portal-redesign-CSS op de
   interne pagina's te laden (risico op conflicten met de rest van het interne thema). Kleuren hier bewust
   hardcoded (i.p.v. de --mob-*-CSS-variabelen uit de portal-redesign) zodat dit bestand op zichzelf werkt. */

.mob-best-options-grid {
    align-items: stretch !important;
}

.mob-best-option-card {
    flex: 1 1 160px;
    min-width: 160px;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
    border: 1px solid #e6e2ea;
    border-radius: 10px;
    padding: 14px 16px;
    background: #ffffff;
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.mob-best-option-card:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    border-color: var(--mob-option-color, #e3d3e1);
}

.mob-best-option-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: color-mix(in srgb, var(--mob-option-color, #4c176e) 16%, white);
    color: color-mix(in srgb, var(--mob-option-color, #4c176e) 75%, black);
}

.mob-best-option-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #212529;
}

.mob-best-option-row .material-icons {
    font-size: 16px;
    color: #4c176e;
}

/* Reistijd voor/na op het kaartje - iets minder nadrukkelijk dan datum/tijd, met kleine pijltjes
   die de richting aangeven ("reistijd voor" komt binnen, "reistijd na" gaat weg). */
.mob-best-option-traveltime {
    font-size: 12px;
    color: #655e6b;
    gap: 4px;
}

.mob-best-option-traveltime .material-icons {
    font-size: 14px;
    color: #655e6b;
}

.mob-best-option-traveltime-arrow {
    font-size: 12px !important;
    vertical-align: middle;
}

/* Tijdelijke highlight van het gekozen tijdvak in de weekagenda na het klikken op een kaartje (zie
   GoToDateOption/highlightBestOptionSlot in Calendar.js) - een FullCalendar background-event met de
   kleur van het aangeklikte kaartje, met een korte in/uit-fade zodat het opvalt zonder de rest van de
   agenda te verstoren. */
.mob-agenda-option-highlight-event {
    border: 2px solid currentColor;
    border-radius: 6px;
    opacity: 0 !important;
    animation: mob-agenda-option-highlight-fade 3s ease-in-out forwards;
}

@keyframes mob-agenda-option-highlight-fade {
    0% { opacity: 0 !important; }
    15% { opacity: 0.35 !important; }
    75% { opacity: 0.35 !important; }
    100% { opacity: 0 !important; }
}


/* #55 (17-08-2026): de markering van de gekozen beste tijd blijft staan tot de gebruiker iets
   anders doet, is beter zichtbaar, en de dag zelf wordt nu ook gemarkeerd. Deze regels
   overschrijven bewust de fade-versie hierboven; de animatie wordt uitgezet. */
.mob-agenda-option-highlight-event {
    border: 3px solid currentColor !important;
    border-radius: 6px;
    opacity: 0.3 !important;
    animation: none !important;
}

.mob-agenda-option-highlight-day {
    background-color: rgba(91, 42, 134, 0.08) !important;
}

th.mob-agenda-option-highlight-day {
    background-color: rgba(91, 42, 134, 0.16) !important;
    font-weight: 700;
    box-shadow: inset 0 3px 0 0 rgba(91, 42, 134, 0.9);
}