/* Custom CSS for Socia Mood with Bootstrap 5 */

/* Global layout fixes */
html, body { overflow-x: hidden; }
body { padding-top: 84px; }

/* Viewport helpers */
.vh-screen { min-height: 100vh; min-height: 100svh; }

/* Custom color definitions */
:root {
    --primary: #667EEA;
    --primary-light: #6B73FF;
    --primary-dark: #5A67D8;
    --secondary: #6B73FF;
    --accent: #8B5CF6;
    --coral: #FF6B6B;
    --pink: #FF8E8E;
}

/* Custom animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInLeft { from { opacity:0; transform:translateX(-30px);} to {opacity:1; transform:translateX(0);} }
@keyframes slideInRight { from { opacity:0; transform:translateX(30px);} to {opacity:1; transform:translateX(0);} }

/* Animation classes */
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
.animate-fade-in { animation: fadeIn 0.6s ease-out; }
.animate-slide-in-left { animation: slideInLeft 0.6s ease-out; }
.animate-slide-in-right { animation: slideInRight 0.6s ease-out; }

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }

/* Loading animation for language switching */
.loading { opacity: 0.6; pointer-events: none; }
.loading::after { content:''; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border:2px solid var(--primary); border-top:2px solid transparent; border-radius:50%; animation: spin 1s linear infinite; }
@keyframes spin { 0%{transform:rotate(0);} 100%{transform:rotate(360deg);} }

/* Focus states for accessibility */
.focus-visible:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        color: black !important;
        background: white !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --primary: #4C51BF;
        --secondary: #5A67D8;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* ===== Bootstrap 5 Custom Components ===== */

/* Hero section customization */
.hero-section { 
    min-height: 100vh !important; 
    padding-top: 0 !important;
}

.hero-section .container {
    padding-top: 2rem;
    position: relative;
    z-index: 1;
}

