@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --bs-heading-font-family: 'Outfit', sans-serif;
    --bs-body-color: #1a1a1a;
    --bs-secondary-color: #4a5568;
}


body {
    font-family: var(--bs-body-font-family);
    line-height: 1.65;
    color: var(--bs-body-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.card-title,
.modal-title,
.navbar-brand {
    font-family: var(--bs-heading-font-family);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

h1,
.h1 {
    font-size: clamp(1.75rem, 4vw + 1rem, 3rem);
}

h2,
.h2 {
    font-size: clamp(1.5rem, 3vw + 1rem, 2.5rem);
}

h3,
.h3 {
    font-size: clamp(1.25rem, 2vw + 1rem, 2rem);
}


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

.badge,
.fc-list-event-time,
.service-time,
.event-time-display,
.time-display {
    font-family: 'Inter', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0px;
}

.btn {
    line-height: 1.5;
}

.nav-link {
    font-family: var(--bs-body-font-family);
    font-weight: 500;
}

[data-bs-theme="dark"] {
    --bs-body-color: #e2e8f0;
    --bs-secondary-color: #a0aec0;
}

/* ========================================= */
/* COLOR PALETTE: MODERN SANCTUARY           */
/* ========================================= */

:root {
    /* PRIMARY: Burnt Terracotta (The "Orange") */
    /* Warm, inviting, and high visibility */
    --bs-primary: #EE6C4D;
    --bs-primary-rgb: 238, 108, 77;

    --bs-primary-bg-subtle: #FDE8E1;
    /* A darker, readable orange for text on subtle backgrounds */
    --bs-primary-text-emphasis: #8F2C14;
    /* A border color that sits between the background and the main color */
    --bs-primary-border-subtle: #F5BCAE;

    /* SECONDARY: Slate Blue (The "Blue") */
    /* Stable, cool backing color */
    --bs-secondary: #3D5A80;
    --bs-secondary-rgb: 61, 90, 128;

    /* ACCENT: Soft Cyan (unchanged) */
    --bs-info: #98C1D9;
    --bs-info-rgb: 152, 193, 217;

    /* BODY TEXT: Deep Blue-Black */
    --bs-body-color: #293241;
    --bs-body-bg: #eef2f6;
    /* Cool Gray Background */

    /* LINK COLORS */
    --bs-link-color: #EE6C4D;
    /* Links are now Orange */
    --bs-link-hover-color: #d65a3b;
    /* Darker Orange on hover */
}

/* ========================================= */
/* DARK MODE OVERRIDES                       */
/* ========================================= */

[data-bs-theme="dark"] {
    /* BACKGROUND: Gunmetal */
    --bs-body-bg: #1a202c;
    --bs-body-color: #E0E6ED;
    --bs-primary-bg-subtle: #45180D;
    /* A light, pastel peach for text visibility on dark backgrounds */
    --bs-primary-text-emphasis: #FFD2C4;
    /* A muted border color */
    --bs-primary-border-subtle: #8F2C14;

    /* CARDS */
    --bs-card-bg: #2d3748;
    --bs-card-border-color: #465366;

    /* PRIMARY IN DARK MODE: Keep it Orange (pops well on dark) */
    --bs-primary: #EE6C4D;
    --bs-primary-rgb: 238, 108, 77;

    /* LINKS IN DARK MODE */
    --bs-link-color: #fabeb0;
    /* Lighter Orange/Peach for better contrast on dark */
    --bs-link-hover-color: #EE6C4D;

    /* SECONDARY BACKGROUNDS */
    --bs-secondary-bg: #3e4c5e;
    --bs-tertiary-bg: #2d3748;

    /* BORDERS */
    --bs-border-color: #465366;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
}

/* --- COMPONENT TWEAKS FOR NEW COLORS --- */

/* Buttons: Add a subtle transition */
.btn-primary {
    background-color: var(--bs-primary);
    background-image: none !important;
    /* Kills the gradient completely */
    border: none;
    box-shadow: 0 4px 6px rgba(238, 108, 77, 0.3);
    color: #fff;
    transition: all 0.2s ease-in-out;
    /* Adds a smooth fade on hover */
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--bs-primary);
    background-image: none !important;
    filter: brightness(0.85);
    /* Slightly darkens the theme color */
    box-shadow: 0 6px 12px rgba(238, 108, 77, 0.4);
    color: #fff;
}

/* Outline Buttons */
.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-outline-primary:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* Badges: Soft Orange Background */
.badge.bg-primary-subtle {
    background-color: rgba(238, 108, 77, 0.15) !important;
    /* Orange tint */
    color: #c44d32 !important;
    /* Darker Orange text for readability */
}

[data-bs-theme="dark"] .badge.bg-primary-subtle {
    background-color: rgba(238, 108, 77, 0.2) !important;
    color: #ffbca8 !important;
    /* Light Peach text */
}

/* Nav Link Active State */
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--bs-primary);
    /* Orange pill */
    color: white !important;
}

/* ========================================= */
/* VISUAL ENHANCEMENTS: THEMING & POLISH     */
/* ========================================= */

/* 1. Soft Backgrounds & Tinted Grays */
body {
    /* Slightly cooler/warmer than pure white to reduce eye strain */
    background-color: #eef2f6;
}

.text-muted,
.small,
small {
    /* Slate-gray instead of generic gray for better harmony with your primary color */
    color: #64748b !important;
}

/* 2. Selection Color (Highlighting text) */
::selection {
    background-color: rgba(61, 90, 128, 0.25);
    /* Primary color at 25% opacity */
    color: var(--bs-primary);
}

/* 3. Scrollbar Styling (Thin & Rounded) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    /* Light slate */
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--bs-primary);
}

/* 4. Gradient Accents for Primary Buttons */
.btn-primary {
    /* Subtle gradient from Slate Blue to a slightly lighter tone */
    background-image: linear-gradient(135deg, var(--bs-primary) 0%, #4a6d96 100%);
    border: none;
    box-shadow: 0 4px 6px rgba(61, 90, 128, 0.2);
}

.btn-primary:hover {
    background-image: linear-gradient(135deg, #2b405b 0%, var(--bs-primary) 100%);
    box-shadow: 0 6px 12px rgba(61, 90, 128, 0.3);
}

/* 5. Card Borders: Clean Look */
.card,
.group-card,
.church-card,
.contact-card {
    border: none !important;
    /* We rely on shadow for separation now */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* 6. Status Colors: Soft Pastels */
/* Overriding standard Bootstrap badges to be pastel with dark text */
.badge.bg-success {
    background-color: #d1fae5 !important;
    /* Pastel Mint */
    color: #065f46 !important;
    /* Dark Emerald */
    border: 1px solid rgba(6, 95, 70, 0.1) !important;
}

.badge.bg-danger {
    background-color: #fee2e2 !important;
    /* Pastel Rose */
    color: #991b1b !important;
    /* Dark Red */
    border: 1px solid rgba(153, 27, 27, 0.1) !important;
}

.badge.bg-warning {
    background-color: #fef3c7 !important;
    /* Pastel Amber */
    color: #92400e !important;
    /* Dark Amber */
}

/* 7. Glassmorphism for Sticky Elements */
.navbar.fixed-top,
.floating-controls,
#groups-sticky-wrapper {
    /* Translucent background */
    background-color: rgba(238, 242, 246, 0.85) !important;
    /* The blur effect */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* Subtle border to separate from content */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* 8. Dark Mode Polish */
[data-bs-theme="dark"] {
    body {
        background-color: #1a202c;
        /* Deep Slate for background */
    }

    /* Dark Mode Scrollbar */
    ::-webkit-scrollbar-thumb {
        background-color: #475569;
    }

    /* Dark Mode Glassmorphism */
    .navbar.fixed-top,
    .floating-controls,
    #groups-sticky-wrapper {
        background-color: rgb(33, 37, 41, 0.85) !important;
        /* Gunmetal with opacity */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    /* Muted Text in Dark Mode (Cooler gray) */
    .text-muted,
    .small,
    small {
        color: #94a3b8 !important;
    }

    /* Lower Saturation for Badges in Dark Mode */
    .badge.bg-success {
        background-color: rgba(6, 95, 70, 0.4) !important;
        color: #d1fae5 !important;
        border: 1px solid rgba(209, 250, 229, 0.1) !important;
    }

    .badge.bg-danger {
        background-color: rgba(153, 27, 27, 0.4) !important;
        color: #fee2e2 !important;
    }



    .card,
    .group-card,
    .church-card,
    .contact-card,
    .recipe-card {
        background-color: #2d3748;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    }


}

/* ========================================= */
/* SECTION III: CARD UI ENHANCEMENTS         */
/* ========================================= */

/* 1. Deep Shadows & 2. Hover Lift & 3. Rounded Corners */
.card,
.group-card,
.church-card,
.contact-card,
.recipe-card {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 6px -1px rgba(50, 50, 93, 0.11), 0 1px 3px -1px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* Hover State */
.card:hover,
.group-card:hover,
.church-card:hover,
.contact-card:hover,
.recipe-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 4. Card Footer Separation */
/* Applies to the actions area at the bottom of cards */
.card-footer-custom {
    background-color: var(--bs-body-bg);
    /* Use page background for "cutout" effect, or darken slightly */
    border-top: 1px solid var(--bs-border-color-translucent);
    padding: 1rem;
    margin-top: auto;
    /* Ensures it pushes to the bottom in flex containers */
}

/* Alternative: Subtle background tint */
.card-footer-custom.tinted {
    background-color: rgba(0, 0, 0, 0.02);
}

/* 5. Badge Placement (Floating Overlay) */
.card-badge-top-right {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
    /* Sit above the image */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    /* Lift the badge off the image */
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 0.7rem;
    padding: 0.5em 1em;
}

.status-pill-eyebrow {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.25rem 0.75rem;
    border-radius: 50rem;
    margin-bottom: 0.5rem;
    /* Space between badge and title */
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .status-pill-eyebrow {
    background-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, 0.1);
}

/* 6. Inner Borders (Dark Mode) */
/* Adds a subtle rim to images so they don't blend into the dark card bg */
[data-bs-theme="dark"] .card-img-top,
[data-bs-theme="dark"] .business-logo {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Adjustments for specific card types */
.business-logo {
    padding: 1.5rem;
    /* Give logos breathing room */
    background-color: #fff;
    /* Ensure transparent logos look good */
}

[data-bs-theme="dark"] .business-logo {
    background-color: rgba(255, 255, 255, 0.05);
    /* Slight tint for logos in dark mode */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#main-content-container {
    animation: fadeIn 0.4s ease-out;
}

/* ---- General & Shared Styles ---- */
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    padding-top: 70px;
    background-color: #f8f9fa;
}

@media (max-width: 767.98px) {
    body {
        padding-top: 5px !important;
    }}

.container-fluid {
    max-width: 1200px;
}

.main-header h1 {
    font-weight: 700;
    color: #212529;
}

.page-content-wrapper {
    flex-grow: 1;
    /* overflow-y: auto;*/
    min-height: 0;
}

.navbar-toggler .navbar-menu-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.5;
    /* Add this line */
}

/* ---- Card Styles (for Groups & Churches) ---- */
.group-card,
.church-card {
    margin-bottom: 1.5rem;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.group-card:hover,
.church-card:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.group-card .card-body,
.church-card .card-body {
    padding: 1.5rem;
}

.group-card .card-title,
.church-card .card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff; /* Forced white for text scrim */
    margin-bottom: 0.75rem;
}

.church-card .info-line {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--bs-text-muted);
}

.church-card .info-line .card-text,
.church-card .info-line .card-subtitle {
    color: var(--bs-text-muted) !important;
}

.church-card .info-line svg {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
}

.church-card .card-actions {
    margin-top: 1rem;
}

.group-card .card-body .mt-auto {
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color-translucent);
    margin-top: 1rem;
}


.group-card .card-img-top {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* ---- Shared Modal & UI Element Styles ---- */
.search-controls,
.search-and-map-controls {
    margin: 2rem 0;
}

.section-heading {
    font-weight: 600;
    color: #343a40;
    border-bottom: 2px solid #007bff;
    padding-bottom: 8px;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.contact-card {
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #f8f9fa;
}

.contact-card strong {
    font-size: 1.1rem;
}

/* --- Added for Cancellation Feature --- */
.cancelled-event .fc-event-title,
.cancelled-service-display {
    text-decoration: line-through;
}

.cancelled-service {
    background-color: #f8d7da;
    /* A light red to indicate cancellation */
    border-color: #f5c6cb;
}

[data-bs-theme="dark"] .cancelled-service {
    background-color: #4d282a;
    border-color: #582f32;
}

/* --- Inactive Group Styling --- */
.group-section-divider {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bs-secondary);
    letter-spacing: 1px;
    margin: 2rem 0 1rem 0;
}

.group-section-divider::before,
.group-section-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--bs-border-color);
}

.group-section-divider span {
    padding: 0 1rem;
}

.group-card-inactive {
    opacity: 0.75;
    background-color: rgba(0, 0, 0, 0.02);
    /* Very subtle gray tint */
    border-style: dashed;
    /* Visual cue that it's "archived" */
}

[data-bs-theme="dark"] .group-card-inactive {
    background-color: rgba(255, 255, 255, 0.02);
}

.group-card-inactive img {
    filter: grayscale(100%);
    /* Black and white image */
    transition: filter 0.3s;
}

.group-card-inactive:hover {
    opacity: 1;
    border-style: solid;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.group-card-inactive:hover img {
    filter: grayscale(0%);
    /* Color returns on hover */
}

/* ---- Dark Mode Overrides ---- */
[data-bs-theme="dark"] {
    body {
        background-color: #212529;
        color: #dee2e6;
    }

    .fc-col-header-cell {
        background-color: var(--bs-body-bg) !important;
    }

    .main-header h1 {
        color: #f8f9fa;
    }

    .group-card,
    .church-card,
    .contact-card {
        border-color: #495057;
        background-color: #343a40;
    }

    .filter-controls-header {
        background-color: #343a40;
        border-color: #495057;
    }

    .section-heading,
    #servicesModalBody .section-heading,
    .modal-body .section-heading {
        color: #f8f9fa;
        border-bottom-color: #495057;
    }

    .text-muted,
    .event-details-small {
        color: #adb5bd !important;
    }

    /* Page-Specific Dark Mode Fixes */
    .fc-list-day-cushion {
        background: linear-gradient(90deg, rgba(226, 125, 96, 0.15) 0%, rgba(52, 58, 64, 0) 100%);
        color: #e27d60;
        border-bottom: 1px solid rgba(226, 125, 96, 0.1);
    }

    .fc-list-event:hover td {
        background-color: #495057;
        /* A subtle, darker hover color */
    }

    #sermonsContainer .container {
        background-color: #2b3035;
    }

    #sermonsContainer .minister-name-toggler {
        background-color: #343a40;
        color: #58a6ff;
    }

    .sermons-page .container {
        background-color: #2b3035;
        border-color: #495057;
    }

    .sermons-page .minister-name-toggler {
        background-color: #343a40;
        color: #58a6ff;
        border-bottom-color: #495057;
    }

    .sermons-page .sermon-item {
        border-bottom-color: #343a40;
    }

    .sermons-page .sermon-title {
        color: #f0f6fc;
    }

    /* Target the placeholder text specifically */
    .ts-control input::placeholder {
        color: #adb5bd;
        opacity: 1;
    }

    /* Style for the dropdown panel */
    .ts-dropdown {
        background-color: #343a40;
        border-color: #495057;
    }

    /* Style for each option in the dropdown */
    .ts-dropdown .option {
        color: #dee2e6;
    }

    /* Style for the active/hovered option */
    .ts-dropdown .option.active,
    .ts-dropdown .option:hover {
        background-color: #495057;
        color: #f8f9fa;
    }

    /* Style for the optgroup headers */
    .ts-dropdown .optgroup-header {
        color: #adb5bd;
        font-weight: bold;
    }

    /* Style for the selected items (pills) */
    .ts-control > .item {
        background-color: #0d6efd;
        color: #ffffff;
    }
}

