/*
 Theme Name: Hello Elementor Child
 Template: hello-elementor
 Version: 1.0
*/

/* ============================================================
   ETL – UNIFIED ONLINE / OFFLINE UI
   (search card + profile card)
   ============================================================ */

/* A Rencontre teljes felső blokkja ragadjon */
#rencMenu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

@media (max-width: 1023px) {
    #rencMenu i {
        font-size: 26px !important;
        filter: brightness(1.35) 
     
    }
}
#offlinePopup {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999 !important;
}
/* Comparative blokk mobil optimalizálás */
/* Comparative blokk mobil optimalizálás */
@media (max-width: 768px) {

    /* A táblázat ne lógjon ki, fix oszlopszélesség */
    #rencPdiff table {
        table-layout: fixed !important;
        width: 100% !important;
    }

    /* Fejléc kisebb betűmérettel, sortöréssel */
    #rencPdiff th {
        white-space: normal !important;
        padding: 4px !important;
        text-align: center;
        position: relative;
    }

    /* Eredeti szöveg elrejtése */
    #rencPdiff th {
        font-size: 0 !important;
    }

    /* Rövidített tagsági szintek */
    #rencPdiff th:nth-child(2)::after {
        content: "Free M.";
        font-size: 12px;
        font-weight: bold;
    }
    #rencPdiff th:nth-child(3)::after {
        content: "Silver M.";
        font-size: 12px;
        font-weight: bold;
    }
    #rencPdiff th:nth-child(4)::after {
        content: "Gold M.";
        font-size: 12px;
        font-weight: bold;
    }

    /* Cellák összenyomása */
    #rencPdiff td {
        width: 36px !important;
        padding: 2px !important;
    }

    /* Bal oldali opciók kisebb betűvel */
    #rencPdiff td.w3-left-align {
        font-size: 12px !important;
    }
}
/* Comparative blokk alján lévő magyarázat mobil optimalizálás */
@media (max-width: 768px) {
    #rencPdiff .w3-margin-left.w3-margin-top {
        font-size: 12px !important;
        line-height: 1.3 !important;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
}
/* Comparative – pipa cellák függőleges középre igazítása mobilon */
@media (max-width: 768px) {
    /* csak a pipa oszlopok, a bal oldali szöveg marad, ahogy van */
    #rencPdiff td:not(.w3-left-align) {
        vertical-align: middle !important;
    }
}
/* ⭐ ETL – Email-stílusú üzenetkártya ⭐ */
.rencMsgInbox .w3-bar {
    background: #f7efff;              /* finom rózsaszín-lila */
    border: 1px solid #d8c6ff;        /* lágy lila-szürke */
    border-radius: 12px;
    padding: 12px 16px;
    margin: 14px 12px;
    transition: 0.25s ease;
}

/* Hover */
.rencMsgInbox .w3-bar:hover {
    background: #f3e8ff;
    border-color: #c7a8ff;
    box-shadow: 0 2px 10px rgba(179,107,255,0.15);
    transform: translateY(-1px);
}

/* Avatar */
.rencMsgInbox .w3-bar picture img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover;
    border-radius: 5px;
    border: 2px solid #b36bff;
}

/* Avatar konténer */
.rencMsgInbox .w3-bar-item[style*="width:60px"] {
    width: 80px !important;
    min-width: 60px !important;
}

/* Feladó neve */
.rencMsgInbox .w3-bar-item:nth-child(2) {
    font-size: 18px;
    font-weight: 500;
    color: #444444;
}

/* Dátum */
.rencMsgInbox .w3-bar-item.w3-right a:first-child {
    font-size: 14px;
    color: #888888 !important;
    text-decoration: none !important;
}

/* Törlés ikon */
.rencMsgInbox .rencSupp i {
    color: #c7c7c7;
    transition: 0.2s ease;
}

.rencMsgInbox .rencSupp:hover i {
    color: #b36bff;
}

/* Olvasatlan üzenet */
.rencMsgInbox .w3-bar.unread {
    background: #f3e8ff;
    border-left: 4px solid #b36bff;
}
/* ETL – Status text enhancement */
/* ----------------------------------------------------
   ETL – Rencontre státusz UX javítás
   ---------------------------------------------------- */

/* Szöveg erősítése */
.rencInline,
.rencOutline {
    font-weight: 500 !important;      /* vastagabb betű */
    font-size: 17px !important;       /* kicsit nagyobb */
    display: flex;
    align-items: center;
}

/* Pötty alap */
.rencInline:before,
.rencOutline:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    position: relative;
    top: -1px;
}

/* Online pötty – élénk zöld */
.rencInline:before {
    background-color: #2ecc71 !important;
}
/* --- BESZÉLGETÉS NÉZET: második pipa elrejtése --- */
.fa-check[style*="margin-left:-4px"] {
    display: none !important;
}

/* --- INBOX NÉZET: második pipa elrejtése --- */
.fa-check[style*="margin-left:-.5em"] {
    display: none !important;
}

/* SZÜRKE pipa → SZÜRKE boríték */
.w3-opacity .fa-check:before {
    content: "\f0e0"; /* envelope */
}

/* KÉK pipa → KÉK nyitott boríték */
.w3-text-blue .fa-check:before {
    content: "\f2b6"; /* envelope-open */
}
/* INBOX főcím – nagy ETL lila boríték ikon */
.rencMsgInbox .w3-xlarge.w3-renc-titc:before {
    content: "\f0e0"; /* envelope icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.8em; /* kb. dupla méret */
    color: #9c27b0; /* ETL lila */
    margin-right: 10px;
    position: relative;
    top: 3px;
}
/* --- MODERN EMAIL-SZERŰ BESZÉLGETÉS NÉZET --- */

/* Üzenetkártyák */
.w3-renc-msbs, .w3-renc-msbr {
    background: #ffffff !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 12px !important;
    border: 1px solid #f1f1f1;
}

/* A felhasználó saját üzenetei enyhén színezve (email-szerű, nem chat-szerű) */
.w3-renc-msbs {
    background: #f3e8ff !important; /* nagyon halvány lila */
}

/* Dátum modern email-stílusban */
.msgDate {
    font-size: 0.8rem !important;
    opacity: 0.55 !important;
    margin-bottom: 8px !important;
    font-weight: 500;
}

/* Boríték ikon pozicionálása a kártya jobb alsó sarkába */
.w3-display-middle {
    position: absolute !important;
    right: 10px !important;
    bottom: 6px !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

/* Boríték ikon méret */
.w3-display-middle .fa-envelope,
.w3-display-middle .fa-envelope-open-o {
    font-size: 1.15rem !important;
    opacity: 0.8;
}

/* Sorok közötti távolság */
.rencMsgConversation .w3-row {
    margin-bottom: 4px !important;

}

#rcName {
    font-weight: 600;
    color: #333 !important;
}

#rcOnOff {
    font-size: 0.75rem;
    opacity: 0.6;
}

/* --- TARTALOM HÁTTÉR --- */
#rcContent {
    background: #f5f7fa;
}

/* --- HEADER HÁTTÉR LILÁRA CSERÉLÉSE (biztonságos override) --- */
#rencChat .w3-black {
    background-color: #9c27b0 !important;
}
#rencChat header {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}
/* --- TELJES CHAT ABLAK LEKEREKÍTÉSE --- */
#rencChat {
    border-radius: 5px !important;
    overflow: hidden; /* fontos, hogy a tartalom is kövesse a kerekítést */
}

/* Mobilon a chat ablak legyen középre igazítva, egyenlő oldalsó margóval */
@media (max-width: 768px) {
    #rencChat {
        width: calc(100% - 20px) !important; /* kb. 2-2 mm mindkét oldalon */
        max-width: calc(100% - 8px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: 0 !important;
        right: 0 !important;
    }
}
/* ============================
   Modern ETL–chat input 
   ============================ */

/* Modernizált chat input mező – border látszik, padding beljebb kerül */
#rcInput {
    background: #faf7ff !important;
    border: 1px solid #d8c9ff !important;
    border-radius: 16px !important;

    /* EREDETI: padding: 14px 18px → túl széles volt */
    padding: 10px 8px !important;   /* oldalról 6px-el kisebb */

    font-size: 16px !important;
    color: #4a3b78 !important;
    outline: none !important;
    box-shadow: 0 2px 8px rgba(122,91,191,0.08) !important;

    /* A LÉNYEG: legyen hely a bordernek */
    margin: 8px 6px !important;      /* oldalra +6px hely a bordernek */

    width: calc(100% - 12px) !important; /* 6px margó bal + 6px margó jobb */
    box-sizing: border-box !important;
    display: block !important;
}

/* Placeholder */
#rcInput::placeholder {
    color: #9b85d1 !important;
    opacity: 1 !important;
    font-weight: 500;
}

/* Focus animáció */
#rcInput:focus {
    border-color: #b49aff !important;
    box-shadow: 0 0 0 3px rgba(180,154,255,0.25) !important;
}
/* Repülőgép ikon az input mező végén, ami enter küldés gomb */
#etlInputWrap {
    position: relative;
}

#etlSendBtn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: #a78bfa; /* ETL-lila */
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#rcInput {
    padding-right: 50px !important;
}

/* ============================
   MOBIL – nagyobb betűméret a chatben
   ============================ */
@media (max-width: 768px) {

    /* Chat üzenetek (bejövő + kimenő) */
    #rencChat .w3-padding-small,
    #rencChat .w3-container,
    #rencChat .w3-card {
        font-size: 19px !important;   /* alap 14-15px → most szebb, olvashatóbb */
        line-height: 1.45 !important;
    }

    /* Input mező szöveg */
    #rcInput {
        font-size: 16px !important;   /* nagyobb, kényelmesebb mobilon */
    }

    /* Placeholder is legyen nagyobb */
    #rcInput::placeholder {
        font-size: 15px !important;
    }
}
@media (max-width: 768px) {
    #rcContent {
        max-height: 32vh !important; /* kisebb, hogy a header ne csússzon ki */
    }
}

/* ============================================================
   ETL – COOKIEYES FIX CSOMAG
   Stabil z-index, mobil UX, modal overlay javítás
   ============================================================ */

/* 1) A chat ablak mindig a banner fölött legyen */
#rencChat {
    z-index: 5000 !important;
}

/* 2) A CookieYes banner és revisit button legyen alacsony rétegen */
.cky-consent-bar,
#cookie-law-info-bar,
.cky-btn-revisit-wrapper {
    z-index: 10 !important;
}

/* 3) A CookieYes modal és overlay maradjon a legfelső rétegen */
.cky-modal,
.cky-consent-container,
.cky-overlay,
.cky-modal-backdrop,
.cky-consent-overlay {
    z-index: 99999 !important;
}

/* 4) A modal tartalma mindig kattintható legyen */
.cky-modal * {
    pointer-events: auto !important;
}
/* ============================================================
   ETL – Minikártya méretnövelés (+10%)
   ============================================================ */

/* Alap szélesség növelése */
.rencMiniPortrait {
    width: 50% !important; /* +10% */
    height: 130% !important;
    transform-origin: top center; /* középre igazított nagyítás */
}
/* Belső kártya is kapjon extra helyet */
.rencMiniPortrait .w3-card {
    min-height: 150px !important;
}
/* ============================================================
   ETL – Minikártya: Profile gomb ragasztása az aljára
   ============================================================ */

/* A teljes kártya legyen flexbox, függőleges irányban */
.rencMiniPortrait .w3-card {
    display: flex;
    flex-direction: column;
    height: 100%; /* a kártya teljes magasságát használja */
}

/* A felső tartalom nőhet, a gomb maradjon alul */
.rencMiniPortrait .w3-renc-container-lm {
    flex: 1 1 auto; /* kitölti a rendelkezésre álló helyet */
}

/* A gomb mindig az alján marad */
.rencMiniPortrait .w3-button {
    margin-top: auto; /* ⭐ ez ragasztja le az aljára */
}
/* ============================================================
   ETL – Minikártya felső tartalom nagyítása
   ============================================================ */

