:root {
    /* Base Colors */
    --bg-deep: #050510;
    --accent-purple: #9d50bb;
    --accent-violet: #6e48aa;
    --text-main: #e0e0e0;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);

    /* Western Theme (Default) */
    --western-primary: #6366f1;
    --western-secondary: #8b5cf6;
    --western-accent: #a78bfa;
    --western-bg: radial-gradient(circle at center, #1a1a3a 0%, #050510 100%);
    --western-pattern: url('images/stardust.png');

    /* Vedic Theme */
    --vedic-primary: #f59e0b;
    --vedic-secondary: #d97706;
    --vedic-accent: #fbbf24;
    --vedic-bg: radial-gradient(circle at center, #3a1f0a 0%, #1a0a00 100%);
    /*--vedic-pattern: url('https://www.transparenttextures.com/patterns/mandala.png');*/

    /* Current Theme (defaults to Western) */
    --theme-primary: var(--western-primary);
    --theme-secondary: var(--western-secondary);
    --theme-accent: var(--western-accent);
    --theme-bg: var(--western-bg);
    --theme-pattern: var(--western-pattern);
    /* High Contrast Text */
    --text-high-contrast: #ffffff;
    --text-gold: #fbbf24;
    --text-muted: #94a3b8;
}

/* Cross-browser compatibility */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
    -webkit-scroll-behavior: smooth;
}

body {
    background-color: var(--bg-deep);
    background: var(--theme-bg);
    color: var(--text-main);
    overflow-x: hidden;
    line-height: 1.6;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    padding-bottom: 200px;
    /* Space for fixed footer */
}

/* Base Report Styles */
.report-section {
    page-break-inside: avoid;
    margin-bottom: 3rem;
    position: relative;
    /* Ensure z-index works for sticky headers if needed */
}

/* Sticky Action Bar */
.sticky-action-bar {
    position: sticky;
    top: 5rem;
    /* Adjust based on header height */
    z-index: 40;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    transition: all 0.3s ease;
}

/* Focus Mode (formerly Reading Mode) - Dark Simplified */
body.reading-mode {
    background: #0f0f1a !important;
    background-image: none !important;
}

body.reading-mode .stars,
body.reading-mode .nebula,
body.reading-mode::before {
    display: none !important;
}

body.reading-mode .glass-card {
    background: rgba(20, 20, 35, 0.95) !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: none !important;
}

body.reading-mode .report-section {
    background: transparent !important;
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.reading-mode h1,
body.reading-mode h2,
body.reading-mode h3 {
    color: #e2e8f0 !important;
    text-shadow: none !important;
}

body.reading-mode p,
body.reading-mode li {
    color: #cbd5e1 !important;
    line-height: 1.8 !important;
}

/* Typography Improvements for Report */
.report-heading-primary {
    color: var(--text-gold);
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
    font-weight: 700;
}

.report-heading-secondary {
    color: var(--text-high-contrast);
    font-weight: 600;
}

/* Progress Bar Enhanced */
.progress-container-enhanced {
    height: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary));
    border-radius: 9999px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px var(--theme-primary);
}

/* Fixed Footer Styling */
footer {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 40;
    width: 100%;
    margin-top: 0 !important;
}


/* Home Page Background Image - CRITICAL: Must override body and theme backgrounds */
body.home-page-background {
    background: url('images/mystical-astrology-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
    position: relative;
}

/* Overlay to ensure text readability while preserving the mystical atmosphere */
body.home-page-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(5, 5, 16, 0.6) 0%,
            rgba(5, 5, 16, 0.65) 50%,
            rgba(5, 5, 16, 0.7) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Ensure content is above the overlay */
body.home-page-background>* {
    position: relative;
    z-index: 2;
}

#header-container {
    z-index: 100 !important;
    position: relative;
}

body.home-page-background .stars,
body.home-page-background .nebula {
    z-index: 0;
    opacity: 0.15;
}

/* Enhance hero section on home page for better visibility */
body.home-page-background .hero {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(157, 80, 187, 0.3);
}

