/* TopClean klantportaal */
:root {
  --inkt: #1E2427;
  --tekst: #3A4650;
  --zacht: #56606A;
  --lijn: #DCE4D6;
  --groen: #3E7A1B;
  --groen-licht: #F1F6EC;
  --blauw: #2B6E9E;
  --blauw-licht: #E0ECF6;
  --geel-bg: #FFF4D6; --geel-tekst: #7A5200;
  --rood-bg: #FDE5E3; --rood-tekst: #A1261B;
  --groen-bg: #E3F2D9; --groen-tekst: #2F5F12;
  --grijs-bg: #ECEFF1; --grijs-tekst: #4A545C;
  --blauw-bg: #E0ECF6; --blauw-tekst: #1F5378;
  --vlak: #F6F8F5;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--vlak); color: var(--inkt);
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.55;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--blauw); }
a:hover { color: #1F5378; }
h1, h2, h3 { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600; line-height: 1.15; margin: 0 0 12px; }
h1 { font-size: 34px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
p { margin: 0 0 12px; }

/* Kop */
.kop { background: #FFFFFF; border-bottom: 1px solid var(--lijn); }
.kop-binnen, .menu-binnen, .voet-binnen { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.kop-binnen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-top: 12px; padding-bottom: 12px; }
.merk { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--inkt); }
.merk span { display: flex; flex-direction: column; line-height: 1; }
.merk b { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: 21px; letter-spacing: 1.2px; }
.merk small { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: 11px; letter-spacing: 3px; color: var(--groen); margin-top: 4px; }
.kop-rechts { display: flex; align-items: center; gap: 14px; }
.account-link { font-weight: 600; text-decoration: none; color: var(--inkt); }
.menu { border-top: 1px solid var(--lijn); }
.menu-binnen { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.menu a {
  flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px;
  color: var(--tekst); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent;
}
.menu a:hover { color: var(--inkt); }
.menu a.actief { color: var(--inkt); border-bottom-color: var(--groen); }

/* Inhoud */
.inhoud { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 28px 20px 56px; }
.smal .inhoud { max-width: 560px; }
.kaart { background: #FFFFFF; border: 1px solid var(--lijn); border-radius: 16px; padding: 22px; margin-bottom: 20px; min-width: 0; }
.kaart > :last-child { margin-bottom: 0; }
.kaart-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.kaart-kop h2 { margin: 0; }
.raster { display: grid; gap: 20px; }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.raster > .kaart { margin-bottom: 0; }
.paginakop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 20px; }
.paginakop h1 { margin: 0; }
.ondertitel { color: var(--zacht); font-size: 17px; }
.klein { font-size: 14px; color: var(--zacht); }
.leeg { color: var(--zacht); font-style: italic; margin: 0; }
.terug { display: inline-block; margin-bottom: 12px; font-weight: 600; text-decoration: none; }

/* Cijfers */
.cijfer { display: block; text-decoration: none; color: inherit; }
.cijfer strong { display: block; font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: 40px; font-weight: 600; line-height: 1.1; }
.cijfer span { color: var(--zacht); font-weight: 600; }
a.cijfer:hover strong { color: var(--groen); }

/* Knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: 10px; border: 2px solid var(--groen);
  background: var(--groen); color: #FFFFFF; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.knop:hover { background: #33661A; border-color: #33661A; color: #FFFFFF; }
.knop-groot { width: 100%; min-height: 52px; margin-top: 8px; }
.knop-klein { min-height: 38px; padding: 0 14px; font-size: 15px; }
.knop-rand { background: #FFFFFF; color: var(--blauw); border-color: var(--blauw); }
.knop-rand:hover { background: var(--blauw-licht); color: #1F5378; border-color: #1F5378; }
.knop-rood { background: #FFFFFF; color: var(--rood-tekst); border-color: #E3A39C; }
.knop-rood:hover { background: var(--rood-bg); color: var(--rood-tekst); border-color: var(--rood-tekst); }
.knoppen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
form.inline { display: inline; margin: 0; }

/* Formulieren */
.formulier { display: flex; flex-direction: column; gap: 6px; }
.formulier h2 { margin-top: 18px; }
.formulier label { font-size: 14px; font-weight: 600; color: var(--zacht); margin-top: 8px; }
.formulier .vinkje { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--tekst); margin-top: 12px; }
input, select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #C9D6C0; border-radius: 10px;
  font: inherit; color: var(--inkt); background: #FFFFFF;
}
input[type=checkbox] { width: 22px; min-height: 22px; height: 22px; accent-color: var(--groen); }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus, .knop:focus-visible, a:focus-visible { outline: 3px solid #9CC3E3; outline-offset: 1px; }
.velden-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.velden-2 > div { display: flex; flex-direction: column; gap: 6px; }
details.uitklap { border: 1px dashed #B9C9AE; border-radius: 12px; padding: 0 16px; margin-bottom: 16px; background: #FFFFFF; }
details.uitklap > summary { cursor: pointer; font-weight: 700; color: var(--groen); min-height: 48px; display: flex; align-items: center; }
details.uitklap[open] { padding-bottom: 16px; }

/* Meldingen */
.melding { border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-weight: 500; }
.melding-ok { background: var(--groen-bg); color: var(--groen-tekst); }
.melding-fout { background: var(--rood-bg); color: var(--rood-tekst); }
.melding-waarschuwing { background: var(--geel-bg); color: var(--geel-tekst); }
.melding-info { background: var(--blauw-bg); color: var(--blauw-tekst); }
.wachtwoord-toon { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; font-weight: 700; letter-spacing: 1px; background: #FFFFFF; padding: 4px 10px; border-radius: 8px; display: inline-block; margin: 4px 0; }

/* Labels */
.label { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.label-geel { background: var(--geel-bg); color: var(--geel-tekst); }
.label-groen { background: var(--groen-bg); color: var(--groen-tekst); }
.label-rood { background: var(--rood-bg); color: var(--rood-tekst); }
.label-grijs { background: var(--grijs-bg); color: var(--grijs-tekst); }
.label-blauw { background: var(--blauw-bg); color: var(--blauw-tekst); }

/* Lijsten van afspraken / facturen / berichten */
.lijst { list-style: none; margin: 0; padding: 0; }
.lijst > li { border-top: 1px solid var(--lijn); padding: 14px 0; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.lijst > li:first-child { border-top: 0; padding-top: 0; }
.lijst > li:last-child { padding-bottom: 0; }
.lijst .hoofd { flex: 1 1 260px; min-width: 0; }
.lijst .hoofd strong { display: block; font-size: 17px; }
.lijst .sub { color: var(--zacht); font-size: 15px; }
.lijst .rechts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lijst a.hoofd { text-decoration: none; color: inherit; }
.lijst a.hoofd:hover strong { color: var(--blauw); }
.datumblok { flex: none; width: 62px; text-align: center; border-radius: 12px; background: var(--groen-licht); padding: 6px 0; line-height: 1.1; }
.datumblok b { display: block; font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: 24px; }
.datumblok span { font-size: 13px; font-weight: 700; color: var(--groen); text-transform: uppercase; }

/* Reservering die bevestigd moet worden */
.actie { border: 2px solid #E8C86B; background: #FFFBEF; }
.actie .prijs { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: 26px; font-weight: 600; }

/* Gegevens */
.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; }
.gegevens dt { color: var(--zacht); font-weight: 600; }
.gegevens dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Tabellen */
.tabel-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; color: var(--zacht); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px; border-bottom: 2px solid var(--lijn); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }

/* Gesprek */
.gesprek { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.regel { max-width: 85%; border-radius: 14px; padding: 12px 16px; background: #FFFFFF; border: 1px solid var(--lijn); }
.regel.van-topclean { align-self: flex-start; background: var(--blauw-licht); border-color: #C3D9EC; }
.regel.van-klant { align-self: flex-end; background: var(--groen-licht); border-color: #D2E4C4; }
.regel .wie { font-size: 13px; font-weight: 700; color: var(--zacht); margin-bottom: 4px; }
.regel .tekst { overflow-wrap: anywhere; }

/* Inloggen */
.inlog { max-width: 460px; margin: 20px auto 0; }

/* Voet */
.voet { background: var(--inkt); color: #C9D1CC; font-size: 14px; }
.voet-binnen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-top: 18px; padding-bottom: 18px; }
.voet a { color: #C9D1CC; }

@media (max-width: 640px) {
  h1 { font-size: 28px; }
  .inhoud { padding: 20px 16px 48px; }
  .kop-binnen, .menu-binnen, .voet-binnen { padding-left: 16px; padding-right: 16px; }
  .kaart { padding: 18px; }
  .account-link { display: none; }
  .regel { max-width: 100%; }
  .lijst .rechts { width: 100%; }
}

@media (max-width: 640px) {
  .raster-3 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .raster-3 .kaart { padding: 14px; }
  .cijfer strong { font-size: 26px; }
  .cijfer span { font-size: 14px; }
}

/* Registratie */
.verborgen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nog-geen-account { border-top: 1px solid var(--lijn); margin: 20px 0 14px; padding-top: 16px; }
.nog-geen-account p { margin: 0; font-weight: 600; }
.nog-geen-account .knop-groot { margin-top: 8px; }