/* ==========================================================================
   SCENEX DESIGN SYSTEM - REFACTORED STRUCTURE (V2)
   ==========================================================================

   TABLE OF CONTENTS

   01. Design Tokens
   02. Reset
   03. Base / Global
   04. Typography
   05. Layout
   06. Shared Components
       - Buttons
       - Avatars
       - Cards
       - Forms
   07. Navigation
       - Left Sidebar
       - Right Sidebar
       - Mobile Top Nav
       - Mobile Bottom Nav
   08. Feed & Posts
   09. Events
   10. Discover
   11. Communities
   12. Notifications
   13. Profile
   14. Authentication
   15. Bootstrap Overrides
   16. Responsive Utilities

   NOTE:
   This version preserves the original CSS but provides a
   maintainable design-system structure and token section.
   ========================================================================== */

:root {

    --primary: #3b7ef8;
    --primary-hover: #2563eb;
    --primary-light: #60a5fa;

    --accent: #22d3ee;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;

    --text-primary: #f0f0f8;
    --text-secondary: rgba(240,240,248,0.75);
    --text-muted: rgba(240,240,248,0.45);
    --text-faint: rgba(240,240,248,0.25);

    --bg-main: #060608;
    --bg-card: #12121a;
    --bg-card-alt: #0d0d12;
    --bg-hover: #1c1c24;

    --border: rgba(255,255,255,0.07);
    

    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.25);
   
    --white: #fff;
    --black: #000;
   
   
    --purple: #9b5cf6;
    --purple-light: #a855f7;
    --gray-light: #bdbdbd;

    /* Gradient + misc tokens */
    --gradient-dark-1: #0f1729;
    --gradient-dark-2: #1a0f29;
    --primary-hover-2: #1d4ed8;
  
}
/* ================================
   SCENEX - MAIN STYLESHEET
   ================================ */


/* ================================
   RESET
   ================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ================================
   GLOBAL / BASE
   ================================ */

html {
    font-size: 16px;
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary) !important;
    font-family: 'DM Sans', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

.app-shell {
    background-color: var(--bg-main);
    min-height: 100vh;
}


/* ================================
   LAYOUT
   ================================ */

.layout {
    display: flex;
    min-height: 100vh;
}

.main-content {
    margin-left: 16.666%;
    margin-right: 25%;
    flex: 1;
    min-width: 0;
}


/* ================================
   TYPOGRAPHY
   ================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: "Palanquin Dark", sans-serif;
    font-weight: 800;
    color: var(--text-primary) !important;
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; font-weight: 600; }
h5 { font-size: 0.9375rem; font-weight: 600; }
h6 { font-size: 0.875rem; font-weight: 600; }

p {
    font-family: 'DM Sans', sans-serif;
    color: var(--text-primary) !important;
    font-size: 0.9375rem;
    line-height: 1.6;
}

a {
    font-family: 'DM Sans', sans-serif;
    color: var(--text-primary) !important;
    text-decoration: none;
}

span {
    font-family: 'DM Sans', sans-serif;
    color: var(--text-primary) !important;
}


/* ================================
   LEFT SIDEBAR
   ================================ */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 16.666%;
    height: 100vh;
    background: linear-gradient(180deg, rgba(9,9,13,0.98), rgba(6,6,8,0.98));
    border-right: 1px solid rgba(255,255,255,0.07);
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow-y: auto;
    scrollbar-width: none;
    box-shadow: 8px 0 30px rgba(0,0,0,0.15);
}

.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar-logo {
    font-family: "Palanquin Dark", sans-serif;
    font-weight: 800;
    font-size: 1.75rem;
    color: var(--text-primary);
    text-decoration: none;
    display: block;
    margin-bottom: 2.5rem;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.875rem;
    color: rgba(240,240,248,0.45);
    font-size: 0.9375rem;
    font-family: 'DM Sans', sans-serif;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    text-decoration: none;
}

.sidebar-nav a:hover {
    background: rgba(59,126,248,0.12);
    color: var(--text-primary);
    transform: translateX(2px);
}

.sidebar-nav a.active-nav {
    background: linear-gradient(90deg, rgba(59,126,248,0.22), rgba(155,92,246,0.16));
    color: var(--text-primary);
}

.sidebar-nav a i {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.full-btn {
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.75rem;
    border-radius: 0.875rem;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 10px 24px rgba(59,126,248,0.2);
}

.full-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(59,126,248,0.24);
}



/* ================================
   SIDEBAR MOBILE TOGGLE
   ================================ */

.sidebar-toggle-btn {
    width: 2.375rem;
    height: 2.375rem;
    border: none;
    background: transparent;
    color: rgba(240,240,248,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    cursor: pointer;
    font-size: 1.125rem;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* MOBILE SIDEBAR SLIDE BEHAVIOUR */
@media (max-width: 768px) {

    /* sidebar starts hidden off screen */
    .sidebar {
        position: fixed;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        width: 100%;
        max-width: 16rem;
        height: 100vh;
        z-index: 999;
        padding-top: 80px;
        /* keep all other existing sidebar styles */
    }

    /* when toggled open */
    .sidebar.sidebar-open {
        transform: translateX(0);
    }

    /* dark overlay behind the sidebar */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        z-index: 998;
        backdrop-filter: blur(2px);
    }

    .sidebar-overlay.overlay-active {
        display: block;
    }

    .sidebar-logo{
        display:none;
    }
 
}





/* ================================
   RIGHT SIDEBAR
   ================================ */

.right-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 25%;
    height: 100vh;
    background: var(--bg-main);
    border-left: 1px solid rgba(255,255,255,0.07);
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    z-index: 100;
    overflow-y: auto;
    scrollbar-width: none;
}

.right-sidebar::-webkit-scrollbar {
    display: none;
}

.widget {
    background: var(--bg-card-alt);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1.25rem;
    padding: 1.25rem;
    box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}

.widget h3 {
    font-size: 0.9375rem;
    margin-bottom: 1rem;
}


/* ================================
   HOME / FEED
   ================================ */

.feed {
    padding: 2rem 1.5rem;
    max-width: 44rem;
    margin: 0 auto;
}
/* ================================
   COMPOSER
   ================================ */

.composer {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1.25rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 10px 28px rgba(0,0,0,0.16);
}

.composer:focus-within {
    border-color: rgba(59,126,248,0.35);
    box-shadow: 0 14px 34px rgba(0,0,0,0.22);
}

.composer-top {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.composer-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: 'DM Sans', sans-serif;
    min-width: 0;
    caret-color: var(--primary);
}

.composer-input::placeholder {
    color: rgba(240,240,248,0.28);
}

/* EVENT STRIP */

.composer-event-strip {
    background: rgba(59,126,248,0.07);
    border: 1px solid rgba(59,126,248,0.2);
    border-radius: 0.75rem;
    padding: 0.625rem 0.875rem;
}

.attached-event {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--primary-light);
    font-size: 0.875rem;
    font-family: 'DM Sans', sans-serif;
}

.attached-event i.fa-bolt {
    color: var(--primary);
    font-size: 0.75rem;
}

.attached-event span {
    flex: 1;
    color: var(--primary-light);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.remove-event-btn {
    background: none;
    border: none;
    color: rgba(96,165,250,0.5);
    cursor: pointer;
    padding: 0.125rem 0.25rem;
    border-radius: 0.375rem;
    transition: color 0.2s, background 0.2s;
    display: flex;
    align-items: center;
}

.remove-event-btn:hover {
    color: var(--danger);
    background: rgba(239,68,68,0.08);
}

/* EVENT SEARCH */

.event-search-wrap {
    background: var(--bg-card-alt);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.875rem;
    overflow: hidden;
}

.event-search-bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.event-search-bar i {
    color: rgba(240,240,248,0.3);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.event-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: 'DM Sans', sans-serif;
}

.event-search-input::placeholder {
    color: rgba(240,240,248,0.25);
}

.event-search-results {
    max-height: 14rem;
    overflow-y: auto;
    scrollbar-width: none;
}

.event-search-results::-webkit-scrollbar {
    display: none;
}

.event-result-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.event-result-item:last-child {
    border-bottom: none;
}

.event-result-item:hover {
    background: rgba(59,126,248,0.07);
}

.event-result-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: rgba(59,126,248,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
    font-size: 0.8125rem;
}

.event-result-info h4 {
    font-size: 0.875rem;
    color: var(--text-primary);
    margin: 0 0 0.125rem;
}

.event-result-info span {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.4);
}

.event-no-results {
    padding: 1.5rem 1rem;
    text-align: center;
    color: rgba(240,240,248,0.3);
    font-size: 0.875rem;
    font-family: 'DM Sans', sans-serif;
}

/* MEDIA PREVIEW */

.media-preview-row {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.media-preview-item {
    position: relative;
    width: 9rem;
    height: 9rem;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.media-preview-item img,
.media-preview-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-preview-item .remove-media-btn {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: none;
    color: var(--white);
    font-size: 0.625rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.media-preview-item .remove-media-btn:hover {
    background: var(--danger);
}

.media-preview-item .video-badge {
    position: absolute;
    bottom: 0.25rem;
    left: 0.25rem;
    background: rgba(0,0,0,0.65);
    color: var(--white);
    font-size: 0.5625rem;
    padding: 0.125rem 0.375rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

/* TOOLBAR */

.composer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.625rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.composer-tools {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tool-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    color: rgba(240,240,248,0.45);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
}

.tool-btn:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
    transform: translateY(-1px);
}

.tool-btn.active-tool {
    color: var(--primary);
    background: rgba(59,126,248,0.1);
}

.tool-btn i {
    font-size: 0.9375rem;
}

.composer-post-btn {
    padding: 0.5625rem 1.375rem;
    border-radius: 0.875rem;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
    box-shadow: 0 10px 24px rgba(59,126,248,0.18);
}

.composer-post-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(59,126,248,0.22);
}

.composer-post-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* mobile */
@media (max-width: 480px) {
    .tool-btn span {
        display: none;
    }
    .tool-btn {
        padding: 0.5rem;
    }
}
.event-pill{
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0.875rem 1rem;
    margin: 1rem 0;

    border: 1px solid rgba(34,211,238,0.25);
    border-radius: 1rem;

    background: linear-gradient(
        135deg,
        rgba(34,211,238,0.12),
        rgba(59,130,246,0.08)
    );

    backdrop-filter: blur(12px);

    color: var(--text-primary);

    box-shadow:
        0 0 0 1px rgba(255,255,255,0.03) inset,
        0 8px 24px rgba(0,0,0,0.18);

    transition: all 0.2s ease;
}

.event-pill:hover{
    transform: translateY(-2px);
    border-color: rgba(34,211,238,0.45);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.05) inset,
        0 12px 32px rgba(0,0,0,0.25);
}

.event-pill > div:first-child{
    display: flex;
    align-items: center;
    gap: 0.6rem;

    font-weight: 700;
    font-size: 0.95rem;
}

.event-pill > div:first-child i{
    width: 2rem;
    height: 2rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(34,211,238,0.15);
    color: var(--accent);
}

.event-meta{
    display: flex;
    align-items: center;
    gap: 1rem;

    font-size: 0.8rem;
    color: var(--text-muted);
}

.event-meta span{
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.event-meta i{
    color: var(--accent);
}

.post-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1.25rem;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 10px 28px rgba(0,0,0,0.14);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.post-card:hover {
    transform: translateY(-2px);
    border-color: rgba(96,165,250,0.25);
}

/* Community post card — distinct visual treatment */
.community-post-card {
    border-left: 3px solid rgba(139, 92, 246, 0.7);
    background: linear-gradient(135deg, rgba(139,92,246,0.04) 0%, var(--bg-card) 100%);
}

.community-post-card:hover {
    border-left-color: rgba(139, 92, 246, 1);
    border-color: rgba(139, 92, 246, 0.4);
}

.community-post-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(167, 139, 250, 0.9);
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 999px;
    padding: 0.2rem 0.625rem;
    margin-bottom: 0.75rem;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.community-post-label a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.community-post-label a:hover {
    color: #c4b5fd;
    text-decoration: underline;
}

.community-post-label i {
    font-size: 0.65rem;
}

.post-comment-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    color: rgba(240,240,248,0.5);
}



.post-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.post-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--accent);
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.08);
}

.post-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-user-info {
    display: flex;
    /* flex-direction: column; */
    gap: 0.125rem;
    align-items: center;
}

.post-username {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.post-time {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.4);
}

.post-text {
    font-size: 0.9375rem;
    color: var(--text-primary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.post-image {
    height: 40rem;
    border-radius: 1rem;
    background: var(--bg-card);
    margin-bottom: 1rem;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.05);
}

.post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.post-image:hover{
    height: 41rem;
    transition: all 0.3s;
}
.post-actions {
    display: flex;
    gap: 0.25rem;
}

.post-actions button {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    color: rgba(240,240,248,0.45);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    transition: color 0.2s, background 0.2s;
}

.post-actions button:hover {
    color: var(--primary);
    background: rgba(59,126,248,0.08);
    transform: translateY(-1px);
}

.post-actions button i {
    width: 1rem;
    height: 1rem;
}

.post-footer{
    display: flex;
    justify-content: space-between;
}

.post-event-footer{
    padding: 0.625rem 1.125rem;
    border: none;
    border-radius: 0.75rem;
    background: rgba(59,126,248,0.12);
    color: var(--primary-light);
    cursor: pointer;
    font-size: 0.8125rem;
    font-family: 'DM Sans', sans-serif;
    transition: background 0.2s, transform 0.2s;
}

.post-event-footer:hover {
    background: rgba(59,126,248,0.2);
    transform: translateY(-1px);
}
/* ================================
   AVATAR (shared)
   ================================ */

.avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--accent);
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.08);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ================================
   DISCOVER PAGE
   ================================ */

.discover-page {
    padding: 2rem 1.5rem 5rem;
}

.search-bar {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1rem;
    padding: 0 1rem;
    height: 3.5rem;
    margin-bottom: 1.25rem;
    gap: 0.75rem;
}

.search-bar i {
    color: rgba(240,240,248,0.3);
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
}

.search-bar input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: 'DM Sans', sans-serif;
}

.search-bar input::placeholder {
    color: rgba(240,240,248,0.3);
}

.filter-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.625rem;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    color: var(--text-primary);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.filter-btn:hover {
    background: var(--bg-card);
}

.category-row {
    display: flex;
    gap: 0.625rem;
    overflow-x: auto;
    margin-bottom: 1.25rem;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
    flex-wrap: wrap;
}

.category-row::-webkit-scrollbar {
    display: none;
}

.category-pill {
    padding: 0.625rem 1.125rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.07);
    background: var(--bg-card);
    color: rgba(240,240,248,0.6);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.category-pill:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.active-pill {
    background: var(--primary);
    color: var(--white);
    border-color: transparent;
}

.view-toggle {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.toggle-btn {
    padding: 0.625rem 1.125rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.07);
    background: transparent;
    color: rgba(240,240,248,0.45);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.active-toggle {
    background: var(--primary);
    color: var(--white);
    border-color: transparent;
}

.discover-section {
    margin-bottom: 3rem;
}

.section-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.section-top h2 {
    font-size: 1.25rem;
}

.section-top a {
    font-size: 0.8125rem;
    color: rgba(240,240,248,0.45);
    transition: color 0.2s;
    text-decoration: none;
}

.section-top a:hover {
    color: var(--text-primary);
}


/* ================================
   EVENT CARDS
   ================================ */

.event-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1.25rem;
    overflow: hidden;
    margin-bottom: 1rem;
    transition: border-color 0.2s, transform 0.2s;
}

