/**========================================================================
* ?                                ABOUT
* @author         :  Habs
* @email          :  hen.kraken@gmail.com
* @store          :  https://habsdesigns.shop/
* @product        :  SanValentine
* @version        :  1.0
*========================================================================**/

:root {
    --val-hot: #ff3158;
    --val-rose: #e93a6b;
    --val-wine: #8b0f2b;
    --val-burgundy: #3a0d16;
    --val-char: #0c0a0c;
    --val-char-2: #12070c;
    --val-blush: #ffd6de;
    --val-ink: #fff3f6;
}

/* General colors */
a {
    color: var(--val-blush);
}

body {
    font-family: 'Roboto', sans-serif;
    color: #fff6f8;
    background: #0c060a !important;
    position: relative;
    z-index: 0;
}

/* Global Background Rotation on Body */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(rgba(12, 6, 10, .45), rgba(12, 6, 10, .70)), url('./images/ChatSV1.jpg') center/cover no-repeat;
    animation: fadeImg1 9s infinite ease-in-out;
    z-index: -3;
}

body::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(12, 6, 10, .45), rgba(12, 6, 10, .70)), url('./images/ChatSV2.jpg') center/cover no-repeat;
    animation: fadeImg2 9s infinite ease-in-out;
    z-index: -2;
}

body {
    background-image: linear-gradient(rgba(12, 6, 10, .45), rgba(12, 6, 10, .70)), url('./images/ChatSV3.jpg') !important;
}

button {
    background: transparent;
    color: #fff;
}

input,
textarea,
.post_input_container {
    font-family: 'Roboto', sans-serif, 'FontAwesome';
    background: #1a0c1257;
    color: #ffdde4;
    border: 1px solid #ff7a98 !important;
}

.setdef {
    color: #fff;
}

#main_logo,
.chat_head_logo {
    filter: none !important;
}

/* Item styles */
.bback {
    background: rgba(0, 0, 0, 0.14);
}

