/* The Drawer - auth modal */

.auth-modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.65);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         1000;
  padding:         24px;
}

.auth-modal {
  background:    #263330;
  border:        1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding:       32px;
  width:         100%;
  max-width:     380px;
  position:      relative;
}

.auth-modal--terms {
  max-width: 460px;
}

.auth-modal-close {
  position:   absolute;
  top:        14px;
  right:      14px;
  background: none;
  border:     none;
  color:      rgba(255, 255, 255, 0.4);
  font-size:  22px;
  cursor:     pointer;
  padding:    4px 8px;
  line-height: 1;
}

.auth-modal-close:hover {
  color: var(--off-white);
}

.auth-modal-title {
  font-family: var(--serif);
  font-size:   26px;
  font-weight: 700;
  color:       var(--off-white);
  margin:      0 0 20px;
}

.auth-modal-error {
  font-family: var(--sans);
  font-size:   12px;
  font-weight: 300;
  color:       var(--rose);
  margin:      0 0 14px;
}

.auth-modal-form {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.auth-modal-input {
  width:        100%;
  background:   rgba(255, 255, 255, 0.06);
  border:       1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  color:        var(--off-white);
  font-family:  var(--sans);
  font-size:    14px;
  font-weight:  300;
  padding:      10px 12px;
  box-sizing:   border-box;
}

.auth-modal-input::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.auth-modal-input:focus {
  outline:      none;
  border-color: var(--sage);
}

.auth-modal-btn {
  background:    var(--sage);
  border:        none;
  border-radius: 4px;
  color:         var(--off-white);
  font-family:   var(--sans);
  font-size:     14px;
  font-weight:   500;
  padding:       11px;
  cursor:        pointer;
  margin-top:    4px;
}

.auth-modal-btn:hover {
  background: #4a7a6a;
}

.auth-modal-btn:disabled {
  opacity: 0.5;
  cursor:  default;
}

.auth-modal-consent {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  font-family: var(--sans);
  font-size:   12px;
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.55);
  cursor:      pointer;
}

.auth-modal-terms {
  font-family: var(--sans);
  font-size:   11px;
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.4);
  margin:      0;
}

.auth-modal-terms-link {
  color:                   rgba(255, 255, 255, 0.55);
  text-decoration:         underline;
  text-underline-offset:   2px;
}

.auth-modal-forgot {
  font-family: var(--sans);
  font-size:   12px;
  margin:      2px 0 0;
}

.auth-modal-link {
  background:            none;
  border:                none;
  color:                 rgba(255, 255, 255, 0.5);
  font-family:           var(--sans);
  font-size:             inherit;
  font-weight:           300;
  cursor:                pointer;
  padding:               0;
  text-decoration:       underline;
  text-underline-offset: 2px;
}

.auth-modal-link:hover {
  color: var(--off-white);
}

.auth-modal-toggle {
  font-family: var(--sans);
  font-size:   12px;
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.42);
  margin:      20px 0 0;
}

.auth-modal-terms-section {
  font-family: var(--sans);
  font-size:   13px;
  font-weight: 500;
  color:       var(--off-white);
  margin:      16px 0 6px;
}

.auth-modal-terms-para {
  font-family:  var(--sans);
  font-size:    12px;
  font-weight:  300;
  color:        rgba(255, 255, 255, 0.7);
  margin:       0 0 8px;
  line-height:  1.6;
}

.auth-modal-terms-footer {
  font-family: var(--sans);
  font-size:   11px;
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.4);
  margin:      16px 0 0;
}

.auth-modal-forgot-confirm {
  font-family: var(--sans);
  font-size:   13px;
  font-weight: 300;
  color:       var(--sage);
  margin:      0;
  padding:     16px 0 0;
}