.event-card:hover {
    border-color: var(--primary-hover);
    transform: translateY(-3px);
}

.event-image {
    height: 12.5rem;
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(0,0,0,0.65);
    color: var(--text-primary);
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    backdrop-filter: blur(4px);
}

.event-time-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--primary-hover);
    color: var(--white);
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

.event-content {
    padding: 1.25rem;
}

.event-content h3 {
    font-size: 1rem;
    margin-bottom: 0.375rem;
    color: var(--text-primary);
}

.event-content p,
.event-meta p {
    font-size: 0.8125rem;
    color: rgba(240,240,248,0.45);
    margin-bottom: 1rem;
}

.event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.mini-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--bg-card-alt);
    margin-right: -0.5rem;
    border: 2px solid var(--primary-hover);
    overflow: hidden;
}

.mini-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attendees span {
    margin-left: 0.875rem;
    font-size: 0.8125rem;
    color: rgba(240,240,248,0.45);
}

.rsvp-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.625rem;
    background: var(--primary-hover);
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.2s;
}

.rsvp-btn:hover {
    background: var(--primary-hover-2);
}

.wide-event-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1.25rem;
    overflow: hidden;
    margin-bottom: 1rem;
    transition: border-color 0.2s, transform 0.2s;
}

.wide-event-card:hover {
    border-color: var(--primary-hover);
    transform: translateY(-3px);
}

.wide-event-image {
    height: 14rem;
    background: var(--bg-card);
    position: relative;
    overflow: hidden;
}

.wide-event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wide-event-content {
    padding: 1.5rem;
}

.wide-category {
    color: var(--primary-light);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.625rem;
}

.wide-event-content h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.wide-event-content p {
    color: rgba(240,240,248,0.45);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.trending-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.trending-tags span {
    padding: 0.5rem 0.875rem;
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--primary-light);
    font-size: 0.8125rem;
    border: 1px solid rgba(96,165,250,0.15);
}


/* ================================
   PROFILE PAGE
   ================================ */

.profile-main {
    padding-bottom: 4rem;
}

.cover-photo {
    height: 13rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--gradient-dark-1) 0%, var(--bg-card) 60%, var(--gradient-dark-2) 100%);
}

.cover-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-header {
    padding: 0 1.5rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.profile-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: -3rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.profile-avatar {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--bg-main);
    flex-shrink: 0;
    background: var(--accent);
    position: relative;
    z-index: 2;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-actions {
    display: flex;
    gap: 0.625rem;
    padding-bottom: 0.5rem;
}

.btn-outline-profile {
    padding: 0.5rem 1.125rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: var(--text-primary);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-outline-profile:hover {
    background: var(--bg-card);
}



.btn-follow {
    padding: 0.5rem 1.125rem;
    border-radius: 0.75rem;
    border: none;
    background: var(--primary);
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-follow:hover {
    background: var(--primary-hover);
}

.btn-following {
    padding: 0.5rem 1.125rem;
    border-radius: 0.75rem;
    border: 1px solid var(--bg-card);
    background: var(--bg-card);
    color: var(--gray-light);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-following:hover {
    background: var(--bg-card);
    color: var(--white);
    border-color: var(--primary);
}

.profile-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.profile-name {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.creator-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(59,126,248,0.12);
    color: var(--primary-light);
    font-size: 0.6875rem;
    font-weight: 600;
    border: 1px solid rgba(59,126,248,0.25);
    letter-spacing: 0.03em;
}

.profile-handle {
    font-size: 0.875rem;
    color: rgba(240,240,248,0.45);
    margin: 0;
}

.profile-bio {
    font-size: 0.875rem;
    color: rgba(240,240,248,0.75);
    line-height: 1.65;
    margin: 0;
    max-width: 32rem;
}

.profile-meta {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: rgba(240,240,248,0.4);
    font-size: 0.8125rem;
}

.meta-item i {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.6;
}

.profile-stats {
    display: flex;
    gap: 2rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.stat-item strong {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
}

.stat-item span {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.4);
}

.interest-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.interest-tag {
    padding: 0.3125rem 0.875rem;
    border-radius: 999px;
    background: rgba(59,126,248,0.08);
    color: var(--primary-light);
    font-size: 0.75rem;
    border: 1px solid rgba(59,126,248,0.18);
}

/* PROFILE TABS */

.profile-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 0 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.profile-tabs::-webkit-scrollbar {
    display: none;
}

.profile-tab {
    padding: 1rem 0;
    margin-right: 1.75rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(240,240,248,0.4);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}

.profile-tab:hover {
    color: rgba(240,240,248,0.75);
}

.active-tab {
    color: var(--text-primary) !important;
    border-bottom-color: var(--primary) !important;
}

.tab-content {
    display: none;
    padding: 1.5rem;
}

.active-content {
    display: block;
}

/* PROFILE EVENT CARDS */

.events-section-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(240,240,248,0.25);
    margin-bottom: 1rem;
}

.profile-event-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1.125rem;
    overflow: hidden;
    margin-bottom: 1rem;
    transition: border-color 0.2s, transform 0.2s;
}

.profile-event-card:hover {
    border-color: var(--primary-hover);
    transform: translateY(-2px);
}

.past-event {
    opacity: 0.55;
}

.profile-event-image {
    height: 8rem;
    background: var(--bg-card);
    position: relative;
    overflow: hidden;
}

.profile-event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-event-body {
    padding: 1rem;
}

.profile-event-body h3 {
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
}

.profile-event-body > p {
    font-size: 0.8125rem;
    color: rgba(240,240,248,0.45);
    margin-bottom: 0.875rem;
}

.event-cat-badge {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    background: rgba(0,0,0,0.65);
    color: var(--text-primary);
    font-size: 0.6875rem;
    padding: 0.3125rem 0.625rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

.event-tonight-badge {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    background: var(--primary-hover);
    color: var(--white);
    font-size: 0.6875rem;
    padding: 0.3125rem 0.625rem;
    border-radius: 999px;
}

.event-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mini-attendees {
    display: flex;
    align-items: center;
}

.mini-av {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--bg-card);
    margin-right: -0.4rem;
    overflow: hidden;
}

.mini-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-attendees span {
    margin-left: 0.875rem;
    font-size: 0.75rem;
    color: rgba(240,240,248,0.45);
}

.past-label {
    font-size: 0.6875rem;
    color: rgba(240,240,248,0.3);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
}

/* COMMUNITIES TAB */

.community-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.2s;
}

.community-card:hover {
    border-color: rgba(255,255,255,0.15);
}

.community-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: var(--primary);
    flex-shrink: 0;
    overflow: hidden;
}

.community-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.community-info {
    flex: 1;
}

.community-info h3 {
    font-size: 0.875rem;
    margin-bottom: 0.2rem;
}

.community-info p {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.4);
    margin: 0;
}

.join-btn {
    padding: 0.4375rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    color: rgba(240,240,248,0.55);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.join-btn:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* MEDIA GRID */

.media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.media-tile {
    aspect-ratio: 1;
    background: var(--bg-card);
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.07);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}

.media-tile:hover {
    border-color: var(--primary);
    transform: scale(1.02);
}

.media-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* RIGHT SIDEBAR WIDGETS */

.sidebar-stat-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sidebar-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.875rem;
    border-radius: 0.875rem;
    background: rgba(255,255,255,0.03);
}

.sidebar-stat-item span {
    color: rgba(240,240,248,0.5);
    font-size: 0.8rem;
}

.sidebar-stat-item strong {
    color: var(--text-primary);
}

.sidebar-muted-copy {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.45);
    margin-bottom: 0.75rem;
}

.trending-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.trending-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.trending-num {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 0.75rem;
    color: rgba(240,240,248,0.2);
    min-width: 1.25rem;
}

.trending-item p {
    font-size: 0.8125rem;
    color: var(--text-primary);
    margin: 0 0 0.125rem;
}

.trending-item span {
    font-size: 0.6875rem;
    color: rgba(240,240,248,0.35);
}

.creator-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.creator-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.creator-av {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    overflow: hidden;
}

.creator-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.creator-info {
    flex: 1;
    min-width: 0;
}

.creator-info p {
    font-size: 0.8125rem;
    color: var(--text-primary);
    margin: 0 0 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.creator-info span {
    font-size: 0.6875rem;
    color: rgba(240,240,248,0.35);
}

.follow-small-btn {
    padding: 0.375rem 0.875rem;
    border-radius: 0.625rem;
    border: 1px solid rgba(59,126,248,0.35);
    background: rgba(59,126,248,0.08);
    color: var(--primary-light);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.follow-small-btn:hover {
    background: rgba(59,126,248,0.2);
}

.edit-cat-btn {
    padding: 0.375rem 0.875rem;
    border-radius: 0.625rem;
    border: 1px solid rgba(59,126,248,0.35);
    background: rgba(59,126,248,0.08);
    color: var(--primary-light);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.edit-cat-btn:hover {
    background: rgba(59,126,248,0.2);
}
/* ================================
   AUTH / LOGIN PAGES
   ================================ */

.auth-shell {
    min-height: 100vh;
    background: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

.auth-shell::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(59,126,248,0.15);
    filter: blur(120px);
    top: -100px;
    right: -100px;
    pointer-events: none;
}

.auth-shell::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(124,58,237,0.12);
    filter: blur(120px);
    bottom: -150px;
    left: -100px;
    pointer-events: none;
}

.auth-wrap {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
    /* max-width: 56rem; */
    width: 100%;
}

.auth-left h1 {
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.auth-left p {
    color: rgba(240,240,248,0.5);
    font-size: 1rem;
}

.auth-features {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: rgba(240,240,248,0.7);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
}

.feature-item i {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: rgba(59,126,248,0.12);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.auth-card {
    background: rgba(18,18,26,0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.03),
        0 20px 60px rgba(0,0,0,0.4);
    border-radius: 1.5rem;
    padding: 2rem;
    width: 100%;
    flex-shrink: 0;
}

.auth-card:hover {
    border-color: rgba(96,165,250,0.22);
}
.auth-card h2 {
    font-size: 1.375rem;
    margin-bottom: 0.375rem;
}

.auth-card > p {
    color: rgba(240,240,248,0.45);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.auth-card hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.07);
    margin: 1.25rem 0;
}

.auth-step-2 {
    display: none;
}

.auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
}

.auth-options a {
    color: var(--primary-light);
    text-decoration: none;
}

.remember-me {
    color: rgba(240,240,248,0.65);
}

.step-header {
    margin-bottom: 1.5rem;
}

.step-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(59,126,248,0.12);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.875rem;
}

.step-header h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.step-header p {
    color: rgba(240,240,248,0.5);
    font-size: 0.9rem;
    margin: 0;
}

.interest-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}

.interest-card {
    position: relative;
    background: var(--bg-card-alt);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.interest-card:hover {
    border-color: rgba(59,126,248,0.5);
    transform: translateY(-2px);
}

.interest-card input {
    display: none;
}

.interest-card i {
    display: block;
    font-size: 1.25rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.interest-card span {
    display: block;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: 'DM Sans', sans-serif;
}

.interest-card:has(input:checked) {
    border-color: var(--primary);
    background: rgba(59,126,248,0.12);
    box-shadow: 0 0 0 2px rgba(59,126,248,0.15);
}

@media (max-width: 576px) {
    .interest-grid {
    grid-template-columns: repeat(2, 1fr);
    }
}

.admin-main {
    padding: 2rem 1.5rem 3rem;
}

.admin-page-shell {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.admin-page-header h1 {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
}

.admin-subtitle {
    color: rgba(240,240,248,0.6);
    margin: 0;
    max-width: 40rem;
}

.admin-pill-btn {
    border-radius: 999px;
    padding: 0.75rem 1rem;
}

.admin-hero-card {
    background: linear-gradient(135deg, rgba(59,126,248,0.25), rgba(18,18,26,0.95));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.5rem;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.admin-hero-card h2 {
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
}

.admin-hero-card p {
    color: rgba(240,240,248,0.7);
    margin: 0;
}

.admin-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
    font-size: 0.82rem;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.15rem;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.stat-icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.9rem;
    display: grid;
    place-items: center;
    background: rgba(59,126,248,0.16);
    color: var(--primary-light);
    font-size: 1rem;
}

.stat-label {
    color: rgba(240,240,248,0.6);
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
}

.stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.admin-section-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 1rem;
}

.admin-panel {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.25rem;
    padding: 1.1rem;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

.section-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.section-head-row h3 {
    margin: 0;
    font-size: 1rem;
}

.admin-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.user-row{
    background: rgba(255,255,255,0.03);
}

.admin-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.95rem;
    background: rgba(255,255,255,0.03);
}

.admin-list-item strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.2rem;
}

.admin-list-item span {
    color: rgba(240,240,248,0.6);
    font-size: 0.8rem;
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background: rgba(59,126,248,0.16);
    color: var(--primary-light);
}

.admin-empty {
    text-align: center;
    padding: 1rem;
    color: rgba(240,240,248,0.5);
    border: 1px dashed rgba(255,255,255,0.08);
    border-radius: 0.95rem;
}

.admin-table {
    margin: 0;
    color: var(--text-primary);
    background: transparent;
    border-collapse: separate;
    border-spacing: 0;
}

.admin-table thead th {
    color: rgba(240,240,248,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-weight: 600;
    background: rgba(255,255,255,0.03);
}

.admin-table td, .admin-table th {
    vertical-align: middle;
    background: transparent;
    border-color: rgba(255,255,255,0.06);
}

.admin-table tbody tr {
    background: transparent;
}

.admin-table tbody tr:hover {
    background: rgba(255,255,255,0.04);
}

.admin-table .table-responsive {
    border-radius: 1rem;
    overflow: hidden;
}

.admin-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.admin-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.admin-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.admin-action-group-stack {
    flex-direction: column;
    align-items: flex-start;
}

.admin-action-btn-primary {
    background: rgba(59,126,248,0.18);
    color: var(--primary-light);
    border-color: rgba(96,165,250,0.22);
}

.admin-action-btn-success {
    background: rgba(34,197,94,0.16);
    color: #7ee7a3;
    border-color: rgba(34,197,94,0.22);
}

.admin-action-btn-warning {
    background: rgba(245,158,11,0.16);
    color: #f8c56a;
    border-color: rgba(245,158,11,0.22);
}

.admin-action-btn-danger {
    background: rgba(239,68,68,0.16);
    color: #ff9c9c;
    border-color: rgba(239,68,68,0.22);
}

.admin-event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.admin-event-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.admin-user-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem;
    border-radius: 1.2rem;
    background: linear-gradient(135deg, rgba(59,126,248,0.16), rgba(18,18,26,0.95));
    border: 1px solid rgba(255,255,255,0.08);
}

.admin-user-hero-main {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.admin-user-avatar {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 1.15rem;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.12);
    flex-shrink: 0;
}

.admin-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-user-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.admin-user-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 1rem;
    padding: 1rem;
}

