/*
 * Sign in, lost password, link sent, new password (woocommerce/myaccount/form-login.php, form-lost-password.php,
 * lost-password-confirmation.php, form-reset-password.php). Loaded for signed-out visitors on the account page
 * (inc/assets.php). One column on phones; from 960px the form column sits beside the mocha account panel.
 */

.auth { display: grid; gap: var(--space-10); align-items: start; }
.auth__main, .auth__side { display: grid; gap: var(--space-5); width: 100%; max-width: 460px; min-width: 0; }
.auth a.btn { text-decoration: none; }
.auth a.btn-secondary { color: var(--text); }

.auth__head { display: grid; gap: var(--space-2); }
.auth__title { margin: 0; font-size: var(--text-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1); text-wrap: balance; }
.auth__subtitle { margin: 0; font-size: var(--text-h3); font-weight: 600; line-height: var(--lh-h3); }
.auth__lede { margin: 0; max-width: 44ch; font-size: var(--text-small); line-height: var(--lh-small); color: var(--text-muted); text-wrap: pretty; }
.auth__hint { margin: 0; font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--text-muted); }

/* Card: WooCommerce's notices sit on top, inside it */
.auth__card { display: grid; gap: var(--space-5); padding: var(--space-5) var(--space-4); border: 1px solid var(--border); background: var(--bg-raised); }
.auth__card .woocommerce-notices-wrapper { display: grid; gap: var(--space-2); }
.auth__card .woocommerce-notices-wrapper:not(:has(*)) { display: none; }
.auth__card :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) { margin: 0; font-size: var(--text-small); line-height: var(--lh-small); }
.auth__card .woocommerce-error a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 0.35em; }
@media (min-width: 480px) { .auth__card { padding: var(--space-6); } }

/* Form */
.auth__form { display: grid; gap: var(--space-4); margin: 0; }
.woocommerce .auth__form .form-row { display: grid; gap: var(--space-2); width: auto; margin: 0; padding: 0; float: none; }
.auth__form .form-row > label { font-size: var(--text-label); font-weight: 500; line-height: var(--lh-label); color: var(--text); }
.woocommerce .auth__form .input-text {
  width: 100%; font-size: var(--text-body);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.woocommerce .auth__form .input-text:hover { border-color: var(--text); }
.woocommerce .auth__form .input-text:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus-ring) 22%, transparent); }
.woocommerce .auth__form .input-text[aria-invalid="true"] { border-color: var(--error); }
.woocommerce .auth__form .input-text[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--error) 22%, transparent); }
.auth__form .btn { margin-block-start: var(--space-1); }
.auth__form .woocommerce-privacy-policy-text:not(:has(*)) { display: none; }
.auth__form .woocommerce-privacy-policy-text p { margin: 0; font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--text-muted); }

/*
 * Show / hide password (the button comes from WooCommerce's script). The field is left-to-right, so the eye sits on its
 * right edge, after the text, and never covers the first characters.
 */
.auth__form .password-input { position: relative; display: block; }
.woocommerce .auth__form .password-input .input-text { padding-right: 52px; }
.auth__form .show-password-input {
  position: absolute; inset-block: 0; right: 0; display: grid; place-items: center; width: 48px; padding: 0;
  border: 0; background: none; color: var(--text-muted); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.auth__form .show-password-input::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--auth-eye) center / contain no-repeat; mask: var(--auth-eye) center / contain no-repeat;
}
.auth__form .show-password-input.display-password { color: var(--text); }
.auth__form .show-password-input.display-password::before { -webkit-mask-image: var(--auth-eye-off); mask-image: var(--auth-eye-off); }
.auth__form .show-password-input:hover { color: var(--text); }
.auth__form .show-password-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -6px; border-radius: var(--radius-md); }
.auth {
  --auth-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --auth-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 3.5 17 17'/%3E%3Cpath d='M10.4 5.6A9 9 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a16.8 16.8 0 0 1-2.8 3.6M6.6 7.1A16.4 16.4 0 0 0 2.5 12s3.5 6.5 9.5 6.5a9.2 9.2 0 0 0 4.4-1.1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
}