/* Enhance glass cards on home page */
body.home-page-background .glass-card {
    background: rgba(15, 15, 30, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(157, 80, 187, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.6);
}

body.theme-vedic.home-page-background .glass-card {
    border: 1px solid rgba(245, 158, 11, 0.3);
}

body.theme-vedic.home-page-background .glass-card {
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Palmistry Page Background Image */
body.palmistry-page-background {
    background: url('images/pamistry-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
    position: relative;
}

/* Overlay for palmistry page text readability */
body.palmistry-page-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(5, 5, 16, 0.6) 0%,
            rgba(5, 5, 16, 0.65) 50%,
            rgba(5, 5, 16, 0.7) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Ensure content is above the overlay on palmistry page */
body.palmistry-page-background>* {
    position: relative;
    z-index: 2;
}

body.palmistry-page-background .stars,
body.palmistry-page-background .nebula {
    z-index: 0;
    opacity: 0.15;
}

/* Enhance glass cards on palmistry page */
body.palmistry-page-background .glass-card {
    background: rgba(15, 15, 30, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(157, 80, 187, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.6);
}

body.theme-vedic.palmistry-page-background .glass-card {
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Override theme background on palmistry page - must come after theme classes */
body.palmistry-page-background.theme-western,
body.palmistry-page-background.theme-vedic {
    background: url('images/pamistry-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
}

/* Theme Classes */
body.theme-western {
    --theme-primary: var(--western-primary);
    --theme-secondary: var(--western-secondary);
    --theme-accent: var(--western-accent);
    --theme-bg: var(--western-bg);
    --theme-pattern: var(--western-pattern);
}

body.theme-vedic {
    --theme-primary: var(--vedic-primary);
    --theme-secondary: var(--vedic-secondary);
    --theme-accent: var(--vedic-accent);
    --theme-bg: var(--vedic-bg);
    --theme-pattern: var(--vedic-pattern);
}

/* Override theme background on home page - must come after theme classes */
body.home-page-background.theme-western,
body.home-page-background.theme-vedic {
    background: url('images/mystical-astrology-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
}

/* Dashboard Page Background Image */
body.dashboard-page-background {
    background: url('images/dashboard-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
    position: relative;
}

body.dashboard-page-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(5, 5, 16, 0.6) 0%,
            rgba(5, 5, 16, 0.65) 50%,
            rgba(5, 5, 16, 0.7) 100%);
    z-index: 1;
    pointer-events: none;
}

body.dashboard-page-background>* {
    position: relative;
    z-index: 2;
}

body.dashboard-page-background .stars,
body.dashboard-page-background .nebula {
    z-index: 0;
    opacity: 0.15;
}

body.dashboard-page-background .glass-card {
    background: rgba(15, 15, 30, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(157, 80, 187, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.6);
}

body.dashboard-page-background.theme-western,
body.dashboard-page-background.theme-vedic {
    background: url('images/dashboard-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
}

/* Horoscope Page Background Image */
body.horoscope-page-background {
    background: url('images/horoscope-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
    position: relative;
}

body.horoscope-page-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 5, 16, 0.7);
    pointer-events: none;
}

body.horoscope-page-background>* {
    position: relative;
    z-index: 2;
}

body.horoscope-page-background .stars,
body.horoscope-page-background .nebula {
    z-index: 0;
    opacity: 0.15;
}

body.horoscope-page-background .glass-card {
    background: rgba(15, 15, 30, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

body.horoscope-page-background.theme-western,
body.horoscope-page-background.theme-vedic {
    background: url('images/horoscope-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
}

/* Ask Oracle Page Background Image */
body.ask-oracle-page-background {
    background: url('images/horoscope-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
    position: relative;
}

body.ask-oracle-page-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 5, 16, 0.7);
    pointer-events: none;
}

body.ask-oracle-page-background>* {
    position: relative;
    z-index: 2;
}

body.ask-oracle-page-background .stars,
body.ask-oracle-page-background .nebula {
    z-index: 0;
    opacity: 0.15;
}

body.ask-oracle-page-background .glass-card {
    background: rgba(15, 15, 30, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

body.ask-oracle-page-background.theme-western,
body.ask-oracle-page-background.theme-vedic {
    background: url('images/horoscope-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
}

/* Time Machine Page Background Image */
body.timemachine-page-background {
    background: url('images/timemachine-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
    position: relative;
}

body.timemachine-page-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(5, 5, 16, 0.6) 0%,
            rgba(5, 5, 16, 0.65) 50%,
            rgba(5, 5, 16, 0.7) 100%);
    z-index: 1;
    pointer-events: none;
}

body.timemachine-page-background>* {
    position: relative;
    z-index: 2;
}

/* Oracle Chatbot Error Styles */
.oracle-message .error-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 0.5rem;
    margin: 0.5rem 0;
}

.oracle-message .error-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.oracle-message .error-message p {
    margin: 0.25rem 0;
    color: #fca5a5;
}

.oracle-message .error-message strong {
    color: #f87171;
}

.oracle-message .error-suggestion {
    font-size: 0.875rem;
    font-style: italic;
    color: #d1d5db;
}

.oracle-message .message-actions {
    margin-top: 1rem;
    text-align: right;
}

.oracle-message .btn-secondary {
    background: rgba(107, 114, 128, 0.2);
    color: #d1d5db;
    border: 1px solid rgba(107, 114, 128, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
}

.oracle-message .btn-secondary:hover {
    background: rgba(107, 114, 128, 0.3);
    color: #f3f4f6;
}

body.timemachine-page-background .stars,
body.timemachine-page-background .nebula {
    z-index: 0;
    opacity: 0.15;
}

body.timemachine-page-background .glass-card {
    background: rgba(15, 15, 30, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(157, 80, 187, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.6);
}

body.timemachine-page-background.theme-western,
body.timemachine-page-background.theme-vedic {
    background: url('images/timemachine-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
}

/* History Page Background Image */
body.history-page-background {
    background: url('images/history-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
    position: relative;
}

body.history-page-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(5, 5, 16, 0.6) 0%,
            rgba(5, 5, 16, 0.65) 50%,
            rgba(5, 5, 16, 0.7) 100%);
    z-index: 1;
    pointer-events: none;
}

body.history-page-background>* {
    position: relative;
    z-index: 2;
}

body.history-page-background .stars,
body.history-page-background .nebula {
    z-index: 0;
    opacity: 0.15;
}

body.history-page-background .glass-card {
    background: rgba(15, 15, 30, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(157, 80, 187, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.6);
}

body.history-page-background.theme-western,
body.history-page-background.theme-vedic {
    background: url('images/history-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
}

/* Compatibility Page Background Image */
body.compatibility-page-background {
    background: url('images/compatibility-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
    position: relative;
}

body.compatibility-page-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(5, 5, 16, 0.6) 0%,
            rgba(5, 5, 16, 0.65) 50%,
            rgba(5, 5, 16, 0.7) 100%);
    z-index: 1;
    pointer-events: none;
}

body.compatibility-page-background>* {
    position: relative;
    z-index: 2;
}

body.compatibility-page-background .stars,
body.compatibility-page-background .nebula {
    z-index: 0;
    opacity: 0.15;
}

body.compatibility-page-background .glass-card {
    background: rgba(15, 15, 30, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(157, 80, 187, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.6);
}

/* Dashboard Heading Enhancement */
body.dashboard-page-background section h2 {
    position: relative !important;
    margin-top: -2rem !important;
    margin-bottom: 3rem !important;
    padding: 1.5rem 2rem !important;
    background: rgba(5, 5, 16, 0.75) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-radius: 1rem !important;
    display: inline-block !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 30px rgba(157, 80, 187, 0.3) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(157, 80, 187, 0.5) !important;
    font-weight: 700 !important;
    border: 1px solid rgba(157, 80, 187, 0.3) !important;
}

body.compatibility-page-background.theme-western,
body.compatibility-page-background.theme-vedic {
    background: url('images/compatibility-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
}

/* Numerology Page Background */
body.numerology-page-background {
    background: url('images/numerology-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
    position: relative;
}

/* Overlay for numerology page text readability */
body.numerology-page-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(5, 5, 16, 0.6) 0%,
            rgba(5, 5, 16, 0.65) 50%,
            rgba(5, 5, 16, 0.7) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Ensure content is above the overlay on numerology page */
body.numerology-page-background>* {
    position: relative;
    z-index: 2;
}

body.numerology-page-background .stars,
body.numerology-page-background .nebula {
    z-index: 0;
    opacity: 0.15;
}

/* Enhance glass cards on numerology page */
body.numerology-page-background .glass-card {
    background: rgba(15, 15, 30, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(99, 102, 241, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.6);
}

body.theme-vedic.numerology-page-background .glass-card {
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Override theme background on numerology page - must come after theme classes */
body.numerology-page-background.theme-western,
body.numerology-page-background.theme-vedic {
    background: url('images/numerology-background.png') center center / cover no-repeat fixed !important;
    background-color: var(--bg-deep) !important;
}

/* Starfield Effect - Western */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent var(--theme-pattern) repeat;
    z-index: 0;
    opacity: 0.3;
    pointer-events: none;
}

/* Nebula Effect - Western */
.nebula {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 40%);
    filter: blur(100px);
    -webkit-filter: blur(100px);
    z-index: -1;
    animation: nebulaMove 20s infinite alternate ease-in-out;
    pointer-events: none;
}

/* Vedic Mandala Overlay */
body.theme-vedic .nebula {
    background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(217, 119, 6, 0.1) 0%, transparent 40%);
    opacity: 0.6;
}

@keyframes nebulaMove {
    from {
        transform: translate(0, 0) rotate(0deg);
        -webkit-transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(50px, 50px) rotate(5deg);
        -webkit-transform: translate(50px, 50px) rotate(5deg);
    }
}

/* Glassmorphism with Cross-browser Support */
.glass-nav {
    background: rgba(5, 5, 16, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    z-index: 100;
    overflow: visible;
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    -webkit-transition: transform 0.3s ease, box-shadow 0.3s ease;
    -moz-transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Enhanced contrast for better readability */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Enhanced glass card titles for better readability */
.glass-card h3,
.glass-card h2,
.glass-card h1 {
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.glass-card:hover {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(157, 80, 187, 0.2);
}

/* Typography & Effects */
.text-glow {
    text-shadow: 0 0 10px rgba(157, 80, 187, 0.8), 0 0 20px rgba(157, 80, 187, 0.4);
}

body.theme-vedic .text-glow {
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.8), 0 0 20px rgba(217, 119, 6, 0.4);
}

.text-gradient {
    background: linear-gradient(to right, var(--theme-primary), var(--theme-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--theme-primary);
    /* Fallback for older browsers */
}

/* Buttons */
.badge-ambiguity {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #ffc107;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    animation: pulse-amber 2s infinite;
    -webkit-animation: pulse-amber 2s infinite;
}

@keyframes pulse-amber {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

.btn-premium {
    background: linear-gradient(to right, var(--theme-primary), var(--theme-secondary));
    color: white;
    padding: 12px 28px;
    border-radius: 50px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 44px;
    /* Touch target size */
}

body.theme-vedic .btn-premium {
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.btn-premium:hover,
.btn-premium:focus {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
    outline: none;
}

body.theme-vedic .btn-premium:hover,
body.theme-vedic .btn-premium:focus {
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

.btn-premium:active {
    transform: scale(0.98);
    -webkit-transform: scale(0.98);
}

.btn-primary {
    background: white;
    color: var(--bg-deep);
    padding: 14px 32px;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #f0f0f0;
    transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    outline: none;
}

.btn-secondary {
    background: transparent;
    color: white;
    padding: 14px 32px;
    border-radius: 12px;
    border: 2px solid var(--glass-border);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--glass-bg);
    border-color: white;
    outline: none;
}

/* Animations */
.animate-float {
    animation: float 6s infinite ease-in-out;
    -webkit-animation: float 6s infinite ease-in-out;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.hand-pulse {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(157, 80, 187, 0.4);
    animation: pulse 3s infinite;
    -webkit-animation: pulse 3s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(157, 80, 187, 0.4);
    }

    70% {
        box-shadow: 0 0 0 30px rgba(157, 80, 187, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(157, 80, 187, 0);
    }
}

body.theme-vedic .hand-pulse {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    animation: pulse-vedic 3s infinite;
    -webkit-animation: pulse-vedic 3s infinite;
}

@keyframes pulse-vedic {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }

    70% {
        box-shadow: 0 0 0 30px rgba(245, 158, 11, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

.fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
}

#palm-results,
#horoscope-results,
#alignment {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .glass-nav {
        padding: 1rem;
    }

    .glass-nav nav ul {
        flex-direction: column;
        gap: 0.5rem;
        display: none;
        /* Hidden by default on mobile */
    }

    .glass-nav nav ul.mobile-open {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(5, 5, 16, 0.95);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        padding: 1rem;
        border-top: 1px solid var(--glass-border);
    }

    /* Mobile Menu Toggle */
    .mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.5rem;
    }

    section {
        padding: 2rem 1rem !important;
    }

    .hero h1 {
        font-size: 2.5rem !important;
        line-height: 1.2;
    }

    .glass-card {
        padding: 1rem !important;
    }

    .btn-premium,
    .btn-primary,
    .btn-secondary {
        width: 100%;
        padding: 14px 24px;
        margin-bottom: 0.5rem;
    }

    /* Grid adjustments for mobile */
    .grid {
        grid-template-columns: 1fr !important;
    }

    /* Chat widget mobile */
    #oracle-chat {
        width: calc(100% - 2rem) !important;
        right: 1rem !important;
        left: 1rem !important;
    }
}

/* Oracle Chatbot Revamped Styles */
#oracle-chat.expanded {
    max-height: 600px !important;
}

.oracle-view {
    min-height: 400px;
}

.domains-grid,
.questions-list {
    max-height: 400px;
    overflow-y: auto;
}

.domain-card,
.question-card {
    transition: all 0.2s ease;
}

.domain-card:hover,
.question-card:hover {
    transform: translateX(4px);
}

.breadcrumb {
    color: rgba(255, 255, 255, 0.6);
}

.breadcrumb button {
    cursor: pointer;
    transition: color 0.2s;
}

.breadcrumb button:hover {
    color: var(--theme-primary);
}

/* Badge Styles */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-success {
    background-color: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-warning {
    background-color: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.badge-info {
    background-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-error {
    background-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-high-frequency {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 700;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Loading Spinner */
.spinner {
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid var(--theme-primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

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

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

.error-state {
    border-radius: 8px;
}

/* Answer Content Styling */
.answer-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-top: 0.5rem;
}

.answer-content li {
    margin-top: 0.25rem;
}

.future-windows,
.past-windows {
    margin-top: 1rem;
}

.question-header h4 {
    word-wrap: break-word;
}

/* Scrollbar Styling for Oracle Chat */
#chat-history::-webkit-scrollbar {
    width: 6px;
}

#chat-history::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

#chat-history::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

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

@media (max-width: 480px) {
    .hero h1 {
        font-size: 2rem !important;
    }

    .hero p {
        font-size: 0.9rem !important;
    }

    section {
        padding: 1.5rem 0.75rem !important;
    }
}

/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
    section {
        padding: 3rem 2rem !important;
    }

    .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Desktop Enhancements */
@media (min-width: 1025px) {
    .glass-card:hover {
        transform: translateY(-10px) scale(1.02);
        -webkit-transform: translateY(-10px) scale(1.02);
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {

    .btn-premium,
    .btn-primary,
    .btn-secondary {
        min-height: 48px;
        font-size: 16px;
        /* Prevents zoom on iOS */
    }

    input,
    select,
    textarea {
        font-size: 16px;
        /* Prevents zoom on iOS */
    }
}

/* Safari-specific select dropdown fixes */
/* Remove default Safari styling and ensure consistent padding */
select {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    appearance: none;
    /* Safari-specific padding fixes - must use both standard and webkit properties */
    /* Important flags ensure Tailwind classes don't override Safari fixes */
    -webkit-padding-start: 12px !important;
    -webkit-padding-end: 32px !important;
    padding-left: 12px !important;
    padding-right: 32px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    /* Ensure proper height and line-height for Safari */
    height: auto;
    min-height: 48px;
    line-height: 1.5;
    /* Fix text positioning in Safari */
    vertical-align: middle;
    /* Custom dropdown arrow for consistent styling across browsers */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 16px 16px !important;
}

/* Safari-specific padding for different select sizes with Tailwind classes */
/* These rules ensure padding works even when Tailwind classes are applied */
select.p-2 {
    -webkit-padding-start: 8px !important;
    -webkit-padding-end: 24px !important;
    padding-left: 8px !important;
    padding-right: 24px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 40px;
}

select.p-3,
select[class*="p-3"] {
    -webkit-padding-start: 12px !important;
    -webkit-padding-end: 32px !important;
    padding-left: 12px !important;
    padding-right: 32px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    min-height: 48px;
}

/* Safari-specific option styling */
select option {
    padding: 12px;
    background-color: rgba(5, 5, 16, 0.95);
    color: #ffffff;
}

/* Ensure select maintains padding on focus in Safari */
select:focus {
    -webkit-padding-start: 12px !important;
    -webkit-padding-end: 32px !important;
    padding-left: 12px !important;
    padding-right: 32px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

@media (max-width: 768px) {
    select {
        /* Ensure consistent padding on mobile Safari */
        -webkit-padding-start: 12px !important;
        -webkit-padding-end: 32px !important;
        padding-left: 12px !important;
        padding-right: 32px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        min-height: 44px; /* iOS touch target minimum */
    }

    .glass-card:hover {
        transform: none;
        /* Disable hover effects on touch */
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        -webkit-animation-duration: 0.01ms !important;
        -webkit-transition-duration: 0.01ms !important;
    }
}

/* Focus States for Accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

/* Print Styles */
@media print {

    .stars,
    .nebula,
    .glass-nav,
    #oracle-chat,
    button {
        display: none;
    }

    body {
        background: white;
        color: black;
    }
}

/* Vedic Theme Specific Styles */
body.theme-vedic {
    background: var(--vedic-bg);
}

body.theme-vedic .glass-card {
    border-color: rgba(245, 158, 11, 0.2);
}

body.theme-vedic .glass-nav {
    border-bottom-color: rgba(245, 158, 11, 0.3);
}

/* Account Menu Dropdown - CSS Only Solution */
.account-menu-wrapper {
    position: relative;
    overflow: visible;
}

#account-menu-container {
    overflow: visible !important;
}

/* Ensure header and its flex containers don't clip dropdowns */
#main-header,
#main-header > div:last-child {
    overflow: visible !important;
}

/* Account dropdown positioning - ensure it's not clipped */
.account-dropdown {
    position: absolute !important;
    right: 0;
    margin-top: 0.5rem;
    min-width: 12rem;
    max-width: 20rem;
}

/* Hide dropdown by default - but only if wrapper is not hidden */
.account-menu-wrapper:not(.hidden) .account-dropdown {
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

/* Show dropdown on hover or when parent has .active class */
.account-menu-wrapper:not(.hidden):hover .account-dropdown,
.account-menu-wrapper:not(.hidden):focus-within .account-dropdown,
#account-menu-container.active .account-dropdown {
    display: block !important;
    opacity: 1;
    visibility: visible;
    /*transform: translateY(0);*/
    pointer-events: auto;
}

/* Ensure links are clickable */
.account-dropdown a {
    display: block;
    text-decoration: none;
    color: white;
    cursor: pointer;
    pointer-events: auto;
}

/* Keep dropdown visible when hovering over it */
.account-dropdown:hover {
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Vedic Theme - Override hardcoded text colors */
body.theme-vedic .text-purple-400,
body.theme-vedic [class*="text-purple-400"] {
    color: var(--vedic-primary) !important;
    /* #f59e0b */
}

body.theme-vedic .hover\:text-purple-400:hover,
body.theme-vedic [class*="hover:text-purple-400"]:hover {
    color: var(--vedic-primary) !important;
}

body.theme-vedic .text-purple-300,
body.theme-vedic [class*="text-purple-300"] {
    color: var(--vedic-accent) !important;
    /* #fbbf24 */
}

body.theme-vedic .text-purple-500 {
    color: var(--vedic-secondary) !important;
    /* #d97706 */
}

/* Vedic Theme - Override hardcoded button gradients */
body.theme-vedic [class*="from-purple-600"][class*="to-blue-600"] {
    background: linear-gradient(to right, var(--vedic-primary), var(--vedic-secondary)) !important;
}

body.theme-vedic [class*="bg-gradient-to-r"][class*="from-purple-600"] {
    background: linear-gradient(to right, var(--vedic-primary), var(--vedic-secondary)) !important;
}

body.theme-vedic [class*="from-purple-600"][class*="to-pink-600"] {
    background: linear-gradient(to right, var(--vedic-primary), #ec4899) !important;
}

/* Vedic Theme - Override hardcoded purple backgrounds */
body.theme-vedic [class*="bg-purple-600"],
body.theme-vedic .bg-purple-600 {
    background-color: var(--vedic-primary) !important;
}

body.theme-vedic [class*="bg-purple-600/20"],
body.theme-vedic .bg-purple-600\/20 {
    background-color: rgba(245, 158, 11, 0.2) !important;
}

body.theme-vedic [class*="bg-purple-600/30"],
body.theme-vedic .bg-purple-600\/30 {
    background-color: rgba(245, 158, 11, 0.3) !important;
}

body.theme-vedic [class*="bg-purple-600/50"],
body.theme-vedic .bg-purple-600\/50 {
    background-color: rgba(245, 158, 11, 0.5) !important;
}

body.theme-vedic [class*="bg-purple-500/20"],
body.theme-vedic .bg-purple-500\/20 {
    background-color: rgba(245, 158, 11, 0.2) !important;
}

body.theme-vedic [class*="bg-purple-700"],
body.theme-vedic .bg-purple-700,
body.theme-vedic [class*="hover:bg-purple-700"]:hover {
    background-color: var(--vedic-secondary) !important;
    /* #d97706 */
}

body.theme-vedic [class*="hover:bg-purple-600"]:hover,
body.theme-vedic [class*="hover:bg-purple-600/50"]:hover {
    background-color: rgba(245, 158, 11, 0.5) !important;
}

/* Vedic Theme - Override border colors */
body.theme-vedic [class*="border-purple"],
body.theme-vedic .border-purple-400,
body.theme-vedic .border-purple-500 {
    border-color: var(--vedic-primary) !important;
}

body.theme-vedic [class*="focus:border-purple-500"]:focus,
body.theme-vedic .focus\:border-purple-500:focus {
    border-color: var(--vedic-primary) !important;
}

body.theme-vedic [class*="border-purple-500/30"] {
    border-color: rgba(245, 158, 11, 0.3) !important;
}

/* Theme-aware utility classes for buttons */
.btn-theme-gradient {
    background: linear-gradient(to right, var(--theme-primary), var(--theme-secondary)) !important;
    color: white;
}

.btn-theme-gradient:hover {
    background: linear-gradient(to right, var(--theme-primary), var(--theme-secondary)) !important;
    filter: brightness(1.1);
}

/* Theme-aware text color utility */
.text-theme-primary {
    color: var(--theme-primary) !important;
}

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

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

.hover\:text-theme-primary:hover {
    color: var(--theme-primary) !important;
}

/* Theme-aware border color utility */
.border-theme-primary {
    border-color: var(--theme-primary) !important;
}

.focus\:border-theme-primary:focus {
    border-color: var(--theme-primary) !important;
}

/* Theme-aware background utilities - Use [class*="bg-theme-primary"] to match any variant */
[class*="bg-theme-primary/20"] {
    background-color: rgba(99, 102, 241, 0.2) !important;
    /* Default Western */
}

body.theme-western [class*="bg-theme-primary/20"] {
    background-color: rgba(99, 102, 241, 0.2) !important;
}

body.theme-vedic [class*="bg-theme-primary/20"] {
    background-color: rgba(245, 158, 11, 0.2) !important;
}

[class*="bg-theme-primary/30"] {
    background-color: rgba(99, 102, 241, 0.3) !important;
    /* Default Western */
}

body.theme-western [class*="bg-theme-primary/30"] {
    background-color: rgba(99, 102, 241, 0.3) !important;
}

body.theme-vedic [class*="bg-theme-primary/30"] {
    background-color: rgba(245, 158, 11, 0.3) !important;
}

[class*="bg-theme-primary/50"] {
    background-color: rgba(99, 102, 241, 0.5) !important;
    /* Default Western */
}

body.theme-western [class*="bg-theme-primary/50"] {
    background-color: rgba(99, 102, 241, 0.5) !important;
}

body.theme-vedic [class*="bg-theme-primary/50"] {
    background-color: rgba(245, 158, 11, 0.5) !important;
}

/* Loading States */
.loading-spinner {
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid var(--theme-primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    -webkit-animation: spin 1s linear infinite;
    margin: 0 auto;
}

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

    100% {
        transform: rotate(360deg);
    }
}

/* Chart Type Buttons */
.chart-type-btn {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.chart-type-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(157, 80, 187, 0.5);
}

body.theme-vedic .chart-type-btn:hover {
    border-color: rgba(245, 158, 11, 0.5);
}

.chart-type-btn.bg-purple-600 {
    background: rgba(157, 80, 187, 0.6);
    border-color: rgba(157, 80, 187, 0.8);
}

body.theme-vedic .chart-type-btn.bg-purple-600 {
    background: rgba(245, 158, 11, 0.6);
    border-color: rgba(245, 158, 11, 0.8);
}

/* Chart SVG Styling */
#chart-svg-container svg {
    max-width: 100%;
    height: auto;
}

/* Tables Styling */
#planets-table table,
#houses-table table,
#aspects-table table {
    width: 100%;
    border-collapse: collapse;
}

#planets-table th,
#houses-table th,
#aspects-table th {
    background: rgba(157, 80, 187, 0.1);
    font-weight: 600;
}

body.theme-vedic #planets-table th,
body.theme-vedic #houses-table th,
body.theme-vedic #aspects-table th {
    background: rgba(245, 158, 11, 0.1);
}

/* Notifications are now integrated into account dropdown - no separate styles needed */

/* Utility Classes */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.safe-area-top {
    padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}
/* Ensure mobile menu is hidden by default (robust fix) */
.mobile-nav {
    display: none;
}

/* Flatpickr Datepicker Custom Styling for Dark Theme */
.flatpickr-calendar {
    background: rgba(5, 5, 16, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    font-family: 'Outfit', sans-serif !important;
    color: #ffffff !important;
    position: absolute !important;
    top: auto !important;
    left: auto !important;
}

.flatpickr-months {
    background: rgba(157, 80, 187, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.75rem 0 !important;
}

.flatpickr-month {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.flatpickr-current-month {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    color: #ffffff !important;
    fill: #ffffff !important;
    padding: 0.5rem !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s ease !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: rgba(157, 80, 187, 0.2) !important;
    color: #9d50bb !important;
    fill: #9d50bb !important;
}

.flatpickr-weekdays {
    background: rgba(157, 80, 187, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.flatpickr-weekday {
    color: #9d50bb !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.flatpickr-day {
    color: #ffffff !important;
    border: none !important;
    border-radius: 0.375rem !important;
    margin: 0.125rem !important;
    transition: all 0.2s ease !important;
}

.flatpickr-day:hover {
    background: rgba(157, 80, 187, 0.2) !important;
    border-color: rgba(157, 80, 187, 0.5) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: linear-gradient(135deg, #9d50bb 0%, #6e48aa 100%) !important;
    border-color: #9d50bb !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.flatpickr-day.today {
    border: 1px solid #9d50bb !important;
    color: #ffffff !important;
}

.flatpickr-day.today:hover {
    background: rgba(157, 80, 187, 0.3) !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(255, 255, 255, 0.3) !important;
    opacity: 0.5 !important;
}

.flatpickr-day.flatpickr-disabled:hover {
    background: transparent !important;
    cursor: not-allowed !important;
}

.flatpickr-day.inRange {
    background: rgba(157, 80, 187, 0.1) !important;
    box-shadow: -5px 0 0 rgba(157, 80, 187, 0.1), 5px 0 0 rgba(157, 80, 187, 0.1) !important;
}

.flatpickr-time {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(5, 5, 16, 0.95) !important;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator {
    color: #ffffff !important;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
    background: rgba(157, 80, 187, 0.2) !important;
}

/* Input field styling */
.datepicker-input.flatpickr-input {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem !important;
}

.datepicker-input.flatpickr-input:focus {
    border-color: #9d50bb !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(157, 80, 187, 0.2) !important;
}

.datepicker-input.flatpickr-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Calendar arrow styling */
.flatpickr-arrow {
    border-color: #ffffff transparent transparent transparent !important;
}

.flatpickr-prev-month:hover .flatpickr-arrow,
.flatpickr-next-month:hover .flatpickr-arrow {
    border-color: #9d50bb transparent transparent transparent !important;
}

/* Ensure calendar appears above modals and other overlays */
.flatpickr-calendar {
    display: none;
    position: absolute !important;
}

.flatpickr-calendar.open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10000 !important;
    position: absolute !important;
}

/* Fix calendar positioning - let Flatpickr handle positioning */
.flatpickr-calendar.animate.open {
    opacity: 1 !important;
    transform: translateY(0) !important;
    position: absolute !important;
}

/* Ensure calendar is positioned relative to input, not body */
.flatpickr-input[readonly] {
    cursor: pointer;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .flatpickr-calendar {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .flatpickr-days {
        width: 100% !important;
    }
    
    .flatpickr-day {
        width: calc(14.28% - 0.25rem) !important;
        height: 2.5rem !important;
        line-height: 2.5rem !important;
    }
}