/* 
 * Umrah Connect - Professional Stylesheet 
 * Global aesthetics, premium card components, glassmorphism, and responsive utilities
 */

:root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 161.8 82.5% 14.3%; /* #054432 */
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 43 65% 53%; /* #D4AF37 */
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 43 65% 53%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 161.8 82.5% 14.3%;
    --radius: 1rem;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: #fcfdfc;
    color: #1a1a1a;
    -webkit-font-smoothing: antialiased;
}

/* Standardized Mobile-Responsive Container */
.container-custom {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (min-width: 640px) { .container-custom { max-width: 640px; } }
@media (min-width: 768px) { .container-custom { max-width: 768px; padding-left: 2.5rem; padding-right: 2.5rem; } }
@media (min-width: 1024px) { .container-custom { max-width: 1024px; } }
@media (min-width: 1280px) { .container-custom { max-width: 1280px; } }

/* Custom Scrollbar for sidebars */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }

/* Premium Card System */
.premium-card {
    background-color: white;
    border: 1px solid rgba(0,0,0,0.03);
    border-radius: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.premium-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
    transform: translateY(-8px);
    border-color: rgba(5,68,50,0.1);
}

/* Glassmorphism Utilities */
.glass-effect {
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.1);
}

/* Professional Button System */
.btn-primary-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    transition: all 0.3s;
    background: linear-gradient(135deg, #054432, #07644a);
    color: white;
    box-shadow: 0 12px 20px -8px rgba(5, 68, 50, 0.4);
    border-radius: 1rem;
    letter-spacing: -0.01em;
}
.btn-primary-premium:hover {
    box-shadow: 0 15px 30px -10px rgba(5, 68, 50, 0.5);
    transform: translateY(-2px);
    filter: brightness(1.1);
}
.btn-primary-premium:active { transform: scale(0.96); }

.btn-gold-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    transition: all 0.3s;
    background: linear-gradient(135deg, #D4AF37, #F2D379);
    color: #054432;
    box-shadow: 0 12px 20px -8px rgba(212, 175, 55, 0.4);
    border-radius: 1rem;
}
.btn-gold-premium:hover {
    box-shadow: 0 15px 30px -10px rgba(212, 175, 55, 0.5);
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.btn-secondary-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    transition: all 0.2s;
    background-color: white;
    color: #1a1a1a;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border-radius: 1rem;
}
.btn-secondary-premium:hover { background-color: #f9fafb; border-color: #d1d5db; }

/* Custom Input Styles */
.premium-input {
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 1rem;
    transition: all 0.3s;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.premium-input:focus {
    background-color: rgba(255,255,255,0.1);
    border-color: #D4AF37;
    box-shadow: 0 0 0 4px rgba(212,175,55,0.1);
    outline: none;
}

/* Navbar Effects */
.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1) !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* 💎 Premium Category Hero Styles (Global) */
.hero-economy { background: linear-gradient(135deg, #004D39 0%, #10B981 100%); position: relative; overflow: hidden; }
.hero-standard { background: linear-gradient(135deg, #003D2B 0%, #D4AF37 100%); position: relative; overflow: hidden; }
.hero-premium { background: radial-gradient(circle at top right, #002D1E, #004D39 60%, #FFD700 120%); position: relative; overflow: hidden; }
.hero-luxury { background: linear-gradient(135deg, #020617 0%, #171717 100%); position: relative; overflow: hidden; border: 1px solid rgba(212, 175, 55, 0.3); }

.hero-pattern { position: absolute; inset: 0; opacity: 0.15; pointer-events: none; }
.hero-economy .hero-pattern { background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.hero-standard .hero-pattern { background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D4AF37' fill-opacity='0.2'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-2.21 0-4 1.79-4 4s1.79 4 4 4c2.21 0 4-1.79 4-4zm2 0c0 3.314-2.686 6-6 6s-6-2.686-6-6 2.686-6 6-6 6 2.686 6 6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.hero-premium .hero-pattern { background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%23FFD700' fill-opacity='0.15' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.hero-luxury .hero-pattern { background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D4AF37' fill-opacity='0.2'%3E%3Cpath d='M40 40c0-11.046-8.954-20-20-20S0 28.954 0 40s8.954 20 20 20 20-8.954 20-20zm2 0c0 12.15-9.85 22-22 22S-2 52.15-2 40 7.85 18 20 18s22 9.85 22 22z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }