/* ============================================================================
   Stouterd 2.0 — Sitewide visual polish
   ----------------------------------------------------------------------------
   Re-skins existing classes (.navbar, .btn, .profilecard, .nav-menu, etc.)
   without renaming anything — all JS hooks (#searchInput, #searchResults,
   click handlers) keep working untouched. Loaded after theme.css and
   inherits its CSS variables.
   ============================================================================ */

/* ─── Global typography & body ────────────────────────────────────────────── */
body:not(.ds-themed):not(.dashboard-body):not([data-no-polish]) {
    font-family: var(--font-sans) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(255,46,108,.04) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(30,144,255,.04) 0%, transparent 50%),
        var(--bg) !important;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[data-theme="dark"] body:not(.ds-themed):not([data-no-polish]) {
    background:
        radial-gradient(circle at 0% 0%, rgba(255,46,108,.07) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(30,144,255,.07) 0%, transparent 50%),
        var(--bg) !important;
}

h1, h2, h3, h4 { font-family: var(--font-sans); letter-spacing: -0.01em; }

/* Smooth-scroll & nicer focus rings */
html { scroll-behavior: smooth; }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ─── NAVBAR ──────────────────────────────────────────────────────────────── */
.navbar {
    background: linear-gradient(135deg, #14151a 0%, #1c1d27 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] .navbar {
    background: linear-gradient(135deg, #0d0f14 0%, #14171f 100%) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

.nav-container { max-width: 1280px !important; padding: 14px 24px !important; }

.nav-logo {
    background: linear-gradient(135deg, #ff2e6c 0%, #ff8b3d 100%);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    letter-spacing: 0.06em !important;
    font-weight: 800 !important;
    font-size: 21px !important;
}

.nav-menu a {
    border-radius: 999px;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: all .2s ease !important;
    color: rgba(255,255,255,.78) !important;
    border: 1px solid transparent;
    text-transform: none !important;
}
.nav-menu a:hover {
    background: rgba(255,255,255,.08);
    color: #fff !important;
    border-bottom: 1px solid transparent !important;
    transform: translateY(-1px);
}
.nav-menu a i { color: var(--brand) !important; }

@media (max-width: 768px) {
    .nav-menu {
        background: linear-gradient(180deg, #14151a 0%, #1c1d27 100%) !important;
        padding: 16px !important;
        gap: 4px !important;
        box-shadow: 0 12px 32px rgba(0,0,0,.25);
    }
    .nav-menu a { padding: 12px 16px !important; }
}

/* ─── HERO SECTIONS (bring back to life — many were display:none) ──────── */
.hero, section.hero {
    display: block !important;
    padding: 100px 24px 40px;
    text-align: center;
    background: linear-gradient(180deg, transparent 0%, rgba(255,46,108,.04) 100%);
}
.hero h1 {
    font-size: clamp(28px, 4vw, 44px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--text) 0%, var(--brand) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px !important;
    margin-top: 0 !important;
}
.hero p {
    font-size: 16px !important;
    color: var(--text-muted) !important;
    max-width: 640px;
    margin: 0 auto !important;
}

/* Section headings (.testimonial-heading) — reskin into modern banners */
.testimonial-heading {
    margin-top: 48px !important;
    margin-bottom: 24px !important;
}
.testimonial-heading span {
    display: inline-block;
    font-size: 14px !important;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    padding: 8px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    position: relative;
}
.testimonial-heading span::before,
.testimonial-heading span::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.testimonial-heading span::before { right: 100%; margin-right: 16px; }
.testimonial-heading span::after  { left: 100%;  margin-left: 16px; }
@media (max-width: 600px) {
    .testimonial-heading span::before,
    .testimonial-heading span::after { display: none; }
}

/* Big section title used in profile/index.html */
.testimonial-heading-big {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--text);
}

/* ─── SEARCH BAR (zoeken.html, index.html) ────────────────────────────── */
#searchInput, #searchInput2 {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 14px !important;
    padding: 14px 20px 14px 46px !important;
    font-size: 15px !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-sm);
    transition: border-color .2s, box-shadow .2s, transform .15s !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--border-strong) !important;  /* override inline */
}
#searchInput:focus, #searchInput2:focus {
    outline: none !important;
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 4px rgba(255,46,108,.14), var(--shadow-md) !important;
}
.zoekBtn, button.zoekBtn {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 0 20px !important;
    height: 44px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: filter .15s, transform .1s, box-shadow .2s !important;
    box-shadow: 0 4px 14px rgba(255,46,108,.32);
    top: 3px !important;
}
.zoekBtn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,46,108,.42); }
.zoekBtn:active { transform: translateY(0); }

/* SVG search icon – tint to brand, larger */
.relative svg.w-4.h-4 { width: 18px; height: 18px; color: var(--text-muted); margin-left: 6px; }

/* ─── CATEGORY BUTTONS (.btnprofile-3, .btnprofile-8, .btnprofile-9) ── */
.btn.btnprofile-3, .btn.btnprofile-8, .btn.btnprofile-9 {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 999px !important;
    padding: 10px 20px !important;
    margin: 4px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.02em;
    width: auto !important;
    height: auto !important;
    box-shadow: var(--shadow-sm);
    transition: all .2s ease !important;
    text-transform: uppercase;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1.2;
}
.btn.btnprofile-3:hover, .btn.btnprofile-8:hover, .btn.btnprofile-9:hover {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(255,46,108,.28);
}
.btn.btnprofile-3:hover i, .btn.btnprofile-8:hover i, .btn.btnprofile-9:hover i { color: #fff !important; }
.btn.btnprofile-3 i, .btn.btnprofile-8 i, .btn.btnprofile-9 i {
    color: var(--brand) !important;
    transition: color .2s ease;
    margin-right: 6px;
}
.btn.btnprofile-3-selected, .btn.btnprofile-8-selected, .btn.btnprofile-9-selected {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(255,46,108,.28);
    border-radius: 999px !important;
}
.btn.btnprofile-3-selected i, .btn.btnprofile-9-selected i { color: #fff !important; }

/* Profile-page action buttons (.btnprofile-1 / -1-selected used for Profile/Foto/Contact/Reserveer) */
.btn.btnprofile-1 {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 12px !important;
    height: 48px !important;
    margin: 4px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    box-shadow: var(--shadow-sm);
    transition: all .2s ease !important;
    width: 150px;
}
.btn.btnprofile-1:hover {
    border-color: var(--brand) !important;
    color: var(--brand-strong) !important;
    transform: translateY(-1px);
    background: var(--brand-soft) !important;
    box-shadow: var(--shadow-md);
}
.btn.btnprofile-1-selected {
    background: linear-gradient(135deg, #14151a 0%, #2a2c38 100%) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    height: 48px !important;
    margin: 4px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    box-shadow: var(--shadow-md);
}
[data-theme="dark"] .btn.btnprofile-1-selected {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%) !important;
}

/* ─── PROFILE CARDS in search results (.profilecard) ──────────────────── */
.profilecard {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
    position: relative;
}
.profilecard:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand);
}
/* Image area inside profile cards: a smooth zoom */
.profilecard .image-wrapper,
.profilecard .bg-cover {
    transition: transform .4s ease;
    border-radius: 16px 16px 0 0;
}
.profilecard:hover .image-wrapper,
.profilecard:hover .bg-cover { transform: scale(1.04); }

/* Inner padding container for description */
.profilecard .p-4 {
    padding: 16px !important;
    color: var(--text);
}

/* ─── Equal-height profile cards across the grid ───
   slideshows.js injects each card as <div class="w-full sm:w-1/2 md:w-1/3 flex flex-col p-3">
   > <div class="profilecard flex-1 flex flex-col"> > <bg-cover image> + <p-4 content>.
   To make all cards in the same row stretch to the tallest card's height, we
   need stretch alignment at every flex level. */
.v2-section > .v2-results-row,
.v2-search-layout .v2-results-row {
    align-items: stretch !important;
}
.v2-section > .v2-results-row > div,
.v2-search-layout .v2-results-row > div {
    display: flex !important;
    flex-direction: column;
}
.v2-section > .v2-results-row > div > .profilecard,
.v2-search-layout .v2-results-row > div > .profilecard,
.v2-section .profilecard,
.v2-search-layout .profilecard {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}
.v2-section .profilecard .p-4,
.v2-search-layout .profilecard .p-4 {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column;
}

/* ─── Consistent chip layout + custom row order ───
   slideshows.js renders the chip block as inline spans with `line-height: 3`.
   Convert to a real flex-wrap row, then use :has() + flex `order` to enforce
   the user's preferred row order:
     Row 1 → Gender + Age
     Row 2 → Type (Privé ontvangst / Escort / Massage / Virtual)
     Row 3 → Location
   Line breaks between rows are forced via two pseudo-elements with full-width
   flex-basis. */
.profilecard [style*="line-height: 3"],
.profilecard [style*="line-height:3"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    line-height: 1.4 !important;
    align-content: flex-start;
    align-items: center;
    min-height: 0 !important;   /* hug content — 2 rows naturally */
    margin-top: 12px !important;
    margin-bottom: 12px !important;

    /* Trick: shrink the parent font-size to 0 so whitespace/`&nbsp;` text-
       nodes between chips don't take up flex space. Each chip restores its
       own font-size. */
    font-size: 0 !important;
}
/* Chips stay single-line, always intact (so city names like
   "Heist-Op-Den-Berg" never split). Restore readable font-size. */
.profilecard [style*="line-height: 3"] > span,
.profilecard [style*="line-height:3"] > span {
    margin: 0 !important;
    white-space: nowrap;
    flex: 0 0 auto;
    font-size: 11px !important;
}
.profilecard [style*="line-height: 3"] br,
.profilecard [style*="line-height:3"] br {
    display: none;
}

/* ─── Chip ORDER via :has() — modern browsers (Chrome 105+, FF 121+, Safari 15.4+).
   2-row layout to match the special-style card:
     Row 1 → Gender + Age + Location
     Row 2 → Type (Privé ontvangst / Escort / Massage / Virtual)
   Falls back to inline order on old browsers, which is acceptable. */

/* Row 1: gender (1) + age (2) + location (3) */
.profilecard [style*="line-height:3"] > span:has(> i.fa-venus),
.profilecard [style*="line-height: 3"] > span:has(> i.fa-venus),
.profilecard [style*="line-height:3"] > span:has(> i.fa-mars),
.profilecard [style*="line-height: 3"] > span:has(> i.fa-mars),
.profilecard [style*="line-height:3"] > span:has(> i.fa-transgender),
.profilecard [style*="line-height: 3"] > span:has(> i.fa-transgender) {
    order: 1;
}
.profilecard [style*="line-height:3"] > span:has(> i.fa-user),
.profilecard [style*="line-height: 3"] > span:has(> i.fa-user) {
    order: 2;
}
.profilecard [style*="line-height:3"] > span:has(> i.fa-location-dot),
.profilecard [style*="line-height: 3"] > span:has(> i.fa-location-dot) {
    order: 3;
}
/* Row 2: type (Privé ontvangst, Escort, Massage, BDSM, Virtual) */
.profilecard [style*="line-height:3"] > span:has(> i.fa-house),
.profilecard [style*="line-height: 3"] > span:has(> i.fa-house),
.profilecard [style*="line-height:3"] > span:has(> i.fa-car),
.profilecard [style*="line-height: 3"] > span:has(> i.fa-car),
.profilecard [style*="line-height:3"] > span:has(> i.fa-bed),
.profilecard [style*="line-height: 3"] > span:has(> i.fa-bed),
.profilecard [style*="line-height:3"] > span:has(> i.fa-mask),
.profilecard [style*="line-height: 3"] > span:has(> i.fa-mask),
.profilecard [style*="line-height:3"] > span:has(> i.fa-computer),
.profilecard [style*="line-height: 3"] > span:has(> i.fa-computer) {
    order: 6;
}
/* Single forced line break between the two row groups */
.profilecard [style*="line-height:3"]::before,
.profilecard [style*="line-height: 3"]::before {
    content: '';
    flex-basis: 100%;
    height: 0;
    order: 5;
}
/* No second pseudo break needed for 2-row layout */
.profilecard [style*="line-height:3"]::after,
.profilecard [style*="line-height: 3"]::after {
    content: none;
}

/* ─── Description truncates at 3 lines + reserves min-height for empty/short
   descriptions so all cards have uniform height regardless of content. ─── */
.v2-section .profilecard .mb-4,
.v2-search-layout .profilecard .mb-4,
.profilecard .text-grey-darker.flex-1 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 4.6em;
    min-height: 4.6em;          /* ← uniform height even when empty */
    margin-bottom: 0 !important;
    margin-top: auto;            /* push description to bottom of card */
    color: var(--text-muted);
    font-size: 12px !important;
    line-height: 1.5;
}

/* The pill spans inside profile cards — soften them */
.profilecard span[style*="background-color: black"],
.profilecard span[style*="background-color:black"],
.profilecard span[style*="background-color: rgb(0, 0, 0)"] {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border);
    margin: 2px 2px 2px 0;
}
[data-theme="dark"] .profilecard span[style*="background-color: black"],
[data-theme="dark"] .profilecard span[style*="background-color:black"] {
    background: var(--surface-3) !important;
    color: var(--text) !important;
}

/* ─── FORMS (login, register, contact, reserveren) ───────────────────── */
input[type="text"]:not(.profilecard input):not(#searchInput):not(#searchInput2),
input[type="email"], input[type="password"], input[type="number"], input[type="tel"],
input[type="date"], input[type="search"], select, textarea {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    color: var(--text) !important;
    font-family: var(--font-sans) !important;
    transition: border-color .2s, box-shadow .2s !important;
    width: 100%;
    box-sizing: border-box;
}
input[type="text"]:focus:not(#searchInput):not(#searchInput2),
input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="tel"]:focus,
input[type="date"]:focus, input[type="search"]:focus,
select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(255,46,108,.14) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-soft) !important; }

/* Make form labels readable */
label.input-label, .form-label {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-weight: 500;
}

/* ─── Site footer ────────────────────────────────────────────────────── */
#sitefooter {
    border-top: 1px solid var(--border) !important;
    background: var(--surface);
    padding: 24px 16px !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
    width: 100% !important;
    box-sizing: border-box;
}
#sitefooter::before {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    margin: 0 auto 16px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    border-radius: 2px;
}

/* ─── Pagination buttons (zoeken.html) ────────────────────────────────── */
.paginationBtn {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    margin: 0 4px !important;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
}
.paginationBtn:hover {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand) !important;
    transform: translateY(-1px);
}
.paginationBtn-selected {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong)) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    margin: 0 4px !important;
    box-shadow: 0 4px 12px rgba(255,46,108,.3);
}

/* ─── Profile detail page (profile/index.html) ───────────────────────── */
.kader {
    background: var(--surface);
    border-radius: 18px;
    margin: 110px auto 40px !important;
    padding: 32px;
    max-width: 1100px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}
@media (max-width: 768px) {
    .kader { padding: 20px; margin: 90px 12px 20px !important; border-radius: 14px; }
}

#profilePage > section.basic-grid1 {
    background: transparent !important;
}

/* Stats tables on profile pages */
.tablestats, .mobielbreed {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    font-size: 14px;
}
.tablestats th, .mobielbreed th {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    text-align: left;
    padding: 6px 12px 6px 0 !important;
    font-size: 13px;
}
.tablestats td, .mobielbreed td {
    padding: 6px 0 !important;
}
.tablestats span, .mobielbreed span { color: var(--text) !important; }

/* Description box */
#prijzenbox, #description {
    color: var(--text);
}
#prijzenbox table { width: 100%; }
#price-containerOntvangst, #price-containerEscort {
    background: var(--surface-2);
    border-radius: 10px;
    padding: 10px;
    margin-top: 8px;
}

/* Reviews box */
#reviewsbox {
}

/* Online indicator */
#badge-containeronline {
    background: var(--success);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    margin-left: 8px;
    box-shadow: 0 0 0 0 rgba(22,163,74,.6);
    animation: dsPulse 2s infinite;
}
@keyframes dsPulse {
    0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.6); }
    70%  { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* ─── Loading states (.loading, loading.gif, etc.) ────────────────────── */
img[src*="loading"] { filter: var(--text-muted-filter, none); }

/* ─── Tables in admin pages (light-mode polish, dark already handled) ─── */
table.transparent-box,
.transparent-box {
    background: var(--surface) !important;
    border-radius: 14px !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm);
    padding: 16px !important;
    margin-bottom: 12px !important;
}

/* ─── 404 page polish ─────────────────────────────────────────────────── */
body[data-page="404"] { text-align: center; }

/* ─── Buttons inside login/register/contact forms ────────────────────── */
.contact-form button[type="submit"],
form button[type="submit"],
form input[type="submit"] {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255,46,108,.28);
    transition: filter .15s, transform .1s !important;
}
.contact-form button[type="submit"]:hover,
form button[type="submit"]:hover,
form input[type="submit"]:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* ─── Mobile responsiveness tweaks ─────────────────────────────────────── */
@media (max-width: 640px) {
    .nav-container { padding: 12px 16px !important; }
    .hero { padding: 80px 16px 24px; }
    .hero h1 { font-size: 26px !important; }
    .testimonial-heading span::before,
    .testimonial-heading span::after { display: none; }
    .btn.btnprofile-3, .btn.btnprofile-8, .btn.btnprofile-9 {
        padding: 8px 14px !important; font-size: 12px !important; margin: 3px !important;
    }
}

/* ─── Subtle entrance animation for new content ───────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .profilecard, .kader, .testimonial-heading {
        animation: dsFadeUp .4s ease-out;
    }
    @keyframes dsFadeUp {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ─── Honor reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
}

/* ============================================================================
   ▒▒▒  V2 NEW COMPONENTS  ▒▒▒
   Components used by the rewritten HTML pages (homepage, search, profile,
   login, register, info pages). Standalone — won't conflict with old classes.
   ============================================================================ */

/* ─── Kill legacy ul/li styling that adds dotted top borders & negative margins.
   base.css (line 638-645) sets `ul li { margin-top: -20px; border-top: 1px dotted; }`
   on every list item — leaves visible dotted lines between rows. Override
   everywhere inside .v2-page so v2 lists breathe properly. */
.v2-page ul li,
.v2-page ol li {
    border-top: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
}
/* v2 component lists get back their gap-based spacing */
.v2-page .v2-features li,
.v2-page .v2-contact-info-card li,
.v2-page .v2-tier__list li,
.v2-page .v2-footer__col {
    border-top: none !important;
    margin: 0 !important;
}
/* Sensible padding inside list items so they aren't crammed */
.v2-page .v2-contact-info-card li { padding: 6px 0 !important; }
.v2-page .v2-features li         { padding: 4px 0 !important; }
.v2-page .v2-tier__list li       { padding: 0 !important; }

/* ─── V2 page baseline ────────────────────────────────────────────────── */
/* Old per-page CSS (zoeken.css, index.css, etc.) sets `body { max-width: 1000px;
   margin: 0 auto; }` which squeezes the whole page into a narrow centered column.
   Override that for any page using v2 layout. */
html:has(body.v2-page),
body.v2-page {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.v2-page {
    background:
        radial-gradient(circle at 0% 0%,   rgba(255,46,108,.06) 0%, transparent 40%),
        radial-gradient(circle at 100% 60%, rgba(30,144,255,.05) 0%, transparent 45%),
        var(--bg) !important;
    color: var(--text);
    font-family: var(--font-sans) !important;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;        /* prevent horizontal scroll from blob backgrounds */
    box-sizing: border-box;
}
.v2-page *, .v2-page *::before, .v2-page *::after { box-sizing: border-box; }
[data-theme="dark"] .v2-page {
    background:
        radial-gradient(circle at 0% 0%,   rgba(255,46,108,.10) 0%, transparent 40%),
        radial-gradient(circle at 100% 60%, rgba(30,144,255,.08) 0%, transparent 45%),
        var(--bg) !important;
}

/* ─── V2 navbar (modern glass + pill links) ──────────────────────────── */
.v2-navbar {
    background: rgba(15,17,30,.72) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    /* Pinned to viewport — legacy per-page CSS files (zoeken.css, etc.)
       set position:fixed; ensure the same on pages that don't import them
       (e.g. /account, the dashboard). */
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    z-index: 1000;
}
/* Force a flex layout on the navbar container — legacy navbar.css files do this
   on every other page, but /account doesn't import them. */
.v2-nav-container {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 14px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    box-sizing: border-box;
}
.v2-navbar .nav-menu {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .v2-navbar .nav-toggle-label {
        display: flex !important;
        flex-direction: column;
        cursor: pointer;
        gap: 4px;
    }
    .v2-navbar .nav-toggle-label span {
  background-color: white;
  height: 2px;
  width: 25px;
  margin: 1px 0;
  transition: all 0.3s;
    }
    .v2-navbar .nav-toggle { display: none; }
    .v2-navbar .nav-toggle:checked ~ .nav-menu { display: flex; }
    .v2-navbar .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: linear-gradient(180deg, #14151a 0%, #1c1d27 100%);
        padding: 16px;
        gap: 4px;
        box-shadow: 0 12px 32px rgba(0,0,0,.25);
    }
}
.v2-logo {
    background: linear-gradient(135deg, #ff2e6c 0%, #ffaa3d 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800 !important;
    font-size: 22px !important;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

/* ─── V2 HERO ────────────────────────────────────────────────────────── */
.v2-hero {
    position: relative;
    padding: 110px 24px 60px;
    overflow: hidden;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 640px) { .v2-hero { padding: 90px 16px 40px; } }
.v2-hero__bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.v2-hero__blob {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35;
}
.v2-hero__blob--pink {
    width: 480px; height: 480px;
    background: radial-gradient(circle, #ff2e6c 0%, transparent 70%);
    top: -100px; left: -100px;
}
.v2-hero__blob--blue {
    width: 520px; height: 520px;
    background: radial-gradient(circle, #1e90ff 0%, transparent 70%);
    bottom: -120px; right: -120px;
}
.v2-hero__inner {
    position: relative; z-index: 1;
    max-width: 880px; margin: 0 auto;
}
.v2-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    background: var(--brand-soft); color: var(--brand-strong);
    font-size: 12px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; margin-bottom: 20px;
}
[data-theme="dark"] .v2-eyebrow { background: rgba(255,46,108,.15); color: #ffb3c8; }
.v2-hero__title {
    font-size: clamp(34px, 5.5vw, 64px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em;
    line-height: 1.05 !important;
    margin: 0 0 20px !important;
    color: var(--text);
}
.v2-hero__accent {
    background: linear-gradient(135deg, #ff2e6c 0%, #ff8b3d 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
    font-weight: 800;
}
.v2-hero__sub {
    font-size: clamp(15px, 2vw, 18px) !important;
    color: var(--text-muted) !important;
    margin: 0 auto 36px !important;
    max-width: 620px;
    line-height: 1.55;
}

/* ─── V2 search bar (homepage hero) ──────────────────────────────────── */
.v2-search {
    position: relative;
    max-width: 640px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 6px 6px 6px 22px;
    box-shadow: 0 12px 40px rgba(15,17,30,.10), 0 2px 6px rgba(15,17,30,.06);
    transition: box-shadow .25s, border-color .25s, transform .15s;
}
.v2-search:focus-within {
    border-color: var(--brand);
    box-shadow: 0 16px 48px rgba(255,46,108,.18), 0 0 0 4px rgba(255,46,108,.10);
    transform: translateY(-1px);
}
.v2-search__icon { color: var(--text-soft); font-size: 18px; flex-shrink: 0; }
.v2-search__input,
input#searchInput.v2-search__input,
input#searchInput2.v2-search__input {
    /* When the input is part of the .v2-search pill wrapper, the wrapper
       carries the visible border — drop the ID-selector border (set by
       #searchInput further up) so it doesn't render a second inner box. */
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 14px 14px !important;
    font-size: 16px !important;
    color: var(--text) !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-family: var(--font-sans) !important;
}
input#searchInput.v2-search__input:focus,
input#searchInput2.v2-search__input:focus {
    /* Focus state lives on the .v2-search wrapper (:focus-within), not on
       the input itself — kill the ID-rule focus ring/shadow. */
    box-shadow: none !important;
    border: none !important;
}
.v2-search__input::placeholder { color: var(--text-soft); }
.v2-search__btn {
    background: linear-gradient(135deg, #ff2e6c 0%, #ff5b7e 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 6px 18px rgba(255,46,108,.32);
    transition: filter .15s, transform .1s;
    flex-shrink: 0;
}
.v2-search__btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.v2-search__btn span { display: inline; }
@media (max-width: 520px) {
    .v2-search { padding: 5px 5px 5px 18px; }
    .v2-search__btn { padding: 10px 14px; }
    .v2-search__btn span { display: none; }
    .v2-search__input { padding: 12px 8px !important; font-size: 15px !important; }
}

/* ─── V2 quick chips (under hero search) ─────────────────────────────── */
.v2-chips {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin: 22px auto 28px; max-width: 720px;
}
.v2-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    font-size: 13px; font-weight: 500;
    transition: all .2s;
    box-shadow: var(--shadow-sm);
}
.v2-chip:hover {
    border-color: var(--brand);
    color: var(--brand-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(255,46,108,.15);
}
.v2-chip i { color: var(--brand); }

/* ─── V2 trust strip ─────────────────────────────────────────────────── */
.v2-trust {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 24px;
    margin-top: 28px; color: var(--text-muted); font-size: 13px;
}
.v2-trust__item { display: inline-flex; align-items: center; gap: 8px; }
.v2-trust__item i { color: var(--success); font-size: 16px; }

/* ─── V2 sections ────────────────────────────────────────────────────── */
.v2-section {
    max-width: 1440px;
    width: 100%;
    margin: 60px auto 0;
    padding: 0 24px;
    box-sizing: border-box;
}
@media (max-width: 640px) { .v2-section { padding: 0 16px; margin-top: 40px; } }
.v2-section__title {
    font-size: clamp(22px, 3vw, 32px) !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    color: var(--text);
    letter-spacing: -0.01em;
}
.v2-section__title--inline { display: inline; margin-left: 8px !important; }
.v2-section__sub {
    color: var(--text-muted) !important;
    font-size: 15px !important;
    margin: 0 0 24px !important;
}
.v2-section__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
}
.v2-section__head .v2-section__sub { margin: 0 !important; }
.v2-link-arrow {
    color: var(--brand-strong); font-weight: 600; text-decoration: none; font-size: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    transition: gap .2s;
}
.v2-link-arrow:hover { gap: 10px; }

/* ─── V2 badges (Premium / New / Live) ──────────────────────────────── */
.v2-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: middle;
}
.v2-badge--gold {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #422006;
    box-shadow: 0 4px 12px rgba(245,158,11,.3);
}
.v2-badge--new {
    background: var(--brand-soft); color: var(--brand-strong);
}
[data-theme="dark"] .v2-badge--new { background: rgba(255,46,108,.18); color: #ffb3c8; }
.v2-badge--online {
    background: rgba(22,163,74,.15); color: var(--success);
}
.v2-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.v2-dot--live {
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(22,163,74,.6);
    animation: v2Pulse 2s infinite;
}
@keyframes v2Pulse {
    0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.6); }
    70%  { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* ─── V2 category cards (homepage) — compact 2-column layout ───────── */
.v2-cat-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, 1fr);
}
.v2-cat {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    min-height: 0;
}
.v2-cat::before {
    content: ''; position: absolute; right: -30px; top: -30px;
    width: 90px; height: 90px; border-radius: 50%;
    background: linear-gradient(135deg, var(--cat-from), var(--cat-to));
    opacity: .12; transition: opacity .3s, transform .3s;
}
.v2-cat:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.v2-cat:hover::before { opacity: .22; transform: scale(1.4); }
.v2-cat__icon {
    width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(135deg, var(--cat-from), var(--cat-to));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--cat-from) 35%, transparent);
    margin-bottom: 0;
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    position: relative; z-index: 1;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .v2-cat__icon { box-shadow: 0 6px 14px rgba(0,0,0,.18); }
}
.v2-cat__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative; z-index: 1;
}
.v2-cat__label {
    font-size: 15px; font-weight: 700; margin-bottom: 0;
    color: var(--text); position: relative; z-index: 1;
    line-height: 1.2;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
}
.v2-cat__sub {
    font-size: 12px; color: var(--text-muted);
    position: relative; z-index: 1;
    line-height: 1.3;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
}

