/* ============================================================
   ELEVATE THEME — base.css
   Sections: [1]Variables [2]Reset [3]Base [4]Layout [5]Nav
             [6]Console [7]Footer [8]Boxes [9]ContentMenu
             [10]Buttons [11]Forms [12]Listings [13]Pagination
             [14]Notifications [15]ContextActions [16]Counters
             [17]Tooltips [18]Dashboard [19]Utilities [20]Responsive
   ============================================================

   ──────────────────────────────────────────────────────────────
   RESPONSIVE-MEDIA MAP (May 2026 audit, ~6,135-line file)
   ──────────────────────────────────────────────────────────────
   This file currently contains ~39 separate @media blocks across
   8 distinct breakpoint conditions. They evolved by accretion as
   new pages and components were added, not by design. The blocks
   are intentionally NOT consolidated yet — see "Why not merge"
   below.

   By condition (counts as of this commit):
     (max-width: 900px)   — 25 blocks
     (max-width: 720px)   —  5 blocks
     (max-width: 600px)   —  4 blocks
     (max-width: 480px)   —  1 block
     (min-width: 601px)   —  1 block
     (min-width: 601px) and (max-width: 899px)  — 1 block
     (min-width: 900px)   —  1 block
     (min-width: 901px)   —  4 blocks

   WHY @layer WAS NOT USED
   -----------------------
   `@layer { … }` would group these elegantly into a predictable
   cascade. But browsers that don't recognise the at-rule (iOS
   pre-15.4 and older Android Chrome — non-trivial in Vietnam
   traffic) skip the ENTIRE block including its contents. Wrapping
   base.css in `@layer base { … }` would show those users an
   unstyled site. Hard "no" until cascade-layer support is ≥99%.

   WHY THE DUPLICATES AREN'T MERGED YET
   ------------------------------------
   Mechanical merge of duplicate @media blocks is unsafe in this
   file because some EARLIER rules win the cascade against LATER
   non-media rules at small viewports (their !important and
   specificity is deliberately balanced against intervening
   selectors). Moving every block to one location risks breaking
   those balances silently. A safe cleanup requires per-selector
   conflict analysis between adjacent @media occurrences and the
   non-media rules between them — not yet done.

   FUTURE CLEANUP PLAN (each step independently revertable):
     1. Move all @media blocks INSIDE the FINAL OVERRIDE LAYER v5
        (lines ~5573+) into a single consolidated block per
        breakpoint, at the END of that layer. v5 already wins by
        cascade position so the merge is safe-by-construction.
     2. For the regular layer (lines 1-~5286), merge ONLY pairs
        where a static check proves no intervening rule references
        the same selector. Defer the rest.
     3. Once all selectors are in one place per breakpoint,
        eliminate the now-obvious literal duplicates.

   IF A MERGE GOES WRONG
   ---------------------
   Revert is a single `git revert <hash>` away. Each cleanup
   commit is intentionally kept to a single breakpoint condition
   so revert granularity matches the breakpoint that broke.
   ──────────────────────────────────────────────────────────── */

/* ============================================================
   [1] CSS VARIABLES — single source of truth for all design tokens
   ============================================================ */
