/* dev.mm/assets/css/reserveren.css
   Keuzeblok en categorietoggle op reserveren.php.

   Dit bestand wordt NA _incl_css_js.php geladen: style.css zet
   kleuren en .btn-regels met een gelijke specificiteit en wint anders
   de gelijkspel.  Om diezelfde reden staat er bij tekstkleuren op
   donkere vlakken !important.

   .rs-list  -- de drie keuzes: op een telefoon regels met een
                thumbnail links, op een breed scherm drie kolommen met
                het beeld als strook bovenin.
   .rs-toggle -- de categoriebalk die daarna in beeld komt.              */

/* ---------- gedeeld ---------------------------------------------- */
.rs-eyebrow {
  text-align: center;
  font-family: inherit;
  letter-spacing: .14em;
  font-size: .78rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #7b8a99 !important;
  margin: 0 0 1.1rem;
}

/* ---------- de drie keuzes ---------------------------------------- */
.rs-list { display: grid; grid-template-columns: 1fr; gap: .6rem; max-width: 44rem; margin: 0 auto; }
@media (min-width: 992px) { .rs-list { grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 68rem; } }

.rs-row {
  display: flex; align-items: stretch;
  width: 100%; padding: 0; border: 1px solid #e2e8ef; border-radius: .7rem;
  background: #fff; overflow: hidden; cursor: pointer; text-align: left;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.rs-row:hover { border-color: #3498db; box-shadow: 0 8px 22px rgba(15,27,45,.12); transform: translateY(-1px); }
.rs-row:focus-visible { outline: 3px solid #3498db; outline-offset: 2px; }

.rs-row-img { flex: 0 0 6.5rem; position: relative; background: #dce6ee; }
.rs-row-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Iconen in dezelfde vorm als de servicekaarten op de homepage
   (.mm-svc-ic): witte cirkel, accentblauwe rand, accentblauw icoon.
   Op de telefoon staan ze in de hoek van de foto -- op de naad tussen
   beeld en tekst liepen ze over de ondertitel heen.  "Verblijf" heeft
   er twee -- huis en busje -- omdat die keuze houseboats en
   camperplaatsen samen dekt en dat met een enkel icoon niet te zien
   was. */
.rs-row-ics {
  position: absolute; z-index: 2;
  left: .35rem; bottom: .35rem;
  display: flex; gap: .25rem;
}
.rs-row-ic {
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #23a0db !important;
  border: 2px solid #23a0db;
  box-shadow: 0 3px 10px rgba(4, 19, 31, .22);
  font-size: .8rem;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s;
}
.rs-row:hover .rs-row-ic { transform: scale(1.08); box-shadow: 0 5px 14px rgba(4,19,31,.28); }

/* Korte labels die zeggen wat er onder een keuze valt.  Vooral voor
   campers: die zaten verstopt in de ondertitel. */
.rs-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.rs-tag {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: #eaf4fb;
  color: #17567f !important;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.rs-row-body { flex: 1 1 auto; min-width: 0; padding: .8rem .9rem; display: flex; flex-direction: column; justify-content: center; }
.rs-row h3 { font-size: 1.05rem !important; line-height: 1.25 !important; margin: 0 0 .2rem !important; font-weight: 700 !important; color: #11354d !important; }
.rs-row p  { font-size: .85rem !important; line-height: 1.35 !important; margin: 0 !important; color: #5f7183 !important; }
.rs-row-arrow { flex: 0 0 2.5rem; display: flex; align-items: center; justify-content: center; color: #3498db !important; font-size: .95rem; }

/* Op een breed scherm wordt de regel een kolom met het beeld bovenin. */
@media (min-width: 992px) {
  .rs-row { flex-direction: column; }
  .rs-row-img { flex: 0 0 7.5rem; width: 100%; }
  .rs-row-ics { left: 1.1rem; bottom: -1.05rem; gap: .35rem; }
  .rs-row-body { padding: 1.5rem 1.1rem 1.15rem; }
  .rs-row h3 { font-size: 1.2rem !important; }
  .rs-row-ic { width: 2.2rem; height: 2.2rem; font-size: .9rem; }
  .rs-row-arrow { flex: 0 0 auto; justify-content: flex-start; padding: 0 1.1rem 1.1rem; gap: .4rem; font-weight: 700; font-size: .85rem; }
}

/* ---------- de toggle -------------------------------------------- */
/* Stond op #5b6b7b op een lichte grijstint: op een telefoon in de zon
   nauwelijks te lezen.  Nu marineblauw op wit, met een duidelijk
   verschil tussen actief en niet-actief.                              */
.rs-toggle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .25rem;
  max-width: 30rem;
  margin: 0 auto;
  padding: .3rem;
  background: #e8edf2;
  border-radius: .7rem;
}
.rs-toggle button {
  padding: .6rem .35rem;
  border: 0;
  border-radius: .5rem;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  background: transparent;
  color: #11354d !important;
  transition: background .18s, color .18s, box-shadow .18s;
}
.rs-toggle button:hover { background: rgba(255,255,255,.7); }
.rs-toggle button.is-on {
  background: #3498db;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(15,27,45,.25);
}
.rs-toggle button:focus-visible { outline: 3px solid #154f7d; outline-offset: 2px; }

/* ---------- afstand tussen toggle, stappen en de wizard ----------- */
/* De wizard had mt-16/sm:mt-20 (64/80px) plus de padding van drie
   omhullende blokken erboven; samen ruim 125px wit.  Met $booking_tight
   vervalt dat en staat de stappenbalk vlak onder de keuze.            */
.rs-wrap { padding-top: .75rem; padding-bottom: 0; }
.mm-booking-tight { margin-top: 0 !important; padding-top: .5rem; padding-bottom: 0; }
#booking-module.rs-module,
#huur_sloep.rs-module,
#reserveer_ligplaats.rs-module { padding-top: .35rem; }
@media (min-width: 992px) {
  .rs-wrap { padding-top: 1rem; }
  .mm-booking-tight { padding-top: .5rem; }
}