.bbackb {
    background: rgba(0, 0, 0, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.bhover:hover,
.bhoverr:hover {
    background: rgba(233, 58, 107, 0.12);
}

.bbackhover {
    background: rgba(255, 255, 255, 0.06);
}

.bbackhover:hover {
    background: rgba(255, 255, 255, 0.10);
}

.bbackhoverb {
    background: rgba(0, 0, 0, 0.06);
}

.bbackhoverb:hover {
    background: rgba(0, 0, 0, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.blisting {
    border-bottom: 1px solid #471c31;
}

.blisting:hover {
    background: rgba(233, 58, 107, 0.10);
}

.blist {
    border-bottom: 1px solid #2a1821;
}

.back_ptop {
    background: #1c0d14;
    color: #ffeef4;
}

.bpmenu:hover {
    background: rgba(255, 214, 222, 0.12);
}

.bsub {
    background: rgba(255, 214, 222, 0.06);
}

.bsub:hover {
    background: rgba(255, 214, 222, 0.12);
}

.bmenu,
.submenu {
    border-bottom: 1px solid #3b2029;
}

.bmenu:hover,
.submenu:hover {
    background: rgba(233, 58, 107, 0.08);
}

.bshadow,
.page_element,
.float_menu,
.btnshadow,
.pboxed {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.bselected,
.rselected {
    background: rgba(255, 214, 222, 0.12);
}

.pselected {
    color: var(--val-blush);
}

.cselected,
.liked {
    background: rgba(255, 255, 255, 0.06);
}

.pag_btn {
    background: rgba(0, 0, 0, .18);
    color: #ffe8ee
}

.pagselected,
.pag_btn:hover {
    background: rgba(0, 0, 0, .26)
}

.gtag {
    background: var(--val-wine);
    border: 1px solid rgba(255, 255, 255, .08)
}

.bborder {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tborder {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lborder,
.ppanel {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.rborder {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.fborder {
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.float_top,
.float_ctop {
    border-bottom: 1px solid #3b2029;
}

/* Header/Footer */
.bhead,
.bfoot {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 100% at 50% -30%, rgba(233, 58, 107, 0.10), transparent 55%),
        linear-gradient(180deg, #2d1420 0%, #1a0c13 55%, #12070c 100%);
    color: var(--val-blush);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.55),
        0 6px 16px rgba(0, 0, 0, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 2;
}

.bhead::before,
.bhead::after {
    content: none !important;
}

#chat_head {
    position: relative;
    z-index: 3;
    height: 52px;
}

#chat_head .btable {
    height: 100%;
}

#chat_head .bcell_mid {
    vertical-align: middle;
}

#chat_head .head_option,
#chat_head .show_menu,
#chat_head .chat_head_logo {
    position: relative;
    z-index: 4;
    margin: 0;
    height: 100%;
}

#chat_head .head_option .btable,
#chat_head .show_menu .btable {
    height: 100%;
}

#chat_head .head_option .bcell_mid,
#chat_head .show_menu .bcell_mid {
    height: 100%;
    display: flex;
    align-items: center;
}

#chat_head i,
#chat_head .fa,
#chat_head .fa-solid,
#chat_head .fa-regular {
    line-height: 1;
    top: 0;
    transform: translateY(0);
}

/* Twinkle Effect */
@keyframes twinkle {

    0%,
    100% {
        opacity: .75
    }

    50% {
        opacity: 1
    }
}

.bfoot::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    background:
        radial-gradient(circle, #ff3158 2px, transparent 3px) 8px 50%/24px 10px repeat-x,
        radial-gradient(circle, #e93a6b 2px, transparent 3px) 20px 50%/24px 10px repeat-x,
        radial-gradient(circle, #ffd6de 2px, transparent 3px) 0 50%/24px 10px repeat-x,
        radial-gradient(circle, #ff9bb7 2px, transparent 3px) 12px 50%/24px 10px repeat-x;
    filter: drop-shadow(0 0 3px rgba(255, 190, 205, .45));
    animation: twinkle 2.6s ease-in-out infinite;
    opacity: .95;
    pointer-events: none;
    z-index: 1;
}

/* Sidebar */
.bsidebar {
    position: relative;
    color: var(--val-blush);
    background:
        radial-gradient(80% 100% at 0% 50%, rgba(233, 58, 107, 0.10), transparent 55%),
        linear-gradient(180deg, rgba(35, 16, 26, 0.7) 0%, rgba(23, 10, 17, 0.7) 55%, rgba(18, 7, 12, 0.7) 100%);
    box-shadow:
        inset -1px 0 0 rgba(255, 255, 255, 0.05),
        2px 0 14px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
}

.bsidebar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, transparent, var(--val-blush), transparent);
    opacity: .66;
    pointer-events: none;
}

.bsidebar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.28));
}

.modal_top,
.pro_top {
    background: var(--val-char-2);
    color: var(--val-blush)
}

.foot {
    background: var(--val-char-2);
    color: var(--val-blush)
}

/* Backgrounds */
.backglob {
    position: relative;
    z-index: 0;
    background: transparent !important;
    overflow: hidden;
}

.back_priv,
.back_panel,
.back_modal,
.page_element {
    background: rgba(39, 15, 26, 0.7) !important;
    backdrop-filter: blur(3px);
}

.back_menu {
    background: rgba(18, 7, 12, 0.7) !important;
    backdrop-filter: blur(8px);
}

.back_pmenu {
    background: rgba(18, 7, 12, 0.7) !important;
    color: #fff;
    backdrop-filter: blur(8px);
}

.back_box {
    background: rgba(18, 7, 12, 0.7) !important;
    backdrop-filter: blur(8px);
}

.back_input {
    background: rgba(18, 7, 12, 0.7) !important;
    backdrop-filter: blur(8px);
}

.back_quote {
    background: var(--val-rose);
    color: #280712;
}

/* Theme colors */
.theme_color {
    color: var(--val-ink)
}

.default_color {
    color: var(--val-char);
}

.error {
    color: #ff4a67;
}

.success {
    color: #86e6b3;
}

.warn {
    color: var(--val-blush);
}

/* Buttons */
.theme_btn,
.back_theme {
    background: var(--val-rose);
    color: #fff
}

.default_btn,
.defaultd_btn,
.back_default {
    background: #3a1e2a;
    color: #fff;
}

.ok_btn {
    background: #da84a5;
    color: #7f245a;
}

.warn_btn {
    background: var(--val-blush);
    color: #281015;
}

.delete_btn {
    background: #d93452;
    color: #fff;
}

.send_btn {
    position: relative;
    padding: 15px 20px;
    border: none;
    background: rgba(233, 58, 107, 0.16);
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.35);
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: background .3s ease, transform .3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.send_btn::before,
.send_btn::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.send_btn::after {
    background: linear-gradient(120deg, transparent, rgba(255, 214, 222, .60), transparent);
    transform: translateX(-100%);
    transition: transform .6s ease-in-out;
}

.send_btn:hover::after {
    transform: translateX(100%);
}

.send_btn::before {
    border: 1px solid rgba(233, 58, 107, .65);
    border-radius: inherit;
}

.send_btn .fa-paper-plane {
    color: var(--val-blush);
    font-size: 20px;
    z-index: 1;
    transition: transform .3s ease;
}

.send_btn:hover .fa-paper-plane {
    transform: scale(1.1);
}

.send_btn i[class^="fa"],
.send_btn i[class*=" fa"],
.send_btn span[class^="fa"],
.send_btn span[class*=" fa"] {
    text-shadow: 1px 1px 0 #000, 2px 2px 0 #2b1621, 3px 3px 0 #000;
}

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

.chat_system {
    color: #ffe8ef;
}

.offline {
    opacity: 0.5;
}

.menui,
.subi {
    color: var(--val-blush);
}

.reply_item {
    background: #201019;
}

.main_post_item {
    color: #ffdce5;
}

.input_item {
    color: var(--val-blush);
}

.target_private,
.hunt_quote {
    color: #fff;
    background: #5b2a36;
}

.hunter_private,
.targ_quote {
    color: #fff;
    background: var(--val-wine);
}

.cquote {
    background: rgba(18, 7, 12, .86);
    color: #ffeef3;
}

.tab_menu {
    background: #3a1b28;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.tab_selected {
    background: rgba(255, 214, 222, 0.14);
}

.modal_mback {
    background: rgba(0, 0, 0, 0.16);
}

.modal_mborder {
    border-bottom: 1px solid #2a1821;
}

.modal_selected {
    background: rgba(255, 214, 222, 0.14);
}

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

/* Chat logs */
.mbubble {
    background: rgba(255, 255, 255, 0.16);
}

/* Topic Styling based on Valentine Theme */
.topic_log {
    background-image: url('./topic.jpg');
    background-size: cover;
    background-position: center center;
	opacity: 0.5;

    border: 2px solid #ff9bb7;
    color: #ffffff;

    text-shadow: 1px 1px 0 #000,
        2px 2px 0 #2b1621,
        3px 3px 0 #000;
    font-weight: 1000;

    margin: 5px auto;
    border-radius: 12px;
    width: 95%;
    max-width: 800px;

    box-shadow:
        0 0 10px rgba(255, 155, 183, 0.62),
        0 8px 24px rgba(0, 0, 0, 0.35),
        inset 0 1px 2px rgba(255, 155, 183, 0.00);
}

/* Match text shadows inside topic */
.topic_log i[class^="fa"],
.topic_log i[class*=" fa"],
.topic_log span[class^="fa"],
.topic_log span[class*=" fa"] {
    text-shadow: 1px 1px 0 #000, 2px 2px 0 #2b1621, 3px 3px 0 #000 !important;
}

/* Topic Icon specifically using topic.jpg */
.topic_icon {
    width: 50px;
    height: 50px;
    position: relative;
    animation: float 3s ease-in-out infinite;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('./images/topic.jpg');
    -webkit-mask-image: url('./images/topic.jpg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('./images/topic.jpg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    overflow: hidden;
    border-radius: 50%;
    filter: drop-shadow(0 0 8px rgba(255, 235, 59, 0.6)) drop-shadow(0 0 12px rgba(33, 150, 243, 0.4));
}

.topic_icon::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -75%;
    width: 200%;
    height: 200%;
    background: linear-gradient(120deg,
            rgba(255, 235, 59, 0.2) 0%,
            rgba(33, 150, 243, 0.5) 50%,
            rgba(255, 235, 59, 0.2) 100%);
    transform: rotate(25deg);
    animation: glassShimmer 2.5s ease-in-out infinite;
    pointer-events: none;
    filter: blur(4px);
}

@keyframes glassShimmer {
    0% {
        transform: translateX(-100%) rotate(25deg);
    }

    100% {
        transform: translateX(100%) rotate(25deg);
    }
}

.tpicon {
    display: none;
}



/* ========================================================================
   SANVALENTINE SMOOTH CROSS-FADE BACKGROUNDS
   ======================================================================== */

@keyframes fadeImg1 {

    0%,
    28% {
        opacity: 1;
    }

    33.3%,
    94.4% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeImg2 {

    0%,
    27.7% {
        opacity: 0;
    }

    33.3%,
    61.1% {
        opacity: 1;
    }

    66.6%,
    100% {
        opacity: 0;
    }
}

@keyframes fadeImg3 {

    0%,
    61.1% {
        opacity: 0;
    }

    66.6%,
    94.4% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Chat Background Container (Transparent to show global) */
.back_chat {
    background: transparent !important;
    position: relative;
    z-index: 0;
}

#chat_right,
#chat_right_data {
    position: relative;
    background: #180b1154 !important;
}

#chat_right::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('./topic.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: -1;
}

/* Ensure the layers are under the content */
.back_chat>* {
    position: relative;
    z-index: 1;
}

/* Login Page Smooth Transitions */
#intro_top {
    position: relative;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%), #000 !important;
    overflow: hidden;
    z-index: 0;
}

