/* =============================================================================
   Hancock Veterans — App Welcome Screen
   Used by template-app-welcome.php (Median app wrapper only)
   Colours drawn from the logo: white bg, navy (#1a2f6e), red (#b71c1c)
   ============================================================================= */

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.hv-app-welcome button:before {
    content: unset;
}
html,
body.hv-app-welcome {
    height: 100%;
    overflow: hidden;
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Complete-profile view needs to scroll — form can be longer than the screen */
body.hv-view--complete-profile {
    overflow-y: auto;
    height: auto;
    min-height: 100%;
}

/* ── Background — clean white so the JPEG logo blends seamlessly ──────────── */
body.hv-app-welcome {
    background-color: #f5f6f8;
    position: relative;
}

.hv-welcome__bg {
    position: fixed;
    inset: 0;
    background: linear-gradient(175deg, #ffffff 0%, #eef0f5 100%);
    z-index: 0;
}

/* Subtle top stripe in navy to anchor the screen */
.hv-welcome__bg::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: #1a2f6e;
    z-index: 1;
}

/* ── Main wrapper ─────────────────────────────────────────────────────────── */
.hv-welcome__wrap {
    position: relative;
    z-index: 1;
    height: 100vh;
    padding: env(safe-area-inset-top, 20px) 32px
        env(safe-area-inset-bottom, 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-align: center;
}

/* ── Logo ─────────────────────────────────────────────────────────────────── */
.hv-welcome__logo {
    margin-bottom: 24px;
}

.hv-welcome__logo img {
    width: 200px;
    height: auto;
    /* no drop-shadow needed — white bg blends with white page */
}

/* ── Copy ─────────────────────────────────────────────────────────────────── */
.hv-welcome__copy {
    margin-bottom: 40px;
}

.hv-welcome__title {
    color: #1a2f6e;
    font-size: clamp(22px, 6vw, 28px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.3px;
    margin-bottom: 12px;
}

.hv-welcome__tagline {
    color: #4a5568;
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.6;
    max-width: 300px;
    margin: 0 auto;
}

/* ── Action buttons ───────────────────────────────────────────────────────── */
.hv-welcome__actions {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.hv-welcome__btn {
    display: block;
    width: 100%;
    padding: 16px 24px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.hv-welcome__btn:active {
    opacity: 0.82;
    transform: scale(0.97);
}

/* Primary — logo red */
.hv-welcome__btn--primary {
    background: #b71c1c;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(183, 28, 28, 0.3);
}

.hv-welcome__btn--primary:hover {
    background: #c62828;
    color: #ffffff;
}

/* Secondary — navy outline */
.hv-welcome__btn--secondary {
    background: transparent;
    color: #1a2f6e;
    border: 2px solid #1a2f6e;
}

.hv-welcome__btn--secondary:hover {
    background: rgba(26, 47, 110, 0.06);
    color: #1a2f6e;
    border: 2px solid #bec4d6;
}

/* ── Guest link ───────────────────────────────────────────────────────────── */
.hv-welcome__guest-link {
    display: block;
    margin-bottom: 20px;
    color: #6b7a99;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.hv-welcome__guest-link:hover {
    color: #1a2f6e;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Footer note ──────────────────────────────────────────────────────────── */
.hv-welcome__footer-note {
    color: #9aa3b2;
    font-size: 12px;
    line-height: 1.5;
    max-width: 280px;
}

.hv-welcome__footer-note a {
    color: #6b7a99;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hv-welcome__footer-note a:hover {
    color: #1a2f6e;
}

/* =============================================================================
   Slide-up panels (Sign In / Create Account)
   ============================================================================= */

/* ── Backdrop ────────────────────────────────────────────────────────────────── */
.hv-panel__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.hv-panel__backdrop.is-active {
    opacity: 1;
    pointer-events: all;
}

/* ── Panel (bottom sheet) ────────────────────────────────────────────────────── */
.hv-panel {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: 520px;
    z-index: 101;
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    padding: 0 28px calc(env(safe-area-inset-bottom, 16px) + 16px);
    transform: translateX(-50%) translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12);
}

.hv-panel.is-open {
    transform: translateX(-50%) translateY(0);
}

/* ── Drag handle ─────────────────────────────────────────────────────────────── */
.hv-panel__handle {
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 12px auto 4px;
}

/* ── Panel header ────────────────────────────────────────────────────────────── */
.hv-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 20px;
}

.hv-panel__title {
    color: #1a2f6e;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.hv-panel__close {
    background: none;
    border: none;
    color: #9aa3b2;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    margin: -4px;
    -webkit-tap-highlight-color: transparent;
}

.hv-panel__close:hover {
    color: #4a5568;
}

/* ── WP Login form — iOS HIG-compliant (matches GF form styles) ──────────────── */
#hv-login-form p {
    margin-bottom: 18px;
}

/* Labels — same as GF fields: 14px / 500 weight */
#hv-login-form label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
    letter-spacing: -0.1px;
}

/* Inputs — white bg, stronger border, 50px min-height (44pt+), focus glow */
#hv-login-form input[type="text"],
#hv-login-form input[type="password"] {
    width: 100%;
    min-height: 50px;
    padding: 14px 16px;
    border: 1.5px solid #c9d2dc;
    border-radius: 12px;
    font-size: 16px; /* 16px prevents iOS auto-zoom */
    color: #1a202c;
    background: #ffffff;
    outline: none;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    font-family: inherit;
}

#hv-login-form input[type="text"]:focus,
#hv-login-form input[type="password"]:focus {
    border-color: #1a2f6e;
    box-shadow: 0 0 0 3px rgba(26, 47, 110, 0.1);
}

