.footer-menu, .deposit-btn-container{
    padding-bottom: env(safe-area-inset-bottom);
}

.text-white{
    color: #ffffff!important;
}

/******************************** Main menu ****************************************/
.navbar-flatty .container .header-navigation .navbar-nav.navbar-main_menu menu a{
    color: #FFFFF0;
}
/***********************************************************************************/

h1:not(.magazine-profile__name),.h1:not(.magazine-profile__name){
    font-size: 32px;
    font-weight: normal;
    padding: 0px 0px 12px;
    color: inherit;
}

.footer-languages .fa-globe{
    font-size: 18px;
    color: #fff;
    margin-right: 5px;
    margin-bottom: 0;
}

.footer-languages span{
    color: #fff;
}

.footer-languages .active{
    color: inherit;
    font-weight: bold;
    cursor: default;
    text-decoration: none;
}

.footer-menu-title-block {
    text-transform: uppercase;
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    padding: 5px 0 0;
}

@media (min-width: 768px) {
    .footer-menu-list-block a{
        color: #fff;
    }
}

/************************* users/search - page *******************************/

.search-header h1.title{
    color: #ffffff;
}

.user-search .users-sort .active{
    color: #ffffff;
}
.user-search .users-sort span:hover{
    color: #ffffff;
}

/********************************** media/index ***********************************/

.g-flatty-block{
    background: #ededed;
    border: 1px #ddd solid;
    border-radius: 5px;
    padding: 15px 15px;
}
@media (max-width: 768px) {
    #onesignal-bell-container.onesignal-reset.onesignal-bell-container-bottom-right{
        margin-bottom: 64px;
    }
}

/********************************** chat/index ***********************************/
.chatbox.dialog-opened {
    display: flex;
    flex-flow: column;
}
.chatbox.dialog-opened .chatbox-content{
    flex-grow: 1;
    min-height: auto;
}
.chatbox.dialog-opened .chatbox-content .chatbox-dialog{
    height: 100%;
    display: flex !important;
    flex-flow: column;
}
.chatbox.dialog-opened .chatbox-content .chatbox-dialog .chatbox-dialog__messages{
    flex-grow: 1;
}
@media (max-width: 768px) {

    .chatbox.dialog-opened {
        width: 100%;
        bottom: 0;
        z-index: 10;
        display: flex;
        position: fixed;
        flex-flow: column;
        margin-top: 0;
        max-height: calc(100vh - env(safe-area-inset-bottom));
        max-height: calc(var(--vh, 1vh) * 100 - env(safe-area-inset-bottom));
    }

    .chatbox.dialog-opened h1{
        display: none;
    }
    .chatbox.dialog-opened .chatbox-container{
        /*height: calc(100% - 26px);*/
        overflow: hidden;
    }
    .chatbox.dialog-opened .chatbox-content{
        flex-grow: 1;
        min-height: auto;
    }
    .chatbox.dialog-opened .chatbox-content .chatbox-dialog{
        height: 100%;
        display: flex;
        flex-flow: column;
    }
    .chatbox.dialog-opened .chatbox-content .chatbox-dialog .chatbox-dialog__messages{
        flex-grow: 1;
    }
    .chatbox-dialog__h-user{
        padding: 4px 0;
    }
    .chatbox-dialog__header .chatbox-dialog__h-user-image{
        width: 48px;
        height: 48px;
    }
    .chatbox-dialog__header .chatbox-dialog__h-user-location{
        margin-top: 0;
    }
}
.chatbox-dialog__footer-msgbox i.emoji-picker-icon-attach.emoji-picker{
    left: unset!important;
}

/* === CHATBOX-FRESHENING v1.0.9 (seksitreffit) === */
/* ====================================================================
   Vastaamattomien viestien siivous — moderni ulkoasu
   (countdown-chip, dialogin keskitetty countdown, pikavastaus, popup)
   Aikavyohyke: amber = "vanhenee pian". Pikavastaus = teeman primary.
   ==================================================================== */

:root {
    --cb-amber-bg: rgba(245, 158, 11, .14);
    --cb-amber-bd: rgba(245, 158, 11, .30);
    --cb-amber-fg: #b45309;
    /* Violetti vain hienovaraisena gradientti-aksenttina (napit/ikonit/borderit) */
    --cb-grad: linear-gradient(135deg, #c81e1e, #e8431f 55%, #f97316);
    --cb-primary: linear-gradient(135deg, #c81e1e, #e8431f 55%, #f97316);
    --cb-primary-fg: #fff;
    --cb-radius: 14px;
}

/* --- Countdown-chip contact-listassa: pieni amber-pilleri (ei tokero punainen teksti) --- */
.chatbox-users__countdown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 1px 9px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .01em;
    color: var(--cb-amber-fg);
    background: var(--cb-amber-bg);
    border: 1px solid var(--cb-amber-bd);
    border-radius: 999px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chatbox-users__countdown i { font-size: 10px; opacity: .9; }

/* --- Dialogin keskitetty countdown-banneri: tarttuu yläreunaan --- */
.cb-dialog-countdown {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    padding: 10px 12px 4px;
    pointer-events: none;
}
.cb-dialog-countdown__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cb-amber-fg);
    background: linear-gradient(180deg, rgba(255,251,235,.96), rgba(254,243,199,.96));
    border: 1px solid var(--cb-amber-bd);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(180, 83, 9, .12);
    backdrop-filter: blur(4px);
}
.cb-dialog-countdown__chip i { font-size: 13px; }

/* --- Pikavastaus suoraan chatissa: irrallinen, keskitetty CTA (ei kiinni inputissa) --- */
.cb-quick-reply {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 10px auto 18px;
    padding: 0 16px;
    text-align: center;
}
.cb-quick-reply__hint {
    font-size: 12.5px;
    color: rgba(120, 120, 130, .9);
}
.cb-quick-reply__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--cb-primary-fg);
    background: var(--cb-primary);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.cb-quick-reply__btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.cb-quick-reply__btn:active { transform: translateY(0); }
.cb-quick-reply__btn:disabled { opacity: .6; cursor: default; transform: none; }