:root {
    /* Brand */
    --brand:          #7C3AED;
    --brand-dark:     #5B21B6;
    --brand-light:    #EDE9FE;
    --brand-xlight:   #F5F3FF;
    --accent:         #F43F5E;
    --accent-hover:   #E11D48;

    /* Surfaces */
    --bg:             #FFFFFF;
    --bg-subtle:      #F9F7FF;
    --surface:        #FFFFFF;
    --border:         #E5E7EB;
    --border-subtle:  #F3F4F6;

    /* Text */
    --text:           #111827;
    --text-muted:     #6B7280;
    --text-light:     #9CA3AF;
    --text-on-brand:  #FFFFFF;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05);
    --shadow-lg:  0 10px 30px rgba(0,0,0,0.11), 0 4px 12px rgba(0,0,0,0.07);
    --shadow-nav: 0 1px 0 #E5E7EB;

    /* Radius */
    --r-sm:  6px;
    --r-md:  10px;
    --r-lg:  14px;
    --r-xl:  20px;

    /* Nav */
    --nav-h:  64px;

    /* Transition */
    --t: 0.18s ease;

    /* Font */
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================
   [2] RESET
   ============================================================ */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code, del, dfn, em, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0; padding: 0; border: 0;
    font-size: 100%; vertical-align: baseline; background: transparent;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* ============================================================
   [3] BASE ELEMENTS
   ============================================================ */
body {
    background-color: #F4F4F8; /** OW_Control type:color, section:1. General Settings, key:bodyColor, label:1. Page background color **/
}
body, html {
    font-family: var(--font);
    color: var(--text); /** OW_Control type:color, section:2. Colors, key:textColor, label:1. Text **/
    font-size: 14px;
    line-height: 1.5;
    height: 100%;
    /* no min-width — fully responsive */
}
.ow_bg_color { background-color: #F4F4F8; }
a {
    color: var(--brand); /** OW_Control type:color, key:linkColor, section:2. Colors, label:3. Links **/
    text-decoration: none;
    transition: color var(--t);
}
a:hover { color: var(--brand-dark); text-decoration: none; }
a:hover img { text-decoration: none; }

b, strong { font-weight: 600; }
em, i { font-style: italic; }
p { text-indent: 0; margin-bottom: 8px; }

h1, h2, h3, h4, h5 {
    color: var(--text); /** OW_Control type: color, key: titleColor, section: 2. Colors, label:2. Title **/
    margin: 0; padding: 0; font-weight: 600;
    font-family: var(--font);
    line-height: 1.3;
}
h1 { font-size: 22px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; margin-bottom: 8px; }
h5 { font-size: 13px; }

img { border: 0; vertical-align: middle; max-width: 100%; }
table { border: none; }
th, td { padding: 6px 8px; vertical-align: top; }
th {
    border-bottom: 1px solid var(--border);
    padding: 10px 8px;
    vertical-align: middle;
    font-weight: 600;
    font-size: 14px;
    background-color: var(--bg-subtle);
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
}
hr {
    background-color: var(--border);
    border: none; height: 1px;
    margin: 8px 5px 16px;
}

/* ============================================================
   [4] PAGE LAYOUT
   ============================================================ */
/* Modern clearfix — no IE inline-block hack that breaks HTML5 layout */
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}
.clearfix { zoom: 1; }

.ow_border { border: 1px solid var(--border); }

body > .ow_page_wrap {
    min-height: 100%;
    padding-top: var(--nav-h);
}
.ow_page_padding { padding-bottom: 80px; }

/* ow_page_container is the outer centering wrapper — holds the 16px side padding */
.ow_page_container {
    max-width: 1060px;
    margin: 0 auto 16px;
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
}
/* ow_canvas sits inside ow_page_container — no extra padding to avoid double-indent */
.ow_canvas {
    margin: 0 auto;
    max-width: 1060px;
    width: 100%;
    word-wrap: break-word;
    box-sizing: border-box;
}
.ow_page {
    margin: 0;
    padding: 0;
}
.ow_page_container .ow_page {
    padding: 24px 0 16px;
    min-height: 400px;
}
.ow_content { float: none; width: 100%; }

/* Columns */
.ow_column    { width: 49%; overflow: hidden; }
.ow_narrow    { width: 38%; overflow: hidden; }
.ow_wide      { width: 60%; overflow: hidden; }
.ow_superwide { width: 75%; overflow: hidden; }
.ow_supernarrow { width: 23%; overflow: hidden; }
.ow_item_set2 { width: 49%; }
.ow_item_set3 { width: 33%; }
.ow_item_set4 { width: 25%; }
.ow_item_set5 { width: 20%; }

/* Header image strip (optional) */
.ow_header {
    background-color: var(--bg);
    border-bottom: 1px solid var(--border);
}
.ow_header_pic {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 220px;
}
.ow_header_pic img { height: 0; }
.ow_header_img { width: 100%; }

/* ============================================================
   [5] STICKY NAV & LOGO
   ============================================================ */
.ow_site_panel {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: var(--nav-h);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    z-index: 99;
    box-shadow: 0 1px 0 var(--border);
    transition: box-shadow var(--t);
}
.ow_site_panel.ow_panel_scrolled {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/*
   ElevateVN wordmark logo. Drop-in replacement for the legacy logo.png:
   lowercase "elevate" rendered in a thinner / more elegant weight so it
   reads as a refined brand mark rather than a blocky title. Color set
   to near-black so it integrates cleanly with the white nav bar.
*/
.ow_logo {
    background-image: none !important;
    display: inline-flex;
    align-items: center;
    height: var(--nav-h);
    margin-left: 20px;
    margin-right: 48px;   /* Breathing room between the wordmark and the nav menu items. */
    padding: 0;
    text-decoration: none;
    width: auto;
}
.ow_logo .elevate-wordmark {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 500;        /* elegant medium weight — not blocky */
    line-height: 1;
    letter-spacing: -0.015em;
    color: #1a1a2e;
    text-transform: lowercase;
    display: inline-block;
    transition: color .15s ease;
}
.ow_logo:hover .elevate-wordmark { color: #5B21B6; }
a.ow_logo:hover { text-decoration: none; }

/* Same elegant treatment for the landing page nav wordmark. */
.elv-nav-logo-text {
    font-weight: 500 !important;
    letter-spacing: -0.015em !important;
    font-size: 22px !important;
}

/* Hamburger button — clean 3-line icon → X transition */
.ow_nav_btn {
    position: relative;
    float: left;
    /* Fixed 44px width so it sits flush at left with no logo gap */
    width: 44px;
    height: var(--nav-h);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Middle bar + top/bottom via box-shadow */
.ow_nav_btn::before {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    box-shadow: 0 -7px 0 var(--text), 0 7px 0 var(--text);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
/* Second diagonal for X */
.ow_nav_btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: transparent;
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: background 0.22s ease, transform 0.22s ease;
}
/* Open state → clean X */
.ow_menu_active .ow_nav_btn::before {
    transform: rotate(45deg);
    box-shadow: none;
}
.ow_menu_active .ow_nav_btn::after {
    background: var(--text);
    transform: translate(-50%, -50%) rotate(-45deg);
}

body.ow_menu_active { overflow: hidden; }

/* Full-page mobile drawer */
.ow_menu_fullpage {
    position: fixed;
    z-index: 98;
    top: var(--nav-h);
    left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    overflow-y: auto;
}
.ow_menu_active .ow_menu_fullpage { display: block; }
.ow_menu_active .ow_site_panel .ow_logo,
.ow_menu_active .ow_site_panel .ow_menu_wrap { display: none; }

.ow_menu_fullpage_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}
.ow_menu_fullpage_wrap ul.ow_main_menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 32px 0;
    /* CRITICAL: reset the desktop height/overflow that clips this element to 64px */
    height: auto;
    overflow: visible;
    min-height: 0;
}
.ow_menu_fullpage_wrap ul.ow_main_menu li { width: 100%; display: block; text-align: center; }
.ow_menu_fullpage_wrap .ow_main_menu li a {
    font-size: 28px;
    font-weight: 300;
    line-height: 60px;
    color: var(--text);
    display: block;
    letter-spacing: -0.01em;
}
.ow_menu_fullpage_wrap .ow_main_menu li a:hover,
.ow_menu_fullpage_wrap .ow_main_menu li.active a {
    color: var(--brand);
    text-decoration: none;
}

/* Main menu (desktop) */
.ow_menu_wrap {
    display: table;
    position: relative;
    float: left;
    padding-left: 8px;
}
.ow_main_menu {
    height: var(--nav-h);
    overflow: hidden;
    display: flex;
    align-items: center;
}
.ow_main_menu li { display: inline-block; }
.ow_main_menu li a {
    color: var(--text-muted); /** OW_Control type:color, key:menuColor, section:2. Colors, label:4. Menu text color **/
    display: inline-flex;
    align-items: center;
    height: var(--nav-h);
    padding: 0 14px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.01em;
    border-bottom: 3px solid transparent;
    transition: color var(--t), border-color var(--t);
    box-sizing: border-box;
}
.ow_main_menu li:first-child a { padding-left: 4px; }
.ow_main_menu li.active a {
    color: var(--brand);
    border-bottom-color: var(--brand);
}
.ow_main_menu li a:hover {
    color: var(--brand);
    text-decoration: none;
}
.ow_main_menu li a span { display: inline; }

/* Overflow "more" menu */
.ow_responsive_menu { padding-right: 60px; }
.ow_menu_more_wrap { display: none; position: absolute; right: 0; top: 0; }
.ow_menu_more {
    position: relative; display: block;
    background: var(--bg);
    border-left: 1px solid var(--border);
    width: 56px; height: var(--nav-h);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.ow_menu_more::after {
    content: '···';
    font-size: 20px;
    color: var(--text-muted);
    letter-spacing: 0;
    line-height: 1;
}
.ow_menu_more_cont {
    position: absolute; top: 0; right: -1px;
    padding: 20px 0 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: var(--shadow-md);
    display: none;
    z-index: 2;
    animation: fadeIn 0.15s ease both;
}
.ow_menu_more:hover .ow_menu_more_cont { display: block; }
.ow_menu_more_list a {
    display: block;
    padding: 6px 20px 12px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--text-muted);
}
.ow_menu_more_list a:hover { color: var(--brand); text-decoration: none; }
.ow_main_menu_more_active .ow_menu_more_wrap { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   [6] CONSOLE (notifications / messages bar)
   ============================================================ */
.ow_console_right { float: right; }
.ow_console_body  {
    box-sizing: border-box;
    padding: 0 16px 0 0;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    gap: 4px;
}
.ow_console_item {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: background var(--t);
}
.ow_console_item:hover { background: var(--bg-subtle); }
.ow_console_item a { display: inline-flex; align-items: center; }
.ow_console_item a:hover { text-decoration: none; }
.ow_console_block { display: inline-flex; align-items: center; vertical-align: top; }
.ow_console_more  { display: none; }

/* Console icon links */
.ow_console_item a.ow_console_item_link {
    font-size: 0;
    width: 20px; height: 20px;
    display: inline-block;
    background: url(images/ic_User_console.svg) 0 0 no-repeat;
}
.ow_console_button.ow_console_item a.ow_console_item_link {
    pointer-events: auto; width: auto; height: auto;
    background: none; font-size: 13px; font-weight: 500;
}
.ow_invitation_list.ow_console_item a.ow_console_item_link   { background-image: url(images/ic_EnvelopeOpen.svg); }
.ow_friend_request_list.ow_console_item a.ow_console_item_link { background-image: url(images/ic_Users_console.svg); }
.ow_mailbox_items_list.ow_console_item a.ow_console_item_link  { background-image: url(images/ic_Envelope.svg); }
.ow_notification_list.ow_console_item a.ow_console_item_link   { background-image: url(images/ic_Notif.svg); }
body .ow_console_item:hover a.ow_console_item_link,
body .ow_console_dropdown_pressed.ow_console_item a.ow_console_item_link { background-position: 0 -20px; }

/* Console sign-in labels */
.ow_signin_label {
    display: inline-block; height: 18px;
    margin: 0; vertical-align: middle;
    color: var(--text-muted); font-size: 14px;
    font-weight: 500;
}
.ow_signin_label:hover { color: var(--brand); }
.ow_signin_delimiter  { border-right: 1px solid var(--border); padding: 0 6px 0 0; }

/* Console tooltip dropdown */
.ow_console .ow_tooltip_top_right.ow_tooltip { top: calc(var(--nav-h) - 6px) !important; right: 0; padding-top: 2px; }
.ow_console .ow_tooltip .ow_tooltip_body { max-width: 350px; padding: 0; }
.console_tooltip { z-index: 100; }

/* Console counter badge */
.ow_console span.ow_count_wrap { position: absolute; top: 2px; right: 0; }
.ow_console span.ow_count_bg   { border-radius: 8px; }
.ow_console span.ow_count      { position: relative; top: 0; }
.ow_console .ow_tooltip_body span.ow_count_wrap { position: static; margin-top: 2px; }

/* Console list wrapper */
.ow_console_list_wrapper {
    width: 340px; overflow-y: auto;
    word-wrap: break-word; min-height: 60px; padding: 6px;
}
.ow_console_list li {
    padding: 6px; height: auto; overflow: hidden;
    margin-bottom: 3px; border: 1px solid transparent;
    border-radius: var(--r-sm);
}
.ow_console_list li.ow_console_new_message { background: var(--brand-xlight); border-color: var(--brand-light); }
.ow_console_list li:hover { border-color: var(--border); background: var(--bg-subtle); }

/* Console avatar */
.ow_console .ow_avatar { float: left; margin-right: -40px; height: 32px; width: 32px; padding: 4px; }
.ow_console .ow_avatar img { height: 32px; width: 32px; border-radius: 50%; }

/* Console view-all button */
.ow_console_view_all_btn {
    display: block; line-height: 38px; text-align: center;
    background: var(--bg); text-transform: uppercase;
    height: 40px; font-size: 12px; font-weight: 600;
    letter-spacing: 0.04em; color: var(--text-muted);
    border-top: 1px solid var(--border);
}
.ow_console_view_all_btn:hover { color: var(--text-on-brand); background: var(--brand); }

/* Console dropdown (account menu) */
ul.ow_console_dropdown { min-width: 120px; padding: 4px; }
ul.ow_console_dropdown .ow_console_dropdown_cont a {
    padding: 6px 12px; border: 1px solid transparent;
    display: block; border-radius: var(--r-sm);
    font-size: 13px; color: var(--text-muted);
    font-weight: 500;
}
ul.ow_console_dropdown .ow_console_dropdown_cont a:hover {
    background: var(--bg-subtle); color: var(--brand); text-decoration: none;
}

/* Console message/notification content */
.ow_console_ntf_cont, .ow_console_invt_cont { display: block; margin: 0 57px 0 44px; }
.ow_console_ntf_txt, .ow_console_invt_txt   { min-height: 19px; padding: 0 0 3px; display: block; }
.ow_console_invt_txt  { width: 211px; word-wrap: break-word; }
.ow_console_invt_img  { float: right; margin-left: -54px; width: 54px; height: 54px; text-align: right; }
.ow_console_invt_img img { max-height: 100%; max-width: 100%; border-radius: var(--r-sm); }
.ow_console_divider   { height: 1px; background: var(--border); margin: 4px 0; }
.ow_console_mailbox_txt   { font-size: 13px; }
.ow_console_mailbox_title { padding-right: 52px; font-weight: 600; }

/* Console messages buttons */
.ow_console_messages_viewall, .ow_console_messages_send { width: 50%; float: left; box-sizing: border-box; }
.ow_console_messages_btns .ow_console_messages_viewall a,
.ow_console_messages_btns .ow_console_messages_send a,
.ow_console_messages_btn .ow_console_messages_viewall a {
    display: inline-block; width: 100%; line-height: 38px; text-align: center;
    background: var(--bg); color: var(--text-muted); text-transform: uppercase;
    font-size: 12px; font-weight: 600; box-sizing: border-box;
}
.ow_console_messages_btns .ow_console_messages_viewall a:hover,
.ow_console_messages_btns .ow_console_messages_send a:hover,
.ow_console_messages_btn .ow_console_messages_viewall a:hover {
    color: var(--text-on-brand); background: var(--brand);
}
.ow_console_messages_btn .ow_console_messages_viewall  { width: 100%; }
.ow_console_messages_btn .ow_console_messages_send     { display: none; }

/* ============================================================
   [7] FOOTER
   ============================================================ */
.ow_footer {
    background: #ECEDF2; /** OW_Control type:color, section:1. General Settings, key:footerColor, label:4. Footer background color **/
    border-top: 1px solid var(--border);
    clear: both;
    min-height: 72px;
    position: relative;
    margin-top: -80px;
    padding: 1px 0;
}
.ow_footer_inner {
    max-width: 1060px;
    margin: 0 auto;
    padding: 20px 20px;
    box-sizing: border-box;
}
.ow_footer .ow_canvas { max-width: 1060px; }
.ow_footer .ow_page   { padding: 0 4px; background: none; }
.ow_footer_nav  { float: left; }

/*
   ElevateVN footer-nav: explicit Terms / | / Privacy markup in general.html.
   Equal 12px breathing room on both sides of every link, including
   around the separator span, so the pipe is perfectly centered between
   "Terms of Use" and "Privacy Policy" on every page.
*/
.elevate-footer-nav {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 4px 0;
}
.elevate-footer-nav a {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    transition: color .15s ease;
}
.elevate-footer-nav a:first-child { padding-left: 0; }
.elevate-footer-nav a:last-child  { padding-right: 0; }
.elevate-footer-nav a:hover { color: var(--brand); text-decoration: none; }
.elevate-footer-nav .elevate-footer-sep {
    color: rgba(0,0,0,0.20);
    user-select: none;
    pointer-events: none;
}

/* Legacy SkaDate bottom_menu (still emitted on some pages where we
   haven't switched to the explicit markup yet). */
.ow_footer_menu {
    padding: 4px 0;
    text-transform: uppercase;
}
.ow_footer_menu a {
    display: inline-block;
    padding: 0 12px 0 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-light);
    letter-spacing: 0.04em;
}
.ow_footer_menu a:first-child { padding-left: 0; }
.ow_footer_menu a:hover { color: var(--brand); text-decoration: none; }
.ow_copyright {
    float: left;
    padding: 4px 0 0 10px;
    font-size: 12px;
    color: var(--text-light);
}

/* ============================================================
   [8] BOXES / CARDS
   ============================================================ */
.ow_box_cap_empty {
    background: var(--bg);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--r-md) var(--r-md) 0 0;
    padding: 14px 16px 0;
    margin-bottom: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.ow_box_cap {
    background: var(--bg);
    border: 1px solid var(--border);
    border-bottom: none;
    padding: 14px 16px 0;
    border-radius: var(--r-md) var(--r-md) 0 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.ow_box_cap .ow_box_cap_body,
.ow_box_cap_empty .ow_box_cap_body { min-height: 32px; }

.ow_box_cap h3,
.ow_box_cap_empty h3 {
    padding: 6px 0;
    text-transform: none;
    height: auto;
    line-height: 1.4;
    overflow: hidden;
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
}
.ow_box_cap h3 { padding-top: 0; }
html body .ow_box_cap .ow_box_cap_body h3,
html body .ow_box_cap_empty .ow_box_cap_body h3 { background-image: none; }

.ow_box {
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-top: none;
    margin-bottom: 16px;
    padding: 16px;
    position: relative;
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ow_box.ow_no_cap {
    border-top: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ow_box_empty {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--r-md) var(--r-md);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
/* Box without a cap header gets full radius and top border */
.ow_box_empty.ow_no_cap,
.ow_box_empty:not(.ow_stdmargin + .ow_box_empty):first-child {
    border-top: 1px solid var(--border);
    border-radius: var(--r-md);
}
.ow_box_empty .ow_box_toolbar_cont { border-bottom: 2px solid var(--border-subtle); }

.ow_box .bottom_toolbar, .ow_box_mod .bottom_toolbar {
    margin-top: 10px;
    font-size: 11px;
    padding: 0 5px;
    text-align: right;
}
.ow_box_toolbar {
    margin-top: 12px;
    float: right;
    white-space: nowrap;
}
.ow_box_toolbar span { padding: 0 2px 0 0; }
.ow_box_toolbar span.ow_nowrap a {
    display: inline-block;
    border: 1px solid transparent;
    padding: 0 6px;
    line-height: 22px;
    border-radius: var(--r-sm);
}
.ow_box_toolbar span.ow_nowrap a:hover { color: var(--brand); text-decoration: none; }
.ow_box_toolbar a:hover { text-decoration: none; }
.ow_box_toolbar .ow_delimiter,
.ow_ic_toolbar  .ow_delimiter { display: none; }

/* FloatBox (modal) */
#floatbox_overlay { position: fixed; z-index: 100; top: 0; left: 0; height: 100%; width: 100%; }
.floatbox_overlayBG { background-color: rgba(0,0,0,0.55); }
#floatbox_HideSelect { z-index: 99; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }
body .floatbox_canvas .floatbox_container { margin-top: 80px; }
.floatbox_container {
    position: fixed; z-index: 102; width: 360px;
    box-shadow: var(--shadow-lg);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: none;
}
.floatbox_header { padding: 16px 16px 0; background: var(--bg); }
.floatbox_header a.close_btn { margin: 2px; }
.floatbox_title {
    font-size: 17px; font-weight: 600;
    padding: 4px 12px 0; float: left;
    color: var(--text);
}
.floatbox_header .ow_box_cap_icons { float: right; margin-top: 1px; }
.floatbox_body   { padding: 12px 16px; background: var(--bg); text-align: left; }
.floatbox_bottom { padding: 0 16px 16px; background: var(--bg); text-align: center; }

/* ============================================================
   [9] CONTENT MENU (page-level tabs)
   ============================================================ */
.ow_content_menu_wrap { margin-bottom: 20px; }
.ow_content_menu {
    font-size: 0;
    font-weight: 500;
    border-bottom: 2px solid var(--border);
}
.ow_content_menu li {
    float: left;
    border: 1px solid transparent;
    border-bottom: none;
    position: relative;
    top: 2px;
}
.ow_content_menu li a {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    padding: 10px 14px;
    letter-spacing: 0.01em;
    font-weight: 500;
}
.ow_content_menu span {
    background-image: url(images/ic_file.svg);
    background-position: 10px center;
    background-repeat: no-repeat;
    padding: 10px 14px 10px 32px;
    display: block;
}
.ow_content_menu li.active {
    border-color: var(--border) var(--border) var(--bg) var(--border);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    background: var(--bg);
}
.ow_content_menu li.active a { color: var(--brand); font-weight: 600; }
.ow_content_menu li a:hover  { color: var(--brand); text-decoration: none; }

/* Box/inline menu links */
.ow_box_menu { font-size: 0; line-height: 22px; margin-bottom: 14px; }
.ow_box_menu a {
    display: inline-block;
    font-size: 13px;
    line-height: 16px;
    height: 16px;
    padding: 0 8px 0 8px;
    border-right: 1px solid var(--border);
    color: var(--text-muted);
    font-weight: 500;
}
.ow_box_menu a:first-child { padding-left: 0; }
.ow_box_menu a:last-child  { border-right: none; }
.ow_box_menu a.active,
.ow_box_menu a:hover { color: var(--brand); text-decoration: none; }

/* FW menu */
.ow_fw_menu { padding: 4px 8px 4px 0; min-height: 24px; clear: both; }
.ow_fw_btns { display: inline-block; }

/* ---- Button list (.ow_bl) — used in photo toolbars, action bars ---- */
.ow_bl { padding: 0; display: inline-flex; align-items: center; gap: 2px; }
.ow_bl li { float: none; list-style: none; display: inline-block; }
.ow_bl a {
    display: inline-block;
    padding: 2px 8px;
    line-height: 20px;
    text-decoration: none;
    color: var(--brand);
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
}
.ow_bl a:hover {
    color: var(--brand-dark);
    background: var(--brand-xlight);
    border-color: var(--brand-light);
    text-decoration: none;
}
/* Box toolbar row — flex so text + links don't run together */
.ow_box_toolbar {
    margin-top: 12px;
    float: right;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}
.ow_box_toolbar .ow_remark,
.ow_box_toolbar > span:not(.ow_nowrap) {
    color: var(--text-muted);
    font-size: 12px;
    padding-right: 4px;
}

/* Vertical nav */
.ow_vertical_nav.ow_vertical_menu,
body .ow_vertical_nav_item { border-color: var(--border); border-radius: 0; }
.ow_vertical_nav_item.selected { background-color: var(--brand-xlight); }
.ow_moderation_wrap .ow_moderation_sticked { top: var(--nav-h); }

/* Pagination */
.ow_paging { border: none; padding: 1px; font-size: 14px; }
.ow_paging a {
    display: inline-block;
    line-height: 16px;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    color: var(--text-muted);
    font-weight: 500;
}
.ow_paging a.active,
.ow_paging a:hover { color: var(--brand); background: var(--brand-xlight); text-decoration: none; }
.ow_paging span { display: inline-block; padding-left: 3px; }

/* ============================================================
   [10] BUTTONS
   ============================================================ */
span.ow_button {
    display: inline-block;
    background: var(--brand);
    border-radius: var(--r-sm);
    border: none;
    padding: 0;
    transition: background var(--t), box-shadow var(--t);
}
span.ow_button:hover {
    background: var(--brand-dark);
    box-shadow: 0 2px 8px rgba(124,58,237,0.35);
}
input[type=submit],
input[type=button] {
    background: transparent;
    padding: 0 18px;
    color: var(--text-on-brand);
    font-weight: 600;
    cursor: pointer;
    height: 38px;
    font-family: var(--font);
    font-size: 14px;
    border: none;
    letter-spacing: 0.01em;
}
span.ow_button:hover input[type=submit],
span.ow_button:hover input[type=button] { color: var(--text-on-brand); }
input[type=submit]:hover,
input[type=button]:hover { color: var(--text-on-brand); }
html body.ow input[type=submit],
html body.ow input[type=button] { margin: 0; }

/* Nested .ow_button span resets */
span.ow_button span.ow_button {
    border: none; background: transparent;
    background-image: none; background-color: transparent;
}
span.ow_button span { display: inline-block; background: transparent; }
.ow_btn_delimiter span.ow_button:first-child { margin-right: 12px; }

/* Color variants */
span.ow_button.ow_positive  { background: var(--brand); }
span.ow_button.ow_negative  { background: transparent; box-shadow: none; }
span.ow_button.ow_negative input[type=submit],
span.ow_button.ow_negative input[type=button] { color: var(--text-muted); padding-right: 2px; }
span.ow_button.ow_negative:hover { background: transparent; box-shadow: none; }
span.ow_button.ow_negative:hover input { color: var(--brand); }

/* lbutton — small inline action link */
a.ow_lbutton, span.ow_lbutton {
    background: rgba(124,58,237,0.08);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    padding: 2px 6px;
    line-height: 14px;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
    color: var(--brand);
    vertical-align: text-bottom;
    transition: background var(--t), border-color var(--t);
    letter-spacing: 0.02em;
}
.ow_lbutton:hover { background: var(--brand); color: var(--text-on-brand); text-decoration: none; }
.ow_lbutton.ow_green { color: #059669; background: rgba(5,150,105,0.08); }
.ow_lbutton.ow_green:hover { background: #059669; color: #fff; }
.ow_lbutton.ow_red { color: var(--accent); background: rgba(244,63,94,0.08); }
.ow_lbutton.ow_red:hover { background: var(--accent); color: #fff; }

html body div .ow_green { color: #059669; }
html body div .ow_red   { color: var(--accent); }
html body div .ow_mild_red   { color: var(--accent); }
html body div .ow_mild_green { color: #059669; }
html body .ow_button.ow_red,
html body .ow_button.ow_mild_red,
html body .ow_button.ow_green,
html body .ow_button.ow_mild_green { background: transparent; border: none; color: var(--text); }
input[type=submit].ow_green,
input[type=button].ow_green { background: transparent; }

/* sbutton — small submit variant */
.ow_sbutton {
    display: inline-block; cursor: pointer;
    background: var(--brand);
    color: var(--text-on-brand);
    border: none; border-radius: var(--r-sm);
    padding: 4px 12px; font-size: 13px; font-weight: 600;
}
.ow_sbutton:hover { background: var(--brand-dark); text-decoration: none; }

/* ============================================================
   [11] FORMS
   ============================================================ */
input[type=text],
input[type=password],
textarea,
select,
div.jhtmlarea {
    background-color: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    transition: border-color var(--t), box-shadow var(--t);
}
input[type=text]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
    outline: none;
}
input[type=text],
input[type=password] {
    width: 100%; height: 40px;
    line-height: 1.4;
    box-sizing: border-box;
}
textarea {
    height: 100px; width: 100%;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.5;
}
select { background-image: none; }
input[type=checkbox] ~ label,
input[type=radio] ~ label { vertical-align: middle; margin-left: 4px; }
form .error { color: var(--accent); font-size: 12px; margin-top: 4px; }
form input[type=text].hasDatepicker { width: 87%; }
.ow_multiselect select { width: 120px; padding: 2px; }
.form_auto_click .ow_submit_auto_click { display: none; }
.form_auto_click textarea.invitation { height: 50px; }
textarea.invitation,
input[type=text].invitation,
input[type=password].invitation { color: var(--text-light); }
input[type=text].ow_inputready,
textarea.ow_inputready { color: var(--text-light); }

/* WYSIWYG editor */
body form div.jhtmlarea { background: var(--bg); width: 100% !important; box-sizing: border-box; }
body .toolbar { padding: 2px; height: 24px; background: var(--bg); border: none; }
body .toolbar ul li a { background-image: url(images/wysiwyg.png); border: none; width: 20px; height: 20px; }
body .jhtmlarea .toolbar ul { height: 26px; }
.jhtmlarea .input_ws_cont { padding: 8px; }
body.htmlarea_styles { margin: 0; font-family: var(--font); color: var(--text); font-size: 14px; line-height: 1.5; }

/* Tags input */
div.tagsinput {
    background: var(--bg);
    border-radius: var(--r-sm);
    border-color: var(--border);
}
div.tagsinput span.tag {
    background: var(--brand-light);
    border-color: var(--brand-light);
    border-radius: var(--r-sm);
    color: var(--brand-dark);
}
div.tagsinput span.tag a  { border-color: var(--brand-light); }
div.tagsinput span.tag span { font-size: 13px; }
div.tagsinput input { color: var(--text); }

/* Form layout */
.ow_form_table { width: 100%; border-collapse: collapse; }
.ow_form_table td { padding: 6px 4px; vertical-align: top; }
.ow_label { color: var(--text-muted); font-weight: 500; font-size: 13px; padding-top: 10px; }
.ow_value { }
.ow_error { color: var(--accent); font-size: 12px; }

/* ============================================================
   [12] USER LISTINGS / PROFILE CARDS
   ============================================================ */
.ow_ulist_big { overflow: hidden; }
.ow_ulist_big_item_cont {
    float: left;
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
    transition: transform var(--t), box-shadow var(--t);
}
.ow_ulist_big_item_cont:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.ow_ulist_big_info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 100%);
    padding: 28px 8px 8px;
    border-radius: 0 0 var(--r-md) var(--r-md);
}
.ow_ulist_big_info, .ow_ulist_big_info *,
.ow_ulist_big_info a, .ow_ulist_big_info a:visited,
.ow_ulist_big_info_name, .ow_ulist_big_info_name *,
.ow_ulist_big_info_name a, .ow_ulist_big_info_name a:visited { color: #ffffff; }
.ow_ulist_big_info_name { font-weight: 600; font-size: 13px; }

/* Photo item cards */
.ow_photo_item_info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0) 100%);
    padding: 24px 8px 8px;
    border-radius: 0 0 var(--r-md) var(--r-md);
}
.ow_photo_item_info, .ow_photo_item_info *, .ow_photo_item_info a,
.ow_photo_item_info .ow_usearch_display_name, .ow_photo_item_info .ow_usearch_display_name *,
.ow_usearch_user_info, .ow_usearch_user_info *, .ow_usearch_user_info a,
.ow_photo_userlist_info, .ow_photo_userlist_info * { color: #ffffff; }

/* Avatar */
.ow_avatar { display: inline-block; }
.ow_avatar img { border-radius: 50%; display: block; }

/* ============================================================
   [13] NOTIFICATIONS / ALERTS
   ============================================================ */
.ow_info_box_wrap {
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: var(--r-md);
    font-size: 14px;
    line-height: 1.5;
}
.ow_error_message, .ow_error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
    border-radius: var(--r-sm);
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: 13px;
}
.ow_warning_message {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #92400E;
    border-radius: var(--r-sm);
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: 13px;
}
.ow_success_message {
    background: #F0FDF4;
    border: 1px solid #86EFAC;
    color: #166534;
    border-radius: var(--r-sm);
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: 13px;
}
.ow_info_message {
    background: var(--brand-xlight);
    border: 1px solid var(--brand-light);
    color: var(--brand-dark);
    border-radius: var(--r-sm);
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: 13px;
}

/* ============================================================
   [14] CONTEXT ACTIONS (More / Moderation dropdowns)
   ============================================================ */
.ow_context_action_block { float: right; text-align: right; font-size: 0; line-height: 20px; }
.ow_context_action {
    display: inline-block;
    position: relative;
    background: transparent;
    z-index: 3;
    height: 20px;
    padding: 0 0 0 5px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    vertical-align: top;
    cursor: pointer;
    transition: background var(--t), border-color var(--t);
}
.ow_context_action_value {
    font-size: 12px; font-weight: 600;
    display: inline-block;
    padding: 0 5px 0 0;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
}
.ow_context_more {
    display: inline-block;
    min-width: 15px; height: 20px;
    padding: 0 3px 0 0;
    background: url(images/context_action_arrow.svg) no-repeat 0 7px;
    vertical-align: top;
}
body .ow_context_action_value_block .ow_context_action .ow_context_more,
body .ow_context_action_value_block .ow_context_action:hover .ow_context_more { background-position: right 8px; }
.ow_context_action:hover,
.ow_context_action.active {
    border-color: var(--border);
    background: var(--bg-subtle);
}
.ow_context_action:hover .ow_context_action_wrap { display: block; }
.ow_context_action_list { min-width: 120px; text-align: left; overflow-x: auto; }
.ow_context_action_list li { white-space: nowrap; }
.ow_context_action_list a {
    font-size: 13px; font-weight: 500;
    display: block;
    padding: 6px 12px;
    color: var(--text-muted);
    border-radius: var(--r-sm);
}
.ow_context_action_list a:hover {
    background: var(--brand-xlight);
    color: var(--brand);
    text-decoration: none;
}
.ow_context_action_divider { height: 1px; background: var(--border); margin: 3px 0; }
.ow_context_action .ow_tooltip { display: none; }

/* ============================================================
   [15] COUNTERS / BADGES
   ============================================================ */
.ow_count_wrap {
    text-align: center; display: inline-block;
    line-height: 16px; font-size: 10px; vertical-align: top;
}
.ow_count_bg {
    display: inline-block;
    background: var(--text-muted);
    min-height: 16px; overflow: hidden;
    border-radius: 8px;
}
.ow_count {
    display: inline-block;
    padding: 0 4px;
    min-height: 16px; min-width: 16px;
    line-height: 16px;
    color: #fff;
    font-weight: 700;
    font-family: var(--font);
    font-size: 10px;
}
.ow_count_active { background: var(--accent); }

/* ============================================================
   [16] TOOLTIPS
   ============================================================ */
.ow_tooltip { margin-top: 0; padding-top: 3px; }
.ow_tooltip_tail { display: inline-block; padding: 0; width: 100%; visibility: hidden; }
.ow_tooltip_tail span {
    display: inline-block;
    background: url(images/tooltip_tail.png) no-repeat 8px -6px;
    width: 19px; height: 6px; margin-bottom: -1px;
}
.ow_tooltip .ow_tooltip_body {
    background: var(--bg);
    padding: 4px 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
}
.ow_tooltip_top_right.ow_tooltip  { margin-top: 0; position: absolute; right: 0; top: 0; }
.ow_tooltip_top_right .ow_tooltip_tail span { background-position: 3px -6px; }
.ow_tooltip_top_right .ow_tooltip_tail { text-align: right; }

/* Info tip bubble */
.ow_tip { display: inline-block; position: absolute; z-index: 10005; }
.ow_tip_box {
    position: relative; padding: 2px 10px 4px;
    background: var(--bg); color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    font-size: 13px;
}

/* ============================================================
   [17] DASHBOARD DRAG-AND-DROP
   ============================================================ */
.ow_dragndrop_panel { background: var(--bg); margin-top: 6px; }
.ow_dashboard_box  { background: var(--bg); padding: 6px 10px 10px; margin-top: 6px; }
.ow_dnd_schem_item {
    background: var(--bg) url(images/ic_file.svg) no-repeat 10px 50%;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    cursor: move;
    height: 32px;
    margin: 3px 5px 3px 0;
    padding: 0 5px 0 34px;
    position: relative;
    font-size: 12px;
}
.ow_dnd_schem_item span.ow_label { float: left; overflow: hidden; padding-top: 8px; height: 20px; }
.ow_dnd_schem_item span.action { line-height: 16px; overflow: hidden; width: 70px; position: absolute; right: 4px; top: 3px; }
.ow_dnd_schem_item span.action .ow_lbutton { vertical-align: top; }
.ow_dnd_helper { border: 1px dashed var(--brand); }
.ow_dnd_freezed .ow_dnd_schem_item { background-color: #FEF2F2; }
.ow_dragndrop_sections .ow_highbox { margin-top: 6px; padding: 0; }
.ow_dragndrop_sections .ow_highbox.join_now_widget { padding: 10px; }
.join_now_widget a:hover { text-decoration: none; }
.ow_dnd_placeholder { height: 10px; border: 1px dashed var(--brand-light); background: var(--brand-xlight); }
.ow_dnd_preloader { height: 32px; }
.ow_dnd_configurable_component .control {
    display: inline-block; width: 18px; height: 16px;
    background-position: center; background-repeat: no-repeat;
}
.ow_dnd_configurable_component .ow_box_icons { float: right; padding: 8px 2px 0 0; }
.ow_dnd_configurable_component.ow_box_cap .ow_box_icons { padding: 2px 0 0 0; }
.ow_dnd_configurable_component h3 { float: left; }
.ow_dnd_content_components { padding: 10px 0; width: 74%; }
.ow_dnd_clonable_components { border-left: 1px solid var(--border); padding: 10px 0 10px 10px; width: 24%; }

/* Dnd slider */
.ow_dnd_slider { height: 6px; background: var(--border-subtle); position: relative; margin: 10px 3px 0; cursor: pointer; }
.ow_dnd_slider_handle {
    position: absolute; top: -6px;
    width: 22px; height: 16px;
    cursor: move; z-index: 50;
    background: url(images/ic_move_horizontal.svg) no-repeat center;
}
.ow_dnd_slider_in_move { opacity: 0.5; }
.ow_dragndrop_sections .top_section    { background-image: url(images/dnd-label-top.png); background-position: center 7px; background-repeat: no-repeat; }
.ow_dragndrop_sections .left_section   { background-image: url(images/dnd-label-column1.png); background-position: center 7px; background-repeat: no-repeat; }
.ow_dragndrop_sections .right_section  { background-image: url(images/dnd-label-column2.png); background-position: center 7px; background-repeat: no-repeat; }
.ow_dragndrop_sections .bottom_section { background-image: url(images/dnd-label-bottom.png); background-position: center 7px; background-repeat: no-repeat; }
.ow_dragndrop_sections .sidebar_section { background-image: url(images/dnd-label-sidebar.png); background-position: center 7px; background-repeat: no-repeat; }
body .ow_dragndrop_panel .ow_dnd_schem_item { width: 134px; }
.ow_highbox { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.ow_highbox.ow_highbox { border-image: none; }
input[type=text].ow_settings_input { width: 42px; }

/* ============================================================
   [18] STANDARD UTILITIES / DEFAULT CLASSES
   ============================================================ */
.ow_left  { float: left; }
.ow_right { float: right; }
.ow_small { font-size: 11px; color: var(--text-light); }
.ow_bold  { font-weight: 600; }
.ow_newline     { clear: both; }
.ow_stdmargin   { margin-bottom: 16px; }
.ow_hidden      { display: none; }
.ow_invisible   { visibility: hidden; }
.ow_preloader   { text-align: center; padding: 20px; }

html body div .ow_page h1 { background: none; }
.ow_border { border: 1px solid var(--border); }
body > .ow_page_wrap { position: relative; }

/* ============================================================
   DESKTOP SIGN-IN PAGE — /sign-in
   Rendered inside elevate/master_pages/blank.html (now pure white, no
   gradient). The blank master prepends a centered <.elv-auth-brand>
   wordmark above the form. The body of the page is:
     <div class="ow_sign_in_wrap">
       <h2>{$siteName}</h2>                ← we visually hide this; the
                                            wordmark in blank.html already
                                            does the brand display
       <form>
         <div class="ow_sign_in"> ← form box (block_decorator "box")
         <div class="ow_sign_up"> ← sign-up CTA box
       </form>
     </div>
   We restyle as a centered card pair on a clean white background.
   ============================================================ */

/* Brand wordmark, prepended by blank.html above the form. */
.elv-auth-brand {
    text-align: center;
    padding: 56px 24px 28px;
}
.elv-auth-brand-link { text-decoration: none; display: inline-block; }
.elv-auth-brand .elevate-wordmark {
    font-size: 30px;
    font-weight: 500;          /* thinner / more elegant per design feedback */
    letter-spacing: -0.02em;
    color: #1a1a2e;
}
.elv-auth-brand .elevate-wordmark:hover { color: #5B21B6; }

/*
   The legacy SkaDate template `user_standard_sign_in.html` ships an inline
   <style> block that absolutely positions .ow_sign_in_wrap at
   `position:absolute; top:200px; left:50%; margin-left:-351px` — assuming
   a hard-coded 702px width. That breaks every responsive layout we try to
   apply. Force the wrap back into normal flow so our centered grid takes
   over.
*/
body.base_sign_in .ow_sign_in_cont,
body.base_sign_in .ow_sign_in_wrap {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 auto !important;
    transform: none !important;
}
body.base_sign_in .ow_sign_in_wrap {
    max-width: 880px;
    margin: 0 auto 24px !important;
    padding: 0 24px 40px;
    box-sizing: border-box;
    width: 100%;
}
body.base_sign_in .ow_sign_in_cont {
    display: block;
    width: 100%;
}
/* The inline {$siteName} <h2> is redundant now that the wordmark is in
   the master page. Visually hide it but keep it in the DOM for SEO/screen
   readers. */
body.base_sign_in .ow_sign_in_wrap > h2 {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
}
body.base_sign_in .ow_sign_in_wrap form { width: 100%; }
body.base_sign_in .ow_sign_in_wrap form > .clearfix {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* Common card shell for both columns */
body.base_sign_in .ow_sign_in,
body.base_sign_in .ow_sign_up {
    background: #ffffff !important;
    border: 1px solid #F3F4F6 !important;
    border-radius: 16px !important;
    padding: 28px 28px 24px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    box-sizing: border-box;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 100%;
}

/* The block_decorator wraps form fields in an .ow_box / .ow_stdmargin. Reset
   that wrapper inside our card so it doesn't double-pad or paint another box. */
body.base_sign_in .ow_sign_in .ow_box,
body.base_sign_in .ow_sign_in .ow_box_empty,
body.base_sign_in .ow_sign_in .ow_box_cap,
body.base_sign_in .ow_sign_in .ow_stdmargin {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.base_sign_in .ow_sign_in .ow_box_cap,
body.base_sign_in .ow_sign_in .ow_box_cap_text {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    padding: 0 0 16px !important;
    margin: 0 0 18px !important;
    border-bottom: 1px solid #F3F4F6 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Inputs */
body.base_sign_in .ow_user_name,
body.base_sign_in .ow_password { margin: 0 0 14px !important; }
body.base_sign_in .ow_user_name input,
body.base_sign_in .ow_password input {
    width: 100% !important;
    height: 46px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    color: #111827 !important;
    background: #F9FAFB !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body.base_sign_in .ow_user_name input:focus,
body.base_sign_in .ow_password input:focus {
    outline: none !important;
    border-color: #7C3AED !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.10) !important;
}

/* Form options row: remember me + forgot link + submit */
body.base_sign_in .ow_form_options {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 18px 0 0 !important;
}
body.base_sign_in .ow_form_options .ow_remember_me {
    order: 1;
    margin: 0 !important;
    font-size: 13px;
    color: #6B7280;
    display: flex; align-items: center; gap: 8px;
}
body.base_sign_in .ow_form_options .ow_remember_me input { accent-color: #7C3AED; }
body.base_sign_in .ow_form_options .ow_forgot_pass {
    order: 2;
    margin: 0 !important;
    font-size: 13px;
}
body.base_sign_in .ow_form_options .ow_forgot_pass a {
    color: #7C3AED;
    text-decoration: none;
}
body.base_sign_in .ow_form_options .ow_forgot_pass a:hover { text-decoration: underline; }
body.base_sign_in .ow_form_options .ow_right {
    order: 3;
    float: none !important;
    width: 100%;
    margin: 6px 0 0 !important;
}
body.base_sign_in .ow_form_options .ow_right .ow_button input,
body.base_sign_in .ow_form_options .ow_right button {
    width: 100% !important;
    height: 50px !important;
    padding: 0 32px !important;       /* Comfortable horizontal padding around text. */
    background: #7C3AED !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(124,58,237,0.30) !important;
    transition: background .15s ease, transform .15s ease;
}
body.base_sign_in .ow_form_options .ow_right .ow_button input:hover,
body.base_sign_in .ow_form_options .ow_right button:hover {
    background: #6D28D9 !important;
    transform: translateY(-1px);
}

/* Connect buttons (Facebook/Google/etc) below the form */
body.base_sign_in .ow_connect_buttons {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #F3F4F6;
}
body.base_sign_in .ow_connect_buttons:empty { display: none; }

/* Sign-up CTA column */
body.base_sign_in .ow_sign_up {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
body.base_sign_in .ow_sign_up p {
    margin: 0 0 14px !important;
    font-size: 15px;
    color: #4B5563;
    line-height: 1.5;
}
body.base_sign_in .ow_sign_up hr {
    border: none;
    border-top: 1px solid #F3F4F6;
    margin: 6px 0 14px;
}
body.base_sign_in .ow_sign_up a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 28px;
    background: #ffffff;
    color: #7C3AED;
    border: 2px solid #7C3AED;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
    align-self: center;
}
body.base_sign_in .ow_sign_up a:hover {
    background: #7C3AED;
    color: #ffffff;
    text-decoration: none;
}

/* Narrow viewports: stack the two cards. */
@media (max-width: 720px) {
    body.base_sign_in .ow_sign_in_wrap > h2 { font-size: 26px; margin-bottom: 22px; }
    body.base_sign_in .ow_sign_in_wrap form > .clearfix {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   SIGN-IN POPUP — opened from the console "Sign in" link.
   See BASE_CLASS_ConsoleEventHandler::collectItems(): the same
   BASE_CMP_SignIn component is rendered inside a hidden
   #base_cmp_floatbox_ajax_signin wrapper, then opened via
   OW_FloatBox. Style it as a single-column compact dialog
   (NOT the two-column layout we use on the dedicated /sign-in
   page).
   ============================================================ */
#base_cmp_floatbox_ajax_signin,
.floatbox_body #base_cmp_floatbox_ajax_signin { width: auto; }
.floatbox_body .ow_sign_in_wrap {
    position: static !important;
    margin: 0 !important;
    padding: 4px 4px 8px !important;
    max-width: 400px;
    box-sizing: border-box;
}
.floatbox_body .ow_sign_in_wrap > h2 {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a2e;
    letter-spacing: -0.01em;
    margin: 0 0 18px;
    font-family: var(--font, inherit);
    text-transform: lowercase;
}
.floatbox_body .ow_sign_in_wrap form > .clearfix {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.floatbox_body .ow_sign_in,
.floatbox_body .ow_sign_up {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}
.floatbox_body .ow_sign_in .ow_box,
.floatbox_body .ow_sign_in .ow_box_empty,
.floatbox_body .ow_sign_in .ow_box_cap,
.floatbox_body .ow_sign_in .ow_stdmargin {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Hide the "Please sign in" header inside the popup — the floatbox already
   shows the dialog title in its own header bar. */
.floatbox_body .ow_sign_in .ow_box_cap { display: none !important; }

.floatbox_body .ow_user_name,
.floatbox_body .ow_password { margin: 0 0 12px !important; }
.floatbox_body .ow_user_name input,
.floatbox_body .ow_password input {
    width: 100% !important;
    height: 44px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    color: #111827 !important;
    background: #F9FAFB !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}
.floatbox_body .ow_user_name input:focus,
.floatbox_body .ow_password input:focus {
    outline: none !important;
    border-color: #7C3AED !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.10) !important;
}
.floatbox_body .ow_form_options {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 14px 0 0 !important;
}
.floatbox_body .ow_form_options .ow_remember_me {
    order: 1;
    margin: 0 !important;
    font-size: 13px;
    color: #6B7280;
    display: flex; align-items: center; gap: 8px;
}
.floatbox_body .ow_form_options .ow_remember_me input { accent-color: #7C3AED; }
.floatbox_body .ow_form_options .ow_forgot_pass {
    order: 2;
    margin: 0 !important;
    font-size: 13px;
}
.floatbox_body .ow_form_options .ow_forgot_pass a { color: #7C3AED; text-decoration: none; }
.floatbox_body .ow_form_options .ow_forgot_pass a:hover { text-decoration: underline; }
.floatbox_body .ow_form_options .ow_right {
    order: 3;
    float: none !important;
    width: 100%;
    margin: 4px 0 0 !important;
}
.floatbox_body .ow_form_options .ow_right .ow_button input,
.floatbox_body .ow_form_options .ow_right button {
    width: 100% !important;
    height: 48px !important;
    padding: 0 28px !important;       /* Comfortable horizontal padding around text. */
    background: #7C3AED !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(124,58,237,0.25) !important;
}
.floatbox_body .ow_form_options .ow_right .ow_button input:hover,
.floatbox_body .ow_form_options .ow_right button:hover { background: #6D28D9 !important; }
.floatbox_body .ow_connect_buttons {
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid #F3F4F6;
}
.floatbox_body .ow_connect_buttons:empty { display: none; }
.floatbox_body .ow_sign_up {
    margin-top: 8px !important;
    padding: 14px 16px !important;
    background: #F9FAFB !important;
    border-radius: 10px !important;
    text-align: center;
}
.floatbox_body .ow_sign_up p { margin: 0 0 10px !important; font-size: 13px; color: #4B5563; }
.floatbox_body .ow_sign_up p:last-child { margin: 0 !important; }
.floatbox_body .ow_sign_up hr { display: none; }
.floatbox_body .ow_sign_up a {
    color: #7C3AED;
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
}
.floatbox_body .ow_sign_up a:hover { text-decoration: underline; }

/* Legacy sign-in widget on landing — preserved as fallback for any embed. */
.ow_sign_in_cont { position: relative; }
.ow_sign_in, .ow_sign_up {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.ow_sign_in h3, .ow_sign_up h3 { color: var(--text); font-size: 18px; font-weight: 700; margin-bottom: 16px; }

/* Membership / profile widgets */
.ow_mship_widget_current { margin-bottom: 10px; display: block; text-align: center; }
.ow_mship_widget_current .ow_mship_widget_label,
.ow_mship_widget_current .ow_mship_widget_value { display: inline-block; float: none; }
.ow_my_avatar_widget { text-align: center; }
.ow_my_avatar_widget .ow_left.ow_my_avatar_img { float: none; display: inline-block; margin: 0 auto; }
.ow_my_avatar_widget .ow_my_avatar_cont { display: none; }

/* Profile action toolbar (flex layout) */
body.base_profile_page .ow_profile_action_toolbar_wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0;
}
body.base_profile_page .ow_profile_action_toolbar_wrap a,
body.base_profile_page .ow_profile_action_toolbar_wrap .ow_context_action { font-size: 12px; }
body.base_profile_page ul.ow_profile_action_toolbar {
    display: contents; margin: 0; padding: 0; float: none; list-style: none;
}
body.base_profile_page ul.ow_profile_action_toolbar > li { display: contents; }
body.base_profile_page ul.ow_profile_action_toolbar > li > a,
body.base_profile_page ul.ow_profile_action_toolbar > li > a:visited {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    background: var(--brand-xlight);
    border: 1px solid var(--brand-light);
    border-radius: var(--r-sm);
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background var(--t), border-color var(--t);
}
body.base_profile_page ul.ow_profile_action_toolbar > li > a:hover {
    background: var(--brand-light);
    border-color: var(--brand);
    text-decoration: none;
}

/* Remove "User List" gallery tab (search / match pages) */
.ow_content_menu_wrap li._photo_gallery,
.ow_content_menu_wrap li.ow_menu_photo_gallery,
.owm_content_menu li._photo_gallery,
.owm_content_menu li.ow_menu_photo_gallery { display: none; }

/* Hide Search nav item everywhere — using Discovery only */
li.usearch_menu_item_search,
.ow_main_menu li.usearch_menu_item_search,
.ow_menu_fullpage_wrap li.usearch_menu_item_search { display: none !important; }

/* Discovery page uses same light background as rest of site */

/* ============================================================
   Chat window — hidden (use top-nav Messages instead)
   ============================================================ */
.ow_chat_cont { display: none; }

/* Profile page — consistent column widths so all section
   tables (BASIC, APPEARANCE, LIFESTYLE) render at the same width.
   ============================================================ */

/* base_profile_page column rules (global — were already global before this work) */
body.base_profile_page .place_section.left_section {
    width: 30%;
    float: left;
}
body.base_profile_page .place_section.right_section {
    width: 68%;
    float: right;
}
body.base_profile_page .place_section.top_section,
body.base_profile_page .place_section.bottom_section {
    width: 100%;
    float: none;
    clear: both;
}
body.base_profile_page .ow_box_cap,
body.base_profile_page .ow_box_cap_empty,
body.base_profile_page .ow_box,
body.base_profile_page .ow_box_empty {
    width: 100%;
    box-sizing: border-box;
}

/* Desktop-only rules: applied only on screens >= 601px so mobile profile
   pages keep their original vertical-stacking layout. */
@media (min-width: 601px) {
    /* Hide the duplicate h1 page heading on other users' profiles —
       the name is already shown inside the profile widget/gallery.
       (myProfile() already suppresses its heading in PHP.) */
    body.base_profile_page h1.ow_stdmargin { display: none !important; }

    /* Apply same column widths to My Profile as other profiles */
    body.ow_my_profile_page .place_section.left_section {
        width: 30%;
        float: left;
    }
    body.ow_my_profile_page .place_section.right_section {
        width: 68%;
        float: right;
    }
    body.ow_my_profile_page .place_section.top_section,
    body.ow_my_profile_page .place_section.bottom_section {
        width: 100%;
        float: none;
        clear: both;
    }
    body.ow_my_profile_page .ow_box_cap,
    body.ow_my_profile_page .ow_box_cap_empty,
    body.ow_my_profile_page .ow_box,
    body.ow_my_profile_page .ow_box_empty {
        width: 100%;
        box-sizing: border-box;
    }

    /* Switch profile data tables to auto layout on desktop so column widths
       are driven by content. The label column uses min-width: 120px + white-space:nowrap
       so the natural content width is always ≥ 120px — meaning every section's
       label column ends up the same fixed width (short labels like "Age" get
       padded to 120px by min-width, long ones rarely exceed it).
       Mobile is intentionally unchanged (no !important overrides there). */
    .ow_table_1,
    .ow_table_3,
    table.data_table { table-layout: auto !important; }

    .ow_table_3 td.ow_label,
    .ow_table_1 td.ow_label,
    table.data_table td.ow_label {
        width: 1% !important;
        min-width: 140px !important;
        white-space: nowrap !important;
    }

    .ow_table_3 td.ow_value,
    .ow_table_1 td.ow_value,
    table.data_table td.ow_value {
        width: auto !important;
        white-space: normal !important;
    }
}

/* Profile data tables — force full container width with FIXED layout
   so label/value columns are identical across ALL sections */
.ow_table_1,
.ow_table_2,
.ow_table_3,
table.data_table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
    margin-bottom: 20px;
    box-sizing: border-box;
    table-layout: fixed;
}

/* Section header (BASIC, APPEARANCE, LIFESTYLE…) */
.ow_table_3 tr.ow_tr_first th,
.ow_table_1 tr.ow_tr_first th,
table.data_table tr.ow_tr_first th {
    background: var(--brand-xlight);
    color: var(--brand-dark);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 8px 16px;
    text-align: left;
    border-left: 3px solid var(--brand);
    border-top: 1px solid var(--brand-light);
    border-bottom: 1px solid var(--brand-light);
    border-right: none;
    border-radius: 0;
    width: 100%;
}

/* Data rows */
.ow_table_3 tr td,
.ow_table_1 tr td,
table.data_table tr td {
    padding: 9px 12px 9px 16px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
    font-size: 14px;
    overflow: hidden;
    word-wrap: break-word;
    background: var(--bg);
}
/* Label — narrow muted column (desktop widths set in the @media block above;
   mobile keeps inline style="width:20%" from the template) */
.ow_table_3 td.ow_label,
.ow_table_1 td.ow_label,
table.data_table td.ow_label {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: normal;
    overflow: hidden;
    text-align: left;
    padding-right: 16px;
}
/* Value — takes remaining space */
.ow_table_3 td.ow_value,
.ow_table_1 td.ow_value,
table.data_table td.ow_value {
    color: var(--text);
    font-weight: 400;
    overflow: hidden;
    word-wrap: break-word;
}
/* Subtle hover on data rows */
.ow_table_3 tr:hover td,
.ow_table_1 tr:hover td,
table.data_table tr:hover td { background: var(--bg-subtle); }
.ow_table_3 tr.ow_tr_first:hover th,
.ow_table_1 tr.ow_tr_first:hover th,
table.data_table tr.ow_tr_first:hover th { background: var(--brand-xlight); }

/* ============================================================
   [19] RESPONSIVE
   ============================================================ */
/* ============================================================
   [19] RESPONSIVE
   ============================================================ */
/* Prevent horizontal scroll on all screen sizes */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
.ow_page_wrap, .ow_page_container, .ow_canvas, .ow_page {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    /* Show hamburger, hide nav and logo */
    .ow_nav_btn   { display: flex !important; }
    .ow_menu_wrap { display: none !important; }

    /* Mobile site panel: hamburger LEFT, "elevate" wordmark RIGHT of it.
       DOM order is `.ow_logo` then `.ow_nav_btn` (which is correct for
       desktop). On mobile we flex the panel and use `order` to put the
       hamburger first regardless of DOM position. The console (avatar /
       messages) stays on the far right. */
    .ow_site_panel {
        padding: 0 8px;
        display: flex !important;
        align-items: center;
        gap: 10px;
    }
    .ow_site_panel .ow_nav_btn   { order: 1; float: none !important; margin: 0 !important; }
    .ow_site_panel .ow_logo      {
        order: 2;
        float: none !important;
        display: inline-flex !important;
        margin: 0 !important;
        flex: 1 1 auto;
    }
    .ow_site_panel .ow_console_right {
        order: 3;
        float: none !important;
        margin-left: auto !important;
    }
    .ow_logo .elevate-wordmark { font-size: 20px; }

    .ow_canvas,
    .ow_page_container { padding: 0 12px; }

    .ow_page_container .ow_page { padding: 16px 0; }

    .ow_column, .ow_narrow, .ow_wide,
    .ow_superwide, .ow_supernarrow { width: 100%; float: none; }
    .ow_item_set2, .ow_item_set3,
    .ow_item_set4, .ow_item_set5 { width: 50%; }

    .floatbox_container { width: calc(100% - 32px); max-width: 400px; }
    body .floatbox_canvas .floatbox_container { margin-top: 60px; }

    /* Discovery cards fill more screen on mobile */
    .discovery-card { width: calc(100vw - 40px); max-width: 340px; }
}

@media (max-width: 600px) {
    :root { --nav-h: 56px; }

    .ow_logo { margin-left: 12px; }
    .ow_logo .elevate-wordmark { font-size: 22px; }
    .ow_footer_inner { flex-direction: column; gap: 8px; }
    .ow_copyright  { float: none; padding: 0; }
    .ow_footer_nav { float: none; }

    /* Stack all columns on small screens. (Removed a previous
       `.ow_item_set2..5 { width:50% }` rule that was immediately
       shadowed by the 100% rule below — dead code.)               */
    .ow_column, .ow_narrow, .ow_wide,
    .ow_superwide, .ow_supernarrow,
    .ow_item_set2, .ow_item_set3,
    .ow_item_set4, .ow_item_set5 { width: 100%; float: none; }

    /* Stack profile columns on ALL mobile screens (up to 900px) so the
       profile image, action buttons, user photos, and data tables all
       appear as a clean vertical scroll. Moved from 600px to 900px so it
       reliably catches both phones and small tablets. */
    body.base_profile_page .place_section.left_section,
    body.base_profile_page .place_section.right_section,
    body.ow_my_profile_page .place_section.left_section,
    body.ow_my_profile_page .place_section.right_section {
        width: 100% !important;
        float: none !important;
        clear: both;
    }
}

/* ============================================================
   MOBILE PROFILE: action button row (≤900px)

   The standalone .ow_profile_action_toolbar_wrap is the FIRST direct child
   of .ow_content (DOM order). It appears above the profile photo naturally —
   that's fine UX (user sees actions immediately on opening a profile).

   white_theme_override.css sets font-size:0 on the wrapper globally as a
   whitespace-collapse trick. We MUST override this on mobile or text is
   invisible. Critical: font-size:14px !important on the wrapper.

   The pcgallery widget has its own .ow_profile_gallery_action_toolbar inside
   it — we hide that to avoid a confusing duplicate inside the photo box.
   ============================================================ */
/*
   PROFILE ACTION TOOLBAR — desktop vs mobile (May 2026 rewrite).

   Two toolbars are rendered on every profile page:
     (A) the STANDALONE toolbar from widget_panel_profile.html — sits
         outside the photo gallery widget (markup:
         .ow_profile_gallery_action_toolbar AND .ow_profile_action_toolbar_wrap
         on the same div, as a direct child of .ow_content);
     (B) the PCGALLERY INTERNAL toolbar from PCGALLERY_CMP_Gallery —
         rendered inside the photo box (markup: outer
         .ow_profile_gallery_action_toolbar wrapper with ONLY that class,
         containing the inner toolbar with both classes).

   DESKTOP (>900px): hide (A), keep (B). Matches the user's preferred
   pre-May-2026 behaviour where buttons lived inside the photo widget.

   MOBILE (≤900px): hide (B), promote (A) to a fixed floating bottom
   dock styled like a modern mobile-app action bar.
*/

/* (A) Desktop: hide the standalone toolbar (direct child of .ow_content). */
@media (min-width: 901px) {
    body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap {
        display: none !important;
    }
}

@media (max-width: 900px) {
    /* (B) Hide pcgallery's outer wrap (single class only). The inner
       toolbar (which has both classes) is inside it, so hiding the wrap
       hides the entire duplicate group. */
    .ow_profile_gallery_toolbox > .ow_profile_gallery_action_toolbar:not(.ow_profile_action_toolbar_wrap) {
        display: none !important;
    }

    /* (A) Promote standalone toolbar to a fixed bottom dock.
       Using `.ow_content >` so we never accidentally promote the
       pcgallery-nested toolbar (which is deeper in the tree). */
    body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 9999 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        font-size: 14px !important;   /* overrides font-size:0 from white_theme_override */
        background: #ffffff !important;
        border: 1px solid #E5E7EB !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.06) !important;
        padding: 8px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        gap: 6px !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        transform: none !important;
    }
    /* Page gets bottom padding so content doesn't hide under the dock. */
    body:has(.ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap) .ow_page_padding {
        padding-bottom: 104px !important;
    }

    /* CRITICAL: make the UL (Like/Bookmark holder) and the More
       context-action-block share the row at EQUAL flex weight. The default
       layout makes the UL one flex item containing N li children, and
       each context-action-block a separate flex item — that gave "More"
       50% of the row while the UL split its 50% between 3 li. With the
       UL set to display:contents, its li children become direct flex
       children of the dock alongside the More block, all flex:1. */
    body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap ul.ow_profile_action_toolbar {
        display: contents !important;
    }

    /* Force the More dropdown to open ABOVE the dock instead of below
       (because the dock is at the viewport bottom). */
    body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap .ow_tooltip {
        top: auto !important;
        bottom: calc(100% + 12px) !important;
        margin: 0 !important;
        right: 0 !important;
        left: auto !important;
    }
    body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap .ow_tooltip .ow_tooltip_arrow,
    body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap .ow_tooltip::before,
    body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap .ow_tooltip::after {
        display: none !important;
    }
    body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap .ow_context_action_list {
        background: #ffffff !important;
        border: 1px solid #E5E7EB !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 32px rgba(0,0,0,0.18) !important;
        padding: 6px !important;
        min-width: 160px !important;
    }
    body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap .ow_context_action_list li > a {
        display: block !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #111827 !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }
    body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap .ow_context_action_list li > a:hover {
        background: #F5F3FF !important;
        color: #7C3AED !important;
    }

    /* With UL set to display:contents above, every <li> and the More
       .ow_context_action_block become direct flex children of the dock
       at equal flex weight (3 buttons total = 3 equal pills).
       Each pill is sized big enough to fit "Bookmark" / "Unlike" text. */

    body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap ul.ow_profile_action_toolbar > li {
        display: flex !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap ul.ow_profile_action_toolbar > li > a,
    body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap ul.ow_profile_action_toolbar > li > a:visited {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 44px !important;
        padding: 0 6px !important;
        background: #F5F3FF !important;
        border: 1px solid #DDD6FE !important;
        border-radius: 12px !important;
        color: #7C3AED !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-decoration: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
    }
    /* Context action ("More" group container) - same flex slot as a pill. */
    body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap .ow_context_action_block {
        display: flex !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap .ow_context_action_block .ow_context_action {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 44px !important;
        padding: 0 6px !important;
        background: #F5F3FF !important;
        border: 1px solid #DDD6FE !important;
        border-radius: 12px !important;
        color: #7C3AED !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* Drop the chevron arrow next to "More". */
    body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap .ow_context_more {
        display: none !important;
    }
    body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap .ow_context_action_value {
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        color: #7C3AED !important;
        line-height: 1 !important;
        height: auto !important;
    }
    /* Hide moderation button (red) — admin-only on desktop. */
    body.base_profile_page ul.ow_profile_action_toolbar > li > a.ow_mild_red {
        display: none !important;
    }
    .elevate-mobile-action-card { display: none !important; }
}

/* ============================================================
   [20] GLOBAL PROFILE EXTRAS + SORT CONTROL
   ============================================================ */

/* Hide the "Chat Now" hover button on profile pictures — the legacy
   bottom-right chat popup is disabled; the Send Message toolbar button
   handles conversation start instead. */
span[id^="ow_chat_now_"] { display: none !important; }

/* Hide the "Switch to Chat" / "Open in Chat" link that appears inside
   the messages right-pane header when the opponent is online.
   The link would trigger the legacy chat popup which is disabled. */
.ow_mailbox_switch_to_chat { display: none !important; }

/* Sort control (.ow_sort_control) — used on matches, search, and other
   listing pages. Render as an inline flex pill row so "Sort by:", the
   active option, and the inactive option all sit neatly on one line. */
.ow_sort_control {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 6px 12px;
    background: var(--bg-subtle, #F9F7FF);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1;
}
.ow_sort_control .ow_sort_control_label {
    color: var(--text-muted, #6B7280);
    font-weight: 500;
    white-space: nowrap;
    margin-right: 2px;
}
.ow_sort_control a {
    color: var(--text-muted, #6B7280);
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 5px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.ow_sort_control a:hover {
    background: var(--brand-xlight, #EDE9FE);
    color: var(--brand, #7C3AED);
    text-decoration: none;
}
.ow_sort_control a.active {
    background: var(--brand, #7C3AED);
    color: #ffffff;
    font-weight: 600;
}

@media (max-width: 600px) {
    .ow_sort_control { font-size: 11px; padding: 5px 10px; }
}

/* ============================================================
   [21] MOBILE FOOTER — flat single-line bar on all mobile pages
   ============================================================ */
@media (max-width: 900px) {
    /* Reduce the bottom-padding spacer that the footer pulls into */
    .ow_page_padding { padding-bottom: 30px; }

    .ow_footer {
        min-height: 0;
        margin-top: -30px;
        padding: 0;
    }
    .ow_footer_inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 4px 12px;
        min-height: 30px;
        gap: 0;
    }
    .ow_footer_nav { float: none; margin: 0; }
    .ow_footer_menu {
        padding: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .ow_footer_menu a {
        padding: 0 6px;
        font-size: 11px;
        line-height: 22px;
    }
    /* NOTE: The previous ::after pipe injection rule was removed in May 2026
       because the elevate general.html / landing.html footers now render the
       Terms / | / Privacy markup explicitly with their own .elevate-footer-sep
       span. Combined with the SkaDate bottom_menu's literal "| " text node it
       used to produce a doubled-pipe ("Terms || Privacy") on narrow desktop
       viewports — exactly the "extra |" symptom reported. */
    /* Hide copyright text — keep only the nav links */
    .ow_copyright { display: none !important; }
}

/* ============================================================
   [22] MOBILE MESSAGES — full-screen viewport layout
   Requires body.mailbox_messages_page (set in messages controller)
   ============================================================ */
@media (max-width: 900px) {
    /* Remove the heading and all page-level padding/margin so the
       container sits flush from nav bar to footer */
    body.mailbox_messages_page h1.ow_stdmargin { display: none !important; }
    body.mailbox_messages_page .ow_page_padding { padding-bottom: 0; }
    body.mailbox_messages_page .ow_footer { margin-top: 0; }
    body.mailbox_messages_page .ow_page_container {
        padding: 0;
        margin: 0;
        max-width: 100%;
    }
    body.mailbox_messages_page .ow_page_container .ow_page {
        padding: 0;
        margin: 0;
    }
    body.mailbox_messages_page .ow_canvas { padding: 0; }

    /* Container fills exactly: viewport − nav − footer (30px).
       100svh = small viewport height, which excludes the mobile browser's
       address bar. Falls back to 100vh minus an extra 56px buffer for
       browsers that don't support svh units. */
    body.mailbox_messages_page .ow_mailbox_table {
        height: calc(100vh - var(--nav-h) - 86px);   /* vh fallback: extra ~56px for browser chrome */
        height: calc(100svh - var(--nav-h) - 30px);  /* svh: excludes browser address bar */
        min-height: 0;
        border-radius: 0;
    }
}

/* ============================================================
   SUBSCRIBE / MEMBERSHIP PAGE
   table-layout:fixed + equal tier widths (34% label / 22% each tier).
   ============================================================ */

/* Outer card — constrained width so it doesn't feel edge-to-edge */
.subscribe-table-wrapper {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #E5E7EB;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    margin: 0 auto 32px;
    max-width: 840px;
}

/* Table: fixed layout, proper collapse */
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 480px;
    border-collapse: collapse !important;
    margin: 0 !important;
    font-size: 14px !important;
}
.ow_automargin.subscribe-table-wrapper .ow_membership_column { width: auto !important; }

/* ALL cells: clean base */
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table th,
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table td {
    background: #ffffff !important;
    color: #374151 !important;
    border: none !important;
    border-bottom: 1px solid #F0F0F5 !important;
    padding: 14px 16px !important;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    word-break: break-word;
    font-size: 14px !important;
}

/* Column widths */
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th:first-child { width: 34% !important; }
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th:nth-child(2),
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th:nth-child(3),
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th:nth-child(4) { width: 22% !important; }

/* Faint vertical dividers between tier columns */
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table td:not(:first-child):not(:last-child),
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table th:not(:first-child):not(:last-child) {
    border-right: 1px solid #F0F0F5 !important;
}

/* Uniform row height for all content rows (not headers/separators/pricing) */
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:not(.ow_tr_first):not(.ow_tr_delimiter):not(.ow_tr_last):not(:first-child) td {
    height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: middle !important;
}

/* Feature label column */
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table th:first-child,
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table td:first-child {
    text-align: left !important;
    color: #6B7280 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: #FAFAFA !important;
    border-right: 1px solid #E5E7EB !important;
    padding-left: 20px !important;
}

/* Header row */
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th {
    background: #7C3AED !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    padding: 18px 16px !important;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,0.15) !important;
}
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th:last-child {
    border-right: none !important;
}
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th:first-child {
    background: #5B21B6 !important;
    color: rgba(255,255,255,0.75) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: left !important;
    padding-left: 20px !important;
}

/* Section sub-headers */
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr.ow_tr_first th[colspan] {
    background: #F5F3FF !important;
    color: #7C3AED !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left !important;
    padding: 8px 20px !important;
    border-left: 3px solid #7C3AED !important;
    border-bottom: 1px solid #EDE9FE !important;
    border-right: none !important;
}

/* Separator rows */
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr.ow_tr_delimiter td {
    height: 1px; padding: 0 !important;
    background: #E5E7EB !important;
    border: none !important;
}

/* Plans / pricing row */
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table td.ow_membership_plans {
    background: #F9F7FF !important;
    padding: 16px !important;
    vertical-align: top;
    text-align: left !important;
    border-right: 1px solid #EDE9FE !important;
}
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table td.ow_plans_td_empty {
    background: #FAFAFA !important;
    border-right: 1px solid #E5E7EB !important;
    border-bottom: none !important;
}
.ow_membership_plans ul { list-style: none; margin: 0; padding: 0; }
.ow_membership_plans ul li { margin-bottom: 8px; font-size: 13px; color: #374151; }
.ow_membership_plans ul li label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* Gateway / submit row — more padding so button isn't edge-touching */
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr.ow_tr_last td {
    background: #FAFAFA !important;
    padding: 20px 20px !important;
    border-bottom: none !important;
}
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table td.ow_gateways_td_empty {
    background: #FAFAFA !important;
    border-right: 1px solid #E5E7EB !important;
}
#billing_gateway_extra_information { font-size: 13px; color: #6B7280; padding: 4px 0; }

/* Check marks */
.ow_subscribe_table .ow_action_allowed {
    display: flex !important; align-items: center; justify-content: center;
    height: 22px; background-image: none !important; width: 100%;
}
.ow_subscribe_table .ow_action_allowed::after {
    content: '✓'; font-size: 18px; font-weight: 700; color: #7C3AED; line-height: 1;
}

/* ── MOBILE: override template's display:flex/block that breaks layout ──
   Force the table to stay as a table with horizontal scroll.
   First column sticky so feature names stay visible as user swipes. */
@media (max-width: 720px) {
    .subscribe-table-wrapper { margin: 0 0 24px; border-radius: 10px; }

    /* Override the template's inline {style} that sets display:block/flex */
    .subscribe-table-wrapper .ow_subscribe_table,
    .subscribe-table-wrapper .ow_subscribe_table tbody { display: table !important; }
    .subscribe-table-wrapper .ow_subscribe_table tr     { display: table-row !important; }
    .subscribe-table-wrapper .ow_subscribe_table th,
    .subscribe-table-wrapper .ow_subscribe_table td     {
        display: table-cell !important;
        padding: 11px 10px !important;
        font-size: 13px !important;
    }

    /* Sticky feature-label column */
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table th:first-child,
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        box-shadow: 2px 0 8px rgba(0,0,0,0.08);
        padding-left: 12px !important;
        font-size: 12px !important;
        width: 110px !important;
        min-width: 110px;
        max-width: 110px;
    }
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th:first-child {
        z-index: 3;
        font-size: 10px !important;
        padding-left: 12px !important;
    }
    /* Tier column minimum width on mobile */
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th:nth-child(2),
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th:nth-child(3),
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th:nth-child(4) {
        width: 100px !important;
        min-width: 100px !important;
    }
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table { min-width: 410px; }
}

/* ============================================================
   STRIPE PAYMENT PAGE
   ============================================================ */
.stripe-card-page { max-width: 560px; margin: 0 auto; }
.stripe-card-page .ow_credit_card {
    background: #ffffff;
    border-radius: 14px !important;
    border: 1px solid #E5E7EB;
    box-shadow: 0 2px 14px rgba(0,0,0,0.07);
    padding: 28px !important;
    margin-bottom: 20px;
}
.stripe-card-page .credit-card-info { margin-bottom: 16px; }
.stripe-card-page .credit-card-info .ow_outline {
    font-size: 16px; font-weight: 700; color: #111827;
}
.stripe-card-page .ow_credit_card .ow_table_3 { width: 100% !important; margin-bottom: 0; }
.stripe-card-page .ow_credit_card .ow_table_3 th {
    background: #F5F3FF !important;
    color: #7C3AED !important;
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; border-left: 3px solid #7C3AED;
    /* Clear gap between the violet bar and the first letter of
       "CARD DETAILS" / "BILLING INFORMATION" — the bar is 3px wide
       so we add a generous 24px after it so the heading reads with
       a clean indent like the rest of the form.                  */
    padding: 12px 14px 12px 24px !important;
}
.stripe-card-page .ow_credit_card .ow_table_3 td.ow_label {
    color: var(--text-muted); font-size: 13px; width: 140px !important; min-width: 140px !important;
}
#card-element, .stripe_card {
    border: 1px solid #E5E7EB; border-radius: 8px;
    padding: 10px 12px; background: #F9FAFB; font-size: 14px;
}
#card-element.StripeElement--focus {
    border-color: #7C3AED; box-shadow: 0 0 0 3px rgba(124,58,237,0.1); background: #fff;
}
#cardholder-name {
    width: 100%; border: 1px solid #E5E7EB; border-radius: 8px;
    padding: 10px 12px; font-size: 14px; background: #F9FAFB; box-sizing: border-box;
}
#cardholder-name:focus {
    outline: none; border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1); background: #ffffff;
}

/* ============================================================
   BILLING STATUS PAGES (completed / canceled / error)
   ============================================================ */
.ow_anno.ow_std_margin.ow_nocontent,
.ow_anno.ow_stdmargin.ow_nocontent {
    max-width: 480px; margin: 40px auto; padding: 28px 32px;
    background: #F5F3FF; border: 1px solid #DDD6FE; border-radius: 14px;
    text-align: center; font-size: 16px; font-weight: 500; color: #5B21B6; line-height: 1.6;
}

/* ============================================================
   MY MATCHES PAGE — smaller tiles (6 per row on desktop)
   ============================================================ */
/* My Matches — 6 tiles per row on desktop, natural portrait aspect ratio */
@media (min-width: 900px) {
    .elevate_matches_page .ow_photo_item_wrap {
        width: 16.6667% !important;
    }
    /* Let photos keep their natural portrait proportions — no fixed height */
    .elevate_matches_page .ow_photo_item_wrap .ow_photo_item,
    .elevate_matches_page .ow_photo_item_wrap .ow_photo_item img {
        height: auto !important;
        width: 100% !important;
        display: block;
    }
    /* Cap the max height so very tall photos don't dominate */
    .elevate_matches_page .ow_photo_item_wrap .ow_photo_item {
        max-height: 220px;
        overflow: hidden;
    }
    .elevate_matches_page .ow_photo_item_wrap .ow_photo_item img {
        max-height: 220px;
        object-fit: cover;
        object-position: center top;
    }
}
@media (min-width: 601px) and (max-width: 899px) {
    .elevate_matches_page .ow_photo_item_wrap { width: 25% !important; }
}

/* ============================================================
   PROFILE EDIT PAGE
   BASE_CTRL_Edit never calls setDocumentKey so there is no body class.
   Use :has(form[name="editForm"]) to scope all rules to the edit page.
   Also target specific IDs that are unique to this page.
   ============================================================ */

/* Hide the change-password button and its hidden form entirely.
   These IDs only exist on the profile edit page. */
#change_password_button { display: none !important; }
#change-password-div    { display: none !important; }

/* Hide the entire top bar that wraps the change-password component.
   :has() is supported in all modern browsers (Chrome 105+, Safari 15.4+,
   Firefox 121+). The box contains only the now-hidden CP button. */
body:has(form[name="editForm"]) .ow_content > .ow_superwide.ow_automargin:has(#change_password_button),
body:has(form[name="editForm"]) .ow_content > .ow_superwide.ow_automargin:has(#change-password-div) {
    display: none !important;
}

/* Hide the account type (Profile Type / "I am a") field from the form.
   Admin can change this via the admin panel user editor instead. */
body:has(form[name="editForm"]) form[name="editForm"] tr:has([name="accountType"]) {
    display: none !important;
}

/* Section headers on edit form */
body:has(form[name="editForm"]) .ow_table_1 tr.ow_tr_first th {
    background: #F5F3FF !important;
    color: #7C3AED !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-left: 3px solid #7C3AED;
}

/* Admin console item — gear icon via the unique class added in console_event_handler.php */
.ow_console_item.elevate_admin_console_item a.ow_console_item_link {
    background-image: url(images/ic_gear_wheel.svg) !important;
}

/* ============================================================
   SUBSCRIBE — checkout button padding + permissions label size
   ============================================================ */
/* Extra padding in the gateway/submit row so checkout never touches the edge */
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr.ow_tr_last td {
    padding: 24px 24px !important;
}
/* PERMISSIONS header cell — same size as tier headers */
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th:first-child {
    font-size: 15px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: rgba(255,255,255,0.95) !important;
    font-weight: 700 !important;
}

/* ============================================================
   MY MATCHES PAGE — container card with breathing room
   ============================================================ */
.elevate_matches_page {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 20px;
    margin-bottom: 24px;
}
/* Keep the sort control row above the grid, not inside the card visually */
.elevate_matches_page .elevate_matches_sort { margin: -4px 0 16px; }

/* ============================================================
   DISCOVERY HEADER BANNER — top padding from page container
   ============================================================ */
.discovery-header-card { margin-top: 16px; }

/* ============================================================
   MY MATCHES — module padding + count text + narrower container
   ============================================================ */
.elevate_matches_page {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 24px;
}
/* Photo grid: gap between photos and card edge */
.elevate_matches_page .ow_photo_list_wrap {
    margin: 0 -4px; /* counteract the 4px item padding from core CSS */
}
/* Matches count text */
.elevate_matches_page .ow_remark.ow_smallmargin {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #7C3AED !important;
    margin-bottom: 16px !important;
    display: block;
}

/* ============================================================
   MOBILE SUBSCRIBE — extend to 900px + better sizing
   ============================================================ */
@media (max-width: 900px) {
    /* Force the table to stay as a proper table (override template display:block) */
    .subscribe-table-wrapper .ow_subscribe_table,
    .subscribe-table-wrapper .ow_subscribe_table tbody { display: table !important; width: 100% !important; }
    .subscribe-table-wrapper .ow_subscribe_table tr     { display: table-row !important; flex: none !important; flex-wrap: unset !important; }
    .subscribe-table-wrapper .ow_subscribe_table th,
    .subscribe-table-wrapper .ow_subscribe_table td     { display: table-cell !important; flex: none !important; max-width: none !important; }
    /* Sticky first column */
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table th:first-child,
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table td:first-child {
        position: sticky; left: 0; z-index: 2;
        box-shadow: 2px 0 6px rgba(0,0,0,0.08);
        width: 100px !important; min-width: 100px !important; max-width: 100px !important;
        font-size: 11px !important; padding: 10px 8px !important;
    }
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th:first-child { z-index: 3; }
    /* Tier columns */
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th:nth-child(2),
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th:nth-child(3),
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th:nth-child(4) {
        width: 110px !important; min-width: 110px !important;
    }
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table { min-width: 430px !important; font-size: 13px !important; }
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table th,
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table td { padding: 10px 8px !important; }
}

/* ============================================================
   MOBILE PROFILE EDIT — comprehensive mobile redesign
   Uses :has(form[name="editForm"]) since the page has no body class.
   ============================================================ */
@media (max-width: 900px) {
    /* Stack the form table into single-column layout */
    body:has(form[name="editForm"]) form[name="editForm"] table.ow_table_1 { display: block !important; }
    body:has(form[name="editForm"]) form[name="editForm"] table.ow_table_1 tbody,
    body:has(form[name="editForm"]) form[name="editForm"] table.ow_table_1 tr { display: block !important; width: 100% !important; }
    body:has(form[name="editForm"]) form[name="editForm"] table.ow_table_1 td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 6px 0 !important;
        border: none !important;
        background: transparent !important;
    }
    /* Label: bold, small */
    body:has(form[name="editForm"]) form[name="editForm"] td.ow_label {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #6B7280 !important;
        padding-bottom: 2px !important;
        padding-top: 14px !important;
    }
    /* Value: full width inputs */
    body:has(form[name="editForm"]) form[name="editForm"] td.ow_value input,
    body:has(form[name="editForm"]) form[name="editForm"] td.ow_value select,
    body:has(form[name="editForm"]) form[name="editForm"] td.ow_value textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }
    /* Description column — hide on mobile (too much noise) */
    body:has(form[name="editForm"]) form[name="editForm"] td.ow_desc { display: none !important; }
    /* Section headers */
    body:has(form[name="editForm"]) form[name="editForm"] tr.ow_tr_first th {
        display: block !important;
        padding: 10px 0 6px !important;
        font-size: 11px !important;
    }
    /* Hide delimiter rows (visual noise in block layout) */
    body:has(form[name="editForm"]) form[name="editForm"] tr.ow_tr_delimiter { display: none !important; }
    /* Container padding */
    body:has(form[name="editForm"]) .ow_superwide.ow_automargin { padding: 16px !important; }
    /* Submit button row */
    body:has(form[name="editForm"]) .ow_btn_delimiter { padding: 12px 0 !important; }
}

/* ============================================================
   MY MATCHES — remove card styling on mobile (photos don't fit)
   ============================================================ */
@media (max-width: 900px) {
    .elevate_matches_page {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* ============================================================
   DISCOVERY FILTER — mobile bottom-sheet with sticky close button
   ============================================================ */
@media (max-width: 900px) {
    /* Bottom sheet from bottom instead of right-side panel */
    .elevate-filter-panel {
        top: auto !important;
        right: 0 !important; left: 0 !important;
        width: 100% !important;
        max-height: 78vh !important;
        height: auto !important;
        border-radius: 20px 20px 0 0 !important;
        transform: translateY(100%) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    .elevate-filter-overlay.elevate-filter-open .elevate-filter-panel {
        transform: translateY(0) !important;
    }
    /* Drag handle above the close button */
    .elevate-filter-panel-header::before {
        content: '';
        display: block;
        width: 40px; height: 4px;
        background: #D1D5DB;
        border-radius: 2px;
        margin: 0 auto 14px;
    }
    /* Sticky header so X is always visible */
    .elevate-filter-panel-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: #ffffff !important;
        padding: 16px 20px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        border-bottom: 1px solid #F3F4F6 !important;
    }
    /* Row with title + X */
    .elevate-filter-panel-header .elevate-filter-panel-title {
        font-size: 16px !important;
        display: block;
        margin-bottom: 0;
    }
    .elevate-filter-panel-close {
        position: absolute !important;
        top: 16px !important; right: 16px !important;
        width: 36px !important; height: 36px !important;
        font-size: 18px !important;
    }
}

/* ============================================================
   MOBILE PROFILE EDIT — 2-column layout, no description column
   Replaces the display:block conversion from previous commit.
   ============================================================ */
@media (max-width: 900px) {
    /* Keep 2-column table (label | input), remove 3rd description column */
    body:has(form[name="editForm"]) form[name="editForm"] table.ow_table_1 {
        display: table !important;
        width: 100% !important;
        table-layout: auto !important;
    }
    body:has(form[name="editForm"]) form[name="editForm"] table.ow_table_1 tbody,
    body:has(form[name="editForm"]) form[name="editForm"] table.ow_table_1 tr {
        display: table-row !important;
    }
    body:has(form[name="editForm"]) form[name="editForm"] table.ow_table_1 td,
    body:has(form[name="editForm"]) form[name="editForm"] table.ow_table_1 th {
        display: table-cell !important;
    }
    /* HIDE the 3rd description column entirely */
    body:has(form[name="editForm"]) form[name="editForm"] td.ow_desc {
        display: none !important;
    }
    /* Label column: compact */
    body:has(form[name="editForm"]) form[name="editForm"] td.ow_label {
        width: 38% !important;
        font-size: 12px !important;
        vertical-align: middle !important;
        padding: 8px 8px 8px 0 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    /* Value column: fills rest */
    body:has(form[name="editForm"]) form[name="editForm"] td.ow_value {
        width: 62% !important;
        font-size: 13px !important;
        vertical-align: middle !important;
        padding: 6px 0 !important;
    }
    /* Full-width inputs */
    body:has(form[name="editForm"]) form[name="editForm"] td.ow_value input,
    body:has(form[name="editForm"]) form[name="editForm"] td.ow_value select,
    body:has(form[name="editForm"]) form[name="editForm"] td.ow_value textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
    }
    /* Section header spans both columns */
    body:has(form[name="editForm"]) form[name="editForm"] tr.ow_tr_first th {
        font-size: 10px !important;
        padding: 8px 12px !important;
    }
    /* Container padding */
    body:has(form[name="editForm"]) .ow_superwide.ow_automargin { padding: 12px !important; }
}

/* ============================================================
   PROFILE ACTION BUTTONS — FIXED BOTTOM BAR (mobile ≤900px)

   WHY position:fixed INSTEAD OF flex/display approaches:
   Every previous attempt (20+ iterations) failed because they relied on:
   1. body.base_profile_page class (may not be set)
   2. Element being in the right position in the document flow
   3. font-size:0 from white_theme_override.css not being overridden
   4. display:contents on ul/li being consistently overrideable

   position:fixed removes ALL these dependencies:
   - The element is lifted out of the normal flow entirely
   - It pins to the viewport bottom regardless of DOM position
   - Parent opacity, visibility, overflow:hidden, font-size — none matter
   - z-index:9999 guarantees it renders on top of everything
   - Works even if body class is wrong, even if element is "inside" something

   The dual-class selector (.ow_profile_gallery_action_toolbar +
   .ow_profile_action_toolbar_wrap) uniquely identifies the standalone
   toolbar. The pcgallery's internal avatar toolbar only has the first class.
   ============================================================ */
/* NOTE (May 2026): the previous "position:fixed bottom bar" attempt + the
   ".ow_profile_gallery_toolbox .ow_profile_gallery_action_toolbar { display:none }"
   rule that lived here have been removed. Together they were the root cause
   of "no buttons on mobile profile" — the hide rule matched both the outer
   wrap AND the inner toolbar (same class on both), and the position:fixed
   rule fought the hide rule at identical specificity, with source order
   making the hide win. The visible toolbar styling now lives in the
   @media block earlier in this file and applies in-place (no fixed bar). */

/* ============================================================
   MY MATCHES — desktop card: overflow clip + proper photo spacing
   ============================================================ */
@media (min-width: 901px) {
    .elevate_matches_page {
        overflow: hidden;
        padding: 24px !important;
    }
    /* Photos respect the 24px card padding */
    .elevate_matches_page .ow_photo_list_wrap {
        margin: 0;
    }
    .elevate_matches_page .ow_photo_userlist.ow_photo_list_wrap div.ow_photo_item_wrap {
        padding: 4px !important;
    }
}

/* ============================================================
   DISCOVERY — "No more profiles" empty state styling
   ============================================================ */
.discovery-results .ow_nocontent {
    padding: 40px 28px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
    text-align: center !important;
    background: #F9FAFB;
    border-radius: 12px;
    border: 1px dashed #E5E7EB;
    margin: 8px 0;
}

/* ============================================================
   SUBSCRIBE — plans/pricing row better styling + permissions fix
   ============================================================ */
/* Pricing section label */
.ow_automargin.subscribe-table-wrapper .ow_subscribe_table td.ow_membership_plans {
    background: #F9F7FF !important;
    padding: 16px !important;
    vertical-align: top;
    text-align: left !important;
}
/* Plan radio button rows */
.ow_membership_plans ul li {
    margin-bottom: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
}
.ow_membership_plans ul li label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    border: 1px solid #E5E7EB !important;
    background: #ffffff !important;
    transition: border-color 0.15s, background 0.15s !important;
}
.ow_membership_plans ul li label:hover {
    border-color: #7C3AED !important;
    background: #FEFCFF !important;
}
.ow_membership_plans ul li input[type="radio"]:checked + label,
.ow_membership_plans ul li label:has(input[type="radio"]:checked) {
    border-color: #7C3AED !important;
    background: #F5F3FF !important;
}

/* ============================================================
   MOBILE PROFILE EDIT — clean 2-col, no description, no email
   ============================================================ */
@media (max-width: 900px) {
    /* Remove the outer module card on mobile (same approach as matches) */
    body:has(form[name="editForm"]) .ow_content > .ow_superwide.ow_automargin:last-of-type {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    /* Always hide description (3rd) column */
    body:has(form[name="editForm"]) td.ow_desc { display: none !important; }
    /* Label column — compact but readable */
    body:has(form[name="editForm"]) td.ow_label {
        width: 35% !important;
        max-width: 120px !important;
        font-size: 12px !important;
        padding: 8px 6px 8px 0 !important;
        white-space: normal !important;
        word-break: break-word !important;
        vertical-align: top !important;
    }
    /* Value column — most of the width */
    body:has(form[name="editForm"]) td.ow_value {
        width: 65% !important;
        font-size: 13px !important;
        padding: 6px 0 !important;
        vertical-align: top !important;
    }
    body:has(form[name="editForm"]) td.ow_value input,
    body:has(form[name="editForm"]) td.ow_value select,
    body:has(form[name="editForm"]) td.ow_value textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
    }
}

/* ============================================================
   MOBILE SUBSCRIBE — narrow viewport rewrite (May 2026).

   The desktop subscribe template renders as a wide feature-comparison
   table with one row per feature and one column per tier. On narrow
   viewports that simply cannot fit. Previous attempts to "stack rows
   into cards" broke because:

     1) They hid every row except .ow_tr_first / .ow_tr_last / .ow_tr_delimiter,
        but our new pricing-row pivot uses a custom class
        (.elevate-pricing-row) that didn't match — so ALL pricing rows
        were hidden too. End result: only the header row (tier names)
        showed, which the user reported as "only Free visible — rest is
        white". This is the actual root cause of the "mobile subscribe
        is completely broken" complaint.

     2) The header row was flexed into a column which stacked tier
        names vertically, breaking alignment with the per-duration
        pricing rows below.

   This rewrite keeps everything as a table but:
     - Hides only the FEATURE comparison rows + their section headers.
     - Keeps the tier-header row, the "Pricing" header, the pivoted
       per-duration pricing rows, the gateway row, and the submit row.
     - Adds a small explanatory note above the table.
   ============================================================ */
@media (max-width: 600px) {
    /* Hide feature comparison rows. .elevate-pricing-row and the
       .elevate-pricing-header MUST be excluded so the pricing section
       stays visible. */
    .subscribe-table-wrapper .ow_subscribe_table
        tr:not(.ow_tr_first):not(.ow_tr_last):not(.ow_tr_delimiter):not(.elevate-pricing-row):not(:first-child) {
        display: none !important;
    }

    /* Hide section sub-headers (e.g. "Searching", "Communications") —
       BUT keep the row that contains our pricing header (.elevate-pricing-header). */
    .subscribe-table-wrapper .ow_subscribe_table tr.ow_tr_first:not(:first-child):not(:has(.elevate-pricing-header)) {
        display: none !important;
    }

    /* Header row (PERMISSIONS | Free | Premium | Diamond) — keep as a
       real table row so cells align with the pricing rows below. Just
       shrink padding and remove the "PERMISSIONS" label to free up
       horizontal space. */
    .subscribe-table-wrapper .ow_subscribe_table tr:first-child {
        display: table-row !important;
    }
    .subscribe-table-wrapper .ow_subscribe_table tr:first-child th {
        display: table-cell !important;
        padding: 12px 8px !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        height: auto !important;
    }
    .subscribe-table-wrapper .ow_subscribe_table tr:first-child th:first-child {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
        font-size: 0 !important;     /* hide "PERMISSIONS" text visually but keep column */
    }
    .subscribe-table-wrapper .ow_subscribe_table tr:first-child th:not(:first-child) {
        font-size: 14px !important;
    }

    /* Pricing section header ("Pricing"). */
    .subscribe-table-wrapper .ow_subscribe_table .elevate-pricing-header {
        padding: 12px 10px !important;
        font-size: 11px !important;
    }

    /* Pricing rows (one per duration). */
    .subscribe-table-wrapper .ow_subscribe_table tr.elevate-pricing-row {
        display: table-row !important;
    }
    .subscribe-table-wrapper .ow_subscribe_table tr.elevate-pricing-row td {
        display: table-cell !important;
        height: auto !important;
        line-height: 1.3 !important;
        padding: 10px 6px !important;
        font-size: 12px !important;
        text-align: center !important;
    }
    .subscribe-table-wrapper .ow_subscribe_table td.elevate-pricing-label {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
        padding-left: 10px !important;
        text-align: left !important;
        font-size: 12px !important;
    }
    .subscribe-table-wrapper .ow_subscribe_table .elevate-price-amount {
        font-size: 15px !important;
    }
    .subscribe-table-wrapper .ow_subscribe_table .elevate-price-label {
        padding: 4px 6px !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    /* Gateway / submit row — stack vertically since gateways list takes
       space. */
    .subscribe-table-wrapper .ow_subscribe_table tr.ow_tr_last {
        display: table-row !important;
    }
    .subscribe-table-wrapper .ow_subscribe_table tr.ow_tr_last td {
        display: table-cell !important;
        padding: 16px 10px !important;
    }
    .subscribe-table-wrapper .ow_subscribe_table td.ow_gateways_td_empty {
        display: none !important;
    }
    /* Checkout submit row underneath stays the comfortable inset card. */

    /* Explanatory note above the table. */
    .subscribe-table-wrapper::before {
        content: 'Showing pricing only. View full feature comparison on a larger screen.';
        display: block;
        font-size: 11px;
        color: #9CA3AF;
        text-align: center;
        padding: 10px 16px;
        border-bottom: 1px solid #F3F4F6;
    }
}

/* ============================================================
   SUBSCRIBE — definitive row height + permissions font fix
   (appended last so these rules have final say)
   ============================================================ */

/* Uniform 44px for ALL standard feature cells */
.subscribe-table-wrapper .ow_subscribe_table td,
.subscribe-table-wrapper .ow_subscribe_table th {
    height: 44px !important;
    line-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}
/* Override height for special rows that should vary */
.subscribe-table-wrapper .ow_subscribe_table tr.ow_tr_first th,
.subscribe-table-wrapper .ow_subscribe_table tr:first-child th {
    height: auto !important;
    line-height: 1.4 !important;
    padding: 16px 16px !important;
}
.subscribe-table-wrapper .ow_subscribe_table tr.ow_tr_delimiter td {
    height: 1px !important;
    line-height: 0 !important;
    padding: 0 !important;
}
.subscribe-table-wrapper .ow_subscribe_table td.ow_membership_plans {
    height: auto !important;
    line-height: 1.5 !important;
    padding: 16px !important;
    overflow: visible !important;
}
.subscribe-table-wrapper .ow_subscribe_table tr.ow_tr_last td {
    height: auto !important;
    line-height: 1.5 !important;
    padding: 20px 24px !important;
    overflow: visible !important;
}

/* PERMISSIONS font — maximum specificity, appended last */
html body .ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th:first-child {
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    height: auto !important;
}

/* ============================================================
   PROFILE EDIT — simpler selectors (ID-based, no :has needed)
   ============================================================ */
/* Remove email row — email management moved to Account Settings */
@media (max-width: 900px) {
    #editForm td.ow_desc { display: none !important; }
    #editForm td.ow_label {
        width: 38% !important; max-width: none !important;
        font-size: 13px !important;
        padding: 10px 8px 10px 0 !important;
        vertical-align: middle !important;
        white-space: normal !important;
    }
    #editForm td.ow_value {
        width: 62% !important;
        font-size: 14px !important;
        padding: 8px 0 !important;
        vertical-align: middle !important;
    }
    #editForm td.ow_value input[type="text"],
    #editForm td.ow_value input[type="email"],
    #editForm td.ow_value input[type="password"],
    #editForm td.ow_value select,
    #editForm td.ow_value textarea {
        width: 100% !important; box-sizing: border-box !important;
        font-size: 14px !important; max-width: 100% !important;
    }
    /* Remove outer card padding on mobile */
    #editForm ~ .ow_right, #editForm ~ * { }
}
/* Hide email field everywhere on profile edit — it's on Account Settings page */
#editForm tr:has(input[name*="email"]) { display: none !important; }

/* ============================================================
   MOBILE SUBSCRIBE — style WITH template's flex layout
   The template sets display:flex on tr and flex:1 1 25% on td.
   We style within that framework for a clean 4-column grid.
   ============================================================ */
@media (max-width: 600px) {
    /* Remove the cop-out message */
    .subscribe-table-wrapper::before { display: none !important; }

    /* Make the table container scrollable */
    .subscribe-table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

    /* Work with the template's flex layout */
    .subscribe-table-wrapper .ow_subscribe_table {
        min-width: 380px !important;
    }

    /* Header row: tier name pills */
    .subscribe-table-wrapper .ow_subscribe_table tr:first-child {
        display: flex !important;
        gap: 0 !important;
    }
    .subscribe-table-wrapper .ow_subscribe_table tr:first-child th {
        flex: 1 !important;
        max-width: none !important;
        font-size: 12px !important;
        padding: 12px 6px !important;
        text-align: center !important;
        height: auto !important; line-height: 1.3 !important;
    }
    .subscribe-table-wrapper .ow_subscribe_table tr:first-child th:first-child {
        flex: 0 0 100px !important;
        font-size: 10px !important;
    }

    /* Feature rows */
    .subscribe-table-wrapper .ow_subscribe_table tr {
        display: flex !important;
        flex-wrap: nowrap !important;
    }
    .subscribe-table-wrapper .ow_subscribe_table td {
        flex: 1 !important;
        max-width: none !important;
        font-size: 12px !important;
        padding: 8px 4px !important;
        text-align: center !important;
        border-right: 1px solid #F3F4F6 !important;
        height: auto !important;
        line-height: 1.3 !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Feature label column: left-aligned, slightly wider */
    .subscribe-table-wrapper .ow_subscribe_table td:first-child {
        flex: 0 0 100px !important;
        max-width: 100px !important;
        text-align: left !important;
        justify-content: flex-start !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        color: #6B7280 !important;
        padding-left: 8px !important;
        background: #FAFAFA !important;
        border-right: 1px solid #E5E7EB !important;
    }
    /* Sub-headers */
    .subscribe-table-wrapper .ow_subscribe_table th[colspan] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        font-size: 9px !important;
        height: auto !important;
    }
    /* Pricing row */
    .subscribe-table-wrapper .ow_subscribe_table td.ow_membership_plans {
        padding: 10px 6px !important;
        font-size: 11px !important;
        height: auto !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
}

/* ============================================================
   DASHBOARD INDEX PAGE — hide "Customize this page" for users
   ============================================================ */
/* Admin can still customize via /index/customize URL directly */
body.base_index_page .ow_dnd_customize_btn_wrap,
body.base_index_page .ow_customize_wrap,
body.base_index_page .ow_dnd_action_controls,
body.base_index_page .ow_dnd_placeholder { display: none !important; }

/* ============================================================
   PROFILE EDIT — mobile improvements (column widths, checkbox layout)
   Uses #editForm ID which works on ALL browsers (no :has needed).
   ============================================================ */
@media (max-width: 900px) {
    /* Description column: zero width so it truly takes no space */
    #editForm td.ow_desc { display: none !important; width: 0 !important; }

    /* Label: 35% narrow, word-wrap at word boundaries */
    #editForm td.ow_label {
        width: 35% !important;
        max-width: 35% !important;
        font-size: 13px !important;
        padding: 10px 8px 10px 0 !important;
        vertical-align: top !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
    }
    /* Value: 65%, all inputs full-width */
    #editForm td.ow_value {
        width: 65% !important;
        max-width: 65% !important;
        font-size: 14px !important;
        padding: 8px 0 !important;
        vertical-align: top !important;
    }
    #editForm td.ow_value input:not([type="checkbox"]):not([type="radio"]),
    #editForm td.ow_value select,
    #editForm td.ow_value textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }

    /* ── Checkbox / radio: inline so text appears BESIDE the control ── */
    #editForm .ow_value label {
        display: inline-flex !important;
        align-items: flex-start !important;
        gap: 6px !important;
        margin-right: 8px !important;
        margin-bottom: 8px !important;
        line-height: 1.4 !important;
        cursor: pointer !important;
        max-width: 100% !important;
        word-break: break-word !important;
    }
    #editForm .ow_value input[type="checkbox"],
    #editForm .ow_value input[type="radio"] {
        display: inline-block !important;
        flex-shrink: 0 !important;
        margin: 2px 0 0 0 !important;
        width: 16px !important;
        height: 16px !important;
    }

    /* ── Birthday selects: 3 inline compact dropdowns ── */
    /* Cover various possible name patterns Oxwall uses */
    #editForm .ow_value select[name*="birth"],
    #editForm .ow_value select[name*="year"],
    #editForm .ow_value select[name*="month"],
    #editForm .ow_value select[name*="day"],
    #editForm .ow_value .ow_date_select select {
        display: inline-block !important;
        width: auto !important;
        max-width: 32% !important;
        min-width: 0 !important;
        font-size: 13px !important;
        padding: 6px 4px !important;
        margin-right: 2px !important;
    }

    /* ── Remove outer card padding on mobile so columns have more room ── */
    .ow_superwide.ow_automargin:has(#editForm) {
        padding: 8px !important;
    }
    /* Also remove margin on the table itself */
    #editForm.ow_table_1, table.ow_table_1.ow_form { margin: 0 !important; }
}

/* ============================================================
   ACCOUNT SETTINGS LINK — visible on profile edit desktop too
   ============================================================ */
/* Show a subtle "Account Settings" link near the change password area */
body.base_edit .ow_content > .ow_superwide.ow_automargin.elevate-cp-section::before {
    content: 'Manage your email and password →';
    display: block;
    text-align: right;
    font-size: 12px;
    color: #7C3AED;
    padding: 6px 0 2px;
}

/* ============================================================
   SUBSCRIBE — plan option styling: price prominent, duration secondary
   The label text from PHP is like "69 USD per 1 month(s) (recurring)".
   We style the label as a card with the price emphasized.
   ============================================================ */
.elevate-plan-list { list-style: none; margin: 0; padding: 0; }
.elevate-plan-item { margin-bottom: 8px; }
.elevate-plan-item label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: border-color 0.15s, background 0.15s !important;
    font-size: 14px !important;
    color: #374151 !important;
    line-height: 1.4 !important;
}
.elevate-plan-item label:hover {
    border-color: #7C3AED !important;
    background: #FEFCFF !important;
}
.elevate-plan-item input[type="radio"]:checked ~ label,
.elevate-plan-item label:has(input[type="radio"]:checked) {
    border-color: #7C3AED !important;
    background: #F5F3FF !important;
    font-weight: 600 !important;
}

/* Profile edit mobile scroll-select styles */
.elevate-mobile-select {
    width: 100% !important;
    min-height: 44px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    background: #F9FAFB !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
    color: #111827 !important;
    appearance: auto !important;
}
.elevate-mobile-select:focus {
    outline: none !important;
    border-color: #7C3AED !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1) !important;
}
.elevate-mobile-select-multi { min-height: 88px !important; }

/* ============================================================
   MOBILE PROFILE ACTION BUTTONS
   Two markups are styled here, in this order of preference:
     A) ElevateVN custom toolbar (ELEVATE_ADMIN_TOOLS_MCMP_ProfileActionToolbar)
        — `.elv-mprofile-actions` / `.elv-mprofile-btn`. Always rendered when
        elevate_admin_tools is active on mobile. Has guaranteed-visible
        fallback buttons (Send Message / Like / Bookmark).
     B) Stock SkaDate mobile toolbar (BASE_MCMP_ProfileActionToolbar) —
        `.owm_btn_list` markup. Styled as a fallback so the page still
        looks correct if our class.get_instance override isn't active.
   ============================================================ */
/* The component is normally rendered inside `<div class="owm_padding owm_profile_action_row">`
   in user_profile.html, which already supplies the outer padding. We keep the inner
   element padding-less so the two don't compound. */
.elv-mprofile-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: transparent;
}
.elv-mprofile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    height: 42px;
    padding: 0 10px;
    background: #F5F3FF;
    border: 1px solid #DDD6FE;
    border-radius: 21px;
    color: #7C3AED;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.elv-mprofile-btn:hover,
.elv-mprofile-btn:active {
    background: #EDE9FE;
    border-color: #7C3AED;
    color: #5B21B6;
    text-decoration: none;
    transform: translateY(-1px);
}
.elv-mprofile-btn.liked {
    background: #7C3AED;
    color: #ffffff;
    border-color: #7C3AED;
}
.elv-mprofile-btn-label {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Stock SkaDate mobile toolbar — fallback styling. */
.owm_profile_action_row {
    padding: 10px 12px !important;
    margin: 0 0 8px !important;
}
.owm_profile_action_row .owm_btn_list {
    display: flex !important;
    flex-wrap: nowrap !important;
    background: #ffffff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
    padding: 8px !important;
    gap: 6px !important;
    margin: 0 !important;
}
.owm_profile_action_row .owm_btn_list_item_wrap {
    display: flex !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
}
.owm_profile_action_row .owm_btn_list_item_wrap > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 40px !important;
    padding: 0 8px !important;
    background: #F5F3FF !important;
    border: 1px solid #DDD6FE !important;
    border-radius: 20px !important;
    color: #7C3AED !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}
.owm_profile_action_row .owm_btn_list_item_wrap > a .owm_btn_list_item_c {
    display: inline-block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}
.owm_profile_action_row .owm_btn_list_item_wrap > a:hover,
.owm_profile_action_row .owm_btn_list_item_wrap > a:active {
    background: #EDE9FE !important;
    border-color: #7C3AED !important;
    text-decoration: none !important;
}
/* "More" context dropdown styling — same pill look */
.owm_profile_action_row .owm_view_more,
.owm_profile_action_row .ow_context_action_block {
    display: flex !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    float: none !important;
}
.owm_profile_action_row .ow_context_action_block .ow_context_action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 40px !important;
    padding: 0 8px !important;
    background: #F5F3FF !important;
    border: 1px solid #DDD6FE !important;
    border-radius: 20px !important;
    color: #7C3AED !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
}

/* ============================================================
   SUBSCRIBE — DEFINITIVE row height fix (consolidates all conflicts)
   This block has the MOST SPECIFIC selectors to win over all earlier rules.
   ============================================================ */
/* Feature rows: strictly 46px */
html body .subscribe-table-wrapper table.ow_subscribe_table tr:not(.ow_tr_first):not(.ow_tr_delimiter):not(:first-child) td {
    height: 46px !important;
    line-height: 46px !important;
    padding: 0 16px !important;
    overflow: hidden !important;
    vertical-align: middle !important;
}
/* First column of feature rows */
html body .subscribe-table-wrapper table.ow_subscribe_table tr:not(.ow_tr_first):not(.ow_tr_delimiter):not(:first-child) td:first-child {
    height: 46px !important;
    line-height: 46px !important;
    padding: 0 0 0 20px !important;
}

/* ============================================================
   MOBILE SUBSCRIBE — remove sticky (iOS bug) + horizontal scroll
   ============================================================ */
@media (max-width: 900px) {
    /* Remove sticky — causes iOS bug where column overlaps content */
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table th:first-child,
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table td:first-child {
        position: static !important;
        box-shadow: none !important;
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
        font-size: 12px !important;
        padding: 10px 8px !important;
    }
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table tr:first-child th:first-child {
        font-size: 11px !important;
    }
    /* Clean horizontal scroll — just scroll, no sticky */
    .subscribe-table-wrapper {
        overflow-x: scroll !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .ow_automargin.subscribe-table-wrapper .ow_subscribe_table {
        min-width: 480px !important;
    }
}

/* ============================================================
   SUBSCRIBE — pivoted pricing rows (one row per duration, "$69" per tier)
   See ow_plugins/membership/views/controllers/subscribe_index.html.
   Replaces the previous single-row-with-verbose-radio-labels layout.
   ============================================================ */
.subscribe-table-wrapper .ow_subscribe_table .elevate-pricing-header {
    background: #F5F3FF !important;
    color: #5B21B6 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #EDE9FE !important;
}
.subscribe-table-wrapper .ow_subscribe_table tr.elevate-pricing-row td {
    height: auto !important;
    line-height: 1.4 !important;
    padding: 14px 12px !important;
    vertical-align: middle !important;
    background: #FBFAFF !important;
    border-right: 1px solid #EDE9FE !important;
}
.subscribe-table-wrapper .ow_subscribe_table tr.elevate-pricing-row td:last-child { border-right: none !important; }
.subscribe-table-wrapper .ow_subscribe_table td.elevate-pricing-label {
    font-weight: 600 !important;
    color: #374151 !important;
    font-size: 14px !important;
    text-align: left !important;
    background: #F9FAFB !important;
}
.elevate-price-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 8px 14px;
    border-radius: 10px;
    transition: background .12s ease;
    white-space: nowrap;     /* keep "$149" together — no mid-price line breaks */
    line-height: 1;
    text-align: center;
}
.elevate-price-label:hover { background: rgba(124,58,237,0.08); }
.elevate-price-radio { margin: 0 2px 0 0; accent-color: #7C3AED; flex: 0 0 auto; }
.elevate-price-amount {
    font-size: 17px;
    font-weight: 700;
    color: #111827;          /* classy near-black instead of deep violet */
    letter-spacing: -0.01em;
    white-space: nowrap;
    line-height: 1;
}
/* Defense-in-depth: even if a stale cached template emits the old recurring
   span before the new build lands, hide it so the cell stays clean. */
.elevate-price-recurring { display: none !important; }

.elevate-price-empty { color: #D1D5DB !important; font-size: 20px !important; }

/* Pricing cells need vertical centering and a touch more padding so the
   price tag doesn't sit flush against the cell border. */
.subscribe-table-wrapper .ow_subscribe_table td.elevate-pricing-cell {
    text-align: center !important;
    padding: 14px 12px !important;
    vertical-align: middle !important;
}

/* When the radio is selected, give its cell a subtle highlight via :has().
   The amount color stays near-black for both selected and unselected states —
   the cell background change is enough to indicate selection. */
.subscribe-table-wrapper .ow_subscribe_table td.elevate-pricing-cell:has(.elevate-price-radio:checked) {
    background: #F5F3FF !important;
    box-shadow: inset 0 0 0 2px #C4B5FD;
}
.subscribe-table-wrapper .ow_subscribe_table td.elevate-pricing-cell:has(.elevate-price-radio:checked) .elevate-price-amount {
    color: #1a1a2e;
}


/* ── Checkout button: breathe within its container ── */
.subscribe-table-wrapper + .clearfix.ow_stdmargin,
.subscribe-table-wrapper ~ .clearfix.ow_stdmargin {
    padding: 22px 24px 8px !important;
}
.subscribe-table-wrapper ~ .clearfix.ow_stdmargin .ow_right { margin-right: 0 !important; }
.subscribe-table-wrapper ~ .clearfix.ow_stdmargin button[name="subscribe"],
.subscribe-table-wrapper ~ .clearfix.ow_stdmargin input[name="subscribe"] {
    padding: 10px 28px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
}

/* "Pay securely with..." row needs the same breathing room on the right
   so the credit-card icon sits inside the white card, not flush at the edge. */
.subscribe-table-wrapper .ow_subscribe_table tr.ow_tr_last td {
    padding: 22px 24px !important;
    vertical-align: middle !important;
}

/* ============================================================
   MOBILE PROFILE EDIT — modern 2-column layout + native pickers
   ow_system_plugins/base/mobile/views/controllers/edit_index.html
   Renders each field as a stacked label-above-input layout. ElevateVN
   rebuilds it as a clean 2-column form (narrow left label, wide right
   input) and replaces the SkaDate radio-bubble stacks with native
   <select> elements so iOS/Android show their built-in scroll wheel
   picker — which is exactly the "modern scroll through and select"
   experience the design calls for.
   ============================================================ */
@media (max-width: 900px) {
    body .owm_field_container.owm_std_margin_bottom {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 14px;
        background: #ffffff;
        border: 1px solid #F3F4F6;
        border-radius: 12px;
        margin: 0 0 10px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }
    /* Sections (e.g. "About Me") stay full-width headings. */
    body .owm_field_container.owm_section {
        display: block !important;
        padding: 18px 14px 6px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    body .owm_field_container.owm_section .owm_section_label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #7C3AED;
    }
    body .owm_field_container.owm_section .owm_section_border {
        margin-top: 6px;
        border-top: 1px solid #E5E7EB;
    }

    /* Left column — labels, ~35% width */
    body .owm_field_container .owm_form_label {
        flex: 0 0 35%;
        max-width: 35%;
        margin: 0 !important;
        font-size: 12px;
        font-weight: 600;
        color: #4B5563;
        line-height: 1.35;
        padding-top: 11px;
        text-transform: none;
        letter-spacing: 0;
    }
    body .owm_field_container .owm_form_label label { color: inherit; font-weight: inherit; }

    /* Right column — inputs, ~65% width */
    body .owm_field_container .owm_field_wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Inputs / selects / textareas — modern pill styling */
    body .owm_field_container .owm_field_wrap input[type="text"],
    body .owm_field_container .owm_field_wrap input[type="email"],
    body .owm_field_container .owm_field_wrap input[type="number"],
    body .owm_field_container .owm_field_wrap input[type="tel"],
    body .owm_field_container .owm_field_wrap input[type="password"],
    body .owm_field_container .owm_field_wrap input[type="date"],
    body .owm_field_container .owm_field_wrap textarea,
    body .owm_field_container .owm_field_wrap select {
        width: 100%;
        height: 42px;
        padding: 0 12px;
        font-size: 15px;
        color: #111827;
        background: #F9FAFB;
        border: 1px solid #E5E7EB;
        border-radius: 10px;
        box-sizing: border-box;
        appearance: none;
        -webkit-appearance: none;
        transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }
    body .owm_field_container .owm_field_wrap textarea {
        height: auto;
        min-height: 96px;
        padding: 10px 12px;
        line-height: 1.4;
    }
    body .owm_field_container .owm_field_wrap input:focus,
    body .owm_field_container .owm_field_wrap select:focus,
    body .owm_field_container .owm_field_wrap textarea:focus {
        outline: none;
        border-color: #7C3AED;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(124,58,237,0.10);
    }
    /* Custom dropdown chevron — overrides the OS arrow we hid with appearance:none */
    body .owm_field_container .owm_field_wrap select {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3e%3cpath d='M1 1l6 6 6-6' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 12px;
        padding-right: 36px;
        cursor: pointer;
    }

    /* Multi-option fields converted to .elv-picker (single-select scroll wheel
       on mobile via the native <select>; see elevate_profile_edit.js). */
    body .owm_field_container .owm_field_wrap .elv-picker {
        position: relative;
    }
    body .owm_field_container .owm_field_wrap .elv-picker .elv-picker-current {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 42px;
        padding: 0 14px;
        background: #F9FAFB;
        border: 1px solid #E5E7EB;
        border-radius: 10px;
        font-size: 15px;
        color: #111827;
    }
    body .owm_field_container .owm_field_wrap .elv-picker .elv-picker-current::after {
        content: '';
        width: 14px;
        height: 8px;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3e%3cpath d='M1 1l6 6 6-6' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
    }
    /* The original radio inputs we hide once .elv-picker has taken over.
       They live in the DOM purely so form post-back continues to work via
       JS (which copies the picked value back into the right radio). */
    body .owm_field_container .owm_field_wrap.elv-radio-replaced > *:not(.elv-picker):not(.owm_error_txt) {
        display: none !important;
    }

    /* Save button — full width pill */
    body .owm_btn_wide.owm_std_margin_top {
        margin-top: 18px !important;
    }
    body .owm_btn_wide.owm_std_margin_top button,
    body .owm_btn_wide.owm_std_margin_top input[type="submit"] {
        width: 100%;
        height: 48px;
        background: #7C3AED;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(124,58,237,0.30);
    }
    body .owm_btn_wide.owm_std_margin_top button:hover,
    body .owm_btn_wide.owm_std_margin_top input[type="submit"]:hover {
        background: #6D28D9;
    }

    /* The error text spans full width below the row. */
    body .owm_field_container .owm_error_txt {
        flex-basis: 100%;
        order: 99;
        margin: 6px 0 0;
        color: #DC2626;
        font-size: 12px;
    }
}

/* ============================================================
   MOBILE SIGN-IN page — full redesign.
   On the OWM mobile sign-in route the BASE_CMP_SignIn component is
   actually rendered TWICE: once in #main > #content (from the controller
   view template), and once in #right > .owm_sidebar_right_cont (because
   OW_MobileMasterPage::onBeforeRender() unconditionally adds it as the
   master-page 'signIn' variable). The right-sidebar copy is the one the
   user was seeing "squeezed on the right half".
   Fix:
     * Hide the right-sidebar copy entirely on this route.
     * Style #main as a clean white card centered on the device width.
     * Style the form with modern pill inputs + violet submit, matching
       the desktop sign-in card and /account/settings.
   ============================================================ */
body.base_sign_in #right,
body.base_sign_in #left {
    display: none !important;
}
body.base_sign_in.owm_sidebar_right_active #main,
body.base_sign_in.owm_sidebar_left_active  #main {
    margin: 0 !important;
    position: static !important;
    right: auto !important;
    left: auto !important;
}
body.base_sign_in #main {
    background: #ffffff !important;
    width: 100% !important;
    margin: 0 !important;
    position: static !important;
}
body.base_sign_in #main #content {
    padding: 24px 20px 40px;
    background: #ffffff;
}
body.base_sign_in #main header { background: #ffffff; }

@media (max-width: 900px) {
    body .owm_login_form {
        max-width: 420px;
        margin: 8px auto 0;
        padding: 24px 20px;
        background: #ffffff;
        border: 1px solid #F3F4F6;
        border-radius: 14px;
        box-shadow: 0 2px 14px rgba(0,0,0,0.06);
        box-sizing: border-box;
    }
    /* Add the elevate wordmark above the form on the mobile sign-in route. */
    body.base_sign_in #main #content::before {
        content: 'elevate';
        display: block;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
        font-size: 26px;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: #1a1a2e;
        text-align: center;
        margin: 12px auto 18px;
    }

    body .owm_login_form .owm_login_txt {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
    }
    body .owm_login_form .owm_forgot_txt {
        font-size: 13px;
        color: #7C3AED;
        text-decoration: none;
    }
    body .owm_login_form .owm_forgot_txt:hover { text-decoration: underline; }

    body .owm_login_form .owm_login_field {
        margin-top: 14px;
    }
    body .owm_login_form .owm_login_field input[type="text"],
    body .owm_login_form .owm_login_field input[type="email"],
    body .owm_login_form .owm_login_field input[type="password"] {
        width: 100%;
        height: 46px;
        padding: 0 14px;
        font-size: 16px; /* >=16px prevents iOS auto-zoom on focus */
        color: #111827;
        background: #F9FAFB;
        border: 1px solid #E5E7EB;
        border-radius: 10px;
        box-sizing: border-box;
        appearance: none;
        -webkit-appearance: none;
    }
    body .owm_login_form .owm_login_field input:focus {
        outline: none;
        border-color: #7C3AED;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(124,58,237,0.10);
    }
    body .owm_login_form .owm_btn_wide.owm_std_margin_top button,
    body .owm_login_form .owm_btn_wide.owm_std_margin_top input[type="submit"] {
        width: 100%;
        height: 50px;
        padding: 0 32px;       /* Comfortable horizontal padding around text. */
        margin-top: 18px;
        background: #7C3AED;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.02em;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(124,58,237,0.30);
    }

    /* Language selector below the form — give it the same modern shape. */
    body .owm_field_wrap.owm_select_wrap select {
        height: 42px;
        padding: 0 14px;
        font-size: 15px;
        background: #F9FAFB;
        border: 1px solid #E5E7EB;
        border-radius: 10px;
        appearance: none;
        -webkit-appearance: none;
    }
}

/* ============================================================
   PROFILE EDIT — birthdate picker + match-age dual-thumb range +
   radio-to-native-select pickers. Applied on BOTH the desktop edit
   table (.ow_value cells) AND the OWM mobile form (.owm_field_wrap),
   so the consistent UI shows regardless of which context the site is
   in. The JS that wires these up lives in
   ow_plugins/elevate_admin_tools/static/js/profile_edit_picker.js.
   ============================================================ */

/* Universal picker chrome — applies in any viewport, any context, so
   the conversions are visible on the desktop /edit form too (which is
   what users on phones currently see since the site is in desktop
   context everywhere). */
body .ow_value .elv-picker-date,
body .owm_field_wrap .elv-picker-date {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    font-size: 15px;
    color: #111827;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}
body .ow_value .elv-picker-date:focus,
body .owm_field_wrap .elv-picker-date:focus {
    outline: none;
    border-color: #7C3AED;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.10);
}

body .ow_value .elv-picker-select,
body .owm_field_wrap .elv-picker-select {
    width: 100%;
    height: 42px;
    padding: 0 36px 0 12px;
    font-size: 15px;
    color: #111827;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3e%3cpath d='M1 1l6 6 6-6' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    cursor: pointer;
}

/* Range slider chrome. */
body .ow_value .elv-range-slider,
body .owm_field_wrap .elv-range-slider { padding: 4px 0 2px; }
body .ow_value .elv-range-readout,
body .owm_field_wrap .elv-range-readout {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
}
body .ow_value .elv-range-readout .elv-range-dash,
body .owm_field_wrap .elv-range-readout .elv-range-dash {
    color: #9CA3AF;
    margin: 0 4px;
}
body .ow_value .elv-range-readout .elv-range-unit,
body .owm_field_wrap .elv-range-readout .elv-range-unit {
    color: #6B7280;
    font-weight: 500;
    font-size: 12px;
}
body .ow_value .elv-range-track,
body .owm_field_wrap .elv-range-track {
    position: relative;
    height: 30px;
    margin: 0 12px;
}
body .ow_value .elv-range-track::before,
body .owm_field_wrap .elv-range-track::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 4px;
    margin-top: -2px;
    background: #E5E7EB;
    border-radius: 2px;
    pointer-events: none;
}
body .ow_value .elv-range-fill,
body .owm_field_wrap .elv-range-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    background: #7C3AED;
    border-radius: 2px;
    pointer-events: none;
}
body .ow_value .elv-range-input,
body .owm_field_wrap .elv-range-input {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 30px;
    margin: -15px 0 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    z-index: 2;
}
body .ow_value .elv-range-input::-webkit-slider-runnable-track,
body .owm_field_wrap .elv-range-input::-webkit-slider-runnable-track {
    background: transparent;
    height: 30px;
}
body .ow_value .elv-range-input::-moz-range-track,
body .owm_field_wrap .elv-range-input::-moz-range-track {
    background: transparent;
    height: 30px;
}
body .ow_value .elv-range-input::-webkit-slider-thumb,
body .owm_field_wrap .elv-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #7C3AED;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    cursor: pointer;
    pointer-events: auto;
    margin-top: 0;
}
body .ow_value .elv-range-input::-moz-range-thumb,
body .owm_field_wrap .elv-range-input::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #7C3AED;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    cursor: pointer;
    pointer-events: auto;
}

/* DESKTOP-only narrow viewport: also redesign the edit-form table itself
   so labels are narrower than values. ow_label = 35%, ow_value = 65%. */
@media (max-width: 900px) {
    body.base_edit .ow_table_1.ow_form,
    body.elevate_edit_page .ow_table_1.ow_form { width: 100%; }
    body.base_edit .ow_table_1.ow_form td.ow_desc,
    body.elevate_edit_page .ow_table_1.ow_form td.ow_desc { display: none !important; }
    body.base_edit .ow_table_1.ow_form td.ow_label,
    body.elevate_edit_page .ow_table_1.ow_form td.ow_label {
        width: 35% !important;
        font-size: 13px !important;
        color: #4B5563 !important;
        padding: 12px 10px !important;
        vertical-align: top !important;
    }
    body.base_edit .ow_table_1.ow_form td.ow_value,
    body.elevate_edit_page .ow_table_1.ow_form td.ow_value {
        width: 65% !important;
        padding: 10px 12px !important;
        vertical-align: top !important;
    }
}

/* ============================================================
   MOBILE PROFILE EDIT — supplementary OWM-only rules
   ============================================================ */
@media (max-width: 900px) {
    /* Native HTML5 date input (birthdate). Style as a pill matching
       other inputs on the page. */
    body .owm_field_wrap .elv-picker-date {
        width: 100%;
        height: 42px;
        padding: 0 12px;
        font-size: 15px;
        color: #111827;
        background: #F9FAFB;
        border: 1px solid #E5E7EB;
        border-radius: 10px;
        box-sizing: border-box;
        appearance: none;
        -webkit-appearance: none;
    }
    body .owm_field_wrap .elv-picker-date:focus {
        outline: none;
        border-color: #7C3AED;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(124,58,237,0.10);
    }

    /* Dual-thumb range slider for match_age. The two <input type="range">
       overlay on the same track; thumbs are styled, the track itself is
       the .elv-range-track ::before, and the active region between the
       two thumbs is .elv-range-fill. */
    body .owm_field_wrap .elv-range-slider {
        padding: 4px 0 2px;
    }
    body .owm_field_wrap .elv-range-readout {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 12px;
    }
    body .owm_field_wrap .elv-range-readout .elv-range-dash {
        color: #9CA3AF;
        margin: 0 4px;
    }
    body .owm_field_wrap .elv-range-readout .elv-range-unit {
        color: #6B7280;
        font-weight: 500;
        font-size: 12px;
    }
    body .owm_field_wrap .elv-range-track {
        position: relative;
        height: 30px;
        margin: 0 12px;
    }
    body .owm_field_wrap .elv-range-track::before {
        content: '';
        position: absolute;
        left: 0; right: 0; top: 50%;
        height: 4px;
        margin-top: -2px;
        background: #E5E7EB;
        border-radius: 2px;
        pointer-events: none;
    }
    body .owm_field_wrap .elv-range-fill {
        position: absolute;
        top: 50%;
        height: 4px;
        margin-top: -2px;
        background: #7C3AED;
        border-radius: 2px;
        pointer-events: none;
    }
    body .owm_field_wrap .elv-range-input {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 30px;
        margin: -15px 0 0;
        background: transparent;
        -webkit-appearance: none;
        appearance: none;
        pointer-events: none;            /* let track ::before pass through */
        z-index: 2;
    }
    body .owm_field_wrap .elv-range-input::-webkit-slider-runnable-track {
        background: transparent;
        height: 30px;
    }
    body .owm_field_wrap .elv-range-input::-moz-range-track {
        background: transparent;
        height: 30px;
    }
    body .owm_field_wrap .elv-range-input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #ffffff;
        border: 2px solid #7C3AED;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        cursor: pointer;
        pointer-events: auto;
        margin-top: 0;
    }
    body .owm_field_wrap .elv-range-input::-moz-range-thumb {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #ffffff;
        border: 2px solid #7C3AED;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        cursor: pointer;
        pointer-events: auto;
    }

    /* Picker select (built from a radio group) styled like the rest. */
    body .owm_field_wrap .elv-picker-select {
        width: 100%;
        height: 42px;
        padding: 0 36px 0 12px;
        font-size: 15px;
        color: #111827;
        background: #F9FAFB;
        border: 1px solid #E5E7EB;
        border-radius: 10px;
        box-sizing: border-box;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3e%3cpath d='M1 1l6 6 6-6' stroke='%237C3AED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 12px;
        cursor: pointer;
    }
}

/* ============================================================
   MOBILE SUBSCRIBE PAGE — vertical tier cards
   See ow_plugins/membership/mobile/views/controllers/subscribe_index.html.
   Mirrored here so that if the inline {style} block in that template
   ever fails to compile (Smarty cache, plugin templates_c eviction race,
   etc.) the page still renders correctly.
   ============================================================ */
.elv-sub { padding: 16px 14px 32px; background: #ffffff; }
.elv-sub-current {
    background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
    color: #fff;
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(124,58,237,0.25);
}
.elv-sub-current-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
    margin-bottom: 4px;
}
.elv-sub-current-value { font-size: 18px; font-weight: 700; }
.elv-sub-current-link {
    color: #fff;
    text-decoration: underline;
    font-size: 12px;
    margin-top: 6px;
    display: inline-block;
}
.elv-tier-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 18px 16px;
    margin-bottom: 16px;
    position: relative;
    box-sizing: border-box;
    width: 100%;
}
.elv-tier-card.is-current { border-color: #7C3AED; box-shadow: 0 4px 16px rgba(124,58,237,0.12); }
.elv-tier-card.is-premium { background: linear-gradient(180deg, #FFFFFF 0%, #FAF8FF 100%); }
.elv-tier-card.is-diamond {
    background: linear-gradient(180deg, #FFFFFF 0%, #F0F6FF 100%);
    border-color: #DBE7FF;
}
.elv-tier-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.elv-tier-name {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
}
.elv-tier-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 999px;
}
.elv-tier-badge.current { background: #7C3AED; color: #fff; }
.elv-tier-badge.popular { background: #FEF3C7; color: #92400E; }
.elv-tier-badge.premium { background: #EDE9FE; color: #6D28D9; }
.elv-tier-desc {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.5;
    margin: 0 0 14px;
}
.elv-plan-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.elv-plan-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    color: #111827;
    text-decoration: none;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s, border-color .12s;
    box-sizing: border-box;
}
.elv-plan-link:active,
.elv-plan-link:hover {
    background: #F3F0FF;
    border-color: #C4B5FD;
    text-decoration: none;
}
.elv-plan-period { font-weight: 600; color: #374151; }
.elv-plan-price {
    font-weight: 700;
    color: #111827;
    font-size: 15px;
    white-space: nowrap;
}
.elv-plan-recurring { display: none !important; } /* per design — no /auto-renew */
.elv-no-plans {
    padding: 14px 16px;
    background: #F9FAFB;
    border: 1px dashed #E5E7EB;
    border-radius: 10px;
    font-size: 13px;
    color: #6B7280;
    text-align: center;
}
.elv-tier-info-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    color: #7C3AED;
    text-decoration: none;
    font-weight: 600;
}
.elv-tier-info-link:hover { text-decoration: underline; }

/* ============================================================
   ElevateVN — multiselect picker chrome (May 2026)
   Applies to .elv-picker-multiselect produced by profile_edit_picker.js
   when converting <ul class="ow_checkbox_group"> to <select multiple>.
   On iOS Safari this surfaces the native checkmark-list picker; on
   Android it surfaces the multi-select dialog — both feel like a
   native scroll-to-select UI rather than the original checkbox pile.
   ============================================================ */
body .ow_value .elv-picker-multiselect,
body .owm_field_wrap .elv-picker-multiselect {
    width: 100%;
    min-height: 42px;
    padding: 6px 10px;
    font-size: 14px;
    color: #111827;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1.4;
}
body .ow_value .elv-picker-multiselect:focus,
body .owm_field_wrap .elv-picker-multiselect:focus {
    outline: none;
    border-color: #7C3AED;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.10);
}
body .ow_value .elv-picker-multiselect option,
body .owm_field_wrap .elv-picker-multiselect option {
    padding: 6px 4px;
}
body .ow_value .elv-picker-multiselect option:checked,
body .owm_field_wrap .elv-picker-multiselect option:checked {
    background: #7C3AED linear-gradient(0deg, #7C3AED 0%, #7C3AED 100%);
    color: #fff;
}

/* ============================================================
   PROFILE EDIT — definitive 35/65 column split on narrow viewports.
   Belt-and-suspenders rule with max specificity so it wins over every
   earlier conflicting rule + the inline `style="width:40%;"` SkaDate
   emits on each <td class="ow_label">.
   ============================================================ */
@media (max-width: 900px) {
    html body.elevate_edit_page form[name="editForm"] table.ow_form td.ow_desc,
    html body form[name="editForm"] table.ow_form td.ow_desc {
        display: none !important;
    }
    html body.elevate_edit_page form[name="editForm"] table.ow_form td.ow_label,
    html body form[name="editForm"] table.ow_form td.ow_label {
        width: 35% !important;
        max-width: 35% !important;
        font-size: 13px !important;
        color: #4B5563 !important;
        padding: 12px 10px !important;
        vertical-align: top !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    html body.elevate_edit_page form[name="editForm"] table.ow_form td.ow_value,
    html body form[name="editForm"] table.ow_form td.ow_value {
        width: 65% !important;
        max-width: 65% !important;
        padding: 10px 12px !important;
        vertical-align: top !important;
    }
    html body form[name="editForm"] table.ow_form td.ow_value input[type="text"],
    html body form[name="editForm"] table.ow_form td.ow_value input[type="email"],
    html body form[name="editForm"] table.ow_form td.ow_value input[type="password"],
    html body form[name="editForm"] table.ow_form td.ow_value select,
    html body form[name="editForm"] table.ow_form td.ow_value textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   DESKTOP SUBSCRIBE — Checkout button needs padding from card edge.

   ROOT CAUSE OF EVERY PREVIOUS FAILURE: the live DOM is
       <div class="subscribe-table-wrapper">
         <table class="ow_subscribe_table">…</table>
         <div class="clearfix ow_stdmargin"> ← checkout button row
           <div class="ow_right"> <span class="ow_button"> Checkout
   So .clearfix.ow_stdmargin is a CHILD of .subscribe-table-wrapper,
   NOT a sibling. The combinators `+` and `~` never matched because
   no such sibling exists. Use the child combinator `>` instead.
   ============================================================ */
.subscribe-table-wrapper > .clearfix.ow_stdmargin {
    padding: 22px 28px 22px 0 !important;
    box-sizing: border-box;
}
.subscribe-table-wrapper > .clearfix.ow_stdmargin .ow_right {
    float: right !important;
    margin-right: 0 !important;
}

/* ============================================================
   MOBILE SUBSCRIBE — PHP-rendered card stack (May 2026 v2).
   Cards are emitted server-side by subscribe_index.html alongside the
   desktop table. CSS gates which is visible based on viewport width.

   ACTUAL DOM NESTING (verified from the live page):
     <form id="form_membership_subscribe-form">
       <div class="subscribe-table-wrapper">
         <div class="elv-msub-cards">   ← mobile cards
         <table class="ow_subscribe_table">  ← desktop comparison
         <div class="clearfix ow_stdmargin">  ← Checkout button row
       </div>
     </form>
   So all the things we toggle are DIRECT CHILDREN of .subscribe-table-wrapper.
   ============================================================ */
.elv-msub-cards {
    display: none;
    padding: 16px 14px 24px;
    background: #ffffff;
}
@media (max-width: 720px) {
    .elv-msub-cards { display: block; }
    /* Hide the desktop comparison table + checkout-button row +
       explanatory ::before note when the cards are on-page. */
    .subscribe-table-wrapper:has(.elv-msub-cards) > table.ow_subscribe_table,
    .subscribe-table-wrapper:has(.elv-msub-cards) > .clearfix.ow_stdmargin {
        display: none !important;
    }
    .subscribe-table-wrapper:has(.elv-msub-cards)::before {
        display: none !important;
    }
}
.elv-msub-current {
    background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 4px 14px rgba(124,58,237,0.25);
}
.elv-msub-current .elv-msub-current-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
    margin-bottom: 2px;
}
.elv-msub-current strong { font-size: 17px; font-weight: 700; }
.elv-msub-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.elv-msub-card-name { margin: 0; font-size: 19px; font-weight: 700; color: #111827; letter-spacing: -0.01em; }
.elv-msub-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 20px 16px;
    margin: 0 0 16px;
    box-sizing: border-box;
}
.elv-msub-card.is-premium { background: linear-gradient(180deg, #FFFFFF 0%, #FAF8FF 100%); }
.elv-msub-card.is-diamond { background: linear-gradient(180deg, #FFFFFF 0%, #F0F6FF 100%); border-color: #DBE7FF; }
.elv-msub-card.is-current { border-color: #7C3AED; box-shadow: 0 4px 16px rgba(124,58,237,0.12); }
.elv-msub-card h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
}
.elv-msub-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}
.elv-msub-badge.current { background: #7C3AED; color: #fff; }
.elv-msub-badge.popular { background: #FEF3C7; color: #92400E; }
.elv-msub-badge.top     { background: #EDE9FE; color: #6D28D9; }
.elv-msub-card-tagline {
    margin: 6px 0 14px;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.5;
}
.elv-msub-features {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
.elv-msub-feature {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    padding: 4px 0;
    line-height: 1.4;
}
.elv-msub-feature.is-on::before {
    content: '✓';
    color: #16A34A;
    font-weight: 700;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}
.elv-msub-feature.is-off::before {
    content: '—';
    color: #D1D5DB;
    font-weight: 700;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}
.elv-msub-feature.is-off { color: #9CA3AF; }
.elv-msub-prices {
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #F3F4F6;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.elv-msub-price-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: #F5F3FF;
    border: 1px solid #DDD6FE;
    border-radius: 12px;
    color: #5B21B6;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s, border-color .12s;
    box-sizing: border-box;
}
.elv-msub-price-btn:hover,
.elv-msub-price-btn:active {
    background: #EDE9FE;
    border-color: #7C3AED;
    text-decoration: none;
}
.elv-msub-price-btn .elv-msub-period { color: #374151; font-weight: 600; }
.elv-msub-price-btn .elv-msub-amount { font-size: 17px; color: #111827; }
.elv-msub-empty {
    padding: 14px 16px;
    background: #F9FAFB;
    border: 1px dashed #E5E7EB;
    border-radius: 10px;
    font-size: 13px;
    color: #6B7280;
    text-align: center;
}

/* ============================================================
   JOIN PAGE — sizing tweaks.
   IMPORTANT: the actual body class is `base_user_join`, NOT
   `base_join_page` (verified from live HTML). Earlier rules using
   `base_join_page` never matched.
   ============================================================ */
@media (min-width: 901px) {
    body.base_user_join .ow_superwide.ow_automargin,
    body.base_user_join form[name="joinForm"] {
        max-width: 640px !important;
        margin: 0 auto !important;
    }
}
@media (max-width: 900px) {
    /* Reset all the page-container padding that's pushing the form off
       the right edge of the screen. Force everything to fit the viewport. */
    html, body.base_user_join { overflow-x: hidden; max-width: 100% !important; }
    body.base_user_join .ow_page_wrap,
    body.base_user_join .ow_page_padding,
    body.base_user_join .ow_page_container,
    body.base_user_join .ow_canvas,
    body.base_user_join .ow_page,
    body.base_user_join .ow_content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    body.base_user_join .ow_superwide.ow_automargin {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }
    body.base_user_join table.ow_form,
    body.base_user_join .ow_table_1.ow_form {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }
    body.base_user_join table.ow_form td.ow_label,
    body.base_user_join .ow_table_1.ow_form td.ow_label {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 4px 4px !important;
        font-size: 13px !important;
    }
    body.base_user_join table.ow_form td.ow_value,
    body.base_user_join .ow_table_1.ow_form td.ow_value {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 4px 12px !important;
    }
    body.base_user_join table.ow_form tr,
    body.base_user_join .ow_table_1.ow_form tr {
        display: block !important;
        margin-bottom: 8px;
    }
    body.base_user_join table.ow_form td.ow_desc,
    body.base_user_join .ow_table_1.ow_form td.ow_desc { display: none !important; }
    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,
    body.base_user_join textarea {
        width: 100% !important;
        max-width: 100% !important;
        height: 46px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }
    body.base_user_join textarea { height: auto !important; min-height: 96px !important; }
}

/* ============================================================
   PREMIUM-LOCK MODAL — "Recently viewed me" blurred photos and
   any other premium-gated thumbnail. Click → modal explains the
   feature is premium → button to /membership/subscribe.
   ============================================================ */
.elv-premium-lock-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 5, 32, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    animation: elv-lock-fade .15s ease-out;
}
@keyframes elv-lock-fade { from { opacity: 0; } to { opacity: 1; } }
.elv-premium-lock-modal {
    background: #ffffff;
    border-radius: 18px;
    max-width: 420px;
    width: 100%;
    padding: 32px 28px 28px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.35);
    text-align: center;
    position: relative;
    box-sizing: border-box;
}
.elv-premium-lock-modal .elv-lock-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F3F4F6;
    border: none;
    color: #6B7280;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.elv-premium-lock-modal .elv-lock-close:hover { background: #E5E7EB; color: #1a1a2e; }
.elv-premium-lock-modal .elv-lock-icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 16px;
    color: #7C3AED;
}
.elv-premium-lock-modal h3 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
}
.elv-premium-lock-modal p {
    margin: 0 0 22px;
    font-size: 14px;
    color: #6B7280;
    line-height: 1.55;
}
.elv-premium-lock-modal .elv-lock-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    padding: 0 24px;
    background: #7C3AED;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(124,58,237,0.30);
    box-sizing: border-box;
}
.elv-premium-lock-modal .elv-lock-cta:hover { background: #6D28D9; text-decoration: none; }
.elv-premium-lock-modal .elv-lock-dismiss {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    color: #9CA3AF;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
}
.elv-premium-lock-modal .elv-lock-dismiss:hover { color: #6B7280; }

/* ============================================================
   ElevateVN — final overrides (May 2026 session, last in file
   so they win all cascade ties at equal specificity).
   ============================================================ */

/* PROFILE EDIT — 35/65 columns at every viewport (desktop + mobile).
   The persistent "still backwards" bug was caused by THREE compounding
   factors, finally diagnosed by reading the live page CSS:

   1. Default <table> layout algorithm is `table-layout: auto`, which
      means the browser allocates column widths based on CONTENT, not
      the `width: 35%` CSS hint we provide. Long input/checkbox content
      in the value column pushes it wider, label gets squeezed.
   2. An earlier @media (max-width: 900px) block sets the table itself
      to `display: block !important`, which destroys the table layout
      entirely and falls back to anonymous block behaviour where the
      percentage widths are computed relative to a 100%-wide TR — not
      what we want either.
   3. The SkaDate inline `style="width:40%;"` on every <td class="ow_label">
      gives label a literal 40% width when no !important rule beats it.

   FIX: force `table-layout: fixed` so column widths come from the
   <td> width rules (not content); reset the @media block-display
   override so the table stays as a table; apply 35%/65% with
   maximum specificity and !important on every viewport. */
html body form[name="editForm"] table.ow_table_1,
html body[class] form[name="editForm"] table.ow_table_1,
html body #editForm table.ow_table_1 {
    table-layout: fixed !important;
    display: table !important;
    width: 100% !important;
}
html body form[name="editForm"] table.ow_table_1 tbody,
html body #editForm table.ow_table_1 tbody {
    display: table-row-group !important;
}
html body form[name="editForm"] table.ow_table_1 tr,
html body #editForm table.ow_table_1 tr {
    display: table-row !important;
    width: auto !important;
}
html body form[name="editForm"] table.ow_table_1 td.ow_label,
html body[class] form[name="editForm"] table.ow_table_1 td.ow_label,
html body #editForm table.ow_table_1 td.ow_label {
    display: table-cell !important;
    width: 35% !important;
    max-width: 35% !important;
    min-width: 0 !important;
}
html body form[name="editForm"] table.ow_table_1 td.ow_value,
html body[class] form[name="editForm"] table.ow_table_1 td.ow_value,
html body #editForm table.ow_table_1 td.ow_value {
    display: table-cell !important;
    width: 65% !important;
    max-width: 65% !important;
    min-width: 0 !important;
}
html body form[name="editForm"] table.ow_table_1 td.ow_desc,
html body[class] form[name="editForm"] table.ow_table_1 td.ow_desc,
html body #editForm table.ow_table_1 td.ow_desc {
    display: none !important;
}
html body form[name="editForm"] table.ow_table_1 td[class*="ow_label"][style] {
    width: 35% !important;
    max-width: 35% !important;
}

/* HIDE the "Account Type" / "I am a" row entirely. The user picks
   their gender once at signup and can never change it; surfacing the
   field on the edit form is confusing and lets users accidentally
   flip it. Hide both the row whose first input is name="accountType"
   AND the row that immediately follows it (the ow_tr_delimiter
   spacer the template renders right after the accountType row). */
html body form[name="editForm"] tr:has([name="accountType"]),
html body form[name="editForm"] tr:has([name="accountType"]) + tr.ow_tr_delimiter {
    display: none !important;
}

/* HAMBURGER NAV — hide the floating profile dock while the menu is
   open so it doesn't sit on top of the nav drawer overlay. Body class
   `ow_menu_active` is toggled by elevate/master_pages/general.html. */
@media (max-width: 900px) {
    body.ow_menu_active .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap {
        display: none !important;
    }
}

/* PROFILE EDIT — "Interests" stays as the original checkbox list.
   The picker JS skips this label, but we also add a small visual
   tweak so the checkbox group looks polished. */
form[name="editForm"] .elv-picker-skipped .ow_checkbox_group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
    padding: 0 !important;
    margin: 0 !important;
}
form[name="editForm"] .elv-picker-skipped .ow_checkbox_group > li {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    gap: 4px !important;
    background: #F5F3FF;
    border: 1px solid #DDD6FE;
    border-radius: 999px;
    padding: 6px 12px;
    color: #5B21B6;
    font-size: 13px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
form[name="editForm"] .elv-picker-skipped .ow_checkbox_group > li:has(input:checked) {
    background: #7C3AED;
    border-color: #7C3AED;
    color: #ffffff;
}
form[name="editForm"] .elv-picker-skipped .ow_checkbox_group > li input[type="checkbox"] {
    accent-color: #ffffff;
    margin: 0 !important;
}

/* ============================================================
   "I want to be featured" link in the Hot List widget footer.
   Restyled per design feedback (May 2026): proper spacing, font,
   violet brand color. Click handler (premium-lock modal) lives in
   premium_lock_modal.js.
   ============================================================ */
.hotlist_footer {
    margin-top: 12px;
    padding: 10px 0;
    text-align: center;
    border-top: 1px solid #F3F4F6;
}
.hotlist_footer a,
.hotlist_footer a:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    background: #F5F3FF;
    border: 1px solid #DDD6FE;
    border-radius: 999px;
    color: #5B21B6 !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    transition: background .15s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.hotlist_footer a::before {
    content: '★';
    font-size: 11px;
    line-height: 1;
    color: #7C3AED;
}
.hotlist_footer a:hover {
    background: #EDE9FE;
    border-color: #7C3AED;
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* ============================================================
   Mobile subscribe card — selected-price button highlight.
   The JS adds .is-selected to the picked price button.
   ============================================================ */
.elv-msub-price-btn.is-selected {
    background: #7C3AED !important;
    border-color: #7C3AED !important;
    color: #ffffff !important;
}
.elv-msub-price-btn.is-selected .elv-msub-period,
.elv-msub-price-btn.is-selected .elv-msub-amount {
    color: #ffffff !important;
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER ★
   Everything below this comment is appended LAST and uses the highest
   specificity available without inline styles. These rules win every
   cascade conflict against the legacy / earlier-in-this-file blocks
   targeting the same elements. Modify here when fixing layout bugs;
   leave earlier rule blocks alone.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   PROFILE EDIT — flexbox 35/65 columns (definitive, May 2026 v4).
   Six earlier @media (max-width: 900px) blocks set conflicting
   display: block / table-cell / table-row on the form table. This
   block uses `form#editForm` (ID selector) so its specificity beats
   every earlier `body:has(form[name="editForm"])` variant, and uses
   flexbox so the row layout doesn't depend on the browser's table
   algorithm at all.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    html body form#editForm,
    html body form#editForm table.ow_table_1,
    html body form#editForm table.ow_table_1 tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Data rows (label + value). Flex layout — 35% / 65%. */
    html body form#editForm table.ow_table_1 tr {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        padding: 10px 8px !important;
        margin: 0 !important;
        background: transparent !important;
        border-bottom: 1px solid #F3F4F6 !important;
        box-sizing: border-box !important;
    }

    /* Section header rows (e.g. "Basic", "Lifestyle") stay full-width. */
    html body form#editForm table.ow_table_1 tr.ow_tr_first {
        display: block !important;
        padding: 14px 0 6px !important;
        border-bottom: none !important;
    }
    html body form#editForm table.ow_table_1 tr.ow_tr_first th {
        display: block !important;
        padding: 8px 12px !important;
        background: #F5F3FF !important;
        color: #7C3AED !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        text-align: left !important;
        border-left: 3px solid #7C3AED !important;
        border-radius: 4px !important;
    }

    /* Delimiter rows — collapse to a thin spacer. */
    html body form#editForm table.ow_table_1 tr.ow_tr_delimiter {
        display: block !important;
        height: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    html body form#editForm table.ow_table_1 tr.ow_tr_delimiter td {
        display: none !important;
    }

    /* LEFT column — labels — exactly 35%. */
    html body form#editForm table.ow_table_1 td.ow_label {
        display: block !important;
        flex: 0 0 35% !important;
        max-width: 35% !important;
        width: 35% !important;
        padding: 4px 0 !important;
        margin: 0 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #4B5563 !important;
        background: transparent !important;
        text-align: left !important;
        word-wrap: break-word !important;
        line-height: 1.4 !important;
    }
    html body form#editForm table.ow_table_1 td.ow_label label,
    html body form#editForm table.ow_table_1 td.ow_label > label {
        display: inline !important;
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
    }

    /* RIGHT column — values — exactly 65%. */
    html body form#editForm table.ow_table_1 td.ow_value {
        display: block !important;
        flex: 1 1 65% !important;
        max-width: 65% !important;
        width: 65% !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 14px !important;
        background: transparent !important;
        text-align: left !important;
        word-wrap: break-word !important;
        min-width: 0 !important;
    }

    /* Description column — hidden on mobile. */
    html body form#editForm table.ow_table_1 td.ow_desc {
        display: none !important;
    }

    /* Inputs / selects / textareas fill the value cell. */
    html body form#editForm table.ow_table_1 td.ow_value input[type="text"],
    html body form#editForm table.ow_table_1 td.ow_value input[type="email"],
    html body form#editForm table.ow_table_1 td.ow_value input[type="password"],
    html body form#editForm table.ow_table_1 td.ow_value input[type="date"],
    html body form#editForm table.ow_table_1 td.ow_value select,
    html body form#editForm table.ow_table_1 td.ow_value textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   HAMBURGER NAV — definitive dock hide (May 2026 v4).
   CSS-only attempts kept losing the cascade against the
   "position: fixed !important; display: flex !important" dock rule.
   The JS in premium_lock_modal.js now toggles an `.elv-dock-hidden`
   class directly on the dock element. With both rules at !important
   AND equal-or-greater specificity (one extra class), this rule
   wins every cascade tie.
   ───────────────────────────────────────────────────────────────── */
.ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap.elv-dock-hidden,
body.ow_menu_active .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   MOBILE SUBSCRIBE PRICE BUTTONS — tap state matches selected state.
   Previously the button briefly flashed white-text-on-light-bg between
   the :active state (no color change) and the JS-added .is-selected
   state (purple). Make ALL active/focus/selected states render the
   same purple-button-with-white-text look so taps look instant.
   ───────────────────────────────────────────────────────────────── */
.elv-msub-price-btn:active,
.elv-msub-price-btn:focus,
.elv-msub-price-btn.is-selected {
    background: #7C3AED !important;
    border-color: #7C3AED !important;
    color: #ffffff !important;
}
.elv-msub-price-btn:active .elv-msub-period,
.elv-msub-price-btn:focus .elv-msub-period,
.elv-msub-price-btn.is-selected .elv-msub-period,
.elv-msub-price-btn:active .elv-msub-amount,
.elv-msub-price-btn:focus .elv-msub-amount,
.elv-msub-price-btn.is-selected .elv-msub-amount {
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────
   STRIPE PAYMENT PAGE — each field on its own line on mobile.
   The default ow_table_3 layout stacks card number / expiry / CVC
   in side-by-side cells that wrap awkwardly on narrow viewports.
   Force each row to be full-width single-column under 720px.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    body .stripe-card-page,
    body .stripe-card-page .ow_credit_card { padding: 16px !important; }
    body .stripe-card-page .ow_credit_card .ow_table_3,
    body .stripe-card-page .ow_credit_card .ow_table_3 tbody {
        display: block !important;
        width: 100% !important;
    }
    body .stripe-card-page .ow_credit_card .ow_table_3 tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }
    body .stripe-card-page .ow_credit_card .ow_table_3 th,
    body .stripe-card-page .ow_credit_card .ow_table_3 td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 4px 0 !important;
        text-align: left !important;
    }
    body .stripe-card-page .ow_credit_card .ow_table_3 td.ow_label {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #6B7280 !important;
        margin-bottom: 4px !important;
    }
    body .stripe-card-page #card-element,
    body .stripe-card-page .stripe_card,
    body .stripe-card-page #cardholder-name {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   FLAG REPORTING FLOATBOX — modernize the SkaDate flag popup.
   Triggered by OW.flagContent() when a user taps the Flag action.
   Default UI has hard-to-find submit + no clear close.
   ───────────────────────────────────────────────────────────────── */
.floatbox_body .ow_box_empty:has(.flag_form),
.floatbox_body .flag_form_wrapper,
.floatbox_body .ow_flag_content {
    padding: 8px !important;
}
.floatbox_body form[name="flagContent"],
.floatbox_body .flag_form,
.floatbox_body .ow_flag_form {
    padding: 4px 0 !important;
}
.floatbox_body input[type="radio"][name*="flag"],
.floatbox_body input[type="radio"][name*="reason"] {
    accent-color: #7C3AED !important;
    margin-right: 8px !important;
}
.floatbox_body label:has(input[name*="flag"]),
.floatbox_body label:has(input[name*="reason"]) {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    background: #F9FAFB !important;
    border: 1px solid #F3F4F6 !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    font-size: 14px !important;
}
.floatbox_body label:has(input[name*="flag"]:checked),
.floatbox_body label:has(input[name*="reason"]:checked) {
    background: #F5F3FF !important;
    border-color: #7C3AED !important;
    color: #5B21B6 !important;
}
.floatbox_body input[type="submit"][value*="Flag"],
.floatbox_body input[type="submit"][value*="Submit"],
.floatbox_body button[type="submit"] {
    width: 100% !important;
    height: 46px !important;
    background: #7C3AED !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    margin-top: 8px !important;
}
/* Make the floatbox's built-in close icon prominent. */
.floatbox_header a.close_btn,
.floatbox_header .ow_ic_delete.close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #F3F4F6 !important;
    color: #6B7280 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: 14px !important;
}
.floatbox_header a.close_btn:hover {
    background: #E5E7EB !important;
    color: #1a1a2e !important;
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v5 (May 2026) ★

   Diagnosed root causes for each item below by reading the live CSS
   that's actually being served on the production site, then writing
   rules with the correct specificity to win the cascade. NO more
   shotgun-debugging — each rule below traces to a specific live
   selector this rule deliberately beats.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   #2: Hamburger nav drawer ABOVE the profile dock.
   Root cause (verified in deployed CSS): the dock has z-index: 9999;
   the nav drawer .ow_menu_fullpage has z-index: 98. Even when the
   drawer is open it sits BEHIND the dock because 9999 > 98. Every
   previous "hide the dock via .elv-dock-hidden" attempt fought a
   higher-specificity dock rule and lost.

   Two fixes, applied together for redundancy:
   1. Bump .ow_menu_fullpage to z-index 10001 so the drawer always
      sits above the dock visually.
   2. Hide-rule that has 5 classes of specificity (beats the dock's
      4-class fixed-position rule) AND uses body.ow_menu_active so
      it only applies when the drawer is actually open.
   ───────────────────────────────────────────────────────────────── */
.ow_menu_active .ow_menu_fullpage,
body.ow_menu_active .ow_menu_fullpage {
    z-index: 10001 !important;     /* > dock z-index: 9999 */
}
/* Also visually hide the dock via two equal-specificity selectors so
   even if z-index alone weren't enough the dock won't pierce the
   drawer. Both selectors have 5 classes — beats the 4-class dock
   rule on specificity, wins on source order at parity. */
body.ow_menu_active.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap,
body.base_profile_page .ow_content > .ow_profile_gallery_action_toolbar.ow_profile_action_toolbar_wrap.elv-dock-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   #1: Interests pill — visible checkmark inside the checkbox.
   Root cause: accent-color:#ffffff on a checked checkbox sitting on
   a violet pill background → checkmark drawn in white-on-white, no
   visible mark. Rebuild the checkbox visual with an explicit ::after
   checkmark so the check shows clearly on both unchecked (light pill)
   and checked (violet pill) states.
   ───────────────────────────────────────────────────────────────── */
form[name="editForm"] .elv-picker-skipped .ow_checkbox_group > li input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1.5px solid currentColor !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    accent-color: auto !important;
}
form[name="editForm"] .elv-picker-skipped .ow_checkbox_group > li input[type="checkbox"]:checked {
    background: #ffffff !important;
    border-color: #7C3AED !important;
}
form[name="editForm"] .elv-picker-skipped .ow_checkbox_group > li input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7C3AED;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}
/* When the pill itself is checked (purple bg), the checkbox stays
   white-with-purple-check so it stands out. */
form[name="editForm"] .elv-picker-skipped .ow_checkbox_group > li:has(input:checked) input[type="checkbox"] {
    border-color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────
   #3: Subscribe price buttons — NO mid-click flicker.
   Root cause: an earlier @media block in this same file sets
       .elv-msub-price-btn:hover, :active { background: #EDE9FE; ... }
   The :hover (on mobile that's the post-touch sticky state) applies
   light-purple BG without changing text color, while :active fires
   transiently with text color rule but no consistent timing. Net
   result: user sees a moment where text turns white before the bg
   changes too.

   Fix: cancel :hover entirely (mobile shouldn't have hover anyway);
   only allow the .is-selected class to change appearance, and bump
   the JS to add .is-selected on touchstart instead of click so the
   visual transition happens at finger-down, not after the form
   submit kicks in.
   ───────────────────────────────────────────────────────────────── */
.elv-msub-price-btn:hover,
.elv-msub-price-btn:focus-visible:not(.is-selected),
.elv-msub-price-btn:active:not(.is-selected) {
    /* Cancel every transient state change. Static appearance only. */
    background: #F5F3FF !important;
    border-color: #DDD6FE !important;
    color: #5B21B6 !important;
    transform: none !important;
}
.elv-msub-price-btn:hover .elv-msub-period,
.elv-msub-price-btn:focus-visible:not(.is-selected) .elv-msub-period,
.elv-msub-price-btn:active:not(.is-selected) .elv-msub-period {
    color: #374151 !important;
}
.elv-msub-price-btn:hover .elv-msub-amount,
.elv-msub-price-btn:focus-visible:not(.is-selected) .elv-msub-amount,
.elv-msub-price-btn:active:not(.is-selected) .elv-msub-amount {
    color: #111827 !important;
}
.elv-msub-price-btn.is-selected,
.elv-msub-price-btn.is-selected:hover,
.elv-msub-price-btn.is-selected:focus,
.elv-msub-price-btn.is-selected:active {
    background: #7C3AED !important;
    border-color: #7C3AED !important;
    color: #ffffff !important;
}
.elv-msub-price-btn.is-selected .elv-msub-period,
.elv-msub-price-btn.is-selected .elv-msub-amount {
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────
   #4: Stripe payment page — center horizontally + stack fields.
   The page wrapper inherits desktop layout offsets; center it
   explicitly on every viewport and force the table to stack at
   narrow widths.
   ───────────────────────────────────────────────────────────────── */
.stripe-card-page {
    max-width: 540px !important;
    width: 100% !important;
    margin: 24px auto !important;
    box-sizing: border-box !important;
}
@media (max-width: 720px) {
    .stripe-card-page {
        margin: 16px auto !important;
        padding: 0 12px !important;
    }
    .stripe-card-page .ow_credit_card {
        padding: 20px 16px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .stripe-card-page .ow_credit_card .ow_table_3,
    .stripe-card-page .ow_credit_card .ow_table_3 tbody {
        display: block !important;
        width: 100% !important;
    }
    .stripe-card-page .ow_credit_card .ow_table_3 tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 16px !important;
        padding: 0 !important;
    }
    .stripe-card-page .ow_credit_card .ow_table_3 td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0 6px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   #5: Flag popup — real X close + submit button + radio cards.
   Root cause (verified from base/views/components/flag.html):
       <input name="reason" onchange="this.form.submit(); ...">
   The reason input has an INLINE onchange that auto-submits the
   form as soon as a radio is clicked. There's no separate Submit
   button. The JS in premium_lock_modal.js (next commit) strips the
   onchange and adds a Submit button.

   Also: the floatbox close icon was being styled as a circle with
   `background: #F3F4F6` which REPLACED the SkaDate sprite icon (an
   X) entirely. Use background-COLOR instead, and add an explicit ✕
   ::before so a literal X is always visible regardless of the
   sprite.
   ───────────────────────────────────────────────────────────────── */
.floatbox_header a.close_btn,
.floatbox_header .ow_ic_delete.close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background-color: #F3F4F6 !important;
    background-image: none !important;      /* drop the SkaDate sprite */
    color: #6B7280 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    position: relative !important;
}
.floatbox_header a.close_btn::before,
.floatbox_header .ow_ic_delete.close::before {
    content: '✕';
    color: #4B5563;
    font-weight: 700;
    font-size: 14px;
}
.floatbox_header a.close_btn:hover {
    background-color: #E5E7EB !important;
}
.floatbox_header a.close_btn:hover::before {
    color: #1a1a2e;
}

/* Flag form layout: each radio reason on its own line, with a
   prominent Submit button at the bottom. Width set on the wider
   floatbox container so the form has room to breathe. */
.floatbox_canvas:has(.flags-container),
.floatbox_canvas:has(form[name="flag"]) {
    min-width: 320px;
}
.floatbox_body .flags-container {
    height: auto !important;
    padding: 4px 8px 12px !important;
}
.floatbox_body .flags-input {
    display: block !important;
    height: auto !important;
}
.floatbox_body .flags-input ul,
.floatbox_body form[name="flag"] ul {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.floatbox_body .flags-input li,
.floatbox_body form[name="flag"] li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 0 8px !important;
}
.floatbox_body .flags-input label,
.floatbox_body form[name="flag"] label {
    display: flex !important;
    align-items: center !important;
    padding: 12px 14px !important;
    background: #F9FAFB !important;
    border: 1px solid #F3F4F6 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    color: #374151 !important;
}
.floatbox_body .flags-input label:has(input:checked),
.floatbox_body form[name="flag"] label:has(input:checked) {
    background: #F5F3FF !important;
    border-color: #7C3AED !important;
    color: #5B21B6 !important;
    font-weight: 600 !important;
}
.floatbox_body .flags-input input[type="radio"],
.floatbox_body form[name="flag"] input[type="radio"] {
    accent-color: #7C3AED !important;
    margin: 0 10px 0 0 !important;
}
/* Submit button injected by JS — class .elv-flag-submit. */
.floatbox_body .elv-flag-submit {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    margin: 12px 0 0 !important;
    padding: 0 24px !important;
    background: #7C3AED !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(124,58,237,0.3) !important;
}
.floatbox_body .elv-flag-submit:disabled {
    background: #C4B5FD !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}
.floatbox_body .elv-flag-submit:hover:not(:disabled) {
    background: #6D28D9 !important;
}

/* ════════════════════════════════════════════════════════════════════
   ★ PAGE HEADER TITLES (May 2026) ★
   "My Dashboard", "My Matches", "Subscribe", "Profile Edit", etc. all
   render as <h1 class="ow_stdmargin ow_ic_*"> at the top of each
   page. The legacy style is small grey text with a sprite icon —
   looks dated. Redesign to a modern violet accent block with a left
   gradient bar.
   ──────────────────────────────────────────────────────────────────── */
.ow_page > h1.ow_stdmargin,
.ow_content > h1.ow_stdmargin,
body .ow_page h1.ow_stdmargin {
    position: relative;
    margin: 6px 0 22px 0 !important;
    padding: 14px 18px 14px 22px !important;
    background: linear-gradient(90deg, #F5F3FF 0%, #FFFFFF 60%) !important;
    border-radius: 12px !important;
    border: 1px solid #EDE9FE !important;
    color: #1a1a2e !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    box-shadow: 0 1px 3px rgba(124, 58, 237, 0.04) !important;
}
.ow_page > h1.ow_stdmargin::before,
.ow_content > h1.ow_stdmargin::before,
body .ow_page h1.ow_stdmargin::before {
    content: '';
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #7C3AED 0%, #5B21B6 100%);
}
/* The SkaDate "ow_ic_*" sprite icon classes add a background image
   on the heading itself, which now collides with our gradient bg.
   Strip the sprite — the violet accent bar replaces it. */
h1.ow_stdmargin.ow_ic_house,
h1.ow_stdmargin.ow_ic_user,
h1.ow_stdmargin.ow_ic_users,
h1.ow_stdmargin.ow_ic_lens,
h1.ow_stdmargin.ow_ic_mail,
h1.ow_stdmargin.ow_ic_heart,
h1.ow_stdmargin.ow_ic_star,
h1.ow_stdmargin[class*="ow_ic_"] {
    background-image: none !important;
    padding-left: 22px !important;
}
/* Tighter heading on small viewports. */
@media (max-width: 600px) {
    .ow_page > h1.ow_stdmargin,
    .ow_content > h1.ow_stdmargin,
    body .ow_page h1.ow_stdmargin {
        font-size: 18px !important;
        padding: 12px 14px 12px 18px !important;
        margin: 4px 0 16px 0 !important;
    }
}
/* Pages that intentionally hide the heading (profile pages etc.)
   should still have it hidden — keep their existing display:none. */

/* ════════════════════════════════════════════════════════════════════
   ★ DASHBOARD LAYOUT (May 2026) ★
   Narrow the dashboard widgets to match the discovery page width and
   stack the boxes cleanly.
   ──────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
    body.base_user_dashboard #widgets_dashboard,
    body.base_user_dashboard .ow_dnd_entity {
        max-width: 920px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Force a single column so each module gets the full narrowed
       width instead of being split into a left/right pair. */
    body.base_user_dashboard .ow_dnd_layout {
        display: block !important;
    }
    body.base_user_dashboard .ow_dnd_layout > div,
    body.base_user_dashboard .ow_dnd_layout > .ow_dnd_column {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }
}
/* Widget boxes themselves — modern card look. */
body.base_user_dashboard .ow_box {
    background: #ffffff;
    border: 1px solid #EDE9FE;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(124,58,237,0.04);
    padding: 18px 20px !important;
    margin-bottom: 18px !important;
}
body.base_user_dashboard .ow_box_cap {
    background: transparent;
    border-bottom: 1px solid #F5F3FF;
    padding: 0 4px 10px;
    margin-bottom: 14px;
}
body.base_user_dashboard .ow_box_cap_body h2,
body.base_user_dashboard .ow_box_cap h2,
body.base_user_dashboard .ow_box_cap h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    letter-spacing: -0.005em;
}

/* ════════════════════════════════════════════════════════════════════
   ★ OCS GUESTS + LIKED-ME EMPTY-STATE (May 2026) ★
   Both widgets share the same empty-state design: light violet card
   with explanatory copy + a single violet CTA button leading to the
   subscribe page. Used by elv-empty-state class.
   ──────────────────────────────────────────────────────────────────── */
.elv-empty-state {
    text-align: center;
    padding: 28px 20px;
    background: #FAFAFA;
    border: 1px dashed #E5E7EB;
    border-radius: 10px;
}
.elv-empty-state-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #F5F3FF;
    color: #7C3AED;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.elv-empty-state-text {
    color: #6B7280;
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.5;
}
.elv-empty-state-cta {
    display: inline-block;
    padding: 10px 22px;
    background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(124,58,237,0.25);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.elv-empty-state-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(124,58,237,0.32);
}

/* Liked-Me + Recently-Viewed avatar grid (matches the existing OCS
   Guests avatar styling but with consistent spacing). */
.elv-blurred-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
}
.elv-blurred-grid .ow_avatar_wrap,
.elv-blurred-grid .ow_user_list_picture {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}
.elv-blurred-grid .ow_avatar_wrap img,
.elv-blurred-grid .ow_user_list_picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.elv-blurred-grid .ow_guest_user_blur img,
.elv-blurred-grid .ow_paid_blurred img {
    filter: blur(10px);
    transform: scale(1.05);
}

/* ════════════════════════════════════════════════════════════════════
   ★ STRIPE SPLIT FIELDS (May 2026) ★
   The card form now uses three separate Stripe Elements
   (cardNumber, cardExpiry, cardCvc) instead of the combined 'card'
   element. Each lives in its own labeled row so it stacks naturally
   with a real line break between Card Number / Expiry / CVC.
   ──────────────────────────────────────────────────────────────────── */
.stripe-card-page #card-number-element,
.stripe-card-page #card-expiry-element,
.stripe-card-page #card-cvc-element {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 10px 12px;
    background: #F9FAFB;
    font-size: 14px;
    box-sizing: border-box;
    min-height: 40px;
}
.stripe-card-page #card-number-element.StripeElement--focus,
.stripe-card-page #card-expiry-element.StripeElement--focus,
.stripe-card-page #card-cvc-element.StripeElement--focus {
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
    background: #ffffff;
}

/* Clean checkout summary card emitted by BILLINGSTRIPE_CLASS_ActionMethods
   for membership sales. Reads as:
       You are purchasing the following:
       Membership      Premium
       Price           $69 / month                                       */
.stripe-card-page .credit-card-info { padding: 0 !important; margin-bottom: 18px !important; }
.stripe-card-page .credit-card-info .ow_outline { display: block; }
.elv-checkout-summary {
    background: #F9FAFB;
    border: 1px solid #EDE9FE;
    border-radius: 10px;
    padding: 14px 18px;
}
.elv-checkout-summary-head {
    font-size: 13px;
    font-weight: 600;
    color: #6B7280;
    margin-bottom: 10px;
    letter-spacing: 0.01em;
}
.elv-checkout-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 7px 0;
    border-top: 1px solid #F3F4F6;
}
.elv-checkout-summary-row:first-of-type { border-top: none; }
.elv-checkout-label {
    color: #6B7280;
    font-size: 13px;
    font-weight: 500;
}
.elv-checkout-value {
    color: #111827;
    font-size: 15px;
    font-weight: 700;
}
.stripe-card-page .elv-card-row-pair {
    display: flex;
    gap: 12px;
}
.stripe-card-page .elv-card-row-pair > div { flex: 1; min-width: 0; }
@media (max-width: 480px) {
    .stripe-card-page .elv-card-row-pair { flex-direction: column; gap: 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v6 (May 2026) — profile-page hover buttons ★

   Two long-standing hover-revealed buttons on the My Profile page
   were causing UX confusion. The user wants them gone entirely and
   replaced (for "change avatar") by a permanent button in the photos
   widget toolbar (see ow_plugins/photo/components/user_photos_widget.php).

   Risk: zero — these rules only hide elements, they don't alter
   layout, specificity balance, or any non-hover state. Revert by
   deleting this block.
   ════════════════════════════════════════════════════════════════════ */

/* "Edit profile details" — appears as a fade-in absolutely-positioned
   link inside .user_profile_data on the user-view widget when viewing
   your own profile. Defined in
   ow_system_plugins/base/views/components/user_view_widget_table.html
   (and ..._tabs.html). Hide it everywhere; users go to /profile/edit
   via the main "Edit Profile" route or the avatar toolbar instead. */
body .ow_edit_profile_link,
body #edit-profile {
    display: none !important;
}

/* "Change avatar" hover button rendered by pcgallery on the profile
   gallery (.ow_profile_gallery_avatar_change), AND the legacy fallback
   in BASE_CMP_UserAvatarWidget (.ow_avatar_change#avatar-change). Both
   hidden — the canonical "Change Avatar" button now lives in the
   photos widget toolbar next to Upload / View All. */
body .ow_profile_gallery_avatar_change,
body .ow_avatar_button.ow_avatar_change,
body #avatar-change {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v7 (May 2026) — preferences, mailbox UI, console ★

   Bundle of small UI polish rules that were piling up:
     - Notification preferences page: hide the empty delimiter row,
       breathe the save button.
     - Messages page (desktop + mobile): vertically centre the X
       inside the search field on mobile.
     - Bulk-options bar: replace the tiny minus-sign close icon with
       a visible "Cancel" pill so users can escape bulk mode.
     - Console icons: bumped to 24x24 with a touch more spacing.
     - Chat compose: modern bubble + visible Send button on both
       desktop and mobile.

   Each block below is independently revertable — delete just the
   rule(s) you don't want.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Notification preferences page ──────────────────────────────────
   Hide the empty "ow_tr_delimiter" rows. SkaDate emits them as a
   single empty <td>, which renders as a small white strip between
   plugin sections (looks like a stray empty cell). The next-section
   <tr.ow_tr_first> already gives enough vertical separation. */
body .ow_table_1 tr.ow_tr_delimiter,
body .ow_table_1 tr.ow_tr_delimiter td {
    display: none !important;
}

/* Add breathing room above the Save button — previously sat flush
   against the bottom of the "Also send notifications by email"
   table. Targets the unique class added to the template. */
body .elv-notifications-save-row {
    margin-top: 24px !important;
    padding-top: 8px;
}

/* ─── Messages search bar X icon (mobile only) ───────────────────────
   Desktop layout uses a 68px-tall .ow_mailbox_search with the X
   pinned at top:22px — works perfectly. On mobile mailbox.css
   compresses the bar to ~52px without re-centering the X, so it
   sat too low. Match the visual centre at that height. */
@media (max-width: 900px) {
    body .ow_mailbox_search .ow_btn_close_search {
        top: 50% !important;
        transform: translateY(-50%) !important;
        right: 14px !important;
    }
}

/* ─── Bulk-options bar: visible Cancel control ───────────────────────
   The default close trigger is a 10x10 minus-circle icon at
   right:-8px — too small to find. Make it a labelled pill anchored
   in the bar. Combined with the JS that strips ow_mailbox_bulk_options
   off the conversation list control, this is the dedicated escape
   hatch. */
body .ow_mailbox_left.ow_mailbox_bulk_options #closeBulkOptionsBtn,
body .ow_mailbox_left #closeBulkOptionsBtn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.10);
    color: #5b21b6;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.02em;
    text-decoration: none;
    background-image: none !important;
    cursor: pointer;
    display: inline-block;
}
body .ow_mailbox_left.ow_mailbox_bulk_options #closeBulkOptionsBtn::before {
    content: "Cancel";
}
body .ow_mailbox_left:not(.ow_mailbox_bulk_options) #closeBulkOptionsBtn {
    display: none !important;
}
body #closeBulkOptionsBtn:hover {
    background: rgba(124, 58, 237, 0.20);
}

/* ─── Top-right console icons: slightly larger + spaced out ─────────
   Console icons were a tight 20x20 with cramped spacing. Bump to
   24x24 and add a few extra px of separation so they read cleanly
   on both desktop and mobile. */
body .ow_console .ow_console_item a.ow_console_item_link,
body .ow_console .ow_console_item .ow_console_item_link {
    width: 24px !important;
    height: 24px !important;
    background-size: 24px 24px !important;
}
body .ow_console .ow_console_item {
    margin-left: 10px !important;
}
body .ow_console .ow_console_item:first-child {
    margin-left: 0 !important;
}
/* Tighten on very narrow screens so nothing wraps. */
@media (max-width: 480px) {
    body .ow_console .ow_console_item {
        margin-left: 8px !important;
    }
    body .ow_console .ow_console_item a.ow_console_item_link,
    body .ow_console .ow_console_item .ow_console_item_link {
        width: 22px !important;
        height: 22px !important;
        background-size: 22px 22px !important;
    }
}

/* ─── Chat compose box (desktop + mobile) ────────────────────────────
   The default chat textarea (`#dialogTextarea`) renders as a plain
   single-line text input with no visible Send button. Re-style as a
   modern rounded bubble with a send pill anchored to the right.
   The Send button is appended via conversation.html / JS — see
   .elv-chat-send-btn below. */
body .ow_chat_message_block,
body #conversationChatFormBlock {
    background: #ffffff;
    border-top: 1px solid #EDE9FE;
    padding: 12px 14px;
}
body .ow_chat_message_block .ow_chat_message,
body #dialogMessageFormBlock {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: #F9FAFB;
    border: 1px solid #EDE9FE;
    border-radius: 999px;
    padding: 6px 6px 6px 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
body .ow_chat_message_block textarea#dialogTextarea {
    flex: 1 1 auto;
    /* mailbox.css 522 forces height:44px + padding-right:64px to
       reserve space for a now-removed inline button. We pull both
       back so the textarea matches the rounded bubble container. */
    height: auto !important;
    min-height: 36px !important;
    max-height: 140px !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    resize: none !important;
    padding: 8px 4px !important;
    font-size: 14px;
    line-height: 1.4;
    color: #111827;
    box-shadow: none !important;
}
body .ow_chat_message_block textarea#dialogTextarea::placeholder {
    color: #9CA3AF;
}
body .elv-chat-send-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #7C3AED;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
    padding: 0;
}
body .elv-chat-send-btn:hover {
    background: #6D28D9;
}
body .elv-chat-send-btn:active {
    transform: scale(0.94);
}
body .elv-chat-send-btn:disabled,
body .elv-chat-send-btn[disabled] {
    background: #C4B5FD;
    cursor: not-allowed;
}
body .elv-chat-send-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    pointer-events: none;
}

