/*
 * Customer account pages (My account: login/register, lost password, dashboard,
 * orders, addresses, account details).
 *
 * The login/register/lost-password forms are rendered by the theme's
 * woocommerce/myaccount/*.php overrides on the shared .form__field primitives,
 * so this file only lays them out. The remaining endpoints keep WooCommerce's
 * own markup, which is normalised here to the same tokens.
 */

.wt-account {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  text-align: left;
}

.wt-account--split {
  max-width: 96rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--gap, 8px) * 6);
}

@media (min-width: 900px) {
  .wt-account--split {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--gap, 8px) * 8);
  }
}

.wt-account__intro {
  margin: 0 0 calc(var(--gap, 8px) * 1);
  text-align: center;
}

@media (min-width: 900px) {
  .wt-account--split .wt-account__intro {
    grid-column: 1 / -1;
  }
}

.wt-account__col {
  min-width: 0;
}

@media (min-width: 900px) {
  .wt-account--split .wt-account__col + .wt-account__col {
    padding-left: calc(var(--gap, 8px) * 8);
    border-left: 1px solid rgba(0, 0, 0, 0.12);
  }
}

.wt-account__title {
  margin: 0 0 calc(var(--gap, 8px) * 3);
}

.wt-account__form {
  display: flex;
  flex-direction: column;
}

.wt-account__note {
  margin: 0 0 calc(var(--gap, 8px) * 2);
}

.wt-account__checkbox {
  display: flex;
  align-items: center;
  gap: calc(var(--gap, 8px) * 1);
  margin-bottom: calc(var(--gap, 8px) * 1);
  cursor: pointer;
}

.wt-account__checkbox input[type="checkbox"] {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  accent-color: var(--color-text);
  cursor: pointer;
}

.wt-account__submit {
  width: 100%;
  margin-bottom: calc(var(--gap, 8px) * 1);
}

.wt-account__link {
  margin: 0;
}

.wt-account__link a {
  text-decoration: underline;
}

/* The privacy-policy copy WooCommerce hooks into the register form. */
.wt-account__form .woocommerce-privacy-policy-text {
  margin-bottom: calc(var(--gap, 8px) * 2);
}

.wt-account__form .woocommerce-privacy-policy-text p {
  margin: 0;
  font-size: calc(var(--font-base-size) - 1px);
}

/*
 * WooCommerce's password-strength script wraps every password input on these
 * pages in a <span class="password-input"> and appends a show/hide button. The
 * theme drops WooCommerce's own stylesheets (woocommerce_enqueue_styles is
 * emptied in inc/woocommerce.php), so the wrapper, the button and the floating
 * label — which no longer sits next to the input, breaking
 * .form__field__input's own sibling selectors — are all handled here.
 */
.password-input {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.password-input input[type="password"],
.password-input input[type="text"] {
  padding-right: calc(var(--gap, 8px) * 5);
}

.password-input input::-ms-reveal {
  display: none;
}

.show-password-input {
  position: absolute;
  right: calc(var(--gap, 8px) * 1.5);
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent no-repeat center / contain;
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23151515"/></svg>');
  cursor: pointer;
}

.show-password-input.display-password {
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23151515"/></svg>');
}

.wt-account__form .password-input:focus-within + .form__field__label,
.wt-account__form .password-input:has(input:not(:placeholder-shown)) + .form__field__label {
  transform: translate(0.25rem, -40%) scale(0.8);
  height: 1em;
  padding: 0 calc(var(--gap, 8px) * 1);
  background: var(--color-input-background);
  color: var(--color-input-placeholder);
}

/* Notices (login errors, "account created", password reset confirmations). */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--gap, 8px) * 2);
  list-style: none;
  margin: 0 0 calc(var(--gap, 8px) * 3);
  padding: calc(var(--gap, 8px) * 2);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-button);
  text-align: left;
}

/*
 * WooCommerce prints the notice's action (e.g. "Resend" on the temporary
 * password notice) before the message text; move it to the far end instead of
 * letting it sit on top of the copy.
 */
.woocommerce-notices-wrapper .woocommerce-message .button,
.woocommerce-notices-wrapper .woocommerce-info .button,
.woocommerce-notices-wrapper .woocommerce-error .button {
  order: 1;
  margin-left: auto;
  flex: 0 0 auto;
}

.woocommerce-notices-wrapper .woocommerce-error {
  border-color: var(--color-error-border, #c0392b);
  color: var(--color-error-text, #c0392b);
}

.woocommerce-notices-wrapper li + li {
  margin-top: calc(var(--gap, 8px) * 1);
}

/* Logged-in account area — WooCommerce's own markup. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 calc(var(--gap, 8px) * 4);
  padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li + li {
  margin-top: calc(var(--gap, 8px) * 1.5);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
  text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  text-decoration: underline;
}

@media (min-width: 900px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    float: left;
    width: 24%;
  }

  .woocommerce-account .woocommerce-MyAccount-content {
    float: right;
    width: 72%;
  }

  .woocommerce-account .woocommerce::after {
    content: "";
    display: table;
    clear: both;
  }
}

/* Endpoints that still use WooCommerce's form rows (edit account, addresses). */
.woocommerce-account .woocommerce-MyAccount-content .form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: calc(var(--gap, 8px) * 2);
}

.woocommerce-account .woocommerce-MyAccount-content label {
  margin-bottom: calc(var(--gap, 8px) * 0.5);
}

.woocommerce-account .woocommerce-MyAccount-content .input-text,
.woocommerce-account .woocommerce-MyAccount-content select {
  height: var(--input-height);
  width: 100%;
  padding: calc(var(--gap, 8px) * 1) calc(var(--gap, 8px) * 1.5);
  color: var(--color-input-text);
  background-color: var(--color-input-background);
  border: 1px solid var(--color-input-border);
  border-radius: var(--border-radius-button);
  font-size: max(1.6rem, var(--font-base-size));
}

.woocommerce-account .woocommerce-MyAccount-content .button {
  background: var(--color-button-primary-background);
  color: var(--color-button-primary-text);
  border: 1px solid transparent;
  border-radius: var(--border-radius-button);
  padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 3);
  font-size: var(--font-button-size);
  font-family: var(--font-button);
  text-transform: var(--font-button-transform, none);
  letter-spacing: var(--font-button-letter-spacing, normal);
  cursor: pointer;
}

.woocommerce-account .woocommerce-MyAccount-content table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-account .woocommerce-MyAccount-content th,
.woocommerce-account .woocommerce-MyAccount-content td {
  padding: calc(var(--gap, 8px) * 1.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  text-align: left;
}