/*--------------------------------------------------
SSO – Login
--------------------------------------------------*/


/*--------------------------------------------------
My Account – Login
--------------------------------------------------*/
.login_wp > section {
  align-items: center;
  justify-content: center;
}

.login_form {
  width: min(90%, 55em);
  /* min-height: 35em; */
  padding: 0;
  position: relative;
  z-index: 1;
}

/*  Account – Login – Aside
----------------------------------------*/
.login_form .aside {
  background-image: linear-gradient(to bottom, var(--color-primary), var(--color-primary-dark));
  padding-block: var(--space-xl);
}

.login_form .aside header {
  margin-bottom: var(--space-md);
}

.login_form .aside :is(h3, p) {
  color: #fff;
}

.login_form .aside .logomark {
  width: var(--space-xl);
  aspect-ratio: 1;
  display: block;
  margin: 0 auto;
  opacity: 0.5;
}

.login_form .aside .eyebrow {
  color: var(--color-secondary);
  font-weight: 500;
  text-align: center;
}

.login_form .aside h3 {
  font-size: var(--text-body);
  margin-bottom: var(--space-xxxs);
  font-weight: 600;
}

.login_form .aside p {
  font-size: 0.875em;
}

.login_form .aside a {
  color: var(--color-secondary);
}

/*  Account – Login – Form Area
----------------------------------------*/
.login_form .form_area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-md);
  padding-block: var(--space-xl);
}

.login_form .form_area p {
  font-size: 0.925em;
  color: var(--gray-8);
}

.login_form .form_area :where(header, .woo_account_content) {
  width: min(100%, 25em);
  margin: 0 auto;
}

/*  Account – Login – Form
----------------------------------------*/
.login_form form.woocommerce-form-login {
  border: none;
  padding: 0;
  margin: 0;
}

.login_form .woo_account_content .woocommerce label {
  font-weight: 500;
}

.login_form .woo_account_content .woocommerce form :is(input[type="text"], input[type="password"]) {
  border: 1px solid var(--gray-4);
  height: 3em;
  background-color: #fff;
  color: var(--gray-9);
  padding-inline: 1em;
}

.login_form .woo_account_content .woocommerce form :is(input[type="text"], input[type="password"]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-lighter);
}

.login_form button[type="submit"] {
  background-color: var(--color-secondary);
  width: 100%;
  height: 3.25em;
  border-radius: var(--space-sm);
  font-weight: 600;
  border: 2px solid var(--color-secondary);
  box-shadow: 4px 8px 16px hsla(40, 65%, 20%, 0.09);
  cursor: pointer;
  outline: 0;
  margin-block: var(--space-lg) 0;
  transition: background-color 0.25s ease 0s;
}

.login_form button[type="submit"]:hover {
  background-color: var(--color-secondary-light);
}

/*  Account – Login – Lost Password
----------------------------------------*/
.login_form .lost_password a {
  display: block;
  padding: var(--space-sm);
  margin: var(--space-md) auto 0;
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: var(--gray-8);
  transition: background-color 0.5s ease 0s;
  border-radius: var(--space-sm);
  border: 1px solid var(--gray-3);
  font-size: 0.925em;
}

.login_form .lost_password a:hover {
  background-color: var(--gray-3);
}

/*  Account – Login – Remember
----------------------------------------*/
.login_form .woocommerce-form-login__rememberme {
  font-size: 0.9em;
}

.login_form .woocommerce-form-login__rememberme input {
  margin-right: var(--space-xxxs);
  accent-color: var(--color-primary);
}

/*----------------------------------------
Single – My Account
----------------------------------------*/
.page-template-page-store-account .login_wp {
  background-color: var(--color-primary-lightest);
}

.page-template-page-store-account .login_wp::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(/wp-content/themes/phidias_woo/assets/images/brands/logos/tss-logo-single-white.svg);
  position: absolute;
  background-size: var(--space-xxl);
  filter: brightness(0) saturate(100%) invert(27%) sepia(53%) saturate(3080%) hue-rotate(171deg) brightness(93%) contrast(88%);
  top: 0;
  left: 0;
  opacity: 0.04;
}

/*  Single – My Account – Password
----------------------------------------*/
.login_form form.lost_reset_password {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.login_form form.lost_reset_password > * {
  width: 100%;
}

.login_form form.lost_reset_password button[type="submit"] {
  margin-top: 1em;
}

.login_form form.lost_reset_password p:first-of-type {
  display: none;
}

/*--------------------------------------------------
Responsive Styles
--------------------------------------------------*/
@media only screen and (max-width: 1024px) {
  
  /*----------------------------------------
  Account – Login – Form
  ----------------------------------------*/
  .login_form {
    flex-direction: column;
    width: min(100%, 30em);
  }

  .login_form :is(.aside, .form_area) {
    width: 100%;
  }

  .login_form .aside {
    padding-block: var(--space-lg);
  }

  .login_form .aside header {
    margin-bottom: var(--space-sm);
  }

  .login_form .aside .logomark {
    display: none;
  }

  .login_form .aside .eyebrow {
    text-align: left;
  }

  /* #1024px */
}