body {
	font-family: Arial, sans-serif;
	background-color: #f8f8f8;
	margin: 0;
	padding: 1em;
	color: #000;
}


.visually-hidden-content {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


.columns {
  display: flex;
  justify-content: space-between;
  align-items: center;    /* of: baseline */
}
.column {
	display: flex;
  flex-direction: column;
  justify-content: center; /* of: flex-end om onderin te plaatsen */
  padding: 0 10px;
}

.column p {
  margin: 0;
}




.offcanvas {
	position: fixed;
	top: 0;
	right: 0;
	width: 260px;
	height: 100%;
	background-color: #fff;
	box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
  padding-top: 0em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	z-index: 1000;
	border-left: 2px solid #ccc;
}


.offcanvas.show {
  transform: translateX(0);
}







.normal-link {
  gap: 0.5em;
  padding: 8px 12px;
  text-decoration: underline;
	color: black;
	font-size: 1.2em;
	font-weight: bold;
}

.normal-link img {
  height: 48px;
  width: 48px;
}

.normal-link:visited {
	color: black;
}

.normal-link:hover {
  text-decoration: underline;
  color: black;
}





















.offcanvas-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.5em;
  padding: 8px 12px;
  text-decoration: none;
	color: black;
	font-size: 1.2em;
	font-weight: bold;
}

.offcanvas-link img {
  height: 48px;
  width: 48px;
}

.offcanvas-link:visited {
	color: black;
}

.offcanvas-link:hover {
  text-decoration: underline;
  color: black;
}







.dropdown {
  position: relative;
}

.dropdown-toggle {
  cursor: pointer;
  text-align: left;
}

.dropdown-content {
  display: none;
  position: relative;
  padding-left: 1em;
  margin-top: 0.5em;
}

.dropdown-content a {
  display: block;
  font-size: 1.2em;
  color: #007bff;
  text-decoration: none;
  margin-bottom: 0.7em;
}
.dropdown-content a:hover {
  text-decoration: underline;
}

.dropdown.open .dropdown-content {
  display: block;
}


        .dropdown-content {
            display: none;
        }
        .dropdown.open .dropdown-content {
            display: block;
        }



.offcanvas-header {
  display: flex;
  justify-content: space-between; /* spreidt img en button uit naar de twee uiteinden */
  align-items: center;            /* vertical align */
  padding-top: 0.5em;
  padding-left: 0em;
  padding-right: 1em;
  padding-bottom: 1em;                   /* optioneel, voor wat ruimte */
}




.offcanvas nav {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* vloeiend scrollen op mobiel */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE en Edge */
  max-height: calc(100% - 100px); /* voorkomt dat nav hoger is dan de offcanvas */
}

.offcanvas nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}






.icon {
  display: inline-block;
  vertical-align: middle;
  /* maak de afbeelding zwart-wit door filter
  filter: brightness(0) saturate(100%);*/
}


.icon-responsive-normal {
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  fill: red;
}

.title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#zin-box {

/*
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f9f9f9;
  */

  display: flex;
  flex-wrap: wrap;         /* laat content naar een nieuwe regel gaan als hij te breed wordt */
  align-items: center;     /* verticaal centreren */
  /*padding: 0.5rem 1rem;*/
  /*border: 1px solid #ccc;*/
  background: #fafafa;
  /* optioneel: max-width of width: fit-content als je wilt dat hij niet de hele breedte vult */
  /* width: fit-content; */


}

  #zin-output {
    flex: 1 1 auto;          /* mag krimpen en groeien */
    min-width: 0;            /* voorkomt overflow door lange woorden */
    margin: 0 0.5rem;
    word-break: break-word;  /* breek lange woorden af */
  }

  /* Knop blijft gewoon in de flow */
  #wis-knop {
    flex: 0 0 auto;
    margin-left: auto;       /* duwt ‘m helemaal naar rechts */
  }


h1 {
  font-size: 1.8em;
  margin-bottom: 1em;
}

