/*====================================================
Sommaire (Table des matières)
1. Overlay
2. Panneau
3. Formulaire
4. États
5. Responsive
====================================================*/

/* 1. Overlay */
.va-relicAuth{
  position:fixed;
  inset:0;
  z-index:71;
  display:none;
  place-items:center;
  padding:24px;
}

.va-relicAuth[data-open="true"]{
  display:grid;
}

.va-relicAuth__backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,4,15,.78);
  backdrop-filter:blur(8px);
}

/* 2. Panneau */
.va-relicAuth__panel{
  position:relative;
  z-index:1;
  width:min(100%, 520px);
  padding:30px;
  border:1px solid rgba(246,216,111,.34);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(177,122,255,.15), transparent 48%),
    rgba(11,12,30,.97);
  box-shadow:0 24px 90px rgba(0,0,0,.58), 0 0 42px rgba(150,91,255,.12);
  color:#f6f2ff;
}

.va-relicAuth__close{
  position:absolute;
  top:12px;
  right:14px;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  background:rgba(255,255,255,.05);
  color:#fff;
  font:400 24px/1 Arial, sans-serif;
  cursor:pointer;
}

.va-relicAuth__eyebrow{
  margin-bottom:9px;
  color:#f1ce64;
  font:700 11px/1.3 'Orbitron', system-ui, sans-serif;
  letter-spacing:.15em;
}

.va-relicAuth__title{
  margin:0;
  color:#fff;
  font:700 25px/1.15 'Orbitron', system-ui, sans-serif;
}

.va-relicAuth__copy,
.va-relicAuth__note{
  color:rgba(239,235,255,.72);
  font:400 14px/1.6 'Roboto', system-ui, sans-serif;
}

.va-relicAuth__copy{
  margin:14px 0 20px;
}

.va-relicAuth__note{
  margin:14px 0 0;
  font-size:12px;
}

/* 3. Formulaire */
.va-relicAuth__form{
  display:grid;
  gap:10px;
}

.va-relicAuth__label{
  color:#d7cdf5;
  font:700 11px/1.2 'Orbitron', system-ui, sans-serif;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.va-relicAuth__input{
  width:100%;
  box-sizing:border-box;
  height:50px;
  padding:0 15px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:11px;
  outline:none;
  background:rgba(255,255,255,.06);
  color:#fff;
  font:700 18px/1 'Orbitron', system-ui, sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.va-relicAuth__input:focus{
  border-color:rgba(246,216,111,.68);
  box-shadow:0 0 0 2px rgba(246,216,111,.10), 0 0 24px rgba(246,216,111,.08);
}

.va-relicAuth__submit{
  min-height:46px;
  margin-top:4px;
  border:1px solid rgba(246,216,111,.48);
  border-radius:11px;
  background:rgba(246,216,111,.12);
  color:#fff0b0;
  font:700 13px/1 'Orbitron', system-ui, sans-serif;
  cursor:pointer;
}

.va-relicAuth__submit:hover:not(:disabled){
  background:rgba(246,216,111,.18);
}

.va-relicAuth__submit:disabled,
.va-relicAuth__input:disabled{
  opacity:.62;
  cursor:wait;
}

/* 4. États */
.va-relicAuth__message{
  margin:15px 0 0;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:rgba(255,255,255,.05);
  font:600 13px/1.5 'Roboto', system-ui, sans-serif;
}

.va-relicAuth__message[data-kind="success"]{
  border-color:rgba(105,255,168,.34);
  background:rgba(105,255,168,.09);
  color:#dcffea;
}

.va-relicAuth__message[data-kind="error"]{
  border-color:rgba(255,116,116,.38);
  background:rgba(255,116,116,.09);
  color:#ffdede;
}

.va-relicAuth__message[data-kind="info"]{
  border-color:rgba(111,243,255,.30);
  background:rgba(111,243,255,.08);
  color:#dffcff;
}

/* 5. Responsive */
@media (max-width: 600px){
  .va-relicAuth{
    padding:14px;
  }

  .va-relicAuth__panel{
    padding:25px 18px 20px;
  }

  .va-relicAuth__title{
    font-size:21px;
  }
}