/**
 * Orpat — header "Sign in" side drawer, styled to match the distributorship
 * landing-page form (inc/orpat-forms.css, the .orpat-lp / .lp-formcard system).
 *
 * Why this file exists
 *  WoodMart renders this drawer from woodmart_sidebar_login_form() (parent
 *  inc/integrations/woocommerce/template-tags.php) on EVERY page via the
 *  woodmart_before_wp_footer hook. It is not the My Account page, so neither
 *  inc/orpat-auth.css (gated on is_account_page()) nor inc/orpat-forms.css
 *  (scoped to .orpat-lp) ever reached it, and it kept WoodMart's stock styling.
 *
 * Design source
 *  The .lp-formcard pattern: a dark ink gradient head with a brass underline
 *  rule, an ivory "paper" body, white 10px-radius inputs with a brass focus
 *  ring, and a brass gradient pill button. Values below are copied from
 *  inc/orpat-forms.css so the two surfaces stay identical — keep them in sync.
 *
 * No markup is overridden: every selector targets a class WoodMart already
 * outputs, so this survives a parent-theme update and needs no template copy.
 * Scoped entirely under .login-form-side — no other form on the site moves.
 *
 * Rollback: dequeue 'orpat-login-side' in functions.php and delete this file.
 */

.login-form-side {
  /* Palette lifted verbatim from .orpat-lp in inc/orpat-forms.css. */
  --lp-ink: #181410;
  --lp-ink2: #241c14;
  --lp-brass: #b0894e;
  --lp-brass-lt: #d8b877;
  --lp-brass-dk: #8a6a38;
  --lp-paper: #fffdf9;
  --lp-line: #e8dfce;
  --lp-text: #2c2620;
  --lp-muted: #6f675b;
  --lp-muted2: #938a7c;
  --lp-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --lp-sans: 'Jost', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /*
   * Re-point WoodMart's own form tokens for this subtree.
   *
   * WoodMart paints autofilled inputs with
   *   input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--wd-form-bg) inset }
   * That inset shadow is the only mechanism that can repaint Chrome's autofill
   * tint, so redefining the variable it reads is more robust than trying to
   * out-specify every rule. Inheritance keeps it scoped to this drawer.
   */
  --wd-form-bg: #ffffff;
  --wd-form-color: #2c2620;
  --wd-form-brd-color: #d9cfbd;
  --wd-form-brd-color-focus: #b0894e;
  --wd-form-placeholder-color: #a49a89;
  --wd-form-brd-radius: 10px;

  color: var(--lp-text);
  font-family: var(--lp-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/*
 * The parent paints the drawer with .wd-side-hidden{background-color:var(--bgcolor-white)}
 * — a single-class rule. Doubling the selector here (both classes sit on the
 * same element) wins on specificity, so no !important is needed.
 */
.login-form-side.wd-side-hidden {
  background-color: var(--lp-paper);
}

/* ---------------------------------------------------------------- head ---
 * .lp-formcard-head: dark ink gradient + a brass rule fading out to the right.
 * The parent already gives .wd-heading `background-color: inherit` and z-index 6
 * to stay opaque above the scrolling body; the gradient replaces that here, so
 * the head is given its own solid ground rather than inheriting the ivory.
 */
.login-form-side .wd-heading {
  position: relative;
  padding: 22px 26px;
  background: linear-gradient(140deg, var(--lp-ink2), var(--lp-ink));
  border-bottom: 0;
}

.login-form-side .wd-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--lp-brass), transparent 70%);
}

.login-form-side .wd-heading .title {
  font-family: var(--lp-serif);
  font-weight: 600;
  font-size: 1.5rem;
  color: #fbf4e7;
  text-transform: none;
  letter-spacing: normal;
}

/*
 * Close button.
 *
 * The icon and label are NOT coloured by `color` on the <a>: WoodMart paints the
 * glyph with `--wd-action-icon-color` (which falls back to `--wd-action-color`)
 * and the label with `--wd-action-text-color`. Setting `color` alone left it
 * washed out — and worse, the theme defines
 *   --wd-action-color-hover: var(--wd-form-color)
 * which this file re-points to dark ink for the inputs, so the hover state was
 * resolving to near-black against the dark header. Both are set explicitly here.
 */
