/*
 * The redesigned signing page, step 2 (print_new/step2.php and step2_minor.php: _parts/user_form.php, user_form_minor.php, _bday.php): what only this step has, on top of ../tokens.css and
 * ../components.css. Scoped to #step2.wk-sign-v2, which the step gets for text editor Version 2 waivers
 * (Waiver::usesTiptapEditor()); Version 1 waivers keep waiverprint_new.css alone.
 */

/* ---------------------------------------------------------------- page spacing */

/* waiverprint_new.css: .fn-main-container.step2-minor {margin: 151px 0 70px} at 320-640 and 640-960px,
   room for a title bar it no longer floats over. The adult form and step 4 keep 70px. */
@media (min-width: 320px) and (max-width: 960px) {
    #step2.wk-sign-v2.step2-minor {
        margin-top: 70px;
    }
}

/* Room under the card (or the captcha / Next under it) before the page background: the same as
   between the title bar and the card, as on the other steps (components.css sets the wrappers'
   padding-bottom to 0). */
#step2.wk-sign-v2 :is(.fn-adult-container, .fn-minor-container) > .fn-wrapper {
    padding-bottom: 30px;
}

@media (max-width: 600px) {
    #step2.wk-sign-v2 :is(.fn-adult-container, .fn-minor-container) > .fn-wrapper {
        padding-bottom: 18px;
    }
}

/* ---------------------------------------------------------------- grid */

/* The forms' .fn-row / .fn-col-* floats stay (JS toggles several rows' display, and looks fields up
   with closest('.fn-row')); only their gutters change: 12px between columns at every depth
   (waiverprint_new.css: 12px outside, 10px on the right only inside a nested row). Widths are set
   here for every size, so the legacy 640px / 1024px width rules do not apply. */
#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-row {
    margin-left: -6px;
    margin-right: -6px;
}

#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) [class*="fn-col-"] {
    padding-left: 6px;
    padding-right: 6px;
}

#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-col-12 { width: 100%; }
#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-col-9 { width: 100%; }
#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-col-6 { width: 50%; }
#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-col-5 { width: 41.6667%; }
#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-col-4 { width: 33.3333%; }
#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-col-3 { width: 25%; }

/* What follows the columns in a row (an error, the billing "same as above" checkbox, the members'
   "pays for" row) starts under them. */
#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-row > :not([class*="fn-col-"]) {
    clear: both;
}

#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-form-group {
    min-height: 0;
    margin-bottom: 16px;
}

/* Date of birth (_bday.php): month / day / year at 38 / 29 / 33% instead of 50 / 25 / 25, so the
   day and the year stay readable in a half column and on phones. */
#step2.wk-sign-v2 .fn-row:has(> .fn-col-3 > select[name*="rday"]) > .fn-col-6 {
    width: 38%;
}

#step2.wk-sign-v2 .fn-row:has(> .fn-col-3 > select[name*="rday"]) > .fn-col-3:has(> select[name*="rday"]) {
    width: 29%;
}

#step2.wk-sign-v2 .fn-row:has(> .fn-col-3 > select[name*="rday"]) > .fn-col-3:has(> select[name*="ryear"]) {
    width: 33%;
}

/* Address: the street on its own row, zip / city / state under it (30 / 35 / 35%), so the zip
   column is wide enough for its value and its error. Same for the cardholder's address. */
#step2.wk-sign-v2 .fn-row:has(> .fn-col-6 :is(#PostalCode, #cc-PostalCode)) > .fn-col-6 {
    width: 100%;
}

#step2.wk-sign-v2 .fn-row:has(> .fn-col-3 :is(#PostalCode, #cc-PostalCode)) > .fn-col-3 {
    width: 30%;
}

#step2.wk-sign-v2 .fn-row:has(> .fn-col-3 :is(#PostalCode, #cc-PostalCode)) > :is(.fn-col-4, .fn-col-5) {
    width: 35%;
}

/* The members' date of birth errors carry an inline margin-left: 75px. */
#step2.wk-sign-v2 .reqfield[style*="margin-left"] {
    margin-left: 0 !important; /* inline margin-left */
}

/* ---------------------------------------------------------------- headings, page refs */

#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-action-title {
    margin: 0 0 18px;
}

#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-action-title h2 {
    position: relative; /* the minor form's page ref sits inside its h2 */
    margin: 0;
    font-family: var(--font);
    font-size: 18.4px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}

#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-action-title.fn-action-subtitle {
    margin: 0 0 14px;
}