/* === Sessiomuistutus-popup (siistitty, moderni kortti) === */
.cb-reminder {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99999;
    width: 340px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .22);
    padding: 18px 18px 16px;
    animation: cbReminderIn .28s cubic-bezier(.2, .7, .3, 1);
}
@keyframes cbReminderIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.cb-reminder__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .05);
    font-size: 18px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.cb-reminder__close:hover { background: rgba(0, 0, 0, .1); color: #333; }
.cb-reminder__inner { display: flex; align-items: flex-start; gap: 14px; }
.cb-reminder__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.cb-reminder__content { flex: 1 1 auto; min-width: 0; }
.cb-reminder__title { font-weight: 700; font-size: 14px; margin-bottom: 3px; color: #1a1a1a; }
.cb-reminder__text { font-size: 13px; color: #555; margin-bottom: 12px; line-height: 1.45; word-wrap: break-word; }
.cb-reminder__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cb-reminder__actions .btn { padding: 7px 16px; font-size: 13px; border-radius: 999px; }
.cb-reminder .cb-reminder__quick { background: var(--cb-primary); color: var(--cb-primary-fg); border: 0; }

@media (max-width: 768px) {
    .cb-reminder {
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
    }
    .cb-reminder__actions .btn { flex: 1 1 auto; text-align: center; }
}

/* === Chatbox-sivun moderni viimeistely (turvallista, additiivista) === */
.chatbox-users__user {
    transition: background-color .15s ease;
    border-radius: 12px;
}
.chatbox-dialog__footer-msgbox .form-control,
.chatbox-dialog__footer__textarea {
    border-radius: 14px !important;
}
.chatbox-dialog__messages { scroll-behavior: smooth; }

/* ========================================================================
   Chatbox-tabit (Kaikki / Lukemattomat / Vastaamattomat) — geneerinen pohja
   (kaikki sivustot; varit teemamuuttujista -> pelkistetty, sopii kaikkialle)
   ======================================================================== */
.cb-tabs {
    display: none; /* nakyviin sivustokohtaisesti (aloitus: vain seksitreffit) */
    gap: 6px;
    padding: 10px 10px 8px;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
[data-theme="seksitreffit"] .cb-tabs { display: flex; }
.cb-tabs::-webkit-scrollbar { display: none; }
.cb-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    color: hsl(var(--bc, 0 0% 20%) / .6);
    background: hsl(var(--bc, 0 0% 20%) / .05);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.cb-tab:hover { color: hsl(var(--bc, 0 0% 20%) / .9); background: hsl(var(--bc, 0 0% 20%) / .06); }
.cb-tab.is-active { color: hsl(var(--pc, 0 0% 100%)); background: hsl(var(--p, 326 73% 56%)); }
.cb-tab__count { font-size: 11px; font-weight: 700; opacity: .85; }
.cb-tab__count:empty { display: none; }
.cb-tab-empty { padding: 28px 16px; text-align: center; font-size: 13px; color: hsl(var(--bc, 0 0% 20%) / .5); }

/* ========================================================================
   TREFFITSUOMI24 — chatbox: pelkistetty harmaa/valkoinen/musta -paletti.
   EI sinista/violettia pintoina. Violetti vain hienovaraisena gradientti-
   aksenttina (aktiivinen tab, lukematon-badge, lahetysnappi, aktiivirivin
   border, ikonit). Korkeus rajattu -> lista ja dialogi samankorkuiset.
   ======================================================================== */
[data-theme="seksitreffit"] .chatbox {
    /* Neutralisoi DaisyUI base-varit chatboxin sisalla -> KAIKKI tw-bg-base-* /
       tw-text-base-content muuttuvat harmaiksi/tummiksi automaattisesti (Tailwind
       important:true voittaa muuten yksittaiset saannot). Vain chatbox-scope. */
    --b1: 0 0% 100%;
    --b2: 240 5% 96%;
    --b3: 240 5% 91%;
    --bc: 232 9% 14%;
    --n: 232 9% 18%;
    --nc: 0 0% 100%;

    --cbx-surface: #ffffff;
    --cbx-panel: #f1f1f3;
    --cbx-item: #ffffff;
    --cbx-hover: rgba(0, 0, 0, .035);
    --cbx-text: #1d1d20;
    --cbx-muted: rgba(0, 0, 0, .5);
    --cbx-border: rgba(0, 0, 0, .08);
    --cbx-grad: linear-gradient(135deg, #c81e1e, #e8431f 55%, #f97316);
    --cbx-accent: #e23a1f;
    --cbx-bubble-in: #eeeef0;
    --cbx-bubble-out: #2b2b30;
}

/* --- Kontti: yksi siisti valkoinen kortti, korkeus rajattu, sisainen scroll --- */
[data-theme="seksitreffit"] .chatbox-container {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--cbx-border);
    border-radius: 18px;
    overflow: hidden;
    background: var(--cbx-surface);
    height: clamp(420px, calc(100dvh - 215px), 780px);
    min-height: 0;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .22), 0 0 0 1px rgba(226, 58, 31, .14);
}
[data-theme="seksitreffit"] .chatbox-users {
    border-right: 1px solid var(--cbx-border);
    /* hienovarainen gradientti paneeliin (ei lattea harmaa) */
    background: linear-gradient(180deg, #f5f4f7 0%, #ececef 100%);
    display: flex;
    flex-direction: column;
    padding: 0;
    height: 100%;
    min-height: 0;
}
[data-theme="seksitreffit"] .chatbox-users__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px 10px;
}
[data-theme="seksitreffit"] .chatbox-content {
    background: var(--cbx-surface);
    height: 100%;
    min-height: 0;
    padding: 0;
}
/* Teksti tummaksi koko chatboxiin (tw-text-current peri muuten vaalean varin
   -> valkoinen valkoisella). #chatbox-id voittaa Tailwindin important-saannot. */
[data-theme="seksitreffit"] #chatbox { color: var(--cbx-text) !important; }
[data-theme="seksitreffit"] #chatbox .chatbox-users__username { color: var(--cbx-text) !important; margin: 0 !important; padding: 0 !important; line-height: 1.3 !important; }
/* tiiviimpi kortti: poista sisaisten lohkojen ylimaarainen pystypadding */
[data-theme="seksitreffit"] #chatbox .chatbox-users__cinner { padding: 0 !important; }
[data-theme="seksitreffit"] #chatbox .chatbox-users__message { padding: 0 !important; margin-top: 2px !important; }
[data-theme="seksitreffit"] #chatbox .chatbox-users__message,
[data-theme="seksitreffit"] #chatbox .chatbox-users__your,
[data-theme="seksitreffit"] #chatbox .chatbox-messages__timing,
[data-theme="seksitreffit"] #chatbox .chatbox-messages__time { color: var(--cbx-muted) !important; }
/* Esikatselun emoji-placeholderit (emoji-picker img.img + valkoinen :code:-teksti)
   nakyivat outoina valkoisina laatikoina / valkoisena tekstina -> piilota esikatselusta. */
[data-theme="seksitreffit"] #chatbox .chatbox-users__message img { display: none !important; }
[data-theme="seksitreffit"] #chatbox .chatbox-messages__bubble-left .chatbox-messages__message { color: var(--cbx-text) !important; }

/* --- Tabit: segmented control joka MAHTUU (tasakolmannekset, ei scrollia) --- */
[data-theme="seksitreffit"] .cb-tabs {
    display: flex;
    gap: 3px;
    margin: 8px;
    padding: 4px;
    background: rgba(0, 0, 0, .05);
    border-radius: 12px;
    border-bottom: 0;
    overflow: visible;
}
[data-theme="seksitreffit"] .cb-tab {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    gap: 4px;
    padding: 8px 3px;
    font-size: 11.5px;
    color: var(--cbx-muted);
    background: transparent;
    border-radius: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="seksitreffit"] .cb-tab:hover { background: rgba(0, 0, 0, .04); color: var(--cbx-text); }
[data-theme="seksitreffit"] .cb-tab.is-active {
    background: var(--cbx-grad);
    color: #fff;
    box-shadow: 0 3px 10px rgba(226, 58, 31, .35);
}
[data-theme="seksitreffit"] .cb-tab__count { font-size: 10.5px; opacity: .9; }
[data-theme="seksitreffit"] .cb-tab-empty { color: var(--cbx-muted); }

/* --- Kontaktirivit: erottuvat valkoiset kortit --- */
[data-theme="seksitreffit"] #chatbox .chatbox-users__user {
    display: flex;                     /* EI !important -> tabin suodatin (inline display:none) voi piilottaa rivin */
    align-items: center !important;   /* avatar pystysuunnassa keskelle korttia */
    gap: 0;                            /* valistys hoidetaan avatarin margin-rightilla (luotettava) */
    padding: 8px 12px;                 /* tiiviimpi kortti */
    margin: 0 0 6px;
    border-radius: 14px;
    border: 1px solid rgba(226, 58, 31, .10) !important;
    /* ei pelkkaa valkoista: hailakka lavender-gradientti -> eloa */
    background: linear-gradient(150deg, #ffffff 0%, #fdf3f2 100%) !important;
    box-shadow: 0 1px 2px rgba(226, 58, 31, .05);
    cursor: pointer;
    transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease;
}
[data-theme="seksitreffit"] #chatbox .chatbox-users__user:hover {
    background: linear-gradient(150deg, #fef9f8 0%, #fce9e6 100%) !important;
    border-color: rgba(226, 58, 31, .28) !important;
    box-shadow: 0 6px 18px rgba(226, 58, 31, .16);
    transform: translateY(-1px);
}
/* aktiivinen = violetti gradientti-border (padding/border-box -temppu pyoristaa) + hailakka tayttogradientti + varjo */
[data-theme="seksitreffit"] #chatbox .chatbox-users__user.active {
    border: 1.5px solid transparent !important;
    background:
        linear-gradient(150deg, #fefbfb, #fcebe9) padding-box,
        var(--cbx-grad) border-box !important;
    box-shadow: 0 8px 22px rgba(226, 58, 31, .22) !important;
}
/* avatar: lapinakyva tausta (ei laatikkoa kulmiin) + kiintea koko + selkea valistys teksteihin */
[data-theme="seksitreffit"] #chatbox .chatbox-users__photo {
    background: transparent !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 14px 0 0 !important;   /* 14px avatarin ja tekstien valiin -> ei limity */
    padding: 0 !important;            /* esti kuvaa siirtymasta oikealle (limittyi tekstiin) */
    overflow: hidden;                 /* leikkaa mahd. ylivuoto -> ei valu tekstin paalle */
    border-radius: 50%;
}
[data-theme="seksitreffit"] #chatbox .chatbox-users__photo img {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    display: block;
    object-fit: cover;
}
[data-theme="seksitreffit"] .chatbox-users__photo img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
[data-theme="seksitreffit"] #chatbox .chatbox-users__content {
    margin: 0 !important;            /* tw-ml-20 (80px) pois -> nimi/viesti lahemmas avataria */
    background: transparent !important; /* aktiivirivin harmaa laatikko pois -> yhtenainen kortti */
    height: auto !important;          /* poista kiintea korkeus -> tiiviimpi rivi */
    min-height: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
}
[data-theme="seksitreffit"] .chatbox-users__cinner { display: block; }
[data-theme="seksitreffit"] .chatbox-users__username {
    font-size: 14px; font-weight: 600; color: var(--cbx-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="seksitreffit"] .chatbox-users__message {
    font-size: 12.5px; color: var(--cbx-muted); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
[data-theme="seksitreffit"] .chatbox-users__your { color: var(--cbx-muted); }
[data-theme="seksitreffit"] .chatbox-users__message .fa-check { display: none; }
/* lukematon = violetti gradientti-badge */
[data-theme="seksitreffit"] .chatbox-users__new_msg { position: static; margin-left: auto; flex: 0 0 auto; }
[data-theme="seksitreffit"] .chatbox-users__new_msg span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    background: var(--cbx-grad); color: #fff;
    font-size: 11px; font-weight: 700; border-radius: 999px;
    box-shadow: 0 2px 6px rgba(226, 58, 31, .35);
}
[data-theme="seksitreffit"] .chatbox-users__favorites { color: rgba(0, 0, 0, .25); }
[data-theme="seksitreffit"] .chatbox-users__favorites.selected { color: var(--cbx-accent); }

/* --- Neutraali countdown (ei amberia seksitreffit:lla); violetti vain ikonissa --- */
[data-theme="seksitreffit"] .chatbox-users__countdown {
    color: var(--cbx-muted); background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .08);
}
[data-theme="seksitreffit"] .cb-dialog-countdown__chip {
    color: var(--cbx-text); background: #fff; border: 1px solid var(--cbx-border);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .08); backdrop-filter: none;
}
[data-theme="seksitreffit"] .chatbox-users__countdown i,
[data-theme="seksitreffit"] .cb-dialog-countdown__chip i {
    background: var(--cbx-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* --- Dialogin otsikko --- */
[data-theme="seksitreffit"] .chatbox-dialog { display: flex; flex-direction: column; height: 100%; min-height: 0; }
[data-theme="seksitreffit"] .chatbox-dialog__header { border-bottom: 1px solid var(--cbx-border); padding: 10px 14px; background: var(--cbx-surface); }
[data-theme="seksitreffit"] .chatbox-dialog__h-user-name { font-size: 15px; font-weight: 600; color: var(--cbx-text); }
[data-theme="seksitreffit"] .chatbox-dialog__h-user-location .text-overflow { color: var(--cbx-muted); }

/* --- Viestialue + kuplat: harmaa (saapuva) / tumma (lahteva), ei violettia pintana --- */
[data-theme="seksitreffit"] .chatbox-dialog__messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--cbx-surface); padding: 14px 16px; }
[data-theme="seksitreffit"] .chatbox-messages__bubble {
    border: 0 !important;
    padding: 9px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: none;
}
[data-theme="seksitreffit"] #chatbox .chatbox-messages__bubble-left {
    background: var(--cbx-bubble-in) !important;
    color: var(--cbx-text) !important;
    border-radius: 16px 16px 16px 4px;
}
[data-theme="seksitreffit"] #chatbox .chatbox-messages__bubble-right {
    background: var(--cbx-bubble-out) !important;
    color: #fff !important;
    border-radius: 16px 16px 4px 16px;
}
[data-theme="seksitreffit"] #chatbox .chatbox-messages__bubble-right * { color: #fff !important; }
[data-theme="seksitreffit"] .chatbox-messages__timing { font-size: 11px; color: var(--cbx-muted); }
[data-theme="seksitreffit"] .chatbox-messages__time { text-align: center; font-size: 11px; color: var(--cbx-muted); margin: 12px 0; }