/* ─── V2 results rows on the HOMEPAGE (responsive cols × max 2 rows) ─── */
/* Each homepage band (Premium / Nieuw / Live) shows exactly two rows of cards,
   with column count matching the viewport. Excess cards are hidden via
   :nth-child rules so the rows always look balanced. */
.v2-section > .v2-results-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: -10px !important;
    width: calc(100% + 20px) !important;
    box-sizing: border-box;
}
.v2-section > .v2-results-row > div {
    width: 100% !important;
    padding: 10px !important;
    flex: 0 0 auto !important;
    min-width: 0;
    max-width: 100% !important;
    box-sizing: border-box;
}
.v2-section > .v2-results-row .profilecard { width: 100% !important; height: 100%; }

/* Width per card + max-cards-shown by viewport */
/* < 520px: 1 col × 2 rows = 2 cards */
.v2-section > .v2-results-row > div:nth-child(n+3) { display: none !important; }
/* 520–879px: 2 cols × 2 rows = 4 cards */
@media (min-width: 520px) {
    .v2-section > .v2-results-row > div { width: 50% !important; }
    .v2-section > .v2-results-row > div:nth-child(n+3) { display: block !important; }
    .v2-section > .v2-results-row > div:nth-child(n+5) { display: none !important; }
}
/* 880–1199px: 3 cols × 2 rows = 6 cards */
@media (min-width: 880px) {
    .v2-section > .v2-results-row > div { width: 33.333% !important; }
    .v2-section > .v2-results-row > div:nth-child(n+5) { display: block !important; }
    .v2-section > .v2-results-row > div:nth-child(n+7) { display: none !important; }
}
/* ≥1200px: 4 cols × 2 rows = 8 cards */
@media (min-width: 1200px) {
    .v2-section > .v2-results-row > div { width: 25% !important; }
    .v2-section > .v2-results-row > div:nth-child(n+7) { display: block !important; }
    .v2-section > .v2-results-row > div:nth-child(n+9) { display: none !important; }
}

/* ─── Uitgelichte advertenties (#verifiedGoldProfile) — responsive override.
   slideshow.js fills 4 cards into this row. The generic 2/4/6/8 cascade
   above would show all of them at 880px+; we want a tighter rhythm:
     <520px : 2 cards (1 col)
     520-879: 4 cards (2 cols × 2 rows)
     880-1199: 3 cards (3 cols × 1 row)
     ≥1200  : 4 cards (4 cols × 1 row)
   Higher specificity (#id) beats the generic .v2-section class chain. */
#verifiedGoldProfile > div:nth-child(n+3) { display: none !important; }
@media (min-width: 520px) {
    #verifiedGoldProfile > div { width: 50% !important; }
    #verifiedGoldProfile > div:nth-child(n+3) { display: block !important; }
    #verifiedGoldProfile > div:nth-child(n+5) { display: none !important; }
}
@media (min-width: 880px) {
    #verifiedGoldProfile > div { width: 33.333% !important; }
    #verifiedGoldProfile > div:nth-child(n+4) { display: none !important; }
}
@media (min-width: 1200px) {
    #verifiedGoldProfile > div { width: 25% !important; }
    #verifiedGoldProfile > div:nth-child(n+4) { display: block !important; }
    #verifiedGoldProfile > div:nth-child(n+5) { display: none !important; }
}

/* ─── Premium "special-style" cards (slideshow.js + slideshows.js inject these
   for paid/featured ads with hardcoded white background — re-skin to a
   subtle premium gold-tinted style that matches the rest of the site) ─── */
.special-style .profilecard,
.special-style > .bg-white,
.special-style [style*="background-color:#fff"],
.special-style [style*="background-color: #fff"],
.special-style [style*="background-color:white"],
.special-style [style*="background-color: white"] {
    background:
        linear-gradient(180deg, rgba(251,191,36,.04), rgba(245,158,11,.02) 60%, var(--surface)) !important;
    color: var(--text) !important;
    border: 1px solid rgba(251,191,36,.45) !important;
    box-shadow:
        0 0 0 1px rgba(251,191,36,.12),
        0 12px 30px rgba(245,158,11,.10),
        0 4px 10px rgba(15,17,30,.06) !important;
    border-radius: 16px !important;
    position: relative;
}
[data-theme="dark"] .special-style .profilecard,
[data-theme="dark"] .special-style > .bg-white,
[data-theme="dark"] .special-style [style*="background-color:#fff"],
[data-theme="dark"] .special-style [style*="background-color: #fff"],
[data-theme="dark"] .special-style [style*="background-color:white"],
[data-theme="dark"] .special-style [style*="background-color: white"] {
    background:
        linear-gradient(180deg, rgba(251,191,36,.10), rgba(245,158,11,.04) 60%, var(--surface)) !important;
    border-color: rgba(251,191,36,.35) !important;
    box-shadow:
        0 0 0 1px rgba(251,191,36,.15),
        0 14px 32px rgba(0,0,0,.5) !important;
}

/* Tiny gold "Premium" corner ribbon removed — gold member is shown via the
   in-card pill badge (.fa-crown wrapper) to avoid duplication. */
.special-style { position: relative; }
/* Lift on hover slightly more than regular cards */
.special-style:hover .profilecard,
.special-style:hover > .bg-white {
    transform: translateY(-5px) !important;
    box-shadow:
        0 0 0 1px rgba(251,191,36,.18),
        0 20px 44px rgba(245,158,11,.18),
        0 8px 16px rgba(15,17,30,.08) !important;
}

/* Override hardcoded black text inside special-style premium cards */
.special-style [style*="color: black"],
.special-style [style*="color:black"] {
    color: var(--text) !important;
}
[data-theme="dark"] .special-style [style*="color: black"],
[data-theme="dark"] .special-style [style*="color:black"] {
    color: var(--text) !important;
}

/* ─── V2 footer ──────────────────────────────────────────────────────── */
.v2-footer {
    margin-top: 100px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    color: var(--text);
    width: 100%;
    box-sizing: border-box;
}
[data-theme="dark"] .v2-footer { background: var(--bg-elev); }
.v2-footer__inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 56px 24px 32px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    box-sizing: border-box;
}
@media (max-width: 760px) { .v2-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; padding: 40px 20px 24px; } }
@media (max-width: 460px) { .v2-footer__inner { grid-template-columns: 1fr; } }
.v2-footer__col h4 {
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted);
    margin: 0 0 14px;
}
.v2-footer__col a {
    display: block; padding: 4px 0;
    color: var(--text); text-decoration: none; font-size: 14px;
    transition: color .15s;
}
.v2-footer__col a:hover { color: var(--brand-strong); }
.v2-footer__logo {
    background: linear-gradient(135deg, #ff2e6c, #ffaa3d);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800; font-size: 24px; letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.v2-footer__tag { color: var(--text-muted); font-size: 14px; line-height: 1.5; max-width: 280px; margin: 0; }
.v2-footer__bar {
    border-top: 1px solid var(--border);
    padding: 20px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.v2-footer__bar::before {
    content: '';
    display: block;
    width: 60px; height: 3px;
    margin: 0 auto 16px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    border-radius: 2px;
}

/* ─── V2 SEARCH PAGE LAYOUT ──────────────────────────────────────────── */
.v2-search-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 32px 24px 24px;
    width: 100%;
    box-sizing: border-box;
}
.v2-search-header__inner { max-width: 1440px; margin: 0 auto; width: 100%; }
@media (max-width: 640px) { .v2-search-header { padding: 24px 16px 18px; } }
.v2-search-header__top {
    text-align: center;
    margin: 80px 0 24px;
}
.v2-search-header__title {
    font-size: clamp(24px, 3vw, 36px) !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
    color: var(--text);
}
.v2-search-header__sub { color: var(--text-muted) !important; font-size: 14px !important; margin: 0 !important; }

/* Quick chips on search header */
.v2-quick-cats {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin-top: 18px;
}
.v2-quick-cats__divider {
    width: 1px; height: 22px; background: var(--border-strong);
    align-self: center; margin: 0 8px;
}
@media (max-width: 600px) { .v2-quick-cats__divider { display: none; } }
.v2-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    background: var(--surface-2);
    color: var(--text) !important;
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none !important;
    font-size: 13px; font-weight: 500;
    transition: all .2s;
    cursor: pointer;
}
.v2-pill:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-strong) !important;
    transform: translateY(-1px);
}
.v2-pill i { color: var(--brand); }
.v2-pill--gender { font-weight: 600; }

/* Layout */
.v2-search-layout {
    max-width: 1440px;
    width: 100%;
    margin: 24px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);   /* minmax(0,1fr) lets the col shrink past content */
    gap: 28px;
    align-items: flex-start;
    box-sizing: border-box;
}
@media (max-width: 1024px) {
    .v2-search-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; padding: 0 16px; }
}
@media (max-width: 880px) {
    .v2-search-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* Make sure the search-page results row + cards are responsive again
   (slideshows.js injects children with Tailwind w-full sm:w-1/2 md:w-1/3 classes
   — these are viewport-based, so we override to be CONTAINER-based for the
   sidebar layout where the column is much narrower than the viewport) */
.v2-search-layout .v2-results-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: -8px !important;
    width: calc(100% + 16px) !important;
}
.v2-search-layout .v2-results-row > div {
    width: 100% !important;
    padding: 8px !important;
    flex: 0 0 auto !important;
    min-width: 0;
    max-width: 100% !important;
}
@media (min-width: 480px) {
    .v2-search-layout .v2-results-row > div { width: 50% !important; }
}
/* Cap zoeken results at max 3 cards per row regardless of viewport width. */
@media (min-width: 1100px) {
    .v2-search-layout .v2-results-row > div { width: 33.333% !important; }
}
.v2-search-layout .v2-results-row .profilecard { width: 100% !important; height: 100%; }

/* Filter sidebar — slideshows.js sometimes flips #filters to display:none;
   force it visible so it doesn't break the grid layout. Also force the
   inner #allefilters panel to stay open on desktop — clicking the dropdowns
   (selects) can otherwise cause slideshows.js to collapse it. */
aside.v2-filters,
aside.v2-filters[style] {
    display: block !important;
}
@media (min-width: 880px) {
    .v2-filters #allefilters,
    .v2-filters .v2-filters__body {
        display: block !important;
    }
}

/* slideshows.js writes "Meer/Minder filteropties" into #filteropties and adds
   inline styles to it (background, border, padding, display:inline-flex). The
   inline display wins over our HTML style="display:none" attribute, so force
   the decoy span hidden via CSS !important. */
#filteropties,
#filteropties[style] {
    display: none !important;
}
.v2-filters {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 85px;
}
@media (max-width: 880px) {
    .v2-filters { position: static; padding: 14px; }
}
.v2-filters__toggle {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    background: transparent; border: none;
    color: var(--text); font-size: 16px; font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    font-family: var(--font-sans);
}
.v2-filters__toggle .v2-filters__chev { margin-left: auto; transition: transform .2s; font-size: 12px; color: var(--text-muted); }
.v2-filters__toggle--open .v2-filters__chev { transform: rotate(180deg); }
/* Desktop: hide the chevron (toggle is inert) */
@media (min-width: 880px) {
    .v2-filters__toggle .v2-filters__chev { display: none; }
    .v2-filters__toggle { cursor: default; }
}

/* Block-width helper for the reset button so it spans the sidebar */
.v2-btn.v2-btn--block { width: 100%; }
.v2-filters__count {
    background: var(--brand); color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
    min-width: 22px; text-align: center;
    display: inline-flex; align-items: center; justify-content: center;
}
.v2-filters__body { margin-top: 16px; }
.v2-filters__group { margin-bottom: 24px; }
.v2-filters__group h4 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 12px;
}
.v2-check {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    transition: background .15s;
    user-select: none;
}
.v2-check:hover { background: var(--surface-2); }
.v2-check input[type="checkbox"] {
    appearance: none;
    width: 18px; height: 18px;
    border: 2px solid var(--border-strong);
    border-radius: 5px;
    background: var(--surface);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
    transition: all .15s;
}
.v2-check input[type="checkbox"]:checked {
    background: var(--brand);
    border-color: var(--brand);
}
.v2-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px; top: 0px;
    width: 6px; height: 11px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.v2-check span { display: inline-flex; align-items: center; gap: 8px; }
.v2-check span i { color: var(--text-muted); width: 14px; }
.v2-select {
    width: 100%;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-family: var(--font-sans) !important;
    cursor: pointer;
}
.v2-select:focus {
    outline: none !important;
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(255,46,108,.14) !important;
}
.v2-filters__actions {
    display: flex; gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.v2-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px; font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: all .15s;
    font-family: var(--font-sans);
}
.v2-btn--primary {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(255,46,108,.25);
}
.v2-btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.v2-btn--ghost {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
}
.v2-btn--ghost:hover { background: var(--surface-2); border-color: var(--brand); color: var(--brand-strong); }
.v2-btn--danger {
    background: linear-gradient(135deg, var(--danger), #ef4444);
    color: #fff;
    box-shadow: 0 4px 12px rgba(220,38,38,.25);
}
.v2-btn--danger:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Results column */
.v2-results { min-width: 0; }
.v2-results__bar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    flex-wrap: wrap; gap: 12px;
}
.v2-results__count { font-weight: 600; color: var(--text); font-size: 14px; }
.v2-results__view { display: inline-flex; align-items: center; gap: 6px; }
.v2-view-btn {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.v2-view-btn:hover { color: var(--text); border-color: var(--border-strong); }
.v2-view-btn--active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* ─── LIST VIEW ─── must beat the grid-column override above on specificity */
.v2-search-layout .v2-results-row.v2-results-row--list,
.v2-results-row--list {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    margin: 0 !important;
    width: 100% !important;
}
.v2-search-layout .v2-results-row.v2-results-row--list > div,
.v2-results-row--list > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 100% !important;
}
/* The profilecard becomes a horizontal row: image left, content right */
.v2-search-layout .v2-results-row.v2-results-row--list .profilecard,
.v2-results-row--list .profilecard {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: auto !important;
    min-height: 200px;
    overflow: hidden;
}
/* Image area pinned left at fixed width */
.v2-search-layout .v2-results-row.v2-results-row--list .profilecard .image-wrapper,
.v2-search-layout .v2-results-row.v2-results-row--list .profilecard .bg-cover,
.v2-search-layout .v2-results-row.v2-results-row--list .profilecard .h-48,
.v2-results-row--list .profilecard .image-wrapper,
.v2-results-row--list .profilecard .bg-cover,
.v2-results-row--list .profilecard .h-48 {
    width: 280px !important;
    height: auto !important;
    min-height: 200px;
    flex: 0 0 280px !important;
    border-radius: 0 !important;
}
/* Content takes the remaining width */
.v2-search-layout .v2-results-row.v2-results-row--list .profilecard .p-4,
.v2-results-row--list .profilecard .p-4 {
    flex: 1 1 auto !important;
    padding: 20px 24px !important;
    min-width: 0;
    overflow: hidden;
}
/* Tablet: smaller image */
@media (max-width: 880px) {
    .v2-search-layout .v2-results-row.v2-results-row--list .profilecard .image-wrapper,
    .v2-search-layout .v2-results-row.v2-results-row--list .profilecard .bg-cover,
    .v2-search-layout .v2-results-row.v2-results-row--list .profilecard .h-48,
    .v2-results-row--list .profilecard .image-wrapper,
    .v2-results-row--list .profilecard .bg-cover,
    .v2-results-row--list .profilecard .h-48 {
        width: 200px !important;
        flex: 0 0 200px !important;
    }
}
/* Phone: stack vertically (image on top, content below) */
@media (max-width: 600px) {
    .v2-search-layout .v2-results-row.v2-results-row--list .profilecard,
    .v2-results-row--list .profilecard {
        flex-direction: column !important;
        min-height: 0;
    }
    .v2-search-layout .v2-results-row.v2-results-row--list .profilecard .image-wrapper,
    .v2-search-layout .v2-results-row.v2-results-row--list .profilecard .bg-cover,
    .v2-search-layout .v2-results-row.v2-results-row--list .profilecard .h-48,
    .v2-results-row--list .profilecard .image-wrapper,
    .v2-results-row--list .profilecard .bg-cover,
    .v2-results-row--list .profilecard .h-48 {
        width: 100% !important;
        height: 220px !important;
        flex: 0 0 220px !important;
    }
}

/* Pagination container */
.v2-pagination { margin-top: 24px; text-align: center; }

/* ─── V2 AUTH PAGES (login + register) ──────────────────────────────── */
.v2-auth {
    padding: 120px 24px 60px;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
}
.v2-auth__inner {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    background: var(--surface);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(15,17,30,.12), 0 8px 20px rgba(15,17,30,.06);
    border: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 540px;
}
.v2-auth__inner--register { grid-template-columns: 1.15fr 1fr; }
[data-theme="dark"] .v2-auth__inner { box-shadow: 0 30px 80px rgba(0,0,0,.45); }
@media (max-width: 880px) {
    .v2-auth { padding: 100px 16px 40px; }
    .v2-auth__inner, .v2-auth__inner--register { grid-template-columns: 1fr; }
    .v2-auth__aside { order: -1; min-height: 200px; }
}

.v2-auth__card { padding: 44px 44px 36px; display: flex; flex-direction: column; }
@media (max-width: 600px) { .v2-auth__card { padding: 28px 24px 24px; } }
.v2-auth__header { margin-bottom: 28px; }
.v2-auth__title {
    font-size: clamp(24px, 3vw, 30px) !important;
    font-weight: 700 !important;
    margin: 12px 0 6px !important;
    color: var(--text);
    letter-spacing: -0.01em;
}
.v2-auth__sub { color: var(--text-muted) !important; font-size: 14px !important; margin: 0 !important; }

/* Form layout */
.v2-form { display: flex; flex-direction: column; gap: 16px; }
.v2-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .v2-row-2 { grid-template-columns: 1fr; } }

.v2-field { display: flex; flex-direction: column; gap: 6px; }
.v2-field > label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.v2-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.v2-input-icon {
    position: absolute;
    left: 14px;
    color: var(--text-soft);
    font-size: 14px;
    pointer-events: none;
}
.v2-input-wrap > input,
.v2-input-wrap > select {
    width: 100%;
    padding: 12px 14px 12px 42px !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 12px !important;
    background: var(--surface-2) !important;
    color: var(--text) !important;
    font-size: 14px !important;
    font-family: var(--font-sans) !important;
    transition: border-color .15s, box-shadow .15s, background .15s !important;
    box-sizing: border-box;
}
.v2-input-wrap > input:focus,
.v2-input-wrap > select:focus {
    outline: none !important;
    border-color: var(--brand) !important;
    background: var(--surface) !important;
    box-shadow: 0 0 0 3px rgba(255,46,108,.14) !important;
}
.v2-input-wrap > input::placeholder { color: var(--text-soft); }
.v2-pw-toggle {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background .15s, color .15s;
}
.v2-pw-toggle:hover { background: var(--surface-2); color: var(--text); }

.v2-btn--block { width: 100%; padding: 14px 18px; font-size: 14px; margin-top: 4px; }

.v2-form__notice {
    margin-top: 6px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
}

