/* =============================================================================
 * F.W.S.C. Singlebörse – Frontend-Styles
 *
 * Ausgelagert aus templates/*.tpl für CSP-Konformität (kein <style>-Inline).
 * Verbleibt: dynamische style="..."-Attribute (z. B. Compat-Bar-Breite),
 * die nutzen weiterhin style-src 'unsafe-inline'.
 * ============================================================================= */

/* ---------------- FWSC-Logo als CSS-Maske ---------------------------------
 * Das SVG wird als mask-image geladen, die Farbe kommt aus dem Kontext
 * (background-color: currentColor). So wird das Logo automatisch weiß auf
 * dunklem Header und schwarz auf hellem Button. Austauschbar durch Überschreiben
 * von /wcf/style/fwsc-logo.svg.
 * ------------------------------------------------------------------------- */
.fwscLogoIcon {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: url('fwsc-logo.svg') center/contain no-repeat;
            mask: url('fwsc-logo.svg') center/contain no-repeat;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ---------------- Teaser (Guests) ------------------------------------------ */
.datingTeaser {
    display: flex;
    justify-content: center;
    padding: 40px 16px;
}
.datingTeaserInner {
    max-width: 560px;
    width: 100%;
    text-align: center;
}
.datingTeaserBand {
    background: var(--wcfHeaderBackground, #1e2734);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}
.datingTeaserHeart fa-icon,
.datingTeaserHeart .icon {
    color: #fff;
    font-size: 2rem;
}
.datingTeaserTitle {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--wcfContentHeadlineColor, #1a1a2e);
}
.datingTeaserSubline {
    color: var(--wcfContentDimmedText);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 32px;
}
.datingTeaserFeatures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 32px;
    text-align: left;
}
.datingTeaserFeature {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--wcfContentBackground);
    border: 1px solid var(--wcfContentBorderInner);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.9rem;
    color: var(--wcfContentText);
}
.datingTeaserLogin {
    font-size: 1.05rem;
    padding: 12px 32px;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.datingTeaserHint {
    color: var(--wcfContentDimmedText);
    font-size: 0.9rem;
    margin: 0;
}
@media (max-width: 480px) {
    .datingTeaserFeatures { grid-template-columns: 1fr; }
    .datingTeaserTitle { font-size: 1.6rem; }
}

/* ---------------- Filter Bar (List Page) ----------------------------------- */
.datingFilterBar {
    background: var(--wcfContentBackground);
    border: 1px solid var(--wcfContentBorderInner);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.datingFilterBarInner {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
}
.datingFilterGroup {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}
.datingFilterGroupRegion { position: relative; }
.datingFilterLabel {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--wcfContentDimmedText);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 4px;
}
.datingFilterSelect {
    border: 1px solid var(--wcfContentBorderInner);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.9rem;
    background: var(--wcfContentBackground);
    color: var(--wcfContentText);
    min-width: 160px;
}
.datingToggleGroup {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.datingToggle {
    padding: 5px 12px;
    border: 1px solid var(--wcfContentBorderInner);
    border-radius: 20px;
    background: var(--wcfContentBackground);
    color: var(--wcfContentText);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.datingToggle:hover {
    border-color: var(--wcfButtonPrimaryBackground, #2980b9);
    color: var(--wcfButtonPrimaryBackground, #2980b9);
}
.datingToggle.active {
    background: var(--wcfButtonPrimaryBackground, #2980b9);
    border-color: var(--wcfButtonPrimaryBackground, #2980b9);
    color: #fff;
}
.datingAgeRange {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}
.datingAgeRange input[type="range"] {
    width: 100%;
    accent-color: var(--wcfButtonPrimaryBackground, #2980b9);
}
.datingFilterResetBtn {
    padding: 6px 14px;
    border: 1px solid var(--wcfContentBorderInner);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--wcfContentDimmedText);
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: flex-end;
    margin-bottom: 2px;
}
.datingFilterResetBtn:hover { color: #c0392b; border-color: #c0392b; }
.datingDualRange {
    position: relative;
    height: 36px;
    min-width: 160px;
}
.datingDualTrack {
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 4px;
    background: var(--wcfContentBorderInner);
    border-radius: 2px;
    transform: translateY(-50%);
}
.datingDualFill {
    position: absolute;
    height: 100%;
    background: var(--wcfButtonPrimaryBackground, #2980b9);
    border-radius: 2px;
}
.datingDualInput {
    position: absolute;
    width: 100%;
    height: 4px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    outline: none;
    top: 50%;
    transform: translateY(-50%);
}
.datingDualInput::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--wcfButtonPrimaryBackground, #2980b9);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    cursor: pointer;
    pointer-events: all;
}
.datingDualInput::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--wcfButtonPrimaryBackground, #2980b9);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    cursor: pointer;
    pointer-events: all;
}
.datingRegionBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
    min-width: 180px;
}
.datingRegionArrow { font-size: 0.7em; margin-left: 8px; }
.datingRegionDropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    max-width: 260px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--wcfContentBackground);
    border: 1px solid var(--wcfContentBorderInner);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    z-index: 200;
    padding: 4px 0;
    display: none;
}
.datingRegionDropdown.isOpen { display: block; }
.datingRegionItem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background .1s;
}
.datingRegionItem:hover { background: rgba(41,128,185,.07); }
.datingRegionItem input { flex-shrink: 0; }
.datingRegionItem span { overflow: hidden; text-overflow: ellipsis; }
.datingRegionAll { font-weight: 600; }
.datingRegionItem input:checked + span { color: var(--wcfButtonPrimaryBackground,#2980b9); font-weight: 600; }
@media (max-width: 600px) {
    .datingFilterGroup { min-width: calc(50% - 10px); }
}

/* ---------------- Profile Grid (List) -------------------------------------- */
.datingProfileGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.datingProfileCard {
    border: 1px solid var(--wcfContentBorderInner);
    border-radius: 4px;
    overflow: hidden;
    background: var(--wcfContentBackground);
    transition: box-shadow 0.2s;
}
.datingProfileCard:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.datingProfileCardMasked {
    opacity: 0.75;
}
.datingProfileCardLink {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.datingProfileAvatar {
    text-align: center;
    padding: 20px 20px 10px;
}
.datingCardPhoto {
    -webkit-user-select: none;
    user-select: none;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
}
.datingMaskedSilhouette { display: inline-block; }
.datingProfileInfo { padding: 0 16px 16px; }
.datingProfileName { margin: 0 0 4px; font-size: 1.1em; }
.datingMaskedName { color: var(--wcfContentDimmedText); letter-spacing: 2px; }
.datingProfileMeta, .datingProfileRegion, .datingProfileLookingFor {
    margin: 2px 0;
    font-size: 0.9em;
    color: var(--wcfContentDimmedText);
}
.datingProfileAboutMe {
    margin-top: 8px;
    font-size: 0.9em;
    color: var(--wcfContentText);
}
.datingGateBanner { border-radius: 4px; }
.datingProfileCompat {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--wcfContentDimmedText);
}
.datingCompatBar {
    flex: 1;
    height: 4px;
    background: var(--wcfContentBorderInner);
    border-radius: 2px;
    overflow: hidden;
    max-width: 80px;
}
.datingCompatFill {
    height: 100%;
    background: linear-gradient(to right, #3498db, #2ecc71);
    border-radius: 2px;
    display: block;
}
.datingCompatPct {
    white-space: nowrap;
    font-weight: 500;
    color: #2ecc71;
}

/* ---------------- Profile Detail ------------------------------------------ */
.datingProfileCard.is-detail {
    background: var(--wcfContentBackground);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.1);
    margin-top: 16px;
}
.dpHeader {
    background: var(--wcfHeaderBackground, #1e2734);
    border-radius: 10px 10px 0 0;
    padding: 32px 20px 24px;
    text-align: center;
    position: relative;
}
/* Variante mit User-Coverphoto: Bild als Background + Overlay für Lesbarkeit */
.dpHeader.dpHeaderHasCover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.dpHeader.dpHeaderHasCover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.75));
    border-radius: 10px 10px 0 0;
    pointer-events: none;
}
.dpHeader.dpHeaderHasCover > * {
    position: relative;
    z-index: 1;
}
.dpHeaderAvatar { margin-bottom: 12px; }
.dpAvatarImg {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.3);
    margin: 0 auto;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
}
.dpAvatarPhoto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    -webkit-user-select: none;
    user-select: none;
}
.dpAvatarWoltlab img {
    width: 180px !important;
    height: 180px !important;
    border-radius: 50% !important;
    object-fit: cover;
}
.dpAvatarMasked { cursor: default !important; }
.dpHeaderName {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
.dpHeaderMeta {
    color: rgba(255,255,255,0.75);
    font-size: 0.9rem;
}
.dpHeaderSince {
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
    margin-top: 4px;
}
.datingProfileLayout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
    align-items: start;
}
.datingProfileSidebar {
    padding: 20px 16px;
    border-right: 1px solid var(--wcfContentBorderInner, rgba(0,0,0,.08));
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.datingActionBtn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-bottom: 0;
}
.datingHeartButtonText {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.2;
}
.datingHeartLabel { font-weight: 600; }
.datingHeartSub {
    font-size: 0.72rem;
    font-weight: 400;
    opacity: 0.82;
    letter-spacing: 0.01em;
}
.datingHeartButton.active {
    background: #e74c3c;
    border-color: #c0392b;
    color: #fff;
}
.datingMatchBadge {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    background: #f39c12;
    color: #fff;
    border-radius: 6px;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 4px;
}
/* Inline-Variante in den Interest-Listen: gleiche Maße wie .button.small,
   damit „Match!" und „Nachricht schreiben" optisch auf einer Linie sind. */
.button.datingMatchBtn,
.button.datingMatchBtn:hover,
.button.datingMatchBtn:focus,
.button.datingMatchBtn:active {
    background: #f39c12;
    border-color: #f39c12;
    color: #fff;
    cursor: default;
    font-weight: 600;
}
.datingThumbnailStrip {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 12px;
    justify-content: flex-start;
}
.datingPhotoProtect {
    position: relative;
    display: inline-block;
    -webkit-user-select: none;
    user-select: none;
}
.datingPhotoProtect::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
}
.datingThumb {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}
.datingThumb:hover::before {
    content: '\1F50D';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    z-index: 1;
    pointer-events: none;
    border-radius: 6px;
}
.datingThumbImg {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    opacity: 0.8;
    border: 2px solid transparent;
    transition: opacity .15s, border-color .15s, transform .15s;
    display: block;
}
.datingThumbImgActive,
.datingThumbImg:hover {
    opacity: 1;
    border-color: var(--wcfButtonPrimaryBackground, #2980b9);
    transform: scale(1.05);
}
.datingProfileContent { padding: 20px 24px; }
.datingProfileBadges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.datingBadge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.875rem;
    background: rgba(128, 128, 128, 0.12);
    border: 1px solid rgba(128, 128, 128, 0.25);
    color: var(--wcfContentText);
    white-space: nowrap;
}
.datingBadgeGender {
    background: var(--wcfButtonPrimaryBackground, #2980b9);
    border-color: var(--wcfButtonPrimaryBackground, #2980b9);
    color: var(--wcfButtonPrimaryText, #fff);
    font-weight: 600;
}
.datingBadgeLookingFor {
    background: rgba(243,156,18,.15);
    border-color: #f39c12;
    color: var(--wcfContentText);
}
.datingBadgeCompat {
    background: linear-gradient(135deg, #3498db22, #2ecc7122);
    border: 1px solid #2ecc71;
    color: #27ae60;
}
.datingProfileSection { margin-bottom: 20px; }
.datingProfileSection:last-child { margin-bottom: 0; }
.datingProfileSectionTitle {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--wcfButtonPrimaryBackground, #2980b9);
    color: var(--wcfContentText);
}
.datingAboutMe {
    white-space: pre-wrap;
    line-height: 1.6;
    color: var(--wcfContentText);
}
.datingAlbumTags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.datingAlbumTag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(128, 128, 128, 0.12);
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 14px;
    font-size: 0.8rem;
    color: var(--wcfContentText);
}
@media (max-width: 767px) {
    .datingProfileLayout { grid-template-columns: 1fr; }
    .datingProfileSidebar {
        border-right: none;
        border-bottom: 1px solid var(--wcfContentBorderInner, rgba(0,0,0,.08));
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    .datingActionBtn {
        width: auto;
        flex: 1 1 auto;
    }
    .datingThumbnailStrip {
        width: 100%;
        margin-top: 8px;
    }
    .dpHeaderName { font-size: 1.3rem; }
}

/* ---------------- Interests Page ------------------------------------------ */
.datingInterestLegend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px;
    margin-bottom: 40px;
    background: var(--wcfContentContainerBackground);
    border: 1px solid var(--wcfContentBorderInner);
    border-left: 4px solid var(--wcfContentLinkColor);
    border-radius: 6px;
}
.datingInterestLegendItem {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--wcfContentText);
    line-height: 1.4;
}
.datingInterestLegendItem .fwscLogoIcon { flex-shrink: 0; }
.datingInterestSection { margin-bottom: 40px; }
.datingInterestSection + .datingInterestSection { margin-top: 8px; }
.datingInterestSectionTitle {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wcfContentHeadlineColor);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--wcfContentBorderInner);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.datingInterestCard {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--wcfContentBorderInner);
    transition: background .15s;
}
.datingInterestCard:last-child { border-bottom: none; }
.datingInterestCard:hover { background: var(--wcfContentBackground); }
.datingInterestCardMatch {
    border-left: 3px solid #f39c12;
    background: rgba(243, 156, 18, 0.04);
}
.datingInterestCardMatch:hover { background: rgba(243, 156, 18, 0.08); }
.datingInterestCardSuperLike:not(.datingInterestCardMatch) {
    border-left: 4px solid #d97706;
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.12) 0%, rgba(251, 191, 36, 0.06) 100%);
    box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.2);
}
.datingInterestCardSuperLike:not(.datingInterestCardMatch):hover {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.18) 0%, rgba(251, 191, 36, 0.10) 100%);
}
.datingInterestSuperBadge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #d97706;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px 2px 5px;
    border-radius: 10px;
    margin-top: 5px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.datingInterestSuperAntlers {
    color: #d97706;
    display: inline-flex;
    gap: 1px;
    vertical-align: middle;
}
.datingInterestAvatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: inline-block;
}
.datingInterestAvatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.datingInterestInfo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.datingInterestName {
    font-weight: 600;
    color: var(--wcfLinkColor, #2980b9);
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.datingInterestName:hover { text-decoration: underline; }
.datingInterestMeta {
    font-size: 0.85rem;
    color: var(--wcfContentDimmedText);
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.datingInterestActions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.datingInterestDate {
    font-size: 0.8rem;
    color: var(--wcfContentDimmedText);
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 110px;
    text-align: right;
}
.datingInterestEmpty {
    padding: 20px 16px;
    color: var(--wcfContentDimmedText);
    border: 1px solid var(--wcfContentBorderInner);
    border-radius: 4px;
    background: var(--wcfContentBackground);
}
.datingInterestEmpty p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------------- Concert-Match Page -------------------------------------- */
.datingConcertMatchGrid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.datingConcertMatchCard {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--wcfContentBackground);
    border: 1px solid var(--wcfContentBorderInner);
    border-radius: 6px;
    padding: 10px 14px;
}
.datingConcertMatchAvatar img {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    object-fit: cover;
}
.datingConcertMatchInfo {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.datingConcertMatchEvent {
    font-size: 0.85rem;
    color: var(--wcfContentDimmedText);
}

/* ---------------- Lightbox ------------------------------------------------ */
.datingLightbox {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.datingLightbox.isOpen { display: flex; }
.datingLightboxClose {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 8px;
}
.datingLightboxImageWrap {
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.datingLightboxImg {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    -webkit-user-select: none;
    user-select: none;
}
.datingLightboxNav {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.datingLightboxNavBtn {
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
}
.datingLightboxCounter {
    color: #fff;
    align-self: center;
    font-size: 0.9em;
}

/* ---------------- Report Dialog ------------------------------------------- */
.datingReportDialog {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.datingReportDialogInner {
    background: var(--wcfContentBackground, #fff);
    border-radius: 6px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.datingReportDialogTitle {
    margin: 0 0 12px;
}
.datingReportDialogHint {
    margin: 0 0 12px;
    color: var(--wcfContentDimmedText, #666);
}
.datingReportTextarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid var(--wcfInputBorder, #ccc);
    border-radius: 4px;
    resize: vertical;
    background: var(--wcfInputBackground, #fff);
    color: var(--wcfInputText, #333);
}
.datingReportTextarea.isError { border-color: red; }
.datingReportActions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ---------------- Profile-Edit Photo Uploader ----------------------------- */
.datingPhotoDropZone {
    border: 2px dashed var(--wcfContentBorderInner);
    border-radius: 8px;
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: var(--wcfContentBackground);
}
.datingPhotoDropZone.is-edit { padding: 24px; }
.datingPhotoDropZone.isHover {
    border-color: var(--wcfButtonPrimaryBackground, #2980b9);
    background: rgba(41,128,185,.05);
}
.datingPhotoDropZone.isDisabled {
    opacity: .5;
    pointer-events: none;
}
.datingPhotoDropZoneTitle {
    margin: 8px 0 4px;
    font-weight: 600;
}
.datingPhotoDropZoneHint {
    color: var(--wcfContentDimmedText);
    font-size: 0.85em;
    margin: 0 0 10px;
}
.datingPhotoDropZoneInfo { color: var(--wcfContentDimmedText); }
.datingPhotoDropZoneFileInput { display: none; }
.datingPhotoCreatePreview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.datingPhotoCreatePreviewItem {
    width: 90px;
    height: 90px;
    border-radius: 6px;
    background: var(--wcfContentBorderInner);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    overflow: hidden;
}
.datingPhotoCreatePreviewItem img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid var(--wcfContentBorderInner);
    display: block;
}
.datingPhotoGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.datingPhotoThumb {
    position: relative;
    width: 120px;
}
.datingPhotoThumb img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
}
.datingPhotoThumb img.is-main { border: 3px solid #2980b9; }
.datingPhotoThumbActions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}
.datingPhotoThumbBadge {
    flex: 1;
    text-align: center;
    font-size: 0.75em;
}
.datingPhotoThumbBtn { flex: 1; font-size: 0.75em; }
.datingPhotoDeleteBtn { color: red; }

/* =============================================================================
 * v0.19.0 – Online-Indikator, Profilbesuche, Super-Geweih, Interessen-Tags
 * ============================================================================= */

/* Online Indicator */
.datingOnlineBadge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 12px;
    margin-bottom: 8px;
}
.datingOnline--online {
    color: #27ae60;
    background: rgba(39, 174, 96, 0.1);
}
.datingOnline--recent {
    color: #f39c12;
    background: rgba(243, 156, 18, 0.1);
}

/* Profile Visits */
.datingDemoNotice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    background: rgba(100, 100, 100, 0.12);
    color: var(--wcfContentDimmedText, #888);
    font-size: 0.875rem;
    border: 1px solid rgba(100, 100, 100, 0.2);
}

.datingVisitStats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(128,128,128,0.06);
    border-radius: 8px;
    border: 1px solid var(--wcfContentBorderInner);
    margin-top: 8px;
}
.datingVisitCount {
    font-size: 0.85rem;
    color: var(--wcfContentDimmedText);
    display: flex;
    align-items: center;
    gap: 6px;
}
.datingVisitAvatars {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}
.datingVisitAvatars img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
.datingVisitLink {
    font-size: 0.8rem;
    width: 100%;
    justify-content: center;
}

/* Super-Geweih */
.datingHeartButton--super {
    background: linear-gradient(135deg, #f39c12, #e67e22) !important;
    border-color: #e67e22 !important;
    color: #fff !important;
}
.datingHeartButton--super:hover {
    background: linear-gradient(135deg, #e67e22, #d35400) !important;
    border-color: #d35400 !important;
}
.datingHeartButton--superSent,
.datingHeartButton--superSent:hover {
    background: rgba(243, 156, 18, 0.15) !important;
    border-color: #f39c12 !important;
    color: #e67e22 !important;
    opacity: 0.75;
    cursor: default;
}

/* Interest Tags */
.datingInterestTag {
    background: rgba(41, 128, 185, 0.08) !important;
    border-color: rgba(41, 128, 185, 0.3) !important;
    color: var(--wcfContentText) !important;
}
.datingInterestTag--shared {
    background: rgba(39, 174, 96, 0.12) !important;
    border-color: rgba(39, 174, 96, 0.5) !important;
    color: #27ae60 !important;
    font-weight: 600;
}

/* Interest selector in edit form */
.datingInterestCategories {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.datingInterestCategory {
    border: 1px solid var(--wcfContentBorderInner);
    border-radius: 8px;
    padding: 12px 16px;
}
.datingInterestCategoryTitle {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wcfContentDimmedText);
    margin-bottom: 10px;
}
.datingInterestCheckboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.datingInterestCheckboxes label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--wcfContentBorderInner);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all .15s;
    background: var(--wcfContentBackground);
}
.datingInterestCheckboxes label:has(input:checked) {
    background: var(--wcfButtonPrimaryBackground, #2980b9);
    border-color: var(--wcfButtonPrimaryBackground, #2980b9);
    color: #fff;
}
.datingInterestCheckboxes input[type="checkbox"] {
    display: none;
}
.datingInterestMaxHint {
    font-size: 0.8rem;
    color: var(--wcfContentDimmedText);
    margin-top: 8px;
}

/* ---------------- Sidebar-Box -------------------------------------------- */
.datingBoxHint {
    font-size: 0.875rem;
    color: var(--wcfContentDimmedText);
    margin: 0 0 10px;
    line-height: 1.45;
}

.datingBoxAllLink {
    display: block;
    font-size: 0.8rem;
    color: var(--wcfContentLinkColor);
    text-decoration: none;
    margin-top: 4px;
}
.datingBoxAllLink:hover {
    text-decoration: underline;
}
.datingBoxCreateProfile {
    text-align: center;
    padding: 4px 0 6px;
}
.datingBoxCreateProfile p {
    font-size: 0.875rem;
    color: var(--wcfContentDimmedText);
    margin-bottom: 10px;
    line-height: 1.45;
}