/* Mobile chat compose mirror */
body .owm_chat_window #mailboxConversationFooter {
    background: #ffffff;
    border-top: 1px solid #EDE9FE;
}
body .owm_chat_window .owm_input_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}
body .owm_chat_window .owm_fake_input.owm_chat_input_wrap {
    flex: 1 1 auto;
    background: #F9FAFB;
    border: 1px solid #EDE9FE;
    border-radius: 999px;
    padding: 6px 14px;
    margin: 0;
}
body .owm_chat_window .owm_fake_input.owm_chat_input_wrap input#newMessageText {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100%;
    font-size: 14px;
    color: #111827;
    padding: 6px 0;
}
body .owm_chat_window .owm_chat_submit.comment_submit {
    background: transparent !important;
    padding: 0 12px 10px;
}
body .owm_chat_window .owm_chat_btns {
    padding: 0 !important;
}
body .owm_chat_window #newmessage-mail-send-btn .ow_button {
    background: #7C3AED !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 6px 18px !important;
    border: none !important;
    box-shadow: none !important;
}
body .owm_chat_window #newmessage-mail-send-btn .ow_button:hover {
    background: #6D28D9 !important;
}

/* Keep the unauthorized-send block message visible & padded — user
   asked us NOT to touch this state. Just normalise spacing so it
   doesn't sit flush against the surrounding card. */