.admin-user-card h3 {
    margin-bottom: 0.8rem;
    font-size: 1rem;
}

.admin-user-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: rgba(240,240,248,0.72);
}

.admin-user-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.admin-user-stat {
    padding: 0.75rem;
    border-radius: 0.9rem;
    background: rgba(255,255,255,0.04);
}

.admin-user-stat strong {
    display: block;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.admin-user-stat span {
    color: rgba(240,240,248,0.6);
    font-size: 0.8rem;
}

.admin-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.admin-category-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 1rem;
    padding: 1rem;
}

.admin-category-card h3 {
    margin-bottom: 0.3rem;
    font-size: 1rem;
}

.admin-category-form {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 1rem;
    padding: 1rem;
}

.admin-category-form .form-control {
    background: var(--bg-card-alt);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.community-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.community-card-modern {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.15rem;
    padding: 1rem;
    display: flex;
    gap: 0.9rem;
    align-items: center;
}

.community-avatar-modern {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--primary), var(--purple));
    flex-shrink: 0;
}

.community-card-modern h4 {
    margin-bottom: 0.2rem;
    font-size: 0.95rem;
}

.community-card-modern p {
    margin: 0;
    color: rgba(240,240,248,0.6);
    font-size: 0.84rem;
}

.event-admin-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.event-admin-image {
    height: 10rem;
    background: linear-gradient(135deg, rgba(59,126,248,0.25), rgba(155,92,246,0.2));
    position: relative;
}

.event-admin-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-admin-body {
    padding: 1rem;
}

.event-admin-body h4 {
    margin-bottom: 0.35rem;
    font-size: 1rem;
}

.event-admin-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: rgba(240,240,248,0.6);
    font-size: 0.84rem;
    margin-bottom: 0.8rem;
}

.event-admin-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.admin-field {
    margin-bottom: 1rem;
}

.auth-field .form-control {
    background: var(--bg-card-alt);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-primary);
    border-radius: 0.75rem;
    padding: 0.6875rem 0.875rem;
    font-size: 0.9375rem;
    font-family: 'DM Sans', sans-serif;
    width: 100%;
    transition: border-color 0.2s;
}

.auth-field .form-control:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg-card-alt);
    box-shadow: 0 0 0 3px rgba(59,126,248,0.12);
}

.auth-field .form-control:hover {
    border-color: rgba(22, 111, 254, 0.15);
}

.auth-field .form-control::placeholder {
    color: rgba(240,240,248,0.25);
}

.auth-field {
    margin-bottom: 1.25rem;
}

.auth-field label {
    display: block;
    font-size: 0.8125rem;
    color: rgba(240,240,248,0.55);
    margin-bottom: 0.375rem;
    font-family: 'DM Sans', sans-serif;
}

.auth-field .form-control {
    background: var(--bg-card-alt);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-primary);
    border-radius: 0.75rem;
    padding: 0.6875rem 0.875rem;
    font-size: 0.9375rem;
    font-family: 'DM Sans', sans-serif;
    width: 100%;
    transition: border-color 0.2s;
}

.auth-field .form-control:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg-card-alt);
    box-shadow: 0 0 0 3px rgba(59,126,248,0.12);
}

.auth-field .form-control:hover {
    border-color: rgba(22, 111, 254, 0.15);
}

.auth-field .form-control::placeholder {
    color: rgba(240,240,248,0.25);
}

.password-field {
    position: relative;
}

.password-field i {
    position: absolute;
    right: 1rem;
    top: 50%;
    /* transform: translateY(-50%); */
    cursor: pointer;
    color: rgba(240,240,248,0.5);
}

.auth-submit-btn {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.875rem;
    border: none;
    background: linear-gradient(
        135deg,
        var(--primary),
        var(--primary-hover)
    );
    color: var(--white) !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: all 0.25s ease;
}

.auth-submit-btn:hover {
    /* background: var(--primary-hover); */
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(59,126,248,0.1);
}

.auth-footer {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 0.875rem;
    color: rgba(240,240,248,0.45);
}

.auth-footer a {
    color: var(--primary-light);
}


.google-btn, .back-to-login-btn {
    width: 100%;
    background-color: var(--white) !important;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--bg-card) !important;
    padding: 0.75rem;
    border-radius: 0.875rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.google-btn:hover {
    background: var(--primary-hover) !important;
    color: var(--white) !important;
    transform: translateY(-2px);

}



.radio-group {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.375rem;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(240,240,248,0.7);
    font-size: 0.875rem;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
}

@media (max-width: 768px) {
    .auth-left {
        display: none;
    }

    .auth-card {
        padding: 1.5rem;
    }

    .auth-wrap {
        justify-content: center;
    }
}

/* ================================
   MOBILE TOP NAV
   ================================ */

.mobile-top-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3.5rem;
    background: rgba(6,6,8,0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 0 1.25rem;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
}

.mobile-nav-logo {
    font-family: "Palanquin Dark", sans-serif;
    font-weight: 800;
    font-size: 1.375rem;
    color: var(--text-primary);
    text-decoration: none;
}

.mobile-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.mobile-nav-icon {
    width: 2.375rem;
    height: 2.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    color: rgba(240,240,248,0.5);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    position: relative;
}

.mobile-nav-icon:hover,
.mobile-nav-icon.active-icon {
    background: var(--bg-card);
    color: var(--text-primary);
}

.mobile-nav-icon i {
    width: 1.25rem;
    height: 1.25rem;
}

.notif-dot {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--danger);
    border: 1.5px solid var(--bg-main);
}

.mobile-nav-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--accent);
    overflow: hidden;
    margin-left: 0.375rem;
    border: 2px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.mobile-nav-avatar:hover {
    border-color: var(--primary);
}

.mobile-nav-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ================================
   MOBILE BOTTOM TAB BAR
   ================================ */

.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(3.5rem + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(6,6,8,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,0.07);
    align-items: center;
    justify-content: space-around;
    z-index: 1000;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: rgba(240,240,248,0.35);
    text-decoration: none;
    font-size: 0.625rem;
    font-family: 'DM Sans', sans-serif;
    flex: 1;
    height: 100%;
    padding-bottom: 0.25rem;
    transition: color 0.2s;
    position: relative;
}

.bottom-nav-item i {
    width: 1.375rem;
    height: 1.375rem;
}

.bottom-nav-item span {
    color: inherit;
    font-size: 0.625rem;
}

.bottom-nav-item:hover {
    color: rgba(240,240,248,0.7);
}

.active-bottom-item {
    color: var(--primary);
}

.active-bottom-item span {
    color: var(--primary);
}

.active-bottom-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5rem;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--primary);
}

.bottom-nav-create {
    width: 2.875rem;
    height: 2.875rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    flex: none;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 18px rgba(59,126,248,0.4);
    transition: background 0.2s, transform 0.2s;
    padding: 0;
}

.bottom-nav-create:hover {
    background: var(--primary-hover);
    transform: scale(1.08);
    color: var(--white);
}

.bottom-nav-create::before {
    display: none;
}

.bottom-nav-create span {
    display: none;
}

/* hide old nav elements */
.phone-nav,
.mobile-nav {
    display: none !important;
}


/* ================================
   BOOTSTRAP OVERRIDES
   ================================ */

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    border-radius: 0.75rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9375rem;
}

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.form-control {
    background: var(--bg-card-alt);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-primary);
    border-radius: 0.75rem;
    font-family: 'DM Sans', sans-serif;
}

.form-control:focus {
    background: var(--bg-card-alt);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59,126,248,0.12);
    color: var(--text-primary);
}

.form-control::placeholder {
    color: rgba(240,240,248,0.25);
}

.card {
    background: var(--bg-card) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 1.25rem !important;
    color: var(--text-primary);
}


/* ================================
   RESPONSIVE
   ================================ */

/* Tablet: 769px - 992px */
@media (max-width: 992px) {
    /* .sidebar {
        width: 22%;
    } */
    .right-sidebar {
        display: none;
    }
    .main-content {
        margin-left: 22%;
        margin-right: 0;
    }
    .feed {
        margin-left: 22%;
        margin-right: 0;
        max-width: none;
    }
    .discover-page,
    .profile-main {
        margin-left: 22%;
        margin-right: 0;
    }
}

/* Mobile: up to 768px */
@media (max-width: 768px) {
    html { font-size: 15px; }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1rem; }

    /* .sidebar { display: none; } */
    .right-sidebar { display: none; }

    .mobile-top-nav { display: flex; }
    .mobile-bottom-nav { display: flex; }

    .main-content {
        margin-left: 0;
        margin-right: 0;
    }

    .feed {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        padding: 5rem 1rem 6rem;
    }

    .discover-page {
        margin-left: 0;
        margin-right: 0;
        padding: 5rem 1rem 6rem;
    }

    .profile-main {
        margin-left: 0;
        margin-right: 0;
        padding-top: 3.5rem;
        padding-bottom: 6rem;
    }

    .post-image {
        height: 15rem;
    }

    .cover-photo {
        height: 8rem;
    }

    .profile-top-row {
        flex-direction: column;
        align-items: flex-start;
        margin-top: -2rem;
        gap: 0.875rem;
    }

    .profile-actions {
        width: 100%;
    }

    .btn-outline-profile,
    .btn-follow,
    .btn-following {
        flex: 1;
        text-align: center;
    }

    .profile-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .search-bar {
        height: auto;
        padding: 0.75rem 1rem;
    }

    .event-image {
        height: 10rem;
    }

    .wide-event-image {
        height: 11rem;
    }

    .auth-wrap {
        flex-direction: column;
        gap: 2rem;
    }

    .auth-card {
        max-width: 100%;
    }

    .auth-left h1 {
        font-size: 2rem;
    }
}

/* Small phones: up to 480px */
@media (max-width: 480px) {
    html { font-size: 14px; }

    .post-card { padding: 1rem; }
    .profile-name { font-size: 1.25rem; }

    .media-grid {
        gap: 0.375rem;
    }

    .category-pill {
        padding: 0.5rem 0.875rem;
    }

    .bottom-nav-create {
        width: 2.625rem;
        height: 2.625rem;
    }
}




/* ================================
   NOTIFICATIONS PAGE
   ================================ */

.notifications-page{
    padding: 2rem 1.5rem 5rem;
}

/* TOP */

.notif-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:1rem;
    margin-bottom:1.5rem;
}

.notif-top h1{
    font-size:2rem;
    margin-bottom:0.35rem;
}

.notif-top p{
    color:rgba(240,240,248,0.45);
    font-size:0.9rem;
}

.mark-read-btn{
    padding:0.75rem 1rem;
    border:none;
    border-radius:0.875rem;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,0.07);
    color:var(--text-primary);
    font-size:0.8125rem;
    font-family:'DM Sans', sans-serif;
    transition:0.2s;
}

.mark-read-btn:hover{
    background:var(--bg-hover);
}

/* FILTERS */

.notif-filter-row{
    display:flex;
    gap:0.75rem;
    overflow-x:auto;
    margin-bottom:2rem;
    scrollbar-width:none;
}

.notif-filter-row::-webkit-scrollbar{
    display:none;
}

.notif-pill{
    padding:0.625rem 1rem;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.07);
    background:var(--bg-card);
    color:rgba(240,240,248,0.5);
    white-space:nowrap;
    font-size:0.875rem;
    font-family:'DM Sans', sans-serif;
    transition:0.2s;
}

.notif-pill:hover{
    color:var(--text-primary);
    background:var(--bg-card);
}

/* SECTION LABEL */

.notif-section-label{
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:rgba(240,240,248,0.3);
    margin-bottom:1rem;
    margin-top:2rem;
}

/* NOTIFICATION CARD */

.notif-card{
    display:flex;
    align-items:center;
    gap:1rem;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:1.25rem;
    padding:1rem;
    margin-bottom:1rem;
    transition:0.2s;
    position:relative;
}

.notif-card:hover{
    transform:translateY(-2px);
    border-color:var(--primary-hover);
}

/* UNREAD */

.unread-notif{
    background:rgba(59,126,248,0.08);
    border-color:rgba(59,126,248,0.25);
}

.notif-indicator{
    width:0.5rem;
    height:0.5rem;
    border-radius:50%;
    background:var(--primary);
    position:absolute;
    right:1rem;
    top:1rem;
}

/* AVATAR */

.notif-avatar{
    width:3rem;
    height:3rem;
    border-radius:50%;
    overflow:hidden;
    background:var(--bg-card);
    flex-shrink:0;
}

.notif-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* CONTENT */

.notif-content{
    flex:1;
}

.notif-content p{
    margin-bottom:0.25rem;
    font-size:0.92rem;
    line-height:1.5;
}

.notif-content strong{
    color:var(--text-primary);
}

.notif-time{
    color:rgba(240,240,248,0.35);
    font-size:0.75rem;
}

/* BUTTONS */

.notif-action-btn,
.follow-back-btn{
    padding:0.55rem 1rem;
    border:none;
    border-radius:0.75rem;
    background:var(--primary-hover);
    color:white;
    font-size:0.8rem;
    font-family:'DM Sans', sans-serif;
    transition:0.2s;
}

.notif-action-btn:hover,
.follow-back-btn:hover{
    background:var(--primary-hover-2);
}

/* EVENT REMINDER */

.event-reminder-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    background:linear-gradient(
        135deg,
        rgba(37,99,235,0.15),
        rgba(59,126,248,0.05)
    );
    border:1px solid rgba(59,126,248,0.2);
    border-radius:1.5rem;
    padding:1.25rem;
    margin:1.5rem 0;
}

.event-reminder-left{
    display:flex;
    align-items:center;
    gap:1rem;
}

.event-icon{
    width:3rem;
    height:3rem;
    border-radius:1rem;
    background:rgba(59,126,248,0.15);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary-light);
    font-size:1rem;
}

.event-reminder-card h3{
    font-size:1rem;
    margin-bottom:0.25rem;
}

.event-reminder-card p{
    font-size:0.8125rem;
    color:rgba(240,240,248,0.45);
    margin:0;
}

.join-event-btn{
    padding:0.75rem 1rem;
    border:none;
    border-radius:0.875rem;
    background:var(--primary);
    color:var(--white);
    font-size:0.8125rem;
    font-family:'DM Sans', sans-serif;
    white-space:nowrap;
}

.join-event-btn:hover{
    background:var(--primary-hover);
}

/* SIDEBAR */

.upcoming-event-item{
    padding:0.875rem 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.upcoming-event-item:last-child{
    border-bottom:none;
}

.upcoming-event-item p{
    margin-bottom:0.2rem;
    font-size:0.875rem;
}

.upcoming-event-item span{
    color:rgba(240,240,248,0.35);
    font-size:0.75rem;
}

/* MOBILE */

@media (max-width:768px){

    .notifications-page{
        padding:5rem 1rem 6rem;
    }

    .notif-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .notif-card{
        align-items:flex-start;
    }

    .event-reminder-card{
        flex-direction:column;
        align-items:flex-start;
    }

    .join-event-btn{
        width:100%;
    }

}


/* ================================
   COMMUNITIES PAGE
   Add this block to style2.css
   ================================ */

.communities-page {
    padding: 2rem 1.5rem 5rem;
}

/* TOP HEADER */

.communities-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.communities-top h1 {
    font-size: 2rem;
    margin-bottom: 0.35rem;
}

.communities-top p {
    color: rgba(240,240,248,0.45);
    font-size: 0.9rem;
    margin: 0;
}

.create-community-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.875rem;
    border: none;
    background: var(--primary);
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    flex-shrink: 0;
}

