/* Business sign-up pages (Views/Shared/_SignupLayout.cshtml): the sign-up body — the portal's light appearance and
   Bootstrap tokens only. The shared header and footer are styled by marketing-shell.css. */
/* White behind the shared header and footer (_MarketingHeader / _MarketingFooter, as on Home, so the translucent header
   looks identical); the sign-up body keeps its grey in .signup-main. */
.signup-body {
  background: var(--bs-body-bg);
  margin-bottom: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The shared footer keeps its 90px top margin (marketing-shell.css, .mk.mk-foot); the grey runs under it, so the
   sign-up body meets the footer's border as it did before. */
.signup-main {
  flex: 1 0 auto;
  margin-bottom: -90px;
  background: var(--bs-tertiary-bg);
}

/* Register and Verify (the pages with a .signup-shell): a full-width split between the shared header and footer — no
   card, border, radius or shadow. Desktop: the tinted value column on the left, the white form side on the right, both
   as tall as the page body. Mobile: the form only, straight on white. The page body becomes a column only on these
   pages (:has), so the shell can fill it; Plan and Confirming keep their own centred containers. */
.signup-main:has(> .container-xl > .signup-shell) {
  display: flex;
  flex-direction: column;
}

.signup-main > .container-xl:has(> .signup-shell) {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  max-width: none;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.signup-shell {
  flex: 1 0 auto;
  background: var(--bs-body-bg);
}

/* Desktop: two equal halves whose backgrounds run to the viewport edges while their content lines up with the shared
   header (the same --mk-wrap-max and --mk-wrap-gutter, marketing-shell.css): the value text starts at the header's left
   content edge, and the form side ends at its right content edge. Each half's outer padding is the space beside the
   centred header width plus the gutter. Percentages in padding resolve against the containing block: the row (the full
   width) for the form column, the half-width aside for the value column. */
@media (min-width: 992px) {
  .signup-shell > aside,
  .signup-shell > .col-lg-7 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .signup-shell .signup-value {
    padding-left: calc(max(0px, 100% - var(--mk-wrap-max) / 2) + var(--mk-wrap-gutter)) !important;
    padding-right: var(--mk-wrap-gutter) !important;
  }

  .signup-shell > .col-lg-7 {
    padding-left: var(--mk-wrap-gutter);
    padding-right: calc(max(0px, (100% - var(--mk-wrap-max)) / 2) + var(--mk-wrap-gutter));
  }
}

/* The form stays a readable column (.signup-form-column, 32rem) centred in the white side; 20px gutters on phones.
   Narrow screens stack the value column ABOVE the form (its DOM order), each band full width: compact padding, no
   divider, and only their own height — the rows never stretch to fill a short page (align-content), so any space left
   above the footer is the form side's white. */
@media (max-width: 991.98px) {
  .signup-shell {
    align-content: flex-start;
  }

  .signup-shell .signup-value {
    border-right: 0;
    padding: 30px 20px;
  }

  /* The band's last block (the plan line on Register, the list on Verify) adds no space under the padding. Its mb-*
     utility is !important, and changing the class would move the centred desktop text, so it is overridden here only. */
  .signup-shell .signup-value > :last-child {
    margin-bottom: 0 !important;
  }

  .signup-shell .signup-form-column {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

.signup-value {
  background: var(--bs-primary-bg-subtle);
  border-right: 1px solid var(--bs-border-color);
  /* Bootstrap's p-4 / p-xl-5 values, moved here so narrow screens can use their own (below). */
  padding: 1.5rem;
}

@media (min-width: 1200px) {
  .signup-value {
    padding: 3rem;
  }
}

/* A narrow, readable column for every form. */
.signup-form-column {
  max-width: 32rem;
}

.signup-card {
  border-radius: .75rem;
}

.signup-value-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .5rem;
}

.signup-value-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--bs-primary);
  font-weight: 600;
}

.signup-code {
  letter-spacing: .5em;
  font-variant-numeric: tabular-nums;
  max-width: 14rem;
}

/* One row: a compact "US +1" country control (fits the widest, e.g. "UA +380") and the number taking the rest.
   min-width: 0 lets the number shrink on narrow screens instead of overflowing the row. The class sits on the island's
   mount element, so the native select fallback and the island's button share the same width. */
.signup-phone-region {
  flex: 0 0 auto;
  width: 7.25rem;
}

.signup-phone-number {
  flex: 1 1 auto;
  min-width: 0;
}

/* Toover Teams pricing (Views/Pricing/Index.cshtml). */
.teams-estimator {
  max-width: 36rem;
}

.teams-estimate {
  background: var(--bs-tertiary-bg);
}

.teams-feature-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .5rem;
}

.teams-feature-list .teams-feature-included::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--bs-primary);
  font-weight: 600;
}

.teams-feature-list .teams-feature-comingsoon::before {
  content: "○";
  position: absolute;
  left: 0;
  color: var(--bs-secondary-color);
}

.teams-compare {
  max-width: 48rem;
}