/* DRPP client login panel */
.drpp-login{
  position:relative;
  height:100%;
  margin:0;
}

.drpp-login summary{
  list-style:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:116px;
  height:calc(var(--drpp-header-height) - 4px);
  min-height:calc(var(--drpp-header-height) - 4px);
  padding:0 22px;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(255,255,255,.9);
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  box-shadow:none;
  user-select:none;
}

.drpp-login summary::-webkit-details-marker{display:none}

.drpp-login summary:hover,
.drpp-login summary:focus-visible,
.drpp-login[open] summary{
  background:rgba(255,255,255,.07);
  color:var(--drpp-yellow);
}

.drpp-login-trigger-icon{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.drpp-login-panel{
  position:absolute;
  top:100%;
  right:0;
  z-index:10003;
  width:min(390px,calc(100vw - 32px));
  padding:0;
  overflow:hidden;
  border:1px solid rgba(6,20,38,.18);
  border-top:4px solid var(--drpp-yellow);
  background:#fff;
  color:var(--drpp-navy);
  box-shadow:0 22px 54px rgba(0,0,0,.28);
  transform-origin:top right;
}

.drpp-login[open] .drpp-login-panel{
  animation:drpp-login-reveal .16s ease-out both;
}

@keyframes drpp-login-reveal{
  from{opacity:0;transform:translateY(-6px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.drpp-login-panel-head{
  padding:22px 22px 20px;
  background:var(--drpp-navy);
  color:#fff;
  border-bottom:6px solid var(--drpp-yellow);
}

.drpp-login-eyebrow{
  margin:0 0 16px;
  color:var(--drpp-yellow);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.drpp-login-title-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px;
  gap:18px;
  align-items:start;
}

.drpp-login-title-row strong{
  display:block;
  margin:0 0 7px;
  color:#fff;
  font-family:Manrope,Inter,sans-serif;
  font-size:28px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.045em;
}

.drpp-login-title-row p{
  max-width:270px;
  margin:0;
  color:rgba(255,255,255,.7);
  font-size:13px;
  line-height:1.45;
}

.drpp-login-shield{
  width:38px;
  height:43px;
  fill:none;
  stroke:var(--drpp-yellow);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.drpp-login-panel-body{
  display:grid;
  gap:16px;
  padding:22px;
  background:#fff;
}

.drpp-login-field{
  display:grid;
  gap:7px;
}

.drpp-login-field label{
  color:var(--drpp-navy);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.drpp-login-control{
  position:relative;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  min-height:48px;
  border:1px solid rgba(6,20,38,.26);
  background:#f7f7f4;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}

.drpp-login-control:focus-within{
  border-color:var(--drpp-navy);
  background:#fff;
  box-shadow:0 0 0 4px rgba(255,238,88,.48);
}

.drpp-login-control:has(input[aria-invalid="true"]){
  border-color:#b42318;
  background:#fff8f7;
  box-shadow:0 0 0 3px rgba(180,35,24,.12);
}

.drpp-login-control svg{
  align-self:center;
  justify-self:center;
  width:18px;
  height:18px;
  fill:none;
  stroke:var(--drpp-navy);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.72;
}

.drpp-login-control input{
  width:100%;
  min-width:0;
  height:46px;
  padding:0 13px 0 0;
  border:0;
  background:transparent;
  color:var(--drpp-navy);
  font:inherit;
  font-size:14px;
  outline:none;
}

.drpp-login-control input::placeholder{
  color:rgba(6,20,38,.44);
  opacity:1;
}

.drpp-login-panel-body button{
  min-height:48px;
  margin-top:2px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:2px solid var(--drpp-navy);
  background:var(--drpp-yellow);
  color:var(--drpp-navy);
  box-shadow:5px 5px 0 var(--drpp-navy);
  cursor:pointer;
  font:inherit;
  font-size:13px;
  font-weight:800;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}

.drpp-login-panel-body button:hover,
.drpp-login-panel-body button:focus-visible{
  background:#fff36f;
  transform:translate(2px,2px);
  box-shadow:3px 3px 0 var(--drpp-navy);
}

.drpp-login-panel-body button svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.drpp-login-error{
  margin:0;
  padding:11px 12px;
  border-left:4px solid #b42318;
  background:#fff1ef;
  color:#8a1c13;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
}

.drpp-login-error[hidden]{display:none}

@media (max-width:1180px){
  .drpp-login summary{min-width:102px;padding-inline:16px}
}

@media (max-width:860px){
  .drpp-login summary{
    min-width:100px;
    height:calc(var(--drpp-header-height) - 4px);
    min-height:calc(var(--drpp-header-height) - 4px);
    padding-inline:16px;
  }
  .drpp-login-panel{
    position:fixed;
    top:var(--drpp-header-height);
    right:12px;
    width:min(380px,calc(100vw - 24px));
  }
}

@media (max-width:520px){
  .drpp-login summary{min-width:78px;padding-inline:12px;font-size:11.5px}
  .drpp-login-trigger-icon{display:none}
  .drpp-login-panel{
    left:12px;
    right:12px;
    width:auto;
  }
  .drpp-login-panel-head{padding:19px 18px 17px}
  .drpp-login-panel-body{padding:18px}
  .drpp-login-title-row strong{font-size:25px}
}