.create-community-btn:hover {
    background: var(--primary-hover);
}

/* SECTION */

.comm-section {
    margin-bottom: 3rem;
}

/* COMMUNITY ICON */

.comm-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1rem;
    flex-shrink: 0;
}

/* LARGE JOINED CARD */

.comm-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1.375rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
    transition: border-color 0.2s, transform 0.2s;
}

.comm-card:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

.comm-card-joined {
    border-color: rgba(59,126,248,0.2);
}

.comm-card-banner {
    height: 7rem;
    background: var(--bg-card);
    position: relative;
    overflow: hidden;
}

.comm-card-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

.comm-category-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(0,0,0,0.65);
    color: var(--text-primary);
    font-size: 0.6875rem;
    padding: 0.3125rem 0.75rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    font-family: 'DM Sans', sans-serif;
}

.comm-card-body {
    padding: 1.25rem;
}

.comm-card-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.875rem;
}

.comm-card-info {
    flex: 1;
    min-width: 0;
}

.comm-card-info h3 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comm-card-info p {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0;
}

.comm-card-info p span {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.4);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.comm-card-info p span i {
    font-size: 0.6875rem;
    opacity: 0.7;
}

.comm-desc {
    font-size: 0.875rem;
    color: rgba(240,240,248,0.55);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* JOINED BUTTON */

.joined-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(59,126,248,0.3);
    background: rgba(59,126,248,0.08);
    color: var(--primary-light);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.joined-btn:hover {
    background: rgba(239,68,68,0.08);
    color: var(--danger);
    border-color: rgba(239,68,68,0.3);
}

/* CARD FOOTER */

.comm-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.comm-recent-members {
    display: flex;
    align-items: center;
}

.comm-recent-members span {
    margin-left: 0.875rem;
    font-size: 0.75rem;
    color: rgba(240,240,248,0.35);
}

.comm-view-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: 'DM Sans', sans-serif;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.comm-view-btn:hover {
    background: var(--bg-card);
    border-color: var(--primary);
    color: var(--text-primary);
}

/* DISCOVER CARDS (smaller grid cards) */

.comm-discover-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1.25rem;
    overflow: hidden;
    height: 100%;
    transition: border-color 0.2s, transform 0.2s;
}

.comm-discover-card:hover {
    border-color: var(--primary-hover);
    transform: translateY(-3px);
}

.comm-discover-banner {
    height: 5.5rem;
    background: var(--bg-card);
    position: relative;
    overflow: hidden;
}

.comm-discover-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.comm-discover-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comm-discover-info h3 {
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
}

.comm-discover-info p {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin: 0;
}

.comm-discover-info p span {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.4);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.comm-desc-sm {
    font-size: 0.8125rem;
    color: rgba(240,240,248,0.45);
    line-height: 1.5;
    margin: 0.375rem 0 0 !important;
}

/* JOIN BUTTON */

.join-community-btn {
    align-self: flex-start;
    padding: 0.5rem 1.125rem;
    border-radius: 0.75rem;
    border: none;
    background: var(--primary);
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.join-community-btn:hover {
    background: var(--primary-hover);
}

.join-community-btn.joined-state {
    background: rgba(59,126,248,0.08);
    color: var(--primary-light);
    border: 1px solid rgba(59,126,248,0.3);
}

.join-community-btn.joined-state:hover {
    background: rgba(239,68,68,0.08);
    color: var(--danger);
    border-color: rgba(239,68,68,0.3);
}

/* MOBILE */

@media (max-width: 768px) {
    .communities-page {
        padding: 5rem 1rem 6rem;
    }

    .communities-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .create-community-btn {
        width: 100%;
        justify-content: center;
    }

    .comm-card-top {
        flex-wrap: wrap;
    }

    .comm-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.875rem;
    }

    .comm-view-btn {
        width: 100%;
        justify-content: center;
    }
}

/* PAGE HEADER (shared across feed, discover) */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.75rem;
    gap: 1rem;
}

.page-header h1 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.page-header p {
    color: rgba(240,240,248,0.45);
    font-size: 0.9rem;
    margin: 0;
}

.page-header-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
    padding-top: 0.25rem;
}


/* ================================
   MESSAGES PAGE
   Add this block to style2.css
   ================================ */

/* SHELL -- two panel layout */
.messages-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
    padding: 0;
}

/* ================================
   CONVERSATION LIST (left panel)
   ================================ */

.convo-list {
    width: 22rem;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--bg-main);
}

.convo-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.75rem 1.25rem 1rem;
    flex-shrink: 0;
}

.convo-list-header h2 {
    font-size: 1.375rem;
    margin: 0;
}

.new-msg-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--bg-card);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.new-msg-btn:hover {
    background: var(--bg-card);
    border-color: var(--primary);
    color: var(--primary);
}

/* SEARCH */

.convo-search {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 1.25rem 1rem;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 0.875rem;
    padding: 0.625rem 0.875rem;
    flex-shrink: 0;
}

.convo-search i {
    color: rgba(240,240,248,0.3);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.convo-search input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: 'DM Sans', sans-serif;
}

.convo-search input::placeholder {
    color: rgba(240,240,248,0.25);
}

/* FILTER TABS */

.convo-filter-row {
    display: flex;
    gap: 0.375rem;
    padding: 0 1.25rem 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}

.convo-filter-row::-webkit-scrollbar {
    display: none;
}

.convo-filter {
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.07);
    background: transparent;
    color: rgba(240,240,248,0.45);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.convo-filter:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.active-convo-filter {
    background: var(--primary);
    color: var(--white);
    border-color: transparent;
}

/* CONVO ITEMS */

.convo-items {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
}

.convo-items::-webkit-scrollbar {
    display: none;
}

.convo-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    position: relative;
}

.convo-item:hover {
    background: var(--bg-card-alt);
}

.convo-item.active-convo {
    background: rgba(59,126,248,0.08);
    border-left: 3px solid var(--primary);
}

/* AVATAR */

.convo-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--bg-card);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.convo-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.convo-group-avatar {
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1rem;
    border-radius: 0.75rem;
}

/* ONLINE DOT */

.online-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid var(--bg-main);
}

/* CONVO PREVIEW */

.convo-preview {
    flex: 1;
    min-width: 0;
}

.convo-preview-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.convo-name {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.convo-time {
    font-size: 0.6875rem;
    color: rgba(240,240,248,0.3);
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.convo-preview-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.convo-last-msg {
    font-size: 0.8125rem;
    color: rgba(240,240,248,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* UNREAD BADGE */

.unread-badge {
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--white);
    font-size: 0.625rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    flex-shrink: 0;
}

/* ================================
   CHAT THREAD (right panel)
   ================================ */

.chat-thread {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-width: 0;
    background: var(--bg-main);
}

/* CHAT HEADER */

.chat-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    background: var(--bg-main);
}

.chat-back-btn {
    display: none; /* shows on mobile */
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: var(--text-primary);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.chat-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--bg-card);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-header-info {
    flex: 1;
    min-width: 0;
}

.chat-header-info h4 {
    font-size: 0.9375rem;
    margin: 0 0 0.125rem;
    color: var(--text-primary);
}

.chat-status {
    font-size: 0.75rem;
    color: var(--success);
}

.chat-header-actions {
    display: flex;
    gap: 0.375rem;
}

.chat-action-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.07);
    background: transparent;
    color: rgba(240,240,248,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.chat-action-icon:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* EVENT CONTEXT BANNER */

.chat-event-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: rgba(59,126,248,0.06);
    border-bottom: 1px solid rgba(59,126,248,0.15);
    flex-shrink: 0;
}

.chat-event-banner-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.chat-event-banner-left i {
    color: var(--primary-light);
    font-size: 0.9rem;
}

.chat-event-label {
    font-size: 0.6875rem;
    color: rgba(240,240,248,0.35);
    display: block;
    margin-bottom: 0.125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.chat-event-banner p {
    font-size: 0.8125rem;
    color: var(--primary-light);
    margin: 0;
}

.chat-event-view-btn {
    padding: 0.4375rem 0.875rem;
    border-radius: 0.625rem;
    border: 1px solid rgba(59,126,248,0.3);
    background: rgba(59,126,248,0.1);
    color: var(--primary-light);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    flex-shrink: 0;
}

.chat-event-view-btn:hover {
    background: rgba(59,126,248,0.2);
}

/* MESSAGES AREA */

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.06) transparent;
}

.chat-messages::-webkit-scrollbar {
    width: 4px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
}

/* DATE DIVIDER */

.chat-date-divider {
    text-align: center;
    font-size: 0.6875rem;
    color: rgba(240,240,248,0.3);
    margin: 0.5rem 0;
    font-family: 'DM Sans', sans-serif;
    position: relative;
}

.chat-date-divider::before,
.chat-date-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background: rgba(255,255,255,0.06);
}

.chat-date-divider::before { left: 0; }
.chat-date-divider::after  { right: 0; }

/* MESSAGE BUBBLES */

.chat-msg {
    display: flex;
    gap: 0.625rem;
    align-items: flex-end;
    max-width: 75%;
}

.chat-msg.incoming {
    align-self: flex-start;
}

.chat-msg.outgoing {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.msg-avatar {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    background: var(--bg-card);
    overflow: hidden;
    flex-shrink: 0;
}

.msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.msg-bubble {
    padding: 0.75rem 1rem;
    border-radius: 1.125rem;
    max-width: 100%;
    position: relative;
}

.chat-msg.incoming .msg-bubble {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-bottom-left-radius: 0.25rem;
}

.chat-msg.outgoing .msg-bubble {
    background: var(--primary-hover);
    border-bottom-right-radius: 0.25rem;
}

.msg-bubble p {
    font-size: 0.9rem;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
    line-height: 1.5;
    word-break: break-word;
}

.msg-time {
    font-size: 0.625rem;
    color: rgba(240,240,248,0.35);
    display: block;
    text-align: right;
}

.chat-msg.outgoing .msg-time {
    color: rgba(255,255,255,0.55);
}

/* CHAT INPUT */

.chat-input-wrap {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    background: var(--bg-main);
}

.chat-input-bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.125rem;
    padding: 0.5rem 0.5rem 0.5rem 0.875rem;
    transition: border-color 0.2s;
}

.chat-input-bar:focus-within {
    border-color: rgba(59,126,248,0.35);
}

.chat-input-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    border: none;
    background: transparent;
    color: rgba(240,240,248,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
}

.chat-input-icon:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.06);
}

.chat-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: 'DM Sans', sans-serif;
    min-width: 0;
}

.chat-input::placeholder {
    color: rgba(240,240,248,0.25);
}

.chat-send-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.875rem;
    border: none;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.15s;
}

.chat-send-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.05);
}

/* EMPTY STATE */

.chat-empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.chat-empty-inner {
    text-align: center;
    max-width: 18rem;
}

.chat-empty-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1.25rem;
    background: rgba(59,126,248,0.1);
    border: 1px solid rgba(59,126,248,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: var(--primary-light);
    font-size: 1.5rem;
}

.chat-empty-inner h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.chat-empty-inner p {
    font-size: 0.875rem;
    color: rgba(240,240,248,0.4);
    margin-bottom: 1.5rem;
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 992px) {
    .messages-shell {
        margin-left: 22%;
    }
    .convo-list {
        width: 18rem;
    }
}

@media (max-width: 768px) {
    .messages-shell {
        margin-left: 0;
        padding-top: 3.5rem;
        height: calc(100vh - 3.5rem);
    }

    .convo-list {
        width: 100%;
        height: 100%;
    }

    .chat-thread {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        background: var(--bg-main);
    }

    .chat-back-btn {
        display: flex;
    }

    .chat-event-banner {
        padding: 0.625rem 1rem;
    }

    .chat-messages {
        padding: 1rem;
    }

    .chat-input-wrap {
        padding: 0.875rem 1rem;
        padding-bottom: calc(0.875rem + env(safe-area-inset-bottom));
    }

    .chat-msg {
        max-width: 88%;
    }
}




/* ================================
   ALL EVENTS PAGE
   ================================ */

.all-events-page {
    padding: 2rem 1.5rem 5rem;
}

/* HEADER */

.all-page-header {
    margin-bottom: 1.75rem;
}

.all-page-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: rgba(240,240,248,0.45);
    font-size: 0.875rem;
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--text-primary);
}

.back-link i {
    font-size: 0.8125rem;
}

.all-page-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.all-page-title-row h1 {
    font-size: 2rem;
    margin-bottom: 0.375rem;
}

.all-page-title-row p {
    color: rgba(240,240,248,0.45);
    font-size: 0.875rem;
    margin: 0;
}

.all-page-sort-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.875rem;
    border: 1px solid rgba(255,255,255,0.07);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.all-page-sort-btn:hover {
    background: var(--bg-card);
    border-color: rgba(59,126,248,0.35);
}

/* VIEW TOGGLE */

.all-page-view-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    padding: 0.375rem;
    border-radius: 0.875rem;
}

.view-toggle-btn {
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: transparent;
    border-radius: 0.75rem;
    color: rgba(240,240,248,0.4);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.view-toggle-btn:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
}

.active-view-btn {
    background: var(--primary);
    color: var(--white);
}

/* DATE PILLS */

.date-pill {
    padding: 0.625rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.07);
    background: var(--bg-card);
    color: rgba(240,240,248,0.5);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.date-pill:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.active-date-pill {
    background: rgba(59,126,248,0.12);
    border-color: rgba(59,126,248,0.3);
    color: var(--primary-light);
}

/* EVENTS */

.all-event-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1.25rem;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.all-event-card:hover {
    border-color: var(--primary-hover);
    transform: translateY(-3px);
}

.all-event-image {
    height: 13rem;
    background: var(--bg-card);
    position: relative;
    overflow: hidden;
}

.all-event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.all-event-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.all-event-body h3 {
    font-size: 1rem;
    margin-bottom: 0.875rem;
    line-height: 1.4;
}

/* EVENT META */

.all-event-meta {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}

.all-event-meta span {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: rgba(240,240,248,0.45);
    font-size: 0.8125rem;
}

.all-event-meta i {
    width: 0.875rem;
    color: rgba(240,240,248,0.3);
    flex-shrink: 0;
}

/* FOOTER */

.all-event-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
}

/* LIST VIEW */

.list-view-active .all-event-card {
    flex-direction: row;
    align-items: stretch;
}

.list-view-active .all-event-image {
    width: 18rem;
    min-width: 18rem;
    height: auto;
}

.list-view-active .all-event-body {
    justify-content: space-between;
}

.list-view-active .all-event-meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

/* LOAD MORE */

.load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.load-more-btn:hover {
    background: var(--bg-card);
    border-color: rgba(59,126,248,0.3);
    transform: translateY(-2px);
}

/* LOCATION FILTER */

.location-list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.location-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: rgba(240,240,248,0.7);
    font-size: 0.875rem;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
}

