/**
 * Modern visual pass on the join form. Pure presentation — every rule
 * here is scoped to body.base_user_join (set automatically by
 * BASE_CTRL_Join) and only restyles existing markup; none of it
 * changes field names, values, or validation.
 *
 * IMPORTANT: base.css already has a working, previously-tuned mobile
 * layout for this exact form inside its own `@media (max-width: 900px)`
 * block. The "table -> stacked card" restructuring below is scoped to
 * desktop only (min-width: 901px) so mobile is untouched.
 *
 * REVISION 2: fixed a real bug from the first pass — the join
 * submit button renders as `<span class="ow_button"><input
 * type="submit">...</span>` (see ow_themes/elevate/decorators/
 * button.html). The *outer* span already has its own background/
 * border-radius from base.css (the same button styling used
 * site-wide), and the *inner* input is deliberately transparent.
 * The previous version of this file styled the inner input with its
 * OWN background/radius/shadow, which is why it looked like a
 * rounded button rendered on top of a different, more square button
 * — that "different button" was the pre-existing wrapper underneath.
 * Fixed by styling the wrapper instead and keeping the inner input
 * transparent, matching the site's own established button pattern.
 *
 * Also removed the birthdate day/month/year styling entirely — that
 * trio is wrapped in an intermediate `<div class="birthdate">` (see
 * ow_static/plugins/base/js/date_field.js) that the first pass didn't
 * account for, and attempting to flex-arrange them without knowing
 * that wrapper existed produced a broken, doubled-up look. Reverted
 * to the original, unstyled appearance rather than guess again.
 */

/* ---------- 1. Step progress indicator (all widths) ---------- */
.elv-join-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 2px 0 10px;
}
.elv-join-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #E5E7EB;
    transition: background-color 0.2s, width 0.2s;
}
.elv-join-step-dot.elv-join-step-active {
    background: #7C3AED;
    width: 22px;
    border-radius: 999px;
}
.elv-join-step-label {
    font-size: 12px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: 6px;
}

/* ---------- 2. Constrain the card + card-style field rows —
   DESKTOP ONLY. Mobile already gets an equivalent stacked layout
   from base.css's own max-width:900px rules for this form. ---------- */