/* Navbar customization */
.navbar-brand { font-weight: 800; letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: center; gap:.6rem; padding:0; background: none; border:none; }
.navbar-brand .brand-text { background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height:1; }
.navbar-brand:hover { transform: translateY(-1px); }
.navbar { backdrop-filter: blur(10px); background: rgba(255,255,255,0.85) !important; border-bottom: 1px solid rgba(0,0,0,.05); }
.navbar .dropdown .btn { border-radius: 9999px; background-color: #f3f4f6; padding: 0.5rem 1rem; border: 1px solid #e5e7eb; font-size: 0.875rem; }
.navbar .dropdown .btn:hover { background-color: #eef0f4; }
.navbar .dropdown-menu { border-radius: 0.75rem; border: 1px solid #e5e7eb; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.navbar .dropdown-item { padding: 0.5rem 1rem; font-size: 0.875rem; }
.navbar .dropdown-item:hover { background-color: #f8f9fa; }

/* Mobile dropdown positioning fix */
@media (max-width: 768px) {
    .navbar .dropdown {
        position: relative;
        z-index: 1050;
    }
    
    .navbar .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: auto !important;
        right: 0 !important;
        transform: none !important;
        margin-top: 0.25rem !important;
    }
    
    /* Additional mobile fixes */
    .navbar-nav {
        position: relative;
        z-index: 1049;
    }
    
    /* Prevent navbar from interfering with dropdown */
    .navbar {
        overflow: visible !important;
    }
    
    /* Ensure proper stacking context */
    .navbar .container {
        position: relative;
        z-index: 1048;
    }
}
.navbar-brand .brand-text { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; }
@media (max-width: 768px) { .navbar-brand .brand-text { font-size: 1.6rem; } }
@media (max-width: 480px) { .navbar-brand .brand-text { font-size: 1.45rem; } }
@media (max-width: 768px) {
    .navbar-brand { font-size: 1.5rem !important; }
}
@media (max-width: 480px) {
    .navbar-brand { font-size: 1.3rem !important; }
}

/* Hero section */
.hero-section { position: relative; overflow: hidden; padding-top: 4.25rem; padding-bottom: 1.75rem; }
/* Soft top fade so hero blends smoothly with the page background */
.hero-section::after{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.85) 40%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 0;
}
/* Gradient headline for modern look */
.hero-section h1 { background: linear-gradient(90deg, #111 0%, #2c2c2c 10%, var(--primary) 40%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.02em; }
.hero-section .lead { color: #6b7280 !important; }
.hero-section .btn { border-radius: 9999px; padding: 0.875rem 1.25rem; box-shadow: 0 10px 20px rgba(0,0,0,.06); }
.hero-section .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.1); }
@media (max-width: 768px) { 
    .hero-decor { width:100%; opacity:.3; } 
    .hero-section { padding-top: 2.25rem; padding-bottom: 1.25rem; }
    .hero-section h1 { font-size: 2.5rem !important; line-height: 1.2 !important; }
    .hero-section .lead { font-size: 1.2rem !important; line-height: 1.5 !important; }
}
@media (max-width: 480px) { 
    .hero-section h1 { font-size: 2.25rem !important; line-height: 1.2 !important; }
    .hero-section .lead { font-size: 1.1rem !important; line-height: 1.5 !important; }
}

/* Vertical spacing for other sections */
.features-section, .how-it-works-section, .testimonials-section, .pricing-section { padding-top: 5rem; padding-bottom: 5rem; }
@media (max-width: 768px) {
  .features-section, .how-it-works-section, .testimonials-section, .pricing-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

/* App mockup */
.app-mockup { display:inline-flex; align-items:center; justify-content:center; margin:0; position: relative; isolation: isolate; }
.app-mockup .mockup-image {
  max-width: 320px;
  height: auto;
  display: block;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 34px 90px rgba(0,0,0,.28));
}
/* Ambient glow behind the device */
.app-mockup::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: min(760px, 160%);
  height: 220px;
  background: radial-gradient(60% 70% at 50% 50%, rgba(102,126,234,.35), rgba(139,92,246,.25) 50%, rgba(0,0,0,0) 85%);
  filter: blur(56px);
  z-index: -1;
  pointer-events: none;
}
/* Remove the top highlight to avoid a visible band under the navbar */
.app-mockup::after { display: none; }

/* Subtle float and 3D tilt on hover (desktop only) */
@media (hover:hover) and (pointer:fine) {
  .app-mockup .mockup-image {
    transition: transform .7s cubic-bezier(.2,.6,.2,1), filter .7s ease;
    transform: perspective(1200px) translateY(0) rotateX(0) rotateY(0) scale(1);
  }
  .app-mockup:hover .mockup-image {
    transform: perspective(1200px) translateY(-12px) rotateX(10deg) rotateY(-14deg) scale(1.04);
    filter: drop-shadow(0 50px 100px rgba(0,0,0,.35));
  }
}

/* Gentle idle float (respect reduced motion) */
@keyframes mockupFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 992px) {
  .app-mockup { animation: mockupFloat 8s ease-in-out infinite; }
}
@media (hover:hover) {
  .app-mockup .mockup-image:hover { transform: translateY(-4px); filter: drop-shadow(0 30px 60px rgba(0,0,0,.22)); }
}
@media (min-width: 992px) { /* lg and up */
  .app-mockup { margin: 0; }
}
@media (max-width: 768px) {
  .app-mockup { display:flex; justify-content:center; margin:1.5rem 0 0; }
  .app-mockup .mockup-image { max-width: 260px; }
  .app-mockup { animation: none; } /* avoid float on mobile */
}

/* Feature cards */
.feature-card { background:rgba(255,255,255,.9); backdrop-filter: blur(8px); padding:2rem; border-radius:1rem; border:1px solid #e5e7eb; box-shadow:0 10px 25px rgba(0,0,0,.08); transition: transform .2s, box-shadow .2s; text-align:center; }
.feature-card:hover { transform: translateY(-4px); box-shadow:0 20px 35px rgba(0,0,0,.12); }
/* Section titles underline */
.features-section h2, .how-it-works-section h2, .testimonials-section h2, .pricing-section h2 {
  position: relative;
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.features-section h2::after, .how-it-works-section h2::after, .testimonials-section h2::after, .pricing-section h2::after { content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-14px; width: 120px; height: 4px; border-radius: 9999px; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity:.9; }

@media (max-width:768px){ 
    .feature-card{ padding:1.5rem; margin-bottom:1rem; } 
    .feature-card h5 { font-size: 1.3rem !important; }
    .feature-card p { font-size: 1rem !important; line-height: 1.6 !important; }
}

/* Icon circles */
.icon-circle { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow:0 10px 15px -3px rgba(0,0,0,.1); }
@media (max-width:768px){ .icon-circle{ width:48px; height:48px; } }

/* Step numbers */
.step-number { width:80px; height:80px; border-radius:50%; background: linear-gradient(135deg, var(--coral), var(--pink)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:2rem; font-weight:700; margin:0 auto; box-shadow:0 10px 15px -3px rgba(0,0,0,.1); }
@media (max-width:768px){ .step-number{ width:60px; height:60px; font-size:1.5rem; } }

/* Testimonial cards */
.testimonial-card { background:rgba(255,255,255,.9); backdrop-filter: blur(8px); padding:2rem; border-radius:1rem; border:1px solid #e5e7eb; box-shadow:0 10px 25px rgba(0,0,0,.08); transition: transform .2s, box-shadow .2s; }
.testimonial-card:hover { transform: translateY(-4px); box-shadow:0 20px 35px rgba(0,0,0,.12); }
@media (max-width:768px){ 
    .testimonial-card{ padding:1.5rem; margin-bottom:1rem; } 
    .testimonial-card h6 { font-size: 1.2rem !important; }
    .testimonial-card p { font-size: 1rem !important; line-height: 1.6 !important; }
    .testimonial-card small { font-size: 0.9rem !important; }
}

/* Pricing cards */
.pricing-card { background:#fff; padding:2rem; border-radius:1rem; border:2px solid #e5e7eb; box-shadow:0 10px 25px rgba(0,0,0,.08); transition: transform .2s, box-shadow .2s; position:relative; }
.pricing-card:hover { transform: translateY(-4px); box-shadow:0 20px 35px rgba(0,0,0,.12); }
.popular-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--primary); color:#fff; padding:.5rem 1rem; border-radius:20px; font-size:.875rem; font-weight:600; }
@media (max-width:768px){ 
    .pricing-card{ padding:1.5rem; margin-bottom:1rem; } 
    .pricing-card h5 { font-size: 1.3rem !important; }
    .pricing-card .display-6 { font-size: 1.8rem !important; }
    .pricing-card p { font-size: 1rem !important; line-height: 1.6 !important; }
    .pricing-card ul li { font-size: 1rem !important; }
}

/* Footer */
.site-footer { background: linear-gradient(to bottom, #111827, #0b0b0b); }

/* Footer readability on dark background */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer small {
    color: rgba(255, 255, 255, 0.85) !important;
}
.site-footer h5 { font-size: 1.8rem !important; font-weight: 800 !important; letter-spacing: -0.02em; }
.site-footer h6 { font-size: 1.5rem !important; font-weight: 700 !important; letter-spacing: -0.01em; }
.site-footer .text-muted { color: rgba(255, 255, 255, 0.72) !important; }
.site-footer a:not(.btn) { color: rgba(255, 255, 255, 0.85) !important; }
.site-footer a:not(.btn):hover { color: #ffffff !important; transform: translateY(-1px); }
.site-footer i { transition: transform .2s ease, opacity .2s ease; opacity:.9; }
.site-footer a:hover i { transform: scale(1.1); opacity:1; }

/* Privacy page styles */
.privacy-content { background: #fff; border-radius: 1rem; padding: 2rem; box-shadow: 0 10px 25px rgba(0,0,0,.08); }
.privacy-text h2 { color: var(--primary); border-bottom: 2px solid #f3f4f6; padding-bottom: 0.5rem; margin-top: 2rem; }
.privacy-text h3 { color: #374151; margin-top: 1.5rem; }
.privacy-text h4 { color: #6b7280; margin-top: 1rem; }
.privacy-text ul { padding-left: 1.5rem; }
.privacy-text ul li { margin-bottom: 0.5rem; line-height: 1.6; }
.privacy-text p { line-height: 1.7; color: #4b5563; }
.privacy-text .lead { color: #374151; font-weight: 500; }
@media (max-width: 768px) { .privacy-content { padding: 1.5rem; } }
/* Make footer CTA buttons match hero pill shape */
.site-footer .btn { border-radius: 9999px; padding: .9rem 1.2rem; }
.site-footer hr { border-color: rgba(255,255,255,0.15); }

/* Button styles aligned with Bootstrap */
.btn-dark { background:#000; color:#fff !important; border:1px solid #000; border-radius: 12px; padding: .9rem 1.2rem; }
.btn-dark:hover { background:#111; transform: translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.25); }
.btn-outline-dark { color:#111 !important; border:2px solid #e5e7eb; background:#ffffff; border-radius: 12px; padding: .9rem 1.2rem; }
.btn-outline-dark:hover { border-color: var(--primary); color: var(--primary) !important; transform: translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.1); }
.btn-outline-light { border:2px solid rgba(255,255,255,.3); }
.btn-outline-light:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }

/* Responsive typography */
@media (max-width: 768px){ 
    .display-4{ font-size:2.5rem!important;} 
    .display-5{ font-size:2rem!important;} 
    .lead{ font-size:1.1rem!important;} 
    .h5{ font-size:1.25rem!important;} 
    .h6{ font-size:1.1rem!important;}
    .fs-1{ font-size:2.5rem!important;}
    .fs-2{ font-size:2rem!important;}
    .fs-3{ font-size:1.75rem!important;}
    .fs-4{ font-size:1.5rem!important;}
    .fs-5{ font-size:1.25rem!important;}
    .fs-6{ font-size:1.1rem!important;}
}
@media (max-width: 480px){ 
    .display-4{ font-size:2.25rem!important;} 
    .display-5{ font-size:1.875rem!important;} 
    .lead{ font-size:1rem!important;} 
    .h5{ font-size:1.125rem!important;} 
    .h6{ font-size:1rem!important;}
    .fs-1{ font-size:2.25rem!important;}
    .fs-2{ font-size:1.875rem!important;}
    .fs-3{ font-size:1.625rem!important;}
    .fs-4{ font-size:1.375rem!important;}
    .fs-5{ font-size:1.125rem!important;}
    .fs-6{ font-size:1rem!important;}
}

/* Section spacing */
.min-vh-100, .vh-screen { min-height: 100svh !important; }

/* Utility classes */
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }

/* Smooth transitions */
* { transition: all .2s ease; }

/* Loading state */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Focus improvements */
.btn:focus, .form-select:focus { box-shadow: 0 0 0 .2rem rgba(102,126,234,.25); }