:root {
    /* Colors */
    --primary-blue: #3b82f6;
    --primary-blue-dark: #2563eb;
    --primary-red: #ef4444;
    --primary-red-dark: #dc2626;
    --success-green: #22c55e;
    --success-green-dark: #16a34a;
    --accent-gold: #fbbf24;
    --accent-gold-dark: #f59e0b;
    
    /* Font Sizes */
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 1.875rem;
    --font-4xl: 2.25rem;
    
    /* Background Colors */
    --bg-dark: #0a0e27;
    --bg-darker: #1a1f3a;
    --glass: rgba(255, 255, 255, 0.08);
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-bg-medium: rgba(255, 255, 255, 0.12);
    --glass-hover: rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-border-hover: rgba(255, 255, 255, 0.25);
    --glass-blur: blur(10px);
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    /* Accent Colors */
    --color-accent: #3b82f6;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Layout */
    --max-width: 1400px;
    --header-height: 70px;
    --sidebar-width: 320px;
    --chat-width: 380px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.3);
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
}/* CSS Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    font-size: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

input, textarea {
    font-family: inherit;
    font-size: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}/* Typography Base Styles */

/* Better paragraph spacing */
p {
    line-height: 1.7;
    margin-bottom: 1rem;
}

p:last-child {
    margin-bottom: 0;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

h1 {
    font-size: var(--font-4xl);
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--font-3xl);
    letter-spacing: -0.01em;
}

h3 {
    font-size: var(--font-2xl);
}

h4 {
    font-size: var(--font-xl);
}

h5 {
    font-size: var(--font-lg);
}

h6 {
    font-size: var(--font-base);
}

/* Text Utilities */
.text-xs {
    font-size: var(--font-xs);
}

.text-sm {
    font-size: var(--font-sm);
}

.text-base {
    font-size: var(--font-base);
}

.text-lg {
    font-size: var(--font-lg);
}

.text-xl {
    font-size: var(--font-xl);
}

.text-2xl {
    font-size: var(--font-2xl);
}

.text-3xl {
    font-size: var(--font-3xl);
}

.text-4xl {
    font-size: var(--font-4xl);
}

/* Font Weights */
.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

/* Text Colors */
.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

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

/* Text Alignment */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* Letter Spacing */
.tracking-tight {
    letter-spacing: -0.02em;
}

.tracking-normal {
    letter-spacing: 0;
}

.tracking-wide {
    letter-spacing: 0.05em;
}

/* Line Height */
.leading-tight {
    line-height: 1.2;
}

.leading-normal {
    line-height: 1.5;
}

.leading-relaxed {
    line-height: 1.7;
}

/* Text Transform */
.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

/* Text Decoration */
.underline {
    text-decoration: underline;
}

.no-underline {
    text-decoration: none;
}

/* Font Style */
.italic {
    font-style: italic;
}

.not-italic {
    font-style: normal;
}

/* Card Title Styles */
.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Links */
a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--primary-blue-dark);
}

/* Blockquotes */
blockquote {
    border-left: 3px solid var(--glass-border);
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: var(--text-secondary);
}

/* Code */
code {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875em;
}

pre {
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
}

pre code {
    background: none;
    padding: 0;
}

/* Lists */
ul, ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.5rem;
}

/* Small Text */
small {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

/* Strong Text */
strong {
    font-weight: 600;
    color: var(--text-primary);
}

/* Mark */
mark {
    background: rgba(251, 191, 36, 0.2);
    color: var(--accent-gold);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
}/* Animations */
@keyframes slideDown {
    from { 
        opacity: 0;
        transform: translateY(-100%); 
    }
    to { 
        opacity: 1;
        transform: translateY(0); 
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

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

/* Loading States */
.spinner {
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    display: inline-block;
}

/* Transitions */
* {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
/* Header Styles */
header {
    background: #0f172a;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--header-height);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
}

/* Light theme header */
[data-theme="light"] header {
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: var(--transition);
    flex-shrink: 0;
}

.logo:hover {
    transform: scale(1.05);
}

.logo-icon-only {
    height: 36px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    display: block;
}

.logo-text-custom {
    font-size: 1.25rem;
    font-weight: bold;
    display: flex;
    gap: 0.25rem;
}

.logo-text-mobile {
    display: none;
}

.logo-text-patriot {
    color: #f59e0b;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
    font-weight: 700;
}

.logo-text-compass {
    color: #2563eb;
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    font-weight: 700;
}

[data-theme="light"] .logo-text-patriot {
    color: #dc2626;
    text-shadow: 0 0 15px rgba(220, 38, 38, 0.3);
}

[data-theme="light"] .logo-text-compass {
    color: #1e40af;
    text-shadow: 0 0 15px rgba(30, 64, 175, 0.3);
}

/* Legacy styles for backward compatibility */
.logo-icon {
    font-size: 1.75rem;
}

.logo h1 {
    font-size: var(--font-2xl);
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.logo-text {
    color: var(--text-primary);
}

.logo-accent {
    color: #60a5fa;
}

/* Navigation Tabs */
.nav-tabs {
    display: flex;
    gap: 8px;
    flex: 1;
    padding-left: 32px;
    align-items: center;
}

.nav-tab {
    padding: 10px 20px;
    background: none !important;
    color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-weight: 500;
    text-decoration: none;
    position: relative;
}

.nav-tab:hover {
    color: white;
    background: none !important;
}

.nav-tab.active {
    color: white;
    font-weight: 600;
    background: none !important;
}

.nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 20px;
    right: 20px;
    height: 3px;
    background: #3b82f6;
    border-radius: 2px;
}

[data-theme="light"] .nav-tab {
    color: rgba(0, 0, 0, 0.65);
    background: none !important;
}

[data-theme="light"] .nav-tab:hover {
    color: rgba(0, 0, 0, 0.9);
    background: none !important;
}

[data-theme="light"] .nav-tab.active {
    color: rgba(0, 0, 0, 0.9);
    font-weight: 600;
    background: none !important;
}

[data-theme="light"] .nav-tab.active::after {
    background: #2563eb;
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-toggle {
    padding: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-toggle i {
    display: block;
    width: 24px !important;
    height: 24px !important;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
}

.theme-toggle .icon-sun::before,
.theme-toggle .icon-moon::before {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="light"] .theme-toggle {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.7);
}

[data-theme="light"] .theme-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.25);
}

.auth-btn {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .auth-btn {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.8);
}

[data-theme="light"] .auth-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.3);
}

.cta-btn {
    padding: 8px 20px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

[data-theme="light"] .cta-btn {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

[data-theme="light"] .cta-btn:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}

/* Mobile Navigation - Hidden by default */
.mobile-nav {
    display: none;
}

/* Light theme mobile nav */
[data-theme="light"] .mobile-nav {
    background: white;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .mobile-nav-item {
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .mobile-nav-item.active {
    color: #2563eb;
}/* Dashboard Grid Layout */
main {
    padding-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
}

.dashboard-grid {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr var(--chat-width);
    gap: var(--spacing-lg);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-lg);
    align-items: start;
}

.dashboard-left-sidebar,
.dashboard-center,
.dashboard-right-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.dashboard-right-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-lg));
    max-height: calc(100vh - var(--header-height) - var(--spacing-xl));
}

/* Responsive Layout */
@media (min-width: 1440px) {
    .dashboard-grid {
        grid-template-columns: 320px 1fr 400px;
        gap: var(--spacing-xl);
    }
    
    .dashboard-right-sidebar {
        max-width: 450px;
    }
}

@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: 280px 1fr 340px;
    }
}

@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-right-sidebar {
        position: static;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .dashboard-grid {
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }
}/* Footer Styles */

footer {
    background: rgba(26, 31, 58, 0.8);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--glass-border);
    margin-top: 4rem;
    padding: 3rem 0 2rem;
}

.footer-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.footer-section h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

.footer-section p,
.footer-links a {
    color: var(--text-secondary);
    line-height: 1.8;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-links a {
    text-decoration: none;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--text-primary);
    transform: translateX(2px);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.footer-bottom p {
    margin: 0.5rem 0;
}

/* Social Links */
.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
}

.social-link:hover {
    background: var(--glass-hover);
    color: var(--text-primary);
    transform: translateY(-2px);
    border-color: var(--primary-blue);
}

/* Newsletter Signup */
.newsletter-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.newsletter-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
}

.newsletter-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    background: rgba(255, 255, 255, 0.12);
}