/* WooCommerce's strength meter on «گذرواژه‌ی تازه» */
.auth__form .woocommerce-password-strength {
  margin-block-start: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-caption); font-weight: 500; line-height: var(--lh-caption); text-align: start;
}
.auth__form .woocommerce-password-strength:is(.short, .bad) { background: var(--error-tint); color: var(--error); }
.auth__form .woocommerce-password-strength.good { background: var(--warning-tint); color: var(--warning); }
.auth__form .woocommerce-password-strength.strong { background: var(--success-tint); color: var(--success); }
.auth__form .woocommerce-password-hint { display: block; font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--text-muted); }

/* «گذرواژه را فراموش کرده‌اید؟» under the password, at the row's end; 44px tall to tap, without taking the space */
.auth__forgot { justify-self: end; margin-block: calc(var(--space-2) * -1) calc(var(--space-3) * -1); font-size: var(--text-caption); }
.auth__forgot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.4em; }
.auth__forgot a:hover { text-decoration-thickness: 2px; }

.auth__remember .check { align-items: center; min-height: 44px; font-size: var(--text-small); line-height: var(--lh-small); color: var(--text); }
.auth__remember .check input { margin-block-start: 0; }

.auth__note { margin: 0; font-size: var(--text-small); line-height: var(--lh-small); color: var(--text-muted); }
.auth__note a { font-weight: 500; }

/* Link sent */
.auth__done { justify-items: start; gap: var(--space-3); }
.auth__done .auth__title { font-size: clamp(1.75rem, 4vw, 2.25rem); }
.auth__done .auth__lede { color: var(--text); }
.auth__done .btn { margin-block-start: var(--space-3); }
.auth__mark {
  display: grid; place-items: center; width: 56px; height: 56px; margin-block-end: var(--space-2);
  border-radius: var(--radius-panel); background: var(--success-tint); color: var(--success);
}
.auth__mark svg { width: 26px; height: 26px; }

/* Account panel (template-parts/account/auth-aside.php): desktop only */
.auth__aside { display: none; }

/* Tablets: the single column sits in the middle of the page */
@media (min-width: 600px) and (max-width: 959px) {
  .auth { grid-template-columns: minmax(0, 460px); justify-content: center; }
}

@media (min-width: 960px) {
  .auth { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); column-gap: clamp(var(--space-12), 6vw, var(--space-24)); align-items: stretch; }
  .auth--register { grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: start; align-items: start; }
  .auth--single { grid-template-columns: minmax(0, 460px); justify-content: center; }
  .auth__note--stacked { display: none; }

  .auth__aside {
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-10);
    padding: var(--space-10); background: var(--bg-inverse); color: var(--text-inverse);
  }
  .auth__brand img { display: block; width: auto; height: 36px; }
  .auth__brand .on-light { display: block; }
  .auth__brand .on-dark { display: none; }
  .auth__statement { margin: 0; font-size: clamp(2.25rem, 3.4vw, 3rem); font-weight: 200; line-height: 1.3; }
  .auth__statement span { display: block; }
  .auth__perks { list-style: none; display: grid; margin: 0; padding: 0; }
  .auth__perks li {
    display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-4);
    border-block-start: 1px solid color-mix(in oklab, var(--text-inverse) 16%, transparent);
    font-size: var(--text-small); line-height: var(--lh-small); color: color-mix(in oklab, var(--text-inverse) 84%, transparent);
  }
  .auth__perks svg { width: 20px; height: 20px; flex: none; color: var(--text-inverse); }
}
/* In dark themes the panel turns cream, so it takes the mocha wordmark */
[data-theme="dark"] .auth__brand .on-light { display: none; }
[data-theme="dark"] .auth__brand .on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth__brand .on-light { display: none; }
  :root:not([data-theme="light"]) .auth__brand .on-dark { display: block; }
}