/*
 * ElevateVN — profile-form widget styles.
 *
 * Loaded by elevate_admin_tools/classes/event_handler.php on signup
 * (join) and profile edit pages. Pairs with the matching JS files in
 * static/js/ that transform native SkaDate fields into nicer widgets.
 *
 * Style philosophy: rounded, soft elevation, tight density, brand
 * accent (#7C3AED purple) consistent with the rest of the elevate
 * theme. All overrides scoped under a widget root class so they
 * don't bleed onto unrelated forms.
 */

/* ───────────────── Chip multi-select (languages, ethnicity) ───────────────── */

.elv-chip-select-source-hidden {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.elv-chip-select {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin: 4px 0;
}

.elv-chip-select-shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    min-height: 44px;
    border: 1px solid #E0DBF1;
    border-radius: 10px;
    background: #FFFFFF;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
.elv-chip-select-input {
    /* Override the 16px-on-mobile rule for THIS specific input so
       the chip shell stays compact (input still 16px on focus to
       prevent zoom — handled by parent shell touch target). */
    line-height: 1.4 !important;
}

.elv-chip-select-shell:focus-within {
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.elv-chip-select-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.elv-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 10px;
    border-radius: 999px;
    background: #F2EDFF;
    color: #4C1D95;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}

.elv-chip-label { display: inline-block; }

.elv-chip-remove {
    background: transparent;
    border: none;
    color: #7C3AED;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    border-radius: 50%;
    transition: background 0.12s ease;
}
.elv-chip-remove:hover { background: rgba(124, 58, 237, 0.15); }

.elv-chip-select-input {
    flex: 1 1 120px;
    min-width: 80px;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 14px;
    padding: 4px 0;
    box-shadow: none !important;
}

.elv-chip-select-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-width: 540px;
    max-height: 260px;
    overflow-y: auto;
    background: #FFFFFF;
    border: 1px solid #E0DBF1;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    /* High z-index + outline isolation so the popover always
       wins against subsequent .ow_form table rows (which can
       have their own z-index/transform stacking contexts). */
    z-index: 5000;
}
/* Stamp the parent <td> / wrapper so any ancestor with
   `overflow: hidden` doesn't clip our absolute popover.
   `overflow: visible` plus `position: relative` ensures the
   popover is positioned relative to the chip shell while still
   escaping the row's clipping. */
.elv-chip-select {
    overflow: visible !important;
}
.elv-chip-select td.ow_value, td.ow_value:has(.elv-chip-select) {
    overflow: visible !important;
}

.elv-chip-suggest-row {
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.1s ease;
}
.elv-chip-suggest-row:hover,
.elv-chip-suggest-row:focus {
    background: #F2EDFF;
    color: #4C1D95;
    outline: none;
}

.elv-chip-suggest-empty {
    padding: 12px;
    color: #6B7280;
    font-size: 13px;
    text-align: center;
}

/* ───────────────── Birthday calendar picker ───────────────── */

.elv-birthday-source-hidden {
    display: none !important;
}
.elv-birthday-picker {
    width: 100%;
    max-width: 240px;
    padding: 10px 12px;
    border: 1px solid #E0DBF1;
    border-radius: 10px;
    background: #FFFFFF;
    font-size: 15px;
    color: #111827;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.elv-birthday-picker:focus {
    outline: none;
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

/* ───────────────── Height pill + scroll-wheel modal ───────────────── */

.elv-height-source-hidden {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.elv-height-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #E0DBF1;
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.elv-height-pill:hover {
    border-color: #7C3AED;
    background: #F2EDFF;
}
.elv-height-pill-caret {
    color: #7C3AED;
    font-size: 12px;
}

.elv-height-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: env(safe-area-inset-top, 16px) 16px env(safe-area-inset-bottom, 16px) 16px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
.elv-height-modal-card {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.32);
    overflow: hidden;
    box-sizing: border-box;
}
@media (max-width: 360px) {
    /* Phones narrower than 360px (older iPhone SE etc.) — stretch
       full width minus 12px gutter on each side so the card stops
       overflowing horizontally. */
    .elv-height-modal-card {
        max-width: calc(100vw - 24px);
    }
}
.elv-height-modal-title {
    padding: 16px 20px 8px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: #111827;
}

.elv-height-wheel-wrap {
    position: relative;
    height: 220px;
    margin: 0 12px;
}
.elv-height-wheel-cursor {
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 88px;
    height: 44px;
    border-top: 1px solid #E0DBF1;
    border-bottom: 1px solid #E0DBF1;
    background: #FAFAFD;
    z-index: 1;
}
.elv-height-wheel {
    position: relative;
    height: 220px;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    z-index: 2;
}
.elv-height-row {
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    color: #6B7280;
    scroll-snap-align: center;
    transition: color 0.12s ease, font-weight 0.12s ease;
    /* Desktop: look + feel like a clickable picker row, not a text
       block. Killing user-select also stops the I-beam cursor that
       was confusing users into thinking the wheel was a text input. */
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.elv-height-row:not(.elv-height-row-pad):hover { color: #4C1D95; }
.elv-height-wheel {
    cursor: ns-resize;
}
/* Thinner scrollbar on desktop so the wheel looks more like a picker
   and less like a generic scrolling list. WebKit/Blink only — Firefox
   uses scrollbar-width below. */
.elv-height-wheel::-webkit-scrollbar { width: 4px; }
.elv-height-wheel::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.35);
    border-radius: 999px;
}
.elv-height-wheel { scrollbar-width: thin; scrollbar-color: rgba(124, 58, 237, 0.35) transparent; }
.elv-height-row-pad {
    pointer-events: none;
}
.elv-height-row-active {
    color: #4C1D95;
    font-weight: 700;
    font-size: 18px;
}

.elv-height-modal-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px 16px;
}
.elv-height-modal-actions button {
    flex: 1 1 0;
    padding: 12px 16px;
    border-radius: 10px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.elv-height-modal-cancel {
    background: #F2F2F7;
    color: #4B5563;
}
.elv-height-modal-cancel:hover { background: #E5E5EC; }
.elv-height-modal-done {
    background: #7C3AED;
    color: #FFFFFF;
}
.elv-height-modal-done:hover { background: #6D28D9; }

body.elv-height-modal-open {
    overflow: hidden;
}

/* ───────────────── File input enlargement (Choose file button) ───────────────── */

.elv-file-input-large {
    font-size: 15px !important;
    padding: 6px 0;
}

.elv-file-input-large::file-selector-button,
.elv-file-input-large::-webkit-file-upload-button {
    padding: 12px 22px !important;
    margin-right: 14px !important;
    border-radius: 10px !important;
    border: 1px solid #7C3AED !important;
    background: #7C3AED !important;
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.15s ease;
}

.elv-file-input-large::file-selector-button:hover,
.elv-file-input-large::-webkit-file-upload-button:hover {
    background: #6D28D9 !important;
    border-color: #6D28D9 !important;
}

@media (max-width: 600px) {
    .elv-file-input-large::file-selector-button,
    .elv-file-input-large::-webkit-file-upload-button {
        padding: 14px 24px !important;
        font-size: 16px !important;
    }
}

/* ───────────────── Dropdown multi-select (ethnicity) ───────────────── */

.elv-dropdown-select {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin: 4px 0;
}

.elv-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid #E0DBF1;
    border-radius: 10px;
    color: #111827;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    text-align: left;
}
.elv-dropdown-trigger:hover { border-color: #C4B5FD; }
.elv-dropdown-select.elv-dropdown-open .elv-dropdown-trigger,
.elv-dropdown-trigger:focus {
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
    outline: none;
}
.elv-dropdown-placeholder { color: #9CA3AF; font-weight: 400; }
.elv-dropdown-caret { color: #7C3AED; font-size: 12px; margin-left: 8px; }

.elv-dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-width: 540px;
    max-height: 320px;
    overflow-y: auto;
    background: #FFFFFF;
    border: 1px solid #E0DBF1;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    /* Same high z-index strategy as the chip suggestions popover
       so the panel never gets clipped behind the next form row. */
    z-index: 5000;
    padding: 4px 0;
}

.elv-dropdown-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 14px;
    color: #111827;
    cursor: pointer;
    transition: background 0.1s ease;
    user-select: none;
}
.elv-dropdown-row:hover,
.elv-dropdown-row:focus { background: #F2EDFF; outline: none; }
.elv-dropdown-row[aria-selected="true"] { background: #F2EDFF; color: #4C1D95; font-weight: 500; }

.elv-dropdown-check {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #E0DBF1;
    border-radius: 4px;
    background: #FFFFFF;
    color: #7C3AED;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.elv-dropdown-row[aria-selected="true"] .elv-dropdown-check {
    border-color: #7C3AED;
    background: #7C3AED;
    color: #FFFFFF;
}
.elv-dropdown-row-label { flex: 1 1 auto; }


/* ───────────────── Google Places dropdown z-index ─────────────────
   Google injects the autocomplete suggestions popover with class
   `.pac-container` directly into <body>, with z-index:1000. SkaDate
   floatbox + nav bar sometimes sit above that, hiding the dropdown.
   Force it to win.
*/
.pac-container {
    z-index: 100000 !important;
}


/* ───────────────── Mobile auto-zoom prevention ─────────────────
   iOS Safari auto-zooms when an input/textarea/select has font-size
   < 16px. Setting all form inputs to 16px on mobile (where the user
   actually types) eliminates the unwanted zoom. We scope to mobile
   widths so desktop styling stays compact.
*/
@media (max-width: 900px) {
    body input[type="text"],
    body input[type="email"],
    body input[type="password"],
    body input[type="search"],
    body input[type="tel"],
    body input[type="url"],
    body input[type="number"],
    body input[type="date"],
    body input[type="datetime-local"],
    body textarea,
    body select {
        font-size: 16px !important;
    }
    /* Native date input padding bump so the calendar icon doesn't
       overlap the text on small phones. */
    body input[type="date"] {
        padding: 10px 12px !important;
    }
}


/* ───────────────── Top-nav "Sign up" button — single line on mobile ─────────────────
   The console "Sign up" button (BASE_CMP_ConsoleButton) wraps onto
   two lines because base.css line ~6589 forces every console-item
   link to a 22x22 fixed box at <=480px (intended for the icon
   buttons like Mailbox/Friends, but it's clobbering the text-button
   variant too). Restore width:auto for the button class and lock
   nowrap on the label.
*/
body .ow_console .ow_console_button.ow_console_item a.ow_console_item_link {
    width: auto !important;
    height: auto !important;
    white-space: nowrap !important;
    background: none !important;
    background-size: auto !important;
}
@media (max-width: 600px) {
    body .ow_console .ow_console_button.ow_console_item a.ow_console_item_link {
        font-size: 13px !important;
        font-weight: 500 !important;
        padding: 8px 14px !important;
        line-height: 1 !important;
        border-radius: 999px !important;
        background: #7C3AED !important;
        color: #FFFFFF !important;
    }
    body .ow_console .ow_console_button.ow_console_item a.ow_console_item_link:hover {
        background: #6D28D9 !important;
    }
}


/* ───────────────── Join + Edit submit button — full-width on mobile ─────────────────
   Defensive: on the smallest phones the join `<div class="ow_right">`
   wrapper around the Continue/Sign-Up submit can float off-screen
   if any sibling content forces overflow. Stretch the submit row
   to full width so the button is always reachable, and bump the
   font-size so iOS Safari doesn't auto-zoom into it.
*/
@media (max-width: 720px) {
    body.base_user_join .clearfix > .ow_right,
    body.base_edit .clearfix > .ow_right {
        float: none !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 12px !important;
    }
    body.base_user_join .clearfix > .ow_right span.ow_button,
    body.base_edit .clearfix > .ow_right span.ow_button {
        display: inline-block !important;
        width: 100% !important;
        max-width: 320px !important;
    }
    body.base_user_join .clearfix > .ow_right input[type="submit"],
    body.base_edit .clearfix > .ow_right input[type="submit"] {
        width: 100% !important;
        font-size: 16px !important;
        padding: 14px 18px !important;
        min-height: 48px !important;
        border-radius: 10px !important;
    }
}


/* ───────────────── FOUC prevention (form fade-in) ─────────────────
   On profile-edit and signup the form's underlying SkaDate controls
   render synchronously (3-dropdown date, native height select,
   multicheckbox lists for languages/ethnicity, plain location text
   input) and only get swapped to our enhanced widgets after JS runs.
   Without this CSS, users see ~150ms of "raw" SkaDate UI before the
   transformation. The form starts at opacity:0 and the orchestrator
   adds `elv-form-ready` on body after init() finishes. A 1500ms
   fallback timer in profile_widgets.js guarantees the form becomes
   visible even if a widget error prevents the normal ready signal. */
body.elv-widgets-active form[name="editForm"] table.ow_form,
body.elv-widgets-active form[name="joinForm"] table.ow_form {
    transition: opacity 0.18s ease-in-out;
}
body.elv-widgets-active:not(.elv-form-ready) form[name="editForm"] table.ow_form,
body.elv-widgets-active:not(.elv-form-ready) form[name="joinForm"] table.ow_form {
    opacity: 0;
}


/* ───────────────── Unified field styling (birthday + primary location) ─────────────────
   Match dimensions, border-radius, padding so the two fields look
   like siblings. Native `<input type=date>` needs extra right
   padding so the calendar-picker indicator doesn't get clipped flush
   against the right border. */
.elv-birthday-picker,
input.ow_googlelocation_location_input,
input[type="text"][name="googlemap_location"] {
    width: 100% !important;
    /* Mobile-first — fits any phone. Desktop cap added below. */
    max-width: 100% !important;
    height: 44px !important;
    padding: 10px 14px !important;
    border: 1px solid #E0DBF1 !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    font-size: 15px !important;
    color: #111827 !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
@media (min-width: 901px) {
    .elv-birthday-picker,
    input.ow_googlelocation_location_input,
    input[type="text"][name="googlemap_location"],
    .googlelocation_form_element_div {
        max-width: 540px !important;
    }
}
.elv-birthday-picker {
    /* Native date input renders its calendar icon on the right at
       ~24px wide; reserve room so it doesn't sit on the rounded
       right edge of the field. */
    padding-right: 36px !important;
}
@media (max-width: 900px) {
    /* iOS Safari + some Android browsers enforce an intrinsic
       min-width on `<input type=date>` based on the placeholder
       glyphs; that's what was making the birthday field overflow
       narrow phone viewports. Suppress the native picker icon
       (appearance:none) and clamp min-width to 0 so our 100% width
       actually wins. The calendar still opens on tap because the
       browser's date-input still owns the click — we just remove
       its visual icon, which lived in the right padding anyway. */
    .elv-birthday-picker {
        appearance: none !important;
        -webkit-appearance: none !important;
        padding-right: 14px !important;
        min-width: 0 !important;
    }
    .elv-birthday-picker::-webkit-calendar-picker-indicator,
    .elv-birthday-picker::-webkit-date-and-time-value {
        opacity: 0.6;
    }
}

.elv-birthday-picker:focus,
input.ow_googlelocation_location_input:focus,
input[type="text"][name="googlemap_location"]:focus {
    outline: none !important;
    border-color: #7C3AED !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
}


/* ───────────────── Pin / marker icon hidden site-wide ─────────────────
   Used to render in 3 places: input field icon group, profile-view
   address suffix (`<span class="googlemap_pin ic_googlemap_pin"/>`),
   and recently-viewed-me thumbnail strip. All three look low-fidelity
   and convey nothing the surrounding text doesn't already. */
.ic_googlemap_pin,
span.ic_googlemap_pin,
.googlemap_pin,
.googlelocation_address_icon { display: none !important; }


/* ───────────────── Use-current-location row ─────────────────
   We replace the legacy google_map_location icon group entirely
   with our own brand-styled row injected by profile_widgets.js
   (decorateCurrentLocationButton).

   - Legacy `<div class="googlelocation_address_icon_div">` (and its
     pin / delete-X / current-location children) are completely
     hidden — they were tiny absolute-positioned icons with the
     wrong vibe.
   - Our injected `.elv-current-loc-row` sits on its own line below
     the input, with a brand-color GPS reticle icon + label. Click
     anywhere on the row triggers the legacy's `_insert_current`
     handler (still bound, just invisible). */
.googlelocation_form_element_div {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    overflow: visible !important;
}
.googlelocation_form_element_div .ow_googlelocation_location_input {
    /* Cancel the legacy `ow_left` float so we control the layout. */
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
/* Kill the entire legacy icon group — every child gone. We keep
   it in the DOM (the plugin's JS reads its child IDs) but remove
   every pixel it contributes visually. */
.googlelocation_form_element_div .googlelocation_address_icon_div {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    top: 0 !important;
    right: 0 !important;
}

/* Our own brand-styled current-location row. Lives directly under
   the input, full width, plays nice with our other field styling. */
.elv-current-loc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 4px 0;
    cursor: pointer;
    user-select: none;
    color: #7C3AED;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}
.elv-current-loc-row:hover .elv-current-loc-label {
    text-decoration: underline;
}
.elv-current-loc-row:focus {
    outline: 2px solid rgba(124, 58, 237, 0.35);
    outline-offset: 2px;
    border-radius: 6px;
}
.elv-current-loc-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    /* GPS reticle: outer circle + 4 cardinal spokes pointing in,
       inner filled dot. Inline SVG keeps it crisp at any DPR + the
       brand color is easy to swap. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='1.6' stroke-linecap='round'><line x1='12' y1='2' x2='12' y2='5'/><line x1='12' y1='19' x2='12' y2='22'/><line x1='2' y1='12' x2='5' y2='12'/><line x1='19' y1='12' x2='22' y2='12'/><circle cx='12' cy='12' r='6.5'/><circle cx='12' cy='12' r='2.4' fill='%237C3AED' stroke='none'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.1s ease;
}
.elv-current-loc-row:active .elv-current-loc-icon {
    transform: scale(0.92);
}


/* ───────────────── Inline form error pill (Places + age + others) ─────────────────
   We surface client-side validation errors via a small red pill
   that sits below the offending field. CSS-driven so each widget
   can drop in its own message. */
.elv-form-error {
    display: block;
    margin: 6px 0 0;
    padding: 6px 12px;
    background: #FEF2F2;
    color: #B91C1C;
    border: 1px solid #FCA5A5;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
}


/* ───────────────── Hide description column on join + complete-profile ─────────────────
   The original SkaDate question form has 3 columns (label · input ·
   description). On signup the descriptions added clutter without
   helping users — most are duplicated by the input's own placeholder
   or label. Hide the column entirely on join + the
   complete-profile-fill-required-questions page; the desktop
   profile-edit table keeps its description column intact. */
/* Description column hidden anywhere our widget bundle is active —
   covers join, profile-edit (desktop + mobile route), and the
   /fill/profile_questions complete-profile page in one rule. */
body.elv-widgets-active table.ow_form td.ow_desc,
body.elv-widgets-active table.ow_form_table td.ow_desc,
body.elv-widgets-active form[name="requiredQuestionsForm"] td.ow_desc,
form[name="requiredQuestionsForm"] td.ow_desc {
    display: none !important;
}
/* When the desc cell is gone, let the value cell stretch into the
   freed space so the input doesn't look orphaned in the middle of
   the row. */
body.base_user_join table.ow_form td.ow_value,
body.complete_profile table.ow_form td.ow_value,
body.base_edit table.ow_form td.ow_value,
body.elevate_edit_page table.ow_form td.ow_value {
    width: auto !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
   WIDGET HORIZONTAL SCROLL — recently viewed me, liked me, hotlist, bookmarks
   ═══════════════════════════════════════════════════════════════════════════ */

.elv-hscroll-widget {
    position: relative;
    /* Contain the arrows without clipping the scroll track */
    padding: 0 20px;
    box-sizing: border-box;
}

.elv-hscroll-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
    padding: 4px 0 6px;
    align-items: flex-start;
}
.elv-hscroll-track::-webkit-scrollbar { display: none; }

/* Each avatar item stays a fixed width, no shrink/wrap */
.elv-hscroll-track > .ow_guest_user,
.elv-hscroll-track > .ow_avatar {
    flex: 0 0 auto !important;
    min-width: 70px;
}
/* Make bookmarks photos match the recently-viewed/liked-me style:
   rounded-square thumbnails (same size, same border-radius).
   The avatar_item decorator already handles .ow_avatar img via base.css;
   the bookmarks template uses plain <img> tags so we style those here. */
.elv-hscroll-track .ow_guest_user > a > img,
.elv-hscroll-track .ow_guest_user > img {
    width:  70px !important;
    height: 70px !important;
    object-fit: cover !important;
    object-position: center top;
    display: block;
    border-radius: 12px !important;
}

/* Mobile: hide items 16+ (show max 15) */
@media (max-width: 900px) {
    .elv-hscroll-track > :nth-child(n+16) { display: none !important; }
}

/* Arrow buttons — hidden on mobile, shown on desktop when scrollable */
.elv-hscroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #E0DBF1;
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    font-size: 16px;
    color: #7C3AED;
    transition: background 0.12s ease, border-color 0.12s ease;
    padding: 0;
    line-height: 1;
}
.elv-hscroll-btn:hover  { background: #F5F3FF; border-color: #C4B5FD; }
.elv-hscroll-btn-prev   { left: -4px; }
.elv-hscroll-btn-next   { right: -4px; }
@media (max-width: 900px) { .elv-hscroll-btn { display: none !important; } }

/* ── Single-element card used for My Matches / My Likes modules ──
   Avoids the two-part ow_box_cap_empty + ow_box_empty seam that creates
   a visible inner border line. One element, one border, no inner box. */
.elv-module-card {
    background: var(--bg, #ffffff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: var(--r-md, 12px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    padding: 16px;
    box-sizing: border-box;
}
.elv-module-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text, #111827);
    margin: 0 0 0;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border-subtle, #F3F4F6);
}
/* Tab menu inside the card — matches .ow_box_menu inline style */
.elv-module-card .ow_menu.ow_box_menu {
    margin: 0 0 12px;
    padding: 8px 0 0;
}

/* Widget footer link (My Matches "View all" link) */
.elv-widget-footer {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #F3F4F6;
    text-align: right;
}
.elv-widget-view-page {
    font-size: 12px;
    font-weight: 600;
    color: #7C3AED;
    text-decoration: none;
}
.elv-widget-view-page:hover { text-decoration: underline; color: #4C1D95; }

/* My Matches / My Likes compact module cards — full content width, matching
   the dashboard widget boxes on this installation (right section is 100%). */
.elevate-matches-module .elv-module-card,
.elevate-my-likes-module .elv-module-card {
    max-width: none;
}

/* My Likes section on the matches page */
.elevate-my-likes-section { margin-top: 32px; }
.elevate-section-heading {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px;
}
.elevate-my-likes-empty {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.5;
}
.elevate-my-likes-empty a { color: #7C3AED; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 4 — Profile completion card
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────── Card shell ───────────────── */

.elv-pc-card {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.05);
    padding: 14px 18px 12px;
    margin: 0 0 18px;
    box-sizing: border-box;
}

/* Optional card heading (shown on dashboard) */
.elv-pc-card-title {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ───────────────── Header row ───────────────── */

.elv-pc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.elv-pc-percent-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex: 0 0 auto;
}

.elv-pc-percent {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: #4C1D95;
    letter-spacing: -0.5px;
}

.elv-pc-label {
    font-size: 12px;
    font-weight: 500;
    color: #6D28D9;
}

.elv-pc-subtitle {
    flex: 1 1 180px;
    margin: 0;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.4;
}

/* ───────────────── Progress bar ───────────────── */

.elv-pc-bar-track {
    width: 100%;
    height: 8px;
    background: #F2EDFF;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}

.elv-pc-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #7C3AED, #4C1D95);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 3px;
}

/* ───────────────── 100% complete state ───────────────── */

.elv-pc-complete-msg {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.elv-pc-complete-pct {
    font-size: 28px;
    font-weight: 700;
    color: #4C1D95;
    flex: 0 0 auto;
}

.elv-pc-complete-text {
    flex: 1 1 200px;
    margin: 0;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.45;
}

/* ───────────────── Missing items list ───────────────── */

.elv-pc-missing-title {
    margin: 0 0 7px;
    font-size: 11px;
    font-weight: 700;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.elv-pc-missing-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.elv-pc-missing-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #F9FAFB;
}
.elv-pc-missing-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.elv-pc-missing-circle {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #D8B4FE;
    background: transparent;
    display: inline-block;
}

.elv-pc-missing-text {
    flex: 1 1 auto;
    font-size: 13px;
    color: #374151;
    line-height: 1.3;
}

/* ───────────────── Finish editing link ───────────────── */

.elv-pc-finish {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #F3F4F6;
    text-align: right;
}

.elv-pc-finish-link {
    font-size: 13px;
    font-weight: 600;
    color: #7C3AED;
    text-decoration: none;
    transition: color 0.12s ease;
}
.elv-pc-finish-link:hover {
    color: #4C1D95;
    text-decoration: none;
}

/* ───────────────── Responsive ───────────────── */

@media (max-width: 600px) {
    .elv-pc-card {
        padding: 12px 14px 10px;
        margin-bottom: 14px;
    }
    .elv-pc-percent { font-size: 28px; }

    /*
     * Switch to plain block layout on mobile so flex-basis stops
     * being interpreted as HEIGHT.  The subtitle has flex:1 1 180px;
     * that is fine in the desktop row layout (180px = min-width) but
     * in a column flex container flex-basis becomes a min-height of
     * 180px, creating a ~162px blank gap below the one line of text.
     * display:block eliminates all flex-sizing and lets the children
     * stack at their natural inline/block sizes.
     */
    .elv-pc-card .elv-pc-header {
        display: block !important;
        margin-bottom: 8px !important;
    }
    .elv-pc-card .elv-pc-percent-wrap {
        display: block;
        margin-bottom: 2px;
    }
    .elv-pc-card .elv-pc-subtitle {
        display: block;
        margin: 0 !important;
        padding: 0 !important;
    }
    .elv-pc-card .elv-pc-bar-track {
        margin-bottom: 8px;
    }
}

/* ───────────────── Edit-page width — match form boxes ─────────────────
   base.css already gives every .ow_content > .ow_superwide.ow_automargin
   a max-width of 880px / width 100% on desktop via body.base_edit etc.
   Add a parallel rule for .elv-pc-card so it gets the same treatment
   without needing to be wrapped in the ow_superwide classes. */
@media (min-width: 901px) {
    body.base_edit .ow_content > .elv-pc-card,
    body.elevate_edit_page .ow_content > .elv-pc-card,
    body.elv-widgets-active .ow_content > .elv-pc-card {
        max-width: 880px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }
}

/* ───────────────── Dashboard placement ─────────────────
   No max-width cap: let the card fill the same container width as
   other dashboard modules (widget boxes, hotlist, etc.). The page
   container already constrains the overall width. */
body.base_user_dashboard .elv-pc-card {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* ───────────────── Delete Profile button — hidden on edit page ─────────────────
   The .unregister_profile_button (and its sibling Delete confirmation UI)
   should never be visible on /profile/edit in the ElevateVN app — the feature
   exists via the Account Settings page instead. Three selectors cover the three
   paths the body class can arrive via:
     1. base_edit   — set by OW_Application from BASE_CTRL_Edit::setDocumentKey
     2. elevate_edit_page — set by our injectMobileProfileEditAssets handler
     3. elv-widgets-active — set by our injectProfileWidgets handler (runs on
        both desktop + mobile edit routes, so it's the broadest backstop)
   The JS removal in general.html still fires when the classes are present,
   but this CSS rule handles the case where JS hasn't executed yet or was
   blocked. Using !important because base.css injects inline display:block. */
body.base_edit .unregister_profile_button,
body.elevate_edit_page .unregister_profile_button,
body.elv-widgets-active .unregister_profile_button {
    display: none !important;
}
/* CDN cache-bust touch 2026-05-25T02:42:00Z */