.newsletter-btn {
    background: var(--primary-blue);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.newsletter-btn:hover {
    background: var(--primary-blue-dark);
    transform: translateY(-1px);
}

/* Footer Logo */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.footer-logo img {
    height: 32px;
    width: auto;
}

.footer-logo span {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Copyright */
.copyright {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Responsive Footer */
@media (max-width: 768px) {
    footer {
        padding: 2rem 0 1.5rem;
        margin-top: 3rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    .footer-section {
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .newsletter-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .footer-bottom {
        padding-top: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .copyright {
        font-size: 0.75rem;
    }
}/* Streamline Icons Implementation using SVG Sprites */

/* Base icon styles */
[class^="icon-"], 
[class*=" icon-"] {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* SVG icon implementation */
[class^="icon-"]::before, 
[class*=" icon-"]::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Icon definitions using inline SVG data URIs for maximum compatibility */

/* Navigation & UI Controls */
.icon-sun::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='5' fill='%23fef3c7'/%3E%3Cline x1='12' y1='1' x2='12' y2='3' stroke-linecap='round'/%3E%3Cline x1='12' y1='21' x2='12' y2='23' stroke-linecap='round'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64' stroke-linecap='round'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78' stroke-linecap='round'/%3E%3Cline x1='1' y1='12' x2='3' y2='12' stroke-linecap='round'/%3E%3Cline x1='21' y1='12' x2='23' y2='12' stroke-linecap='round'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36' stroke-linecap='round'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-moon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="light"] .icon-sun::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='5' fill='%23fbbf24'/%3E%3Cline x1='12' y1='1' x2='12' y2='3' stroke-linecap='round'/%3E%3Cline x1='12' y1='21' x2='12' y2='23' stroke-linecap='round'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64' stroke-linecap='round'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78' stroke-linecap='round'/%3E%3Cline x1='1' y1='12' x2='3' y2='12' stroke-linecap='round'/%3E%3Cline x1='21' y1='12' x2='23' y2='12' stroke-linecap='round'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36' stroke-linecap='round'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-theme="light"] .icon-moon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23475569' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-user::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='7' r='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-heart::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

/* Section Headers */
.icon-flag-usa::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' id='Us-United-States--Streamline-Flagpack' height='24' width='24'%3E%3Cdesc%3EUS United States Streamline Icon: https://streamlinehq.com%3C/desc%3E%3Cpath fill='%23f7fcff' fill-rule='evenodd' d='M0 3h24v18H0V3Z' clip-rule='evenodd' stroke-width='0.75'%3E%3C/path%3E%3Cpath fill='%23e31d1c' fill-rule='evenodd' d='M0 13.999500000000001v1.5h24v-1.5H0Zm0 2.7510000000000003v1.5h24v-1.5H0Zm0 -8.25v1.5h24v-1.5H0ZM0 19.5v1.5h24v-1.5H0Zm0 -8.25v1.5h24v-1.5H0ZM0 3v1.5h24V3H0Zm0 2.75025v1.5h24v-1.5H0Z' clip-rule='evenodd' stroke-width='0.75'%3E%3C/path%3E%3Cpath fill='%232e42a5' d='M0 3h15v9.75H0z' stroke-width='0.75'%3E%3C/path%3E%3Cpath fill='%23f7fcff' fill-rule='evenodd' d='m1.2915 5.20425 -0.5445 0.38175000000000003 0.18375 -0.6795 -0.48375 -0.4305h0.63225l0.21149999999999997 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm3 0 -0.5445 0.38175000000000003 0.18375 -0.6795 -0.48375 -0.4305h0.63225l0.21149999999999997 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm2.4555 0.38175000000000003 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999h-0.63225l0.48375 0.42974999999999997 -0.18375 0.6795Zm3.5445 -0.3825 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.6315l0.21225 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825ZM0.747 8.58675l0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999H0.44699999999999995l0.48375 0.42974999999999997 -0.18375 0.6795Zm3.5445 -0.3825 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.63225l0.21149999999999997 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm2.4555 0.3825 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999h-0.63225l0.48375 0.42974999999999997 -0.18375 0.6795Zm3.5445 -0.3825 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.6315l0.21225 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825ZM0.747 11.58675l0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999H0.44699999999999995l0.48375 0.42974999999999997 -0.18375 0.6795Zm3.5445 -0.3825 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.63225l0.21149999999999997 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm2.4555 0.3825 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999h-0.63225l0.48375 0.42974999999999997 -0.18375 0.6795Zm3.5445 -0.3825 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.6315l0.21225 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm2.4555 -5.6175 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999h-0.63225l0.48375 0.42974999999999997 -0.18375 0.6795Zm0.5445 2.6175 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.63225l0.21149999999999997 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm-0.5445 3.3825 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999h-0.63225l0.48375 0.42974999999999997 -0.18375 0.6795ZM2.7915 6.7035l-0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.63225l0.21149999999999997 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm2.4555 0.3825 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999h-0.63225l0.48375 0.42974999999999997 -0.18375 0.6795Zm3.5445 -0.3825 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.6315l0.21225 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm-6.544500000000001 3.3825 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999h-0.63225l0.48375 0.42974999999999997 -0.18375 0.6795Zm3.5445 -0.3825 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.63225l0.21149999999999997 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm2.4555 0.3825 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21225 0.5549999999999999h-0.6315l0.48375 0.42974999999999997 -0.18375 0.6795Zm3.5445 -3.3825 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.6315l0.21225 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm-0.5445 3.3825 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21225 0.5549999999999999h-0.6315l0.48375 0.42974999999999997 -0.18375 0.6795Z' clip-rule='evenodd' stroke-width='0.75'%3E%3C/path%3E%3C/svg%3E");
}

.icon-flag-usa-large::before {
    width: 3rem;
    height: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' id='Us-United-States--Streamline-Flagpack' height='24' width='24'%3E%3Cdesc%3EUS United States Streamline Icon: https://streamlinehq.com%3C/desc%3E%3Cpath fill='%23f7fcff' fill-rule='evenodd' d='M0 3h24v18H0V3Z' clip-rule='evenodd' stroke-width='0.75'%3E%3C/path%3E%3Cpath fill='%23e31d1c' fill-rule='evenodd' d='M0 13.999500000000001v1.5h24v-1.5H0Zm0 2.7510000000000003v1.5h24v-1.5H0Zm0 -8.25v1.5h24v-1.5H0ZM0 19.5v1.5h24v-1.5H0Zm0 -8.25v1.5h24v-1.5H0ZM0 3v1.5h24V3H0Zm0 2.75025v1.5h24v-1.5H0Z' clip-rule='evenodd' stroke-width='0.75'%3E%3C/path%3E%3Cpath fill='%232e42a5' d='M0 3h15v9.75H0z' stroke-width='0.75'%3E%3C/path%3E%3Cpath fill='%23f7fcff' fill-rule='evenodd' d='m1.2915 5.20425 -0.5445 0.38175000000000003 0.18375 -0.6795 -0.48375 -0.4305h0.63225l0.21149999999999997 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm3 0 -0.5445 0.38175000000000003 0.18375 -0.6795 -0.48375 -0.4305h0.63225l0.21149999999999997 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm2.4555 0.38175000000000003 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999h-0.63225l0.48375 0.42974999999999997 -0.18375 0.6795Zm3.5445 -0.3825 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.6315l0.21225 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825ZM0.747 8.58675l0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999H0.44699999999999995l0.48375 0.42974999999999997 -0.18375 0.6795Zm3.5445 -0.3825 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.63225l0.21149999999999997 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm2.4555 0.3825 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999h-0.63225l0.48375 0.42974999999999997 -0.18375 0.6795Zm3.5445 -0.3825 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.6315l0.21225 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825ZM0.747 11.58675l0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999H0.44699999999999995l0.48375 0.42974999999999997 -0.18375 0.6795Zm3.5445 -0.3825 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.63225l0.21149999999999997 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm2.4555 0.3825 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999h-0.63225l0.48375 0.42974999999999997 -0.18375 0.6795Zm3.5445 -0.3825 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.6315l0.21225 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm2.4555 -5.6175 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999h-0.63225l0.48375 0.42974999999999997 -0.18375 0.6795Zm0.5445 2.6175 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.63225l0.21149999999999997 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm-0.5445 3.3825 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999h-0.63225l0.48375 0.42974999999999997 -0.18375 0.6795ZM2.7915 6.7035l-0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.63225l0.21149999999999997 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm2.4555 0.3825 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999h-0.63225l0.48375 0.42974999999999997 -0.18375 0.6795Zm3.5445 -0.3825 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.6315l0.21225 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm-6.544500000000001 3.3825 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21149999999999997 0.5549999999999999h-0.63225l0.48375 0.42974999999999997 -0.18375 0.6795Zm3.5445 -0.3825 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.63225l0.21149999999999997 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm2.4555 0.3825 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21225 0.5549999999999999h-0.6315l0.48375 0.42974999999999997 -0.18375 0.6795Zm3.5445 -3.3825 -0.5445 0.3825 0.18375 -0.6795 -0.48375 -0.4305h0.6315l0.21225 -0.55425 0.24825000000000003 0.5549999999999999h0.5385l-0.42299999999999993 0.42974999999999997 0.1635 0.6795 -0.5265 -0.3825Zm-0.5445 3.3825 0.5445 -0.3825 0.5265 0.3825 -0.1635 -0.6795 0.42299999999999993 -0.4305h-0.5385l-0.24825000000000003 -0.55425 -0.21225 0.5549999999999999h-0.6315l0.48375 0.42974999999999997 -0.18375 0.6795Z' clip-rule='evenodd' stroke-width='0.75'%3E%3C/path%3E%3C/svg%3E");
    display: block;
    margin: 0 auto 1rem;
}

.icon-flag-half::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Crect x='3' y='8' width='18' height='9'/%3E%3Cline x1='3' y1='11' x2='21' y2='11' stroke-width='1'/%3E%3Cline x1='3' y1='14' x2='21' y2='14' stroke-width='1'/%3E%3Crect x='3' y='8' width='9' height='3' fill='%23666' opacity='0.3'/%3E%3Cline x1='3' y1='21' x2='3' y2='4'/%3E%3C/svg%3E");
}

.icon-calendar::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.icon-holidays::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='-0.5 -0.5 24 24' id='Calendar-3--Streamline-Ultimate' height='24' width='24'%3E%3Cdesc%3ECalendar 3 Streamline Icon: https://streamlinehq.com%3C/desc%3E%3Cpath fill='%23ffffff' stroke='%234a5568' stroke-linecap='round' stroke-linejoin='round' d='M20.84375 3.59375H2.15625c-0.7939120833333334 0 -1.4375 0.6435879166666667 -1.4375 1.4375v15.8125c0 0.7938833333333334 0.6435879166666667 1.4375 1.4375 1.4375h18.6875c0.7938833333333334 0 1.4375 -0.6436166666666666 1.4375 -1.4375V5.03125c0 -0.7939120833333334 -0.6436166666666666 -1.4375 -1.4375 -1.4375Z' stroke-width='1'%3E%3C/path%3E%3Cpath fill='%23ef4444' stroke='%23ef4444' stroke-linecap='round' stroke-linejoin='round' d='M0.71875 3.59375h21.5625v5.75H0.71875z' stroke-width='1'%3E%3C/path%3E%3Cpath stroke='%234a5568' stroke-linecap='round' stroke-linejoin='round' d='M0.71875 9.34375h21.5625' stroke-width='1'%3E%3C/path%3E%3Cpath fill='%23dc2626' stroke='%23dc2626' stroke-linecap='round' stroke-linejoin='round' d='M6.46875 5.75V0.71875' stroke-width='1.5'%3E%3C/path%3E%3Cpath fill='%23dc2626' stroke='%23dc2626' stroke-linecap='round' stroke-linejoin='round' d='M16.53125 5.75V0.71875' stroke-width='1.5'%3E%3C/path%3E%3Cpath fill='%233b82f6' stroke='%233b82f6' d='M5.390625 13.65625c-0.19848041666666666 0 -0.359375 -0.16090416666666665 -0.359375 -0.359375s0.16089458333333334 -0.359375 0.359375 -0.359375' stroke-width='1'%3E%3C/path%3E%3Cpath fill='%233b82f6' stroke='%233b82f6' d='M5.390625 13.65625c0.19848041666666666 0 0.359375 -0.16090416666666665 0.359375 -0.359375s-0.16089458333333334 -0.359375 -0.359375 -0.359375' stroke-width='1'%3E%3C/path%3E%3Cpath fill='%234a5568' stroke='%234a5568' d='M5.390625 18.6875c-0.19848041666666666 0 -0.359375 -0.16090416666666665 -0.359375 -0.359375s0.16089458333333334 -0.359375 0.359375 -0.359375' stroke-width='1'%3E%3C/path%3E%3Cpath fill='%234a5568' stroke='%234a5568' d='M5.390625 18.6875c0.19848041666666666 0 0.359375 -0.16090416666666665 0.359375 -0.359375s-0.16089458333333334 -0.359375 -0.359375 -0.359375' stroke-width='1'%3E%3C/path%3E%3Cpath fill='%234a5568' stroke='%234a5568' d='M11.5 13.65625c-0.19847083333333335 0 -0.359375 -0.16090416666666665 -0.359375 -0.359375s0.16090416666666665 -0.359375 0.359375 -0.359375' stroke-width='1'%3E%3C/path%3E%3Cpath fill='%234a5568' stroke='%234a5568' d='M11.5 13.65625c0.19847083333333335 0 0.359375 -0.16090416666666665 0.359375 -0.359375S11.698470833333335 12.9375 11.5 12.9375' stroke-width='1'%3E%3C/path%3E%3Cpath fill='%23ef4444' stroke='%23ef4444' d='M11.5 18.6875c-0.19847083333333335 0 -0.359375 -0.16090416666666665 -0.359375 -0.359375s0.16090416666666665 -0.359375 0.359375 -0.359375' stroke-width='1'%3E%3C/path%3E%3Cpath fill='%23ef4444' stroke='%23ef4444' d='M11.5 18.6875c0.19847083333333335 0 0.359375 -0.16090416666666665 0.359375 -0.359375s-0.16090416666666665 -0.359375 -0.359375 -0.359375' stroke-width='1'%3E%3C/path%3E%3Cpath fill='%234a5568' stroke='%234a5568' d='M17.609375 13.65625c-0.19847083333333335 0 -0.359375 -0.16090416666666665 -0.359375 -0.359375s0.16090416666666665 -0.359375 0.359375 -0.359375' stroke-width='1'%3E%3C/path%3E%3Cpath fill='%234a5568' stroke='%234a5568' d='M17.609375 13.65625c0.19847083333333335 0 0.359375 -0.16090416666666665 0.359375 -0.359375s-0.16090416666666665 -0.359375 -0.359375 -0.359375' stroke-width='1'%3E%3C/path%3E%3Cpath fill='%234a5568' stroke='%234a5568' d='M17.609375 18.6875c-0.19847083333333335 0 -0.359375 -0.16090416666666665 -0.359375 -0.359375s0.16090416666666665 -0.359375 0.359375 -0.359375' stroke-width='1'%3E%3C/path%3E%3Cpath fill='%234a5568' stroke='%234a5568' d='M17.609375 18.6875c0.19847083333333335 0 0.359375 -0.16090416666666665 0.359375 -0.359375s-0.16090416666666665 -0.359375 -0.359375 -0.359375' stroke-width='1'%3E%3C/path%3E%3C/svg%3E");
}

.icon-park::before,
.icon-park-badge::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' height='14' width='14'%3E%3Cg id='national-park--place-national-park-protected-area-nature'%3E%3Cpath id='Union' fill='%2387ceeb' fill-rule='evenodd' d='M10.7192 0c-0.4634 0 -0.91295 0.196235 -1.25324 0.561858C8.14426 1.98195 6.34752 4.4654 5.28838 7.28948l-0.00017 -0.00006 -0.00434 0.01259 -0.38862 1.1266c-0.05204 0.15086 -0.02893 0.3175 0.06218 0.44852 0.09111 0.13102 0.2393 0.21067 0.39884 0.21439l8.13223 0.18959c0.1345 0.00314 0.2647 -0.04813 0.361 -0.14221s0.1506 -0.22302 0.1506 -0.35765V3.30894c0 -0.09985 -0.0299 -0.19741 -0.0858 -0.28012 -0.6677 -0.98721 -1.3501 -1.83107 -1.942 -2.466962C11.6321 0.196235 11.1825 0 10.7192 0Z' clip-rule='evenodd' stroke-width='1'%3E%3C/path%3E%3Cpath id='Intersect' fill='%23ffffff' fill-rule='evenodd' d='m7.68544 3.69068 0.81552 0.60392c0.14175 0.10986 0.31143 0.1689 0.48543 0.1689 0.17401 0 0.34369 -0.05904 0.48544 -0.1689l0.74487 -0.61043c0.1449 -0.11828 0.3211 -0.18222 0.5022 -0.18222 0.1811 0 0.3573 0.06394 0.5022 0.18222l0.7449 0.61043c0.1417 0.10986 0.3114 0.1689 0.4854 0.1689s0.3437 -0.05904 0.4854 -0.1689l0.8155 -0.60392 0.2477 -0.2114v-0.17034c0 -0.09985 -0.0299 -0.19741 -0.0858 -0.28012 -0.6677 -0.98721 -1.3501 -1.83107 -1.942 -2.466962C11.6319 0.196235 11.1824 0 10.719 0c-0.4633 0 -0.91286 0.196235 -1.25315 0.561858 -0.65467 0.703402 -1.42589 1.667702 -2.16629 2.805062l0.38588 0.32376Z' clip-rule='evenodd' stroke-width='1'%3E%3C/path%3E%3Cpath id='Union_2' fill='%2322c55e' d='M2.33058 2.28065c-0.39481 0.34653 -0.98859 1.03436 -1.30826 1.81476 -0.08175 0.19958 0.00605 0.42833 0.18656 0.48855 0.09023 0.0301 0.19444 0.06043 0.31074 0.08817 -0.3734 0.42652 -0.745732 0.95408 -0.986141 1.51913 -0.087685 0.2061 0.003996 0.44555 0.191967 0.50741 0.392264 0.12911 1.026044 0.27182 1.787204 0.27182 0.76116 0 1.39495 -0.14271 1.78721 -0.27182 0.18797 -0.06186 0.27965 -0.30131 0.19197 -0.50741 -0.24041 -0.56504 -0.61273 -1.09258 -0.98612 -1.5191 0.11635 -0.02775 0.2206 -0.05809 0.31086 -0.0882 0.18051 -0.06022 0.26831 -0.28897 0.18655 -0.48855 -0.31966 -0.7804 -0.91344 -1.46823 -1.30825 -1.81476 -0.10888 -0.09556 -0.25542 -0.09556 -0.36429 0Z' stroke-width='1'%3E%3C/path%3E%3Cpath id='Intersect_2' stroke='%235d6f3f' stroke-linecap='round' stroke-linejoin='round' d='m7.68555 3.69068 0.81552 0.60392c0.14175 0.10986 0.31143 0.1689 0.48543 0.1689 0.17401 0 0.34369 -0.05904 0.48544 -0.1689l0.74486 -0.61043c0.1449 -0.11828 0.3211 -0.18222 0.5022 -0.18222 0.1811 0 0.3573 0.06394 0.5022 0.18222l0.7449 0.61043c0.1417 0.10986 0.3114 0.1689 0.4854 0.1689' stroke-width='1'%3E%3C/path%3E%3Cpath id='Vector 2593' stroke='%235d6f3f' stroke-linecap='round' stroke-linejoin='round' d='m5.36792 8.59165 0.38862 -1.12659C6.78794 4.71492 8.54442 2.2859 9.83196 0.902504 10.0817 0.634168 10.4004 0.5 10.7192 0.5c0.3187 0 0.6374 0.134168 0.8871 0.402504 0.5734 0.616096 1.2399 1.439566 1.8938 2.406436' stroke-width='1'%3E%3C/path%3E%3Cpath id='Vector 4356' stroke='%238b7355' stroke-linecap='round' stroke-linejoin='round' d='M11.5462 13.3655c-1.96586 0 -8.50708 0.7012 -8.50708 -1.0931 0 -2.1933 10.44168 0 10.44168 -2.1933 0 -1.70944 -11.21333 -1.09687 -12.9808 -0.99464' stroke-width='1'%3E%3C/path%3E%3Cpath id='Union_3' stroke='%23228b22' stroke-linecap='round' stroke-linejoin='round' d='M2.33058 2.28065c-0.39481 0.34653 -0.98859 1.03436 -1.30826 1.81476 -0.08175 0.19958 0.00605 0.42833 0.18656 0.48855 0.09023 0.0301 0.19444 0.06043 0.31074 0.08817 -0.3734 0.42652 -0.745732 0.95408 -0.986141 1.51913 -0.087685 0.2061 0.003996 0.44555 0.191967 0.50741 0.392264 0.12911 1.026044 0.27182 1.787204 0.27182 0.76116 0 1.39495 -0.14271 1.78721 -0.27182 0.18797 -0.06186 0.27965 -0.30131 0.19197 -0.50741 -0.24041 -0.56504 -0.61273 -1.09258 -0.98612 -1.5191 0.11635 -0.02775 0.2206 -0.05809 0.31086 -0.0882 0.18051 -0.06022 0.26831 -0.28897 0.18655 -0.48855 -0.31966 -0.7804 -0.91344 -1.46823 -1.30825 -1.81476 -0.10888 -0.09556 -0.25542 -0.09556 -0.36429 0Z' stroke-width='1'%3E%3C/path%3E%3Cpath id='Vector' stroke='%236b4226' stroke-linecap='round' stroke-linejoin='round' d='m2.5127 6.9707 0 1.77365' stroke-width='1'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.icon-history::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' id='History--Streamline-Rounded-Material' height='24' width='24'%3E%3Cdesc%3EHistory Streamline Icon: https://streamlinehq.com%3C/desc%3E%3Cpath fill='%233b82f6' d='M11.9251 21c-2.36665 0 -4.39585 -0.79585 -6.0875 -2.3875 -1.691675 -1.59165 -2.629175 -3.55415 -2.812505 -5.8875 -0.01667 -0.2 0.04583 -0.375 0.1875 -0.525 0.141665 -0.15 0.32083 -0.225 0.5375 -0.225 0.199995 0 0.37083 0.07085 0.5125 0.2125 0.141665 0.14165 0.229165 0.32085 0.262495 0.5375 0.183335 1.91665 0.97501 3.525 2.37501 4.825 1.4 1.3 3.075 1.95 5.025 1.95 2.11665 0 3.90835 -0.74165 5.375 -2.225 1.46665 -1.48335 2.2 -3.28335 2.2 -5.4 0 -2.06665 -0.74165 -3.8125 -2.225 -5.2375C15.79175 5.2125 14.00845 4.5 11.9251 4.5c-1.13335 0 -2.19585 0.258335 -3.1875 0.775 -0.99165 0.51665 -1.85415 1.2 -2.5875 2.05h1.875c0.21665 0 0.39585 0.07085 0.5375 0.2125s0.2125 0.32085 0.2125 0.5375c0 0.21665 -0.07085 0.39585 -0.2125 0.5375s-0.32085 0.2125 -0.5375 0.2125H4.300095c-0.21667 0 -0.395835 -0.07085 -0.537505 -0.2125 -0.141665 -0.14165 -0.212495 -0.32085 -0.212495 -0.5375v-3.7c0 -0.216665 0.07083 -0.395835 0.212495 -0.5375 0.14167 -0.141665 0.320835 -0.2125 0.537505 -0.2125 0.216665 0 0.39583 0.070835 0.537495 0.2125 0.14167 0.141665 0.21251 0.320835 0.21251 0.5375v1.9c0.86665 -1.01665 1.89585 -1.816665 3.0875 -2.4C9.32925 3.291665 10.59175 3 11.9251 3c1.25 0 2.425 0.233335 3.525 0.7s2.0625 1.104165 2.8875 1.9125c0.825 0.80835 1.475 1.75415 1.95 2.8375 0.475 1.08335 0.7125 2.25 0.7125 3.5s-0.2375 2.425 -0.7125 3.525c-0.475 1.1 -1.125 2.05835 -1.95 2.875 -0.825 0.81665 -1.7875 1.4625 -2.8875 1.9375 -1.1 0.475 -2.275 0.7125 -3.525 0.7125Zm0.85 -9.35 2.875 2.825c0.15 0.15 0.225 0.32915 0.225 0.5375 0 0.20835 -0.075 0.3875 -0.225 0.5375 -0.15 0.15 -0.325 0.225 -0.525 0.225s-0.375 -0.075 -0.525 -0.225l-3.1 -3.05c-0.08335 -0.08335 -0.14165 -0.17085 -0.175 -0.2625 -0.03335 -0.09165 -0.05 -0.1875 -0.05 -0.2875v-4.275c0 -0.21665 0.07085 -0.39585 0.2125 -0.5375s0.32085 -0.2125 0.5375 -0.2125c0.21665 0 0.39585 0.07085 0.5375 0.2125s0.2125 0.32085 0.2125 0.5375v3.975Z' stroke-width='0.5'%3E%3C/path%3E%3C/svg%3E");
}

.icon-quote::before,
.icon-quote-badge::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cdesc%3EBulb Streamline Icon: https://streamlinehq.com%3C/desc%3E%3Cpath d='m12 22 0 1.5' fill='none' stroke='%23fbbf24' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M15 17.285V20c0 1.426 -1.2 2 -3 2s-3 -0.574 -3 -2v-2.715' fill='none' stroke='%23fbbf24' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M12 17.197 12 13l-2 -2' fill='none' stroke='%23fbbf24' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M14.5 17.5a6.336 6.336 0 0 0 4 -6A6.619 6.619 0 0 0 12 5a6.619 6.619 0 0 0 -6.5 6.5 6.336 6.336 0 0 0 4 6Z' fill='%23fef3c7' stroke='%23fbbf24' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='m9 19.5 6 0' fill='none' stroke='%23fbbf24' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='m12 0.5 0 2' fill='none' stroke='%23f59e0b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='m1 10.5 2.291 0' fill='none' stroke='%23f59e0b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='m3.5 3 2 2' fill='none' stroke='%23f59e0b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='m23 10.5 -2.291 0' fill='none' stroke='%23f59e0b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='m20.5 3 -2 2' fill='none' stroke='%23f59e0b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='m12 13 2 -2' fill='none' stroke='%23fbbf24' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
}

[data-theme="light"] .icon-quote::before,
[data-theme="light"] .icon-quote-badge::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cdesc%3EBulb Streamline Icon: https://streamlinehq.com%3C/desc%3E%3Cpath d='m12 22 0 1.5' fill='none' stroke='%23d97706' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M15 17.285V20c0 1.426 -1.2 2 -3 2s-3 -0.574 -3 -2v-2.715' fill='none' stroke='%23d97706' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M12 17.197 12 13l-2 -2' fill='none' stroke='%23d97706' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M14.5 17.5a6.336 6.336 0 0 0 4 -6A6.619 6.619 0 0 0 12 5a6.619 6.619 0 0 0 -6.5 6.5 6.336 6.336 0 0 0 4 6Z' fill='%23fed7aa' stroke='%23d97706' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='m9 19.5 6 0' fill='none' stroke='%23d97706' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='m12 0.5 0 2' fill='none' stroke='%23ea580c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='m1 10.5 2.291 0' fill='none' stroke='%23ea580c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='m3.5 3 2 2' fill='none' stroke='%23ea580c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='m23 10.5 -2.291 0' fill='none' stroke='%23ea580c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='m20.5 3 -2 2' fill='none' stroke='%23ea580c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='m12 13 2 -2' fill='none' stroke='%23d97706' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
}

