/* ===== Reset & basis ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background-color: #f4f4f1;
  color: #2b2b2b;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ===== Layout ===== */
.pagina {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 0 120px 0; /* ruimte voor sticky knop */
}

/* ===== Header ===== */
.header {
  padding: 20px 16px 16px;
  border-bottom: 1px solid #e5e5e0;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-meta {
  font-size: 13px;
  color: #6b6b66;
  font-weight: 500;
  margin-bottom: 4px;
}

.header-groet {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

/* ===== Toelichting ===== */
.toelichting {
  padding: 14px 16px;
  font-size: 14px;
  color: #6b6b66;
  line-height: 1.5;
}

/* ===== Vlucht-card ===== */
.vlucht-card {
  background: #fff;
  border-top: 1px solid #e5e5e0;
  border-bottom: 1px solid #e5e5e0;
  margin-bottom: 8px;
  padding: 16px;
}

.vlucht-naam {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 3px;
}

.vlucht-meta {
  font-size: 13px;
  color: #6b6b66;
  margin-bottom: 16px;
  line-height: 1.4;
}

.vlucht-meta .deadline-urgent {
  color: #c2410c;
  font-weight: 500;
}

/* ===== Teller-gebied ===== */
.teller-gebied {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.teller-knop {
  width: 36px;
  height: 36px;
  border: 1.5px solid #d5d5d0;
  border-radius: 8px;
  background: #fff;
  font-size: 20px;
  color: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.1s, border-color 0.1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.teller-knop:active { background: #f4f4f1; border-color: #a5a5a0; }
.teller-knop:disabled { opacity: 0.35; cursor: default; }

.teller-invoer {
  width: 64px;
  height: 36px;
  border: 1.5px solid #d5d5d0;
  border-radius: 8px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  background: #fff;
  -moz-appearance: textfield;
}

.teller-invoer::-webkit-outer-spin-button,
.teller-invoer::-webkit-inner-spin-button { -webkit-appearance: none; }

.teller-label {
  font-size: 14px;
  color: #6b6b66;
}

/* Teller actief (aantal > 0) */
.teller-actief .teller-invoer {
  border-color: #1a1a1a;
  background: #fff;
}

/* ===== Niet-mee knop ===== */
.niet-mee-knop {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1.5px solid #d5d5d0;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: #6b6b66;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.1s, border-color 0.1s;
  white-space: nowrap;
}

.niet-mee-knop:active { background: #f4f4f1; }

/* ===== Doet-niet-mee blok ===== */
.niet-mee-blok {
  display: none;
  align-items: center;
  justify-content: space-between;
  background: #f4f4f1;
  border-radius: 8px;
  padding: 12px 14px;
}

.niet-mee-blok.zichtbaar { display: flex; }

.niet-mee-label {
  font-size: 14px;
  color: #6b6b66;
  font-weight: 500;
}

.toch-meedoen-knop {
  background: none;
  border: none;
  font-size: 14px;
  color: #1a1a1a;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Verberg teller-gebied als niet-mee actief */
.niet-mee-actief .teller-deel { display: none; }

/* ===== Nog geen keuze-hint ===== */
.geen-keuze-hint {
  font-size: 13px;
  color: #a5a5a0;
  font-style: italic;
  margin-bottom: 12px;
  display: none;
}

/* ===== Bevestig-knop (sticky onderaan) ===== */
.sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(244, 244, 241, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid #e5e5e0;
  z-index: 20;
}

.bevestig-knop {
  display: block;
  width: 100%;
  height: 52px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.15s;
}

.bevestig-knop:active { background: #333; }
.bevestig-knop:disabled { background: #a5a5a0; cursor: default; }

.bevestig-inline-wrapper {
  margin: 24px auto 80px;
  text-align: center;
}
.bevestig-inline {
  display: inline-block;
  width: auto;
  min-width: 280px;
  padding: 0 32px;
}

/* ===== Leeg-staat (geen open vluchten) ===== */
.leeg-staat {
  padding: 48px 24px;
  text-align: center;
}

.leeg-staat-titel {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.leeg-staat-tekst {
  font-size: 15px;
  color: #6b6b66;
  line-height: 1.6;
}

/* ===== Bevestigingspagina ===== */
.bevestiging-header {
  padding: 32px 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.bevestiging-vinkje {
  width: 36px;
  height: 36px;
  background: #d1e7d0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  color: #2d6a2b;
  font-weight: 700;
  margin-top: 2px;
}

.bevestiging-titel {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
}

.bevestiging-subtitel {
  font-size: 14px;
  color: #6b6b66;
  margin-top: 4px;
  line-height: 1.5;
}

.bevestiging-lijst {
  margin: 0 16px 20px;
  border: 1px solid #e5e5e0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.bevestiging-rij {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eae9e3;
}

.bevestiging-rij:last-child { border-bottom: none; }

.bevestiging-vlucht-naam {
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
}

.bevestiging-vlucht-meta {
  font-size: 12px;
  color: #8b8b86;
  margin-top: 2px;
}

.bevestiging-aantal {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
}

.bevestiging-aantal-label {
  font-size: 13px;
  color: #6b6b66;
  margin-left: 4px;
}

.bevestiging-niet-mee {
  display: inline-block;
  padding: 4px 10px;
  background: #eae9e3;
  border-radius: 999px;
  font-size: 12px;
  color: #6b6b66;
  font-weight: 500;
}

.bevestiging-geen-keuze {
  font-size: 13px;
  color: #a5a5a0;
  font-style: italic;
}

.bevestiging-deadline {
  margin: 0 16px 24px;
  font-size: 13px;
  color: #6b6b66;
  text-align: center;
  line-height: 1.5;
}

.bevestiging-deadline strong { color: #2b2b2b; }

.bevestiging-wijzig-knop {
  display: block;
  margin: 0 16px 12px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border: 1.5px solid #d5d5d0;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  color: #2b2b2b;
  text-decoration: none;
}

/* ===== Foutmelding ===== */
.foutmelding {
  margin: 12px 16px;
  padding: 12px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-size: 14px;
  color: #b91c1c;
  line-height: 1.5;
}

/* ===== Vlucht gesloten ===== */
.vlucht-gesloten {
  opacity: 0.6;
}

.vlucht-gesloten-badge {
  display: inline-block;
  padding: 3px 8px;
  background: #eae9e3;
  border-radius: 4px;
  font-size: 12px;
  color: #6b6b66;
  margin-bottom: 10px;
}

/* ===== Footer ===== */
.pagina-footer {
  padding: 20px 16px;
  text-align: center;
  font-size: 12px;
  color: #9b9b96;
  line-height: 1.6;
}