/* ============================================================================
   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;
    }
}
/* ─── Dual filter UI on /zoeken ─────────────────────────────────────────────
   The DESKTOP sidebar (#filters) stays exactly as it was — it's the canonical
   source of truth that searchProfiles() reads. On mobile we hide it and show
   a parallel .v2-filters--mobile aside whose -m-suffixed controls mirror back
   into the desktop ones (see zoeken.html inline JS). This split lets us iterate
   on the mobile UX without touching anything that the desktop layout depends on.
   Selectors below mirror the specificity of the existing
   `aside.v2-filters { display: block !important; }` rule so source order wins
   (otherwise that rule would force the mobile aside visible on desktop). */
aside.v2-filters--mobile,
aside.v2-filters--mobile[style] { display: none !important; }
@media (max-width: 879px) {
    /* Hide the desktop sidebar */
    aside#filters,
    aside#filters[style] { display: none !important; }
    /* Reveal the mobile counterpart */
    aside.v2-filters--mobile,
    aside.v2-filters--mobile[style] { display: block !important; }
    /* The mobile aside lives OUTSIDE .v2-search-layout, so it doesn't share
       the grid's sticky position rules — make sure it spans full width and
       sits flush with the page. */
    aside.v2-filters--mobile {
        max-width: 1440px;
        margin: 16px auto 0;
        padding: 14px 16px;
        box-sizing: border-box;
        position: static;
    }
}

/* 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; } }
/* On mobile we want a 2-row layout under the avatar:
     Row 1 — name + trust badges (verified / premium) side-by-side
     Row 2 — info chips (Shemale · 27 jaar · Locatie) centered
   The legacy .card3 class on .v2-profile__title-wrap defaults to
   display:flex (row), which would otherwise leave the children as 3 columns.
   Grid with named areas lets the trust badges sit next to the name without
   forcing them onto their own line, while still spanning the chips row.
   When trust badges aren't applicable (display:none from the markup), the
   badges column collapses and the centered name stays centered.
   Desktop is intentionally untouched. */
@media (max-width: 760px) {
    .v2-profile__title-wrap {
        display: grid !important;
        grid-template-columns: auto auto;
        grid-template-areas:
            "name   badges"
            "chips  chips";
        column-gap: 10px;
        row-gap: 8px;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-top: 0;
    }
    .v2-profile__title-wrap .title-containerani {
        grid-area: name;
        justify-self: end;
        align-self: center;
        display: inline-flex;
    }
    .v2-profile__title-wrap .v2-profile__trust-badges {
        grid-area: badges;
        justify-self: start;
        align-self: center;
        margin: 0;          /* override desktop top-margin */
    }
    .v2-profile__title-wrap .v2-profile__chips {
        grid-area: chips;
        justify-self: center;
        margin-top: 0;
    }
    .v2-profile__title-wrap .v2-profile__badges-row { margin-top: 0; }
    /* When the .testimonial-heading-big inside the name cell has its own
       column flex layout, keep its content centered horizontally. */
    .v2-profile__title-wrap .testimonial-heading-big { align-items: center; }
}

.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;
    }
    /* The two right-column buttons live inside an inserted wrapper so they
       stack tightly at the TOP of column 2 (= top of the avatar). Without the
       wrapper the grid put them at the bottom of row 1 / top of row 2 — that
       left a 40-ish-px whitespace above "Bekijk profiel" that the user
       disliked. JS inserts .ds-side-profile__actions on mobile and removes
       it on desktop (see applyMobileSideStatusLayout). */
    .ds-side-profile__actions {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: start;          /* anchor the top of the stack to row 1 top */
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
        width: 100%;
    }
    /* Inside the wrapper, the buttons are normal flex items — clear the grid
       coords the desktop/sidebar rules apply, and stretch them to full width. */
    .ds-side-profile__actions > .ds-side-profile__view,
    .ds-side-profile__actions > .ds-side-status {
        grid-column: auto;
        grid-row: auto;
        align-self: stretch;
        justify-self: stretch;
        width: 100%;
        margin: 0;
    }
    /* Status / Publiceer pill — same SIZE as __view but brand BACKGROUND.
       Matches when the status either sits directly in .ds-side-profile (legacy
       fallback if the wrapper insertion fails) OR inside the actions wrapper. */
    .ds-side-profile > .ds-side-status,
    .ds-side-profile__actions > .ds-side-status {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        justify-self: stretch;
        align-self: start;
        margin: 0;
    }
    /* Relaxed from `> .ds-side-status` to descendant so the styling still
       matches when the status pill is nested inside .ds-side-profile__actions
       (the mobile wrapper for the two right-column buttons). The card itself
       still scopes the rules to the mobile layout. */
    .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). */
    .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;
    }
    .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);
    }
    .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; }
}