.login-form-side .wd-heading .close-side-widget {
  --wd-action-color: #c8bca8;
  --wd-action-color-hover: var(--lp-brass-lt);
  --wd-action-icon-color: #c8bca8;
  --wd-action-icon-color-hover: var(--lp-brass-lt);
  --wd-action-text-color: #c8bca8;
  --wd-action-text-color-hover: var(--lp-brass-lt);
}

.login-form-side .wd-heading .close-side-widget a {
  color: #c8bca8;
  transition: color .2s ease;
}

/*
 * The cross is an icon-font glyph ("\f112" at 1.1em). On the dark header a
 * light glyph picks up colour fringing from subpixel antialiasing, which reads
 * as a soft/blurred edge; greyscale antialiasing keeps it crisp. The explicit
 * pixel size avoids a fractional 1.1em computed value landing off the pixel grid.
 */
.login-form-side .wd-heading .close-side-widget .wd-action-icon {
  --wd-action-icon-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.login-form-side .wd-heading .close-side-widget .wd-action-text {
  font-family: var(--lp-sans);
  font-size: .82rem;
  letter-spacing: .02em;
}

.login-form-side .wd-heading .close-side-widget a:hover,
.login-form-side .wd-heading .close-side-widget a:hover .wd-action-text {
  color: var(--lp-brass-lt);
}

/* --------------------------------------------------------------- body --- */
/* .lp-formcard-body padding; the parent's gray-300 bottom border is dropped. */
.login-form-side .woocommerce-form-login {
  padding: clamp(20px, 3vw, 30px);
  border-bottom: 0;
}

/*
 * The form body is a flex column purely so the security note can be ordered
 * BELOW the "Remember me / Lost your password?" footer. WooCommerce only offers
 * woocommerce_login_form_end, which fires before that footer is printed, so the
 * visual order is corrected here rather than by overriding the parent template.
 * Every other child keeps source order via the default order:0.
 */
.login-form-side .woocommerce-form-login {
  display: flex;
  flex-direction: column;
}

/* .lp-formcard-head p — the sub-line under the panel title. */
.login-form-side .orpat-login-side__intro {
  margin: -4px 0 18px;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--lp-muted);
}

/* .lp-btn-note — reassurance line, pushed under the footer (see flex note above). */
.login-form-side .orpat-login-side__note {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--lp-line);
  text-align: center;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--lp-muted2);
}

/* .lp-field */
.login-form-side .form-row {
  margin: 0 0 15px;
}

/* .lp-label — note the :not() keeps this off the "Remember me" checkbox label. */
.login-form-side .woocommerce-form-login label:not(.woocommerce-form-login__rememberme) {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--lp-ink);
  margin: 0 0 6px;
  text-transform: none;
}

/* .lp-label .req */
.login-form-side .woocommerce-form-login label .required {
  color: var(--lp-brass-dk);
  text-decoration: none;
  border: 0;
}

/* .lp-input */
.login-form-side input[type="text"],
.login-form-side input[type="email"],
.login-form-side input[type="password"] {
  width: 100%;
  height: auto;
  font-family: var(--lp-sans);
  /* .lp-input uses .97rem; bumped to 16px so iOS Safari never zooms on focus. */
  font-size: 16px;
  color: var(--lp-text);
  background: #fff;
  border: 1px solid #d9cfbd;
  border-radius: 10px;
  padding: 12px 14px;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color .25s, box-shadow .25s;
  appearance: none;
  -webkit-appearance: none;
}

.login-form-side input::placeholder {
  color: #a49a89;
}

.login-form-side input[type="text"]:focus,
.login-form-side input[type="email"]:focus,
.login-form-side input[type="password"]:focus {
  outline: none;
  border-color: var(--lp-brass);
  box-shadow: 0 0 0 4px rgba(176, 137, 78, .16);
}

