/**
 * VoIP AI Homepage Custom Styles
 * Advanced animations and UAE-themed enhancements
 */

/* Root Variables for VoIP AI Brand Theme */
:root {
    --voip-bg: #162f3a;
    --voip-dark-bg: #0c1b27;
    --voip-primary: #1d7861;
    --voip-dark-font: #085d44;
    --voip-link: #1ec08d;
    --primary-gradient: linear-gradient(135deg, #1d7861 0%, #1ec08d 100%);
    --voip-gradient: linear-gradient(135deg, #1d7861 0%, #1ec08d 50%, #162f3a 100%);
    --voip-accent: rgba(29, 120, 97, 0.1);
    --voip-hover: rgba(30, 192, 141, 0.2);
    
    /* Override Tailwind font configuration with Poppins */
    --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !important;
    
    /* Override Tailwind indigo-600 with custom color */
    --color-indigo-600: #1ec08d !important;
    
    /* Override Tailwind slate colors with custom background colors */
    --color-slate-900: var(--voip-bg) !important;
    --color-slate-950: var(--voip-dark-bg) !important;
}

/* Prevent FOUC - Ensure consistent body background */
html, body {
    background-color: #0c1b27 !important; /* var(--voip-dark-bg) */
    color: white !important;
}

/* Hero Section Responsive Typography */
@media (min-width: 900px) and (max-width: 1024px) {
    .hero-heading-960 {
        font-size: 2.25rem !important; /* Between md:text-3xl and lg:text-4xl */
        line-height: 2.5rem !important;
    }
    .hero-description-960 {
        font-size: 1rem !important; /* Smaller than text-lg */
    }
}

/* Small Mobile Devices (375px and below) */
@media (max-width: 375px) {
    .hero-heading-960 {
        font-size: 1.25rem !important; /* Smaller than text-xl */
        line-height: 1.75rem !important;
    }
    .hero-description-960 {
        font-size: 0.875rem !important; /* text-sm equivalent */
    }
}

/* Global Audio Player Styling */
.voice-demo-player audio {
    width: 100%;
    height: 42px;
    border-radius: 21px;
    /* background: rgba(55, 65, 81, 0.2); */
    outline: none;
    border: 1px solid rgb(6 88 63);
}

.voice-demo-player audio:focus {
    border-color: rgba(156, 163, 175, 0.5);
    box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.2);
}

.voice-demo-player audio::-webkit-media-controls-panel {
    background-color: rgba(12, 27, 39, 0.9);
    border-radius: 12px;
}

.voice-demo-player audio::-webkit-media-controls-play-button {
    background-color: rgba(75, 85, 99, 0.8);
    border-radius: 50%;
    margin-left: 10px;
}

.voice-demo-player audio::-webkit-media-controls-current-time-display,
.voice-demo-player audio::-webkit-media-controls-time-remaining-display {
    color: white;
    text-shadow: none;
    font-size: 12px;
}

.voice-demo-player audio::-webkit-media-controls-timeline {
    background-color: rgba(75, 85, 99, 0.4);
    border-radius: 25px;
    margin: 0 10px;
}

.voice-demo-player audio::-webkit-media-controls-volume-slider {
    background-color: rgba(75, 85, 99, 0.4);
    border-radius: 25px;
}

/* Responsive audio player */
@media (max-width: 768px) {
    .voice-demo-player audio {
        height: 38px;
    }
}

/* Audio Player Volume Slider Styling */
#volume-slider {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border-radius: 15px;
    height: 4px;
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--voip-link);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

#volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--voip-link);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Typewriter Text - Reserve space for 3 lines on small screens */
@media (max-width: 460px) {
    .hero-heading-fixed {
        min-height: 4.5rem !important;/* Height for 3 lines at 1.6rem line-height */
        line-height: 1.6rem !important;
        margin-bottom: 0.2rem;
        max-height: 5rem !important;
    }
}@media (max-width: 261px) {
    .hero-heading-fixed {
        min-height: 6.5rem !important;
    }
}

/* Accessible Focus Styles - Universal Application (bad looking)*/
/* *:focus {
    outline: 2px solid var(--voip-link) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
} */

/* Enhanced focus for buttons and interactive elements (not good) */
/* button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
    outline: 2px solid var(--voip-link) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(30, 192, 141, 0.15) !important;
} */