/* ─── Mobile override: primary tabs become a single-button dropdown ───────
   Saves vertical space — only the active tab is visible by default; clicking
   it reveals the rest as a stacked list below (same .ds-primary-tab styling
   so the items look like buttons). Click anywhere else (or pick a tab) to
   close. Toggle is driven by the `.is-open` class set by setupMobileTabDropdown
   in account-portal.js. The secondary tabs (Info / Mogelijkheden / …) keep
   their slider behaviour because the user only asked for the main nav. */
@media (max-width: 880px) {
    /* Card-style wrapper so the dropdown reads as a single panel (matches
       the .ds-kpi / .ds-side-profile look — same surface bg + border + radius). */
    .ds-account__primary-tabs {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 10px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        box-shadow: var(--shadow-sm);
        overflow: visible;
    }
    /* Activation CTA still pinned full width at the top. */
    .ds-account__primary-tabs > .ds-side-status {
        width: 100%;
        margin: 0;
        order: -1;
    }
    /* By default ONLY the active tab is visible — non-active are hidden until
       the user opens the dropdown. */
    .ds-account__primary-tabs > .ds-primary-tab[data-primary] {
        display: none;
        width: 100%;
        order: 1;                  /* non-active tabs sit BELOW the active one */
    }
    .ds-account__primary-tabs > .ds-primary-tab[data-primary].is-active {
        display: inline-flex;
        width: 100%;
        position: relative;
        padding-right: 36px;       /* room for the chevron */
        justify-content: flex-start;
        text-align: left;
        order: 0;                  /* active sits ABOVE the dropdown items */
        flex: 0 0 auto;            /* defeat the slider-rule flex:1 1 0 */
    }
    /* Chevron on the right edge of the active button — flips when open. */
    .ds-account__primary-tabs > .ds-primary-tab[data-primary].is-active::after {
        content: '\f078';            /* Font Awesome chevron-down */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 11px;
        opacity: 0.65;
        transition: transform .18s ease;
    }
    .ds-account__primary-tabs.is-open > .ds-primary-tab[data-primary].is-active::after {
        transform: translateY(-50%) rotate(180deg);
    }
    /* When the dropdown is open, reveal the non-active tabs in a stack
       directly below the active one. They keep the regular .ds-primary-tab
       look so they read as "more options" of the same dropdown. */
    .ds-account__primary-tabs.is-open > .ds-primary-tab[data-primary]:not(.is-active) {
        display: inline-flex;
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }
    /* Hide the injected ◀ ▶ slider arrows for the primary nav only. */
    .ds-account__primary-tabs > .ds-slider-arrow { display: none !important; }
}

/* 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; }

/* ─── Type-afspraken multi-select (account.html → Profiel tab) ───────────
   Same look as the Bezoeker/Escort/Bedrijf cards on /registreren, but laid
   out as 5 columns on desktop and gracefully reflowed on smaller widths.
   When the user has selected the maximum allowed (4 of 5), unselected
   cards visually fade and become unclickable. account-portal.js toggles
   the .is-capped class on this grid + sets .is-disabled per card. */