.icon-eagle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' id='Eagle--Streamline-Twemoji' height='32' width='32'%3E%3Cdesc%3EEagle Streamline Emoji: https://streamlinehq.com%3C/desc%3E%3Cpath fill='%23292f33' d='M5.757422222222222 22.17697777777778c0.3136 0 0.6186666666666666 0.11493333333333333 0.9151111111111111 0.31457777777777773 1.2999999999999998 -7.7032 19.350044444444443 -7.8381333333333325 20.673866666666665 -0.2756444444444444 1.5831999999999997 0.39155555555555555 2.9269333333333334 4.160444444444445 3.5616888888888885 9.464088888888888H1.448711111111111c0.7535999999999999 -5.6058666666666666 2.396711111111111 -9.50302222222222 4.30871111111111 -9.50302222222222Z' stroke-width='0.8889'%3E%3C/path%3E%3Cpath fill='%23e1e8ed' d='M5.758311111111111 19.97991111111111C9.4864 9.379199999999999 5.249955555555555 0.31999999999999995 15.703288888888888 0.31999999999999995s8.301866666666667 7.766844444444445 12.537333333333333 18.174577777777777c1.0633777777777778 2.6133333333333333 -1.3712888888888888 5.61431111111111 -1.3712888888888888 5.61431111111111s-2.482222222222222 -4.519644444444444 -4.5139555555555555 -5.555466666666667c-0.5616 3.114133333333333 -1.6630222222222222 6.593244444444444 -1.6630222222222222 6.593244444444444s-2.452711111111111 -2.8176888888888887 -5.309333333333333 -5.309333333333333c-0.8352888888888889 0.9588444444444444 -1.9624 2.074488888888889 -3.4809777777777775 3.2899555555555553 -0.3316444444444444 -0.9959111111111111 -0.8960888888888888 -2.222755555555555 -1.4900444444444443 -3.398311111111111 -1.3950222222222222 2.1267555555555555 -3.023911111111111 4.704977777777778 -3.023911111111111 4.704977777777778s-2.3824 -2.3140444444444443 -1.6297777777777775 -4.454133333333333Z' stroke-width='0.8889'%3E%3C/path%3E%3Cpath fill='%23ffcc4d' d='M10.000533333333333 2.2206222222222225C5.857155555555555 5.127555555555555 4.733955555555555 4.273244444444445 2.576711111111111 5.6056 0.5573333333333333 6.852355555555555 0.6760888888888889 10.298133333333332 2.4579555555555554 13.266933333333332c0.5502222222222222 -2.5288 -0.47519999999999996 -2.9925333333333333 6.593155555555555 -2.9925333333333333 4.751555555555556 0 7.534044444444444 0.27466666666666667 6.652177777777777 -0.950311111111111 -0.8809777777777777 -1.2248888888888887 -9.52871111111111 0.4361777777777778 -5.702755555555556 -7.103466666666666Z' stroke-width='0.8889'%3E%3C/path%3E%3Cpath fill='%23292f33' d='M14.778666666666666 4.6125333333333325c0 0.7792 -0.6301333333333333 1.4092444444444443 -1.409333333333333 1.4092444444444443 -0.7792888888888889 0 -1.4102222222222223 -0.6300444444444444 -1.4102222222222223 -1.4092444444444443 0 -0.14924444444444443 0.029422222222222218 -0.28986666666666666 0.07217777777777777 -0.4238222222222222h2.6760888888888887c0.041777777777777775 0.13395555555555555 0.07128888888888887 0.27457777777777775 0.07128888888888887 0.4238222222222222Z' stroke-width='0.8889'%3E%3C/path%3E%3C/svg%3E");
}

.icon-shopping-bag::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Action Icons */
.icon-location::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-check::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-calendar-plus::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='12' y1='14' x2='12' y2='18'/%3E%3Cline x1='10' y1='16' x2='14' y2='16'/%3E%3C/svg%3E");
}

.icon-refresh::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
}

/* Size variations */
.icon-large {
    width: 2em;
    height: 2em;
}

.icon-small {
    width: 1em;
    height: 1em;
}

/* Ensure icons in buttons and headers are properly sized */
h2 [class^="icon-"], 
h2 [class*=" icon-"] {
    font-size: 1.2em;
    margin-right: 0.5rem;
}

button [class^="icon-"], 
button [class*=" icon-"] {
    margin-right: 0.25rem;
}

/* Remove margin when icon is last child */
[class^="icon-"]:last-child, 
[class*=" icon-"]:last-child {
    margin-right: 0;
}

/* Special styling for chat avatars */
.message-avatar .icon-user,
.message-avatar .icon-eagle {
    margin: 0;
    width: 1.5rem;
    height: 1.5rem;
}

/* Premium check icons in list */
.benefits-list .icon-check::before {
    margin-right: 0.5rem;
}

/* Animated flag for full-staff status */
@keyframes flag-wave {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

.icon-flag-usa-large {
    animation: flag-wave 3s ease-in-out infinite;
}

/* Half-staff indicator animation */
.half-staff .icon-flag-usa-large {
    animation: none;
    opacity: 0.7;
}

/* Theme-aware icon colors are now handled directly in the SVG definitions above */

/* Premium gold styling for eagle icon */
body[data-premium="true"] .icon-eagle::before {
    filter: brightness(1.2) sepia(1) saturate(2) hue-rotate(45deg);
}

/* Color adjustments for dark theme */
[data-theme="dark"] [class^="icon-"]::before,
[data-theme="dark"] [class*=" icon-"]::before {
    filter: brightness(1.2);
}

/* Special styling for history icon in dark mode */
[data-theme="dark"] .icon-history::before {
    filter: brightness(1.4) hue-rotate(20deg);
}

/* Accessibility - hide icons from screen readers since text is present */
[class^="icon-"], 
[class*=" icon-"] {
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}/* Glass Morphism Widget Styles */
.widget,
.content-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    transition: var(--transition-base);
}

/* Ensure flag widget content is transparent on mobile in light mode */
@media (max-width: 768px) {
    [data-theme="light"] .flag-widget .widget,
    [data-theme="light"] .flag-widget {
        background: linear-gradient(135deg, #0066CC, #DC143C) !important;
    }
}

.widget:hover,
.content-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.45);
    border-color: rgba(255, 255, 255, 0.25);
}

.widget h2,
.content-section h2 {
    font-size: var(--font-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Specific Widget Variants */
.flag-widget {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.chat-widget {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%);
    height: calc(100vh - var(--header-height) - var(--spacing-xl) * 2);
    display: flex;
    flex-direction: column;
}

.park-widget {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%);
}/* Flag Status Widget Specific */
.flag-widget {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
}

/* Multiple Flag Orders Container */
.flag-orders-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* Flag Order Card Styles */
.flag-order-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: var(--transition-base);
    position: relative;
}

.flag-order-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--glass-border-hover);
}

.flag-order-card.primary {
    border-width: 2px;
    border-color: var(--color-accent);
    background: var(--glass-bg-medium);
}

.flag-order-card.secondary {
    opacity: 0.9;
}

/* Order significance styling */
.flag-order-card.significance-high {
    border-left: 4px solid var(--primary-red);
}

.flag-order-card.significance-medium {
    border-left: 4px solid var(--accent-gold);
}

.flag-order-card.significance-standard {
    border-left: 4px solid var(--primary-blue);
}