/* "Keep me signed in" checkbox row */
#hv-login-form .login-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px; /* 44pt tap target for the row */
}

#hv-login-form .login-remember label {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    color: #6b7a99;
    letter-spacing: 0;
}

/* Native checkbox — size it to 44pt touch area */
#hv-login-form .login-remember input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-height: unset;
    cursor: pointer;
    accent-color: #1a2f6e; /* Colors the native checkbox on modern browsers */
    flex-shrink: 0;
}

#hv-login-form .login-submit {
    margin-top: 6px;
    margin-bottom: 0;
}

/* Submit button — matches GF submit: 54px tall, 14px radius, shadow, scale-on-tap */
#hv-login-form input[type="submit"] {
    display: block;
    width: 100%;
    min-height: 54px;
    padding: 16px 24px;
    background: #b71c1c;
    color: #ffffff;
    border: none;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.2px;
    cursor: pointer;
    transition:
        background 0.18s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 4px 14px rgba(183, 28, 28, 0.28);
    font-family: inherit;
}

#hv-login-form input[type="submit"]:active {
    background: #c62828;
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(183, 28, 28, 0.2);
}

/* ── Forgot password ─────────────────────────────────────────────────────────── */
.hv-panel__forgot {
    display: block;
    text-align: right;
    font-size: 13px;
    color: #6b7a99;
    text-decoration: none;
    margin-top: 8px;
    margin-bottom: 4px;
}

.hv-panel__forgot:hover {
    color: #1a2f6e;
    text-decoration: underline;
}

/* ── Divider ─────────────────────────────────────────────────────────────────── */
.hv-panel__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: #9aa3b2;
    font-size: 13px;
}

.hv-panel__divider::before,
.hv-panel__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* ── Social buttons area ─────────────────────────────────────────────────────── */
.hv-panel__social {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 4px;
}

/* Override Nextend button styles to match our design */
.hv-panel__social .nsl-container {
    width: 100% !important;
}

.hv-panel__social .nsl-container-buttons {
    flex-direction: column !important;
    gap: 12px !important;
}

.hv-panel__social .nsl-button {
    width: 100% !important;
    padding: 13px 16px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    justify-content: center !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}

/* ── Email sign up button (in signup panel) ──────────────────────────────────── */
.hv-panel__email-btn {
    display: block;
    margin-bottom: 8px;
}

/* ── Switch link ─────────────────────────────────────────────────────────────── */
.hv-panel__switch {
    text-align: center;
    font-size: 14px;
    color: #6b7a99;
    margin-top: 20px;
    padding-bottom: 4px;
}

