/* =========================================================================
   VRAILUX — GLOBAL STYLESHEET
   Mobile-first (most Vrailux visitors are on a mobile browser).
   Theme: clean, premium, professional, monochrome — white/graphite/black,
   frosted "glass" cards and modals, no gold/yellow accents.
   ========================================================================= */

/* ---- Font: "Couture" by Chase Babb --------------------------------------
   Couture is a caps-only display face (no lowercase letterforms), so it is
   used for short, uppercase-set text — the logo, headlines, eyebrow labels,
   buttons, nav — never for paragraph copy. Body copy uses Inter, a clean
   neutral sans, for readability. See assets/fonts/couture/README.txt for
   licensing — this font is licensed for personal use only; Vrailux must
   purchase the commercial license from the type designer before using it
   in production on a revenue-generating site (see that README for details).
   ------------------------------------------------------------------------ */
@font-face {
    font-family: 'Couture';
    src: url('../fonts/couture/Couture-Regular.woff2') format('woff2'),
         url('../fonts/couture/Couture-Regular.woff')  format('woff'),
         url('../fonts/couture/Couture-Regular.otf')   format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Couture';
    src: url('../fonts/couture/Couture-Bold.woff2') format('woff2'),
         url('../fonts/couture/Couture-Bold.woff')  format('woff'),
         url('../fonts/couture/Couture-Bold.otf')   format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Couture';
    src: url('../fonts/couture/Couture-Italic.woff2') format('woff2'),
         url('../fonts/couture/Couture-Italic.woff')  format('woff'),
         url('../fonts/couture/Couture-Italic.otf')   format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Palette — monochrome / graphite. No gold, no yellow. */
    --vx-bg: #ffffff;
    --vx-bg-soft: #f4f4f5;
    --vx-ink: #0e0f11;
    --vx-ink-soft: #52555b;
    --vx-ink-faint: #86898f;
    --vx-line: #e3e3e5;
    --vx-line-strong: #cfd0d3;
    --vx-accent: #262a30;        /* graphite — replaces the old gold accent */
    --vx-accent-soft-bg: #f1f2f3;
    --vx-accent-soft-border: #dcdde0;
    --vx-success: #1e6b3f;
    --vx-error: #a3271f;

    /* Glass surfaces */
    --vx-glass-bg: rgba(255, 255, 255, 0.62);
    --vx-glass-bg-strong: rgba(255, 255, 255, 0.78);
    --vx-glass-border: rgba(255, 255, 255, 0.55);
    --vx-glass-shadow: 0 20px 60px rgba(14, 15, 17, 0.14);

    /* Type — Couture is caps-only display; Inter carries all body copy */
    --vx-font-display: 'Couture', 'Poppins', 'Arial Narrow', sans-serif;
    --vx-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --vx-font-ui: var(--vx-font-body);

    /* Layout */
    --vx-maxw: 1180px;
    --vx-radius: 18px;
    --vx-radius-sm: 12px;
    --vx-shadow: 0 10px 30px rgba(14, 15, 17, 0.08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--vx-font-body);
    color: var(--vx-ink);
    background:
        radial-gradient(1200px 680px at 90% -10%, rgba(38,42,48,0.09), transparent 62%),
        radial-gradient(1000px 620px at -12% 8%, rgba(14,15,17,0.055), transparent 58%),
        radial-gradient(900px 700px at 50% 115%, rgba(20,21,24,0.05), transparent 60%),
        linear-gradient(175deg, #ffffff 0%, #fbfbfc 32%, #f3f3f4 68%, #eceded 100%);
    background-attachment: fixed;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---- Headlines: Couture is caps-only, so headings are always set in
   uppercase with generous tracking — this is also just a very "premium
   editorial" look for a luxury brand. ------------------------------------ */
h1, h2, h3, h4 {
    font-family: var(--vx-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0 0 0.5em;
    color: var(--vx-ink);
    line-height: 1.14;
}
h1 { font-size: clamp(1.9rem, 7vw, 3.4rem); letter-spacing: 0.005em; }
h2 { font-size: clamp(1.4rem, 4.6vw, 2.2rem); }
h3 { font-size: clamp(1.05rem, 3.2vw, 1.3rem); letter-spacing: 0.02em; }
p  { margin: 0 0 1em; color: var(--vx-ink-soft); }

.vx-eyebrow {
    display: inline-block;
    font-family: var(--vx-font-display);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vx-ink);
    background: var(--vx-accent-soft-bg);
    border: 1px solid var(--vx-accent-soft-border);
    padding: 0.5em 1em;
    border-radius: 999px;
    margin-bottom: 1em;
}

.container {
    width: 100%;
    max-width: var(--vx-maxw);
    margin: 0 auto;
    padding: 0 18px;
}

/* ---- Buttons ------------------------------------------------------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--vx-font-display);
    font-weight: 700;
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.95em 1.8em;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .25s ease, background .25s ease, color .18s ease, border-color .18s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn::before {
    /* glossy highlight band across the top third — always visible, not
       just on hover, so the "premium" treatment reads even in a small or
       compressed screenshot, not only in a live browser with shadows. */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.08) 32%, rgba(255,255,255,0) 55%);
    pointer-events: none;
}