/* Flag Order Card Elements */
.flag-order-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.flag-order-reason {
    font-size: var(--font-base);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

.flag-order-duration {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.flag-order-attribution {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
    font-style: italic;
}

.flag-order-status {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.flag-order-status.half-staff {
    background: rgba(239, 68, 68, 0.2);
    color: var(--primary-red);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.flag-order-status.full-staff {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success-green);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Duration Badge Styles */
.duration-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.duration-badge.single-day {
    color: var(--accent-gold);
    background: rgba(251, 191, 36, 0.15);
}

.duration-badge.multi-day {
    color: var(--primary-blue);
    background: rgba(59, 130, 246, 0.15);
}

.duration-badge.ending-today {
    color: var(--primary-red);
    background: rgba(239, 68, 68, 0.15);
}

.duration-badge.ending-soon {
    color: var(--accent-gold);
    background: rgba(251, 191, 36, 0.15);
}

.duration-badge.unknown,
.duration-badge.error {
    color: var(--text-muted);
    background: rgba(156, 163, 175, 0.15);
}

.date-range {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
}

/* No Orders Display */
.flag-no-orders {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-secondary);
}

.no-orders-message {
    font-size: var(--font-base);
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
}

.no-orders-note {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

/* Error Display */
.flag-error-display {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-secondary);
}

.error-message {
    font-size: var(--font-base);
    font-weight: 500;
    color: var(--primary-red);
    margin-bottom: var(--spacing-xs);
}

.error-note {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

/* Fallback Display */
.flag-fallback-display {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-secondary);
}

.fallback-message {
    font-size: var(--font-base);
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.fallback-note {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.retry-flag-btn {
    background: var(--primary-blue);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.retry-flag-btn:hover {
    background: var(--primary-blue-dark);
    transform: translateY(-1px);
}

/* Flag Status Container */
.flag-status-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.flag-status-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.flag-icon-container {
    flex-shrink: 0;
}

.flag-icon {
    font-size: 2rem;
    color: var(--primary-blue);
}

.flag-status-main {
    flex: 1;
}

.flag-status {
    font-size: var(--font-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.flag-status.half-staff {
    color: var(--primary-red);
    animation: pulse 2s infinite;
}

.flag-status.full-staff {
    color: var(--success-green);
}

.flag-status.error {
    color: var(--primary-red);
}

.flag-status.unknown {
    color: var(--text-muted);
}

.flag-timezone-info {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.timezone-label {
    font-weight: 500;
}

/* Loading States */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    color: var(--text-secondary);
}

.spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--glass-border);
    border-top: 2px solid var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Responsive Design for Multiple Orders */
@media (max-width: 768px) {
    .flag-orders-container {
        gap: var(--spacing-xs);
    }
    
    .flag-order-card {
        padding: var(--spacing-sm);
    }
    
    .flag-order-card.primary {
        border-width: 1px;
        border-left-width: 4px;
    }
    
    .flag-order-title {
        font-size: var(--font-xs);
    }
    
    .flag-order-reason {
        font-size: var(--font-sm);
        margin-bottom: var(--spacing-xs);
    }
    
    .flag-order-duration {
        margin-bottom: var(--spacing-xs);
    }
    
    .flag-order-attribution {
        margin-bottom: var(--spacing-xs);
    }
    
    .flag-status-header {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .flag-icon {
        font-size: 1.5rem;
    }
    
    .flag-status {
        font-size: var(--font-base);
    }
}

/* Desktop Layout for Multiple Orders */
@media (min-width: 769px) {
    .flag-orders-container {
        max-height: 400px;
        overflow-y: auto;
    }
    
    .flag-orders-container::-webkit-scrollbar {
        width: 4px;
    }
    
    .flag-orders-container::-webkit-scrollbar-track {
        background: var(--glass-bg);
        border-radius: var(--radius-sm);
    }
    
    .flag-orders-container::-webkit-scrollbar-thumb {
        background: var(--glass-border);
        border-radius: var(--radius-sm);
    }
    
    .flag-orders-container::-webkit-scrollbar-thumb:hover {
        background: var(--glass-border-hover);
    }
}

/* Mobile flag card styles - always apply when class is present */
.mobile-flag-card {
    text-align: center;
    padding: 1.5rem;
    background: transparent;
    border-radius: 20px;
    border: none;
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mobile-flag-card.error {
    border: 1px solid var(--primary-red);
    background: rgba(239, 68, 68, 0.1);
}

.flag-order-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.flag-authority {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.additional-orders {
    font-size: var(--font-xs);
    color: var(--accent-gold);
    font-weight: 600;
    margin-top: var(--spacing-xs);
}

.view-all-orders-btn,
.retry-btn {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: #1a1a1a;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: var(--spacing-sm);
}

.view-all-orders-btn:hover,
.retry-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
}

/* Mobile Modal for Flag Orders */
.mobile-modal.flag-orders-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--spacing-md);
}

.mobile-modal .modal-content {
    background: var(--bg-darker);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mobile-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--glass-border);
}

.mobile-modal .modal-header h3 {
    margin: 0;
    color: var(--text-primary);
}

.mobile-modal .close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: var(--spacing-xs);
}

.mobile-modal .modal-body {
    padding: var(--spacing-md);
    overflow-y: auto;
    flex: 1;
}

.mobile-order-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.mobile-order-card:last-child {
    margin-bottom: 0;
}

.mobile-order-card .order-status {
    font-size: var(--font-sm);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: var(--spacing-xs);
}

.mobile-order-card .order-status.half-staff {
    color: var(--primary-red);
}

.mobile-order-card .order-status.full-staff {
    color: var(--success-green);
}

.mobile-order-card .order-reason {
    font-size: var(--font-base);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.mobile-order-card .order-authority {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.mobile-flag-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.mobile-flag-header .flag-icon {
    font-size: 1.5rem;
}

.mobile-flag-header h3 {
    font-size: 1.35rem;
    margin: 0;
    color: var(--text-primary);
    font-weight: 600;
}

.flag-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem 1.75rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1.5px solid rgba(59, 130, 246, 0.25);
    border-radius: 50px;
    margin: 0 auto;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.75px;
}

.flag-status-badge.full-staff {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: white;
}

.flag-status-badge.half-staff {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: white;
    animation: pulse 2s infinite;
}

.flag-status-badge .flag-emoji {
    font-size: 1.25rem;
}

.flag-status-badge .status-text {
    font-weight: 600;
}

.mobile-flag-card .flag-reason {
    margin: 1rem 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.mobile-flag-card .flag-source {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    opacity: 0.8;
}

.flag-action-btn.mobile {
    background: rgba(255, 255, 255, 0.95);
    border: none;
    color: #1a1a1a;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-weight: 600;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.flag-action-btn.mobile:hover,
.flag-action-btn.mobile:active {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.flag-action-btn.mobile .eagle-icon {
    font-size: 1.2rem;
}

/* Desktop Flag Status Widget */
#flagStatusWidget {
    padding: 16px;
    text-align: center;
}

#flagStatusWidget .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

#flagStatusWidget .status-badge.full-staff {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

#flagStatusWidget .status-badge.half-staff {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    animation: pulse 2s infinite;
}

#flagStatusWidget .status-message {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.5;
}

#flagStatusWidget .status-duration {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

#flagStatusWidget .status-source {
    font-size: 0.875rem;
    color: var(--text-muted);
    padding: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 16px;
}

#flagStatusWidget .flag-actions {
    display: flex;
    justify-content: center;
}

#flagStatusWidget .flag-action-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

#flagStatusWidget .flag-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Mobile overrides (from old styles) */
.flag-status-content {
    text-align: center;
    padding: 15px 10px;
}

.status-indicator {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 12px;
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-indicator.full-staff {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-indicator.half-staff {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    animation: pulse 2s infinite;
}

.status-indicator.unknown {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.2), rgba(156, 163, 175, 0.1));
    color: #9ca3af;
    border: 1px solid rgba(156, 163, 175, 0.3);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.flag-status-reason {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.4;
    padding: 0 10px;
}

.flag-status-meta {
    font-size: 0.9rem;
    color: var(--text-tertiary);
    font-style: italic;
    margin-top: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.flag-btn {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-top: 16px;
}

.flag-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Observances/Holidays Desktop Styles */

/* Desktop container */
#upcomingObservances {
    padding: 20px;
}

#upcomingObservances h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Desktop observance items */
.observance-item {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.observance-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: var(--glass-hover);
    border-color: var(--glass-border-hover);
}

/* Federal holiday indicator */
.observance-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--primary-blue), var(--primary-blue-dark));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.observance-item:has(.observance-type:contains("FEDERAL")) ::before {
    opacity: 1;
}

/* Date and countdown */
.observance-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.observance-date .date {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.observance-date .countdown {
    font-size: 0.75rem;
    padding: 2px 8px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-blue);
    border-radius: 12px;
    font-weight: 500;
}

/* Holiday name */
.observance-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Half-staff badge */
.half-staff-badge {
    font-size: 0.625rem;
    padding: 2px 6px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.5px;
    animation: pulse 2s infinite;
}

/* Footer with type and calendar button */
.observance-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.observance-type {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.add-to-calendar-btn {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-to-calendar-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

.add-to-calendar-btn i {
    font-size: 0.875rem;
    color: var(--primary-blue);
}

/* Calendar options menu */
.calendar-options-menu {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    min-width: 150px;
}

.calendar-option {
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 0.875rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-option:hover {
    background: rgba(59, 130, 246, 0.1);
}

.calendar-option i {
    color: var(--primary-blue);
}

/* Light mode adjustments */
[data-theme="light"] .observance-item {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .observance-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .observance-date .countdown {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

[data-theme="light"] .add-to-calendar-btn {
    background: rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .add-to-calendar-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.25);
}

[data-theme="light"] .calendar-options-menu {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .calendar-option:hover {
    background: rgba(59, 130, 246, 0.08);
}/* Historical Events Styles */
.events-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 16px;
}

.event-counter {
    color: #fbbf24;
    font-weight: 600;
}

.event-card {
    background: transparent;
    border-radius: 14px;
    margin-top: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-card.expanded {
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.event-content {
    padding: 24px;
}

.event-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.event-date-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-date {
    font-size: 0.9375rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.025em;
    opacity: 0.85;
}

.event-year {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fbbf24;
}

.event-badge,
.years-ago {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.875rem;
    color: white;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    display: inline-block;
}

.event-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
}

.event-image-container {
    position: relative;
    margin: 0 0 -4px 0;
}

.event-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 1rem;
    border-radius: 0 0 12px 12px;
}

.event-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.event-description {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 16px;
    font-size: 1rem;
}

.event-expanded-content {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.event-full-details {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 0.95rem;
}

.event-actions {
    display: flex;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap;
}

/* Button Styles */
.btn-primary,
.btn-secondary {
    padding: 11px 22px;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-primary {
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary-blue);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-1px);
}

.btn-secondary {
    background: rgba(251, 191, 36, 0.1);
    color: var(--accent-gold);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.btn-secondary:hover {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.4);
    transform: translateY(-1px);
}

.btn-text {
    font-weight: 500;
}

/* Navigation Styles */
.event-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.15));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin-top: 24px;
    backdrop-filter: blur(10px);
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.nav-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.nav-btn:hover:not(:disabled)::before {
    opacity: 1;
}

.nav-btn.nav-prev:hover:not(:disabled) {
    transform: translateX(-3px);
}

.nav-btn.nav-next:hover:not(:disabled) {
    transform: translateX(3px);
}

.nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.02);
}

.nav-btn i {
    font-size: 1rem;
    line-height: 1;
}

.nav-btn span {
    line-height: 1;
}

.event-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    padding: 6px 14px;
    background: rgba(251, 191, 36, 0.08);
    border-radius: 20px;
    border: 1px solid rgba(251, 191, 36, 0.15);
}

.counter-current {
    font-weight: 700;
    color: var(--accent-gold);
    font-size: 1.125rem;
}

.counter-divider {
    color: var(--text-muted);
    opacity: 0.6;
}

.counter-total {
    font-weight: 500;
    color: var(--text-secondary);
}

.premium-cta {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05));
    border-radius: 12px;
    margin-top: 20px;
}

.premium-cta p {
    margin-bottom: 12px;
    color: #fbbf24;
}

.premium-cta-btn {
    padding: 10px 24px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #0a0e27;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.premium-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
}
/* Chat Widget Styles */
.chat-widget {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%);
    height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 0 auto;
}

.chat-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 12px 12px 0 0;
}

.chat-header h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.chat-header .icon-eagle {
    font-size: 1.5rem;
    color: var(--accent-gold);
}

.ai-credits {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08));
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 0.9375rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.ai-credits .credit-count {
    color: var(--primary-blue);
    font-weight: 600;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    scroll-behavior: smooth;
}

/* Custom scrollbar for chat */
.chat-messages::-webkit-scrollbar {
    width: 8px;
}

.chat-messages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

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

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.message {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: fadeInUp 0.3s ease;
}

.message.user {
    flex-direction: row-reverse;
}

.message.assistant {
    flex-direction: row;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.message.user .message-avatar {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.message.assistant .message-avatar {
    background: linear-gradient(135deg, var(--accent-gold), #f59e0b);
}

.message-avatar i {
    font-size: 1.25rem;
    color: white;
}

.message-content {
    padding: 14px 18px;
    border-radius: 18px;
    max-width: 70%;
    line-height: 1.6;
    font-size: 0.9375rem;
    word-wrap: break-word;
    position: relative;
}

.message.user .message-content {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.message.assistant .message-content {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
    backdrop-filter: blur(10px);
}

/* Desktop-optimized message width */
@media (min-width: 1024px) {
    .message-content {
        max-width: 60%;
        font-size: 1rem;
    }
}

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    border-bottom-left-radius: 4px;
    width: fit-content;
    margin-left: 52px;
}

.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-gold);
    animation: typing 1.4s infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-10px);
    }
}

.chat-input-container {
    display: flex;
    gap: 12px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 12px 12px;
}

.chat-input {
    flex: 1;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: white;
    font-size: 0.9375rem;
    transition: all 0.3s ease;
    min-height: 48px;
    resize: vertical;
    font-family: inherit;
}

.chat-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.chat-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.chat-send-btn {
    padding: 14px 24px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
    justify-content: center;
}

