/* Account-opening entry screen.

   The page loads styles.css and hosted-onboarding.css like every other hosted
   surface, so it shares their type, colour and controls. This file holds only
   what is specific to it, and every rule is scoped to .account-opening so
   hosted onboarding itself never picks any of it up.

   The form sits in a white card in front of a blurred illustration of the
   ShopWired Payments dashboard, so the merchant can see the account they are
   opening before they give an email address. The illustration and the veil
   over it live in open-account-backdrop.css. On wide screens the card sits on
   the left with the dashboard visible to its right; at 900px and below the
   dashboard becomes a strip at the top and the card rises from the bottom.

   /open-account and /woo/open-account serve this one page. The Woo route is
   served with data-acquisition-channel="woocommerce" on <body>, which shows the
   "for WooCommerce" chip and swaps each .account-opening-for-direct piece of
   copy for its .account-opening-for-woo counterpart. */

.account-opening [hidden] {
  display: none !important;
}

.account-opening .account-opening-sprite {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}

/* Channel copy */

.account-opening .account-opening-for-woo,
.account-opening .account-opening-channel-chip {
  display: none;
}

.account-opening[data-acquisition-channel="woocommerce"] .account-opening-for-direct {
  display: none;
}

.account-opening[data-acquisition-channel="woocommerce"] .account-opening-for-woo {
  display: inline;
}

.account-opening[data-acquisition-channel="woocommerce"] .account-opening-channel-chip {
  display: inline-flex;
}

/* Layout: the page scrolls if the card is taller than the window, while the
   dashboard behind it stays put. */

.account-opening .account-opening-page {
  align-items: center;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 48px 24px 48px clamp(24px, 6.7vw, 96px);
  position: relative;
}

.account-opening .account-opening-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(0, 48, 65, 0.07), 0 40px 90px -30px rgba(0, 48, 65, 0.45);
  padding: 30px 36px 22px;
  position: relative;
  width: min(468px, 100%);
  z-index: 1;
}

.account-opening .account-opening-grab {
  display: none;
}

.account-opening .account-opening-brand {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 0 0 24px;
}

.account-opening .account-opening-brand-name {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.account-opening .account-opening-channel-chip {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12.5px;
  gap: 7px;
  height: 26px;
  line-height: 1;
  padding: 0 10px 0 8px;
  white-space: nowrap;
}

.account-opening .account-opening-woo {
  flex: 0 0 auto;
  height: 11px;
  width: 19px;
}

.account-opening .account-opening-heading {
  margin: 0 0 22px;
}

.account-opening .account-opening-heading h1 {
  color: var(--ink);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
}

.account-opening .account-opening-title-short {
  display: none;
}

.account-opening .account-opening-heading p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
  margin: 10px 0 0;
}

/* Form */

.account-opening #email-form,
.account-opening #code-form {
  gap: 14px;
}

.account-opening .account-opening-field {
  display: grid;
  gap: 7px;
}

.account-opening .account-opening-field label {
  line-height: 1.3;
}

.account-opening #email {
  font-size: 16px;
  min-height: 48px;
  padding: 0 14px;
}

.account-opening #email[aria-invalid="true"]:focus {
  border-color: rgba(241, 3, 87, 0.72);
  box-shadow: 0 0 0 3px rgba(241, 3, 87, 0.14);
}

.account-opening .account-opening-hint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 1px 0 0;
}

.account-opening #code-resend-status:empty {
  display: none;
}

/* Errors sit next to the thing that failed: a field error under its field, a
   failed send directly above the button. */
.account-opening .account-opening-field-error,
.account-opening .account-opening-alert {
  align-items: flex-start;
  color: var(--pink-hover);
  display: flex;
  gap: 6px;
  line-height: 1.4;
}

.account-opening .account-opening-field-error {
  font-size: 13px;
  font-weight: 600;
  margin: 1px 0 0;
}

.account-opening .account-opening-alert {
  background: var(--alert-bg);
  border: 1px solid var(--alert-stroke);
  border-radius: 8px;
  font-size: 14px;
  gap: 10px;
  line-height: 1.45;
  margin: 0;
  padding: 12px 14px;
}

.account-opening .account-opening-field-error::before,
.account-opening .account-opening-alert::before {
  align-items: center;
  border: 1.75px solid currentColor;
  border-radius: 999px;
  box-sizing: border-box;
  content: "!";
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  height: 16px;
  justify-content: center;
  line-height: 1;
  margin-top: 1px;
  width: 16px;
}

.account-opening .account-opening-alert::before {
  margin-top: 2px;
}

/* Turnstile renders itself into this slot after the page has painted.
   Reserving its height stops the button jumping as the widget lands. */
.account-opening .turnstile {
  min-height: 65px;
}

.account-opening #email-form .actions,
.account-opening #code-form .actions {
  align-items: stretch;
  flex-direction: column;
  gap: 12px;
  margin-top: 2px;
}

.account-opening #email-form .actions button,
.account-opening #code-form .actions button {
  width: 100%;
}

.account-opening #email-submit,
.account-opening #code-submit {
  background: var(--pink);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  gap: 10px;
  min-height: 50px;
}

.account-opening #email-submit:hover,
.account-opening #code-submit:hover {
  background: var(--pink-hover);
}

/* A request in flight keeps the button's colour: it is working, not
   unavailable. It stays disabled so a second press can't send twice. */
.account-opening button.is-busy:disabled {
  cursor: progress;
  opacity: 1;
  transform: none;
}

.account-opening .account-opening-button-spinner {
  animation: spin 850ms linear infinite;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  border-top-color: #ffffff;
  box-sizing: border-box;
  display: none;
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}

.account-opening button.is-busy .account-opening-button-spinner {
  display: block;
}