/* Explicit non-nested rules for Tom Select Dark Mode to ensure they work in all browsers */
[data-bs-theme="dark"] .ts-wrapper .ts-control,
[data-bs-theme="dark"] .ts-wrapper.single .ts-control {
    background-color: #343a40 !important;
    color: #f8f9fa !important;
    border-color: #495057 !important;
    border-radius: inherit !important;
}

[data-bs-theme="dark"] .ts-wrapper .ts-control input,
[data-bs-theme="dark"] .ts-wrapper.single .ts-control input {
    background-color: transparent !important;
    color: #f8f9fa !important;
}

[data-bs-theme="dark"] .ts-dropdown,
[data-bs-theme="dark"] .ts-dropdown-content,
[data-bs-theme="dark"] .ts-dropdown .create {
    background-color: #343a40 !important;
    color: #f8f9fa !important;
    border-color: #495057 !important;
}

/* Fix weird blue focus ring on TomSelect in Dark Mode */
[data-bs-theme="dark"] .ts-wrapper.focus .ts-control {
    border-color: #5c636a !important;
    box-shadow: none !important;
}

/* Fix weird blue focus ring on TomSelect in Light Mode */
.ts-wrapper.focus .ts-control {
    border-color: #86b7fe !important;
    box-shadow: none !important;
}

.fc .fc-button-primary {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
    text-shadow: none;
    /* Removes default text shadow */
}

/* Hover & Focus State */
.fc .fc-button-primary:hover,
.fc .fc-button-primary:focus {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-secondary-color);
}

/* Active/Selected Button State (e.g., the currently selected view) */
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: var(--bs-primary);
    color: #fff;
    /* Ensures text is readable on primary background */
    border-color: var(--bs-primary);
}

/* "Today" Button */

.fc .fc-today-button:hover,
.fc .fc-today-button:disabled {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff !important;
}



:root {
    --fc-header-height: 45px;
    --mobile-nav-height: 65px;
}

.mobile-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(25px) saturate(150%);
    -webkit-backdrop-filter: blur(25px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    height: var(--mobile-nav-height);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.05);
    margin: 10px;
    border-radius: 50rem;
    z-index: 1040;
    bottom: env(safe-area-inset-bottom, 10px);
    left: 10px;
    right: 10px;
    width: auto;
}

[data-bs-theme="dark"] .mobile-nav {
    background: rgba(30, 30, 30, 0.65);
    border-color: rgba(255, 255, 255, 0.15);
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--bs-secondary-color);
    padding: 5px 2px;
    min-width: 60px;
    background: none;
    border: none;
    transition: color 0.2s ease-in-out;
}

.mobile-nav-item svg {
    margin-bottom: 4px;
}

.mobile-nav-label {
    font-size: 0.7rem;
    color: inherit;
}

.mobile-nav-item.active {
    color: var(--bs-primary);
    transform: translateY(-2px);
}

.mobile-nav-item:hover {
    color: var(--bs-primary-text-emphasis);
    transform: translateY(-2px) scale(1.05);
}

/* Floating Search/Filter Bar */
.floating-controls {
    position: fixed;
    bottom: var(--mobile-nav-height);
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--bs-tertiary-bg);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1020;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
}

.floating-controls>.d-flex {
    padding: 0.75rem;
}

/* Active Filter Container (inside floating bar) */
#activeFiltersContainerMobile {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
    padding: 0 0.75rem;
}

#activeFiltersContainerMobile.visible {
    max-height: 70px;
    opacity: 1;
    overflow-y: auto;
    padding-bottom: 0.75rem;
}

/* More Menu (Off-canvas) Styling */
#moreOffcanvas .list-group-item a,
#moreOffcanvas .list-group-item .btn-link {
    color: var(--bs-body-color);
    transition: color 0.2s ease-in-out;
}

#moreOffcanvas .list-group-item a:hover,
#moreOffcanvas .list-group-item .btn-link:hover {
    color: var(--bs-primary);
}

#moreOffcanvas .active-page-link {
    color: var(--bs-primary) !important;
    font-weight: bold;
}

/* ---- TomSelect Autocomplete Fixes ---- */

body>.ts-dropdown {
    bottom: calc(var(--mobile-nav-height) + 65px) !important;
    top: auto !important;
}

@media (min-width: 992px) {

    /* Completely hide the mobile floating bar on desktop */
    .floating-controls {
        display: none !important;
    }}

.mobile-time-display {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bs-primary);
    margin-bottom: 4px;
    line-height: 1.2;
    display: none;
    /* Hidden on desktop */
}

/* ---- Layout Adjustments for Mobile --- */
@media (max-width: 991.98px) {
    #calendar {
        --sticky-toolbar-height: 70px;
    }

    #groupsTab {
        padding-top: 10px;
    }

    .ts-dropdown.ts-mobile-force-up {
        top: auto !important;
        bottom: calc(var(--mobile-nav-height) + 65px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    #navbar-placeholder,
    .site-footer.d-lg-block {
        display: none !important;
    }

    .mobile-time-display {
        display: block;
        /* Show on mobile */
    }

    /* fc-list-event-time hidden globally — no mobile override needed */



}


#calendar .fc-list-event-title>a,
#calendar .fc-event-desc-list {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-all;
}



#eventDetailBody .list-group-item .text-center.me-3 {
    background-color: var(--bs-secondary-bg);
    border-radius: 6px;
    padding: 4px 8px;
    min-width: 50px !important;
}

.fc-event.past-event {
    opacity: 0.8;
    filter: saturate(0.9);
}


.fc-list-event.past-event td {
    padding: 4px 10px !important;
    background-color: transparent !important;
}

/* --- SKELETON LOADING --- */
.skeleton {
    background-color: #e0e0e0;
    background-image: linear-gradient(90deg, #e0e0e0 0px, #f0f0f0 40px, #e0e0e0 80px);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite linear;
    border-radius: 4px;
    display: inline-block;
}

/* Dark Mode Adjustment */
[data-bs-theme="dark"] .skeleton {
    background-color: #343a40;
    background-image: linear-gradient(90deg, #343a40 0px, #495057 40px, #343a40 80px);
}

@keyframes skeleton-shimmer {
    0% {
        background-position: -200px 0;
    }

    100% {
        background-position: calc(200px + 100%) 0;
    }
}

/* Specific Element Shapes */
.skeleton-title {
    height: 24px;
    width: 70%;
    margin-bottom: 1rem;
}

.skeleton-text {
    height: 14px;
    width: 90%;
    margin-bottom: 0.5rem;
}

.skeleton-text-short {
    height: 14px;
    width: 40%;
    margin-bottom: 0.5rem;
}

.skeleton-badge {
    height: 20px;
    width: 60px;
    border-radius: 12px;
    display: inline-block;
    margin-left: 5px;
}

.skeleton-btn {
    height: 30px;
    width: 100px;
    border-radius: 4px;
}


/* --- Modern Card Back Styles (Merged & Optimized) --- */

/* 1. Scroll Wrapper (Keeps header/footer fixed) */
.card-back-content {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 4px;
    margin-bottom: 10px;
}

/* Custom Scrollbar */
.card-back-content::-webkit-scrollbar {
    width: 4px;
}

.card-back-content::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

[data-bs-theme="dark"] .card-back-content::-webkit-scrollbar-thumb {
    background-color: #555;
}

/* Container for the dashboard elements */
.card-back-dashboard {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 2. Info/Rules Box (Used for Monthly Rules & Weekly Schedule) */
.rules-container {
    background-color: var(--bs-tertiary-bg);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid var(--bs-border-color-translucent);
}

/* DARK MODE: Use subtle transparency instead of solid gray */
[data-bs-theme="dark"] .rules-container {
    background-color: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.08);
}

.rule-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.rule-row:last-child {
    margin-bottom: 0;
}

.rule-icon {
    width: 28px;
    /* Slightly larger for better visibility */
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-body-bg);
    border-radius: 50%;
    margin-right: 12px;
    color: var(--bs-primary);
    border: 1px solid var(--bs-border-color-translucent);
    flex-shrink: 0;
}

[data-bs-theme="dark"] .rule-icon {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #6ea8fe;
    /* Softer Blue */
}

.rule-text {
    display: flex;
    flex-direction: column;
}

.rule-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--bs-secondary);
    line-height: 1;
    margin-bottom: 2px;
}

[data-bs-theme="dark"] .rule-label {
    color: #adb5bd;
}

.rule-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-body-color);
    line-height: 1.2;
}

/* 3. Weekly Schedule Grid (Optional View) */
.schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.service-pill {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

[data-bs-theme="dark"] .service-pill {
    background-color: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.08);
}

.service-day {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--bs-primary);
    margin-bottom: 2px;
}

[data-bs-theme="dark"] .service-day {
    color: #6ea8fe;
}

.service-time {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

/* 4. Revival Highlight (Warning Color) */
.revival-highlight {
    background-color: rgba(255, 193, 7, 0.15);
    /* Transparent Yellow */
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
}

[data-bs-theme="dark"] .revival-highlight {
    background-color: rgba(255, 193, 7, 0.08);
    /* Lower opacity for dark mode */
    border-color: rgba(255, 193, 7, 0.2);
}

/* --- 1. ENABLE SCROLL SNAP --- */
.page-content-wrapper {
    scroll-behavior: smooth;
}




/* ========================================= */
/* CALENDAR EMPTY STATE (NATIVE & CENTERED)  */
/* ========================================= */

/* 1. Target the Table Cell - Force Flexbox Centering */
.fc-list-empty {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 60vh !important;
    background-color: var(--bs-body-bg) !important;
}

.fc-list-empty-cushion {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 3. Style our Custom Content */
.empty-state-content {
    text-align: center;
    animation: fadeIn 0.3s ease-out;
    width: 100%;
}

.empty-state-icon {
    font-size: 3.5rem;
    color: var(--bs-secondary);
    opacity: 0.5;
    margin-bottom: 1rem;
    display: inline-block;
}

.empty-state-title {
    font-family: var(--bs-heading-font-family);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-body-color);
    margin-bottom: 0.5rem;
}

.empty-state-text {
    color: var(--bs-secondary-color);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* 4. LOADING STATE: Hide the empty message while spinner is active */
#calendar.is-loading .fc-list-empty {
    display: none !important;
}

#calendar.is-loading .fc-view-harness {
    min-height: 200px;
    /* Keep space for the spinner */
}

/* 5. Dark Mode Support */
[data-bs-theme="dark"] .fc-list-empty {
    background-color: #212529 !important;
}

/* ========================================= */
/* CUSTOM EVENT CARD LAYOUT                  */
/* ========================================= */

/* 1. Global Hide: Remove default list dots and time columns (all-day, timed, etc.) */
.fc-list-event-graphic,
.fc-list-event-time,
td.fc-list-event-graphic,
td.fc-list-event-time,
.fc .fc-list-event-graphic,
.fc .fc-list-event-time {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
}

/* 2. Custom Time Styling (Stand Out) */
.event-custom-time {
    font-family: var(--bs-body-font-family);
    font-size: 1.1rem;
    /* Larger than body text */
    font-weight: 700;
    /* Bold */
    color: var(--bs-primary);
    /* Brand Blue/Slate */
    margin-top: 4px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    line-height: 1.2;
}

/* 3. Event Type Badge (Top Right) */
.event-type-badge {
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 0.35em 0.8em;
    border-radius: 50rem;
    /* Pill shape */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: var(--bs-body-bg);
    /* White/Dark bg */
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Space between icon and text */
    margin-left: 6px;
    flex-shrink: 0;
    /* Prevent badge from squishing */
}