.v2-auth__alt {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin: 16px 0 0 !important;
}
.v2-auth__alt a { color: var(--brand-strong); font-weight: 600; text-decoration: none; }
.v2-auth__alt a:hover { text-decoration: underline; }
.v2-auth__terms {
    text-align: center;
    color: var(--text-soft);
    font-size: 11px;
    margin: 8px 0 0 !important;
    line-height: 1.5;
}
.v2-auth__terms a { color: var(--text-muted); text-decoration: underline; }

/* RIGHT-SIDE value-prop panel */
.v2-auth__aside {
    position: relative;
    background: linear-gradient(135deg, #14151a 0%, #1c1d27 100%);
    color: #fff;
    padding: 44px;
    overflow: hidden;
}
.v2-auth__aside-bg {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.v2-auth__aside-inner {
    position: relative; z-index: 1;
    height: 100%;
    display: flex; flex-direction: column; justify-content: center;
}
.v2-auth__aside h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 24px;
    color: #fff;
    letter-spacing: -0.01em;
}
.v2-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.v2-features li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    color: rgba(255,255,255,.92);
}
.v2-features__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
.v2-features li > div { display: flex; flex-direction: column; gap: 2px; }
.v2-features strong { font-weight: 600; font-size: 14px; color: #fff; }
.v2-features span { font-size: 12px; color: rgba(255,255,255,.65); line-height: 1.4; }

/* Auth pages footer is minimal */
.v2-auth ~ .v2-footer { margin-top: 0; }

/* ─── V2 ARTICLE / INFO PAGES (spelregels, overons) ──────────────────── */
.v2-hero--compact { padding: 100px 24px 36px; }

.v2-article {
    max-width: 920px;
    margin: 40px auto 0;
    padding: 0 24px;
}

.v2-toc {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    margin-bottom: 40px;
}
.v2-toc .v2-pill { font-weight: 500; }

/* FAQ */
.v2-faq-section { margin-bottom: 40px; }
.v2-faq-section__title {
    display: flex; align-items: center; gap: 12px;
    font-size: 22px !important;
    margin-top: 24px !important;
}
.v2-faq-section__title i { color: var(--brand); font-size: 18px; }

.v2-faq {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
}
.v2-faq[open] {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}
.v2-faq summary {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 22px;
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .15s;
}
.v2-faq summary::-webkit-details-marker { display: none; }
.v2-faq summary::before {
    content: '\2b';   /* plus */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--brand);
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--brand-soft);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    transition: transform .25s, background .2s;
}
.v2-faq[open] summary::before {
    content: '\f068';   /* minus */
    transform: rotate(180deg);
}
.v2-faq summary:hover { background: var(--surface-2); }
.v2-faq__body {
    padding: 0 22px 20px 62px;
    color: var(--text-muted);
    line-height: 1.65;
    font-size: 14px;
}
.v2-faq__body strong { color: var(--text); }

[data-theme="dark"] .v2-faq summary::before { background: rgba(255,46,108,.15); color: #ffb3c8; }

/* Stats strip */
.v2-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 40px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}
.v2-stat { text-align: center; }
.v2-stat__value {
    font-size: 32px; font-weight: 800; letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}
.v2-stat__label {
    font-size: 12px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em; margin-top: 4px;
    font-weight: 500;
}

/* Prose */
.v2-prose {
    color: var(--text);
    line-height: 1.7;
    font-size: 16px;
    margin-bottom: 32px;
}
.v2-prose h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 32px 0 14px;
    color: var(--text);
    letter-spacing: -0.01em;
}
.v2-prose .v2-lead {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 16px;
}
.v2-prose p { margin: 0 0 14px; color: var(--text-muted); }
.v2-prose strong { color: var(--text); font-weight: 600; }

/* Tier cards (overons) */
.v2-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 24px;
}
.v2-tier {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px 24px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s;
}
.v2-tier:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.v2-tier--featured {
    border-color: var(--brand);
    box-shadow: 0 12px 32px rgba(255,46,108,.15);
    background: linear-gradient(180deg, var(--surface) 0%, var(--brand-soft) 100%);
}
[data-theme="dark"] .v2-tier--featured { background: linear-gradient(180deg, var(--surface) 0%, rgba(255,46,108,.08) 100%); }
.v2-tier__badge {
    position: absolute; top: -12px; right: 16px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #422006;
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(245,158,11,.3);
    display: inline-flex; align-items: center; gap: 4px;
}
.v2-tier__head {
    display: flex; flex-direction: column; gap: 4px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.v2-tier__name { font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.v2-tier__price {
    font-size: 36px; font-weight: 800; color: var(--text);
    letter-spacing: -0.02em; line-height: 1;
}
.v2-tier__price small { font-size: 14px; color: var(--text-muted); font-weight: 500; }
.v2-tier__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.v2-tier__list li {
    display: flex; align-items: center; gap: 10px;
    color: var(--text); font-size: 14px;
}
.v2-tier__list li i {
    color: var(--success);
    background: rgba(22,163,74,.12);
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}

/* CTA banner */
.v2-cta {
    margin: 60px 0 100px;
    background: linear-gradient(135deg, #14151a 0%, #1c1d27 100%);
    border-radius: 22px;
    overflow: hidden;
    position: relative;
}
.v2-cta::before, .v2-cta::after {
    content: ''; position: absolute; border-radius: 50%;
    filter: blur(60px); opacity: .35; pointer-events: none;
}
.v2-cta::before { width: 240px; height: 240px; background: #ff2e6c; top: -60px; left: -40px; }
.v2-cta::after  { width: 240px; height: 240px; background: #1e90ff; bottom: -60px; right: -40px; }
.v2-cta__inner {
    position: relative; z-index: 1;
    padding: 32px 36px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    color: #fff;
    flex-wrap: wrap;
}
.v2-cta h3 { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: #fff; }
.v2-cta p { color: rgba(255,255,255,.7); margin: 0; font-size: 14px; }
.v2-cta .v2-btn--primary { white-space: nowrap; padding: 12px 22px; }

/* ============================================================================
   ▒▒▒  V2 PROFILE PAGE  ▒▒▒
   Customer-visible profile detail page (/profile/?gebruiker=xxx).
   Modern cover + header card + tabs + 2-column body (info / sticky prices+CTA).
   All IDs profilescript.js fills are preserved exactly.
   ============================================================================ */

.v2-profile-page { padding-top: 0; }

/* Full-width override for the .kader containers on profile pages */
.v2-profile-page .kader,
.v2-profile-page .v2-profile,
.v2-profile-page .v2-profile-loading {
    max-width: 1280px !important;
    width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px !important;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    box-sizing: border-box;
}
.v2-profile-page .kader { margin-top: 100px !important; margin-bottom: 40px !important; }
@media (max-width: 640px) {
    .v2-profile-page .kader { margin-top: 80px !important; width: calc(100% - 16px) !important; border-radius: 16px !important; }
}

/* Loading skeleton */
.v2-profile-loading {
    padding: 60px 24px !important;
    text-align: center;
}
.v2-skeleton { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.v2-skeleton__avatar { width: 110px; height: 110px; border-radius: 50%; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: v2Shimmer 1.4s linear infinite; }
.v2-skeleton__line { width: 240px; height: 14px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: v2Shimmer 1.4s linear infinite; border-radius: 6px; }
.v2-skeleton__line--lg { width: 300px; height: 22px; }
@keyframes v2Shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

/* Cover banner with gradient blobs */
.v2-profile__cover {
    position: relative;
    height: 220px;
    background:
        linear-gradient(135deg, #14151a 0%, #1c1d27 100%);
    overflow: hidden;
}
.v2-profile__cover-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
}
.v2-profile__cover-blob--pink { width: 320px; height: 320px; background: #ff2e6c; top: -80px; left: -60px; }
.v2-profile__cover-blob--blue { width: 280px; height: 280px; background: #1e90ff; bottom: -100px; right: -40px; }
@media (max-width: 640px) { .v2-profile__cover { height: 160px; } }

/* Header card overlapping cover */
.v2-profile__header {
    display: grid !important;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    padding: 0 36px 28px !important;
    margin-top: -90px !important;
    align-items: end;
    position: relative;
    z-index: 2;
}
@media (max-width: 760px) {
    .v2-profile__header { grid-template-columns: 1fr; gap: 16px; padding: 0 20px 20px !important; margin-top: -70px !important; text-align: center; align-items: center; }
}

.v2-profile__avatar-wrap { display: flex; align-items: flex-end; }
@media (max-width: 760px) { .v2-profile__avatar-wrap { justify-content: center; } }

/* Avatar circle — works whether profilescript sets background-image OR injects
   an <img> child. The container is square and overflow-hidden, the child fills. */
.v2-profile__avatar,
.v2-profile-page .homeprofimage,
.v2-profile-page #homeprofileimage {
    width: 180px !important;
    height: 180px !important;
    min-width: 180px;
    min-height: 180px;
    border-radius: 50% !important;
    border: 5px solid var(--surface) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden !important;
    background-color: var(--surface-2) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
}
/* Any image inside fills + crops, centered */
.v2-profile__avatar > img,
.v2-profile-page .homeprofimage > img,
.v2-profile-page #homeprofileimage > img,
.v2-profile__avatar img,
.v2-profile-page .homeprofimage img,
.v2-profile-page #homeprofileimage img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute;
    top: 0;
    left: 0;
}
@media (max-width: 760px) {
    .v2-profile__avatar,
    .v2-profile-page .homeprofimage,
    .v2-profile-page #homeprofileimage {
        width: 140px !important; height: 140px !important;
        min-width: 140px; min-height: 140px;
    }
}

/* Title block beside avatar */
.v2-profile__title-wrap {
    height: auto !important;
    background: transparent !important;
    color: var(--text) !important;
    margin-top: 0 !important;
    padding-top: 100px;
}
@media (max-width: 760px) { .v2-profile__title-wrap { padding-top: 0; } }

.v2-profile-page .testimonial-heading-big {
    width: auto !important;
    margin: 0 !important;
}
.v2-profile__name-link {
    text-decoration: none !important;
    color: var(--text) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.v2-profile__name {
    font-size: clamp(28px, 4vw, 42px) !important;
    font-weight: 800 !important;
    margin: 0 !important;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.1;
}
.v2-profile__name span { color: var(--text); }
.v2-profile-page #badge-containeronline {
    background: var(--success) !important;
    color: #fff !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600;
    box-shadow: 0 0 0 0 rgba(22,163,74,.6);
    animation: v2Pulse 2s infinite;
    display: inline-flex; align-items: center; gap: 6px;
    text-transform: lowercase;
}

.v2-profile__chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 14px;
}
@media (max-width: 760px) { .v2-profile__chips { justify-content: center; } }
.v2-profile__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px; font-weight: 500;
}
.v2-profile__chip i { color: var(--brand); font-size: 11px; }

/* Hide the legacy #badgesProfile block — profilescript fills it with raw
   "Geverifieerd | Gold Member" text/icons that look like 1.0 styling. The
   new pill badges in .v2-profile__trust-badges replace it. */
.v2-profile-page #badgesProfile {
    display: none !important;
}

.v2-profile__badges-row { margin-top: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 760px) { .v2-profile__badges-row { justify-content: center; } }

/* ─── Trust badges (Geverifieerd / Premium) near the profile name ─── */
.v2-profile__trust-badges {
    display: none;            /* revealed by inline JS when profilescript marks profile */
    gap: 6px;
    flex-wrap: wrap;
    margin: 10px 0 0;
}
@media (max-width: 760px) { .v2-profile__trust-badges { justify-content: center; } }
.v2-trust-badge {
    display: none;            /* JS reveals to 'inline-flex' if applicable */
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.v2-trust-badge--verified {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    box-shadow: 0 4px 12px rgba(30,144,255,.28);
}
.v2-trust-badge--gold {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #422006;
    box-shadow: 0 4px 12px rgba(245,158,11,.32);
}
.v2-trust-badge i { font-size: 12px; }
.v2-trust-badge > span { display: none !important; }  /* hide raw text profilescript may inject */

/* ─── Prices: Bootstrap row + cols inside our card ─── */
.v2-price-row { margin: 0 -8px; }
.v2-price-col { padding: 0 8px; margin-bottom: 14px; }
.v2-prices-card .v2-price-row .row,
.v2-prices-card .row { margin: 0; }
.v2-prices-card center { display: contents; }

.v2-price-divider { margin: 18px 0 14px; border: 0; border-top: 1px solid var(--border); }

.v2-price-subhead {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--text);
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.v2-price-subhead i { color: var(--brand); font-size: 12px; }

/* Mogelijkheden inside prijzenbox — chip layout filled by profile-v2.js */
.v2-prices-card #mogelijkheden {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
}
.v2-prices-card #mogelijkheden:empty::before {
    content: 'Geen mogelijkheden opgegeven.';
    color: var(--text-soft);
    font-style: italic;
    font-size: 12px;
}
.v2-mog-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}
.v2-mog-chip i {
    color: var(--success);
    font-size: 9px;
}
/* Force any inline-styled span/black-color text in prijzenbox to readable color */
.v2-prices-card [style*="color: black"],
.v2-prices-card [style*="color:black"] {
    color: var(--text) !important;
}

/* Tab navigation — sticky just below navbar */
.v2-profile__tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    padding: 12px 36px;
    margin: 0 !important;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 70px;
    z-index: 30;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
@media (max-width: 640px) {
    .v2-profile__tabs { padding: 10px 16px; gap: 6px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .v2-profile__tabs::-webkit-scrollbar { display: none; }
}

/* Mobile arrow-nav rules moved to the end of the file (search for
   "v2-profile__tab-arrow") so they win source-order ties against the
   later .v2-profile__tab.btn { display: inline-flex !important } rule. */

.v2-profile-page .v2-profile__tab.btn,
.v2-profile-page button.v2-profile__tab {
    width: auto !important;
    height: auto !important;
    padding: 10px 18px !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    border: 1px solid transparent !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: all .2s !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.v2-profile-page .v2-profile__tab:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}
.v2-profile-page .v2-profile__tab--active,
.v2-profile-page .btn.btnprofile-1-selected.v2-profile__tab {
    background: var(--text) !important;
    color: var(--surface) !important;
}
[data-theme="dark"] .v2-profile-page .v2-profile__tab--active,
[data-theme="dark"] .v2-profile-page .btn.btnprofile-1-selected.v2-profile__tab {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong)) !important;
    color: #fff !important;
}
.v2-profile-page .v2-profile__tab--cta {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(255,46,108,.3) !important;
    margin-left: auto !important;
}
.v2-profile-page .v2-profile__tab--cta:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.v2-profile-page .v2-profile__tab i { font-size: 16px; }

/* Body 2-column layout */
.v2-profile__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    padding: 32px 36px 40px;
}
@media (max-width: 1024px) { .v2-profile__body { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; padding: 28px 24px 32px; } }
@media (max-width: 880px)  { .v2-profile__body { grid-template-columns: 1fr; padding: 24px 20px 28px; } }

.v2-profile__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.v2-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.v2-card__title {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 18px;
    color: var(--text);
    letter-spacing: -0.005em;
}
.v2-card__title i { color: var(--brand); font-size: 14px; }

/* Stats grid (replaces ugly tables) */
.v2-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

@media (max-width: 640px) {
    .v2-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.v2-stat-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-width: 0;
}
.v2-stat-item__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: flex; align-items: center; gap: 6px;
}
.v2-stat-item__label i { color: var(--brand); font-size: 11px; opacity: .7; }
.v2-stat-item__value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Override all inline color:black; on profile page */
.v2-profile-page [style*="color: black"],
.v2-profile-page [style*="color:black"] {
    color: var(--text) !important;
}

/* Description prose */
.v2-prose-block {
    color: var(--text);
    line-height: 1.7;
    font-size: 15px;
}
.v2-prose-block #description { color: var(--text); }

/* Services / mogelijkheden styled as soft chips */
.v2-services { color: var(--text); line-height: 1.8; font-size: 14px; }
.v2-services strong, .v2-services b { color: var(--brand-strong); }

/* ─── Reviews — re-imagined card layout ─────────────────────────────── */
.v2-reviews-divider { margin: 18px 0; border: 0; border-top: 1px solid var(--border); }
.v2-review-cta {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255,46,108,.05), rgba(30,144,255,.04));
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text);
    margin-top: 14px;
}
.v2-review-cta p { margin: 0 0 12px; color: var(--text); font-size: 14px; }
.v2-review-cta button { margin: 0 auto; }

.v2-profile-page #reviews {
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}
/* Every direct child of #reviews — usually a row/div per review — becomes
   a modern card. Works regardless of what tag profilescript injects (div, p, ...). */
.v2-profile-page #reviews > * {
}
.v2-profile-page #reviews > *:hover {
}

/* Gold star icons (profilescript outputs <i class="fa-star"> or <i class="far fa-star">) */
.v2-profile-page #reviews .fa-star,
.v2-profile-page #reviews .fas.fa-star,
.v2-profile-page #reviews i[class*="fa-star"] {
    color: #fbbf24 !important;
    font-size: 13px;
    margin-right: 1px;
    filter: drop-shadow(0 1px 1px rgba(245,158,11,.25));
}

/* Reviewer-name spans + meta */
.v2-profile-page #reviews b,
.v2-profile-page #reviews strong {
    color: var(--text) !important;
    font-weight: 700;
    display: inline-block;
}
/* Force readable color on anything inline-styled black */
.v2-profile-page #reviews [style*="color: black"],
.v2-profile-page #reviews [style*="color:black"] {
    color: var(--text) !important;
}
/* Quote decoration */
.v2-profile-page #reviews > *::before {
    content: '\201C';   /* left curly quote */
    position: absolute;
    top: 6px; left: 14px;
    color: var(--brand);
    opacity: 0.18;
    font-size: 56px;
    font-family: Georgia, serif;
    line-height: 1;
    pointer-events: none;
}
/* Empty state */
.v2-profile-page #reviews:empty::after {
    content: 'Nog geen reviews. Wees de eerste!';
    display: block;
    text-align: center;
    color: var(--text-soft);
    font-size: 13px;
    font-style: italic;
    padding: 24px;
    border: 1px dashed var(--border);
    border-radius: 12px;
}

/* RIGHT column: sticky prices + CTAs */
.v2-profile__aside { min-width: 0; }
.v2-profile__sticky {
    position: sticky;
    top: 150px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (max-width: 880px) { .v2-profile__sticky { position: static; } }

/* ─── Mobile-only profile section reorder ─────────────────────────────────
   Desktop keeps the 2-col grid (main = info/about/reviews · aside = CTAs/
   prices/trust). On mobile the body becomes a single flex column and
   `display: contents` on the wrappers lets every card sit directly inside
   __body so we can re-order them with `order:`. Requested order:
   1 Contact box · 2 Profielinfo · 3 Over mij · 4 Tarieven (+ Mogelijkheden) ·
   5 Reviews · 6 Trust mini-strip. */
@media (max-width: 880px) {
    .v2-profile-page .v2-profile__body {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .v2-profile-page .v2-profile__main,
    .v2-profile-page .v2-profile__aside,
    .v2-profile-page .v2-profile__sticky { display: contents; }

    .v2-profile-page .v2-action-card { order: 1; }
    .v2-profile-page .v2-stats-card  { order: 2; }
    .v2-profile-page .v2-about-card  { order: 3; }
    .v2-profile-page .v2-prices-card { order: 4; }
    .v2-profile-page #testimonials   { order: 5; }
    .v2-profile-page .v2-trust-mini  { order: 6; }
}

/* Prices card */
.v2-prices-card { padding: 24px; }
.v2-prices-card center { display: block; text-align: left; }

/* Bootstrap row inside the card: stack VERTICALLY because the sidebar (~340px)
   is too narrow for two side-by-side price tables. */
.v2-prices-card .v2-price-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}
.v2-prices-card .v2-price-row > div[class*="col-"] {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

.v2-price-section {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
}
.v2-price-section__head {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.v2-price-section__head i { color: var(--brand); font-size: 14px; }

/* The price tables themselves — applied to ALL category tables (Ontvangst,
   Escort, Massage, BDSM, Virtual) so every category renders identically. */
.v2-prices-card .v2-price-table,
.v2-prices-card #price-containerOntvangst,
.v2-prices-card #price-containerEscort,
.v2-prices-card #price-containerMassage,
.v2-prices-card #price-containerBDSM,
.v2-prices-card #price-containerVirtual {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    color: var(--text);
    margin: 0 !important;
}
.v2-prices-card .v2-price-table tr {
    border-bottom: 1px solid var(--border);
}
.v2-prices-card .v2-price-table tr:last-child {
    border-bottom: none;
}
.v2-prices-card .v2-price-table td {
    padding: 7px 0 !important;
    color: var(--text) !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    vertical-align: middle;
    white-space: nowrap;
    background: transparent !important;
    border: none !important;
}
.v2-prices-card .v2-price-table td:first-child,
.v2-prices-card .v2-price-table__dur {
    color: var(--text-muted) !important;
    text-align: left;
    width: 50%;
}
.v2-prices-card .v2-price-table td:last-child,
.v2-prices-card .v2-price-table__amount {
    text-align: right;
    font-weight: 700;
    color: var(--text) !important;
    width: 50%;
}
/* Empty-state placeholder for legacy-managed Ontvangst/Escort only — the
   new categories auto-hide their wrapper when empty so there's nothing to
   placeholder. */
.v2-prices-card #price-containerOntvangst:empty::after,
.v2-prices-card #price-containerEscort:empty::after {
    content: 'Geen tarieven opgegeven';
    display: block;
    color: var(--text-soft);
    font-size: 12px;
    font-style: italic;
    padding: 4px 0;
}

/* Action card (CTA) */
.v2-action-card {
    text-align: center;
    background: linear-gradient(135deg, rgba(255,46,108,.06), rgba(255,46,108,.02));
    border: 1px solid rgba(255,46,108,.18);
}
[data-theme="dark"] .v2-action-card {
    background: linear-gradient(135deg, rgba(255,46,108,.10), rgba(255,46,108,.03));
}
.v2-action-card__sub {
    margin: 10px 0 0 !important;
    color: var(--text-muted);
    font-size: 12px;
}

/* Trust mini-strip below prices */
.v2-trust-mini {
    display: flex; justify-content: space-around; gap: 8px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 11px;
    color: var(--text-muted);
}
.v2-trust-mini__item {
    display: flex; align-items: center; gap: 4px;
    font-weight: 500;
}
.v2-trust-mini__item i { color: var(--success); font-size: 12px; }

/* Related profiles section spacing */
.v2-profile__related { margin-top: 60px; }

/* ─── Lightbox: legacy ones unconditionally hidden. New v2 lightbox below. */
.v2-profile-page .lightbox,
.lightbox {
    display: none !important;
}

/* ─── New v2 lightbox (full-screen image viewer with thumbnail strip) ─── */
.ds-v2-lightbox {
    display: none;
    position: fixed; inset: 0;
    z-index: 99999;
    background: rgba(8,10,16,.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: dsLbFade .2s ease;
}
@keyframes dsLbFade { from { opacity: 0; } to { opacity: 1; } }
.ds-v2-lightbox.is-open { display: flex; }

.ds-lb__close {
    position: absolute;
    top: 16px; right: 16px;
    width: 44px; height: 44px;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background .15s, transform .15s;
    z-index: 2;
}
.ds-lb__close:hover { background: var(--brand); transform: rotate(90deg); }

.ds-lb__nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background .15s, transform .15s;
    z-index: 2;
}
.ds-lb__nav:hover { background: var(--brand); }
.ds-lb__nav--prev { left: 16px; }
.ds-lb__nav--next { right: 16px; }
@media (max-width: 640px) {
    .ds-lb__nav { width: 40px; height: 40px; }
    .ds-lb__nav--prev { left: 8px; }
    .ds-lb__nav--next { right: 8px; }
}

.ds-lb__stage {
    flex: 1 1 auto;
    min-height: 0;            /* CRITICAL: lets the flex item shrink below content size */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px 60px;
    box-sizing: border-box;
}
.ds-lb__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 220px);    /* leaves room for counter + thumbs */
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 16px 60px rgba(0,0,0,.6);
    transition: opacity .2s;
}
@media (max-width: 640px) {
    .ds-lb__stage { padding: 8px 16px; }
    .ds-lb__img   { max-height: calc(100vh - 200px); }
}