.chat-send-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-send-btn i {
    font-size: 1.125rem;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.quick-action-btn {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* Desktop layout adjustments */
@media (min-width: 768px) {
    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .chat-widget {
        padding: 0 20px;
    }
    
    .chat-messages {
        padding: 32px;
    }
    
    .message {
        margin-bottom: 24px;
    }
    
    .message-content {
        max-width: 500px;
        padding: 16px 20px;
        font-size: 1rem;
    }
    
    .quick-actions {
        padding: 20px 24px;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .quick-action-btn {
        padding: 12px 16px;
        font-size: 0.9375rem;
    }
}/* Shop Section Styles */
.shop-section {
    max-width: 1400px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.shop-header h2 {
    font-size: 1.5rem;
    color: white;
}

.view-all-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.view-all-link:hover {
    transform: translateX(4px);
}

.product-grid-horizontal {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
}

.product-grid-horizontal::-webkit-scrollbar {
    height: 8px;
}

.product-grid-horizontal::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.product-grid-horizontal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.product-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    min-width: 250px;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.product-emoji {
    font-size: 3rem;
    margin-bottom: 12px;
}

.product-card h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: white;
}

.product-description {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.product-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 0.875rem;
}

.made-in-usa {
    color: #ef4444;
}

.quality-score {
    color: #fbbf24;
}

.buy-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #0a0e27;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.buy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
}

.shop-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.category-tab {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #94a3b8;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-tab:hover,
.category-tab.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}
/* Button Styles */
.btn,
.auth-btn,
.cta-btn,
.flag-btn,
.send-btn,
.nav-btn,
.quick-action-btn,
.view-more-btn {
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

/* Primary Buttons */
.cta-btn,
.send-btn,
.flag-btn {
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-radius: 8px;
    font-weight: 600;
}

.cta-btn:hover,
.send-btn:hover,
.flag-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Glass Buttons */
.auth-btn,
.nav-btn,
.view-more-btn {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: white;
    font-weight: 500;
}

.auth-btn:hover,
.nav-btn:hover:not(:disabled),
.view-more-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

/* Quick Action Buttons */
.quick-action-btn {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: #94a3b8;
    font-size: 0.875rem;
}

.quick-action-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    transform: translateY(-1px);
}
/* Modal Styles */

/* Base Modal Container */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

/* Auth Modal */
.auth-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.auth-modal-content {
    background: linear-gradient(
        135deg,
        rgba(26, 26, 46, 0.98) 0%,
        rgba(30, 30, 50, 0.95) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 420px;
    width: 90%;
    position: relative;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(59, 130, 246, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.close-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.close-modal:hover {
    opacity: 1;
}

/* Auth Modal Header */
.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.eagle-logo,
.auth-logo-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.auth-logo-icon {
    font-size: 3rem;
    line-height: 64px;
    text-align: center;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.auth-subtitle {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Auth Tabs */
.auth-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--glass-border);
}

.auth-tab {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 500;
    position: relative;
    transition: var(--transition);
}

.auth-tab:hover {
    color: var(--text-primary);
}

.auth-tab.active {
    color: var(--text-primary);
}

.auth-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-blue);
}

/* Auth Form */
.auth-form {
    display: none;
    flex-direction: column;
    gap: 1rem;
}

.auth-form.active {
    display: flex;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.auth-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    padding: 0.875rem 1.25rem;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.auth-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--primary-blue);
    box-shadow: 
        0 0 0 3px rgba(59, 130, 246, 0.2),
        0 4px 12px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

.auth-input::placeholder {
    color: var(--text-muted);
}

/* Submit Button */
.submit-btn,
.auth-submit {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    padding: 0.875rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    margin-top: 0.5rem;
}

.submit-btn:hover,
.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);
}

.submit-btn:disabled,
.auth-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Auth Footer */
.auth-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--glass-border);
    text-align: center;
}

.auth-footer-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.auth-footer-link {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
}

.auth-footer-link:hover {
    text-decoration: underline;
}

/* Loading Spinner */
.auth-loading {
    display: none;
    justify-content: center;
    padding: 1rem;
}

.auth-loading.active {
    display: flex;
}

/* Error Message */
.auth-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-top: 1rem;
    display: none;
}

.auth-error:not(:empty) {
    display: block;
}

/* Success Message */
.auth-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--success-green);
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* Premium Plans Modal */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.plan-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition);
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.plan-card.recommended {
    border-color: var(--accent-gold);
    position: relative;
}

.plan-card.recommended::before {
    content: 'BEST VALUE';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-gold);
    color: var(--bg-dark);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.plan-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 1rem 0;
}

.plan-period {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.plan-features li {
    padding: 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.plan-features li::before {
    content: '';
    color: var(--success-green);
    margin-right: 0.5rem;
}

/* Select Plan Button */
.select-plan-btn {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    width: 100%;
}

.select-plan-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-blue);
}

.select-plan-btn.annual-btn {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));
}

.select-plan-btn.annual-btn:hover {
    box-shadow: var(--shadow-glow-gold);
}

/* Notification Modal */
.notification {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--button-radius);
    padding: 1rem 1.5rem;
    min-width: 300px;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10001;
    box-shadow: var(--shadow-md);
}

.notification.show {
    transform: translateY(0);
    opacity: 1;
}

.notification.success {
    border-color: var(--success-green);
    background: rgba(34, 197, 94, 0.1);
}

.notification.error {
    border-color: var(--primary-red);
    background: rgba(239, 68, 68, 0.1);
}

.notification.info {
    border-color: var(--primary-blue);
    background: rgba(59, 130, 246, 0.1);
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.notification-icon {
    font-size: 1.5rem;
}

.notification-message {
    flex: 1;
    color: var(--text-primary);
}

.notification-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.25rem;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.notification-close:hover {
    opacity: 1;
}

/* Email Capture Modal */
.email-capture {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    padding: 2rem;
    margin: 3rem auto;
    max-width: 600px;
    text-align: center;
}

.email-capture h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.email-capture p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.email-form {
    display: flex;
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto;
}

.email-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    border-radius: var(--button-radius);
    font-size: 1rem;
    transition: var(--transition);
}

.email-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.email-input::placeholder {
    color: var(--text-muted);
}

.email-submit {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--button-radius);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.email-submit:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-blue);
}

/* Chat History Panel */
.chat-history-panel {
    position: fixed;
    right: -400px;
    top: 0;
    width: 400px;
    height: 100%;
    background: var(--glass);
    backdrop-filter: blur(20px);
    border-left: 1px solid var(--glass-border);
    transition: right 0.3s ease;
    z-index: 999;
    display: flex;
    flex-direction: column;
}

.chat-history-panel.open {
    right: 0;
}

.chat-history-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-history-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-history-close {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.chat-history-close:hover {
    opacity: 1;
}

.chat-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.chat-history-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
}

/* Close Button General */
.close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.close-btn:hover {
    opacity: 1;
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
}

/* Generic Modal Content */
.modal-content {
    background: var(--glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 2rem;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: modalSlideIn 0.3s ease-out;
}

/* Responsive Modal Adjustments */
@media (max-width: 768px) {
    .auth-modal-content,
    .modal-content {
        width: 95%;
        padding: 1.5rem;
    }
    
    .plans-grid {
        grid-template-columns: 1fr;
    }
    
    .chat-history-panel {
        width: 100%;
        right: -100%;
    }
    
    .notification {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }
}/* Card Styles */

/* Base Card Styles */
.content-card {
    background: var(--glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 2rem;
    transition: var(--transition);
    opacity: 1;
    transform: translateY(0);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Allow observances to show all content */
.content-card.upcoming-observances {
    overflow: visible;
}

/* Observances/Holidays Widget Specific */
.observances-widget {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
}

/* Holiday Items */
.holiday-item {
    padding: 12px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid var(--primary-blue);
    transition: all 0.3s ease;
}

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

.holiday-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(2px);
}

.holiday-item.federal {
    border-left-color: var(--accent-gold);
}

.holiday-item.observance {
    border-left-color: var(--primary-blue);
}

.holiday-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.holiday-date {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.holiday-days {
    font-size: 0.8rem;
    padding: 2px 8px;
    background: rgba(59, 130, 246, 0.2);
    color: var(--primary-blue);
    border-radius: 12px;
    font-weight: 600;
}

.holiday-item.federal .holiday-days {
    background: rgba(251, 191, 36, 0.2);
    color: var(--accent-gold);
}

.holiday-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.flag-status-indicator {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: 8px;
}

.flag-status-indicator.half-staff {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.flag-status-indicator.full-staff {
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary-blue);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Add subtle left border for holidays with flag status */
.holiday-item.has-flag-status {
    border-left-width: 4px;
}

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

.holiday-type {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.add-to-calendar-btn {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 4px;
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-to-calendar-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

.add-to-calendar-btn i {
    font-size: 0.9rem;
    color: var(--primary-blue);
}

.content-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

/* Expandable Cards */
.content-card.expandable-card {
    height: 320px;
    display: flex;
    flex-direction: column;
}

.content-card.expandable-card.expanded {
    height: auto;
    max-height: 600px;
}

.card-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.card-content.expandable {
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.content-card.expanded .card-content.expandable {
    mask-image: none;
    -webkit-mask-image: none;
    overflow-y: auto;
}

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

.card-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.card-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    transition: var(--transition);
}

.card-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Card Header */
.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.card-icon {
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.card-icon svg {
    width: 32px;
    height: 32px;
    color: var(--accent-gold);
    transition: all 0.3s ease;
}

/* Specific icon colors */
#history-card .card-icon svg {
    color: #3B82F6; /* Patriotic blue */
}

#chat-card .card-icon svg {
    color: #DC2626; /* Patriotic red for outline */
}

.buy-american-card .card-icon svg {
    color: var(--accent-gold);
}

/* Hover effects */
.content-card:hover .card-icon svg {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Quote Card Styles */
.quote-card {
    position: relative;
    padding: 1.5rem;
}

.quote-actions {
    position: absolute;
    top: 0;
    right: 0;
}

.refresh-quote-btn {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--primary-blue);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.refresh-quote-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

.quote-content {
    margin: 0;
    padding: 0;
}

.quote-text {
    font-size: 1.375rem;
    line-height: 1.7;
    color: var(--text-primary);
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.01em;
    margin-bottom: 1rem;
    position: relative;
    padding-left: 2rem;
    border-left: 3px solid var(--accent-gold);
}

.quote-author {
    display: block;
    text-align: right;
    color: var(--text-secondary);
    font-size: 1rem;
    margin-top: 1.25rem;
    font-style: normal;
    font-weight: 500;
}

/* Quote Share Section */
.quote-share-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.share-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.share-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Facebook Blue */
.share-facebook {
    background: linear-gradient(135deg, #1877f2 0%, #0e60d8 100%);
    border-color: #1877f2;
}

.share-facebook:hover {
    background: linear-gradient(135deg, #2d86f7 0%, #1877f2 100%);
    box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Twitter/X Black */
.share-twitter {
    background: linear-gradient(135deg, #2a2a2a 0%, #000000 100%);
    border-color: #2a2a2a;
}

.share-twitter:hover {
    background: linear-gradient(135deg, #404040 0%, #1a1a1a 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* LinkedIn Blue */
.share-linkedin {
    background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
    border-color: #0077b5;
}

.share-linkedin:hover {
    background: linear-gradient(135deg, #0088cc 0%, #0077b5 100%);
    box-shadow: 0 6px 20px rgba(0, 119, 181, 0.4);
}

/* Truth Social - Patriotic Red/Blue */
.share-truth {
    background: linear-gradient(135deg, #dc2626 0%, #1e40af 100%);
    border-color: #dc2626;
}

.share-truth:hover {
    background: linear-gradient(135deg, #ef4444 0%, #2563eb 100%);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

/* Copy Quote - Gray */
.share-copy {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    border-color: #6b7280;
}

.share-copy:hover {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    box-shadow: 0 6px 20px rgba(107, 114, 128, 0.4);
}

/* Native Share Button */
.share-native {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #3b82f6;
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1rem;
}

.share-native:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.share-native span {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Copy Feedback */
.copy-feedback {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(34, 197, 94, 0.9);
    color: white;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
}

/* Quote Notification */
.quote-notification {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}

.quote-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(5, 150, 105, 0.95) 100%);
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

.quote-notification-success .notification-content {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(5, 150, 105, 0.95) 100%);
}

.notification-content i {
    font-size: 1.2rem;
}

/* Event Share Section */
.event-share-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Event Notification (centered like mobile) */
.event-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-10px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10000;
    pointer-events: none;
}

.event-notification.show {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
}

.event-notification .notification-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(5, 150, 105, 0.95) 100%);
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

.copy-feedback::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(34, 197, 94, 0.9);
}

.author-dash {
    margin-right: 0.25rem;
}

.quote-context {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Product Cards */
.product-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    min-width: 250px;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.product-emoji {
    font-size: 3rem;
    margin-bottom: 12px;
}

.product-card h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: white;
}

.product-description {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.product-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 0.875rem;
}

.made-in-usa {
    color: #ef4444;
}

.quality-score {
    color: #fbbf24;
}

/* Dashboard Product Cards */
.product-card-dashboard {
    min-width: 220px;
    height: 280px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.product-card-dashboard:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    background: var(--glass-hover);
    border-color: var(--glass-border-hover);
}

.product-image-placeholder {
    width: 100%;
    height: 120px;
    background: var(--glass-hover);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 12px;
}

.product-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.product-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 12px;
}

.product-shop-btn {
    margin-top: auto;
    background: var(--primary-blue);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.product-shop-btn:hover {
    background: var(--primary-blue-dark);
    transform: translateY(-1px);
}

/* Buy American Card */
.buy-american-card {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(239, 68, 68, 0.05) 50%, rgba(59, 130, 246, 0.1) 100%);
    border: 2px solid rgba(251, 191, 36, 0.3);
}

.buy-american-card:hover {
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 0 8px 32px rgba(251, 191, 36, 0.2);
}

/* Premium Content Card */
.premium-content-card {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(255, 215, 0, 0.05));
    border: 2px solid rgba(212, 175, 55, 0.3);
    position: relative;
    overflow: visible;
}

.premium-content-card::before {
    content: '=Q';
    position: absolute;
    top: -12px;
    right: 20px;
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Teaser Cards */
.premium-teaser {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--button-radius);
    padding: 1.5rem;
    margin-top: 1rem;
    text-align: center;
}

.premium-teaser h4 {
    color: var(--accent-gold);
    margin-bottom: 1rem;
}

.blur-content {
    filter: blur(3px);
    opacity: 0.6;
    pointer-events: none;
    user-select: none;
}

/* Event Cards */
.event-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.event-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.event-card.featured {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(255, 255, 255, 0.05));
    border-color: rgba(59, 130, 246, 0.3);
}

/* Plan Cards */
.plan-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition);
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.plan-card.recommended {
    border-color: var(--accent-gold);
    position: relative;
}

.plan-card.recommended::before {
    content: 'BEST VALUE';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-gold);
    color: var(--bg-dark);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Responsive Cards */
@media (max-width: 768px) {
    .content-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .product-card {
        min-width: 200px;
    }
    
    .product-card-dashboard {
        min-width: 180px;
        height: 240px;
    }
    
    .card-header {
        gap: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .card-icon svg {
        width: 28px;
        height: 28px;
    }
}/* AI Question Chips Styles */

/* Desktop AI Question Chips */
.ai-question-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    animation: fadeInUp 0.4s ease 0.2s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-chip {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05));
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.875rem;
    color: var(--accent-gold);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

/* Subtle shimmer effect for premium feel */
.ai-chip::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(251, 191, 36, 0.2),
        transparent
    );
    transition: left 0.5s ease;
}

.ai-chip:hover {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.08));
    border-color: rgba(251, 191, 36, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
}

.ai-chip:hover::before {
    left: 100%;
}

.ai-chip i {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* Pulse animation for first chip to draw attention */
.ai-chip:first-child {
    animation: subtlePulse 2s ease infinite;
}

@keyframes subtlePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.1);
    }
}

/* Mobile AI Chips */
.mobile-ai-chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-chip-mobile {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05));
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.9375rem;
    color: var(--accent-gold);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}

.ai-chip-mobile:hover {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.08));
    border-color: rgba(251, 191, 36, 0.3);
}