/* --- Footer / syottokentta + lahetysnappi (violetti gradientti-ympyra) --- */
[data-theme="seksitreffit"] .chatbox-dialog__footer { border-top: 1px solid var(--cbx-border); background: var(--cbx-surface); padding: 10px 12px; }
[data-theme="seksitreffit"] .chatbox-dialog__footer__textarea,
[data-theme="seksitreffit"] .chatbox-dialog__footer-msgbox .form-control {
    background: var(--cbx-panel) !important;
    border: 1px solid var(--cbx-border) !important;
    border-radius: 22px !important;
    color: var(--cbx-text) !important;
}
[data-theme="seksitreffit"] #chb_send_msg_btn {
    background: var(--cbx-grad) !important;
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(226, 58, 31, .35);
    border: 0;
}
[data-theme="seksitreffit"] #chb_send_msg_btn svg { width: 15px !important; height: 15px !important; }
[data-theme="seksitreffit"] #chb_send_msg_btn svg,
[data-theme="seksitreffit"] #chb_send_msg_btn svg path { fill: #fff !important; }

/* --- Mobiili: lista/dialog koko ruutu, korkeus rajattu, ei vaakascrollia --- */
@media (max-width: 767px) {
    [data-theme="seksitreffit"] .chatbox-container {
        height: clamp(360px, calc(100dvh - 120px), 100dvh);
        min-height: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }
    [data-theme="seksitreffit"] .chatbox-users { border-right: 0; background: var(--cbx-panel); }
    [data-theme="seksitreffit"] .chatbox-dialog__messages { padding: 12px; }
    [data-theme="seksitreffit"] .chatbox-messages__bubble { max-width: 78vw; }
    [data-theme="seksitreffit"] .cb-tab { font-size: 11px; padding: 9px 3px; }
}