.btn-primary {
    background: linear-gradient(165deg, #45484f 0%, #1b1c20 42%, #000000 100%);
    color: #fff;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.10),
        inset 0 -12px 18px -10px rgba(0,0,0,0.6),
        0 14px 28px -10px rgba(14,15,17,0.55),
        0 2px 6px rgba(14,15,17,0.35);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.16),
        inset 0 -12px 18px -10px rgba(0,0,0,0.6),
        0 20px 38px -12px rgba(14,15,17,0.6),
        0 3px 8px rgba(14,15,17,0.4);
    background: linear-gradient(165deg, #55585f 0%, #202124 42%, #000000 100%);
}
.btn-primary:active { transform: translateY(0.5px) scale(0.98); }

.btn-outline {
    background: rgba(255,255,255,0.95);
    color: var(--vx-ink);
    border: 2px solid var(--vx-ink);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 6px rgba(14,15,17,0.06);
}
.btn-outline::before { display: none; }
.btn-outline:hover {
    background: var(--vx-ink);
    color: #fff;
    border-color: var(--vx-ink);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -10px rgba(14,15,17,0.45);
}
.btn-outline:active { transform: translateY(0.5px) scale(0.98); }

.btn-block { width: 100%; }
.btn-sm { padding: 0.68em 1.35em; font-size: 0.74rem; }

/* ---- Glass surfaces (cards, modals, header) ----------------------------
   Frosted / translucent premium look. Falls back to a solid card if the
   browser doesn't support backdrop-filter. --------------------------------*/
.vx-glass {
    background: var(--vx-glass-bg);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--vx-glass-border);
    box-shadow: var(--vx-glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vx-glass { background: rgba(255,255,255,0.94); }
}

/* ---- Header / Nav ---------------------------------------------------- */
.vx-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.7);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid rgba(227,227,229,0.8);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vx-header { background: rgba(255,255,255,0.98); }
}
.vx-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    max-width: var(--vx-maxw);
    margin: 0 auto;
}
.vx-brand { display: flex; align-items: center; gap: 10px; }
.vx-brand img { height: 32px; width: auto; }
.vx-brand span {
    font-family: var(--vx-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.vx-nav-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 101; /* stay above the backdrop/drawer so it's always tappable to close, even while the drawer is open */
}
.vx-nav-toggle span {
    width: 22px; height: 2px; background: var(--vx-ink); display: block; border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease;
}
/* Hamburger -> X, so it's visually obvious the same button now closes the menu */
.vx-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vx-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.vx-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


.vx-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 95; /* must sit above .vx-nav-backdrop (90) or the scrim paints over it */
    width: min(86vw, 340px);
    height: 100vh;
    height: 100dvh;
    /* Solid (not glass) on purpose: animating `transform` together with
       `backdrop-filter` on the same element is unreliable across browsers
       (the blur can fail to composite during/after the slide-in). Every
       other surface on the site (header, cards, the login/signup modal)
       is static and uses true frosted glass without issue. */
    background: #ffffff;
    box-shadow: -20px 0 50px rgba(14,15,17,0.18);
    transform: translateX(100%);
    transition: transform .28s ease;
    padding: 92px 26px 26px;
    overflow-y: auto;
    border-left: 1px solid var(--vx-line);
}
.vx-nav.is-open { transform: translateX(0); }
.vx-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vx-nav ul a {
    display: block;
    padding: 15px 4px;
    font-family: var(--vx-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.98rem;
    border-bottom: 1px solid var(--vx-line);
}
.vx-nav .vx-nav-cta { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.vx-nav-backdrop {
    position: fixed; inset: 0; background: rgba(10,10,11,0.35);
    opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 90;
    cursor: pointer; /* iOS Safari only reliably delivers tap "click" events to elements that look interactive */
}
.vx-nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

@media (min-width: 900px) {
    .vx-nav-toggle { display: none; }
    .vx-nav-backdrop { display: none; }
    .vx-nav {
        position: static; width: auto; height: auto; box-shadow: none;
        transform: none; padding: 0; background: transparent; overflow: visible;
        border-left: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    .vx-nav ul { flex-direction: row; align-items: center; gap: 24px; }
    .vx-nav ul a { border-bottom: none; padding: 6px 0; font-size: 0.78rem; }
    .vx-nav .vx-nav-cta { flex-direction: row; margin-top: 0; }
}

/* ---- "My Account" nav item (Dashboard / Chat Support / Profile / Log Out)
   Below 900px this is just a plain flat list inside the drawer, styled
   exactly like every other .vx-nav link (no JS involved — the trigger
   button is display:none and .vx-nav-account-menu is a normal in-flow
   block). At 900px+ it becomes a single "My Account" dropdown trigger so
   four separate links don't crowd/wrap the inline desktop bar — see the
   toggle handler in main.js. ------------------------------------------- */
.vx-nav-account-trigger { display: none; }
.vx-nav-account-menu { display: flex; flex-direction: column; }
@media (min-width: 900px) {
    .vx-nav-account { position: relative; }
    .vx-nav-account-trigger {
        display: inline-flex; align-items: center; background: none; border: none; cursor: pointer;
        font-family: var(--vx-font-body); font-size: 0.78rem; font-weight: 600; color: var(--vx-ink);
        padding: 6px 0; -webkit-tap-highlight-color: transparent;
    }
    .vx-nav-account-menu {
        position: absolute; top: calc(100% + 12px); right: 0; z-index: 50; min-width: 200px;
        background: #fff; border: 1px solid var(--vx-line); border-radius: var(--vx-radius-sm);
        box-shadow: var(--vx-shadow); padding: 6px; gap: 2px;
        opacity: 0; visibility: hidden; transform: translateY(-6px);
        transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
    }
    .vx-nav-account.is-open .vx-nav-account-menu {
        opacity: 1; visibility: visible; transform: translateY(0);
        transition: opacity .15s ease, transform .15s ease;
    }
    /* Specificity note: needs to out-rank ".vx-nav ul a" (which sets the
       uppercase/display-font/bordered mobile-drawer link look) — see the
       .vx-share-menu [hidden] comment elsewhere in this file for the same
       kind of author-vs-default-styles gotcha; here it's just two author
       rules competing, so the fix is simply a more specific selector. */
    .vx-nav .vx-nav-account-menu a {
        display: block; border-bottom: none; font-family: var(--vx-font-body); font-weight: 500;
        text-transform: none; letter-spacing: normal; font-size: 0.86rem; padding: 8px 10px; border-radius: 6px;
    }
    .vx-nav .vx-nav-account-menu a:hover { background: var(--vx-bg-soft); }
}

/* ---- Trust strip ------------------------------------------------------ */
.vx-trust-strip {
    background: var(--vx-ink);
    color: #cfcfcf;
    padding: 16px 0;
    overflow: hidden;
}
.vx-trust-strip .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 28px;
    text-align: center;
}
.vx-trust-strip small {
    display: block;
    width: 100%;
    text-align: center;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.66rem;
    color: #8f8f8f;
    margin-bottom: 6px;
    font-family: var(--vx-font-display);
}
.vx-trust-strip span {
    font-family: var(--vx-font-display);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f2f2f2;
}

/* ---- Hero -------------------------------------------------------------- */
.vx-hero {
    padding: 52px 0 40px;
    text-align: center;
}
.vx-hero p.lead { font-size: 1.06rem; max-width: 620px; margin: 0 auto 1.7em; color: var(--vx-ink-soft); }
.vx-hero-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; max-width: 320px; margin: 0 auto; }
@media (min-width: 640px) {
    .vx-hero-actions { flex-direction: row; justify-content: center; max-width: none; }
}

/* ---- Sections / cards --------------------------------------------------- */
section { padding: 40px 0; }
.vx-section-alt { background: rgba(244,244,245,0.6); border-top: 1px solid var(--vx-line); border-bottom: 1px solid var(--vx-line); }
.vx-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .vx-grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .vx-grid-3 { grid-template-columns: repeat(3, 1fr); } .vx-grid-4 { grid-template-columns: repeat(4, 1fr); } }

.vx-card {
    background: var(--vx-glass-bg);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--vx-glass-border);
    border-radius: var(--vx-radius);
    padding: 26px;
    box-shadow: var(--vx-glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vx-card { background: rgba(255,255,255,0.96); }
}
.vx-card h3 { margin-bottom: 0.35em; }
.vx-card .vx-num {
    font-family: var(--vx-font-display);
    font-size: 1.8rem;
    color: var(--vx-ink);
    margin-bottom: 0.2em;
}

.vx-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.vx-avatar-placeholder {
    border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: var(--vx-ink); color: #fff; font-weight: 700; font-family: var(--vx-font-display);
}
.vx-avatar-md, .vx-avatar-placeholder.vx-avatar-md { width: 48px; height: 48px; font-size: 1.1rem; }
.vx-avatar-lg, .vx-avatar-placeholder.vx-avatar-lg { width: 84px; height: 84px; font-size: 1.9rem; }

.vx-link-btn {
    background: none; border: none; padding: 0; margin: 0; cursor: pointer;
    font-size: 0.8rem; color: var(--vx-ink-faint); text-decoration: underline;
    font-family: inherit;
}
.vx-link-btn:hover { color: var(--vx-ink); }

/* Dashboard stat summary — one unified bar with divided columns rather
   than separate boxes, so it never stacks vertically on narrow screens
   and reads as a single premium instrument rather than a pile of cards. */
.vx-stats-bar {
    display: flex;
    background: var(--vx-glass-bg);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--vx-glass-border);
    border-radius: var(--vx-radius);
    box-shadow: var(--vx-glass-shadow);
    margin-bottom: 8px;
    overflow: hidden;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vx-stats-bar { background: rgba(255,255,255,0.96); }
}
.vx-stat {
    flex: 1 1 0;
    text-align: center;
    padding: 22px 10px;
    position: relative;
}
.vx-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 22%;
    bottom: 22%;
    right: 0;
    width: 1px;
    background: var(--vx-line);
}
.vx-stat-num {
    font-family: var(--vx-font-display);
    font-size: 2rem;
    line-height: 1;
    color: var(--vx-ink);
    margin-bottom: 6px;
}
.vx-stat-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vx-ink-faint);
}
@media (max-width: 520px) {
    .vx-stat { padding: 16px 4px; }
    .vx-stat-num { font-size: 1.5rem; }
    .vx-stat-label { font-size: 0.58rem; letter-spacing: 0.02em; }
}

.vx-danger-zone { border: 1px solid #f0c4c0; background: #fdf5f4; }
.vx-danger-zone summary::-webkit-details-marker { display: none; }
.vx-danger-zone summary::marker { content: ''; }

.vx-badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.vx-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--vx-font-display);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--vx-accent-soft-bg); border: 1px solid var(--vx-accent-soft-border); color: var(--vx-ink);
    padding: 7px 14px; border-radius: 999px;
}

/* ---- Pricing table -------------------------------------------------- */
.vx-price {
    font-family: var(--vx-font-display);
    font-size: 2rem;
    color: var(--vx-ink);
}
.vx-price small { font-family: var(--vx-font-body); font-size: 0.86rem; color: var(--vx-ink-soft); text-transform: none; letter-spacing: normal; }
/* The licensed Couture font maps "$" to a decorative interlocking-C glyph
   (not a normal dollar sign) — force currency symbols into the body font
   everywhere so pricing never accidentally renders a logo-like symbol. */
.vx-price-currency { font-family: var(--vx-font-body); }
.vx-card.is-featured { border: 1.5px solid var(--vx-ink); position: relative; }
.vx-card.is-featured::before {
    content: 'MOST POPULAR';
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--vx-ink); color: #fff; font-family: var(--vx-font-display); font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.14em; padding: 6px 14px; border-radius: 999px;
}
.vx-check-list { list-style: none; padding: 0; margin: 14px 0; }
.vx-check-list li { padding: 6px 0 6px 26px; position: relative; color: var(--vx-ink-soft); font-size: 0.94rem; }
.vx-check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--vx-ink); font-weight: 700; }

/* ---- Forms ------------------------------------------------------------ */
.vx-form { max-width: 480px; margin: 0 auto; }
.vx-form.is-wide { max-width: 720px; }
.vx-field { margin-bottom: 16px; }
.vx-field label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 6px; color: var(--vx-ink); }
.vx-field .hint { font-size: 0.78rem; color: var(--vx-ink-faint); margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=search], input[type=number], select, textarea {
    width: 100%;
    font-family: var(--vx-font-body);
    font-size: 1rem;
    padding: 13px 14px;
    border: 1.5px solid var(--vx-line-strong);
    border-radius: var(--vx-radius-sm);
    background: rgba(255,255,255,0.7);
    color: var(--vx-ink);
    -webkit-appearance: none;
    appearance: none;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--vx-ink);
    background: #fff;
}
textarea { min-height: 130px; resize: vertical; }

