/**
 * MC Wear — My Account (login / register) styling. Matches the Figma
 * "Welcome Back" sign-in. Fonts loaded via Elementor Custom Fonts.
 */

:root {
  --mcw-font-heading: "Ivy Mode", "Cormorant Garamond", Georgia, serif;
  --mcw-font-body: "Mona Sans Expanded", "Mona Sans", system-ui, sans-serif;
  --mcw-border: #d9d9d9;
  --mcw-label: #717680;    /* gray-500 */
  --mcw-placeholder: #717680;
  --mcw-black: #000000;
}

/* --- Query-string login/register toggle (body class set in functions.php) --- */
.mcw-auth-login #customer_login .col-2 { display: none; }
.mcw-auth-login #customer_login .col-1 { width: 100%; max-width: 100%; float: none; }

.mcw-auth-register #customer_login .col-1 { display: none; }
.mcw-auth-register #customer_login .col-2 { width: 100%; max-width: 100%; float: none; }

/* Lost-password view on /login. The .mcw-lostpassword block is only rendered when
   ?show=lostpassword, so its presence is the signal — hide the login/register forms
   without depending on the body class. */
.mcw-lostpassword { display: block; }
body:has(.mcw-lostpassword) #customer_login,
body:has(.mcw-lostpassword) .woocommerce-form-login,
body:has(.mcw-lostpassword) .woocommerce-form-register { display: none; }

/* Style the lost-password form rendered on /login (not under .woocommerce-account). */
.mcw-lostpassword form.woocommerce-ResetPassword { border: 0; padding: 0; margin: 0; }
.mcw-lostpassword .woocommerce-ResetPassword .form-row {
  width: 100%;
  max-width: 100%;
  float: none;
  margin: 0 0 16px;
}
.mcw-lostpassword .woocommerce-ResetPassword .form-row:last-of-type { margin-bottom: 0; }
.mcw-lostpassword .woocommerce-ResetPassword > p:not(.form-row) {
  margin: 0 0 24px;
  font-family: var(--mcw-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mcw-label);
}
.mcw-lostpassword .woocommerce-ResetPassword label {
  display: block;
  margin: 0 0 8px;
  font-family: var(--mcw-font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mcw-label);
}
.mcw-lostpassword .woocommerce-ResetPassword label .required { display: none; }
.mcw-lostpassword .woocommerce-ResetPassword input.input-text {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--mcw-border);
  border-radius: 0;
  background: #fff;
  font-family: var(--mcw-font-body);
  font-size: 15px;
  color: var(--mcw-black);
}
.mcw-lostpassword .woocommerce-ResetPassword input.input-text:focus {
  outline: none;
  border-color: var(--mcw-black);
}
.mcw-lostpassword .woocommerce-ResetPassword button.button,
.mcw-lostpassword .woocommerce-ResetPassword input.button {
  display: block;
  width: 100%;
  padding: 18px 24px;
  border: 0;
  border-radius: 0;
  background: var(--mcw-black);
  color: #fff;
  font-family: var(--mcw-font-body);
  font-size: 15px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.mcw-lostpassword .woocommerce-ResetPassword button.button:hover,
.mcw-lostpassword .woocommerce-ResetPassword input.button:hover { opacity: 0.85; background: var(--mcw-black); }

/* Hide Woo's default <h2> headings (Elementor Heading replaces them). */
#customer_login > .col-1 > h2,
#customer_login > .col-2 > h2 { display: none; }

#customer_login.col2-set { display: block; }

/* Strip Woo's default form border / padding / radius. */
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

/* --- Form fields --- */
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
  position: relative;
  margin: 0 0 16px;
}

.woocommerce-account .woocommerce-form label {
  display: block;
  margin: 0 0 8px;
  font-family: var(--mcw-font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mcw-label);
}

.woocommerce-account .woocommerce-form label .required { display: none; }