/* --- Primary-varinen chrome chatboxin sisalla -> brandiaksentti (teeman raaka --p
   saattaa olla huonokontrastinen valkoiselle ikonille; pidetaan aksentti yhtenaisena) --- */
[data-theme="seksitreffit"] #chatbox .tw-btn-primary {
    background: var(--cbx-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}
[data-theme="seksitreffit"] #chatbox .tw-btn-primary:hover { filter: brightness(1.05); }

/* === CHATBOX-RESPONSIVE v1.0.9 (seksitreffit) ===
   Taysi responsiivisuus: kutistuu lyhyille/zoomatuille naytoille, vain sisainen
   scroll, ei rakenteen hajoamista. Poistetaan clamp-pikselilattia (420/360px) ja
   nollataan jaetun scss-pohjan kiinteat korkeudet (660/635/755px) jotta flex
   hallitsee korkeudet. dvh + --vh (i_head_init_js setVh) -fallback. */
[data-theme="seksitreffit"] .chatbox-container {
    /* Mahtuu ruutuun ILMAN sivun scrollia (vain kontaktilista scrollaa sisaisesti),
       eika ole jattikorkea isolla naytolla (katto 780px). Offset 250 kattaa ylapalkin
       (nav+carousel+otsikko ~240px) -> ei ylivuoto. Lyhyt ikkuna: floor 0 -> kutistuu. */
    height: clamp(0px, calc(100dvh - 250px), 780px);
    height: clamp(0px, calc((var(--vh, 1vh) * 100) - 250px), 780px);
    min-height: 0;
    overflow: hidden;
}
/* Tabit: luonnollinen leveys + vaakascrollaus kun ei mahdu (4+ valilehtea, esim. Osumat).
   flex-shrink:0 -> tab-rivi EI kutistu pystysuunnassa pitkan listan flex-paineessa
   (muuten cb-tabs litistyi ~14px:aan ja sisalto valui kontaktilistan paalle). */
