/*
 * GenZ design system (docs/dating-reference/README.md). Loaded last on every frontend page, after the
 * admin colour settings, so these tokens win. Component styles for the dating screens live in
 * vl-discover.css and use the same tokens.
 */
:root {
    /* The banner palette, and only it: maroon, wine, gold, blush and cream (plus white surfaces) */
    --gz-maroon: #db1f74;
    --gz-wine: #c8186a;
    --gz-deep: #041c40;
    --gz-gold: #fc3890;
    --gz-gold-dark: #c8186a;
    --gz-gold-soft: #fff1f7;
    --gz-blush: #fad3e6;
    --gz-blush-soft: #fff1f7;
    --gz-cream: #faf9fc;
    --gz-paper-warm: #fff7fb;

    --gz-ink: var(--gz-deep);
    --gz-ink-2: var(--gz-maroon);
    --gz-muted: #5f6380;
    --gz-line: #eceaf2;
    --gz-paper: var(--gz-cream);
    --gz-card: #ffffff;
    --gz-fog: var(--gz-blush-soft);
    --gz-hot: var(--gz-maroon);
    --gz-flame: var(--gz-wine);
    --gz-lilac: var(--gz-blush);
    --gz-lime: var(--gz-gold);
    --gz-sun: var(--gz-gold);
    --gz-sky: var(--gz-blush);
    --gz-grad: linear-gradient(135deg, var(--gz-wine) 0%, var(--gz-maroon) 100%);
    --gz-grad-soft: linear-gradient(135deg, var(--gz-blush-soft) 0%, var(--gz-paper-warm) 100%);
    --gz-grad-dream: linear-gradient(135deg, var(--gz-maroon) 0%, var(--gz-wine) 100%);
    --gz-radius: 24px;
    --gz-radius-sm: 16px;
    --gz-shadow: 0 10px 30px rgba(4, 28, 64, .08);
    --gz-shadow-lg: 0 24px 60px rgba(4, 28, 64, .18);
    --gz-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
    --gz-text: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --gz-serif: 'Instrument Serif', Georgia, serif;

    /* The older theme's tokens, pointed at the new palette */
    --vl-maroon: var(--gz-maroon);
    --vl-maroon-dark: var(--gz-deep);
    --vl-maroon-deep: var(--gz-deep);
    --vl-rose: var(--gz-wine);
    --vl-gold: var(--gz-gold);
    --vl-gold-dark: var(--gz-gold-dark);
    --vl-gold-soft: var(--gz-gold-soft);
    --vl-cream: var(--gz-paper);
    --vl-ink: var(--gz-ink);
    --vl-muted: var(--gz-muted);
    --vl-line: var(--gz-line);
    --vl-wine: var(--gz-wine);
    --vl-wine-deep: var(--gz-maroon);
    --vl-header: var(--gz-maroon);
    --vl-sand: var(--gz-paper);
    --vl-sand-deep: var(--gz-blush-soft);
    --vl-radius: var(--gz-radius-sm);
    --vl-shadow: var(--gz-shadow);
    --vl-shadow-lg: var(--gz-shadow-lg);
    --vl-serif: var(--gz-display);
    --primary: var(--gz-maroon);
    --hov-primary: var(--gz-wine);
    --soft-primary: rgba(4, 28, 64, .1);
    --secondary: var(--gz-wine);
    --soft-secondary: rgba(200, 24, 106, .1);
}

