/* 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; }
}