[data-theme="seksitreffit"] .cb-tabs {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
[data-theme="seksitreffit"] .cb-tabs::-webkit-scrollbar { display: none; }
[data-theme="seksitreffit"] .cb-tab { flex: 0 0 auto; white-space: nowrap; }
[data-theme="seksitreffit"] .chatbox-content,
[data-theme="seksitreffit"] .chatbox-content__inner,
[data-theme="seksitreffit"] .chatbox-users,
[data-theme="seksitreffit"] .chatbox-dialog { min-height: 0; }
/* height !important: voita Tailwind important -luokka .md:tw-h-auto (chatbox/index.twig),
   joka muuten romahduttaa flex-sarakkeen sisallon korkeuteen desktopilla -> footer (syottokentta)
   jaa keskelle lyhyessa keskustelussa. 100% -> flex tayttaa korkeuden, footer pysyy alalaidassa. */
[data-theme="seksitreffit"] .chatbox-content__inner { display: flex; flex-direction: column; height: 100% !important; }
[data-theme="seksitreffit"] .chatbox-users__list { height: auto; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
[data-theme="seksitreffit"] .chatbox-dialog__messages { height: auto; max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
[data-theme="seksitreffit"] .chatbox-dialog__header,
[data-theme="seksitreffit"] .chatbox-dialog__footer { flex: 0 0 auto; }

/* Mobiili: koko dynaaminen viewport, ei pikselilattiaa */
@media (max-width: 767px) {
    [data-theme="seksitreffit"] .chatbox-container {
        height: 100dvh;
        height: calc(var(--vh, 1vh) * 100);
        max-height: 100dvh;
        max-height: calc(var(--vh, 1vh) * 100);
        min-height: 0;
    }
}

/* Hyvin matala / voimakkaasti zoomattu ikkuna: tiivista ja vapauta tilaa
   (ei pakoteta korkeutta -> paaclamp (floor 0) kutistaa jo oikein) */
@media (max-height: 540px) {
    [data-theme="seksitreffit"] .chatbox-dialog__header { padding-top: 6px; padding-bottom: 6px; }
    [data-theme="seksitreffit"] .chatbox-dialog__messages { padding-top: 8px; padding-bottom: 8px; }
    [data-theme="seksitreffit"] .chatbox h1 { display: none; }
}

/* === CHATBOX-HEADER v1.0.9 (seksitreffit) ===
   Mobiili: piilota online-kayttajien owl-carousel chatbox-sivulta (body.chatbox-page
   asetetaan chatbox/index.twig:ssa). "Viestikeskus"-otsikko nakyy jo mobiilin
   header-palkissa vasemmalla (a -> /users/search/); kortin oma h1 on .xhide-mob
   -> piilossa mobiilissa. Desktopilla carousel + kortin h1 sailyvat ennallaan. */
@media (max-width: 767px) {
    body.chatbox-page #active_users_inner { display: none !important; }
}


/* ========================================================================
   v1.1.1: contact-list-tabit (6 valilehtea: Kaikki/Lukemattomat/Ei vastatut/
   Osumat/Vierailijat/Tykkasi sinusta) -> NAYTA ohut vaakascrollbar jotta kaikki
   valilehdet mahtuvat ja ovat saavutettavissa myos mobiilissa. Yliajaa aiemmat
   scrollbar-piilotukset (sama spesifisyys, myohempi saanto voittaa).
   ======================================================================== */
[data-theme="seksitreffit"] .cb-tabs,
.cb-tabs {
    scrollbar-width: thin;
    -ms-overflow-style: auto;
    scrollbar-color: hsl(var(--bc, 0 0% 20%) / .35) transparent;
    -webkit-overflow-scrolling: touch;
}
[data-theme="seksitreffit"] .cb-tabs::-webkit-scrollbar,
.cb-tabs::-webkit-scrollbar { display: block; height: 6px; }
[data-theme="seksitreffit"] .cb-tabs::-webkit-scrollbar-thumb,
.cb-tabs::-webkit-scrollbar-thumb { background: hsl(var(--bc, 0 0% 20%) / .35); border-radius: 999px; }
[data-theme="seksitreffit"] .cb-tabs::-webkit-scrollbar-track,
.cb-tabs::-webkit-scrollbar-track { background: transparent; }


/* ========================================================================
   v1.1.1: tab-redesign — selkeat valilehdet, EI numerolaskureita. Punainen tappa
   vain Lukemattomat- (lukem. viestit) ja Vierailijat-tabissa (uudet vierailut) ->
   kayttaja nakee mista messenger-valikon indikaattori muodostuu ja miten sen kuittaa.
   Inaktiiviset tabit saavat oman taustan + reunan + valin (erotin) -> ne nayttavat
   selkeasti tabeilta, eivat pelkalta tekstilta. Aktiivinen tab sailyttaa teeman varin.
   ======================================================================== */
[data-theme="seksitreffit"] .cb-tab__count, .cb-tab__count { display: none !important; }
[data-theme="seksitreffit"] .cb-tabs, .cb-tabs { gap: 6px !important; }
[data-theme="seksitreffit"] .cb-tab, .cb-tab {
    background: hsl(var(--bc, 0 0% 20%) / .08);
    border: 1px solid hsl(var(--bc, 0 0% 20%) / .16);
    border-radius: 999px;
}
[data-theme="seksitreffit"] .cb-tab:not(.is-active), .cb-tab:not(.is-active) { color: hsl(var(--bc, 0 0% 20%) / .72); }
[data-theme="seksitreffit"] .cb-tab.is-active, .cb-tab.is-active { border-color: transparent; }
[data-theme="seksitreffit"] .cb-tab.cb-tab--dot::after, .cb-tab.cb-tab--dot::after {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    margin-left: 6px;
    border-radius: 50%;
    background: #e0245e;
    box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%) / .55);
    flex: 0 0 auto;
}

/* ================================================================
   v1.2.0 — Chatbox mobiiliresponsiivisuus (lopullinen ohitus)
   Sijoitettu tiedoston LOPPUUN -> voittaa teemakohtaiset osiot
   (fantasy / treffitsuomi24) seka *-custom.css:n min-height:100% !important.
   App-tyylinen chat joka laitteella:
   - Keskustelunakyma = koko nakyva viewport; syottokentta aina nakyvissa.
   - Listanakyma = valilehdet (tabit) kiinni, vain kontaktilista vierii
     (ei sivun vieritysta).
   - Footer (+ kiinnitetty mobiilialavalikko) piiloon chatbox-sivulla,
     ettei se peita syottokenttaa.
   top/bottom-ankkurointi (ei dvh-riippuvuutta) -> deterministinen korkeus;
   #chatbox-id + !important kumoaa custom.css:n min-height:100% !important.
   ================================================================ */
@media (max-width: 767px) {
    /* Piilota footerin VIERIVA sisalto (bannerit/kielet/linkit), MUTTA jata
       kiinnitetty mobiilialavalikko (footer .tw-fixed = naytön alalaidan navi)
       NAKYVIIN. Chatbox-sisalto varaa sille tilan alas (bottom-offset alla)
       -> kontaktilista/input EI jaa navin alle. */
    body.chatbox-page footer > *:not(.tw-fixed) { display: none !important; }
    /* Kiinnitetyn mobiilinavin korkeus (+ iPhonen turva-alue) -> varattu tila */
    #chatbox.chatbox { --cb-mobnav: calc(68px + env(safe-area-inset-bottom)); }

    /* Kumoa pikkunaytto-overriden min-height:100% (sivuston *-custom.css) */
    #chatbox.chatbox { min-height: 0 !important; }

    /* ---------- KESKUSTELUNAKYMA: koko ruutu, input pohjassa ---------- */
    #chatbox.chatbox.dialog-opened {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: var(--cb-mobnav, 0px);
        z-index: 1100;
        display: flex;
        flex-direction: column;
        margin: 0;
        height: auto;
        max-height: none;
        overflow: hidden;
    }
    #chatbox.dialog-opened .chatbox-container {
        flex: 1 1 auto !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    #chatbox.dialog-opened .chatbox-content,
    #chatbox.dialog-opened .chatbox-content__inner,
    #chatbox.dialog-opened .chatbox-dialog {
        flex: 1 1 auto !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    #chatbox.dialog-opened .chatbox-dialog__header { flex: 0 0 auto; }
    /* Viestialue = ainoa vieriva osa */
    #chatbox.dialog-opened .chatbox-dialog__messages {
        flex: 1 1 auto !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Syottokentta kiinni pohjassa; turva-alue iPhonen home-indikaattorille */
    #chatbox.dialog-opened .chatbox-dialog__footer {
        flex: 0 0 auto;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    /* ---------- LISTANAKYMA: tabit kiinni, vain lista vierii ---------- */
    #chatbox.chatbox:not(.dialog-opened) {
        position: fixed;
        top: 46px; left: 0; right: 0; bottom: var(--cb-mobnav, 0px);
        z-index: 5;
        display: flex;
        flex-direction: column;
        margin: 0;
        overflow: hidden;
    }
    #chatbox:not(.dialog-opened) .chatbox-container {
        flex: 1 1 auto !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    #chatbox:not(.dialog-opened) .chatbox-users {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        float: none;
    }
    #chatbox:not(.dialog-opened) .cb-tabs { flex: 0 0 auto; }
    #chatbox:not(.dialog-opened) .chatbox-users__list {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== Footer freesaus (v1.4.7): kliinimpi, sama tausta kuin sivu + ylaviiva ===== */