#zin-box {
  font-size: 1.5em;
  padding: 0.5em;
  padding-top: 0.7em;
  margin-bottom: 1em;
  /*border-left: 4px solid #007bff;*/
  /*border-top: 0px solid #007bff;*/
  background: #ddd;
  border-radius: 12px;
}

.tab-bar {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 1em;
  border-bottom: 3px solid #ccc;
  flex-wrap: wrap;
}


/* #tab-bar { display: none !important; } */

  /* Tabs volledig verbergen */
  #tab-bar.tabs-off { display: none !important; }

  /* Alleen de actieve tab tonen */
  #tab-bar.show-only-active .tab-button { display: none !important; }
  #tab-bar.show-only-active .tab-button.active { display: inline-flex !important; }




.carousel-tabs::-webkit-scrollbar {
  display: none;
}


.tab-button {
  display: inline-flex;      /* maak van de knop een flex container */
  flex: 1 1 auto;
  align-items: center;       /* centreer icon en label verticaal */
  gap: 0.5em;                /* ruimte tussen icon en label */
  min-width: 120px;
  font-size: 1.3em;
  padding: 0.2em 1.5em;
  border-radius: 12px;
  background-color: #eee;
  border: 1px solid #ccc;
  cursor: pointer;
  white-space: nowrap;
}



.tab-button.active {
  background-color: #cce0ff;
  border-bottom: 3px solid black;
  border-top: 3px solid black;
  font-weight: bold;
}

.tab-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex: 0 0 24px;
}

.knoppen-groep {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 2em;
}


.bold{
  font-weight: bold;
}


.button-ui {


  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  padding: 0.75em 1.5em;
  border: 2px solid #333;
  border-radius: 12px;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  gap: 0.5em;
  min-height: 48px;
  min-width: 48px;
  text-align: center;
  font-weight: bold;
}

.button-ui:hover {
  background-color: #e6f0ff;
}

.button-ui:active {
  transform: scale(0.98);
  background-color: #cce0ff;
}

.button-s {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  padding: 0.75em 1.5em;
  border: 2px solid #333;
  border-radius: 12px;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  gap: 0.5em;
  min-height: 20px;
  min-width: 20px;
  text-align: center;
  font-weight: bold;
}

.button-s:hover {
  background-color: #e6f0ff;
}

.button-s:active {
  transform: scale(0.98);
  background-color: #cce0ff;
}


.button-systeem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;

  border: 0px solid #333;
  transition: background-color 0.2s, transform 0.1s;
  cursor: pointer;
  background-color: #fff;

  /*
	border-radius: 12px;
	padding: 0.75em 1.5em;
	gap: 0.5em;
  background-color: #fff;
  color: #000;
  cursor: pointer;


  min-height: 20px;
  min-width: 20px;
  text-align: center;
  font-weight: bold;
  */

}







/* ---- */


.button-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  padding: 0em 0.5em;
  background-color: transparent;
  border: none;
  color: #000;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  gap: 0.5em;
  min-height: 20px;
  min-width: 20px;
  text-align: center;
  font-weight: bold;
}

.button-m:hover {
  background-color: #e6f0ff;
}

.button-m:active {
  transform: scale(0.98);
  background-color: #cce0ff;
}

.button-m.disabled {
  opacity: 0.5;
  pointer-events: none;
}


/* ---- */





















.button-m {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  padding: 0.75em 1.5em;
  border: 2px solid #333;
  border-radius: 12px;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  gap: 0.5em;
  min-height: 20px;
  min-width: 20px;
  text-align: center;
  font-weight: bold;
}

.button-m:hover {
  background-color: #e6f0ff;
}

.button-m:active {
  transform: scale(0.98);
  background-color: #cce0ff;
}

.button-m.disabled {
  opacity: 0.5;
  pointer-events: none;
}


/* normal, hover, active, disabled, focused */
._sys_normal{
  background-color: #eee;
  color: black;
}