/* Light mode adjustments */
[data-theme="light"] .ai-chip,
[data-theme="light"] .ai-chip-mobile {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.08), rgba(217, 119, 6, 0.04));
    border-color: rgba(217, 119, 6, 0.15);
    color: #d97706;
}

[data-theme="light"] .ai-chip:hover,
[data-theme="light"] .ai-chip-mobile:hover {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.12), rgba(217, 119, 6, 0.06));
    border-color: rgba(217, 119, 6, 0.25);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
}

[data-theme="light"] .ai-question-chips,
[data-theme="light"] .mobile-ai-chips {
    border-top-color: rgba(0, 0, 0, 0.06);
}

/* Historical Events AI Chips */
.event-ai-chips {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.event-ai-chip {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 0.8125rem;
    color: var(--primary-blue);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.event-ai-chip:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08));
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
}

/* Park AI Chips */
.park-ai-chips {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-direction: column;
}

.park-ai-chip {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.875rem;
    color: #22c55e;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.park-ai-chip:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.08));
    border-color: rgba(34, 197, 94, 0.3);
}

/* Premium indicator on chips for free users */
.ai-chip.premium-locked::after,
.ai-chip-mobile.premium-locked::after {
    content: '⭐';
    margin-left: 4px;
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Disabled state for when credits are exhausted */
.ai-chip.no-credits,
.ai-chip-mobile.no-credits {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

.ai-chip.no-credits::after,
.ai-chip-mobile.no-credits::after {
    content: 'Upgrade for unlimited';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.625rem;
    color: var(--accent-gold);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ai-chip.no-credits:hover::after,
.ai-chip-mobile.no-credits:hover::after {
    opacity: 1;
}/* Dark Theme Styles (Default) */

/* Dark theme is the default - these styles are in variables.css and throughout the app */
/* This file contains dark-specific overrides and enhancements */

/* Animated Background for Dark Theme */
.bg-gradient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0a0e27 100%);
    z-index: -2;
    background-size: 200% 200%;
    animation: gradientShift 20s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Starfield Effect for Dark Theme */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0;
    animation: twinkle 3s infinite;
}

.star.small {
    width: 1px;
    height: 1px;
    animation-duration: 3s;
}

.star.medium {
    width: 2px;
    height: 2px;
    animation-duration: 4s;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

.star.large {
    width: 3px;
    height: 3px;
    animation-duration: 5s;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

@keyframes twinkle {
    0%, 100% { 
        opacity: 0; 
        transform: scale(0.5); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2); 
    }
}

/* Parallax effect for stars */
.stars.parallax {
    transform: translateY(0);
    transition: transform 0.1s linear;
}

/* Light Theme Override */
[data-theme="light"] {
    --bg-dark: #f3f4f6;
    --bg-darker: #e5e7eb;
    --glass: rgba(255, 255, 255, 0.9);
    --glass-hover: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-border-hover: rgba(0, 0, 0, 0.12);
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --accent-gold: #d97706;
}

[data-theme="light"] .content-card {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .card-content {
    background: #f9fafb;
    color: var(--text-primary);
}

[data-theme="light"] header {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .nav-link {
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .nav-link:hover {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.9);
}

[data-theme="light"] .nav-link.active {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .flag-status-banner {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
}

[data-theme="light"] .shop-strip {
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .shop-strip-item {
    background: #f3f4f6;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .event-details {
    background: #f3f4f6;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .messages-container {
    background: #f9fafb;
}

[data-theme="light"] .bot-message .message-bubble {
    background: #e5e7eb;
    color: #111827;
}

[data-theme="light"] .chat-input {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #111827;
}

[data-theme="light"] .chat-input:focus {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .chat-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] body {
    background: var(--bg-dark);
}

[data-theme="light"] .bg-gradient {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
}

[data-theme="light"] .stars {
    opacity: 0;
}

/* Theme Toggle Button */
.theme-toggle {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.theme-toggle:hover {
    background: var(--glass-hover);
    border-color: var(--glass-border-hover);
    color: var(--text-primary);
}

.theme-icon {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.theme-toggle:hover .theme-icon {
    transform: rotate(180deg);
}

/* Dark Mode Scrollbar */
body::-webkit-scrollbar {
    width: 12px;
    background: rgba(0, 0, 0, 0.1);
}

body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Light Mode Scrollbar */
[data-theme="light"] body::-webkit-scrollbar {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Transitions for theme switching */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Prevent transition on page load */
body.no-transition * {
    transition: none !important;
}

/* Dark Theme Specific Enhancements */
@media (prefers-color-scheme: dark) {
    /* System dark mode preferences */
    :root {
        color-scheme: dark;
    }
}

/* Light Theme Specific Enhancements */
@media (prefers-color-scheme: light) {
    [data-theme="auto"] {
        --bg-dark: #f3f4f6;
        --bg-darker: #e5e7eb;
        --text-primary: #111827;
        --text-secondary: #4b5563;
        --text-muted: #9ca3af;
    }
}/* Premium Theme Styles */

/* Premium User Enhancements */
body[data-premium="true"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 215, 0, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* Premium Cards */
body[data-premium="true"] .card {
    background: linear-gradient(
        135deg,
        rgba(26, 26, 46, 0.95) 0%,
        rgba(30, 30, 50, 0.92) 50%,
        rgba(40, 40, 60, 0.95) 100%
    );
    border: 2px solid rgba(255, 215, 0, 0.25);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 215, 0, 0.2),
        0 0 30px rgba(255, 215, 0, 0.15),
        inset 0 0 30px rgba(255, 215, 0, 0.03);
    position: relative;
}

body[data-premium="true"] .card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.1) 50%, transparent 70%);
    border-radius: inherit;
    opacity: 0;
    animation: goldShine 4s infinite;
    pointer-events: none;
}

@keyframes goldShine {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Premium Navigation */
body[data-premium="true"] .nav-link {
    position: relative;
}

body[data-premium="true"] .nav-link.active {
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

body[data-premium="true"] .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
    animation: goldSlide 2s infinite;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

@keyframes goldSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Premium Header */
body[data-premium="true"] header {
    border-bottom: 2px solid rgba(255, 215, 0, 0.2);
    box-shadow: 
        0 2px 20px rgba(0, 0, 0, 0.5),
        0 4px 20px rgba(255, 215, 0, 0.1),
        inset 0 -1px 0 rgba(255, 215, 0, 0.1);
    background: linear-gradient(
        180deg,
        rgba(26, 26, 46, 0.99) 0%,
        rgba(26, 26, 46, 0.97) 100%
    );
}

/* Premium Buttons */
body[data-premium="true"] .btn-primary,
body[data-premium="true"] .cta-button,
body[data-premium="true"] .auth-button {
    border: 1px solid rgba(255, 215, 0, 0.2);
    box-shadow: 
        0 4px 15px rgba(74, 144, 226, 0.3),
        inset 0 1px 0 rgba(255, 215, 0, 0.1);
    position: relative;
    overflow: hidden;
}

body[data-premium="true"] .btn-primary::before,
body[data-premium="true"] .cta-button::before,
body[data-premium="true"] .auth-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
    transition: left 0.5s;
}

body[data-premium="true"] .btn-primary:hover::before,
body[data-premium="true"] .cta-button:hover::before,
body[data-premium="true"] .auth-button:hover::before {
    left: 100%;
}

/* Premium Chat */
body[data-premium="true"] .chat-widget,
body[data-premium="true"] .chat-container {
    border: 2px solid rgba(255, 215, 0, 0.25);
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.15),
        inset 0 0 20px rgba(255, 215, 0, 0.05);
}

body[data-premium="true"] .chat-header {
    background: linear-gradient(
        135deg,
        rgba(26, 26, 46, 0.98) 0%,
        rgba(40, 40, 60, 0.98) 100%
    );
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    position: relative;
}

body[data-premium="true"] .chat-header::after {
    content: 'PREMIUM';
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 10px;
    color: #FFD700;
    font-weight: 600;
    letter-spacing: 2px;
    opacity: 0.6;
}

/* Premium Event Cards */
body[data-premium="true"] .event-card,
body[data-premium="true"] .history-event-card {
    border: 1px solid rgba(255, 215, 0, 0.15);
    background: linear-gradient(
        135deg,
        rgba(26, 26, 46, 0.95) 0%,
        rgba(35, 35, 55, 0.92) 100%
    );
}

body[data-premium="true"] .event-card:hover,
body[data-premium="true"] .history-event-card:hover {
    border-color: rgba(255, 215, 0, 0.4);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(255, 215, 0, 0.2),
        inset 0 0 20px rgba(255, 215, 0, 0.05);
}

/* Premium Flag Status */
body[data-premium="true"] .flag-status-widget {
    border: 2px solid rgba(255, 215, 0, 0.25);
    position: relative;
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.15),
        inset 0 0 20px rgba(255, 215, 0, 0.05);
}

body[data-premium="true"] .flag-status-widget::before {
    content: '';
    position: absolute;
    top: -12px;
    right: -12px;
    color: #FFD700;
    font-size: 24px;
    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.6));
    animation: starPulse 2s infinite;
    z-index: 10;
}

body[data-premium="true"] .flag-status-widget::after {
    content: 'PREMIUM';
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 215, 0, 0.5);
    text-transform: uppercase;
}

@keyframes starPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

/* Premium User Menu */
body[data-premium="true"] .user-menu {
    background: linear-gradient(
        135deg,
        rgba(26, 26, 46, 0.98) 0%,
        rgba(40, 40, 60, 0.98) 100%
    );
    border: 1px solid rgba(255, 215, 0, 0.2);
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 215, 0, 0.1);
}

/* Premium Scrollbar */
body[data-premium="true"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(255, 215, 0, 0.3) 0%,
        rgba(255, 215, 0, 0.1) 100%
    );
    border: 1px solid rgba(255, 215, 0, 0.1);
}

/* Premium Loading */
body[data-premium="true"] .loading-spinner,
body[data-premium="true"] .spinner {
    border-color: rgba(255, 215, 0, 0.2);
    border-top-color: #FFD700;
}

/* Premium Stats Display */
.premium-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 20px 0;
}

.premium-stat-card {
    background: linear-gradient(
        135deg,
        rgba(255, 215, 0, 0.05) 0%,
        transparent 100%
    );
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.1);
    text-align: center;
}

.premium-stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #FFD700;
    margin-bottom: 5px;
}

.premium-stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Premium Exclusive Content */
.premium-exclusive::before {
    content: '=Q';
    margin-right: 8px;
    font-size: 18px;
}

/* Premium Theme Toggle */
body[data-premium="true"] .theme-toggle,
body[data-premium="true"] .theme-toggle-btn {
    border: 1px solid rgba(255, 215, 0, 0.2);
    background: rgba(255, 215, 0, 0.05);
}

body[data-premium="true"] .theme-toggle:hover,
body[data-premium="true"] .theme-toggle-btn:hover {
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

/* Premium Site Title */
body[data-premium="true"] .logo-text::after,
body[data-premium="true"] .logo-text-custom::after {
    content: '=Q';
    margin-left: 10px;
    font-size: 0.8em;
    animation: crownFloat 3s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.5));
}

@keyframes crownFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-3px) rotate(5deg); }
}

/* Premium Glow Effect on Main Content */
body[data-premium="true"] .main-content,
body[data-premium="true"] main {
    position: relative;
}

body[data-premium="true"] .main-content::before,
body[data-premium="true"] main::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
    pointer-events: none;
    animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Premium Content Card */
body[data-premium="true"] .content-card {
    border: 2px solid rgba(255, 215, 0, 0.2);
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.1),
        inset 0 0 20px rgba(255, 215, 0, 0.03);
}

/* Premium Quote Card */
body[data-premium="true"] .quote-card {
    border: 2px solid rgba(255, 215, 0, 0.2);
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.1),
        inset 0 0 20px rgba(255, 215, 0, 0.03);
}

body[data-premium="true"] .quote-text::before,
body[data-premium="true"] .quote-text::after {
    color: #FFD700;
    opacity: 0.5;
}

/* Premium Badge */
.premium-badge {
    background: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%);
    color: #000;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}

.premium-badge::before {
    content: '=Q';
    font-size: 0.875rem;
}

/* Premium CTA Button */
.premium-cta-btn {
    background: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%);
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.premium-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4);
}

/* Premium Product Cards */
body[data-premium="true"] .product-card,
body[data-premium="true"] .product-card-dashboard {
    border: 1px solid rgba(255, 215, 0, 0.2);
}

body[data-premium="true"] .product-card:hover,
body[data-premium="true"] .product-card-dashboard:hover {
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 215, 0, 0.15);
}

/* Premium Shop Section */
body[data-premium="true"] .shop-section {
    position: relative;
}

body[data-premium="true"] .shop-section::before {
    content: 'PREMIUM ACCESS';
    position: absolute;
    top: -10px;
    right: 20px;
    background: linear-gradient(135deg, #D4AF37, #FFD700);
    color: #000;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 1px;
    z-index: 10;
}

/* Premium User Avatar */
body[data-premium="true"] .user-avatar {
    border: 2px solid #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

/* Premium Notification */
body[data-premium="true"] .notification {
    border: 1px solid rgba(255, 215, 0, 0.3);
    background: linear-gradient(
        135deg,
        rgba(26, 26, 46, 0.98) 0%,
        rgba(40, 40, 60, 0.95) 100%
    );
}

/* Premium Auth Modal */
body[data-premium="true"] .auth-modal-content {
    border: 2px solid rgba(255, 215, 0, 0.3);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 215, 0, 0.1);
}

/* Premium Animations */
@keyframes premiumShimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

body[data-premium="true"] .widget:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 215, 0, 0.05) 50%,
        transparent 100%
    );
    background-size: 1000px 100%;
    animation: premiumShimmer 2s;
    pointer-events: none;
    border-radius: inherit;
}

/* Responsive Premium Styles */
@media (max-width: 768px) {
    body[data-premium="true"] .premium-badge {
        font-size: 0.625rem;
        padding: 3px 8px;
    }
    
    body[data-premium="true"] .premium-stat-card {
        padding: 10px;
    }
    
    .premium-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}/* Responsive Design Utilities */

