:root{
  --pink:#ff66c4;
  --blue:#3ddbe1;
  --orange:#ff914d;
  --cream:#fff3c2;
  --text:#111;
  --border:#111;
}

/* Basisinstellingen */
*{
  box-sizing:border-box;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

html, body{
  margin:0;
  overscroll-behavior:contain;
}

body{
  background: var(--cream);
  min-height: 100vh;
  color: var(--text);
}

.rainbow-bg{
  background: linear-gradient(
    to bottom,
    #ff66c4 0%,
    #ff66c4 12.5%,
    #3ddbe1 12.5%,
    #3ddbe1 25%,
    #ff914d 25%,
    #ff914d 37.5%,
    #ffde59 37.5%,
    #ffde59 50%,
    #ff66c4 50%,
    #ff66c4 62.5%,
    #3ddbe1 62.5%,
    #3ddbe1 75%,
    #ff914d 75%,
    #ff914d 87.5%,
    #ffde59 87.5%,
    #ffde59 100%
  );
}

/* ---------- LAYOUT / WRAP ---------- */

.wrap {
  min-height: 100dvh;         /* volle viewport hoogte */
  display: flex;
  flex-direction: column;     /* stapel items onder elkaar */
  justify-content: flex-start;
  align-items: center;        /* horizontale centrering */
  padding: 24px 16px;
  padding-top: 48px;
  text-align: center;
  gap: 20px;                  /* ruimte tussen items */
}

/* Logo styling */
.logo {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 60px;
  height: auto;
  opacity: 0.9;
  z-index: 10;
}

/* Index page specific logo - centered and larger */
.index-logo {
  position: static;
  width: 200px;
  height: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  opacity: 1;
}

/* Success/confirmation image - smaller */
.succes {
  width: 20%;
  max-width: 200px;
  height: auto;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .logo {
    width: 50px;
  }

  .index-logo {
    width: 180px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
}

/* Welkomsttekst */
h1{
  margin:0 0 8px;
  font-size:32px;
  font-weight:800;
  text-align: center;
}

/* Knoppen op indexpagina */
.buttons {
  width: 100%;
  padding: 0 12px;
}

.index-buttons {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.buttons button {
  width: 100%;
  max-width: 420px;
  min-height: 68px;
  padding: 18px 20px;
  font-size: 18px;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  color: var(--text);
}

.buttons button:not(.index-login):hover {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 rgba(0,0,0,.25);
}

.buttons button:not(.index-login):active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 rgba(0,0,0,.2);
}

.buttons button.btn-faq{
  background: var(--blue);
  color: var(--text);
}

.buttons button.btn-login{
  background: var(--orange) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Index page login button - smaller and positioned at bottom */
.index-page {
  overflow-y: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 16px);
}

.index-wrap {
  flex: 1;
  min-height: 0;
  justify-content: center;
  padding-bottom: 0;
  padding-top: 24px;
}

.index-login {
  position: static;
  width: 100%;
  max-width: 360px !important;
  min-height: 60px !important;
  padding: 18px 22px !important;
  font-size: 18px !important;
  background: var(--orange) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.buttons button:hover{
  box-shadow:4px 4px 0 rgba(0,0,0,.25);
}

.index-login:hover {
  box-shadow:4px 4px 0 rgba(0,0,0,.25);
  transform: none;
}

.index-login:active {
  transform: none !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,.25) !important;
}

/* Responsive voor mobiel */
@media (max-width: 600px){
  h1{
    font-size: 1.5rem;
  }

  .buttons button{
    width: 80%;
    font-size: 1rem;
  }

  .index-buttons button {
    width: 100%;
    max-width: 100%;
  }

  .index-login {
    width: 100% !important;
    max-width: 420px !important;
    min-height: 60px !important;
    font-size: 18px !important;
  }
}

/* ---------- KAARTEN (matcht je site-stijl) ---------- */

.card{
  width:100%;
  max-width:100%;
  padding:24px;
  background: var(--cream);
  border:2px solid var(--orange);
  border-radius:6px;
  box-shadow:8px 8px 0 rgba(0,0,0,.25);
  margin: 0 auto; /* belangrijk: centreert op pagina's zoals FAQ */
}

@media (min-width: 768px){
  .card{
    max-width:720px;
    padding:32px;
  }
}

/* Cancel card */
.card.cancel {
  background: #ffb3b3;
  border: 2px solid var(--border);
  color: var(--text);
  text-align: center;
  position: relative;
}

/* Icoon bovenaan */
.card.cancel .icon {
  font-size: 48px;
  margin-bottom: 16px;
}

/* Link kleur */
.card.cancel .link {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}

.card.cancel .link:hover {
  text-decoration: underline;
}

/* Shake animatie */
@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
  100% { transform: translateX(0); }
}

.shake {
  animation: shake 0.6s ease-in-out;
}

/* ---------- FORMS ---------- */

label{
  display:block;
  margin:20px 0 6px;
  font-weight:700;
}

input,
textarea,
select{
  --border-color: black;
  width:100%;
  min-height:48px;
  padding:16px;
  font-size:16px; /* voorkomt iOS zoom */
  border-radius:14px;
  border: 2px solid var(--border-color);
  background: var(--cream);
  color:var(--text);
}

input:focus,
textarea:focus,
select:focus{
  outline:none;
}

input:invalid,
textarea:invalid,

input:valid,
textarea:valid,
select:valid{
  border-color:var(--border-color);
}

/* Dropdown pijltje */
select{
  appearance:none;
  padding-right:44px;
  background-image:
    linear-gradient(45deg, transparent 50%, black 50%),
    linear-gradient(135deg, black 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 4px),
    calc(100% - 16px) calc(50% - 4px);
  background-size:8px 8px;
  background-repeat:no-repeat;
}

/* Flex layout */
.row{
  display:flex;
  flex-direction:column;
  gap:14px;
}

@media (min-width: 768px){
  .row{
    flex-direction:row;
  }
}

/* ---------- CHECKBOX ---------- */

.terms-checkbox {
  margin-top: 24px;
}

/* ---- Custom checkbox + alignment met knoppen ---- */

.terms-checkbox {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 420px;
  width: 100%;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

/* verberg standaard checkbox */
.checkbox-label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* custom checkbox blok */
.custom-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--border);
  background: var(--cream);
  box-shadow: 3px 3px 0 rgba(0,0,0,.25);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* checkmark */
.custom-checkbox::after {
  content: "✓";
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.15s ease-in-out;
}

/* checked state */
.checkbox-label input:checked + .custom-checkbox::after {
  opacity: 1;
  transform: scale(1);
}

.checkbox-text {
  display: block;
}

/* link styling */
.checkbox-text a {
  color: blue;
  font-weight: 700;
  text-decoration: underline;
}

.checkbox-text a:hover {
  text-decoration: none;
}

/* ---------- FAQ Accordion + numbering ---------- */

.faq{
  list-style: none;
  padding-left: 0;
  padding-right: 0;
  margin: 12px 0 0;
  text-align: left;
}

.faq-item{
  margin: 0 0 14px;
  --bg-color: var(--orange);
  background: var(--bg-color);
  border-radius: 6px;

}

.faq-item--blue{
  --bg-color: var(--blue);
}

.faq-item--pink{
  --bg-color: var(--pink);
}

.faq-item details{
  border: 2px solid var(--border);
  border-radius: 6px;
  box-shadow: 6px 6px 0 rgba(0,0,0,.25);
  overflow: hidden;
}

.faq-item summary{
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 400;
  user-select: none;
  list-style: none; /* verberg default marker */
}

.faq-item summary::-webkit-details-marker{
  display: none; /* verberg default pijltje (Safari/Chrome) */
}

/* custom toggle indicator */
.faq-item summary::after{
  content: "＋";
  float: right;
  font-weight: 900;
}

.faq-item details[open] summary::after{
  content: "－";
}

/* body */
.faq-body{
  padding: 0 16px 16px;
}

.faq-body p{
  margin: 12px 0 0;
  line-height: 1.5;
}

.faq-body ul{
  margin: 0;
  padding-left: 18px;
}

.faq-body li{
  margin: 0 0 8px;
  line-height: 1.4;
}

/* Vraag 1: plaatje onder intro, naast bullets */
.faq-grid{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 12px;
}

.faq-grid img{
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 6px;
  border: 2px solid var(--border);
  box-shadow: 6px 6px 0 rgba(0,0,0,.25);
}

/* afsluitzin */
.faq-note{
  margin-top: 14px;
  font-weight: 700;
}

/* Mobiel: onder elkaar */
@media (max-width: 600px){
  .faq-grid{
    grid-template-columns: 1fr;
  }

  .faq-grid img{
    margin: 0 auto;
    max-width: 360px;
  }
}


/* ---------- KNOP ---------- */

button{
  --btn-bg: var(--orange);
  margin-top:28px;
  width:100%;
  min-height:56px;
  padding:16px;
  border-radius:6px;
  border:4px solid var(--border);
  background: var(--btn-bg);
  color: var(--text) !important;
  font-weight:600;
  font-size:18px;
  cursor: pointer;
  box-shadow:6px 6px 0 rgba(0,0,0,.25);
}

.faq-back-button{
  --btn-bg: var(--blue);
  background: var(--blue) !important;
}

.btn-faq{
  --btn-bg: var(--blue);
}

.btn-login{
  --btn-bg: var(--orange);
}

/* Sticky knop op mobiel */
@media (max-width: 767px){
  button{
    position:sticky;
    bottom:12px;
    z-index:5;
  }

  .index-page button{
    position: static;
  }
}

#print-area {
  display: none;
}