body .owm_chat_window .owm_anno.owm_info,
body #conversationUserIsUnreachable {
    margin: 12px 14px !important;
    border-radius: 10px !important;
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v8 (May 2026) — follow-up fixes ★

   Targeted fixes for issues spotted in v7:
     - Search X bouncing above the bar while typing (preloader padding).
     - Cancel-bulk button needs vertical breathing room on desktop;
       mobile needs a vertical stack so it stops overlapping Actions.
     - Console icons were broken into "two stacked" because the SVG
       sprites are 20x40 (two states). Resize the sprite proportionally.
     - Chat compose: clip-fix for the Send button (ow.css forces
       textarea width:100% which overflows the flex row).
     - Mobile mail mailbox right pane was 66% next to a 38% left = 104%
       overflow; restore proper widths.
     - Mobile notification settings table — clamp width so the form
       table doesn't bleed past the viewport.
     - Mobile console-popup positioning so the notification tooltip
       fits inside the screen.
   ════════════════════════════════════════════════════════════════════ */

/* ─── #5: Search X icon — neutralise preloader padding ───────────────
   When the user types, JS toggles .ow_preloader on .ow_btn_close_search.
   Elevate's global rule `.ow_preloader { padding: 20px }` inflates the
   absolutely positioned 20x20 icon to ~60x60, and translateY(-50%)
   then pulls the icon visually above the bar. Strip the padding from
   the search-X variant so it stays a clean 20x20 throughout. */