#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-action-subtitle h2 {
    font-size: 16.3px;
}

/* Sections after the main form: billing, additional adults, children. */
#step2.wk-sign-v2 :is(#relTableBlock0, #adultTableBlock, #relTableBlock) {
    position: relative;
    margin-top: 30px;
}

#step2.wk-sign-v2 #user-table {
    position: relative;
}

/* PageRef stays in the old page's fixed corner (components.css). The additional adults and
   children sections carry their own (WK2c, WK2b) and would stack on WK2a in that corner once
   shown, so only the form's own ID shows. The minor form's two are in headings the page JS shows
   one at a time. */
#step2.wk-sign-v2 :is(#adultTableBlock, #relTableBlock) > .page_ref {
    display: none;
}

/* .fn-border-bottom: waiverprint_new.css draws 2px #ccc. */
#step2.wk-sign-v2 .fn-border-bottom {
    margin: 4px 0 8px;
    border-bottom: 1px solid var(--border);
}

/* The minor form's children list ends with one, with nothing (no add link) under it. */
#step2.wk-sign-v2 .fn-minor-content .fn-border-bottom:last-child {
    display: none;
}

/* ---------------------------------------------------------------- email, referral */

/* waiverprint_new.css at <=640px: #user-table #Email {margin-bottom: 48px} (room for #confirm-email
   under it), which parted the field from its error. */
#step2.wk-sign-v2 #user-table #Email {
    margin-bottom: 0;
}

/* "Confirm Email": a small pill inside the field's right end. Inline style: absolute, top 11px,
   right 17px, height 30px, font 13px, padding 5px !important (which stays); waiverprint_new.css
   moves it under the field at <=640px with top / right / left !important. */
#step2.wk-sign-v2 #user-table #confirm-email {
    top: 10px !important; /* inline style; waiverprint_new.css !important at <=640px */
    right: 14px !important;
    left: auto !important;
    width: auto !important; /* waiverprint_new.css .fn-btn width: 100% at small sizes */
    height: 31px !important; /* inline height */
    min-width: 0;
    margin: 0;
    font-size: 12.5px !important; /* inline font-size; components.css .fn-btn 14.7px !important */
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
}

/* The field's text stops before the pill while it shows. */
#step2.wk-sign-v2 #user-table #Email:has(~ #confirm-email:not([style*="display:none"]):not([style*="display: none"])) {
    padding-right: 150px !important; /* components.css .fn-input padding !important */
}

#step2.wk-sign-v2 #user-table #waiting-email-confirmation {
    top: 6px !important; /* inline top */
    right: 16px !important; /* inline right */
}

/* "back to drop down" (shown with an "other" referral answer, which swaps the select for a text
   input): a small x inside the field's right end, the clear button's look (components.css
   .wk-sign-clear__button), so the form below does not move when it appears or goes. Its text stays
   for screen readers (font-size 0). The column is position: relative; the top centers it in the
   field under the label (label 24px + 6px gap, field 50px; tablet zoom: 30px + 6px, 61px). */
#step2.wk-sign-v2 #show_referral_dropdown {
    position: absolute !important; /* inline position, top, right, font-size, color */
    top: 43px !important;
    right: 15px !important;
    z-index: 1;
    display: inline-flex; /* not !important: the page JS shows and hides it with inline display */
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 0 !important;
    line-height: 0;
    color: var(--ink-muted) !important;
    text-decoration: none;
    border-radius: 50%;
    cursor: pointer;
}

#step2.wk-sign-v2 #show_referral_dropdown::before {
    content: "";
    width: 9px;
    height: 9px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1.5 1.5l7 7M8.5 1.5l-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1.5 1.5l7 7M8.5 1.5l-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

#step2.wk-sign-v2 #show_referral_dropdown:hover {
    color: var(--ink) !important; /* inline color */
    background: var(--neutral-fill-hover);
}

/* Room for it in the "other" text input. */
#step2.wk-sign-v2 input#ReferredBy {
    padding-right: 40px !important; /* waiverprint_new.css .fn-input padding !important */
}

/* ---------------------------------------------------------------- billing */

/* ask_billing_info_text (the <lable> typo element): an intro line over the card fields. */
#step2.wk-sign-v2 .billing_main_info > .fn-col-6:first-child {
    width: 100%;
}

#step2.wk-sign-v2 .billing_main_info > .fn-col-6:first-child .fn-form-group {
    margin-bottom: 12px;
}