.ds-lb__counter {
    color: rgba(255,255,255,.7);
    font-size: 13px;
    font-weight: 600;
    margin: 14px 0 10px;
    padding: 6px 14px;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

.ds-lb__thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    max-width: 100%;
    padding: 8px 4px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.ds-lb__thumbs::-webkit-scrollbar { height: 4px; }
.ds-lb__thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

.ds-lb__thumb {
    flex: 0 0 auto;
    width: 72px; height: 72px;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    background: rgba(255,255,255,.06);
    cursor: pointer;
    transition: border-color .15s, transform .15s, opacity .15s;
    opacity: 0.65;
}
.ds-lb__thumb:hover { opacity: 1; transform: translateY(-2px); }
.ds-lb__thumb.is-active {
    border-color: var(--brand);
    opacity: 1;
    box-shadow: 0 0 0 1px var(--brand), 0 6px 14px rgba(255,46,108,.35);
}
.ds-lb__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 640px) {
    .ds-lb__thumb { width: 56px; height: 56px; }
}

/* Hide native scrollbar on body when lightbox open */
body:has(.ds-v2-lightbox.is-open) { overflow: hidden; }

.ds-nav-dropdown__menu {
    position: absolute;
    top: 100%;
    margin-top: -15px;
    min-width: 220px;
    background: linear-gradient(180deg, #14151a 0%, #1c1d27 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.3);
    padding: 8px;
    display: none;
    z-index: 1001;
    animation: dsDropFade .15s ease;
}
/* Invisible bridge under the trigger so the cursor stays within the
   dropdown element while traveling from the link to the menu. */
.ds-nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 14px;
    background: transparent;
    pointer-events: auto;
}
@keyframes dsDropFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Open on hover (desktop) and when the .ds-nav-dropdown receives focus */
.ds-nav-dropdown:hover .ds-nav-dropdown__menu,
.ds-nav-dropdown:focus-within .ds-nav-dropdown__menu {
    display: block;
}
.ds-nav-dropdown__menu a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px !important;
    color: rgba(255,255,255,.85) !important;
    background: transparent !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none;
    transition: background .15s, color .15s;
    border-top: none !important;
    margin: 0 !important;
}
.ds-nav-dropdown__menu a:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}
.ds-nav-dropdown__menu a i {
    color: var(--brand) !important;
    width: 16px;
    text-align: center;
    font-size: 13px !important;
}
.ds-nav-dropdown__menu hr {
    margin: 6px 0;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.08);
}
.ds-nav-dropdown__logout {
    color: #ffb3c8 !important;
}
.ds-nav-dropdown__logout:hover {
    background: rgba(255,46,108,.18) !important;
    color: #fff !important;
}
.ds-nav-dropdown__logout i { color: var(--brand) !important; }

/* Mobile: dropdown becomes a flat sub-list under the main link */
@media (max-width: 768px) {
    .ds-nav-dropdown__menu {
        position: static;
        background: rgba(255,255,255,.04);
        margin-top: 4px;
        padding: 6px;
        box-shadow: none;
        display: block;
        border-radius: 10px;
    }
}

/* ─── Contact form: "logged-in as ..." banner ─── */
.ds-loggedin-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--brand-soft), rgba(30,144,255,.10));
    border: 1px solid var(--brand);
    border-radius: 12px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 14px;
}
.ds-loggedin-banner i { color: var(--brand); font-size: 18px; flex-shrink: 0; }
.ds-loggedin-banner strong { color: var(--brand-strong); }
.ds-loggedin-banner a { color: var(--brand-strong); font-weight: 600; text-decoration: none; }
.ds-loggedin-banner a:hover { text-decoration: underline; }
[data-theme="dark"] .ds-loggedin-banner {
    background: linear-gradient(135deg, rgba(255,46,108,.18), rgba(30,144,255,.10));
}

/* ─── GALLERY SUB-PAGE LAYOUT ──────────────────────────────────────── */
.v2-profile__gallery-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    padding: 32px 36px 40px;
}
@media (max-width: 1024px) { .v2-profile__gallery-body { grid-template-columns: minmax(0, 1fr) 280px; padding: 28px 24px; } }
@media (max-width: 880px)  { .v2-profile__gallery-body { grid-template-columns: 1fr; padding: 24px 20px; } }

.v2-gallery-card { padding: 24px; }
.v2-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 8px;
}
.v2-gallery-grid img, .v2-gallery-grid a img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block;
    transition: transform .25s ease;
}
.v2-gallery-grid a {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-2);
}
.v2-gallery-grid a:hover img { transform: scale(1.04); }
.v2-gallery-grid:empty::before {
    content: 'Foto album wordt geladen…';
    display: block;
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-soft);
    padding: 40px;
    font-size: 14px;
}

/* ─── CONTACT SUB-PAGE LAYOUT ──────────────────────────────────────── */
.v2-profile__contact-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    padding: 32px 36px 40px;
}
@media (max-width: 1024px) { .v2-profile__contact-body { grid-template-columns: minmax(0, 1fr) 280px; padding: 28px 24px; } }
@media (max-width: 880px)  { .v2-profile__contact-body { grid-template-columns: 1fr; padding: 24px 20px; } }

.v2-contact-card { padding: 28px; }
.v2-contact-card__sub {
    color: var(--text-muted);
    font-size: 14px;
    margin: -6px 0 22px;
    line-height: 1.5;
}
.v2-contact-card__sub b { color: var(--text); }

/* Style feedback-input class (used by existing form) */
.v2-contact-card .feedback-input {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    color: var(--text) !important;
    font-size: 14px !important;
    font-family: var(--font-sans) !important;
    width: 100% !important;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s, background .15s;
    margin: 0 !important;
}
.v2-contact-card .feedback-input:focus {
    outline: none !important;
    border-color: var(--brand) !important;
    background: var(--surface) !important;
    box-shadow: 0 0 0 3px rgba(255,46,108,.14) !important;
}
.v2-contact-card textarea.feedback-input {
    min-height: 120px;
    resize: vertical;
    font-family: var(--font-sans);
}
.v2-contact-card .v2-field > label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: block;
}
.v2-contact-card .v2-input-wrap .feedback-input {
    padding-left: 42px !important;
}
.v2-contact-card .v2-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-soft);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}

/* ─── Sitewide hard-override: any input/select wrapped in .v2-input-wrap
   alongside a .v2-input-icon must reserve at least 42px of left-padding so
   the icon never overlaps the placeholder. This is the universal rule —
   catches contact, registreren, inloggen, account-gate, profile pages,
   regardless of what other padding rules are doing. */
.v2-input-wrap { position: relative; }
.v2-input-wrap > input,
.v2-input-wrap > select,
.v2-input-wrap > .feedback-input,
.v2-input-wrap > textarea {
    padding-left: 44px !important;
}
.v2-input-wrap > .v2-input-icon,
.v2-input-wrap > i.v2-input-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--text-soft, #9aa) !important;
    font-size: 14px !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.v2-contact-info-card { padding: 22px; }
.v2-contact-info-card h4 {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--text);
    margin: 0 0 14px;
}
.v2-contact-info-card h4 i { color: var(--brand); }
.v2-contact-info-card ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 12px;
}
.v2-contact-info-card li {
    display: flex; align-items: center; gap: 12px;
    color: var(--text); font-size: 14px;
}
.v2-contact-info-card li i {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-strong);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.v2-profile__gallery-aside,
.v2-profile__contact-aside {
    display: flex; flex-direction: column; gap: 16px;
}

/* ─── RESERVEREN SUB-PAGE — comprehensive polish (no HTML changes) ─── */
.v2-reserveren-body {
    padding: 28px 36px 40px;
    color: var(--text);
    max-width: 900px;
    margin: 0 auto;
}
@media (max-width: 880px) { .v2-reserveren-body { padding: 20px 16px; } }

.v2-reserveren-page #reserveringPage,
.v2-reserveren-page #skelet {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px !important;
    box-shadow: var(--shadow-md);
}
@media (max-width: 640px) {
    .v2-reserveren-page #reserveringPage,
    .v2-reserveren-page #skelet { padding: 18px !important; border-radius: 14px; }
}

.v2-reserveren-page #skelet {
    text-align: center;
    color: var(--text-muted);
    min-height: 200px;
}

/* Each step "box" becomes a soft section */
.v2-reserveren-page [id^="box"] {
    margin-bottom: 18px !important;
}

/* Step headings */
.v2-reserveren-page .testimonial-heading-small {
    color: var(--text);
    font-size: 14px;
    margin: 0 0 14px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.v2-reserveren-page .testimonial-heading-small span {
    color: var(--text) !important;
    background: var(--brand-soft);
    color: var(--brand-strong) !important;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.v2-reserveren-page .testimonial-heading-small br { display: none; }
[data-theme="dark"] .v2-reserveren-page .testimonial-heading-small span {
    background: rgba(255,46,108,.15);
    color: #ffb3c8 !important;
}

/* Generic tables / stats */
.v2-reserveren-page table,
.v2-reserveren-page .tablestats { color: var(--text); width: 100%; }
.v2-reserveren-page table td,
.v2-reserveren-page table th { padding: 8px 10px !important; color: var(--text); }

/* The "transparent-box" message bubbles get the new card treatment */
.v2-reserveren-page .transparent-box {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-sm);
    margin-bottom: 12px;
}

/* Override hardcoded inline colors */
.v2-reserveren-page [style*="color: black"],
.v2-reserveren-page [style*="color:black"] { color: var(--text) !important; }
.v2-reserveren-page [style*="background-color:#fff"],
.v2-reserveren-page [style*="background-color: #fff"],
.v2-reserveren-page [style*="background-color:white"],
.v2-reserveren-page [style*="background-color: white"] {
    background: var(--surface) !important;
}
[data-theme="dark"] .v2-reserveren-page [style*="background-color:#fff"],
[data-theme="dark"] .v2-reserveren-page [style*="background-color: #fff"],
[data-theme="dark"] .v2-reserveren-page [style*="background-color:white"],
[data-theme="dark"] .v2-reserveren-page [style*="background-color: white"] {
    background: var(--surface) !important;
}

/* ===== Buttons everywhere inside reserveren get the modern pill style ===== */
/* CRITICAL: only style appearance, never override `display`. profilescript
   gates the wizard steps via inline display:none on the step containers
   (#button-container0, #button-containertypedate, #button-containerduurdateontvangst,
   #button-containerduurdateescort, etc.) — touching display would break the
   step-by-step flow and reveal every option at once. */

/* Container layout — only applied when NOT inline-hidden. The :not() guards
   make sure we don't fight profilescript's display:none gating. */
.v2-reserveren-page [id^="button-container"]:not([style*="display:none"]):not([style*="display: none"]),
.v2-reserveren-page [id^="buttontijd-container"]:not([style*="display:none"]):not([style*="display: none"]) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center;
    margin: 10px 0 !important;
}

/* Individual buttons inside the wizard — these are real <button>/<input>
   elements, NEVER plain <div id="button-container...">. Scoping to actual
   form-control elements only, so containers are excluded by element type. */
.v2-reserveren-page [id^="button-container"] > button,
.v2-reserveren-page [id^="button-container"] > input[type="button"],
.v2-reserveren-page [id^="button-container"] > input[type="submit"],
.v2-reserveren-page [id^="button-container"] > a,
.v2-reserveren-page [id^="buttontijd-container"] > button,
.v2-reserveren-page [id^="buttontijd-container"] > input,
.v2-reserveren-page button[id^="button"]:not([id^="button-container"]):not([id^="buttontijd-container"]),
.v2-reserveren-page input[id^="button"]:not([id^="button-container"]):not([id^="buttontijd-container"]) {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    margin: 0 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    font-family: var(--font-sans) !important;
    cursor: pointer;
    transition: all .2s ease !important;
    box-shadow: var(--shadow-sm);
    line-height: 1.2;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 100px;
}
.v2-reserveren-page [id^="button-container"] > button:hover,
.v2-reserveren-page [id^="button-container"] > input[type="button"]:hover,
.v2-reserveren-page [id^="button-container"] > input[type="submit"]:hover,
.v2-reserveren-page [id^="button-container"] > a:hover,
.v2-reserveren-page [id^="buttontijd-container"] > button:hover,
.v2-reserveren-page [id^="buttontijd-container"] > input:hover,
.v2-reserveren-page button[id^="button"]:not([id^="button-container"]):not([id^="buttontijd-container"]):hover,
.v2-reserveren-page input[id^="button"]:not([id^="button-container"]):not([id^="buttontijd-container"]):hover {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong)) !important;
    color: #fff !important;
    border-color: transparent !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(255,46,108,.25);
}

/* Selected state (profilescript may add inline background-color for selected) —
   scope only to actual button elements so containers can't get caught. */
.v2-reserveren-page button[id^="button"]:not([id^="button-container"])[style*="background-color: rgb(255"],
.v2-reserveren-page button[id^="button"]:not([id^="button-container"])[style*="background-color:rgb(255"],
.v2-reserveren-page button[id^="button"]:not([id^="button-container"])[style*="background:#ff"],
.v2-reserveren-page button[id^="button"]:not([id^="button-container"])[style*="background: #ff"],
.v2-reserveren-page input[id^="button"]:not([id^="button-container"])[style*="background-color: rgb(255"],
.v2-reserveren-page input[id^="button"]:not([id^="button-container"])[style*="background:#ff"],
.v2-reserveren-page button.selected,
.v2-reserveren-page button.btn-selected,
.v2-reserveren-page button.active,
.v2-reserveren-page input[type="button"].selected,
.v2-reserveren-page input.active {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(255,46,108,.3);
}

/* Confirm-section CTA buttons (afspraakBevestigen, betalen) */
.v2-reserveren-page #afspraakBevestigen,
.v2-reserveren-page #betalen,
.v2-reserveren-page button#afspraakBevestigen,
.v2-reserveren-page input#afspraakBevestigen,
.v2-reserveren-page button#betalen,
.v2-reserveren-page input#betalen {
    width: 100% !important;
    padding: 14px 22px !important;
    font-size: 14px !important;
    background: linear-gradient(135deg, var(--brand), var(--brand-strong)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255,46,108,.3);
    transition: filter .15s, transform .1s;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.v2-reserveren-page #afspraakBevestigen:hover,
.v2-reserveren-page #betalen:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Inputs / textareas inside reserveren */
.v2-reserveren-page input[type="text"],
.v2-reserveren-page input[type="email"],
.v2-reserveren-page input[type="tel"],
.v2-reserveren-page input[type="number"],
.v2-reserveren-page input[type="date"],
.v2-reserveren-page input[type="time"],
.v2-reserveren-page textarea,
.v2-reserveren-page select,
.v2-reserveren-page .feedback-input {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    color: var(--text) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    transition: border-color .15s, box-shadow .15s, background .15s !important;
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0 !important;
}
.v2-reserveren-page input:focus,
.v2-reserveren-page textarea:focus,
.v2-reserveren-page select:focus,
.v2-reserveren-page .feedback-input:focus {
    outline: none !important;
    border-color: var(--brand) !important;
    background: var(--surface) !important;
    box-shadow: 0 0 0 3px rgba(255,46,108,.14) !important;
}

/* Limit / cancel messages */
.v2-reserveren-page #boxLimiet,
.v2-reserveren-page #checkLoginStatus {
    padding: 14px 18px !important;
    border-radius: 12px !important;
    background: rgba(220,38,38,.08) !important;
    border: 1px solid rgba(220,38,38,.25) !important;
    color: var(--danger) !important;
    font-size: 13px;
    margin: 12px 0 !important;
}

/* Payment iframe wrapper */
.v2-reserveren-page .iframebox,
.v2-reserveren-page #betalingiframe,
.v2-reserveren-page #betalingiframe2 {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    overflow: hidden;
    margin-top: 12px !important;
}
.v2-reserveren-page #betalingbedrag,
.v2-reserveren-page #betalingbedrag2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    text-align: center;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 12px !important;
}

/* Two-column container used in some sections (escort/ontvangst grid) */
.v2-reserveren-page .two-column-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 540px) {
    .v2-reserveren-page .two-column-container { grid-template-columns: 1fr; }
}
.v2-reserveren-page .columnpic2 { width: auto !important; padding: 0 !important; }

/* Final HR cleanup */
.v2-reserveren-page hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 14px 0 !important;
}

/* Loading skelet */
.v2-reserveren-page #skelet img { filter: invert(.7); }
[data-theme="dark"] .v2-reserveren-page #skelet img { filter: invert(.9); }

/* ─── Reserveren — UNIFIED CARD shell.
   The entire .v2-reserveren-body becomes one card; the landing block + the
   wizard below appear visually as ONE form. */
.v2-reserveren-page .v2-reserveren-body {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    overflow: hidden;
    padding: 0 !important;
    margin: 24px auto 32px !important;
    box-shadow: var(--shadow-md);
    max-width: 920px;
}
@media (max-width: 880px) {
    .v2-reserveren-page .v2-reserveren-body { margin: 16px auto 24px !important; border-radius: 16px; }
}

/* Reset legacy reserveringPage card-look — it's now flat inside our card */
.v2-reserveren-page #reserveringPage {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 24px 28px 28px !important;
}
@media (max-width: 640px) {
    .v2-reserveren-page #reserveringPage { padding: 16px 14px 20px !important; }
}

/* ─── Landing (header inside the unified card) ─── */
.v2-reserveren-landing {
    position: relative;
    background: linear-gradient(135deg, var(--surface) 0%, rgba(255,46,108,.04) 100%);
    border: none;
    border-radius: 0;
    padding: 32px 28px 22px;
    margin: 0;
    overflow: hidden;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.v2-reserveren-landing__bg {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.v2-reserveren-landing__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .25;
}
[data-theme="dark"] .v2-reserveren-landing__blob { opacity: .35; }
.v2-reserveren-landing__blob--pink {
    width: 280px; height: 280px;
    background: radial-gradient(circle, #ff2e6c 0%, transparent 70%);
    top: -80px; left: -60px;
}
.v2-reserveren-landing__blob--blue {
    width: 260px; height: 260px;
    background: radial-gradient(circle, #1e90ff 0%, transparent 70%);
    bottom: -80px; right: -60px;
}
.v2-reserveren-landing__inner {
    position: relative; z-index: 1;
    max-width: 720px; margin: 0 auto;
}

.v2-reserveren-landing__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 12px;
}
[data-theme="dark"] .v2-reserveren-landing__eyebrow {
    background: rgba(255,46,108,.15);
    color: #ffb3c8;
}
.v2-reserveren-landing__title {
    font-size: clamp(20px, 2.8vw, 26px);
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--text);
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.v2-reserveren-landing__title .ds-landing-naam {
    background: linear-gradient(135deg, #ff2e6c 0%, #ff8b3d 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
}
.v2-reserveren-landing__sub {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0 0 20px;
    line-height: 1.5;
}

/* ─── COMPACT HORIZONTAL STEPS ROW ─── */
.v2-reserveren-steps {
    list-style: none !important;
    padding: 0 !important;
    margin: 16px auto 16px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    grid-template-columns: none;
    max-width: 640px;
}
@media (max-width: 640px) {
    .v2-reserveren-steps { gap: 4px; padding: 0 4px !important; }
}

.v2-reserveren-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px !important;
    background: var(--surface-2);
    border: 1px solid var(--border) !important;
    border-top: 1px solid var(--border) !important;   /* override base.css dotted */
    border-radius: 999px !important;
    position: relative;
    transition: background .2s, border-color .2s, color .2s;
    margin: 0 !important;
    line-height: 1.2;
}
.v2-reserveren-step:hover { /* no fancy hover, these are progress indicators */ }

/* The number circle — positioned inline now, not absolute */
.v2-reserveren-step__num {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    box-shadow: none;
    flex-shrink: 0;
    border: 1px solid var(--border-strong);
    transition: background .2s, color .2s, border-color .2s;
}

/* Hide the icon and description — minimal compact look */
.v2-reserveren-step__icon { display: none !important; }
.v2-reserveren-step__desc { display: none !important; }

.v2-reserveren-step__title {
    font-size: 12px !important;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}
@media (max-width: 520px) {
    .v2-reserveren-step__title { font-size: 11px !important; }
}

/* ─── Step states ─── */
.v2-reserveren-step.is-active {
    background: linear-gradient(135deg, var(--brand-soft), transparent);
    border: 1px solid var(--brand) !important;
}
.v2-reserveren-step.is-active .v2-reserveren-step__num {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(255,46,108,.14);
}
.v2-reserveren-step.is-active .v2-reserveren-step__title {
    color: var(--brand-strong);
    font-weight: 700;
}
[data-theme="dark"] .v2-reserveren-step.is-active {
    background: linear-gradient(135deg, rgba(255,46,108,.15), transparent);
}

.v2-reserveren-step.is-done {
    background: rgba(22,163,74,.08);
    border-color: rgba(22,163,74,.45) !important;
}
.v2-reserveren-step.is-done .v2-reserveren-step__num {
    background: var(--success);
    border-color: transparent;
    position: relative;
}
.v2-reserveren-step.is-done .v2-reserveren-step__num::after {
    content: '\f00c';               /* fa-check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #fff;
    font-size: 11px;
    position: absolute;
    top: 50%; left: 10%;
    transform: translate(-50%, -50%);
}
.v2-reserveren-step.is-done .v2-reserveren-step__title { color: var(--success); }
[data-theme="dark"] .v2-reserveren-step.is-done { background: rgba(22,163,74,.14); }

/* ─── CTA call-to-action (initial state) ─── */
.v2-reserveren-landing__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: 999px;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    margin-top: 4px;
}
.v2-reserveren-landing__cta b { color: var(--brand-strong); font-weight: 700; }
.v2-reserveren-landing__arrow {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    animation: dsBounce 1.6s ease-in-out infinite;
    box-shadow: 0 4px 10px rgba(255,46,108,.3);
}
@keyframes dsBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .v2-reserveren-landing__arrow { animation: none; }
}

/* ─── Compact mode: once user starts the flow, hide welcome text/CTA but
   keep the steps row visible at the top of the unified card. ─── */
.v2-reserveren-landing.is-compact {
    padding: 14px 20px 12px;
}
.v2-reserveren-landing.is-compact .v2-reserveren-landing__eyebrow,
.v2-reserveren-landing.is-compact .v2-reserveren-landing__title,
.v2-reserveren-landing.is-compact .v2-reserveren-landing__sub,
.v2-reserveren-landing.is-compact .v2-reserveren-landing__cta {
    display: none !important;
}
.v2-reserveren-landing.is-compact .v2-reserveren-steps {
    margin: 0 auto !important;
}

@media (max-width: 640px) {
    .v2-reserveren-landing { padding: 22px 18px 16px; }
}

/* ─── UW RESERVERING overview block — fully reskinned + repositioned ─── */
/* The outer header just wraps the overview — remove its legacy heading styling */
.v2-reserveren-page #reserveringHead {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px !important;
    display: block !important;
}
.v2-reserveren-page #reserveringHead.testimonial-heading::before,
.v2-reserveren-page #reserveringHead.testimonial-heading::after {
    display: none !important;
}

/* The selections container (#keuzes) → modern card.
   ONLY when not inline-hidden — profilescript flips display:none on first
   selection. With this :not() guard the landing block stays visible
   initially. */