[data-bs-theme="dark"] .event-type-badge {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

@keyframes badge-pulse-warning-anim {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(255, 193, 7, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

.badge-pulse-warning {
    animation: badge-pulse-warning-anim 2.5s infinite;
    border: 1px solid rgb(255, 193, 7) !important;
}

.modal-location-header {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Space between Name and Badge */
    flex-wrap: wrap;
}

#printEventDetailButton {
    display: none !important;
}

/* ========================================= */
/* CALENDAR DATE HEADER STYLING              */
/* ========================================= */

/* 1. Default State: Use Slate Blue (Professional & Readable) */
.fc-list-day-text,
.fc-list-day-side-text {
    color: var(--bs-primary) !important;
    font-family: var(--bs-heading-font-family);
    /* Playfair Display */
    font-weight: 700;
    text-decoration: none !important;
    /* Remove underline */
}

/* 2. Hover State: Use Brand Orange (Interactive feel) */
/* When hovering anywhere on the gray date bar, change text to orange */
.fc-list-day-cushion:hover .fc-list-day-text,
.fc-list-day-cushion:hover .fc-list-day-side-text {
    color: var(--bs-primary) !important;
    /* #EE6C4D */
    transition: color 0.2s ease-in-out;
}

/* 3. Dark Mode Adjustments */
[data-bs-theme="dark"] .fc-list-day-text,
[data-bs-theme="dark"] .fc-list-day-side-text {
    color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .fc-list-day-cushion:hover .fc-list-day-text,
[data-bs-theme="dark"] .fc-list-day-cushion:hover .fc-list-day-side-text {
    color: #fabeb0 !important;
    /* Light Peach on hover */
}

/* ========================================= */
/* QUICK NAV & FLOATING ACTION GROUP         */
/* ========================================= */

/* --- 1. The Container (Holds both buttons) --- */
.floating-action-group {
    position: fixed;
    bottom: 85px;
    /* Default: Above mobile nav */
    right: 15px;
    z-index: 1030;
    display: flex;
    flex-direction: column-reverse;
    /* Stack bottom-up */
    gap: 15px;
    /* Space between buttons */
    align-items: center;
    pointer-events: none;
    /* Allow clicks through the empty space */
}

/* AUTOMATIC LIFT: If Search Bar (.floating-controls) exists, move buttons up */
.floating-controls~.floating-action-group {
    /* 65px (Nav) + 60px (Search) + 20px (Gap) */
    bottom: 150px !important;
}

/* --- 2. Common Button Styles --- */
.fab-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, opacity 0.3s, visibility 0.3s;
    color: white;
    cursor: pointer;
    margin: 0 !important;
    pointer-events: auto;
    /* Re-enable clicks */
    position: relative;
    /* Ensure it stays in flow, NOT fixed */
}

.fab-btn:hover {
    transform: scale(1.1);
    color: white;
}

/* --- 3. Scroll To Top Button --- */
#scrollToTopBtn {
    background-color: var(--bs-primary);
    opacity: 0;
    visibility: hidden;
    display: none;
}

#scrollToTopBtn.show {
    opacity: 1;
    visibility: visible;
    display: flex;
}

/* --- 4. Quick Nav Button --- */
#quickNavBtn {
    background-color: var(--bs-secondary);
    display: none;
    /* JS toggles this to 'flex' */
}

#quickNavBtn:hover {
    background-color: var(--bs-primary);
}

/* --- 5. The Jump Menu (Pill Grid) --- */
.jump-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 10px !important;
}

.jump-item {
    border-radius: 50rem !important;
    padding: 8px 20px !important;
    min-width: 50px !important;
    text-align: center !important;
    background-color: var(--bs-body-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;

    /* Flex alignment for text */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    user-select: none;
}

.jump-item:hover {
    background-color: var(--bs-primary) !important;
    color: white !important;
    border-color: var(--bs-primary) !important;
    transform: translateY(-2px);
}

.jump-item.disabled {
    opacity: 0.3 !important;
    pointer-events: none !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Dark Mode Support */
[data-bs-theme="dark"] .jump-item {
    background-color: #2b3035 !important;
    border-color: #495057 !important;
    color: #e9ecef !important;
}

/* --- 6. Desktop Adjustments --- */
@media (min-width: 992px) {
    .floating-action-group {
        bottom: 40px;
        right: 30px;
    }

    /* On desktop, search isn't floating at bottom, so reset override */
    .floating-controls~.floating-action-group {
        bottom: 40px !important;
    }
}

/* ========================================= */
/* MAP: USER LOCATION PULSE                  */
/* ========================================= */

.user-location-dot {
    width: 18px;
    height: 18px;
    background-color: #4285F4;
    /* "Google Blue" */
    border: 3px solid #ffffff;
    border-radius: 50%;
    /* The pulse animation */
    animation: location-pulse 2s infinite;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@keyframes location-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.7);
    }

    70% {
        /* Expand the shadow ring and fade it out */
        box-shadow: 0 0 0 20px rgba(66, 133, 244, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0);
    }
}

/* ========================================= */
/* CUSTOM MAP MARKERS & CLUSTERS             */
/* ========================================= */

/* 1. The Pin Shape (Teardrop) */
.custom-map-pin {
    background-color: var(--bs-primary);
    /* Terracotta */
    width: 36px;
    height: 36px;
    border-radius: 50% 50% 50% 0;
    /* Creates the teardrop point */
    transform: rotate(-45deg);
    /* Tilts it to point down */
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    transition: transform 0.2s ease, background-color 0.2s;
}

/* 2. The Content Wrapper (Counter-Rotate to be Upright) */
.custom-map-pin .pin-content {
    transform: rotate(45deg);
    /* KEY FIX: Rotates back to 0deg (Vertical) */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* 3. The Icon Inside */
.custom-map-pin svg {
    width: 18px;
    height: 18px;
    color: white;
}

/* 4. Hover Effect */
.custom-map-pin:hover {
    transform: rotate(-45deg) scale(1.1);
    /* Keep angle, just grow */
    background-color: var(--bs-primary-text-emphasis);
    z-index: 1000 !important;
}

/* 5. Custom Clusters (Slate Blue) */
.marker-cluster-custom {
    background-color: rgba(61, 90, 128, 0.2);
    border-radius: 50%;
}

.marker-cluster-custom div {
    width: 36px;
    height: 36px;
    margin: 4px;
    background-color: var(--bs-secondary);
    color: white;
    text-align: center;
    border-radius: 50%;
    font-family: var(--bs-body-font-family);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.user-location-dot {
    z-index: 400 !important;
}

/* ========================================= */
/* SMART TOOLTIPS & ZOOM                     */
/* ========================================= */

/* 1. The Zoom Frame */
.zoom-frame {
    width: 100%;
    height: 60vh;
    overflow: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background-color: var(--bs-tertiary-bg);
    position: relative;
    margin-bottom: 1rem;
    scrollbar-width: thin;
    cursor: grab;
}

.zoom-frame:active {
    cursor: grabbing;
}

/* 2. The Image Container */
.image-container {
    width: 100%;
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    display: block !important;
    margin: 0 auto;
    position: relative;
    /* Headroom to prevent tooltip clipping */
    margin-top: 80px;
    margin-bottom: 80px;
    pointer-events: auto;
}

/* 3. The Hotspot */
.face-hotspot {
    position: absolute;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.0);
    transition: background-color 0.2s;
}

/* 4. The Smart Tooltip (Div) */
.hotspot-tooltip {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    /* Centered by default */
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    animation: tooltip-pop 0.2s forwards;
    /* Important: The JS will overwrite 'transform' to handle counter-scaling */
}

/* Modifier classes for edge detection */
.hotspot-tooltip.align-left {
    left: 0;
    transform: translateX(0);
}

.hotspot-tooltip.align-right {
    left: auto;
    right: 0;
    transform: translateX(0);
}

@keyframes tooltip-pop {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 5. Zoom Controls */
.zoom-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    background: var(--bs-body-bg);
    padding: 8px;
    border-radius: 50rem;
    border: 1px solid var(--bs-border-color);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.zoom-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

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

/* --- Modern Church Card Image Styles --- */
.church-card-img-wrapper {
    height: 150px;
    width: 100%;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    background-color: var(--bs-secondary-bg);
    flex-shrink: 0;
}

.church-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.4s ease, transform 0.5s ease;
}

.church-card:hover .church-card-img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

[data-bs-theme="dark"] .church-card-img {
    filter: grayscale(100%) brightness(0.8);
}

[data-bs-theme="dark"] .church-card:hover .church-card-img {
    filter: grayscale(0%) brightness(1);
}

/* ==========================================
   MODAL HOVER SHIFT FIX (THE FINAL LOCKDOWN)
   ========================================== */
#groupDetailModal a:hover {
    transform: none !important;
    border: none !important;
    /* Stops 1px border jumps */
    letter-spacing: inherit !important;
    /* Stops text expansion jumps */
    text-shadow: none !important;
}

#groupDetailModal .bg-body-tertiary:hover,
#groupDetailModal .list-group-item:hover {
    transform: none !important;
    box-shadow: none !important;
}

#groupDetailModal .video-play-link:hover {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* ==========================================
   CROSS-PAGE VIEW TRANSITIONS (SPA FEEL)
   ========================================== */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

::view-transition-old(root) {
    animation-name: fade-out;
}

::view-transition-new(root) {
    animation-name: fade-in, scale-up;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scale-up {
    from {
        transform: scale(0.98);
    }

    to {
        transform: scale(1);
    }
}

/* ==========================================
   SPONSORSHIP ENGINE STYLES
   ========================================== */
.sponsor-action-bar {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none !important;
    display: flex;
}

.sponsor-action-bar:active {
    transform: scale(0.98);
}

.sponsor-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: shine 7s infinite;
    pointer-events: none;
}

[data-bs-theme="dark"] .sponsor-shine {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
}

@keyframes shine {
    0% {
        left: -100%;
    }

    15% {
        left: 200%;
    }

    100% {
        left: 200%;
    }
}

/* ==========================================
   SILVER SPONSOR NATIVE FEED INTEGRATION
   ========================================== */
.fc-event-sponsor .fc-list-event-dot,
.fc-event-sponsor .fc-list-event-time {
    display: none !important;
    /* Hides the time and dot completely */
}

.fc-event-sponsor td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    background: linear-gradient(120deg, var(--bs-primary-bg-subtle) 0%, rgba(255, 255, 255, 0) 80%) !important;
    border-left: 4px solid var(--bs-primary) !important;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.fc-event-sponsor:hover td {
    background: linear-gradient(120deg, var(--bs-primary-bg-subtle) 20%, rgba(255, 255, 255, 0) 100%) !important;
    padding-left: 24px !important;
    /* Pushes the content right */
}

/* Dark Mode Support */
[data-bs-theme="dark"] .fc-event-sponsor td {
    background: linear-gradient(120deg, rgba(238, 108, 77, 0.12) 0%, rgba(0, 0, 0, 0) 80%) !important;
    border-left: 4px solid var(--bs-primary) !important;
}

[data-bs-theme="dark"] .fc-event-sponsor:hover td {
    background: linear-gradient(120deg, rgba(238, 108, 77, 0.2) 20%, rgba(0, 0, 0, 0) 100%) !important;
    padding-left: 24px !important;
}

/* ==========================================
   PREMIUM GOLD SPONSOR (TRUE GLASSMORPHISM)
   ========================================== */
.sponsor-card-gold {
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    isolation: isolate;
/*    -webkit-mask-image: -webkit-radial-gradient(white, black); */
}

/* LIGHT MODE: Frosted White Glass */
.sponsor-card-gold .glass-overlay {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.6) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1;
}

/* Light Mode Text Colors */
.sponsor-card-gold .gold-biz-name {
    color: #1a1a1a;
    text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.8);
}

.sponsor-card-gold .gold-biz-type {
    color: #4a5568;
}

.sponsor-card-gold .gold-chevron {
    color: #4a5568;
    opacity: 0.4;
}

/* DARK MODE: Smoked Dark Glass */
[data-bs-theme="dark"] .sponsor-card-gold .glass-overlay {
    background: linear-gradient(90deg, rgba(26, 32, 44, 0.95) 0%, rgba(26, 32, 44, 0.7) 100%);
}

/* Dark Mode Text Colors */
[data-bs-theme="dark"] .sponsor-card-gold .gold-biz-name {
    color: #ffffff;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8);
}

[data-bs-theme="dark"] .sponsor-card-gold .gold-biz-type {
    color: rgba(255, 255, 255, 0.6);
}

[data-bs-theme="dark"] .sponsor-card-gold .gold-chevron {
    color: rgba(255, 255, 255, 0.4);
    opacity: 1;
}

/* Forces logos to stay perfectly round and contained so they NEVER bleed */
.sponsor-logo-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}

.sponsor-logo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

/* Modal Avatar Fixes */
.sponsor-modal-avatar {
    width: 90px;
    height: 90px;
    margin-top: -45px;
    position: relative;
    z-index: 2;
    padding: 4px;
    background-color: var(--bs-body-bg);
}

/* Custom Carousel Dots (Pagination) */
.sponsor-carousel .carousel-indicators {
    margin-bottom: 2px;
    /* Keeps them snug inside the banner */
    bottom: 0;
}

.sponsor-carousel .carousel-indicators [data-bs-target] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--bs-primary) !important;
    /* Force Theme Orange */
    opacity: 0.4;
    border: none;
    /* Removes bootstrap's invisible click-border */
}

.sponsor-carousel .carousel-indicators .active {
    opacity: 1;
    background-color: var(--bs-primary) !important;
    /* Force Theme Orange */
    transform: scale(1.2);
    /* Slight pop for the active dot */
    transition: all 0.2s ease;
}

/* ==========================================
   SPONSORSHIP ENGINE STYLES
   ========================================== */
.sponsor-action-bar {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none !important;
    display: flex;
}

.sponsor-action-bar:active {
    transform: scale(0.98);
}

.sponsor-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: shine 7s infinite;
    pointer-events: none;
}

[data-bs-theme="dark"] .sponsor-shine {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
}

@keyframes shine {
    0% {
        left: -100%;
    }

    15% {
        left: 200%;
    }

    100% {
        left: 200%;
    }
}

/* ==========================================
   SILVER SPONSOR NATIVE FEED INTEGRATION
   ========================================== */
.fc-event-sponsor .fc-list-event-dot,
.fc-event-sponsor .fc-list-event-time {
    display: none !important;
    /* Hides the time and dot completely */
}

.fc-event-sponsor td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    background: linear-gradient(120deg, var(--bs-primary-bg-subtle) 0%, rgba(255, 255, 255, 0) 80%) !important;
    border-left: 4px solid var(--bs-primary) !important;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.fc-event-sponsor:hover td {
    background: linear-gradient(120deg, var(--bs-primary-bg-subtle) 20%, rgba(255, 255, 255, 0) 100%) !important;
    padding-left: 24px !important;
    /* Pushes the content right */
}

/* Dark Mode Support */
[data-bs-theme="dark"] .fc-event-sponsor td {
    background: linear-gradient(120deg, rgba(238, 108, 77, 0.12) 0%, rgba(0, 0, 0, 0) 80%) !important;
    border-left: 4px solid var(--bs-primary) !important;
}

[data-bs-theme="dark"] .fc-event-sponsor:hover td {
    background: linear-gradient(120deg, rgba(238, 108, 77, 0.2) 20%, rgba(0, 0, 0, 0) 100%) !important;
    padding-left: 24px !important;
}

/* ==========================================
   PREMIUM GOLD SPONSOR (TRUE GLASSMORPHISM)
   ========================================== */
.sponsor-card-gold {
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    isolation: isolate;
/*    -webkit-mask-image: -webkit-radial-gradient(white, black); */
}

/* LIGHT MODE: Frosted White Glass */
.sponsor-card-gold .glass-overlay {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.6) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1;
}

/* Light Mode Text Colors */
.sponsor-card-gold .gold-biz-name {
    color: #1a1a1a;
    text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.8);
}

