/* ==========================================================================
   Kaprun Rentals – Customer Lounge (proefstuk)
   Zelfde kleuren/lettertype als de publieke site (zie ../../css/site.css),
   maar eigen layout: dit is geen marketingpagina maar een werkomgeving.
   ========================================================================== */

/* ---------- Login ---------- */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #1d1812 url(../../images/customerlounge/login_achtergrond.jpg) center / cover no-repeat;
  position: relative;
}

.login-page::before {
  /* donkere sluier over de foto, zodat de kaart altijd goed leesbaar blijft */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(29, 24, 18, .55), rgba(29, 24, 18, .75));
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: rgba(50, 42, 32, .5);
  border: 1px solid var(--kr-line);
  border-radius: 4px;
  padding: 40px 36px;
  text-align: center;
}

.login-card__logo {
  width: 220px;
  height: auto;
  margin: 0 auto 8px;
  display: block;
}

.login-card__title {
  margin: 0 0 32px;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kr-line);
}

.login-card__field {
  display: block;
  text-align: left;
  margin: 0 0 18px;
  font-size: 12px;
  color: var(--kr-line);
}

.login-card__field input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  font: 14px var(--kr-font);
  color: var(--kr-white);
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--kr-line);
  border-radius: 2px;
}

.login-card__field input:focus {
  outline: none;
  border-color: var(--kr-tan);
  background: rgba(0, 0, 0, .4);
}

.login-card__error {
  margin: 0 0 18px;
  padding: 10px 12px;
  font-size: 12px;
  text-align: left;
  color: #f3d9d9;
  background: rgba(150, 50, 40, .35);
  border: 1px solid rgba(220, 120, 110, .5);
  border-radius: 2px;
}

.login-card__submit {
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  font: 13px var(--kr-font);
  letter-spacing: .04em;
  color: var(--kr-white);
  background: var(--kr-button);
  border: 1px solid var(--kr-line);
  border-radius: 2px;
  cursor: pointer;
}

.login-card__submit:hover { background: var(--kr-tan); }

.login-card__forgot {
  display: inline-block;
  margin-top: 20px;
  font-size: 12px;
  color: var(--kr-line);
}
.login-card__forgot:hover { color: var(--kr-white); }

@media (max-width: 420px) {
  .login-card { padding: 32px 24px; }
  .login-card__logo { width: 170px; }
}

/* ---------- Ingelogde omgeving ---------- */

.cl-header-title {
  color: var(--kr-white);
  font-size: 20px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cl-header-row { display: flex; align-items: center; gap: 20px; }

.cl-welcome {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  color: var(--kr-line);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* Desktop/tablet: "Customer Lounge" staat boven "Welkom, .../taal/uitloggen",
   beide links uitgelijnd op elkaar (de "W" van Welkom). Verticaal uitgelijnd
   met de tekst in het logo (altijd 350x100px boven dit breakpoint):
   "KAPRUN RENTALS" beslaat rows 25-53 (top = 20 + 25 = 45px vanaf de
   header-top) en "4 Seasons Holidays" eindigt op row 83 (17px boven de
   onderkant van het logo = 37px boven de onderkant van de 140px-header). */
@media (min-width: 960px) {
  body.cl .header { align-items: stretch; }
  body.cl .header__tools {
    align-items: stretch;
    justify-content: flex-end;
    padding: 0 70px 0 0;
  }
  .cl-header-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 45px 0 37px;
  }
}

.cl-logout-form { display: inline-flex; }
.cl-logout-form__button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  color: var(--kr-line);
  font: 12px var(--kr-font);
  background: none;
  border: none;
  cursor: pointer;
}
.cl-logout-form__button:hover { text-decoration: underline; }

@media (max-width: 959px) {
  /* Zelfde logica als .header__tools .label hierboven: op smalle schermen is er
     geen ruimte voor "Welkom, Naam" naast het logo, Uitloggen blijft wel staan. */
  .cl-welcome { display: none; }
}

/* Eenvoudig welkomstblok, gebruikt zolang de volledige dashboard-opzet
   (3D-tour, instructievideo's, ...) uit het ontwerp nog niet gebouwd is. */
.cl-welcome-block {
  max-width: 700px;
  margin: 0 auto;
  padding: 50px 25px;
  text-align: center;
}
.cl-welcome-block h1 { margin-bottom: 16px; }
.cl-welcome-block p { font-size: 14px; line-height: 1.6; }