#step2.wk-sign-v2 #billing_lable {
    margin: 0;
    font-weight: 400;
    color: var(--ink-muted);
}

/* Card number | expiration date, side by side over the full width. */
#step2.wk-sign-v2 .billing_main_info > .fn-col-6.fn-row {
    width: 100%;
    margin: 0;
    padding: 0;
}

#step2.wk-sign-v2 .billing_main_info > .fn-col-6.fn-row > .fn-form-group {
    clear: none;
    float: left;
    width: 50%;
    padding: 0 6px;
    box-sizing: border-box;
}

/* Level with the month / year selects under their "Expiration date" label. */
#step2.wk-sign-v2 .billing_main_info > .fn-col-6.fn-row > .fn-form-group:first-child {
    margin-top: calc(14.7px * 1.6 + 6px);
}

#step2.wk-sign-v2 .billing_main_info .fn-form-group .fn-form-group {
    margin-bottom: 0;
}

#step2.wk-sign-v2 #billing_info_as_above {
    margin-top: 2px;
}

#step2.wk-sign-v2 .billing_main_info label[for="billing_info_as_above"] {
    margin-top: 12px !important; /* inline margin-top */
}

/* ---------------------------------------------------------------- members */

/* Additional adults (#membersadultN), children (#membersttrN, .childstr in the minor form): step
   4's numbered sub-cards laid out as the main form: the number (and the Remove link) on a header
   line, then first | last name, date of birth | gender, email | mobile phone, "pays for", the
   child's passwords. The DOM stays as rendered (the page JS walks it with next / nextAll /
   closest('.fn-row')): the block is a 4-column grid (a column = a quarter of the main form's
   width, so halves and quarters line up with it) and the wrappers in between are display:
   contents. Each field keeps its error under it inside its own grid item. The block's own display
   is toggled inline by the page JS (display:none / show() clearing it), which wins over the grid. */
#step2.wk-sign-v2 :is(#adultTableBlock, #relTableBlock) {
    counter-reset: wk-member;
}

#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-row:is([id^="membersadult"], [id^="membersttr"]) {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 12px;
    align-items: start;
    margin: 0 0 12px;
    padding: 14px 20px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    counter-increment: wk-member;
}

/* waiverprint_new.css .fn-row:after clearfix: not a grid item. */
#step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"])::after {
    display: none;
}

/* Header line: the number, left; the Remove link (below) on the same line, right. */
#step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"])::before {
    content: "#" counter(wk-member);
    grid-row: 1;
    grid-column: 1 / -1;
    margin: 0 0 10px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: calc(14.7px * 1.6);
    color: var(--ink-muted);
}

/* The wrappers between the block and its fields: names / email column, its form group and rows,
   the date of birth column. */
#step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-col-6,
#step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-col-6:first-of-type > .fn-form-group,
#step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-col-6:first-of-type > .fn-form-group > .fn-row {
    display: contents;
}

/* The empty label that kept the names level with the date of birth: the header line does that. */
#step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-col-6:first-of-type > .fn-form-group > label {
    display: none;
}

/* Grid items. Names: row 2; date of birth, gender: row 3 (gender: row 4 on phones); email, phone:
   row 5 (phone: row 6 on phones); "pays for": row 7; passwords: row 8. Rows a block lacks stay
   empty, at no height (spacing is the items' margin-top, not a row gap). */
#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-col-6:first-of-type > .fn-form-group > .fn-row > .fn-col-6 {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

#step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-col-6:first-of-type > .fn-form-group > .fn-row:first-of-type > .fn-col-6 {
    grid-row: 2;
}

#step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-col-6:first-of-type > .fn-form-group > .fn-row:nth-of-type(2) > .fn-col-6 {
    grid-row: 5;
    margin-top: 16px;
}

#step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-col-6:first-of-type > .fn-form-group > .fn-row > .fn-col-6:first-child {
    grid-column: 1 / 3;
}

#step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-col-6:first-of-type > .fn-form-group > .fn-row > .fn-col-6:nth-child(2) {
    grid-column: 3 / 5;
}

/* Date of birth (label, selects, error): the left half, as the main form's. */
#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-col-6:nth-of-type(2) > .fn-form-group {
    min-width: 0;
    margin: 16px 0 0;
}

#step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-col-6:nth-of-type(2) > .fn-form-group:first-child {
    grid-row: 3;
    grid-column: 1 / 3;
}

/* Gender (additional adults): a quarter next to it, where the main form's Gender is. */
#step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-col-6:nth-of-type(2) > .fn-form-group:nth-child(2) {
    grid-row: 3;
    grid-column: 3 / 4;
}