.sponsor-card-gold .gold-biz-type {
    color: #4a5568;
}

.sponsor-card-gold .gold-chevron {
    color: #4a5568;
    opacity: 0.4;
}

/* DARK MODE: Smoked Dark Glass */
[data-bs-theme="dark"] .sponsor-card-gold .glass-overlay {
    background: linear-gradient(90deg, rgba(26, 32, 44, 0.95) 0%, rgba(26, 32, 44, 0.7) 100%);
}

/* Dark Mode Text Colors */
[data-bs-theme="dark"] .sponsor-card-gold .gold-biz-name {
    color: #ffffff;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8);
}

[data-bs-theme="dark"] .sponsor-card-gold .gold-biz-type {
    color: rgba(255, 255, 255, 0.6);
}

[data-bs-theme="dark"] .sponsor-card-gold .gold-chevron {
    color: rgba(255, 255, 255, 0.4);
    opacity: 1;
}

/* Forces logos to stay perfectly round and contained so they NEVER bleed */
.sponsor-logo-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}

.sponsor-logo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

/* Modal Avatar Fixes */
.sponsor-modal-avatar {
    width: 90px;
    height: 90px;
    margin-top: -45px;
    position: relative;
    z-index: 2;
    padding: 4px;
    background-color: var(--bs-body-bg);
}

/* Custom Carousel Dots (Pagination) */
.sponsor-carousel .carousel-indicators {
    margin-bottom: 2px;
    /* Keeps them snug inside the banner */
    bottom: 0;
}

.sponsor-carousel .carousel-indicators [data-bs-target] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--bs-primary) !important;
    /* Force Theme Orange */
    opacity: 0.4;
    border: none;
    /* Removes bootstrap's invisible click-border */
}

.sponsor-carousel .carousel-indicators .active {
    opacity: 1;
    background-color: var(--bs-primary) !important;
    /* Force Theme Orange */
    transform: scale(1.2);
    /* Slight pop for the active dot */
    transition: all 0.2s ease;
}

/* ==========================================
   CALENDAR LAYOUT: PERFECT FLEX SCROLL
   ========================================== */

/* 1. Lock the body but account for padding */
html:has(#calendar),
body:has(#calendar) {
    overflow: hidden !important;
    height: 100dvh !important;
}

/* 2. Calendar container takes remaining body height */
#calendar {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100%;
    overflow: hidden !important;
    scroll-margin-top: 100px !important;
}

/* 3. Toolbar, Ad, and Mobile Quick Filters NEVER shrink */
#calendar .fc-header-toolbar,
#mobileQuickFilters,
#sticky-gold-sponsor {
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
}

#calendar .fc-header-toolbar {
    padding-bottom: 5px;
    border-bottom: 1px solid var(--bs-border-color);
    z-index: 10;
}

/* 4. The Harness absorbs ONLY the exact remaining space */
#calendar .fc-view-harness {
    flex: 1 1 0% !important;
    /* The 0% forces strict boundaries */
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 5. Pass the height down to the list */
#calendar .fc-view {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 6. The Scroller handles all overflow */
#calendar .fc-scroller {
    flex: 1 1 0% !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* 7. Sticky Dates (Works perfectly inside the scroller) */
.fc-list-day th {
    background-color: var(--bs-body-bg) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}/* removed duplicate */


/* 8. Mobile Adjustments */
@media (max-width: 991.98px) {
    #calendar {
        height: calc(100% - 65px) !important;
        /* Leave room for mobile bottom nav */
    }

    #calendar .fc-view:not(.fc-daygrid) .fc-scroller {
        padding-bottom: 80px !important;
    }
}

/* ==========================================
   APP-LIKE CALENDAR LAYOUT (Strict Flexbox)
   ========================================== */

/* 1. Lock the body to the viewport ONLY on the calendar page */
body:has(#calendar) {
    height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. The main wrapper absorbs the body height (minus the fixed navbar padding) */
body:has(#calendar) .page-content-wrapper {
    flex: 1 1 0% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
}

/* 2.5 Ensure the container passes the height down! */
body:has(#calendar) .page-content-wrapper>.container {
    flex: 1 1 0% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
}

/* 3. Search controls sit at the top and don't shrink */
body:has(#calendar) .search-controls,
body:has(#calendar) .search-and-map-controls {
    flex-shrink: 0 !important;
}

/* 4. Calendar absorbs the rest of the wrapper */
#calendar {
    flex: 1 1 0% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    /* Critical for Flexbox shrinking */
    overflow: hidden !important;
}

/* 5. Inside the Calendar: Toolbar, Ad, and Mobile Quick Filters freeze */
#calendar .fc-header-toolbar,
#mobileQuickFilters,
#sticky-gold-sponsor {
    flex-shrink: 0 !important;
}

/* 6. Event list wrapper absorbs the rest of the Calendar */
#calendar .fc-view-harness {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 7. The actual scroller area */
#calendar .fc-scroller {
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* 8. Sticky Dates inside the scroller */
.fc-list-day th {
    background-color: var(--bs-body-bg) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .fc-list-day th {
    background-color: #212529 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* 9. Mobile Adjustments */
@media (max-width: 991.98px) {

    /* Apply bottom padding to scrollers to clear the mobile nav... 
       BUT explicitly ignore the Month Grid so it stays edge-to-edge! */
    #calendar .fc-view:not(.fc-daygrid) .fc-scroller {
        padding-bottom: 85px !important;
    }
}

/* ==========================================
   SILVER SPONSOR (MODAL WRAPPER MATCH)
   ========================================== */
.silver-sponsor-modal-card {
    padding: 12px 16px;
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--bs-primary);
    border-radius: 0.5rem;
    background: linear-gradient(120deg, var(--bs-primary-bg-subtle) 0%, rgba(255, 255, 255, 0) 80%);
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}

.silver-sponsor-modal-card:hover {
    background: linear-gradient(120deg, var(--bs-primary-bg-subtle) 20%, rgba(255, 255, 255, 0) 100%);
    padding-left: 24px;
}

/* Dark Mode Support */
[data-bs-theme="dark"] .silver-sponsor-modal-card {
    background: linear-gradient(120deg, rgba(238, 108, 77, 0.12) 0%, rgba(0, 0, 0, 0) 80%);
}

[data-bs-theme="dark"] .silver-sponsor-modal-card:hover {
    background: linear-gradient(120deg, rgba(238, 108, 77, 0.2) 20%, rgba(0, 0, 0, 0) 100%);
}

/* ==========================================
   MONTH GRID: SPACE OPTIMIZATIONS
   ========================================== */

/* 1. Tighten the Day-of-Week Headers (Sun, Mon, Tue) */
#calendar .fc-dayGridMonth-view .fc-col-header-cell-cushion {
    padding-bottom: 0px !important;
    padding-top: 4px !important;
    /* Optional: tightens the top edge too! */
}

/* 2. Tighten the space under the actual Day Numbers (1, 2, 3...) */
#calendar .fc-dayGridMonth-view .fc-daygrid-day-top {
    padding-bottom: 0px !important;
}

/* 3. (Optional) Make the event blocks slightly thinner to fit more on screen */
#calendar .fc-dayGridMonth-view .fc-daygrid-event {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    padding: 1px 2px !important;
}

/* ==========================================
   COMPLETELY HIDE SPONSORS FROM THE GRID VIEW 
   ========================================== */
#calendar .fc-dayGridMonth-view .fc-event-sponsor {
    display: none !important;
}

/* ==========================================
   MOBILE QUICK FILTER CHIPS
   ========================================== */
#mobileQuickFilters {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Hide standard Firefox scrollbar */
    border-bottom: 1px solid var(--bs-border-color);
    background-color: transparent !important;
    padding: 8px 12px;
}

#mobileQuickFilters::-webkit-scrollbar {
    display: none;
    /* Hide Chrome/Safari scrollbar */
}

.quick-filter-chip {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--bs-body-color);
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    font-size: 0.85rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .quick-filter-chip {
    background: rgba(30, 30, 30, 0.85);
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.quick-filter-chip:hover,
.quick-filter-chip:focus {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .quick-filter-chip:hover,
[data-bs-theme="dark"] .quick-filter-chip:focus {
    background: rgba(50, 50, 50, 1);
}

.quick-filter-chip {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
}

.quick-filter-chip span.label-text {
    display: inline-block;
    vertical-align: middle;
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-filter-chip.active span.label-text {
    max-width: 150px;
    opacity: 1;
    margin-left: 0.25rem;
}

/* Bento Box overrides for Calendar List View */
tr.fc-event-bento .fc-list-event-time,
tr.fc-event-bento .fc-list-event-graphic {
    display: none !important;
}
tr.fc-event-bento .fc-list-event-title {
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
}
tr.fc-event-bento:hover td {
    background-color: transparent !important;
}
/* Neutralize parent card chrome so bento-service-card is the sole visual */
.fc-list-event.fc-event-bento,
tr.fc-event-bento {
    margin: 4px 0 !important;
    padding: 0 !important;
    border-radius: 18px !important;
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.fc-list-event.fc-event-bento::before,
tr.fc-event-bento::before {
    display: none !important;
}
.fc-list-event.fc-event-bento:hover,
tr.fc-event-bento:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.quick-filter-chip.active,
.btn-check:checked + .quick-filter-chip {
    background: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(238, 108, 77, 0.3);
    transform: translateY(-2px);
}

#chip-favorites.active {

    border-color: #dc3545 !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.25);
}

/* ==========================================
   HEARTBEAT ANIMATION FIX
   ========================================== */
.calendar-heart-pulse {
    display: inline-block !important;
    transform-origin: center center !important;
    animation: organicHeartBeat 1.5s infinite !important;
    line-height: 1 !important;
}

/* This is the magic line that stops the square clipping */
.calendar-heart-pulse svg {
    overflow: visible !important; 
    filter: drop-shadow(0px 1px 3px rgba(220, 53, 69, 0.4)); /* Optional subtle glow */
}

/* A realistic double-beat pattern */
@keyframes organicHeartBeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.25); }
    28% { transform: scale(1); }
    42% { transform: scale(1.25); }
    70% { transform: scale(1); }
    100% { transform: scale(1); }
}

/* ==========================================================================
   APP-WIDE DESIGN SYSTEM EXTENSIONS (CORE LOOK & FEEL)
   ========================================================================== */

/* 1. Pulsing Animations */
@keyframes warning-badge-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(238, 108, 77, 0.45);
    }

    70% {
        transform: scale(1.03);
        box-shadow: 0 0 0 6px rgba(238, 108, 77, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(238, 108, 77, 0);
    }
}

.badge-pulse-animation,
.badge.bg-danger,
.badge.bg-warning {
    animation: warning-badge-pulse 2s infinite ease-in-out;
}

@keyframes heartbeat-scale {
    0% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}

.pulse-animation {
    animation: heartbeat-scale 1.5s infinite;
    display: inline-block;
}

/* 2. Glassmorphic Sticky Headers */
.fc-list-day th {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: background-color 0.3s;
}

[data-bs-theme="dark"] .fc-list-day th {
    background-color: rgba(33, 37, 41, 0.85) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 3. Fluid Page & Card Transitions */
.card,
.list-group-item,
.fc-list-event,
.church-card,
.group-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s, border-color 0.3s !important;
}

.fade-in-up {
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 4. Glassmorphism Navigation */
.navbar.fixed-top {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.02) !important;
    transition: background-color 0.3s, border-color 0.3s;
}

[data-bs-theme="dark"] .navbar.fixed-top {
    background-color: rgba(33, 37, 41, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-nav-bar {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    transition: background-color 0.3s, border-color 0.3s;
}

[data-bs-theme="dark"] .mobile-nav-bar {
    background-color: rgba(33, 37, 41, 0.85) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* 5. Premium Music Group Card Layout */
.group-card {
    overflow: hidden;
    position: relative;
    border-radius: 16px !important;
    border: none !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

.group-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}

[data-bs-theme="dark"] .group-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
}.group-banner-wrapper {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, #1e293b, #334155);
}

.group-banner-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(16px) brightness(0.5);
    opacity: 0.9;
    transform: scale(1.15);
    transition: transform 0.5s ease, filter 0.5s ease;
}

.group-card:hover .group-banner-blur {
    transform: scale(1.25);
    filter: blur(12px) brightness(0.6);
}

.group-banner-foreground-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 10px;
}

.group-banner-foreground-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.45);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.group-card:hover .group-banner-foreground-img {
    transform: scale(1.05);
}

/* 6. Interactive Vertical Timeline for Modal Schedule */
.interactive-timeline {
    position: relative;
    padding-left: 1.5rem;
    border-left: 2px solid var(--bs-border-color);
    margin-left: 0.75rem;
}

.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}/* removed duplicate */


.timeline-dot {
    position: absolute;
    left: calc(-1.5rem - 1px);
    top: 24px;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--bs-primary);
    border: 2px solid var(--bs-body-bg);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2);
    z-index: 2;
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-dot {
    background-color: #EE6C4D;
    box-shadow: 0 0 0 4px rgba(238, 108, 77, 0.3);
    transform: translate(-50%, -50%) scale(1.3);
}

.timeline-card {
    background-color: var(--bs-card-bg);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.timeline-card::before {
    content: '';
    position: absolute;
    top: 19px;
    left: -6px;
    width: 10px;
    height: 10px;
    background-color: var(--bs-card-bg);
    border-left: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
    transform: rotate(45deg);
    z-index: 1;
}

.timeline-item:hover .timeline-card {
    transform: translateX(4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--bs-primary-border-subtle) !important;
}

/* ==========================================================================
   MOBILE BOTTOM SHEET SYSTEM
   ========================================================================== */
.bottom-sheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    visibility: hidden;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bottom-sheet.show {
    visibility: visible;
    pointer-events: auto;
}

.bottom-sheet-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.bottom-sheet.show .bottom-sheet-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.bottom-sheet-container {
    position: relative;
    width: 100%;
    max-height: 85dvh;
    background-color: var(--bs-body-bg);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
    will-change: transform;
}

/* Pseudo-element to perfectly hide rubber-band gap on mobile by extending the background */
.bottom-sheet-container::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 100px;
    background-color: inherit;
    z-index: 1;
}/* removed duplicate */
/* removed duplicate */
/* removed duplicate */
/* removed duplicate */
/* removed duplicate */


.bottom-sheet-handle {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 5px;
    background-color: var(--bs-border-color);
    border-radius: 2.5px;
    opacity: 0.8;
    transition: background-color 0.2s;
}

