/* Base Styles */
:root {
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
}

/* Senior Mode Overrides */
body.senior-mode {
    --font-size-base: 140%;
    --font-size-lg: 150%;
    --font-size-xl: 170%;
    --font-size-2xl: 180%;
}

body {
    font-family: 'Poppins', 'Mukta Malar', sans-serif;
    background: #5C0F0E;
    background-image: url('../assests/bg.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
}

/* Mobile Frame - Mobile First Approach */
.app-frame {
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    /* Dynamic viewport height for mobile browsers */
    background: transparent;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (min-width: 450px) {
    .app-frame {
        max-width: 400px;
        height: 850px;
        border-radius: 40px;
        border: 8px solid #333;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    }
}

/* Dark Mode Default for App Content */
.app-content {
    background: transparent !important;
    color: #1f2937;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    scroll-behavior: smooth;
    z-index: 1;
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0));
    -webkit-overflow-scrolling: touch;
}

/* Force show background through all cards and sections */
.app-content .bg-white,
.app-content .bg-gray-50,
.app-content .bg-gray-100,
.app-content .dark\:bg-dark-card,
.app-content .dark\:bg-dark-bg {
    background-color: rgba(246, 233, 214, 0.4) !important;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1.5px solid rgba(212, 162, 74, 0.4) !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
    border-radius: 2rem;
}

.dark .app-content {
    background: transparent !important;
    color: #f3f4f6;
}

/* Navigation */
.nav-bar {
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid #e5e7eb;
    height: 70px;
    min-height: 70px;
    width: 100%;
    position: fixed;
    /* Fixed to viewport bottom */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    pointer-events: auto !important;
    padding-bottom: env(safe-area-inset-bottom, 0);
    /* Safe area for mobile notches */
}

@media (min-width: 450px) {
    .nav-bar {
        position: absolute;
        /* Desktop uses absolute within frame */
        left: 0;
        right: auto;
        width: 100%;
    }
}

.dark .nav-bar {
    background: rgba(45, 10, 0, 0.95);
    border-top: 1px solid #5C1F00;
    color: #f3f4f6;
}

.nav-item.active {
    color: #ea580c !important;
}

.nav-item {
    cursor: pointer;
    position: relative;
    z-index: 10000;
    /* Super high */
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto !important;
    transition: all 0.2s ease;
}

.nav-item:hover {
    transform: translateY(-2px);
}

/* Hide Scrollbar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Page Sections */
.page-section {
    min-height: calc(100vh - 140px);
    padding-bottom: 20px;
}

.page-section.hidden {
    display: none !important;
}

/* Japam Animations */
.japam-bead {
    border: 4px solid #f97316;
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.japam-bead:active {
    transform: scale(0.95);
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
}

.sound-wave-bar {
    width: 4px;
    background-color: #f97316;
    border-radius: 99px;
    animation: none;
    height: 4px;
}

.listening .sound-wave-bar {
    animation: wave 0.8s ease-in-out infinite;
}

.listening .sound-wave-bar:nth-child(1) {
    animation-duration: 0.6s;
}

.listening .sound-wave-bar:nth-child(2) {
    animation-duration: 0.9s;
}

.listening .sound-wave-bar:nth-child(3) {
    animation-duration: 0.7s;
}

.listening .sound-wave-bar:nth-child(4) {
    animation-duration: 0.5s;
}

.listening .sound-wave-bar:nth-child(5) {
    animation-duration: 0.8s;
}

/* Senior Mode Specifics */
.senior-mode .text-xs {
    font-size: 14px !important;
}

.senior-mode .text-sm {
    font-size: 16px !important;
}

.senior-mode .text-base {
    font-size: 18px !important;
}

.senior-mode .text-lg {
    font-size: 20px !important;
}

.senior-mode .text-xl {
    font-size: 24px !important;
}

.senior-mode .text-2xl {
    font-size: 28px !important;
}

.senior-mode .btn-icon {
    width: 48px;
    height: 48px;
}

.senior-mode .card {
    border: 2px solid #ccc;
    box-shadow: none;
}

.senior-only {
    display: none;
}

.senior-mode .senior-only {
    display: block !important;
}

/* Mobile Responsive Utilities */
@media (max-width: 449px) {

    /* Ensure proper touch targets on mobile */
    button,
    .btn,
    .nav-item {
        min-height: 44px;
        min-width: 44px;
    }

    /* Prevent horizontal scroll */
    body,
    html {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Better text wrapping on mobile */
    h1,
    h2,
    h3 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Responsive images */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Better grid spacing on mobile */
    .grid {
        gap: 0.75rem !important;
    }

    /* Adjust padding for mobile screens */
    .px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Smaller font sizes for very small screens */
    @media (max-width: 360px) {
        .text-2xl {
            font-size: 1.25rem !important;
        }

        .text-xl {
            font-size: 1.125rem !important;
        }
    }
}

/* Japam Module Styles */
.mode-btn,
.mantra-btn,
.target-btn,
.voice-btn {
    @apply flex-shrink-0 px-4 py-2 rounded-full text-xs font-bold border transition-all duration-200;
    @apply bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300;
    @apply border-gray-200 dark:border-gray-700 hover:shadow-md;
}

.mode-btn.active,
.mantra-btn.active,
.target-btn.active,
.voice-btn.active {
    @apply bg-saffron-500 text-white border-saffron-500 shadow-md;
}

.control-btn {
    @apply bg-white/5 backdrop-blur-sm border border-white/10;
    @apply rounded-2xl p-4 flex flex-col items-center gap-2 hover:shadow-lg transition;
    @apply text-xs font-medium text-white;
}

/* Japamala Beads */
.bead {
    @apply w-12 h-12 rounded-full border-2 border-amber-300 dark:border-amber-700;
    @apply bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center;
    @apply text-xs font-bold text-amber-800 dark:text-amber-200;
    @apply transition-all duration-300 mb-2;
}

.bead.completed {
    @apply bg-saffron-500 border-saffron-600 text-white shadow-md;
}

.bead.current {
    @apply bg-saffron-400 border-saffron-500 text-white shadow-lg scale-110;
    animation: pulse 1s ease-in-out infinite;
}

.bead.guru-bead {
    @apply w-16 h-16 bg-gradient-to-br from-gold-400 to-gold-500;
    @apply border-gold-600 text-white shadow-xl;
}

/* Sound Wave Animation */
.sound-wave-bar {
    @apply w-1 bg-saffron-500 rounded-full transition-all duration-300;
}

.listening .sound-wave-bar {
    animation: wave 0.8s ease-in-out infinite;
}

.listening .sound-wave-bar:nth-child(1) {
    animation-delay: 0s;
}

.listening .sound-wave-bar:nth-child(2) {
    animation-delay: 0.1s;
}

.listening .sound-wave-bar:nth-child(3) {
    animation-delay: 0.2s;
}

.listening .sound-wave-bar:nth-child(4) {
    animation-delay: 0.3s;
}

.listening .sound-wave-bar:nth-child(5) {
    animation-delay: 0.4s;
}

.listening .sound-wave-bar:nth-child(6) {
    animation-delay: 0.5s;
}

.listening .sound-wave-bar:nth-child(7) {
    animation-delay: 0.6s;
}

.listening .sound-wave-bar:nth-child(8) {
    animation-delay: 0.7s;
}

.listening .sound-wave-bar:nth-child(9) {
    animation-delay: 0.8s;
}

.listening .sound-wave-bar:nth-child(10) {
    animation-delay: 0.9s;
}

/* Milestone Progress */
.milestone .w-8.completed {
    @apply bg-saffron-500 text-white;
}

/* Recording List */
.recording-item {
    @apply bg-gray-50 dark:bg-gray-800 rounded-lg p-3 flex items-center justify-between;
    @apply border border-gray-200 dark:border-gray-700;
}

.recording-item.cleaned {
    @apply bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800;
}

/* Responsive adjustments */
@media (max-width: 640px) {

    .mode-btn,
    .mantra-btn,
    .target-btn {
        @apply text-xs px-3 py-1.5;
    }

    .bead {
        @apply w-10 h-10 text-xs;
    }

    .bead.guru-bead {
        @apply w-12 h-12;
    }
}

/* Haptic feedback animation */
@keyframes haptic {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.haptic-feedback {
    animation: haptic 0.1s ease-in-out;
}

/* 🎯 Enha
nced Japam & UI Components */
.mode-btn,
.mantra-btn,
.target-btn {
    @apply flex-shrink-0 px-4 py-2 rounded-full text-xs font-bold border transition-all duration-200;
}

.mode-btn {
    @apply bg-white/10 backdrop-blur-md text-white border-white/10;
}

.mode-btn.active {
    @apply bg-saffron-500 text-white border-saffron-500;
}

.mantra-btn {
    @apply bg-white/10 backdrop-blur-md text-white border-white/10;
}

.mantra-btn.active {
    @apply bg-gradient-to-r from-orange-500 to-red-500 text-white border-transparent;
}

.target-btn {
    @apply bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-600 w-12 h-8 flex items-center justify-center;
}

.target-btn.active {
    @apply bg-blue-500 text-white border-blue-500;
}

/* 🎵 Sound Wave Animation */
.sound-wave-bar {
    @apply bg-saffron-500 rounded-full transition-all duration-300;
    animation: none;
}

.listening .sound-wave-bar {
    animation: wave 0.8s ease-in-out infinite;
}

.listening .sound-wave-bar:nth-child(1) {
    animation-duration: 0.6s;
}

.listening .sound-wave-bar:nth-child(2) {
    animation-duration: 0.9s;
}

.listening .sound-wave-bar:nth-child(3) {
    animation-duration: 0.7s;
}

.listening .sound-wave-bar:nth-child(4) {
    animation-duration: 0.5s;
}

.listening .sound-wave-bar:nth-child(5) {
    animation-duration: 0.8s;
}

.listening .sound-wave-bar:nth-child(6) {
    animation-duration: 0.6s;
}

.listening .sound-wave-bar:nth-child(7) {
    animation-duration: 0.9s;
}

.listening .sound-wave-bar:nth-child(8) {
    animation-duration: 0.7s;
}

/* 📿 Japamala Beads */
.bead {
    @apply w-12 h-12 rounded-full border-2 border-white/20 flex items-center justify-center text-white/60 transition-all duration-300 bg-white/5 backdrop-blur-sm;
}

.bead.completed {
    @apply border-saffron-500 bg-saffron-500/20 text-saffron-400;
}

.bead.current {
    @apply border-saffron-600 bg-saffron-500 text-white shadow-lg scale-110;
}

.bead.guru-bead {
    @apply w-16 h-16 border-gold-500 bg-gold-400/20 backdrop-blur-md text-gold-400;
}

/* 🎙️ Recording Components */
.recording-item {
    @apply flex items-center justify-between p-3 bg-white/5 backdrop-blur-sm rounded-lg border border-white/10;
}

.recording-item.cleaned {
    @apply bg-green-500/10 backdrop-blur-sm border-white/20;
}

/* 📱 Calendar Components */
.calendar-day {
    @apply text-center p-2 text-sm font-medium text-white hover:bg-white/10 rounded-lg cursor-pointer transition-all duration-200;
}

.calendar-day.today {
    @apply bg-gradient-to-br from-red-600 to-orange-600 text-white rounded-xl shadow-lg transform scale-110;
}

.calendar-day.festival {
    @apply relative;
}

.calendar-day.festival::after {
    content: '';
    @apply absolute bottom-1 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-red-500 rounded-full;
}

.calendar-day.prev-month,
.calendar-day.next-month {
    @apply text-gray-400 dark:text-gray-600 hover:bg-transparent cursor-default;
}

.festival-dot {
    @apply absolute bottom-1 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-red-500 rounded-full;
}

/* 🎨 Event Items */
.event-item {
    @apply flex items-center justify-between p-3 bg-white/10 backdrop-blur-lg rounded-lg shadow-sm border border-white/10 mb-2;
}

.event-date {
    @apply w-10 h-10 rounded-lg bg-white/20 backdrop-blur-sm flex flex-col items-center justify-center mr-3;
}

.event-date .day {
    @apply text-xs font-bold text-white;
}

.event-date .month {
    @apply text-[10px] text-white/70;
}

/* 💎 Gemstone Cards */
.gemstone-card {
    @apply relative overflow-hidden;
}

.gemstone-card::before {
    content: '';
    @apply absolute top-0 right-0 w-16 h-16 bg-white/20 rounded-full -mt-4 -mr-4;
}

/* 🎯 Fade In Animation */
.fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

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

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

/* 🔄 Loading States */
.loading {
    @apply animate-pulse;
}

.loading::after {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent;
    animation: shimmer 1.5s infinite;
}

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

    100% {
        transform: translateX(100%);
    }
}

/* 📱 Mobile Optimizations */
@media (max-width: 640px) {

    .mode-btn,
    .mantra-btn {
        @apply text-[10px] px-3 py-1.5;
    }

    .target-btn {
        @apply w-10 h-7 text-xs;
    }

    .calendar-day {
        @apply p-1 text-xs;
    }

    .event-item {
        @apply p-2;
    }

    .gemstone-card {
        @apply p-3;
    }
}

/* 🎨 Senior Mode Enhancements */
.senior-mode .mode-btn,
.senior-mode .mantra-btn,
.senior-mode .target-btn {
    @apply text-base px-6 py-3 border-2;
}

.senior-mode .calendar-day {
    @apply text-base p-3 border border-gray-300;
}

.senior-mode .event-item {
    @apply p-4 border-2 border-gray-300;
}

/* 🌙 Dark Mode Specific */
.dark .sound-wave-bar {
    @apply bg-saffron-400;
}

.dark .bead {
    @apply border-gray-600;
}

.dark .bead.completed {
    @apply border-saffron-400 bg-saffron-900/40 text-saffron-300;
}

.dark .calendar-day.today {
    @apply from-red-500 to-orange-500;
}

/*
 🔧 Accessibility & Senior Mode Styles */
.senior-mode {
    font-size: 1.2em !important;
}

.senior-mode .text-xs {
    font-size: 0.875rem !important;
}

.senior-mode .text-sm {
    font-size: 1rem !important;
}

.senior-mode .text-base {
    font-size: 1.25rem !important;
}

.senior-mode .text-lg {
    font-size: 1.5rem !important;
}

.senior-mode .text-xl {
    font-size: 1.875rem !important;
}

.senior-mode .text-2xl {
    font-size: 2.5rem !important;
}

.senior-mode button {
    min-height: 48px !important;
    font-size: 1.1rem !important;
}

.senior-mode .nav-item {
    padding: 1rem !important;
}

.large-text {
    font-size: 1.15em;
}

.large-text .text-xs {
    font-size: 0.8rem;
}

.large-text .text-sm {
    font-size: 0.95rem;
}

.large-text .text-base {
    font-size: 1.1rem;
}

.high-contrast {
    filter: contrast(1.5);
}

.high-contrast .text-gray-500 {
    @apply text-gray-700 dark:text-gray-300;
}

.high-contrast .text-gray-400 {
    @apply text-gray-600 dark:text-gray-200;
}

.eye-comfort {
    filter: sepia(0.1) saturate(0.9) hue-rotate(15deg);
}

.eye-comfort .bg-white {
    background-color: #fefdf8 !important;
}

.eye-comfort .dark .bg-dark-bg {
    background-color: #1a1a16 !important;
}

/* 🎤 Voice Navigation Indicator */
.voice-listening {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #ef4444;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    z-index: 1000;
    animation: pulse 1s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* 📱 Emergency Triple-Tap */
.emergency-mode {
    position: fixed;
    inset: 0;
    background: #dc2626;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    font-size: 2rem;
    text-align: center;
}

.emergency-mode .emergency-contact {
    font-size: 3rem;
    font-weight: bold;
    margin: 2rem 0;
}

.emergency-mode .emergency-cancel {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 1rem;
}

/* 🔔 Notification Styles */
.notification-permission {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #3b82f6;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 🎨 Profile Modal Enhancements */
.profile-modal-content {
    max-height: 90vh;
    overflow-y: auto;
}

.profile-modal input:focus,
.profile-modal select:focus,
.profile-modal textarea:focus {
    outline: none;
    ring: 2px;
    ring-color: #3b82f6;
    border-color: #3b82f6;
}

/* 📊 Enhanced Stats */
.profile-stat-enhanced {
    position: relative;
    overflow: hidden;
}

.profile-stat-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.3;
}

/* 🔄 Loading States */
.profile-loading .profile-stat-value {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.dark .profile-loading .profile-stat-value {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* 🎵 Audio Horoscope Playing State */
.audio-playing {
    animation: audioWave 1s ease-in-out infinite alternate;
}

@keyframes audioWave {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.05);
    }
}

/* 📱 Mobile Optimizations */
@media (max-width: 640px) {
    .senior-mode {
        font-size: 1.3em !important;
    }

    .senior-mode button {
        min-height: 52px !important;
        font-size: 1.2rem !important;
    }

    .profile-modal-content {
        margin: 10px;
        max-height: calc(100vh - 20px);
    }

    .emergency-mode .emergency-contact {
        font-size: 2.5rem;
    }
}

/* 🌙 Dark Mode Accessibility */
.dark.high-contrast {
    filter: contrast(1.3) brightness(1.1);
}

.dark.eye-comfort {
    filter: sepia(0.05) saturate(0.95) hue-rotate(10deg);
}

.dark.eye-comfort .bg-dark-bg {
    background-color: #1a1a18 !important;
}

.dark.eye-comfort .bg-dark-card {
    background-color: #262624 !important;
}

/* 👨
‍👩‍👧‍👦 Enhanced Family Module Styles */
.family-member-card {
    transition: all 0.3s ease;
}

.family-member-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.family-avatar-male {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.family-avatar-female {
    background: linear-gradient(135deg, #ec4899, #be185d);
}

.horoscope-modal {
    backdrop-filter: blur(10px);
}

.horoscope-prediction {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
    border-left: 4px solid #8b5cf6;
}

.compatibility-bar {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.compatibility-indicator {
    height: 100%;
    background: white;
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* 💑 Enhanced Match Making Styles */
.match-profile-card {
    border: 2px dashed #d1d5db;
    transition: all 0.3s ease;
    min-height: 200px;
}

.match-profile-card:hover {
    border-color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.05);
}

.match-profile-card.filled {
    border-style: solid;
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
}

.compatibility-score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(from 0deg, #ef4444, #f59e0b, #10b981);
    position: relative;
}

.compatibility-score-inner {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.porutham-check {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.porutham-check:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.porutham-excellent {
    border-left: 4px solid #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.05));
}

.porutham-good {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.05));
}

.porutham-average {
    border-left: 4px solid #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.05));
}

.auspicious-date-card {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

.auspicious-date-card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.match-history-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(249, 250, 251, 0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.match-history-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 🎨 Modal Enhancements */
.enhanced-modal {
    backdrop-filter: blur(15px);
    background: rgba(0, 0, 0, 0.6);
}

.enhanced-modal-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.dark .enhanced-modal-content {
    background: rgba(31, 41, 55, 0.95);
    border: 1px solid rgba(75, 85, 99, 0.2);
}

/* 📱 Form Enhancements */
.enhanced-form-input {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.enhanced-form-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.enhanced-form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* 🌟 Animation Classes */
.slide-in-up {
    animation: slideInUp 0.4s ease-out forwards;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.fade-in-scale {
    animation: fadeInScale 0.3s ease-out forwards;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
    }
}

/* 📊 Progress Indicators */
.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-circle {
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 0.5s ease-in-out;
}

/* 🎯 Status Indicators */
.status-excellent {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.status-good {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.status-average {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.status-poor {
    background: linear-gradient(135deg, #7f1d1d, #991b1b);
    color: white;
}

/* 📱 Mobile Optimizations */
@media (max-width: 640px) {
    .match-profile-card {
        min-height: 150px;
    }

    .compatibility-score-circle {
        width: 100px;
        height: 100px;
    }

    .compatibility-score-inner {
        width: 80px;
        height: 80px;
    }

    .enhanced-modal-content {
        margin: 10px;
        max-height: calc(100vh - 20px);
    }

    .porutham-check {
        padding: 12px;
    }

    .auspicious-date-card {
        padding: 8px;
    }
}

/* 🌙 Dark Mode Enhancements */
.dark .family-member-card {
    background: rgba(31, 41, 55, 0.8);
    border-color: rgba(75, 85, 99, 0.3);
}

.dark .match-profile-card {
    background: rgba(31, 41, 55, 0.5);
    border-color: rgba(75, 85, 99, 0.5);
}

.dark .match-profile-card.filled {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.1));
}

.dark .porutham-check {
    background: rgba(31, 41, 55, 0.8);
    border-color: rgba(75, 85, 99, 0.3);
}

.dark .match-history-item {
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.9), rgba(17, 24, 39, 0.9));
    border-color: rgba(75, 85, 99, 0.3);
}

/* 🔄 Loading States */
.loading-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.dark .loading-shimmer {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

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

    100% {
        background-position: -200% 0;
    }
}

/* 🖼️ Premium Page Backgrounds */
#page-calendar,
#page-japam,
#page-settings {
    position: relative;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    padding-top: 0;
    padding-bottom: 5rem;
    overflow-y: auto;
}

#page-calendar {
    background: linear-gradient(rgba(58, 26, 20, 0.4), rgba(58, 26, 20, 0.6)),
        url('../assests/calendar.jpg') no-repeat center center !important;
}

#page-japam {
    background: linear-gradient(rgba(58, 26, 20, 0.4), rgba(58, 26, 20, 0.6)),
        url('../assests/japam.jpg') no-repeat top center !important;
}

#page-settings {
    background: linear-gradient(rgba(58, 26, 20, 0.4), rgba(58, 26, 20, 0.6)),
        url('../assests/profile.jpg') no-repeat center center !important;
}

/* Ensure foreground elements pop */
#page-calendar h2,
#page-japam h2,
#page-settings h2 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}