.hv-panel__switch-btn {
    background: none;
    border: none;
    color: #1a2f6e;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* ── Back button ─────────────────────────────────────────────────────────────── */
.hv-panel__back {
    background: none;
    border: none;
    color: #6b7a99;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    -webkit-tap-highlight-color: transparent;
}

.hv-panel__back:hover {
    color: #1a2f6e;
}

/* =============================================================================
   Gravity Forms — iOS HIG-compliant styles
   Applied via: #hvEmailForm (Form 8) and .hv-profile-form (Form 9)

   Apple HIG rules applied:
   • 44pt minimum tap targets on all interactive elements
   • font-size: 16px on inputs (prevents iOS auto-zoom)
   • Accent-colour focus ring with subtle glow
   • Error state colours on the input itself, not just below it
   • Custom radio rows (full-width, tappable, iOS-style selection dot)
   • Pill/chip checkboxes for multi-select interests
   • Custom select chevron; -webkit-appearance: none on all inputs
   • Submit button: full-width, 54px tall, 14px radius, scale-on-tap
   ============================================================================= */

/* ── Wrapper & field spacing ──────────────────────────────────────────────── */
#hvEmailForm {
    /* Clear the fixed #hvSigninBar so the submit button is never obscured. */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
}

#hvEmailForm .gform_wrapper,
.hv-profile-form .gform_wrapper {
    margin: 0;
}

#hvEmailForm .gform_body .gfield,
.hv-profile-form .gform_body .gfield {
    margin-bottom: 18px;
}

/* ── Labels ───────────────────────────────────────────────────────────────── */
/* HIG: always include a label above the field so purpose is clear when
   the placeholder disappears after the user starts typing. */
#hvEmailForm .gfield_label,
.hv-profile-form .gfield_label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
    letter-spacing: -0.1px;
}

#hvEmailForm .gfield_required,
.hv-profile-form .gfield_required {
    color: #b71c1c;
    margin-left: 2px;
}

/* ── Text / email / password / textarea inputs ────────────────────────────── */
/* 16px font prevents iOS auto-zoom; 50px min-height = 44pt+ tap target */
#hvEmailForm input[type="text"],
#hvEmailForm input[type="email"],
#hvEmailForm input[type="password"],
#hvEmailForm textarea,
.hv-profile-form input[type="text"],
.hv-profile-form input[type="email"],
.hv-profile-form input[type="password"],
.hv-profile-form textarea {
    width: 100%;
    min-height: 50px;
    padding: 14px 16px;
    border: 1.5px solid #d1d5db;
    border-radius: 12px;
    font-size: 16px;
    color: #1a202c;
    background: #f9fafb;
    outline: none;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
    -webkit-appearance: none;
    box-sizing: border-box;
    font-family: inherit;
}

/* Focus — accent border + soft glow (HIG: make focus state clearly visible) */
#hvEmailForm input[type="text"]:focus,
#hvEmailForm input[type="email"]:focus,
#hvEmailForm input[type="password"]:focus,
#hvEmailForm textarea:focus,
.hv-profile-form input[type="text"]:focus,
.hv-profile-form input[type="email"]:focus,
.hv-profile-form input[type="password"]:focus,
.hv-profile-form textarea:focus {
    border-color: #1a2f6e;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(26, 47, 110, 0.1);
}

/* Error state — red border on the input itself */
#hvEmailForm .gfield_error input[type="text"],
#hvEmailForm .gfield_error input[type="email"],
#hvEmailForm .gfield_error input[type="password"],
#hvEmailForm .gfield_error textarea,
#hvEmailForm .gfield_error select,
.hv-profile-form .gfield_error input[type="text"],
.hv-profile-form .gfield_error input[type="email"],
.hv-profile-form .gfield_error input[type="password"],
.hv-profile-form .gfield_error textarea,
.hv-profile-form .gfield_error select {
    border-color: #b71c1c;
    background: #fff8f8;
}

/* Read-only pre-filled fields (social login name/email on Form 9) */
.hv-profile-form input[readonly],
.hv-profile-form .hva-readonly-field input {
    background: #f0f4f8;
    border-color: #e2e8f0;
    cursor: default;
    color: #6b7a99;
}

/* ── Select dropdowns ─────────────────────────────────────────────────────── */
/* White background creates clear separation from page; base64 SVG chevron
   is the most reliable approach across iOS Safari, Android Chrome, and desktop.
   appearance:none removes the native arrow on all platforms. */
#hvEmailForm select,
.hv-profile-form select {
    width: 100%;
    min-height: 50px;
    padding: 14px 46px 14px 16px;
    border: 1.5px solid #c9d2dc;
    border-radius: 12px;
    font-size: 16px;
    color: #1a202c;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNmI3YTk5IiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSIvPjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px 18px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.4;
}