.bottom-sheet-header-handle-zone:hover .bottom-sheet-handle {
    background-color: var(--bs-secondary-color);
}/* removed duplicate */
/* removed duplicate */
/* removed duplicate */
/* removed duplicate */
/* removed duplicate */
/* removed duplicate */
/* removed duplicate */
/* removed duplicate */
/* removed duplicate */
/* removed duplicate */
/* removed duplicate */
/* removed duplicate */
/* removed duplicate */
/* removed duplicate */
/* removed duplicate */
/* removed duplicate */
/* removed duplicate */


.participant-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bs-body-color);
    line-height: 1.25;
}/* removed duplicate */
/* removed duplicate */



.bottom-sheet.show .bottom-sheet-container {
    transform: translateY(0);
}

.bottom-sheet.dragging .bottom-sheet-container {
    transition: none !important;
}

/* Desktop centering for bottom sheet modals */
@media (min-width: 992px) {
    .bottom-sheet-container {
        max-width: 650px;
        margin: 0 auto;
        border-radius: 20px 20px 0 0;
    }
}

.bottom-sheet-header-handle-zone {
    width: 100%;
    padding: 12px 0 6px 0;
    display: flex;
    justify-content: center;
    cursor: grab;
    user-select: none;
    touch-action: none;
    position: relative;
}

.bottom-sheet-header-handle-zone:active {
    cursor: grabbing;
}

.bottom-sheet-handle,
.bottom-sheet-drag.bottom-sheet-handle,
.bottom-sheet-drag-handle {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 5px;
    background-color: var(--bs-border-color);
    border-radius: 2.5px;
    opacity: 0.8;
    transition: background-color 0.2s;
}

.bottom-sheet-header-handle-zone:hover .bottom-sheet-handle,
.bottom-sheet-header-handle-zone:hover .bottom-sheet-drag-handle {
    background-color: var(--bs-secondary-color);
}

.bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 15px 20px;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.bottom-sheet-title {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0;
    color: var(--bs-body-color);
}

.bottom-sheet-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.bottom-sheet-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 15px 20px;
    border-top: 1px solid var(--bs-border-color-translucent);
    background-color: var(--bs-tertiary-bg);
}

/* Flexbox ordering for calendar layout to prevent jumping */
#calendar {
    display: flex !important;
    flex-direction: column !important;
}

#calendar .fc-header-toolbar {
    order: 1 !important;
}

#calendar #mobileQuickFilters {
    order: 2 !important;
}

#calendar #sticky-gold-sponsor {
    order: 3 !important;
}

#calendar .fc-view-harness {
    order: 4 !important;
}

/* Premium Guest Speakers & Singings Card Styling */
.featured-participant-card {
    background: transparent;
    border: none !important;
    border-radius: 8px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 6px;
    margin-right: 6px;
    max-width: 100%;
    text-decoration: none !important;
}

.featured-participant-card:hover {
    transform: translateY(-2px);
    background: var(--bs-secondary-bg);
}

.featured-participant-card.favorite-highlight {
    border-color: rgba(220, 53, 69, 0.25) !important;
    background: rgba(220, 53, 69, 0.04) !important;
}

.featured-participant-card.favorite-highlight:hover {
    border-color: rgba(220, 53, 69, 0.45) !important;
    background: rgba(220, 53, 69, 0.08) !important;
}

.participant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    color: #fff;
    flex-shrink: 0;
    margin-right: 10px;
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.15);
    background-size: cover;
    background-position: center;
}

.participant-avatar.avatar-minister {
    background: linear-gradient(135deg, #0d6efd, #0dcaf0);
}

.participant-avatar.avatar-group {
    background: linear-gradient(135deg, #6f42c1, #d63384);
}

.participant-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}

.participant-name {
    font-size:1rem;
    font-weight: 700;
    color: var(--bs-body-color);
    line-height: 1.25;
}

.participant-subtext {
    font-size: 0.68rem;
    color: var(--bs-secondary-color);
    margin-top: 1px;
    line-height: 1.1;
    font-weight: 500;
}

[data-bs-theme="dark"] .featured-participant-card {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .featured-participant-card.favorite-highlight {
    background: rgba(220, 53, 69, 0.08) !important;
}

/* Micro-interaction: Smooth hover scale and translateY */
.animate-hover-scale {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.animate-hover-scale:hover {
    transform: translateY(-3px) scale(1.015) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--bs-primary-border-subtle) !important;
}

.animate-hover-scale:active {
    transform: scale(0.98) !important;
}

/* ==========================================================================
   MODERN CARD VIEW FOR FULLCALENDAR LIST VIEWS
   ========================================================================== */
.fc-list-table {
    display: block !important;
    border: none !important;
    padding: 0 4px !important;
}

/* Hide default FullCalendar event time column/cell and dot */
.fc-list-event td.fc-list-event-time,
.fc-list-event td.fc-list-event-dot {
    display: none !important;
}

.fc-list-table tbody {
    display: block !important;
}

/* Transform table rows into modern card layout (excluding bento service cards) */
.fc-list-event:not(.fc-event-bento) {
    display: block !important;
    margin: 16px 0 !important;
    padding: 16px 16px 16px 20px !important;
    border-radius: 16px !important;
    border: 1px solid var(--bs-border-color-translucent) !important;
    background-color: var(--bs-card-bg) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

[data-bs-theme="dark"] .fc-list-event:not(.fc-event-bento) {
    background-color: var(--bs-secondary-bg) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.fc-list-event:not(.fc-event-bento):hover {
    transform: translateY(-3px) scale(1.005) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06) !important;
    border-color: var(--bs-primary-border-subtle) !important;
}

[data-bs-theme="dark"] .fc-list-event:not(.fc-event-bento):hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
}

/* Premium Event Description & Schedule Card */
.event-desc-box {
    font-size: 0.85rem;
    color: var(--bs-body-color);
    background-color: transparent;
    border: none !important;
    border-left: 2px solid var(--bs-primary) !important;
    padding: 12px 14px;
    margin-top: 10px !important;
    line-height: 1.5;
    position: relative;
    overflow: hidden;
}

.event-desc-box .desc-header {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-primary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.event-desc-box .desc-content {
    white-space: normal;
    word-wrap: break-word;
}

/* Remove default FullCalendar cell styles */
.fc-list-event td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Event accent color left indicators (only for standard event cards) */
.fc-list-event:not(.fc-event-bento)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 6px;
    background-color: var(--event-accent-color, var(--bs-primary));
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

/* Event specific left accent colors */
.fc-list-event:not(.fc-event-bento).event-accent-revival::before {
    background-color: #ee6c4d;
}

.fc-list-event:not(.fc-event-bento).event-accent-singing::before {
    background-color: #6f42c1;
}

.fc-list-event:not(.fc-event-bento).event-accent-fundraiser::before {
    background-color: #198754;
}

.fc-list-event:not(.fc-event-bento).event-accent-special::before {
    background-color: #fd7e14;
}

.fc-list-event:not(.fc-event-bento).event-accent-camp::before {
    background-color: #20c997;
}

.fc-list-event:not(.fc-event-bento).event-accent-regular::before {
    background-color: #0d6efd;
}

.fc-list-event:not(.fc-event-bento).event-accent-communion::before {
    background-color: #a12b48;
}

.fc-list-event:not(.fc-event-bento).event-accent-baptizing::before {
    background-color: #0dcaf0;
}

.fc-list-event:not(.fc-event-bento).event-accent-default::before {
    background-color: #6c757d;
}

/* ==========================================
   MINIMALIST SECTION DIVIDER HEADERS
   ========================================== */
.fc-list-day {
    display: block !important;
    margin-top: 16px !important; 
    margin-bottom: 12px !important;
}

.fc-theme-standard .fc-list-day > th {
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.fc-theme-standard .fc-list {
    border: none !important;
}

/* 1. Group items on the left with a clean gap */
.fc-list-day-cushion {
    display: flex !important;
    justify-content: flex-start !important; /* Forces them together on the left */
    gap: 12px !important; /* Clean space between Day and Date */
    align-items: baseline !important; 
    padding: 0 4px 8px 4px !important; 
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--bs-border-color-translucent) !important;
}

.fc-list-day-cushion:hover {
    background: transparent !important; 
}

/* 2. The DAY (e.g., "Friday") - Pushed to the front, made large & bold */
.fc-list-day-side-text {
    order: 1 !important; /* Forces this to render first! */
    font-family: var(--bs-heading-font-family) !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: var(--bs-body-color) !important; /* Crisp white/dark depending on theme */
    text-decoration: none !important;
    text-transform: capitalize !important;
    letter-spacing: -0.5px !important;
}

/* 3. The DATE (e.g., "May 22, 2026") - Placed second, styled as a subtle accent */
.fc-list-day-text {
    order: 2 !important; /* Renders second */
    font-family: var(--bs-body-font-family) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--bs-primary) !important; /* Your signature orange */
    text-decoration: none !important;
    opacity: 0.9;
}

/* ==========================================================================
   REIMAGINED EVENT DETAILS BOTTOM SHEET STYLING
   ========================================================================== */
.event-hero-header {
    position: relative;
    width: 100%;
    min-height: 160px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    color: white;
}

.event-hero-blur-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    filter: blur(16px) brightness(0.6);
    transform: scale(1.15);
    z-index: 1;
}

.event-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.15) 100%);
    z-index: 2;
}

.event-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
}

.event-hero-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    line-height: 1.25;
}

.event-hero-subtitle {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: 6px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Horizontal Meta Pills */
.meta-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 600;
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color-translucent);
    color: var(--bs-body-color);
}

.meta-pill i,
.meta-pill svg {
    margin-right: 6px;
    flex-shrink: 0;
}

.meta-pill.type-revival {
    background-color: rgba(238, 108, 77, 0.12);
    color: #ee6c4d;
    border-color: rgba(238, 108, 77, 0.3);
}

.meta-pill.type-singing {
    background-color: rgba(111, 66, 193, 0.12);
    color: #6f42c1;
    border-color: rgba(111, 66, 193, 0.3);
}

.meta-pill.type-regular {
    background-color: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
    border-color: rgba(13, 110, 253, 0.3);
}

.meta-pill.type-fundraiser {
    background-color: rgba(25, 135, 84, 0.12);
    color: #198754;
    border-color: rgba(25, 135, 84, 0.3);
}

.meta-pill.type-special {
    background-color: rgba(253, 126, 20, 0.12);
    color: #fd7e14;
    border-color: rgba(253, 126, 20, 0.3);
}

.meta-pill.type-camp {
    background-color: rgba(32, 201, 151, 0.12);
    color: #20c997;
    border-color: rgba(32, 201, 151, 0.3);
}

.meta-pill.type-communion {
    background-color: rgba(161, 43, 72, 0.12);
    color: #a12b48;
    border-color: rgba(161, 43, 72, 0.3);
}

.meta-pill.type-baptizing {
    background-color: rgba(13, 202, 240, 0.12);
    color: #0dcaf0;
    border-color: rgba(13, 202, 240, 0.3);
}

/* Quick Action Bar */
.action-bar-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 12px;
    transition: all 0.2s ease;
    border: 1px solid var(--bs-border-color-translucent);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-decoration: none !important;
    cursor: pointer;
}

.action-btn:hover {
    transform: translateY(-2px);
    background-color: var(--bs-secondary-bg);
}

.action-btn i,
.action-btn svg {
    margin-right: 6px;
    font-size: 0.95rem;
}

.action-btn-primary {
    background-color: var(--bs-primary) !important;
    color: white !important;
    border-color: var(--bs-primary) !important;
}

.action-btn-primary:hover {
    background-color: #0b5ed7 !important;
}

/* Host/Featured Layout details */
.detail-section-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
    color: var(--bs-secondary-color);
    margin-bottom: 12px;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    padding-bottom: 4px;
}

.detail-section-body {
    margin-bottom: 24px;
}

.detail-info-card {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none !important;
    color: inherit;
    transition: all 0.2s ease;
}

.detail-info-card:hover {
    transform: translateY(-2px);
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-primary-border-subtle);
}

/* ========================================================================
   PREMIUM BENTO CARD — Regular Weekend Service Cards
   ======================================================================== */
.bento-service-card {
    position: relative;
    cursor: pointer;
    border-radius: 18px;
    padding: 20px 20px 16px 20px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition:
        transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        box-shadow 0.35s ease,
        border-color 0.3s ease;
    overflow: hidden;
}
.bento-service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--bs-primary) 0%, #3D5A80 100%);
    border-radius: 18px 0 0 18px;
    opacity: 0.85;
}
.bento-service-card:hover {
    transform: translateY(-4px) scale(1.008);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.06),
        0 16px 40px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    border-color: var(--bs-primary-border-subtle);
}
.bento-service-card:active {
    transform: translateY(-1px) scale(0.998);
    transition-duration: 0.1s;
}

/* Dark mode */
[data-bs-theme="dark"] .bento-service-card {
    background: rgba(45, 55, 72, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-bs-theme="dark"] .bento-service-card:hover {
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.2),
        0 16px 40px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-color: rgba(238, 108, 77, 0.3);
}

/* --- Header row & badges --- */
.bento-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 8px;
}
.bento-header-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.bento-church-name {
    font-family: var(--bs-heading-font-family, 'Outfit', sans-serif);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.3px;
    color: var(--bs-body-emphasis, var(--bs-body-color));
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.bento-church-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nth Weekend Badge */
.bento-nth-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--bs-primary) 0%, #d65a3b 100%);
    color: #fff;
    text-transform: uppercase;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(238, 108, 77, 0.3);
    line-height: 1.2;
}
[data-bs-theme="dark"] .bento-nth-badge {
    box-shadow: 0 2px 8px rgba(238, 108, 77, 0.4);
}

/* Distance pill */
.bento-dist-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bs-secondary);
    background: rgba(61, 90, 128, 0.08);
    border: 1px solid rgba(61, 90, 128, 0.15);
    border-radius: 20px;
    padding: 2px 10px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.2px;
}
[data-bs-theme="dark"] .bento-dist-badge {
    color: var(--bs-info);
    background: rgba(152, 193, 217, 0.1);
    border-color: rgba(152, 193, 217, 0.2);
}

/* Favorite heart */
.bento-fav-heart {
    color: #e74c3c;
    font-size: 0.8rem;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(231, 76, 60, 0.3));
}