.woocommerce-account .woocommerce-form input.input-text {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--mcw-border);
  border-radius: 0;
  background: #fff;
  font-family: var(--mcw-font-body);
  font-size: 15px;
  color: var(--mcw-black);
  transition: border-color 0.15s ease;
}

.woocommerce-account .woocommerce-form input.input-text:focus {
  outline: none;
  border-color: var(--mcw-black);
}

.woocommerce-account .woocommerce-form input.input-text::placeholder {
  color: var(--mcw-placeholder);
  opacity: 1;
}

/* Register form description text (password-reset note + privacy policy). */
.woocommerce-account .woocommerce-form-register > p:not(.form-row):not(.mcw-auth-switch),
.woocommerce-account .woocommerce-privacy-policy-text {
  margin: 0 0 16px;
  font-family: var(--mcw-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mcw-label);
}

/* WooCommerce injects its own icon-font password toggle — hide it, we use the SVG below. */
.woocommerce-account form .show-password-input,
.woocommerce-account form .hide-password-input { display: none; }

/* --- Password field: eye toggle + inline "Forgot Password?" (positioned by JS) --- */
.woocommerce-form-login .mcw-password-row { position: relative; }

.woocommerce-account button.mcw-password-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 14px; /* offset for the label above the field */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  color: var(--mcw-label);
}

.woocommerce-account button.mcw-password-toggle:hover { background: transparent; }
.woocommerce-account button.mcw-password-toggle svg { width: 20px; height: 20px; display: block; }

/* "Forgot Password?" pulled up next to the PASSWORD label (top-right). */
.mcw-forgot-inline {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--mcw-font-body);
  font-size: 14px;
  color: var(--mcw-black);
  text-decoration: none;
}
.mcw-forgot-inline:hover { text-decoration: underline; }

/* Hide the original lost-password paragraph once JS relocates the link. */
.woocommerce-LostPassword.lost_password { display: none; }

/* --- Remember me (higher specificity than the generic label rule) --- */
.woocommerce-account .woocommerce-form-login label.woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--mcw-font-body);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mcw-label);
  cursor: pointer;
}
.woocommerce-account .woocommerce-form-login__rememberme input { width: 18px; height: 18px; }