/* A felső tartalom blokk nagyítása */
.rencMiniPortrait .w3-row {
    transform: scale(1.20); /* ⭐ kb. +12% nagyítás */
    transform-origin: top left; /* ne csússzon el */
}

/* A nagyítás miatt keletkező elcsúszás korrigálása */
.rencMiniPortrait .w3-row {
    margin-bottom: 6px; /* helyet ad a gomb felett */
}
/* ============================================================
   ETL – Minikártya tartalmi box styling (szűkített, biztonságos)
   ============================================================ */

/* A belső kártya (w3-card) kapjon keretet és lekerekítést */
.rencMiniPortrait .w3-card {
    border: 2px solid #b38bff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* ============================================================
   ETL – Minikártya szélesség: desktop külön, mobil külön
   ============================================================ */

/* DESKTOP – csak 1024px felett */
@media (min-width: 1024px) {
    .rencMiniPortrait {
        width: 250px !important;
        max-width: 250px !important;
    }
}

/* ============================================================
   ETL CHAT CORE – TISZTÍTOTT, VÉGLEGES CSS
   (HISTORY + REALTIME rendszerhez)
   ============================================================ */

/* Saját üzenet – jobbra igazított wrapper */
.etl-me-wrapper {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

/* Saját buborék */
.etl-me-bubble {
    background: #ffffff;
    padding: 12px 18px;
    border-radius: 12px;
    max-width: 80%;
    margin: 4px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    font-size: 14px;
    line-height: 1.4;
}
@media (max-width: 768px) {
    .etl-me-bubble {
        font-size: 17px !important;
        line-height: 1.45 !important;
    }
}

/* Saját timestamp */
.etl-me-time {
    text-align: right;
    font-size: 11px;
    color: #999;
    margin: 2px 8px 6px 0;
}

/* Partner timestamp */
.etl-you-time {
    text-align: left;
    font-size: 11px;
    color: #999;
    margin: 2px 0 6px 8px;
}

/* Partner sor */
.etl-history-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 6px 0;
}

/* Avatar */
.etl-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0;
}

/* Partner buborék blokk */
.etl-bubble-block {
    display: flex;
    flex-direction: column;
    max-width: 80%;
}

/* Partner buborék */
.etl-bubble-partner {
    background: #ede4ff;
    border-radius: 12px;
    padding: 6px 10px;
}

/* Word-break minden buborékra */
.etl-history-row .etl-bubble,
.etl-history-row .etl-bubble-partner,
.etl-history-bubble,
.etl-me-bubble {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: auto;
}
/* --------------------------------------------------------------
   PARTNER BUBORÉK – FORDÍTOTT SZÖVEG
   -------------------------------------------------------------- */

.etl-history-row .etl-translated {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.55);
    margin-top: 4px;
    line-height: 1.3;
    word-break: break-word;
}

/* Timestamp */
.etl-time {
    font-size: 11px;
    opacity: 0.6;
    margin-top: 2px;
}

/* Header Partner név fehérre színezése és online zöld pötty */

/* Header név – kisebb, fehér, nem lóg bele semmibe */
#rcName {
    color: #ffffff !important;
    font-size: 14px !important;   /* kisebb betűméret */
    line-height: 1 !important;    /* kompakt sor magasság */
    display: inline-flex;
    align-items: center;
}

/* Zöld online pötty */
#rcName::after {
    content: "";
    width: 8px;
    height: 8px;
    background-color: #00cc44;
    border-radius: 50%;
    margin-left: 6px;
    display: inline-block;
    position: relative;
    top: 0; /* finom igazítás, nem lóg bele semmibe */
}

img[src*="rencontreP/img/astro1.png"] {
    display: none !important;
}
img[src*="rencontreP/img/astro2.png"] {
    display: none !important;
}
img[src*="rencontreP/img/astro3.png"] {
    display: none !important;
}
img[src*="rencontreP/img/astro4.png"] {
    display: none !important;
}
img[src*="rencontreP/img/astro5.png"] {
    display: none !important;
}