footer {
    background: transparent !important;
    background-image: none !important;
    border-top: 1px solid hsl(var(--bc) / .12);
    margin-top: 28px;
    padding-top: 12px;
}
footer #footer_banner,
footer #footer_languages,
footer .footer-menu,
footer #footer_menu,
footer .footer-info {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
}
/* valikkotekstit pienemmiksi + teemavari (toimii vaalealla ja tummalla) */
footer .footer-menu-title-block {
    font-size: 11px !important;
    letter-spacing: .04em;
    color: hsl(var(--bc) / .9) !important;
    padding-top: 0 !important;
}
footer .footer-menu-list-block a,
footer .footer-menu a,
footer .footer-languages,
footer .footer-languages span,
footer .footer-languages a,
footer .footer-languages .fa-globe {
    font-size: 12px !important;
    color: hsl(var(--bc) / .66) !important;
}
footer .footer-languages .active { color: hsl(var(--bc)) !important; }
/* copyright: haalea, tosi pieni, ihan alalaitaan */
footer .footer-info { padding: 4px 0 12px !important; }
footer .footer-info .copyright {
    font-size: 10px !important;
    line-height: 1.5 !important;
    color: hsl(var(--bc) / .38) !important;
}
footer .footer-info .copyright a { color: hsl(var(--bc) / .52) !important; }

/* ===== Tervehdi-nappi: yhtenainen kompakti moderni pilleri (v1.4.8) ===== */
.pg-sayhi { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px;
    border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap;
    border: 1.5px solid hsl(var(--p) / .55); color: hsl(var(--p)); background: hsl(var(--p) / .12);
    text-decoration: none; -webkit-tap-highlight-color: transparent; box-shadow: none;
    transition: transform .14s ease, background .14s ease, border-color .14s ease, filter .14s ease; }
.pg-sayhi:hover, .pg-sayhi:focus { background: hsl(var(--p) / .2); border-color: hsl(var(--p)); color: hsl(var(--p)); text-decoration: none; }
.pg-sayhi:active { transform: scale(.96); }
.pg-sayhi[disabled], .pg-sayhi.is-loading { opacity: .6; pointer-events: none; }
.pg-sayhi i, .pg-sayhi svg { font-size: 12px; width: 14px; height: 14px; }
.pg-sayhi svg { fill: currentColor; }
.pg-sayhi--block { width: 100%; }
.pg-sayhi--solid { background: hsl(var(--p)); color: hsl(var(--pc)); border-color: hsl(var(--p)); }
.pg-sayhi--solid:hover, .pg-sayhi--solid:focus { background: hsl(var(--p)); color: hsl(var(--pc)); filter: brightness(1.06); }