/* ============================================================================
   ▒▒▒  V2 USER PORTAL (/account)  ▒▒▒
   ============================================================================ */
.account-page {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
}

/* ─── Login gate (shown when not authed) ─── */
.ds-account-gate {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
}
.ds-account-gate__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 48px 36px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.ds-account-gate__icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-soft), rgba(30,144,255,.10));
    color: var(--brand-strong);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
    font-size: 28px;
}
[data-theme="dark"] .ds-account-gate__icon { color: #ffb3c8; background: linear-gradient(135deg, rgba(255,46,108,.15), rgba(30,144,255,.10)); }
.ds-account-gate__card h1 { font-size: 22px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
.ds-account-gate__card p  { color: var(--text-muted); font-size: 14px; margin: 0 0 22px; }
.ds-account-gate__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Inline login form inside the gate */
.ds-gate-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    margin-bottom: 16px;
}
.ds-gate-form .v2-field > label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: block;
}
.ds-gate-form .v2-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.ds-gate-form .v2-input-icon {
    position: absolute;
    left: 12px;
    color: var(--text-soft);
    font-size: 14px;
    pointer-events: none;
}
.ds-gate-form input {
    width: 100%;
    padding: 11px 14px 11px 38px !important;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-sans);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.ds-gate-form input:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(255,46,108,.14);
}
.ds-gate-form .v2-btn { margin-top: 4px; }
.ds-gate-alt {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin: 12px 0 0 !important;
}
.ds-gate-alt a { color: var(--brand-strong); font-weight: 600; text-decoration: none; }
.ds-gate-alt a:hover { text-decoration: underline; }

/* ─── Account hero ─── */
.ds-account { max-width: 1200px; margin: 100px auto 60px; padding: 0 24px; }
@media (max-width: 720px) { .ds-account { padding: 0 16px; margin: 90px auto 40px; } }

.ds-account__hero {
    position: relative;
    background: linear-gradient(135deg, var(--surface), rgba(255,46,108,.05));
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 36px 32px 28px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.ds-account__hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .3;
    pointer-events: none;
}
.ds-account__hero-blob--pink { width: 280px; height: 280px; background: #ff2e6c; top: -100px; left: -60px; }
.ds-account__hero-blob--blue { width: 240px; height: 240px; background: #1e90ff; bottom: -100px; right: -40px; }
.ds-account__hero-inner { position: relative; z-index: 1; }
.ds-account__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
[data-theme="dark"] .ds-account__eyebrow { background: rgba(255,46,108,.15); color: #ffb3c8; }
.ds-account__title {
    font-size: clamp(24px, 3.2vw, 32px);
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--text);
    letter-spacing: -0.02em;
}
.ds-account__name {
    background: linear-gradient(135deg, #ff2e6c, #ff8b3d);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
}
.ds-account__sub { color: var(--text-muted); font-size: 14px; margin: 0 0 22px; }
.ds-account__header-actions {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}

/* Online toggle switch */
.ds-account__online-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.ds-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.ds-switch input { opacity: 0; width: 0; height: 0; }
.ds-switch__slider {
    position: absolute; cursor: pointer; inset: 0;
    background: var(--border-strong);
    border-radius: 999px;
    transition: background .2s;
}
.ds-switch__slider::before {
    content: ''; position: absolute;
    height: 18px; width: 18px;
    left: 3px; top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
}
.ds-switch input:checked + .ds-switch__slider { background: var(--success); }
.ds-switch input:checked + .ds-switch__slider::before { transform: translateX(20px); }

/* ─── KPI strip ─── */
.ds-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
/* Mobile: always 2×2 (Bezoekers / Berichten / Reserveringen / Credits).
   The desktop auto-fit rule sometimes drops to 1 column on narrow iPhones
   because 180px × 2 + gap + page padding exceeds the viewport. Force 2
   columns at every mobile width; cards shrink to fit and stay paired. */
@media (max-width: 880px) {
    .ds-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .ds-kpi {
        padding: 12px;
        gap: 10px;
    }
    .ds-kpi__icon {
        width: 38px; height: 38px;
        font-size: 16px;
    }
    .ds-kpi__value { font-size: 19px; }
}
.ds-kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    display: flex; align-items: center; gap: 14px;
    box-shadow: var(--shadow-sm);
    color: var(--text);
    text-decoration: none;
}
.ds-kpi--link {
    cursor: pointer;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.ds-kpi--link:hover {
    transform: translateY(-2px);
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
    color: var(--text);
}
.ds-kpi__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}
.ds-kpi__label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.ds-kpi__value { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.1; margin-top: 2px; }
.ds-kpi__sub   { font-size: 11px; color: var(--text-soft); margin-top: 2px; }

/* ─── Primary tabs row — Overzicht / Berichten / Reserveringen ─── */
/* ─── Mijn Portaal — sidebar layout (zoeken-style) ─── */
.ds-account__layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    align-items: flex-start;
}
.ds-account__sidebar { position: sticky; top: 84px; align-self: flex-start; display: flex; flex-direction: column; gap: 12px; }
.ds-account__main { min-width: 0; }
@media (max-width: 880px) {
    .ds-account__layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ds-account__sidebar { position: static; }
}

/* Sidebar profile mini-card */
.ds-side-profile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 16px 16px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; align-items: center;
    gap: 10px;
    text-align: center;
}
.ds-side-profile__avatar {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,46,108,.18), rgba(30,144,255,.18)) center/cover no-repeat;
    border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-soft);
    font-size: 32px;
    overflow: hidden;
    position: relative;
}
.ds-side-profile__avatar.is-filled .ds-side-profile__avatar-fallback { display: none; }
.ds-side-profile__name {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    line-height: 1.2;
    word-break: break-word;
}
.ds-side-profile__view {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: background .15s, color .15s, border-color .15s;
}
.ds-side-profile__view:hover {
    background: var(--surface-3);
    color: var(--text);
    border-color: var(--border-strong);
}

/* ─── MOBILE: side-profile becomes a 2-EQUAL-column card ──────────────────
   Layout per the user's spec:
     ┌─────────────┬─────────────────────┐
     │  [avatar]   │  Bekijk profiel     │
     │   Naam      │  Profiel publiceren │
     └─────────────┴─────────────────────┘
   Both columns are exactly 1fr (= equal width, fills the whole card).
   Left column: avatar on top, name directly under it.
   Right column: two equally-sized buttons stacked vertically — same height,
   same font, same padding (the original "Bekijk profiel" pill was tiny next
   to the larger publish CTA; we normalise both to the same look).
   The "Publiceer profiel" / status pill is the .ds-side-status element that
   JS moves into this card on mobile (see account-portal.js → applyMobileLayout). */
@media (max-width: 880px) {
    .ds-side-profile {
        display: grid;
        grid-template-columns: 1fr 1fr;       /* equal-width columns */
        grid-template-rows: auto auto;
        align-items: center;
        justify-items: stretch;
        gap: 8px 14px;
        text-align: center;
        padding: 16px 16px 18px;
    }
    .ds-side-profile__avatar {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        align-self: end;                       /* sit just above the name */
        width: 84px; height: 84px;
        font-size: 28px;
        margin: 0;
    }
    .ds-side-profile__name {
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
        align-self: start;
        font-size: 15px;
        margin: 0;
        padding-top: 2px;
    }
    /* Right column — two identical-looking pill buttons stacked. Override the
       original tiny pill of __view so it matches the publish CTA in size + font. */
    .ds-side-profile__view {
        grid-column: 2;
        grid-row: 1;
        justify-self: stretch;
        align-self: end;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        padding: 10px 14px;
        border-radius: 10px;
        line-height: 1.2;
        min-height: 40px;
        box-sizing: border-box;
    }
    /* Status / Publiceer pill — same SIZE as __view but brand BACKGROUND. */
    .ds-side-profile > .ds-side-status {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        justify-self: stretch;
        align-self: start;
        margin: 0;
    }
    .ds-side-profile > .ds-side-status .ds-side-status__btn {
        width: 100%;
        min-height: 40px;
        height: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 13px;             /* match __view exactly */
        font-weight: 600;
        padding: 10px 14px;          /* match __view exactly */
        border-radius: 10px;
        background: linear-gradient(135deg, var(--brand), var(--brand-strong)) !important;
        color: #fff !important;
        border: 1px solid var(--brand) !important;
        white-space: nowrap;
        line-height: 1.2;
        box-sizing: border-box;
        box-shadow: 0 2px 6px rgba(255,46,108,.22);
    }
    .ds-side-profile > .ds-side-status .ds-side-status__btn i { color: #fff !important; }
    .ds-side-profile > .ds-side-status .ds-side-status__btn:disabled {
        opacity: .55;
        cursor: default;
    }
    /* Activated states use coloured pills like before (green / amber / grey)
       — override the brand gradient when the state matches. */
    .ds-side-profile > .ds-side-status[data-state="online"]  .ds-side-status__btn {
        background: rgba(22,163,74,.16) !important;
        color: var(--success) !important;
        border-color: rgba(22,163,74,.4) !important;
        box-shadow: none;
    }
    .ds-side-profile > .ds-side-status[data-state="offline"] .ds-side-status__btn {
        background: var(--surface-2) !important;
        color: var(--text-muted) !important;
        border-color: var(--border) !important;
        box-shadow: none;
    }
    .ds-side-profile > .ds-side-status[data-state="hidden"]  .ds-side-status__btn {
        background: rgba(245,158,11,.18) !important;
        color: #f59e0b !important;
        border-color: rgba(245,158,11,.4) !important;
        box-shadow: none;
    }
    .ds-side-profile > .ds-side-status[data-state="online"]  .ds-side-status__btn i,
    .ds-side-profile > .ds-side-status[data-state="offline"] .ds-side-status__btn i,
    .ds-side-profile > .ds-side-status[data-state="hidden"]  .ds-side-status__btn i {
        color: inherit !important;
    }
    /* Hint copy under the status pill — keep it small + left-aligned so it
       doesn't blow up the card height. */
    .ds-side-profile > .ds-side-status .ds-side-status__hint {
        font-size: 10.5px;
        margin: 4px 0 0;
        padding: 0;
        text-align: left;
        color: var(--text-soft);
    }
    /* The status dropdown menu — keep it absolutely positioned inside the
       side-status wrapper so it pops out below the pill without resizing
       the grid row. */
    .ds-side-profile > .ds-side-status .ds-side-status__menu {
        right: auto;
        left: 0;
        top: calc(100% + 4px);
        min-width: 160px;
    }
}

/* Status / Activeren control */
.ds-side-status { width: 100%; position: relative; }
.ds-side-status__btn {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    background: var(--surface-2);
    color: var(--text);
    transition: filter .15s, transform .05s;
}
.ds-side-status__btn:disabled { opacity: .65; cursor: default; }
.ds-side-status__btn:hover:not(:disabled) { filter: brightness(1.08); }
.ds-side-status__btn:active:not(:disabled) { transform: translateY(1px); }
.ds-side-status__caret { font-size: 10px; opacity: .8; margin-left: auto; }

/* When the status control lives inside .ds-account__primary-tabs it must look
   like a primary-tab row (same padding/alignment/full-width) but keep its
   own coloured background for the active CTA. */
.ds-side-status--in-nav { width: 100%; margin-bottom: 6px; position: relative; }
.ds-side-status--in-nav .ds-side-status__btn.ds-primary-tab {
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 600;
    justify-content: flex-start;
    text-align: left;
}
.ds-side-status--in-nav .ds-side-status__hint { padding: 0 6px; }

.ds-side-status[data-state="activate"] .ds-side-status__btn,
.ds-side-status[data-state="locked"] .ds-side-status__btn {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong)) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(255,46,108,.28);
    border: 0 !important;
}
.ds-side-status[data-state="activate"] .ds-side-status__btn i,
.ds-side-status[data-state="locked"]   .ds-side-status__btn i { color: #fff !important; }
.ds-side-status[data-state="locked"] .ds-side-status__btn {
    background: linear-gradient(135deg, #475569, #64748b) !important;
    box-shadow: none;
}
.ds-side-status[data-state="activate"] .ds-side-status__caret,
.ds-side-status[data-state="locked"]   .ds-side-status__caret { display: none; }
.ds-side-status[data-state="online"]  .ds-side-status__btn { background: rgba(22,163,74,.14) !important; color: var(--success) !important; }
.ds-side-status[data-state="offline"] .ds-side-status__btn { background: var(--surface-2) !important; color: var(--text-muted) !important; }
.ds-side-status[data-state="hidden"]  .ds-side-status__btn { background: rgba(245,158,11,.16) !important; color: #f59e0b !important; }
.ds-side-status[data-state="online"]  .ds-side-status__btn i,
.ds-side-status[data-state="offline"] .ds-side-status__btn i,
.ds-side-status[data-state="hidden"]  .ds-side-status__btn i { color: inherit !important; }

/* Status dot — `flex: 0 0` overrides `.ds-primary-tab > span { flex: 1 }`
   which was making the dot stretch across the row instead of staying round. */
.ds-side-status__dot {
    width: 9px; height: 9px;
    flex: 0 0 9px;
    min-width: 9px;
    max-width: 9px;
    border-radius: 50%;
    background: var(--text-soft);
    box-shadow: 0 0 0 0 currentColor;
    display: inline-block;
}
.ds-side-status__dot--online  { background: var(--success); box-shadow: 0 0 8px rgba(22,163,74,.6); }
.ds-side-status__dot--offline { background: var(--text-muted); }
.ds-side-status__dot--hidden  { background: #f59e0b; }
.ds-side-status[data-state="online"]  .ds-side-status__btn > .ds-side-status__dot { background: var(--success); box-shadow: 0 0 8px rgba(22,163,74,.55); }
.ds-side-status[data-state="offline"] .ds-side-status__btn > .ds-side-status__dot { background: currentColor; opacity: .7; }
.ds-side-status[data-state="hidden"]  .ds-side-status__btn > .ds-side-status__dot { background: #f59e0b; }
.ds-side-status[data-state="activate"] .ds-side-status__btn > .ds-side-status__dot,
.ds-side-status[data-state="locked"]   .ds-side-status__btn > .ds-side-status__dot { display: none; }

/* Dropdown menu */
.ds-side-status__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    padding: 6px;
    z-index: 60;
    display: flex; flex-direction: column; gap: 2px;
    animation: dsStatusFade .15s ease;
}
.ds-side-status__menu[hidden] { display: none !important; }
@keyframes dsStatusFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ds-side-status__opt {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: var(--text);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    transition: background .15s;
}
.ds-side-status__opt:hover { background: var(--surface-2); }
.ds-side-status__opt.is-current { background: var(--surface-3); font-weight: 700; }
.ds-side-status__hint {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--text-soft);
    line-height: 1.4;
    text-align: center;
}
.ds-side-status__hint:empty { display: none; }
.ds-side-status[data-state="locked"] .ds-side-status__hint { color: var(--text-muted); }

/* Slow pulse used to draw attention to the Profiel-tips card after the user
   clicks Activeren while the profile is still incomplete. */
@keyframes dsFlashHighlight {
    0%   { box-shadow: 0 0 0 0 rgba(255,46,108,.0), var(--shadow-sm); border-color: var(--border); }
    30%  { box-shadow: 0 0 0 6px rgba(255,46,108,.18), 0 6px 24px rgba(255,46,108,.18); border-color: var(--brand); }
    60%  { box-shadow: 0 0 0 3px rgba(255,46,108,.10), var(--shadow-md);                border-color: rgba(255,46,108,.55); }
    100% { box-shadow: 0 0 0 0 rgba(255,46,108,.0), var(--shadow-sm); border-color: var(--border); }
}
.ds-flash {
    animation: dsFlashHighlight 1.4s ease-in-out 2;
}
.ds-flash .ds-tips li[data-required="true"],
.ds-flash .ds-tip--required {
    animation: dsFlashHighlight 1.4s ease-in-out 2;
}

.ds-account__primary-tabs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 8px;
    box-shadow: var(--shadow-sm);
}
.ds-primary-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: var(--font-sans);
    transition: background .15s, color .15s;
}
.ds-primary-tab:hover {
    background: var(--surface-2);
    color: var(--text);
}
/* Active state — visually matches .ds-credit-pack--popular (subtle pink tint
   + pink outline, NOT a solid gradient) so the sidebar feels in-family with
   the rest of the dashboard cards and doesn't clash with the pink Activeren
   CTA right above it. */
.ds-primary-tab.is-active {
    background: linear-gradient(180deg, var(--brand-soft), var(--surface-2));
    color: var(--text);
    border: 1px solid var(--brand);
    /* Cancel the 1px border so the active tab doesn't push siblings around. */
    padding: 10px 13px;
    box-shadow: 0 4px 10px rgba(255,46,108,.10);
}
.ds-primary-tab.is-active i { color: var(--brand); }
[data-theme="dark"] .ds-primary-tab.is-active {
    background: linear-gradient(180deg, rgba(255,46,108,.12), var(--surface-2));
}
.ds-primary-tab i {
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.ds-primary-tab > span:not(.ds-primary-tab__badge) { flex: 1; min-width: 0; }
.ds-primary-tab__badge {
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 999px;
    margin-left: auto;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--surface);
}
.ds-primary-tab.is-active .ds-primary-tab__badge {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 0 0 2px var(--surface-2);
}
.ds-primary-tab__badge[hidden] { display: none; }

/* ─── MOBILE: account nav becomes a slider ─────────────────────────────────
   Layout per the user's spec:
     Row 1 — Profiel publiceren (the .ds-side-status CTA) pinned full width
             so the activation CTA is always visible.
     Row 2 — Slider: [← prev]  [active tab centered]  [next →]
   Non-active tabs are hidden; the arrows wrap around at the ends so
   the cycle is endless. Identical treatment applies to .ds-account__tabs
   (the secondary Profiel sub-tabs) further down.
   Desktop (>880px) keeps the original vertical sidebar — these rules don't
   apply there. */
@media (max-width: 880px) {
    .ds-account__primary-tabs {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        overflow: visible;          /* override the desktop overflow rule */
        padding: 8px;
    }
    /* Row 1: the activation CTA, full width, sits above the slider */
    .ds-account__primary-tabs > .ds-side-status {
        flex: 0 0 100%;
        width: 100%;
        order: -1;
        margin-bottom: 4px;
    }
    /* Slider tabs: hide non-active; show only the active one in the middle */
    .ds-account__primary-tabs > .ds-primary-tab[data-primary] {
        display: none;
    }
    .ds-account__primary-tabs > .ds-primary-tab[data-primary].is-active {
        display: inline-flex;
        /* width:auto + flex-basis:0 stops the desktop `width:100%` rule from
           inflating this item's flex-basis to a full row — without this
           override the active tab wraps onto its own line and the arrows
           drop above/below it. flex-grow:1 still fills the remaining space
           between the two 36px arrow circles. */
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        order: 1;
        white-space: nowrap;
        text-align: center;
    }
}

/* ─── Slider arrows (injected by account-portal.js) ────────────────────────
   Hidden on desktop, surfaced on mobile by the @media rule below. The arrow
   buttons live as siblings of the tab buttons inside the nav so they can be
   ordered into the flex row alongside the active tab. */
.ds-slider-arrow { display: none; }   /* hidden on desktop */

@media (max-width: 880px) {
    .ds-slider-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        border: 1px solid var(--border);
        border-radius: 50%;
        background: var(--surface-2);
        color: var(--text);
        cursor: pointer;
        font-size: 13px;
        padding: 0;
        font-family: inherit;
        transition: background .15s, transform .12s;
    }
    .ds-slider-arrow:hover { background: var(--surface); }
    .ds-slider-arrow:active { transform: scale(0.94); }
    .ds-slider-arrow--prev { order: 0; }
    .ds-slider-arrow--next { order: 2; }
}

/* Secondary tabs nav (sub-tabs under Overzicht) */
.ds-account__tabs {
    display: flex;
    gap: 4px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 6px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}
.ds-account__tabs::-webkit-scrollbar { display: none; }
.ds-tab {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 12px;
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-sans);
    transition: all .15s;
    flex: 1 1 0;
    min-width: 0;
}
/* Mobile: secondary tabs (Info / Mogelijkheden / Tarieven / Foto's) get the
   same arrow-slider treatment as the primary tabs above. Pattern is shared. */
@media (max-width: 880px) {
    .ds-account__tabs {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;          /* one row: prev | active | next */
        align-items: center;
        gap: 6px;
        overflow: visible;
        padding: 6px;
    }
    .ds-account__tabs > .ds-tab[data-tab] {
        display: none;
    }
    .ds-account__tabs > .ds-tab[data-tab].is-active {
        display: inline-flex;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        order: 1;
        white-space: nowrap;
        text-align: center;
    }
}
.ds-tab:hover { background: var(--surface-2); color: var(--text); }
.ds-tab.is-active {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: #fff;
    box-shadow: 0 4px 12px rgba(255,46,108,.28);
}
.ds-tab i { font-size: 13px; }

/* ─── Tab panes ─── */
.ds-tabpane { display: none; }
.ds-tabpane.is-active { display: block; }
.ds-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .ds-cols-2 { grid-template-columns: 1fr; } }

/* ─── Tips list (with required-state highlighting) ─── */
.ds-tips { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ds-tips li.ds-tip {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text);
    margin: 0 !important;
}
.ds-tip > i { color: var(--brand); font-size: 14px; flex-shrink: 0; }
.ds-tip > span { flex: 1; line-height: 1.4; }
.ds-tip__cta {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    padding: 8px 10px;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
    border-top-right-radius: 400px;
    border-bottom-right-radius: 400px;
    font-size: 11px; font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
    flex-shrink: 0;
    transition: all .15s;
}
.ds-tip__cta:hover { border-color: var(--brand); color: var(--brand-strong); }

/* Required tips — amber border + subtle gradient (popular-card treatment,
   amber variant). The Verplicht pill carries the urgency; the leading icon
   is intentionally hidden in JS so the row reads cleanly. */
.ds-tip.is-required {
    background: linear-gradient(180deg, rgba(245,158,11,.10), var(--surface-2)) !important;
    border: 1px solid var(--warning) !important;
    border-top: 1px solid var(--warning) !important;
    border-left: 1px solid var(--warning) !important;
    box-shadow: 0 4px 10px rgba(245,158,11,.10);
}
[data-theme="dark"] .ds-tip.is-required {
    background: linear-gradient(180deg, rgba(245,158,11,.12), var(--surface-2)) !important;
}
.ds-tip__badge {
    display: inline-block;
    background: var(--warning);
    color: #422006;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 7px;
    border-radius: 999px;
    margin-right: 6px;
    vertical-align: middle;
    margin-left:10px;
    margin-bottom: 2px;
}
.ds-tip.is-required .ds-tip__cta {
    border-color: var(--warning);
    color: var(--warning);
}
.ds-tip.is-required .ds-tip__cta:hover {
    background: var(--warning);
    color: #422006;
}
.ds-tip.is-required .ds-tip__cta i { font-size: 10px; margin-left: 3px; }
.ds-tip.is-complete {
    background: rgba(22,163,74,.08) !important;
    border-color: rgba(22,163,74,.40) !important;
    border-top: 1px solid rgba(22,163,74,.40) !important;
    padding-top: 7px !important;
    padding-bottom: 8px !important;
}
.ds-tip.is-complete > i { color: var(--success); }

/* ─── Quick actions ─── */
.ds-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .ds-quick-actions { grid-template-columns: 1fr; } }
.ds-quick-action {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--font-sans);
    display: flex; align-items: center; gap: 10px;
    transition: all .15s;
}
.ds-quick-action:hover {
    border-color: var(--brand);
    color: var(--brand-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.ds-quick-action i { color: var(--brand); font-size: 14px; }

/* ─── Recent activity ─── */
.ds-recent-activity { display: flex; flex-direction: column; gap: 10px; }
.ds-activity-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.ds-activity-row__icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--brand-soft); color: var(--brand-strong);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 13px;
}
[data-theme="dark"] .ds-activity-row__icon { background: rgba(255,46,108,.15); color: #ffb3c8; }
.ds-activity-row__body { flex: 1; min-width: 0; }
.ds-activity-row__title { font-size: 13px; font-weight: 700; color: var(--text); }
.ds-activity-row__title small { color: var(--text-muted); font-weight: 500; margin-left: 6px; }
.ds-activity-row__meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.ds-activity-row__when { color: var(--text-soft); font-size: 11px; white-space: nowrap; }

/* ─── Forms ─── */
.ds-form .v2-card__title { margin-bottom: 20px; }
.ds-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ds-form-grid--prices { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) {
    .ds-form-grid { grid-template-columns: 1fr 1fr; }
    .ds-form-grid--prices { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .ds-form-grid { grid-template-columns: 1fr; }
    .ds-form-grid--prices { grid-template-columns: 1fr 1fr; }
}
.ds-field { display: flex; flex-direction: column; gap: 6px; }
.ds-field--block { grid-column: 1 / -1; }
.ds-field > span {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted);
}
.ds-field input,
.ds-field select,
.ds-field textarea {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    color: var(--text) !important;
    font-size: 14px !important;
    font-family: var(--font-sans) !important;
    transition: border-color .15s, background .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
}
.ds-field input:focus,
.ds-field select:focus,
.ds-field textarea:focus {
    outline: none !important;
    border-color: var(--brand) !important;
    background: var(--surface) !important;
    box-shadow: 0 0 0 3px rgba(255,46,108,.14) !important;
}
.ds-field textarea { resize: vertical; min-height: 100px; }
.ds-section-h {
    margin: 26px 0 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text);
    display: flex; align-items: center; gap: 8px;
}
.ds-section-h i { color: var(--brand); }
.ds-form-actions { margin-top: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ds-form-msg { font-size: 13px; font-weight: 600; }
.ds-form-msg.is-ok  { color: var(--success); }
.ds-form-msg.is-err { color: var(--danger); }

/* ─── Photos grid ─── */
.ds-photo-add { display: flex; gap: 8px; margin-bottom: 18px; }
.ds-photo-add input {
    flex: 1;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-sans);
}
.ds-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.ds-photo-card {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    aspect-ratio: 3/4;
    overflow: hidden;
}
.ds-photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-photo-card__main {
    position: absolute; top: 8px; left: 8px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #422006;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    z-index: 1;
}
.ds-photo-card__actions {
    position: absolute; bottom: 6px; right: 6px;
    display: flex; gap: 4px;
    opacity: 0;
    transition: opacity .15s;
}
.ds-photo-card:hover .ds-photo-card__actions { opacity: 1; }
.ds-photo-btn {
    width: 28px; height: 28px;
    background: rgba(0,0,0,.7);
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
}
.ds-photo-btn:hover { background: rgba(0,0,0,.85); }
.ds-photo-btn--danger:hover { background: var(--danger); }

/* ─── Services grid (Mogelijkheden) ─── */
.ds-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}
.ds-svc {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    user-select: none;
    transition: all .15s;
}
.ds-svc:hover { border-color: var(--border-strong); }
.ds-svc input { appearance: none; width: 16px; height: 16px; border: 2px solid var(--border-strong); border-radius: 4px; flex-shrink: 0; cursor: pointer; transition: all .15s; }
.ds-svc.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
[data-theme="dark"] .ds-svc.is-on { background: rgba(255,46,108,.12); color: #ffb3c8; }
.ds-svc.is-on input { background: var(--brand); border-color: var(--brand); position: relative; }
.ds-svc.is-on input::after {
    content: ''; position: absolute;
    left: 3px; top: -1px;
    width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ─── Profile-completeness progress bar ─── */
.ds-progress {
    margin: 6px 0 22px;
    max-width: 540px;
}
/* When the bar lives inside the Profiel-tips card, snap its margins so it
   sits flush below the title and above the tips list. */
.ds-progress--in-tips {
    margin: 0 0 14px;
    max-width: none;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
}
/* Progress bar used IN PLACE of a card title — bigger label, no surrounding
   chrome (the v2-card already provides the surface). */
.ds-progress--as-title {
    margin: 0 0 16px;
    max-width: none;
    padding: 0;
    background: none;
    border: 0;
}
.ds-progress--as-title .ds-progress__row {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text);
}
.ds-progress--as-title .ds-progress__label {
    text-transform: none;
    letter-spacing: -0.005em;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    display: inline-flex; align-items: center; gap: 10px;
}
.ds-progress--as-title .ds-progress__label i { color: var(--brand); font-size: 14px; }
.ds-progress--as-title .ds-progress__pct { font-size: 18px; }
.ds-progress--as-title .ds-progress__bar { height: 10px; }
.ds-progress__row {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 6px;
    font-size: 12px;
}
.ds-progress__label { color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ds-progress__pct {
    color: var(--text);
    font-weight: 800;
    font-size: 14px;
    background: linear-gradient(135deg, var(--brand), #ff8b3d);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ds-progress__bar {
    height: 8px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.ds-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand), #ff8b3d);
    border-radius: 999px;
    transition: width .4s ease;
    box-shadow: 0 0 8px rgba(255,46,108,.4);
}

/* ─── Drag & drop photo upload zone ─── */
.ds-dropzone {
    display: block;
    border: 2px dashed var(--border-strong);
    border-radius: 14px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    background: var(--surface-2);
    transition: all .2s ease;
    margin-bottom: 14px;
}
.ds-dropzone:hover,
.ds-dropzone.is-dragging {
    border-color: var(--brand);
    background: var(--brand-soft);
    transform: scale(1.005);
}
[data-theme="dark"] .ds-dropzone:hover,
[data-theme="dark"] .ds-dropzone.is-dragging { background: rgba(255,46,108,.10); }
.ds-dropzone__icon {
    font-size: 36px;
    color: var(--brand);
    margin-bottom: 10px;
}
.ds-dropzone__title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ds-dropzone__sub { font-size: 12px; color: var(--text-muted); }
.ds-dropzone__sub span { color: var(--brand-strong); font-weight: 600; }

/* Upload queue (per-file rows while uploading) */
.ds-upload-queue { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ds-upload-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    transition: background .2s;
}
.ds-upload-row.is-ok  { background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.35); }
.ds-upload-row.is-err { background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.35); }
.ds-upload-row__thumb {
    width: 48px; height: 48px; border-radius: 8px;
    background: var(--surface-3) center/cover no-repeat;
    flex-shrink: 0;
}
.ds-upload-row__body { flex: 1; min-width: 0; }
.ds-upload-row__name { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.ds-upload-row__bar { height: 4px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.ds-upload-row__bar-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--brand), #ff8b3d);
    transition: width .2s;
}
.ds-upload-row__msg { font-size: 11px; color: var(--text-muted); font-weight: 600; min-width: 60px; text-align: right; }
.ds-upload-row.is-ok .ds-upload-row__msg  { color: var(--success); }
.ds-upload-row.is-err .ds-upload-row__msg { color: var(--danger); }

/* ─── Credits tab ─── */
.ds-credits-balance { text-align: center; padding: 28px; }
.ds-credits-display { display: flex; flex-direction: column; align-items: center; margin: 10px 0; }
.ds-credits-display__amount {
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.04em;
}
.ds-credits-display__label { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
.ds-credits-status { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* Prominent credits-status banner on the Overzicht pane */
.ds-credits-status-banner {
    margin: 18px 0 0;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(251,191,36,.10), rgba(255,46,108,.06));
    border: 1px solid rgba(251,191,36,.45);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.ds-credits-status-banner .ds-credit-active {
    background: var(--surface);
    border-color: var(--border-strong);
}
.ds-credit-active {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(251,191,36,.15);
    border: 1px solid rgba(251,191,36,.4);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.ds-credits-packs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
/* Mobile keeps the 2×2 layout (50 / 100 / 250 / 500 credits). Previous rule
   dropped to a single column under 480px which made the section scroll
   forever on iPhone. */
@media (max-width: 480px) {
    .ds-credits-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ds-credit-pack {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 14px;
    cursor: pointer;
    font-family: var(--font-sans);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    transition: all .15s;
}
.ds-credit-pack:hover {
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.ds-credit-pack--popular {
    border-color: var(--brand);
    background: linear-gradient(180deg, var(--brand-soft), var(--surface-2));
}
[data-theme="dark"] .ds-credit-pack--popular { background: linear-gradient(180deg, rgba(255,46,108,.10), var(--surface-2)); }
.ds-credit-pack__badge {
    position: absolute; top: -10px; right: 10px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #422006;
    font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .04em;
}
.ds-credit-pack__amt {
    font-size: 28px; font-weight: 800;
    color: var(--text);
    line-height: 1;
}
.ds-credit-pack__label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ds-credit-pack__price {
    font-size: 16px; font-weight: 700;
    color: var(--brand-strong);
    margin-top: 6px;
}

.ds-spend-options { display: flex; flex-direction: column; gap: 10px; }
.ds-spend-option {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    font-family: var(--font-sans);
    text-align: left;
    transition: all .15s;
}
.ds-spend-option:hover {
    border-color: var(--brand);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.ds-spend-option__icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px; flex-shrink: 0;
}
.ds-spend-option__body { flex: 1; min-width: 0; }
.ds-spend-option__title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.ds-spend-option__desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.ds-spend-option__cost {
    font-size: 22px; font-weight: 800; color: var(--text);
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    flex-shrink: 0;
    line-height: 1;
}
.ds-spend-option__cost small { font-size: 11px; font-weight: 600; color: var(--text-muted); display: block; margin-top: 2px; -webkit-text-fill-color: var(--text-muted); }

/* ─── User-type radio grid (registration) ─── */
.ds-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 4px;
}
@media (max-width: 540px) { .ds-type-grid { grid-template-columns: 1fr; } }
.ds-type {
    cursor: pointer;
    display: block;
}
.ds-type input { position: absolute; opacity: 0; pointer-events: none; }
.ds-type__inner {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px 12px;
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: 14px;
    color: var(--text);
    text-align: center;
    transition: all .15s;
    height: 100%;
}
.ds-type__inner i {
    font-size: 22px;
    color: var(--text-muted);
    margin-bottom: 4px;
    transition: color .15s;
}
.ds-type__inner strong { font-size: 14px; font-weight: 700; }
.ds-type__inner span { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
.ds-type input:checked + .ds-type__inner {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-strong);
    box-shadow: 0 6px 16px rgba(255,46,108,.2);
}
[data-theme="dark"] .ds-type input:checked + .ds-type__inner {
    background: rgba(255,46,108,.14);
}
.ds-type input:checked + .ds-type__inner i { color: var(--brand-strong); }
.ds-type input:checked + .ds-type__inner span { color: var(--brand-strong); opacity: .85; }

/* ─── Verification ─── */
.ds-verif-status { margin-bottom: 4px; }
.ds-verif-status__card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--border);
    margin-bottom: 16px;
}
.ds-verif-status__card i { font-size: 24px; flex-shrink: 0; }
.ds-verif-status__card strong { font-size: 15px; color: var(--text); display: block; margin-bottom: 2px; }
.ds-verif-status__card span { font-size: 13px; color: var(--text-muted); line-height: 1.4; display: block; }
.ds-verif-status__card.is-pending  { background: rgba(217,119,6,.10); border-color: rgba(217,119,6,.5); }
.ds-verif-status__card.is-pending i { color: var(--warning); }
.ds-verif-status__card.is-approved { background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.5); }
.ds-verif-status__card.is-approved i { color: var(--success); }
.ds-verif-status__card.is-denied   { background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.5); }
.ds-verif-status__card.is-denied i { color: var(--danger); }
.ds-verif-status__card.is-changes  { background: rgba(30,144,255,.10); border-color: rgba(30,144,255,.5); }
.ds-verif-status__card.is-changes i { color: var(--accent); }

.ds-verif-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}
@media (max-width: 900px) { .ds-verif-slots { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ds-verif-slots { grid-template-columns: 1fr; } }
.ds-verif-slot {
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: 14px;
    padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
}
.ds-verif-slot__illustration {
    position: relative;
    width: 100%;
    aspect-ratio: 3/2;
    background: linear-gradient(135deg, rgba(255,46,108,.08), rgba(30,144,255,.08));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.06);
    overflow: hidden;
    transition: border-color .2s;
}
.ds-verif-slot__illustration svg {
    width: 100%;
    height: 100%;
    max-height: 110px;
    display: block;
}
.ds-verif-slot__illustration.is-filled {
    padding: 0;
    border-color: var(--success);
    box-shadow: 0 0 0 2px rgba(22,163,74,.25);
}
.ds-verif-slot__illustration.is-filled svg { display: none; }
.ds-verif-slot__illustration.is-loading::after {
    content: 'Uploaden…';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.55); color: #fff;
    font-size: 13px; border-radius: 12px;
    z-index: 2;
}
.ds-verif-slot__label strong { font-size: 13px; font-weight: 700; color: var(--text); display: block; margin-bottom: 2px; }
.ds-verif-slot__label span { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.ds-verif-slot__photo {
    aspect-ratio: 4/3;
    background: var(--surface-3) center/cover no-repeat;
    border-radius: 10px;
    position: relative;
    border: 1px solid var(--border);
}
.ds-verif-slot__photo.is-filled { border-color: var(--success); }
.ds-verif-slot__photo.is-loading::after {
    content: 'Uploaden…';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.5); color: #fff;
    font-size: 13px; border-radius: 10px;
}
.ds-verif-slot__btn { padding: 8px 14px !important; font-size: 12px !important; }

.ds-verif-promise {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 16px;
    background: var(--surface-2);
    border-radius: 12px;
    font-size: 12px;
    color: var(--text-muted);
}
.ds-verif-promise__item { display: flex; align-items: center; gap: 8px; }
.ds-verif-promise__item i { color: var(--success); }

/* ─── Messages/Reservations list ─── */
.ds-msg-list { display: flex; flex-direction: column; gap: 10px; }
.ds-msg-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    border-radius: 10px;
    padding: 14px;
}
.ds-msg-card__head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    flex-wrap: wrap;
}
.ds-msg-card__head strong { color: var(--text); }
.ds-msg-card__email { color: var(--text-muted); font-size: 12px; }
.ds-msg-card__when  { color: var(--text-soft); font-size: 11px; margin-left: auto; }
.ds-msg-card__body  { color: var(--text-muted); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.ds-msg-card--verzonden { border-left-color: var(--accent); }

/* ─── Conversation list rows (Mijn account → Berichten inbox) ─── */
.ds-msg-list { display: flex; flex-direction: column; gap: 8px; }
.ds-conv-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .05s;
}
.ds-conv-row:hover { background: var(--surface-3); border-color: var(--border-strong); }
.ds-conv-row:active { transform: translateY(1px); }
.ds-conv-row.is-pinned {
    border-color: rgba(251,191,36,.45);
    background: linear-gradient(180deg, rgba(251,191,36,.05), var(--surface-2));
}
.ds-conv-row__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(255,46,108,.18), rgba(30,144,255,.18)) center/cover no-repeat;
    border: 1px solid var(--border);
    position: relative;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-soft);
    font-size: 16px;
}
.ds-conv-row__pin {
    position: absolute;
    top: -4px; left: -4px;
    background: #fbbf24; color: #422006;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
    border: 2px solid var(--surface);
}
.ds-conv-row__body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.ds-conv-row__top {
    display: flex; align-items: baseline; gap: 8px;
}
.ds-conv-row__name {
    font-weight: 700;
    color: var(--text);
    font-size: 14px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
}
.ds-conv-row__when {
    color: var(--text-soft);
    font-size: 11px;
    margin-left: auto;
    flex-shrink: 0;
}
.ds-conv-row__snippet {
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.ds-conv-row__snippet b { color: var(--text); font-weight: 600; margin-right: 4px; }
.ds-conv-row__unread {
    background: var(--brand);
    color: #fff;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
}
.ds-conv-row__actions {
    position: relative;
    flex-shrink: 0;
    margin-left: 4px;
}
.ds-conv-row__menu-btn {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1;
    transition: background .15s, color .15s;
}
.ds-conv-row__menu-btn:hover { background: var(--surface); color: var(--text); }
.ds-conv-row__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    padding: 6px;
    z-index: 30;
    display: flex; flex-direction: column; gap: 2px;
    animation: dsStatusFade .15s ease;
}
.ds-conv-row__menu[hidden] { display: none !important; }
.ds-conv-row__menu-opt {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: var(--text);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    transition: background .15s, color .15s;
}
.ds-conv-row__menu-opt:hover { background: var(--surface-2); }
.ds-conv-row__menu-opt i { width: 14px; text-align: center; color: var(--text-muted); }
.ds-conv-row__menu-opt--danger { color: var(--danger); }
.ds-conv-row__menu-opt--danger:hover { background: rgba(220,38,38,.10); }
.ds-conv-row__menu-opt--danger i { color: var(--danger); }

/* Match the inbox / reservations / favorites card heights to the sidebar so
   the desktop layout stays balanced. Mobile keeps natural flow. */
@media (min-width: 881px) {
    #ds-messages-inbox,
    .ds-tabpane[data-pane="reservations"] > .v2-card,
    .ds-tabpane[data-pane="favorites"] > .v2-card {
        min-height: calc(100vh - 600px);
        display: flex;
        flex-direction: column;
    }
    #ds-messages-inbox #ds-messages-list,
    .ds-tabpane[data-pane="reservations"] #ds-reservations-list,
    .ds-tabpane[data-pane="favorites"] #ds-favorites-list {
        flex: 1;
    }
}

/* ─── Instellingen pane (settings cards) ─── */
.ds-settings-card + .ds-settings-card { margin-top: 16px; }
.ds-settings-card .v2-card__title { margin-bottom: 10px; }
.ds-settings-hint { color: var(--text-muted); font-size: 13px; margin: 0 0 14px; line-height: 1.5; }
.ds-settings-badge {
    display: inline-block;
    background: rgba(245,158,11,.15);
    color: #f59e0b;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-left: 10px;
    vertical-align: middle;
}
.ds-settings-badge--inline {
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 9px;
    vertical-align: 1px;
}

/* Read-only key/value rows (used in Inloggegevens card) */
.ds-settings-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    font-size: 13px;
}
.ds-settings-row:first-of-type { border-top: 0; padding-top: 0; }
.ds-settings-row__label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.ds-settings-row__value {
    color: var(--text);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}
.ds-settings-row__meta {
    display: block;
    font-size: 11px;
    color: var(--text-soft);
    font-weight: 400;
    margin-top: 2px;
}

/* Stacked option lists (checkboxes/radios) */
.ds-settings-options {
    display: flex; flex-direction: column; gap: 10px;
}
.ds-settings-options--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}
.ds-set-check, .ds-set-radio {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ds-set-check:hover, .ds-set-radio:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
}
.ds-set-check input[type="checkbox"],
.ds-set-radio input[type="radio"] {
    accent-color: var(--brand);
    width: 16px; height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}
.ds-set-check > span,
.ds-set-radio > span {
    flex: 1;
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
    display: flex; flex-direction: column; gap: 2px;
}
.ds-set-check small,
.ds-set-radio small {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
}
.ds-set-check input[type="checkbox"]:checked ~ span strong,
.ds-set-radio input[type="radio"]:checked ~ span {
    color: var(--brand);
}
.ds-set-check:has(input:checked),
.ds-set-radio:has(input:checked) {
    background: linear-gradient(180deg, rgba(255,46,108,.06), var(--surface-2));
    border-color: var(--brand);
}
.ds-settings-options--inline .ds-set-radio {
    flex: 0 0 auto;
    align-items: center;
    padding: 8px 14px;
}
.ds-set-flag { font-size: 16px; margin-right: 4px; }

/* Toggle rows */
.ds-settings-toggles { display: flex; flex-direction: column; gap: 10px; }
.ds-set-toggle {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.ds-set-toggle__body { display: flex; flex-direction: column; gap: 2px; }
.ds-set-toggle__body strong { color: var(--text); font-size: 13px; }
.ds-set-toggle__body small { color: var(--text-muted); font-size: 12px; line-height: 1.4; }

/* Country block list */
.ds-settings-country {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-bottom: 12px;
}
.ds-set-input {
    flex: 1;
    min-width: 180px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
}
.ds-set-input:focus { outline: none; border-color: var(--brand); }
.ds-set-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-set-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px 6px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}
.ds-set-chip button {
    background: transparent; border: 0; cursor: pointer;
    color: var(--text-muted);
    font-size: 13px; padding: 0; line-height: 1;
}
.ds-set-chip button:hover { color: var(--danger); }
.ds-set-chips:empty::before {
    content: 'Geen landen geblokkeerd.';
    color: var(--text-soft);
    font-size: 12px;
    font-style: italic;
}

/* Account section (lighter than the old "Gevarenzone" treatment — only the
   delete-account row still feels danger-y via its red button). */
.ds-settings-danger { border-color: var(--border) !important; }
.ds-danger-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}
.ds-danger-row:first-of-type { border-top: 0; padding-top: 4px; }
.ds-danger-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ds-danger-row__text strong { color: var(--text); font-size: 13px; }
.ds-danger-row__text small { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.ds-danger-row .v2-btn { flex: 0 0 auto; }
@media (max-width: 540px) {
    .ds-danger-row { flex-direction: column; align-items: flex-start; }
}

/* Single-row password form: old + new + button on one line */
.ds-pw-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}
.ds-pw-row input[type="password"] {
    flex: 1 1 180px;
    min-width: 0;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
    transition: border-color .15s;
}
.ds-pw-row input[type="password"]:focus { outline: none; border-color: var(--brand); }
.ds-pw-row__btn { flex: 0 0 auto; padding: 10px 18px; }

/* Voorkeurstaal — single-row chip with checkbox + flag + name */
.ds-lang-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ds-lang-opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
    flex: 0 0 auto;
    transition: background .15s, border-color .15s, color .15s;
}
.ds-lang-opt:hover { background: var(--surface-3); border-color: var(--border-strong); }
.ds-lang-opt input[type="radio"] {
    accent-color: var(--brand);
    width: 14px; height: 14px;
    flex-shrink: 0;
    margin: 0;
}
.ds-lang-opt .ds-set-flag { font-size: 16px; line-height: 1; }
.ds-lang-opt .ds-lang-name { white-space: nowrap; }
.ds-lang-opt:has(input:checked) {
    background: linear-gradient(180deg, rgba(255,46,108,.08), var(--surface-2));
    border-color: var(--brand);
    color: var(--brand-strong);
}

/* Opslaan bar pinned at bottom of settings */
.ds-settings-savebar {
    margin-top: 18px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
}
.ds-settings-savebar__hint {
    color: var(--text-muted);
    font-size: 12px;
    flex: 1;
}
.ds-settings-savebar .v2-btn { flex: 0 0 auto; padding: 10px 22px; }
.ds-settings-savebar .ds-form-msg { flex-shrink: 0; }
@media (max-width: 540px) {
    .ds-settings-savebar { flex-direction: column; align-items: stretch; }
    .ds-settings-savebar .v2-btn { width: 100%; }
}

/* Floating language switcher pinned to the bottom-right of every public
   page (injected by server.js into [data-i18n-switcher]). The right offset
   leaves room for the theme-toggle button that lives in the same corner. */
#ds-i18n-fab {
    position: fixed;
    bottom: 16px;
    right: 70px;
    z-index: 1500;
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
@media (max-width: 540px) {
    #ds-i18n-fab { bottom: 12px; right: 60px; }
    #ds-i18n-fab button { padding: 4px 8px; font-size: 10px; }
}

/* ─── Inline language switcher (rendered by i18n.js into any element with
   [data-i18n-switcher]). Inherits typography from its container. */