@media (min-width: 901px) {
    /* The outer box uses `ow_superwide` (deliberately full-bleed for
       the ORIGINAL 3-column table). Now that fields stack into a
       single column, full page width makes the card and every input
       inside it look oversized. Constrain to a normal form width. */
    body.base_user_join .ow_superwide.ow_automargin {
        max-width: 440px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        /* Breathing room top and bottom — without this the "STEP 1 OF 2"
           indicator sits flush against the card's top edge and the
           Continue/Join button sits flush against the bottom edge. */
        padding: 22px 12px 30px !important;
    }

    body.base_user_join table.ow_form {
        table-layout: auto !important;
        width: 100% !important;
    }
    body.base_user_join table.ow_form tr {
        display: block !important;
        margin-bottom: 7px;
    }
    body.base_user_join table.ow_form tr.ow_tr_delimiter,
    body.base_user_join table.ow_form tr.ow_tr_delimiter td {
        display: none !important;
    }
    body.base_user_join table.ow_form tr.ow_tr_first:not(:first-child) th {
        display: block !important;
        padding: 10px 0 4px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        color: #7C3AED !important;
        background: transparent !important;
        border: none !important;
    }
    body.base_user_join table.ow_form td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }
    body.base_user_join table.ow_form td.ow_label {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #4B5563 !important;
        margin-bottom: 3px !important;
        white-space: normal !important;
    }
    body.base_user_join table.ow_form td.ow_value {
        margin-bottom: 1px !important;
    }
    /* Helper/description text — was its own table column, now sits
       under the field as small muted text instead of off to the side. */
    body.base_user_join table.ow_form td.ow_desc {
        font-size: 11px !important;
        color: #9CA3AF !important;
        margin-top: 2px !important;
        line-height: 1.3 !important;
        display: block !important;
    }
    body.base_user_join table.ow_form td.ow_desc:empty {
        display: none !important;
    }
    /* These descriptions just restate what the label/field already
       makes obvious (or, for email/password, duplicate the live
       red/amber hint from modern_join.js once the user has touched
       the field) — drop them entirely on desktop. Mobile already
       hides every `.ow_desc` unconditionally (base.css), so no
       equivalent change is needed there. */
    body.base_user_join table.ow_form tr:has(select[name="sex"]) td.ow_desc,
    body.base_user_join table.ow_form tr:has(input[name="match_sex[]"]) td.ow_desc,
    body.base_user_join table.ow_form tr:has(select[name="match_age[from]"]) td.ow_desc,
    body.base_user_join table.ow_form tr:has(input[name="email"]) td.ow_desc,
    body.base_user_join table.ow_form tr:has(input[name="password"]) td.ow_desc,
    body.base_user_join table.ow_form tr:has(select[name="height"]) td.ow_desc,
    body.base_user_join table.ow_form tr:has(input[name="children"]) td.ow_desc,
    body.base_user_join table.ow_form tr:has(input[name="userPhoto"]) td.ow_desc {
        display: none !important;
    }
    /* The photo row's label cell is just `&nbsp;` in the template (the
       "PROFILE PHOTO" section header above already says what this
       row is) — but it's non-empty (a literal nbsp character), so it
       still rendered as an empty blank line above the Choose File
       button once the table collapsed to a single stacked column. */
    body.base_user_join table.ow_form tr:has(input[name="userPhoto"]) td.ow_label {
        display: none !important;
    }

    /* profile_widgets.css caps the birthday/location inputs at
       max-width:540px on desktop (min-width:901px) so they don't
       stretch edge-to-edge on the wider /profile/edit form, where the
       card is comfortably wider than 540px. Our join card is only
       ~440px wide, so that cap doesn't just fail to help here — it's
       *narrower* than the Join button / error message / everything
       else in the card, making those two look oddly oversized by
       comparison when really it's birthday/location that are
       artificially undersized. Restore 100% on the join page only;
       profile_widgets.css's shared 540px cap stays intact for
       /profile/edit and /fill/profile_questions. */
    body.base_user_join .elv-birthday-picker,
    body.base_user_join input.ow_googlelocation_location_input,
    body.base_user_join input[type="text"][name="googlemap_location"],
    body.base_user_join .googlelocation_form_element_div {
        max-width: 100% !important;
    }

    /* The native checkbox <ul> wrapper (SkaDate markup) keeps
       browser-default `<ul>`/`<li>` margin even after modern_pills.js
       hides the individual checkboxes/labels behind pill buttons —
       that default vertical margin was the "too large a gap" under
       Interested In before the next row/section. modern_pills.js
       inserts the visible `.elv-pill-group` into the FIRST `<li>`
       (right after the first checkbox); every other `<li>` in the
       group is left holding nothing but now-hidden native controls,
       so they're safe to collapse entirely rather than just zeroing
       their margin. */
    body.base_user_join table.ow_form ul.ow_checkbox_group {
        margin: 0 !important;
        padding: 0 !important;
    }
    body.base_user_join table.ow_form ul.ow_checkbox_group > li {
        margin: 0 !important;
        padding: 0 !important;
    }
    body.base_user_join table.ow_form ul.ow_checkbox_group > li:not(:first-child) {
        display: none !important;
    }

    /* Terms-of-use row: checkbox + its label read naturally on one
       line rather than stacked like a text-field row. `row-reverse`
       flips DOM order (label, then checkbox) to display order
       (checkbox, then label) — but its default `justify-content:
       flex-start` packs the pair against the *main-start* edge, which
       row-reverse redefines as the row's right side, not the left.
       That shipped a real bug: the checkbox+label pair rendered
       flush-right with a dead gap on the left instead of sitting at
       the row's natural left edge. `justify-content: flex-end` packs
       against the main-end edge instead, which for row-reverse is the
       left side — the fix. */
    body.base_user_join table.ow_form tr:has(input[name="termOfUse"]) {
        display: flex !important;
        flex-direction: row-reverse !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    body.base_user_join table.ow_form tr:has(input[name="termOfUse"]) td.ow_label,
    body.base_user_join table.ow_form tr:has(input[name="termOfUse"]) td.ow_value {
        width: auto !important;
        margin: 0 !important;
    }
    body.base_user_join table.ow_form tr:has(input[name="termOfUse"]) td.ow_desc {
        display: none !important;
    }

    /* Modest, sane input sizing — NOT the oversized padding/font-size
       from the first pass. */
    body.base_user_join input[type="text"],
    body.base_user_join input[type="email"],
    body.base_user_join input[type="password"],
    body.base_user_join select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 7px 10px !important;
        font-size: 13px !important;
        height: auto !important;
    }

    /* ---------- 6. Overall card density pass ----------
       The card was ~40% too tall on desktop (routinely needed a
       scroll to reach the submit button on a 900px-tall viewport).
       Tighten the surrounding chrome that modern_join.css doesn't
       already own: the page heading, the intro/promo copy, and the
       "Register your profile" section cap — all theme (base.css)
       markup reused as-is by this template, just given a smaller
       footprint scoped to this page only. */
    body.base_user_join h1.ow_stdmargin {
        font-size: 22px !important;
        /* Gap between the "Join our community" banner and the white
           card below it — the card's own top padding (above) handles
           the space *inside* the card. */
        margin-bottom: 22px !important;
    }
    body.base_user_join .ow_superwide.ow_automargin > .ow_box_empty.ow_center {
        padding: 4px 12px !important;
        margin-bottom: 8px !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }
    body.base_user_join .ow_box_cap_empty {
        padding: 8px 12px 0 !important;
        margin-bottom: 0 !important;
    }
    body.base_user_join .ow_box_cap_empty .ow_box_cap_body {
        min-height: 0 !important;
    }
    body.base_user_join .ow_box_cap_empty h3 {
        padding: 3px 0 !important;
        font-size: 14px !important;
    }
    /* Empty spacer wrapper the box-cap decorator renders right before
       the <form> (`<div class="ow_box_empty ow_break_word"></div>`,
       always empty of real content in this template) — no content,
       just trims the dead gap it otherwise leaves via base.css's
       default .ow_box_empty padding/margin/border/shadow.
       NOTE: this is NOT `:empty` — Smarty's whitespace/newlines
       between the tags land in the DOM as a text node, so the CSS
       `:empty` pseudo-class (which requires literally zero child
       nodes, not even whitespace text) never matched and this rule
       was silently a no-op — the actual source of the leftover gap
       under "Register your profile". Target the sibling directly. */
    body.base_user_join .ow_box_cap_empty + .ow_box_empty {
        padding: 0 !important;
        /* A little breathing room before the first section pill
           ("BASIC") — zeroing this out completely (as a prior pass
           did) left "Register your profile" touching "BASIC" with no
           gap at all. */
        margin: 0 0 12px !important;
        border: none !important;
        box-shadow: none !important;
        min-height: 0 !important;
    }
}