.login-form-side input:-webkit-autofill,
.login-form-side input:-webkit-autofill:hover,
.login-form-side input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--lp-text);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  caret-color: var(--lp-text);
}

/*
 * Password reveal toggle.
 *
 * WooCommerce (assets/js/frontend/woocommerce.js) wraps the password input in
 * <span class="password-input"> and appends <button class="show-password-input">,
 * which WoodMart sizes with `width/height: var(--wd-form-height)` and pins to the
 * inset-inline-end edge.
 *
 * Two things must be handled, or the field is visibly broken:
 *  1. --wd-form-height is what sizes that button. The LP inputs are padding-sized
 *     (12px + 1.4 line-height + 12px ~= 45px) rather than fixed-height, so the
 *     value is set explicitly to match; without it the button falls back to the
 *     theme default and sits off-centre against the shorter input.
 *  2. The button overlays the input's right edge, so right padding is reserved —
 *     otherwise a long password runs underneath the icon.
 */
.login-form-side {
  --wd-form-height: 45px;
}

.login-form-side .password-input {
  position: relative;
  display: block;
}

.login-form-side .password-input .lp-input,
.login-form-side .password-input input[type="password"],
.login-form-side .password-input input[type="text"] {
  padding-right: 46px;
}

.login-form-side .show-password-input {
  width: 45px;
  height: 45px;
  color: var(--lp-muted2);
  transition: color .2s ease;
}

.login-form-side .show-password-input:hover,
.login-form-side .show-password-input.display-password {
  color: var(--lp-brass-dk);
}

/* ------------------------------------------------------------- actions --- */
.login-form-side .form-row-btn {
  margin: 4px 0 14px;
}

/*
 * .lp-btn.is-block
 *
 * The Log in button carries WoodMart's .btn.btn-accent, which sets
 *   color: var(--btn-accented-color); background-color: var(--btn-accented-bgcolor);
 *   box-shadow: var(--btn-accented-box-shadow);
 * from the theme's global accent palette. Those variables must be re-pointed as
 * well as the properties below: `background` (shorthand) resets background-color,
 * but the theme's own box-shadow variable would still paint the stock accent
 * glow over the brass one, and :hover/:active re-assert colour from the -hover
 * variables. Re-pointing keeps us inside WoodMart's system with no !important.
 */
.login-form-side .woocommerce-form-login__submit {
  --btn-accented-color: var(--lp-ink);
  --btn-accented-color-hover: var(--lp-ink);
  --btn-accented-bgcolor: transparent;
  --btn-accented-bgcolor-hover: transparent;
  --btn-accented-box-shadow: 0 16px 34px -14px rgba(176, 137, 78, .75);
  --btn-accented-box-shadow-hover: 0 24px 46px -16px rgba(176, 137, 78, .85);
  --btn-accented-box-shadow-active: 0 16px 34px -14px rgba(176, 137, 78, .75);
  --btn-accented-bottom-active: 0;
  --btn-accented-brd-radius: 999px;
  --btn-accented-transform: uppercase;
  --btn-accented-font-weight: 600;
  --btn-accented-font-family: var(--lp-sans);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  width: 100%;
  cursor: pointer;
  font-family: var(--lp-sans);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .9rem;
  color: var(--lp-ink);
  background: linear-gradient(180deg, var(--lp-brass-lt), var(--lp-brass));
  border: 0;
  border-radius: 999px;
  padding: 15px 34px;
  text-decoration: none;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s;
  box-shadow: 0 16px 34px -14px rgba(176, 137, 78, .75);
}

.login-form-side .woocommerce-form-login__submit:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, var(--lp-brass-lt), var(--lp-brass));
  color: var(--lp-ink);
  box-shadow: 0 24px 46px -16px rgba(176, 137, 78, .85);
}

.login-form-side .woocommerce-form-login__submit:focus-visible {
  outline: 2px solid var(--lp-brass-dk);
  outline-offset: 3px;
}

/* ----------------------------------------- remember me / lost password --- */
.login-form-side .login-form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0;
}

