/* =================================================================== */
/* FANCON JUNCTION MASTER STYLESHEET                                   */
/* =================================================================== */

/* ------------------------------------------------------------------- */
/* 1. Root Variables & Global Styles
/* ------------------------------------------------------------------- */
:root { 
    --black: #0A0A0A; 
    --dark-gray: #121212; 
    --charcoal: #1A1A1A; 
    --light-charcoal: #2C2C2C; 
    --off-white: #EAEAEA; 
    --yellow: #FADE4B; 
    --pink: #F000B8; 
    --blue: #00BFFF;
    --blue2: #0078A0; 
    --purple: #9D4EDD;
    --purple2: #713A9E;
    --purple3: #C98EF9;
    --purple4: #4A1377;
    --text-muted-color: #808080;
    --text-muted-color2: #939393;
    --text-muted: #808080;
    --red: #932A2A;
    
    --fcj-bg:#0b0f16;
    --fcj-card:#121826;
    --fcj-soft:rgba(0,0,0, 0.2);
    --fcj-border:rgba(255, 255, 255, 0.1);
    --fcj-accent-pink:#ff5ea8;
    --fcj-accent-blue:#4da3ff;
    --fcj-accent-yellow:#ffd166;
}

body { 
    background-color: var(--dark-gray); 
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="%231a1a1a" fill-opacity="0.4"%3E%3Cpath d="M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); 
    color: var(--off-white); 
    font-family: 'Inter', sans-serif; 
}

h1, h2, h3, h4, h5, h6 { 
    font-family: 'Poppins', sans-serif; 
    font-weight: 700; 
}

a { 
    color: var(--blue); 
    text-decoration: none; 
} 

a:hover { 
    color: var(--off-white); 
}

.text-muted { 
    color: var(--text-muted-color) !important; 
}

/* ------------------------------------------------------------------- */
/* 2. Layout & Shared Components
/* ------------------------------------------------------------------- */

/* --- Main Navigation --- */
.main-nav { 
    background-color: rgba(10, 10, 10, 0.75); 
    backdrop-filter: blur(12px); 
    border-bottom: 1px solid var(--light-charcoal); 
    padding: 0.5rem 0; 
    position: sticky; 
    top: 0; 
    z-index: 1050; 
}
.nav-container { display: flex; align-items: center; justify-content: space-between; } 
.nav-links { display: flex; gap: 0.5rem; }
.main-nav .nav-link { padding: 0.75rem 1rem; color: var(--text-muted-color); font-weight: 600; font-size: 0.9rem; border-radius: 6px; position: relative; transition: all 0.2s ease-in-out; text-decoration: none; }
.main-nav .nav-link:hover { color: var(--off-white); } 
.main-nav .nav-link.active { color: var(--yellow); } 
.main-nav .nav-link.active::after { content: ''; position: absolute; bottom: 5px; left: 1rem; right: 1rem; height: 2px; background-color: var(--yellow); box-shadow: 0 0 8px var(--yellow); }

.nav-logo { width: 90px; }

/* --- Page Headers --- */
.page-header-dynamic { padding: 4rem 0; text-align: center; }
.page-header-dynamic h1 { font-size: 2.5rem; }
.page-header-dynamic.with-bg { padding: 6rem 0; position: relative; background-color: var(--black); overflow: hidden; }
.page-header-dynamic .bg-image { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.5); transform: scale(1.1); }
.header-content { position: relative; z-index: 2; }
.page-header-dynamic.with-bg h1 { font-size: 3.5rem; text-shadow: 0 2px 10px #000; }

/* --- General Content Styles --- */
.content-box { background-color: var(--charcoal); border-radius: 8px; padding: 1.5rem; border: 1px solid var(--light-charcoal); }
.section-title { color: var(--yellow); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--light-charcoal); }
.mega-footer { background-color: var(--black); border-top: 1px solid var(--light-charcoal); padding: 4rem 0 2rem 0; }

/* ------------------------------------------------------------------- */
/* 3. Forms & Buttons
/* ------------------------------------------------------------------- */
.form-label { font-weight: 600; color: var(--text-muted-color); }
.form-text { color: var(--text-muted-color2); font-size: 0.75rem; font-style: italic; }
.form-control, .form-select { background-color: var(--dark-gray); border: 1px solid var(--light-charcoal); color: var(--off-white); border-radius: 6px; padding: 0.75rem 1rem; }
.form-control:focus, .form-select:focus { background-color: var(--dark-gray); border-color: var(--blue); box-shadow: 0 0 10px rgba(0, 191, 255, 0.2); color: var(--off-white); }
.form-control[readonly] { background-color: var(--black); cursor: not-allowed; }

.btn { border-radius: 6px; font-weight: 600; padding: 0.5rem 1rem; transition: all 0.2s ease; }
.btn-icon { display: inline-flex; align-items: center; gap: 0.5rem; }
.btn-yellow { background-color: var(--yellow); color: var(--black); border: none; }
.btn-yellow:hover { background-color: #ffe766; }
.btn-blue { background-color: var(--blue); color: var(--black); border: none; }
.btn-blue:hover { background-color: #40cfff; }
.btn-outline-secondary { color: var(--text-muted-color); border-color: var(--light-charcoal); }
.btn-outline-secondary:hover, .btn-outline-secondary.active { background-color: var(--light-charcoal); color: var(--off-white); border-color: var(--light-charcoal); }
.btn-danger-outline { color: var(--pink); border-color: var(--pink); background: transparent; }
.btn-danger-outline:hover { background-color: var(--pink); color: var(--off-white); }

.btn-pink{
    background-color: #fa6690;
    color: var(--off-white);
}

.btn-pink:hover{
    background-color: #FF7FA3;
    border-color: #fa6690;
    color: var(--off-white);
}

.btn-pink:active,
.btn-pink:focus,
.btn-pink.active{
    background-color: #A82B4C !important;
    border-color: #fa6690 !important;
    color: var(--off-white);
}

.btn-secondary{
    background-color: #24273e;
    color: var(--off-white);
    border-color: #24273e;
}

.btn-secondary:hover{
    background-color: #33364F;
    border-color: #24273e;
    color: var(--off-white);
}

.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary.active{
    background-color: #1C203D !important;
    border-color: #24273e !important;
    color: var(--off-white);
}

.btn-outline-secondary{
    color: var(--off-white);
    border-color: rgba(0,0,0, 0.8) !important;
    background-color: rgba(0,0,0, 0.23) !important;
}

.btn-outline-secondary:hover
{
    background-color: rgba(0,0,0, 0.8) !important;
    border-color: rgba(0,0,0, 0.8) !important;
    color: var(--off-white) !important;
}

.btn-outline-secondary:active,
.btn-outline-secondary:focus,
.btn-outline-secondary.active{
    background-color: rgba(0,0,0, 1) !important;
    border-color: rgba(0,0,0, 1) !important;
    color: var(--off-white) !important;
}

.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.form-switch .form-check-input { width: 2.5em; height: 1.25em; }
.form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }

/* ------------------------------------------------------------------- */
/* 4. Page Specific Styles
/* ------------------------------------------------------------------- */

/* --- Profile Page --- */
.header-photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid var(--charcoal); box-shadow: 0 0 15px rgba(0,0,0,0.5); }
.user-rank { font-size: 0.9rem; font-weight: 700; padding: 0.4rem 1rem; border-radius: 50px; text-transform: uppercase; background-color: var(--purple); color: var(--off-white); }
.data-list li { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--light-charcoal); }
.data-list li:last-child { border-bottom: none; }
.data-list .key { color: var(--text-muted-color); }
.data-list .value { font-weight: 500; text-align: right; }
.activity-feed { list-style: none; padding: 0; }
.activity-item { display: flex; gap: 1rem; padding: 1rem; border-radius: 8px; transition: background-color 0.2s ease; }
.activity-item:not(:last-child) { border-bottom: 1px solid var(--light-charcoal); }
.activity-icon { font-size: 1.5rem; }
.activity-item .time { font-size: 0.8rem; }
.progress-circle { --p: 75; --b: 12px; --c: var(--pink); width: 120px; aspect-ratio: 1; position: relative; display: inline-grid; place-content: center; font-size: 1.5rem; font-weight: bold; animation: p 1s 0.5s both; }
.progress-circle:before { content: ""; position: absolute; border-radius: 50%; inset: 0; background: radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--p)*1%),#0000 0); -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b))); mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b))); }
@keyframes p { from{ --p: 0; } }