/* ---------- 3. Modern input look (border/radius/focus) — all widths.
   Deliberately does NOT set height/padding here so it can't fight the
   existing mobile-specific sizing in base.css. ---------- */
body.base_user_join input[type="text"],
body.base_user_join input[type="email"],
body.base_user_join input[type="password"],
body.base_user_join select {
    border: 1.5px solid #E5E7EB !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    color: #111827 !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body.base_user_join input[type="text"]:focus,
body.base_user_join input[type="email"]:focus,
body.base_user_join input[type="password"]:focus,
body.base_user_join select:focus {
    outline: none !important;
    border-color: #7C3AED !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
}

/* Inline validation state — set/removed by modern_join.js. Never
   blocks submission; purely a visual hint layered on top of the real
   server-side validation. */
body.base_user_join .elv-field-valid {
    border-color: #10B981 !important;
}
body.base_user_join .elv-field-invalid {
    border-color: #F59E0B !important;
}
.elv-field-hint {
    display: block;
    font-size: 12px;
    margin-top: 5px;
    line-height: 1.4;
}
.elv-field-hint-valid { color: #059669; }
.elv-field-hint-invalid { color: #B45309; }
/* Hide the server-rendered error for a field while our own live hint
   is showing something for that same field, so the user only ever
   sees one (accurate, specific) message instead of a stale generic
   one sitting above/below a newer one. */
.elv-server-error-suppressed { display: none !important; }

/* ---------- 4. Modern checkbox (Terms of Use) — all widths ---------- */
body.base_user_join input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #7C3AED;
    cursor: pointer;
    margin: 0;
}

/* ---------- 5. Modern submit button — all widths.
   Styles the ACTUAL visible button (the `span.ow_button` wrapper —
   see ow_themes/elevate/decorators/button.html), not the input inside
   it. The input stays transparent, matching how every other button
   on this site already works (base.css lines ~960-990). Both the
   wrapper and the input are flex containers so the label stays
   vertically centered regardless of native button chrome (see the
   `appearance: none` note below) — a plain `line-height` match looked
   right on desktop but still let mobile push the text toward the
   bottom edge. ---------- */
body.base_user_join span.ow_button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 50px !important;
    background: #7C3AED !important;
    background-image: linear-gradient(135deg, #8B5CF6, #7C3AED) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.28) !important;
    transition: transform 0.12s, box-shadow 0.12s;
}
body.base_user_join span.ow_button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(124, 58, 237, 0.36) !important;
    background: linear-gradient(135deg, #8B5CF6, #7C3AED) !important;
}
/* `line-height` alone doesn't reliably vertical-center text in an
   `<input type="submit">` on mobile Safari/Chrome — without an
   `appearance: none` reset, the input keeps native OS button chrome
   with its own internal metrics, which is what was pushing the label
   down toward the bottom edge on mobile ("Continue"/"Join" text
   riding the bottom border) even though desktop rendered it centered
   fine. Flexbox centering on both the wrapper (above) and the input
   itself is robust regardless of native chrome. */
body.base_user_join span.ow_button input[type="submit"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 24px !important;
    background: transparent !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    border: none !important;
    box-sizing: border-box !important;
    cursor: pointer;
}
/* The submit lives in a `.ow_right` float wrapper — make it full-width
   on its own row instead of a small right-aligned button. */
body.base_user_join .clearfix > .ow_right {
    float: none !important;
    width: 100% !important;
    margin-top: 8px;
}

/* Desktop-only: shorter submit button as part of the overall card
   density pass (section 6 above) — must come after the "all widths"
   50px rule right above so it actually wins on wide viewports. */
@media (min-width: 901px) {
    body.base_user_join span.ow_button {
        height: 42px !important;
    }
}