/* External Imports */
@import url('https://fonts.googleapis.com/css2?family=Gloock&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* Base Styles */
html {
  background-color: #f3e9e7;
}

body {
  font-family: 'Albert Sans';
  font-size: 16px;
  box-align: center;
  max-width: 700px;
  margin: auto;
  background-color: white;
  padding: 25px;
  line-height: 1.5;
}

body.wide {
  max-width: 800px;
} 

/* Typography */
.gloock-regular {
  font-family: "Gloock", serif;
  font-weight: 400;
  font-style: normal;
}

h1 {
  font-family: 'Gloock';
  margin-bottom: 30px;
  font-size: 2rem;
}

h2 {
  font-family: 'Gloock';
  margin-bottom: 15px;
  font-size: 1.75rem;
}

h3 {
  font-family: 'Gloock';
  margin-bottom: 15px;
  font-size: 1.5rem;
}

/* Layout and Structure */
.header-image {
  width: clamp(50px, 700px, 100%);
}

.main-container {
  display: flex;
  flex-direction: column;
  min-height: 87vh;
}

.toggle-row {
  display: flex;
  gap: 1rem;
  align-items: top;
  margin-bottom: 1rem;
}

/* Images */
img {
  max-width: 100%;
  border-radius: 0.95rem;
}

.img-logo {
  margin-top:35px; 
  width: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0rem;
}

/* Forms */
form p {
 font-size: 1rem;

}

form .label-description {
  font-size: 0.85rem;
  font-style: italic;
  max-width: 500px;
  margin: 10px 0;
}

.formA > * {
  display: flex;
  margin: 1rem 1rem 1rem 2rem;
}

.formB > * {
  display: flex;
  flex-direction: column;
  margin: 2rem 1rem 1rem 2rem;
}

@media (max-width: 768px) {
  .checkbox-container {
    margin-left: 0rem;
  }
}

.form-description {
  margin: 1rem 1rem 1rem 2rem;
}

p.label-description, form p {
  margin: 0.1rem;
}

form p {
  margin-bottom: 0.4rem;
  margin-top: 0.75rem;
}

.disabled-text {
  color: #a0a0a0;
}

/* Existing styles for the original slider */
label.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  margin-top: 16px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider, .slider:hover, .slider:before, input:checked + .slider, input:focus + .slider, input:checked + .slider:before, input:disabled + .slider, input:disabled + .slider:before {
  -webkit-transition: .4s;
  transition: .4s;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
}

.slider:hover {
  background-position: 100% 0;
  box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.5);
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
}

input:checked + .slider {
  background-image: linear-gradient(48deg, rgba(90, 181, 76, 1) 0%, rgba(111, 204, 199, 1) 100%);
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
}

input:disabled + .slider {
  background: linear-gradient(48deg, rgba(151,203,143,1) 0%, rgba(196,196,196,1) 100%);
  box-shadow: none;
  cursor: default;
}

input:disabled + .slider:before {
  background-color: white;
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* New styles for the black slider */
.black-slider, .black-slider:hover, .black-slider:before, 
input:checked + .black-slider, input:focus + .black-slider, 
input:checked + .black-slider:before, input:disabled + .black-slider, 
input:disabled + .black-slider:before {
  transition: .4s;
}

.black-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
}

.black-slider:hover {
  background-color: #444;
}

.black-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
}

input:checked + .black-slider {
  background-color: #222;
}

input:focus + .black-slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .black-slider:before {
  transform: translateX(20px);
}

input:disabled + .black-slider {
  background-color: #555;
  box-shadow: none;
  cursor: default;
}

input:disabled + .black-slider:before {
  background-color: #777;
}

.black-slider.round {
  border-radius: 34px;
}

.black-slider.round:before {
  border-radius: 50%;
}


/* Form Button Styles */
.submit-row {
  margin-top: 40px;
}


p.confirmation-text {
  margin-left:10px;
  font-weight:bold;
}



button {
  font-size: 10px;
}

.button-dark {
  --plyr-color-main: $c-primary-default;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  --bs-gutter-x: 20px;
  --bs-gutter-y: 0;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  font-family: inherit;
  margin: 0;
  text-transform: none;
  -webkit-appearance: button;
  align-items: center;
  border: .0625rem solid transparent;
  border-radius: .625rem; a
  display: inline-flex;
  font-size: 1rem;
  font-weight: 700;
  gap: 0 12px;
  justify-content: center;
  letter-spacing: .025em;
  line-height: 1rem;
  padding: .9375rem 1.4375rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .3s ease-in-out;
  width: fit-content;
  background: #111;
  color: #fff;
  cursor: pointer;
  margin-bottom: 1.5rem;
}

.loader {
  --plyr-color-main: $c-primary-default;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  --bs-gutter-x: 20px;
  --bs-gutter-y: 0;
  font-family: inherit;
  text-transform: none;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1rem;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  align-items: center;
  gap: 0 5px;
  text-align: center;
  flex-grow: 0;
  margin: -.25rem 0;
  color: #fff;
  display: none;
  cursor: default;
}