._sys_active{
  background-color: #faeaa4;
  color: black;
}

#installBtn {
  display: none;
  /*padding: 0.8rem 1.4rem;
  font-size: 1rem;
  border: none;
  border-radius: 0.4rem;
  background-color: #faeaa4;
  color: black;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);*/
}





/*
.ShowMoreWithSymbol {
  display: flex; /* Maak de knop een flex-container */
  align-items: center; /* Centreer de inhoud verticaal */
  position: relative; /* Behoud deze voor het absolute symbool */
  padding-right: 40px;
}


.ShowMoreWithSymbol::before {

 content: "";
  display:inline-block; width:1em; height:1em;
  background-color: currentColor;
  -webkit-mask: url("/images/bootstrap-icons/plus-square-fill.svg") no-repeat center / contain;
          mask: url("/images/bootstrap-icons/plus-square-fill.svg") no-repeat center / contain;
  /*content: "↪";*/
  position: absolute;
  right: 10px; /* Positioneer het symbool rechts binnen de knop */
  top: 25%; /* Positioneer het symbool verticaal in het midden */
  transform: translateY(-50%); /* Zorgt voor perfecte verticale centrering */
  font-size: 1.5em;
  color: #600;
}
*/


.ShowMoreWithSymbol {
  display: inline-flex;      /* zet tekst + symbool naast elkaar */
  align-items: center;       /* verticaal gecentreerd */
  gap: 0.6em;                /* vaste ruimte tussen tekst en symbool */
  position: relative;        /* nodig voor consistentie */
  padding-right: 0;          /* extra ruimte rechts niet meer nodig */
}

.ShowMoreWithSymbol::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("/images/bootstrap-icons/plus-square-fill.svg") no-repeat center / contain;
          mask: url("/images/bootstrap-icons/plus-square-fill.svg") no-repeat center / contain;

  position: static;          /* niet absolute: gewoon meedoen in de flow */
  transform: none;           /* reset oude verschuiving */
  font-size: 1.2em;
  color: #ffa500;
}



.backgroundYellow{
  background-color: #faeaa4;
}

.backgroundLightYellow{
  background-color: #FDF7DD;
}




.backgroundPink{
  background-color: #F8C2D5;
}


.backgroundPeach{
  background-color: #F1B28E;
}

.backgroundLightBlue{
  background-color: #C8E7F5;
}

.backgroundLightGreen{
  background-color: #d0f0f0;
}

.backgroundLightlila{
  background-color: #e0e0f0;
}


.backgroundGreen{
  background-color: #67BB77;
}

.backgroundRed{
  background-color: #E45767;
}

.backgroundDarkBlue{
  background-color: #423F74;
}



.colorPeach{
  color: #F1B28E;
}

.colorDarkBlue{
  color: #423F74;
}
.colorBlue{
  color: #0775BC;
}

.colorYellowEmoji{
  color: #F3DA0B;
}

.colorGreen{
  color: #67BB77;
}

.colorRed{
  color: #E45767;
}


/*
	.stuur-knop {
	  display: none;
	}
*/


.stuur-knop-model {
  /*
  display: none;
  */
}


@media (max-width: 600px) {
  .button-ui {
    font-size: 1.4em;
    padding: 1em 1.8em;
  }
}


td {
    display: table-cell;
    vertical-align: inherit;
    unicode-bidi: isolate;
    font-size: 1.25rem;
}

th {
    font-size: 1.25rem;
}



.text-vertical-center {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
}










/* +++++++++++++++++++++++++++++++++++++ Begin Algemene styling voor formulieren */


#itemDescription {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1.25rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  background-color: #fff;
  box-sizing: border-box;
  margin-bottom: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}



/* Algemene styling voor formulieren */
form {
  margin-bottom: 1.5rem;
}

