/* signup.css: the sign-up family that sits outside the sign-in card's own pieces (Stage D follow-up): the edition cards
 * (TenantRegistration/SelectEdition on its own wide layout), the payment page (Payment/Index and the PayPal partial) and the consent page
 * (Consent/Index). Tokens only (tokens.css), so light and dark both follow; phone <= 500px. Cards, banners, buttons, radios, checkboxes and
 * key-value rows come from components.css / vk-shell.css; this file only lays them out.
 * Linked from those views' @section Styles. Replaces the Metronic-era SelectEdition.css, TenantRegistration/_Layout.css and Payment.css. */

/* ---------- the wide variant of the sign-in canvas (TenantRegistration/_Layout) ---------- */
.vk-auth--wide .vk-auth__logo { width: min(1080px, 100%); }
.vk-signup { width: min(1080px, 100%); display: grid; gap: 24px; justify-self: center; }
.vk-signup__head { display: grid; gap: 4px; }
.vk-signup__head .vk-auth__lead { max-width: 60ch; }

/* ---------- edition cards: a centred row that wraps, one column on a phone ---------- */
.vk-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 320px)); justify-content: center; align-items: stretch; gap: 16px; }
.vk-plan { display: flex; flex-direction: column; gap: 20px; padding: 24px; box-shadow: 0 0 0 1px var(--color-divider); }
.vk-plan > header { display: grid; gap: 8px; }
.vk-plan__name { margin: 0; font: 700 18px/24px "Open Sans", sans-serif; color: var(--color-text-emphasis); overflow-wrap: anywhere; }
.vk-plan__price { margin: 0; display: grid; gap: 2px; font: 400 14px/20px "Open Sans", sans-serif; color: var(--color-text-secondary); }
.vk-plan__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.vk-plan__amount { font: 700 28px/36px "Open Sans", sans-serif; color: var(--color-text-emphasis); }
.vk-plan__line--minor .vk-plan__amount { font-size: 16px; line-height: 24px; font-weight: 600; }
.vk-plan__features { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--color-divider); display: grid; align-content: start; gap: 10px; flex: 1 1 auto; }
.vk-plan__feature { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 8px; font: 400 14px/20px "Open Sans", sans-serif; color: var(--color-text); overflow-wrap: anywhere; }
.vk-plan__feature .vk-i { color: var(--color-text-ok); }
.vk-plan__feature.is-off { color: var(--color-text-secondary); }
.vk-plan__feature.is-off .vk-i { color: var(--color-text-secondary); }
.vk-plan__actions { display: grid; gap: 8px; }
.vk-plan__actions:empty { display: none; }
.vk-plan__actions .vk-btn { width: 100%; }
.vk-plan__actions .vk-btn.vk-btn--outline:disabled { background: transparent; border-color: var(--color-divider); color: var(--color-text-disabled); }   /* the plan you are on, or one below it */
@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) {
  .vk-plans { grid-template-columns: minmax(0, 1fr); }
  .vk-plan { padding: 20px; }
}

/* ---------- payment: the monthly / annual choice as radio cards, the total as a key-value row ---------- */
.vk-auth__form .vk-radiocard { margin-bottom: 8px; box-shadow: 0 0 0 1px var(--color-divider); transition: box-shadow var(--vk-motion-hover); }
.vk-auth__form .vk-radiocard:hover { box-shadow: 0 0 0 1px var(--field-color-border-hover); }
.vk-auth__form .vk-radiocard:has(.vk-radio:checked) { box-shadow: 0 0 0 2px var(--field-color-border-focus); }
.vk-auth__form .vk-radiocard:has(.vk-radio:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.vk-radiocard__price { margin-top: 2px; font: 400 14px/20px "Open Sans", sans-serif; color: var(--color-text-secondary); }
#paypal-button { margin-top: 8px; }
#result-message:empty { display: none; }

/* ---------- consent: what the app asks for, a ticked row per scope, the two answers ---------- */
.vk-consent { display: grid; gap: 16px; padding-top: 8px; }
.vk-consent__client { display: flex; flex-direction: column; gap: 12px; }
.vk-consent__client .client-logo img { display: block; max-width: 100%; max-height: 48px; object-fit: contain; }
.vk-consent__group { display: grid; gap: 8px; }
.vk-consent__heading { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 14px/20px "Open Sans", sans-serif; color: var(--color-text-emphasis); }
.vk-consent__list { list-style: none; margin: 0; padding: 0; border-radius: 8px; box-shadow: 0 0 0 1px var(--color-divider); }
.vk-consent__item { display: grid; gap: 4px; padding: 12px 16px; }
.vk-consent__item + .vk-consent__item { border-top: 1px solid var(--color-divider); }
.vk-consent__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.vk-consent__row .vk-checkline { font-weight: 600; }
.vk-consent__row .vk-checkbox { flex: none; }
.vk-consent__row .vk-checkbox:disabled { opacity: .6; cursor: not-allowed; }
.vk-consent__flag { color: var(--color-text-warning); flex: none; }
.vk-consent__desc { display: block; padding-left: 26px; font: 400 12px/16px "Open Sans", sans-serif; color: var(--color-text-secondary); cursor: pointer; }
/* "Allow" comes first in the markup so Enter still answers yes; it is shown on the right, next to the way the other sign-in pages end */
.vk-consent__actions { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 8px; padding-top: 8px; }
@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) {
  .vk-consent__actions { flex-direction: column; }
  .vk-consent__actions .vk-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .vk-auth__form .vk-radiocard { transition: none; } }