/* ---- Auth "modal" card — the transparent glass panel for Login/Signup -- */
.vx-auth-page { position: relative; }
.vx-auth-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 500px at 15% 0%, rgba(38,42,48,0.09), transparent 55%),
        radial-gradient(800px 480px at 100% 100%, rgba(14,15,17,0.07), transparent 55%),
        linear-gradient(160deg, #fafafa 0%, #ffffff 45%, #eeeeef 100%);
}
.vx-auth-card {
    background: var(--vx-glass-bg-strong);
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    border: 1px solid var(--vx-glass-border);
    border-radius: var(--vx-radius);
    box-shadow: var(--vx-glass-shadow);
    padding: 34px 24px;
    max-width: 440px;
    margin: 24px auto;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vx-auth-card { background: rgba(255,255,255,0.97); }
}
.vx-auth-card .vx-brand { justify-content: center; margin-bottom: 18px; }
.vx-switch { text-align: center; margin-top: 16px; font-size: 0.9rem; color: var(--vx-ink-soft); }

/* ---- Alerts ------------------------------------------------------------ */
.alert {
    padding: 13px 16px;
    border-radius: var(--vx-radius-sm);
    font-size: 0.92rem;
    margin-bottom: 16px;
    border: 1px solid transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.alert-success { background: rgba(238,247,241,0.85); color: var(--vx-success); border-color: #cfe8d7; }
.alert-error { background: rgba(251,236,234,0.85); color: var(--vx-error); border-color: #f2cfc9; }

/* ---- Steps / process --------------------------------------------------- */
.vx-steps { counter-reset: vx-step; }
.vx-step {
    counter-increment: vx-step;
    position: relative;
    padding-left: 54px;
    margin-bottom: 22px;
}
.vx-step::before {
    content: counter(vx-step);
    position: absolute; left: 0; top: 0;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--vx-ink); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--vx-font-display); font-weight: 700;
}

/* ---- FAQ ---------------------------------------------------------------- */
.vx-faq details {
    border-bottom: 1px solid var(--vx-line);
    padding: 14px 0;
}
.vx-faq summary {
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-family: var(--vx-font-display);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: 0.95rem;
}
.vx-faq summary::-webkit-details-marker { display: none; }
.vx-faq summary::after { content: '+'; font-size: 1.4rem; color: var(--vx-ink); flex: none; }
.vx-faq details[open] summary::after { content: '−'; }
.vx-faq p { margin-top: 10px; }

/* ---- Table (verify result etc.) ----------------------------------------- */
.vx-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.vx-table th, .vx-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--vx-line); }
.vx-table th { color: var(--vx-ink-faint); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--vx-font-display); }

.vx-result-authentic { color: var(--vx-success); font-weight: 700; }
.vx-result-not-authentic { color: var(--vx-error); font-weight: 700; }
.vx-result-inconclusive, .vx-result-in-review { color: var(--vx-ink); font-weight: 700; }

/* ---- Footer -------------------------------------------------------------- */
.vx-footer {
    background: var(--vx-ink);
    color: #c9c9c9;
    padding: 46px 0 20px;
    margin-top: 40px;
    font-size: 0.9rem;
}
.vx-footer a { color: #d8d8d8; }
.vx-footer a:hover { color: #fff; }
.vx-footer h4 { color: #fff; font-family: var(--vx-font-display); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 14px; }
.vx-footer-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 760px) { .vx-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.vx-footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vx-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vx-footer-brand img { height: 28px; filter: brightness(0) invert(1); }
.vx-footer-brand span { font-family: var(--vx-font-display); font-size: 1.1rem; letter-spacing: 0.08em; color: #fff; }
.vx-footer-disclaimer {
    border-top: 1px solid #26272a;
    margin-top: 30px;
    padding-top: 20px;
    font-size: 0.76rem;
    line-height: 1.7;
    color: #9a9a9a;
}
.vx-footer-bottom {
    display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
    border-top: 1px solid #26272a; margin-top: 20px; padding-top: 18px; font-size: 0.78rem; color: #8a8a8a;
}

/* ---- Utility -------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.vx-muted { color: var(--vx-ink-soft); }
.vx-small { font-size: 0.82rem; }
.vx-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =========================================================================
   ORDER FLOW — authenticate.php's guided, multi-step submission form.
   Reuses the site's existing glass/monochrome/Couture system; nothing here
   introduces new colors. ========================================================================= */

.vx-order-shell {
    background: var(--vx-glass-bg-strong);
    backdrop-filter: blur(26px) saturate(170%);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    border: 1px solid var(--vx-glass-border);
    border-radius: var(--vx-radius);
    box-shadow: var(--vx-glass-shadow);
    padding: 26px 20px;
    max-width: 760px;
    margin: 0 auto;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vx-order-shell { background: rgba(255,255,255,0.97); }
}
@media (min-width: 640px) { .vx-order-shell { padding: 36px; } }

.vx-order-section { margin-bottom: 36px; }
.vx-order-section:last-child { margin-bottom: 0; }
/* offsets the jump-to-form anchor (#startAuth) so the sticky header
   doesn't cover the section heading right after the scroll */
#startAuth { scroll-margin-top: 88px; }

/* Floating "jump to Step 1" shortcut — mobile only. Hidden until the hero
   scrolls out of view (main.js toggles .is-visible), and hidden again once
   Step 1 itself is on screen so it doesn't linger once it's done its job. */
.vx-jump-fab {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 80;
    transform: translate(-50%, 140%);
    background: linear-gradient(165deg, #45484f 0%, #1b1c20 42%, #000000 100%);
    color: #fff;
    font-family: var(--vx-font-display);
    font-weight: 700;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.9em 1.7em;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.10),
        0 14px 28px -10px rgba(14,15,17,0.55);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
}
.vx-jump-fab.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
@media (min-width: 900px) { .vx-jump-fab { display: none; } }

.vx-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.vx-step-num {
    flex: none;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--vx-ink);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--vx-font-display);
    font-size: 0.82rem;
    font-weight: 700;
}
.vx-step-head h2 { margin: 0; }
.vx-step-sub { color: var(--vx-ink-soft); font-size: 0.9rem; margin: 8px 0 18px 48px; }
@media (max-width: 480px) { .vx-step-sub { margin-left: 0; } }

/* ---- Item type selector -------------------------------------------------- */
.vx-item-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .vx-item-grid { grid-template-columns: repeat(3, 1fr); } }
.vx-item-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
    padding: 20px 12px;
    border: 1.5px solid var(--vx-line-strong);
    border-radius: var(--vx-radius-sm);
    background: rgba(255,255,255,0.55);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.vx-item-card input { position: absolute; opacity: 0; pointer-events: none; }
.vx-item-card svg { width: 26px; height: 26px; color: var(--vx-ink-soft); }
.vx-item-card span.vx-item-label {
    font-family: var(--vx-font-display); font-size: 0.76rem; font-weight: 700;
    letter-spacing: 0.03em; text-transform: uppercase; color: var(--vx-ink);
}
.vx-item-card:hover { border-color: var(--vx-ink-soft); }
.vx-item-card.is-selected { border-color: var(--vx-ink); background: var(--vx-accent-soft-bg); transform: translateY(-1px); }
.vx-item-card.is-selected svg { color: var(--vx-ink); }

/* ---- Photo tips panel ------------------------------------------------------ */
/* Small, plain, always-visible boxes — no accent wrapper, no icons, no
   expand/collapse. Kept deliberately lightweight (short one-line copy,
   tight padding) so 4 across never costs more than one compact row, even
   stacked 2-up on narrow phones. */
.vx-tips-panel { margin: 2px 0 18px; }
.vx-tips-title {
    font-size: 0.92rem; font-weight: 600; color: var(--vx-ink);
    margin: 0 0 10px;
}
.vx-tips-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .vx-tips-grid { grid-template-columns: repeat(4, 1fr); } }
.vx-tip-card {
    background: #fff; border: 1px solid var(--vx-line-strong);
    border-radius: 8px; padding: 10px 10px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 54px;
}
.vx-tip-card p { margin: 0; font-size: 0.72rem; line-height: 1.35; color: var(--vx-ink-soft); }

/* ---- Upload progress ------------------------------------------------------ */
.vx-progress-bar { height: 6px; border-radius: 999px; background: var(--vx-line); overflow: hidden; margin-bottom: 8px; }
.vx-progress-fill { height: 100%; width: 0%; background: var(--vx-ink); transition: width .25s ease; }
.vx-progress-text { font-size: 0.78rem; color: var(--vx-ink-faint); margin-bottom: 18px; }