.location-item input[type="radio"] {
    accent-color: var(--primary);
    width: 0.9375rem;
    height: 0.9375rem;
}

/* EMPTY IMAGE FALLBACK */

.all-event-image img[src=""] {
    display: none;
}

.all-event-image:has(img[src=""]) {
    background:
        linear-gradient(
            135deg,
            rgba(59,126,248,0.15),
            rgba(96,165,250,0.05)
        ),
        var(--bg-card);
}

/* SCROLLBAR */

.all-events-page::-webkit-scrollbar {
    display: none;
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 992px) {

    .all-events-page {
        padding: 2rem 1rem 5rem;
    }

    .list-view-active .all-event-card {
        flex-direction: column;
    }

    .list-view-active .all-event-image {
        width: 100%;
        min-width: 100%;
        height: 13rem;
    }

}

@media (max-width: 768px) {

    .all-events-page {
        padding: 5rem 1rem 6rem;
    }

    .all-page-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .all-page-title-row h1 {
        font-size: 1.75rem;
    }

    .all-page-view-toggle {
        width: 100%;
        justify-content: center;
    }

    .view-toggle-btn {
        flex: 1;
    }

    .all-event-image {
        height: 12rem;
    }

    .all-event-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .all-event-footer .rsvp-btn {
        width: 100%;
    }

    .list-view-active .all-event-meta {
        flex-direction: column;
        gap: 0.625rem;
    }

}

@media (max-width: 480px) {

    .all-page-header-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .category-row {
        gap: 0.5rem;
    }

    .category-pill,
    .date-pill {
        font-size: 0.75rem;
        padding: 0.5625rem 0.875rem;
    }

    .all-event-body {
        padding: 1rem;
    }

    .all-event-body h3 {
        font-size: 0.9375rem;
    }

}


/* ================================
   ALL COMMUNITIES PAGE
   ================================ */

.all-communities-page {
    padding: 2rem 1.5rem 5rem;
}

/* COMMUNITY CARD */

.all-community-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1.25rem;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.all-community-card:hover {
    border-color: var(--primary-hover);
    transform: translateY(-3px);
}

/* COVER */

.all-community-cover {
    height: 8rem;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            rgba(59,126,248,0.25),
            rgba(96,165,250,0.08)
        ),
        var(--bg-card);
}

.all-community-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.community-badge {
    position: absolute;
    top: 0.875rem;
    left: 0.875rem;
    background: rgba(0,0,0,0.65);
    color: var(--text-primary);
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    backdrop-filter: blur(4px);
}

.community-members-badge {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(0,0,0,0.65);
    color: var(--text-primary);
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    backdrop-filter: blur(4px);
}

/* BODY */

.all-community-body {
    padding: 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* AVATAR */

.community-avatar-large {
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 1.25rem;
    background: var(--primary);
    border: 4px solid var(--bg-card);
    overflow: hidden;
    margin-top: -3rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.community-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* CONTENT */

.all-community-body h3 {
    font-size: 1rem;
    margin-bottom: 0.625rem;
}

.all-community-body p {
    color: rgba(240,240,248,0.5);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* META */

.community-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.community-meta-row span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(240,240,248,0.45);
    font-size: 0.8125rem;
}

.community-meta-row i {
    color: rgba(240,240,248,0.3);
}

/* FOOTER */

.community-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
}

.mini-community-users {
    display: flex;
    align-items: center;
}

.mini-community-users span {
    margin-left: 0.875rem;
    font-size: 0.75rem;
    color: rgba(240,240,248,0.45);
}

/* BUTTON */

.join-community-btn {
    padding: 0.5625rem 1rem;
    border-radius: 0.75rem;
    border: none;
    background: var(--primary-hover);
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.2s;
}

.join-community-btn:hover {
    background: var(--primary-hover-2);
}

/* LIST VIEW */

.list-view-active .all-community-card {
    flex-direction: row;
    align-items: stretch;
}

.list-view-active .all-community-cover {
    width: 16rem;
    min-width: 16rem;
    height: auto;
}

.list-view-active .all-community-body {
    justify-content: center;
}

/* RESPONSIVE */

@media (max-width: 992px) {

    .list-view-active .all-community-card {
        flex-direction: column;
    }

    .list-view-active .all-community-cover {
        width: 100%;
        min-width: 100%;
        height: 8rem;
    }

}

@media (max-width: 768px) {

    .all-communities-page {
        padding: 5rem 1rem 6rem;
    }

    .community-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .join-community-btn {
        width: 100%;
    }

}

@media (max-width: 480px) {

    .all-community-body {
        padding: 1rem;
    }

    .community-avatar-large {
        width: 4rem;
        height: 4rem;
        border-radius: 1rem;
    }

}





/* ================================
   EDIT PROFILE PAGE
  
   ================================ */

.edit-profile-page {
    padding: 2rem 1.5rem 5rem;
}

/* ================================
   PAGE HEADER
   ================================ */

.ep-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1rem;
}

.back-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(240,240,248,0.55);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--text-primary);
}

.ep-header-right {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.ep-save-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.875rem;
    border: none;
    background: var(--primary);
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.ep-save-btn:hover {
    background: var(--primary-hover);
}

.ep-save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ep-discard-btn {
    padding: 0.625rem 1.125rem;
    border-radius: 0.875rem;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: rgba(240,240,248,0.55);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.ep-discard-btn:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* ================================
   COVER + AVATAR
   ================================ */

.ep-media-section {
    position: relative;
    margin-bottom: 4rem;
}

.ep-cover {
    height: 12rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, var(--gradient-dark-1) 0%, var(--bg-card) 60%, var(--gradient-dark-2) 100%);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,0.07);
}

.ep-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s;
}

.ep-cover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6,6,8,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.ep-cover:hover .ep-cover-overlay {
    opacity: 1;
}

.ep-media-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    border-radius: 0.875rem;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(6,6,8,0.7);
    color: var(--text-primary);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 0.2s;
}

.ep-media-btn:hover {
    background: rgba(59,126,248,0.3);
    border-color: var(--primary);
}

.ep-remove-btn:hover {
    background: rgba(239,68,68,0.3);
    border-color: var(--danger);
}

/* AVATAR */

.ep-avatar-wrap {
    position: absolute;
    bottom: -3.5rem;
    left: 1.5rem;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.ep-avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    border: 4px solid var(--bg-main);
    overflow: hidden;
    background: var(--accent);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.ep-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ep-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6,6,8,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    color: var(--white);
    font-size: 1.25rem;
}

.ep-avatar:hover .ep-avatar-overlay {
    opacity: 1;
}

.ep-avatar-hint {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.35);
    padding-bottom: 0.5rem;
}

/* ================================
   FORM
   ================================ */

.ep-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ep-section {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1.25rem;
    padding: 1.5rem;
}

.ep-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ep-section-head h3 {
    font-size: 0.9375rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.ep-section-head h3 i {
    color: var(--primary);
    font-size: 0.875rem;
}

.ep-section-hint {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.35);
}

/* FIELD */

.ep-field {
    margin-bottom: 1.125rem;
}

.ep-field:last-child {
    margin-bottom: 0;
}

.ep-field label {
    display: block;
    font-size: 0.8125rem;
    color: rgba(240,240,248,0.55);
    margin-bottom: 0.4375rem;
    font-family: 'DM Sans', sans-serif;
}

.ep-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}


/* INPUT */

.ep-input {
    width: 100%;
    background: var(--bg-card-alt);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.75rem;
    padding: 0.6875rem 0.875rem;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: 'DM Sans', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.ep-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59,126,248,0.12);
}

.ep-input::placeholder {
    color: rgba(240,240,248,0.2);
}

.ep-textarea {
    resize: vertical;
    min-height: 5rem;
    line-height: 1.6;
}

.ep-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(240,240,248,0.4)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    padding-right: 2.5rem;
}

.ep-select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* PREFIX INPUT */

.ep-input-prefix-wrap {
    display: flex;
    align-items: center;
    background: var(--bg-card-alt);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ep-input-prefix-wrap:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59,126,248,0.12);
}

.ep-input-prefix {
    padding: 0 0.875rem;
    color: rgba(240,240,248,0.4);
    font-size: 0.875rem;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.06);
    height: 100%;
    display: flex;
    align-items: center;
    min-height: 2.875rem;
}

.ep-social-prefix {
    font-size: 1rem;
}

.ep-input-prefixed {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    flex: 1;
}

.ep-input-prefixed:focus {
    border: none;
    box-shadow: none;
}

.ep-username-status {
    padding: 0 0.875rem;
    flex-shrink: 0;
}

/* META ROW */

.ep-input-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.375rem;
}

.ep-hint {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.3);
}

.ep-char-count {
    font-size: 0.6875rem;
    color: rgba(240,240,248,0.35);
    font-family: 'DM Sans', sans-serif;
    transition: color 0.2s;
}

/* ================================
   INTERESTS GRID
   ================================ */

.ep-interests-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.ep-interest-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5625rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--bg-card-alt);
    color: rgba(240,240,248,0.5);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ep-interest-btn:hover {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.15);
}

.ep-interest-btn.active-interest {
    background: rgba(59,126,248,0.12);
    border-color: rgba(59,126,248,0.35);
    color: var(--primary-light);
}

.ep-interest-btn.active-interest:hover {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.3);
    color: var(--danger);
}

/* ================================
   TOGGLES
   ================================ */

.ep-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ep-toggle-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ep-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ep-toggle-label {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-family: 'DM Sans', sans-serif;
}

.ep-toggle-desc {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.35);
    font-family: 'DM Sans', sans-serif;
}

.ep-toggle-switch {
    cursor: pointer;
    flex-shrink: 0;
}

.ep-toggle-switch input {
    display: none;
}

.ep-toggle-track {
    display: block;
    width: 2.5rem;
    height: 1.375rem;
    background: rgba(255,255,255,0.1);
    border-radius: 999px;
    position: relative;
    transition: background 0.2s;
}

.ep-toggle-track::after {
    content: '';
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: rgba(240,240,248,0.5);
    transition: transform 0.2s, background 0.2s;
}

.ep-toggle-switch input:checked + .ep-toggle-track {
    background: var(--primary);
}

.ep-toggle-switch input:checked + .ep-toggle-track::after {
    transform: translateX(1.125rem);
    background: var(--white);
}

/* ================================
   DANGER ZONE
   ================================ */

.ep-danger-section {
    border-color: rgba(239,68,68,0.2);
    background: rgba(239,68,68,0.03);
}

.ep-danger-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(239,68,68,0.08);
}

.ep-danger-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ep-danger-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.ep-outline-danger {
    background: transparent;
    border: 1px solid rgba(239,68,68,0.35);
    color: var(--danger);
}

.ep-outline-danger:hover {
    background: rgba(239,68,68,0.08);
}

.ep-solid-danger {
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3);
    color: var(--danger);
}

.ep-solid-danger:hover {
    background: var(--danger);
    color: var(--white);
}

/* ================================
   BOTTOM ACTIONS
   ================================ */

.ep-bottom-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

/* ================================
   RIGHT SIDEBAR PREVIEW CARD
   ================================ */

.ep-preview-card {
    background: var(--bg-card-alt);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1rem;
    overflow: hidden;
    margin-top: 1rem;
}

.ep-preview-cover {
    height: 3.5rem;
    background: linear-gradient(135deg, var(--gradient-dark), var(--bg-card));
}

.ep-preview-body {
    padding: 0.75rem;
    padding-top: 0.5rem;
}

.ep-preview-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-card-alt);
    margin-top: -1.25rem;
    margin-bottom: 0.5rem;
}

.ep-preview-name {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
}

.ep-preview-handle {
    font-size: 0.6875rem;
    color: rgba(240,240,248,0.4);
    margin-bottom: 0.375rem;
}

.ep-preview-bio {
    font-size: 0.6875rem;
    color: rgba(240,240,248,0.55);
    line-height: 1.5;
}

/* QUICK ACTIONS */

.ep-quick-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.75rem;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    color: rgba(240,240,248,0.6);
    font-size: 0.8125rem;
    font-family: 'DM Sans', sans-serif;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ep-quick-action:hover {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.15);
}

.ep-quick-action i {
    font-size: 0.875rem;
    width: 1rem;
    text-align: center;
    color: var(--primary);
}

/* ================================
   SAVE TOAST
   ================================ */

.ep-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(4rem);
    background: var(--bg-card);
    border: 1px solid rgba(34,197,94,0.3);
    color: var(--success);
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-family: 'DM Sans', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    z-index: 9999;
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
    pointer-events: none;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.ep-toast.ep-toast-show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ================================
   MOBILE
   ================================ */

@media (max-width: 768px) {
    .edit-profile-page {
        padding: 5rem 1rem 6rem;
    }

    .ep-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .ep-header-right {
        width: 100%;
    }

    .ep-save-btn,
    .ep-discard-btn {
        flex: 1;
        justify-content: center;
    }

    .ep-field-row {
        grid-template-columns: 1fr;
    }

    .ep-cover {
        height: 8rem;
        border-radius: 1rem;
    }

    .ep-avatar-wrap {
        bottom: -2.5rem;
        left: 1rem;
    }

    .ep-avatar {
        width: 5rem;
        height: 5rem;
    }

    .ep-media-section {
        margin-bottom: 3.5rem;
    }

    .ep-danger-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .ep-danger-btn {
        width: 100%;
        text-align: center;
    }

    .ep-bottom-actions {
        flex-direction: column;
    }

    .ep-bottom-actions button {
        width: 100%;
        justify-content: center;
    }
}
















/* ================================
   EVENT DETAIL PAGE
   Add this block to style2.css
   ================================ */

.event-detail-page {
    padding: 2rem 1.5rem 5rem;
}

/* ================================
   TOP BAR
   ================================ */

.ed-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.ed-topbar-actions {
    display: flex;
    gap: 0.5rem;
}

.ed-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--bg-card);
    color: rgba(240,240,248,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ed-icon-btn:hover {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.2);
}

.ed-icon-btn.saved-btn {
    color: var(--primary);
    border-color: rgba(59,126,248,0.35);
    background: rgba(59,126,248,0.08);
}

.menu{
    display: none;
    position: sticky;
    right: 8000;
    /* left: 770px; */
    top: 80px;
    min-width: 180px;
    background-color: var(--bg-card);
    border-radius: 10px;
    box-shadow: 0 5px 15px (var(--shadow));
    overflow: hidden;
    z-index: 1000;
}

.menu a{
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text-primary);
}

.menu a:hover{
    background-color: var(--bg-hover);
    color: var(--accent) !important;
}

/* ================================
   HERO IMAGE
   ================================ */

.ed-hero {
    height: 22rem;
    border-radius: 1.375rem;
    overflow: hidden;
    position: relative;
    background: var(--bg-card);
    margin-bottom: 1.5rem;
}

.ed-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.ed-hero:hover img {
    transform: scale(1.02);
}

.ed-hero-overlay {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ed-live-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 999px;
    background: var(--primary-hover);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.ed-live-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--white);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}

.ed-category-badge {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 999px;
    background: rgba(0,0,0,0.6);
    color: var(--text-primary);
    font-size: 0.75rem;
    backdrop-filter: blur(6px);
}