[data-i18n-switcher] {
    display: inline-flex;
    gap: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
    vertical-align: middle;
}
[data-i18n-switcher] button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
    letter-spacing: .02em;
    transition: background .15s, color .15s;
}
[data-i18n-switcher] button:hover { background: var(--surface-3); color: var(--text); }
[data-i18n-switcher] button.is-active {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 2px 6px rgba(255,46,108,.25);
}

/* ─── Conversation view (single thread) ─── */
.ds-conversation {
    /* Fixed-height layout: header / scrolling body / reply composer.
       Matches the sticky-sidebar viewport so both columns feel balanced. */
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    min-height: 480px;
    max-height: 760px;
    padding: 18px;
}
.ds-conv-header {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.ds-conv-header__who { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.ds-conv-header__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(255,46,108,.18), rgba(30,144,255,.18)) center/cover no-repeat;
    border: 1px solid var(--border);
}
.ds-conv-header__name {
    font-weight: 700;
    color: var(--text);
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-conv-back {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background .15s, color .15s, border-color .15s;
}
.ds-conv-back:hover {
    background: var(--surface-3);
    color: var(--text);
    border-color: var(--border-strong);
}
.ds-conv-back i { font-size: 11px; }

.ds-conv-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 10px;
    padding-right: 4px;
}

/* Reply composer */
.ds-conv-compose {
    display: flex; align-items: flex-end; gap: 8px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.ds-conv-compose__input {
    flex: 1;
    min-height: 40px;
    max-height: 140px;
    resize: none;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.4;
    transition: border-color .15s, background .15s;
}
.ds-conv-compose__input:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--surface);
}
.ds-conv-compose__send {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(255,46,108,.28);
    transition: filter .15s, transform .05s;
}
.ds-conv-compose__send:disabled { opacity: .5; cursor: not-allowed; }
.ds-conv-compose__send:hover:not(:disabled) { filter: brightness(1.08); }
.ds-conv-compose__send:active:not(:disabled) { transform: translateY(1px); }

