/* ==========================================================================
   Guest Login & Registration Styles
   ========================================================================== */

.guest_login_speed {
    padding: 15px 20px;
    border-radius: 10px;
    min-width: 200px;
    font-size: 25px;
    width: 100%;
    text-align: center;
    background: linear-gradient(117deg, #009688, #4caf50);
    color: #fff;
    font-family: 'Almarai', sans-serif;
}

.guest_username_input_speed {
    padding: 25px 15px;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #9f9f9f !important;
    font-family: 'Almarai', sans-serif;
    text-align: center;
    font-weight: bold;
    box-shadow: inset 0px 0px 10px 4px rgb(203 204 215 / 50%);
}

button.registerGuestAccount {
    padding: 10px 10px;
    border-radius: 5px;
    min-width: 200px;
    font-size: 18px;
    width: 100%;
    text-align: center;
    background: linear-gradient(117deg, #009688, #4caf50);
    color: #fff;
    font-family: 'Almarai', sans-serif;
    box-shadow: #ccc 0 2px 4px 0;
}

.registration_login_speed {
    padding: 10px 10px;
    border-radius: 10px;
    min-width: 200px;
    font-size: 22px;
    width: 100%;
    text-align: center;
    background: linear-gradient(117deg, #009688, #4caf50);
    color: #fff;
    font-family: 'Almarai', sans-serif;
    box-shadow: #ccc 0 2px 4px 0;
    margin-bottom: 10px;
    margin-top: 10px;
}

/* ==========================================================================
   Policy & UGC Styles
   ========================================================================== */

.ugc_approval {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 11px;
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
    color: #7f7f7f;
}

.privacy_policy {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 11px;
    display: inline-block;
    width: 100%;
    text-align: center;
    color: #7f7f7f;
}

.ugc-icon {
    color: #a8b4f3;
}

/* ==========================================================================
   Layout & Utility Styles
   ========================================================================== */

.dual-text-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px; /* مسافة بين العنصرين */
}

.forgot_password i {
    margin: 0 8px; /* مسافة 8px حول الأيقونات */
}

.text-right {
    text-align: right;
    direction: rtl;
}

.text-left {
    text-align: left;
    direction: ltr;
}

/* ==========================================================================
   Component Styles
   ========================================================================== */

.cover_whatsapp {
    font-size: 22px;
    border-radius: 10px;
    margin: 5% auto;
    width: 94%;
    position: relative;
    padding: 10px;
    background: #3ab753;
    box-shadow: #ccc 0 2px 4px 0;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
}

/* إعلان صفحة الطرد */
.kicked_ads {
    text-align: center;
    margin: 5px;
}

.kicked_ads img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
}

/* ==========================================================================
   User Level Badge Styles
   ========================================================================== */

.user_level_badge {
    color: #ffffff;
    top: 0;
    left: 0px;
    font-size: 12px;
    font-weight: 800;
    border-radius: 10px 1px 10px 0px;
    text-align: center;
    position: absolute;
    z-index: 1;
    background: rgb(255 255 255 / 0) linear-gradient(117deg, #9C27B0, #673AB7) repeat scroll 0 0;
    padding: 2px 6px;
    box-shadow: #7575754d 2px 0px 0px 0;
}

.user_level_badge_chat {
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 3px;
    border-radius: 0 0 100px 100px;
    text-align: center;
    border: solid 1px #fff;
    box-shadow: #6666662b 0 4px 0 0;
    width: 48px;
    z-index: 10;
    position: absolute;
    margin-top: -13px;
    transform: translateX(-4%);
}

 
 
 /* =========================================
   2. ألوان المستويات (تضاف بجانب الكلاس الأساسي)
   ========================================= */


/* Level 1 to 50 */
.lvl-1-50 {
    background-image: radial-gradient(circle at top center, #8c5edd, #2707ff);
}

/* Level 51 to 100 */
.lvl-51-100 {
    background-image: radial-gradient(circle at top center, #009688, #4CAF50);
}

/* Level 101 to 200 */
.lvl-101-200 {
   background-image: radial-gradient(circle at top center, rgb(30, 227, 217), rgb(4, 89, 247));
}

/* Level 201 to 300 */
.lvl-201-300 {
    background-image: radial-gradient(circle at top center, #ff9800, #f44336);
}

/* Level 301 to 400 */
.lvl-301-400 {
    background-image: radial-gradient(circle at top center, rgb(225, 137, 68), rgb(101, 40, 15));
}
 
/* Level 401 to 500 */
.lvl-401-500 {
    background-image: radial-gradient(circle at top center, rgb(215, 105, 155), rgb(187, 82, 146), rgb(158, 59, 136), rgb(130, 35, 127), rgb(101, 12, 117));
}
 
/* Level 501 to 600 */
.lvl-501-600 {
    background-image: radial-gradient(circle at top center, #2196F3, #3F51B5);
}

/* Level 601 to 700 */
.lvl-601-700 {
    background-image: radial-gradient(circle at top center, #4CAF50, #0d4e10);
}

/* Level 701 to 800 */
.lvl-701-800 {
    background-image: radial-gradient(circle at top center, #4CAF50, #0d4e10);
}

/* Level 801 to 900 */
.lvl-801-900 {
    background-image: radial-gradient(circle at top center, #FFC107, rgb(148, 31, 115));
}

/* Level 901 to 1000 */
.lvl-901-1000 {
    background-image: radial-gradient(circle at top center, #E91E63, #690024);
}

/* Level 1001 to 1100 */
.lvl-1001-1100 {
    background-image: radial-gradient(circle at top center, #E91E63, #690024);
}

/* Level 1101 to 1200 */
.lvl-1101-1200 {
    background-image: radial-gradient(circle at top center, #9e6bfa, #673AB7);
}

/* Level 1201 to 1300 */
.lvl-1201-1300 {
    background-image: radial-gradient(circle at top center, #ef5350, #c62828);
}

/* Level 1301 to 1400 */
.lvl-1301-1400 {
    background-image: radial-gradient(circle at top center, #444444, #000000);
}

/* Level 1401 to 1500 */
.lvl-1401-1500 {
    background-image: radial-gradient(circle at top center, #444444, #000000);
}

/* Level 1501 to 1600 */
.lvl-1501-1600 {
    background-image: radial-gradient(circle at top center, #444444, #000000);
}

/* Level 1601 to 1700 */
.lvl-1601-1700 {
    background-image: radial-gradient(circle at top center, #444444, #000000);
}

/* Level 1701 to 1800 */
.lvl-1701-1800 {
    background-image: radial-gradient(circle at top center, #444444, #000000);
}

/* Level 1801 to 1900 */

.lvl-1801-1900 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-1901-2000 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-2001-2100 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-2101-2200 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-2201-2300 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-2301-2400 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-2401-2500 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-2501-2600 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-2601-2700 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-2701-2800 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-2801-2900 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-2901-3000 { background-image: radial-gradient(circle at top center, #000000, #000000); }

.lvl-3001-3100 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-3101-3200 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-3201-3300 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-3301-3400 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-3401-3500 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-3501-3600 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-3601-3700 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-3701-3800 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-3801-3900 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-3901-4000 { background-image: radial-gradient(circle at top center, #000000, #000000); }

.lvl-4001-4100 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-4101-4200 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-4201-4300 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-4301-4400 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-4401-4500 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-4501-4600 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-4601-4700 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-4701-4800 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-4801-4900 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-4901-5000 { background-image: radial-gradient(circle at top center, #000000, #000000); }

.lvl-5001-5100 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-5101-5200 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-5201-5300 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-5301-5400 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-5401-5500 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-5501-5600 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-5601-5700 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-5701-5800 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-5801-5900 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-5901-6000 { background-image: radial-gradient(circle at top center, #000000, #000000); }

.lvl-6001-6100 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-6101-6200 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-6201-6300 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-6301-6400 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-6401-6500 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-6501-6600 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-6601-6700 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-6701-6800 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-6801-6900 { background-image: radial-gradient(circle at top center, #000000, #000000); }
.lvl-6901-7000 { background-image: radial-gradient(circle at top center, #000000, #000000); }

/* Level 501+ */
.lvl-max { 
    background-image: radial-gradient(circle at top center, #444444, #000000);
}

 
 
 
 
/* ==========================================================================
   Profile Points/Level Styles ('plevel' & 'gold')
   ========================================================================== */

.plevel_cuotom, .gold_cuotom {
    display: flex;
    direction: rtl;
    padding: 10px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    width: 100%;
    flex-direction: row-reverse;
    align-items: center;
    margin-bottom: 10px;
    box-shadow: #c7c7c78c 0px 0px 20px 0px;
}

.plevel_cuotom {
    background: linear-gradient(360deg, #ffffff, #ede2ff);
}

.gold_cuotom {
    background: linear-gradient(360deg, #ffffff, #fffad0);
}

.plevel_label, .gold_label {
    flex: 1;
    text-align: right;
    font-weight: bold;
    font-size: 15px;
    margin-right: 7px;
}

.plevel_countnts, .gold_countnts {
    font-size: 17px;
    padding: 8px 10px;
    float: left;
    border-radius: 10px;
    box-shadow: #9e9e9e3b 0px 0px 0px 3px;
    font-weight: 800;
    text-align: left;
}

.plevel_countnts {
    background: #E91E63;
    color: #ffffff;
}

.gold_countnts {
    background: #FFC107;
    color: #000000;
}

.plevel_item img, .gold_item img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 1px;
}

/* ==========================================================================
   Icon Styles
   ========================================================================== */

i.fa.fa-times {
    font-size: 21px;
}

.copy_icon {
    padding: 0 5px;
    margin-right: 5px;
    font-size: 16px;
}

.copy_icon2 {
    padding: 0px 5px;
    color: #ccc;
    font-size: 16px;
    margin-left: 5px;
}

div#ev_search_container {
    text-align: right;
    margin: 5px;
}


/* ==========================================================================
   User List Item Styles
   ========================================================================== */

.listddd {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    cursor: pointer;
    padding: 3px 5px 3px 0px;
    border-radius: 0px 0px 10px 10px;
    border-bottom: solid 1px #e4e4e4;
    border-left: solid 1px #e4e4e4;
    border-right: solid 1px #e4e4e4;
    margin-bottom: 8px;
    background: #f7feff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.user_item {
    position: relative !important;
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
    cursor: pointer !important;
    padding: 12px 5px !important;
    border-radius: 10px 10px 0 0 !important;
    margin: 0 !important;
    border: 1px solid #e4e4e4 !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

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

.user_icons_wrapper > div {
    display: flex;
    padding-left: 8px;
}

.user_icons_wrapper > div:not(:first-child) {
    border-left: 1px solid #e2e2e2;
}

.user_icons_wrapper > div:empty {
    display: none;
    border-left: none;
}

.user_item_icon,
.genderIcon,
.user_icon_flag,
.user_icon_icrank,
.verified_i {
    display: inline-flex !important;
    vertical-align: middle !important;
    font-size: 15px !important;
    width: auto;
}

.verified_i {
    height: 16px;
}

.rank_text {
    font-size: 9px;
    line-height: 1;
    margin-inline-end: 8px;
    color: #333;
    text-transform: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    border: solid 1px #e2e2e2;
    padding: 2px 5px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: -3px 0px 0px 0px #ededed;
}

/* ==========================================================================
   Online/On-Air Counter Styles
   ========================================================================== */

.online-counter, .onair_user_counter {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    padding: 8px 16px;
    transition: background-color 0.3s, border-color 0.3s;
    flex-direction: row;
    direction: rtl;
    justify-content: center;
    margin-bottom: 8px;
}

.online-counter {
    background: linear-gradient(180deg, #d0fffbb3, #ffffff);
}

.onair_user_counter {
    background: linear-gradient(180deg, #fbe9ff, #ffffff);
}

.online-text {
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s;
}

.separator {
    width: 1px;
    height: 16px;
    background-color: #e5e7eb;
    transition: background-color 0.3s;
}

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

.count-number {
    color: #1f2937;
    font-weight: 700;
    font-size: 15px;
    transition: color 0.3s;
}

.my-signal-icon {
    font-size: 15px;
    color: #27ae60;
    --fa-beat-fade-opacity: 0.6;
    --fa-beat-fade-scale: 1.075;
}


/* ==========================================================================
   Animated Status Indicator
   ========================================================================== */

.status-indicator {
    position: relative;
    width: 10px;
    height: 10px;
}

/* Online Dot */
.status-dot {
    background-color: #22c55e;
}

/* On-Air Dot */
.status_dot_onair {
    background-color: #9C27B0;
}

.status-dot, .status_dot_onair {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Online Pulse */
.status-pulse {
    background-color: #22c55e;
}

/* On-Air Pulse */
.status_pulse_onair {
    background-color: #9C27B0;
}

.status-pulse, .status_pulse_onair {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    opacity: 0.75;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.75;
    }
    75%, 100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ===========================================
   General Styles (Light Mode)
   =========================================== */

/* General colors and base styles */
body {
    background: #ededed;
    color: #000000;
    font-family: 'Almarai', sans-serif;
}

a {
    color: orange;
}

button {
    background: transparent;
}

input, textarea, .post_input_container {
    background: #f6f6f6;
    border: 1px solid #d0cece !important;
    transition: border 0.2s ease;
}

input:focus, textarea:focus, .post_input_container:focus-within {
    border: 1px solid #666 !important;
}

.setdef {
    color: #333;
}

/* Background styles */
.bback {
    background: rgb(0,0,0,0.05);
}

.bbackb {
    background: rgb(0,0,0,0.05);
    border: 1px solid rgb(0,0,0,0.08);
}

.bhover:hover, .bhoverr:hover {
    background: rgb(0,0,0,0.05);
}

.bbackhover {
    background: rgb(0,0,0,0.05);
}

.bbackhover:hover {
    background: rgb(0,0,0,0.025);
}

.bbackhoverb {
    background: rgb(0,0,0,0.05);
}

.bbackhoverb:hover {
    background: rgb(0,0,0,0.025);
    border: 1px solid rgb(0,0,0,0.08);
}

/* Border and listing styles */
.blisting {
    border-bottom: 1px solid rgb(0 0 0 / 11%);
}


.blist {
    border-bottom: 1px solid rgb(0,0,0,0.08);
}

.bborder {
    border-bottom: 1px solid rgb(0, 0, 0, 0.08);
    background: #edededc9;
}

.tborder {
    border-top: 1px solid rgb(0,0,0,0.08);
}

.lborder, .ppanel {
    border-left: 1px solid rgb(0,0,0,0.08);
}

.rborder {
    border-right: 1px solid rgb(0,0,0,0.08);
}

.fborder {
    border: 1px solid rgb(0,0,0,0.08);
}

.bborder_menu {
    border-bottom: 1px solid rgb(0, 0, 0, 0.08);
}

/* Panel and menu styles */
.back_ptop {
    background: #673ab7;
    color: #fff;
}

.bpmenu:hover {
    background: rgb(255,255,255,0.1);
}

.bsub {
    background: rgb(0,0,0,0.1);
}

.bsub:hover {
    background: rgb(0,0,0,0.2);
}

.bmenu, .submenu {
    border-bottom: 1px solid rgb(0,0,0,0.05);
}

.bmenu:hover, .submenu:hover {
    background: rgb(0,0,0,0.05);
}

/* Shadow effects */
.bshadow, .page_element, .float_menu, .btnshadow, .pboxed {
    box-shadow: 0 1px 3px rgb(0,0,0,0.2);
}

/* Selected states */
.bselected {
    background: #f0fff0a3;
    border-radius: 8px;
    padding: 5px 0px;
    box-shadow: 0 1px 0px rgb(0 0 0 / 19%);
}

.rselected {
    background: rgb(0,0,0,0.08);
}

.pselected {
    color: #03add8;
}

.cselected, .liked {
    background: rgb(0,0,0,0.05);
}

.pag_btn {
    background: rgb(0,0,0,0.05);
    color: #666;
}

.pagselected, .pag_btn:hover {
    background: rgb(0,0,0,0.10);
}

/* Tag styles */
.gtag {
    background: #fff;
    border: 1px solid rgb(0,0,0,0.08);
}

/* Header and footer styles */
.float_top {
    border-bottom: 1px solid rgb(0, 0, 0, 0.08);
    background: #673ab7;
    color: #ffffff;
}

.float_ctop {
    border-bottom: 1px solid rgb(0, 0, 0, 0.08);
    background: #edededc9;
}

.bhead {
    background: #673ab7;
    color: #fff;
}

.modal_top {
    background: #222;
    color: #fff;
}

.pro_top {
    background: linear-gradient(360deg, #2a056b, #673ab7);
    color: #fff;
}

.bfoot {
    background: #ffffff;
    color: rgb(139 144 155);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #aa4040fc), var(--tw-ring-shadow, 0 0 #000000), var(--tw-shadow);
}

.foot {
    background: #222;
    color: #fff;
}

/* Background containers */
.backglob {
    background: #fff;
}

.back_chat {
    background: #fff;
}

.back_priv {
    background: #fff;
    border-radius: 0px 0px 0px 0px;
}

.back_panel {
    background: #fff;
}

.back_menu {
    background: #fff;
}

.back_pmenu {
    background: #292929;
    color: #fff;
}

.back_box {
    background: #fff;
}

.back_input {
    background: #fff;
    border-top: 1px solid rgb(0,0,0,0.08);
}

.back_modal {
    background: #fff;
}

.page_element {
    background: #fff;
}

.back_quote {
    background: #fff;
}

/* Theme colors */
.theme_color {
    color: #825ec2;
}

.default_color {
    color: #222;
}

.error {
    color: red;
}

.success {
    color: #74b20e;
}

.warn {
    color: orange;
}

/* Button styles */
.theme_btn, .back_theme {
    background: #03add8;
    color: #fff;
    font-family: 'Almarai', sans-serif;
}

.default_btn, .back_default {
    background: #222;
    color: #fff;
    font-family: 'Almarai', sans-serif;
}

.defaultd_btn {
    background: #333;
    color: #fff;
    font-family: 'Almarai', sans-serif;
}

.ok_btn {
    background: #74b20e;
    color: #fff;
    font-family: 'Almarai', sans-serif;
}

.warn_btn {
    background: orange;
    color: #fff;
    font-family: 'Almarai', sans-serif;
}

.delete_btn {
    background: #cc0000;
    color: #fff;
    font-family: 'Almarai', sans-serif;
}

.send_btn {
    color: #ffffff;
    font-family: 'Almarai', sans-serif;
    border-radius: 50%;
    background: linear-gradient(360deg, #653ab6, #9527b0);
}

/* User and chat styles */
.user {
    color: #333;
}

.chat_system {
    color: #999;
}

.offline {
    opacity: 0.5;
}

.menui {
    color: #764cca;
}

.subi {
    color: #5f38b2;
}

.reply_item {
    background: #f6f6f6;
}

.main_post_item {
    color: rgb(0,0,0,0.5);
}

.input_item {
    color: #707070;
    border: solid 1px #dfdada;
    border-radius: 100px;
}

/* Private message styles */
.target_private, .hunt_quote {
    color: #ffffff;
    background: linear-gradient(135deg, #4e0dc1, #7646e0);
    border-radius: 10px 0 10px 10px;
}

.hunter_private, .targ_quote {
    color: #000000;
    background: #ededed;
    border-radius: 0 10px 10px;
}

/* Quote styles */
.cquote {
    background: rgb(255 255 255 / 5%) !important;
    border: solid 1px #5d38b0;
    width: 100%;
    line-height: 20px;
    border-left: solid 4px #6038b1;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.cquote::before {
    font-family: "Font Awesome 6 Free";
    content: "\f10d";
    font-weight: 900;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #e7d9ff;
    font-size: 20px;
}

.cqname {
    color: #000;
}

.cqmess {
    color: #666;
}

/* Tab menu styles */
.tab_menu {
    background: #fff;
    box-shadow: 0 1px 3px rgb(0,0,0,0.2);
}

.tab_selected {
    background: rgb(0,0,0,0.08);
}

/* Modal menu styles */
.modal_mback {
    color: #000000;
    text-align: center;
    background: linear-gradient(360deg, #f0f0f0, #e2e2e2);
    border-bottom: solid 1px #c1c1c1;
    background-image: repeating-linear-gradient(135deg, hsla(35, 0%, 71%, 0.09) 0px, hsla(35, 0%, 71%, 0.09) 1px, transparent 1px, transparent 11px), repeating-linear-gradient(45deg, hsla(35, 0%, 71%, 0.09) 0px, hsla(35, 0%, 71%, 0.09) 1px, transparent 1px, transparent 11px), linear-gradient(90deg, hsl(183, 0%, 100%), hsl(183, 0%, 100%));
}

.modal_mborder {
    border-bottom: 1px solid rgb(0,0,0,0.08);
}

.modal_selected {
    background: #673ab7;
    border: solid 2px #673ab7;
    color: #ffffff;
    box-shadow: inset #481f91 1px 1px 10px 1px;
}

.modal_back {
    background-color: rgba(0,0,0,0.4);
}

/* Chat logs */
.log2 {
    background: rgb(0,0,0,0.028);
}

.topic_log {
    color: #ffffff;
    border-radius: 10px;
    background: radial-gradient(circle at 10% 20%, rgba(93, 55, 175, 0.8) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.2) 0%, transparent 25%), linear-gradient(135deg, #5d37af 0%, #6e45c1 25%, #7f53d3 50%, #9061e5 75%, #a16ff7 100%);
    background-blend-mode: overlay;
    background-size: 200% 200%;
    margin-bottom: 10px;
    margin-top: 5px;
}

/* Progress bar */
.bprogress {
    background: #74b20e;
    color: #fff;
}

/* Notification styles */
.bnotify {
    background: red;
    color: #fff;
}

/* Date and text styles */
.sub_date {
    color: #888;
}

.sub_chat, .sub_priv {
    color: #ccc;
}

.sub_text, .list_mood {
    color: #5c5c5c;
}

.plikes {
    background-color: rgb(255 255 255 / 30%);
    color: #fff;
    box-shadow: #0000001a -1px 4px 4px 0px;
}

.bspin {
    color: rgb(0,0,0,0.3);
}

.my_notice {
    color: #fff;
    background: #673AB7;
    font-weight: bold;
}

.system_text {
    background: #ededed;
    color: #666;
}

.back_page {
    background: #222;
    color: #fff;
}

.post_video {
    background: rgb(0,0,0,1);
}

/* Slider styles */
.boom_slider .ui-widget-content {
    background: #ededed;
}

.boom_slider .ui-state-default {
    background: #999 !important;
}

.boom_slider .ui-state-active {
    background: #999 !important;
}

.boom_slider .ui-slider-range {
    background: #5f38b3;
}

/* Select input styles */
.selectboxit-list, .selectboxit-btn {
    background-color: #f6f6f6;
    color: #666;
    border: 1px solid #e6e6e6 !important;
}

.selectboxit-list .selectboxit-focus .selectboxit-option-anchor {
    background-color: #ededed;
    color: #666;
}

.selectboxit-default-arrow {
    border-top: 4px solid #666;
}

.selectboxit-btn.selectboxit-enabled:hover, 
.selectboxit-btn.selectboxit-enabled:focus, 
.selectboxit-btn.selectboxit-enabled:active {
    background: #f6f6f6;
    color: #666;
}

.selectboxit-options {
    background: #fff;
    border: 1px solid #ccc;
}

.selectboxit-list .selectboxit-option-anchor {
    color: #666;
}

/* ===========================================
   Component Styles (Light Mode)
   =========================================== */

/* Header options */
.head_option1, .head_option2, .head_option3, .head_option4, 
.head_option5, .head_option6, .head_option7, .head_option8, .head_option9 {
    display: table-cell;
    width: 45px;
    height: 50px;
    vertical-align: middle;
    font-size: 20px;
    text-align: center;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: #15268296 1px 0 9px 0;
    font-family: 'Almarai', sans-serif;
}

.head_option1 {
    background: rgb(255 255 255 / 0) linear-gradient(117deg,#00bcd4,#ff8100) repeat scroll 0 0;
}

.head_option2 {
    background: rgb(255 255 255 / 0) linear-gradient(117deg,#ff7ba8,#e91e63) repeat scroll 0 0;
}

.head_option3 {
    background: rgb(255 255 255 / 0) linear-gradient(117deg,#47dfff,#0094c1) repeat scroll 0 0;
}

.head_option4 {
    background: rgb(255 255 255 / 0) linear-gradient(117deg, #ffd147, #ff8100) repeat scroll 0 0;
}

.head_option5 {
    background: rgb(255 255 255 / 0) linear-gradient(117deg, #b8ff42, #4caf50) repeat scroll 0 0;
}

.head_option6 {
    background: rgb(255 255 255 / 0) linear-gradient(117deg, #10ff1a, #00ad07) repeat scroll 0 0;
}

.head_option7 {
    background: rgb(255 255 255 / 0) linear-gradient(117deg, #fff0d0, #ff2e1f) repeat scroll 0 0;
}

.head_option8 {
    background: linear-gradient(330deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
}

.head_option9 {
    background: rgb(255 255 255 / 0) linear-gradient(117deg, #ff7ba8, #e91e63) repeat scroll 0 0;
}

/* Chat logs */
.ch_logs {
    padding: 8px 5px 15px 5px;
    word-wrap: break-word;
    display: table;
    width: 100%;
    table-layout: fixed;
    max-width: 100%;
    overflow: hidden;
    cursor: pointer;
    border: solid 1px #efefef;
    border-radius: 10px;
    margin-bottom: 3px;
    margin-top: 3px;
}

/* Profile info */
.profile_info_registerGuest {
    background: #31b736;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    font-weight: bolder;
}

/* Chat message topic */
.chat_message_topic {
    margin-top: 10px;
    border-top: solid 1px #adabab;
    padding-top: 8px;
    font-size: 14px;
    line-height: 1.4;
}

.topic_title {
    display: table-cell;
    vertical-align: middle;
    background: #c7fef9;
    border-radius: 10px;
    padding: 5px;
    box-shadow: #fff 3px 3px 0 0;
    line-height: 1.4;
}

/* Rules button */
button.rules-button {
    background: #ffcc33;
    border-radius: 5px;
    padding: 5px;
    margin-top: 8px;
    width: auto;
    height: auto;
    font-family: 'Almarai', sans-serif;
    text-align: center;
    font-size: 14px;
}

/* Post styles */
.post_content {
    table-layout: fixed;
    width: 100%;
    word-wrap: break-word;
    font-weight: 400;
    border-radius: 0px 0px 0px 0px;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    padding: 10px;
    visibility: visible;
    opacity: 1;
}

.post_title {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
    border-left: 1px solid #e0e0e0 !important;
    border-radius: 10px 10px 0px 0px !important;
    border-right: 1px solid #e0e0e0 !important;
    border-top: 1px solid #e0e0e0 !important;
    padding: 10px !important;
    background: linear-gradient(181deg, #e3fffd, #ffffff) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.pad20 {
    padding: 10px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Room element */
.room_element.room_celem.blisting {
    border-bottom: 1px solid rgb(0 0 0 / 11%);
    background: #eeeeee;
    transition: border 0.2s ease;
    border-radius: 10px;
    margin-top: 5px;
}

/* Player edit */
.player_my_edit {
    border: 1px solid rgb(0, 0, 0, 0.08);
    background: #f3faff;
    padding-top: 10px;
    padding-bottom: 10px;
    display: table;
    table-layout: fixed;
    width: 100%;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

/* Radio item */
.radio_item.sub_list_item {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding: 12px 10px;
    cursor: pointer;
    font-weight: 800;
    background: #f3fdffc9;
    margin-bottom: 5px;
    border-radius: 5px;
    border: solid 1px #d2d2d2;
}

/* Dark mode toggle button */
.dark-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #333;
    font-size: 18px;
    transition: all 0.3s ease;
    margin-left: 10px;
}

.dark-mode-toggle:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* ===========================================
   Dark Mode Styles
   =========================================== */

body.dark-mode {
    background: #141414;
    color: #fff;
}

body.dark-mode a {
    color: orange;
}

body.dark-mode button {
    color: #fff;
}

body.dark-mode input, 
body.dark-mode textarea, 
body.dark-mode .post_input_container {
    background: #191e24;
    border: 1px solid #141414 !important;
    color: #fff;
}

body.dark-mode .setdef {
    color: #fff;
}

/* Background styles in dark mode */
body.dark-mode .bback {
    background: rgb(255,255,255,0.05);
}

body.dark-mode .bbackb {
    background: rgb(255,255,255,0.05);
    border: 1px solid rgb(255,255,255,0.08);
}

body.dark-mode .bhover:hover {
    background: rgb(255,255,255,0.05);
}

body.dark-mode .bbackhover {
    background: #191e24;
}

body.dark-mode .bbackhover:hover {
    background: rgb(255,255,255,0.03);
}

body.dark-mode .bbackhoverb {
    background: rgb(255,255,255,0.05);
}

body.dark-mode .bbackhoverb:hover {
    background: rgb(255,255,255,0.3);
    border: 1px solid rgb(255,255,255,0.05);
}

/* Border and listing styles in dark mode */
body.dark-mode .blisting {
    border-bottom: 1px solid rgb(255,255,255,0.03);
}


body.dark-mode .blist {
    border-bottom: 1px solid rgb(255,255,255,0.03);
}

body.dark-mode .bborder {
    border-bottom: 1px solid rgb(255,255,255,0.05);
    background: #242d38;
}

body.dark-mode .tborder {
    border-top: 1px solid rgb(255,255,255,0.05);
}

body.dark-mode .lborder, 
body.dark-mode .ppanel {
    border-left: 1px solid rgb(255,255,255,0.05);
}

body.dark-mode .rborder {
    border-right: 1px solid rgb(255,255,255,0.05);
}

body.dark-mode .fborder {
    border: 1px solid rgb(255,255,255,0.05);
}

/* Panel and menu styles in dark mode */
body.dark-mode .back_ptop {
    background: #242d38;
    color: #fff;
}

body.dark-mode .bpmenu:hover {
    background: rgb(255,255,255,0.05);
}

body.dark-mode .bsub {
    background: rgb(0,0,0,0.1);
}

body.dark-mode .bsub:hover {
    background: rgb(255,255,255,0.03);
}

body.dark-mode .bmenu, 
body.dark-mode .submenu {
    border-bottom: 1px solid rgb(255,255,255,0.03);
}

body.dark-mode .bmenu:hover, 
body.dark-mode .submenu:hover {
    background: rgb(255,255,255,0.03);
}

/* Shadow effects in dark mode */
body.dark-mode .bshadow, 
body.dark-mode .page_element, 
body.dark-mode .float_menu, 
body.dark-mode .btnshadow, 
body.dark-mode .pboxed {
    box-shadow: 0 1px 3px rgb(0,0,0,0.4);
}

/* Selected states in dark mode */
body.dark-mode .bselected {
    background: #1d232a;
    border-radius: 8px;
    padding: 5px 0px;
}
body.dark-mode .rselected {
    background: rgb(255,255,255,0.08);
}

body.dark-mode .pselected {
    color: #bcbcbc;
}

body.dark-mode .cselected, 
body.dark-mode .liked {
    background: rgb(255,255,255,0.05);
}

body.dark-mode .pag_btn {
    background: rgb(255,255,255,0.05);
}

body.dark-mode .pagselected, 
body.dark-mode .pag_btn:hover {
    background: rgb(255,255,255,0.1);
}

/* Tag styles in dark mode */
body.dark-mode .gtag {
    background: #111;
    border: 1px solid rgb(255,255,255,0.05);
}

/* Header and footer styles in dark mode */
body.dark-mode .float_top {
    border-bottom: 1px solid rgb(255,255,255,0.05);
    background: #242d38;
}

body.dark-mode .float_ctop {
    border-bottom: 1px solid rgb(255,255,255,0.05);
    background: #242d38;
    color: #e3e8ed;
}

body.dark-mode .bhead {
    background: #191e24;
    color: #fff;
}

body.dark-mode .modal_top {
    background: #111;
    color: #fff;
}

body.dark-mode .pro_top {
    background: #212e3d;
    color: #fff;
}

body.dark-mode .bfoot {
    background: #1d232a;
    color: #758495;
    border-top: solid 1px #191e24;
}

body.dark-mode .foot {
    background: #111;
    color: #fff;
}

/* Background containers in dark mode */
body.dark-mode .backglob {
    background: #191e24;
}

body.dark-mode .back_chat {
    background: #191e24;
}

body.dark-mode .back_priv {
    background: #1d232a;
}

body.dark-mode .back_panel {
    background: #1d232a;
}

body.dark-mode .back_menu {
    background: #1d232a;
    color: #e3e8ed;
}

body.dark-mode .back_pmenu {
    background: #151515;
}

body.dark-mode .back_box {
    background: #202020;
}

body.dark-mode .back_input {
    background: #1d232a;
    border-top: 1px solid rgb(255,255,255,0.05);
}

body.dark-mode .back_modal {
    background: #1d232a;
}

body.dark-mode .page_element {
    background: #191919;
}

body.dark-mode .back_quote {
    background: #191919;
}

/* Theme colors in dark mode */
body.dark-mode .default_color {
    color: #666;
}

body.dark-mode .error {
    color: red;
}

body.dark-mode .success {
    color: #74b20e;
}

body.dark-mode .warn {
    color: orange;
}

/* Button styles in dark mode */
body.dark-mode .theme_btn, 
body.dark-mode .back_theme {
    background: #3caa41;
    color: #fff;
}

body.dark-mode .default_btn, 
body.dark-mode .back_default {
    background: #607D8B;
    color: #fff;
}

body.dark-mode .defaultd_btn {
    background: #444;
    color: #fff;
}

body.dark-mode .ok_btn {
    background: #74b20e;
    color: #fff;
}

body.dark-mode .warn_btn {
    background: orange;
    color: #fff;
}

body.dark-mode .delete_btn {
    background: #cc0000;
    color: #fff;
}

body.dark-mode .send_btn {
    color: #f6f6f6;
    background: #758495;
    border-radius: 50%;
}

/* User and chat styles in dark mode */
body.dark-mode .user {
    color: #fff;
}

body.dark-mode .chat_system {
    color: #999;
}

body.dark-mode .offline {
    opacity: 0.5;
}

body.dark-mode .menui {
    color: #768aa0;
}

body.dark-mode .subi {
    color: #bcbcbc;
}

body.dark-mode .reply_item {
    background: #191e24 !important;
}

body.dark-mode div#delete_news {
    color: #adadad !important;
}

body.dark-mode .player_my_edit {
    border: 1px solid rgb(0, 0, 0, 0.08);
    background: #191e24;
}
 
body.dark-mode .radio_item.sub_list_item {
    border: solid 1px #242d38;
    background: #191e24;
}
 
body.dark-mode .emo_content {
    width: 100%;
    height: 180px;
    overflow: hidden;
    overflow-y: auto;
    padding: 5px;
    background: #191e24;
} 
 
body.dark-mode .emo_content_priv {
    width: 100%;
    height: 160px;
    overflow: hidden;
    overflow-y: auto;
    padding: 5px;
    background: #191e24;
} 
  
 
 
body.dark-mode .main_post_item {
    color: rgb(255,255,255,0.5);
}

body.dark-mode .input_item {
    color: #758495;
    border: solid 1px #242d38;
}

/* Private message styles in dark mode */
body.dark-mode .target_private, 
body.dark-mode .hunt_quote {
    color: #fff;
    background: #324863;
    border-radius: 10px 0px 10px 10px;
}

body.dark-mode .hunter_private, 
body.dark-mode .targ_quote {
    color: #fff;
    background: #242d38;
    border-radius: 0px 10px 10px 10px;
}

/* Quote styles in dark mode */
body.dark-mode .cquote {
    background: #242d38 !important;
    border: solid 1px #334c62;
    width: 100%;
    line-height: 17px;
    border-left: solid 4px #334c62;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

body.dark-mode .cqname {
    color: #ffffff;
}

body.dark-mode .cqmess {
    color: #ebebeb;
}

/* Tab menu styles in dark mode */
body.dark-mode .tab_menu {
    box-shadow: 0 1px 3px rgb(0,0,0,0.4);
}

body.dark-mode .tab_selected {
    background: rgb(255,255,255,0.05);
}

/* Modal menu styles in dark mode */
body.dark-mode .modal_mback {
    background: rgb(7 18 31);
    box-shadow: #c7c7c700 0px 3px 12px 0px;
    border-bottom: solid 1px #000000;
    color: #ffffff;
}

body.dark-mode .modal_mborder {
    border-bottom: 1px solid rgb(255,255,255,0.08);
}


body.dark-mode .modal_back {
    background-color: rgba(0,0,0,0.6);
}

/* Chat logs in dark mode */
body.dark-mode .log2 {
    background: rgb(25 30 36);
}

body.dark-mode .topic_log {
    color: #ffffff;
    border-radius: 10px;
    background: #242d38;
    background-blend-mode: overlay;
    background-size: 200% 200%;
    margin-bottom: 10px;
    margin-top: 5px;
}

/* Progress bar in dark mode */
body.dark-mode .bprogress {
    background: #74b20e;
    color: #fff;
}

/* Notification styles in dark mode */
body.dark-mode .bnotify {
    background: red;
    color: #fff;
}

body.dark-mode .foot_notify, 
body.dark-mode .head_notify {
    border: 1px solid #fff;
}

/* Date and text styles in dark mode */
body.dark-mode .sub_date {
    color: #888;
}

body.dark-mode .sub_chat, 
body.dark-mode .sub_priv {
    color: #758495;
}

body.dark-mode .sub_text, 
body.dark-mode .list_mood {
    color: #e3e8ed;
}

body.dark-mode .plikes {
    background-color: rgb(255 255 255 / 20%);
    color: #fff;
}

body.dark-mode .bspin {
    color: rgb(255,255,255,0.3);
}

body.dark-mode .my_notice {
    color: #fff;
    background: #E91E63;
}

body.dark-mode .system_text {
    background: rgb(255,255,255,0.05);
    color: #888;
}

body.dark-mode .back_page {
    background: #111;
    color: #fff;
}

body.dark-mode .post_video {
    background: rgb(0,0,0,1);
}

/* Slider styles in dark mode */
body.dark-mode .boom_slider .ui-widget-content {
    background: #333;
}

body.dark-mode .boom_slider .ui-state-default {
    background: #ccc !important;
}

body.dark-mode .boom_slider .ui-state-active {
    background: #ccc !important;
}

body.dark-mode .boom_slider .ui-slider-range {
    background: #666;
}

/* Select input styles in dark mode */
body.dark-mode .selectboxit-list, 
body.dark-mode .selectboxit-btn {
    background-color: #151515;
    border: 1px solid #222;
    color: #fff;
}

body.dark-mode .selectboxit-list .selectboxit-focus .selectboxit-option-anchor {
    background-color: #333;
    color: #fff;
}

body.dark-mode .selectboxit-default-arrow {
    border-top: 4px solid #666;
}

body.dark-mode .selectboxit-btn.selectboxit-enabled:hover, 
body.dark-mode .selectboxit-btn.selectboxit-enabled:focus, 
body.dark-mode .selectboxit-btn.selectboxit-enabled:active {
    background: #151515;
    color: #fff;
}

body.dark-mode .selectboxit-options {
    background: #222;
    color: #fff;
}

body.dark-mode .selectboxit-list .selectboxit-option-anchor {
    color: #666;
}

/* Dark mode toggle button in dark mode */
body.dark-mode .dark-mode-toggle {
    color: #e0e0e0;
}

body.dark-mode .dark-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ===========================================
   Component Styles (Dark Mode)
   =========================================== */

/* Header options in dark mode */
body.dark-mode .head_option1, 
body.dark-mode .head_option2, 
body.dark-mode .head_option3, 
body.dark-mode .head_option4, 
body.dark-mode .head_option5, 
body.dark-mode .head_option6,
body.dark-mode .head_option7,
body.dark-mode .head_option8,
body.dark-mode .head_option9 {
    background: #242d38;
    box-shadow: #000000 1px 0 9px 0;
    border: solid 1px #495766;
}

 
/* User item in dark mode */
body.dark-mode .user_item {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    cursor: pointer;
    padding: 10px 5px;
    border-radius: 10px;
    border: solid 1px #2c2b2b;
    margin: 0px 0px 5px 0px;
}

/* Custom level and gold styles in dark mode */
body.dark-mode .plevel_cuotom {
    display: flex;
    direction: rtl;
    padding: 10px;
    border: 1px solid #0b0808 !important;
    border-radius: 10px;
    width: 100%;
    background: linear-gradient(360deg, #1d232a, #111111) !important;
    flex-direction: row-reverse;
    align-items: center;
    box-shadow: #111111 0px 0px 20px 0px !important;
}

body.dark-mode .gold_cuotom {
    display: flex;
    direction: rtl;
    padding: 10px;
    border: 1px solid #0b0808 !important;
    border-radius: 10px;
    width: 100%;
    background: linear-gradient(360deg, #1d232a, #111111) !important;
    flex-direction: row-reverse;
    align-items: center;
    box-shadow: #111111 0px 0px 20px 0px !important;
}

/* Menu item in dark mode */
body.dark-mode .fmenu_item {
    padding: 12px 10px;
    display: table;
    table-layout: fixed;
    width: 100%;
    cursor: pointer;
    font-size: 14px;
    text-shadow: none;
    border: solid 1px #242d38;
    margin-top: 5px;
    border-radius: 10px !important;
    background: #191e24;
}

/* Footer item in dark mode */
body.dark-mode .footer_item {
    width: 100%;
    height: 100%;
    text-align: center;
    cursor: pointer;
    display: table-cell;
    max-width: 16.66666666%;
    vertical-align: middle;
    position: relative;
    border: solid 1px #191e24;
}

/* Rules button in dark mode */
body.dark-mode button.rules-button {
    background: #607D8B;
    color: #ffffff;
}

/* Chat message topic in dark mode */
body.dark-mode .chat_message_topic {
    border-top: solid 1px #adabab;
}

/* Chat logs in dark mode */
body.dark-mode .ch_logs {
    border: solid 1px #1d232a;
}

/* User about text in dark mode */
body.dark-mode .user_about_text {
    border: solid 1px #758495;
    border-top: solid 5px #758495;
    background-color: #222222;
    line-height: 1.7;
    overflow-wrap: break-word;
    white-space: normal;
}

/* Price section in dark mode */
body.dark-mode .price-section {
    margin-bottom: 20px !important;
    border: 1px solid #3b4358 !important;
    border-radius: 11px !important;
    background: #222222 !important;
    margin-top: 15px !important;
}

body.dark-mode .price-section:last-child {
    border-bottom: none !important;
}

body.dark-mode .section-title {
    align-items: center !important;
    margin-bottom: 5px !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    background: #43454b !important;
    border-radius: 10px 10px 0px 0px !important;
    padding: 8px 0px !important;
    text-align: center !important;
}

body.dark-mode .section-title img {
    width: 30px !important;
    margin-left: 10px !important;
}

body.dark-mode .price-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 10px !important;
    border-bottom: 1px dashed #2b2f3c !important;
    transition: all 0.3s ease !important;
}

body.dark-mode .price-item:hover {
    background-color: #f9f9f9 !important;
}

body.dark-mode .price-item:last-child {
    border-bottom: none !important;
}

body.dark-mode .item-info {
    display: flex !important;
    align-items: center !important;
    color: #ffffff !important;
}

body.dark-mode .item-info img {
    width: 25px !important;
    margin-left: 10px !important;
}

body.dark-mode .price {
    color: #0fa815 !important;
    border-radius: 20px !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

body.dark-mode .icon_circle {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #758495;
    color: #ffffff;
    border-radius: 50%;
    padding: 10px;
    font-size: 18px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

body.dark-mode .price_no {
    color: #ff3333 !important;
    border-radius: 20px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-decoration: line-through !important;
}

/* Footer in dark mode */
body.dark-mode .footer {
    text-align: center !important;
    padding: 20px !important;
    background-color: #3b4358 !important;
    border: 1px solid #c3e8c5 !important;
    border-radius: 10px !important;
}

body.dark-mode .contact-info {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 10px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #00a907 !important;
}

body.dark-mode .contact-info img {
    width: 20px !important;
    margin-left: 10px !important;
}

body.dark-mode .contact-info_worinng {
    margin-top: 15px !important;
    border-top: solid 1px #a6c9a8 !important;
    padding-top: 5px !important;
    color: #ff9800 !important;
}

body.dark-mode .copy-btn {
    background: none !important;
    border: none !important;
    margin-right: 10px !important;
    color: #ffffff !important;
}

body.dark-mode .copy-btn img {
    width: 18px !important;
    opacity: 0.7 !important;
    transition: opacity 0.3s !important;
    color: #ffffff !important;
}

body.dark-mode .copy-btn:hover img {
    opacity: 1 !important;
}

body.dark-mode .copy_icon2 {
    padding: 0px 5px !important;
    font-size: 16px !important;
    margin-left: 5px !important;
    color: #515a69 !important;
}

/* Toast notification in dark mode */
body.dark-mode .toast {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-color: #4CAF50 !important;
    color: white !important;
    padding: 12px 24px !important;
    border-radius: 4px !important;
    z-index: 1000 !important;
    opacity: 0 !important;
    transition: opacity 0.5s !important;
}

body.dark-mode .toast.show {
    opacity: 1 !important;
}

/* User count in dark mode */
body.dark-mode .user_count {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
    padding: 10px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    background: rgb(11 10 10 / 0%) linear-gradient(180deg, #444d67, #2b2f3c) repeat scroll 0 0 !important;
    border-radius: 5px !important;
    text-align: center !important;
    border: solid 1px #000000b0 !important;
    color: #c1c1c1 !important;
}

/* Level and gold labels in dark mode */
body.dark-mode .plevel_label, 
body.dark-mode .gold_label {
    flex: 1 !important;
    text-align: right !important;
    font-weight: bold !important;
    font-size: 15px !important;
    margin-right: 7px !important;
    color: #ece8e8 !important;
}

/* VIP table in dark mode */
body.dark-mode .vip_table_list {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 auto !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    background-color: #353b4e !important;
    box-shadow: -15px -15px 20px rgb(57 65 124 / 8%) !important,
                 15px 15px 20px rgb(57 65 124 / 8%) !important;
}

/* Room element in dark mode */
body.dark-mode .room_element.room_celem.blisting {
    border-bottom: 1px solid rgb(0 0 0 / 11%);
    background: #242d38;
    transition: border 0.2s ease;
    border-radius: 10px;
    margin-top: 5px;
}

/* Level label in dark mode */
body.dark-mode p.label_leavel {
    font-weight: 800 !important;
    direction: rtl !important;
    text-align: right !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
    background: #2d3349 !important;
    padding: 8px !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    box-shadow: -15px -15px 20px rgb(57 65 124 / 8%) !important,
                 15px 15px 20px rgb(57 65 124 / 8%) !important;
    border: 1px solid #e0e0e091 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Modal top level in dark mode */
body.dark-mode .modal_top_leval {
    width: 100% !important;
    display: table !important;
    table-layout: fixed !important;
    background: #38405a !important;
    color: #ffffff !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Post styles in dark mode */
body.dark-mode .post_content {
    border-left: 1px solid #242d38;
    border-right: 1px solid #242d38;
}

 
body.dark-mode #wrap_chat {
    height: 100%;
    width: 100%;
   padding-left: 0px;   
   padding-right: 0px;
}


body.dark-mode .post_control {
    border-radius: 0px 0px 0px 0px !important;
    border-left: 1px solid #242d38 !important;
    border-right: 1px solid #242d38 !important;
    padding: 10px !important;
    visibility: visible !important;
    opacity: 1 !important;
    border-bottom: 1px solid #242d38 !important;
    border-top: 1px solid #242d38 !important;
}

body.dark-mode .post_title {
    border-left: 1px solid #242d38 !important;
    border-radius: 10px 10px 0px 0px !important;
    border-right: 1px solid #242d38 !important;
    border-top: 1px solid #242d38 !important;
    padding: 10px !important;
    background: linear-gradient(181deg, #242d38, #242d38) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.dark-mode .comment_count {
    text-align: left;
    width: 40px;
    background: #1d232a;
    border: 1px solid #242d38 !important;
    box-shadow: #efefef96 0px 0 0px 0;
    color: #ffffff;
    padding: 7px 9px 7px 9px;
}

body.dark-mode .listddd {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    cursor: pointer;
    padding: 3px 5px 3px 0px;
    border-radius: 0px 0px 10px 10px;
    border-bottom: solid 1px #2c2b2b;
    border-left: solid 1px #2c2b2b;
    border-right: solid 1px #2c2b2b;
    margin-bottom: 8px;
    background: #2f3443;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

body.dark-mode .user_item {
    position: relative !important;
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
    cursor: pointer !important;
    padding: 12px 5px !important;
    border-radius: 10px 10px 0 0 !important;
    margin: 0 !important;
    border-bottom: solid 1px #2c2b2b !important;
    border-left: solid 1px #2c2b2b !important;
    border-right: solid 1px #2c2b2b !important;
    border-top: solid 1px #2c2b2b !important;
}



body.dark-mode .user_icons_wrapper > div:not(:first-child) {
    border-left: 1px solid #404860;
}


body.dark-mode .online-counter {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    padding: 8px 16px;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: background-color 0.3s, border-color 0.3s;
    flex-direction: row;
    direction: rtl;
    justify-content: center;
    margin-bottom: 8px;
    background: rgb(255 255 255 / 0) linear-gradient(180deg, #2f3443, #1d232a) repeat scroll 0 0;
}


body.dark-mode .count-number {
    color: #ffffff;
    font-weight: 700;
    transition: color 0.3s;
    font-size: 15px;
}

body.dark-mode .online-text {
    color: #e4e4e4;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s;
}

body.dark-mode .rank_text {
    font-size: 9px;
    line-height: 1;
    margin-inline-end: 8px;
    color: #ffffff;
    text-transform: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    border: solid 1px #404860;
    padding: 2px 5px 2px 5px;
    border-radius: 8px;
    background: #242d38;
    box-shadow: -3px 0px 0px 0px #383f53;
}


body.dark-mode .onair_user_counter {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    padding: 8px 16px;
    transition: background-color 0.3s, border-color 0.3s;
    flex-direction: row;
    direction: rtl;
    margin-bottom: 8px;
    background: rgb(255 255 255 / 0) linear-gradient(180deg, #2f3443, #1d232a) repeat scroll 0 0;
    justify-content: center;
}





body.dark-mode .podium-top2 {
    color: #ffffff;
    cursor: pointer;
    font-weight: 900;
    margin-bottom: 15px;
    direction: rtl;
    text-align: center;
    font-size: 15px;
    text-shadow: -1px -1px 2px #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 5px #f30e0e, 0 0 10px #E91E63, 0 0 20px #9C27B0, 0 0 30px #E91E63, 0 0 40px #9C27B0;
    border: solid 1px #632037;
    border-radius: 10px;
    padding: 10px;
    box-shadow: #ff3c7e 0 4px 0px 0px;
}

body.dark-mode .podium-rank1 {
    width: 100%;
    margin: 0 auto 5px auto;
    background-image: linear-gradient(157.5deg, rgb(148, 31, 115) 0%, rgb(148, 31, 115) 42%, rgb(129, 38, 114) 42%, rgb(129, 38, 114) 53%, rgb(110, 44, 113) 53%, rgb(110, 44, 113) 68%, rgb(91, 51, 113) 68%, rgb(91, 51, 113) 70%, rgb(72, 58, 112) 70%, rgb(72, 58, 112) 83%, rgb(53, 64, 111) 83%, rgb(53, 64, 111) 97%, rgb(34, 71, 110) 97%, rgb(34, 71, 110) 100%), linear-gradient(90deg, rgb(148, 31, 115) 0%, rgb(148, 31, 115) 42%, rgb(129, 38, 114) 42%, rgb(129, 38, 114) 53%, rgb(110, 44, 113) 53%, rgb(110, 44, 113) 68%, rgb(91, 51, 113) 68%, rgb(91, 51, 113) 70%, rgb(72, 58, 112) 70%, rgb(72, 58, 112) 83%, rgb(53, 64, 111) 83%, rgb(53, 64, 111) 97%, rgb(34, 71, 110) 97%, rgb(34, 71, 110) 100%), linear-gradient(0deg, rgb(148, 31, 115) 0%, rgb(148, 31, 115) 42%, rgb(129, 38, 114) 42%, rgb(129, 38, 114) 53%, rgb(110, 44, 113) 53%, rgb(110, 44, 113) 68%, rgb(91, 51, 113) 68%, rgb(91, 51, 113) 70%, rgb(72, 58, 112) 70%, rgb(72, 58, 112) 83%, rgb(53, 64, 111) 83%, rgb(53, 64, 111) 97%, rgb(34, 71, 110) 97%, rgb(34, 71, 110) 100%), linear-gradient(90deg, rgb(43, 115, 147), rgb(213, 181, 127));
    background-blend-mode: overlay, overlay, overlay, normal;
}


body.dark-mode .leader-list-item {
    display: flex;
    align-items: center;
    padding: 10px 8px 10px 8px;
    border-radius: 12px;
    cursor: pointer;
    border: solid 1px #191e24;
    background: rgb(255 255 255 / 0) linear-gradient(180deg, #2f3443, #1d232a) repeat scroll 0 0;
}



body.dark-mode .podium-card {
    border-radius: 20px;
    padding: 10px 5px;
    text-align: center;
    position: relative;
    cursor: pointer;
    border: solid 0px #d8f9fd;
    background-blend-mode: overlay, overlay, overlay, overlay, overlay, normal;
    overflow: hidden;
    display: inline-block;
}



 
body.dark-mode  .list-rank {
    font-weight: 800;
    font-size: 16px;
    color: #ffffff;
    width: 30px;
    height: 30px;
    background: #525b7463;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}


body.dark-mode .bot-message {
    background: linear-gradient(117deg, #effaff, #e9ffea, #fff1db);
    border-color: #98d4ff;
	color: #000000;
}





body.dark-mode div#mprofilemenu {
    background: #1d232a;
    border-color: #98d4ff;
    color: #ffffff;
}



body.dark-mode .cards-wrapper {
    display: flex;
    gap: 10px;
    justify-content: space-around;
    align-items: stretch;
    width: 100%;
    margin-bottom: 10px;
    border-bottom: solid 5px #1f262e;
    padding-bottom: 10px;
}



body.dark-mode .modal_selected {
    background: rgb(117 132 149);
    border: solid 2px #1b1723;
    color: #ffffff;
    box-shadow: inset #4f657d 1px 1px 10px 1px;
    border-radius: 10px;
}




body.dark-mode .card-section {

  border: solid 1px #000000;

}


body.dark-mode .modal_menu ul li {
	
 border: solid 1px #758495;

}