/* ================================
   TITLE BLOCK
   ================================ */

.ed-title-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.ed-title-main {
    flex: 1;
    min-width: 0;
}

.ed-title {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.625rem;
    line-height: 1.15;
}

.ed-organiser-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ed-organiser-row span {
    font-size: 0.8125rem;
    color: rgba(240,240,248,0.45);
}

.ed-organiser-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--accent);
    overflow: hidden;
    flex-shrink: 0;
}

.ed-organiser-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ed-organiser-name {
    font-size: 0.875rem;
    color: var(--primary-light);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.ed-organiser-name:hover {
    color: var(--primary);
}

/* RSVP BLOCK */

.ed-rsvp-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    flex-shrink: 0;
}

.ed-attendee-stack {
    display: flex;
    align-items: center;
}

.ed-attendee-stack .mini-avatar {
    margin-right: -0.5rem;
}

.ed-attendee-count {
    font-size: 0.8125rem;
    color: rgba(240,240,248,0.45);
    margin-left: 0.875rem;
}

.ed-rsvp-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.875rem;
    border: none;
    background: var(--primary);
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}

.ed-rsvp-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.ed-rsvp-btn.rsvp-done {
    background: rgba(34,197,94,0.15);
    border: 1px solid rgba(34,197,94,0.3);
    color: var(--success);
}

.ed-rsvp-btn.rsvp-done:hover {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.3);
    color: var(--danger);
}

/* ================================
   DETAILS STRIP
   ================================ */

.ed-details-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.ed-detail-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1rem;
    padding: 1rem;
    transition: border-color 0.2s;
}

.ed-detail-item:hover {
    border-color: rgba(255,255,255,0.15);
}

.ed-detail-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: rgba(59,126,248,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-light);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.ed-detail-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ed-detail-label {
    font-size: 0.6875rem;
    color: rgba(240,240,248,0.35);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ed-detail-value {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================================
   TABS
   ================================ */

.ed-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.ed-tabs::-webkit-scrollbar {
    display: none;
}

.ed-tab {
    padding: 0.875rem 0;
    margin-right: 1.75rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(240,240,248,0.4);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}

.ed-tab:hover {
    color: rgba(240,240,248,0.75);
}

.active-ed-tab {
    color: var(--text-primary) !important;
    border-bottom-color: var(--primary) !important;
}

.ed-tab-content {
    display: none;
}

.active-ed-content {
    display: block;
}

/* ================================
   SECTIONS
   ================================ */

.ed-section {
    margin-bottom: 2rem;
}

.ed-section-title {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.ed-section-sub {
    font-size: 0.8125rem;
    color: rgba(240,240,248,0.4);
    margin-bottom: 1.25rem;
}

/* ATTENDEES */

.ed-attendee-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ed-attendee-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 0.75rem;
}

.ed-attendee-info {
    display: flex;
    align-items: center;
    min-width: 0;
}

.ed-attendee-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
}

.ed-attendee-name:hover {
    text-decoration: underline;
}

.ed-attendee-email {
    display: block;
    font-size: 0.8125rem;
    color: rgba(240,240,248,0.4);
    margin-top: 0.125rem;
}

.ed-attendee-tickets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.ed-attendee-ticket-pill {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
}

.ed-attendee-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
}

.ed-attendee-ref {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.35);
    font-family: monospace;
}

.ed-attendee-date {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.35);
}

/* DESCRIPTION */

.ed-description {
    font-size: 0.9375rem;
    color: rgba(240,240,248,0.75);
    line-height: 1.75;
    margin-bottom: 0.75rem;
}

.ed-read-more-btn {
    background: none;
    border: none;
    color: var(--primary-light);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: color 0.2s;
}

.ed-read-more-btn:hover {
    color: var(--primary);
}

/* LINEUP */

.ed-lineup {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ed-lineup-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1rem;
    padding: 0.875rem 1rem;
    transition: border-color 0.2s;
}

.ed-lineup-item:hover {
    border-color: rgba(255,255,255,0.15);
}

.ed-lineup-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.ed-lineup-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ed-lineup-name {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
}

.ed-lineup-role {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.4);
}

.ed-lineup-badge {
    padding: 0.3125rem 0.75rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: rgba(240,240,248,0.5);
    font-size: 0.6875rem;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.08);
}

.headliner-badge {
    background: rgba(59,126,248,0.12);
    color: var(--primary-light);
    border-color: rgba(59,126,248,0.25);
}

/* TAGS */

.ed-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ed-tag {
    padding: 0.4375rem 0.875rem;
    border-radius: 999px;
    background: rgba(59,126,248,0.08);
    color: var(--primary-light);
    font-size: 0.8125rem;
    border: 1px solid rgba(59,126,248,0.18);
    cursor: pointer;
    transition: background 0.2s;
}

.ed-tag:hover {
    background: rgba(59,126,248,0.18);
}

/* ORGANISER CARD */

.ed-organiser-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1.125rem;
    padding: 1.125rem;
}

.ed-org-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--accent);
    overflow: hidden;
    flex-shrink: 0;
}

.ed-org-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ed-org-info {
    flex: 1;
    min-width: 0;
}

.ed-org-info h4 {
    font-size: 0.9375rem;
    margin-bottom: 0.2rem;
}

.ed-org-info span {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.4);
}

.ed-org-actions {
    display: flex;
    gap: 0.5rem;
}

.ed-org-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--bg-card);
    color: rgba(240,240,248,0.7);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.ed-org-btn:hover {
    background: var(--border);
    color: var(--text-primary);
}

.ed-org-msg-btn {
    padding: 0.5rem 0.75rem;
}

/* ================================
   ATTENDEES TAB
   ================================ */

.ed-attendees-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.ed-attendees-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.ed-attendee-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1rem;
    padding: 1rem 0.75rem;
    text-align: center;
    transition: border-color 0.2s, transform 0.2s;
}

.ed-attendee-card:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

.ed-att-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.ed-att-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ed-att-name {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ================================
   LOCATION TAB
   ================================ */

.ed-map-placeholder {
    height: 14rem;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    color: rgba(240,240,248,0.25);
}

.ed-map-placeholder i {
    font-size: 2.5rem;
    color: var(--primary);
    opacity: 0.5;
}

.ed-map-placeholder p {
    font-size: 0.875rem;
    color: rgba(240,240,248,0.4);
    margin: 0;
}

.ed-map-link-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.875rem;
    background: rgba(59,126,248,0.1);
    border: 1px solid rgba(59,126,248,0.25);
    color: var(--primary-light);
    font-size: 0.875rem;
    font-family: 'DM Sans', sans-serif;
    text-decoration: none;
    transition: background 0.2s;
}

.ed-map-link-btn:hover {
    background: rgba(59,126,248,0.2);
    color: var(--primary-light);
}

.ed-address-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1.125rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ed-address-row {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
}

.ed-address-row i {
    color: var(--primary);
    font-size: 0.875rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
    width: 1rem;
}

.ed-address-row > div {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* ================================
   RIGHT SIDEBAR
   ================================ */

.ed-sidebar-rsvp {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ed-sidebar-event-thumb {
    height: 6rem;
    border-radius: 0.875rem;
    background: var(--bg-card);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.ed-sidebar-event-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ed-sidebar-attendees {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.ed-sidebar-attendees span {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.4);
    margin-left: 0.75rem;
}

/* SIMILAR EVENTS */

.ed-similar-card {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    text-decoration: none;
    padding: 0.5rem;
    border-radius: 0.875rem;
    transition: background 0.2s;
}

.ed-similar-card:hover {
    background: var(--bg-card);
}

.ed-similar-thumb {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    overflow: hidden;
    flex-shrink: 0;
}

.ed-similar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ed-similar-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.ed-similar-name {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ed-similar-meta {
    font-size: 0.6875rem;
    color: rgba(240,240,248,0.4);
}

/* LOAD MORE */

.load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

.load-more-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.875rem;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--bg-card);
    color: rgba(240,240,248,0.6);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.load-more-btn:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* ================================
   MOBILE
   ================================ */

@media (max-width: 768px) {
    .event-detail-page {
        padding: 5rem 1rem 6rem;
    }

    .ed-hero {
        height: 14rem;
        border-radius: 1rem;
    }

    .ed-title {
        font-size: 1.375rem;
    }

    .ed-title-block {
        flex-direction: column;
        gap: 1rem;
    }

    .ed-rsvp-block {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ed-details-strip {
        grid-template-columns: 1fr;
    }

    .ed-attendees-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ed-attendees-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ed-organiser-card {
        flex-wrap: wrap;
    }

    .ed-org-actions {
        width: 100%;
    }

    .ed-org-btn:first-child {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .ed-attendees-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ed-details-strip {
        grid-template-columns: 1fr;
    }
}





/* Navbar */

@media (max-width: 768px) {

.mynav{
display: block;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;

  /* padding: 18px 0; */
  background: linear-gradient(90deg, var(--primary), var(--purple));
}

a.navbar-brand{
	font-family: "Palanquin Dark", sans-serif;
    text-align: center;
}
.name{
	padding-top: 20px;


}

ul.navbar-nav{
	list-style-type: none;
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	align-items: center;
	padding-top: 10px;
	/* margin-right: 30px; */
}
ul.navbar-nav img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
ul.navbar-nav a{
	color: var(--white);
	text-decoration: none;
  border: none;
}

ul.navbar-nav a:hover{
	margin-top: -6px;
	color: yellow;
  /* border: 2px solid red; */
  border-radius: 12px;
  padding: 6px;
}
}
/* @media (max-width: 768px) {
    .mynav{
        display:block;
    }
} */




/* ================================
   COMMUNITY DETAIL PAGE
   Add this block to style2.css
   ================================ */

.cd-page {
    padding: 2rem 1.5rem 5rem;
}

/* ================================
   TOP BAR
   ================================ */

.cd-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.cd-topbar-actions {
    display: flex;
    gap: 0.5rem;
}

/* ================================
   BANNER
   ================================ */

.cd-banner {
    height: 11rem;
    border-radius: 1.375rem;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, var(--gradient-dark-1), var(--bg-card), var(--gradient-dark-2));
    margin-bottom: 0;
}

.cd-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}

.cd-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(6,6,8,0.7));
}

/* ================================
   COMMUNITY HEADER
   ================================ */

.cd-header {
    padding: 0 0 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 0;
}

.cd-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: -2.5rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.cd-avatar-wrap {
    flex-shrink: 0;
}

.cd-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 1.25rem;
    border: 4px solid var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.5rem;
    overflow: hidden;
    flex-shrink: 0;
}

.cd-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cd-header-actions {
    display: flex;
    gap: 0.625rem;
    padding-bottom: 0.5rem;
}

/* JOIN BUTTON */

.cd-join-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5625rem 1.25rem;
    border-radius: 0.875rem;
    border: none;
    background: var(--primary);
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.cd-join-btn:hover {
    background: var(--primary-hover);
}

.cd-join-btn.active-join {
    background: rgba(59,126,248,0.1);
    border: 1px solid rgba(59,126,248,0.3);
    color: var(--primary-light);
}

.cd-join-btn.active-join:hover {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.3);
    color: var(--danger);
}

/* NOTIFY BELL */

.cd-notify-btn.active-notify {
    color: var(--primary);
    border-color: rgba(59,126,248,0.35);
    background: rgba(59,126,248,0.08);
}

/* COMMUNITY INFO */

.cd-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cd-name-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
}

.cd-name {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.cd-category-badge {
    padding: 0.25rem 0.875rem;
    border-radius: 999px;
    background: rgba(59,126,248,0.12);
    color: var(--primary-light);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(59,126,248,0.25);
}

.cd-desc {
    font-size: 0.875rem;
    color: rgba(240,240,248,0.65);
    line-height: 1.65;
    margin: 0;
    max-width: 36rem;
}

/* STATS */

.cd-stats-row {
    display: flex;
    gap: 2rem;
}

.cd-stat {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cd-stat strong {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--text-primary);
}

.cd-stat span {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.4);
}

/* MEMBER STACK */

.cd-member-stack {
    display: flex;
    align-items: center;
}

.cd-member-stack span {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.4);
    margin-left: 0.875rem;
}

/* ================================
   TABS
   ================================ */

.cd-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    overflow-x: auto;
    scrollbar-width: none;
}

.cd-tabs::-webkit-scrollbar {
    display: none;
}

.cd-tab {
    padding: 1rem 0;
    margin-right: 1.75rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(240,240,248,0.4);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}

.cd-tab:hover {
    color: rgba(240,240,248,0.75);
}

.active-cd-tab {
    color: var(--text-primary) !important;
    border-bottom-color: var(--primary) !important;
}

.cd-tab-content {
    display: none;
    padding: 1.5rem 0;
}

.active-cd-content {
    display: block;
}

/* ================================
   FEED TAB
   ================================ */

/* Composer sits flush in the feed tab */
.cd-tab-content .composer {
    margin-bottom: 1.25rem;
}

/* ================================
   EVENTS TAB
   ================================ */

.cd-section {
    padding-top: 0.5rem;
}

.cd-section-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.cd-section-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.cd-section-count {
    font-size: 0.8125rem;
    color: rgba(240,240,248,0.4);
}

/* ================================
   MEMBERS TAB
   ================================ */

.cd-members-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 0.875rem;
}

.cd-members-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cd-member-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1rem;
    transition: border-color 0.2s;
}

.cd-member-item:hover {
    border-color: rgba(255,255,255,0.15);
}

.cd-member-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--bg-card);
    overflow: hidden;
    flex-shrink: 0;
}

.cd-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cd-member-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cd-member-name {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cd-member-role {
    font-size: 0.75rem;
    color: rgba(240,240,248,0.4);
}

.cd-admin-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(59,126,248,0.12);
    color: var(--primary-light);
    font-size: 0.6875rem;
    font-weight: 600;
    border: 1px solid rgba(59,126,248,0.25);
    white-space: nowrap;
}

/* ================================
   RIGHT SIDEBAR - ABOUT
   ================================ */

.cd-about-list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-top: 1rem;
}

.cd-about-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: rgba(240,240,248,0.65);
}