/* Special focus for VoIP branded buttons */
.hover-voip-button:focus {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(30, 192, 141, 0.3) !important;
}

/* PERMANENT FIX: Animation Classes Blue Glow Prevention */
/* Remove focus from all animation wrapper elements */
.wow:focus,
.group:focus,
.animate__fadeIn:focus,
.animate__fadeInUp:focus,
.animate__fadeInDown:focus,
.animate__fadeInLeft:focus,
.animate__fadeInRight:focus,
.animated:focus,
.group.wow:focus,
.wow.animate__fadeInUp:focus,
.wow.animated:focus,
.premium-card:focus,
.uae-card:focus,
.who-we-are-card:focus,
.faq-card:focus,
[class*="animate__"]:focus,
[class*="wow"]:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* PERMANENT FIX: VoIP focus ONLY on actual interactive elements */
.wow a:focus,
.group a:focus,
.animated a:focus,
.wow button:focus,
.group button:focus,
.animated button:focus,
.premium-card a:focus,
.premium-card button:focus,
.uae-card a:focus,
.uae-card button:focus,
[class*="animate__"] a:focus,
[class*="animate__"] button:focus,
[class*="wow"] a:focus,
[class*="wow"] button:focus {
    outline: 2px solid var(--voip-link) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(30, 192, 141, 0.15) !important;
}

/* Enhanced Page Loading Animation - DISABLED */
/* body:not(.page-loaded) {
    overflow: hidden;
}

.page-loaded {
    animation: pageReveal 1s ease-out;
} */

/* WOW.js Animation Flash Prevention */
.wow {
    visibility: hidden !important;
    animation-fill-mode: both !important;
}

.wow.animated {
    visibility: visible !important;
}

/* Additional flash prevention for animate.css classes */
.animate__fadeInUp,
.animate__fadeInDown,
.animate__fadeInLeft,
.animate__fadeInRight {
    opacity: 0;
    visibility: hidden;
}

.wow.animate__fadeInUp.animated,
.wow.animate__fadeInDown.animated,
.wow.animate__fadeInLeft.animated,
.wow.animate__fadeInRight.animated {
    opacity: 1;
    visibility: visible;
}

/* VoIP Custom Button and Link Styles */
.hover-voip-button {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
}

.hover-voip-button:hover {
    background-color: var(--voip-dark-font) !important;
    color: #085d44 !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
}

/* Override footer link hover for VoIP buttons */
footer .hover-voip-button:hover {
    color: #085d44 !important;
}

/* Specific styling for footer demo button */
.footer-demo-button {
    color: #ffffff !important;
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    box-shadow: 0 8px 25px rgba(4, 120, 87, 0.4) !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-weight: 600 !important;
    letter-spacing: 0.025em !important;
}

.footer-demo-button:hover {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 35px rgba(22, 163, 74, 0.6) !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    transform: translateY(-1px) !important;
}

/* Override the general footer a rule with higher specificity */
footer a.footer-demo-button:hover {
    color: #ffffff !important;
}

/* Remove default dropdown arrow from select elements */
select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
}

.hover-voip-link:hover {
    color: var(--voip-primary) !important;
}

/* Navbar and Footer Custom Backgrounds */
#topnav {
    background-color: var(--voip-dark-bg) !important;
}

footer {
    background-color: var(--voip-dark-bg) !important;
}