/* The answer to "does this commit me to anything?", placed where the
   question is asked. */
.account-opening .account-opening-commitments {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  text-align: center;
  text-wrap: balance;
}

.account-opening .account-opening-commitments span {
  white-space: nowrap;
}

.account-opening .account-opening-reassurance {
  align-items: flex-start;
  border-top: 1px solid var(--table-line);
  color: var(--muted);
  display: flex;
  font-size: 13px;
  gap: 10px;
  line-height: 1.45;
  margin: 18px 0 0;
  padding-top: 16px;
}

.account-opening .account-opening-reassurance svg {
  color: var(--ink);
  flex: 0 0 auto;
  height: 16px;
  margin-top: 1px;
  width: 16px;
}

.account-opening .account-opening-links {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 6px 12px;
  justify-content: space-between;
  line-height: 1.4;
  margin: 14px 0 0;
}

.account-opening .account-opening-links a {
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.account-opening .account-opening-links a.account-opening-terms {
  color: var(--muted);
  font-weight: 400;
}

/* Code step */

.account-opening .account-opening-badge {
  align-items: center;
  background: var(--mint);
  border-radius: 999px;
  color: #00745d;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 600;
  gap: 6px;
  line-height: 1.3;
  margin: 0 0 12px;
  padding: 4px 10px 4px 6px;
}

.account-opening .account-opening-badge::before {
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline points='4.8 8.2 7 10.3 11.2 6' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  border-radius: 999px;
  content: "";
  flex: 0 0 auto;
  height: 14px;
  width: 14px;
}

.account-opening #code-step .account-opening-heading {
  margin-bottom: 2px;
}

.account-opening .account-opening-heading .account-opening-destination {
  color: var(--ink);
  font-weight: 600;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

/* Text actions. The base button rules paint every button as a filled block,
   so these have to outrank them rather than match them. */
.account-opening button.account-opening-link-button {
  background: none;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  color: var(--link);
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transform: none;
}

.account-opening button.account-opening-link-button:hover {
  background: none;
  color: var(--ink);
  transform: none;
}

.account-opening button.account-opening-link-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(46, 180, 255, 0.35);
  outline: none;
}

.account-opening button.account-opening-link-button:disabled {
  color: var(--muted);
  cursor: default;
  opacity: 1;
  text-decoration: none;
}

.account-opening .account-opening-notice {
  background: var(--mint);
  border: 1px solid rgba(0, 168, 134, 0.34);
  border-radius: 8px;
  color: #00745d;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  margin: 4px 0 12px;
  padding: 10px 12px;
}

.account-opening #code-form {
  margin-top: 8px;
}

.account-opening .code-input__cell {
  min-height: 48px;
}

.account-opening #code-field.has-error .code-input__cell {
  border-color: rgba(241, 3, 87, 0.72);
}

.account-opening #code-field.has-error .code-input:focus-within .code-input__cell[data-active] {
  border-color: rgba(241, 3, 87, 0.72);
  box-shadow: 0 0 0 3px rgba(241, 3, 87, 0.14);
}

.account-opening .account-opening-resend {
  align-items: center;
  color: var(--muted);
  column-gap: 6px;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.45;
  margin: 6px 0 0;
}

.account-opening #code-help {
  margin-top: 4px;
}

/* What onboarding will need, shown while the merchant fetches the code. */
.account-opening .account-opening-next {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-top: 18px;
  padding: 16px;
}

.account-opening .account-opening-next h2 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}

.account-opening .account-opening-next p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 2px 0 0;
}

.account-opening .account-opening-next ul {
  display: grid;
  gap: 9px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.account-opening .account-opening-next li {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
  padding-left: 30px;
  position: relative;
}

.account-opening .account-opening-next svg {
  height: 20px;
  left: 0;
  position: absolute;
  top: 0;
  width: 20px;
}

/* Narrow screens: the dashboard shows as a strip at the top and the card
   rises over it. The heading, field, security check, button and commitments
   fit on a phone's first screen; the rest of the card follows as it scrolls. */
@media (max-width: 900px) {
  /* flow-root stops the card's top margin collapsing through the page, which
     would carry the dashboard strip down behind the card. */
  .account-opening .account-opening-page {
    display: flow-root;
    padding: 0;
  }

  .account-opening .account-opening-card {
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -1px 0 rgba(0, 48, 65, 0.06), 0 -18px 50px -20px rgba(0, 48, 65, 0.5);
    margin-top: 176px;
    min-height: calc(100vh - 176px);
    min-height: calc(100dvh - 176px);
    padding: 10px 20px 28px;
    width: 100%;
  }

  .account-opening .account-opening-card-body {
    margin: 0 auto;
    max-width: 520px;
  }

  .account-opening .account-opening-grab {
    background: #d3dbe0;
    border-radius: 3px;
    display: block;
    height: 5px;
    margin: 0 auto 14px;
    width: 38px;
  }

  .account-opening .account-opening-brand {
    margin-bottom: 14px;
  }

  .account-opening .account-opening-heading {
    margin-bottom: 16px;
  }

  .account-opening .account-opening-heading h1 {
    font-size: 25px;
  }

  .account-opening .account-opening-title-long {
    display: none;
  }

  .account-opening .account-opening-title-short {
    display: inline;
  }

  .account-opening .account-opening-heading p {
    font-size: 15px;
    margin-top: 6px;
  }

  .account-opening #email {
    min-height: 50px;
  }

  .account-opening #email-submit,
  .account-opening #code-submit {
    min-height: 52px;
  }

  .account-opening .account-opening-reassurance {
    font-size: 12.5px;
    margin-top: 14px;
  }

  .account-opening .account-opening-links {
    font-size: 12.5px;
    margin-top: 10px;
  }
}