:root {
      --bg: #f5f7fb;
      --card: #ffffff;
      --text: #1f2937;
      --muted: #6b7280;
      --primary: #0976B6;
      --border: #bfc0c4;
      --ring: rgba(47, 128, 237, .25);
      --radius: 1rem;
      --shadow: 0 25px 50px -12px rgb(0 0 0 / 87%), 0 0 0 1px rgba(0, 0, 0, 0.05);
      --fs-sm: .875rem;
      --danger: #dc2626;
      --logo-radius: 3.3125rem;
    }

*{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    } 



    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      font-size: var(--fs-base);
      color: var(--text);
      background: rgba(245, 247, 251, 0.6); /* 60% alpha */
      height: 100vh;
      padding: 2rem;
      /*background-image: url('images/hvc.svg');
      background-size: 2% 2%;
      background-repeat: repeat;*/     
      position: relative;
      width:100vw;
      height:100vh;
      overflow: hidden;
      padding:0;
    }

    /*body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: rgba(245,247,251,0.25);     
    }*/


main {
  height:100vh;
}

    main, .login-page__box{
      position: relative;
      z-index: 1;
    }



main section.login-page__box{
  width: 100%;
  max-width: 28rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  margin: 0 auto;
  position: absolute;
  top: 2vh;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}


main:has(section.login-page__box[aria-hidden="false"]) .login-intro {
  /*alpha background: rgba(245, 247, 251, 0.6);*/
  opacity: 0.4;
}

/* hide when aria-hidden is true or when hidden attribute present */
main section.login-page__box[aria-hidden="true"],
main section.login-page__box[hidden] {
  display: none;
}

/* ensure visible when aria-hidden explicitly false */
main section.login-page__box[aria-hidden="false"] {
  display: block;
}



    .login__header { 
      display: flex; 
      align-items: center; 
      gap: .75rem; 
      margin-bottom: 1rem; 
      border: 1px solid var(--border);
      border-radius: var(--radius);
      text-align: center;
      color: var(--primary);
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
    }
    .login__logo { 
      width: var(--logo-radius);
      height: var(--logo-radius);
      /*background-color: var(--primary);*/
      border-radius: var(--radius) 0 0 var(--radius);
      /*border-radius: 50%;*/
    }
    .login__title { 
      font-size: 1.5rem; 
      margin: 0; 
    }
    .login__subtext { 
      color: var(--muted); 
      font-size: var(--fs-sm); 
      margin: .125rem 0 0; 
    }
    .login__field { 
      margin-bottom: .875rem; 
    }
    .login__label { 
      display: block; 
      font-size: var(--fs-sm); 
      color: var(--muted); 
      margin-bottom: .35rem; 
    }
    .login__input-wrapper { 
      display: flex; 
      align-items: center; 
      gap: .5rem; 
      border: 1px solid var(--border); 
      border-radius: .75rem; 
      padding: .75rem .875rem; 
      background: transparent; 
      transition: box-shadow .15s ease, border-color .15s ease; 
    }
    .login__input-wrapper:focus-within { 
      border-color: var(--primary); 
      box-shadow: 0 0 0 4px var(--ring); 
    }
    .login__icon { 
      font-size: 1rem; 
      color: var(--muted); 
      width: 1.25rem; 
      text-align: center; 
    }
    .login__input { 
      border: 0; 
      outline: 0; 
      flex: 1; 
      font-size: 1rem; 
      background: transparent; 
      color: var(--text);
      margin-left: 0.5rem; 
    }
    .login__toggle { 
      background: none; 
      border: none; 
      color: var(--muted); 
      font-size: 1rem; 
      cursor: pointer; 
      padding: .4rem .5rem; 
      border-radius: .5rem; 
      transition: background-color .2s ease, color .2s ease;
      margin-left: 0.5rem; 
    }
    .login__toggle:hover { 
      background: var(--border); 
    }
    .login__error { 
      color: var(--danger); 
      font-size: var(--fs-sm); 
      margin-top: .25rem; 
      display: none; 
    }
    .login__error--show { 
      display: block; 
    }
    .login__actions { 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      flex-wrap: wrap; 
      gap: .5rem; 
      margin-top: 2rem; 
    }
    .login__checkbox { 
      display: inline-flex; 
      align-items: center; 
      gap: .5rem; 
      font-size: var(--fs-sm); 
    }
    .login__link { 
      color: var(--primary); 
      text-decoration: none; 
      font-size: var(--fs-sm); 
    }
    .login__link:hover { 
      text-decoration: underline; 
    }
    .login__btn { 
      display: inline-flex; 
      justify-content: center; 
      align-items: center; 
      gap: .5rem; 
      width: 100%; 
      border: 0; 
      border-radius: .75rem; 
      padding: .85rem 1rem; 
      background: var(--primary); 
      color: white; 
      font-weight: 600; 
      font-size: 1rem; 
      cursor: pointer; 
      box-shadow: 0 6px 16px rgba(47, 128, 237, .35); 
      transition: filter .2s ease; 
      margin-top: 1.5rem;
    }
    .login__btn:hover { 
      filter: brightness(1.05); 
    }
    .login__status { 
      margin-top: .75rem; 
      font-size: var(--fs-sm); 
      color: var(--muted); 
    }
    .sr-only { 
      position: absolute !important; 
      width: 1px; 
      height: 1px; 
      padding: 0; 
      margin: -1px; 
      overflow: hidden; 
      clip: rect(0,0,0,0); 
      white-space: nowrap; 
      border: 0; 
    }

    /*section-introduction*/
    main section.login-intro {
        margin-top: calc(var(--header-height) * 1.2);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 2rem;
      }

    .login-intro__photo {
        width: 200px;
        height: 200px;
        background: url("../../../images/logoSchaduw.svg") center/cover no-repeat;
        border-radius: 50%;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        margin-bottom: 1.5rem;
      }

    .login-intro__title {
       font-size: 1.6rem;
        margin-bottom: 1rem;
      }

      .login-intro__desc {
         max-width: 500px;
        margin-bottom: 2rem;
        line-height: 1.5;
      }

      .login-intro__cta {
        margin-top: 1rem;
      }

    .login-intro__cta.btn {
         background-color: #07639a;
        color: white;
        padding: 0.8rem 1.5rem;
        border-radius: 30px;
        text-decoration: none;
        font-weight: bold;
        transition: background-color 0.3s ease;
      }

      .login-intro__cta.btn:hover {
        background-color: #1f3b73;
      }


