/**
 * Modern Components CSS
 * Additional styles for modern frontend components
 * Includes Tailwind-like utility classes for modern components
 */

/* ULTRA STRONG navbar protection - nothing can override */
nav.navbar,
nav.navbar-noor,
.navbar.navbar-noor {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    position: relative !important;
    z-index: 1000 !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 60px !important;
}

.navbar .container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
}

.navbar-brand,
a.navbar-brand {
    display: flex !important;
    align-items: center !important;
    margin-right: auto !important;
    text-decoration: none !important;
}

.navbar-collapse,
#navbarCollapse {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-grow: 1 !important;
}

.navbar-nav,
ul.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
}

.nav-item,
li.nav-item {
    display: block !important;
    list-style: none !important;
}

.nav-link,
a.nav-link {
    display: block !important;
    padding: 0.5rem 1rem !important;
    text-decoration: none !important;
}

/* Tailwind-like utilities for modern components */
.bg-cream { background-color: #FDFBF7; }
.bg-emerald-900 { background-color: #064E3B; }
.bg-emerald-50 { background-color: #ecfdf5; }
.text-emerald-900 { color: #064E3B; }
.bg-gold { background-color: #D4AF37; }
.text-gold { color: #D4AF37; }

/* Bottom Navigation Spacing */
@media (max-width: 768px) {
    body {
        padding-bottom: 64px !important; /* Space for bottom nav */
    }
    
    /* Ensure content is not hidden behind bottom nav */
    .container {
        margin-bottom: 20px;
    }
    
    /* Safe area for devices with notches */
    .safe-area-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    /* Smaller text on mobile */
    .text-4xl {
        font-size: 2rem !important;
    }
    
    .text-5xl {
        font-size: 2.5rem !important;
    }
    
    /* Compact padding */
    .p-6 {
        padding: 1rem !important;
    }
}

/* Loading skeleton animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Smooth transitions */
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Focus styles for accessibility */
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid #064E3B;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .fixed {
        display: none !important;
    }
}