/* ---------- PRINT ---------- */
@media print {
  body * {
    visibility: hidden;
  }

  #print-area, #print-area * {
    visibility: visible;
  }

  #print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: block;
  }

  .print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
  }

  .print-table th,
  .print-table td {
    border: 1px solid #000;
    padding: 12px;
    text-align: left;
  }

  .print-table th {
    background: #eee;
  }
}

/* Foutmelding */
.error{
  margin-top:14px;
  font-weight:700;
  color:#b00020;
  padding: 16px;
  background-color: #ffebee;
  border: 2px solid #d32f2f;
  border-radius: 6px;
  display: none;
  text-align: center;
  animation: shake 0.3s ease-in-out;
}

.error.show {
  display: block;
}

.success {
  padding: 16px;
  background-color: #e8f5e9;
  border: 2px solid #4caf50;
  border-radius: 6px;
  color: #4caf50;
  font-weight: 600;
  display: none;
  text-align: center;
}

.success.show {
  display: block;
}

/* ---------- FORM IMPROVEMENTS ---------- */

.card {
  background-color: var(--cream);
  border: 2px solid var(--border);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 20px 16px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

label {
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pink);
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 16px;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 6px;
  background-color: var(--cream);
  color: var(--text);
  transition: all 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  min-height: auto;
}