/* --- Forum Pages --- */
.forum-category { background-color: var(--charcoal); border-radius: 8px; border: 1px solid var(--light-charcoal); }
.forum-category-header { background-color: var(--light-charcoal); padding: 1rem 1.5rem; border-bottom: 1px solid var(--light-charcoal); border-radius: 8px 8px 0 0; }
.forum-category-header h3 { font-size: 1.25rem; color: var(--yellow); margin-bottom: 0; }
.subforum-list { list-style: none; padding: 0; margin: 0; }
.subforum-item { display: flex; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--light-charcoal); }
.subforum-item:last-child { border-bottom: none; }
.subforum-icon { font-size: 1.5rem; margin-right: 1.5rem; }
.subforum-icon.unread { color: var(--purple); }
.subforum-icon.read { color: var(--text-muted-color); }
.subforum-icon.locked { color: var(--yellow); }
.subforum-icon.hidden { color: var(--pink); }
.subforum-title { font-weight: 600; color: var(--off-white); }
.hot-topic-icon { color: var(--pink); font-size: 1rem; margin-left: 0.5rem; }
.subforum-description { font-size: 0.85rem; }
.subforum-stats { text-align: center; color: var(--text-muted-color); font-size: 0.9rem; flex-shrink: 0; width: 120px; }
.last-post-info { flex-shrink: 0; width: 250px; text-align: right; font-size: 0.85rem; }
.last-post-info .username { font-weight: 600; }
.sub-subforum-list { list-style: none; padding: 0.75rem 0 0 0; margin: 0.75rem 0 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; border-top: 1px solid var(--light-charcoal); }
.sub-subforum-list li a { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 500; color: var(--text-muted-color); }
.sub-subforum-list li a:hover { color: var(--blue); }
.sub-subforum-list .subforum-icon { font-size: 1rem; margin-right: 0; }

/* --- View Thread Page --- */
.post-card { background-color: var(--charcoal); border: 1px solid var(--light-charcoal); border-radius: 8px; }
.post-user-info { background-color: var(--light-charcoal); padding: 1.5rem; text-align: center; }
.post-user-info img { width: 90px; height: 90px; border-radius: 50%; border: 3px solid var(--charcoal); }
.post-user-info h5 { word-break: break-word; }
.post-content-area { padding: 1.5rem; }
.post-meta { font-size: 0.9rem; }
.post-body { margin-top: 1.5rem; line-height: 1.7; }
.post-body blockquote { border-left: 4px solid var(--purple); padding: 0.5rem 1rem; margin: 1rem 0; background-color: var(--dark-gray); border-radius: 0 8px 8px 0; }
.blockquote-header { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem; }
.blockquote-header a { color: var(--yellow); }
.post-signature { border-top: 1px solid var(--light-charcoal); margin-top: 1.5rem; padding-top: 1rem; font-size: 0.85rem; font-style: italic; }
.post-actions { border-top: 1px solid var(--light-charcoal); margin-top: 1.5rem; padding-top: 1rem; display: flex; justify-content: space-between; align-items: center; }
.action-btn { background: none; border: none; color: var(--text-muted-color); font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 0.25rem; }
.action-btn:hover { color: var(--off-white); }
.reactions-summary { display: flex; gap: 0.5rem; }
.reaction-badge { background-color: var(--light-charcoal); padding: 0.25rem 0.6rem; border-radius: 50px; font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 0.3rem; }
.reaction-badge i { font-size: 1rem; }
.text-pink { color: var(--pink); }
.text-yellow { color: var(--yellow); }
.dropdown-item i { margin-right: 0.5rem; }
.ql-toolbar { border-radius: 8px 8px 0 0; background: var(--dark-gray); border: 1px solid var(--light-charcoal) !important; }
.ql-container { border-radius: 0 0 8px 8px; background: var(--dark-gray); border: 1px solid var(--light-charcoal) !important; color: var(--off-white); }
.ql-editor { min-height: 150px; }
.ql-snow .ql-stroke { stroke: var(--text-muted-color); }
.ql-snow .ql-picker-label { color: var(--text-muted-color); }
.ql-snow .ql-picker-options { background-color: var(--charcoal); border-color: var(--light-charcoal); }

/* --- Pagination --- */
.pagination { justify-content: center; }
.page-link { background-color: var(--charcoal); border: 1px solid var(--light-charcoal); color: var(--text-muted-color); font-weight: 600; border-radius: 6px !important; transition: all 0.2s ease; margin: 0 0.25rem; }
.page-link:hover { background-color: var(--light-charcoal); color: var(--off-white); border-color: var(--blue); }
.page-item.active .page-link { background-color: var(--blue); border-color: var(--blue); color: var(--black); box-shadow: 0 0 10px var(--blue); }
.page-item.disabled .page-link { background-color: var(--charcoal); border-color: var(--light-charcoal); color: #444; }


.page-header-dynamic { padding: 6rem 0; position: relative; background-color: var(--black); overflow: hidden; }
        .page-header-dynamic .bg-image { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.5); transform: scale(1.1); }
        .header-content { position: relative; z-index: 2; text-align: center; }
        .page-header-dynamic h1 { font-size: 3.5rem; text-shadow: 0 2px 10px #000; }
        
        .content-box { background-color: var(--charcoal); border-radius: 8px; padding: 1.5rem; border: 1px solid var(--light-charcoal); }
        .section-title { color: var(--yellow); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--light-charcoal); }
        
        .article-content p { color: var(--text-muted-color); line-height: 1.8; }
        .article-content h3 { color: var(--yellow); margin-top: 2rem; }
        
        .version-history ul { list-style: none; padding-left: 0; }
        .version-history li { border-left: 3px solid var(--light-charcoal); padding-left: 1rem; margin-bottom: 1rem; }
        .version-history .version { font-weight: 700; color: var(--off-white); }
        .version-history .date { font-size: 0.9rem; color: var(--text-muted-color); }