.cd-about-item i {
    color: var(--primary);
    width: 1rem;
    text-align: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* ================================
   LINEUP GRID FIX (event detail)
   ================================ */

.ed-lineup {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.ed-lineup .ed-lineup-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 0.75rem;
    justify-content: center;
}

.ed-lineup .ed-lineup-info {
    align-items: center;
}

/* ================================
   MOBILE
   ================================ */

@media (max-width: 768px) {
    .cd-page {
        padding: 5rem 1rem 6rem;
    }

    .cd-banner {
        height: 8rem;
        border-radius: 1rem;
    }

    .cd-header-top {
        flex-wrap: wrap;
        gap: 0.875rem;
        margin-top: -2rem;
    }

    .cd-header-actions {
        width: 100%;
    }

    .cd-join-btn {
        flex: 1;
        justify-content: center;
    }

    .cd-stats-row {
        gap: 1.25rem;
        flex-wrap: wrap;
    }

    .cd-name {
        font-size: 1.25rem;
    }

    .cd-section-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .ed-lineup {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .cd-stats-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}




/* ================================
   COMMENTS PAGE
   Add this block to style2.css
   ================================ */

.comments-page {
    padding: 2rem 1.5rem 8rem; /* extra bottom padding for fixed input bar */
}

/* ================================
   TOP BAR
   ================================ */

.cm-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.cm-topbar-title {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
}

/* ================================
   ORIGINAL POST
   ================================ */

.cm-original-post {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1.25rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

/* POST STATS */

.cm-post-stats {
    display: flex;
    gap: 1.25rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin: 0.75rem 0;
}

.cm-post-stats span {
    font-size: 0.8125rem;
    color: rgba(240,240,248,0.45);
}

.cm-post-stats strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* POST ACTIONS */

.cm-post-actions {
    display: flex;
    gap: 0.25rem;
}

.cm-action-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    color: rgba(240,240,248,0.45);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    flex: 1;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
}

.cm-action-btn:hover {
    color: var(--primary);
    background: rgba(59,126,248,0.08);
}

.cm-action-btn.liked {
    color: var(--danger);
}

/* ================================
   COMMENT COUNT & SORT
   ================================ */

.cm-count-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cm-count-label {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
}

.cm-sort-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    color: rgba(240,240,248,0.55);
    font-size: 0.8125rem;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.cm-sort-btn:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* ================================
   COMMENTS LIST
   ================================ */

.cm-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ================================
   SINGLE COMMENT ITEM
   ================================ */

.cm-item {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    align-items: flex-start;
}

.cm-item:last-of-type {
    border-bottom: none;
}

/* AVATAR */

.cm-avatar {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 50%;
    background: var(--bg-card);
    overflow: hidden;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.cm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* BODY */

.cm-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* BUBBLE */

.cm-bubble {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 1rem;
    border-top-left-radius: 0.25rem;
    padding: 0.75rem 1rem;
    display: inline-block;
    width: 100%;
}

.cm-meta {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.375rem;
}

.cm-username {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
}

.cm-time {
    font-size: 0.6875rem;
    color: rgba(240,240,248,0.35);
}

.cm-text {
    font-size: 0.9rem;
    color: rgba(240,240,248,0.85);
    line-height: 1.55;
    margin: 0;
    word-break: break-word;
}

.cm-mention {
    color: var(--primary-light);
    font-weight: 500;
}

/* COMMENT ACTIONS */

.cm-actions {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding-left: 0.25rem;
}

.cm-like-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    color: rgba(240,240,248,0.4);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.cm-like-btn:hover,
.cm-like-btn.liked {
    color: var(--danger);
}

.cm-like-btn.liked i {
    font-weight: 900; /* solid heart when liked */
}

.cm-reply-trigger {
    background: none;
    border: none;
    color: rgba(240,240,248,0.4);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.cm-reply-trigger:hover {
    color: var(--primary);
}

.cm-action-time {
    font-size: 0.6875rem;
    color: rgba(240,240,248,0.25);
    margin-left: auto;
}

/* ================================
   REPLIES
   ================================ */

.cm-replies {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 2px solid rgba(255,255,255,0.06);
    padding-left: 0.875rem;
}

.cm-reply {
    padding: 0.625rem 0;
    border-bottom: none;
}

.cm-reply-avatar {
    width: 1.875rem;
    height: 1.875rem;
}

/* ================================
   REPLY INPUT
   ================================ */

.cm-reply-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.625rem;
    padding-left: 0.125rem;
}

.cm-reply-avatar-sm {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    background: var(--accent);
    overflow: hidden;
    flex-shrink: 0;
}

.cm-reply-avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cm-reply-input-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 0.4375rem 0.625rem 0.4375rem 0.875rem;
    transition: border-color 0.2s;
}

.cm-reply-input-bar:focus-within {
    border-color: rgba(59,126,248,0.35); 
 }

.cm-reply-to {
    font-size: 0.8125rem;
    color: var(--primary-light);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.cm-reply-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: 'DM Sans', sans-serif;
    min-width: 0;
}

.cm-reply-input::placeholder {
    color: rgba(240,240,248,0.25);
}

.cm-reply-post-btn {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.75rem;
    transition: background 0.2s, transform 0.15s;
}

.cm-reply-post-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.08);
}

/* ================================
   LINKED EVENT (right sidebar)
   ================================ */

.cm-linked-event {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-decoration: none;
    margin-top: 1rem;
}

.cm-linked-thumb {
    height: 7rem;
    border-radius: 0.875rem;
    background: var(--bg-card);
    overflow: hidden;
}

.cm-linked-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cm-linked-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cm-linked-name {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
}

.cm-linked-meta{
    display:flex;
    align-items:center;
    gap:0.45rem;
    font-size:0.8125rem;
    color:var(--text-muted);
    margin-top:0.25rem;
}

.cm-linked-meta i{
    width:0.875rem;
    font-size:0.75rem;
}

/* ================================
   FIXED COMMENT INPUT BAR
   ================================ */

.cm-input-bar {
    position: fixed;
    bottom: 0;
    left: 16.666%; 
    right: 25%; 
    z-index: 500;
    background: rgba(6,6,8,0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 0.875rem 1.5rem;
    padding-bottom: calc(0.875rem + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cm-input-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--accent);
    overflow: hidden;
    flex-shrink: 0;
}

.cm-input-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cm-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    transition: border-color 0.2s;
}

.cm-input-wrap:focus-within {
    border-color: rgba(59,126,248,0.35);
}

.cm-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: 'DM Sans', sans-serif;
    min-width: 0;
}

.cm-input::placeholder {
    color: rgba(240,240,248,0.25);
}

.cm-send-btn {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.8125rem;
    transition: background 0.2s, transform 0.15s;
}

.cm-send-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.05);
}

/* ================================
   MOBILE
   ================================ */

@media (max-width: 992px) {
    .cm-input-bar {
        left: 22%;
        right: 0;
    }
}

@media (max-width: 768px) {
    .comments-page {
        padding: 5rem 1rem 7rem;
    }

    .cm-input-bar {
        left: 0;
        right: 0;
        padding: 0.75rem 1rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }

    .cm-post-actions {
        gap: 0;
    }

    .cm-action-btn {
        font-size: 0.75rem;
        padding: 0.5rem 0.375rem;
    }

    .cm-post-stats {
        gap: 0.875rem;
    }
}





.ce-page{
    max-width:48rem;
    margin:auto;
    padding: 5rem 1.5rem 5rem;
}

.ce-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:1.5rem;
    margin-top:1.5rem;
}

.ce-topbar h2{
    font-size:1.25rem;
    font-weight:700;
    margin:0;
}

.ce-publish-btn{
    border:none;
    border-radius:0.75rem;
    background:var(--primary);
    color:var(--white);
    padding:0.7rem 1.2rem;
    font-weight:600;
}

.ce-form{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.ce-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:1rem;
    padding:1rem;
}
.ce-cover-upload {
    height: 12rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, var(--gradient-dark-1) 0%, var(--bg-card) 60%, var(--gradient-dark-2) 100%);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,0.07);
}

.ce-cover-upload img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s;
}

.ce-card h3{
    font-size:1rem;
    font-weight:700;
    margin-bottom:1rem;
    color:var(--white);
}

.ce-cover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6,6,8,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    opacity: 1;
    transition: opacity 0.2s;
}

.ce-cover-upload:hover .ce-cover-overlay {
    opacity: 1;
}

.ce-cover-upload span{
    color:var(--text-muted);
}

.ce-input,
.ce-textarea{
    width:100%;
    border:none;
    outline:none;

    background:var(--bg-card);

    border:1px solid var(--border);

    color:var(--white);

    border-radius:0.75rem;

    padding:0.85rem 1rem;

    margin-top:0.5rem;
    margin-bottom:1rem;
}

.ce-textarea{
    min-height:8rem;
    resize:none;
}

.ce-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
}

.ce-chips{
    display:flex;
    flex-wrap:wrap;
    gap:0.75rem;
}

.ce-chip{
    border:none;
    background:var(--bg-card);
    color:var(--text-muted);
    padding:0.7rem 1rem;
    border-radius:999px;
}

.ce-chip.active{
    background:var(--primary);
    color:var(--white);
}

.ce-radio-row{
    display:flex;
    gap:2rem;
    margin:1rem 0;
}

.ce-radio-row label{
    color: var(--text-primary);
}

.ticket-tier{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:1rem;
    padding:1rem;
    margin-top:1rem;
}

.ticket-tier h4{
    font-size:0.95rem;
    font-weight:600;
    margin-bottom:1rem;
    color:var(--white);
}

.ticket-tier p{
    color:var(--text-muted);
    font-size:0.85rem;
    margin-bottom:0.5rem;
}

.artist-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
    margin-bottom:1rem;
}

.artist-row:last-child{
    margin-bottom:0;
}

.ce-secondary-btn{
    border:1px solid var(--border);
    background:var(--bg-card);
    color:var(--text-primary);

    border-radius:0.75rem;

    padding:0.8rem 1rem;

    transition:0.2s;

    margin-top:1rem;
}

.ce-secondary-btn:hover{
    background:var(--bg-card);
}

.ce-secondary-btn i{
    margin-right:0.5rem;
}

.event-preview-card{
    position:sticky;
    top:5rem;
}

.preview-cover{
    height:12rem;
    border-radius:1rem;
    overflow:hidden;
    margin-bottom:1rem;
}

.preview-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.preview-category{
    display:inline-block;
    background:var(--primary);
    color:var(--white);
    padding:0.35rem 0.75rem;
    border-radius:999px;
    font-size:.75rem;
    margin-bottom:.75rem;
}

.preview-content h4{
    margin-bottom:.75rem;
    font-size:1.1rem;
}

.preview-meta{
    display:flex;
    flex-direction:column;
    gap:.5rem;
    margin-bottom:1rem;
}

.preview-meta p{
    margin:0;
    color:var(--text-muted);
    font-size:.85rem;
}

.preview-meta i{
    width:1rem;
    margin-right:.5rem;
}

.preview-tags{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin-bottom:1rem;
}

.preview-tags span{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:999px;
    padding:.4rem .75rem;
    font-size:.75rem;
}

.preview-lineup{
    margin-bottom:1rem;
}

.preview-lineup h6{
    margin-bottom:.75rem;
}

.preview-lineup ul{
    margin:0;
    padding-left:1rem;
}

.preview-lineup li{
    color:var(--text-muted);
    font-size:.85rem;
    margin-bottom:.35rem;
}

.preview-tickets{
    border-top:1px solid var(--border);
    padding-top:1rem;
}

.ticket-preview-row{
    display:flex;
    justify-content:space-between;
    margin-bottom:.75rem;
    font-size:.9rem;
}

.preview-btn{
    width:100%;
    margin-top:1rem;
    border:none;
    background:var(--primary);
    color:var(--white);
    border-radius:.75rem;
    padding:.85rem;
    font-weight:600;
}


/* RSVpPAGE */

.rsvp-page{
    padding: 2rem 1.5rem 5rem;
    min-height: 100vh;
}

/* TOPBAR */

.rsvp-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:1.5rem;
}

.rsvp-topbar-title{
    font-size:1rem;
    font-weight:700;
    color:var(--text-primary);
}

/* EVENT STRIP */

.rsvp-event-strip{
    display:flex;
    gap:1rem;
    padding:1rem;
    border-radius:1rem;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,0.06);
    margin-bottom:1.5rem;
}

.rsvp-event-thumb{
    width:90px;
    height:90px;
    border-radius:0.875rem;
    overflow:hidden;
    flex-shrink:0;
}

.rsvp-event-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.rsvp-event-info h3{
    color:var(--white);
    font-size:1.05rem;
    margin-bottom:0.5rem;
}

.rsvp-event-meta{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
}

.rsvp-event-meta span{
    display:flex;
    align-items:center;
    gap:0.4rem;
    color:var(--text-muted);
    font-size:0.8rem;
}

/* STEP INDICATOR */

.rsvp-steps{
    display:flex;
    align-items:center;
    margin-bottom:2rem;
}

.rsvp-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
    color:var(--text-muted);
}

.rsvp-step span{
    font-size:0.75rem;
}

.rsvp-step-num{
    width:2rem;
    height:2rem;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,0.08);
}

.active-step .rsvp-step-num{
    background:var(--primary);
    color:var(--white);
}

.completed-step .rsvp-step-num{
    background:var(--success);
    color:var(--white);
}

.rsvp-step-line{
    flex:1;
    height:2px;
    background:var(--border);
    margin:0 0.5rem;
}

/* HEADINGS */

.rsvp-section-heading{
    color:var(--white);
    font-size:1.5rem;
    margin-bottom:0.35rem;
}

.rsvp-section-sub{
    color:var(--text-muted);
    margin-bottom:1.5rem;
}

/* TICKET CARDS */

.rsvp-tickets-list{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.rsvp-ticket-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    padding:1rem;
    border-radius:1rem;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,0.06);
    transition:0.25s;
}

.rsvp-ticket-card:hover{
    border-color:var(--primary);
}

.selected-ticket{
    border-color:var(--primary);
    box-shadow:0 0 0 1px rgba(59,126,248,.3);
}

.rsvp-ticket-left{
    display:flex;
    gap:1rem;
    align-items:flex-start;
}

.rsvp-ticket-icon{
    width:3rem;
    height:3rem;
    border-radius:0.875rem;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
}

.free-icon{
    background:rgba(34,197,94,.12);
    color:var(--success);
}

.regular-icon{
    background:rgba(59,126,248,.12);
    color:var(--primary);
}

.vip-icon{
    background:rgba(245,158,11,.12);
    color:var(--warning);
}

.table-icon{
    background:rgba(168,85,247,.12);
    color:var(--purple-light);
}

.rsvp-ticket-info h4{
    color:var(--white);
    margin-bottom:0.3rem;
}

.rsvp-ticket-info p{
    color:var(--text-muted);
    font-size:0.85rem;
    margin-bottom:0.4rem;
}

.rsvp-ticket-avail{
    color:var(--text-muted);
    font-size:0.75rem;
}

.rsvp-ticket-name-row{
    display:flex;
    align-items:center;
    gap:0.5rem;
}

.rsvp-ticket-badge{
    padding:0.25rem 0.6rem;
    border-radius:999px;
    font-size:0.7rem;
    font-weight:600;
}

.free-badge{
    background:rgba(34,197,94,.15);
    color:var(--success);
}

.regular-badge{
    background:rgba(59,126,248,.15);
    color:var(--primary);
}

.vip-badge{
    background:rgba(245,158,11,.15);
    color:var(--warning);
}

.sold-badge{
    background:rgba(239,68,68,.15);
    color:var(--danger);
}

/* QUANTITY */

.rsvp-qty-control{
    display:flex;
    align-items:center;
    gap:0.75rem;
}

.rsvp-qty-btn{
    width:2rem;
    height:2rem;
    border:none;
    border-radius:0.625rem;
    background:var(--bg-card);
    color:var(--white);
}

.rsvp-qty-num{
    color:var(--white);
    font-weight:700;
}

/* SUMMARY */

.rsvp-summary{
    margin-top:1.5rem;
    padding:1rem;
    border-radius:1rem;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,0.06);
}

.rsvp-summary-title{
    color:var(--white);
    margin-bottom:1rem;
}

.rsvp-summary-row{
    display:flex;
    justify-content:space-between;
    margin-bottom:0.75rem;
    color:var(--text-muted);
}