#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-col-6:nth-of-type(2) > .fn-form-group:nth-child(2) .fn-col-6 {
    width: 100%;
}

/* "Pays for" and the child's passwords: full width, their columns on the fields' left edge. */
#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-row {
    grid-row: 7;
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0 -6px;
}

#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-row:has(input[type="password"]) {
    grid-row: 8;
}

/* The minor form's "pays for" label sits in the row itself, without a column. */
#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-row.childstr > .fn-row:has(> label) {
    margin: 0;
}

/* The space over it is the label's: when the page JS hides the label
   (parent_pays_for_child_option_unvisible) or the waiver has none, the row takes no room. */
#step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-row label:has(> input[type="checkbox"]) {
    margin: 16px 0 0;
}

/* Passwords: the text over the full width, the two fields side by side under it. */
#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-row:has(input[type="password"]) > .fn-col-9:first-child {
    margin-top: 16px;
    margin-bottom: 6px;
}

#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-row:has(input[type="password"]) > .fn-col-9:nth-child(3) {
    display: none;
}

#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-row:has(input[type="password"]) > .fn-col-3 {
    width: 50%;
}

#step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) .fn-input {
    background-color: var(--surface);
}

#step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) .fn-input:is(:disabled, [readonly], .disabled) {
    background-color: var(--neutral-pick);
}

/* waiverprint_new.css .fn-action-btn: absolute, right of the card at 1440px, top: -100px on
   phones, font-size 0 at 640-960px. Here: on the header line, right (placed against the sub-card:
   its column is display: contents). */
#step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) .fn-action-btn {
    position: absolute;
    top: 8px;
    right: 14px;
    bottom: auto;
    left: auto;
    font-size: 14.7px;
    line-height: 1.6;
}

/* waiverprint_new.css at <=1024px: .removettr a 46px block, its text hidden. .fn-hide (display:
   none !important) still hides the first one when print.waiver.new.js adds it. */
#step2.wk-sign-v2 .fn-action-btn .removettr {
    display: inline-block;
    height: auto;
    margin: 0;
    padding: 6px 4px;
}

#step2.wk-sign-v2 .fn-action-btn .removettr > .link-text {
    display: inline;
}

/* ---------------------------------------------------------------- add links */

/* #addfirstadult, #addadult, #addfirstchild, #addttr sit in bootstrap offset columns: start of the
   card instead. */
#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-row.row {
    margin-left: 0;
    margin-right: 0;
}

#step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-row.row > [class*="col-"] {
    float: none;
    width: auto;
    min-height: 0;
    margin-left: 0;
    padding: 0;
}

#step2.wk-sign-v2 :is(#addfirstadult, #addadult, #addfirstchild, #addttr) {
    padding: 6px 2px !important; /* waiverprint_new.css #addttr.fn-btn-link padding-left !important */
}

#step2.wk-sign-v2 #new-child-link {
    margin-top: 2px;
}

/* ---------------------------------------------------------------- under the card */

/* The captcha and the bottom Next (#btconfirm2: inline margin 25px, float none !important) are
   outside the card, in a centered row (inline text-align: center): centered under it. */
#step2.wk-sign-v2 #captchaYourInformation {
    margin: 26px 0 0;
}

#step2.wk-sign-v2 #captchaYourInformation [class*="fn-col-"] {
    float: none;
    width: auto;
    padding: 0;
}

#step2.wk-sign-v2 #captchaYourInformation .fn-form-group {
    min-height: 0;
    margin: 0;
}

#step2.wk-sign-v2 #captchaYourInformation .g-recaptcha {
    display: inline-block;
    vertical-align: top;
}

#step2.wk-sign-v2 #btconfirm2 {
    width: auto !important; /* inline width: 51px, sized for the legacy font: the label stays inside */
    margin: 26px 0 0 !important; /* inline margin: 25px */
}

/* ---------------------------------------------------------------- small screens */