/* ---------- 3D-tour + kaart ---------- */

.cl-hero {
  display: grid;
  grid-template-columns: 3fr 2fr;
}

.cl-hero__tour { position: relative; aspect-ratio: 600 / 338; background: #000; }
.cl-hero__tour iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.cl-hero__map { display: block; aspect-ratio: 400 / 338; overflow: hidden; }
.cl-hero__map img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 768px) {
  .cl-hero { grid-template-columns: 1fr; }
  .cl-hero__tour, .cl-hero__map { aspect-ratio: 16 / 10; }
}

/* ---------- Welkom + status ---------- */

/* Zelfde kolomverdeling (3fr/2fr) als .cl-hero hierboven, zodat de tekst in de
   rechterkolom precies onder de scheidingslijn tussen tour en kaart begint. */
.cl-status {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 0;
  text-align: left;
}
.cl-status__welcome { padding: 40px 5% 40px 5%; }
.cl-status__today { padding: 40px 5% 40px 15px; }
.cl-status p { padding: 0; margin: 0 0 14px; font-size: 13px; line-height: 1.6; }
.cl-status h3 { margin: 0 0 12px; font-size: 14px; font-weight: bold; }
.cl-status__today h3:not(:first-child) { margin-top: 24px; }

@media (max-width: 768px) {
  .cl-status { grid-template-columns: 1fr; }
  .cl-status__today { padding-left: 5%; }
}

/* ---------- App-banner ---------- */

.cl-app-banner { position: relative; aspect-ratio: 1020 / 338; }
.cl-app-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cl-app-banner__badge { position: absolute; top: 68%; width: 17%; max-width: 173px; }
.cl-app-banner__badge--apple { left: 55.9%; }
.cl-app-banner__badge--google { left: 74.5%; }

@media (max-width: 599px) {
  .cl-app-banner__badge { display: none; } /* tekst in de banner wordt te klein om badges nog netjes te plaatsen */
}

/* ---------- Belangrijke informatie ---------- */

.cl-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px 60px;
  padding: 20px 5% 50px;
  text-align: left;
}

.cl-info-item { display: flex; gap: 30px; padding-right: 20px; }
.cl-info-item > img { width: 140px; height: 140px; flex-shrink: 0; }
.cl-info-item__body { padding-top: 10px; }
.cl-info-item__body b { display: block; margin-bottom: 12px; font-size: 16px; }
.cl-info-item__body p { padding: 0; margin: 0; font-size: 14px; line-height: 1.7; }
/* Float i.p.v. absolute positie: de knop blijft binnen de tekstkolom, ook als
   de tekstlengte per onderdeel verschilt. */
.cl-info-item__play { display: inline-block; float: right; margin: 14px 0 0; line-height: 0; }
.cl-info-item__play img { width: 32px; height: 32px; }

@media (max-width: 900px) {
  /* Op tablet eerst terug naar 1 brede kolom: icoon + tekst blijven naast
     elkaar, maar de tekst krijgt weer voldoende breedte. */
  .cl-info-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 480px) {
  /* Op een telefoon knijpt icoon-naast-tekst de tekstkolom te smal:
     icoon boven de tekst is dan leesbaarder dan zij-aan-zij. */
  .cl-info-item { flex-direction: column; gap: 14px; }
  .cl-info-item > img { width: 100px; height: 100px; }
}

/* ---------- Instructievideo's ---------- */

/* Grid i.p.v. flex-wrap: zo springt de layout in één keer van 3-op-een-rij naar
   gestapeld, nooit een tussenstand van 2 naast elkaar met 1 erbij op een eigen rij.
   Kolombreedte is flexibel (minmax 0/1fr) zodat ze bij het krimpen nooit overlopen
   vóór de breakpoint; de video's houden via aspect-ratio altijd dezelfde verhouding. */
.cl-videos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  padding: 10px 5% 30px;
}
.cl-video { text-align: left; }
.cl-video video {
  display: block;
  width: 100%;
  aspect-ratio: 290 / 516;
  background: #000;
  border: 1px solid var(--kr-button);
  object-fit: cover;
}
.cl-video b { display: block; margin-top: 14px; }
.cl-video p { padding: 0; margin: 8px 0 0; font-size: 13px; line-height: 1.6; }