/* --- Mega Footer --- */
        .mega-footer { background-color: var(--black); border-top: 1px solid var(--light-charcoal); padding: 4rem 0 2rem 0; }
        .footer-logo { width: 140px; }
        .footer-links h5 { color: var(--yellow); }
        .footer-links ul { list-style: none; padding: 0; }
        .footer-links li a { color: var(--text-muted); text-decoration: none; transition: color 0.2s ease; }
        .footer-links li a:hover { color: var(--off-white); }
        .social-icons a { color: var(--text-muted); font-size: 1.5rem; transition: all 0.2s ease; }
        .social-icons a:hover { color: var(--blue); transform: translateY(-3px); }

        @media (max-width: 991.98px) {
            .nav-links { display: none !important; }
        }
        
        .btn-custom-yellow { background-color: var(--yellow); color: var(--black); border: none; padding: 0.6rem 1.25rem; border-radius: 6px; font-weight: 700; font-family: 'Poppins', sans-serif; transition: all 0.2s ease-in-out; text-decoration: none; display: inline-block; }
        .btn-custom-yellow:hover { background-color: #fff280; transform: scale(1.03); box-shadow: 0 4px 20px rgba(250, 222, 75, 0.2); }
        .btn-outline-blue { background: transparent; color: var(--blue); border: 2px solid var(--blue); padding: calc(0.6rem - 2px) calc(1.25rem - 2px); border-radius: 6px; font-weight: 700; font-family: 'Poppins', sans-serif; transition: all 0.2s ease-in-out; }
        .btn-outline-blue:hover { background-color: var(--blue); color: var(--black); box-shadow: 0 4px 20px rgba(0, 191, 255, 0.2); }

        /* --- Ken Burns Hero Slider --- */
        .hero-slider { height: 60vh; position: relative; overflow: hidden; background-color: var(--black); }
        .slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease-in-out; animation: kenburns 20s infinite; }
        .slide.no-animation { animation: none !important; }
        .slide.active { opacity: 1; }
        @keyframes kenburns { 0% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.15) translate(2%, -2%); } 100% { transform: scale(1) translate(0, 0); } }
        .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 18, 18, 1) 5%, rgba(18, 18, 18, 0.2) 100%); z-index: 1; }
        .hero-content { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 1rem; }
        .hero-content h1 { font-size: 3.5rem; color: var(--yellow); text-shadow: 0 2px 15px rgba(0,0,0,0.8); }
        .hero-content p { color: var(--off-white); font-size: 1.2rem; text-shadow: 0 1px 5px #000; max-width: 600px; margin-top: 1rem; margin-bottom: 2rem; }

        /* --- Content Styling --- */
        /* --- Content Styling --- */
        .section-header { text-align: center; margin-bottom: 3rem; }
        .section-header h2 { font-size: 2rem; color: var(--yellow); }
        .content-card.yours { border-top-color: var(--purple); }
        .content-card.live { border-top-color: var(--yellow); }
        .content-card.social { border-top-color: var(--pink); }
        .social-proof { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--light-charcoal); }
        .avatar-stack img { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--charcoal); margin-left: -10px; }
        .avatar-stack img:first-child { margin-left: 0; }
        .social-proof-text { font-size: 0.8rem; color: var(--text-muted); }
        
        .breadcrumb-nav { background-color: var(--charcoal); padding: 0.75rem 0; border-bottom: 1px solid var(--light-charcoal); }
        .breadcrumb { margin-bottom: 0; z-index: 1000; }
        .breadcrumb-item a { color: var(--text-muted-color); text-decoration: none; }
        .breadcrumb-item.active { color: var(--off-white); }
        .breadcrumb-item+.breadcrumb-item::before { color: var(--text-muted-color); }
        
        .dropdown-menu { margin: 0; padding: 0; background-color: var(--charcoal); border: 1px solid var(--light-charcoal); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 1100; overflow: hidden; }
        /* Dropdown Positioning */
        .custom-dropdown-menu { display: none; position: absolute; top: calc(100% + 15px); right: 0; background-color: var(--charcoal); border: 1px solid var(--light-charcoal); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); width: 340px; z-index: 1100; overflow: hidden; }
        .custom-dropdown-menu.show { display: block; }
        .dropdown-header { padding: 1rem; background-color: var(--light-charcoal); border-bottom: 1px solid var(--light-charcoal); }
        .dropdown-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; color: var(--off-white); text-decoration: none; }
        .dropdown-item:hover { background-color: rgba(0, 191, 255, 0.1); color: var(--blue); text-decoration: none; }
        .dropdown-item i { font-size: 1.2rem; }
        .user-card { display: flex; align-items: center; gap: 1rem; }
        .user-card img { height: 50px; width: 50px; object-fit: cover; border: 2px solid var(--purple); }
        
        .no-border{ border: 0 !important; }
        
        .reaction-card div h6{
            text-transform: uppercase;
        }
        
        .reaction-card img {
            width: 30px !important;
            height: 30px !important;
        }
        
        
        .pac-container {
            background-color: var(--charcoal); border: 1px solid var(--light-charcoal); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            z-index: 1000; /* Ensure it appears above other elements */
          }
          
          .pac-item {
            padding: 10px;
            cursor: pointer;
            border-bottom: 0 solid var(--text-muted-color);
            color: var(--text-muted-color);
            border-color: var(--text-muted-color);
          }
          
           .pac-item-query {
            font-weight: 700;
            color: var(--off-white);
          }
      
          .pac-item:hover {
            background-color: rgba(0, 191, 255, 0.1); color: var(--blue); text-decoration: none;
          }
          
          .pac-item:hover .pac-item-query{
            color: var(--yellow); text-decoration: none;
          }
          
          .pac-item-selected {
            background-color: rgba(0, 191, 255, 0.1); /* Highlight color */
          }
        
        .error-img{ width: 40%; }
        
        
        
        .event-header {
            padding: 3rem 0;
            position: relative;
            background-color: var(--black);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            background: ;
            }
        .event-header .collage-bg2{
            overflow: hidden;
            max-height: 100%;
            height: 100%;
        }
        .event-header .collage-bg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); filter: blur(5px) brightness(0.5); transform: scale(1.1); z-index: 0 !important; }
        .event-header .collage-img { width: 100%; height: 100%; object-fit: cover; z-index: 1; }
        .event-header-content { position: relative; z-index: 2; }
        
        .event-header-text{
            display: flex;
            position: relative;
            margin-left: -10px;
        }
        
        .event-logo{
            margin-top: -10px;
            height: auto !important;
            
            width: auto !important;
            
        }
        
        .event-logo img{
           max-height: 150px;
           max-width: 150px;
           object-fit: contain; /* or cover, or fill */
           background-color: rgba(0,0,0,0.3);
           
           width: auto !important;
        }
        
        .event-header h1 { font-size: 2rem; text-shadow: 0 2px 10px #000; display: inline; }
        .event-header h4 { font-size: 1.5rem; text-shadow: 0 2px 10px #000; font-weight: 600; }
        .event-header .location { font-size: 1.2rem; color: var(--off-white); font-weight: 500; text-shadow: 0 1px 5px #000; }
        .event-header .social-links a { color: var(--text-muted-color); font-size: 1.5rem; transition: all 0.2s ease; }
        .event-header .social-links a:hover { color: var(--blue); transform: scale(1.1); }
        .status-badge-lg { margin-left: 15px; box-shadow: 0 2px 10px #000;  width: auto; font-size: 0.9rem; font-weight: 700; padding: 0.4rem 1rem; border-radius: 50px; text-transform: uppercase; }

        .content-box { background-color: var(--charcoal); border-radius: 8px; padding: 1.5rem; border: 1px solid var(--light-charcoal); }
        .section-title { color: var(--yellow); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--light-charcoal); }
        
        .btn { border-radius: 6px; font-weight: 600; padding: 0.5rem 1rem; transition: all 0.2s ease; }
        .btn-group .btn { border-radius: 0; margin: 0; }
        .btn-group .btn:first-child { border-top-left-radius: 50px; border-bottom-left-radius: 50px; }
        .btn-group .btn:last-child { border-top-right-radius: 50px; border-bottom-right-radius: 50px; }
        .btn-outline-secondary { color: var(--text-muted-color); border-color: var(--light-charcoal); }
        .btn-outline-secondary:hover, .btn-outline-secondary.active { background-color: var(--light-charcoal); color: var(--off-white); border-color: var(--light-charcoal); }
        .btn-yellow { background-color: var(--yellow); color: var(--black); border: none; }
        .btn-yellow:hover { background-color: #ffe766; box-shadow: 0 0 10px var(--yellow); }
        .btn-blue { background-color: var(--blue); color: var(--black); border: none; }
        .btn-blue:hover { background-color: #40cfff; box-shadow: 0 0 10px var(--blue); }
        .btn-icon { display: inline-flex; align-items: center; gap: 0.5rem; }
        .btn-follow { color: var(--blue); border: 2px solid var(--blue); padding: calc(0.5rem - 2px) calc(1rem - 2px); border-radius: 50px; }
        .btn-follow:hover { background-color: var(--blue); color: var(--black); }
        
        .btn-follow.btn-follow-solid { color: var(--black); border: 2px solid transparent; background: var(--blue); padding: calc(0.5rem - 2px) calc(1rem - 2px); border-radius: 50px; }
        .btn-follow.btn-follow-solid:hover { background-color: var(--blue2); color: var(--black); }
        .btn-follow.btn-follow-solid:active { background-color: var(--blue2); color: #002A66; }
        
        .btn-share { background-color: var(--purple); border: 2px solid transparent; padding: calc(0.5rem - 2px) calc(1rem - 2px); border-radius: 50px; }
        .btn-share:hover { background-color: var(--purple2); color: var(--purple3); }
        .btn-share:active, .btn-share.show { background-color: var(--purple4) !important; color: var(--purple) !important; }
        
        
        
        .custom-tabs .nav-tabs { border-bottom: 1px solid var(--light-charcoal); }
        .custom-tabs .nav-link { color: var(--text-muted-color); font-weight: 600; border: none; border-bottom: 3px solid transparent; transition: all 0.2s ease; background-color: transparent; padding: 0.75rem 1.25rem; border-radius: 6px 6px 0 0; }
        .custom-tabs .nav-link:hover { color: var(--off-white); background-color: var(--light-charcoal); border-bottom: 3px solid var(--light-charcoal); }
        .custom-tabs .nav-link.active { color: var(--yellow); background-color: var(--charcoal); border-bottom-color: var(--yellow); }
        
        .guest-card { display: flex; align-items: center; gap: 1rem; background-color: var(--dark-gray); border-radius: 8px; padding: 1rem; border: 1px solid var(--light-charcoal); }
        .guest-card img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
        .guest-card .icon-text { display: flex; align-items: center; gap: 0.25rem; }
        
        .comment-item { display: flex; gap: 1rem; }
        .comment-item img { width: 40px; height: 40px; border-radius: 50%; }
        .comment-body { background-color: var(--dark-gray); padding: 1rem; border-radius: 8px; width: 100%; }
        
        .map-container { height: 250px; background-color: var(--light-charcoal); border-radius: 8px; }
        
        .pagination { justify-content: center; }
        .page-link { background-color: var(--charcoal); border: 1px solid var(--light-charcoal); color: var(--text-muted-color); font-weight: 600; border-radius: 6px !important; transition: all 0.2s ease; margin: 0 0.25rem; }
        .page-link:hover { background-color: var(--light-charcoal); color: var(--off-white); border-color: var(--blue); }
        .page-item.active .page-link { background-color: var(--blue); border-color: var(--blue); color: var(--black); box-shadow: 0 0 10px var(--blue); }
        .page-item.disabled .page-link { background-color: var(--charcoal); border-color: var(--light-charcoal); color: #444; }

        .photo-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; }
        .photo-thumbnail { cursor: pointer; border-radius: 6px; overflow: hidden; aspect-ratio: 1 / 1; }
        .photo-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; }
        .photo-thumbnail:hover img { transform: scale(1.1); }

        .meetup-card { background-color: var(--dark-gray); border-radius: 8px; padding: 1.5rem; border-left: 4px solid var(--purple); }
        .meetup-card h5 { color: var(--purple); }

        .modal-backdrop.show { opacity: 0.8; }
        .modal-content { background-color: var(--charcoal); border: 1px solid var(--light-charcoal); }
        .modal-header { border-bottom: 1px solid var(--light-charcoal); }
        .modal-footer { border-top: 1px solid var(--light-charcoal); }
        .photo-viewer-img { max-height: 80vh; width: 100%; object-fit: contain; }
        .reaction-btn { background: none; border: none; font-size: 1.5rem; color: var(--text-muted-color); transition: transform 0.2s ease; }
        .reaction-btn:hover { transform: scale(1.2); }
        
        .auth-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .auth-card {
            background-color: var(--charcoal);
            border: 1px solid var(--light-charcoal);
            border-radius: 8px;
            padding: 2rem;
            width: 100%;
            max-width: 450px;
        }
        
                /* --- Persistent Chat Bar --- */
        .chat-bar { position: fixed; bottom: 0; right: 20px; width: 300px; height: 45px; background-color: var(--charcoal); border: 1px solid var(--light-charcoal); border-bottom: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; z-index: 1000; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 600; }
        .chat-bar i { margin-right: 0.5rem; }

        /* --- Mobile Navigation --- */
        .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 65px; background-color: rgba(10, 10, 10, 0.85); backdrop-filter: blur(12px); border-top: 1px solid var(--light-charcoal); z-index: 1030; }
        .mobile-nav-links { display: flex; justify-content: space-around; align-items: center; height: 100%; }
        .mobile-nav-link { display: flex; flex-direction: column; align-items: center; color: var(--text-muted); font-size: 0.7rem; font-weight: 500; }
        .mobile-nav-link i { font-size: 1.5rem; margin-bottom: 0.2rem; }
        .mobile-nav-link.active { color: var(--yellow); }

        
        .profile-button:has(.custom-dropdown-menu.show) #profile-trigger,
        .profile-button:has(.custom-dropdown-menu.show) #profile-trigger span{
            background-color: var(--yellow);
            color: var(--black) !important;
            border: none;
            transition: all 0.2s ease-in-out;
        }
        
        .profile-button:has(.custom-dropdown-menu.show) #profile-trigger img{
            border-color: #897E00 !important;
        }
        
        .friends-button:has(.custom-dropdown-menu.show) #friends-trigger,
        .friends-button:has(.custom-dropdown-menu.show) #friends-trigger span{
            color: var(--yellow);
            border: none;
            transition: all 0.2s ease-in-out;
        }
        
        .messages-button:has(.custom-dropdown-menu.show) #messages-trigger,
        .messages-button:has(.custom-dropdown-menu.show) #messages-trigger span{
            color: var(--yellow);
            border: none;
            transition: all 0.2s ease-in-out;
        }
        
        .notifications-button:has(.custom-dropdown-menu.show) #notifications-trigger,
        .notifications-button:has(.custom-dropdown-menu.show) #notifications-trigger span{
            color: var(--yellow);
            border: none;
            transition: all 0.2s ease-in-out;
        }
        
        
        
                .nav-user-actions { display: flex; align-items: center; gap: 1rem; }
        .nav-icon-btn { color: var(--text-muted); font-size: 1.5rem; position: relative; transition: color 0.2s ease; cursor: pointer; }
        .nav-icon-btn:hover { color: var(--off-white); }
        .notification-badge { position: absolute; top: -2px; right: -4px; width: 10px; height: 10px; background-color: var(--pink); border-radius: 50%; border: 2px solid var(--black); }
        .profile-trigger { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 6px; transition: background-color 0.2s ease; }
        .profile-trigger:hover { background-color: var(--light-charcoal); }
        .profile-trigger img { height: 40px; width: 40px; border-radius: 50%; border: 2px solid var(--purple); }
        .profile-trigger span { font-weight: 600; color: var(--off-white); }
        
        /* Dropdown Positioning */
        .custom-dropdown-menu { display: none; position: absolute; top: calc(100% + 15px); right: 0; background-color: var(--charcoal); border: 1px solid var(--light-charcoal); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); width: 340px; z-index: 1100; overflow: hidden; }
        .custom-dropdown-menu.show { display: block; }
        .dropdown-header { padding: 1rem; background-color: var(--light-charcoal); border-bottom: 1px solid var(--light-charcoal); }
        .dropdown-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; color: var(--off-white); text-decoration: none; }
        .dropdown-item:hover { background-color: rgba(0, 191, 255, 0.1); color: var(--blue); text-decoration: none; }
        .dropdown-item i { font-size: 1.2rem; }
        .user-card { display: flex; align-items: center; gap: 1rem; }
        .user-card img { height: 50px; width: 50px; object-fit: cover; border: 2px solid var(--purple); }
        
        
                .nav-user-actions { display: flex; align-items: center; gap: 1rem; }
        .nav-icon-btn { color: var(--text-muted); font-size: 1.5rem; position: relative; transition: color 0.2s ease; cursor: pointer; }
        .nav-icon-btn:hover { color: var(--off-white); }
        
        
        
        @media (max-width: 991.98px) {
            body { padding-bottom: 65px; }
            .nav-links, .profile-trigger span { display: none !important; }
            .nav-user-actions { gap: 0.5rem; }
            .nav-icon-btn { padding: 0.5rem; }
            .chat-bar { display: none !important; }
            .mobile-bottom-nav { display: block; }
            .custom-dropdown-menu.show { width: 100vw !important; left: 0 !important; top: 100px; margin-top: 0px !important; border-radius: 0; border-left: 0; border-right: 0; transform: none; position: fixed; }
            .event-logo{
                margin-top: 5px;
            }
            
            .event-header-text{
                display: inline;
            }
            .status-badge-lg-container{
                position: relative;
                width: 100%;
                margin-top: 20px;
                padding-bottom: 20px;
            }
            .status-badge-lg {
                display: block;
                margin-left: 15px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%); /* Adjusts for the element's own size */
            }

        }
        
        /* --- Filter Sidebar --- */
        .filter-sidebar { background-color: var(--charcoal); border-radius: 8px; padding: 1.5rem; border: 1px solid var(--light-charcoal); }
        .filter-group h5 { color: var(--yellow); font-size: 1rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--light-charcoal); }
        .form-control, .form-select { background-color: var(--dark-gray); border: 1px solid var(--light-charcoal); color: var(--off-white); border-radius: 6px; padding: 0.75rem 1rem; }
        .form-control::placeholder { color: var(--text-muted); }
        .form-control:focus, .form-select:focus { background-color: var(--dark-gray); border-color: var(--blue); box-shadow: 0 0 10px rgba(0, 191, 255, 0.2); color: var(--off-white); }
        
        /* Custom Checkboxes */
        .checkbox-group { display: flex; flex-wrap: wrap; gap: 1rem; }
        .custom-checkbox { display: inline-block; position: relative; padding-left: 30px; cursor: pointer; user-select: none; }
        .custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
        .checkmark { position: absolute; top: 2px; left: 0; height: 20px; width: 20px; background-color: var(--dark-gray); border: 1px solid var(--light-charcoal); border-radius: 4px; transition: all 0.2s ease; }
        .custom-checkbox:hover input ~ .checkmark { border-color: var(--blue); }
        .custom-checkbox input:checked ~ .checkmark { background-color: var(--blue); border-color: var(--blue); box-shadow: 0 0 5px var(--blue); }
        .checkmark:after { content: ""; position: absolute; display: none; }
        .custom-checkbox input:checked ~ .checkmark:after { display: block; }
        .custom-checkbox .checkmark:after { left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg); }
        
        /* Custom Range Slider */
        .range-slider-group { margin-top: 0.5rem; }
        .range-slider-group output { color: var(--yellow); font-weight: 600; }
        .form-range { padding: 0; width: 100%; height: 6px; background: var(--light-charcoal); border-radius: 3px; -webkit-appearance: none; appearance: none; }
        .form-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--yellow); cursor: pointer; border: 3px solid var(--charcoal); margin-top: -7px; box-shadow: 0 0 8px rgba(250, 222, 75, 0.5); }
        .form-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--yellow); cursor: pointer; border: 3px solid var(--charcoal); box-shadow: 0 0 8px rgba(250, 222, 75, 0.5); }
        
        .status-badge { font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 50px; text-transform: uppercase; }
        .status-badge.upcoming { background-color: var(--purple); color: var(--off-white); }
        .status-badge.live { background-color: var(--yellow); color: var(--black); }
        .status-badge.past { background-color: var(--light-charcoal); color: var(--text-muted); }
        .status-badge.ongoing { background-color: var(--blue); color: var(--black); }
        .status-badge.complete { background-color: var(--light-charcoal); color: var(--text-muted); }
        
        /* --- Page Header --- */
        .page-header { padding: 4rem 0; background: linear-gradient(rgba(18, 18, 18, 0.8), rgba(18, 18, 18, 0.8)), url('https://picsum.photos/seed/headerbg/1920/400') no-repeat center center; background-size: cover; text-align: center; }
        .page-header h1 { color: var(--yellow); font-size: 3rem; }
        
        /* --- Result Cards --- */
        .card-link { display: block; text-decoration: none; height: 100%; }
        .content-card { background-color: var(--charcoal); border: 1px solid var(--light-charcoal); border-radius: 8px; overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; height: 100%; position: relative; }
        .card-link:hover .content-card { border-color: var(--blue); box-shadow: 0 8px 30px rgba(0,0,0,0.3); transform: translateY(-5px); }
        .card-img-top { height: 150px; width: 100%; object-fit: cover; }
        .card-body { padding: 1.25rem; flex-grow: 1; display: flex; flex-direction: column; }
        .card-title-link { color: var(--off-white); font-weight: 600; text-decoration: none; font-size: 1.1rem; overflow-wrap: break-word; /* Breaks long words to fit */ word-break: break-word; /* Also helps with breaking words */ width: 65%; }
        .card-link:hover .card-title-link { color: var(--pink); }
        .card-meta { color: var(--text-muted); font-size: 0.85rem; display: flex; align-items: center; }
        .card-meta i { margin-right: 0.25rem; font-size: 1rem; color: var(--text-muted); }
        .status-badge { font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 50px; text-transform: uppercase; }
        .upcoming { background-color: var(--purple); color: var(--off-white); }
        .canceled { background-color: var(--red); color: var(--off-white); }
        .live { background-color: var(--yellow); color: var(--black); }
        .past { background-color: var(--light-charcoal); color: var(--text-muted); }
        .ongoing { background-color: var(--blue); color: var(--black); }
        .complete { background-color: var(--light-charcoal); color: var(--text-muted); }
        
        .border-top,
        .border-bottom,
        .border-left,
        .border-right,
        .border{
            border-color: var(--light-charcoal) !important;
        }
        
        .page-header-dynamic { padding: 6rem 0; position: relative; background-color: var(--black); overflow: hidden; }
        .page-header-dynamic .bg-image { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.5); transform: scale(1.1); }
        .header-content { position: relative; z-index: 2; text-align: center; }
        .page-header-dynamic h1 { font-size: 3.5rem; text-shadow: 0 2px 10px #000; }
        
        .shortcut-card {
            background-color: var(--charcoal);
            border: 1px solid var(--light-charcoal);
            border-radius: 8px;
            padding: 1.5rem;
            text-align: center;
            transition: all 0.2s ease-in-out;
            display: flex;
            flex-direction: column;
            height: 100%;
            position: relative; /* Needed for badge positioning */
        }
        .shortcut-card:hover {
            border-color: var(--blue);
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.3);
        }
        .shortcut-icon {
            font-size: 3rem;
            color: var(--yellow);
            margin-bottom: 1rem;
        }
        .shortcut-card h5 {
            color: var(--off-white);
        }
        .shortcut-card p {
            font-size: 0.9rem;
            flex-grow: 1;
        }
        .btn-outline-secondary { color: var(--text-muted-color); border-color: var(--light-charcoal); }
        .btn-outline-secondary:hover { background-color: var(--light-charcoal); color: var(--off-white); border-color: var(--light-charcoal); }

        .section-heading {
            color: var(--yellow);
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--light-charcoal);
            margin-bottom: 1.5rem;
        }

        .notification-badge-account {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: var(--pink);
            color: white;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 700;
            border: 2px solid var(--charcoal);
        }
        
        .tab-badge {
            position: relative;
            top: -1px;
            right: -3px;
            background-color: var(--pink);
            color: white;
            border-radius: 50%;
            width: 23px;
            height: 23px;
            display: inline-block;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 700;
            border: 2px solid var(--charcoal);
            text-align: center;
        }
        
        .gender-display {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 600;
            padding: 0.75rem 1rem;
            background-color: var(--black);
            border: 1px solid var(--light-charcoal);
            border-radius: 6px;
            cursor: not-allowed;
        }
        .gender-display.female { color: var(--pink); }
        .gender-display.male { color: var(--blue); }
        .gender-display i { font-size: 1.2rem; }
        
        .form-control, .form-select { background-color: var(--dark-gray); border: 1px solid var(--light-charcoal); color: var(--off-white); border-radius: 6px; padding: 0.75rem 1rem; }
        .form-control:focus, .form-select:focus { background-color: var(--dark-gray); border-color: var(--blue); box-shadow: 0 0 10px rgba(0, 191, 255, 0.2); color: var(--off-white); }
        .form-control[readonly] { background-color: var(--black); cursor: not-allowed; }
        

        .tagify__dropdown__wrapper{
            background-color: var(--charcoal); border: 1px solid var(--light-charcoal); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            overflow: hidden;
        }
        
        .tagify,
        .tagify__input{
            color: var(--off-white) !important;
        }
        
        .tagify__input:before,
        .tagify__input:focus:empty::before
        {
            color: var(--text-muted-color);
        }
        
        
        
        
        .tagify__dropdown__item {
            padding: 0.75rem 1rem; color: var(--off-white); text-decoration: none;
            background-color: var(--charcoal);
            
        }
        
        .tagify__dropdown__item--active{
            background-color: #172b31;
            color: var(--blue);
        }

        /* Tags Colors */
        
        
        
        .tag-blue{
            --tag-bg: rgb(68, 89, 119);
            color: #fff;
        }
        
        .tag-blue span{
            color: #fff;
        }
        
        .tag-blue:hover:not([readonly]) div::before,
        .tag-blue:focus div::before{
            --tag-bg: rgb(84, 108, 142);
        }
        
        
        .tag-pink{
            --tag-bg: rgb(178, 110, 154);
            color: #fff;
        }
        
        .tag-pink span{
            color: #fff;
        }
        
        .tag-pink:hover:not([readonly]) div::before,
        .tag-pink:focus div::before{
            --tag-bg: rgb(209, 131, 180);
        }
        
        .tag-purple{
            --tag-bg: rgb(154, 109, 175);
            color: #fff;
        }
        
        .tag-purple span{
            color: #fff;
        }
        
        .tag-purple:hover:not([readonly]) div::before,
        .tag-purple:focus div::before{
            --tag-bg: rgb(176, 126, 201);
        }
        
        .tag-yellow{
            --tag-bg: rgb(155, 154, 83);
            color: #fff;
        }
        
        .tag-yellow span{
            color: #000;
        }
        
        .tag-yellow:hover:not([readonly]) div::before,
        .tag-yellow:focus div::before{
            --tag-bg: rgb(188, 187, 100);
        }
        
        .tag-green{
            --tag-bg: rgb(83, 153, 82);
            color: #fff;
        }
        
        .tag-green span{
            color: #000;
        }
        
        .tag-green:hover:not([readonly]) div::before,
        .tag-green:focus div::before{
            --tag-bg: rgb(111, 196, 109);
        }
        
        .tag-orange{
            --tag-bg: rgb(160, 111, 48);
            color: #fff;
        }
        
        .tag-orange span{
            color: #000;
        }
        
        .tag-orange:hover:not([readonly]) div::before,
        .tag-orange:focus div::before{
            --tag-bg: rgb(196, 136, 62);
        }
        
        .tag-aqua{
            --tag-bg: rgb(47, 156, 158);
            color: #fff;
        }
        
        .tag-aqua span{
            color: #000;
        }
        
        .tag-aqua:hover:not([readonly]) div::before,
        .tag-aqua:focus div::before{
            --tag-bg: rgb(67, 186, 188);
        }
        
        .faq-nav .nav-link {
            color: var(--text-muted-color);
            font-weight: 600;
            padding: 0.75rem 1rem;
            border-left: 3px solid transparent;
        }
        .faq-nav .nav-link.active {
            color: var(--yellow);
            background-color: var(--light-charcoal);
            border-left-color: var(--yellow);
        }

        .accordion-item {
            background-color: var(--charcoal);
            border: 1px solid var(--light-charcoal);
        }
        .accordion-button {
            background-color: var(--charcoal);
            color: var(--off-white);
            font-weight: 600;
        }
        .accordion-button:not(.collapsed) {
            background-color: var(--light-charcoal);
            color: var(--yellow);
            box-shadow: none;
        }
        .accordion-button:focus {
            box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), .25);
            border-color: var(--blue);
            box-shadow: 0 0 10px rgba(0, 191, 255, 0.2);
        }
        .accordion-button::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a0a0a0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        }
        .accordion-button:not(.collapsed)::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FADE4B'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        }
        .accordion-body {
            color: var(--text-muted-color);
        }
        
        .event-header .social-links a.link-facebook:hover{
            color: #1877F2;
        }
        
        .event-header .social-links a.link-twitter:hover{
            color: #000;
        }
        
        .event-header .social-links a.link-instagram:hover{
            background-image: linear-gradient(to bottom right, #833AB4, #FD1D1D, #FCB045);
            -webkit-background-clip: text; /* For WebKit browsers */
           background-clip: text;
            -webkit-text-fill-color: transparent; /* For WebKit browsers */
            color: transparent;
        }
        
        .event-header .social-links a.link-discord:hover{
            color: #5865F2;
        }
        
        .ph-calendar-blank{
            position: relative;
        }
        
        .ph-calendar-blank div{
            position: absolute;
            left: 0;
            top: 11px;
            text-align: center;
            font-size: 0.54rem;
            width: 100%;
        }
        
        .dropdown-menu{
            position: absolute !important;
            z-index: 9999; /* Example value */
            
        }
        
        /* Error Page */
        
        .error-body{
                background-color: #00142d;
                background-image: none !important;
                height:  100vh;
        }
        
        .error-body2{
                background-color: #13162b;
                background-image: none !important;
                height:  100vh;
        }
        
        .content-updated{
            color: var(--text-mute-color);
            margin-top: 50px;
            font-size: 0.8rem;
        }
        
        .content-updated strong{
            color: var(--yellow);
        }
        
        /* Timeline Styles */
        .timeline2 { list-style: none; padding: 0; position: relative; }
        .timeline2:before { content: ''; position: absolute; top: 0; bottom: 0; left: 20px; width: 4px; background: var(--light-charcoal); border-radius: 2px; }
        .timeline-item2 { position: relative; margin-bottom: 1.5rem; }
        .timeline-item2 .timeline-marker { position: absolute; top: 0; left: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--light-charcoal); border: 3px solid var(--charcoal); }
        .timeline-item2.active .timeline-marker { background: var(--yellow); box-shadow: 0 0 10px var(--yellow); }
        .timeline-item2 .timeline-content { margin-left: 50px; }
        .timeline-item2 .timeline-year { font-size: 1.5rem; font-weight: 700; }
        .timeline-item2.active .timeline-year { color: var(--yellow); }
        
        /* Layout */
        .tab-content{
            position: relative;
        }
        
        .timeline-wrap{display:flex;align-items:center;gap:12px;max-width:1100px;margin:32px auto;padding:0 16px}
  .timeline-nav{flex:0 0 auto;width:40px;height:40px;background:transparent;color:var(--ink);font-size:18px;display:grid;place-items:center;cursor:pointer;border:none;visibility:visible}

  .timeline{--lineY:70px; --gap:14px; position:relative;flex:1 1 auto;overflow-x:auto;overflow-y:hidden; padding:60px 0 72px; background:transparent; scroll-behavior:smooth;}

  /* Fixed baseline that spans the full content width */
  .line{position:absolute; left:0; top:var(--lineY); height:2px; background:#2c323c; min-width:100%}

  /* Years track sits on the baseline */
  .years{position:absolute; top:var(--lineY); left:0; display:inline-flex; gap:68px; list-style:none; padding:0; margin:0; width:max-content}
  .year{position:relative; flex:0 0 auto; width:80px; height:0}

  .dot{position:absolute; left:50%; top:0; transform:translate(-50%,-50%); width:12px; height:12px; border-radius:50%; background:var(--yellow); transition: all ease-in-out 0.2s; box-shadow: 0 0 10px var(--yellow); border: 1px solid var(--charcoal);}

  .label{position:absolute; left:50%; white-space:nowrap; font-size:12px; font-weight:900; color:var(--yellow)}
  .year:nth-child(odd)  .label{top:calc(-1 * var(--gap)); transform:translate(-50%,-100%)}
  .year:nth-child(even) .label{top:var(--gap); transform:translate(-50%,0)}

  /* Hide scrollbars without affecting layout */
  .timeline::-webkit-scrollbar{display:none}
  .timeline{scrollbar-width:none;-ms-overflow-style:none}
  
  a .dot{
    background:#6aa8ff;
    box-shadow: none;
  }
  
  a:hover .dot{
    background: var(--pink);
    
  }
  
  a .label{
    color: var(--off-white);
    transition: all ease-in-out 0.2s;
    
  }
  
  a:hover .label{
    color: var(--pink);
  }
  
  .ql-editor:before{
    color: var(--text-muted-color) !important;
  }
  
  .fcj-comment-card + .fcj-comment-card{ margin-top:.75rem; }
  
  .fcj-comment{ display:grid; grid-template-columns:44px 1fr; gap:.75rem; }
  .fcj-comment-avatar{ width:44px; height:44px; border-radius:50%; background:rgba(0, 0,0, 0.2); display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:var(--off-white); border:1px solid var(--fcj-border); }
  .fcj-comment-bubble{ background:var(--fcj-soft); border:1px solid var(--fcj-border); border-radius:12px; padding:.6rem .75rem; }
  .fcj-comment-name{ font-weight:600; color:var(--off-white); }
  .fcj-comment-meta{ font-size:.82rem; color:var(--text-muted-color); }
  .fcj-comment-body img{ max-width:100%; border-radius:8px; }
  .fcj-pill{ font-size:.75rem; background:var(--fcj-soft); color:var(--text-muted-color); border:1px solid var(--fcj-border); padding:.2rem .5rem; border-radius:999px; }
  .fcj-comment-actions{ display:flex; align-items:center; gap:.75rem; padding-left:60px; padding-bottom:.25rem; }
  .fcj-comment-action{ font-size:.9rem; color:var(--text-muted-color); user-select:none; display:inline-flex; align-items:center; gap:.35rem; }
  .fcj-reaction-summary{ margin-left:auto; display:inline-flex; align-items:center; gap:.25rem; background:rgba(255,255,255,.05); padding:.15rem .5rem; border-radius:999px; border:1px solid var(--fcj-border); }
  .fcj-reaction-icon{ font-size:.95rem; }
  .fcj-reaction-count{ font-size:.85rem; color:var(--text-muted-color); }
  .fcj-comment-replies{ margin-left:30px; padding-left:.75rem; }
  
  .news-card { background-color: var(--charcoal); border: 1px solid var(--light-charcoal); border-radius: 8px; overflow: hidden; transition: all 0.3s ease; }
        .news-card:hover { border-color: var(--blue); box-shadow: 0 8px 30px rgba(0,0,0,0.3); transform: translateY(-5px); }
        .news-card .card-title{ margin-top: 10px !important; margin-bottom: 18px !important; }
        .news-card .card-title a { color: var(--off-white); text-decoration: none; margin:4px 0 6px;line-height:1.3; font-weight: 800; font-size: 1.5rem !important;}
        .news-card .card-title a:hover { color: var(--yellow); }
        .news-card .author-info { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
        .news-card .author-info img { width: 24px; height: 24px; border-radius: 50%; }
        .news-type-badge { font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 50px; }
        
        .news-card-footer { display: flex; gap: 1.5rem; color: var(--text-muted-color); font-size: 0.9rem; padding: 1rem 1.5rem; border-top: 1px solid var(--light-charcoal); }
        .news-card-footer .interaction { display: flex; align-items: center; gap: 0.3rem; }
        .news-body{min-width:0;flex:1}
    .news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--text-muted-color); margin-top: 5px !important;}
    .news-author{font-weight:600;color:var(--fcj-text)}
    .news-dot{width:4px;height:4px;border-radius:50%;background:var(--fcj-border);display:inline-block}
    .news-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;border:1px solid var(--fcj-border);flex:0 0 auto}
    .news-avatar img{width:100%;height:100%;object-fit:cover;display:block}
    .news-row{display:flex;gap:14px;padding:14px}
    .news-list{display:flex;flex-direction:column;gap:12px}
    .news-excerpt{color:var(--text-muted-color);line-height:1.5;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
    .news-counts{display:flex;gap:14px;font-size:13px;color:var(--fcj-text-dim)}
    .news-counts b{color:var(--fcj-text)}
    .news-reactions{display:flex;gap:6px;flex-wrap:wrap}
    .news-reaction{cursor: default; cursor: pointer; transition: all 0.2s ease-in-out; display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--fcj-border);background:var(--light-charcoal);font-size:13px}
    .news-reaction img{
        width: 18px;
    }
    .news-actions{display:flex;gap:6px;align-items:center}
    .news-btn{cursor: default; cursor: pointer; transition: all 0.2s ease-in-out;  border:1px solid var(--fcj-border);background:var(--light-charcoal);color:var(--off-white);padding:6px 12px;border-radius:10px;font-size:13px; margin-left: 10px;}
    .news-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--fcj-border);background:linear-gradient(0deg,var(--fcj-surface-2),var(--fcj-surface-2))}
    
  /* news badges */
  .news-type-badge.news-type-badge-upper{ text-transform: uppercase; font-weight: 900; margin-right: 3px; }
  
  .news-type-badge.cat{ background: var(--light-charcoal); color: var(--text-muted-color); margin-right: 2px; }
  .news-type-badge.announcement { background-color: var(--yellow); color: var(--black); }
  .news-type-badge.news { background-color: #AAAA52; color: var(--black); }
  .news-type-badge.event { background-color: #9D4EDD; color: var(--off-white); }
  .news-type-badge.game { background-color: #F000B8; color: var(--off-white); }
  .news-type-badge.series { background-color: #F000B8; color: var(--off-white); }
  .news-type-badge.press-release { background-color: #1E6AA0; color: var(--off-white); }
  .news-type-badge.interview { background-color: #22847F; color: var(--off-white); }
  
  .news-avatar-header {width:44px;height:44px;border-radius:50%;overflow:hidden;border:1px solid var(--fcj-border);}
  
  .news-reaction:hover,
  .news-btn:hover{
    background-color: var(--charcoal);
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  .news-comment-box-count{
    display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:13px
  }
  
  .news-reaction.show,
  .news-btn:active{
    background-color: var(--yellow);
    color: var(--black) !important;
  }
  
  .react-userlist{
    width: 250px;
    overflow: hidden !important;
    overflow-y: auto !important;
    min-height: 200px;
  }
  
  .react-userlist a{
    font-size: 0.9rem;
  }
  
  .fcj-react-avatar{ width:32px; height:32px; border-radius:50%; background:rgba(0, 0,0, 0.2); display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:var(--off-white); border:1px solid var(--fcj-border); }


.article-content p { color: var(--text-muted-color); line-height: 1.8; }
.article-content { color: var(--text-muted-color); line-height: 1.8; }
        .article-content h3 { color: var(--yellow); margin-top: 2rem; }
        
        .social-share-bar { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem 0; }
        .social-share-bar a { color: var(--text-muted-color); font-size: 1.5rem; transition: all 0.2s ease; }
        .social-share-bar a:hover { color: var(--blue); transform: scale(1.1); }

        .related-article-card { display: flex; gap: 1rem; align-items: center; }
        .related-article-card img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; }
        .related-article-card h6 a { color: var(--off-white); text-decoration: none; }
        .related-article-card h6 a:hover { color: var(--pink); }

.article-content table[width="500"] { width: auto; }
.article-content table[width="500"] td { font-size: 14px; line-height: 1.3; }
.article-content img { max-width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height: auto; }
.article-content td > img { max-width: none; }
.article-content figure { display: table; margin: 1em auto; }
.article-content figure:first-child { margin-top: 0; }
.article-content figure:last-child { margin-bottom: 0; }
.article-content figure img { margin: 0 auto; display: block; }
.article-content figure figcaption { width: 0; min-width: 100%; text-align: center; font-size: 14px; line-height: 18px; }
.article-content figure figcaption.credit { font-size: 11px; line-height: 13px; padding: 2px 0px; color: #777; }
.article-content figure figcaption.credit a { color: #666; }
.article-content figure figcaption.credit.copyright { max-height: 26px; position: relative; overflow: hidden; }
.article-content figure figcaption.credit.copyright:hover { overflow: visible; }
.article-content figure figcaption.credit.copyright[data-overflow="true"]::after { content: "â—¢"; position: absolute; right: 0px; bottom: 2px; }
.article-content figure figcaption.credit.copyright[data-overflow="true"]:hover::after { display: none; }
.article-content figure figcaption.credit.copyright[data-overflow="true"] .text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.article-content figure figcaption.credit.copyright[data-overflow="true"]:hover .text { background-color: white; overflow: visible; display: block; -webkit-line-clamp: 10; outline: 1px solid #777; padding: 2px 0; margin: -2px 0; }
.article-content figure.fleft, .article-content img.fleft { margin: 2px 6px 0 1px; max-width: 35%; height: auto; }
.article-content figure.fright, .article-content img.fright { margin: 2px 1px 0 6px; max-width: 35%; height: auto; }

.f_left, .l_float, .lfloat, .fleft { float: left !important; clear: left !important; }
.f_right, .r_float, .rfloat, .fright { float: right !important; clear: right !important; }

.highslide_gallery { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; width: fit-content; margin: auto; margin-bottom: 12px; }
.highslide_gallery .gallery_pic { text-align: center; }
.highslide_gallery .gallery_pic img { display: inline-block; outline: 1px solid black; }
#infotype-38 .j_w_widget { display: flex; flex-direction: column; gap: 5px; background: #f3f3f3; padding: 8px 10px; box-shadow: inset 2px 0 2px #ddd; margin-left: 10px; max-width: 240px; }

cite{
    color: #ADADAD;
}

.highslide-caption{
    color: var(--yellow);
    font-size: 0.8rem;
    margin-top: 6px;
}

.highslide-caption cite{
    color: #F4EEB2;
}

.react-item img{
    width: 23px;
    height: 23px;
}

.btn-react img{
    width: 16px;
    height: 16px;
}