/* ===== Hakusivun korttiruudukko: moderni, kompakti, mobiili-first (v1.4.8) ===== */
.us-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 !important; padding: 0 2px; }
.us-grid::before, .us-grid::after { content: none !important; display: none !important; } /* kill Bootstrap .row clearfix pseudo-elements that became empty grid cells (v1.4.9) */
@media (min-width: 540px) { .us-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .us-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1000px) { .us-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .us-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.us-grid .g-users-gallery__item { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; float: none !important; min-width: 0; }
.us-grid .g-users-gallery__item.highlight .g-users-gallery__content { box-shadow: 0 0 0 2px hsl(var(--p)), 0 6px 18px -8px hsl(var(--p) / .6); }
.us-grid .g-users-gallery__content { position: relative; border-radius: 16px !important; overflow: hidden; height: 100%;
    background: hsl(var(--b1)) !important; box-shadow: 0 2px 10px -5px hsl(var(--bc) / .4); transition: transform .18s ease, box-shadow .18s ease; }
.us-grid .g-users-gallery__item:hover .g-users-gallery__content { transform: translateY(-3px); box-shadow: 0 12px 26px -10px hsl(var(--bc) / .5); }
.us-grid .g-users-gallery__photo { position: relative; display: block; line-height: 0; }
.us-grid .g-pic-border, .us-grid .g-rounded, .us-grid .square-img-container { border: 0 !important; border-image: none !important; box-shadow: none !important; border-radius: 0 !important; background: none !important; }
.us-grid .square-img, .us-grid .g-users-gallery__photo img { border-radius: 0 !important; }
.us-grid .g-users-gallery__photo .tw-badge { position: absolute !important; top: 8px !important; left: 8px !important; right: auto !important; bottom: auto !important;
    background: hsl(var(--su, 142 71% 45%)) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
    padding: 2px 9px !important; font-size: 10px !important; font-weight: 700; height: auto !important; min-height: 0 !important; line-height: 1.5; box-shadow: 0 2px 6px rgba(0,0,0,.28); }
.us-grid .g-users-gallery__photo .tw-badge span { color: #fff !important; }
.us-grid .g-users-gallery__info { padding: 8px 10px 10px !important; display: flex; flex-direction: column; gap: 1px; }
.us-grid .g-users-gallery__info .text-overflow { font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-grid .g-users-gallery__info > .text-overflow:first-child, .us-grid .g-users-gallery__info > .text-overflow:first-child a { font-weight: 700; color: hsl(var(--bc)); }
.us-grid .g-users-gallery__info > .text-overflow:nth-child(2) { font-size: 11.5px; color: hsl(var(--bc) / .6); }
.us-grid .js-say-hi.pg-sayhi { margin-top: 7px; padding: 7px 10px; font-size: 12.5px; }
@media (max-width: 480px) {
    .us-grid { gap: 8px; }
    .us-grid .g-users-gallery__content { border-radius: 13px !important; }
    .us-grid .g-users-gallery__info { padding: 7px 8px 9px !important; }
}

.us-grid > .col-sm-12 { grid-column: 1 / -1; }
.us-grid > .clearfix { display: none; }


/* ===== v1.4.9: moderni kompakti profiili (oma + muiden profiili, .user-profile-view) =====
   Sektio-otsikot aksenttipalkilla, kentat kompaktiin kortti-ruudukkoon (label | arvo),
   ohuet jakoviivat. Korjaa myos teeman flex-direction:column -> rivit vierekkain.
   Varit teemaystavallisia: ei kovakoodattua valkoista (teksti perii sivuston varin,
   label vain himmennetaan opacityilla) -> toimii seka tummalla etta vaalealla kortilla. */
.user-profile-view .section-header { margin: 20px 0 2px !important; padding: 0 !important; border: 0 !important; background: transparent !important; display: flex; align-items: center; justify-content: space-between; }
.user-profile-view .section-header .upper { display: inline-block; width: auto !important; font-size: 12px !important; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: hsl(var(--p)) !important; padding: 0 0 0 13px; position: relative; line-height: 1.3; }
.user-profile-view .section-header .upper::before { content: ''; position: absolute; left: 0; top: 0; bottom: 1px; width: 4px; border-radius: 4px; background: hsl(var(--p)); }
.user-profile-view .view-section { background: rgba(127,127,127,.08) !important; border: 1px solid rgba(127,127,127,.2); border-radius: 14px !important; padding: 0 16px !important; margin: 8px 0 4px !important; }
.user-profile-view .field-block { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: baseline; gap: 18px; padding: 11px 0 !important; margin: 0 !important; border-bottom: 1px solid rgba(127,127,127,.18); }
.user-profile-view .field-block:last-child { border-bottom: 0 !important; }
.user-profile-view .field-name { width: auto !important; flex: 0 0 33% !important; max-width: 33% !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; float: none !important; opacity: .62 !important; font-size: 12.5px !important; font-weight: 600 !important; }
.user-profile-view .field-info { width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; float: none !important; font-size: 14px !important; line-height: 1.5; font-weight: 400 !important; overflow-wrap: anywhere; word-break: break-word; }
.user-profile-view .field-info a { color: hsl(var(--p)) !important; }
.user-profile-view .description.blur-bg { padding: 14px 16px 20px !important; border-radius: 18px !important; }
@media (max-width: 540px){
  .user-profile-view .field-block { flex-wrap: wrap; gap: 2px; }
  .user-profile-view .field-name { flex-basis: 100% !important; max-width: 100% !important; }
}
/* v1.4.9 kontrasti: fantasy on vaalea teema -> profiilikortin teksti (pakotettu valkoinen) jaisi vaalealle pinkille. Tummenna kortti vain fantasy-teemalla. */
[data-theme="fantasy"] .user-profile-view .description.blur-bg { background: rgba(16,11,24,.72) !important; }

/* v1.4.9: vaihda-kuva/avatar-latain modernin "Lisaa kuva" -modaalin nakoiseksi (yhtenainen
   UI, responsiivinen myos mobiilissa). Tyylit globaalissa CSS:ssa, koska modaali ladataan
   AJAXilla ja inline-<style> tippuu pois. Logiikka sailyy -> kuva asetetaan profiilikuvaksi
   (user_logo), jota mm. LikeMe-peli vaatii. */
#avatar_owner_content #dnd_upload_avatar { margin-bottom: 8px; }
#avatar_owner_content .drag-area { display: block; border: 2px dashed hsl(var(--bc) / .22); border-radius: 18px; background: hsl(var(--bc) / .03); padding: 30px 18px 26px; text-align: center; transition: border-color .15s ease, background .15s ease; cursor: pointer; }
#avatar_owner_content .drag-area:hover, #avatar_owner_content .drag-area.dragover, #avatar_owner_content .drag-area.drag-enter { border-color: hsl(var(--p) / .55); background: hsl(var(--p) / .06); }
#avatar_owner_content .drag-area::before { content: "\f382"; font-family: "Font Awesome 5 Free"; font-weight: 900; display: block; font-size: 40px; line-height: 1; color: hsl(var(--p)); margin-bottom: 12px; }
#avatar_owner_content .drag-area .drag { font-size: 15px; font-weight: 600; color: hsl(var(--bc) / .72); }
#avatar_owner_content .upload-btn { text-align: center; margin: 6px 0 0; font-size: 13px; color: hsl(var(--bc) / .6); }
#avatar_owner_content .upload-btn [data-role="filebutton"] { display: inline-block; position: relative; overflow: hidden; background: hsl(var(--p)); color: hsl(var(--pc)); border-radius: 999px; padding: 9px 20px; font-weight: 600; cursor: pointer; }
#avatar_owner_content .upload-btn [data-role="filebutton"] s { text-decoration: none; }
#avatar_owner_content .upload-btn [data-role="filebutton"] input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
#avatar_owner_content #btn_upload_avatar { display: block; width: 100%; margin-top: 16px; border-radius: 10px; padding: 11px; font-weight: 700; }

/* ===================================================================
   Modern mobile bottom navigation (v1.5.0)
   Fixes the transparent mobile footer (class collision: the bottom nav
   shared .footer-menu inside <footer>, which forced background:transparent)
   and modernizes the mobile footer menu. Authoritative, self-contained —
   does not depend on the purged tailwind bundle. Selectors are kept above
   `footer .footer-menu` (0,1,1) specificity on purpose.
   =================================================================== */
@media (max-width: 767px) {
    .mobile-bottom-nav.footer-menu {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        background: rgba(22, 24, 31, 0.92) !important;
        background-image: none !important;
        -webkit-backdrop-filter: saturate(140%) blur(16px) !important;
        backdrop-filter: saturate(140%) blur(16px) !important;
        border: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.40) !important;
        z-index: 1030 !important;
    }
    .mobile-bottom-nav .container,
    .mobile-bottom-nav .row {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .mobile-bottom-nav .menu-alerts {
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        justify-content: space-around !important;
        align-items: stretch !important;
    }
    .mobile-bottom-nav .menu-alerts > .menu-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
    }
    .mobile-bottom-nav .menu-alerts > .menu-item > .menu-item {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .mobile-bottom-nav .menu-alerts .menu-item a {
        position: relative !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        min-height: 54px !important;
        padding: 8px 2px 6px !important;
        color: rgba(255, 255, 255, 0.58) !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        line-height: 1.05 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: color .18s ease, transform .12s ease !important;
    }
    .mobile-bottom-nav .menu-alerts .menu-item a > span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 10.5px !important;
        line-height: 1.05 !important;
        transform: none !important;
    }
    .mobile-bottom-nav .menu-alerts .menu-item a svg {
        width: 23px !important;
        height: 23px !important;
        display: block !important;
        fill: currentColor !important;
        transition: transform .18s ease !important;
    }
    .mobile-bottom-nav .menu-alerts .menu-item a svg path {
        fill: currentColor !important;
    }
    /* active / current page */
    .mobile-bottom-nav .menu-alerts .menu-item a.active {
        color: #ffffff !important;
    }
    .mobile-bottom-nav .menu-alerts .menu-item a.active svg {
        color: hsl(var(--p, 330 68% 59%)) !important;
        transform: translateY(-1px) scale(1.05) !important;
    }
    .mobile-bottom-nav .menu-alerts .menu-item a.active::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 30px !important;
        height: 3px !important;
        border-radius: 0 0 4px 4px !important;
        background: hsl(var(--p, 330 68% 59%)) !important;
    }
    .mobile-bottom-nav .menu-alerts .menu-item a:active {
        transform: scale(0.92) !important;
    }
    /* notification badge bubble */
    .mobile-bottom-nav .menu-alerts .menu-item a .badge,
    .mobile-bottom-nav .menu-alerts .menu-item a .summand,
    .mobile-bottom-nav .menu-alerts .menu-item a .sum {
        position: absolute !important;
        top: 4px !important;
        left: calc(50% + 6px) !important;
        min-width: 16px !important;
        height: 16px !important;
        padding: 0 4px !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        line-height: 16px !important;
        color: #fff !important;
        background: #e0245e !important;
        border-radius: 999px !important;
        text-align: center !important;
        overflow: visible !important;
        box-shadow: 0 0 0 2px rgba(22, 24, 31, 0.95) !important;
    }
    .mobile-bottom-nav .menu-alerts .menu-item a .badge:empty,
    .mobile-bottom-nav .menu-alerts .menu-item a .summand:empty,
    .mobile-bottom-nav .menu-alerts .menu-item a .sum:empty {
        display: none !important;
    }
    /* reserve space so page content is never hidden behind the fixed bar */
    body:has(.mobile-bottom-nav) {
        padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
    }
}
@media (min-width: 768px) {
    .mobile-bottom-nav.footer-menu { display: none !important; }
}
/* ===== end modern mobile bottom navigation (v1.5.0) ===== */

/* v1.8.0: galleria <-> profiilikuva. v1.7.3 lisasi merkin + "aseta profiilikuvaksi"
   -toiminnon jaettuun list.twigiin, mutta tyylit olivat vain sihteeriopisto-treffitissa
   -> muilla teemoilla merkki jai tyylittelemattomaksi. Lisataan kaikille aktiivisille. */
.pg-avatar-badge {
    position: absolute; top: 8px; left: 8px; z-index: 3;
    background: hsl(var(--p)); color: hsl(var(--pc));
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    display: inline-flex; align-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.22);
}
.g-photo-actions .set-avatar-media { color: hsl(var(--bc) / .78); }
.g-photo-actions .set-avatar-media:hover { color: hsl(var(--a)); }
/* ===== end v1.8.0 galleria<->profiilikuva ===== */