.password-note {
    background: rgba(255, 71, 87, 0.1);
    border-left: 3px solid #ff4757;
    padding: 12px;
    width: 505px;
    margin-bottom: 10px;
    margin-top: 12px;
    margin-left: 15px;
    border-radius: 4px;
    font-weight: 100;
    letter-spacing: 1.4px;
    font-family: 'Furore', sans-serif;
    font-size: 8px;
    line-height: 1.5;
}

.password-note__title {
    color: #ff4757;
    font-size: 13px;
    font-weight: 100;
    letter-spacing: 1.4px;
    font-family: 'Furore', sans-serif;
    text-transform: uppercase;
}

.password-note__text {
    color: #ced4da;
    font-size: 13px;
    font-weight: 100;
    letter-spacing: 1.4px;
    font-family: 'Furore', sans-serif;
}


/* MOBILE */
@media (max-width: 600px) {

    .password-note {
        width: calc(103% - 30px);
        max-width: none;
        margin-left: 15px;
        margin-right: 15px;
        box-sizing: border-box;
        padding: 10px;
    }

    .password-note__title,
    .password-note__text {
        font-size: 11px;
        letter-spacing: 1px;
        line-height: 1.5;
    }
}
/* ==========================================================
   WAPPERGA ALOQASIZ CSS — .wapper prefiksisiz yozilgan qoidalar
   (umumiy joylashuv, tugma va alohida "card" stili)
   Bularning ba'zilari saytning boshqa qismlarida ham
   ishlatilayotgan bo'lishi mumkin — shu sabab saqlab qo'yildi.
========================================================== */

/* --- Umumiy top-menu joylashuvi (konteyner, flex tuzilma) --- */
.menu_top_container .container {
    width: 100%;
}

.two_top_menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
    flex-wrap: nowrap;
}

.menu_top_left {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    position: relative;
}

.menu_top_rigth {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    flex: 0 0 auto;
    gap: 5px;
    white-space: nowrap;
}

.user_online_block,
.online_pro,
.online_line_top {
    flex: 0 0 auto;
}

.online_line_top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user_online_block {
    display: flex;
    align-items: center;
}

/* --- Ikonka va label umumiy stili --- */
.menu_icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 6px;
    line-height: 0;
    color: #ff5255;
    transition: color 0.2s;
}

.menu_icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.menu_label {
    vertical-align: middle;
}

/* --- Gamburger tugmasi (mobil) --- */
.button_menu_collapse {
    display: none;
    align-items: center;
    justify-content: center;
    background: #252230;
    border: 1px solid #332f42;
    color: #ff5255;
    font-size: 22px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    margin-left: 10px;
    transition: all 0.2s ease;
}

/* ==========================================================
   DIQQAT: quyidagi ikkita qoida `.wapper .header-menu` ichida
   emas, umumiy `.collapsible-menu` klassiga yozilgan.
   Agar saytning boshqa joyida (masalan boshqa sidebar/menyuda)
   xuddi shu `.collapsible-menu` va `li.menu-card` klasslari
   ishlatilsa — bu stil O'SHA joyga ham tegadi.
   Agar faqat shu header-menyuga tegishli bo'lishi kerak bo'lsa,
   selektorni `.wapper .header-menu .collapsible-menu > li.menu-card > a`
   qilib qayta yozish kerak bo'ladi.
========================================================== */
.collapsible-menu > li.menu-card > a {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: #2b2934;
    border: 1px solid #3b3946;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    transition: .3s;
}

.collapsible-menu > li.menu-card > a:hover {
    border-color: #bd3638;
    background: #34313f;
}

/* Placeholder matnini shaffof qilish */
input[placeholder=" "]::placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

/* Eski brauzerlar (WebKit / Blink / Mozilla) uchun */
input[placeholder=" "]::-webkit-input-placeholder {
  color: transparent !important;
}
input[placeholder=" "]::-moz-placeholder {
  color: transparent !important;
}

/* Asosiy konteyner */
.ui-border-studio {
    background: #111111;
    /* border: 1px solid rgba(255, 255, 255, 0.08); */
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
    /* border-radius: 20px; */
    padding: 24px;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
    margin-bottom: 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
    backdrop-filter: blur(10px);
}