#intro_top::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%), url('./images/loginSV1.jpg') center/cover no-repeat;
    animation: fadeImg1 9s infinite ease-in-out;
    z-index: -2;
}

#intro_top::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%), url('./images/loginSV2.jpg') center/cover no-repeat;
    animation: fadeImg2 9s infinite ease-in-out;
    display: block !important;
    z-index: -1;
}

/* Base image */
#intro_top {
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%), url('./images/loginSV3.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Ensure login form is on top */
#intro_top>* {
    position: relative;
    z-index: 10;
}

.back_chat>* {
    position: relative;
    z-index: 1;
}

/* Remove background logo overlay */
.back_chat::after {
    display: none !important;
}

/* Floating sparkle overlay */
#global_chat {
    position: relative;
}

#global_chat::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(circle at 20% 10%, rgba(255, 155, 183, .40) 2px, transparent 3px),
        radial-gradient(circle at 80% 20%, rgba(255, 49, 88, .30) 2px, transparent 3px),
        radial-gradient(circle at 60% 0%, rgba(255, 214, 222, .30) 2px, transparent 3px),
        radial-gradient(circle at 10% 50%, rgba(233, 58, 107, .28) 1.6px, transparent 3px),
        radial-gradient(circle at 90% 60%, rgba(255, 105, 140, .33) 2.2px, transparent 3px),
        radial-gradient(circle at 40% 80%, rgba(255, 155, 183, .28) 1.6px, transparent 3px),
        radial-gradient(circle at 70% 90%, rgba(255, 214, 222, .32) 1.8px, transparent 3px);
    background-size: 1800px 1400px;
    animation: heartsFall 18s linear infinite;
    mix-blend-mode: screen;
}