/* Breakpoint bewust onder de iPad-breedte (768px staand / 1024px liggend),
   zodat de 3 video's op een iPad altijd naast elkaar blijven staan. */
@media (max-width: 650px) {
  .cl-videos { grid-template-columns: 1fr; max-width: 290px; margin: 0 auto; }
}

/* ---------- Eigenaren (overzicht + detail) ---------- */

.cl-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 5% 40px;
  text-align: left;
}
/* Voor een scherm met van nature veel/brede kolommen (bv. het Report
   bookkeeping-overzicht, 15 kolommen) — de standaard 900px liet daar bijna
   niets van de tabel zien zonder te scrollen, wat als "ontbrekende velden"
   overkwam. .cl-table-wrap vangt een te smal scherm nog altijd op. */
.cl-page--wide { max-width: 1600px; }

/* Op een telefoon kan een tabel met veel kolommen breder zijn dan het scherm;
   dan scrollt alleen de tabel zelf horizontaal (ipv de hele pagina, zie ook
   de overflow-x: hidden op html in site.css als vangnet). */
.cl-table-wrap { overflow-x: auto; }

.cl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cl-table th, .cl-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.cl-table th { font-weight: bold; color: var(--kr-line); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.cl-table tr:last-child td { border-bottom: none; }
.cl-table a { text-decoration: underline; }
.cl-table a:hover { text-decoration: none; }
.cl-table a.btn { text-decoration: none; }
/* Laatste kolom (bv. de − knop) krimpt naar de inhoud en staat daardoor altijd
   tegen de rechterkant, op dezelfde inspringing als de +-knop hierboven. */
.cl-table th:last-child, .cl-table td:last-child { width: 1%; white-space: nowrap; text-align: right; }
/* Overzichtskolommen met meerdere regels (bv. prijsperiodes) moeten juist niet
   krimpen/afkappen, ook niet als het de laatste kolom is. */
.cl-table th:last-child.cl-col-wide, .cl-table td:last-child.cl-col-wide { width: auto; white-space: normal; text-align: left; }

.cl-empty-state { padding: 30px 0; color: var(--kr-line); font-size: 13px; }

/* Betaalstatus-stoplicht op het Summary-overzicht (SummaryController) —
   glanzende bolletjes met een lichtpuntje, zelfde idee als de bol_rood/
   bol_oranje/bol_groen/bol_grijs-icoontjes van de oude site. */
.cl-paid-dot {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset -3px -3px 5px rgba(0, 0, 0, .45), inset 2px 2px 4px rgba(255, 255, 255, .6), 0 1px 2px rgba(0, 0, 0, .4);
}
.cl-paid-dot--unpaid { background: radial-gradient(circle at 32% 28%, #ff6b5b, #e60000); }
.cl-paid-dot--partial { background: radial-gradient(circle at 32% 28%, #ffd966, #ff9800); }
.cl-paid-dot--paid { background: radial-gradient(circle at 32% 28%, #8bea8b, #2eb82e); }
.cl-paid-dot--other { background: radial-gradient(circle at 32% 28%, #f5f5f5, #b0b0b0); }

/* Klikbare sorteerkoppen op het Summary-overzicht. */
.cl-sort-link { color: inherit; text-decoration: none; }
.cl-sort-link:hover { text-decoration: underline; }
.cl-sort-arrow { font-size: 9px; margin-left: 3px; }

/* Prijzen-/bezettingskalender op het Availability-rapport (AvailabilityController) —
   effen vakjes, zelfde kleurgeest als het betaalstatus-stoplicht hierboven.
   border-collapse: separate (i.p.v. .cl-table's collapse) hier lokaal nodig:
   met collapse hoort de rand tussen de vaste kolom en de scrollende kolommen
   bij geen van beide cellen, waardoor er een dun stukje van de scrollende
   inhoud door de (semi-transparante) rand heen bleeft zichtbaar blijft. */
.cl-avail-table { border-collapse: separate; border-spacing: 0; }
.cl-avail-table th, .cl-avail-table td { text-align: center; padding: 6px 8px; }
/* Appartementkolom blijft vastzitten bij het horizontaal scrollen door de
   datumkolommen — effen achtergrond nodig zodat de scrollende cellen er niet
   doorheen schemeren, zelfde kleur als de sectie-achtergrond van deze pagina. */
.cl-avail-table th:first-child, .cl-avail-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--kr-brown);
  box-shadow: 2px 0 4px rgba(0, 0, 0, .25);
}
/* Report bookkeeping — 15 kolommen, Boekingsdatum + Appartement blijven
   vastzitten bij het horizontaal scrollen zodat je altijd weet bij welke
   boeking een bedrag hoort (zelfde reden/techniek als .cl-avail-table
   hierboven: border-collapse: separate i.p.v. collapse). */
.cl-bookkeeping-table { border-collapse: separate; border-spacing: 0; white-space: nowrap; }
/* Boekingsdatum is altijd exact "dd-mm-jjjj / dd-mm-jjjj" (vaste lengte,
   nooit korter/langer) — de natuurlijke kolombreedte ligt dus ook vast. Geen
   losse width hier opleggen: een expliciete width op een position: sticky
   tabelcel wordt door de browser's auto-tabellayout genegeerd (de kolom
   rendert dan gewoon zo breed als de inhoud nodig heeft, ~199px), waardoor
   de 2e vastgezette kolom hieronder met een hardcoded `left` niet precies op
   de rand aansluit — vandaar dat díe waarde hier is afgestemd op de
   daadwerkelijk gerenderde breedte, niet op een losse width-declaratie. */
.cl-bookkeeping-table th:nth-child(1), .cl-bookkeeping-table td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--kr-brown);
}
.cl-bookkeeping-table th:nth-child(2), .cl-bookkeeping-table td:nth-child(2) {
  position: sticky;
  /* Nooit groter dan kolom 1's werkelijke breedte (~199px) — is de
     sticky-drempel ook maar een fractie breder, dan "hangt" deze kolom
     daar al vanaf het begin (ook ongescrold) een stukje los van kolom 1,
     met een kier waar de niet-vastgezette kolommen achter doorheen
     schemeren. Liever een onmerkbare sub-pixel overlap dan die kier. */
  left: 198px;
  z-index: 1;
  background: var(--kr-brown);
  box-shadow: 2px 0 4px rgba(0, 0, 0, .25);
}

.cl-avail-cell {
  display: inline-block;
  min-width: 36px;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
}
.cl-avail-cell--available { background: #2eb82e; }
.cl-avail-cell--occupied { background: #e60000; }

.cl-rate-chip { font-size: 12px; line-height: 1.6; }
.cl-rate-chip + .cl-rate-chip { margin-top: 2px; }

/* Label+waarde-rijen, zelfde opbouw als de velden-schermen uit de oude Customer Lounge. */
.cl-fields { margin: 0 0 40px; }
.cl-fields h2 { margin: 0 0 18px; font-size: 16px; font-weight: bold; }
.cl-field { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: center; padding: 8px 0; }
/* Voor een .cl-field waarvan de dd flink hoger kan worden dan de dt (bv. een
   opengeklapte Details-sectie op het Reserveringen-overzicht) — anders blijft
   de dt verticaal gecentreerd ten opzichte van de hele (dan hoge) rij. */
.cl-field--top { align-items: start; }
.cl-field dt { margin: 0; color: var(--kr-line); font-size: 13px; }
.cl-field dd { margin: 0; padding: 10px 14px; background: rgba(255, 255, 255, .95); color: #231F18; border-radius: 2px; font-size: 13px; min-height: 1.2em; }
.cl-field dd:empty::before { content: "—"; color: #999; }
.cl-field dd.is-empty { color: #999; }
/* De globale `a { color: var(--kr-white) }` is onleesbaar op de lichte
   achtergrond van .cl-field dd (bv. de link naar de eigen boeking op het
   Reserveringen-overzicht). */
.cl-field dd a { color: var(--kr-dark); text-decoration: underline; }

@media (max-width: 599px) {
  .cl-field { grid-template-columns: 1fr; gap: 4px; }
}

/* "Boeking annuleren" op het Reserveringen-overzicht: inline naast de
   boekingstekst op een breed scherm, maar op een smal scherm (waar het
   anders meteen onder de tekst plakt) een eigen regel met ruimte erboven. */
.cl-cancel-booking-form { display: inline; }
@media (max-width: 599px) {
  .cl-cancel-booking-form { display: block; margin-top: 10px; }
  .cl-cancel-booking-form .btn { margin-left: 0 !important; }
}

.cl-back {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--kr-line);
}
.cl-back:hover { color: var(--kr-white); }

/* Edit-knop rechtsboven een .cl-fields-blok, en invoervelden die er hetzelfde
   uitzien als de read-only .cl-field dd hierboven. */
.cl-fields__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cl-fields__header h2 { margin: 0; }

.cl-edit-btn {
  display: inline-block;
  padding: 8px 16px;
  font: 12px var(--kr-font);
  color: var(--kr-white);
  background: var(--kr-button);
  text-decoration: none;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}
.cl-edit-btn:hover { background: var(--kr-tan); }

/* Titelbalk boven een overzichtstabel (met + om toe te voegen), en het
   kleine ronde +/- knopje zelf, in en uit een rij. */
/* padding-right zodat de +-knop op dezelfde inspringing staat als de − knop
   in de laatste tabelkolom hieronder (die heeft 14px celpadding). */
.cl-page__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-right: 14px; }

.cl-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  font: bold 16px/1 var(--kr-font);
  color: var(--kr-white);
  background: var(--kr-button);
  border: none;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
}
.cl-icon-btn:hover { background: var(--kr-tan); }

.cl-field input,
.cl-field select,
.cl-field textarea {
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .95);
  color: #231F18;
  border: none;
  border-radius: 2px;
  font: 13px var(--kr-font);
}
/* Zelfde reden als .cl-rate-form select hieronder: zonder appearance: none
   houdt een <select> zijn eigen besturingssysteem-hoogte aan, ook met
   dezelfde padding als de tekstvelden ernaast op dit scherm. */
.cl-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 32px;
  background: rgba(255, 255, 255, .95) url(../images/icon_select.png) right 10px center no-repeat;
  background-size: 14px;
}
.cl-field textarea { resize: vertical; }
.cl-field:has(textarea) { align-items: start; }
.cl-field input:focus,
.cl-field select:focus,
.cl-field textarea:focus { outline: 2px solid var(--kr-tan); }

.cl-form__actions { display: flex; gap: 12px; margin-top: 30px; }
.btn--danger { background: #8a3a2f; }
.btn--danger:hover { background: #b14a3b; }
.btn--success { background: #3f6b3a; cursor: default; }
.btn--success:hover { background: #3f6b3a; }
.btn--place-order { background: var(--kr-tan); }

.cl-section-block { padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .15); }
.cl-section-block:first-child { border-top: none; padding-top: 0; }
.cl-section-block__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

.cl-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-bottom: 20px; }
.cl-photo-grid__item { position: relative; }
.cl-photo-grid__item img { display: block; width: 100%; height: 120px; object-fit: cover; border-radius: 2px; }
.cl-photo-grid__item form { position: absolute; top: 6px; right: 6px; }
.cl-photo-grid__item .cl-icon-btn { width: 24px; height: 24px; font-size: 14px; }

.cl-flash {
  margin: 0 0 24px;
  padding: 12px 16px;
  background: rgba(130, 180, 120, .25);
  border: 1px solid rgba(130, 180, 120, .5);
  border-radius: 2px;
  font-size: 13px;
}
.cl-flash--error {
  background: rgba(200, 110, 90, .22);
  border-color: rgba(200, 110, 90, .5);
}

/* ---------- Checklist (cluster-leden) en prijsperiodes-tabel ---------- */

.cl-select-all { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 6px 0; font-size: 13px; font-weight: bold; cursor: pointer; }
.cl-select-all input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; }
.cl-checklist { list-style: none; margin: 0 0 20px; padding: 0; max-height: 420px; overflow-y: auto; }
.cl-checklist li { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 13px; }
.cl-checklist label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cl-checklist input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; }

.cl-rate-form {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 30px;
}
.cl-rate-form label { display: block; margin-bottom: 6px; font-size: 12px; color: var(--kr-line); }
.cl-rate-form input, .cl-rate-form select {
  width: 100%;
  padding: 10px;
  background: rgba(255, 255, 255, .95);
  color: #231F18;
  border: none;
  border-radius: 2px;
  font: 13px var(--kr-font);
}
/* Zonder appearance: none houdt een <select> zijn eigen besturingssysteem-hoogte
   aan, ook met dezelfde padding als het datumveld ernaast — appearance: none +
   een eigen pijltje (zelfde icoon als site.css's .field-select) maakt 'm even
   hoog als de andere velden in deze rij. */
.cl-rate-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 32px;
  background: rgba(255, 255, 255, .95) url(../images/icon_select.png) right 10px center no-repeat;
  background-size: 14px;
}

.flatpickr-calendar {
  transform: scale(1.2);
  transform-origin: top left;
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--kr-tan);
  border-color: var(--kr-tan);
}
.flatpickr-day.today {
  border-color: var(--kr-tan);
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
span.flatpickr-weekday {
  color: var(--kr-dark);
}

@media (max-width: 768px) {
  .cl-rate-form { grid-template-columns: 1fr 1fr; }
}

/* Navbalk links uitlijnen met het logo — alleen hier in de Customer Lounge
   (een werkomgeving, geen marketingpagina); de publieke site houdt zijn
   gecentreerde navbalk (.menu uit site.css). */
body.cl .menu { text-align: left; padding-left: 50px; }
@media (max-width: 959px) {
  body.cl .menu { padding-left: 0; }
}

/* ---------- Praktische-informatie detailpagina (Quill-content) ---------- */

.cl-rich-content { text-align: left; line-height: 1.7; }
.cl-rich-content h3, .cl-rich-content h4 { margin: 24px 0 10px; color: var(--kr-white); }
.cl-rich-content h3:first-child, .cl-rich-content h4:first-child { margin-top: 0; }
.cl-rich-content p { margin: 0 0 14px; }
.cl-rich-content ul, .cl-rich-content ol { margin: 0 0 14px; padding-left: 22px; }
.cl-rich-content li { margin-bottom: 4px; }
.cl-rich-content a { color: var(--kr-tan); }
.cl-rich-content strong { color: var(--kr-white); }
.cl-rich-content img { max-width: 100%; height: auto; border-radius: 4px; margin: 0 0 14px; display: block; }

/* ---------- Broodservice ---------- */

.cl-breakfast-day { margin: 0 0 28px; padding: 0 0 20px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.cl-breakfast-day:last-of-type { border-bottom: none; }
.cl-breakfast-day h3 { margin: 0 0 10px; font-size: 16px; }
.cl-breakfast-day__status { margin: 0; font-size: 13px; color: var(--kr-tan); }
.cl-breakfast-day__status--closed { color: var(--kr-line); }
.cl-breakfast-day__summary { margin: 6px 0 0; padding-left: 20px; font-size: 13px; }
.cl-breakfast-day__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cl-breakfast-day__table td { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); vertical-align: middle; }
/* Kolomkoppen (bv. "Startdatum" boven de datumvelden) — zelfde gedempte
   stijl als de .cl-table th's elders, maar dan voor deze specifieke tabel. */
.cl-breakfast-day__table th { padding: 0 0 6px; font-weight: normal; color: var(--kr-line); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; text-align: left; }
.cl-breakfast-day__name { display: flex; align-items: center; gap: 8px; }
/* Duur-select (ski-pass-orders) had nog helemaal geen eigen stijl — de
   besturingssysteem-standaard-select steekt af tegen de rest van dit donkere
   scherm. Zelfde donkere veldstijl als het aantal-veld hieronder, met het
   lichte pijltje (icon_select1) dat ook .lang-select op een donkere
   achtergrond gebruikt. */
.cl-breakfast-day__name select {
  padding: 6px 28px 6px 8px;
  border: 1px solid var(--kr-line);
  border-radius: 2px;
  background: rgba(0, 0, 0, .25) url(../images/icon_select1.png) right 8px center no-repeat;
  background-size: 12px;
  color: var(--kr-white);
  font: 13px var(--kr-font);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.cl-breakfast-day__price { color: var(--kr-line); width: 90px; }
.cl-breakfast-day__qty { width: 70px; text-align: right; }
.cl-breakfast-day__qty input {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid var(--kr-line);
  border-radius: 2px;
  background: rgba(0, 0, 0, .25);
  color: var(--kr-white);
  /* Laat de op-/neer-pijltjes van het getalveld het donkere thema volgen
     (dan tekent de browser ze licht), anders zijn ze onzichtbaar op deze
     donkere achtergrond. */
  color-scheme: dark;
}

.cl-info-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--kr-line);
  border-radius: 50%;
  background: transparent;
  color: var(--kr-line);
  font-size: 11px;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
}
.cl-info-btn:hover { border-color: var(--kr-tan); color: var(--kr-tan); }