body .ow_mailbox_search .ow_btn_close_search.ow_preloader,
body .ow_mailbox_search a.ow_btn_close_search.ow_preloader {
    padding: 0 !important;
    box-sizing: content-box !important;
}

/* ─── #6: Bulk-options Cancel — desktop padding + mobile stack ───────
   Desktop: cancel was anchored too close to the top edge of the bar.
   Mobile: it overlapped Check-all / Actions because the bar is too
   narrow to fit three items horizontally. Switch the entire bulk
   bar to a vertical column layout under 720px so the controls
   stack cleanly: [Check all] [Actions ▼] [Cancel]. */
body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options {
    padding: 12px 14px;
    min-height: 48px;
    position: relative;
}
body .ow_mailbox_left .ow_mailbox_conv_options_inner {
    min-height: 32px;
    align-items: center;
    gap: 10px;
}
body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options_inner {
    display: flex;
}

@media (max-width: 720px) {
    /* Bar grows to fit the stacked controls. */
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options {
        height: auto !important;
        padding: 12px 14px 14px;
    }
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options_inner {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    /* Cancel pill becomes a full-width control instead of an
       absolute-positioned overlay — no more overlap. */
    body .ow_mailbox_left.ow_mailbox_bulk_options #closeBulkOptionsBtn {
        position: static;
        transform: none;
        width: 100%;
        text-align: center;
        padding: 8px 12px;
        margin: 0;
    }
    /* Lift the left-section body down so the now-taller bar doesn't
       cover the first conversation row. */
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_left_body {
        top: 168px !important;
    }
    /* Make the dropdown menu trigger expand to fill the row. */
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_context_action_block.ow_context_action_value_block {
        width: 100%;
        text-align: center;
    }
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_context_action {
        display: block;
        text-align: center;
    }
}