/* Avatar va ramka sohasi */
.canvas-showcase {
    flex: 0 0 140px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.canvas-mask-holder {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 22px;
    background: #141318;
    padding: 8px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas-base-user {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    object-fit: cover;
    opacity: 0.65;
    filter: contrast(1.1) grayscale(0.8);
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.canvas-mask-holder:hover .canvas-base-user {
    opacity: 0.9;
    filter: none;
}

.canvas-layer-border {
    position: absolute;
    top: -6px;
    left: -6px;
    width: calc(100% + 12px) !important;
    height: calc(100% + 12px) !important;
    z-index: 2;
    pointer-events: none;
    max-width: none !important;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

/* Boshqaruv elementlari bloki */
.ctrl-dock {
    flex: 1;
    min-width: 260px;
}

/* Maxsus Select qutisi */
.ctrl-select-field {
    position: relative;
    margin-bottom: 16px;
}

.ctrl-native-select {
    width: 100%;
    height: 48px;
    background: #0a0a0a;
    color: #757575;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
    border: 1px solid rgb(255 255 255 / 0%);
    /* border-radius: 14px; */
    padding: 0 42px 0 16px;
    font-size: 13px;
    font-weight: 500;
    font-weight: 100;
    text-align: center;
    letter-spacing: 1.4px;
    font-family: 'Furore', sans-serif;
    cursor: pointer;
    appearance: none;
    outline: none;
    transition: all 0.25s ease-in-out;
}

.ctrl-native-select:hover {
    color: #fff;
}

.ctrl-native-select:focus {
    /* border-color: #ff5255; */
    /* box-shadow: 0 0 0 3px rgba(255, 82, 85, 0.25); */
}

.ctrl-select-field::after {
    content: '\ea4a'; /* boxicons: bx-chevron-down */
    font-family: 'boxicons' !important;
    font-size: 18px;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9290a0;
    pointer-events: none;
}

/* Tugmalar guruhi */
.ctrl-buttons-row {
    display: flex;
    gap: 10px;
}

.ctrl-btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    flex: 1;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
    border: none;
    /* border-radius: 14px; */
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ctrl-btn-action i {
    font-size: 18px;
}

/* Birlamchi (Asosiy) tugma */
.ctrl-btn-primary {
    background: #411b1b;
    color: #ff6f6f;
    font-weight: 100;
    letter-spacing: 1.4px;
    font-family: 'Furore', sans-serif;
    /* box-shadow: 0 4px 15px rgba(229, 57, 53, 0.35); */
}

.ctrl-btn-primary:hover {
    /* transform: translateY(-2px); */
    /* box-shadow: 0 6px 20px rgba(229, 57, 53, 0.5); */
    /* filter: brightness(1.1); */
    color: #fff;
}

.ctrl-btn-primary:active {
    transform: translateY(0);
}

/* O'chirish (Secondary/Danger) tugma */
.ctrl-btn-danger {
    background: rgb(10 10 10);
    color: #7b7b7b;
    font-weight: 100;
    letter-spacing: 1.4px;
    font-family: 'Furore', sans-serif;
    /* border: 1px solid rgba(255, 255, 255, 0.05); */
}

.ctrl-btn-danger:hover {
    /* background: rgba(244, 67, 54, 0.12); */
    color: #ffffff;
    /* border-color: rgba(244, 67, 54, 0.25); */
    /* transform: translateY(-2px); */
}

.ctrl-btn-danger:active {
    transform: translateY(0);
}

/* Sotib olish tugmasi */
.ctrl-btn-glow {
    width: 100%;
    flex: none;
    background: linear-gradient(135deg, #2b8254 0%, #1e5f3c 100%);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(43, 130, 84, 0.35);
}

.ctrl-btn-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(43, 130, 84, 0.5);
    filter: brightness(1.1);
}

/* Responsiv moslashuv */
@media (max-width: 600px) {
    .ui-border-studio {
        flex-direction: column;
        text-align: center;
        padding: 20px 16px;
    }
    
    .canvas-showcase {
        margin: 0 auto;
    }

    .ctrl-dock {
        width: 100%;
        min-width: 100%;
    }

    .ctrl-buttons-row {
        height: 100px;
        flex-direction: column;
    }
}

  /* ===== Settings tab navigation (new) ===== */
    .settings-nav {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 16px;
    }
    .settings-nav-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
        /* border-radius: 12px; */
        background: #1a1a1a;
        /* border: 1px solid #34313f; */
        cursor: pointer;
        transition: .2s;
        box-sizing: border-box;
    }
    .settings-nav-item:hover {
        background: #0f0f0f;
    }
    .settings-nav-item.active {
        background: #48222275;
        /* border-color: #7a3535ed; */
    }
    .settings-nav-item i {
        font-size: 22px;
        color: #e43c3c;
        flex-shrink: 0;
    }
    .settings-nav-text {
        display: flex;
        flex-direction: column;
    }
    .settings-nav-title {
        color: #ffffffd1;
        font-weight: 700;
        font-weight: 100;
        letter-spacing: 1.4px;
        font-family: 'Furore', sans-serif;
        font-size: 12px;
    }
    .settings-nav-desc {
        color: #525252;
        font-size: 9px;
        font-weight: 100;
        letter-spacing: 1.4px;
        font-family: 'Furore', sans-serif;
    }
    .settings-nav-item.active .settings-nav-desc {
        /* color: #646464; */
    }

    /* ===== Tab panels ===== */
    .tab-pane {
        display: none;
    }
    .tab-pane.active {
        display: block;
    }

    /* Sidebar fon: kartalar chegarasini o'raydi. Bootstrap'ning .row'i allaqachon
       flex (align-items: stretch) bo'lgani uchun .col-lg-3 o'zi avtomatik ravishda
       .col-lg-9 bilan bir xil balandlikka cho'ziladi — shu balandlikni ichki
       fonga ham berish uchun shunchaki height:100% yetarli (display o'zgartirilmaydi,
       shuning uchun grid buzilmaydi). */
    .sidebar-fill {
        box-sizing: border-box;
        background: #0a0a0a;
        /* border-radius: 18px; */
        clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 17px 100%, 0 calc(100% - 17px));
        padding: 16px 12px 20px;
        height: auto;
    }


                .avatar_btn_row{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;margin-top:0;width:100%;}
                .avatar_btn_row .btn_avatar_setting{flex:1;width:auto;margin-top:21px;}
                .avatar_btn_row .btn_gif_activate,.avatar_btn_row .btn_gif_active{flex:1;width:auto;}
                .gif_btn_mobile{display:none;}
                .gif_btn_desktop{display:inline;}
                @media(max-width:500px){.gif_btn_desktop{display:none;}.gif_btn_mobile{display:inline;}}
                .btn_gif_activate{background:var(--GLOBAL,radial-gradient(100% 100% at 50% 0,#ff5255 0,#bd3638 100%));color:#fff;border:none;height:49px;width:150px;border-radius:10px;font-size:11px;font-weight:bold;cursor:pointer;transition:.2s;margin-top:21px;}
                .btn_gif_activate:hover{opacity:.7;}
                .btn_gif_active{background: #0a0a0a;color: #646464;border:none;font-weight: 100;letter-spacing: 1.4px;font-family: 'Furore', sans-serif;height:49px;clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));width:150px;/* border-radius:10px; */font-size:11px;font-weight:bold;cursor:default;margin-top:21px;}
                .btn_gif_free{display:block;width:100%;margin-top:6px;background:transparent;border:1px solid rgba(255,82,85,.5);color:#ff5255;padding:7px 14px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;text-align:center;transition:.2s;letter-spacing:.5px;}
                .btn_gif_free:hover{background:rgba(255,82,85,.1);}
                .btn_gif_pending{display:flex;align-items:center;gap:8px;width:100%;margin-top:6px;background:rgba(255,180,0,.07);border:1px solid rgba(255,180,0,.35);color:#ffb400;padding:8px 14px;border-radius:8px;font-size:11px;font-weight:600;letter-spacing:.3px;}
                .gif_pending_spin{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,180,0,.3);border-top-color:#ffb400;border-radius:50%;animation:gif_spin_anim .8s linear infinite;flex-shrink:0;}
                .btn_gif_approved{display:block;width:100%;margin-top:6px;background:rgba(79,188,136,.12);border:1px solid rgba(79,188,136,.4);color:#4fbc88;padding:7px 14px;border-radius:8px;font-size:11px;font-weight:700;text-align:center;cursor:default;letter-spacing:.3px;}
                .gif_url_upload_row{display:flex;gap:8px;margin-top:10px;align-items:center;}
                .gif_url_input{flex:1;background: #0a0a0a;border: 0px solid #423e51;color:#fff;clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));/* border-radius:10px; */padding:10px 12px;font-weight: 100;letter-spacing: 1.4px;font-family: 'Furore', sans-serif;font-size: 10px;outline:none;min-width:0;}
                .gif_url_input:focus{border-color:#ff5255;}
                .gif_url_input::placeholder{color:#5e5971;}
                .gif_url_btn{background: #411b1b;color: #ff7676;border:none;clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));/* border-radius:10px; */padding:10px 16px;font-size:12px;font-weight: 100;letter-spacing: 1.4px;font-family: 'Furore', sans-serif;/* font-weight:700; */cursor:pointer;white-space:nowrap;transition:.2s;min-width:110px;display:flex;align-items:center;justify-content:center;}
                .gif_url_btn:hover{color: #fff;}
                .gif_url_btn:disabled{opacity:.7;cursor:not-allowed;}
                .gif_spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:gif_spin_anim .7s linear infinite;}
                @keyframes gif_spin_anim{to{transform:rotate(360deg);}}
                .gif_url_msg{font-size:12px;margin-top:6px;}
                .gif_url_ok{color:#4fbc88;}
                .gif_url_err{color:#ff5255;}

                /* === GIF MODALS === */
                .gif_modal_overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);z-index:9999;display:none;align-items:center;justify-content:center;}
                .gif_modal_overlay.gif_open{display:flex;}
                .gif_modal_box{background:linear-gradient(1deg,#2b2934 30%,#2d2b37 100%);border-radius:20px;padding:28px 24px;max-width:440px;width:90%;position:relative;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5);}
                .gif_modal_close{position:absolute;top:12px;right:14px;width:28px;height:28px;background:linear-gradient(228deg,#ff4b4b12 10%,#ff4b4b3d 100%);border:none;border-radius:50%;color:#ff7e7ea1;font-size:16px;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;font-weight:500;}
                .gif_modal_close:hover{opacity:.7;}
                .gif_modal_title{color:#fff;font-size:18px;font-weight:700;margin:0 0 18px;text-align:center;}
                /* Activation modal */
                .gif_preview_wrap{margin-bottom:14px;display:none;}
                .gif_preview_img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid #ff5255;}
                .gif_preview_label{color:#ff5255;font-size:11px;font-weight:700;letter-spacing:1px;margin:8px 0 0;}
                .gif_plan_label{display:block;color:#918ca1;font-size:11px;font-weight:700;letter-spacing:.5px;margin:14px 0 6px;text-align:left;}
                .gif_plan_select{width:100%;padding:10px 12px;border-radius:10px;background:#363342;border:1px solid #423e51;color:#fff;font-size:13px;margin-bottom:16px;outline:none;}
                .gif_plan_select:focus{border-color:#ff5255;}
                .gif_modal_buy_btn{width:100%;padding:12px;background:var(--GLOBAL,radial-gradient(100% 100% at 50% 0,#ff5255 0,#bd3638 100%));color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;}
                .gif_modal_buy_btn:hover{opacity:.85;}
                /* Request modal */
                .gif_req_desc{color:#918ca1;font-size:13px;text-align:left;margin-bottom:14px;line-height:1.5;}
                .gif_req_textarea{width:100%;min-height:100px;background:#363342;border:1px solid #423e51;color:#fff;border-radius:10px;padding:12px;font-size:13px;resize:vertical;box-sizing:border-box;outline:none;font-family:inherit;}
                .gif_req_textarea:focus{border-color:#ff5255;}
                .gif_req_textarea::placeholder{color:#5e5971;}
                .gif_req_btns{display:flex;gap:10px;margin-top:16px;}
                .gif_req_cancel{flex:1;padding:11px;background:#363342;border:1px solid #423e51;color:#918ca1;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;transition:.2s;}
                .gif_req_cancel:hover{background:#423e51;}
                .gif_req_send{flex:1;padding:11px;background:var(--GLOBAL,radial-gradient(100% 100% at 50% 0,#ff5255 0,#bd3638 100%));border:none;color:#fff;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;transition:.2s;}
                .gif_req_send:hover{opacity:.85;}




/* =========================================================
   BALANCE + DISCOUNT SECTION
   ========================================================= */

/* Konteyner - ikkita blokni yonma-yon joylashtirish uchun */
.profile_balance_discount {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin: 20px 0;
}

/* Umumiy kartochka uslubi */
.stat-card {
    position: relative;
    overflow: hidden; /* Rasm blokdan chiqib ketmasligi uchun */
    min-height: 160px;
    background: #040404 !important;
    padding: 25px;
    /* border-radius: 18px; */
    box-sizing: border-box;
    /* Burchaklarni kesish effekti */
    clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 17px 100%, 0 calc(100% - 17px));
    /* border: 1px solid rgba(255,255,255,0.05); */
}

/* Qiymat (Summa yoki Foiz) */
.stat-card__value {
    font-size: 20px;
    font-weight: 800;
    color: #f5f5f7;
    line-height: 1.2;
    font-weight: 100;
    letter-spacing: 1.4px;
    font-family: 'Furore', sans-serif;
    position: relative;
    z-index: 3;
    padding-right: 90px;
    word-break: break-word;
}

/* Matnli yozuv */
.stat-card__label {
    font-size: 11px;
    color: #a1a1a6 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 100;
    letter-spacing: 1.4px;
    font-family: 'Furore', sans-serif;
    margin-top: 6px;
    position: relative;
    z-index: 3;
}

/* =========================================================
   RASMNI BOSHQARISH (X, Y KOORDINATALARI)
   ========================================================= */
.stat-card__art {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    
    /* SHU YERDAN X va Y NI O'ZGARTIRING */
    top: 5px;      /* Y koordinatasi (Tepadan masofa) */
    right: 5px;    /* X koordinatasi (O'ngdan masofa) */
}

/* =========================================================
   RASM O'LCHAMI (KATTA-KICHIKLIGI)
   ========================================================= */
.stat-card__art img {
    width: 427px !important;
    height: 171px !important;
    margin-top: -5px;
    opacity: 1;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
    transform: translateX(5px);
}
/* Tugma uslubi */
.stat-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 18px;
    /* border-radius: 10px; */
    background: #3b1515 !important;
    color: #ff7373 !important;
    font-weight: 100;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    letter-spacing: 1.4px;
    font-family: 'Furore', sans-serif;
    font-size: 12px;
    /* font-weight: 700; */
    text-transform: uppercase;
    text-decoration: none !important;
    position: relative;
    z-index: 4;
    transition: all 0.3s ease;
}

.stat-card__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(234, 58, 82, 0.3);
    opacity: 0.95;
}

/* =========================================================
   RESPONSIVE (MOBIL QISMI)
   ========================================================= */
@media (max-width: 768px) {
    .profile_balance_discount {
        grid-template-columns: 1fr; /* Mobil qurilmalarda ustunma-ustun bo'ladi */
        gap: 12px;
    }
    
    .stat-card {
        min-height: 140px;
        padding: 20px;
    }

    .stat-card__art {
        top: 0px;
        right: 0px;
    }

    .stat-card__art img {
        width: auto!important;
        height: 160px !important;
    }
}

.left_container_friends {
    background: #040404;
    /* border-radius: 50px; */
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    margin-right: 10px;
    padding: 0px 5px;
    width: fit-content;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
#back_btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Транзакции blokini sahifa oxirigacha cho'zish + ichki scroll saqlanadi */
.purse-page-col {
    display: flex;
    flex-direction: column;
}
/* BALANCE + DISCOUNT - VERTIKAL */
.profile_balance_discount {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 14px !important;
}

.profile_balance_discount .stat-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Agar ota blok grid/flex qilib qo‘yilgan bo‘lsa */
.profile_balance_discount > .stat-card {
    width: 100% !important;
    grid-column: 1 / -1 !important;
}
.purse-page-col .block_solution_dop {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.purse-page-col .block_solution_dop .purse_list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.purse-page-col .block_solution_dop .table-responsive {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}


.purse-page-col .block_solution_dop .table-responsive {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;

    /* Scrollbarni yashirish (Firefox) */
    scrollbar-width: none;
    /* Scrollbarni yashirish (IE/Edge legacy) */
    -ms-overflow-style: none;
}

/* Scrollbarni yashirish (Chrome, Safari, Edge - Chromium) */
.purse-page-col .block_solution_dop .table-responsive::-webkit-scrollbar {
    display: none;
}

#back_btn .btn_icon {
    width: 31px;
    height: 31px;
    margin-left: -17px;
    display: flex;
    align-items: center;
    color: #fff;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
    justify-content: center;
    background: radial-gradient(100% 100% at 50% 0, #ff4242 0, #6d1e1e 130%);
    /* border-radius: 5px; */
    flex-shrink: 0;
}

#back_btn .btn_icon i {
    font-size: 16px;
}
.all_visits_btn {
    color: #999999;
    font-size: 10px;
    display: flex;
    font-size: 8px !important;
    width: 165px;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
    /* font-weight: 600; */
    margin-left: -3px;
    background: #161616;
    /* border: solid 3px #3b3b4b; */
    padding: 1px 16px 0px 16px;
    /* border-radius: 50px; */
    height: 35px;
    font-weight: 100;
    letter-spacing: 1.4px;
    font-family: 'Furore', sans-serif;
    margin-left: 0px;
    align-items: center;
    justify-content: center;
}

#users_visit {
    display: flex;
    overflow: hidden;
    margin-top: -3px;
    max-width: 141px !important;
}

.user_visit {
	width: 32px;
    height: 32px;
	margin-right: -4px;
}

.user_visit img {
    width: 30px;
    /* border-radius: 50%; */
    height: 30px;
    margin-top: 2px;
    /* margin-left: 0px; */
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
    /* border: solid 3px #3b3b4b; */
}


.prof_r_social {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 9px;
    width: 100%;
}

.social_row_btn {
    display: flex;
    align-items: center;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    gap: 8px;
    padding: 5px 9px;
    font-weight: 100;
    letter-spacing: 1.4px;
    font-family: 'Furore', sans-serif;
    /* border-radius: 8px; */
    text-decoration: none;
    color: #ffffff;
    font-size: 10px;
    /* font-weight: 500; */
    transition: opacity 0.2s ease;
}

.social_row_btn i {
    font-size: 18px;
}

.social_row_btn:hover {
    opacity: 0.85;
    color: #fff;
}

.phone_row_btn {
    background: #361010;
}

.instagram_row_btn {
    background: #ff414133;
}


.pag_slider ,
.info-bar,
.smile_btn,
.short_news,
.left_bottom_logo,
.top_info_index,
.left_auth_block,
.contacts_setting_block,
.bottom_info_right,
.copy_adress {
    display: none !important;
}

.info_block_names .progress {
    width: 100% !important;
    height: 13px !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden;
    position: relative;
    background: #524545 !important;
    border-radius: 0px;
    clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}

.info_block_names .progress .progress-bar {
    display: block !important;
    height: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: linear-gradient(90deg, #614545, #a16e71) !important;
    /* border-radius: 10px; */
}
.info_block_names .progress > span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    color: #fff !important;
    font-size: 9px;
    display: block !important;
}
#events .event:hover {
   opacity: 0.7 !important;  
}

.gcms-side-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.gcms-side-link.active {
  
}
.gcms-side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #1e1e1e;
    color: #878787;
    font-weight: 100;
    letter-spacing: 1.4px;
    font-family: 'Furore', sans-serif;
    font-size: 10px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
}
.gcms-side-link i {
    font-size: 15px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
	color: #ff4242 ;
}
  .online_second {
      color: #fff !important;
    font-size: 13px !important;
    font-family: 'Furore', sans-serif;
    font-weight: 100;
    letter-spacing: 3.3px;
}
    .posetili {
      font-size: 0;
    }
    .left_events {
    background: #0a0a0a;
    border-radius: 0px;
    padding: 15px;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
    flex: 0 0 440px;
      height: 357px;
}


.registred_go {
    width: 37px;
    height: 37px;
    background: #0000004f;
    color: #ffffff !important;
    display: flex;
    transition: .2s all;
    font-size: 20px;
    border-radius: 0px;
    align-items: center;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    justify-content: center;
}
.registred_go i {
    color: #fff !important;
    margin-top: 12px;
    font-size: 110% !important;
    margin-left: 7px;
}
.last_activ_info {
    padding: 16px;
    border-radius: 0px;
    display: flex;
    background: linear-gradient(24deg, #ff52552b 30%, #ff525557 100%);
    margin-bottom: 8px;
    margin-top: 2px;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
    align-items: center;
    justify-content: space-between;
    border: dashed 0px #ef4c4f00;
}
.last_activ_info i{
     height: 33px;
    border-radius: 10px;
    font-size: 30px;
    color: #bd3638;
    position: relative;
    left: 0px;
    height: 34px;
    transition: 0.2s;
    width: 34px;
}

.flex_info_balance {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.2;
}
.flex_info_balance text {
    display: block;
    font-size: 10.5px;
    color: #6f6f6f;
	height: 12px;
    font-weight: 100;
    letter-spacing: 1.4px;
    font-family: 'Furore', sans-serif;
}
.flex_info_balance span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: #ffffff;
    font-weight: 100;
    letter-spacing: 1px;
    font-family: 'Furore', sans-serif;
}
/* TOP HEADER */
.menu_top_container .container {
    width: 100%;
}

.two_top_menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
    flex-wrap: nowrap;
}

.menu_top_left {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.menu_top_rigth {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    flex: 0 0 auto;
    gap: 5px;
    white-space: nowrap;
}

.flex_online_block {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin-left: auto;
    flex: 0 0 auto;
}

.user_online_block,
.online_pro,
.online_line_top {
    flex: 0 0 auto;
}

.online_line_top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user_online_block {
    display: flex;
    align-items: center;
}


/* Иконки */
.menu_icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 6px;
    line-height: 0;
    color: #ff5255;
    transition: color 0.2s;
}

.menu_icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.menu_label {
    vertical-align: middle;
}


/* MENU CARD */
.collapsible-menu > li.menu-card > a {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: #2b2934;
    border: 1px solid #3b3946;
    border-radius: 0px;
    color: #fff;
    text-decoration: none;
    transition: .3s;
}

.collapsible-menu > li.menu-card > a:hover {
    border-color: #bd3638;
    background: #34313f;
}


/* DESKTOP */
@media (min-width: 992px) {

    .wapper .header-menu {
        display: inline-flex !important;
        vertical-align: middle;
        margin-left: 0;
    }

}


/* MENU */
.wapper .header-menu .collapsible-menu {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    height: auto !important;
    overflow: visible !important;
    margin-top: 0 !important;
    padding: 0 !important;
    list-style: none;
    vertical-align: middle;
}

.wapper .header-menu .collapsible-menu > li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle;
}


/* MENU BUTTON */
.wapper .header-menu .collapsible-menu > li > a {
    display: inline-flex !important;
    align-items: center;
    height: 40px !important;
    line-height: 1 !important;
    padding: 0 14px !important;
    background: #1c1c1c;
    color: #c9c9c9 !important;
    font-size: 12px !important;
    font-weight: 600;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
    transition: background 0.2s, color 0.2s;
    float: none !important;
    white-space: nowrap;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}


/* SHINE */
.wapper .header-menu .collapsible-menu > li > a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        #ff7c7c66,
        transparent
    );
    transform: skewX(-25deg);
    pointer-events: none;
}

.wapper .header-menu .collapsible-menu > li > a:hover::before {
    left: 130%;
    transition: 1.3s;
}


/* HOVER */
.wapper .header-menu .collapsible-menu > li > a:hover,
.wapper .header-menu .collapsible-menu > li > a.open {
    color: #fff !important;
}

.wapper .header-menu .collapsible-menu > li > a:hover .menu_icon {
    color: #fff;
}


/* OLD PSEUDO */
.wapper .header-menu .collapsible-menu > li.collapsible::before {
    display: none !important;
    content: none !important;
}

.wapper .header-menu .collapsible-menu > li.collapsible::after {
    content: '' !important;
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: 18px;
    background: transparent !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 1010;
    pointer-events: auto;
}

@media (min-width: 992px) {

.wapper .header-menu .collapsible-menu > li.collapsible.active::after {
    display: block !important;
}

}


/* ARROW */
.wapper .header-menu .collapsible-menu > li.collapsible > a .menu_arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    line-height: 0;
    color: inherit;
    transform: rotate(0deg);
    transition: transform 0.25s ease;
}

.wapper .header-menu .collapsible-menu > li.collapsible > a .menu_arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}

@media (min-width: 992px) {

.wapper .header-menu .collapsible-menu > li.collapsible.active > a .menu_arrow {
    transform: rotate(90deg);
}

}


/* DROPDOWN */
@media (min-width: 992px) {

.wapper .header-menu .collapsible-menu > li.collapsible.active > ul {
    display: block !important;
}

}

.wapper .header-menu .collapsible-menu > li.collapsible > ul {
    top: 56px !important;
}


/* MENU CARD DESKTOP */
.wapper .header-menu .collapsible-menu > li.menu-card > a {
     display: inline-flex !important;
     align-items: center;
     height: 40px !important;
     padding: 0 14px !important;
     margin-bottom: 0 !important;
     border-radius: 0px !important;
     background: #1c1c1c;
     border: none !important;
     color: #c9c9c9 !important;
     font-size: 12px !important;
     font-weight: 600;
     position: relative;
     overflow: hidden;
     transition: 1.3s;
}

.wapper .header-menu .collapsible-menu > li.menu-card > a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        #ff7c7c66,
        transparent
    );
    transform: skewX(-25deg);
}

.wapper .header-menu .collapsible-menu > li.menu-card > a:hover::before {
    left: 120%;
    transition: 1.3s;
}


/* LANGUAGE DROPDOWN */
.dropdown_language {
    position: relative;
}

.dropdown_language .select {
    cursor: pointer;
    user-select: none;
}

.dropdown-menu_language {
    overflow: hidden;
    transform-origin: top center;
}


/* MOBILE */
@media (max-width: 991.98px) {

    .wapper .header-menu .collapsible-menu > li > a .menu_icon {
        width: 18px;
        height: 18px;
        margin-right: 10px;
    }

    .wapper .header-menu .collapsible-menu > li.collapsible > a .menu_arrow {
        display: none !important;
    }

}
/* ==========================================
   HEADER MENU FONT
========================================== */

.wapper .header-menu .collapsible-menu > li > a,
.wapper .header-menu .collapsible-menu > li.menu-card > a,
.wapper .header-menu .collapsible-menu .menu_label,
.wapper .header-menu .collapsible-menu > li > ul a {
    font-weight: 100 !important;
    letter-spacing: 1.4px !important;
    font-family: 'Furore', sans-serif !important;
    font-size: 8px !important;
    color: #8f8f8f;
}


/* Oddiy holat */
.wapper .header-menu .collapsible-menu > li > a,
.wapper .header-menu .collapsible-menu > li > ul > li > a,
.wapper .header-menu .collapsible-menu .menu_label {
    /* color: #838383 !important; */
}


/* Icon oddiy holat */
.wapper .header-menu .collapsible-menu .menu_icon,
.wapper .header-menu .collapsible-menu .menu_icon svg {
    color: #838383 !important;
}


/* Hover */
.wapper .header-menu .collapsible-menu > li > a:hover,
.wapper .header-menu .collapsible-menu > li > a:hover .menu_label,
.wapper .header-menu .collapsible-menu > li > ul > li > a:hover,
.wapper .header-menu .collapsible-menu > li > ul > li > a:hover .menu_label {
    color: #b6b5b5 !important;
}


/* Icon hover */
.wapper .header-menu .collapsible-menu > li > a:hover .menu_icon,
.wapper .header-menu .collapsible-menu > li > a:hover .menu_icon svg,
.wapper .header-menu .collapsible-menu > li > ul > li > a:hover .menu_icon,
.wapper .header-menu .collapsible-menu > li > ul > li > a:hover .menu_icon svg {
    color: #f74040 !important;
}


pline {
  background: #2b2b2b;
  margin: 8px 0px;
  display: block;
  height: 1px;
}


/* ==========================================
   ASOSIY MINI PROFILE
========================================== */

.mini_profile_menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}


/* Barcha asosiy tugmalar */

.mini_profile_menu .mp_flex {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 5px !important;
}


/* Har bir tugma */

.mini_profile_menu .mp_flex a,
.mini_profile_menu .mp_btn_exit,
.mini_profile_menu .my_stores_mini_btn {
    width: 100% !important;
    min-height: 40px;
    box-sizing: border-box !important;
}


/* Link tugmalari */

.mini_profile_menu .mp_flex a,
.mini_profile_menu .mp_btn_exit {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    text-decoration: none !important;
    text-align: left !important;
    float: none !important;
    border-radius: 0px;
    color: #535353 !important;
}


/* Iconlar */

.mini_profile_menu .mp_flex a i,
.mini_profile_menu .mp_btn_exit i {
    flex: 0 0 20px;
    width: 20px;
    text-align: center;
    font-size: 18px;
    color: #535353 !important;
}


/* Matn */

.mini_profile_menu .mp_flex a span,
.mini_profile_menu .mp_btn_exit span {
    display: block;
    text-align: left;
    font-size: 12px;
    color: #535353 !important;
}


/* ==========================================
   МОИ ПРИВИЛЕГИИ
========================================== */

.mini_profile_menu .my_stores_mini_btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    border-radius: 0px;
    box-sizing: border-box !important;
}


/* Star icon */

.mini_profile_menu .my_stores_mini_btn > i {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}


/* Privilege text */

.mini_profile_menu .flex_my_stores {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
}


/* Privilege title */

.mini_profile_menu .my_stores_mini_text {
    display: block;
    text-align: left;
    font-size: 12px;
    color: #535353 !important;
}


/* Privilege link */

.mini_profile_menu .my_stores_mini_info {
    display: block;
    text-align: left;
    font-size: 10px;
    color: #9d9d9d;
    text-decoration: none;
    margin-top: 2px;
}


/* ==========================================
   EXIT
========================================== */

.mini_profile_menu .mp_btn_exit {
    background: #92272726 !important;
    transition: .25s ease;
    clip-path: polygon(
        0 0,
        calc(100% - 9px) 0,
        100% 9px,
        100% 100%,
        9px 100%,
        0 calc(100% - 9px)
    );
}


/* ==========================================
   HOVERLAR — ASOSIY TUGMALAR
========================================== */


/* Asosiy tugma hover */

.mini_profile_menu .mp_flex a:hover {
    background: #2b2b2b9e !important;
    color: #ffffff !important;
}


/* Asosiy tugma icon hover */

.mini_profile_menu .mp_flex a:hover i {
    color: #f74040 !important;
}


/* Asosiy tugma text hover */

.mini_profile_menu .mp_flex a:hover span {
    color: #ffffff !important;
}


/* ==========================================
   МОИ ПРИВИЛЕГИИ — HOVER
========================================== */


/* Background */

.mini_profile_menu .my_stores_mini_btn:hover {
    background: #2b2b2b9e !important;
}


/* Icon */

.mini_profile_menu .my_stores_mini_btn:hover > i {
    color: #f74040 !important;
}


/* Asosiy text */

.mini_profile_menu .my_stores_mini_btn:hover .my_stores_mini_text {
    color: #ffffff !important;
}


/* Pastki text */

.mini_profile_menu .my_stores_mini_btn:hover .my_stores_mini_info {
    color: #ffffff !important;
}


/* ==========================================
   EXIT — ALOHIDA HOVER
========================================== */

.mini_profile_menu a.mp_btn_exit:hover,
.mini_profile_menu a.mp_btn_exit:focus,
.mini_profile_menu a.mp_btn_exit:active {
    background: #932828 !important;
    background-color: #a12b2b70 !important;
    color: #ffffff !important;
}


/* Exit icon */

.mini_profile_menu a.mp_btn_exit:hover i,
.mini_profile_menu a.mp_btn_exit:focus i,
.mini_profile_menu a.mp_btn_exit:active i {
    color: #ffffff !important;
}


/* Exit text */

.mini_profile_menu a.mp_btn_exit:hover span,
.mini_profile_menu a.mp_btn_exit:focus span,
.mini_profile_menu a.mp_btn_exit:active span {
    color: #ffffff !important;
}

.mini_profile_menu .mp_flex a span,
.mini_profile_menu .mp_btn_exit span,
.mini_profile_menu .my_stores_mini_text,
.mini_profile_menu .my_stores_mini_info {
    font-weight: 100 !important;
    letter-spacing: 1.4px !important;
    font-family: 'Furore', sans-serif !important;
    font-size: 10px !important;
}

/* ==========================================
   ANIMATSIYA
========================================== */

.mini_profile_menu .mp_flex a,
.mini_profile_menu .mp_btn_exit,
.mini_profile_menu .my_stores_mini_btn,
.mini_profile_menu .mp_flex a i,
.mini_profile_menu .mp_flex a span,
.mini_profile_menu .mp_btn_exit i,
.mini_profile_menu .mp_btn_exit span,
.mini_profile_menu .my_stores_mini_btn > i,
.mini_profile_menu .my_stores_mini_text,
.mini_profile_menu .my_stores_mini_info {
    transition: 0.25s ease;
}

/* ==========================================
   ЛИЧНЫЙ КАБИНЕТ — YUMSHOQ OCHILISH
   Yonidagi bloklarni ITARMAYDI
========================================== */

.user_profile_dropdown {
    position: relative !important;
}

.user_profile_dropdown > ul {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    
    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        visibility 0.28s ease !important;
    
    z-index: 9999 !important;
}


/* OCHILGANDA */

.user_profile_dropdown:hover > ul,
.user_profile_dropdown.active > ul,
.user_profile_dropdown.open > ul {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
.social_icon_container {
    width: 30px;
    height: 30px;
    margin-left: -3px;
    min-width: 30px;
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
    display: flex;
    align-items: center;
    justify-content: center;
    /* border-radius: 5px; */
    background: rgb(208 54 54);
}

.social_icon_container i {
    font-size: 17px;
}

.profile_comments {
    margin-top: 15px;
    padding: 15px;
    clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 25px 100%, 0 calc(100% - 25px));
    background: rgb(10 10 10);
    /* border-radius: 8px; */
    /* border: 1px solid rgba(255, 255, 255, 0.05); */
    box-sizing: border-box;
}

/* Agar ichidagi maslahat matni (placeholder) rangini ham o'zgartirmoqchi bo'lsangiz: */
#gif_url_input::placeholder {
    color: #7b7b7b;            /* placeholder rangi */
}


/* Asosiy blok konteyneri */
.wallpaper-stage {
    background: #111111;
    /* border: 1px solid rgba(255, 255, 255, 0.08); */
    /* box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5); */
    padding: 24px;
    margin-top: 20px;
    margin-bottom: 30px;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    position: relative;
}

/* Fon tasviri / videosi joylashgan maydon */
.canvas-viewport {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #08080a;
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.7);
}

.canvas-media-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.canvas-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease;
    filter: brightness(0.95);
}

.canvas-viewport:hover .canvas-media-img {
    transform: scale(1.04);
    filter: brightness(1.05);
}

/* Boshqaruv va tanlash bloki */
.panel-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Select qutisi */
.dropdown-wrapper {
    position: relative;
}

.dropdown-native {
    width: 100%;
    height: 48px;
    background: #0a0a0a;
    color: #646464;
    border: 0px solid rgba(255, 255, 255, 0.12);
    /* border-radius: 12px; */
    /* padding: 0 42px 0 16px; */
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    font-weight: 100;
    letter-spacing: 1.4px;
    font-family: 'Furore', sans-serif;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
    cursor: pointer;
    appearance: none;
    outline: none;
    transition: all 0.25s ease-in-out;
}

.dropdown-native:hover {
    color: #Fff;
}

.dropdown-native:focus {
    color: #929292;
font-weight: 100;
font-size: 13px;
letter-spacing: 1.4px;
font-family: 'Furore', sans-serif;
    /* border-color: #ff5255; */
    /* box-shadow: 0 0 0 3px rgba(255, 82, 85, 0.25); */
}

.dropdown-wrapper::after {
    content: '\ea4a'; /* Boxicons: bx-chevron-down */
    font-family: 'boxicons' !important;
    font-size: 18px;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9290a0;
    pointer-events: none;
}

/* Tugmalar qatori */
.controls-cluster {
    display: flex;
    gap: 12px;
}

.trigger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    flex: 1;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
    border: none;
    /* border-radius: 12px; */
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.trigger-btn i {
    font-size: 18px;
}

/* Asosiy (Almashtirish) tugmasi */
.trigger-btn-primary {
    background: #411b1b;
    color: #ff6b6b;
    font-weight: 100;
    letter-spacing: 1.4px;
    font-family: 'Furore', sans-serif;
    /* box-shadow: 0 4px 15px rgba(229, 57, 53, 0.35); */
}

.trigger-btn-primary:hover {
    color: #fff;
    /* transform: translateY(-2px); */
    /* box-shadow: 0 6px 20px rgba(229, 57, 53, 0.5); */
    /* filter: brightness(1.1); */
}

.trigger-btn-primary:active {
    transform: translateY(0);
}

/* O'chirish (Muted) tugmasi */
.trigger-btn-muted {
    background: #0a0a0a;
    color: #6b6b6b;
    font-weight: 100;
    letter-spacing: 1.4px;
    font-family: 'Furore', sans-serif;
    /* border: 1px solid rgba(255, 255, 255, 0.05); */
}

.trigger-btn-muted:hover {
    /* background: rgba(244, 67, 54, 0.12); */
    color: #fff;
    /* border-color: rgba(244, 67, 54, 0.25); */
    /* transform: translateY(-2px); */
}

.trigger-btn-muted:active {
    transform: translateY(0);
}

/* Sotib olish (Glow) tugmasi */
.trigger-btn-glow {
    width: 100%;
    flex: 1 1 100%;
    background: linear-gradient(135deg, #2b8254 0%, #1e5f3c 100%);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(43, 130, 84, 0.35);
}

.trigger-btn-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(43, 130, 84, 0.5);
    filter: brightness(1.1);
}

.trigger-btn-glow:active {
    transform: translateY(0);
}

/* Mobil qurilmalar uchun */
@media (max-width: 576px) {
    .wallpaper-stage {
        padding: 16px;
    }

    .controls-cluster {
        height: 100px;
        flex-direction: column;
    }
}
@media (max-width: 768px) {
  /* 1. Asosiy blok - vertikal va bolalarni eniga to'liq cho'zuvchi (stretch) */
  .privaty_block {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;    /* Bolalarni chetdan-chetgacha yoyadi */
    width: 100% !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  /* 2. Har bir qator o'rami (.checkboxes__item) */
  .privaty_block .checkboxes__item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* 3. Ichidagi label (input + checkmark + body) to'liq kenglikda */
  .privaty_block .checkboxes__item label.checkbox {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    cursor: pointer;
  }

  /* 4. Matn qismi qolgan butun bo'shliqni to'ldiradi */
  .privaty_block .checkboxes__item .checkbox__body {
    flex: 1 1 auto !important;
    width: 100% !important;
  }
}
/* Tashqi qobiq */
#color,
.form-control-color {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  overflow: hidden !important;
}

/* Chrome / Safari / Android Webkit ichidagi aylanani 0 qilish */
#color::-webkit-color-swatch-wrapper {
  padding: 0 !important;
  border-radius: 0 !important;
}

#color::-webkit-color-swatch {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  border: none !important;
}

/* Firefox ichidagi aylanani 0 qilish */
#color::-moz-color-swatch {
  border-radius: 0 !important;
  border: none !important;
}
@media (max-width: 768px) {
  .online_second {
    font-size: 10px !important;         /* Mobilda ixchamroq o'lcham */
    letter-spacing: 1.5px !important;   /* Harflar oralig'ini qisqartirish (ekranga to'liq sig'ishi uchun) */
    word-break: break-word !important;  /* Qator chetiga urilganda toza tushishi uchun */
    display: inline-block !important;
  }
.text_forum_activity {
    color: #ffff !important;
    font-size: 10px !important;
}
}
@media (max-width: 768px) {
  /* Umumiy parametr: rasmlar cho'zilganda takrorlanmasligi uchun */
  .swiper-slide {
    background-repeat: no-repeat !important;
  }

  /* 1-SLAYD (HTML: m71i4.jpg - Магазин привилегий) */
  .swiper-slide[data-swiper-slide-index="0"] {
    background-size: 250% auto !important;     /* Kattalik darajasi */
    background-position: 38% 50% !important;   /* X va Y koordinatasi */
  }

  /* 2-SLAYD (HTML: 3.png - Обжалование наказаний) */
  .swiper-slide[data-swiper-slide-index="1"] {
    background-size: 250% auto !important;     /* Kerakka qarab o'zgartiring */
    background-position: 35% 50% !important;   /* Personaj o'ngroqda bo'lsa */
  }

  /* 3-SLAYD (HTML: tLhHF.jpg - Правила проекта) */
  .swiper-slide[data-swiper-slide-index="2"] {
    background-size: 222% auto !important;
    background-position: 50% 50% !important;   /* Markazda turishi uchun */
  }
}

/* ==========================================
   MOBILE MENU — vertikal ro'yxat (cszone uslubi)
========================================== */
@media (max-width: 991.98px) {

    .wapper #hidden-menu {
        width: 100% !important;
        padding: 0 !important;
    }

    .wapper #hidden-menu > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .wapper .header-menu .collapsible-menu {
        display: block !important;
        width: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #100f14;
    }

    .wapper .header-menu .collapsible-menu > li {
        display: block !important;
        width: 100% !important;
        position: relative !important;
    }

    .wapper .header-menu .collapsible-menu > li > a,
    .wapper .header-menu .collapsible-menu > li.menu-card > a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 46px !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 16px !important;
        clip-path: none !important;
        border-radius: 0 !important;
        border: 0 !important;
        /* border-bottom: 1px solid rgb(0 0 0) !important; */
        white-space: nowrap !important;
        font-size: 11px !important;
    }

    .wapper .header-menu .collapsible-menu .menu_label {
        font-size: 11px !important;
    }

    .wapper .header-menu .collapsible-menu > li > a .menu_icon {
        width: 18px;
        height: 18px;
        margin-right: 12px;
    }

    .wapper .header-menu .collapsible-menu > li.collapsible > a .menu_arrow {
        display: inline-flex !important;
        margin-left: auto !important;
        width: 16px !important;
        height: 16px !important;
        transform: rotate(0deg);
        transition: transform 0.2s ease;
    }

    .wapper .header-menu .collapsible-menu > li.collapsible.active > a .menu_arrow {
        transform: rotate(180deg);
    }

    .wapper .header-menu .collapsible-menu > li.collapsible::before,
    .wapper .header-menu .collapsible-menu > li.collapsible::after {
        display: none !important;
        content: none !important;
    }

    .wapper .header-menu .collapsible-menu > li.collapsible > ul {
        display: none;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        border: 0 !important;
        background: rgba(0, 0, 0, 0.3) !important;
        opacity: 1 !important;
        visibility: visible !important;
        list-style: none;
    }

    .wapper .header-menu .collapsible-menu > li.collapsible > ul > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wapper .header-menu .collapsible-menu > li.collapsible > ul > li > a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 42px !important;
        line-height: 1 !important;
        background: #0e0e0e;
        margin: 0 !important;
        padding: 0 16px 0 36px !important;
        /* border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; */
        font-size: 11px !important;
    }

    .wapper .header-menu .collapsible-menu > li.collapsible > ul > li > a .menu_icon {
        width: 16px;
        height: 16px;
        margin-right: 10px;
    }

}

@media (max-width: 768px) {
    .wapper .header-menu .collapsible-menu > li > a {
        display: inline-flex !important;
        align-items: center;
        height: 40px !important;
        line-height: 1 !important;
        padding: 0 14px !important;
        background: #1c1c1c;
        color: #c9c9c9 !important;
        font-size: 12px !important;
        font-weight: 600;
        clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
        transition: background 0.2s, color 0.2s;
        float: none !important;
        white-space: nowrap;
        text-decoration: none;
        position: relative;
        overflow: hidden;
    }
}