/* Small Desktop Navbar Fixes */
@media (min-width: 992px) {
     #topnav .buy-button {
      margin-inline-start: 0;
      margin-inline-end: 15px;
      padding-inline-start: 0;
    }
}
@media (max-width: 1140px) and (min-width: 769px) {
    #topnav .buy-button {
        position: absolute !important;
        transform: none !important;
        top: 19px !important;
        right: 45px !important;
    }
    
    .buy-button li:first-child {
        margin-right: 2.5rem !important;
    }
    
    .navigation-menu {
        gap: 0.25rem !important;
    }
    
    .navigation-menu li {
        margin-right: 0.125rem !important;
    }
    
    /* .navigation-menu a,
    .navigation-menu .sub-menu-item {
        font-size: 0.85rem !important;
        padding: 0.375rem 0.5rem !important;
    } */
    
    .buy-button li:last-child a {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Additional space for language switcher */
    .container {
        max-width: none !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Mobile Navbar Fixes */
@media (max-width: 768px) {
    #topnav .buy-button {
        position: static !important;
        transform: none !important;
        top: auto !important;
        right: auto !important;
        margin-right: 1rem;
    }
    
    /* Hide Get Started button on mobile */
    .buy-button li:last-child {
        display: none;
    }
}

/* Global Link Colors */
.navigation-menu a,
.navigation-menu .sub-menu-item {
    color: white !important;
}

.navigation-menu a:hover,
.navigation-menu .sub-menu-item:hover {
    color: var(--voip-link) !important;
}

/* Active/Current Page Link */
.navigation-menu a.active,
.navigation-menu .sub-menu-item.active {
    color: var(--voip-link) !important;
}

/* Footer Links */
footer a {
    color: var(--voip-link);
}

footer a:hover {
    color: var(--voip-primary) !important;
}

/* General Link Styles */
a:not(.hover-voip-button):not([style*="background"]) {
    color: var(--voip-link) !important;
}

a:not(.hover-voip-button):not([style*="background"]):hover {
    color: var(--voip-primary) !important;
}

/* Section-specific Color Overrides */
.hover\:text-indigo-600:hover {
    color: var(--voip-primary) !important;
}

.text-indigo-600 {
    color: var(--voip-primary) !important;
}

.text-indigo-400 {
    color: var(--voip-link) !important;
}

.bg-indigo-600 {
    background-color: var(--voip-primary) !important;
}

.border-indigo-600 {
    border-color: var(--voip-primary) !important;
}

.hover\:bg-indigo-600:hover {
    background-color: var(--voip-dark-font) !important;
}

.hover\:bg-indigo-700:hover {
    background-color: var(--voip-dark-font) !important;
}

.hover\:border-indigo-600:hover {
    border-color: var(--voip-dark-font) !important;
}

.hover\:border-indigo-700:hover {
    border-color: var(--voip-dark-font) !important;
}

@keyframes pageReveal {
    from {
        opacity: 0.8;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Typewriter Effect */
.typewrite > .wrap {
    border-right: 0.08em solid var(--voip-link);
    animation: blink 1s infinite;
}

/* Hero heading container with responsive max-height to prevent layout shifts */
.hero-heading-fixed {
    /* Mobile: text-2xl (24px) needs ~4rem for 2 lines */
    max-height: 4rem;
}

/* Small screens: text-3xl (30px) */
@media (min-width: 640px) {
    .hero-heading-fixed {
        max-height: 6.5rem;
    }
}

/* Medium screens: text-4xl (36px) */
@media (min-width: 768px) {
    .hero-heading-fixed {
        max-height: 6rem;
    }
}


/* Medium screens: text-4xl (36px) */
@media (min-width: 960px) {
    .hero-heading-fixed {
        max-height: 5rem;
        font-size: 1.9rem !important;
    }
}

/* Large screens: text-5xl (48px) */
@media (min-width: 1024px) {
    .hero-heading-fixed {
        max-height: 8rem;
    }
}
@media (min-width: 1100px) {
    .hero-heading-fixed {
        max-height: 9rem;
        font-size: 2.1rem !important;
    }
}

/* Extra large screens: text-6xl (60px) */
@media (min-width: 1280px) {
    .hero-heading-fixed {
        max-height: 10rem;
        font-size: 2.2rem !important;

    }
}
/* Extra large screens: text-6xl (60px) */
@media (min-width: 1350px) {
    .hero-heading-fixed {
        max-height: 11rem;
        font-size: 2.4rem !important;
    }
}

@keyframes blink {
    0%, 50% { border-color: var(--voip-link); }
    51%, 100% { border-color: transparent; }
}

/* Advanced Hero Section Styles */
.hero-bg-effect {
    background: 
        radial-gradient(circle at 25% 25%, rgba(79, 70, 229, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(201, 169, 97, 0.05) 0%, transparent 50%);
    animation: heroGlow 8s ease-in-out infinite;
}

@keyframes heroGlow {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.1) saturate(1.2); }
}

/* UAE Flag Inspired Divider */
.uae-divider {
    height: 4px;
    background: linear-gradient(90deg, var(--uae-green) 0%, var(--uae-red) 50%, var(--uae-black) 100%);
    border-radius: 2px;
    margin: 2rem 0;
    animation: uaeFlagWave 3s ease-in-out infinite;
}

@keyframes uaeFlagWave {
    0%, 100% { transform: scaleX(1); opacity: 0.8; }
    50% { transform: scaleX(1.02); opacity: 1; }
}

/* Floating Elements Animation */
.floating-element {
    animation: gentleFloat 6s ease-in-out infinite;
}

.floating-element:nth-child(2n) {
    animation-delay: -2s;
    animation-duration: 8s;
}

.floating-element:nth-child(3n) {
    animation-delay: -4s;
    animation-duration: 10s;
}

@keyframes gentleFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
    }
    25% { 
        transform: translateY(-15px) rotate(1deg);
        opacity: 0.9;
    }
    50% { 
        transform: translateY(-10px) rotate(-1deg);
        opacity: 1;
    }
    75% { 
        transform: translateY(-20px) rotate(0.5deg);
        opacity: 0.8;
    }
}