/* ---- Photo slot grid ------------------------------------------------------ */
.vx-slots-label {
    font-family: var(--vx-font-display); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--vx-ink-faint); margin: 22px 0 10px;
}
.vx-slots-label:first-child { margin-top: 0; }
.vx-slot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .vx-slot-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .vx-slot-grid { grid-template-columns: repeat(4, 1fr); } }
.vx-slot-tile {
    display: block; cursor: pointer; border-radius: var(--vx-radius-sm); overflow: hidden;
    border: 1.5px solid var(--vx-line-strong); background: rgba(255,255,255,0.5);
    transition: border-color .15s ease;
}
.vx-slot-tile:hover { border-color: var(--vx-ink-soft); }
.vx-slot-tile.has-photo { border-color: var(--vx-ink); }
.vx-slot-tile input[type=file] { display: none; }
.vx-slot-photo {
    position: relative; display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1; background: var(--vx-bg-soft); overflow: hidden;
}
.vx-slot-photo img { width: 100%; height: 100%; object-fit: cover; }
.vx-slot-sample { opacity: 0.9; transition: opacity .15s ease; }
.vx-slot-photo > svg { width: 40%; height: 40%; color: var(--vx-ink-faint); }
.vx-slot-preview { position: absolute; inset: 0; display: none; }
.vx-slot-tile.has-photo .vx-slot-preview { display: block; }
.vx-slot-tile.has-photo .vx-slot-sample { display: none; }
/* A small red asterisk marks required tiles — quieter than a pill badge,
   and only required tiles get any marker at all (optional ones get none). */
.vx-slot-required-mark {
    position: absolute; top: 5px; left: 7px;
    color: #b3261e; font-size: 1.1rem; font-weight: 700; line-height: 1;
    text-shadow: 0 0 3px rgba(255,255,255,0.85), 0 0 3px rgba(255,255,255,0.85);
}
.vx-slot-remove {
    position: absolute; top: 6px; right: 6px; display: none;
    width: 22px; height: 22px; border-radius: 50%; background: rgba(14,15,17,0.75); color: #fff;
    align-items: center; justify-content: center; font-size: 0.9rem; line-height: 1;
}
.vx-slot-tile.has-photo .vx-slot-remove { display: flex; }
.vx-slot-label { display: block; padding: 8px 8px 10px; font-size: 0.72rem; text-align: center; color: var(--vx-ink-soft); line-height: 1.3; }
.vx-slot-tile-add { display: flex; flex-direction: column; }
.vx-slot-photo-add { background: var(--vx-accent-soft-bg); border: 1.5px dashed var(--vx-line-strong); }
.vx-slot-add-icon { font-size: 1.6rem; color: var(--vx-ink-soft); }
.vx-slot-tile-add.is-hidden { display: none; }

/* ---- Method / turnaround / assessment cards ------------------------------- */
.vx-method-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .vx-method-grid { grid-template-columns: repeat(3, 1fr); } }
.vx-method-card {
    display: block; text-align: center; padding: 16px 10px; cursor: pointer;
    border: 1.5px solid var(--vx-line-strong); border-radius: var(--vx-radius-sm); background: rgba(255,255,255,0.5);
    transition: border-color .15s ease, background .15s ease;
}
.vx-method-card input { position: absolute; opacity: 0; pointer-events: none; }
.vx-method-card:hover { border-color: var(--vx-ink-soft); }
.vx-method-card.is-selected { border-color: var(--vx-ink); background: var(--vx-accent-soft-bg); }
.vx-method-price { display: block; font-family: var(--vx-font-display); font-size: 1.35rem; color: var(--vx-ink); margin-bottom: 2px; }
.vx-method-card strong { display: block; font-size: 0.86rem; font-weight: 700; color: var(--vx-ink); }
.vx-method-card small { display: block; font-size: 0.72rem; color: var(--vx-ink-faint); margin-top: 2px; }
.vx-method-card.static { cursor: default; }

/* ---- Add-ons -------------------------------------------------------------- */
.vx-addon-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .vx-addon-grid { grid-template-columns: 1fr 1fr; } }
.vx-addon-card {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer;
    border: 1.5px solid var(--vx-line-strong); border-radius: var(--vx-radius-sm); background: rgba(255,255,255,0.5);
    transition: border-color .15s ease, background .15s ease;
}
.vx-addon-card:hover { border-color: var(--vx-ink-soft); }
.vx-addon-card.is-selected { border-color: var(--vx-ink); background: var(--vx-accent-soft-bg); }
.vx-addon-card input { margin: 3px 0 0; flex: none; }
.vx-addon-title { font-weight: 700; font-size: 0.9rem; color: var(--vx-ink); }
.vx-addon-price { font-family: var(--vx-font-body); color: var(--vx-ink-soft); font-weight: 600; }
.vx-addon-card small { display: block; margin-top: 3px; color: var(--vx-ink-faint); font-size: 0.78rem; }