/* Mirrors .lp-consentline's muted, small-type treatment. */
.login-form-side .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  cursor: pointer;
  font-size: .8rem;
  color: var(--lp-muted);
  text-transform: none;
  letter-spacing: normal;
}

.login-form-side .woocommerce-form-login__rememberme input {
  width: 17px;
  height: 17px;
  margin: 0;
  border-radius: 5px;
  accent-color: var(--lp-brass);
  cursor: pointer;
  flex: 0 0 auto;
}

.login-form-side .lost_password {
  font-size: .8rem;
  color: var(--lp-brass-dk);
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 106, 56, .35);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}

.login-form-side .lost_password:hover {
  color: var(--lp-ink);
  border-color: var(--lp-ink);
}

/* ------------------------------------------------------ create account --- */
.login-form-side .create-account-question {
  margin: 0 clamp(20px, 3vw, 30px) 26px;
  padding: 22px 0 0;
  /* Parent draws a light gray-300 border-bottom; replaced with a hairline top rule. */
  border-top: 1px solid var(--lp-line);
  border-bottom: 0;
  text-align: center;
}

/*
 * WoodMart prints a large generic user glyph above this block via
 * .create-account-question:before { content:"\f124"; font-family:"woodmart-font" }
 * (css/parts/header-el-my-account-sidebar.css). It reads as filler against the
 * form card, so it is suppressed and the vertical space reclaimed.
 */
.login-form-side .create-account-question::before {
  display: none;
}

.login-form-side .create-account-question p {
  margin: 0 0 14px;
  font-size: .86rem;
  font-weight: 500;
  color: var(--lp-muted);
}

/*
 * The parent styles this button purely through its own --btn-* custom
 * properties (--btn-padding:0, --btn-height:none, --btn-brd-width:2px, plus a
 * border-top/inline reset). Re-pointing those variables is what makes the
 * outline button work — setting padding/border directly would be overridden by
 * WoodMart's own declarations that read them, and would otherwise need
 * !important. This keeps us inside WoodMart's system.
 */
.login-form-side .create-account-button {
  --btn-color: var(--lp-ink);
  --btn-color-hover: var(--lp-brass-dk);
  --btn-brd-color: #d9cfbd;
  --btn-brd-color-hover: var(--lp-brass);
  --btn-bgcolor: transparent;
  --btn-bgcolor-hover: #fdf8ef;
  --btn-brd-width: 1px;
  --btn-height: none;
  --btn-padding: 13px 28px;
  --btn-brd-radius: 999px;

  display: block;
  width: 100%;
  border-top-width: 1px;
  border-inline-width: 1px;
  border-style: solid;
  font-family: var(--lp-sans);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .82rem;
  line-height: 1.4;
  transition: border-color .22s ease, background-color .22s ease, color .22s ease;
}

/* ------------------------------------------------------------ notices --- */
.login-form-side .woocommerce-error,
.login-form-side .woocommerce-info,
.login-form-side .woocommerce-message {
  margin: 20px clamp(20px, 3vw, 30px) 0;
  border-radius: 10px;
  border: 1px solid var(--lp-line);
  background: #fdf8ef;
  color: var(--lp-text);
  font-size: .84rem;
}

.login-form-side .woocommerce-error a,
.login-form-side .woocommerce-info a,
.login-form-side .woocommerce-message a {
  color: var(--lp-brass-dk);
}

/* ------------------------------------------------------- social login --- */
.login-form-side .wd-login-divider {
  color: var(--lp-muted2);
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.login-form-side .wd-social-login .btn {
  border: 1px solid #d9cfbd;
  background: #fff;
  color: var(--lp-text);
}

.login-form-side .wd-social-login .btn:hover {
  border-color: var(--lp-brass);
  background: #fdf8ef;
  color: var(--lp-brass-dk);
}

@media (prefers-reduced-motion: reduce) {
  .login-form-side .woocommerce-form-login__submit {
    transition: none;
  }
  .login-form-side .woocommerce-form-login__submit:hover {
    transform: none;
  }
}