/* Advanced Card Hover Effects */
.premium-card {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.premium-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.8s ease-in-out;
}

.premium-card:hover::before {
    left: 100%;
}

.premium-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 
        0 25px 50px -12px rgba(79, 70, 229, 0.25),
        0 10px 20px -5px rgba(79, 70, 229, 0.1),
        0 0 0 1px rgba(79, 70, 229, 0.05);
}

/* Industry Icons Enhanced Animation */
.industry-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.industry-icon::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(79, 70, 229, 0.2), rgba(59, 130, 246, 0.2));
    opacity: 0;
    transition: all 0.3s ease;
    z-index: -1;
}

.industry-icon:hover::after {
    opacity: 1;
    transform: scale(1.1);
}

.industry-icon:hover {
    transform: scale(1.1) rotate(5deg);
    color: #4f46e5;
}

/* Advanced Pricing Card Styles */
.pricing-card {
    position: relative;
    transition: all 0.4s ease;
}

.pricing-card.popular {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
}

.pricing-card.popular::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: inherit;
    z-index: -1;
    animation: borderGlow 2s ease-in-out infinite;
}

@keyframes borderGlow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Currency Toggle Enhanced */
.currency-toggle {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    border-radius: 50px;
    padding: 4px;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.currency-toggle::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50px;
    background: linear-gradient(135deg, #ffffff, #f9fafb);
    transition: transform 0.3s ease;
}

/* Demo Interface Styles */
.demo-interface {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.demo-step {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.demo-step::before {
    content: '';
    position: absolute;
    left: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(to bottom, #4f46e5, #06b6d4);
    border-radius: 2px;
    transition: height 0.5s ease;
}

.demo-step.active::before {
    height: 100%;
}

/* Success Metrics Counter Styles */
.counter-container {
    position: relative;
    overflow: hidden;
}

.counter-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(79, 70, 229, 0.1) 0%, transparent 70%);
    animation: counterPulse 3s ease-in-out infinite;
}

@keyframes counterPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* AI Features Gradient Text */
.ai-gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 4s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(180deg); }
}

/* Interactive CTA Button Enhancements */
.cta-enhanced {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: all 0.3s ease;
}

.cta-enhanced::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    border-radius: 50%;
    transition: transform 0.5s ease;
}

.cta-enhanced:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

.cta-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(79, 70, 229, 0.4);
}

/* Testimonial Card Enhanced */
.testimonial-card {
    position: relative;
    transition: all 0.4s ease;
}