.ds-typedate-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .ds-typedate-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .ds-typedate-grid { grid-template-columns: repeat(2, 1fr); } }
.ds-typedate-grid .ds-type__inner { padding: 14px 10px; }
.ds-typedate-grid .ds-type__inner i { font-size: 20px; margin-bottom: 2px; }
.ds-typedate-grid .ds-type__inner strong { font-size: 13.5px; }
.ds-typedate.is-disabled { cursor: not-allowed; }
.ds-typedate.is-disabled .ds-type__inner {
    opacity: 0.42;
    filter: grayscale(0.4);
}
.ds-typedate-hint {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(255,46,108,.08);
    border: 1px solid rgba(255,46,108,.22);
    border-radius: 10px;
    color: var(--brand-strong);
    font-size: 12px;
    line-height: 1.4;
}
.ds-typedate-hint i { color: var(--brand); font-size: 13px; }
/* Validator highlight: when the wrapping .ds-field gets .is-error (because
   TypeDate1 was empty on submit) all unselected card borders turn red so the
   user sees exactly where the required pick is missing. */
#ds-typedate-field.is-error .ds-type:not(.is-selected) .ds-type__inner {
    border-color: var(--danger, #f87171);
    box-shadow: 0 0 0 2px rgba(248,113,113,0.18);
}

/* ─── 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); }
/* Paperclip attach button — flat, sits left of the textarea. */
.ds-conv-compose__attach {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer; font-size: 14px;
    transition: background .15s, border-color .15s, color .15s;
    display: inline-flex; align-items: center; justify-content: center;
}
.ds-conv-compose__attach:hover { background: var(--surface); border-color: var(--brand); color: var(--brand); }
.ds-conv-compose__attach:disabled { opacity: .5; cursor: not-allowed; }
/* Image-bubble variant — thumbnail click opens the lightbox. */
.ds-conv-bubble--image { padding: 4px 4px 6px; max-width: 260px; }
.ds-conv-bubble--image .ds-conv-img {
    display: block; width: 100%; max-height: 260px; object-fit: cover;
    border-radius: 10px; cursor: zoom-in; background: var(--surface);
}
.ds-conv-bubble--image .ds-conv-img-caption { padding: 6px 8px 0; font-size: 12.5px; white-space: pre-wrap; }
.ds-conv-bubble--image .ds-conv-bubble__when { padding: 0 8px; }
/* Lightbox overlay shared with the admin pages. */
.ds-img-lightbox {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85);
    display: none; align-items: center; justify-content: center;
    z-index: 10000; cursor: zoom-out; padding: 20px;
}
.ds-img-lightbox.show { display: flex; }
.ds-img-lightbox img { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,0.6); border-radius: 6px; }

/* 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.
       iOS Safari fix: use `display: flex; flex-direction: column;` (instead
       of plain `display: block`) and `position: relative; contain: layout;`
       so the .ds-nav-dropdown__menu child can NEVER escape this wrapper.
       Symptom on iPhone Safari was: Spelregels/Over ons rendered at the
       bottom of the drawer (after Inloggen) instead of directly under
       the Support trigger — Safari was promoting the menu out of the
       wrapper because the wrapper wasn't a containing block. */
    .v2-navbar .nav-menu .ds-nav-dropdown {
        margin-top: 6px;
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        position: relative;
        contain: layout;
    }
    .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.
       iOS Safari hardening: force `position: static`, full width, and
       `flex: 1 1 auto` so the menu always lives inline beneath its
       trigger inside the .ds-nav-dropdown flex column above. */
    .v2-navbar .nav-menu .ds-nav-dropdown__menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !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;
        width: 100% !important;
        flex: 1 1 auto !important;
    }
    /* The hover-bridge ::after is a desktop-only nicety; on mobile it
       can interfere with touch and is invisible anyway. Kill it. */
    .v2-navbar .nav-menu .ds-nav-dropdown::after {
        display: none !important;
        content: none !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);
    }
}