(selector: .tbs-calendar .tbs-day.tbs-beschikbaar). Wij maken het vlak donkergroen (woud) in de huisstijl; de tekst blijft wit. Belangrijk: het was de ACHTERGROND die lichtgroen was, niet de tekstkleur. */ #TommyBookingSupport .tbs-calendar .tbs-day.tbs-beschikbaar, #TommyBookingSupport .tbs-day.tbs-beschikbaar { background-color: var(--woud) !important; cursor: pointer; } #TommyBookingSupport .tbs-calendar .tbs-day.tbs-beschikbaar div, #TommyBookingSupport .tbs-day.tbs-beschikbaar div { color: #fff !important; } /* Hover — iets lichter groen (gras) voor feedback */ #TommyBookingSupport .tbs-calendar .tbs-day.tbs-beschikbaar:hover, #TommyBookingSupport .tbs-day.tbs-beschikbaar:hover { background-color: var(--gras) !important; } /* Vandaag — alleen een ring in gras, geen vulling (markering, geen selectie). Tommy's klassenaam verschilt soms per versie; beide afgedekt. */ #TommyBookingSupport .tbs-vandaag, #TommyBookingSupport .tbs-today { box-shadow: inset 0 0 0 2px var(--gras) !important; color: var(--woud) !important; font-weight: 500; border-radius: 999px; } /* Alleen-aankomst / alleen-vertrek (changeover-dagen). Tommy maakt deze groen (#5cb85c) met een schuine :before-driehoek (#43a538). Wij maken ze donkergroen (woud), zoals een volledig beschikbare dag; de schuine indicator houden we in een net iets donkerder groen zodat hij subtiel zichtbaar blijft. */ #TommyBookingSupport .tbs-calendar .tbs-day.tbs-aankomstdag, #TommyBookingSupport .tbs-calendar .tbs-day.tbs-vertrekdag, #TommyBookingSupport .tbs-day.tbs-aankomstdag, #TommyBookingSupport .tbs-day.tbs-vertrekdag { background-color: var(--woud) !important; } #TommyBookingSupport .tbs-calendar .tbs-day.tbs-aankomstdag:before, #TommyBookingSupport .tbs-calendar .tbs-day.tbs-vertrekdag:before { background-color: var(--gras) !important; /* schuine indicator in huisstijl-gras */ } #TommyBookingSupport .tbs-calendar .tbs-day.tbs-aankomstdag div, #TommyBookingSupport .tbs-calendar .tbs-day.tbs-vertrekdag div, #TommyBookingSupport .tbs-day.tbs-aankomstdag div, #TommyBookingSupport .tbs-day.tbs-vertrekdag div { color: #fff !important; } /* Geselecteerde dag (de gekozen datum) — GEEL (zon). Ná de regels hierboven, zodat geel wint als een gekozen dag óók aankomst/vertrek/beschikbaar is. */ #TommyBookingSupport .tbs-calendar .tbs-day.tbs-selected, #TommyBookingSupport .tbs-day.tbs-selected { background-color: var(--zon) !important; } #TommyBookingSupport .tbs-calendar .tbs-day.tbs-selected:hover, #TommyBookingSupport .tbs-day.tbs-selected:hover { background-color: var(--zon) !important; } /* Getal donkergroen op geel — leesbaar contrast, logo-look */ #TommyBookingSupport .tbs-calendar .tbs-day.tbs-selected div, #TommyBookingSupport .tbs-day.tbs-selected div { color: var(--woud) !important; } /* Nachten ertussen — zacht zandgeel (duinen), zelfde gele familie als de selectie */ #TommyBookingSupport .tbs-calendar .tbs-day.tbs-highlight, #TommyBookingSupport .tbs-day.tbs-highlight { background-color: var(--duinen) !important; } #TommyBookingSupport .tbs-calendar .tbs-day.tbs-highlight div, #TommyBookingSupport .tbs-day.tbs-highlight div { color: var(--woud) !important; } /* Bezet / niet beschikbaar / verleden */ #TommyBookingSupport .tbs-bezet, #TommyBookingSupport .tbs-nietbeschikbaar, #TommyBookingSupport .tbs-aankomstdag-bezet, #TommyBookingSupport .tbs-vertrekdag-bezet { color: #b8b8b8 !important; } #TommyBookingSupport .tbs-verleden, #TommyBookingSupport .tbs-nietinmaand { color: #cfcfcf !important; } /* Feestdag-accent — zon bewaard voor dit ene accent */ #TommyBookingSupport .tbs-feestdag { color: var(--woud); font-weight: 600; } /* Prijzen & totalen ---------------------------------------------------- */ #TommyBookingSupport .tbs-prijs, #TommyBookingSupport .tbs-subtotaal, #TommyBookingSupport .tbs-totaal, #TommyBookingSupport .tbs-totaalprijs { color: var(--woud); } #TommyBookingSupport .tbs-totaalprijs { font-weight: 700; } /* Mobiel totaal-blok ("Totaal boekingkosten", het uitklapbare vlak). Tommy zet op smal scherm (<=991px) een donkergrijs vlak (#666) met witte tekst op .tbs-totaal — op desktop is dat blok gewoon wit. Wij trekken het mobiel gelijk: witte achtergrond, donkergroene tekst (zoals desktop). */ @media screen and (max-width: 991px) { #TommyBookingSupport .tbs_kassabon .tbs_totaal_overzicht .tbs-totaal { background: #fff !important; color: var(--woud) !important; } } /* Korting valt op in een warm rood-bruin */ #TommyBookingSupport .tbs-actieprijs, #TommyBookingSupport .tbs-actie { color: #c2553f; } #TommyBookingSupport .tbs-van-prijs, #TommyBookingSupport .tbs-voor-prijs { color: #8a8a8a; } /* Meldingen ------------------------------------------------------------ */ #TommyBookingSupport .tbs-alert-info { background-color: rgba(170, 213, 183, .25); border-color: var(--meer); color: var(--woud); border-radius: 12px; } /* Actieve stap / navigatie -------------------------------------------- */ #TommyBookingSupport .tbs-active, #TommyBookingSupport .tbs-nav .tbs-active { color: var(--woud); font-weight: 600; } /* Modal ---------------------------------------------------------------- */ #TommyBookingSupport .tbs-modal-content { border-radius: 18px; } #TommyBookingSupport .tbs-modal-title { color: var(--woud); } /* Mobiel: kalenders netjes onder elkaar i.p.v. over elkaar ------------- */ @media screen and (max-width: 500px) { #TommyBookingSupport .tbs_kalenders .tbs-calendar { display: block; float: none; width: 100%; margin-bottom: 1rem; } }