/* Structure & behavior only — colors, fonts and radii come from the per-tenant theme
   in wwwroot/themes/*.css via the --brand-* custom properties they define. */

html, body {
    margin: 0;
    font-family: var(--brand-body-font, system-ui, -apple-system, "Segoe UI", sans-serif);
    background: var(--brand-bg, #fff);
    color: var(--brand-text, #212529);
}

h1, h2, h3, h4 {
    font-family: var(--brand-heading-font, var(--brand-body-font, system-ui));
}

a, .btn-link, .nav-link {
    color: var(--brand-primary, #006bb7);
}

.nav-tabs .nav-link.active {
    color: var(--brand-text);
    border-color: var(--brand-border, rgba(0, 0, 0, 0.08)) var(--brand-border, rgba(0, 0, 0, 0.08)) var(--brand-surface, #fff);
}

/* Bootstrap 5.3's form-range hardcodes #0d6efd on the pseudo-element thumb rather than exposing a
   CSS variable — override the pseudo-elements directly, matching Bootstrap's own selector shape
   (color-mix keeps the focus ring translucent without needing the brand color as an rgb() triplet). */
.form-range::-webkit-slider-thumb {
    background-color: var(--brand-primary, #0d6efd);
}

.form-range::-webkit-slider-thumb:active {
    background-color: var(--brand-primary, #0d6efd);
    filter: brightness(1.15);
}

.form-range::-moz-range-thumb {
    background-color: var(--brand-primary, #0d6efd);
}

.form-range::-moz-range-thumb:active {
    background-color: var(--brand-primary, #0d6efd);
    filter: brightness(1.15);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px var(--brand-bg, #fff), 0 0 0 0.25rem color-mix(in srgb, var(--brand-primary, #0d6efd) 25%, transparent);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px var(--brand-bg, #fff), 0 0 0 0.25rem color-mix(in srgb, var(--brand-primary, #0d6efd) 25%, transparent);
}

/* The logo's own lighter tone — fixed, not per-theme, since the logo artwork itself doesn't
   change between tenants. Used for "light" (outline) buttons specifically. */
:root {
    --brand-button-light: #d68d98;
}

/* --brand-button defaults to --brand-primary (each theme can point it elsewhere — e.g. BDSM
   uses a softer accent for buttons, keeping the deep brand-primary for headings/links only).
   :disabled/.disabled variants are repeated explicitly because Bootstrap 5.3's own .btn:disabled
   rule has higher specificity (class + pseudo-class) than a plain .btn-primary override and would
   otherwise win, falling back to Bootstrap's default blue on every disabled button. */
.btn-primary, .btn-primary:disabled, .btn-primary.disabled {
    color: var(--brand-primary-contrast, #fff);
    background-color: var(--brand-button, var(--brand-primary, #1b6ec2));
    border-color: var(--brand-button, var(--brand-primary, #1861ac));
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    color: var(--brand-primary-contrast, #fff);
    background-color: var(--brand-button, var(--brand-primary, #1861ac));
    border-color: var(--brand-button, var(--brand-primary, #1861ac));
    filter: brightness(0.92);
}

.btn-outline-primary, .btn-outline-primary:disabled, .btn-outline-primary.disabled {
    color: var(--brand-button-light, #1b6ec2);
    border-color: var(--brand-button-light, #1861ac);
    background-color: transparent;
}

.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus {
    color: var(--brand-primary-contrast, #fff);
    background-color: var(--brand-button-light, #1861ac);
    border-color: var(--brand-button-light, #1861ac);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--brand-bg, white), 0 0 0 0.25rem var(--brand-primary, #258cfb);
}

/* Themed switch "on" state — off by default (unchecked), no value implied either way until
   toggled. Without this, Bootstrap's own :checked rule (higher specificity than a plain
   .form-check-input override) falls back to its default blue, same issue as the button fix above. */
.form-check-input:checked {
    background-color: var(--brand-button, var(--brand-primary, #1b6ec2));
    border-color: var(--brand-button, var(--brand-primary, #1861ac));
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- Page shell ---- */

.site-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.site-footer {
    border-top: 1px solid var(--brand-border, rgba(0, 0, 0, 0.08));
    padding: 1.5rem 0;
}

.site-footer-inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    color: var(--brand-text-muted, #6c757d);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-footer-inner a {
    color: inherit;
    text-decoration: underline;
}

.site-footer-links {
    display: flex;
    gap: 1rem;
}

/* ---- Top navbar ---- */

.site-navbar {
    border-bottom: 1px solid var(--brand-border, rgba(0, 0, 0, 0.08));
    background: var(--brand-surface, #fff);
}

.site-navbar-inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--brand-heading-font);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: var(--brand-brand-letter-spacing, normal);
    color: var(--brand-primary);
    text-decoration: none;
}

.site-brand-logo {
    height: 2rem;
    width: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.site-nav-link {
    color: var(--brand-text);
    text-decoration: none;
    font-weight: 500;
}

.site-nav-link:hover {
    color: var(--brand-primary);
}

.site-nav-form {
    display: inline;
}

.site-nav-link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* ---- Buttons ---- */

.btn-cta {
    display: inline-block;
    background: var(--brand-primary);
    color: var(--brand-primary-contrast, #fff);
    border: 1px solid var(--brand-primary);
    border-radius: var(--brand-radius-lg, 999px);
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-cta:hover {
    color: var(--brand-primary-contrast, #fff);
    transform: translateY(-1px);
    box-shadow: 0 0.5rem 1.25rem var(--brand-shadow-color, rgba(0, 0, 0, 0.15));
}

.btn-cta-sm {
    padding: 0.4rem 1.1rem;
    font-size: 0.9rem;
}

/* ---- Hero ---- */

.hero {
    position: relative;
    overflow: hidden;
    padding: 4rem 1.5rem;
    text-align: center;
}

.hero::before {
    content: "";
    position: absolute;
    inset: -20px;
    background-image: var(--brand-hero-image, url('/images/hero.jpg'));
    background-size: cover;
    background-position: center;
    filter: blur(var(--brand-hero-blur, 18px)) saturate(1.1);
    transform: scale(1.1);
    z-index: 0;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--brand-hero-scrim, rgba(255, 255, 255, 0.85));
    z-index: 0;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 42rem;
    margin: 0 auto;
}

.hero-badge {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand-primary);
    margin-bottom: 1rem;
}

.hero h1 {
    font-size: 2.25rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.hero-sub {
    font-size: 1.1rem;
    color: var(--brand-text-muted);
    margin-bottom: 2rem;
}

.hero-trust {
    display: inline-block;
    margin: 1.25rem 0 0;
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--brand-text-muted);
    background: var(--brand-surface, rgba(255, 255, 255, 0.6));
    border: 1px solid var(--brand-border, transparent);
    border-radius: var(--brand-radius-lg, 999px);
}

@media (min-width: 768px) {
    .hero {
        padding: 6rem 1.5rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }
}

/* ---- Feature cards ---- */

.features {
    max-width: 72rem;
    margin: 0 auto;
    padding: 4rem 1.5rem 1rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
}

.feature-card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--brand-radius, 0.75rem);
    padding: 1.75rem;
}

.feature-index {
    font-family: var(--brand-heading-font);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.feature-card h3 {
    font-size: 1.15rem;
    margin: 0.5rem 0 0.5rem;
}

.feature-card p {
    color: var(--brand-text-muted);
    margin: 0;
}

/* ---- Consent principle note ---- */

.principle {
    max-width: 42rem;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.principle-inner {
    border-left: 3px solid var(--brand-primary);
    padding: 0.1rem 0 0.1rem 1.25rem;
}

.principle-text {
    color: var(--brand-text-muted);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.5;
    margin: 0;
}

/* ---- How it works / step list ---- */

.how-it-works {
    max-width: 42rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
}

.how-it-works-header {
    text-align: center;
    margin: 0 auto 3rem;
}

.how-it-works-header h2 {
    font-size: 1.75rem;
    margin: 0 0 0.75rem;
}

.how-it-works-header p {
    color: var(--brand-text-muted);
    margin: 0;
}

.steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.step {
    position: relative;
    display: flex;
    gap: 1.25rem;
    padding-bottom: 2.25rem;
}

.step:last-child {
    padding-bottom: 0;
}

.step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 1.25rem;
    top: 2.5rem;
    bottom: 0.25rem;
    width: 2px;
    background: var(--brand-border, rgba(0, 0, 0, 0.1));
}

.step-index {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--brand-heading-font);
    font-weight: 700;
    background: var(--brand-primary);
    color: var(--brand-primary-contrast, #fff);
    z-index: 1;
}

.step-body {
    flex: 1;
    padding-top: 0.35rem;
}

.step-body h3 {
    font-size: 1.15rem;
    margin: 0 0 0.4rem;
}

.step-body p {
    color: var(--brand-text-muted);
    margin: 0;
}

/* ---- Account pages (login/register/etc.) render as a normal page with a centered content card ---- */

.account-page-card {
    max-width: 32rem;
    width: 100%;
    margin: 2rem auto;
    background: var(--brand-surface, #fff);
    color: var(--brand-text);
    border: 1px solid var(--brand-border, transparent);
    border-radius: var(--brand-radius-modal, 0.75rem);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
    padding: 2rem;
}

/* ---- App content pages (profile, events, moderation, ...) — one shared width, matching the nav
   bar's 72rem, via AppPageLayout.razor. The card stretches down to the footer regardless of how
   little content it holds (flex:1 down the .site-main -> .app-page-layout -> .app-page-card
   chain), and an admin-configurable ad/affiliate slot (AdSlot) sits inside the card, at the
   bottom, only when a slot has active content — no placeholder box when there's nothing to show. ---- */

.app-page-layout {
    max-width: 72rem;
    width: 100%;
    margin: 2rem auto;
    padding: 0 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.app-page-card {
    background: var(--brand-surface, #fff);
    color: var(--brand-text);
    border: 1px solid var(--brand-border, transparent);
    border-radius: var(--brand-radius-modal, 0.75rem);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
    padding: 2rem;
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.app-page-card-content {
    flex: 1;
}

.breadcrumb-mini a {
    color: var(--brand-muted, #6c757d);
    font-size: 0.85rem;
    text-decoration: none;
}

.breadcrumb-mini a:hover {
    text-decoration: underline;
}

.invite-welcome-explainer {
    color: var(--brand-text);
    line-height: 1.6;
    max-width: 42rem;
}

.invite-box {
    background: color-mix(in srgb, var(--brand-primary, #77283a) 6%, var(--brand-surface, #fff));
    border-color: var(--brand-border, rgba(0, 0, 0, 0.08));
    color: var(--brand-text);
}

.directory-avatar {
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--brand-border, rgba(0, 0, 0, 0.06));
}

.invite-qr-block {
    margin-top: 1rem;
}

.invite-qr-block img {
    border: 1px solid var(--brand-border, #ccc);
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.25rem;
}

.app-ad-slot {
    margin-top: 2rem;
    padding: 1rem;
    border: 1px dashed var(--brand-border, #ccc);
    border-radius: var(--brand-radius-modal, 0.75rem);
    font-size: 0.85rem;
}

/* Small "?" badge - click (not hover) opens a styled popover via explainer-popover.js. A real
   <button>, not a <span>, so it's keyboard-focusable and clickable without extra ARIA plumbing. */
.kink-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: 0.35rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--brand-border, #ccc);
    color: var(--brand-text);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    vertical-align: middle;
}

/* Popover shown by explainer-popover.js - positioned with JS (position: fixed) so it always
   overlays correctly regardless of where the triggering icon sits on the page. */
.explainer-popover {
    position: fixed;
    z-index: 1090;
    max-width: 20rem;
    background: var(--brand-surface, #fff);
    color: var(--brand-text);
    border: 1px solid var(--brand-border, #ccc);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    line-height: 1.45;
}

/* Drag-and-drop file upload zone (MyProfile.razor: profile photo + gallery upload). The actual
   <InputFile> stays a real, fully functional <input type="file"> - just stretched invisibly over
   the zone (the classic "styled file input" trick) so clicking anywhere still opens the native file
   picker, while file-drop-zone.js handles the drag/drop events and hands dropped files to it. */
.file-drop-zone {
    position: relative;
    border: 2px dashed var(--brand-border, #ccc);
    border-radius: 0.75rem;
    padding: 1.75rem 1rem;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.file-drop-zone.drag-over {
    border-color: var(--brand-primary, #999);
    background-color: rgba(0, 0, 0, 0.03);
}

.file-drop-zone-text {
    pointer-events: none;
    color: var(--brand-text-muted, #6c757d);
}

.file-drop-zone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ── Public profile view (ViewProfile.razor) ─────────────────────────────────── */

/* Photo + demographics side by side so the page actually uses the full 72rem card width,
   instead of everything stacking in one narrow left-aligned column. */
.profile-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    margin-bottom: 1.5rem;
}

.profile-photo {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 0.75rem;
    cursor: zoom-in;
    flex: 0 0 auto;
}

.profile-header-info {
    flex: 1 1 320px;
    min-width: 260px;
}

.profile-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.25rem 1.5rem;
    margin-top: 0.75rem;
}

.kink-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 2rem;
}

.profile-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.profile-gallery-item {
    max-width: 220px;
}

.profile-gallery-item img,
.profile-gallery-item video {
    max-width: 220px;
    max-height: 220px;
    border-radius: 0.5rem;
}

.profile-gallery-item img.lightbox-trigger {
    cursor: zoom-in;
}

/* Full-screen lightbox: click the profile photo or a gallery photo to open it larger, with
   </> navigation and a thumbnail strip - browses every photo on the page as one sequence. */
.profile-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

body.profile-lightbox-open {
    overflow: hidden;
}

.profile-lightbox-image {
    max-width: min(90vw, 70rem);
    max-height: 72vh;
    object-fit: contain;
    border-radius: 0.5rem;
}

.profile-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.25rem;
    line-height: 1;
    cursor: pointer;
}

.profile-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    cursor: pointer;
}

.profile-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

.profile-lightbox-prev {
    left: 1rem;
}

.profile-lightbox-next {
    right: 1rem;
}

.profile-lightbox-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
    max-width: 90vw;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.profile-lightbox-thumb {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 0.35rem;
    cursor: pointer;
    opacity: 0.6;
    border: 2px solid transparent;
    flex: 0 0 auto;
}

.profile-lightbox-thumb:hover {
    opacity: 0.85;
}

.profile-lightbox-thumb.active {
    opacity: 1;
    border-color: var(--brand-primary, #fff);
}

/* ---- Login/Register popup (AuthModals) — the everyday entry point, opens over the current page ---- */

.auth-modal .modal-content {
    background: var(--brand-surface, #fff);
    color: var(--brand-text);
    border: 1px solid var(--brand-border, transparent);
    border-radius: var(--brand-radius-modal, 0.75rem);
    padding: 0.5rem;
}

.modal-backdrop.show {
    background: var(--brand-backdrop, rgba(0, 0, 0, 0.5));
    opacity: 1;
}

/* ---- Culture switcher ---- */

.culture-switcher {
    position: relative;
    font-size: 0.85rem;
}

.culture-switcher-current {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--brand-border, rgba(0, 0, 0, 0.1));
    border-radius: var(--brand-radius, 0.5rem);
    color: var(--brand-text);
    user-select: none;
}

.culture-switcher-current::-webkit-details-marker {
    display: none;
}

.culture-switcher-current::after {
    content: "\25BE";
    font-size: 0.7rem;
    color: var(--brand-text-muted);
    margin-left: 0.1rem;
}

.culture-flag {
    display: inline-block;
    width: 1.2rem;
    height: 0.9rem;
    object-fit: cover;
    border-radius: 0.15rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    flex: none;
}

.culture-switcher-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 20;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    min-width: 8rem;
    background: var(--brand-surface, #fff);
    border: 1px solid var(--brand-border, rgba(0, 0, 0, 0.1));
    border-radius: var(--brand-radius, 0.5rem);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.culture-switcher-menu a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.35rem;
    color: var(--brand-text);
    text-decoration: none;
    font-size: 0.85rem;
}

.culture-switcher-menu a:hover {
    background: var(--brand-bg);
}

.culture-switcher-menu a.active {
    background: var(--brand-primary);
    color: var(--brand-primary-contrast, #fff);
    font-weight: 600;
}

/* ---- Events & consent ---- */

.events-page {
    max-width: 72rem;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

.events-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.events-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.events-list-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--brand-surface, #fff);
    border: 1px solid var(--brand-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--brand-radius, 0.75rem);
    text-decoration: none;
    color: var(--brand-text);
}

.events-list-partner {
    font-weight: 600;
    flex: 1;
}

.events-list-planned {
    color: var(--brand-text-muted);
    font-size: 0.9rem;
}
/* Het onzichtbare veld van het aanmeldformulier — zie SignUpGuard.

   Niet met display:none of type="hidden": scripts slaan die juist over, en dan vangt de val
   niets. Dit haalt het veld uit beeld zonder het uit de pagina te halen, zodat een script dat
   alles invult wat het tegenkomt er wél intrapt. */
.signup-trap {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* Icon-only action buttons on admin tables (/admin/users) — square, quiet until hovered, instead
   of a row of full-width text buttons. The label lives in title/aria-label on the button. */
.admin-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin-left: 0.25rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.admin-icon-btn:hover:not(:disabled), .admin-icon-btn:focus-visible {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
    border-color: color-mix(in srgb, currentColor 30%, transparent);
    outline: none;
}

.admin-icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.admin-icon-btn-danger { color: #dc3545; }
.admin-icon-btn-success { color: #198754; }

.admin-icon-btn-danger-solid,
.admin-icon-btn-danger-solid:hover:not(:disabled) {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}