/* --- Communion callout chip --- */
.bento-communion-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(161, 43, 72, 0.08) 0%, rgba(238, 108, 77, 0.06) 100%);
    border: 1px solid rgba(161, 43, 72, 0.12);
    font-size: 0.82rem;
    color: var(--bs-body-color);
}
.bento-communion-chip .communion-cross {
    font-size: 1.1rem;
    font-weight: 700;
    color: #dc3545;
    line-height: 1;
}
.bento-communion-chip .communion-label {
    font-weight: 700;
    color: #dc3545;
}
.bento-communion-chip .communion-detail {
    font-weight: 500;
    opacity: 0.85;
}
.bento-communion-chip .communion-note {
    font-size: 0.75rem;
    opacity: 0.7;
    font-style: italic;
}
[data-bs-theme="dark"] .bento-communion-chip {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.18) 0%, rgba(238, 108, 77, 0.08) 100%);
    border-color: rgba(220, 53, 69, 0.25);
}
[data-bs-theme="dark"] .bento-communion-chip .communion-cross,
[data-bs-theme="dark"] .bento-communion-chip .communion-label {
    color: #ff4d4d;
}

/* --- Service Times Grid --- */
.bento-services-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.bento-service-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.bento-day-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(61, 90, 128, 0.08);
    color: var(--bs-secondary);
    flex-shrink: 0;
}
[data-bs-theme="dark"] .bento-day-pill {
    background: rgba(152, 193, 217, 0.12);
    color: var(--bs-info);
}
.bento-service-row .bento-time {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--bs-body-color);
    letter-spacing: -0.1px;
}
.bento-service-row .bento-communion-marker {
    color: #a12b48;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    margin-left: -2px;
}
[data-bs-theme="dark"] .bento-service-row .bento-communion-marker {
    color: #e87a96;
}

/* --- Address footer --- */
.bento-address-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.8rem;
    color: var(--bs-secondary-color, var(--bs-body-color));
    opacity: 0.75;
}
.bento-address-footer i {
    font-size: 0.85rem;
    color: var(--bs-primary);
    flex-shrink: 0;
    opacity: 0.8;
}
.bento-address-footer span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-bs-theme="dark"] .bento-address-footer {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.detail-info-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(13, 110, 253, 0.1);
    color: var(--bs-primary);
    font-size: 1.3rem;
    border: 1px solid var(--bs-border-color-translucent);
}

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

.detail-info-meta {
    flex-grow: 1;
    min-width: 0;
}

.detail-info-name {
    font-weight: 700;
    font-size: 0.92rem;
    margin: 0;
    color: var(--bs-body-color);
}

.detail-info-subtext {
    font-size: 0.76rem;
    color: var(--bs-secondary-color);
    margin-top: 3px;
    margin-bottom: 0;
}

/* Timeline Layout for Series */
.timeline-list {
    position: relative;
    padding-left: 20px;
    list-style: none;
    margin: 0;
}

.timeline-list::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 4px;
    bottom: 5px;
    width: 2px;
    background-color: var(--bs-border-color);
}

.timeline-item {
    position: relative;
    margin-bottom: 12px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    top: 15px;
    left: -20px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--bs-border-color);
    border: 2px solid var(--bs-body-bg);
    z-index: 1;
    transition: all 0.2s ease;
}

.timeline-item.next-upcoming::before {
    background-color: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
    width: 12px;
    height: 12px;
    left: -21px;
    top: 14px;
}

.timeline-item.is-cancelled::before {
    background-color: var(--bs-danger);
}

.timeline-card {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timeline-item.next-upcoming .timeline-card {
    border-color: var(--bs-primary-border-subtle);
    background-color: rgba(13, 110, 253, 0.03);
}

.timeline-item.is-cancelled .timeline-card {
    background-color: rgba(220, 53, 69, 0.05);
    border-color: rgba(220, 53, 69, 0.2);
}

.timeline-card-left {
    min-width: 0;
}

.timeline-card-date {
    font-weight: 700;
    font-size: 0.85rem;
    margin: 0;
}

.timeline-card-time {
    font-size: 0.74rem;
    color: var(--bs-secondary-color);
    margin-top: 2px;
}

.timeline-card-badge {
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 50px;
    font-weight: 600;
}

/* iCal Add to Calendar Dropdown */
.calendar-dropdown {
    position: relative;
}

.calendar-dropdown-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    z-index: 1055;
    display: none;
    min-width: 180px;
    padding: 6px 0;
    margin: 0;
    font-size: 0.8rem;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.calendar-dropdown-menu.show {
    display: block;
}

.calendar-dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 16px;
    font-weight: 600;
    color: var(--bs-body-color);
    background-color: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: none !important;
}

.calendar-dropdown-item:hover {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.calendar-dropdown-item i {
    margin-right: 8px;
    font-size: 0.9rem;
}

/* Minister Profile Card Styling */
.minister-profile-card {
    position: relative;
    border: 1px solid var(--bs-border-color-translucent) !important;
}

.minister-profile-banner {
    height: 120px;
    background-size: cover;
    background-position: center;
    position: relative;
    filter: blur(4px);
    opacity: 0.75;
}

.minister-profile-banner .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), var(--bs-body-bg));
}

.minister-profile-info {
    margin-top: -60px;
    position: relative;
    z-index: 2;
}

.minister-hero-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin: 0 auto;
    border: 4px solid var(--bs-body-bg);
    overflow: hidden;
    background-color: var(--bs-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* Minister Upcoming Event Cards */
.event-schedule-card {
    border: 1px solid var(--bs-border-color-translucent) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.event-schedule-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================
   PARTICIPANT 2-COLUMN GRID
   ========================================== */
.participant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.participant-grid .detail-info-card,
.participant-grid a.detail-info-card {
    margin: 0 !important;
    min-width: 0;
}

/* On very narrow cards (single participant), let it span full width */
.participant-grid>*:only-child {
    grid-column: 1 / -1;
}

/* ==========================================
   COLLAPSE PAST EVENTS BANNER
   ========================================== */
.past-events-banner {
    margin: 8px 0 4px;
    padding: 0 4px;
}

.past-events-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color-translucent);
    border-left: 4px solid var(--bs-secondary);
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    transition: all 0.2s ease;
    text-align: left;
}

.past-events-toggle:hover {
    background: var(--bs-secondary-bg);
    border-left-color: var(--bs-primary);
    color: var(--bs-body-color);
}

.past-events-banner.expanded .past-events-toggle {
    border-left-color: var(--bs-primary);
    color: var(--bs-body-color);
}

.past-events-icon {
    font-size: 0.9rem;
    opacity: 0.7;
    flex-shrink: 0;
}

.past-events-label {
    flex: 1;
}

.past-events-count {
    font-weight: 400;
    opacity: 0.75;
    margin-left: 4px;
}

.past-events-chevron {
    flex-shrink: 0;
    transition: transform 0.25s ease;
    opacity: 0.6;
}

.past-events-banner.expanded .past-events-chevron {
    transform: rotate(180deg);
}

/* Hidden past events */
.past-event-hidden {
    display: none !important;
}

/* Disable the native OS context menu on these specific cards */
.featured-participant-card {
    -webkit-touch-callout: none;
}

/* Mobile-only touch tooltip */
@media (hover: none) {
    .participant-info {
        position: relative;
    }

    .featured-participant-card:active .participant-info::after {
        content: attr(data-fullname);
        position: absolute;
        bottom: 110%;
        /* Pops up just above the text */
        left: 0;
        background: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 5px 10px;
        border-radius: 6px;
        font-size: 0.8rem;
        z-index: 9999;
        white-space: nowrap;
        pointer-events: none;
        /* Prevents the tooltip from blocking clicks */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
}
/* ==========================================
   HERO OVERLAY META PILLS (Glassmorphism)
   ========================================== */
.hero-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* Override default pill colors with frosted glass */
.hero-meta-pills .meta-pill {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Helps text pop against light images */
}

/* Ensure all icons inside the glass pills are solid white */
.hero-meta-pills .meta-pill i,
.hero-meta-pills .meta-pill svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    opacity: 0.9;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}

/* Optional: Slight hover effect if the pills are ever clickable */
.hero-meta-pills .meta-pill:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* ==========================================
   CONDENSED HERO & GLASS PILLS
   ========================================== */

/* Shrinks the vertical height slightly while keeping the image proportional */
.condensed-hero {
    min-height: 150px;
    height: auto;
    border-radius: 0 0 16px 16px;
    background-color: var(--bs-primary);
}

.condensed-hero .event-hero-blur-bg {
    filter: blur(4px) brightness(0.85); /* Slightly less blur, slightly darker for text contrast */
    transform: scale(1.05); /* Prevents white edges from the blur */
}

.condensed-hero .event-hero-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.65) 100%);
}

/* The true Frosted Glass look for the pills */
.glass-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    line-height: 1;
    white-space: nowrap;
}

/* Force icons inside glass pills to be white so they don't clash */
.glass-pill i, 
.glass-pill svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    opacity: 0.95;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}

/* ==========================================
   HERO OPTION 5: FULL-BLEED GLASS FOOTER
   ========================================== */
.full-bleed-hero {
    min-height: 240px;
    height: auto;
    border-radius: 0 0 16px 16px;
    background-color: #1a1a1a;
}

.full-bleed-hero .event-hero-blur-bg {
    position: absolute;
    /* Using a negative inset instead of 'scale' prevents blurry white edges perfectly */
    inset: -5px; 
    filter: blur(2px) brightness(0.95);
    background-size: cover;
    background-position: center;
}

/* Subtle dark gradient to ensure the image looks rich */
.hero-v5-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.5) 100%);
    z-index: 1;
}

/* The Frosted Glass Bar at the bottom */
.hero-v5-glass-bar {
    position: absolute;
    bottom: 0; /* Reset to 0 */
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 16px 20px; /* Reset padding */
    z-index: 2;
}

/* The Event Type Pill (Solid White for contrast) */
.v5-type-tag {
    background: #ffffff !important;
    color: #212529 !important;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Forces the SVG Icon inside the white pill to use your primary brand color */
.v5-type-tag i,
.v5-type-tag svg {
    color: var(--bs-primary) !important;
    fill: var(--bs-primary) !important;
}

/* ==========================================
   CHURCH CARD STRICT UNIFORMITY
   ========================================== */
.church-card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Forces card to stretch to row height */
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--bs-body-bg);
}

.church-card-img-wrapper {
    height: 160px; /* Locked height for the image area */
    width: 100%;
    flex-shrink: 0; /* Prevents image from squishing */
    position: relative;
    background-color: var(--bs-secondary-bg);
}

.church-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill the box without stretching */
}

.church-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows the body to absorb remaining space */
    padding: 1.25rem;
}

/* Force titles to truncate if they span more than 2 lines */
.church-card .card-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pushes actions (like distance or view buttons) to the absolute bottom */
.church-card .card-actions {
    margin-top: auto; 
    padding-top: 1rem;
}

/* Draws attention on initial load */
@keyframes fab-subtle-swirl-pulse {
    0% { transform: scale(1) rotate(0deg); box-shadow: 0 0 0 0 rgba(238, 108, 77, 0.4); }
    50% { transform: scale(1.05) rotate(3deg); box-shadow: 0 0 0 12px rgba(238, 108, 77, 0); }
    100% { transform: scale(1) rotate(0deg); box-shadow: 0 0 0 0 rgba(238, 108, 77, 0); }
}

.fab-main.attention-grabber {
    animation: fab-subtle-swirl-pulse 3s infinite ease-in-out;
}



/* FAB Label Flyouts */
.fab-option::before { content: attr(data-label); position: absolute; right: 55px; top: 50%; transform: translateY(-50%) translateX(10px); background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); padding: 6px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border: 1px solid var(--bs-border-color); }

.speed-dial-container.active .fab-option::before { opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; }

/* ==========================================
   MUSIC GROUP DIRECTORY UI UPGRADES 
   ========================================== */

/* Glassmorphism Badges */
.glass-badge {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50rem !important;
    padding: 0.35rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.glass-badge i {
    color: #ffffff !important;
}

/* Full-bleed Card Layout with Blur Fill */
.group-card {
    cursor: pointer;
    overflow: hidden;
    position: relative;
    border: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 12px;
}

.group-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Base blurred image */
.group-banner-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(15px) brightness(0.4);
    z-index: 0;
    transform: scale(1.1); /* Prevent blur edges from showing */
}

/* Sharp foreground image container */
.group-banner-foreground-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.group-banner-foreground-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center 30%; /* slightly upper center focus */
}

/* Text Scrim (Linear Gradient Overlay) */
.card-text-scrim {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
    padding: 1.5rem 1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Ghost State for Inactive Groups */
.ghost-state-bg {
    filter: grayscale(100%) opacity(0.6) blur(20px) brightness(0.3) !important;
}

.ghost-state-img {
    filter: grayscale(80%) opacity(0.7) !important;
}

.ghost-state-text {
    opacity: 0.6 !important;
}

/* Ghost Pill Badge */
.inactive-pill-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
}

.inactive-pill-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #a0a0a0;
    border-radius: 50%;
    margin-right: 6px;
    box-shadow: 0 0 4px #a0a0a0;
}

.upcoming-event-pill {
    cursor: pointer;
    transition: background 0.2s ease;
}

.upcoming-event-pill:hover {
    background: rgba(0, 0, 0, 0.9);
}

.upcoming-event-pill::before {
    background-color: #ff4d4d !important;
    box-shadow: 0 0 4px #ff4d4d !important;
}

/* Video Row Hover Styles */
.video-row-clickable {
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    border-radius: 8px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
}

.video-row-clickable:hover {
    background-color: var(--bs-tertiary-bg);
}

.video-row-clickable:active {
    transform: scale(0.98);
}

/* YouTube Thumbnail styles */
.yt-thumbnail-list {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Group Avatar in List View */
.group-list-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    flex-shrink: 0;
}
.group-list-avatar-placeholder {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EE6C4D, #3D5A80);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    flex-shrink: 0;
}
/* Premium Playlist Tracklist (Modal) */
.premium-track-number {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    font-weight: 600;
    min-width: 20px;
    text-align: right;
    margin-right: 12px;
}

.video-select-link:hover .premium-track-number {
    color: var(--bs-primary);
}


/* Constrain full-screen bottom sheets on desktop */


/* Make sure offcanvas notch and header show grab cursor */