@media (max-width: 600px) {
    /* One column, except pairs that fit: names, gender / referred by, month / year. */
    #step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) :is(.fn-col-4, .fn-col-5, .fn-col-6) {
        width: 100%;
    }

    #step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) [class*="fn-col-"] .fn-row > .fn-col-6 {
        width: 50%;
    }

    #step2.wk-sign-v2 .fn-row:has(> .fn-col-3 :is(#PostalCode, #cc-PostalCode)) > :is(.fn-col-3, .fn-col-4) {
        width: 50%;
    }

    #step2.wk-sign-v2 .fn-row:has(> .fn-col-3 :is(#PostalCode, #cc-PostalCode)) > .fn-col-5 {
        width: 100%;
    }

    #step2.wk-sign-v2 .billing_main_info > .fn-col-6.fn-row > .fn-form-group {
        float: none;
        width: auto;
    }

    #step2.wk-sign-v2 .billing_main_info > .fn-col-6.fn-row > .fn-form-group:first-child {
        margin-top: 0;
    }

    #step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-action-title h2 {
        font-size: 17px;
    }

    #step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-action-subtitle h2 {
        font-size: 15.5px;
    }

    /* Members, as the main form here: names side by side, date of birth over the full width,
       gender on the left half under it, email and phone one per line. */
    #step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-row:is([id^="membersadult"], [id^="membersttr"]) {
        padding: 10px 16px 12px;
    }

    #step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"])::before {
        line-height: 22px;
    }

    #step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-col-6:nth-of-type(2) > .fn-form-group:first-child {
        grid-column: 1 / -1;
    }

    #step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-col-6:nth-of-type(2) > .fn-form-group:nth-child(2) {
        grid-row: 4;
        grid-column: 1 / 3;
    }

    #step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-col-6:first-of-type > .fn-form-group > .fn-row:nth-of-type(2) > .fn-col-6:first-child {
        grid-column: 1 / -1;
    }

    #step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-col-6:first-of-type > .fn-form-group > .fn-row:nth-of-type(2) > .fn-col-6:nth-child(2) {
        grid-row: 6;
        grid-column: 1 / -1;
    }

    #step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-row:has(input[type="password"]) > .fn-col-3 {
        width: 100%;
    }

    #step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-row:is([id^="membersadult"], [id^="membersttr"]) > .fn-row:has(input[type="password"]) > .fn-col-3 + .fn-col-9 + .fn-col-3 {
        margin-top: 16px;
    }

    #step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) .fn-action-btn {
        top: 3px;
        right: 10px;
    }

    /* The main form's first / last name: side by side. */
    #step2.wk-sign-v2 .fn-row:has(> .fn-col-6 #FName) > .fn-col-6 {
        width: 50%;
    }

    /* The cardholder's zip / city / state have no .fn-form-group (and its margin) of their own. */
    #step2.wk-sign-v2 .billing_details .fn-row:has(#cc-PostalCode) > :is(.fn-col-3, .fn-col-4) {
        margin-bottom: 12px;
    }
}

/* Tablet zoom (body.wk-zoom-tablet): ~1.3x, as components.css. */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body.wk-zoom-tablet #step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-action-title h2 {
        font-size: 24px;
    }

    body.wk-zoom-tablet #step2.wk-sign-v2 :is(.fn-adult-content, .fn-minor-content) .fn-action-subtitle h2 {
        font-size: 21px;
    }

    /* + 5px: the card number field is 10px shorter than the selects here (below). */
    body.wk-zoom-tablet #step2.wk-sign-v2 .billing_main_info > .fn-col-6.fn-row > .fn-form-group:first-child {
        margin-top: calc(19px * 1.6 + 6px + 5px);
    }

    body.wk-zoom-tablet #step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"])::before {
        font-size: 16px;
        line-height: calc(19px * 1.6);
    }

    /* user_form.css draws the card brand from a sprite placed for a ~51px field; a taller one shows
       the next brand under it. */
    body.wk-zoom-tablet #step2.wk-sign-v2 #user-table #card_number {
        padding-top: 11px !important; /* components.css .fn-input padding !important */
        padding-bottom: 11px !important;
    }

    body.wk-zoom-tablet #step2.wk-sign-v2 .fn-row:is([id^="membersadult"], [id^="membersttr"]) .fn-action-btn {
        top: 4px;
        font-size: 19px;
    }

    body.wk-zoom-tablet #step2.wk-sign-v2 #user-table #confirm-email {
        top: 14px !important; /* inline style */
        height: 34px !important;
        font-size: 15px !important;
    }

    body.wk-zoom-tablet #step2.wk-sign-v2 #user-table #Email:has(~ #confirm-email:not([style*="display:none"]):not([style*="display: none"])) {
        padding-right: 175px !important; /* components.css .fn-input padding !important */
    }

    body.wk-zoom-tablet #step2.wk-sign-v2 #show_referral_dropdown {
        top: 54px !important; /* see above */
    }
}