/* The settings-driven gradients in layouts/app (base and secondary colour) follow the palette too */
.text-primary-grad { background: var(--gz-grad) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.fill-primary-grad stop:nth-child(1) { stop-color: var(--gz-wine) !important; }
.fill-primary-grad stop:nth-child(2) { stop-color: var(--gz-maroon) !important; }

/* ---------- Type ---------- */
body { font-family: var(--gz-text); color: var(--gz-muted); background: var(--gz-paper); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .h5, .vl-serif {
    font-family: var(--gz-display); color: var(--gz-ink); letter-spacing: -.02em; font-weight: 800;
}
.h5, .h6, h5, h6 { font-family: var(--gz-display); color: var(--gz-ink); letter-spacing: -.01em; font-weight: 700; }
/* Headings on maroon bands stay light (the help hero, gradient bands, the footer) */
:is(.text-white, .bg-primary-grad, .vl-help-hero, .vl-footer, .vl-trust-card, .vl-cta) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4) { color: inherit; }
.gz-serif { font-family: var(--gz-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.gz-grad-text { background: var(--gz-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
a { color: var(--gz-hot); }
a:hover { color: #c8186a; }
::selection { background: var(--gz-lime); color: var(--gz-ink); }

/* ---------- Buttons: gradient for love, black pill for "next" ---------- */
.btn { border-radius: 999px; font-family: var(--gz-text); font-weight: 700; }
.btn-vl, .btn-primary, .bg-primary-grad, .vl-btn-wine, .vl-sh-submit {
    background: var(--gz-grad) !important; border: 0 !important; color: #fff !important;
    box-shadow: 0 8px 20px rgba(4, 28, 64, .28);
}
.btn-vl:hover, .btn-primary:hover, .vl-btn-wine:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-vl-outline, .vl-btn-ghost { border: 2px solid var(--gz-ink) !important; color: var(--gz-ink) !important; background: transparent !important; border-radius: 999px; }
.btn-vl-outline:hover { background: var(--gz-ink) !important; color: #fff !important; }
.btn-vl-gold, .vl-btn-gold { background: var(--gz-sun) !important; color: var(--gz-ink) !important; border: 0 !important; border-radius: 999px; }
.gz-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px;
    border: 0; border-radius: 999px; background: var(--gz-ink); color: #fff; font-weight: 800; font-size: 16px;
    transition: transform .12s ease, opacity .12s ease;
}
.gz-btn:hover { color: #fff; text-decoration: none; transform: translateY(-1px); }
.gz-btn:active { transform: scale(.98); }
.gz-btn.is-block { display: flex; width: 100%; }
.gz-btn.is-grad { background: var(--gz-grad); box-shadow: 0 10px 24px rgba(4, 28, 64, .3); }
.gz-btn.is-light { background: #fff; color: var(--gz-ink); box-shadow: inset 0 0 0 2px var(--gz-ink); }
.gz-btn[disabled], .gz-btn.disabled { background: #eceaf2; color: #fff; box-shadow: none; pointer-events: none; }

/* ---------- Surfaces ---------- */
.card, .vl-dash-card { border-radius: var(--gz-radius) !important; border-color: var(--gz-line) !important; }
.card-header { background: transparent; }
.form-control, .su-input { border-radius: 14px !important; border-color: var(--gz-line); }
.form-control:focus, .su-input:focus { border-color: var(--gz-hot) !important; box-shadow: 0 0 0 4px rgba(4, 28, 64, .12) !important; }
.badge-primary, .bg-primary { background: var(--gz-hot) !important; }
.text-primary { color: var(--gz-hot) !important; }
.gz-sticker {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 13px;
    background: var(--gz-lime); color: var(--gz-ink); transform: rotate(-3deg); box-shadow: 0 6px 14px rgba(4, 28, 64, .12);
}

/* ---------- Header (cream, as on the homepage banner), footer (maroon), tab bar ---------- */
/* Transparent over the page; once scrolled (layouts/app adds .is-scrolled) a sticky header turns cream so text stays readable */
.vl-header, .vl-header-app {
    background: transparent !important; box-shadow: none !important;
    transition: background-color .2s ease, box-shadow .2s ease;
}
.vl-header.is-scrolled, .vl-header-app.is-scrolled {
    background: rgba(255, 255, 255, .94) !important; box-shadow: 0 1px 0 rgba(4, 28, 64, .12) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.vl-nav > li > a { font-family: var(--gz-text); font-weight: 700; color: var(--gz-maroon) !important; opacity: .85; }
.vl-nav > li.active > a, .vl-nav > li > a:hover { color: var(--gz-maroon) !important; opacity: 1; }
.vl-nav > li > a::after { background: var(--gz-gold) !important; height: 3px !important; border-radius: 3px; }
.vl-header .vl-wordmark-name, .vl-header a:hover .vl-wordmark-name { color: var(--gz-maroon) !important; }
.vl-header .vl-header-login, .vl-header .vl-header-icon, .vl-header .vl-header-user,
.vl-header .vl-lang-header > a, .vl-header .vl-lang-mobile > a { color: var(--gz-maroon) !important; }
.vl-header .vl-header-login { font-weight: 800; }
.vl-header .vl-header-login:hover, .vl-header .vl-header-icon:hover, .vl-header .vl-header-user:hover { color: var(--gz-wine) !important; }
.vl-header .vl-btn-gold {
    background: var(--gz-maroon) !important; color: var(--gz-paper-warm) !important; border-radius: 999px !important; font-weight: 800;
    padding: .65rem 1.4rem; box-shadow: 0 8px 20px rgba(4, 28, 64, .25) !important;
}
.vl-header .vl-btn-gold.btn-sm { padding: .4rem 1rem; }
.vl-header .vl-btn-gold:hover { background: var(--gz-wine) !important; }
.vl-header .vl-btn-ghost { color: var(--gz-maroon) !important; border-color: rgba(4, 28, 64, .3) !important; }
.vl-header .vl-mobile-nav { border-color: rgba(4, 28, 64, .12) !important; }
.vl-header .vl-mobile-nav a { color: var(--gz-maroon) !important; opacity: .8; }
.vl-header .vl-mobile-nav a.active, .vl-header .vl-mobile-nav a:hover { opacity: 1; }
.vl-header a:focus-visible, .vl-header button:focus-visible { outline: 3px solid var(--gz-gold) !important; outline-offset: 3px; }

/* ---------- Public header layout (frontend/inc/header) ----------
   After Tinder's bar: an auto | 1fr | auto grid across the full width. The logo hugs the left edge,
   the controls the right, and the links spread evenly through the space between them. */
.vl-header-public { position: relative; z-index: 2; }
.vl-header-inner {
    --vl-hdr-h: 76px;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(24px, 3vw, 48px);
    width: 100%; min-height: var(--vl-hdr-h); margin-inline: auto; padding-inline: 32px;
}
/* Full width like Tinder's bar: logo and buttons near the screen edges; very wide screens stop at 1600px */
@media (min-width: 1700px) { .vl-header-inner { max-width: 1600px; } }
@media (max-width: 1199.98px) {
    .vl-header-inner { padding-inline: 24px; }
    .vl-header.vl-header-public .vl-nav > li > a { font-size: 15px; }
}
.vl-header-start { display: flex; align-items: center; justify-self: start; min-width: 0; }
.vl-header-center { display: flex; align-items: center; justify-self: stretch; min-width: 0; }
.vl-header-end { display: flex; align-items: center; justify-content: flex-end; justify-self: end; min-width: 0; }
.vl-header.vl-header-public .vl-nav { width: 100%; margin: 0; padding: 0; justify-content: space-evenly; gap: 20px; }
/* Plain, even links (after Tinder's bar): regular weight, no side padding, the spacing comes from the gap */
.vl-header.vl-header-public .vl-nav > li > a {
    display: flex; align-items: center; height: var(--vl-hdr-h); padding: 0; font-size: 16px; font-weight: 500;
    color: var(--gz-deep) !important; opacity: 1;
}
.vl-header.vl-header-public .vl-nav > li > a:hover { color: var(--gz-wine) !important; }
.vl-header.vl-header-public .vl-nav > li.active > a { font-weight: 800; color: var(--gz-maroon) !important; }
.vl-header.vl-header-public .vl-nav > li > a::after { left: 0; right: 0; bottom: 18px; }
.vl-header-public .vl-header-actions { align-items: center; gap: 28px; }
.vl-header-public .vl-header-login, .vl-header-public .vl-lang-header > a { display: inline-flex; align-items: center; height: 44px; line-height: 1; white-space: nowrap; }
.vl-header.vl-header-public .vl-lang-header > a, .vl-header.vl-header-public .vl-header-login { font-size: 16px; font-weight: 700; color: var(--gz-deep) !important; }
.vl-header.vl-header-public .vl-header-register { font-size: 16px; }
.vl-header-public .vl-header-register {
    display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px !important;
    border-radius: 999px !important; line-height: 1; white-space: nowrap;
}
.vl-header-public .vl-mobile-auth { align-items: center; gap: 8px; flex-wrap: nowrap; }
.vl-header-public .vl-mobile-auth .vl-header-register { height: 36px; padding: 0 16px !important; font-size: 13px; }
.vl-header-public .vl-mobile-auth .vl-login-btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; margin: 0; }
.vl-header-public .vl-lang-mobile { margin: 0 !important; }
/* The switcher's link is inline-flex inside a block wrapper, which left it sitting on the text baseline */
.vl-header-public .vl-lang { display: flex; align-items: center; }
.vl-header-public .vl-lang-mobile > a { height: 36px; }

/* Mobile menu: a toggle in the header, the links in a panel that drops below it */
.vl-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
    border: 1px solid rgba(4, 28, 64, .25); border-radius: 50%; background: transparent; color: var(--gz-maroon); font-size: 20px; cursor: pointer;
}
.vl-menu-toggle:hover { background: var(--gz-blush-soft); }
.vl-mobile-menu[hidden] { display: none !important; }
.vl-header .vl-mobile-menu {
    position: absolute; top: 100%; left: 0; right: 0; overflow: visible; white-space: normal;
    background: var(--gz-cream); border-top: 1px solid rgba(4, 28, 64, .12) !important; box-shadow: 0 18px 30px rgba(4, 28, 64, .12);
}
.vl-mobile-menu-inner { display: flex; flex-direction: column; max-width: 1200px; margin-inline: auto; padding: 8px 16px 16px; }
.vl-header .vl-mobile-menu a { display: flex; align-items: center; min-height: 48px; padding: 0 8px; border-bottom: 1px solid rgba(4, 28, 64, .08); font-size: 16px; font-weight: 700; }
.vl-header .vl-mobile-menu a:last-child { border-bottom: 0; }
.vl-header .vl-mobile-menu a.active { box-shadow: inset 3px 0 0 var(--gz-gold); }
.vl-header-public.is-menu-open { background: var(--gz-cream) !important; }

@media (max-width: 991.98px) {
    .vl-header-inner { --vl-hdr-h: 64px; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding-inline: 16px; }
}
@media (max-width: 575.98px) {
    .vl-header-inner { padding-inline: 12px; }
    .vl-header-public .vl-mobile-auth { gap: 6px; }
}
.vl-wordmark-mark { background: var(--gz-maroon) !important; color: var(--gz-gold) !important; box-shadow: 0 6px 16px rgba(4, 28, 64, .28) !important; border-radius: 12px !important; transform: rotate(-8deg); }
.vl-wordmark-name { font-family: var(--gz-display) !important; font-weight: 800 !important; letter-spacing: -.03em; }
.vl-nav-count { background: var(--gz-gold) !important; color: var(--gz-deep) !important; }
.vl-footer { background: var(--gz-maroon) !important; color: rgba(255, 255, 255, .78); }
.vl-footer h4 { color: var(--gz-gold) !important; font-family: var(--gz-display); letter-spacing: 0; }
.vl-footer a { color: rgba(255, 255, 255, .85); }
.vl-footer a:hover { color: var(--gz-gold); }
.vl-footer .vl-wordmark-name { color: var(--gz-paper-warm) !important; }
.vl-footer .vl-wordmark-mark { background: var(--gz-gold) !important; color: var(--gz-maroon) !important; box-shadow: none !important; }
.aiz-mobile-bottom-nav {
    background: rgba(255, 255, 255, .92) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: 22px 22px 0 0 !important; border-top: 1px solid var(--gz-line) !important;
}
.aiz-mobile-bottom-nav .opacity-100 { color: var(--gz-hot); }
.aiz-mobile-bottom-nav i.opacity-100 { opacity: 1 !important; background: var(--gz-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Bits of the older theme that read as "matrimony" ---------- */
.vl-ornament { display: none !important; }
.vl-eyebrow, .vl-sh-eyebrow { color: var(--gz-lime) !important; letter-spacing: .08em; font-weight: 800; }
.vl-sh-eyebrow::before { background: var(--gz-lime) !important; }
.text-gold, .text-maroon { color: var(--gz-hot) !important; }
.vl-trust-card { background: var(--gz-ink) !important; border-radius: var(--gz-radius) !important; }
.vl-trust-card h3 { color: var(--gz-lime) !important; }
.vl-hiw { background: #fff !important; border-radius: var(--gz-radius) !important; border: 2px solid var(--gz-ink); }
.vl-hiw-steps .num { font-family: var(--gz-display); color: var(--gz-hot) !important; }
.vl-cta { background: var(--gz-grad-dream) !important; border-radius: 32px !important; }
.vl-faq .card { border-radius: 18px !important; }
.vl-section-title h2, .vl-heading-left h2 { font-size: clamp(28px, 4vw, 44px); }

/* ---------- Illustrated hero (partials/vl/genz_art): no wedding photo, just vibes ---------- */
.vl-sh.is-plain, .vl-hero-cinematic:not(.has-media) { background: var(--gz-ink) !important; }
.vl-sh.is-plain .vl-sh-bg, .vl-hero-cinematic:not(.has-media) .vl-hero-bg { background: var(--gz-ink); overflow: hidden; }
.vl-sh.is-plain h1, .vl-sh.is-plain .vl-sh-support, .vl-sh.is-plain .vl-sh-desc, .vl-sh.is-plain .vl-sh-trust { color: #fff; }
.vl-sh h1#vl-sh-title { font-size: clamp(44px, 7vw, 84px); line-height: .95; letter-spacing: -.04em; }
.gz-art { position: absolute; inset: 0; pointer-events: none; }
.gz-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: gz-drift 14s ease-in-out infinite alternate; }
.gz-blob.is-a { width: 520px; height: 520px; left: -120px; top: -140px; background: var(--gz-hot); }
.gz-blob.is-b { width: 460px; height: 460px; right: -100px; top: 30%; background: var(--gz-lilac); animation-delay: -5s; }
.gz-blob.is-c { width: 380px; height: 380px; left: 35%; bottom: -160px; background: var(--gz-flame); animation-delay: -9s; }
.gz-art-orb { position: absolute; animation: gz-bob 6s ease-in-out infinite; }
.gz-art-orb.is-1 { left: 44%; top: 14%; transform: rotate(-10deg); }
.gz-art-orb.is-2 { left: 6%; bottom: 16%; animation-delay: -2s; }
.gz-art-orb.is-3 { left: 52%; bottom: 12%; animation-delay: -3s; }
.gz-art-orb.is-4 { right: 4%; top: 12%; animation-delay: -1s; }
.gz-float-chip {
    position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-weight: 800; font-size: 14px;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 14px 30px rgba(0, 0, 0, .25); animation: gz-bob 7s ease-in-out infinite;
}
.gz-float-chip i { font-size: 18px; color: var(--gz-lime); }
.gz-float-chip.is-1 { left: 30%; top: 26%; transform: rotate(-4deg); }
.gz-float-chip.is-2 { left: 40%; bottom: 8%; transform: rotate(3deg); animation-delay: -3s; }
.gz-float-chip.is-3 { left: 4%; top: 10%; transform: rotate(-2deg); animation-delay: -5s; }
@keyframes gz-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes gz-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, 30px) scale(1.1); } }
@media (max-width: 991.98px) {
    .gz-float-chip.is-1, .gz-float-chip.is-2, .gz-art-orb.is-3 { display: none; }
    .gz-art-orb.is-1 { left: auto; right: 6%; top: 8%; width: 72px; height: 72px; font-size: 36px; }
    .gz-float-chip.is-3 { top: 4%; }
}
@media (prefers-reduced-motion: reduce) { .gz-blob, .gz-art-orb, .gz-float-chip { animation: none; } }

/* ---------- Bootstrap colour utilities on the palette ----------
   info, warning, secondary and dark become gold, blush and maroon. Success (green) and danger (red)
   stay as they are, since they carry meaning on forms and statuses. */
.btn-info, .badge-info, .bg-info { background: var(--gz-gold) !important; border-color: var(--gz-gold) !important; color: var(--gz-deep) !important; }
.btn-soft-info, .badge-soft-info, .bg-soft-info { background: var(--gz-gold-soft) !important; color: var(--gz-deep) !important; border-color: transparent !important; }
.alert-info, .alert-warning { background: var(--gz-gold-soft) !important; border-color: #fad3e6 !important; color: var(--gz-deep) !important; }
.badge-warning, .bg-warning { background: var(--gz-gold) !important; color: var(--gz-deep) !important; }
.text-warning, .text-info { color: var(--gz-gold-dark) !important; }
.btn-soft-primary, .bg-soft-primary { background: var(--gz-blush-soft) !important; color: var(--gz-maroon) !important; border-color: transparent !important; }
.btn-soft-primary:hover { background: var(--gz-maroon) !important; color: var(--gz-paper-warm) !important; }
.badge-secondary, .bg-secondary, .bg-soft-secondary, .btn-soft-secondary, .alert-secondary {
    background: var(--gz-blush-soft) !important; color: var(--gz-maroon) !important; border-color: var(--gz-line) !important;
}
.btn-outline-secondary { color: var(--gz-maroon) !important; border-color: var(--gz-line) !important; background: transparent !important; }
.btn-outline-secondary:hover { background: var(--gz-blush-soft) !important; }
.text-secondary { color: var(--gz-muted) !important; }
.text-dark { color: var(--gz-deep) !important; }
.bg-dark { background: var(--gz-maroon) !important; color: var(--gz-paper-warm) !important; }
.bg-soft-dark { background: rgba(4, 28, 64, .08) !important; }
::selection { background: var(--gz-blush); color: var(--gz-deep); }
/* The theme's coloured tiles (bg-grad-1..4) on the palette */
.bg-grad-1 { background-color: var(--gz-wine) !important; }
.bg-grad-2 { background-color: var(--gz-maroon) !important; }
.bg-grad-3 { background-color: var(--gz-gold) !important; color: var(--gz-deep) !important; }
.bg-grad-4 { background-color: #e0457f !important; }

/* Keyboard focus is always visible (aiz-core.css removes every outline; WCAG 2.4.7). Gold on the dark footer. */
:focus-visible { outline: 3px solid var(--gz-maroon) !important; outline-offset: 2px !important; }
.vl-footer :focus-visible, .bg-dark :focus-visible, .aiz-cookie-alert :focus-visible { outline-color: var(--gz-gold) !important; }

/* Mobile bottom nav: labels at full strength (opacity-60 on the muted colour was 3.2:1), the open tab in maroon */
.aiz-mobile-bottom-nav .opacity-60 { opacity: 1 !important; }
.aiz-mobile-bottom-nav span.fs-10 { font-size: 11px !important; color: var(--gz-muted); }
.aiz-mobile-bottom-nav .opacity-100 { color: var(--gz-maroon) !important; }
.aiz-mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom); }

/* "Skip to content": hidden until it gets keyboard focus */
.vl-skip { position: absolute; left: 12px; top: -60px; z-index: 2000; padding: 10px 16px; border-radius: 10px;
    background: var(--gz-maroon); color: #fff !important; font-weight: 700; text-decoration: none; }
.vl-skip:focus { top: 12px; }
/* Chat list preview and time: readable (the same 3.2:1 problem) */
.vl-preview.opacity-60, .vl-time.opacity-60 { opacity: 1 !important; color: var(--gz-muted); }
.vl-time.fs-10 { font-size: 11px !important; }
/* The bottom nav's row had negative gutters with no padding around it: a few px of sideways scroll on phones */
.aiz-mobile-bottom-nav > .row { margin-left: 0 !important; margin-right: 0 !important; }

/* "What does ID verified mean?" (partials/vl/id_verified_info) */
.vl-idv-info { margin: .6rem 0 0; font-size: 13.5px; color: var(--gz-muted); }
.vl-idv-info summary { cursor: pointer; font-weight: 700; color: var(--gz-maroon); display: inline-flex; gap: .35rem; align-items: center; min-height: 32px; }
.vl-idv-info ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.vl-idv-info li { margin-bottom: .25rem; }
/* Visitor bottom nav: "Join free" stands out */
.aiz-mobile-bottom-nav .vl-nav-join { color: #fff !important; background: var(--gz-maroon); border-radius: 14px; margin: 6px 2px; }
.aiz-mobile-bottom-nav .vl-nav-join span { color: #fff !important; }
.aiz-mobile-bottom-nav .vl-nav-join:hover { background: var(--gz-wine, #c8186a); text-decoration: none; }

/* ---------- Toasts (AIZ.plugins.notify): the palette, and an icon so the state is not colour alone ---------- */
.aiz-notify.alert {
    min-width: 0; max-width: min(380px, calc(100vw - 32px)); padding: 14px 46px 14px 54px; border: 0; border-radius: 16px;
    background: var(--gz-wine); color: var(--gz-cream); box-shadow: var(--gz-shadow-lg); font: 600 14px/1.4 var(--gz-text);
}
.aiz-notify.alert::before {
    content: 'i'; position: absolute; left: 14px; top: 50%; margin-top: -13px; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: var(--gz-gold); color: var(--gz-deep); font-weight: 800; font-size: 14px;
}
.aiz-notify.alert-success { background: var(--gz-maroon); }
.aiz-notify.alert-success::before { content: '\2713'; }
.aiz-notify.alert-danger { background: var(--gz-deep); box-shadow: inset 4px 0 0 var(--gz-gold), var(--gz-shadow-lg); }
.aiz-notify.alert-danger::before, .aiz-notify.alert-warning::before { content: '!'; }
.aiz-notify.alert-warning { background: var(--gz-gold-soft); color: var(--gz-deep); }
.aiz-notify.alert-warning::before { background: var(--gz-maroon); color: var(--gz-cream); }
.aiz-notify .close, .aiz-notify .close:hover { color: inherit; }
.aiz-notify .progress-bar { background-color: var(--gz-gold); }
.aiz-notify.alert-warning .progress-bar { background-color: var(--gz-maroon); }
/* Below 1200px the bottom nav is there: sit above it, full width less the gutters (the plugin's inline
   bottom offset is kept, so several toasts still stack) */
@media (max-width: 1199.98px) {
    .aiz-notify.alert { left: 16px !important; right: 16px !important; margin-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
}

/* Members have no footer: keep the end of every page clear of the fixed bottom nav (below 1200px) */
@media (max-width: 1199.98px) {
    .aiz-main-wrapper.vl-page-offset-member { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ---------- Fixed screens (@section('fixed_screen'), layouts/app): Discover and an open chat ----------
   As in the Tinder and Bumble apps, the page itself never scrolls: it fills the space between the header
   and the bottom nav, and only the parts inside scroll (the message list, the card's details sheet).
   On very short screens (a phone held sideways) the page scrolls as usual so nothing is cut off. */
@media (min-height: 520px) {
    html.vl-fixed-screen, html.vl-fixed-screen body { height: 100%; overflow: hidden; overscroll-behavior: none; }
    .vl-fixed-screen .aiz-main-wrapper { height: 100vh; height: 100dvh; overflow: hidden; }
    .vl-fixed-screen #main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    .vl-fixed-screen #main > .dc-page, .vl-fixed-screen #main > section { flex: 1 1 auto; min-height: 0; }

    /* Discover: the card takes whatever height is left after the top bar, notes and buttons */
    .vl-fixed-screen .dc-page { padding: 12px 0; display: flex; flex-direction: column; }
    .vl-fixed-screen .dc-page > .container, .vl-fixed-screen .dc-shell { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; }
    .vl-fixed-screen .dc-top, .vl-fixed-screen .dc-note, .vl-fixed-screen .dc-actions { flex: none; }
    .vl-fixed-screen .dc-stack { flex: 1 1 auto; height: auto; min-height: 240px; max-height: 760px; }
    .vl-fixed-screen .dc-actions { margin-top: 12px; }

    /* Chat: the panel fills the screen; the conversation list and the messages scroll inside it */
    .vl-fixed-screen #main > section { padding: 12px 0 !important; display: flex; flex-direction: column; }
    .vl-fixed-screen #main > section > .container { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    .vl-fixed-screen #main > section > .container > .d-flex { flex: 1 1 auto; min-height: 0; align-items: stretch !important; }
    .vl-fixed-screen .aiz-user-sidenav-wrap { max-height: 100%; overflow-y: auto; }
    .vl-fixed-screen .aiz-user-panel { display: flex; flex-direction: column; min-height: 0; }
    .vl-fixed-screen .cm-head, .vl-fixed-screen .cm-new { flex: none; }
    .vl-fixed-screen .aiz-chat { flex: 1 1 auto; min-height: 0; }
    /* The conversation list is a slide-in panel below 992px, so only the open chat takes the height there */
    .vl-fixed-screen .aiz-chat > .row, .vl-fixed-screen .aiz-chat #single_chat { height: 100%; }
    .vl-fixed-screen .aiz-chat .chat-list-wrap { height: 100%; max-height: none; }
}
@media (min-height: 520px) and (min-width: 992px) {
    .vl-fixed-screen .aiz-chat > .row > .col-lg-4, .vl-fixed-screen .aiz-chat .chat-user-list-wrap { height: 100%; }
    .vl-fixed-screen .aiz-chat .chat-user-list { height: calc(100% - 44px); max-height: none; }
}