/* Labels */
form label {
  display: block;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/* Invoervelden */
form input[type="text"],
form input[type="email"],
form input[type="password"] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1.25rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  background-color: #fff;
  box-sizing: border-box;
  margin-bottom: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

form input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Knoppen */
form button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* Primaire knop (bijv. Inloggen / Registreren) */
form button.btn-primary {
  background-color: #0d6efd;
  color: white;
}

form button.btn-primary:hover {
  background-color: #0b5ed7;
}

/* Secundaire knop (bijv. Terug of Wisselvorm) */
form button.btn-secondary {
  background-color: #6c757d;
  color: white;
}

form button.btn-secondary:hover {
  background-color: #5c636a;
}

/* Foutmeldingen */
.alert {
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}

.alert-danger {
  background-color: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
}


.checkbox-container {
  display: inline-flex;
  align-items: center;       /* verticaal centreren */
  gap: 0.5em;                /* ruimte tussen box en tekst */
}

.checkbox-container input[type="checkbox"],
.checkbox-container label {
  margin: 0;                 /* reset eventuele default-marges */
  vertical-align: middle;    /* extra zekerheid */
  line-height: 1;            /* zelfde hoogte als checkbox */
}


/* Zorg dat het formulier de container niet full-width maakt */
.auth-form .checkbox-container {
  margin: 1em 0;
}


		/* ================== Textarea styling ================== */

		/* Basisstijl voor alle textareas */
		.textarea {
		  width: 100%;
		  min-height: 6em;
		  padding: 0.5rem 0.75rem;
		  font-size: 1rem;
		  line-height: 1.5;
		  color: #212529;
		  background-color: #fff;
		  background-clip: padding-box;
		  border: 1px solid #ced4da;
		  border-radius: 0.375rem;
		  transition: border-color 0.2s, box-shadow 0.2s;
		  box-sizing: border-box;
		  resize: vertical; /* gebruiker kan alleen verticaal schalen */
		}

		/* Focus-toestand */
		.textarea:focus {
		  border-color: #ced4da;
		  outline: 0;
		  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
		}

		/* Varianten in grootte */
		.textarea-sm {
		  padding: 0.25rem 0.5rem;
		  font-size: 0.875rem;
		}

		.textarea-lg {
		  padding: 0.75rem 1rem;
		  font-size: 1.25rem;
		}

		/* Disabled-toestand */
		.textarea[disabled], .textarea-disabled {
		  background-color: #e9ecef;
		  opacity: 1;
		  cursor: not-allowed;
		}

		/* Fout-toestand */
		.textarea-error {
		  border-color: #dc3545;
		  background-color: #f8d7da;
		  color: #721c24;
		}

		/* Plaatsing binnen formulieren (optioneel) */
		.form-group .textarea {
		  margin-bottom: 1rem;
		}




/* ================== Select styling ================== */

/* Basisstijl voor alle selects */
.select {
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem; /* rechts ruimte voor de pijl */
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.65em auto;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  cursor: pointer;
}

/* Focus-toestand */
.select:focus {
  border-color: #ced4da;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Varianten in grootte */
.select-sm {
  padding: 0.25rem 1.5rem 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.select-lg {
  padding: 0.75rem 3rem 0.75rem 1rem;
  font-size: 1.25rem;
}

/* Disabled-toestand */
.select[disabled],
.select-disabled {
  background-color: #e9ecef;
  opacity: 1;
  cursor: not-allowed;
}

/* Fout-toestand */
.select-error {
  border-color: #dc3545;
  background-color: #f8d7da;
  color: #721c24;
}

/* Plaatsing binnen formulieren (optioneel) */
.form-group .select {
  margin-bottom: 1rem;
}






/* +++++++++++++++++++++++++++++++++++++ Eind Algemene styling voor formulieren */

/* +++++++++++++++++++++++++++++++++++++ Error-melding box */
.error {
  background-color: #f8d7da;      /* zacht rode achtergrond */
  color: #721c24;                 /* donkere rode tekst */
  border: 1px solid #f5c6cb;      /* subtiele rode rand */
  padding: 0.75em 1em;            /* binnenruimte */
  margin: 1em 0;                  /* afstand boven/onder */
  border-radius: 0.25em;          /* afgeronde hoekjes */
  font-size: 1em;                 /* standaard lettergrootte */
  line-height: 1.4;               /* prettig leesbaar */
}

/* +++++++++++++++++++++++++++++++++++++ Eind Error-melding box */




/* +++++++++++++++++++++++++++++++++++++ Custom Scrollable Modal  */
.my-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.my-modal.show {
  display: flex;
}
/* half-transparant overlay */
.my-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
/* container */
.my-modal-dialog {
  position: relative;
  background: #fff;
  max-width: 600px;
  width: 90%;
  max-height: calc(100vh - 3.5rem);
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3);
  z-index: 1001;
}
/* header & footer */
.my-modal-header,
.my-modal-footer {
  padding: 1rem;
  background: #f8f9fa;
}
.my-modal-header {
  border-bottom: 1px solid #dee2e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.my-modal-footer {
  border-top: 1px solid #dee2e6;
}
/* body: scrollable */
.my-modal-body {
  font-size: 1.5em;
  padding: 1rem;
  overflow-y: auto;
  flex: 1 1 auto;
}
/* close-knop */
.my-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}


.modal-share {
  display: flex;
  justify-content: flex-end; /* duwt alle children naar rechts */
  /* optioneel: zorgen dat items verticaal gecentreerd staan */
  align-items: center;
}



/* +++++++++++++++++++++++++++++++++++++ Einde Custom Scrollable Modal  */




/* +++++++++++++++++++++++++++++++++++++ iosModal  */

 #iosModal {
    display: none;              /* standaard verbergen */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
    z-index: 9999;

    /* centreer de inhoud */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  #iosModal button {
    margin-top: 1em;
  }