/* ─── #7: Console icons — proper sprite scaling ──────────────────────
   The console SVGs are 20x40 sprites (state 0..19 = normal, 20..39 =
   hover). v7 set width/height/background-size all to 24, which only
   scaled one dimension and exposed both states stacked. Scale the
   sprite PROPORTIONALLY by setting background-size to 24x48 so the
   hover state stays correctly offset, and bump the hover background
   position to -24px to match. */
body .ow_console .ow_console_item a.ow_console_item_link,
body .ow_console .ow_console_item .ow_console_item_link {
    width: 24px !important;
    height: 24px !important;
    background-size: 24px 48px !important;
}
body .ow_console .ow_console_item:hover a.ow_console_item_link,
body .ow_console .ow_console_dropdown_pressed.ow_console_item a.ow_console_item_link {
    background-position: 0 -24px !important;
}
/* Don't apply the sprite scaling to text-button items like Sign Out
   (they have width:auto on a.ow_console_item_link inside their own
   selector and shouldn't be background-sized). */
body .ow_console_button.ow_console_item a.ow_console_item_link {
    width: auto !important;
    height: auto !important;
    background-size: auto !important;
}
/* Tighter spacing at <=480px now that icons are 24x24 (still readable). */
@media (max-width: 480px) {
    body .ow_console .ow_console_item a.ow_console_item_link,
    body .ow_console .ow_console_item .ow_console_item_link {
        width: 22px !important;
        height: 22px !important;
        background-size: 22px 44px !important;
    }
    body .ow_console .ow_console_item:hover a.ow_console_item_link,
    body .ow_console .ow_console_dropdown_pressed.ow_console_item a.ow_console_item_link {
        background-position: 0 -22px !important;
    }
}

/* ─── #8 desktop: Send button visible inside the chat compose bar ────
   ow.css forces .ow_chat_message_block .ow_chat_message textarea to
   width:100%. Inside our flex row that's textarea + 36px button + 8px
   gap, the 100% width pushes the button off the right edge. Override
   to width:auto + min-width:0 so flex shrinking works. */
body .ow_chat_message_block .ow_chat_message textarea,
body .ow_chat_message_block textarea#dialogTextarea {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    float: none !important;
    padding-right: 4px !important;
}
/* Belt-and-braces: keep the chat bubble container from forcing a
   width on its flex children. */
body .ow_chat_message_block .ow_chat_message,
body #dialogMessageFormBlock {
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
}

/* ─── #8 mobile: right pane must not overflow viewport ───────────────
   mailbox.css ships .ow_mailbox_left { 34% } / .ow_mailbox_right { 66% }
   for desktop, then at <=900px overrides only the LEFT to 38% — leaving
   right at 66%, total 104%, right pane overflows. Clamp the right pane
   to the remaining 62%. */
@media (max-width: 900px) {
    body .ow_mailbox_table .ow_mailbox_right {
        width: 62% !important;
        max-width: 62% !important;
    }
    /* When a conversation is active on mobile, the table swaps to
       single-pane (right only). Restore full width then. */
    body .ow_mailbox_table.elevate-conv-active .ow_mailbox_right {
        width: 100% !important;
        max-width: 100% !important;
    }
    body .ow_mailbox_table.elevate-conv-active .ow_mailbox_left {
        display: none !important;
    }
}

/* ─── #9: Mobile mail-notifications table fits the viewport ──────────
   The settings form tables (.ow_table_1.ow_form) inherit fixed pixel
   layout that doesn't reflow on narrow screens. Clamp + scroll. */
@media (max-width: 720px) {
    body form[name="notificationSettingForm"] {
        max-width: 100%;
        overflow-x: auto;
    }
    body form[name="notificationSettingForm"] .ow_table_1.ow_form {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }
    body form[name="notificationSettingForm"] .ow_table_1.ow_form td.ow_label {
        width: 36px !important;
        min-width: 36px !important;
        padding: 6px 8px !important;
    }
    body form[name="notificationSettingForm"] .ow_table_1.ow_form td.ow_value {
        word-break: break-word;
        font-size: 13px;
        padding: 6px 8px !important;
    }
    body form[name="notificationSettingForm"] .ow_table_1.ow_form th {
        font-size: 13px;
        padding: 8px 10px !important;
    }
}

/* ─── #11: Mobile notifications popup fits the viewport ──────────────
   The console tooltip is fixed-width (350px max in v7 baseline) and
   anchored right:0 to its parent .ow_console_item. On narrow viewports
   it extends past the left edge. Clamp the WIDTH (not max-width — it
   needs to actually shrink) and re-anchor relative to the viewport. */
@media (max-width: 720px) {
    body .ow_console .ow_tooltip_top_right.ow_tooltip {
        position: fixed !important;
        top: var(--nav-h) !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
    }
    body .ow_console .ow_tooltip .ow_tooltip_body,
    body .ow_console .ow_console_list_wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* The little tail/arrow loses its meaning when the popup spans
       the whole viewport — hide it on mobile to avoid a misaligned
       triangle. */
    body .ow_console .ow_tooltip_top_right .ow_tooltip_tail {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v9 (May 2026) — bulk pill, chat clip, prefs ★

   Tightening pass after v8 hands-on testing:
     - Cancel pill: tighter padding, no more cut-off; mobile keeps
       single-row layout (no extra vertical space below the bar).
     - "Check all" stays inline with its checkbox.
     - Chat compose: harder override on the textarea width so the
       Send button is fully visible on both desktop and mobile.
     - Mobile notifications-form: clamp <th>, <td>, and the
       outer .ow_wide container too.
     - Hide the "Time zone" row on the General preferences page.
   ════════════════════════════════════════════════════════════════════ */

/* ─── #6 follow-up: Cancel pill + bulk bar layout ────────────────────
   Issues after v8:
     1. The pill was getting cut off because v7 padded it 4px 12px
        and the bar's height collapsed around it.
     2. v8 added `top: 168px !important` to the conv list body for
        the vertical-stack layout, which now produces a huge empty
        gap between the bar and the conversations because the bar
        itself is only ~50px tall — we never reverted that offset
        when staying on the single-row layout.
     3. "Check all" was wrapping under its checkbox because the
        flex container compressed below the checkbox + label
        sum, with no `min-width: 0` on the label.

   Strategy: stay HORIZONTAL on all breakpoints (no column stack).
   Make every chip compact so they fit in the narrow rail. Don't
   touch the body's `top` offset — it's the same single-row height
   as before bulk mode. */
body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options {
    padding: 6px 10px !important;
    min-height: 0 !important;
    height: auto !important;
}
body .ow_mailbox_left .ow_mailbox_conv_options_inner {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    min-height: 28px;
}
/* "Check all" — inline with checkbox, never wrap. */
body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options input[type=checkbox] {
    margin: 0 !important;
    vertical-align: middle !important;
    flex: 0 0 auto !important;
    display: inline-block !important;
}
body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options_checklab {
    vertical-align: middle !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    line-height: 20px !important;
    font-size: 12px;
    display: inline-block !important;
}
body .ow_mailbox_left.ow_mailbox_bulk_options .ow_context_action_block.ow_context_action_value_block {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}
body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options .ow_context_action {
    font-size: 12px;
    text-align: left;
}
/* Cancel pill — compact, never clipped. */
body .ow_mailbox_left.ow_mailbox_bulk_options #closeBulkOptionsBtn {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto !important;
    padding: 2px 10px !important;
    font-size: 11px !important;
    line-height: 18px !important;
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap;
}

/* Override the v8 mobile column-stack — we now keep a single row
   on every breakpoint, so revert the body-top offset too. */
@media (max-width: 720px) {
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options_inner {
        flex-direction: row !important;
        align-items: center !important;
    }
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_left_body {
        top: 96px !important;
    }
    /* Tighter padding only on phone to fit narrow rails. */
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options {
        padding: 6px 8px !important;
    }
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options_inner {
        gap: 6px !important;
    }
    body .ow_mailbox_left.ow_mailbox_bulk_options #closeBulkOptionsBtn {
        padding: 2px 8px !important;
        font-size: 10px !important;
    }
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options_checklab {
        font-size: 11px !important;
    }
}

/* ─── #8 follow-up: chat compose layout robustness ───────────────────
   v8's flex layout was right on paper but the textarea's effective
   width was still tracking 100% from ow.css. The previous override
   was scoped to `body .ow_chat_message_block` — that doesn't beat
   `.ow_chat_message_block .ow_chat_message textarea` (1 class on
   both sides at the second hop). Use higher-specificity overrides
   that include the explicit id, and clamp the parent so the bubble
   itself doesn't stretch beyond its container. */
body div#conversationChatFormBlock {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
}
body div#conversationChatFormBlock div#dialogMessageFormBlock {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 6px 6px 6px 16px !important;
    background: #F9FAFB;
    border: 1px solid #EDE9FE;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
body div#conversationChatFormBlock div#dialogMessageFormBlock textarea#dialogTextarea {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 36px !important;
    max-height: 140px !important;
    padding: 8px 4px !important;
    padding-right: 4px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    resize: none !important;
    box-shadow: none !important;
    float: none !important;
    box-sizing: border-box !important;
    font-size: 14px;
    line-height: 1.4;
    color: #111827;
}
body button#elv-chat-send-btn {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50%;
    border: none;
    background: #7C3AED;
    color: #fff;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
body button#elv-chat-send-btn:hover { background: #6D28D9; }
body button#elv-chat-send-btn:disabled,
body button#elv-chat-send-btn[disabled] {
    background: #C4B5FD;
    cursor: not-allowed;
}
body button#elv-chat-send-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    pointer-events: none;
}

/* ─── #9 follow-up: mobile notifications form fits viewport ──────────
   v8 covered the table-layout + cell paddings but not the WRAPPING
   <div class="ow_wide ow_automargin"> — `.ow_wide` defaults to 60%
   width with overflow: hidden. We need it 100% on mobile, plus
   word-break on <th> too (section headers can be long enum-name
   strings while DB lang values are still missing). */
@media (max-width: 720px) {
    body .ow_wide.ow_automargin:has(form[name="notificationSettingForm"]) {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: visible !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
    }
    body form[name="notificationSettingForm"] .ow_table_1.ow_form th {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
        text-align: left !important;
    }
    body form[name="notificationSettingForm"] .ow_table_1.ow_form td.ow_value {
        font-size: 12px !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }
}