/* Read receipt ticks (only on sent bubbles) */
.ds-conv-bubble__receipt {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    font-size: 10px;
    opacity: .85;
}
.ds-conv-bubble--sent .ds-conv-bubble__receipt i { color: rgba(255,255,255,.85); }
.ds-conv-bubble--sent.is-read .ds-conv-bubble__receipt i { color: #5fe3a6; }
.ds-conv-bubble {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.ds-conv-bubble__when { font-size: 10px; opacity: .65; margin-top: 4px; }
.ds-conv-bubble--received {
    align-self: flex-start;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}
.ds-conv-bubble--sent {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: #fff;
    border-bottom-right-radius: 4px;
}
.ds-conv-bubble--sent .ds-conv-bubble__when { color: rgba(255,255,255,.85); }

/* ─── Navbar "Mijn account" unread indicator ────────────────────────────
   - Red dot on the top-level Mijn account link
   - Per-item dot inside the dropdown for Berichten / Reserveringen */
.ds-nav-dropdown > a[data-ds-account-linked] { position: relative; }
.ds-nav-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ff2e6c;
    box-shadow: 0 0 0 2px var(--surface), 0 0 6px rgba(255,46,108,0.7);
    margin-left: 6px;
    vertical-align: middle;
}
.ds-nav-dropdown__menu a { position: relative; }
.ds-nav-dropdown__menu a .ds-nav-dot {
    position: absolute;
    right: 14px; top: 50%;
    margin-left: 0;
    transform: translateY(-50%);
    box-shadow: 0 0 0 2px var(--bg, #fff);
}
@media (prefers-color-scheme: dark) {
    .ds-nav-dot { box-shadow: 0 0 0 2px var(--bg), 0 0 6px rgba(255,46,108,0.7); }
}

/* ─── Outgoing reservations (account → Reserveringen tab) ──────────────── */
.ds-out-count {
    display: inline-block;
    background: var(--brand, #ff2e6c);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 11px;
    margin-left: 8px;
    vertical-align: middle;
}
.ds-out-list { display: flex; flex-direction: column; gap: 10px; }
.ds-out-card {
    display: flex;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 12px;
    align-items: center;
}
.ds-out-card__avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--surface-2);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    color: var(--text-muted, #888);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.ds-out-card__body { flex: 1; min-width: 0; }
.ds-out-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.ds-out-card__name { font-weight: 700; font-size: 14px; color: var(--text); }
.ds-out-card__name a { color: inherit; text-decoration: none; }
.ds-out-card__name a:hover { color: var(--brand, #ff2e6c); }
.ds-out-card__status {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 2px 9px;
    border-radius: 10px;
}
.ds-out-card__status--Ongelezen   { background: rgba(255,46,108,.14); color: var(--brand, #ff2e6c); }
.ds-out-card__status--Gelezen     { background: rgba(96,165,250,.14); color: #60a5fa; }
.ds-out-card__status--Klaar       { background: rgba(52,211,153,.16); color: #22c55e; }
.ds-out-card__status--Done        { background: rgba(160,160,180,.16); color: var(--text-muted, #888); }
.ds-out-card__status--Geannuleerd { background: rgba(251,191,36,.18); color: #f59e0b; }
.ds-out-card__meta { color: var(--text-muted, #888); font-size: 12.5px; margin-top: 3px; line-height: 1.5; }
.ds-out-card__meta b { color: var(--text); font-weight: 600; }
.ds-out-card__actions { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.ds-out-card__btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .15s;
}
.ds-out-card__btn:hover { border-color: var(--brand, #ff2e6c); color: var(--brand, #ff2e6c); }
.ds-out-card__btn--primary {
    background: linear-gradient(135deg, var(--brand, #ff2e6c), var(--brand-strong, #b937ff));
    color: #fff;
    border: 0;
}
.ds-out-card__btn--primary:hover { color: #fff; filter: brightness(1.06); }
.ds-out-card__btn--pay {
    background: linear-gradient(135deg, #22c55e, #10b981);
    color: #fff;
    border: 0;
}
.ds-out-card__btn--pay:hover { color: #fff; filter: brightness(1.08); }
@media (max-width: 600px) {
    .ds-out-card { flex-direction: column; align-items: stretch; text-align: left; }
    .ds-out-card__avatar { width: 44px; height: 44px; align-self: flex-start; }
}

/* ─── Reservation cards inside conversations ──────────────────────────── */
.ds-res-card {
    max-width: 82%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    font-size: 13px;
}
.ds-res-card--received { align-self: flex-start; border-bottom-left-radius: 4px; }
.ds-res-card--sent     { align-self: flex-end;   border-bottom-right-radius: 4px; }
.ds-res-card__head {
    padding: 10px 14px;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(255,46,108,.12), rgba(185,55,255,.12));
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.ds-res-card__head--confirmed {
    background: linear-gradient(135deg, rgba(52,211,153,.16), rgba(96,165,250,.16));
}
.ds-res-card__head--canceled {
    background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(248,113,113,.18));
}
.ds-res-card__body { padding: 12px 14px 14px; line-height: 1.55; color: var(--text); }
.ds-res-card__row { display: flex; gap: 8px; padding: 3px 0; }
.ds-res-card__row .k { color: var(--text-soft, #888); min-width: 90px; font-size: 12.5px; }
.ds-res-card__row .v { color: var(--text); font-weight: 500; font-size: 13px; }
.ds-res-card__pay {
    margin-top: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(255,46,108,.10), rgba(185,55,255,.10));
    border: 1px solid rgba(255,46,108,.28);
    border-radius: 10px;
}
.ds-res-card__pay-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--brand, #ff2e6c);
    font-weight: 700;
    margin-bottom: 8px;
}
.ds-res-card__pay-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--brand, #ff2e6c), var(--brand-strong, #b937ff));
    color: #fff !important;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(255,46,108,.25);
}
.ds-res-card__pay-btn:hover { filter: brightness(1.06); transform: translateY(-1px); transition: all .15s; }
.ds-res-card__pay-info { display: block; font-size: 11.5px; color: var(--text-soft, #888); margin-top: 10px; }
.ds-res-card__foot {
    padding: 7px 14px;
    font-size: 10.5px;
    color: var(--text-soft, #888);
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}

/* ─── Dark-mode overrides for hero & footer ────────────────────────────── */
[data-theme="dark"] .hero {
    background: linear-gradient(180deg, transparent 0%, rgba(255,46,108,.08) 100%);
}
[data-theme="dark"] .testimonial-heading span {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}

/* Ensure black hardcoded text in inline styles doesn't disappear in dark mode */
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:black"],
[data-theme="dark"] [style*="color: rgb(0, 0, 0)"] {
    color: var(--text) !important;
}
[data-theme="dark"] [style*="color:white"],
[data-theme="dark"] [style*="color: white"] {
    /* keep white text on dark backgrounds — leave alone */
}
[data-theme="dark"] [style*="background-color:white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"] {
    background: var(--surface) !important;
}
[data-theme="dark"] [style*="border-color: black"],
[data-theme="dark"] [style*="border-color:black"] {
    border-color: var(--border-strong) !important;
}
[data-theme="dark"] hr[style*="border-color: black"],
[data-theme="dark"] hr[style*="border-color:black"] {
    border-color: var(--border) !important;
}

/* Fix the dot/divider lines in profile pages where they used black */
[data-theme="dark"] .nav-logo {
    /* gradient stays */
}

/* ─── Favorites pane (Mijn account → Favorieten) ─────────────────────── */
.ds-favorites-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ds-favorites-empty {
    font-style: italic;
}
.ds-fav-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    max-height: 350px;
}
.ds-fav-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-soft);
}
.ds-fav-card__photo {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-3);
}
.ds-fav-card__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ds-fav-card__name {
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
}
.ds-fav-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
}
.ds-fav-card__meta i { margin-right: 4px; }
.ds-fav-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.ds-fav-card__actions .v2-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
}
.ds-fav-card__actions .ds-fav-remove {
    flex: 0 0 auto;
}
.v2-btn--sm {
    padding: 6px 10px;
    font-size: 12px;
}
.v2-btn--favorited {
    background: linear-gradient(135deg, rgba(255,46,108,.18), rgba(255,46,108,.08));
    color: var(--brand) !important;
    border-color: var(--brand) !important;
}
.v2-btn--favorited i { color: var(--brand) !important; }

/* ─── Required-field error highlight on Profiel-info form ───────────
   Triggered by the profile-form submit handler when a required input is
   empty (or Beschrijving is < 30 chars). Cleared on input/change. */
.ds-field.is-error > input,
.ds-field.is-error > select,
.ds-field.is-error > textarea {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, .06) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .15) !important;
    animation: dsFieldShake .35s ease-in-out;
}
.ds-field.is-error > span {
    color: #ef4444 !important;
}
@keyframes dsFieldShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    50%      { transform: translateX(4px); }
    75%      { transform: translateX(-2px); }
}

/* ─── Extra prices (per-mogelijkheid) rows ──────────────────────────── */
.ds-extra-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ds-extra-row {
    display: grid;
    grid-template-columns: 1fr 140px 40px;
    gap: 8px;
    align-items: center;
}
.ds-extra-row__service,
.ds-extra-row__price {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text);
    min-width: 0;
}
.ds-extra-row__service:focus,
.ds-extra-row__price:focus {
    outline: none;
    border-color: var(--brand);
}
.ds-extra-row__remove {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    transition: all .15s ease;
}
.ds-extra-row__remove:hover {
    color: var(--danger, #ef4444);
    border-color: var(--danger, #ef4444);
}
@media (max-width: 520px) {
    .ds-extra-row {
        grid-template-columns: 1fr 100px 36px;
        gap: 6px;
    }
}

/* ─── Prices layout: full-width if only one category present ─────────
   profilescript hides #ontvangstPrijsje or #escortPrijsje when that
   category has no prices set. We use a JS-set [data-prices] attribute
   on .v2-price-row to make the surviving column span the full width
   (cleaner than 50% with an empty slot next to it). */
.v2-price-row[data-prices="ontvangst"] > .v2-price-col:first-child,
.v2-price-row[data-prices="escort"]    > .v2-price-col:last-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}
.v2-price-row[data-prices="ontvangst"] > .v2-price-col:last-child,
.v2-price-row[data-prices="escort"]    > .v2-price-col:first-child {
    display: none !important;
}

/* ============================================================================
   2026-05 — Profile-card badge polish
   ----------------------------------------------------------------------------
   1) Restyle the in-card Gold (fa-crown) + Verified (fa-circle-check) icons
      as pill badges matching the profile-page trust-badges
      (blue accent for verified, gold gradient for premium).
   2) Hide the legacy "Geen omschrijving bijgevoegd" placeholder injected by
      v2-enhance.js — descriptions are required at registration now.
   3) For special-style cards (3-column photo layout) ensure the 2-row badge
      layout also applies even when the chip block uses font-size:12px instead
      of line-height:3.
   ============================================================================ */

/* The card-builder wraps each icon in <div style="float:right;"><i class="fas
   fa-..."></i></div>. We target those wrappers and re-skin them as pill
   badges with text, then ABSOLUTELY POSITION them so they overlay the card's
   top photo area (Verified top-left, Gold member top-right). The card has
   position:relative already from the .special-style + base .profilecard rules. */
.profilecard {
    position: relative;
}
/* v2-enhance.js reparents the trust-badge float wrappers OUT of .p-4 and
   into .profilecard directly. The selectors below cover BOTH locations
   (in case JS hasn't run yet) plus the new direct-child position. */
.profilecard > div[style*="float:right"]:has(> i.fa-circle-check),
.profilecard > div[style*="float: right"]:has(> i.fa-circle-check),
.profilecard > div[style*="float:right"]:has(> i.fa-crown),
.profilecard > div[style*="float: right"]:has(> i.fa-crown),
.profilecard .p-4 div[style*="float:right"]:has(> i.fa-circle-check),
.profilecard .p-4 div[style*="float: right"]:has(> i.fa-circle-check),
.profilecard .p-4 div[style*="float:right"]:has(> i.fa-crown),
.profilecard .p-4 div[style*="float: right"]:has(> i.fa-crown) {
    float: none !important;
    position: absolute;
    top: 12px;
    z-index: 5;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    margin: 0 !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
/* Verified — blue accent pill, top-left */
.profilecard > div[style*="float:right"]:has(> i.fa-circle-check),
.profilecard > div[style*="float: right"]:has(> i.fa-circle-check),
.profilecard .p-4 div[style*="float:right"]:has(> i.fa-circle-check),
.profilecard .p-4 div[style*="float: right"]:has(> i.fa-circle-check) {
    left: 12px;
    background: linear-gradient(135deg, var(--accent, #1e90ff), var(--accent-strong, #0f6dd5));
    color: #fff;
    box-shadow: 0 4px 14px rgba(30,144,255,.4), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.profilecard > div[style*="float:right"]:has(> i.fa-circle-check) > i,
.profilecard > div[style*="float: right"]:has(> i.fa-circle-check) > i,
.profilecard .p-4 div[style*="float:right"]:has(> i.fa-circle-check) > i,
.profilecard .p-4 div[style*="float: right"]:has(> i.fa-circle-check) > i {
    color: #fff !important;
    font-size: 11px !important;
    float: none !important;
}
.profilecard > div[style*="float:right"]:has(> i.fa-circle-check)::after,
.profilecard > div[style*="float: right"]:has(> i.fa-circle-check)::after,
.profilecard .p-4 div[style*="float:right"]:has(> i.fa-circle-check)::after,
.profilecard .p-4 div[style*="float: right"]:has(> i.fa-circle-check)::after {
    content: 'Geverifieerd';
}
/* Gold member — gold gradient pill, top-right */
.profilecard > div[style*="float:right"]:has(> i.fa-crown),
.profilecard > div[style*="float: right"]:has(> i.fa-crown),
.profilecard .p-4 div[style*="float:right"]:has(> i.fa-crown),
.profilecard .p-4 div[style*="float: right"]:has(> i.fa-crown) {
    right: 12px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #422006;
    box-shadow: 0 4px 14px rgba(245,158,11,.4), 0 0 0 1px rgba(255,255,255,.18) inset;
}
.profilecard > div[style*="float:right"]:has(> i.fa-crown) > i,
.profilecard > div[style*="float: right"]:has(> i.fa-crown) > i,
.profilecard .p-4 div[style*="float:right"]:has(> i.fa-crown) > i,
.profilecard .p-4 div[style*="float: right"]:has(> i.fa-crown) > i {
    color: #422006 !important;
    font-size: 11px !important;
    float: none !important;
}
.profilecard > div[style*="float:right"]:has(> i.fa-crown)::after,
.profilecard > div[style*="float: right"]:has(> i.fa-crown)::after,
.profilecard .p-4 div[style*="float:right"]:has(> i.fa-crown)::after,
.profilecard .p-4 div[style*="float: right"]:has(> i.fa-crown)::after {
    content: 'Gold member';
}
/* The name row keeps natural flow now that badges are absolute. Drop any
   stray <br> elements the legacy builder injects after the name. */
.profilecard .p-4 > div:first-child > br { display: none; }
/* Prevent overflow:hidden on the card from clipping our absolute badges —
   the image area must stay visible AND the badges must sit on top of it. */
.profilecard { overflow: visible !important; }
.profilecard .image-wrapper,
.profilecard .rowpic3 {
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}
/* IMPORTANT: legacy .rowpic3 (used by special-style cards) has 3 FLOATED
   .columnpic3 children plus a broken clearfix (`.rowpic3:after { clear: both }`
   with no `content`), so the .rowpic3 itself collapses to height 0. That made
   the .p-4 start at y=0 of the card, so absolutely-positioned badges
   (`top:12px`) landed inside the name row instead of over the photo.
   Convert to flex so .rowpic3 has real height (192px from the .h-48 children)
   AND so the photos line up cleanly without floats. */
.profilecard .rowpic3 {
    display: flex !important;
    width: 100%;
    height: 192px;
}
.profilecard .rowpic3 > .columnpic3 {
    float: none !important;
    flex: 1 1 0 !important;
    width: auto !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Hide the "Geen omschrijving bijgevoegd" fallback line.
   Descriptions are now required when registering a profile. */
.profilecard em[style*="font-style:italic"]:only-child,
.profilecard .mb-4 > em[style*="font-style:italic"],
.profilecard .text-grey-darker em[style*="font-style:italic"] {
    display: none !important;
}
.profilecard .mb-4:empty,
.profilecard .text-grey-darker.flex-1:empty {
    display: none !important;
}
/* If the description container ONLY contains the placeholder em, collapse it */
.profilecard .mb-4:has(> em[style*="font-style:italic"]:only-child),
.profilecard .text-grey-darker.flex-1:has(> em[style*="font-style:italic"]:only-child) {
    display: none !important;
    min-height: 0 !important;
}

/* Special-style card chip block uses font-size:12px / no line-height:3.
   Apply the same 2-row flex layout so the visible "Privé ontvangst / Escort"
   pills always wrap onto their own row. */
.special-style .profilecard .p-4 > div[style*="font-size:12px"] > div[style*="margin-top:15px"],
.special-style .profilecard .p-4 > div[style*="font-size: 12px"] > div[style*="margin-top:15px"],
.special-style .profilecard .p-4 > div > div[style*="margin-top:15px"][style*="margin-bottom:15px"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-content: flex-start;
    align-items: center;
    line-height: 1.4 !important;   /* match non-special card spacing */
    min-height: 0 !important;       /* let the block hug its content */
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    font-size: 0 !important;        /* kill whitespace text-nodes between chips */
}
.special-style .profilecard .p-4 > div > div[style*="margin-top:15px"][style*="margin-bottom:15px"] > span {
    margin: 0 !important;
    white-space: nowrap;
    flex: 0 0 auto;
    font-size: 11px !important;
}
.special-style .profilecard .p-4 > div > div[style*="margin-top:15px"][style*="margin-bottom:15px"] br,
.special-style .profilecard .p-4 > div > div[style*="margin-top:15px"][style*="margin-bottom:15px"] .image_mobile {
    display: none !important;
}
.special-style .profilecard .p-4 > div > div[style*="margin-top:15px"][style*="margin-bottom:15px"] > span:has(> i.fa-mars),
.special-style .profilecard .p-4 > div > div[style*="margin-top:15px"][style*="margin-bottom:15px"] > span:has(> i.fa-venus),
.special-style .profilecard .p-4 > div > div[style*="margin-top:15px"][style*="margin-bottom:15px"] > span:has(> i.fa-transgender) {
    order: 1;
}
.special-style .profilecard .p-4 > div > div[style*="margin-top:15px"][style*="margin-bottom:15px"] > span:has(> i.fa-user) {
    order: 2;
}
.special-style .profilecard .p-4 > div > div[style*="margin-top:15px"][style*="margin-bottom:15px"] > span:has(> i.fa-location-dot) {
    order: 3;
}
.special-style .profilecard .p-4 > div > div[style*="margin-top:15px"][style*="margin-bottom:15px"]::before {
    content: '';
    flex-basis: 100%;
    height: 0;
    order: 5;
}
.special-style .profilecard .p-4 > div > div[style*="margin-top:15px"][style*="margin-bottom:15px"] > span:has(> i.fa-house),
.special-style .profilecard .p-4 > div > div[style*="margin-top:15px"][style*="margin-bottom:15px"] > span:has(> i.fa-car),
.special-style .profilecard .p-4 > div > div[style*="margin-top:15px"][style*="margin-bottom:15px"] > span:has(> i.fa-bed),
.special-style .profilecard .p-4 > div > div[style*="margin-top:15px"][style*="margin-bottom:15px"] > span:has(> i.fa-mask),
.special-style .profilecard .p-4 > div > div[style*="margin-top:15px"][style*="margin-bottom:15px"] > span:has(> i.fa-computer) {
    order: 6;
}

/* ============================================================================
   2026-05 — /account Reserveringen → Beschikbaarheid editor (revised)
   ============================================================================ */
.ds-avail-section {
    margin-bottom: 4px;
}
.ds-avail-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ds-avail-section__title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ds-avail-section__title i { color: var(--brand); }
.ds-avail-section__summary {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}
.ds-avail-toggle-btn {
    padding: 8px 16px !important;
    font-size: 13px !important;
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 999px !important;
    cursor: pointer;
    transition: all .15s ease;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    width: auto !important;
    flex-shrink: 0;
}
.ds-avail-toggle-btn:hover {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
}
.ds-avail-toggle-btn.is-open {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong)) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.ds-avail-editor {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--border);
    animation: dsAvailExpand .25s ease;
}
@keyframes dsAvailExpand {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ds-avail-h5 {
    margin: 8px 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.005em;
}

/* ─── 2-column weekly schedule grid ─── */
.ds-avail-weekly {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.ds-avail-day {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .15s ease, background .15s ease;
}
.ds-avail-day--on {
    border-color: rgba(255, 46, 108, .35);
    background: linear-gradient(180deg, rgba(255,46,108,.04), transparent 60%), var(--surface-2);
}
.ds-avail-day__label {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.ds-avail-day__label input[type="checkbox"] {
    accent-color: var(--brand);
    width: 16px; height: 16px;
    cursor: pointer;
}
.ds-avail-day__ranges {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* When day is "off" we dim visually but DON'T block pointer events — that
   way the user can still pick times and the dropdowns remain interactive.
   Toggling the checkbox simply controls whether the day is saved as
   available. */
.ds-avail-day--off .ds-avail-day__ranges {
    opacity: 0.55;
}
.ds-avail-day--off .ds-avail-day__ranges:hover {
    opacity: 0.85;
}

.ds-avail-range {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ds-avail-range select {
    width: auto !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    cursor: pointer;
    min-width: 78px;
}
.ds-avail-range__sep {
    color: var(--text-muted);
    font-size: 13px;
}
.ds-avail-range__del,
.ds-avail-range__add {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
.ds-avail-range__del:hover { color: var(--brand); border-color: var(--brand); }
.ds-avail-range__add {
    width: 100%;
    text-align: center;
    margin-top: 2px;
    border-style: dashed;
}
.ds-avail-range__add:hover { color: var(--brand); border-color: var(--brand); }

/* ─── Overrides (collapsed summary + expanded editor) ─── */
.ds-avail-overrides {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ds-avail-override {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;          /* keep inner content from escaping the box */
}
/* ─── Collapsed summary row ─── */
.ds-avail-override__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
}
.ds-avail-override__summary-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}
.ds-avail-override__summary-text > strong {
    font-size: 13px;
    color: var(--text);
    font-weight: 700;
}
.ds-avail-override__summary-detail {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ds-avail-override__summary-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.ds-avail-override__edit,
.ds-avail-override__del {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 11px;
    cursor: pointer;
    transition: all .15s;
    line-height: 1;
}
.ds-avail-override__edit:hover { color: var(--brand); border-color: var(--brand); }
.ds-avail-override__del:hover  { color: #fff; background: var(--brand); border-color: var(--brand); }

/* ─── Expanded editor — only visible when .is-expanded ─── */
.ds-avail-override__editor {
    display: none;
    padding: 0 10px 10px;
    border-top: 1px dashed var(--border);
    margin-top: -1px;
    flex-direction: column;
    gap: 8px;
}
.ds-avail-override.is-expanded .ds-avail-override__editor {
    display: flex;
}
.ds-avail-override.is-expanded .ds-avail-override__summary {
    padding-bottom: 8px;
    border-bottom: 0;
}
.ds-avail-override__field-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 6px;
    margin-bottom: -2px;
}
.ds-avail-override__date {
    width: 100% !important;
    box-sizing: border-box;
    padding: 7px 10px !important;
    cursor: pointer;
}
.ds-avail-override__kinds {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.ds-avail-override__editor-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}
.ds-avail-override__done {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: filter .15s;
}
.ds-avail-override__done:hover { filter: brightness(1.08); }

/* Make sure the ranges-area inside an expanded override stays inside the
   box — selects + buttons wrap cleanly instead of overflowing right. */
.ds-avail-override__editor .ranges-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.ds-avail-override__editor .ds-avail-range {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
}
.ds-avail-override__editor .ds-avail-range select {
    flex: 0 1 auto;
    min-width: 0;
}
.ds-avail-override__editor .ds-avail-range__add {
    width: 100%;
    margin-top: 2px;
}

/* ─── 8th cell — Uitzondering — matches the day-card visual ─── */
.ds-avail-day.ds-avail-exc {
    border-style: dashed;
    border-color: var(--border-strong);
    background:
        linear-gradient(180deg, rgba(255,140,0,.05), transparent 60%),
        var(--surface-2);
}
.ds-avail-exc__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.ds-avail-exc__head > i {
    font-size: 16px;
    color: var(--brand);
    margin-top: 2px;
    flex-shrink: 0;
}
.ds-avail-exc__sub {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}
/* Overrides inside the Uitzondering cell already use the
   collapsed-summary + expanded-editor pattern defined above, which is
   self-contained and never overflows the cell boundary. */
.ds-avail-override input[type="date"] {
    width: auto !important;
    padding: 6px 10px !important;
    cursor: pointer;
}
.ds-avail-override label.kind-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.ds-avail-override label.kind-toggle input { accent-color: var(--brand); }
.ds-avail-override .ranges-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 220px;
    min-width: 200px;
}
.ds-avail-override .ranges-area.is-closed {
    display: none;
}

.ds-avail-save-btn {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong)) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border: none !important;
    text-decoration: none !important;
}
.ds-avail-actions {
    margin-top: 22px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.ds-avail-actions .v2-btn { flex: 0 0 auto; }

/* ============================================================================
   v2-cat-grid — responsive label swaps
   At specific narrow widths some labels become awkwardly long for the chip,
   so each label/sub carries a data-short attribute we use as a pseudo-element
   replacement. Trick: shrink original text to font-size:0 and render the
   data-short value via ::before in the cell's normal font-size.
   ============================================================================ */
/* shared base styling for the swap rule */
.v2-cat__label[data-short],
.v2-cat__sub[data-short] {
    display: flex;
    align-items: center;
}
.v2-cat__label[data-short]::before,
.v2-cat__sub[data-short]::before {
    content: '';   /* placeholder — only set at breakpoints */
    display: none;
}
/* Helper mixin via attribute: when the breakpoint hits we hide the inner
   text and show ::before with the short label. */

/* ─── Erotische massage → Massage ─── */
@media (max-width: 1040px) {
    .v2-cat__label[data-short="Massage"] {
        font-size: 0 !important;
    }
    .v2-cat__label[data-short="Massage"]::before {
        content: attr(data-short);
        display: inline;
        font-size: 16px;
        font-weight: 700;
        color: var(--text);
    }
}
/* ─── Voor de avontuurlijke → Avontuurlijk (≤950px) ─── */
@media (max-width: 950px) {
    .v2-cat__sub[data-short="Avontuurlijk"] {
        font-size: 0 !important;
    }
    .v2-cat__sub[data-short="Avontuurlijk"]::before {
        content: attr(data-short);
        display: inline;
        font-size: 13px;
        color: var(--text-muted);
    }
}
/* ─── Privé ontvangst → Ontvangst (≤940px) ─── */
@media (max-width: 940px) {
    .v2-cat__label[data-short="Ontvangst"] {
        font-size: 0 !important;
    }
    .v2-cat__label[data-short="Ontvangst"]::before {
        content: attr(data-short);
        display: inline;
        font-size: 16px;
        font-weight: 700;
        color: var(--text);
    }
}
/* ─── Bekijk alle profielen → Bekijken (≤900px) ─── */
@media (max-width: 900px) {
    .v2-cat__sub[data-short="Bekijken"] {
        font-size: 0 !important;
    }
    .v2-cat__sub[data-short="Bekijken"]::before {
        content: attr(data-short);
        display: inline;
        font-size: 13px;
        color: var(--text-muted);
    }
}
/* ─── Pure ontspanning → Ontspan (≤870px) ─── */
@media (max-width: 870px) {
    .v2-cat__sub[data-short="Ontspan"] {
        font-size: 0 !important;
    }
    .v2-cat__sub[data-short="Ontspan"]::before {
        content: attr(data-short);
        display: inline;
        font-size: 13px;
        color: var(--text-muted);
    }
}
/* ─── Bezoek aan huis → Privé (≤850px) ─── */
@media (max-width: 850px) {
    .v2-cat__sub[data-short="Privé"] {
        font-size: 0 !important;
    }
    .v2-cat__sub[data-short="Privé"]::before {
        content: attr(data-short);
        display: inline;
        font-size: 13px;
        color: var(--text-muted);
    }
}
/* ─── Komt naar jou toe → Bezoek (≤835px) ─── */
@media (max-width: 835px) {
    .v2-cat__sub[data-short="Bezoek"] {
        font-size: 0 !important;
    }
    .v2-cat__sub[data-short="Bezoek"]::before {
        content: attr(data-short);
        display: inline;
        font-size: 13px;
        color: var(--text-muted);
    }
}
/* ─── Online beleving → Online (≤820px) ─── */
@media (max-width: 820px) {
    .v2-cat__sub[data-short="Online"] {
        font-size: 0 !important;
    }
    .v2-cat__sub[data-short="Online"]::before {
        content: attr(data-short);
        display: inline;
        font-size: 13px;
        color: var(--text-muted);
    }
}
/* ─── ≤700px → icon-only ─── */
@media (max-width: 700px) {
    .v2-cat-grid .v2-cat__label,
    .v2-cat-grid .v2-cat__sub {
        display: none !important;
    }
    .v2-cat-grid .v2-cat__icon {
        margin: 0 auto;
    }
    .v2-cat-grid .v2-cat {
        justify-content: center;
        text-align: center;
        padding: 14px !important;
    }
}

/* Card divider between Beschikbaarheid section and the reservations list */
.ds-card-divider {
    border: 0;
    height: 1px;
    background: var(--border);
    margin: 22px 0 18px;
}

@media (max-width: 640px) {
    .ds-avail-weekly { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE NAVBAR REDESIGN — polished, professional, touch-friendly
   Scope: ≤768px only (desktop layout above is untouched).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Dimmed backdrop behind the open menu */
    .v2-navbar .nav-toggle:checked ~ .nav-menu::before {
        content: '';
        position: fixed;
        left: 0; right: 0; bottom: 0; top: 64px;
        background: rgba(6,8,14,.55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: -1;
        pointer-events: none;
    }

    /* The drawer / sheet */
    .v2-navbar .nav-menu {
        background: linear-gradient(180deg, rgba(18,19,26,.985) 0%, rgba(26,28,38,.985) 100%) !important;
        backdrop-filter: blur(22px) saturate(140%);
        -webkit-backdrop-filter: blur(22px) saturate(140%);
        padding: 12px 12px 22px !important;
        gap: 2px !important;
        border-top: 1px solid rgba(255,255,255,.06) !important;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
        box-shadow: 0 26px 50px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.35) !important;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,.15) transparent;
    }
    .v2-navbar .nav-menu::-webkit-scrollbar { width: 4px; }
    .v2-navbar .nav-menu::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.12);
        border-radius: 4px;
    }

    /* Top-level rows (plain links + dropdown triggers) */
    .v2-navbar .nav-menu > a,
    .v2-navbar .nav-menu .ds-nav-dropdown > a {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 13px 14px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        color: rgba(255,255,255,.92) !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        text-transform: none !important;
        text-decoration: none !important;
        transition: background .18s ease, transform .12s ease !important;
        margin: 1px 0 !important;
        width: auto !important;
        white-space: nowrap;
    }
    .v2-navbar .nav-menu > a:active,
    .v2-navbar .nav-menu .ds-nav-dropdown > a:active {
        background: rgba(255,255,255,.06) !important;
        transform: scale(.985);
    }

    /* Leading brand-tinted icon "chip" */
    .v2-navbar .nav-menu > a > i:first-child,
    .v2-navbar .nav-menu .ds-nav-dropdown > a > i:first-child {
        font-size: 14px !important;
        width: 30px !important;
        height: 30px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--brand) !important;
        background: rgba(255,46,108,.10);
        border-radius: 9px;
        flex: 0 0 auto;
        margin: 0 !important;
    }

    /* Dropdown sections: a little space above to break the rhythm */
    .v2-navbar .nav-menu .ds-nav-dropdown {
        margin-top: 6px;
        display: block;
        width: 100%;
    }
    .v2-navbar .nav-menu .ds-nav-dropdown::before {
        content: '';
        display: block;
        height: 1px;
        background: rgba(255,255,255,.06);
        margin: 4px 6px 6px;
    }
    .v2-navbar .nav-menu .ds-nav-dropdown > a {
        font-weight: 600 !important;
    }
    /* Chevron — right-aligned, animates open */
    .v2-navbar .nav-menu .ds-nav-dropdown > a > i.fa-chevron-down {
        margin: 0 0 0 auto !important;
        font-size: 11px !important;
        opacity: .55 !important;
        background: transparent !important;
        color: rgba(255,255,255,.6) !important;
        width: auto !important;
        height: auto !important;
        border-radius: 0 !important;
        transition: transform .25s ease, color .2s ease, opacity .2s ease;
    }
    .v2-navbar .nav-menu .ds-nav-dropdown.is-open > a {
        background: rgba(255,46,108,.08) !important;
    }
    .v2-navbar .nav-menu .ds-nav-dropdown.is-open > a > i.fa-chevron-down {
        transform: rotate(180deg);
        opacity: .95 !important;
        color: var(--brand) !important;
    }

    /* Collapsed sub-menu by default — overrides earlier @768 block */
    .v2-navbar .nav-menu .ds-nav-dropdown__menu {
        position: relative !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 2px 0 8px 38px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: none !important;
        min-width: 0 !important;
    }
    .v2-navbar .nav-menu .ds-nav-dropdown.is-open .ds-nav-dropdown__menu {
        display: block !important;
        animation: dsMobileSubOpen .22s ease;
    }
    @keyframes dsMobileSubOpen {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    /* Connector rail down the side of the open sub-menu */
    .v2-navbar .nav-menu .ds-nav-dropdown.is-open .ds-nav-dropdown__menu::before {
        content: '';
        position: absolute;
        left: 24px;
        top: 4px;
        bottom: 10px;
        width: 1px;
        background: rgba(255,255,255,.08);
    }

    /* Sub-item rows */
    .v2-navbar .nav-menu .ds-nav-dropdown__menu a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 11px 12px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: rgba(255,255,255,.78) !important;
        border-radius: 10px !important;
        margin: 1px 0 !important;
    }
    .v2-navbar .nav-menu .ds-nav-dropdown__menu a:active {
        background: rgba(255,255,255,.05) !important;
        color: #fff !important;
    }
    .v2-navbar .nav-menu .ds-nav-dropdown__menu a i {
        font-size: 13px !important;
        width: 20px !important;
        height: 20px !important;
        background: transparent !important;
        color: rgba(255,255,255,.55) !important;
        border-radius: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    .v2-navbar .nav-menu .ds-nav-dropdown__menu hr {
        margin: 6px 4px !important;
        border: 0 !important;
        border-top: 1px solid rgba(255,255,255,.07) !important;
    }
    /* Logout row — danger tint */
    .v2-navbar .nav-menu .ds-nav-dropdown__menu .ds-nav-dropdown__logout {
        color: #ff8aa6 !important;
    }
    .v2-navbar .nav-menu .ds-nav-dropdown__menu .ds-nav-dropdown__logout i {
        color: #ff5b87 !important;
    }
    .v2-navbar .nav-menu .ds-nav-dropdown__menu .ds-nav-dropdown__logout:active {
        background: rgba(255,46,108,.16) !important;
        color: #fff !important;
    }

    /* Hamburger → animated X when toggle is checked */
    .v2-navbar .nav-toggle-label {
        position: relative;
        z-index: 2;
        width: 30px;
        height: 22px;
        justify-content: center;
        align-items: center;
    }
    .v2-navbar .nav-toggle-label span {
        transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s ease !important;
        transform-origin: center;
    }
    .v2-navbar .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    .v2-navbar .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .v2-navbar .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* Tighten the navbar container on phones so the brand + hamburger fit nicely */
    .v2-nav-container {
        padding: 12px 16px !important;
    }
    .v2-logo {
        font-size: 19px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE NAVBAR — 2-column category grid
   8 category links (Ontvangst / Escort / Vrouwen / Mannen / Shemale /
   Massage / BDSM / Virtual) render as 2-col card grid. Support and
   Mijn account dropdowns span the full row beneath them.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Switch the drawer from flex-column to a 2-col grid */
    .v2-navbar .nav-menu {
        display: none;       /* default closed (overridden when checkbox is on) */
        grid-template-columns: 1fr 1fr !important;
        column-gap: 8px !important;
        row-gap: 8px !important;
    }
    .v2-navbar .nav-toggle:checked ~ .nav-menu {
        display: grid !important;
    }

    /* Category links become vertical "cards" — icon on top, label below.
       Selector targets every direct-child <a> whose href points at a
       /zoeken?<category>=true URL (handles existing 5 + the 3 injected). */
    .v2-navbar .nav-menu > a[href*="/zoeken?"] {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 8px !important;
        padding: 18px 8px !important;
        min-height: 92px;
        background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)) !important;
        border: 1px solid rgba(255,255,255,.07) !important;
        border-radius: 14px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: rgba(255,255,255,.92) !important;
        white-space: normal !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        transition: background .18s ease, border-color .18s ease, transform .12s ease !important;
    }
    .v2-navbar .nav-menu > a[href*="/zoeken?"]:active {
        background: linear-gradient(180deg, rgba(255,46,108,.16), rgba(255,46,108,.06)) !important;
        border-color: rgba(255,46,108,.40) !important;
        transform: scale(.97);
    }

    /* Bigger icon "tile" on top of each card */
    .v2-navbar .nav-menu > a[href*="/zoeken?"] > i:first-child {
        width: 46px !important;
        height: 46px !important;
        font-size: 19px !important;
        background: linear-gradient(135deg, rgba(255,46,108,.22), rgba(255,139,61,.14)) !important;
        border-radius: 13px !important;
        margin: 0 !important;
    }

    /* Anything that's NOT a category link spans both columns
       (Support dropdown, Mijn account dropdown, standalone /overons,
       a plain /inloggen link when no token is set). */
    .v2-navbar .nav-menu > .ds-nav-dropdown,
    .v2-navbar .nav-menu > a:not([href*="/zoeken?"]) {
        grid-column: 1 / -1 !important;
    }

    /* The section divider above the first dropdown — tighten so it visually
       splits the grid section from the dropdown stack. */
    .v2-navbar .nav-menu .ds-nav-dropdown::before {
        margin: 8px 6px 6px !important;
    }

    /* The drawer needs a bit more top padding to give the grid breathing room */
    .v2-navbar .nav-menu {
        padding-top: 14px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   EXTRA CATEGORIES (collapsible wrapper)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    .v2-navbar .nav-menu #ds-extra-categories {
        display: contents;
        grid-column: 1 / -1 !important;
    }

    /* Extra categories cards */
    .v2-navbar .nav-menu #ds-extra-categories > a[href*="/zoeken?"] {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 8px !important;
        padding: 18px 8px !important;
        min-height: 92px !important;
        background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)) !important;
        border: 1px solid rgba(255,255,255,.07) !important;
        border-radius: 14px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: rgba(255,255,255,.92) !important;
        white-space: normal !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        transition: background .18s ease, border-color .18s ease, transform .12s ease !important;
        display: flex !important;
        width: 100% !important;
    }

    .v2-navbar .nav-menu #ds-extra-categories > a[href*="/zoeken?"]:active {
        background: linear-gradient(180deg, rgba(255,46,108,.16), rgba(255,46,108,.06)) !important;
        border-color: rgba(255,46,108,.40) !important;
        transform: scale(.97);
    }

    /* Icon styling + top padding fix */
    .v2-navbar .nav-menu #ds-extra-categories > a[href*="/zoeken?"] > i:first-child {
        width: 46px !important;
        height: 46px !important;
        font-size: 19px !important;
        background: linear-gradient(135deg, rgba(255,46,108,.22), rgba(255,139,61,.14)) !important;
        border-radius: 13px !important;
        margin: 0 !important;
        padding-top: 15px !important;     /* ← This is what you asked for */
    }
}

/* ─── Mobile 2-column tab grid for the public profile tabs ────────────────
   PLACED AT END OF FILE on purpose — selectors here use
   `body.v2-profile-page nav.v2-profile__tabs > .v2-profile__tab` (specificity
   0,3,2) so they beat the earlier `.v2-profile-page .v2-profile__tab.btn`
   rule (0,3,0) even at the same `!important` level.

   The slider/arrow idea was scrapped — instead we lay the 4 tabs out as a
   2x2 grid: Profiel + Foto album on row 1, Contact + Reserveer on row 2.
   Every tab is visible up-front so new visitors immediately see all the
   options. Desktop layout is untouched (arrows are not injected anymore).

   Legacy `.v2-profile__tab-arrow` rule kept as `display:none` in case an
   old profile-v2.js cache injects arrow nodes — they stay hidden. */
.v2-profile__tab-arrow { display: none !important; }

@media (max-width: 880px) {
    body.v2-profile-page nav.v2-profile__tabs {
        display: grid !important;
        grid-template-columns: 1fr 1fr;       /* 2 equal columns → 2 rows */
        gap: 8px !important;
        padding: 10px 14px !important;
        overflow: visible !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }
    /* All four tabs visible — each fills its grid cell. */
    body.v2-profile-page nav.v2-profile__tabs > .v2-profile__tab {
        display: inline-flex !important;
        width: 100% !important;
        height: auto !important;        /* override .btnprofile-1-selected { height:48px } */
        min-height: 44px;
        margin: 0 !important;
        padding: 10px 12px !important;
        justify-content: center !important;
        align-items: center;
        white-space: nowrap;
        text-align: center;
        font-size: 13px !important;
        line-height: 1.2;
    }
    /* Neutralise the desktop .v2-profile__tab--cta { margin-left:auto } so
       Reserveer doesn't get yanked to the right of its own cell. */
    body.v2-profile-page nav.v2-profile__tabs > .v2-profile__tab--cta {
        margin-left: 0 !important;
    }
    /* Belt-and-braces: if old arrow nodes were left behind by a previous
       profile-v2.js, force-hide them so they don't punch holes in the grid. */
    body.v2-profile-page nav.v2-profile__tabs > .v2-profile__tab-arrow {
        display: none !important;
    }
}

/* ─── Mobile "Maak een afspraak" relocation slot ───────────────────────────
   profile-v2.js → applyMobileAfspraakLayout() injects <div id=
   "ds-mobile-afspraak-slot"> right after .v2-about-card and moves the
   #afspraakButton2 into it on mobile. The slot is a flex/grid child of
   .v2-profile__body (which uses display:flex on mobile from our earlier
   reorder rules) — `order: 35` parks it between Over mij (order 3) and
   Tarieven (order 4). Desktop hides the slot entirely so the button stays
   in its original action-card position. */
.v2-mobile-afspraak-slot { display: none; }

@media (max-width: 880px) {
    .v2-profile-page .v2-mobile-afspraak-slot {
        display: block;
        order: 35;                       /* between .v2-about-card (3) and .v2-prices-card (4) */
        width: 100%;
    }
    /* Style the moved button to look like a stand-alone primary CTA card.
       It already has .v2-btn--primary so the gradient + colour are right;
       we just give it the surrounding card framing on mobile. */
    .v2-profile-page .v2-mobile-afspraak-slot > #afspraakButton2 {
        margin: 0 !important;
        width: 100%;
    }
}


/* ─── Bezoeker profile gallery (replaces the Reviews card) ─────────────────
   Used by profile-v2.js → applyBezoekerLayout() when the visited profile is a
   non-commercial Bezoeker account. Renders the user's uploaded Images as a
   responsive square-tile grid inside what was the Reviews card.

   Implementation notes (after first rev):
   - Flex+wrap with explicit `flex-basis: calc((100% - gaps)/N)` is more robust
     than grid here — the parent .v2-card has padding/box-sizing and the prior
     `repeat(auto-fill, minmax(140px, 1fr))` was collapsing to 1 column because
     some outer rule was constraining the .v2-bezoeker-gallery to its content
     width.
   - We use the classic `padding-bottom: 100%` trick instead of `aspect-ratio`
     so the square shape is guaranteed regardless of any inherited flexbox
     `align-items: stretch` weirdness.
   - The image is absolutely positioned inside the relative-positioned tile so
     it always fills the tile and never pushes its sibling.
   - 3 columns at desktop, 3 on tablet, 2 on mobile. */
.v2-bezoeker-gallery {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    width: 100%;
    box-sizing: border-box;
}
.v2-bezoeker-gallery__item {
    /* 3 columns: width = (100% - 2 gaps) / 3 — gap is 10px so subtract 20px / 3 */
    flex: 0 0 calc((100% - 20px) / 3);
    max-width: calc((100% - 20px) / 3);
    box-sizing: border-box;
    position: relative;
    display: block;
    padding-bottom: calc((100% - 20px) / 3);   /* square (matches width) */
    height: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: transform .18s ease, box-shadow .18s ease;
    text-decoration: none;
}
.v2-bezoeker-gallery__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.v2-bezoeker-gallery__item img {
    position: absolute !important;
    inset: 0;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border: 0;
}
@media (max-width: 600px) {
    /* 2 columns on narrow viewports */
    .v2-bezoeker-gallery__item {
        flex: 0 0 calc((100% - 10px) / 2);
        max-width: calc((100% - 10px) / 2);
        padding-bottom: calc((100% - 10px) / 2);
    }
}