/* Elegant blush line under header */
#global_chat::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    background:
        radial-gradient(circle, #ff3158 2px, transparent 3px) 8px 50%/24px 10px repeat-x,
        radial-gradient(circle, #ffd6de 2px, transparent 3px) 0 50%/24px 10px repeat-x;
    filter: drop-shadow(0 0 3px rgba(255, 190, 205, .45));
    animation: twinkle 2.8s ease-in-out infinite;
    opacity: .95;
    pointer-events: none;
    z-index: 2;
}

@keyframes cupidFloat {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: .35;
    }

    50% {
        transform: translate(10px, -10px) scale(1.03);
        opacity: .5;
    }

    100% {
        transform: translate(0, 0) scale(1);
        opacity: .35;
    }
}

#chat_head::before {
    content: "";
    position: fixed;
    left: 10px;
    bottom: 6px;
    width: 140px;
    height: 110px;
    pointer-events: none;
    z-index: 100;
    background: no-repeat left bottom/contain url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?>\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'>\
  <defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>\
    <stop offset='0%' stop-color='%23ff9bb7'/><stop offset='100%' stop-color='%23e93a6b'/>\
  </linearGradient></defs>\
  <path d='M160 30c-10 0-18 8-18 18 0 5 2 9 5 12l-15 8c-5-6-13-10-22-10-15 0-28 10-31 24l-20 4c-6 1-10 6-10 12 0 7 6 12 13 12h5l-9 9c-3 3-3 8 0 11 3 3 8 3 11 0l21-21 17-3c4 7 12 12 21 12 13 0 24-10 25-22l16-8c3 3 8 5 12 5 10 0 18-8 18-18s-8-18-18-18zM94 78c7 0 12 5 12 12s-5 12-12 12-12-5-12-12 5-12 12-12z' fill='url(%23g)' fill-opacity='.65'/>\
  <path d='M200 86l28-6-10 10 10 10-28-6' fill='%23ffd6de' fill-opacity='.7'/>\
  <circle cx='210' cy='118' r='3' fill='%23ff3158' fill-opacity='.6'/>\
  <circle cx='182' cy='124' r='2.5' fill='%23ffd6de' fill-opacity='.7'/>\
</svg>");
    animation: cupidFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45));
}