.testimonial-card::after {
    content: '"';
    position: absolute;
    top: -10px;
    left: 20px;
    font-size: 4rem;
    color: rgba(79, 70, 229, 0.1);
    font-family: serif;
    line-height: 1;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Integration Hub Styles */
.integration-category {
    position: relative;
    transition: all 0.3s ease;
}

.integration-category::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(59, 130, 246, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.integration-category:hover::before {
    opacity: 1;
}

/* Trends Section Enhancements */
.trend-card {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.trend-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 4px 4px 0 0;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
}

.trend-card:hover::before {
    transform: scaleX(1);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .floating-element {
        animation-duration: 4s;
    }
    
    .premium-card:hover {
        transform: translateY(-6px) scale(1.01);
    }
    
    .hero-bg-effect {
        animation-duration: 6s;
    }
    
    /* Make spinning circles more visible on mobile */
    .spinning-circle {
        border-color: rgba(30, 192, 141, 0.4) !important;
        border-width: 2px !important;
    }
    
    .spinning-circle.outer {
        border-color: rgba(29, 120, 97, 0.3) !important;
    }
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .floating-element,
    .hero-bg-effect,
    .ai-gradient-text {
        animation: none !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .premium-card {
        border: 2px solid currentColor;
    }
    
    .cta-enhanced {
        border: 2px solid #ffffff;
    }
}

/* Dark Theme Enhancements */
.dark .demo-interface {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark .currency-toggle {
    background: linear-gradient(135deg, #334155, #475569);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.1);
}

.dark .currency-toggle::before {
    background: linear-gradient(135deg, #475569, #64748b);
}

/* Simple Navbar Controls - Force proper alignment */
.buy-button {
    display: flex !important;
    align-items: center !important;
    line-height: normal !important;
    height: auto !important;
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
}

/* Language Dropdown */
#langDropdown {
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.dark #langDropdown {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Hide mobile language switcher on desktop - force hide regardless of navigation state */
@media (min-width: 991px) {
    .mobile-lang-switcher,
    #navigation .mobile-lang-switcher,
    .navigation-menu .mobile-lang-switcher {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Show mobile language switcher only on mobile/tablet */
@media (max-width: 991px) {
    .mobile-lang-switcher {
        display: block !important;
        visibility: visible !important;
    }
}

/* Ensure proper spacing on mobile */
@media (max-width: 768px) {
    .buy-button .flex {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }
    
    .buy-button .lang-text {
        display: none;
    }
    
    .buy-button #currentLang {
        padding: 0.25rem 0.5rem;
    }
}

/* FAQ Accordion, UAE Card & Who We Are Card VoIP Theme Hover Effects */
.faq-card, .uae-card, .who-we-are-card {
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.faq-card::before, .uae-card::before, .who-we-are-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--voip-link), var(--voip-primary));
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.faq-card:hover::before, .uae-card:hover::before, .who-we-are-card:hover::before,
.faq-card.faq-open::before {
    opacity: 0.2;
}

.faq-card:hover, .uae-card:hover, .who-we-are-card:hover {
    border-color: var(--voip-link);
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(30, 192, 141, 0.15);
}

/* FAQ Accordion Specific Styles */
.faq-card.accordion-card {
    transition: all 0.3s ease;
}

.faq-card.faq-open {
    border-color: var(--voip-link);
    box-shadow: 0 5px 15px rgba(30, 192, 141, 0.1);
}

.faq-card.faq-open:hover {
    transform: none; /* Disable lift animation when open */
}

.faq-header {
    transition: all 0.3s ease;
}

.faq-header:hover {
    background: rgba(30, 192, 141, 0.05);
}

.faq-content {
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Arrow animation */
.faq-header .uil-angle-down {
    transition: transform 0.3s ease;
}

.faq-open .faq-header .uil-angle-down {
    transform: rotate(180deg);
}

/* Override any existing indigo hover effects */
.faq-card:hover, .uae-card:hover, .who-we-are-card:hover {
    border-color: var(--voip-link) !important;
}

/* VoIP Theme Slider Styles */
.voip-slider {
    -webkit-appearance: none;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
}

.voip-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--voip-primary) 0%, var(--voip-link) 100%);
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(30, 192, 141, 0.3);
}

.voip-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--voip-primary) 0%, var(--voip-link) 100%);
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 8px rgba(30, 192, 141, 0.3);
}

.voip-slider::-webkit-slider-track {
    background: linear-gradient(to right, var(--voip-link) 0%, var(--voip-link) var(--value, 50%), rgba(255, 255, 255, 0.2) var(--value, 50%), rgba(255, 255, 255, 0.2) 100%);
    height: 6px;
    border-radius: 3px;
}

/* Print Styles */
@media print {
    .floating-element,
    .demo-interface,
    .cta-enhanced,
    .language-switcher,
    #themeToggle {
        display: none !important;
    }
    
    section {
        break-inside: avoid;
        margin-bottom: 2rem;
    }
}