#hvEmailForm select:focus,
.hv-profile-form select:focus {
    border-color: #1a2f6e;
    box-shadow: 0 0 0 3px rgba(26, 47, 110, 0.1);
}

/* ── Address field: city + state side-by-side ─────────────────────────────── */
/* GF address uses .ginput_container_address with .ginput_left / .ginput_right
   for sub-fields. Override the shared ginput_complex column styles here so
   city and state sit in a clean 2-col grid and sub-labels are legible. */
#hvEmailForm .ginput_container_address,
.hv-profile-form .ginput_container_address {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Full-width sub-fields (street address if shown) */
#hvEmailForm .ginput_container_address .ginput_full,
.hv-profile-form .ginput_container_address .ginput_full {
    grid-column: 1 / -1;
}

#hvEmailForm .ginput_container_address .ginput_left,
#hvEmailForm .ginput_container_address .ginput_right,
.hv-profile-form .ginput_container_address .ginput_left,
.hv-profile-form .ginput_container_address .ginput_right {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 0;
}

/* Sub-labels for address fields — styled like regular field labels */
#hvEmailForm .ginput_container_address label,
.hv-profile-form .ginput_container_address label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0;
    order: -1; /* Always show label above input regardless of DOM order */
}

/* ── Sub-labels on complex fields (first/last name) ──────────────────────── */
#hvEmailForm .ginput_complex .ginput_full,
#hvEmailForm .ginput_complex .ginput_left,
#hvEmailForm .ginput_complex .ginput_right,
.hv-profile-form .ginput_complex .ginput_full,
.hv-profile-form .ginput_complex .ginput_left,
.hv-profile-form .ginput_complex .ginput_right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

#hvEmailForm .ginput_complex span label,
.hv-profile-form .ginput_complex span label {
    font-size: 12px;
    font-weight: 400;
    color: #9aa3b2;
    margin-bottom: 0;
    letter-spacing: 0;
}

/* ── Helper text (field descriptions) ────────────────────────────────────── */
#hvEmailForm .gfield_description:not(.validation_message),
.hv-profile-form .gfield_description:not(.validation_message) {
    font-size: 12px;
    color: #9aa3b2;
    line-height: 1.45;
    margin-top: 6px;
}

/* ── Validation error messages ────────────────────────────────────────────── */
/* HIG: validate at the right time and show errors clearly near the field */
#hvEmailForm .gfield_description.validation_message,
#hvEmailForm .validation_message,
.hv-profile-form .gfield_description.validation_message,
.hv-profile-form .validation_message {
    font-size: 13px;
    font-weight: 500;
    color: #b71c1c;
    margin-top: 6px;
    line-height: 1.4;
}

#hvEmailForm .gform_validation_errors,
.hv-profile-form .gform_validation_errors {
    background: #fff8f8;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 14px;
    color: #b71c1c;
}