/* Mobile First Breakpoints */
/* sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px */

/* ===== Desktop to Tablet (1200px) ===== */
@media (max-width: 1200px) {
    .content-grid-four {
        grid-template-columns: 1fr;
    }
    
    .dashboard-grid {
        grid-template-columns: 300px 1fr;
        grid-template-areas:
            "left center"
            "chat chat";
    }
    
    .dashboard-left-sidebar {
        grid-area: left;
    }
    
    .dashboard-center {
        grid-area: center;
    }
    
    .dashboard-right-sidebar {
        grid-area: chat;
        position: static;
        max-height: none;
    }
}

/* ===== Tablet to Mobile (768px) ===== */
@media (max-width: 768px) {
    /* Hide desktop navigation */
    .nav-tabs {
        display: none !important;
    }
    
    .nav-menu .auth-btn,
    .nav-menu .cta-btn {
        display: none !important;
    }
    
    /* Simplified header */
    .header-content {
        padding: 0.75rem 1rem;
        justify-content: space-between;
    }
    
    .logo-text-custom {
        display: none;
    }
    
    .logo-icon-only {
        height: 28px;
    }
    
    /* Single column dashboard */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        padding: 1rem !important;
        padding-bottom: 80px; /* Space for bottom nav */
        gap: 1rem !important;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .dashboard-right-sidebar {
        position: static !important;
        max-height: none !important;
    }
    
    /* Mobile share buttons */
    .mobile-share-buttons {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        margin: 1rem 0;
        flex-wrap: wrap;
    }
    
    .mobile-share-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 2px solid transparent;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
        color: white;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }
    
    .mobile-share-btn:active {
        transform: scale(0.95);
    }
    
    /* Native share button on mobile */
    .share-native {
        width: auto;
        min-width: 120px;
        height: 44px;
        border-radius: 22px;
        font-size: 1rem;
    }
    
    /* Mobile notification adjustments */
    .quote-notification {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
        position: fixed !important;
    }
    
    .quote-notification.show {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    
    .notification-content {
        font-size: 0.9rem;
        padding: 10px 16px;
        white-space: normal;
        max-width: 90vw;
        text-align: center;
    }
    
    /* Mobile bottom navigation */
    .mobile-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-darker);
        border-top: 1px solid var(--glass-border);
        padding: 0.5rem 0;
        z-index: 1000;
        justify-content: space-around;
    }
    
    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        padding: 0.5rem;
        background: none;
        border: none;
        color: var(--text-secondary);
        font-size: 0.75rem;
        cursor: pointer;
        transition: var(--transition-fast);
    }
    
    .mobile-nav-item.active {
        color: var(--primary-blue);
    }
    
    .mobile-nav-item i {
        font-size: 1.25rem;
    }
    
    /* Hide footer on mobile */
    .footer {
        display: none;
    }
    
    /* Content sections on mobile */
    .content-section {
        width: 100%;
        max-width: calc(100vw - 2rem);
        padding: 1rem;
        margin-bottom: 1rem;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    /* Historical events container */
    #historicalEventsContainer {
        width: 100%;
        overflow-x: hidden;
    }
    
    /* Quote container */
    #patrioticQuote {
        width: 100%;
        overflow-x: hidden;
    }
    
    /* Park container */
    #parkOfTheDay {
        width: 100%;
        overflow-x: hidden;
    }
    
    /* Flag status widget */
    #flagStatusWidget {
        width: 100%;
        overflow-x: hidden;
    }
    
    /* Show mobile brand name */
    .logo-text-mobile {
        display: inline-flex !important;
        align-items: center;
        margin-left: 0.5rem;
        font-size: 1.1rem;
        font-weight: 700;
    }
    
    .logo-text-custom {
        display: none !important;
    }
    
    /* Simplified mobile flag status */
    .flag-widget {
        background: linear-gradient(135deg, var(--primary-blue), var(--primary-red));
        padding: 1.5rem;
        border-radius: 16px;
        border: none;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }
    
    .flag-widget h2 {
        display: none;
    }
    
    #flagStatusWidget {
        background: transparent;
        border: none;
        padding: 0;
    }
    
    /* Mobile flag status styling */
    .mobile-flag-card {
        text-align: center;
        padding: 1.5rem;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
        border-radius: 16px;
        border: 1px solid rgba(59, 130, 246, 0.2);
        backdrop-filter: blur(10px);
    }
    
    .mobile-flag-card h3 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
        color: var(--text-primary);
    }
    
    .mobile-flag-card .flag-status-indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
        border: 1px solid rgba(59, 130, 246, 0.2);
        border-radius: 12px;
        margin-bottom: 1rem;
        font-size: 1.1rem;
        font-weight: 600;
    }
    
    .mobile-flag-card .flag-status-indicator.half-staff {
        background: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(239, 68, 68, 0.1));
        border-color: rgba(251, 146, 60, 0.2);
        color: #fb923c;
    }
    
    .mobile-flag-card .flag-status-indicator.full-staff {
        color: #3b82f6;
    }
    
    .mobile-flag-card .flag-reason {
        margin: 1rem 0;
        font-size: 0.95rem;
        color: var(--text-secondary);
        line-height: 1.5;
    }
    
    .mobile-flag-card .flag-source {
        font-size: 0.85rem;
        color: var(--text-secondary);
        margin-bottom: 1rem;
        opacity: 0.8;
    }
    
    .flag-action-btn.mobile {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
        border: 1px solid rgba(59, 130, 246, 0.2);
        color: #3b82f6;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
    }
    
    .flag-action-btn.mobile:hover {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(99, 102, 241, 0.2));
        transform: translateY(-2px);
    }
    
    /* Removed widget-content styles that were blocking gradient */
    
    #flagStatusWidget h3 {
        font-size: 1.35rem;
        margin: 0;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
    }
    
    #flagStatusWidget .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        background: var(--primary-blue);
        color: white;
        border-radius: 24px;
        font-weight: 700;
        font-size: 1.1rem;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    }
    
    #flagStatusWidget .status-badge.half-staff {
        background: linear-gradient(135deg, #DC143C, #B91C1C);
        box-shadow: 0 4px 12px rgba(220, 20, 60, 0.3);
    }
    
    #flagStatusWidget .status-message {
        margin: 0.5rem 0;
        color: var(--text-secondary);
        font-size: 1rem;
        line-height: 1.4;
    }
    
    #flagStatusWidget .status-source {
        font-size: 0.75rem;
        color: var(--text-secondary);
        opacity: 0.7;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        margin-top: 0.5rem;
    }
    
    #flagStatusWidget .flag-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;
        width: 100%;
    }
    
    #flagStatusWidget .flag-action-btn {
        flex: 1;
        padding: 0.75rem 1rem;
        background: var(--glass);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        color: var(--text-primary);
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    
    #flagStatusWidget .flag-action-btn:hover {
        background: var(--glass-hover);
        transform: translateY(-2px);
    }
    
    /* Improved holiday cards */
    .observances-widget {
        padding: 0;
        background: transparent;
        border: none;
    }
    
    .observances-widget h2 {
        padding: 0 1rem;
        margin-bottom: 1rem;
        font-size: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .observance-item {
        background: var(--glass);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        position: relative;
        overflow: hidden;
    }
    
    /* Light mode specific fixes */
    [data-theme="light"] .observance-item {
        background: white;
        border: 1px solid rgba(0,0,0,0.1);
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    
    [data-theme="light"] .flag-widget {
        background: linear-gradient(135deg, #0066CC, #DC143C);
    }
    
    /* Make widget content transparent on mobile to show gradient */
    [data-theme="light"] #flagStatusWidget {
        background: transparent !important;
    }
    
    [data-theme="light"] .mobile-flag-card {
        background: transparent !important;
        color: white !important;
    }
    
    /* Make all text white on gradient in light mode */
    [data-theme="light"] .mobile-flag-card h3,
    [data-theme="light"] .mobile-flag-card .flag-reason,
    [data-theme="light"] .mobile-flag-card .flag-source {
        color: white !important;
    }
    
    [data-theme="light"] .flag-status-badge.full-staff {
        background: rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        color: white !important;
    }
    
    [data-theme="light"] .flag-status-badge.half-staff {
        background: rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        color: white !important;
    }
    
    .observance-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--primary-blue);
    }
    
    .observance-date {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    
    .observance-date .date {
        font-weight: 600;
        color: var(--text-primary);
    }
    
    .observance-date .countdown {
        font-size: 0.85rem;
        color: var(--primary-blue);
        font-weight: 500;
    }
    
    .observance-name {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--text-primary);
    }
    
    .observance-type {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        background: rgba(0,100,200,0.1);
        color: var(--primary-blue);
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .observance-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.75rem;
    }
    
    .add-to-calendar-btn {
        background: var(--glass);
        border: 1px solid var(--glass-border);
        border-radius: 8px;
        padding: 0.5rem;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }
    
    .add-to-calendar-btn:hover {
        background: var(--glass-hover);
        transform: translateY(-2px);
    }
    
    .half-staff-badge {
        display: inline-block;
        margin-left: 0.5rem;
        padding: 0.25rem 0.5rem;
        background: rgba(220,20,60,0.1);
        color: #DC143C;
        border-radius: 8px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
    }
    
    /* Mobile-specific card styles */
    .mobile-flag-card,
    .mobile-quote-card,
    .mobile-event-card,
    .mobile-park-card {
        width: 100%;
        padding: 1rem;
        background: var(--glass);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .mobile-flag-card h3,
    .mobile-event-card h4,
    .mobile-park-card h4 {
        margin-top: 0;
        margin-bottom: 0.75rem;
        font-size: 1.1rem;
    }
    
    .mobile-quote-card .quote-text {
        font-style: italic;
        line-height: 1.6;
        margin-bottom: 0.5rem;
    }
    
    .mobile-quote-card cite {
        display: block;
        text-align: right;
        color: var(--text-secondary);
        font-size: 0.9rem;
    }
    
    .mobile-event-card .event-badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        background: var(--primary-blue);
        color: white;
        border-radius: 4px;
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }
    
    .mobile-park-card .park-link,
    .mobile-park-link {
        display: inline-block;
        margin-top: 0.75rem;
        color: var(--primary-blue);
        text-decoration: none;
        font-weight: 500;
    }
    
    /* Widget adjustments */
    .widget {
        width: 100%;
        max-width: calc(100vw - 2rem);
        margin-bottom: 1rem;
        backdrop-filter: blur(20px);
        padding: 1rem;
        flex-direction: column;
        z-index: 999;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    #nav.active, nav.active {
        display: flex;
    }
    
    .mobile-menu-toggle {
        display: block;
        background: var(--glass);
        border: 1px solid var(--glass-border);
        color: var(--text-primary);
        padding: 0.5rem;
        border-radius: var(--button-radius);
        font-size: 1.5rem;
        cursor: pointer;
        grid-column: 2;
        justify-self: center;
    }
    
    .header-right {
        gap: 0.5rem;
    }
    
    /* Flag Status Banner - Mobile */
    .flag-status-banner {
        position: relative;
        top: 0;
    }
    
    .banner-content {
        flex-wrap: wrap;
        padding: 0 1rem;
        font-size: 0.875rem;
        text-align: center;
        gap: 0.5rem;
    }
    
    .banner-divider {
        display: none;
    }
    
    .banner-reason {
        width: 100%;
        font-size: 0.8125rem;
    }
    
    /* Dashboard Grid - Mobile */
    .dashboard-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "left"
            "center"
            "chat";
        padding: 16px;
        gap: 16px;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    /* Mobile Menu Section - Full Tab */
    .mobile-menu-section {
        width: 100%;
        padding: 1rem;
    }
    
    .menu-section-content {
        width: 100%;
        max-width: 100vw;
    }
    
    .menu-user-card {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem;
        background: var(--glass);
        border-radius: 12px;
        margin-bottom: 1.5rem;
    }
    
    .menu-user-card i {
        font-size: 3rem;
        color: var(--primary-blue);
    }
    
    .menu-options {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .menu-option {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 1rem;
        background: var(--glass);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        color: var(--text-primary);
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.2s;
        text-align: left;
    }
    
    .menu-option:active {
        background: var(--glass-hover);
        transform: scale(0.98);
    }
    
    .menu-option i:first-child {
        margin-right: 1rem;
        font-size: 1.25rem;
    }
    
    .menu-option i:last-child {
        margin-left: auto;
        opacity: 0.5;
    }
    
    .menu-option.premium-cta {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.1));
        border-color: rgba(255, 215, 0, 0.3);
    }
    
    .menu-divider {
        height: 1px;
        background: var(--glass-border);
        margin: 1rem 0;
    }
    
    /* Hide View More History button on mobile */
    .view-more-section {
        display: none !important;
    }
    
    .dashboard-left-sidebar,
    .dashboard-center,
    .dashboard-right-sidebar {
        grid-area: unset;
    }
    
    /* Card adjustments */
    .content-card {
        width: 100%;
        max-width: calc(100vw - 2rem);
        padding: 1.5rem;
        margin-bottom: 16px;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .card-title {
        font-size: 1.25rem;
    }
    
    /* Flag Status Display */
    .flag-status-display {
        padding: 16px 0;
    }
    
    .flag-icon-large {
        font-size: 4rem;
    }
    
    .flag-status-text {
        font-size: 1.5rem;
    }
    
    /* History Hero Event */
    .history-hero-event {
        width: 100%;
        max-width: calc(100vw - 2rem);
        box-sizing: border-box;
    }
    
    .history-hero-event .hero-image-placeholder {
        height: 150px;
        width: 100%;
    }
    
    /* Chat Container */
    .chat-container-dashboard {
        height: 400px;
    }
    
    /* Products Scroll */
    .products-scroll {
        padding: 16px;
        margin: 0;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .product-card-dashboard {
        min-width: 160px;
        max-width: 180px;
        height: 240px;
        flex-shrink: 0;
    }
    
    /* Content Grids */
    .content-grid,
    .content-grid-four,
    .content-grid-three {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    
    /* Footer adjustments */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    /* Product item adjustments */
    .product-item {
        flex-direction: column;
        text-align: center;
    }
    
    .product-image {
        width: 100%;
        height: 200px;
        margin: 0 auto 1rem;
    }
    
    .product-footer {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .product-link {
        width: 100%;
        text-align: center;
    }
    
    /* Shop Tabs */
    .shop-tabs {
        justify-content: flex-start;
    }
    
    .shop-tab-btn {
        padding: 0.625rem 1rem;
    }
    
    .tab-label {
        display: none;
    }
    
    .tab-icon {
        font-size: 1.5rem;
    }
    
    /* Category Products */
    .category-products {
        grid-template-columns: 1fr;
    }
    
    /* Auth Modal */
    .auth-modal-content {
        width: 95%;
        padding: 1.5rem;
    }
    
    /* Plans Grid */
    .plans-grid {
        grid-template-columns: 1fr;
    }
    
    /* Hide theme toggle on mobile */
    .theme-toggle-container {
        display: none;
    }
}

/* ===== Small Mobile (480px) ===== */
@media (max-width: 480px) {
    /* Logo adjustments */
    .logo-text-custom {
        font-size: 1rem;
    }
    
    .logo-icon-only {
        height: 24px;
    }
    
    /* Button sizes */
    .login-btn,
    .signup-btn {
        padding: 0.375rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Flag status compact */
    .flag-status-compact {
        padding: 0.5rem;
        font-size: 0.75rem;
    }
    
    .flag-emoji-small {
        font-size: 1rem;
    }
    
    /* Banner text */
    .banner-text {
        font-size: 0.875rem;
    }
    
    .banner-text strong {
        font-size: 0.8rem;
    }
    
    /* Card padding */
    .content-card {
        width: 100%;
        max-width: calc(100vw - 2rem);
        padding: 1rem;
        box-sizing: border-box;
    }
    
    /* Product cards */
    .product-card-dashboard {
        min-width: 150px;
        height: 200px;
        padding: 12px;
    }
    
    .product-name {
        font-size: 14px;
    }
    
    .product-price {
        font-size: 18px;
    }
    
    /* Event details */
    .history-event-card {
        padding: 12px;
    }
    
    /* Chat input */
    .chat-input-field {
        font-size: 13px;
        padding: 10px 14px;
    }
    
    .chat-send-btn {
        padding: 10px 18px;
        font-size: 13px;
    }
    
    /* Observance items */
    .observance-item {
        padding: 12px;
        gap: 12px;
    }
    
    .observance-day {
        font-size: 20px;
    }
    
    .observance-details h4 {
        font-size: 14px;
    }
    
    /* Notification */
    .notification {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        min-width: auto;
    }
}

/* ===== Large Desktop (1536px+) ===== */
@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
    
    .dashboard-grid {
        grid-template-columns: 350px 1fr 400px;
        gap: 32px;
        padding: 32px;
    }
    
    .content-card {
        padding: 2.5rem;
    }
    
    .card-title {
        font-size: 1.75rem;
    }
}

/* ===== Ultra Wide (1920px+) ===== */
@media (min-width: 1920px) {
    .container {
        max-width: 1800px;
    }
    
    .dashboard-grid {
        grid-template-columns: 400px 1fr 450px;
    }
}

/* ===== Mobile Landscape ===== */
@media (max-height: 600px) and (orientation: landscape) {
    header {
        height: 60px;
    }
    
    .flag-status-banner {
        top: 60px;
    }
    
    .dashboard-grid {
        padding-top: 120px;
    }
    
    .chat-container-dashboard {
        height: 350px;
    }
}

/* ===== Tablet Portrait ===== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .content-card {
        max-width: 700px;
        margin: 0 auto;
    }
}

/* ===== High DPI Screens ===== */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    /* Sharper borders for retina */
    .content-card,
    .widget {
        border-width: 0.5px;
    }
    
    /* Crisper shadows */
    .content-card {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    }
}

/* ===== Hover Media Query (Desktop with mouse) ===== */
@media (hover: hover) and (pointer: fine) {
    /* Enable hover effects only on devices with hover capability */
    .content-card:hover {
        transform: translateY(-2px);
    }
    
    .nav-link:hover::after {
        width: 100%;
    }
    
    .product-card:hover {
        transform: translateY(-4px);
    }
}

/* ===== Touch Devices ===== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    button,
    .btn,
    .nav-link {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects */
    .content-card:hover {
        transform: none;
    }
    
    /* Add active states instead */
    .content-card:active {
        transform: scale(0.98);
    }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/* ===== Print Styles ===== */
@media print {
    /* Hide non-essential elements */
    header,
    footer,
    .flag-status-banner,
    .chat-widget,
    .shop-section,
    .mobile-menu-toggle,
    .theme-toggle,
    .auth-section {
        display: none !important;
    }
    
    /* Adjust layout for print */
    .dashboard-grid {
        display: block;
    }
    
    .content-card {
        page-break-inside: avoid;
        border: 1px solid #ddd;
        box-shadow: none;
        margin-bottom: 1rem;
    }
    
    /* Reset colors for print */
    body {
        background: white;
        color: black;
    }
    
    .text-primary {
        color: black;
    }
    
    .text-secondary,
    .text-muted {
        color: #666;
    }
    
    /* Show URLs for links */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* ===== Responsive Utilities ===== */

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 1024px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
.mobile-only {
    display: none !important;
}

@media (max-width: 767px) {
    .mobile-only {
        display: block !important;
    }
    
    /* Mobile fullscreen chat */
    .chat-widget.mobile-fullscreen {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 60px; /* Space for bottom nav */
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100vh - 60px) !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        z-index: 999;
        background: var(--bg-darker);
    }
    
    .chat-widget.mobile-fullscreen .chat-header {
        border-radius: 0;
        padding: 1rem;
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--glass);
        backdrop-filter: blur(20px);
    }
    
    .chat-widget.mobile-fullscreen .chat-messages {
        height: calc(100vh - 240px);
        padding: 1rem;
    }
    
    .chat-widget.mobile-fullscreen .chat-input-container {
        position: fixed;
        bottom: 60px;
        left: 0;
        right: 0;
        padding: 1rem;
        background: var(--glass);
        backdrop-filter: blur(20px);
        border-top: 1px solid var(--glass-border);
    }
    
    .chat-widget.mobile-fullscreen .quick-actions {
        padding: 0.5rem 1rem;
        background: var(--bg-darker);
    }
    
    /* Mobile Menu Modal Styles */
    .mobile-menu-modal {
        z-index: 10000;
    }
    
    .mobile-menu-content {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 85vh;
        background: var(--glass);
        backdrop-filter: blur(20px);
        border-radius: 20px 20px 0 0;
        animation: slideUp 0.3s ease;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
    
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem;
        border-bottom: 1px solid var(--glass-border);
        background: rgba(255, 255, 255, 0.05);
    }
    
    .mobile-menu-header h2 {
        margin: 0;
        font-size: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .menu-close-btn {
        background: none;
        border: none;
        color: var(--text-primary);
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 50%;
        transition: background 0.2s;
    }
    
    .menu-close-btn:hover {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .mobile-menu-body {
        padding: 1rem;
        overflow-y: auto;
        flex: 1;
        -webkit-overflow-scrolling: touch;
        max-height: calc(85vh - 80px);
        padding-bottom: 2rem;
    }
    
    .menu-user-section {
        padding: 1rem;
        background: var(--glass);
        border-radius: 12px;
        margin-bottom: 1rem;
    }
    
    .menu-user-info {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .menu-user-info i {
        font-size: 2.5rem;
        color: var(--primary-blue);
    }
    
    .menu-user-name {
        font-weight: 600;
        font-size: 1.1rem;
    }
    
    .menu-user-email {
        color: var(--text-secondary);
        font-size: 0.9rem;
    }
    
    .menu-tier-badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.75rem;
        margin-top: 0.25rem;
        background: var(--glass-hover);
    }
    
    .menu-tier-badge.premium {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        color: black;
    }
    
    .menu-section {
        margin-bottom: 1rem;
    }
    
    .menu-item.glass-button {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 1rem;
        margin-bottom: 0.5rem;
        background: var(--glass);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        color: var(--text-primary);
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.2s;
        text-align: left;
    }
    
    .menu-item.glass-button:hover {
        background: var(--glass-hover);
        transform: translateX(4px);
    }
    
    .menu-item.glass-button i:first-child {
        margin-right: 1rem;
        font-size: 1.25rem;
    }
    
    .menu-item.glass-button i:last-child {
        margin-left: auto;
        opacity: 0.5;
    }
    
    .menu-item.glass-button.premium-cta {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.1));
        border-color: rgba(255, 215, 0, 0.3);
    }
    
    .menu-item.glass-button.premium-cta:hover {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2));
    }
}