@keyframes hgFireFlicker {
    0%   { transform: rotate(-8deg) scale(1); filter: drop-shadow(0 0 2px rgba(255,152,0,0.4)); color: #ff9800; }
    50%  { transform: rotate(8deg) scale(1.05); filter: drop-shadow(0 0 8px rgba(255,193,7,0.8)); color: #ffc107; }
    100% { transform: rotate(-8deg) scale(1); filter: drop-shadow(0 0 2px rgba(255,152,0,0.4)); color: #ff9800; }
}
.hg-fire-icon {
    animation: hgFireFlicker 2.5s infinite ease-in-out;
    display: inline-block;
    transform-origin: bottom center;
}
/* --- Cancelled Event List View Styling --- */
.fc-list-event.cancelled-event {
    background-color: var(--bs-danger-bg-subtle, #f8d7da) !important;
}

[data-bs-theme="dark"] .fc-list-event.cancelled-event {
    background-color: rgb(44, 11, 14) !important;
}

/* Ensure inner td is completely transparent so the parent's color shows through */
.fc-list-event.cancelled-event td {
    background-color: transparent !important;
}

.fc-list-event.cancelled-event .fc-list-event-time,
.fc-list-event.cancelled-event .fc-list-event-title a {
    color: var(--bs-danger-text-emphasis, #58151c) !important;
}

[data-bs-theme="dark"] .fc-list-event.cancelled-event .fc-list-event-time,
[data-bs-theme="dark"] .fc-list-event.cancelled-event .fc-list-event-title a {
    color: #ea868f !important;
}

.fc-list-event.cancelled-event .participant-subtext {
    color: var(--bs-danger, #dc3545) !important;
    opacity: 0.85;
}


.fc-list-event.cancelled-event .featured-participant-card {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(220, 53, 69, 0.2) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .fc-list-event.cancelled-event .featured-participant-card {
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}


/* --- Premium Modal Backdrop Blur --- */
.modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Glassmorphism for specific modals */
.glass-modal-content {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--bs-border-color-translucent) !important;
}

[data-bs-theme="dark"] .glass-modal-content {
    background-color: rgba(33, 37, 41, 0.85) !important;
}

/* ==========================================
   NEW EDGE VISUAL UPDATES (Brainstorm)
   ========================================== */

/* --- 1. Island UI & Floating Navbar --- */
.island-navbar {
    margin: 1rem auto !important;
    border-radius: 50rem !important;
    max-width: 95%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0.5rem 1.5rem !important;
}

[data-bs-theme="dark"] .island-navbar {
    background: rgba(30, 30, 30, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* --- 2. Bento Box Layout --- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem 0;
}

.bento-item {
    background: var(--bs-body-bg);
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    border: 1px solid var(--bs-border-color-translucent);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.bento-item-large {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .bento-item-large {
        grid-column: span 1;
    }
}

.bento-item:hover {
    transform: scale(1.02);
    box-shadow: 0 16px 32px rgba(0,0,0,0.08);
}

[data-bs-theme="dark"] .bento-item {
    background: var(--bs-tertiary-bg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* --- 3. Aurora Gradients --- */
.aurora-bg {
    position: relative;
    overflow: hidden;
    background-color: var(--bs-body-bg);
}

.aurora-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(238, 108, 77, 0.12) 0%, transparent 40%),
                radial-gradient(circle at 80% 20%, rgba(61, 90, 128, 0.12) 0%, transparent 40%);
    z-index: 0;
    animation: auroraSpin 20s linear infinite;
    pointer-events: none;
}

[data-bs-theme="dark"] .aurora-bg::before {
    background: radial-gradient(circle at 50% 50%, rgba(238, 108, 77, 0.2) 0%, transparent 40%),
                radial-gradient(circle at 80% 20%, rgba(61, 90, 128, 0.2) 0%, transparent 40%);
}

@keyframes auroraSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.aurora-content {
    position: relative;
    z-index: 1;
}

/* --- 4. Advanced Micro-Interactions (Springs) --- */
.spring-hover {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.spring-hover:hover {
    transform: scale(1.04) translateY(-4px) !important;
}

.spring-click:active {
    transform: scale(0.96) !important;
}

/* Scroll Reveal classes */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- 5. Typography Elevate --- */
.edge-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.5rem, 5vw + 1rem, 4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
}

/* --- 6. FullCalendar Visual Overhaul --- */

/* Navigation Toolbar */
.fc-header-toolbar {
    margin-bottom: 2rem !important;
    align-items: center !important;
}

.fc-toolbar-chunk {
    display: flex;
    align-items: center;
}

.fc .fc-button-group {
    display: flex;
    gap: 0.35rem;
}

.fc .fc-button-group > .fc-button {
    flex: 1 1 auto;
    border-radius: 50rem !important;
    margin: 0 !important;
}

.fc .fc-button-primary {
    border-radius: 50rem !important;
    padding: 0.5rem 1.2rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.fc .fc-button-primary:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(238, 108, 77, 0.3) !important;
}

[data-bs-theme="dark"] .fc .fc-button-primary {
    background: var(--bs-tertiary-bg) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Day Headers */
.fc-list-day-cushion {
    background: linear-gradient(90deg, rgba(238, 108, 77, 0.1) 0%, transparent 100%) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 1.5rem !important;
    border: none !important;
    color: var(--bs-primary) !important;
    border-radius: 12px;
    margin-top: 1rem;
}

[data-bs-theme="dark"] .fc-list-day-cushion {
    background: linear-gradient(90deg, rgba(238, 108, 77, 0.2) 0%, transparent 100%) !important;
}

/* List View Bento Cards (Mobile Optimized) */
.fc-list {
    background: transparent !important;
    border: none !important;
}

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

.fc-list-table tbody {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fc-list-day {
    display: block;
}

.fc-list-day > th {
    display: block;
    background: transparent;
    border: none !important;
    padding: 0 !important;
}

.fc-list-event {
    display: block !important;
    background: var(--bs-body-bg) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
    border: 1px solid var(--bs-border-color-translucent) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.fc-list-event:hover {
    box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
    border-color: var(--bs-primary) !important;
    background: var(--bs-body-bg) !important; /* overrides standard table hover */
}

.fc-list-event td {
    display: block !important;
    border: none !important;
    padding: 1rem !important;
    background: transparent !important;
}

[data-bs-theme="dark"] .fc-list-event {
    background: var(--bs-tertiary-bg) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
}
[data-bs-theme="dark"] .fc-list-event:hover {
    background: var(--bs-tertiary-bg) !important;
}

/* Grid View Enhancements */
.fc-daygrid-event {
    border-radius: 8px !important;
    padding: 2px 4px !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
}

.fc-daygrid-event:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.1) !important;
    z-index: 5 !important;
}

/* ==========================================
   DIGESTIBLE EVENT UI REFINEMENTS
   ========================================== */

.fc-list-event .fc-list-event-title, 
.fc-list-event .fc-list-event-time {
    padding: 8px 10px !important;
}

/* Participant Pill (Compact inline avatar + name) */
.participant-pill {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px;
    text-decoration: none !important;
    color: var(--bs-body-color);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-bs-theme="light"] .participant-pill {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.05);
}
.participant-pill:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
}
[data-bs-theme="light"] .participant-pill:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}
.participant-pill .participant-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
    margin-right: 12px;
    box-shadow: none;
    flex-shrink: 0;
}
.participant-pill.favorite-highlight {
    background: rgba(220, 53, 69, 0.06);
    border-color: rgba(220, 53, 69, 0.2);
}

.participant-name-pill {
    line-height: 1;
}

/* Holy Ghost Highlight Pill */
.hg-highlight-card {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(253, 126, 20, 0.05) 100%);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 12px;
    padding: 10px 14px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hg-highlight-header {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #d39e00;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
[data-bs-theme="dark"] .hg-highlight-header {
    color: #ffda6a;
}
.hg-highlight-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0;
}

/* Cancellations Highlight Card */
.cancel-highlight-card {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.03) 100%);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 12px;
    padding: 10px 14px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cancel-highlight-header {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--bs-danger);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cancel-highlight-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0;
}

/* ==========================================================================
   EVENT POSTER HERO REDESIGN
   ========================================================================== */
.event-poster-hero {
    position: relative;
    margin: -20px -20px 0 -20px;
    height: 320px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
}

.poster-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.95) 100%);
    pointer-events: none;
}

.poster-content {
    position: relative;
    z-index: 2;
    padding: 20px;
    padding-bottom: 35px; /* Leave room for floating bar */
}

.poster-title {
    color: white;
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 6px;
    text-shadow: 0 4px 12px rgba(0,0,0,0.5);
    letter-spacing: -0.5px;
}

.poster-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
    font-weight: 600;
}

.type-pill {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255,255,255,0.2) !important;
    border: 1px solid rgba(255,255,255,0.3);
    color: white !important;
}

/* FLOATING ACTION BAR */
.floating-action-bar {
    position: relative;
    z-index: 10;
    margin-top: -25px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 10px);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 100px;
    padding: 6px;
    display: flex;
    gap: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

[data-bs-theme="dark"] .floating-action-bar {
    background: rgba(40, 40, 40, 0.85);
    border-color: rgba(255,255,255,0.1);
}

.btn-glass {
    border: none;
    background: transparent;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-glass:active {
    transform: scale(0.95);
}

.action-main {
    flex: 1;
    background: var(--bs-primary);
    color: white;
    padding: 10px 16px;
    gap: 8px;
}
.action-main:hover {
    background: var(--bs-primary-border-subtle);
}

.action-icon {
    width: 44px;
    height: 44px;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    flex-shrink: 0;
}

/* BENTO STATS GRID */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.stats-box {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 85px;
    margin: 0 !important;
}

.stats-icon {
    font-size: 1.15rem;
    margin-bottom: auto;
}

.stats-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--bs-secondary-color);
    margin-top: 8px;
}

.stats-value {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
    margin-top: 2px;
}

/* HORIZONTAL SCROLLING AVATARS */
.horizontal-scrolling-avatars {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
}
.horizontal-scrolling-avatars::-webkit-scrollbar {
    display: none;
}

.featuring-item-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 95px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s;
}

.featuring-item-scroll:active {
    transform: scale(0.95);
}