/* Stack the remember-me + submit row (the <p> that holds the submit button). */
.woocommerce-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Submit button --- */
.woocommerce-account .woocommerce-form button.button,
.woocommerce-account .woocommerce-form input.button {
  display: block;
  width: 100%;
  padding: 18px 24px;
  border: 0;
  border-radius: 0;
  background: var(--mcw-black);
  color: #fff;
  font-family: var(--mcw-font-body);
  font-size: 15px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.woocommerce-account .woocommerce-form button.button:hover,
.woocommerce-account .woocommerce-form input.button:hover { opacity: 0.85; background: var(--mcw-black); }

/* --- "Don't have an account? Create Account" / "Already have an account? Sign In" --- */
.mcw-auth-switch {
  margin: 20px 0 0;
  text-align: center;
  font-family: var(--mcw-font-body);
  font-size: 15px;
  color: var(--mcw-label);
}
.mcw-auth-switch a {
  color: var(--mcw-black);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Lost / Reset password endpoint (form.woocommerce-ResetPassword) --- */
.woocommerce-account form.woocommerce-ResetPassword {
  border: 0;
  padding: 0;
  margin: 0;
}
.woocommerce-account .woocommerce-ResetPassword .form-row {
  width: 100%;
  max-width: 100%;
  float: none;
  margin: 0 0 16px;
}
.woocommerce-account .woocommerce-ResetPassword .form-row:last-of-type { margin-bottom: 0; }

.woocommerce-account .woocommerce-ResetPassword > p:not(.form-row) {
  margin: 0 0 24px;
  font-family: var(--mcw-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mcw-label);
}

.woocommerce-account .woocommerce-ResetPassword label {
  display: block;
  margin: 0 0 8px;
  font-family: var(--mcw-font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mcw-label);
}
.woocommerce-account .woocommerce-ResetPassword label .required { display: none; }

.woocommerce-account .woocommerce-ResetPassword input.input-text {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--mcw-border);
  border-radius: 0;
  background: #fff;
  font-family: var(--mcw-font-body);
  font-size: 15px;
  color: var(--mcw-black);
}
.woocommerce-account .woocommerce-ResetPassword input.input-text:focus {
  outline: none;
  border-color: var(--mcw-black);
}

.woocommerce-account .woocommerce-ResetPassword button.button,
.woocommerce-account .woocommerce-ResetPassword input.button {
  display: block;
  width: 100%;
  padding: 18px 24px;
  border: 0;
  border-radius: 0;
  background: var(--mcw-black);
  color: #fff;
  font-family: var(--mcw-font-body);
  font-size: 15px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.woocommerce-account .woocommerce-ResetPassword button.button:hover,
.woocommerce-account .woocommerce-ResetPassword input.button:hover { opacity: 0.85; background: var(--mcw-black); }

/* --- WooCommerce notices (errors) on the account form --- */
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message {
  font-family: var(--mcw-font-body);
  font-size: 14px;
}

/* --- Responsive: form stays full-width; the Elementor image column is
   hidden on mobile via Elementor's own responsive controls. --- */
@media (max-width: 767px) {
  .woocommerce-form input.input-text { padding: 14px 16px; }
}

/* ===========================================================================
   Set-new-password (reset) view — /my-account/lost-password?show-reset-form.
   WC keeps this step on the account endpoint (reset cookie is path-scoped),
   so it gets the branded image + form split in place (mirrors /login). The
   PHP hooks wrap the WC form in .mcw-reset; field styles reuse the
   .woocommerce-ResetPassword rules above.
   =========================================================================== */
body.mcw-auth-reset .page-header { display: none; }
/* Drop the dashboard flex/sidebar layout so the split can go edge-to-edge. */
body.mcw-auth-reset .woocommerce-account .woocommerce { display: block; padding: 0; gap: 0; }
body.mcw-auth-reset .woocommerce-notices-wrapper { max-width: 1440px; margin: 0 auto; padding: 24px 0 0; }

.mcw-reset {
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch;
  min-height: min(80vh, 760px);
}
.mcw-reset__media { margin: 0; overflow: hidden; background: #21487f; }
.mcw-reset__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcw-reset__panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 6vw, 96px) clamp(24px, 6vw, 110px); max-width: 620px;
}
.mcw-reset__title {
  font-family: var(--mcw-font-heading); font-weight: 300;
  font-size: clamp(30px, 3vw, 44px); line-height: 1.08; letter-spacing: 1px; margin: 0 0 10px;
}
.mcw-reset__sub {
  font-family: var(--mcw-font-body); font-size: 14px; line-height: 1.6;
  color: var(--mcw-label); margin: 0 0 28px;
}
/* Stack the New / Re-enter password rows full width; hide WC's intro <p>. */
.mcw-reset form.woocommerce-ResetPassword { margin: 0; }
.mcw-reset form.woocommerce-ResetPassword .form-row {
  width: 100% !important; max-width: 100%; float: none !important; margin: 0 0 16px;
}
.mcw-reset form.woocommerce-ResetPassword > p:not(.form-row):not(.woocommerce-form-row) { display: none; }
.mcw-reset .mcw-auth-switch { margin: 22px 0 0; text-align: left; }

@media (max-width: 900px) {
  .mcw-reset { grid-template-columns: 1fr; min-height: 0; }
  .mcw-reset__media { display: none; }
  .mcw-reset__panel { padding: 48px 24px; max-width: 520px; margin: 0 auto; width: 100%; box-sizing: border-box; }
}

.woocommerce-lost-password .woocommerce {
    flex-direction: column !important;
    max-width: 500px !important;
    margin: 0 auto !important;
}

.woocommerce-lost-password .woocommerce br {
    display:none!important;
}