.rsvp-summary-total{
    color:var(--white);
    font-weight:700;
    font-size:1rem;
}

.rsvp-summary-divider{
    height:1px;
    background:rgba(255,255,255,.08);
    margin:1rem 0;
}

/* FORM */

.rsvp-field{
    margin-bottom:1rem;
}

.rsvp-field label{
    display:block;
    margin-bottom:0.5rem;
    color:var(--text-primary);
}

.rsvp-input,
.rsvp-select,
.rsvp-textarea{
    width:100%;
    border:none;
    outline:none;
    background:var(--bg-card);
    color:var(--white);
    padding:0.875rem 1rem;
    border-radius:0.875rem;
    border:1px solid rgba(255,255,255,0.08);
}

.rsvp-field-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
}

/* BUTTONS */

.rsvp-next-btn,
.rsvp-back-btn,
.rsvp-confirm-btn{
    border:none;
    border-radius:0.875rem;
    padding:0.875rem 1.25rem;
    font-weight:600;
}

.rsvp-next-btn{
    margin-top:1.5rem;
    background:var(--primary);
    color:var(--white);
}

.rsvp-back-btn{
    background:var(--bg-card);
    color:var(--white);
}

.rsvp-btn-row{
    display:flex;
    justify-content:space-between;
    margin-top:1.5rem;
}

/* MOBILE */

@media(max-width:768px){

    .rsvp-field-row{
        grid-template-columns:1fr;
    }

    .rsvp-ticket-card{
        flex-direction:column;
        align-items:flex-start;
    }

    .rsvp-event-strip{
        flex-direction:column;
    }

    .rsvp-steps{
        overflow-x:auto;
    }
}


.rsvp-notify-btn{
    border:none;
    outline:none;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;

    padding:0.75rem 1rem;

    border-radius:0.75rem;

    background:rgba(59,126,248,0.12);
    color:var(--primary);

    font-size:0.8125rem;
    font-weight:600;

    cursor:pointer;

    transition:all 0.2s ease;
}

.rsvp-notify-btn:hover{
    background:rgba(59,126,248,0.2);
    transform:translateY(-1px);
}

.rsvp-notify-btn i{
    font-size:0.75rem;
}


/* =========================
   VIP CARD
========================= */

.rsvp-ticket-vip{
    position:relative;
    overflow:hidden;
}

.rsvp-ticket-vip-glow{
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at top right,
            rgba(245,158,11,.18),
            transparent 50%
        );
    pointer-events:none;
}

.rsvp-ticket-vip .rsvp-ticket-price{
    color:var(--warning);
    font-weight:700;
}

/* =========================
   PHONE INPUT
========================= */

.rsvp-phone-wrap{
    display:flex;
    align-items:center;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,.08);
    border-radius:0.875rem;
    overflow:hidden;
}

.rsvp-phone-code{
    padding:0.875rem 1rem;
    color:var(--text-muted);
    border-right:1px solid rgba(255,255,255,.08);
}

.rsvp-phone-input{
    border:none !important;
    background:transparent !important;
}

/* =========================
   FIELD HELPERS
========================= */

.rsvp-field-hint{
    display:block;
    margin-top:0.4rem;
    font-size:0.75rem;
    color:var(--text-muted);
}

/* =========================
   CHECKBOXES
========================= */

.rsvp-checkbox-row{
    display:flex;
    align-items:flex-start;
    gap:0.75rem;
    margin-top:1rem;
    cursor:pointer;
    position:relative;
}

.rsvp-checkbox-row input{
    display:none;
}

.rsvp-checkbox-custom{
    width:1.1rem;
    height:1.1rem;
    border-radius:0.35rem;
    border:1px solid rgba(255,255,255,.15);
    background:var(--bg-card);
    flex-shrink:0;
    margin-top:0.1rem;
}

.rsvp-checkbox-row input:checked + .rsvp-checkbox-custom{
    background:var(--primary);
    border-color:var(--primary);
}

.rsvp-checkbox-row input:checked + .rsvp-checkbox-custom::after{
    content:"✓";
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:0.75rem;
}

.rsvp-checkbox-label{
    color:var(--text-muted);
    font-size:0.875rem;
}

.rsvp-checkbox-label a{
    color:var(--primary);
    text-decoration:none;
}

/* =========================
   PAYMENT METHODS
========================= */

.rsvp-payment-methods{
    display:flex;
    gap:0.75rem;
    margin-bottom:1.5rem;
}

.rsvp-pay-method{
    flex:1;
    border:none;
    background:var(--bg-card);
    color:var(--text-muted);
    padding:1rem;
    border-radius:0.875rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    border:1px solid rgba(255,255,255,.06);
    transition:.2s;
}

.active-pay-method{
    background:var(--primary);
    color:white;
    border-color:var(--primary);
}

/* =========================
   PAYMENT FORMS
========================= */

.rsvp-card-form{
    padding:1.25rem;
    border-radius:1rem;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,.06);
}

.rsvp-card-input-wrap{
    position:relative;
}

.rsvp-card-icons{
    position:absolute;
    right:1rem;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    gap:0.5rem;
    font-size:1.4rem;
}

.rsvp-transfer-info{
    color:var(--text-muted);
    line-height:1.6;
}

.rsvp-secure-note{
    margin-top:1rem;
    padding:0.9rem 1rem;
    border-radius:0.75rem;
    background:rgba(34,197,94,.08);
    color:var(--success);
    display:flex;
    align-items:center;
    gap:0.5rem;
    font-size:0.8125rem;
}

/* =========================
   CONFIRMATION
========================= */

.rsvp-confirm-wrap{
    text-align:center;
    padding:2rem 0;
}

.rsvp-success-icon{
    width:5rem;
    height:5rem;
    border-radius:50%;
    background:rgba(34,197,94,.15);
    color:var(--success);
    font-size:2rem;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 1.5rem;
}

.rsvp-confirm-title{
    color:var(--white);
    margin-bottom:0.75rem;
}

.rsvp-confirm-sub{
    color:var(--text-muted);
    max-width:38rem;
    margin:auto;
    margin-bottom:2rem;
}

/* =========================
   TICKET STUB
========================= */

.rsvp-ticket-stub{
    max-width:48rem;
    margin:auto;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,.08);
    border-radius:1.25rem;
    overflow:hidden;
    text-align:left;
}

.rsvp-stub-top{
    display:flex;
    gap:1rem;
    padding:1.25rem;
}

.rsvp-stub-event-thumb{
    width:90px;
    height:90px;
    overflow:hidden;
    border-radius:0.875rem;
}

.rsvp-stub-event-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.rsvp-stub-event-info h3{
    color:white;
    margin-bottom:0.5rem;
}

.rsvp-stub-divider{
    position:relative;
    height:2rem;
}

.rsvp-stub-dots{
    border-top:2px dashed rgba(255,255,255,.12);
    position:absolute;
    width:100%;
    top:50%;
}

.rsvp-stub-notch{
    width:2rem;
    height:2rem;
    border-radius:50%;
    background:var(--bg-card);
    position:absolute;
    top:0;
}

.rsvp-stub-notch.left{
    left:-1rem;
}

.rsvp-stub-notch.right{
    right:-1rem;
}

.rsvp-stub-bottom{
    padding:1.25rem;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem;
}

.rsvp-stub-label{
    display:block;
    color:var(--text-muted);
    font-size:0.75rem;
    margin-bottom:0.35rem;
}

.rsvp-stub-value{
    color:var(--white);
    font-weight:600;
}

/* =========================
   QR BOX
========================= */

.rsvp-qr-box{
    height:100%;
    min-height:90px;

    border-radius:0.875rem;
    background:var(--bg-card);

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0.5rem;

    color:var(--white);
}

.rsvp-qr-box i{
    font-size:2rem;
}

.rsvp-qr-box span{
    font-size:0.75rem;
    color:var(--text-muted);
}

/* =========================
   CONFIRM BUTTONS
========================= */

.rsvp-confirm-actions{
    display:flex;
    justify-content:center;
    gap:1rem;
    margin-top:1.5rem;
}

.rsvp-confirm-btn{
    background:var(--primary);
    color:white;
}

.rsvp-share-confirm-btn{
    background:var(--bg-card);
}

.rsvp-home-link{
    display:inline-block;
    margin-top:1.5rem;
    color:var(--text-muted);
    text-decoration:none;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

    .rsvp-payment-methods{
        flex-direction:column;
    }

    .rsvp-stub-top{
        flex-direction:column;
    }

    .rsvp-stub-bottom{
        grid-template-columns:1fr;
    }

    .rsvp-confirm-actions{
        flex-direction:column;
    }
}/* =========================
   VIP CARD
========================= */

.rsvp-ticket-vip{
    position:relative;
    overflow:hidden;
}

.rsvp-ticket-vip-glow{
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at top right,
            rgba(245,158,11,.18),
            transparent 50%
        );
    pointer-events:none;
}

.rsvp-ticket-vip .rsvp-ticket-price{
    color:var(--warning);
    font-weight:700;
}

/* =========================
   PHONE INPUT
========================= */

.rsvp-phone-wrap{
    display:flex;
    align-items:center;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,.08);
    border-radius:0.875rem;
    overflow:hidden;
}

.rsvp-phone-code{
    padding:0.875rem 1rem;
    color:var(--text-muted);
    border-right:1px solid rgba(255,255,255,.08);
}

.rsvp-phone-input{
    border:none !important;
    background:transparent !important;
}

/* =========================
   FIELD HELPERS
========================= */

.rsvp-field-hint{
    display:block;
    margin-top:0.4rem;
    font-size:0.75rem;
    color:var(--text-muted);
}

/* =========================
   CHECKBOXES
========================= */

.rsvp-checkbox-row{
    display:flex;
    align-items:flex-start;
    gap:0.75rem;
    margin-top:1rem;
    cursor:pointer;
    position:relative;
}

.rsvp-checkbox-row input{
    display:none;
}

.rsvp-checkbox-custom{
    width:1.1rem;
    height:1.1rem;
    border-radius:0.35rem;
    border:1px solid rgba(255,255,255,.15);
    background:var(--bg-card);
    flex-shrink:0;
    margin-top:0.1rem;
}

.rsvp-checkbox-row input:checked + .rsvp-checkbox-custom{
    background:var(--primary);
    border-color:var(--primary);
}

.rsvp-checkbox-row input:checked + .rsvp-checkbox-custom::after{
    content:"";
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:0.75rem;
}

.rsvp-checkbox-label{
    color:var(--text-muted);
    font-size:0.875rem;
}

.rsvp-checkbox-label a{
    color:var(--primary);
    text-decoration:none;
}

/* =========================
   PAYMENT METHODS
========================= */

.rsvp-payment-methods{
    display:flex;
    gap:0.75rem;
    margin-bottom:1.5rem;
}

.rsvp-pay-method{
    flex:1;
    border:none;
    background:var(--bg-card);
    color:var(--text-muted);
    padding:1rem;
    border-radius:0.875rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    border:1px solid rgba(255,255,255,.06);
    transition:.2s;
}

.active-pay-method{
    background:var(--primary);
    color:white;
    border-color:var(--primary);
}

/* =========================
   PAYMENT FORMS
========================= */

.rsvp-card-form{
    padding:1.25rem;
    border-radius:1rem;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,.06);
}

.rsvp-card-input-wrap{
    position:relative;
}

.rsvp-card-icons{
    position:absolute;
    right:1rem;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    gap:0.5rem;
    font-size:1.4rem;
}

.rsvp-transfer-info{
    color:var(--text-muted);
    line-height:1.6;
}

.rsvp-secure-note{
    margin-top:1rem;
    padding:0.9rem 1rem;
    border-radius:0.75rem;
    background:rgba(34,197,94,.08);
    color:var(--success);
    display:flex;
    align-items:center;
    gap:0.5rem;
    font-size:0.8125rem;
}

/* =========================
   CONFIRMATION
========================= */

.rsvp-confirm-wrap{
    text-align:center;
    padding:2rem 0;
}

.rsvp-success-icon{
    width:5rem;
    height:5rem;
    border-radius:50%;
    background:rgba(34,197,94,.15);
    color:var(--success);
    font-size:2rem;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 1.5rem;
}

.rsvp-confirm-title{
    color:var(--white);
    margin-bottom:0.75rem;
}

.rsvp-confirm-sub{
    color:var(--text-muted);
    max-width:38rem;
    margin:auto;
    margin-bottom:2rem;
}

/* =========================
   TICKET STUB
========================= */

.rsvp-ticket-stub{
    max-width:48rem;
    margin:auto;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,.08);
    border-radius:1.25rem;
    overflow:hidden;
    text-align:left;
}

.rsvp-stub-top{
    display:flex;
    gap:1rem;
    padding:1.25rem;
}

.rsvp-stub-event-thumb{
    width:90px;
    height:90px;
    overflow:hidden;
    border-radius:0.875rem;
}

.rsvp-stub-event-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.rsvp-stub-event-info h3{
    color:white;
    margin-bottom:0.5rem;
}

.rsvp-stub-divider{
    position:relative;
    height:2rem;
}

.rsvp-stub-dots{
    border-top:2px dashed rgba(255,255,255,.12);
    position:absolute;
    width:100%;
    top:50%;
}

.rsvp-stub-notch{
    width:2rem;
    height:2rem;
    border-radius:50%;
    background:var(--bg-card);
    position:absolute;
    top:0;
}

.rsvp-stub-notch.left{
    left:-1rem;
}

.rsvp-stub-notch.right{
    right:-1rem;
}

.rsvp-stub-bottom{
    padding:1.25rem;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem;
}

.rsvp-stub-label{
    display:block;
    color:var(--text-muted);
    font-size:0.75rem;
    margin-bottom:0.35rem;
}

.rsvp-stub-value{
    color:var(--white);
    font-weight:600;
}

/* =========================
   QR BOX
========================= */

.rsvp-qr-box{
    height:100%;
    min-height:90px;

    border-radius:0.875rem;
    background:var(--bg-card);

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0.5rem;

    color:var(--white);
}

.rsvp-qr-box i{
    font-size:2rem;
}

.rsvp-qr-box span{
    font-size:0.75rem;
    color:var(--text-muted);
}

/* =========================
   CONFIRM BUTTONS
========================= */

.rsvp-confirm-actions{
    display:flex;
    justify-content:center;
    gap:1rem;
    margin-top:1.5rem;
}

.rsvp-confirm-btn{
    background:var(--primary);
    color:white;
}

.rsvp-share-confirm-btn{
    background:var(--bg-card);
}

.rsvp-home-link{
    display:inline-block;
    margin-top:1.5rem;
    color:var(--text-muted);
    text-decoration:none;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

    .rsvp-payment-methods{
        flex-direction:column;
    }

    .rsvp-stub-top{
        flex-direction:column;
    }

    .rsvp-stub-bottom{
        grid-template-columns:1fr;
    }

    .rsvp-confirm-actions{
        flex-direction:column;
    }
}


.media-preview-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.media-preview {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}

.media-preview img,
.media-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.remove-media {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.65);
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    z-index: 2;
}

.remove-media:hover {
    transform: scale(1.1);
}

.media-preview video {
    background: var(--black);
}