/* General Styles with Transitions */
a {
    color: #ff4d4d;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
a:hover {
    color: #ff6666;
    text-shadow: 0 0 8px #ff4d4d;
}
body {
    background: linear-gradient(180deg, #1c1c1c, #0d0d0d);
    color: #fff;
    transition: background 0.5s ease, color 0.5s ease;
}
button {
    background: #1c1c1c;
    color: #fff;
    border: 1px solid #333;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
button:hover {
    background: #262626;
    transform: scale(1.05);
}

/* Inputs and Textareas */
input, textarea, .post_input_container {
    background: #262626;
    border: 1px solid #333 !important;
    color: #fff;
    transition: border-color 0.3s ease, background 0.3s ease;
}
input:focus, textarea:focus, .post_input_container:focus {
    border-color: #ff4d4d;
    background: #1c1c1c;
}

/* Menu Items */
.sub_menu_item, .fmenu_item, .avitem {
    border-bottom: 10px solid #333;
    background: #262626;
    color: #fff;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.sub_menu_item:hover, .fmenu_item:hover, .avitem:hover {
    background: #333;
    color: #ff6666;
    border-bottom-color: #ff4d4d;
}

/* Page Menu */
.page_menu_item {
    border-bottom: 1px solid #333;
    transition: background 0.3s ease, color 0.3s ease;
}
.page_menu_item:hover {
    background: #333;
    color: #fff;
}
.page_selected {
    color: #ff4d4d !important;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.page_selected:hover {
    text-shadow: 0 0 8px #ff4d4d;
}

/* Animations for Headers and Modals */
.background_header {
    border-bottom: 2px solid #ff4d4d;
    animation: pulseBorder 2s infinite;
}
.modal_in {
    border: 2px solid #ff4d4d;
    animation: fadeIn 0.8s ease-in-out;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes pulseBorder {
    0%, 100% {
        border-color: #ff4d4d;
    }
    50% {
        border-color: #ff6666;
    }
}

/* Buttons */
.theme_btn, .default_btn, .ok_btn, .warn_btn, .delete_btn, .sub_btn {
    transition: background 0.3s ease, transform 0.2s ease;
}
.theme_btn:hover {
    background: #cc0000;
    transform: translateY(-2px);
}
.ok_btn:hover {
    background: #45a049;
    transform: translateY(-2px);
}
.warn_btn:hover {
    background: #ffa31a;
    transform: translateY(-2px);
}
.delete_btn:hover {
    background: #e60000;
    transform: translateY(-2px);
}
.sub_btn:hover {
    background: #666;
    transform: translateY(-2px);
}

/* Slider Animation */
.boom_slider .ui-widget-content {
    background: #b32424;
    animation: gradientSlide 3s infinite;
}
.boom_slider .ui-state-default {
    background: #ff4d4d !important;
    transition: background 0.3s ease, transform 0.2s ease;
}
.boom_slider .ui-state-default:hover {
    transform: scale(1.2);
}
@keyframes gradientSlide {
    0%, 100% {
        background: #b32424;
    }
    50% {
        background: #ff4d4d;
    }
}

/* File and Music Upload */
.file_color, .file_color a {
    background: #b32424;
    color: #fff;
    transition: background 0.3s ease, transform 0.2s ease;
}
.file_color:hover, .file_color a:hover {
    background: #ff4d4d;
    transform: translateY(-3px);
}
.audio_progress {
    background: #fff;
    transition: width 0.3s ease;
}
.audio_ball {
    background: #ff4d4d;
    transition: transform 0.3s ease;
}
.audio_ball:hover {
    transform: scale(1.2);
}

/* Shadow Effects */
.add_shadow, .page_element, #private_box, .page_menu_wrapper, .chat_side_panel, #side_menu, .sub_menu, .fmenu {
    box-shadow: 0 0 8px 2px #ff4d4d;
    transition: box-shadow 0.3s ease;
}
.add_shadow:hover {
    box-shadow: 0 0 12px 3px #ff6666;
}

/* User and System Text */
.user {
    color: #ff6666;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.user:hover {
    text-shadow: 0 0 8px #ff6666;
}
.chat_system {
    color: #ff4d4d;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.chat_system:hover {
    text-shadow: 0 0 8px #ff4d4d;
}