/* Ticketsysteem 2.0 - publieke ticketpagina */

* { box-sizing: border-box; }

body {
    font-family: "Segoe UI", Arial, sans-serif;
    margin: 0;
    background: #f2f4f7;
    color: #222;
}

.banner { padding: 10px 16px; text-align: center; font-weight: 600; }
.banner-concept { background: #dbe7f6; color: #1e4e8c; }
.banner-testmodus { background: #fff3cd; color: #7a5b00; }

.pagina { max-width: 760px; margin: 0 auto; background: #fff; min-height: 100vh;
          box-shadow: 0 0 12px rgba(0,0,0,0.08); }
.header img { width: 100%; display: block; }
.inhoud { padding: 4px 18px 34px; }

h1 { font-size: 1.6em; margin: 18px 0 4px; }
h2 { font-size: 1.15em; margin: 26px 0 8px; }
.meta { color: #555; margin-bottom: 14px; }
.intro { line-height: 1.55; }

.ticketrij { display: flex; justify-content: space-between; align-items: center; gap: 12px;
             border: 1px solid #e2e5e9; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px;
             flex-wrap: wrap; }
.ticketrij.dicht { opacity: 0.6; }
.tinfo { flex: 1 1 240px; }
.tnaam { font-weight: 600; }
.tsub { color: #666; font-size: 0.9em; }
.tstatus { color: #a12622; font-size: 0.85em; }
.tprijs { text-align: right; white-space: nowrap; }
.tservice { color: #666; font-size: 0.8em; }
.taantal label { font-size: 0.8em; color: #555; }
select.aantal { padding: 8px 10px; border: 1px solid #bbb; border-radius: 6px; font-size: 1em; background: #fff; }

label { display: block; margin: 12px 0 4px; font-weight: 600; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number],
select, textarea {
    width: 100%; padding: 10px; border: 1px solid #bbb; border-radius: 6px;
    font-size: 1em; font-family: inherit; background: #fff;
}
.hulptekst { display: block; font-size: 0.85em; color: #666; margin-top: 3px; }
.rij-2 { display: flex; gap: 10px; margin-top: 8px; }
.rij-2 > * { flex: 1; }
.checkoptie { display: block; font-weight: 400; margin: 4px 0; }
.checkoptie input { width: auto; }

.deelnemerblok { border: 1px solid #d7dbe0; border-radius: 8px; padding: 14px; margin-top: 14px; background: #fafbfc; }
.deelnemerkop { font-weight: 700; margin-bottom: 4px; }
.kopieerknop { margin: 6px 0 2px; padding: 6px 10px; font-size: 0.85em; border: 1px solid #bbb;
               background: #eef0f3; border-radius: 6px; cursor: pointer; }

.totaalblok { margin-top: 22px; border-top: 2px solid #e2e5e9; padding-top: 12px; }
.totaalregel { display: flex; justify-content: space-between; font-size: 1.2em; font-weight: 700; }
.totaaluitleg { text-align: right; color: #666; font-size: 0.85em; }

.bestelknop { display: block; width: 100%; margin-top: 16px; padding: 14px; font-size: 1.1em;
              font-weight: 700; color: #fff; background: #1a6f3c; border: 0; border-radius: 8px;
              cursor: pointer; }
.bestelknop:disabled { background: #9db8a7; cursor: not-allowed; }

.verborgen { display: none; }

.voet { text-align: center; color: #999; font-size: 0.8em; padding: 14px 0 24px; }

/* ---- Fase 3b: fouten en besteloverzicht ---- */
.foutblok { background: #fdeceb; border: 1px solid #e5b3b0; border-radius: 8px;
            padding: 12px 16px; margin: 14px 0; }
.foutblok ul { margin: 8px 0 0; padding-left: 20px; }

.besteltabel { width: 100%; border-collapse: collapse; margin-top: 8px; }
.besteltabel td { padding: 8px 4px; border-bottom: 1px solid #eef0f3; }
.besteltabel .totaalrij td { font-weight: 700; font-size: 1.1em; border-bottom: 0; }

/* ---- Fase 4: betaallink als knop ---- */
.knop-link { display: inline-block; width: auto; text-decoration: none; text-align: center;
             padding: 12px 26px; }