input:hover,
select:hover,
textarea:hover {
  background-color: #fafafa;
  border-color: #ddd;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 102, 196, 0.2);
  border-color: var(--pink);
}

input[type="email"]:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(61, 219, 225, 0.2);
}

input[type="tel"]:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 145, 77, 0.2);
}

/* Select arrow styling */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23111' d='M1 4l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Two-column layout for larger screens */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 480px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  opacity: 1;
}

.custom-checkbox {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--border);
  border-radius: 4px;
  background-color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + .custom-checkbox {
  background-color: var(--pink);
  border-color: var(--pink);
}

input[type="checkbox"]:checked + .custom-checkbox::after {
  content: "✓";
  color: white;
  font-weight: bold;
  font-size: 14px;
}

.checkbox-text {
  text-align: left;
  text-transform: none;
}

.checkbox-text a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--blue);
  text-transform: uppercase;
  font-size: 12px;
}

.checkbox-text a:hover {
  color: var(--pink);
  border-bottom-color: var(--pink);
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin-top: 3px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
  padding: 2px 2px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.radio-label:hover {
  background-color: rgba(255, 102, 196, 0.02);
}

.radio-custom {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + .radio-custom {
  background-color: var(--pink);
  border-color: var(--pink);
  box-shadow: inset 0 0 0 3px white;
}

input[type="radio"]:checked ~ span {
  font-weight: 600;
  color: var(--pink);
}

button {
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: 6px;
  background-color: var(--pink);
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-height: 56px;
  width: 100%;
  margin-top: 20px;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #ccc;
}

.intro {
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: black;
}

.required-note {
  font-size: 12px;
  text-align: center;
  color: #666;
  margin-top: 24px;
}

/* Footer */
.site-footer {
  background: transparent;
  color: #666;
  padding: 24px 16px;
  text-align: center;
  margin-top: auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

.footer-content {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-copy-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-copy {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-links a {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--pink);
}

.footer-separator {
  color: #666;
  opacity: 0.5;
}

.payment-methods {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.payment-logo {
  height: 32px;
  width: auto;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.payment-logo:hover {
  opacity: 1;
}

@media (max-width: 600px) {
  .site-footer {
    padding: 20px 16px;
  }
  
  .footer-copy {
    font-size: 13px;
  }
  
  .footer-links a {
    font-size: 13px;
  }
}