.loader__circle {
  --plyr-color-main: $c-primary-default;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  --bs-gutter-x: 20px;
  --bs-gutter-y: 0;
  font-family: inherit;
  text-transform: none;
  letter-spacing: .025em;
  line-height: 1rem;
  text-align: center;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  animation: spin 1s linear infinite;
  border: .25rem solid rgba(0, 0, 0, .25);
  border-radius: 50%;
  flex: 1 0 auto;
  height: 1.25rem;
  margin: 0 .625rem 0 0;
  width: 1.25rem;
  border-color: hsla(0, 0%, 100%, .75) hsla(0, 0%, 100%, .25) hsla(0, 0%, 100%, .25);
  cursor: default;
}

@keyframes spin {
  from {
    transform: rotate(-360deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.loader-lable {
  --plyr-color-main: $c-primary-default;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  --bs-gutter-x: 20px;
  --bs-gutter-y: 0;
  font-family: inherit;
  text-transform: none;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1rem;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  flex: 1 0 auto;
  flex-grow: 1;
  hyphens: auto;
  cursor: default;
}


.button-primary .loader-lable,
.button-transparent .loader-lable,
.button-transparent-blue .loader-lable {
    color: #111; 
}


.button-primary .loader__circle,
.button-transparent .loader__circle,
.button-transparent-blue .loader__circle {
    /* Gebruik zwart/donkergrijs voor de spinner border */
    /* Vervangt hsla(0, 0%, 100%, ...) met hsla(0, 0%, 0%, ...) */
    border-color: hsla(0, 0%, 0%, 0.75) hsla(0, 0%, 0%, 0.25) hsla(0, 0%, 0%, 0.25);
}

/* Optioneel: Zet de standaard 'color' voor de .loader container zelf ook op donker */
/* Dit zorgt ervoor dat eventuele andere elementen binnen .loader ook de donkere kleur erven */
.button-primary .loader,
.button-transparent .loader,
.button-transparent-blue .loader {
    color: #111;
}

.link-button {
    --plyr-color-main: $c-primary-default;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    --bs-gutter-x: 20px;
    --bs-gutter-y: 0;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    font-family: inherit;
    margin: 0;
    text-transform: none;
    -webkit-appearance: button;
    align-items: center;
    border: .0625rem solid transparent;
    border-radius: .625rem;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 700;
    gap: 0 12px;
    justify-content: center;
    letter-spacing: .025em;
    line-height: 1rem;
    padding: .9375rem 1.4375rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: all .3s ease-in-out;
    width: fit-content;
    background: #111;
    color: #fff;
    cursor: pointer;
    margin-bottom: 0;

}

.link-button-ghost {
      --plyr-color-main: $c-primary-default;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    --bs-gutter-x: 20px;
    --bs-gutter-y: 0;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    font-family: inherit;
    margin: 0;
    text-transform: none;
    -webkit-appearance: button;
    align-items: center;
    border: .0625rem solid transparent;
    border-radius: .625rem;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 700;
    gap: 0 12px;
    justify-content: center;
    letter-spacing: .025em;
    line-height: 1rem;
    padding: .9375rem 1.4375rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: all .3s ease-in-out;
    width: fit-content;
    background: transparent;
    border-color: #111;
    color: #111;
    cursor: pointer;
    margin-bottom: 0;
}



input[type=checkbox] {
        opacity: 0;
    position: absolute;
    width: auto;
    z-index: -1;
}

input[type=checkbox] + label {
    color: #111;
    cursor: pointer;
    display: block;
    line-height: 1.75;
    padding-left: 2rem; /* Space for custom checkbox/radio button */
    position: relative;
}

/* Custom checkbox styling */
input[type=checkbox] + label:before {
    background-color: #fff;
    border: .0625rem solid #e7e7e7;
    border-radius: .25rem;
    content: "";
    display: block;
    height: 1.25rem;
    left: 0;
    position: absolute;
    top: .1875rem;
    transition: all .3s ease-in-out;
    width: 1.25rem;
}

input[type=checkbox]+label:after, input[type=radio]+label:after {
    transform: scale(0);
    transition: transform 0.25s ease;
}

input[type=checkbox]:checked+label:before, input[type=radio]:checked+label:before {
    background: #000; /* Black background for checked state */
    border-color: #e7e7e7; /* Maintain border color */
}

input[type=checkbox]:checked+label:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23FFF'%3E%3Cpath d='M18.71 7.21a1 1 0 0 0-1.42 0l-7.45 7.46-3.13-3.14A1.023 1.023 0 0 0 5.29 13l3.84 3.84a1 1 0 0 0 1.42 0l8.16-8.16a1 1 0 0 0 0-1.47'/%3E%3C/svg%3E");
    background-size: cover;
    color: #000;
    content: "";
    height: 1.25rem;
    left: 0.05rem;
    line-height: 1.5;
    position: absolute;
    text-align: center;
    top: 0.25rem; /* Adjust position as needed */
    transform: scale(1); /* Make checkmark visible */
    width: 1.25rem;
}

input[type=checkbox]:disabled+label, input[type=radio]:disabled+label {
    color: rgba(0,0,0,.5);
    cursor: not-allowed;
}

input[type=checkbox]:disabled+label:before, input[type=radio]:disabled+label:before {
    background: #e7e7e7;
}

.extra-content {
    display: none;
    margin-top: 10px;
    background-color: #f9f9f9;
    padding: 1.5rem;
    border-radius: 10px;
} 

.extra-content p {
  margin: 1.25rem;
}

.checkbox-container {
    margin-bottom: 20px;
}

html {
  scrollbar-gutter: stable;
}


.textarea {
      --plyr-color-main: $c-primary-default;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    --bs-gutter-x: 20px;
    --bs-gutter-y: 0;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    margin: 0;
    -webkit-appearance: none;
    background-color: #fff;
    border: .0625rem solid #e7e7e7;
    border-radius: .625rem;
    color: black;

    font-size: 1rem;
    line-height: 1;
    min-height: 7.5rem;
    padding: 1.25rem 1rem 1rem;
    resize: vertical;
    transition: border .3s ease-in-out;
    width: 100%;
}

.textarea2 {
      --plyr-color-main: $c-primary-default;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    --bs-gutter-x: 20px;
    --bs-gutter-y: 0;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    margin: 0;
    -webkit-appearance: none;
    background-color: #fff;
    border: .0625rem solid #e7e7e7;
    border-radius: .625rem;
    color: black;

    font-size: 0.9rem;
    line-height: 1;
    min-height: 7.5rem;
    padding: 1.25rem 1rem 1rem;
    resize: vertical;
    transition: border .3s ease-in-out;
    width: 100%;
}

.input-container {
    display: flex;
    flex-direction: column;
    width: 300px;
    margin: 10px;
      position: relative; 
  margin-bottom: 20px; 
}

.form-label {
    margin-bottom: 5px;
}

.formh1 {

}

.formh2{
  margin-top: 1rem;
  font-weight: 500;
}

.form-row {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

.form-row-inline {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  margin:10px 30px ;
}


.input-field, .input-select {
  --plyr-color-main: $c-primary-default;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  --bs-gutter-x: 20px;
  --bs-gutter-y: 0;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  margin: 0;
  -webkit-appearance: none;
  background-color: #fff;
  border: .0625rem solid #e7e7e7;
  border-radius: .625rem;
  color: #999;
  font-family: albertsans,arial,sans-serif;
  font-size: 1rem;
  line-height: 1;
  min-height: 3rem;
  padding: 1.1875rem .75rem .3125rem;
  transition: background-color, color .3s ease-in-out;
  width: 100%;
}

.input-field:focus, .input-select:focus {
  outline: none;
}

.input-label {
  color: #c4c4c4; 
  font-size: 16px;
  font-weight: 300;
  font-family: Albert Sans;
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 13px;
  transition: 0.2s ease all; 
  -moz-transition: 0.2s ease all; 
  -webkit-transition: 0.2s ease all;
}

.input-field:focus ~ .input-label, .input-field:not(:placeholder-shown) ~ .input-label {
  top: -0.25px;
  font-size: 12px;
  color: #a3a3a3;
  padding-top: 4px;
  padding-left:2px;
}

.input-select:focus ~ .input-label, .input-select:not([value=""]):valid ~ .input-label {
  top: -0.25px;
  font-size: 12px;
  color: #808080;
  padding-top: 4px;
  padding-left:2px;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.input-textarea {
  min-height: 30px;
  max-height: 260px; 
  overflow: hidden;
  overflow-x: hidden; 
}

.input-field-date {
    --plyr-color-main: $c-primary-default;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  --bs-gutter-x: 20px;
  --bs-gutter-y: 0;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  margin: 0;
  -webkit-appearance: none;
  background-color: #fff;
  border: .0625rem solid #e7e7e7;
  border-radius: .625rem;
  color: #999;
  font-family: albertsans,arial,sans-serif;
  font-size: 1rem;
  line-height: 1;
  min-height: 2rem;
  padding: 1.1875rem 1rem 1rem;
  transition: background-color, color .3s ease-in-out;
  height:30px;
}

.radio {
  display: inline-flex;
  align-items: center;
  margin-right: 1rem;
  cursor: pointer;
}

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

.radio-label {
  position: relative;
  padding-left: 1.5rem;
  cursor: pointer;
}

.radio-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  border: 1px solid #808080;
  border-radius: 50%;
  background: white;
}

input[type="radio"]:checked + .radio-label::before {
  background: white;
}

.radio-label::after {
  content: "";
  position: absolute;
  left: 0.18rem;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 0.65rem;
  height: 0.65rem;
  background: black;
  border-radius: 50%;
  transition: transform 0.3s ease-in-out;
}

input[type="radio"]:checked + .radio-label::after {
  transform: translateY(-50%) scale(1);
}