/*captch*/
/* CAPTCHA styling */

/*aria hide*/
.login__field.captcha[aria-hidden="true"] {
  display: none;
}

.login__field.captcha[aria-hidden="false"] {
  display: block;
}

.captcha { margin-top: 1rem; }



.captcha__wrap {
  display: grid;
  /*grid-template-columns: 200px 1fr;*/
  gap: 1rem;
  align-items: start;
}

.captcha__image {
  position: relative;
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: #f3f4f6;
  padding: .5rem;
}

.captcha__image img {
  display: block;
  border-radius: .5rem;
  background: #e5e7eb;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  margin: 0 auto;
}

.captcha__refresh {
  position: absolute;
  right: .4rem;
  bottom: .4rem;
  border: 0;
  border-radius: .6rem;
  padding: .45rem .55rem;
  background: #ffffff;
  color: var(--primary);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.captcha__refresh:hover { transform: translateY(-1px); }
.captcha__refresh:active { transform: translateY(0); }

.captcha__input .login__input-wrapper { margin-bottom: .35rem; }
.captcha__help { color: var(--muted); font-size: var(--fs-sm); }
.captcha__help-icon { font-weight: 700; }

@media (max-width: 640px) {
  .captcha__wrap { grid-template-columns: 1fr; }
  .captcha__image { justify-self: start; }
}

/*media query*/
@media (max-width: 768px) {
 main section.login-page__box{
    /*max-width: 98%;*/
    padding: 1rem;
    top: 10vh;
  }

   main section.login-intro {
        margin-top: calc(var(--header-height));
        padding-top: 0.5rem;        
      }

  

      .login-intro__desc {
         margin-bottom: 0rem;        
      }

      .header {
        padding: 0 1rem;
        height:auto;
      }

      .header h1 {
        font-size: 1.5rem;
      }

}