/* ── Radio buttons — iOS-style full-width selection rows ──────────────────── */
/* HIG: minimum 44pt tap target; show clear selected state with accent colour */
#hvEmailForm .gfield_radio,
.hv-profile-form .gfield_radio {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Override GF's inline-block column layout */
#hvEmailForm .gfield_radio li,
.hv-profile-form .gfield_radio li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* Hide native radio */
#hvEmailForm .gfield_radio input[type="radio"],
.hv-profile-form .gfield_radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

/* Tappable label row */
#hvEmailForm .gfield_radio .gchoice label,
.hv-profile-form .gfield_radio .gchoice label {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 14px 16px;
    background: #f9fafb;
    border: 1.5px solid #d1d5db;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 400;
    margin-left: 0;
    color: #1a202c;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

#hvEmailForm .gfield--input-type-radio {
    .gfield_radio {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
    .gchoice {
        width: fit-content;
    }
}

#hvEmailForm .gfield_radio .gchoice label:active,
.hv-profile-form .gfield_radio .gchoice label:active {
    background: #eef0f7;
}

/* Custom radio circle — sits at left of label text */
#hvEmailForm .gfield_radio .gchoice label::before,
.hv-profile-form .gfield_radio .gchoice label::before {
    content: "";
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: #ffffff;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

/* Selected row */
#hvEmailForm .gfield_radio input[type="radio"]:checked + label,
.hv-profile-form .gfield_radio input[type="radio"]:checked + label {
    border-color: #1a2f6e;
    background: #eef1f9;
    font-weight: 600;
    color: #1a2f6e;
}

/* Selected circle — navy with white centre dot (iOS radio style) */
#hvEmailForm .gfield_radio input[type="radio"]:checked + label::before,
.hv-profile-form .gfield_radio input[type="radio"]:checked + label::before {
    border-color: #1a2f6e;
    background: #1a2f6e;
    box-shadow: inset 0 0 0 5px #eef1f9;
}

/* ── Checkboxes — pill/chip multi-select (Interests field) ────────────────── */
/* HIG: make each option independently tappable with clear selected state */
#hvEmailForm .gfield_checkbox,
.hv-profile-form .gfield_checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    align-content: flex-start;
    flex-direction: row;
}

/* Hide native checkbox */
#hvEmailForm .gfield_checkbox input[type="checkbox"],
.hv-profile-form .gfield_checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

/* Pill label */
#hvEmailForm .gfield_checkbox .gchoice label,
.hv-profile-form .gfield_checkbox .gchoice label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 18px;
    border: 1.5px solid #d1d5db;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 500;
    margin-left: 0;
    color: #4a5568;
    background: #f9fafb;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

/* Selected pill — navy fill */
#hvEmailForm .gfield_checkbox input[type="checkbox"]:checked + label,
.hv-profile-form .gfield_checkbox input[type="checkbox"]:checked + label {
    background: #1a2f6e;
    border-color: #1a2f6e;
    color: #ffffff;
    font-weight: 600;
}

#hvEmailForm .gfield_checkbox .gchoice label:active,
.hv-profile-form .gfield_checkbox .gchoice label:active {
    transform: scale(0.96);
}

/* ── Submit button ────────────────────────────────────────────────────────── */
/* HIG: prominent, full-width, clear primary action; 44pt+ height;
   use style not size to distinguish; include press state */
#hvEmailForm .gform_footer input[type="submit"],
#hvEmailForm .gform_page_footer input[type="submit"],
.hv-profile-form .gform_footer input[type="submit"],
.hv-profile-form .gform_page_footer input[type="submit"] {
    display: block;
    width: 100%;
    min-height: 54px;
    padding: 16px 24px;
    background: #b71c1c;
    color: #ffffff;
    border: none;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.2px;
    cursor: pointer;
    -webkit-appearance: none;
    transition:
        background 0.18s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
    margin-top: 8px;
    box-shadow: 0 4px 14px rgba(183, 28, 28, 0.28);
    font-family: inherit;
}

#hvEmailForm .gform_footer input[type="submit"]:active,
.hv-profile-form .gform_footer input[type="submit"]:active {
    background: #c62828;
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(183, 28, 28, 0.2);
}

/* ── Success confirmation ─────────────────────────────────────────────────── */
#hvEmailForm .gform_confirmation_message,
.hv-profile-form .gform_confirmation_message {
    text-align: center;
    color: #166534;
    font-size: 15px;
    font-weight: 600;
    padding: 24px 0;
    line-height: 1.5;
}

/* ── Complete-profile wrap — scrollable, top-aligned ─────────────────────────── */
.hv-welcome__wrap--form {
    justify-content: flex-start;
    padding-top: calc(env(safe-area-inset-top, 20px) + 32px);
    padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 32px);
    height: auto;
    min-height: 100vh;
}

.hv-welcome__wrap--form .hv-welcome__copy {
    margin-bottom: 28px;
}

.hv-profile-form {
    width: 100%;
    max-width: 420px;
}

/* ── Fixed "Already have an account?" bar ────────────────────────────────────── */
/* Sits below the signup panel, always visible at the bottom of the screen.      */
#hvSigninBar {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: 520px;
    transform: translateX(-50%);
    z-index: 10001; /* above .hv-panel (z-index 1000) */
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
    font-size: 14px;
    color: #6b7a99;
    padding: 14px 28px;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
}

/* ── Account activated notice (shown in sign-in panel after 1776 registration) ─ */
.hv-panel__activated-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    color: #065f46;
}

.hv-panel__activated-notice svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #059669;
}

.hv-panel__activated-notice p {
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    margin: 0;
}

/* ── Login error banner (shown in sign-in panel after failed attempt) ────── */
.hv-panel__login-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    color: #991b1b;
}

.hv-panel__login-error svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #dc2626;
}

.hv-panel__login-error p {
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    margin: 0;
}