/* ─── #9 follow-up: hide Time Zone row on General preferences ────────
   The user asked to remove the timezone selector entirely from the
   General tab. Core renders it as a <tr class="ow_preference"> with
   the timezone <select> inside. Hide via CSS so we don't touch core
   PHP. JS belt-and-braces lives in elevate_admin_tools event handler
   (ensures the row is hidden even on older browsers without :has()). */
body form[name="preferenceForm"] tr.ow_preference:has(select[name="timeZoneSelect"]),
body form[name="preferenceForm"] tr.ow_preference.elv-pref-hidden {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v10 (May 2026) — mobile prefs clamp ★

   v9's :has() selector for the notifications form wrapper doesn't
   work on iOS pre-15.4 / older Android Chrome (significant Vietnam
   traffic). Tag the wrapper template with a deterministic class
   and target THAT instead — full mobile browser support.

   Also: tighten the chat compose Send button so it has a fixed
   inline-flex layout no matter what CSS the SkaDate button decorator
   bakes around it. (v9 was still being shrunk by .ow_button-style
   parent rules on some pages.)
   ════════════════════════════════════════════════════════════════════ */

/* ─── Notifications settings page — clamp wrapper on every viewport */
body .elv-notif-prefs-wrap {
    box-sizing: border-box;
    max-width: 100%;
}
@media (max-width: 720px) {
    body .elv-notif-prefs-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        overflow: visible !important;
    }
    body .elv-notif-prefs-wrap form[name="notificationSettingForm"],
    body .elv-notif-prefs-wrap form[name="notificationSettingForm"] .ow_table_1.ow_form {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    /* Tight cell padding so 360px-wide phones fit the columns. */
    body .elv-notif-prefs-wrap .ow_table_1.ow_form td.ow_label {
        width: 32px !important;
        min-width: 32px !important;
        padding: 6px !important;
        text-align: center !important;
    }
    body .elv-notif-prefs-wrap .ow_table_1.ow_form td.ow_value,
    body .elv-notif-prefs-wrap .ow_table_1.ow_form th {
        font-size: 12px !important;
        padding: 6px 8px !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
        text-align: left !important;
    }
    /* Save button row — full-width-friendly on phone. */
    body .elv-notif-prefs-wrap .elv-notifications-save-row {
        margin-top: 16px !important;
        padding: 0 !important;
        text-align: center !important;
    }
    body .elv-notif-prefs-wrap .elv-notifications-save-row .ow_right {
        float: none !important;
        text-align: center !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v11 (May 2026) — gear icon, mobile bulk
   redesign, Stripe Complete-Order padding, mobile chat overflow,
   notifications-form mobile clamp v3.
   ════════════════════════════════════════════════════════════════════ */

/* ─── #4: Admin gear icon (moderator) — NOT a 20x40 sprite ──────────
   v8 assumed every console icon was a 20x40 sprite (normal + hover
   stacked) and scaled background to 24x48 with -24px hover offset.
   The gear icon (ic_gear_wheel.svg) is a single 20x20 image — the
   sprite scaling stretched it to 24x48 and the hover offset moved
   the icon off-screen, producing the "cut off too low / hover too
   high" symptom. Override with single-image sizing + no hover
   offset for this specific item. */
body .ow_console .ow_console_item.elevate_admin_console_item a.ow_console_item_link {
    background-size: 22px 22px !important;
    background-position: center center !important;
}
body .ow_console .ow_console_item.elevate_admin_console_item:hover a.ow_console_item_link,
body .ow_console .ow_console_dropdown_pressed.ow_console_item.elevate_admin_console_item a.ow_console_item_link {
    background-position: center center !important;
}

/* ─── #8: Bulk options mobile — three-row stacked layout ────────────
   User feedback after v9: vertical stack didn't quite land — there
   was a giant empty gap before the conversation list and the
   controls didn't read as a clean list.

   Spec from user:
     Row 1: [☐] Check all
     Row 2: Actions ▼
     Row 3: Cancel
   Then conversation list IMMEDIATELY below (no extra gap).

   Implementation: keep horizontal layout on DESKTOP (≥721px); on
   mobile (≤720px) switch to flex column with three centred rows.
   Conv list body top offset matched to the bar's actual height. */
@media (max-width: 720px) {
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options {
        padding: 10px 12px !important;
        height: auto !important;
        min-height: 0 !important;
    }
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options_inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
    }
    /* Row 1: checkbox + label inline */
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options input[type="checkbox"] {
        display: inline-block !important;
        vertical-align: middle !important;
        margin: 0 8px 0 0 !important;
        flex: 0 0 auto !important;
    }
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options_checklab {
        display: inline-block !important;
        vertical-align: middle !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        line-height: 22px !important;
    }
    /* Row 2: Actions trigger fills the row width */
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_context_action_block.ow_context_action_value_block {
        width: 100% !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        text-align: left !important;
    }
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options .ow_context_action {
        display: block !important;
        text-align: left !important;
        font-size: 13px !important;
    }
    /* Row 3: Cancel pill — full row, centred */
    body .ow_mailbox_left.ow_mailbox_bulk_options #closeBulkOptionsBtn {
        position: static !important;
        transform: none !important;
        flex: 0 0 auto !important;
        align-self: stretch !important;
        width: auto !important;
        margin: 0 !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        line-height: 18px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
    /* Important: actually reduce the body offset so the conversation
       list sits right below the bar — bar grew from ~50px to ~118px
       with three stacked rows + paddings. */
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_left_body {
        top: 178px !important;
    }
    /* Hide the actions tooltip from anchoring weirdly — let it position
       inline below its trigger via the v9 styles. */
    body .ow_mailbox_left.ow_mailbox_bulk_options #mailboxConvOpenActionsContainer {
        right: auto !important;
        left: 0 !important;
    }
}

/* ─── #10: Stripe Complete Order button — padding above the form ───
   .stripe-card-page wraps the form. The submit row immediately
   follows the credit-card form table. Add vertical breathing room
   above the submit button. */
body .stripe-card-page form .clearfix.ow_stdmargin,
body .stripe-card-page .clearfix.ow_stdmargin {
    margin-top: 22px !important;
    padding-top: 8px !important;
}

/* ─── #12: Mobile chat conversation — scroll messages WITHIN box ────
   On mobile, when a long chat thread loaded the message log grew
   beyond the screen and pushed the input bar below the fold. We
   want the chat module to FIT the viewport: header at top, input
   at bottom, message log scrolls internally between them. */
@media (max-width: 720px) {
    body .owm_chat_window {
        height: calc(100svh - var(--nav-h)) !important;
        max-height: calc(100svh - var(--nav-h)) !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    body .owm_chat_window .owm_chat_info_wrap {
        flex: 0 0 auto !important;
    }
    body .owm_chat_window .owm_chat_block {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
        margin: 0 !important;
    }
    body .owm_chat_window #mailboxConversationFooter {
        position: relative !important;
        bottom: auto !important;
        flex: 0 0 auto !important;
    }
}

/* Same treatment for the desktop responsive layout when collapsed to
   single-pane mobile (.ow_mailbox_table.elevate-conv-active state). */
@media (max-width: 720px) {
    body .ow_mailbox_table.elevate-conv-active .ow_mailbox_right {
        height: calc(100svh - var(--nav-h)) !important;
        max-height: calc(100svh - var(--nav-h)) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    body .ow_mailbox_table.elevate-conv-active .ow_mailbox_right .ow_mailbox_log_wrap {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }
    body .ow_mailbox_table.elevate-conv-active .ow_mailbox_right .ow_chat_message_block,
    body .ow_mailbox_table.elevate-conv-active .ow_mailbox_right .ow_mailbox_form,
    body .ow_mailbox_table.elevate-conv-active .ow_mailbox_right #conversationChatFormBlock {
        flex: 0 0 auto !important;
        position: relative !important;
        bottom: auto !important;
    }
}

/* ─── #13: Mobile notifications form — full-bleed + tight cells ─────
   v10's wrapper clamp was not strong enough — the inner tables can
   still force horizontal overflow on narrow phones because the
   submit decorator + ow_table_1 internals re-introduce min-width.
   Force every notification-form descendant to a max viewport width
   and aggressively word-break long lang keys (which are still raw
   on this build until the SQL fix lands). */
@media (max-width: 720px) {
    body .elv-notif-prefs-wrap,
    body .elv-notif-prefs-wrap *,
    body .elv-notif-prefs-wrap *::before,
    body .elv-notif-prefs-wrap *::after {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    body .elv-notif-prefs-wrap {
        padding-left: 12px !important;
        padding-right: 12px !important;
        overflow-x: hidden !important;
    }
    body .elv-notif-prefs-wrap form[name="notificationSettingForm"] {
        overflow-x: hidden !important;
    }
    body .elv-notif-prefs-wrap .ow_table_1.ow_form {
        table-layout: fixed !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body .elv-notif-prefs-wrap .ow_table_1.ow_form tr,
    body .elv-notif-prefs-wrap .ow_table_1.ow_form td,
    body .elv-notif-prefs-wrap .ow_table_1.ow_form th {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }
    body .elv-notif-prefs-wrap .ow_table_1.ow_form td.ow_label {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        padding: 6px !important;
        text-align: center !important;
    }
    body .elv-notif-prefs-wrap .ow_table_1.ow_form td.ow_value {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
    body .elv-notif-prefs-wrap .ow_table_1.ow_form th {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
    /* The section icon spans render as inline-block elements with
       background-images that don't reflow. Restrict their width. */
    body .elv-notif-prefs-wrap .ow_section_icon {
        max-width: 100% !important;
        display: block !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v12 (May 2026) — bulk mobile redesign v2,
   chat height fit, notifs form deep-clamp.
   ════════════════════════════════════════════════════════════════════ */

/* ─── #1: Bulk-options mobile — flex-wrap layout that actually works ─
   v11 set `flex-direction: column` on the inner container, which
   put EACH child on its own row. The intended layout was:
       [☐] Check all
       Actions ▼
       Cancel
   But because checkbox and the "Check all" label are SEPARATE
   direct children of .ow_mailbox_conv_options_inner, they each got
   their own row.

   Fix: use `flex-wrap: wrap` (default direction = row) and pin
   flex-basis on each control:
     - checkbox: flex 0 0 auto (just its 16px width)
     - checklab: flex 1 1 auto, gets remaining row 1 space
     - actions block: flex-basis: 100%, forces a new row
     - cancel: flex-basis: 100%, forces another new row
   Result: row 1 = [☐] Check all (inline), row 2 = Actions, row 3 = Cancel.

   Also tighten the conversation-list-body top offset to match the
   actual bar height. Three rows × ~32px + paddings ≈ 124px. */
@media (max-width: 720px) {
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options {
        padding: 10px 12px !important;
        height: auto !important;
        min-height: 0 !important;
    }
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options_inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        column-gap: 8px !important;
        row-gap: 8px !important;
        width: 100% !important;
    }
    /* Row 1: checkbox inline with "Check all". */
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options input[type="checkbox"] {
        flex: 0 0 auto !important;
        margin: 0 !important;
        vertical-align: middle !important;
        display: inline-block !important;
    }
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options_checklab {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        line-height: 22px !important;
        text-align: left !important;
    }
    /* Row 2: Actions trigger — full width forces a new flex row. */
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_context_action_block.ow_context_action_value_block {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
    }
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options .ow_context_action {
        display: block !important;
        text-align: left !important;
        font-size: 13px !important;
    }
    /* Row 3: Cancel — full width. */
    body .ow_mailbox_left.ow_mailbox_bulk_options #closeBulkOptionsBtn {
        position: static !important;
        transform: none !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        align-self: stretch !important;
        margin: 0 !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        line-height: 18px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
    /* Match the actual rendered bar height precisely so the list
       sits flush below the bar — three rows × ~32px line-height
       + 10/10 vertical padding + 8px gaps × 2 ≈ 122px. The native
       sticky offset is `top: 0; left: 0; right: 0` on
       .ow_mailbox_left_body so we control its top via this rule. */
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_left_body {
        top: 126px !important;
    }
}

/* ─── #3: Mobile chat — module fits viewport exactly ────────────────
   v11 set .ow_mailbox_right to `height: calc(100svh - var(--nav-h))`
   but the parent .ow_mailbox_table already has its own viewport-based
   height calc (`calc(100svh - var(--nav-h) - 30px)`), so my child
   was TALLER than its parent → overflow → user has to scroll the
   page to see the send bar.

   Fix: make .ow_mailbox_right size to 100% of its parent height, and
   ensure all the flex-layout pieces (log scroller + footer) live
   inside that parent-bounded box. */
@media (max-width: 720px) {
    body.mailbox_messages_page .ow_mailbox_table {
        overflow: hidden !important;  /* don't let children push page taller */
    }
    body .ow_mailbox_table.elevate-conv-active .ow_mailbox_right {
        height: 100% !important;
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        margin: 0 !important;
    }
    body .ow_mailbox_table.elevate-conv-active .ow_mailbox_right .ow_mailbox_cap {
        flex: 0 0 auto !important;
    }
    body .ow_mailbox_table.elevate-conv-active .ow_mailbox_right .ow_mailbox_log_wrap {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
    }
    body .ow_mailbox_table.elevate-conv-active .ow_mailbox_right .ow_chat_message_block,
    body .ow_mailbox_table.elevate-conv-active .ow_mailbox_right .ow_mailbox_form,
    body .ow_mailbox_table.elevate-conv-active .ow_mailbox_right #conversationChatFormBlock,
    body .ow_mailbox_table.elevate-conv-active .ow_mailbox_right #conversationUserIsUnreachable {
        flex: 0 0 auto !important;
        position: relative !important;
        bottom: auto !important;
    }
}

/* ─── #4: Notifications form — deep-clamp, fits the smallest phone ──
   v11 forced max-width:100% on every descendant. Still overflowing —
   most likely culprit is the inner table's td:nth-child(2) which
   has no explicit width and gets sized to its content. With long
   raw keys + checkbox + 16-32px label column = total > viewport.

   Rather than fight individual rules, simply put the wrapping table
   inside a horizontal-scroll container at narrow viewports so even
   if the table renders wider than the viewport, the page itself
   never overflows. The conversation can still happen via the
   visible part of the form. */
@media (max-width: 720px) {
    body .elv-notif-prefs-wrap {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 8px 12px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;          /* hide table overflow */
    }
    body .elv-notif-prefs-wrap form[name="notificationSettingForm"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-x: auto !important;          /* let the table scroll, not the page */
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px;                  /* room for native scroll indicator */
    }
    /* Lock the table to the visible form width so it can never push
       wider than the wrapper. Cells word-break aggressively so the
       grid fits within the locked width without h-scroll in 99% of
       cases. */
    body .elv-notif-prefs-wrap .ow_table_1.ow_form {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        margin: 0 0 12px !important;
    }
    body .elv-notif-prefs-wrap .ow_table_1.ow_form td.ow_label {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 6px 4px !important;
        text-align: center !important;
        white-space: normal !important;
    }
    body .elv-notif-prefs-wrap .ow_table_1.ow_form td.ow_value {
        font-size: 12px !important;
        line-height: 1.35 !important;
        padding: 6px 8px !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    body .elv-notif-prefs-wrap .ow_table_1.ow_form th {
        font-size: 12px !important;
        padding: 8px 10px !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    /* The section icon spans default to inline-block with a fixed
       width from theme defaults — neutralise so they reflow. */
    body .elv-notif-prefs-wrap .ow_section_icon {
        display: block !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    /* Save button row already styled by v8 — make sure it doesn't
       force the parent wider. */
    body .elv-notif-prefs-wrap .elv-notifications-save-row {
        width: 100% !important;
        max-width: 100% !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v13 (May 2026) — final pass on three issues
   that v11/v12 didn't close out.
   ════════════════════════════════════════════════════════════════════ */

/* ─── #1 (continued): Bulk-options bar — tighter Cancel pill, kill
   the extra empty space below the bar ──────────────────────────────
   Root cause of the empty-space issue: mailbox.css line 700-711
   already converts .ow_mailbox_left to a vertical flex column on
   mobile, with .ow_mailbox_left_body sized via `flex: 1 1 auto;
   position: relative; top: auto`. My v9/v11/v12 `top: 126px
   !important` on the body was OVERRIDING that flex layout and
   reverting to absolute positioning with a fixed offset that didn't
   match the actual rendered bar height — hence the giant empty gap
   below the cancel button.

   Fix: stop forcing `top`. Let the inherited flex column handle
   positioning. Also shrink the Cancel pill so it never overflows
   the narrow rail. */
@media (max-width: 720px) {
    /* Bar itself: keep our flex-wrap layout. */
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_conv_options {
        padding: 8px 10px !important;
        flex-shrink: 0 !important;  /* mailbox.css 714 — re-apply for safety */
    }
    /* CRITICAL: undo the top:126px override so the body sits flush
       below the bar via the natural flex flow. position:relative +
       top:auto are inherited from mailbox.css line 702. */
    body .ow_mailbox_left.ow_mailbox_bulk_options .ow_mailbox_left_body {
        top: auto !important;
        position: relative !important;
        flex: 1 1 auto !important;
        margin-top: 0 !important;
    }
    /* Cancel pill: compact, no bleed past the rail edge. */
    body .ow_mailbox_left.ow_mailbox_bulk_options #closeBulkOptionsBtn {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
        line-height: 16px !important;
        margin: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}

/* ─── #3: Chat compose bubble — fully reset height after send ──────
   After typing a long message, dialogAutosize grows the textarea via
   inline `style="height: 120px"`. The keydown send handler resets
   only to `options.textareaHeight` (42px), not back to the slim
   no-content size. Our CSS `height: auto !important` overrides the
   inline rule, but with the textarea's `rows` attribute > 1 the
   browser still reports a multi-line height. Force `rows: 1` and a
   small intrinsic height via CSS, leaving max-height to grow on
   typing. JS click handler also clears val explicitly (next commit). */
body #conversationChatFormBlock textarea#dialogTextarea {
    /* Make height purely content-driven so empty textarea = 1 line */
    height: 36px !important;
    min-height: 36px !important;
    max-height: 140px !important;
    /* Single-line baseline. dialogAutosize grows rows as the user
       types and shrinks on send; this is the unflexed baseline. */
    line-height: 1.5 !important;
}
/* When the dialogAutosize plugin has appended .scroll to the bubble
   wrapper (lots of lines), allow textarea to grow up to max-height
   AND let it scroll internally so the bubble doesn't keep growing. */
body #conversationChatFormBlock .ow_chat_message.scroll textarea#dialogTextarea {
    overflow-y: auto !important;
    height: 140px !important;
    max-height: 140px !important;
}

/* ─── #4 (definitively): General preferences page mobile clamp ──────
   PREVIOUS ATTEMPTS TARGETED THE WRONG PAGE.

   I kept clamping .elv-notif-prefs-wrap which is on /email-notifications
   (the Notifications tab template, `notificationSettingForm`).
   The user was reporting the issue on the GENERAL tab
   (`/profile/preference`, `preferenceForm`) — completely different
   template (ow_system_plugins/base/views/controllers/preference_index.html)
   with a 3-COLUMN table (label / input / desc) instead of the 2-column
   table on the notifications page.

   The "extra cell that's too big" the user spotted is the desc
   (description) column. On mobile, the right thing is to stack the
   row's 3 cells vertically into a card layout so even long mass-mailing
   descriptions reflow within viewport width. */
@media (max-width: 720px) {
    /* Wrap the preference form in a strict viewport clamp. The form
       has no custom class so we target it by `name` attribute. The
       enclosing .ow_superwide wrapper from the box decorator (60%
       default width) needs to be 100% on mobile. */
    body form[name="preferenceForm"],
    body .ow_superwide:has(form[name="preferenceForm"]) {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 0 8px !important;
        overflow: hidden !important;
    }
    /* The 3-column table — convert to a stacked layout per row.
       Each <tr.ow_preference> becomes a vertical card with:
         Row A: label (left)
         Row B: input (full width)
         Row C: description (italic, small)
       This guarantees no horizontal overflow regardless of the
       length of any label/description text. */
    body form[name="preferenceForm"] table.ow_table_1.ow_form,
    body form[name="preferenceForm"] table.ow_table_1.ow_form > tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    body form[name="preferenceForm"] table.ow_table_1.ow_form tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    body form[name="preferenceForm"] table.ow_table_1.ow_form tr.ow_name.ow_txtleft th {
        display: block !important;
        width: 100% !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
    }
    body form[name="preferenceForm"] table.ow_table_1.ow_form tr.ow_preference {
        background: rgba(0,0,0,0.02) !important;
        border-radius: 8px;
        padding: 10px 12px !important;
        margin-bottom: 10px !important;
    }
    body form[name="preferenceForm"] table.ow_table_1.ow_form tr.ow_preference td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 4px 0 !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }
    /* Label cell — bigger / bolder so it reads as a heading */
    body form[name="preferenceForm"] table.ow_table_1.ow_form tr.ow_preference td.ow_label {
        font-weight: 600 !important;
        font-size: 13px !important;
        min-width: 0 !important;
    }
    /* Input cell — give the controls room to breathe */
    body form[name="preferenceForm"] table.ow_table_1.ow_form tr.ow_preference td.ow_value {
        padding: 4px 0 6px !important;
    }
    /* Desc cell — small italic helper text underneath */
    body form[name="preferenceForm"] table.ow_table_1.ow_form tr.ow_preference td.ow_desc {
        font-size: 12px !important;
        color: #6B7280 !important;
        font-style: italic !important;
    }
    /* Save button row — full width, centered */
    body form[name="preferenceForm"] + .clearfix.ow_stdmargin,
    body form[name="preferenceForm"] .clearfix.ow_stdmargin {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 0 0 !important;
        margin: 0 !important;
        text-align: center !important;
    }
    body form[name="preferenceForm"] .clearfix.ow_stdmargin .ow_right {
        float: none !important;
        text-align: center !important;
    }

    /* Also: revert v12's overflow-x:auto on the notifications form
       — the user explicitly said they don't want a horizontal scroll
       inside the form. Now that the General tab is properly clamped
       above and the Notifications tab has overflow-wrap on every cell,
       neither needs scroll. */
    body .elv-notif-prefs-wrap form[name="notificationSettingForm"] {
        overflow-x: hidden !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v14 (May 2026) — prefs padding + timezone
   hide, legacy chat popups disabled, avatar under-review overlay.
   ════════════════════════════════════════════════════════════════════ */

/* ─── #4: General preferences page — top + bottom padding ───────────
   The mass-mailing section header was sitting flush against the top
   of the form's box-decorator and the Save button against the
   bottom. Add internal padding so the page breathes. Selectors are
   scoped to the preference form so this doesn't affect any other
   tabbed shell. */
body .ow_superwide:has(form[name="preferenceForm"]),
body form[name="preferenceForm"] {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}
body form[name="preferenceForm"] > table.ow_table_1.ow_form {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}
body form[name="preferenceForm"] > .clearfix.ow_stdmargin,
body form[name="preferenceForm"] + .clearfix.ow_stdmargin {
    margin-top: 22px !important;
    padding-top: 6px !important;
}

/* ─── #4 (continued): Timezone row — definitive removal ─────────────
   The v9 :has() rule + JS .elv-pref-hidden fallback exists but the
   user keeps seeing the row. Force hide with the broadest selector
   set possible (the v9 rule is intact above; this is belt-and-braces).
   Hides the LABEL cell, INPUT cell, DESC cell, AND the whole TR via
   every reachable selector. */
body form[name="preferenceForm"] tr.ow_preference:has(select[name="timeZoneSelect"]),
body form[name="preferenceForm"] tr.ow_preference.elv-pref-hidden,
body form[name="preferenceForm"] tr:has(td > label[for="timeZoneSelect"]),
body form[name="preferenceForm"] tr:has(select[name="timeZoneSelect"]) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* ─── #6: Disable the legacy floating chat popups everywhere ────────
   The bottom-right floating chat dialog windows are rendered by
   MAILBOX_CMP_Toolbar which is injected into every authenticated
   page via the console-mailbox component. Hide every visible piece
   of that legacy UI without touching the toolbar PHP (which also
   handles ping infrastructure used by the console unread counter,
   so we can't unbind it cleanly).

   The /messages page uses entirely different selectors
   (#conversationListControl, #conversationContainer) and is
   unaffected by these rules. */
body #dialogsContainer,
body #dialogsContainer .mailboxDialogBlock,
body .ow_chat_dialog,
body .ow_chat_dialog_wrap,
body .ow_chat_selector,
body .ow_chat_cont,
body .ow_chat_main_block,
body .ow_chat_minimized,
body .ow_chat_dialog.ow_open,
body .ow_chat_dialog.ow_minimized {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ─── #8: Avatar "Under review" overlay positioning ─────────────────
   pcgallery emits an overlay div with position:absolute when the
   user's avatar is pending moderation, but the parent
   .ow_profile_gallery_avatar_image has no `position: relative`, so
   the overlay positions against the document root instead of the
   image. Adding position:relative anchors the overlay correctly.
   The lang key `base+avatar_pending_approval` controls the overlay
   text — set it to "Under review" via SQL (see follow-up). */
body .ow_profile_gallery_avatar_image {
    position: relative !important;
}
/* Make the overlay look like a clean badge rather than a heavy
   80%-opacity black mask — match the elevate aesthetic. */
body .ow_profile_gallery_avatar_image [data-outlet="approve-overlay"] {
    background-color: rgba(124, 58, 237, 0.85) !important;
    color: #ffffff !important;
    border-radius: var(--r-md, 8px) !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    padding: 4px 8px !important;
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v15 (May 2026) — unlike modal styling,
   final pass on chat shrink-after-send.
   ════════════════════════════════════════════════════════════════════ */

/* ─── #7: Unlike confirmation modal — red-tinted Confirm button ─────
   Reuses the .elv-premium-lock-modal-* shell so visuals match the
   rest of the modal vocabulary. The .elv-lock-cta-danger variant
   replaces the violet upgrade-CTA gradient with a red destructive
   action color to signal the irreversible nature of the action. */
body .elv-premium-lock-modal .elv-lock-cta.elv-lock-cta-danger {
    background: #DC2626 !important;
    background-image: none !important;
    border-color: #DC2626 !important;
    color: #ffffff !important;
}
body .elv-premium-lock-modal .elv-lock-cta.elv-lock-cta-danger:hover {
    background: #B91C1C !important;
    border-color: #B91C1C !important;
}
body .elv-premium-lock-modal-backdrop[data-elv-modal="unlike-confirm"] .elv-lock-icon {
    color: #DC2626 !important;
}

/* ─── #3 (final attempt): chat textarea snap-back via inline !important
   The browser-level fight here is real: jQuery .css() and even
   element.style.removeProperty() can leave the textarea's computed
   height untouched until the next layout interaction. Adding an
   inline !important fallback gives us the strongest possible
   anchor for the empty-state height — inline !important beats any
   stylesheet rule regardless of specificity. JS in the click
   handler (next commit) explicitly sets style="height: 36px !important"
   via setProperty('important'). */
body #conversationChatFormBlock textarea#dialogTextarea {
    transition: height 80ms ease-out;
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v16 (May 2026) — dashboard widget sizing
   pass: narrow page width to match my-matches / discovery,
   square bookmark thumbs, ~2x hotlist photos.
   ════════════════════════════════════════════════════════════════════ */

/* ─── #5: Dashboard module width — match the 900px clamp used by
   .elevate_matches_page (my-matches + discovery). The existing v6
   rules at lines 5997-6014 target #widgets_dashboard / .ow_dnd_entity
   which don't appear in the actual rendered DOM — the real
   container is #place_sections. We add the same clamp to it (and
   keep the legacy selectors as a no-op safety net).

   Two-column dashboard layout (left_section + right_section) is
   preserved — the narrower viewport just makes each column slimmer,
   matching the rest of the site's visual rhythm. */
@media (min-width: 901px) {
    body.base_user_dashboard #place_sections {
        max-width: 900px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* The outer canvas / page container — clamp it too in case the
       page wraps #place_sections in its own scaffolding. */
    body.base_user_dashboard .ow_canvas,
    body.base_user_dashboard .ow_page > .ow_main {
        max-width: 940px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ─── #3: Bookmarks dashboard widget — square thumbs to match
   Recently Viewed Me. The global .ow_avatar img { border-radius: 50% }
   rule at line 1170 forces circles. We override it on the
   bookmarks widget specifically, copying the 70px / radius:10px
   pattern used by .ow_guest_user. */
body.base_user_dashboard .bookmarks_user_list_wrap .ow_avatar img,
body.base_user_dashboard .ow_lp_avatars[id*="bookmarks"] .ow_avatar img,
body.base_user_dashboard .ow_dnd_widget[class*="bookmarks"] .ow_avatar img,
body.base_user_dashboard .ow_dnd_widget[class*="bookmark"] .ow_lp_avatars .ow_avatar img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover;
    border-radius: 10px !important;
    display: block;
}
/* Tighten the avatar wrapper margin so the squares pack horizontally
   like the Recently Viewed Me grid. */
body.base_user_dashboard .ow_dnd_widget[class*="bookmark"] .ow_lp_avatars .ow_avatar {
    margin: 4px 6px 4px 0;
    display: inline-block;
    vertical-align: top;
}

/* ─── #4: Hotlist widget — ~2x avatar dimensions. The default
   avatar size is ~44-48px (the auth-service avatar small URL). We
   bump it to 96px and tighten margins so the grid still fits in a
   narrow column. The number_of_users default is 8; without a
   matching ow_item_set8 rule, the anchors size to fit content. */
body.base_user_dashboard .hotlist .ow_lp_avatars .ow_avatar img,
body.base_user_dashboard .ow_dnd_widget[class*="hotlist"] .ow_lp_avatars .ow_avatar img,
body.base_user_dashboard .users_slideshow .ow_lp_avatars .ow_avatar img {
    width: 96px !important;
    height: 96px !important;
    object-fit: cover;
    max-width: none !important;
}
body.base_user_dashboard .hotlist .ow_lp_avatars .ow_avatar,
body.base_user_dashboard .ow_dnd_widget[class*="hotlist"] .ow_lp_avatars .ow_avatar,
body.base_user_dashboard .users_slideshow .ow_lp_avatars .ow_avatar {
    display: inline-block;
    margin: 6px;
    vertical-align: top;
}
/* Neutralize the ow_item_setN width rules (only sets 2-5 exist in
   our CSS; set8 falls back to whatever a[class*="ow_item_set"]
   resolves to). Let the larger images dictate the cell width. */
body.base_user_dashboard .hotlist a[class*="ow_item_set"],
body.base_user_dashboard .ow_dnd_widget[class*="hotlist"] a[class*="ow_item_set"] {
    width: auto !important;
    height: auto !important;
    display: inline-block;
}
/* Keep hotlist photos circular (theme convention — round avatars
   look polished for the "hot" theme). User specifically said
   they LIKED the circles, only wants them bigger. */
body.base_user_dashboard .hotlist .ow_lp_avatars .ow_avatar img,
body.base_user_dashboard .ow_dnd_widget[class*="hotlist"] .ow_lp_avatars .ow_avatar img {
    border-radius: 50% !important;
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v17 (May 2026) — corrections to v16:
   • Restore full-width title bar on dashboard (#1)
   • Bookmarks squares now target the ACTUAL CMP-class wrapper (#4)
   • Hotlist photos enlarged to ~140px AND target the right wrapper (#5)
   The drag-and-drop widget wrapper uses `dashboard-<FULL_CMP_CLASS>`
   as its uniqName, e.g. `dashboard-BOOKMARKS_CMP_BookmarksWidget`,
   NOT a slugified form. v16's [class*="bookmark"] / [class*="hotlist"]
   selectors didn't match because they expect lowercase substrings.
   ════════════════════════════════════════════════════════════════════ */

/* ─── #1: Dashboard title bar — same width as my-matches / discovery.
   v16 clamped the outer canvas to 940px, which shrunk the page
   heading bar too. Other pages keep the heading at the full canvas
   width (1060px) and only clamp the CONTENT area. Match that by
   releasing the canvas clamp. The #place_sections 900px clamp from
   v16 remains for the widget grid. */
@media (min-width: 901px) {
    body.base_user_dashboard .ow_canvas,
    body.base_user_dashboard .ow_page > .ow_main {
        max-width: none !important;
    }
}

/* ─── #4: Bookmarks dashboard widget — square thumbs.
   Real wrapper class is `dashboard-BOOKMARKS_CMP_BookmarksWidget`
   (full class name preserved with underscores). v16's
   [class*="bookmark"] selector was lowercase and failed to match. */
body.base_user_dashboard .ow_dnd_widget.dashboard-BOOKMARKS_CMP_BookmarksWidget .ow_lp_avatars .ow_avatar img,
body.base_user_dashboard .ow_dnd_widget[class*="BOOKMARKS_CMP_BookmarksWidget"] .ow_lp_avatars .ow_avatar img,
body.base_user_dashboard .ow_dnd_widget[class*="BOOKMARKS"] .ow_lp_avatars .ow_avatar img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    display: block;
}
body.base_user_dashboard .ow_dnd_widget.dashboard-BOOKMARKS_CMP_BookmarksWidget .ow_lp_avatars .ow_avatar,
body.base_user_dashboard .ow_dnd_widget[class*="BOOKMARKS_CMP_BookmarksWidget"] .ow_lp_avatars .ow_avatar,
body.base_user_dashboard .ow_dnd_widget[class*="BOOKMARKS"] .ow_lp_avatars .ow_avatar {
    margin: 4px 6px 4px 0 !important;
    display: inline-block !important;
    vertical-align: top !important;
    width: auto !important;
    height: auto !important;
}

/* ─── #5: Hotlist widget — bumped to ~140px (was 96px in v16, user
   reports 'still look the same size'). Real wrapper class:
   `dashboard-HOTLIST_CMP_IndexWidget`. */
body.base_user_dashboard .ow_dnd_widget.dashboard-HOTLIST_CMP_IndexWidget .ow_lp_avatars .ow_avatar img,
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST_CMP_IndexWidget"] .ow_lp_avatars .ow_avatar img,
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hotlist .ow_lp_avatars .ow_avatar img,
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .ow_lp_avatars .ow_avatar img {
    width: 140px !important;
    height: 140px !important;
    object-fit: cover !important;
    max-width: none !important;
    border-radius: 50% !important;
}
body.base_user_dashboard .ow_dnd_widget.dashboard-HOTLIST_CMP_IndexWidget .ow_lp_avatars .ow_avatar,
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST_CMP_IndexWidget"] .ow_lp_avatars .ow_avatar,
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .ow_lp_avatars .ow_avatar {
    display: inline-block !important;
    margin: 8px !important;
    vertical-align: top !important;
    width: auto !important;
    height: auto !important;
}
/* Neutralize anchor's missing ow_item_setN width on hotlist so the
   140px image dictates the cell. */
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] a[class*="ow_item_set"] {
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
}
/* Hotlist's own container — let it grow to accommodate bigger photos. */
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hotlist,
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .users_slideshow,
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item {
    height: auto !important;
    min-height: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v18 (May 2026) — responsive hotlist
   sizing. User: "hotlist mobile, i want to revert to the photo
   sizes we had earlier. Keep desktop bigger. but mobile should be
   smaller. for both desktop and mobile, the photos should be of a
   size where 2 rows fit in the module pretty much perfectly".
   v17 used a single 140px size which broke the 2-row layout. This
   layer overrides v17 with breakpoint-specific sizing.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Desktop (>=901px): 5 photos × 80px + 4 gaps × 8px = 432px,
   fits inside the ~440px-wide dashboard widget column. */
@media (min-width: 901px) {
    body.base_user_dashboard .ow_dnd_widget.dashboard-HOTLIST_CMP_IndexWidget .ow_lp_avatars .ow_avatar img,
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST_CMP_IndexWidget"] .ow_lp_avatars .ow_avatar img,
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .ow_lp_avatars .ow_avatar img {
        width: 80px !important;
        height: 80px !important;
        object-fit: cover !important;
        max-width: none !important;
        border-radius: 50% !important;
    }
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .ow_lp_avatars .ow_avatar {
        margin: 4px !important;
        display: inline-block !important;
        vertical-align: top !important;
    }
}

/* ─── Mobile (<=900px): 5 photos × 55px + 4 gaps × 6px = 299px,
   fits inside the ~340px mobile widget width. */
@media (max-width: 900px) {
    body.base_user_dashboard .ow_dnd_widget.dashboard-HOTLIST_CMP_IndexWidget .ow_lp_avatars .ow_avatar img,
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST_CMP_IndexWidget"] .ow_lp_avatars .ow_avatar img,
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .ow_lp_avatars .ow_avatar img {
        width: 55px !important;
        height: 55px !important;
        object-fit: cover !important;
        max-width: none !important;
        border-radius: 50% !important;
    }
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .ow_lp_avatars .ow_avatar {
        margin: 3px !important;
        display: inline-block !important;
        vertical-align: top !important;
    }
}

/* Center the slideshow content + give it a touch of vertical
   breathing room so the 2-row grid sits cleanly inside the box. */
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .users_slideshow,
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hotlist {
    text-align: center !important;
    padding: 8px 4px !important;
}
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item {
    text-align: center !important;
    line-height: 0 !important; /* kills inline-block whitespace gaps between rows */
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v19 (May 2026) — checkout processing modal,
   subscription page current-plan box, mobile hotlist 3-per-row.
   ════════════════════════════════════════════════════════════════════ */

/* ─── #1: Checkout processing / success modal — full-screen overlay
   injected by stripe_billing.js the moment Complete Order is clicked.
   Two visual states: processing (spinner) → success (checkmark).
   Visual language matches the premium-lock modal vocabulary. */
.elv-checkout-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    animation: elvCheckoutFadeIn 180ms ease-out !important;
}
@keyframes elvCheckoutFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.elv-checkout-overlay-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 36px 32px 32px !important;
    width: min(420px, calc(100vw - 32px)) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35) !important;
    text-align: center !important;
    animation: elvCheckoutCardIn 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes elvCheckoutCardIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.elv-checkout-overlay h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 18px 0 8px !important;
    line-height: 1.3 !important;
}
.elv-checkout-overlay p {
    font-size: 15px !important;
    color: #4B5563 !important;
    margin: 0 0 6px !important;
    line-height: 1.5 !important;
}
.elv-checkout-overlay .elv-checkout-redirect-hint {
    color: #9CA3AF !important;
    font-size: 13px !important;
    margin-top: 16px !important;
}
.elv-checkout-spinner {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto !important;
    border: 4px solid #EDE9FE !important;
    border-top-color: #7C3AED !important;
    border-radius: 50% !important;
    animation: elvCheckoutSpin 0.9s linear infinite !important;
}
@keyframes elvCheckoutSpin {
    to { transform: rotate(360deg); }
}
.elv-checkout-checkmark {
    width: 52px !important;
    height: 52px !important;
    margin: 0 auto !important;
    animation: elvCheckoutPop 350ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes elvCheckoutPop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}
/* Lock page scroll while modal is up */
body.elv-checkout-modal-open {
    overflow: hidden !important;
}

/* ─── #2: Subscription page — "Your current membership" box.
   The page renders this above the plan table via:
       {block_decorator name='box' type='empty' addClass="ow_stdmargin"}
   which becomes `.ow_box_empty.ow_stdmargin.ow_no_cap`. The rest of
   the page uses `.subscribe-table-wrapper` (white card, 14px radius,
   subtle shadow, violet accents). Match that pattern so the current-
   plan box reads as part of the same page, not a stray default box. */
body.membership_subscribe_index .ow_box_empty.ow_stdmargin,
body.membership_subscribe_index .ow_subscription_index .ow_box_empty {
    background: linear-gradient(135deg, #F5F3FF 0%, #ffffff 60%) !important;
    border: 1px solid #DDD6FE !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.08) !important;
    padding: 18px 22px !important;
    margin: 0 auto 18px !important;
    max-width: 840px !important; /* aligns with .subscribe-table-wrapper */
    color: #374151 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    position: relative !important;
}
/* Violet accent bar on the left edge — reinforces the "current
   plan" callout look without screaming. */
body.membership_subscribe_index .ow_box_empty.ow_stdmargin::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 14px !important;
    bottom: 14px !important;
    width: 4px !important;
    background: linear-gradient(180deg, #7C3AED, #5B21B6) !important;
    border-radius: 0 2px 2px 0 !important;
}
body.membership_subscribe_index .ow_box_empty.ow_stdmargin {
    padding-left: 30px !important;
}
/* The two labels ("Membership:" and "Expires:") + value spans. */
body.membership_subscribe_index .ow_box_empty.ow_stdmargin .ow_remark {
    color: #5B21B6 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}
body.membership_subscribe_index .ow_box_empty.ow_stdmargin .ow_remark.ow_small {
    font-size: 15px !important;
}

/* ─── #4: Mobile hotlist — 3 per row, max 9 (3 rows).
   Overrides v18's 5/row mobile rules. At 90px image + 6px gap,
   3 photos fit cleanly in a ~340px-wide mobile widget column
   (3 × 90 + 2 × 6 = 282px). Hide the 10th photo via :nth-child
   so server-side stays 10 (desktop unchanged) — clean CSS-only
   layout switch by viewport. */
@media (max-width: 900px) {
    body.base_user_dashboard .ow_dnd_widget.dashboard-HOTLIST_CMP_IndexWidget .ow_lp_avatars .ow_avatar img,
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST_CMP_IndexWidget"] .ow_lp_avatars .ow_avatar img,
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .ow_lp_avatars .ow_avatar img {
        width: 90px !important;
        height: 90px !important;
        object-fit: cover !important;
        max-width: none !important;
        border-radius: 50% !important;
    }
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .ow_lp_avatars .ow_avatar {
        margin: 3px !important;
        display: inline-block !important;
        vertical-align: top !important;
    }
    /* Cap the visible count at 9 (3 rows of 3) on mobile.
       Targets the 10th .ow_avatar inside the first
       .hot_list_normal_item — matches the slide-grouped DOM. */
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item > .ow_avatar:nth-of-type(n+10) {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v20 (May 2026) —
   #3 Polished current-membership banner on /membership/subscribe
   #4 Hotlist switched to CSS Grid so 5/row works at ANY column width
   ════════════════════════════════════════════════════════════════════ */

/* ─── #3: Current membership banner ───────────────────────────────
   The subscribe template now renders a dedicated
   .elv-current-membership-banner block (replacing the previous
   ow_box_empty fallback). Same 840px max-width as the plan
   table below it so the two cards align. Violet gradient header
   bar + large bold plan name + smaller expiration sub-row, with
   a trophy/star icon on the left side. Reads as "you're in the
   club" rather than a stray default Oxwall box. */
.elv-current-membership-banner {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    max-width: 840px !important;
    margin: 0 auto 22px !important;
    padding: 20px 24px !important;
    background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%) !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.25) !important;
    position: relative !important;
    overflow: hidden !important;
}
/* Decorative diagonal shine in the upper-right — gives the
   gradient depth without being noisy. */
.elv-current-membership-banner::after {
    content: '' !important;
    position: absolute !important;
    top: -30%; right: -10%;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 60%);
    pointer-events: none;
}

.elv-current-membership-banner .elv-cmb-icon {
    flex: 0 0 auto !important;
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.18) !important;
    border-radius: 50% !important;
    color: #FCD34D !important; /* warm gold star */
    backdrop-filter: blur(2px);
}
.elv-current-membership-banner .elv-cmb-body {
    flex: 1 1 auto !important;
    min-width: 0 !important; /* prevents flex overflow */
}
.elv-current-membership-banner .elv-cmb-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: rgba(255,255,255,0.85) !important;
    margin-bottom: 2px !important;
}
.elv-current-membership-banner .elv-cmb-plan {
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.elv-current-membership-banner .elv-cmb-recurring {
    display: inline-block !important;
    margin-left: 8px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    background: rgba(255,255,255,0.22) !important;
    border-radius: 999px !important;
    vertical-align: middle !important;
}
.elv-current-membership-banner .elv-cmb-expires {
    margin-top: 6px !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.9) !important;
}
.elv-current-membership-banner .elv-cmb-expires-label {
    font-weight: 600 !important;
    margin-right: 4px !important;
}
.elv-current-membership-banner .elv-cmb-expires-date {
    font-weight: 700 !important;
    color: #FDE68A !important;
}
@media (max-width: 720px) {
    .elv-current-membership-banner {
        padding: 16px 18px !important;
        gap: 14px !important;
        border-radius: 12px !important;
    }
    .elv-current-membership-banner .elv-cmb-icon {
        width: 44px !important;
        height: 44px !important;
    }
    .elv-current-membership-banner .elv-cmb-plan {
        font-size: 20px !important;
    }
}

/* Suppress the v19 attempt at styling the old .ow_box_empty
   fallback so we don't have two competing banners stacked when
   the template change deploys but the user is still on a cached
   page. The new .elv-current-membership-banner takes over. */
body.membership_subscribe_index .ow_box_empty.ow_stdmargin::before {
    display: none !important;
}

/* ─── #4: Hotlist — switch to CSS Grid for self-sizing ────────────
   v19 used fixed 90px squares on mobile. User reported only 2
   photos fitting per row, meaning the actual mobile widget
   column is ~200px wide — much narrower than the 340px I'd
   estimated.

   Switch to CSS Grid with `grid-template-columns: repeat(5, 1fr)`
   so the photos auto-size to fill 5 columns regardless of the
   parent's actual width. Each image gets `aspect-ratio: 1 / 1`
   so they stay perfectly square even as the cell narrows.

   Result: 5 photos per row on both desktop AND mobile, with
   each photo automatically sized to fit. No more fixed-pixel
   guessing about widget widths.

   Drops the v19 mobile :nth-of-type(n+10) cap — all 10 photos
   show on both viewports now, arranged as 5 × 2 rows.

   Override key: very specific selectors with !important to
   defeat the v16/v17/v18/v19 fixed-pixel rules above. */
body.base_user_dashboard .ow_dnd_widget.dashboard-HOTLIST_CMP_IndexWidget .hot_list_normal_item.ow_lp_avatars,
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST_CMP_IndexWidget"] .hot_list_normal_item.ow_lp_avatars,
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item.ow_lp_avatars {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 6px !important;
    padding: 6px !important;
    /* Override the .ow_lp_avatars default inline-block flow. */
    text-align: initial !important;
    line-height: normal !important;
}
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item .ow_avatar {
    /* Cells fill their grid column; no fixed width or margin. */
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
}
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item .ow_avatar a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item .ow_avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    max-width: none !important;
}
/* Show all 10 again — overrides v19's nth-of-type(n+10) hide. */
@media (max-width: 900px) {
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item > .ow_avatar:nth-of-type(n+10) {
        display: block !important;
    }
    /* On mobile, slightly tighter gap so the 5-column grid still
       leaves breathing room around photos when the column is
       very narrow (~200px). */
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item.ow_lp_avatars {
        gap: 4px !important;
        padding: 4px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v21 (May 2026)
   #3 White-base current-membership banner (v20 was too violet+wide)
   #4 Hotlist: padding-bottom 100% square trick + 5/desktop, 3/mobile
   ════════════════════════════════════════════════════════════════════ */

/* ─── #3: White-base banner — modern + clean ─────────────────────
   User: "i dont want the background to be purple. i want it to be
   relatively clean/modern like a white base like other modules.
   maybe just some of the text is purple. also its slightly too
   wide. it should be same width as subscription table"

   Subscription table is .subscribe-table-wrapper max-width 840px
   but ALSO has 24px-equivalent left/right padding around it (the
   ow_stdmargin wrapping). Matching that visual width means the
   banner itself should be ~792px (840 - 48 padding). Simplest
   approach: match the box-shadow / border / radius of the
   .subscribe-table-wrapper so they read as a clean pair, and
   sit them both inside the same ow_stdmargin container by using
   the same outer max-width but slightly tighter padding.

   Reset the v20 violet gradient bg + decorative ::after entirely. */
.elv-current-membership-banner {
    background: #ffffff !important;
    background-image: none !important;
    color: #111827 !important;
    border: 1px solid #EDE9FE !important;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.08) !important;
    border-radius: 14px !important;
    max-width: 840px !important;
    padding: 18px 22px !important;
    margin: 0 auto 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    position: relative !important;
    overflow: hidden !important;
}
/* Remove v20 violet shine — banner is white now. */
.elv-current-membership-banner::after {
    display: none !important;
    content: none !important;
}

/* Left-edge violet accent bar — subtle, only thing that reads
   "premium" on an otherwise white card. */
.elv-current-membership-banner::before {
    content: '' !important;
    position: absolute !important;
    left: 0; top: 14px; bottom: 14px;
    width: 4px !important;
    background: linear-gradient(180deg, #7C3AED, #5B21B6) !important;
    border-radius: 0 3px 3px 0 !important;
}

.elv-current-membership-banner .elv-cmb-icon {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%) !important;
    border-radius: 50% !important;
    color: #7C3AED !important; /* violet star on light violet circle */
    backdrop-filter: none !important;
    margin-left: 6px !important; /* clear the accent bar */
}

.elv-current-membership-banner .elv-cmb-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.elv-current-membership-banner .elv-cmb-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #7C3AED !important; /* violet eyebrow label */
    margin-bottom: 2px !important;
}
.elv-current-membership-banner .elv-cmb-plan {
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #111827 !important; /* near-black plan name */
    text-shadow: none !important;
}
.elv-current-membership-banner .elv-cmb-recurring {
    display: inline-block !important;
    margin-left: 8px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    background: #F5F3FF !important;
    color: #5B21B6 !important;
    border: 1px solid #DDD6FE !important;
    border-radius: 999px !important;
    vertical-align: middle !important;
}
.elv-current-membership-banner .elv-cmb-expires {
    margin-top: 5px !important;
    font-size: 13px !important;
    color: #6B7280 !important;
}
.elv-current-membership-banner .elv-cmb-expires-label {
    font-weight: 600 !important;
    color: #6B7280 !important;
    margin-right: 4px !important;
}
.elv-current-membership-banner .elv-cmb-expires-date {
    font-weight: 700 !important;
    color: #5B21B6 !important;
}
@media (max-width: 720px) {
    .elv-current-membership-banner {
        padding: 14px 16px !important;
        gap: 12px !important;
        border-radius: 12px !important;
    }
    .elv-current-membership-banner .elv-cmb-icon {
        width: 36px !important;
        height: 36px !important;
    }
    .elv-current-membership-banner .elv-cmb-plan {
        font-size: 18px !important;
    }
}

/* ─── #4: Hotlist circle-in-circle fix + 5 desktop / 3 mobile ─────
   User: "what is actually showing is just a tiny portion of the
   full circle profile picture...its like... it takes a larger
   sized circle photo, and makes a new circle from the top 1/5
   of that"

   Diagnosis: in v20 the .ow_avatar cell relied on aspect-ratio:
   1/1 to compute its height from the grid column width. But the
   intrinsic image (which is bigger than the cell) was stretching
   the cell's height before aspect-ratio could clamp it. Result:
   .ow_avatar became a tall narrow rectangle showing only the
   middle slice of the source img.

   Fix: switch to the padding-bottom: 100% square trick. The
   .ow_avatar gets explicit aspect via padding (always supported,
   never overridden by content), and the img is absolutely
   positioned inside so it can never expand the cell.

   Plus: 5 columns desktop / 3 columns mobile with hard caps
   (10 on desktop, 9 on mobile via :nth-of-type(n+11)/(n+10)).
   Two distinct CSS branches by @media, no shared base rule. */

/* Common base — square cell via padding-bottom trick. Reset all
   inherited v17–v20 fixed-pixel rules to auto. */
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item.ow_lp_avatars {
    display: grid !important;
    text-align: initial !important;
    line-height: normal !important;
}
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item .ow_avatar {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;             /* square via padding-bottom */
    padding-bottom: 100% !important;  /* enforces 1:1 aspect ratio  */
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    aspect-ratio: auto !important;    /* defeat v20's aspect-ratio rule */
    background: #F3F4F6 !important;   /* shows while img loads */
}
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item .ow_avatar a {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item .ow_avatar img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Desktop: 5 × 2 = 10 photos, gap 8px. */
@media (min-width: 901px) {
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item.ow_lp_avatars {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    /* Show photos 1–10, hide anything past. */
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item > .ow_avatar:nth-of-type(n+11) {
        display: none !important;
    }
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item > .ow_avatar:nth-of-type(-n+10) {
        display: block !important;
    }
}

/* Mobile: 3 × 3 = 9 photos, gap 6px. */
@media (max-width: 900px) {
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item.ow_lp_avatars {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding: 6px !important;
    }
    /* Show photos 1–9, hide 10. */
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item > .ow_avatar:nth-of-type(n+10) {
        display: none !important;
    }
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item > .ow_avatar:nth-of-type(-n+9) {
        display: block !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v22 (May 2026)
   #3 Banner width — box-sizing fix (was overflowing due to content-box)
   #4 Hotlist: simpler approach — use img directly as the circular cell
       (no padding-bottom wrapper) + 2 rows of 3 on mobile (6 max)
   ════════════════════════════════════════════════════════════════════ */

/* ─── #3: Banner width — box-sizing border-box ───────────────────
   v21 set max-width: 840px + padding: 18px 22px. With CSS default
   content-box box-sizing, the 22px padding ADDS to the max-width,
   so the banner's outer width was 840 + 44 = 884px — wider than
   the 840px-flat .subscribe-table-wrapper below it. The user's
   screenshot showed exactly that ~30px overflow on each side.

   Fix: switch the banner to box-sizing: border-box so padding is
   INCLUDED in the max-width budget. Outer width clamps to 840px
   regardless of padding. Aligns perfectly with the table. */
.elv-current-membership-banner {
    box-sizing: border-box !important;
}
.elv-current-membership-banner *,
.elv-current-membership-banner *::before,
.elv-current-membership-banner *::after {
    box-sizing: border-box !important;
}

/* ─── #4: Hotlist — DROP the wrapper, style the img directly ─────
   User: "it should be taking the raw photo, and circalizing that.
   it was working earlier idk why its doing this now. desktop is
   also doing a weird thing where there is a 2nd shadow circle."

   Diagnosis of v21:
     - .ow_avatar had background:#F3F4F6 + border-radius:50% (the
       "shadow circle" the user saw)
     - The img inside, despite width:100%/height:100%, was rendering
       smaller than the cell on some browsers due to the
       padding-bottom 100% trick interacting with absolutely-
       positioned content + the img's intrinsic dimensions

   Simpler approach: forget the wrapper entirely. Let the IMG itself
   be the circular avatar — set aspect-ratio on the img, give it
   the border-radius, and let the wrapper just be a passthrough.
   No background color on the wrapper, no padding tricks, no
   absolute positioning. */

/* Hard reset the .ow_avatar wrapper — no bg, no padding, just a
   passthrough block. We have to use VERY high specificity to
   override the v17–v21 rules above. */
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item.ow_lp_avatars .ow_avatar {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    aspect-ratio: auto !important;
}
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item.ow_lp_avatars .ow_avatar a {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}
/* THE IMAGE IS THE CIRCLE. Sized to fill its grid column, square
   via aspect-ratio, clipped round. Single border-radius, no
   shadow ring, no double clipping. */
body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item.ow_lp_avatars .ow_avatar img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

/* ─── Column counts + per-viewport hard caps ─────────────────────
   Desktop: 5 cols × 2 rows = 10 photos.
   Mobile:  3 cols × 2 rows = 6 photos (user revised down from 9). */
@media (min-width: 901px) {
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item.ow_lp_avatars {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item > .ow_avatar:nth-of-type(-n+10) {
        display: block !important;
    }
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item > .ow_avatar:nth-of-type(n+11) {
        display: none !important;
    }
}
@media (max-width: 900px) {
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item.ow_lp_avatars {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding: 6px !important;
    }
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item > .ow_avatar:nth-of-type(-n+6) {
        display: block !important;
    }
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item > .ow_avatar:nth-of-type(n+7) {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v23 (May 2026)
   #4 Mobile hotlist — single row, all 10 photos, horizontal scroll.
       Title "Hot List" + footer "I want to be featured" button stay
       frozen above/below the scrolling photo strip.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Hotlist mobile single-row horizontal scroll ─────────────────
   User: "for the mobile version of hotlist. can we try making it
   just one row, make the circle slightly smaller than they are
   now. but include 10 and have it horizontally scrollable? but
   with the title 'Hot List' and the below 'I want to be featured'
   button frozen so that they don't slide?"

   Structure layered:
     .ow_dnd_widget[*HOTLIST*]                  (whole widget block)
       .ow_box_cap_empty / .ow_box_cap          (title row — STAYS)
       .ow_box_empty / .ow_box                  (content card)
         .hotlist                               (inner container)
           .users_slideshow                     (slideshow wrap)
             .hot_list_normal_item.ow_lp_avatars  (← SCROLLS)
               .ow_avatar × N                   (photo cells)
           .hotlist_footer                       (featured button — STAYS)

   Approach: on mobile, override the .hot_list_normal_item from CSS
   Grid to a flex row with overflow-x:auto. Each .ow_avatar gets a
   fixed flex-basis so 10 fixed-size circles line up in one row.
   The slideshow wrap, the title, and the footer button live
   OUTSIDE the scrolling element, so they stay frozen at their
   normal positions while only the photo strip slides horizontally. */

@media (max-width: 900px) {
    /* Override v22's grid layout — flex row, scrollable. */
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item.ow_lp_avatars {
        display: flex !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding: 8px 12px !important;
        /* Hide the scrollbar visually but keep scroll behavior.
           User has touch + (on touch laptops) trackpad scroll. */
        scrollbar-width: none !important;
    }
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item.ow_lp_avatars::-webkit-scrollbar {
        display: none !important;
    }

    /* Each photo: fixed-width cell, slightly smaller than v22 grid
       sizing. 60px circles + 8px gap → 10 photos take 60*10 + 8*9
       = 672px wide, well wider than the mobile viewport so the
       overflow scroll engages. */
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item.ow_lp_avatars .ow_avatar {
        flex: 0 0 60px !important;
        width: 60px !important;
        height: auto !important;
        scroll-snap-align: start !important;
    }

    /* Show ALL 10 on mobile now (overrides v22's nth-of-type(n+7) hide). */
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item > .ow_avatar:nth-of-type(-n+10) {
        display: block !important;
    }
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item > .ow_avatar:nth-of-type(n+7) {
        display: block !important;  /* explicit override of v22 hide */
    }
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item > .ow_avatar:nth-of-type(n+11) {
        display: none !important;
    }

    /* The slideshow wrapper sits OUTSIDE the scrolling element, so
       the title (rendered by the box decorator above) and the
       footer button stay frozen automatically — they're DOM
       siblings of .users_slideshow, not children. Just need to
       make sure the slideshow wrap doesn't itself overflow. */
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .users_slideshow {
        overflow: hidden !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Hot list footer — keep visible, ensure it stays anchored. */
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hotlist_footer {
        margin-top: 12px !important;
        padding: 8px 12px !important;
    }

    /* Img sizing for the smaller mobile cells — circles still
       render via the v22 img-as-circle rules; explicitly force
       60x60 here since flex-basis sets the cell width. */
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item.ow_lp_avatars .ow_avatar img {
        width: 60px !important;
        height: 60px !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        border-radius: 50% !important;
        max-width: none !important;
    }

    /* Soft edge fade hint on the right side of the scroll strip
       so the user perceives "there's more — swipe to see". Use
       a mask gradient that's only visible when content overflows. */
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hotlist {
        position: relative !important;
        overflow: hidden !important;
    }
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hotlist::after {
        content: '' !important;
        position: absolute !important;
        right: 0; top: 8px; bottom: 8px;
        width: 32px !important;
        pointer-events: none !important;
        background: linear-gradient(to left, rgba(255,255,255,0.95), rgba(255,255,255,0)) !important;
    }
}

/* ─── v23 — Upgrade explanation note inside .elv-checkout-summary ─
   Stripe checkout page shows an info card when user has existing
   recurring sub and is buying a different plan. Light violet bg,
   left-edge accent bar, normal-size text. */
.elv-checkout-summary .elv-checkout-summary-note {
    margin-top: 14px !important;
    padding: 12px 14px 12px 18px !important;
    background: #F5F3FF !important;
    border-left: 3px solid #7C3AED !important;
    border-radius: 0 8px 8px 0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #374151 !important;
}
.elv-checkout-summary .elv-checkout-summary-note strong {
    color: #5B21B6 !important;
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v24 (May 2026)
   #2 Desktop hotlist — 6 cols × 2 rows = 12 photos, smaller circles,
       slightly bigger gap between cells.
   ════════════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {
    /* Override v22's 5-col / 8px-gap rule. */
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item.ow_lp_avatars {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 12px !important;     /* up from 8px → roomier feel */
        padding: 10px !important;
    }
    /* Show 12 (was 10), hide 13+. */
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item > .ow_avatar:nth-of-type(-n+12) {
        display: block !important;
    }
    body.base_user_dashboard .ow_dnd_widget[class*="HOTLIST"] .hot_list_normal_item > .ow_avatar:nth-of-type(n+13) {
        display: none !important;
    }
    /* Cells stay img-as-circle (v22 rules) — the smaller column
       width at 6 cols vs 5 cols auto-shrinks each photo. With a
       ~440px widget column - 10px padding - 5×12px gaps = ~370px
       across 6 cells = ~62px per photo. */
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v25 (May 2026)
   - Cancel-subscription modal: text-link destructive action
   - Status line in subscription banners (both pages)
   - Deferred-switch checkout note variant (billing-frequency change)
   ════════════════════════════════════════════════════════════════════ */

/* ─── Modal text-link variant ────────────────────────────────────
   The standard .elv-lock-cta / .elv-lock-dismiss are big buttons.
   For destructive actions like Cancel, we want the SAFE action
   (Keep subscription) to be the prominent button and the
   destructive action (Cancel) to be a smaller text link — modern
   UX convention to prevent accidental destructive clicks. */
.elv-premium-lock-modal .elv-modal-text-link {
    display: block !important;
    text-align: center !important;
    margin-top: 14px !important;
    padding: 8px 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #6B7280 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color 0.15s !important;
}
.elv-premium-lock-modal .elv-modal-text-link:hover {
    text-decoration: underline !important;
    color: #374151 !important;
}
.elv-premium-lock-modal .elv-modal-text-link-danger {
    color: #DC2626 !important;
}
.elv-premium-lock-modal .elv-modal-text-link-danger:hover {
    color: #B91C1C !important;
}

/* ─── Subscription status line — account settings card ──────────
   Sits between the .elv-current-membership-banner and the
   .elevate-subscription-actions row. Surfaces "Status: Active
   (3 month plan)" or "Expires: <date>" depending on whether the
   user is recurring or in their cancellation wind-down period. */
.elevate-subscription-status {
    margin: 14px 4px 4px !important;
    padding: 0 !important;
    font-size: 14px !important;
    color: #374151 !important;
    line-height: 1.5 !important;
}
.elevate-subscription-status .elevate-status-label {
    color: #6B7280 !important;
    font-weight: 600 !important;
    margin-right: 6px !important;
}
.elevate-subscription-status .elevate-status-value {
    color: #111827 !important;
    font-weight: 700 !important;
}

/* ─── Status line — subscribe page banner ───────────────────────
   The .elv-cmb-status block lives inside .elv-cmb-body, under the
   .elv-cmb-plan line. Same data semantics as account-settings:
   Status: Active (3 month plan) | Expires: <date>. */
.elv-current-membership-banner .elv-cmb-status {
    margin-top: 6px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #6B7280 !important;
}
.elv-current-membership-banner .elv-cmb-status .elv-cmb-status-label {
    font-weight: 600 !important;
    color: #6B7280 !important;
    margin-right: 4px !important;
}
.elv-current-membership-banner .elv-cmb-status .elv-cmb-status-value {
    font-weight: 700 !important;
    color: #5B21B6 !important;  /* violet — matches "expires-date" before */
}

/* ─── Deferred-switch checkout note variant ─────────────────────
   When the user is switching billing frequency within the same
   tier (e.g. 3mo Premium → 1mo Premium), the checkout note
   displays a different message — no charge today, takes effect
   at current period end. Visually distinguished with a blue
   accent (info, not action) vs the violet of the proration note. */
.elv-checkout-summary .elv-checkout-summary-note-deferred {
    background: #EFF6FF !important;        /* blue-50 */
    border-left: 3px solid #2563EB !important;  /* blue-600 */
}
.elv-checkout-summary .elv-checkout-summary-note-deferred strong {
    color: #1E40AF !important;             /* blue-800 */
}

/* ════════════════════════════════════════════════════════════════════
   ★ FINAL OVERRIDE LAYER v26 (May 2026)
   Recently Viewed Me + Liked Me modules — square thumbnails matching
   the bookmarks v17 pattern.
   ════════════════════════════════════════════════════════════════════ */

/* User: 'we need to make the recently viewed me and liked me modules
   both use square photos - just like bookmarks module does.'

   Both widgets render avatars inside .ow_guest_user .ow_avatar — a
   different DOM container than bookmarks' .ow_lp_avatars .ow_avatar
   — so the v17 bookmarks selectors didn't catch them. New selectors
   targeting the OCSGUESTS / LIKEDME wrapper classes with the
   .ow_guest_user inner element. */

body.base_user_dashboard .ow_dnd_widget.dashboard-OCSGUESTS_CMP_MyGuestsWidget .ow_guest_user .ow_avatar img,
body.base_user_dashboard .ow_dnd_widget[class*="OCSGUESTS_CMP_MyGuestsWidget"] .ow_guest_user .ow_avatar img,
body.base_user_dashboard .ow_dnd_widget.dashboard-ELEVATE_MATCHES_CMP_LikedMeWidget .ow_guest_user .ow_avatar img,
body.base_user_dashboard .ow_dnd_widget[class*="ELEVATE_MATCHES_CMP_LikedMeWidget"] .ow_guest_user .ow_avatar img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    display: block;
}
/* Tighten cell margin so squares pack horizontally like bookmarks. */
body.base_user_dashboard .ow_dnd_widget.dashboard-OCSGUESTS_CMP_MyGuestsWidget .ow_guest_user,
body.base_user_dashboard .ow_dnd_widget[class*="OCSGUESTS_CMP_MyGuestsWidget"] .ow_guest_user,
body.base_user_dashboard .ow_dnd_widget.dashboard-ELEVATE_MATCHES_CMP_LikedMeWidget .ow_guest_user,
body.base_user_dashboard .ow_dnd_widget[class*="ELEVATE_MATCHES_CMP_LikedMeWidget"] .ow_guest_user {
    margin: 4px 6px 4px 0 !important;
    display: inline-block !important;
    vertical-align: top !important;
    width: auto !important;
}
/* Blur overlay (.ow_paid_blurred) follows parent border-radius via
   inherit — no extra rule needed for the square clip on free-tier
   blurred avatars. */