/* +++++++++++++++++++++++++++++++++++++ Begin toast  */


#toast-container{
  position:fixed; top:160px; right:20px; left:20px; z-index:3000;
  display:flex; flex-direction:column; gap:8px;
}
.toast{
  min-width:260px; max-width:90vw; padding:20px 30px; border-radius:8px;
  background:#C8E7F5; border:2px solid #000; color:#000;
  box-shadow:0 6px 24px rgba(0,0,0,.12);
  display:flex; align-items:center; gap:10px;
  opacity:0; transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease; font-size:1.4em; font-weight: 700;
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast .close{
  margin-left:auto; appearance:none; border:0; background:transparent;
  font-size:2em; line-height:1; cursor:pointer; color:inherit;
}
@media (prefers-reduced-motion: reduce){ .toast{ transition:none; } }













/* +++++++++++++++++++++++++++++++++++++ Einde toast  */









/* +++++++++++++++++++++++++++++++++++++ Begin Stappen (tabs) – states */


/* Stappen (tabs) – states */
.tab-button.completed {
  border-bottom: 5px solid #28a745;  /* groen onderlijntje voor 'afgerond' */
  border-top: 5px solid #28a745;  /* groen onderlijntje voor 'afgerond' */
  opacity: 0.85;
}

.tab-button.next-suggest {
  outline: 5px solid #ffa500;        /* oranje accent */
  outline-offset: 2px;
  animation: pulseNext 1.2s ease-in-out infinite;
}

@keyframes pulseNext {
  0%   { transform: scale(1.00); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1.00); }
}





/* CTA highlight voor de stuur-knop (laatste stap) */
#stuur-knop.cta-suggest {
  outline: 3px solid #ffa500;
  outline-offset: 2px;
  animation: pulseNext 1.2s ease-in-out infinite;
}

/* Reuse van je bestaande keyframes */
@keyframes pulseNext {
  0%   { transform: scale(1.00); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1.00); }
}









/* zachte, korte pulse voor aandacht zonder onrust */
@keyframes saylumi-pulse {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(250, 234, 164, .0); }
  50%  { transform: scale(1.02);box-shadow: 0 0 0 6px rgba(250, 234, 164, .45); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(250, 234, 164, .0); }
}