.featuring-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin-bottom: 8px;
    border: 3px solid transparent;
    padding: 2px;
    background-clip: content-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.featuring-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-initials {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.featuring-name {
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    width: 100%;
    color: var(--bs-body-color);
    white-space: normal;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featuring-role {
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
    width: 100%;
    margin-top: 2px;
}

/* HOLY GHOST BANNER */
.holy-ghost-banner {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
    border-radius: 20px;
    padding: 16px;
    gap: 16px;
}

[data-bs-theme="dark"] .holy-ghost-banner {
    background: linear-gradient(135deg, rgba(255, 154, 158, 0.2) 0%, rgba(254, 207, 239, 0.2) 100%);
    border: 1px solid rgba(255, 154, 158, 0.3);
}

.hg-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

[data-bs-theme="dark"] .hg-icon {
    background: rgba(0,0,0,0.3);
}

.hg-content {
    flex: 1;
}

.hg-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: #b71540;
    margin-bottom: 2px;
}

[data-bs-theme="dark"] .hg-title {
    color: #ff9a9e;
}

.hg-names {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(183, 21, 64, 0.8);
    margin: 0;
    line-height: 1.3;
}

[data-bs-theme="dark"] .hg-names {
    color: rgba(255, 154, 158, 0.8);
}


/* ==========================================================================
   TICKET STUB EVENT CARDS
   ========================================================================== */
.ticket-card {
    display: flex;
    background: var(--bs-body-bg);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    margin-bottom: 16px;
}

[data-bs-theme="dark"] .ticket-card {
    background: var(--bs-tertiary-bg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.ticket-stub {
    width: 85px;
    background: var(--bs-secondary-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
    border-right: 2px dashed var(--bs-border-color);
    flex-shrink: 0;
}

.ticket-body {
    flex: 1;
    padding: 16px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* EXTENDED FAB CSS */
.fab-main {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    isolation: isolate;
}

.fab-main::before {
    content: attr(data-label);
    position: absolute;
    right: 100%;
    top: 50%;
    
    /* Fixed Layout (No thrashing) */
    padding: 5px 15px;
    border: 2px solid var(--bs-primary);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    
    /* Hidden State */
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0);
    
    /* Slide 60px right, mask the right side exactly 60px to anchor visually to the button's left edge */
    transform: translateY(-50%) translateX(60px);
    clip-path: inset(-20px 60px -20px -20px);
    
    /* Closing Transition: Slower (0.6s) and smooth (no bounce) */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.5s ease-out,
                box-shadow 0.6s ease-out;
}

.fab-main.extended::before {
    /* Visible State */
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    
    /* Pushed 12px left, right mask matched to keep edge pinned */
    transform: translateY(-50%) translateX(-12px);
    clip-path: inset(-20px -12px -20px -20px);
    
    /* Opening Transition: Snappy and bouncy */
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                clip-path 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.4s ease-out,
                box-shadow 0.5s ease-out;
}

.speed-dial-container.active .fab-main.extended::before {
    opacity: 0;
    transform: translateY(-50%) translateX(60px);
    clip-path: inset(-20px 60px -20px -20px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0);
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease-out;
}

.fab-main .fab-icon-default,
.fab-main .fab-icon-active {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.highlight-card {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    transform: translateY(-5px);
    position: relative;
    z-index: 10;
}

/* Apply ring to the card itself if it's not a flip-card */
.highlight-card:not(.flip-card) {
    outline: 4px solid var(--bs-primary) !important;
    outline-offset: 2px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important;
}

/* If it IS a flip-card, apply ring to its inner faces so it animates cleanly */
.highlight-card.flip-card .flip-card-front,
.highlight-card.flip-card .flip-card-back {
    outline: 4px solid var(--bs-primary) !important;
    outline-offset: 2px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important;
}

[data-bs-theme="dark"] .highlight-card:not(.flip-card) {
    box-shadow: 0 15px 30px rgba(0,0,0,0.5) !important;
}

[data-bs-theme="dark"] .highlight-card.flip-card .flip-card-front,
[data-bs-theme="dark"] .highlight-card.flip-card .flip-card-back {
    box-shadow: 0 15px 30px rgba(0,0,0,0.5) !important;
}

@keyframes highlightPulse {
    0% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7); transform: scale(1); }
    50% { box-shadow: 0 0 0 15px rgba(13, 110, 253, 0); transform: scale(1.02); }
    100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0); transform: scale(1); }
}
.highlight-pulse {
    animation: highlightPulse 1s ease-out;
    border: 2px solid var(--bs-primary) !important;
}


/* ==========================================
 * CALENDAR SWIPE ANIMATIONS
 * ========================================== */
@keyframes swipeSlideInRight {
    from { transform: translateX(60px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes swipeSlideInLeft {
    from { transform: translateX(-60px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.fc-swipe-next .fc-view-harness {
    animation: swipeSlideInRight 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

.fc-swipe-prev .fc-view-harness {
    animation: swipeSlideInLeft 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

/* ==========================================
 * CALENDAR FAINT SIDE NAVIGATION
 * ========================================== */
/* Default prev/next buttons are visible in the toolbar */

/* Custom circular side navigation buttons */
.custom-cal-nav-btn {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(128, 128, 128, 0.4);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    z-index: 10;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.custom-cal-nav-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.custom-cal-nav-btn:active {
    background: rgba(128, 128, 128, 0.6);
    transform: translateY(-50%) scale(0.95);
}

@media (hover: hover) {
    .custom-cal-nav-btn:hover {
        background: rgba(128, 128, 128, 0.6);
    }
}

.custom-cal-nav-btn.prev {
    left: -2px;
}

.custom-cal-nav-btn.next {
    right: -2px;
}

/* Adjust for larger screens to push arrows completely outside the calendar events */
@media (min-width: 768px) {
    .custom-cal-nav-btn.prev { left: -50px; }
    .custom-cal-nav-btn.next { right: -50px; }
}

/* Add padding to the calendar view so content doesn't overlap the buttons too much */
.fc .fc-view-harness {
    padding: 0 10px !important;
}

/* ==========================================
 * CUSTOM TODAY BUTTON HIGHLIGHT
 * ========================================== */
#calendar.is-today-active .fc-customToday-button {
    background-color: var(--bs-primary) !important;
    color: white !important;
    border-color: var(--bs-primary) !important;
}

/* Ensure smooth scrolling doesn't hide elements under the sticky nav */
.fc-list-day th,
.fc-list-event td,
.fc-list-day,
.fc-list-event {
    scroll-margin-top: 100px;
}



/* =========================================
   NOTIFICATION DRAWER UI/UX ENHANCEMENTS
   ========================================= */

/* 1. Glassmorphism Background */
#notificationDrawer {
    background-color: rgba(33, 37, 41, 0.82) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}
#notificationDrawer .offcanvas-header {
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* 2. Staggered Entrance Animation */
@keyframes notifSlideFadeIn {
    0% {
        opacity: 0;
        transform: translateY(25px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
#notificationDrawer .notif-card {
    opacity: 0;
    animation: notifSlideFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease;
    will-change: transform, opacity;
}

/* 3. Tactile Hover Effects */
#notificationDrawer .notif-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
    z-index: 2;
}

/* 4. Pulsing Unread Dots */
@keyframes pulseGlowPrimary {
    0% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7); }
    70% { box-shadow: 0 0 0 7px rgba(13, 110, 253, 0); }
    100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0); }
}
@keyframes pulseGlowWarning {
    0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
    70% { box-shadow: 0 0 0 7px rgba(255, 193, 7, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}
.unread-dot-primary {
    animation: pulseGlowPrimary 2s infinite cubic-bezier(0.66, 0, 0, 1);
}
.unread-dot-warning {
    animation: pulseGlowWarning 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

/* 5. Custom Sleek Scrollbar */
#notificationDrawer .offcanvas-body::-webkit-scrollbar {
    width: 6px;
}
#notificationDrawer .offcanvas-body::-webkit-scrollbar-track {
    background: transparent;
}
#notificationDrawer .offcanvas-body::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}
#notificationDrawer .offcanvas-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* 6. Buttery Smooth Accordions */
#notificationDrawer .collapse {
    transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
#notificationDrawer .collapsing {
    transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}


/* ========================================= */
/* NOTIFICATION READ / UNREAD STATES         */
/* ========================================= */

.notif-card {
    transition: all 0.3s ease;
}

/* Unread Notifications */
.notif-card.unread-notification {
    background-color: var(--bs-body-bg);
}
.notif-card.unread-notification .notif-title {
    font-weight: 800 !important;
}

/* Read Notifications */
.notif-card:not(.unread-notification) {
    background-color: var(--bs-tertiary-bg);
    opacity: 0.75;
}
.notif-card:not(.unread-notification) .notif-title {
    font-weight: 500 !important;
}
.notif-card:not(.unread-notification) .bi {
    opacity: 0.75;
}


/* ========================================= */
/* MULTI-FLYER CAROUSEL PREMIUM STYLES       */
/* ========================================= */
.flyer-carousel-wrapper {
    background: #090d14;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.flyer-carousel-item-bg {
    background: radial-gradient(circle at center, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.95) 100%);
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.flyer-carousel-img {
    max-height: 580px;
    object-fit: contain;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease;
}

.flyer-badge-pill {
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #f8fafc !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.flyer-control-btn {
    width: 44px;
    height: 44px;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-control-prev:hover .flyer-control-btn,
.carousel-control-next:hover .flyer-control-btn {
    background: rgba(238, 108, 77, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(238, 108, 77, 0.4);
}

.flyer-carousel-indicators {
    bottom: 12px;
    margin-bottom: 0;
    gap: 6px;
}

.flyer-carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4) !important;
    border: none;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.flyer-carousel-indicators .active {
    width: 26px;
    border-radius: 12px;
    background-color: var(--bs-primary, #EE6C4D) !important;
    opacity: 1;
}

/* ========================================= */
/* FLYER FULLSCREEN LIGHTBOX STYLES          */
/* ========================================= */
.flyer-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 8, 15, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 10500;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.flyer-lightbox-body {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    overflow: hidden;
}

.flyer-lightbox-body:active {
    cursor: grabbing;
}

.flyer-lightbox-img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    transition: transform 0.1s ease-out;
    transform-origin: center center;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    border-radius: 8px;
}

/* ========================================= */
/* FLYER CAROUSEL MOBILE CONTROLS & VISIBILITY*/
/* ========================================= */
.flyer-control-btn {
    width: 42px;
    height: 42px;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-control-prev,
.carousel-control-next {
    width: 48px !important;
    opacity: 0.95 !important;
    z-index: 10 !important;
}

.carousel-control-prev {
    left: 4px !important;
    justify-content: start !important;
}

.carousel-control-next {
    right: 4px !important;
    justify-content: end !important;
}

.carousel-control-prev:hover .flyer-control-btn,
.carousel-control-next:hover .flyer-control-btn,
.carousel-control-prev:focus .flyer-control-btn,
.carousel-control-next:focus .flyer-control-btn {
    background: var(--bs-primary, #EE6C4D) !important;
    color: #ffffff !important;
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(238, 108, 77, 0.5);
}

/* ========================================= */
/* FLYER CAROUSEL OUTER EDGE BUTTONS         */
/* ========================================= */
#modal-flyer-section {
    position: relative;
    overflow: visible !important;
}

.flyer-carousel-wrapper {
    background: #090d14;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    overflow: visible !important;
}

.flyer-control-btn {
    width: 40px;
    height: 40px;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-control-prev,
.carousel-control-next {
    width: 40px !important;
    height: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important;
    z-index: 25 !important;
}

.carousel-control-prev {
    left: -18px !important;
    justify-content: center !important;
}

.carousel-control-next {
    right: -18px !important;
    justify-content: center !important;
}

@media (max-width: 576px) {
    .carousel-control-prev {
        left: -12px !important;
    }
    .carousel-control-next {
        right: -12px !important;
    }
}

.carousel-control-prev:hover .flyer-control-btn,
.carousel-control-next:hover .flyer-control-btn,
.carousel-control-prev:focus .flyer-control-btn,
.carousel-control-next:focus .flyer-control-btn {
    background: var(--bs-primary, #EE6C4D) !important;
    color: #ffffff !important;
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(238, 108, 77, 0.5);
}

/* ========================================= */
/* FLYER LIGHTBOX MOBILE RESPONSIVE TWEAKS   */
/* ========================================= */
@media (max-width: 576px) {
    .flyer-lightbox-toolbar {
        padding: 8px 12px !important;
    }
    .flyer-lightbox-img {
        max-width: 95vw !important;
        max-height: 80vh !important;
    }
    .flyer-lightbox-hint {
        font-size: 0.72rem !important;
        white-space: nowrap !important;
        bottom: 10px !important;
        padding: 4px 12px !important;
    }
}

/* ========================================= */
/* GPU HARDWARE ACCELERATION OPTIMIZATIONS   */
/* ========================================= */
.flyer-carousel-img,
.flyer-lightbox-img {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}


/* ========================================================= */
/* MOBILE-FRIENDLY ADMIN CARD & DUAL-MODE STYLES (BETA)     */
/* ========================================================= */

/* Container and View Toggle */
.admin-view-toggle .btn {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
}

.admin-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* Visual Admin Card */
.admin-card {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* BENTO STATS GRID */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bento-box {
    background-color: var(--bs-tertiary-bg, rgba(255, 255, 255, 0.05)) !important;
    border: 1px solid var(--bs-border-color-translucent, rgba(255, 255, 255, 0.1)) !important;
    border-radius: 16px !important;
    padding: 14px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stats-box {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 85px;
    margin: 0 !important;
}

.admin-card:hover {
    transform: translateY(-2px);
    border-color: rgba(238, 108, 77, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.admin-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.admin-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0;
    line-height: 1.3;
}

.admin-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.825rem;
    color: #94a3b8;
}

.admin-card-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.25rem 0.6rem;
    border-radius: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.admin-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

.admin-card-actions .btn {
    flex: 1;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 0.5rem;
}

/* Nth Weekend Badge */
.bento-nth-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 0 8px;
    height: 20px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--bs-primary) 0%, #d65a3b 100%);
    color: #fff;
    text-transform: uppercase;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(238, 108, 77, 0.3);
    line-height: 1;
}
[data-bs-theme="dark"] .bento-nth-badge {
    box-shadow: 0 2px 8px rgba(238, 108, 77, 0.4);
}

/* Mobile Floating Action Button (FAB) */
.admin-mobile-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EE6C4D, #e05330);
    color: #ffffff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 10px 25px rgba(238, 108, 77, 0.4);
    z-index: 1040;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-mobile-fab:active {
    transform: scale(0.92);
}

@media (max-width: 991.98px) {
    .admin-mobile-fab {
        display: flex;
    }
}


/* ========================================================= */
/* EXPANDABLE ADMIN SPEED DIAL FAB STYLES                    */
/* ========================================================= */
.admin-fab-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
}

.admin-fab-container > button,
.admin-fab-container > .admin-fab-menu {
    pointer-events: auto;
}

.admin-fab-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px) scale(0.95);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.admin-fab-container.active .admin-fab-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.admin-fab-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.admin-fab-label {
    background: rgba(15, 23, 42, 0.92);
    color: #f8fafc;
    font-size: 0.825rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}

.admin-fab-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: transform 0.15s ease;
}

.admin-fab-item:hover .admin-fab-icon {
    transform: scale(1.1);
}

.admin-mobile-fab {
    display: flex !important;
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
}


/* ========================================================= */
/* CLEAN HEADER ACTION CONTROLS & MOBILE RESPONSIVENESS     */
/* ========================================================= */

.admin-header-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-grow: 1;
    justify-content: flex-end;
}

/* Custom Styled Sort Dropdown */
.admin-sort-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(15, 23, 42, 0.85) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 12px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
    font-size: 0.825rem !important;
    font-weight: 500 !important;
    height: 38px !important;
    border-radius: 20px !important;
    padding-left: 0.85rem !important;
    padding-right: 2.2rem !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.admin-sort-select:focus {
    outline: none !important;
    border-color: #EE6C4D !important;
    box-shadow: 0 0 0 3px rgba(238, 108, 77, 0.25) !important;
}

.admin-sort-select option {
    background-color: #0f172a;
    color: #f8fafc;
}

/* Custom Styled Search Bar */
.admin-card-search-wrapper {
    position: relative;
    flex-grow: 1;
    max-width: 280px;
}

.admin-card-search {
    background-color: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
    font-size: 0.85rem !important;
    height: 38px !important;
    border-radius: 20px !important;
    padding-left: 2.3rem !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.admin-card-search:focus {
    outline: none !important;
    border-color: #EE6C4D !important;
    box-shadow: 0 0 0 3px rgba(238, 108, 77, 0.25) !important;
}

/* Mobile responsive rules */
@media (max-width: 767.98px) {
    /* Hide top New Record button on mobile (handled by bottom-right FAB) */
    .action-header > .btn-primary {
        display: none !important;
    }

    /* Hide Table/Cards toggle on mobile (defaults to Cards automatically) */
    .admin-view-toggle {
        display: none !important;
    }

    .admin-header-controls {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: space-between !important;
    }

    .admin-sort-select {
        flex: 1 1 45% !important;
        max-width: 50% !important;
    }

    .admin-card-search-wrapper {
        flex: 1 1 50% !important;
        max-width: 50% !important;
    }
}

/* ==========================================
   HOLY GHOST TRACKER RECENT RECORD ANIMATION & BADGES
   ========================================== */
@keyframes hgFabRingPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.9);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(255, 193, 7, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

@keyframes hgFlameIntensePulse {
    0% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0px 0px 3px rgba(220, 53, 69, 0.9));
    }
    25% {
        transform: scale(1.25) rotate(-6deg);
        filter: drop-shadow(0px 0px 10px rgba(255, 193, 7, 1)) drop-shadow(0px 0px 18px rgba(255, 87, 34, 1));
    }
    50% {
        transform: scale(1.1) rotate(6deg);
        filter: drop-shadow(0px 0px 14px rgba(255, 87, 34, 1));
    }
    75% {
        transform: scale(1.25) rotate(-3deg);
        filter: drop-shadow(0px 0px 10px rgba(255, 193, 7, 1));
    }
    100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0px 0px 3px rgba(220, 53, 69, 0.9));
    }
}

.fab-opt-hg.has-recent-hg {
    animation: hgFabRingPulse 2s infinite !important;
    border: 2px solid #ffc107 !important;
}

.fab-opt-hg.has-recent-hg i {
    animation: hgFlameIntensePulse 1.8s infinite ease-in-out !important;
    color: #ff3d00 !important;
}

/* Main FAB Button Attention Pulsing */
@keyframes hgMainFabPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.9), 0 4px 10px rgba(0, 0, 0, 0.3);
    }
    70% {
        box-shadow: 0 0 0 16px rgba(255, 193, 7, 0), 0 4px 10px rgba(0, 0, 0, 0.3);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0), 0 4px 10px rgba(0, 0, 0, 0.3);
    }
}

#fabMainBtn.has-recent-hg-main {
    animation: hgMainFabPulse 2s infinite !important;
    border: 2px solid #ffc107 !important;
}

.hg-main-fire-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    background-color: #ffc107;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    box-shadow: 0 0 8px #ffc107;
    z-index: 10;
    animation: hgFlameIntensePulse 1.8s infinite ease-in-out;
}

.hg-new-badge {
    animation: hgFabRingPulse 2s infinite;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
}