.bar a,.menu a{text-decoration:none}

/*body {
    font-family: Onest, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color:#484747;
    font-size: 15px;
    line-height: 1.5;
    min-width: 320px;
    margin: auto;
    background-color: #f0f0f0;
}*/

body {
    font-family: Onest, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

.container {
    width: 100%;
    padding: 0 15px;
}

/*.only-desktop {
    display: none !important;
}

.only-mobile {
    display: block !important;
}*/


@media (min-width: 1025px) {
    .container {
        max-width: 1200px; /* Kompüterdə sayt çox yayılmasın */
        margin: 0 auto;
    }
    
    /* Desktop üçün menyu və ya header fərqlidirsə */
    .bar-header {
        height: 65px;
        background-color: #ffffff;
        border-bottom: 1px solid #ddd;
    }
    
    /* Desktopda görünməli, teldə gizlənməli olan elementlər */
    .only-desktop {
        display: block !important;
    }
    
    .only-mobile {
        display: none !important;
    }
}



/* Əgər cihaz dəqiq mobildirsə (ölçüdən asılı olmayaraq) */
body.mobile {
    -webkit-tap-highlight-color: transparent;
    user-select: none; /* Mobildə mətni kopyalamağı məhdudlaşdırmaq */
}

/* Əgər cihaz kompyuterdirsə */
body.desktop {
    cursor: default;
}

/* Posting hər yerdə gizli */
body.header-always-hidden .bar-header {
    display: none !important;
}

/* Mail teldə gizli, kompda açıq */
@media (max-width: 1024px) {
    body.header-mobile-hidden .bar-header {
        display: none !important;
    }
}

/*
.header-always-hidden .bar-header {
    display: none !important;
}

@media (max-width: 1024px) {
    .header-mobile-hidden .bar-header {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .header-mobile-hidden .bar-header {
        display: flex; 
    }
}
*/


#icenter{text-align:center}
#ileft{text-align:left}
#iright{text-align:right}

* { 
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    box-sizing: border-box;
}

.border{background:#393939;color:#fff;padding:4px;text-align:center}

.b{padding:6px;background:#fff;border:1px solid #f1f1f1;box-shadow:0 1px 2px rgba(0,0,0,.3)}



.mobile-size {
    width: 100%;
    min-width: 305px;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
}

.desktop-size {
    width: 100%;
    min-width: 305px;
    max-width: 430px;
    margin: 0 auto;
    box-sizing: border-box;
}

@media (max-width: 630px) {
    .mobile-size {
        max-width: 100%;
        border-radius: 0;
        padding: 0 8px 8px;
    }
}


.menu.f1{padding:20px 0 6px}.menu-f1,.menu.f1 table.submit{padding:6px 6px 0}

.menu a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    margin: 0 4px;
    /*display: inline-block;*/
}

.menu a:hover {
    color: #f78411;
}






.bars,.mlink,.sms{border:1px solid #dfdfdf;border-bottom-style:none;padding:6px}
.top-ml{background:#fff3b3}.my{background:#f4f4f4}
.you{background:#f3fff6}
.sms a{color:#FE2E2E}
.p2{padding-bottom:4px}
.call,.cmy,.cyou{padding:2px;border:1px solid #FFF}
.cmy{background:#f4f2e0}
.cyou{background:#f7f7f7}
.call{background:#fdfdfa}

#bar_right{float:right}

.c-black{color:#000}
.left-20{padding:0 0 0 20px}
.right-20{padding:0 20px 0 0}

img{vertical-align:middle;border:0}
.img{margin:0 0 -3px 1px}.links{background:#FBFBFB;border:1px dotted #e5e5e5;padding:2px}

.links:hover{background:#edecec}

.fl,.fln a{padding:6px;background:#F7F6F2;display:block;border-bottom:1px solid #DADADA}
.fln a:hover{background:#E9EBEB;color:#1580F2}
.fln span{color:#2869AA}
.fl{color:#7E7E7E}

hr {
   margin-top: 4px;
   margin-bottom: 6px;
   border-bottom: 1px solid #eee;
   border-top-style: none;
   border-top-width: 0;
   border-right-style: none;
   border-right-width: 0;
   border-left-style: none;
   border-left-width: 0;
}

/*input:focus,textarea:focus{background:#fff;}*/
/*input,select,textarea{background:#F5F5F5;border:1px solid #d8d8d8;color:#375676;padding:3px;margin:1px 0}*/
input[type=submit]{padding-right:1em;padding-left:1em}

.inputRed{background:#FFE2E2}
.inputGreen{background:#F2FDFF}

input[type=text]:disabled{background:#ddd}

a.button,input[type=submit]{#text-shadow:rgba(0,0,0,.3) 0 1px 1px;border-radius:30px;#box-shadow:rgba(0,0,0,.2) 0 1px 2px;color:#f0f4f3;background: #ff8c00;}
a.button{padding:.3em}
a.button:hover,input[type=submit]:hover{background:#f66c35;color:#FFF}

.ajax_message{display:table;width:100%;background:url(../img/wt-theme/wt_bg.png);border-top:#ccc solid 1px;border-bottom:#ccc solid 1px}
.ajax_message .mysms,.ajax_message .yousms{color:#343434;border:1px solid #ccc6bd;border-radius:4px;padding:2px 6px;margin:4px 5px;display:inline-block;position:relative;min-width:70%;text-align:left}

.dateBody,.dateBody span{text-align:center}

.ajax_message .s1{display:inline;word-break:break-all}
.ajax_message .s2{display:table-cell;float:right;font-size:12px;color:#757575;margin-left:10px}

.dateBody span{background-color:#BEF0F7;width:70px;display:inline-block;border-radius:4px;padding:2px;margin-top:5px;border:1px solid #B7B7B7}

.menu-border{background:#EAEAEA;padding:0 5px}

.ajax_message .position-mysms{text-align:right}
.ajax_message .position-mysms .mysms{background-color:#CFFFC6}
.ajax_message .position-yousms .yousms{background-color:#fcfbf6}

@media only screen and (max-width:650px){.ajax_message .mysms,.ajax_message .yousms{min-width:auto}

.ajax_message span.s1 b{display:none}}

@media only screen and (max-width:350px){.menu-border{padding:0}}[class*=" ic-wtc"],[class^=ic-wtc]{vertical-align:middle;background-image:url(../img/wt-theme/wtc-status.png);background-repeat:no-repeat;background-size:20px;height:20px;width:20px;display:inline-block;margin-left:2px}

.ic-wtc-send{background-position:right 4px}
.ic-wtc-delivered{background-position:right -13px}
.ic-wtc-hasread{background-position:right -30px}

.events{width:100%;border-collapse:collapse;border-spacing:0}
.events td{border-left:1px solid #A5843F}
.events td:first-child{border-left:none}
.events td a{display:block;text-align:center;padding:5px 10px;cursor:pointer}
.events td a.active,.events td a:hover{background-color:#D67E27}
.events td.main.f3{text-shadow: 0 0 6px #6D6D6D;font-weight:700;text-align:center;min-width:100px}

@media only screen and (min-width:650px){.events td.main.f3{min-width:140px}}

.menu {
    background: #fff;
    border-top: 1px solid #ddd;
    box-shadow: none;
    border-top: none;
    padding: 8px
}

.events a span{-moz-border-radius:2px;-webkit-border-radius:2px;-khtml-border-radius:2px;-o-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.7);background-color:#dc0d17;background-image:-webkit-linear-gradient(top,#fa3c45 0,#dc0d17 100%);color:#fff;min-width:6px;padding:1px 2px;text-shadow:0 -1px 0 rgba(0,0,0,.4);-webkit-background-clip:padding-box;display:inline-block;font-size:9px;-webkit-font-smoothing:subpixel-antialiased;line-height:normal;position:absolute;margin-left:-5px}

.ava {
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
    display: inline-block;
    vertical-align: middle;
}

.ol {
    position: absolute;
    bottom: 2px;
    right: 0px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--bg-card);
    border-radius: 50%;
}

.ol_a {
    position: absolute;
    bottom: 3px;
    right: 10px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--bg-card);
    border-radius: 50%;
}

.ol_t {
    position: absolute;
    bottom: 2px;
    right: 8px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--bg-card);
    border-radius: 50%;
}
.ol_p {
    position: absolute;
    bottom: 13px;
    right: 13px;
    padding: 8px;
    border: 3px solid var(--bg-card);
    border-radius: 50%;
}

@media(max-width: 500px) {
.ol_a {
    position: absolute;
    bottom: 3px;
    right: 8px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--bg-card);
    border-radius: 50%;
}

.ol_t {
    position: absolute;
    bottom: 2px;
    right: 6px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--bg-card);
    border-radius: 50%;
}
}

.ol.__left-align {
    margin-right: 4px;
}

/* Oflayn statusu (Həm .ol, həm də .ol_p üçün işləyir) */
.ol.__off, 
.ol_a.__off, 
.ol_p.__off, 
.ol_t.__off {
    background-color: #bdc3c7;
}

/* Mobil statusu */
.ol.__mobile, 
.ol_a.__mobile, 
.ol_p.__mobile, 
.ol_t.__mobile {
    background-color: #00a4ff;
}

/* Web / PC statusu */
.ol.__web, 
.ol_a.__web, 
.ol_p.__web, 
.ol_t.__web {
    background-color: #f1c40f; 
}



.bonus-main {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bonus-main-text {
    color: #393a3b; 
    text-decoration: none; 
}

.tooltip-container {
    /*position: relative;*/
    cursor: pointer;
}

.tooltip-text {
    visibility: hidden;
    width: 140px;
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 6px 0;
    position: absolute;
    z-index: 100;
    
    /* Bura diqqət: Üstdə deyil, Altda açılması üçün */
    top: 130%; 
    left: 50%;
    margin-left: -70px;
    
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(-5px); /* Açılarkən yuxarıdan aşağı sürüşmə effekti */
    font-size: 11px;
    pointer-events: none;
    white-space: nowrap; /* Tarixin bir sətirdə qalması üçün */
}

/* Üçbucaq "ox" - İndi Tooltip-in yuxarısında olmalıdır */
.tooltip-text::after {
    content: "";
    position: absolute;
    bottom: 100%; /* Tooltip-in yuxarı kənarına yapışır */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent rgba(0, 0, 0, 0.85) transparent; /* Ox yuxarı baxır */
}

/* Hover olanda aktivləşsin */
.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Header */

.bar-header {
    background: #fff;
    height: 45px;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

.header-inner {
    max-width: 600px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Loqo bloku link ilə birləşdirildi ki, kliklənən olsun */
.nav-logo-img {
    margin-left: 8px;
    width: 90px;
    height: 40px;
    display: block;
    flex-shrink: 0; /* Sıxılmanın qarşısını alır */
    background: url(/dist/img/logo/logo_90x35.webp) no-repeat center center;
    background-size: contain;
}
/* Əgər loqonun içində bir <a> tagi işlədəcəksənsə, aşağıdakı kimi ola bilər: */
.nav-logo-img .nav-logo-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

@media (max-width: 500px) {
    .nav-logo-img {
        margin-left: 10px;
        width: 35px;  /* Mobil üçün uyğun en */
        height: 35px; /* Mobil üçün uyğun hündürlük */
        flex-shrink: 0; /* Mobil ekranda da sıxılmır */
        background: url(/dist/img/logo/logo_35x35.webp) no-repeat center center;
        background-size: contain;
    }
}

.nav-icons { 
    display: flex; 
    height: 100%; 
}

.nav-icons .nav-link {
    display: flex;
    align-items: center;
    padding: 0 15px;
    position: relative;
    border-left: 1px solid rgba(0,0,0,0.03);
    box-shadow: inset 0 0 0 0 transparent;
    /* Reaksiyanın hamar olması üçün keçid effekti */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* İkonun üzərinə gələndə (Hover) verəcəyi reaksiya */
.nav-icons .nav-link:hover {
    background-color: rgba(0, 0, 0, 0.04); /* Yüngül tündləşmə effekti */
}

/* İkonun içindəki simvolun da üzərinə gələndə rənginin bir az canlılaşması üçün */
.nav-icons .nav-link:hover .fi {
    color: #ff3366; /* İstəsən buranın rəngini dəyişə və ya tamamilə silə bilərsən */
    transition: color 0.2s ease;
}

/* Aktiv olan səhifə üçün reaksiya (üzərinə gəlsə belə xətti və fonu qorunur) */
.nav-link.active {
    background: rgba(0, 0, 0, 0.03);
    box-shadow: inset 0 -3px 0 0 #ffa042;
}


@media (max-width: 500px) {
    .nav-icons .nav-link {
        padding: 0 14px;
    }
}

/* İkonu saxlayan əsas elementə relative veririk */
.nav-icons .nav-link, 
.dropdown-menu {
    position: relative;
}

/* Qara tooltip pəncərəsi */
.custom-tooltip {
    display: none;
    position: absolute;
    bottom: -36px; /* İkonun məsafəsi */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 9px;
    border-radius: 12px;
    white-space: nowrap;
    z-index: 1050;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Tooltipin yuxarısındakı balaca üçbucaq (işarə) */
.custom-tooltip::before {
    content: '';
    position: absolute;
    top: -4px; /* Tooltipin yuxarı sərhədi */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.85); /* Qara fon ilə eyni rəngdə */
}

/* Üzərinə gələndə görünməsi */
.nav-icons .nav-link:hover .custom-tooltip,
.dropdown-menu:hover .custom-tooltip {
    display: block;
}

.bar-progress {
    position: absolute;
    background: transparent url(/dist/img/loader.png) repeat-x;
    background-size: 16px 4px;
    background-position: 16px 0;
    height: 4px;
    width: 100%;
    margin-top: -4px;
    opacity: 0;
    display: none;
    z-index: 10;
    -webkit-animation: tb_progress .2s linear infinite;
    animation: tb_progress .2s linear infinite;
    will-change: background-position, transition, opacity;
}

.bar-progress.__unlocked { display: block; }
.bar-progress.__shown { transition: opacity .2s linear; opacity: .7; }
.bar-progress.__shown.__obsolete { transition: opacity .2s linear; opacity: 0; }
.app .bar-progress {
    background-color: rgba(46, 47, 51, .48);
    position: fixed;
    top: 0;
    margin-top: 0;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144dpi) {
    .bar-progress {
        background-image: url(/dist/img/loader@2x.png);
    }
}

/* Heard Son */


/* Footer */
.footer {
    background: #fdfdfd;
    /*border-top: 1px solid #ddd;*/
}

.footer-info {
    font-size: 13px;
    line-height: 1.6;
    color: #666;
    padding: 20px 15px;
    text-align: center;
    border-top: 1px solid #eee;
}

.footer-info b {
    color: #444;
}

.footer-info p {
    margin: 8px 0 0 0;
    color: #f78411;
    font-weight: 600;
}

.footer-top {
    padding: 15px;
    text-align: center;
    /*border-top: 1px solid #eee;*/
}

.footer-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.footer-links a { text-decoration: none; color: #888; font-size: 13px; margin-right: 15px; font-weight: 500; display: flex; align-items: center; }

.footer-links a:hover {
    color: #f78411;
}

.flag-icon { width: 18px; height: 12px; border-radius: 2px; margin-right: 5px; object-fit: cover; box-shadow: 0 0 1px rgba(0,0,0,0.3); }

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    padding: 12px 15px;
    border-top: 1px solid #f3f0f0;
}

.copyright {
    color: #888;
    font-size: 12px;
}

.footer-style a {
    background: #ff8800;
    color: #fff !important;
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
}

.footer-style a:hover {
    background: #d67e27;
}

@media (max-width: 500px) {
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* Footer Son */

.line-menu { background: #f9f9f9; padding: 8px; border-bottom: 1px solid #f3f0f0; color: #666; font-size: 13px; }

.login-container {
    text-align: center;
    padding: 0px;
}

.welcome-box {
    padding: 0 0 15px;
    background: #fdfdfd;
    border-bottom: 1px solid #eee;
    color: #555;
    font-size: 14px;
}

.online-status {
    /*background: #fff9e6;
    padding: 8px;
    margin: 10px 0;
    border: 1px dashed #f78411;
    border-radius: 5px;*/
    padding: 8px;
    color: #ff8800;
}

.login-form {
    padding: 15px;
    background: #fff;
}

.input-group {
    margin-bottom: 8px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 13px;
    color: #444;
}

.input-group input {
    /*width: 100%;*/
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.submit-btn {
    /*width: 100%;*/
    background: #f78411;
    color: #fff;
    border: none;
    padding: 6px 18px 6px 18px;
    border-radius: 4px;
    /*font-weight: bold;*/
    cursor: pointer;
    font-size: 15px;
}

.submit-btn:hover {
    background: #d67e27;
}

.registration-box {
    margin: 15px 0;
}

.reg-link {
    /*display: block;
    padding: 10px;
    background: #e7f3ff;*/
    color: #0e63b8;
    text-decoration: none;
    font-weight: bold;
    /*border-radius: 4px;*/
}

.upd {
    font-size: 10px;
    color: #999;
}

/* Təsdiqlənmiş profil nişanı */
/*.verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    background-color: #1d9bf0; 
    color: white;
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
    font-size: 10px;
    position: relative;
    cursor: pointer;
}

.verified-badge::after {
    content: "L";
    transform: scaleX(-1) rotate(-35deg);
    font-weight: bold;
    font-family: Arial, sans-serif;
    margin-top: -1px;
}

.verified-badge:hover::before {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10;
}*/

.verified-badge {
    display: inline-flex;
    align-items: stretch;
    margin-left: 4px;
}

/* VİP istifadəçilər üçün xüsusi stil */
.vip-nick {
    color: #ff8800 !important; /* Narıncı rəng */
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 136, 0, 0.3);
}

/* YouTube Videoları üçün */
.video-box { position: relative; padding-bottom: 56.25%; height: 0; margin: 10px 0; border-radius: 8px; overflow: hidden; }
.video-box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Linklər və Mentionlar */
.mention-link { color: #00a8ff; font-weight: bold; text-decoration: none; }
.external-link { color: #e84118; font-size: 13px; font-weight: bold; }
.bb-link { color: #44bd32; text-decoration: underline; }

/* Smayllar */
.sm-img { width: 22px; height: 22px; vertical-align: middle; margin: 0 2px; }

/* Mobil telefonlar üçün (maksimum 768px enində olan cihazlar) */
@media only screen and (max-width: 768px) {
    body {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* Sağ-sola sürüşməni bağla */
    }
    
    /* Konteynerləri mobilə uyğunlaşdır */
    .container, .wrapper {
        width: 95% !important;
        margin: 0 auto;
    }
}

.login-logo {
    width: 120px;
    height: 120px;
    margin: 0 auto 2px auto;
    background: url('/dist/img/logo.webp') no-repeat center;
    background-size: contain;
    display: block;
}

.no-js .mobil-menu { display: block; }
.no-js #togglePassword { display: none; }
.no-js .loader { display: none; }
.js .mobil-menu { display: none; }

/* profile */

.name {
  font-weight: 600;
  color: var(--text-main);
}

.subtext {
  font-size: 13px;
  color: var(--text-sub);
}

.arrow {
  color: var(--text-sub);
  font-weight: bold;
}

.user-list {
  width: 100%;
  background: transparent;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.2s;
  cursor: pointer;
}

.user-item:hover, .active-hover {
  background-color: var(--bg-hover);
}


.online-indicator {
  position: absolute;
  bottom: 2px;
  right: 0px;
  width: 10px;
  height: 10px;
  background-color: var(--online-color);
  border: 2px solid var(--bg-card);
  border-radius: 50%;
}

.page-container {
    background-color: var(--bg-container);
    padding: 6px;
    margin-bottom: 10px;
    border-radius: 0 0 12px 12px;
}

.page-container.has-link {
    padding: 6px;
}

.page-content {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

/* --- İkonlar üçün Ortaq Stillər (Geri, Menyu, Extra) --- */
.page-back-icon, 
.extra-header-icon, 
.page-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #2688eb;
    transition: background-color 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}


/* Hover/Active EffektlЙ™ri */
.page-back-button-link:hover .page-back-icon, 
.page-menu-trigger:hover,
.extra-header-icon:hover {
    background-color: #f5f5f5;
}

.page-back-button-link:active .page-back-icon,
.page-menu-trigger:active,
.extra-header-icon:active {
    background-color: #e0e0e0;
}

/* Düyməni tam şəffaflaşdırırıq */
.page-menu-trigger button-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none; /* Klikləyəndə çıxan göy xətti də silir */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Əlavə olaraq düyməyə basanda çıxan kənar xəttini də ləğv edirik */
.page-menu-trigger button-link:focus, 
.page-menu-trigger button-link:active {
    outline: none;
    box-shadow: none;
}

/* Yalnız bu klassa sahib olan düyməni təmizləyirik */
.clear-guests-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none; /* Klikləyəndə çıxan göy xətti də silir */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Klikləyəndə və ya üzərinə gələndə brauzerin verdiyi effektləri söndürürük */
.clear-guests-btn:focus, 
.clear-guests-btn:active,
.clear-guests-btn:hover {
    outline: none;
    box-shadow: none;
}


/* Dark Mode EffektlЙ™ri */
body.dark-mode .page-back-button-link:hover .page-back-icon,
body.dark-mode .page-menu-trigger:hover,
body.dark-mode .extra-header-icon:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .page-back-button-link:active .page-back-icon,
body.dark-mode .page-menu-trigger:active,
body.dark-mode .extra-header-icon:active {
    background-color: rgba(255, 255, 255, 0.12);
}

/* --- SaДџ TЙ™rЙ™f Action Qrupu --- */
.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px; /* Д°konlar arasД± mЙ™safЙ™ */
    margin-left: auto; /* SaДџa itЙ™lЙ™yir */
    flex-shrink: 0;
}

/* --- İstifadəçi Bölməsi --- */
.page-user-link, .page-wrapper {
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.page-title {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-user-link { cursor: pointer; }
.page-wrapper { cursor: default; }

.page-header-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

/* yeni */
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 16px 0;
    padding: 0 15px;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #f0f0f0; 
}

.divider::before {
    margin-right: 12px;
}

.divider::after {
    margin-left: 12px;
}

.divider_text {
    color: #999;
    font-size: 13px;
    white-space: nowrap;
}

.recovery-box {
    margin: 15px 0;
}

.recovery-link {
    color: #2e2f33;
    text-decoration: none;
}


.custom-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 18px;
    font-size: 15px;
    user-select: none;
}
.custom-checkbox-wrap input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark {
    position: relative;
    height: 20px;
    width: 20px;
    background-color: #ffffff;
    border: 2px solid #ccc;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.custom-checkbox-wrap:hover input ~ .checkmark {
    border-color: #ff8800;
}
.custom-checkbox-wrap input:checked ~ .checkmark {
    background-color: #ff8800;
    border-color: #ff8800;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.custom-checkbox-wrap input:checked ~ .checkmark:after {
    display: block;
}
.custom-checkbox-wrap .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}



/* Kiçik düymələr üçün ümumi baza */
.btn-xs {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

/* Yaşıl düymə (Məsələn: Qəbul et) */
.btn-success {
    background-color: #28a745;
    color: #ffffff;
}
.btn-success:hover {
    background-color: #218838;
}

/* Qırmızı düymə (Məsələn: İmtina et / Ləğv et) */
.btn-danger {
    background-color: #dc3545;
    color: #ffffff;
}
.btn-danger:hover {
    background-color: #c82333;
}

/* Dost axtarış paneli */
.friend-search-box {
    padding: 10px 15px;
    background: var(--bg-content, #fff);
    border-bottom: 1px solid var(--border-color, #eee);
}
.friend-search-box form {
    display: flex;
    gap: 8px;
    align-items: center;
}
.friend-search-box input[type="text"] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 6px;
    font-size: 14px;
    background: var(--input-bg, #fff);
    color: var(--text-color, #333);
    outline: none;
    transition: border-color 0.2s;
}
.friend-search-box input[type="text"]:focus {
    border-color: var(--accent-color, #4a90e2);
}

/* Boş siyahı (Empty state) dizaynı */
.friends-empty-box {
    text-align: center;
    padding: 40px 20px;
}
.empty-icon-circle {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    background: var(--bg-secondary, #f5f6f8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #8c939d);
}
.empty-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-color, #333);
}
.empty-text {
    font-size: 14px;
    color: var(--text-muted, #777);
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.4;
}

/* Əməliyyat düymələri */
.friend-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.btn-xs {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}
.btn-xs:hover {
    opacity: 0.9;
}
.btn-success {
    background-color: var(--success-color, #28a745);
    color: #fff;
}
.btn-danger {
    background-color: var(--danger-color, #dc3545);
    color: #fff;
}