body {
    font-family: 'DM Sans', sans-serif;
    background-color: #fbf7f0; /* Sepia background */
    color: #4f463c; /* Darker sepia text */
}
h1, h2, h3, h4, h5 {
     color: #3e352e; /* Even darker for headers */
}
.details-transition {
    transition: max-height 0.12s ease-in-out, padding 0.12s ease-in-out, border 0.12s ease-in-out;
}
.group-venues-container {
    transition: max-height 0.12s ease-in-out;
}
.group-chevron-icon {
    transition: transform 0.12s ease-in-out;
}
.panel-transition {
    transition: transform 0.3s ease-in-out;
}
.overlay-transition {
    transition: opacity 0.3s ease-in-out;
}
.icon {
    width: 14px;
    height: 14px;
    stroke-width: 2.5px;
}

.chevron-icon svg,
.group-chevron-icon svg {
    width: 20px;
    height: 20px;
}

/* Hide entire header initially - shown all together when ready */
/* Show title and tagline images immediately, hide everything else until ready */
html:not([data-header-ready]) #logo-img,
html:not([data-header-ready]) #tagline-img {
    display: block;
}

html:not([data-header-ready]) #welcome-bar,
html:not([data-header-ready]) #search-container,
html:not([data-header-ready]) #settings-open-btn {
    display: none;
}

/* When header is ready, show everything */
html[data-header-ready] #sticky-header {
    display: block;
}

html[data-header-ready] #search-container,
html[data-header-ready] #settings-open-btn {
    display: block;
}

/* Welcome bar: shown if not dismissed, hidden if dismissed */
html[data-header-ready][data-welcome-dismissed="true"] #welcome-bar {
    display: none;
}
html[data-header-ready][data-welcome-dismissed="false"] #welcome-bar {
    display: flex;
}

#sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fbf7f0;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
/* Disabled checkbox styling */
#notify-venue-filter-container input[type="checkbox"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#notify-venue-filter-container input[type="checkbox"]:disabled + label {
    opacity: 0.35; /* lighter */
    color: #e5e7eb; /* really light grey */
    cursor: not-allowed;
}

#notify-venue-filter-container .group-checkbox:disabled + label {
    opacity: 0.35; /* lighter */
    color: #e5e7eb; /* really light grey */
    cursor: not-allowed;
}

/* Ensure disabled state is visually distinct */
#notify-venue-filter-container input[type="checkbox"]:disabled:checked {
    opacity: 0.3;
}

#notify-venue-filter-container input[type="checkbox"]:disabled:checked + label {
    opacity: 0.25; /* even lighter when checked */
    color: #f3f4f6; /* very light grey */
}

/* Disabled text color for notification labels and group headers */
#notify-venue-filter-container label.filter-label input:disabled + span {
    color: #9ca3af !important; /* light grey */
}

#notify-venue-filter-container label input.group-checkbox:disabled + h5,
#notify-venue-filter-container label .group-checkbox:disabled + h5 {
    color: #9ca3af !important; /* light grey */
}

/* Custom scrollbar for settings panel */
#settings-panel-body::-webkit-scrollbar {
    width: 6px;
}
#settings-panel-body::-webkit-scrollbar-track {
    background: #f1e9db;
}
#settings-panel-body::-webkit-scrollbar-thumb {
    background: #c7bca1;
    border-radius: 3px;
}
#settings-panel-body::-webkit-scrollbar-thumb:hover {
    background: #b4a78c;
}

/* Highlighting and Pulsing Animation */
@keyframes highlight-pulse {
    0% { background-color: #ffd6de; border-color: #e6005c; box-shadow: 0 0 0 8px #ff336688, 0 0 16px 4px #e6005c44; }
    20% { background-color: #fff; border-color: #e6005c; box-shadow: 0 0 0 16px #fff17688, 0 0 32px 8px #e6005c88; }
    50% { background-color: #ff3366; border-color: #e6005c; box-shadow: 0 0 0 24px #ff3366cc, 0 0 48px 12px #e6005c; }
    80% { background-color: #fff; border-color: #e6005c; box-shadow: 0 0 0 16px #fff17688, 0 0 32px 8px #e6005c88; }
    100% { background-color: #ffd6de; border-color: #e6005c; box-shadow: 0 0 0 8px #ff336688, 0 0 16px 4px #e6005c44; }
}
.highlight {
    border: 1.5px solid #e6005c !important;
    background-color: #ffd6de !important;
    box-shadow: none !important;
    z-index: 20;
    animation: none !important;
}
#show-all-events-btn {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #f59e0b33;
}
.bg-white\/50.rounded-lg.shadow-sm.border.border-stone-200\/80.overflow-hidden {
    border: none !important;
}


/* Settings Panel Tabs */
.tab-btn {
    border: 1px solid #d4c2a5;
    border-radius: 0; /* Remove rounded corners */
    background-color: #e6e0d5;
    padding: 0.5rem 1rem;
    cursor: pointer;
    position: relative;
    border-bottom: none; /* Remove bottom border from all tabs */
}

.tab-btn.active {
    background-color: #f5f5f4 !important; /* Match Tailwind's stone-100 background */
    z-index: 2; /* Ensure active tab is above everything */
}

.tab-btn:not(:last-child) {
    border-right: 1px solid #d4c2a5;
}

/* Target the specific tab container div and override Tailwind classes */
#settings-panel .flex.border-b.border-stone-300 {
    border-bottom: 1px solid #d4c2a5 !important;
}

/* Make the active tab cover the container's bottom border */
.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #f5f5f4; /* Match stone-100 */
    z-index: 3;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

#settings-open-btn .settings-icon {
    width: 1.6rem;
    height: 1.6rem;
    display: block;
    transform: translate(0.5px, 0.5px);
}

#notify-venue-filter-container.notifications-disabled {
    opacity: 0.7;
}

#notify-venue-filter-container.notifications-disabled input[type="checkbox"] {
    cursor: not-allowed;
}

.notifications-controls-disabled {
    opacity: 0.7;
}

button.notifications-controls-disabled {
    cursor: not-allowed;
}