.sysmenu,
.float_menu {
    z-index: 10000 !important;
}

/* Misc */
html,
body {
    overflow-x: hidden;
}

.bprogress {
    background: #86e6b3;
    color: #06110b;
}

.bnotify {
    background: var(--val-hot);
    color: #fff;
}

.foot_notify,
.head_notify {
    border: 1px solid var(--val-blush);
}

.sub_date,
.sub_chat,
.sub_priv {
    color: var(--val-blush);
}

.sub_text,
.list_mood {
    color: #ffe4ea
}

.plikes {
    background-color: rgba(100, 100, 100, 0.28);
    color: #fff;
}

.bspin {
    color: rgba(255, 255, 255, 0.32);
}

.my_notice {
    color: #1a0c12;
    background: var(--val-blush);
}

.system_text {
    background: #f1efef;
    color: #3a222b;
}

.back_page {
    background: #160b12;
    color: #fff;
}

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

.boom_slider .ui-widget-content {
    background: #ffe6f1;
}

.boom_slider .ui-state-default,
.boom_slider .ui-state-active {
    background: var(--val-blush) !important;
}

.boom_slider .ui-slider-range {
    background: var(--val-blush);
}

.selectboxit-list,
.selectboxit-btn {
    background-color: var(--val-char-2);
    color: var(--val-ink);
    border: 1px solid var(--val-blush) !important;
}

.selectboxit-list .selectboxit-focus .selectboxit-option-anchor {
    background-color: var(--val-char);
    color: var(--val-blush);
}

.selectboxit-default-arrow {
    border-top: 4px solid var(--val-blush);
}

.selectboxit-btn.selectboxit-enabled:hover,
.selectboxit-btn.selectboxit-enabled:focus,
.selectboxit-btn.selectboxit-enabled:active {
    background: var(--val-char);
    color: #fff;
}

.selectboxit-options {
    background: var(--val-char-2);
}

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

.user_count{padding:6px;background:rgb(199,61,61,.15);border-radius:4px;text-align: center;}
.dlist-rank {display: inline-block;height: 11px;width: auto;margin: 0 3px 0 0;animation: rotate-animation 5s infinite linear;}