/* ==========================================================================
   Sign-in window of the header (OH-131)
   Markup: template-parts/login-drawer.php, a modal <dialog> for guests;
   script: assets/js/oh-login.js; loaded by inc/core/login-drawer.php for
   guests only. The dialog covers the page and dims it; the window
   (.oh-ld-panel) slides in from the right like the mini cart and has the
   look of the sign-in card of the account (account.css, «Signed out»).
   Colours only from the --oh-* tokens, the font is inherited from style.css.
   ========================================================================== */

.oh-login-drawer {
  --oh-ld-width: 440px; /* width of the window (.oh-ld-panel) */
  --oh-ld-pad: 24px; /* side padding of head, form and foot */
  --oh-ld-block: 24px; /* top and bottom padding of form and foot */
  --oh-ld-gap: 16px; /* between the parts of the form */
  --oh-ld-tap: 44px; /* smallest touch target */
  --oh-ld-field: 42px; /* fields, as in the account and the checkout */
  --oh-ld-icon: 20px;
  --oh-ld-title: 20px;
  --oh-ld-text: 14px;
  --oh-ld-small: 13px;
  --oh-ld-label: 12px; /* the line above the benefits */
  --oh-ld-line: 1px solid var(--oh-color6);
  --oh-ld-speed: 0.45s;
  --oh-ld-shadow: -18px 0 50px color-mix(in srgb, var(--oh-color4) 18%, transparent);
  --oh-ld-backdrop: color-mix(in srgb, var(--oh-color4) 60%, transparent);
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--oh-color4);
  /* clip, not hidden: a dialog that can scroll would scroll the window into
     view when showModal() focuses it, before it slides in. */
  overflow: clip;
  transition: background-color var(--oh-ld-speed) ease;
}

/* oh-login.js sets .is-open a frame after showModal(), so the page dims and
   the window slides in, and takes it away before close(), so it slides out.
   The dimming is the dialog itself, not ::backdrop, which in older browsers
   cannot read the colour tokens. */
.oh-login-drawer.is-open {
  background-color: var(--oh-ld-backdrop);
}

.oh-login-drawer::backdrop {
  background: none;
}

/* The page behind does not scroll while the window is open; the padding takes
   the place of the scrollbar, so the page does not move (oh-login.js sets
   --oh-ld-gutter to its width). */
body.drawer-open {
  overflow: hidden;
  padding-right: var(--oh-ld-gutter, 0px);
}

/* Buttons and fields take the font of the page; zero specificity, so .btn
   keeps its size and weight. */
:where(.oh-login-drawer) :where(button, input) {
  font: inherit;
}

.oh-login-drawer :is(a, button, input):focus-visible {
  outline: 2px solid var(--oh-primary);
  outline-offset: 3px;
}

.oh-login-drawer .btn {
  min-height: var(--oh-ld-tap);
}

/* The sign-in request runs (oh-login.js): the button keeps the focus. */
.oh-login-drawer .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: progress;
}

.oh-ld-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(var(--oh-ld-width), 100%);
  background: var(--oh-color7);
  box-shadow: var(--oh-ld-shadow);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--oh-ld-speed) cubic-bezier(0.19, 1, 0.22, 1);
}

.oh-login-drawer.is-open .oh-ld-panel {
  transform: none;
}

/* Head: as the mini cart. */
.oh-ld-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 10px var(--oh-ld-pad);
  border-bottom: var(--oh-ld-line);
}

.oh-ld-title {
  flex: 1 1 auto;
  margin: 0;
  color: var(--oh-primary);
  font-size: var(--oh-ld-title);
  font-weight: 600;
  line-height: 1.3;
}

.oh-ld-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-height: var(--oh-ld-tap);
  margin-right: -4px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--oh-color3);
  font-weight: 600;
  cursor: pointer;
}

.oh-ld-close:hover {
  color: var(--oh-color4);
}

.oh-ld-close svg {
  width: var(--oh-ld-icon);
  height: var(--oh-ld-icon);
}

/* The form, as the sign-in card of the account. */
.oh-ld-body {
  padding: var(--oh-ld-block) var(--oh-ld-pad);
}

.oh-ld-form {
  display: grid;
  gap: var(--oh-ld-gap);
}

.oh-ld-field {
  display: grid;
  gap: 6px;
  margin: 0;
}

.oh-ld-field label {
  margin: 0;
  color: var(--oh-primary);
  line-height: 1.4;
}

.oh-ld-field input {
  height: var(--oh-ld-field);
  padding: 0 14px;
}

.oh-ld-pass {
  position: relative;
  display: block;
}

.oh-ld-pass input {
  padding-right: var(--oh-ld-tap);
}

.oh-ld-pass__toggle {
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--oh-ld-tap);
  height: var(--oh-ld-tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--oh-color5);
  transform: translateY(-50%);
  cursor: pointer;
}

.oh-ld-pass__toggle[hidden],
.oh-ld-pass__hide,
.oh-ld-pass__toggle[aria-pressed="true"] .oh-ld-pass__show {
  display: none;
}

.oh-ld-pass__toggle[aria-pressed="true"] .oh-ld-pass__hide {
  display: block;
}

.oh-ld-pass__toggle:hover {
  color: var(--oh-color4);
}

.oh-ld-pass__toggle svg {
  width: var(--oh-ld-icon);
  height: var(--oh-ld-icon);
}

.oh-ld-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
}

.oh-ld-row a {
  display: inline-flex;
  align-items: center;
  min-height: var(--oh-ld-tap);
  color: var(--oh-color4);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.oh-ld-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--oh-ld-tap);
  margin: 0;
  color: var(--oh-color4);
  cursor: pointer;
}

.oh-ld-check input {
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--oh-primary);
}

/* Answer of the sign-in (oh-login.js): a spinner, the message of WordPress
   or WooCommerce, or the line before the account page loads. */
.oh-login-status {
  font-size: var(--oh-ld-text);
  line-height: 1.5;
}

.oh-login-status .error {
  color: var(--oh-error);
}

.oh-login-status .success {
  color: var(--oh-primary);
}

.oh-loader {
  width: var(--oh-ld-icon);
  height: var(--oh-ld-icon);
  margin: 0 auto;
  border: 2px solid var(--oh-color6);
  border-top-color: var(--oh-color3);
  border-radius: 50%;
  animation: oh-ld-spin 0.8s linear infinite;
}

@keyframes oh-ld-spin {
  to {
    transform: rotate(360deg);
  }
}

/* What an account is for, and the way to «Konto erstellen». */
.oh-ld-foot {
  display: grid;
  gap: 12px;
  padding: var(--oh-ld-block) var(--oh-ld-pad);
  border-top: var(--oh-ld-line);
}

.oh-ld-eyebrow {
  margin: 0;
  color: var(--oh-color4);
  font-size: var(--oh-ld-label);
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.oh-ld-benefits {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oh-ld-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  color: var(--oh-color4);
  font-size: var(--oh-ld-text);
  line-height: 1.5;
}

.oh-ld-benefits svg {
  flex: 0 0 var(--oh-ld-icon);
  width: var(--oh-ld-icon);
  height: var(--oh-ld-icon);
}

.oh-ld-note {
  margin: 0;
  color: var(--oh-color5);
  font-size: var(--oh-ld-small);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .oh-login-drawer,
  .oh-ld-panel {
    transition: none;
  }

  .oh-loader {
    animation-duration: 2.4s;
  }
}