* {
  margin: 0;
  padding: 0;
}

:root {
  color-scheme: light dark;
  /* https://tractie.ns.nl/2e23992f3/p/226ce1-tractie--ns-design-system */
  /* COLORS */
  --background-color-default: light-dark(#ffffff, #0d0e10);
  --background-color-elevated-sunken: light-dark( #f5f5f7, #000000);
  --background-color-brand-primary: light-dark( #ffc70f, #252528); 
  --background-color-brand-secondary: light-dark(#0b3680, #9ac5f1); 
  --background-color-input: light-dark(#ffffff, #000000);
  --background-color-info-subtle: light-dark(#ebf5ff, #28282a);

  --background-color-button: light-dark(#0062d1, #5d9fea);
  --heading-color: light-dark(#0b3680, #e4e5e8);
  --text-color: light-dark(#252528, #c4c5cb);
  --brand-color-primary:light-dark(#0b3680, #ffc70f);
  --brand-color-secondary: light-dark(#ffc70f, #0b3680);

  --color-border-default: light-dark(#e4e5e8, #343536);
  --color-border-input-default: light-dark(#919197, #757677);

  --warning-color: light-dark(#f05c01, #ff9545);
  --success-color: light-dark(#3e7f67, #4dcda5);
  --error-color: light-dark(#ce092d, #ff9396);

    --shadow-elevated-2:0px 2px 12px 0px rgba(0, 0, 0, 0.24);

  /* HOVER COLORS */
  --background-color-button-hover: light-dark(#0b44a1, #9ac5f1);
  --color-border-input-hover:light-dark( #73747a,#979798);

  /* HEADINGS */
  --heading-1-web: 28px;
  --heading-2-web: 24px;
  --heading-3-web: 20px;
  --heading-4-web: 18px;
  --heading-5-web: 16px;

  /* TEXT SIZE */
  --body-text-large: 1.125rem;
  --body-text-medium: 1rem;
  --body-text-small: 0.875rem;
  --body-text-x-small: 0.75rem;

  --padding-insert-xs: 8px;
  --padding-insert-s: 12px;
  --padding-insert-m: 16px;


  /* BORDER-RADIUS */
  --border-radius-small: 3px;
  --border-radius-default: 6px;
  --border-radius-large: 12px;

    /* SPACING */
  --spacing-inset-m: 16px;
  --spacing-gap-s: 8px;
  --spacing-gap-m: 24px;

}


/**************************************/
/*               MARK: fonts          */
/**************************************/
@font-face {
  /* https://www.ns.nl/ */
  font-family: nssans;
  src: url(/fonts/nssans-regular.woff2);
}


@font-face {
  /* https://www.ns.nl/ */
  font-family: nssans-bold;
  src: url(/fonts/nssans-bold.woff2);
}

/**************************************/
/* MARK: Generieke code die herbruikbaar is */

/* Gebruik gemaakt van een opacity voor fijnere UX */
.hiddenBlock + div {
  display: flex;
  flex-direction: column;
  height: 0;
  opacity: 0;
  transition: opacity 0.5s ease;

  /* Ik zet het blok hier helemaal weg, zodat hij niet 
  bij de volgende fieldset van de gemachtigde in de weg 
  zit */
  margin-left: -300rem;
}

.hiddenBlock:has([value="yes"]:checked) + div{
  height: auto;
  opacity: 1;  
  transition: opacity 0.5s ease;
  margin: 0;
}


/* Error memo appearence herbruikbaar */
.errorMemo {
  opacity: 0;
  height: 0;
}

input:user-invalid + .errorMemo {
  opacity: 1;
  height: 1.25rem;
  color: var(--error-color);
  font-size: var(--body-text-small);
  padding-top: 2px;
}

/**************************************/
/*   MARK: keuze vraag         */
/**************************************/
/* Bsn, protocolnummer en beconnummer code voor keuze maken */
.hiddenRadio {
  margin-bottom: 0;
}

.hiddenRadio + label, .hiddenRadio + label + label, .hiddenRadio + label + label + label{
  display: none;
  margin-bottom: var(--spacing-gap-s);
}

.hiddenRadio:has(input[value="bsnAuthorizedPerson"]:checked) + label,
.hiddenRadio:has(input[value="beconNumberAdvisor"]:checked) + label + label,
.hiddenRadio:has(input[value="protocolnumberNotaryAuthorizedPerson"]:checked) + label + label + label
  {
  display: flex;
  flex-direction: column;
}

/* Nederland buitenland code + animatie */
.hiddenBlock + fieldset, 
.hiddenBlock + fieldset + fieldset{
  height: 0;
  opacity: 0;
  transition: opacity 0.5s ease;

  margin-left: -100rem;
}

.hiddenBlock:has([value="adresNederland"]:checked) + fieldset, 
.hiddenBlock:has([value="adresBuitenland"]:checked) + fieldset + fieldset{
  height: auto;
  opacity: 1;  
  transition: opacity 0.5s ease;

  margin: 0;
}

.hiddenBlock:has([value="adresBuitenland"]:checked) + fieldset + fieldset{
  /* margin-top: -19.5px; */
    margin-top: -45px;
}

/**************************************/
/*   MARK: Invalid en valid styling   */
/**************************************/
input:user-invalid {
  border-color: var(--error-color);
}

input:user-valid {
  border-color: var(--success-color);
}

input[type="text"]:user-valid {
  /* https://www.figma.com/community/plugin/1498729606631593833/iconify-icons-library */
  /* https://css-tricks.com/form-validation-ux-html-css/ */
  background: url(../images/check.png);
  background-size: 20px;
  background-repeat: no-repeat;
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-position */
  background-position: right 10px center;
}

input[type="text"]:user-invalid {
  /* https://www.figma.com/community/plugin/1498729606631593833/iconify-icons-library */
  background: url(../images/cross.png);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: right 10px center;
}


fieldset:has( > label > input[type="radio"]:not(:indeterminate)) > legend::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("/images/iets-icons_check-fill.png");
  background-size: contain;
  background-repeat: no-repeat;
  aspect-ratio: 1;
}

.error-hidden {
  color: var(--error-color);
  font-size: var(--body-text-small);
}

.succes-hidden {
   color: var(--success-color);
  font-size: var(--body-text-small);
}

/**************************************/
/*          MARK: Algemene styling    */
/**************************************/
body {
  font-family: nssans, sans-serif;
  background-color: var(--background-color-elevated-sunken) ;
}

header {
  background-color: var(--background-color-brand-primary);
  padding: var(--spacing-inset-m);
  place-items: center;
}

form {
  display: grid;
  place-self: center;
  align-content: flex-start;

    & > fieldset {
    border-radius: var(--border-radius-default);
    margin: var(--spacing-gap-m);
    padding: var(--spacing-inset-m);

      & > legend {
        font-size: var(--heading-2-web);
        
      }
  }
}

fieldset {
  background-color: var(--background-color-default);
  border:none;
  margin: var(--spacing-gap-m) 0;
  max-width: 40rem;


  & fieldset legend {
    font-size: var(--body-text-medium);
    align-self: center;
  }

  .aangepasteWidth {
    width: 95%;
  }

  input {
    background-color: var(--background-color-input);
    border: solid 1px var(--color-border-default);
    border-radius: var(--border-radius-default);
    padding: var(--padding-insert-xs);
    
    &[type="text"]{
      width: 15rem;
    }

    &:hover {
      border-color: var(--color-border-input-hover);
    }

    &[type="file"] {
      margin-top: var(--spacing-gap-m);
    }

    &[type="date"]{
      width: 25%;
    }

    &::focus {
      border-color: var( --brand-color-primary);
    }
  }
}

[for="firstNameAutorizedPerson"] {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--color-border-default);
}


legend {
  font-family: nssans-bold, sans-serif;
  color: var(--heading-color);
  font-size: var(--body-text-small);

  /* voor de styling van de vinkjes */
  display: inline-flex;
}

h1 {
  color: var(--heading-color);
  font-size: var(--heading-1-web);
  font-family: nssans-bold, sans-serif;
}

[class="heading"] {
  font-size: var(--heading-3-web);
}

label{
  color: var(--heading-color);
  display: block;
  padding-top: var(--padding-insert-m);
}


/* De warning tekst */
header {
  p:first-of-type {
  font-family: nssans-bold, sans-serif;
  font-size: var(--body-text-large);
  color: var(--warning-color);
}
}

span {
  color: var(--error-color);
}


/**************************************/
/*   MARK: Button styling             */
/**************************************/

/* https://www.geeksforgeeks.org/html/how-to-style-the-input-file-type-in-forms-using-css/ */
button:not([popovertarget="popover-info"]), input[type="file"]::file-selector-button  {
  border: none;
  background-color: var(--background-color-button);
  border-radius: var(--border-radius-default);
  color: var(--background-color-default);
  font-family: nssans-bold, sans-serif;
  padding: var(--padding-insert-m);

  width: 10rem;
  align-self: center;
  justify-self: center;

  &:hover {
    background-color: var(--background-color-button-hover);
  }
}





fieldset:nth-of-type(1) > fieldset:nth-of-type(1) div:nth-of-type(1) input:nth-of-type(1) {
  anchor-name: --anchor-info-input;
}

/* MARK: Styling popup */
dialog {
  padding: var(--padding-insert-m);
  margin-inline:1em 2em; 
  border-radius: var(--border-radius-large);
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-elevated-2);

  max-width: 25rem;
  max-height: 24rem;

/* https://developer.chrome.com/docs/css-ui/anchor-positioning-api?hl=nl */
/* Sanne heeft mij geholpen met het fixen van mijn anchor positioning */
  position: fixed;
  position-anchor: --anchor-info-popup;

  bottom:anchor(--anchor-info-popup top);
  left:anchor(--anchor-info-input right);

  align-self: end;

  position-try-fallbacks: --smallscreen;

    h2 {
      font-family: nssans-bold, sans-serif;
      color: var(--heading-color);
      font-size: var(--heading-2-web);
      margin-bottom: var(--padding-insert-s);
    }

    p {
      margin-top:var(--spacing-gap-m);
    }
}
@position-try --smallscreen {
  position-area: top;
  left:unset;
  bottom:unset;
  margin-inline:2em;
}

/* positioning with anker */
[popovertarget="popover-info"]{
  anchor-name: --anchor-info-popup;
  

  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
 

  img {
    width: 20px;
    height: 20px;
  }

  [popovertargetaction="hide"]{
    place-self: end;
  }
}



@media(width>1160px) {
  dialog {
    padding: var(--padding-insert-m);
    margin: 8rem 10px 0rem 33rem;
    border-radius: var(--border-radius-large);
    border-color: var(--color-border-default);
    box-shadow: var(--shadow-elevated-2);
    max-width: 25rem;
    max-height: 40rem;
    position: absolute;
    position-anchor: --anchor-info-popup;
    position-area: top right;
  }
}