/* Show only on tablet */
.tablet-only {
    display: none !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .tablet-only {
        display: block !important;
    }
}

/* Show only on desktop */
.desktop-only {
    display: none !important;
}

@media (min-width: 1024px) {
    .desktop-only {
        display: block !important;
    }
}

/* ===== Calendar Button and Options Menu ===== */

/* Ensure calendar button is right-aligned */
.observance-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-to-calendar-btn {
    margin-left: auto !important;
}

/* Calendar options dropdown menu */
.calendar-options-menu {
    background: rgba(30, 30, 40, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 4px;
    min-width: 180px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: fadeInUp 0.2s ease;
}

.calendar-option {
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.calendar-option:hover {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.calendar-option i {
    font-size: 14px;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Light mode calendar menu */
.light-mode .calendar-options-menu {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.light-mode .calendar-option {
    color: #374151;
}

.light-mode .calendar-option:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}/* Utility Helper Classes */

/* Display Utilities */
.hidden {
    display: none !important;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.grid {
    display: grid;
}

/* Flexbox Utilities */
.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

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

.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.justify-start {
    justify-content: flex-start;
}

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

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.flex-1 {
    flex: 1;
}

.flex-auto {
    flex: auto;
}

.flex-none {
    flex: none;
}

/* Gap Utilities */
.gap-0 {
    gap: 0;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

/* Margin Utilities */
.m-0 {
    margin: 0;
}

.m-1 {
    margin: 0.25rem;
}

.m-2 {
    margin: 0.5rem;
}

.m-3 {
    margin: 0.75rem;
}

.m-4 {
    margin: 1rem;
}

.m-5 {
    margin: 1.25rem;
}

.m-6 {
    margin: 1.5rem;
}

.m-8 {
    margin: 2rem;
}

.m-auto {
    margin: auto;
}

/* Margin Top */
.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-5 {
    margin-top: 1.25rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-8 {
    margin-top: 2rem;
}

/* Margin Bottom */
.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-5 {
    margin-bottom: 1.25rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

/* Margin Left/Right */
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Padding Utilities */
.p-0 {
    padding: 0;
}

.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

.p-5 {
    padding: 1.25rem;
}

.p-6 {
    padding: 1.5rem;
}

.p-8 {
    padding: 2rem;
}

/* Padding Top */
.pt-0 {
    padding-top: 0;
}

.pt-1 {
    padding-top: 0.25rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pt-3 {
    padding-top: 0.75rem;
}

.pt-4 {
    padding-top: 1rem;
}

.pt-5 {
    padding-top: 1.25rem;
}

.pt-6 {
    padding-top: 1.5rem;
}

.pt-8 {
    padding-top: 2rem;
}

/* Padding Bottom */
.pb-0 {
    padding-bottom: 0;
}

.pb-1 {
    padding-bottom: 0.25rem;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

.pb-3 {
    padding-bottom: 0.75rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pb-5 {
    padding-bottom: 1.25rem;
}

.pb-6 {
    padding-bottom: 1.5rem;
}

.pb-8 {
    padding-bottom: 2rem;
}

/* Padding X/Y */
.px-0 {
    padding-left: 0;
    padding-right: 0;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Width Utilities */
.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

.w-1\/2 {
    width: 50%;
}

.w-1\/3 {
    width: 33.333333%;
}

.w-2\/3 {
    width: 66.666667%;
}

.w-1\/4 {
    width: 25%;
}

.w-3\/4 {
    width: 75%;
}

.max-w-full {
    max-width: 100%;
}

.max-w-screen-sm {
    max-width: 640px;
}

.max-w-screen-md {
    max-width: 768px;
}

.max-w-screen-lg {
    max-width: 1024px;
}

.max-w-screen-xl {
    max-width: 1280px;
}

/* Height Utilities */
.h-full {
    height: 100%;
}

.h-auto {
    height: auto;
}

.h-screen {
    height: 100vh;
}

.min-h-screen {
    min-height: 100vh;
}

/* Position Utilities */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

.top-0 {
    top: 0;
}

.right-0 {
    right: 0;
}

.bottom-0 {
    bottom: 0;
}

.left-0 {
    left: 0;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Z-Index Utilities */
.z-0 {
    z-index: 0;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-30 {
    z-index: 30;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

/* Overflow Utilities */
.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

/* Border Radius Utilities */
.rounded-none {
    border-radius: 0;
}

.rounded-sm {
    border-radius: 0.125rem;
}

.rounded {
    border-radius: 0.25rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-3xl {
    border-radius: 1.5rem;
}

.rounded-full {
    border-radius: 9999px;
}

/* Shadow Utilities */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-none {
    box-shadow: none;
}

/* Opacity Utilities */
.opacity-0 {
    opacity: 0;
}

.opacity-25 {
    opacity: 0.25;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}

.opacity-100 {
    opacity: 1;
}

/* Cursor Utilities */
.cursor-pointer {
    cursor: pointer;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-wait {
    cursor: wait;
}

.cursor-move {
    cursor: move;
}

/* User Select Utilities */
.select-none {
    user-select: none;
}

.select-text {
    user-select: text;
}

.select-all {
    user-select: all;
}

/* Pointer Events */
.pointer-events-none {
    pointer-events: none;
}

.pointer-events-auto {
    pointer-events: auto;
}

/* Loading State */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--glass-border);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.spinner-sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.spinner-lg {
    width: 64px;
    height: 64px;
    border-width: 4px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Error State */
.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--text-primary);
    padding: 1rem;
    border-radius: var(--button-radius);
    text-align: center;
    margin-top: 1rem;
}

/* Success State */
.success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--text-primary);
    padding: 1rem;
    border-radius: var(--button-radius);
    text-align: center;
    margin-top: 1rem;
}

/* Warning State */
.warning {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: var(--text-primary);
    padding: 1rem;
    border-radius: var(--button-radius);
    text-align: center;
    margin-top: 1rem;
}

/* Info State */
.info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--text-primary);
    padding: 1rem;
    border-radius: var(--button-radius);
    text-align: center;
    margin-top: 1rem;
}

/* Animations on Scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

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

/* Truncate Text */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Line Clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Aspect Ratio */
.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Container */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

/* Divider */
.divider {
    height: 1px;
    background: var(--glass-border);
    margin: 2rem 0;
}

.divider-vertical {
    width: 1px;
    height: 100%;
    background: var(--glass-border);
    margin: 0 1rem;
}

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--glass);
    border: 1px solid var(--glass-border);
}

.badge-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: var(--success-green);
}

.badge-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--primary-red);
}

.badge-warning {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
    color: var(--accent-gold);
}

.badge-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--primary-blue);
}

/* Accessibility */
.focus-visible:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

.focus-within:focus-within {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Print Utilities */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
}

.print-only {
    display: none;
}