/* ---- Total row / coupon ---------------------------------------------------- */
.vx-total-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; margin: 22px 0 6px;
    background: var(--vx-ink); color: #fff; border-radius: var(--vx-radius-sm);
}
.vx-total-label { font-family: var(--vx-font-display); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #cfcfcf; }
.vx-total-price { font-family: var(--vx-font-display); font-size: 1.6rem; }
.vx-coupon-note { font-size: 0.78rem; color: var(--vx-ink-soft); margin: -4px 0 18px; }

.vx-note-card {
    background: var(--vx-accent-soft-bg); border: 1px solid var(--vx-accent-soft-border);
    border-radius: var(--vx-radius-sm); padding: 14px 16px; font-size: 0.86rem; color: var(--vx-ink-soft); margin: 18px 0;
}

/* ---- Checkout: PayPal + Stripe shown side by side, customer picks ------ */
.vx-payment-methods {
    display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 22px; margin-top: 4px;
}
.vx-payment-method {
    flex: 1 1 280px; max-width: 340px; background: #fff; border: 1px solid var(--vx-line-strong);
    border-radius: var(--vx-radius-sm); padding: 16px; text-align: left;
}
.vx-payment-method-label {
    font-family: var(--vx-font-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--vx-ink); margin: 0 0 12px; text-align: center;
}
.vx-payment-divider {
    display: flex; align-items: center; justify-content: center; color: var(--vx-ink-faint);
    font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; flex: 0 0 auto; padding: 0 4px;
}
@media (max-width: 640px) {
    .vx-payment-methods { flex-direction: column; align-items: stretch; }
    .vx-payment-method { max-width: none; }
    .vx-payment-divider { padding: 4px 0; }
}
#stripe-payment-element { min-height: 40px; }

/* ---- Two-column field layout ---------------------------------------------- */
.vx-two-col { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 560px) { .vx-two-col { grid-template-columns: 1fr 1fr; gap: 16px; } }

/* ---- Order confirmation ---------------------------------------------------- */
.vx-status-badge {
    display: inline-block; font-family: var(--vx-font-display); font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
.vx-status-awaiting { background: var(--vx-accent-soft-bg); color: var(--vx-ink); border: 1px solid var(--vx-accent-soft-border); }
.vx-status-verified { background: #eef7f1; color: var(--vx-success); border: 1px solid #cfe8d7; }
.vx-status-declined { background: #fbecea; color: var(--vx-error); border: 1px solid #f2cfc9; }

/* ---- Dashboard: order cards ------------------------------------------- */
.vx-order-list { display: flex; flex-direction: column; gap: 14px; }
.vx-order-card {
    background: var(--vx-glass-bg);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--vx-glass-border);
    border-radius: var(--vx-radius-sm);
    padding: 18px 20px;
    box-shadow: var(--vx-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vx-order-card { background: rgba(255,255,255,0.97); }
}
.vx-order-card-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.vx-order-card-title { font-family: var(--vx-font-display); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--vx-ink); margin-bottom: 3px; }
.vx-order-card-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; font-size: 0.84rem; color: var(--vx-ink-soft); }
.vx-order-card-meta span:not(:last-child)::after { content: '\2022'; margin-left: 10px; color: var(--vx-line-strong); }
.vx-ref-id {
    font-family: var(--vx-font-display); font-size: 1.5rem; letter-spacing: 0.08em;
    background: var(--vx-bg-soft); border: 1px solid var(--vx-line); border-radius: var(--vx-radius-sm);
    padding: 14px 18px; margin: 4px 0 18px; text-align: center;
}

/* ---- Dashboard: order search + pagination ------------------------------ */
.vx-orders-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 18px;
}
.vx-order-search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vx-order-search input[type=search] { min-width: 240px; margin: 0; }
.vx-order-search-clear { font-size: 0.82rem; color: var(--vx-ink-faint); text-decoration: underline; }
@media (max-width: 560px) {
    .vx-orders-head { flex-direction: column; align-items: stretch; }
    .vx-order-search input[type=search] { min-width: 0; flex: 1; }
}

.vx-pagination {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin-top: 26px;
}
.vx-pagination-status { font-size: 0.82rem; color: var(--vx-ink-faint); white-space: nowrap; }
.btn.is-disabled { opacity: 0.35; pointer-events: none; }

/* ---- Dashboard: post-order add-on requests ------------------------------ */
.vx-status-badge-sm { padding: 4px 10px; font-size: 0.6rem; margin-bottom: 0; }
.vx-addon-status-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vx-addon-download-list { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; }
.vx-addon-download { gap: 8px; }
.vx-addon-download svg { flex-shrink: 0; }

.vx-addon-request { margin-top: 16px; border-top: 1px solid var(--vx-line); padding-top: 14px; }
.vx-addon-request-title {
    font-size: 0.78rem; font-weight: 700; color: var(--vx-ink-soft); margin: 0 0 10px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.vx-addon-buy-row {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    gap: 12px; padding: 12px; border: 1px solid var(--vx-line-strong); border-radius: var(--vx-radius-sm);
    background: #fff; margin-bottom: 10px;
}
.vx-addon-buy-row:last-child { margin-bottom: 0; }
.vx-addon-buy-info { flex: 1 1 200px; min-width: 180px; font-size: 0.84rem; color: var(--vx-ink-soft); }
.vx-addon-buy-info strong { color: var(--vx-ink); display: block; margin-bottom: 2px; }
.vx-addon-price { color: var(--vx-ink); font-weight: 700; }
.vx-addon-buy-action { flex: 1 1 240px; min-width: 220px; max-width: 300px; display: flex; flex-direction: column; gap: 8px; }
.vx-addon-coupon {
    font-size: 0.8rem; padding: 8px 10px; border: 1px solid var(--vx-line-strong);
    border-radius: var(--vx-radius-sm); margin: 0;
}
.vx-addon-paypal-container { min-height: 40px; }
.vx-addon-stripe-panel { background: #fff; border: 1px solid var(--vx-line-strong); border-radius: var(--vx-radius-sm); padding: 10px; }
.vx-addon-stripe-element { min-height: 40px; }
.vx-addon-buy-status { margin: 0; color: var(--vx-ink-faint); min-height: 1em; }

/* Package purchase rows on packages.php — deliberately reuse
   .vx-addon-paypal-container / .vx-addon-stripe-panel / .vx-addon-stripe-element /
   .vx-addon-buy-status above (purely visual, nothing addon-specific about
   them) so only the outer layout needs its own rules. */
.vx-package-buy-row { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.vx-package-coupon-row { display: flex; gap: 6px; }
.vx-package-coupon {
    flex: 1 1 auto; min-width: 0; font-size: 0.8rem; padding: 8px 10px;
    border: 1px solid var(--vx-line-strong); border-radius: var(--vx-radius-sm); margin: 0;
}
.vx-package-coupon-apply { flex: 0 0 auto; }
.vx-package-coupon-note { margin: -2px 0 0; }
.vx-addon-option {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    padding: 10px 12px; border: 1px solid var(--vx-line); border-radius: var(--vx-radius-sm);
    font-size: 0.84rem; color: var(--vx-ink-soft);
}
.vx-addon-option input { margin-top: 3px; flex-shrink: 0; }
.vx-addon-option strong { color: var(--vx-ink); }
.vx-addon-desc { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--vx-ink-faint); }

/* ---- Dashboard: add-on checklist (Step 1) + payment wizard modal (Step 2) */
.vx-addon-checklist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.vx-addon-check-row {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    padding: 10px 12px; border: 1px solid var(--vx-line-strong); border-radius: var(--vx-radius-sm);
    background: #fff; font-size: 0.84rem; color: var(--vx-ink-soft); transition: border-color 0.15s ease;
}
.vx-addon-check-row:hover { border-color: var(--vx-ink-soft); }
.vx-addon-check-row input { margin-top: 3px; flex-shrink: 0; }
.vx-addon-check-row strong { color: var(--vx-ink); }
/* Used inside dollar amounts that sit on the display font (e.g. the button
   label) — inherits color from its context, only overrides the font so the
   "$" doesn't render as the Couture display font's decorative glyph. */
.vx-addon-amt { font-family: var(--vx-font-body); }

.vx-addon-modal {
    position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.vx-addon-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 18, 16, 0.55); }
.vx-addon-modal-panel {
    position: relative; z-index: 1; width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto;
    background: #fff; border-radius: var(--vx-radius-md, var(--vx-radius-sm)); box-shadow: 0 20px 60px rgba(0,0,0,0.28);
    padding: 18px;
}
/* Zebra tint — alternates with every OTHER order's add-on modal (see
   data-order-zebra on .vx-order-card in dashboard.php and the
   vxModal.classList.toggle('is-alt', ...) call in its inline script) so
   that when a member has 2+ orders each with their own dense add-on/
   payment modal, an alternating, very subtle grey (the same
   --vx-bg-soft already used for hover states elsewhere on the site —
   nothing new introduced) gives a quiet visual cue for which order's
   modal is currently open, instead of every one looking identically
   white. */
.vx-addon-modal.is-alt .vx-addon-modal-panel { background: var(--vx-bg-soft); }
.vx-addon-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--vx-line);
}
.vx-addon-modal-head span { font-size: 0.78rem; font-weight: 700; color: var(--vx-ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.vx-addon-modal-close {
    background: none; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer;
    color: var(--vx-ink-faint); padding: 0 4px;
}
.vx-addon-modal-close:hover { color: var(--vx-ink); }
.vx-addon-modal-body .vx-addon-buy-row { margin-bottom: 0; border: none; padding: 0; }
.vx-addon-modal-body .vx-addon-buy-action { max-width: none; }

/* ---- Dashboard: "Additional Photos Needed" card (photo requests, no chat) ----
   Written mobile-first, since nearly every Vrailux member is on a phone —
   the compact styles below (small icon badge, a plain small pill-style tap
   target, no drag hint) are what MOST people see. The fancier, roomier
   dropzone with a bigger icon and drag-and-drop only kicks in at
   min-width: 641px, where a mouse/trackpad make "drag files here" a real
   affordance instead of a big icon just taking up space. ---- */
.vx-photo-request-card {
    margin-top: 16px; border: 1px solid var(--vx-line-strong); border-radius: var(--vx-radius-sm);
    padding: 14px 16px; background: var(--vx-bg-soft);
    box-shadow: inset 0 3px 0 var(--vx-ink);
}
.vx-photo-request-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.vx-photo-request-icon {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
    background: var(--vx-ink); color: #fff; display: flex; align-items: center; justify-content: center;
}
.vx-photo-request-icon svg { width: 12px; height: 12px; }
.vx-photo-request-title {
    font-family: var(--vx-font-display); font-size: 0.84rem; font-weight: 700; color: var(--vx-ink); margin: 0 0 3px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.vx-photo-request-sub { font-size: 0.78rem; color: var(--vx-ink-soft); margin: 0; line-height: 1.45; }

.vx-photo-request-body { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.vx-photo-request-thumb-wrap {
    position: relative; flex-shrink: 0; width: 64px; height: 64px; display: block;
    border-radius: 9px; overflow: hidden; border: 1px solid var(--vx-line-strong);
}
.vx-photo-request-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-photo-request-thumb-zoom {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 4px; text-align: center;
    font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: #fff; background: linear-gradient(0deg, rgba(14,15,17,0.82) 0%, rgba(14,15,17,0) 100%);
    opacity: 0; transition: opacity .18s ease;
}
.vx-photo-request-thumb-wrap:hover .vx-photo-request-thumb-zoom,
.vx-photo-request-thumb-wrap:focus-visible .vx-photo-request-thumb-zoom { opacity: 1; }

/* More than one reference photo on a single request — a small wrapping
   row of thumbnails instead of the one larger thumb above. */
.vx-photo-request-thumb-row { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; max-width: 100%; }
.vx-photo-request-thumb-wrap-sm { width: 48px; height: 48px; }

.vx-photo-request-note-wrap { flex: 1 1 200px; min-width: 180px; }
.vx-photo-request-note {
    font-size: 0.8rem; font-style: italic; color: var(--vx-ink-soft); margin: 0 0 10px;
    padding-left: 10px; border-left: 2px solid var(--vx-line-strong); line-height: 1.45;
}
.vx-photo-request-form { display: flex; flex-direction: column; gap: 8px; }

/* Mobile: a plain, compact tap target — same visual weight as the site's
   small outline pill buttons, no big icon, no dashed box, no drag copy
   (there's nothing to drag on a touchscreen). */
.vx-photo-request-dropzone {
    position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 6px; text-align: center; cursor: pointer; padding: 11px 14px;
    border: 1.5px solid var(--vx-ink); border-radius: 999px;
    background: #fff; transition: background .18s ease, color .18s ease;
}
.vx-photo-request-dropzone:active,
.vx-photo-request-dropzone.has-files { background: var(--vx-accent-soft-bg); }
.vx-photo-request-dropzone-icon { display: none; color: var(--vx-ink-soft); }
.vx-photo-request-dropzone-text { font-size: 0.78rem; font-weight: 600; color: var(--vx-ink); }
.vx-photo-request-draghint { display: none; }
.vx-photo-request-dropzone-hint { display: none; }
.vx-photo-request-file { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.vx-photo-request-filelist { display: flex; flex-direction: column; gap: 4px; }
.vx-photo-request-filelist:empty { display: none; }
.vx-photo-request-filelist-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 0.72rem; padding: 6px 10px; border-radius: 8px; background: #fff;
    border: 1px solid var(--vx-line);
}
.vx-photo-request-filelist-name { color: var(--vx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-photo-request-filelist-size { color: var(--vx-ink-faint); flex-shrink: 0; }

/* Desktop / tablet enhancement — roomier card, bigger thumbnail, and a
   real drag-and-drop dropzone since a mouse makes that a genuine shortcut
   instead of dead weight. */
@media (min-width: 641px) {
    .vx-photo-request-card { padding: 18px 20px; }
    .vx-photo-request-head { gap: 12px; margin-bottom: 16px; }
    .vx-photo-request-icon { width: 34px; height: 34px; margin-top: 0; }
    .vx-photo-request-icon svg { width: 17px; height: 17px; }
    .vx-photo-request-title { font-size: 0.9rem; letter-spacing: 0.04em; }
    .vx-photo-request-sub { font-size: 0.82rem; }
    .vx-photo-request-body { gap: 18px; }
    .vx-photo-request-thumb-wrap { width: 128px; height: 128px; border-radius: var(--vx-radius-sm); }
    .vx-photo-request-thumb-zoom { padding: 6px 8px; font-size: 0.62rem; }
    .vx-photo-request-thumb-wrap-sm { width: 76px; height: 76px; }
    .vx-photo-request-note-wrap { flex: 1 1 260px; min-width: 220px; }
    .vx-photo-request-note { font-size: 0.86rem; margin: 0 0 14px; padding-left: 12px; }
    .vx-photo-request-form { gap: 10px; }

    .vx-photo-request-dropzone {
        flex-direction: column; justify-content: center; gap: 4px; padding: 20px 14px;
        border: 1.5px dashed var(--vx-line-strong); border-radius: var(--vx-radius-sm);
    }
    .vx-photo-request-dropzone:hover,
    .vx-photo-request-dropzone.is-dragover { border-color: var(--vx-ink); background: var(--vx-accent-soft-bg); }
    .vx-photo-request-dropzone.has-files { border-style: solid; border-color: var(--vx-ink); background: #fff; }
    .vx-photo-request-dropzone-icon { display: block; }
    .vx-photo-request-dropzone-icon svg { width: 22px; height: 22px; }
    .vx-photo-request-dropzone-text { font-size: 0.84rem; }
    .vx-photo-request-draghint { display: inline; }
    .vx-photo-request-dropzone-hint { display: block; font-size: 0.72rem; color: var(--vx-ink-faint); }
    .vx-photo-request-filelist-item { font-size: 0.76rem; }
}

/* =========================================================================
   PRICING PAGE — brand/turnaround pricing tables and brand directory.
   ========================================================================= */
.vx-price-card { text-align: left; }
.vx-price-card-sub { font-size: 0.82rem; color: var(--vx-ink-faint); margin: -0.6em 0 1em; }
.vx-price-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--vx-line); }
.vx-price-row:first-of-type { border-top: none; }
.vx-price-row-label { font-size: 0.86rem; color: var(--vx-ink-soft); }
.vx-price-row-amount { font-family: var(--vx-font-display); font-size: 1.05rem; color: var(--vx-ink); }

.vx-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.vx-brand-chip {
    font-family: var(--vx-font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    background: var(--vx-accent-soft-bg); border: 1px solid var(--vx-accent-soft-border); color: var(--vx-ink);
    padding: 9px 16px; border-radius: 999px;
}
.vx-brand-directory {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 18px;
    font-size: 0.86rem; color: var(--vx-ink-soft);
}
@media (min-width: 640px) { .vx-brand-directory { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .vx-brand-directory { grid-template-columns: repeat(4, 1fr); } }
.vx-brand-directory-item { padding: 6px 0; border-bottom: 1px solid var(--vx-line); }

/* ---- Mobile-first fine tuning --------------------------------------------
   The vast majority of Vrailux visitors are on a phone, so these rules
   tighten spacing/tap targets specifically below the tablet breakpoint. */
@media (max-width: 480px) {
    h1 { letter-spacing: 0; }
    .container { padding: 0 16px; }
    .vx-hero { padding: 40px 0 32px; }
    section { padding: 32px 0; }
    .vx-card { padding: 22px; border-radius: var(--vx-radius-sm); }
    .btn { font-size: 0.8rem; padding: 0.95em 1.4em; }
    .vx-auth-card { padding: 28px 20px; margin: 16px auto; }
    table.vx-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Ensure all interactive tap targets stay comfortably touch-friendly */
a, button, input, select, textarea, summary { min-height: 0; }
.btn, .vx-nav a, input, select, textarea, button { touch-action: manipulation; }

/* ---- Nav unread badge (chat) ------------------------------------------- */
.vx-nav-badge {
    display: inline-block; min-width: 17px; padding: 1px 5px; margin-left: 5px;
    font-size: 0.66rem; font-weight: 700; line-height: 15px; text-align: center;
    color: #fff; background: var(--vx-error); border-radius: 999px; vertical-align: 2px;
}

/* =========================================================================
   CHAT SUPPORT — Messenger-style thread (member-facing, chat.php)
   ========================================================================= */
.vx-chat-shell {
    background: #fff; border: 1px solid var(--vx-line); border-radius: var(--vx-radius);
    box-shadow: var(--vx-shadow); overflow: hidden; margin: 8px 0 40px;
    display: flex; flex-direction: column;
}
.vx-chat-thread-header {
    display: flex; align-items: center; gap: 12px; padding: 16px 20px;
    border-bottom: 1px solid var(--vx-line); background: var(--vx-bg-soft);
}
.vx-chat-avatar {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    background: #fff; border: 1px solid var(--vx-line);
}
.vx-chat-thread-name { font-weight: 700; color: var(--vx-ink); font-size: 0.95rem; }

.vx-chat-messages {
    flex: 1; overflow-y: auto; padding: 18px 16px; min-height: 360px; max-height: 62vh;
    display: flex; flex-direction: column; gap: 2px; scroll-behavior: smooth;
    background: repeating-linear-gradient(#fff, #fff);
}
.vx-chat-empty { text-align: center; color: var(--vx-ink-faint); font-size: 0.86rem; margin: auto; padding: 30px 0; }

.vx-chat-day-divider { text-align: center; margin: 14px 0 10px; }
.vx-chat-day-divider span {
    display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--vx-ink-faint); background: var(--vx-bg-soft);
    border-radius: 999px; padding: 4px 12px;
}

.vx-chat-row { display: flex; align-items: flex-end; gap: 8px; margin: 3px 0; max-width: 100%; }
.vx-chat-row-theirs { justify-content: flex-start; }
.vx-chat-row-mine { justify-content: flex-end; }

.vx-chat-msg-avatar { flex-shrink: 0; width: 26px; height: 26px; }
.vx-chat-msg-avatar img {
    width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid var(--vx-line);
}

.vx-chat-bubble-wrap { max-width: 74%; display: flex; flex-direction: column; }
.vx-chat-row-mine .vx-chat-bubble-wrap { align-items: flex-end; }
.vx-chat-row-theirs .vx-chat-bubble-wrap { align-items: flex-start; }

.vx-chat-bubble {
    border-radius: 18px; padding: 9px 14px; font-size: 0.88rem; line-height: 1.42;
    word-break: break-word;
}
.vx-chat-bubble-theirs { background: var(--vx-bg-soft); color: var(--vx-ink); border-bottom-left-radius: 5px; }
.vx-chat-bubble-mine { background: var(--vx-ink); color: #fff; border-bottom-right-radius: 5px; }
.vx-chat-bubble-text { white-space: pre-wrap; }
.vx-chat-bubble-media-only { padding: 4px; background: transparent !important; }

.vx-chat-media {
    display: block; max-width: 240px; max-height: 320px; border-radius: 14px;
    object-fit: cover; margin: 2px 0;
}
video.vx-chat-media { max-width: 260px; background: #000; }

.vx-chat-time { font-size: 0.66rem; color: var(--vx-ink-faint); margin-top: 3px; padding: 0 4px; }
.vx-chat-seen { text-align: right; font-size: 0.66rem; color: var(--vx-ink-faint); margin: 0 4px 6px; }

/* "Removed" placeholder — what a message becomes once the admin unsends
   it (see vlx_chat_delete_message() / vlx_chat_render_bubble()). */
.vx-chat-bubble-deleted { background: transparent !important; border: 1px dashed var(--vx-line); }
.vx-chat-bubble-removed { font-style: italic; color: var(--vx-ink-faint); }

.vx-chat-composer {
    display: flex; align-items: center; gap: 8px; padding: 12px 14px;
    border-top: 1px solid var(--vx-line); background: #fff;
}
.vx-chat-attach-btn {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--vx-bg-soft);
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem;
    border: 1px solid var(--vx-line);
}
.vx-chat-composer input[type=text] {
    flex: 1; margin: 0; border-radius: 999px; padding: 10px 16px; font-size: 0.88rem;
}
.vx-chat-preview {
    padding: 0 16px 12px; font-size: 0.78rem; color: var(--vx-ink-soft);
}
.vx-chat-preview-remove {
    border: none; background: none; color: var(--vx-error); text-decoration: underline;
    font-size: 0.78rem; cursor: pointer; padding: 0; margin-left: 4px;
}
@media (max-width: 640px) {
    .vx-chat-bubble-wrap { max-width: 84%; }
    .vx-chat-messages { min-height: 50vh; }
}

/* =========================================================================
   MOBILE HOME — Facebook-Home-style feed shown at the top of index.php,
   ONLY below the same 900px breakpoint the mobile nav switches on above.
   Kept in the DOM at all times either way — hidden with plain display:none
   on desktop, and on mobile it just comes before the (unchanged, still
   fully present) marketing homepage content rather than replacing it, so
   nothing here removes content search engines already index. See
   index.php and the composer-toggle script in assets/js/main.js.
   ========================================================================= */
.vx-mobile-home { display: block; padding: 14px 16px 6px; max-width: 620px; margin: 0 auto; }
@media (min-width: 900px) { .vx-mobile-home { display: none; } }
/* Same block/spacing as .vx-mobile-home above, but shown at every screen
   size — feed.php's pinned Authenticate card + tap-to-expand composer
   used to be mobile-only (with a separate plain header + button on
   desktop); it's now the one consistent top-of-Feed UX everywhere. */
.vx-feed-top { display: block; padding: 14px 16px 6px; max-width: 620px; margin: 0 auto; }
/* Inverse of .vx-mobile-home — for content (like feed.php's plain desktop
   header) that should show ONLY at/above the same 900px breakpoint. */
@media (max-width: 899px) { .vx-desktop-only { display: none; } }

.vx-mh-authcard {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 12px;
    background: var(--vx-ink); color: #fff; border-radius: var(--vx-radius); box-shadow: var(--vx-shadow);
}
.vx-mh-authcard-icon {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.16);
    display: flex; align-items: center; justify-content: center;
}
.vx-mh-authcard-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vx-mh-authcard-text strong { display: block; font-family: var(--vx-font-display); font-size: 0.9rem; letter-spacing: 0.01em; }
.vx-mh-authcard-text span { display: block; font-size: 0.76rem; color: rgba(255,255,255,0.75); }
.vx-mh-authcard .btn { flex-shrink: 0; background: #fff; color: var(--vx-ink); border-color: #fff; }

.vx-mh-composer {
    margin-bottom: 16px; background: var(--vx-glass-bg); backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--vx-glass-border);
    border-radius: var(--vx-radius); box-shadow: var(--vx-shadow); overflow: hidden;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vx-mh-composer { background: rgba(255,255,255,0.97); }
}
.vx-mh-composer-bar {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; background: none; border: none;
    cursor: pointer; text-align: left; font-family: inherit;
}
.vx-mh-composer-avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.vx-mh-composer-placeholder { flex: 1; font-size: 0.86rem; color: var(--vx-ink-faint); background: var(--vx-bg-soft); border-radius: 999px; padding: 9px 14px; }
.vx-mh-composer-options { display: none; flex-direction: column; gap: 1px; border-top: 1px solid var(--vx-line); }
.vx-mh-composer-options.is-open { display: flex; }
.vx-mh-composer-option {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; text-decoration: none; color: var(--vx-ink);
    font-size: 0.88rem; font-weight: 600; transition: background .15s ease;
}
.vx-mh-composer-option:hover { background: var(--vx-bg-soft); }
.vx-mh-composer-option svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--vx-ink-soft); }

.vx-mh-feed-link { margin-top: 4px; }

/* ---- "Uploading, please wait" overlay (feed-new.php) — see the note in
   assets/js/feed.js on .vx-share-menu for why `display` must be scoped to
   :not([hidden]) rather than set unconditionally: an unconditional value
   here would out-rank the browser's own default [hidden]{display:none}
   rule and the overlay would show permanently regardless of the `hidden`
   attribute the submit handler toggles. ---------------------------------- */
.vx-uploading-overlay {
    position: fixed; inset: 0; background: rgba(14,15,17,0.6); z-index: 200; padding: 20px;
    align-items: center; justify-content: center;
}
.vx-uploading-overlay:not([hidden]) { display: flex; }
.vx-uploading-box {
    background: #fff; border-radius: var(--vx-radius); padding: 30px 28px; text-align: center;
    max-width: 320px; box-shadow: var(--vx-shadow);
}
.vx-spinner {
    width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 14px;
    border: 3px solid var(--vx-line); border-top-color: var(--vx-ink);
    animation: vx-spin 0.8s linear infinite;
}
@keyframes vx-spin { to { transform: rotate(360deg); } }

/* =========================================================================
   FEED — browse grid, post detail, comments, opinion tally, inquiries
   ========================================================================= */

/* ---- Key/value table (used on feed-post.php for condition/certificate) --- */
.vx-kv { width: 100%; border-collapse: collapse; }
.vx-kv th, .vx-kv td { text-align: left; padding: 8px 0; border-top: 1px solid var(--vx-line); font-size: 0.88rem; }
.vx-kv th { color: var(--vx-ink-soft); font-weight: 600; width: 42%; }
.vx-kv td { color: var(--vx-ink); }
.vx-kv tr:first-child th, .vx-kv tr:first-child td { border-top: none; }

/* ---- Browse: filter bar ------------------------------------------------- */
.vx-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Browse: single-column feed of full-width post cards, Facebook-style */
.vx-feed-list { display: flex; flex-direction: column; gap: 22px; max-width: 620px; margin: 0 auto; }

.vx-feed-post-card {
    background: var(--vx-glass-bg);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--vx-glass-border);
    border-radius: var(--vx-radius);
    overflow: hidden;
    box-shadow: var(--vx-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vx-feed-post-card { background: rgba(255,255,255,0.97); }
}

.vx-feed-post-card-header { display: flex; align-items: center; gap: 11px; padding: 14px 16px 10px; }
.vx-feed-post-avatar {
    display: block; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
    border: 1px solid var(--vx-line);
}
.vx-feed-post-header-text { min-width: 0; }
.vx-feed-post-name {
    display: block; font-weight: 700; font-size: 0.9rem; color: var(--vx-ink); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vx-feed-post-meta { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.vx-feed-post-time { font-size: 0.76rem; color: var(--vx-ink-faint); }

.vx-feed-post-card-caption {
    display: block; padding: 0 16px 12px; font-size: 0.9rem; color: var(--vx-ink-soft); text-decoration: none;
}
.vx-feed-post-card-caption strong { color: var(--vx-ink); }
/* Title line (brand · category · style) — its own row, slightly heavier
   than the caption preview below it so the two don't visually blend into
   one run-on paragraph. */
.vx-feed-post-card-title { display: block; font-size: 0.92rem; color: var(--vx-ink); }
.vx-feed-post-card-preview { display: block; margin-top: 6px; color: var(--vx-ink-soft); line-height: 1.45; }
/* At-a-glance facts (condition / ships-from / certification) — rendered as
   distinct pill badges (vlx_feed_render_glance_pills()) rather than one
   middot-joined line, so each fact reads as its own scannable tag instead
   of blending into the brand/style line above it. */
.vx-glance-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.vx-glance-pill {
    display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 600;
    padding: 4px 10px; border-radius: 999px; line-height: 1.3; white-space: nowrap;
    background: var(--vx-bg-soft, #f3f3f1); border: 1px solid var(--vx-line); color: var(--vx-ink-soft);
}
.vx-glance-pill.vx-glance-good { background: #eef7f1; border-color: #cfe8d7; color: var(--vx-success); }
.vx-glance-pill.vx-glance-warn { background: #fdf2e3; border-color: #f2ddb0; color: #96650f; }

.vx-feed-post-card-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-top: 1px solid var(--vx-line); text-decoration: none;
}
.vx-feed-post-card-summary { font-size: 0.84rem; color: var(--vx-ink-soft); }
.vx-feed-post-card-cta { font-size: 0.84rem; font-weight: 700; color: var(--vx-ink); white-space: nowrap; }

/* ---- Share button (icon-only) — lets a member share a post to their OWN
   Facebook/Instagram/TikTok/X via the native Web Share API where
   available, with a small fallback menu otherwise. See assets/js/feed.js
   and vlx_feed_share_button_html() in includes/feed-functions.php. ------ */
.vx-share { position: relative; margin-left: auto; flex-shrink: 0; }
.vx-share-btn {
    width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--vx-line);
    background: #fff; color: var(--vx-ink-soft); display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; transition: background .15s ease, color .15s ease;
}
.vx-share-btn:hover { background: var(--vx-bg-soft); color: var(--vx-ink); }
.vx-share-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; min-width: 210px;
    background: #fff; border: 1px solid var(--vx-line); border-radius: var(--vx-radius-sm);
    box-shadow: var(--vx-shadow); padding: 6px; flex-direction: column; gap: 2px;
}
/* NOTE: display is set here, scoped to :not([hidden]), rather than as an
   unconditional `display: flex` above — an unconditional value on this
   selector would out-rank the browser's own default `[hidden] { display:
   none }` rule (author styles always beat the user-agent stylesheet, same
   specificity or not), which would make the menu render permanently open
   regardless of the `hidden` attribute assets/js/feed.js toggles on it. */
.vx-share-menu:not([hidden]) { display: flex; }
.vx-share-menu a, .vx-share-menu .vx-share-copy {
    display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px;
    font-size: 0.84rem; color: var(--vx-ink); text-decoration: none; background: none; border: none; cursor: pointer;
    font-family: inherit;
}
.vx-share-menu a:hover, .vx-share-menu .vx-share-copy:hover { background: var(--vx-bg-soft); }

/* ---- Type badge (reused: browse cards + post detail header) ------------- */
.vx-feed-type-badge {
    display: inline-block; font-family: var(--vx-font-display); font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
    background: var(--vx-accent-soft-bg); border: 1px solid var(--vx-accent-soft-border); color: var(--vx-ink);
}
.vx-feed-type-for_sale { background: #eef7f1; color: var(--vx-success); border-color: #cfe8d7; }
.vx-feed-type-legit_check { background: #eef2fb; color: #2b4a9e; border-color: #d6dff5; }

/* ---- Carousel — shared by browse cards (compact), post detail (detail),
   and the live photo preview on feed-new.php (upload). One JS component
   (assets/js/feed.js) drives all three via the data-vx-carousel markup. */
.vx-carousel { position: relative; width: 100%; overflow: hidden; background: var(--vx-bg-soft); touch-action: pan-y; }
.vx-carousel--compact { aspect-ratio: 1 / 1; }
.vx-carousel--detail { aspect-ratio: 4 / 3; border-radius: var(--vx-radius-sm); margin-top: 16px; }
.vx-carousel--upload { aspect-ratio: 4 / 3; border-radius: var(--vx-radius-sm); border: 1px solid var(--vx-line); }

.vx-carousel-track { display: flex; height: 100%; width: 100%; transition: transform .32s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.vx-carousel-slide { flex: 0 0 100%; width: 100%; height: 100%; display: block; position: relative; }
.vx-carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-carousel--detail .vx-carousel-slide img,
.vx-carousel--upload .vx-carousel-slide img { object-fit: contain; background: var(--vx-bg-soft); }

.vx-carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%;
    background: rgba(14,15,17,0.55); color: #fff; border: none; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1.15rem; line-height: 1; z-index: 2; transition: background .15s ease;
}
.vx-carousel-arrow:hover { background: rgba(14,15,17,0.8); }
.vx-carousel-prev { left: 10px; }
.vx-carousel-next { right: 10px; }

.vx-carousel-counter {
    position: absolute; top: 10px; right: 10px; background: rgba(14,15,17,0.6); color: #fff;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px; z-index: 2;
}
.vx-carousel--upload .vx-carousel-counter { display: none; }

.vx-carousel-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.vx-carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55); border: none; padding: 0; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.vx-carousel-dot.is-active { background: #fff; transform: scale(1.3); }

.vx-carousel-remove {
    position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(14,15,17,0.65); color: #fff; border: none; cursor: pointer; font-size: 1rem; line-height: 1; z-index: 3;
}
.vx-carousel-remove:hover { background: rgba(163,39,31,0.85); }

/* Only one photo: no point showing nav chrome for a single slide. */
.vx-carousel[data-count="1"] .vx-carousel-arrow,
.vx-carousel[data-count="1"] .vx-carousel-dots,
.vx-carousel[data-count="1"] .vx-carousel-counter { display: none; }

/* ---- Post detail: opinion tally ------------------------------------------ */
.vx-feed-tally { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.vx-feed-tally-item {
    flex: 1; min-width: 90px; text-align: center; background: var(--vx-bg-soft);
    border: 1px solid var(--vx-line); border-radius: var(--vx-radius-sm); padding: 10px 8px;
}
.vx-feed-tally-item strong { display: block; font-family: var(--vx-font-display); font-size: 1.3rem; color: var(--vx-ink); }
.vx-feed-tally-item span { font-size: 0.72rem; color: var(--vx-ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- Post detail: inquiry threads (buyer/seller) -------------------------- */
.vx-feed-thread { margin-bottom: 20px; }
.vx-feed-thread:last-child { margin-bottom: 0; }
.vx-chat-thread {
    background: var(--vx-bg-soft); border: 1px solid var(--vx-line); border-radius: var(--vx-radius-sm);
    padding: 12px; display: flex; flex-direction: column; gap: 2px;
}
.vx-feed-reply-form { display: flex; gap: 8px; margin-top: 10px; }
.vx-feed-reply-form input[type=text] { flex: 1; margin: 0; }

/* ---- Post detail: comments ------------------------------------------------ */
.vx-feed-comment { display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid var(--vx-line); }
.vx-feed-comment:first-child { border-top: none; padding-top: 0; }
.vx-feed-comment-avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }

.vx-feed-opinion-tag {
    display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px; margin-left: 4px; vertical-align: 1px;
}
.vx-feed-opinion-authentic { background: #eef7f1; color: var(--vx-success); border: 1px solid #cfe8d7; }
.vx-feed-opinion-not_authentic { background: #fbecea; color: var(--vx-error); border: 1px solid #f2cfc9; }
.vx-feed-opinion-not_sure { background: var(--vx-accent-soft-bg); color: var(--vx-ink-soft); border: 1px solid var(--vx-accent-soft-border); }

.vx-feed-opinion-picker { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.vx-feed-opinion-picker label { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--vx-ink-soft); cursor: pointer; }
.vx-feed-opinion-picker input { margin: 0; }

@media (max-width: 560px) {
    .vx-feed-tally-item { min-width: 74px; }
    .vx-carousel--detail { aspect-ratio: 1 / 1; }
}

/* ---- Admin "View As" read-only support banner ------------------------- */
.vx-viewas-banner {
    background: #1c1d20; color: #f1f1f2; padding: 10px 18px; font-size: 0.82rem;
    display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
    text-align: center;
}
.vx-viewas-banner strong { color: #fff; }
.vx-viewas-exit {
    color: #fff; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28);
    padding: 5px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.78rem;
    flex-shrink: 0;
}
.vx-viewas-exit:hover { background: rgba(255,255,255,0.24); }
@media (max-width: 560px) {
    .vx-viewas-banner { font-size: 0.76rem; padding: 9px 14px; }
}

/* ---- Notification bell (header) ---------------------------------------- */
.vx-notif-bell-wrap { position: relative; margin-left: auto; }
.vx-notif-bell-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--vx-accent-soft-border);
    background: #fff; color: var(--vx-ink); cursor: pointer;
}
.vx-notif-bell-btn:hover { background: var(--vx-accent-soft-bg); }
.vx-notif-badge {
    position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: #a3271f; color: #fff; font-size: 0.62rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.vx-notif-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0; width: 320px; max-width: 88vw;
    background: #fff; border: 1px solid var(--vx-accent-soft-border); border-radius: 14px;
    box-shadow: 0 16px 40px rgba(14,15,17,0.14); z-index: 200; overflow: hidden;
}
.vx-notif-dropdown-head { padding: 14px 16px; font-weight: 700; font-size: 0.88rem; border-bottom: 1px solid var(--vx-accent-soft-border); }
.vx-notif-list { max-height: 340px; overflow-y: auto; }
.vx-notif-item {
    display: block; padding: 12px 16px; text-decoration: none; color: var(--vx-ink);
    border-bottom: 1px solid var(--vx-accent-soft-border);
}
.vx-notif-item:last-child { border-bottom: none; }
.vx-notif-item:hover { background: var(--vx-accent-soft-bg); }
.vx-notif-item.vx-notif-unread { background: #f1f5ff; }
.vx-notif-item-title { font-weight: 700; font-size: 0.85rem; }
.vx-notif-item-body { font-size: 0.8rem; color: var(--vx-ink-soft); margin-top: 2px; }
.vx-notif-item-time { font-size: 0.7rem; color: var(--vx-ink-faint); margin-top: 5px; }
.vx-notif-empty { padding: 24px 16px; text-align: center; font-size: 0.83rem; color: var(--vx-ink-faint); }
.vx-notif-dropdown-footer {
    display: block; text-align: center; padding: 11px; font-size: 0.8rem; font-weight: 700;
    color: var(--vx-ink); text-decoration: none; border-top: 1px solid var(--vx-accent-soft-border);
}
.vx-notif-dropdown-footer:hover { background: var(--vx-accent-soft-bg); }
.vx-notif-push-btn {
    display: block; width: 100%; padding: 10px; border: none; border-top: 1px solid var(--vx-accent-soft-border);
    background: var(--vx-accent-soft-bg); color: var(--vx-ink); font-size: 0.76rem; font-weight: 700; cursor: pointer;
}
.vx-notif-push-btn:hover { background: var(--vx-accent-soft-border); }
.vx-notif-fulllist { max-width: 640px; }
.vx-notif-fulllist .vx-notif-item { border: 1px solid var(--vx-accent-soft-border); border-radius: 12px; margin-bottom: 10px; }
@media (max-width: 560px) {
    .vx-notif-dropdown { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; max-height: 78vh; }
    .vx-notif-list { max-height: 50vh; }
}