.tab-button.hint,
#keuze-container .choice-suggest {
  animation: saylumi-pulse 1100ms ease-in-out 1;
  /* geen felle kleur; alleen zachte schaduw + lichte scale */
}

#keuze-container .choice-suggest {
  animation: saylumi-pulse 1100ms ease-in-out 1;
  outline: 2px solid #ffa500;
  border-radius: 12px;
}


@media (prefers-reduced-motion: reduce) {
  #keuze-container .choice-suggest { animation: none; }
}



.no-saylumi-pulse.hint,
.no-saylumi-pulse.choice-suggest,
.no-saylumi-pulse.cta-suggest { animation: none !important; }






/* +++++++++++ ++++++++++++++++++++++++++ Einde Stappen (tabs) – states */





/* ++++++++++++++++++++++++++++++++++++++ Saylumi: zelf-typen veld */
.zelftypen-textarea {
  width: 100%;
  min-height: 7rem;           /* lekker ruim (≈ 3–4 regels) */
  box-sizing: border-box;

  font-size: 1.2rem;          /* groot en leesbaar */
  line-height: 1.5;
  padding: 0.75rem 1rem;

  background: #fffdf5;        /* zacht crème */
  color: #222;

  border: 2px solid #faeaa4;  /* matcht je theme-color */
  border-radius: 12px;

  resize: vertical;           /* hoogtesleep toestaan */
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.zelftypen-textarea::placeholder {
  color: #888;
}

.zelftypen-textarea:focus {
  background: #fff;
  border-color: #f3c200;      /* iets feller geel bij focus */
  box-shadow: 0 0 0 3px rgba(243, 194, 0, 0.25);
}
/* ++++++++++++++++++++++++++++++++++++++ Einde Saylumi: zelf-typen veld */






/* ++++++++++++++++++++++++++++++++++++++ Systeemberichten modal ===== */

.sys-modal{position:fixed;inset:0;display:none;z-index:9999;}
.sys-modal.show{display:block;}
.sys-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);}

.sys-dialog{
  position:relative;
  margin:6vh auto 0;
  max-width:640px; width:92%;
  background:#fff; border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  display:flex; flex-direction:column; overflow:hidden;
}

.sys-header{display:flex;align-items:center;gap:.75rem;padding:1rem 1rem 0.5rem;}
.sys-title{margin:0;font-size:1.25rem;line-height:1.2;font-weight:600;}
.sys-close{margin-left:auto}

.sys-icon{
  width:28px; height:28px; border-radius:50%;
  background:#222;
}
.sys-body{padding:0 1rem 1rem;font-size:1.05rem;line-height:1.5}
.sys-footer{
  display:flex; gap:.5rem; justify-content:flex-end;
  padding:0 1rem 1rem; flex-wrap:wrap;
}

/* Types */
.sys-type-info    .sys-icon{background:#0ea5e9;}
.sys-type-success .sys-icon{background:#16a34a;}
.sys-type-warning .sys-icon{background:#f59e0b;}
.sys-type-error   .sys-icon{background:#dc2626;}

/* zachte animatie */
@media (prefers-reduced-motion: no-preference){
  .sys-dialog{transform:translateY(12px);opacity:0;transition:transform .18s ease,opacity .18s ease;}
  .sys-modal.show .sys-dialog{transform:translateY(0);opacity:1;}
}

/* focus zichtbaar */
.sys-dialog :focus{outline:3px solid #000; outline-offset:2px}

/* helper: visueel verstoppen maar toegankelijk houden */
.visually-hidden{
  position:absolute!important; height:1px;width:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0;padding:0;margin:-1px;
}

/* Kleine schermen: knoppen volle breedte */
@media (max-width:420px){
  .sys-footer button{flex:1}
}


.mijnvideo video{width:100%;height:auto;display:block;border-radius:12px}


/* ++++++++++++++++++++++++++++++++++++++ Einde Systeemberichten modal ===== */