/* invitequick.online - Custom Styles (Minified) */

/* Custom Variables */
:root{
--primary-red: rgb(220, 38, 38);
--primary-white: #ffffff;
--text-dark: rgb(31, 41, 55);
--text-gray: rgb(107, 114, 128);
}

/* Custom Animations */
@keyframes float{0%,100%{transform:translateY(0px)}50%{transform:translateY(-10px)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}

/* Animate Float Class */
.animate-float{animation:float 4s ease-in-out infinite;will-change:transform}

/* Header Scroll Effect */
.header.scrolled,#header.scrolled{background:rgba(255,255,255,0.98)!important;box-shadow:0 2px 20px rgba(0,0,0,0.15)!important}

/* Nav Link Hover Effect */
.nav-link{position:relative}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--primary-red);transition:width 0.3s ease}
.nav-link:hover::after{width:100%}

/* Mobile Menu Transitions */
.mobile-menu-overlay.active{opacity:1!important;visibility:visible!important}
.mobile-menu.active{transform:translateX(0)!important}

/* Hero Section Custom Styles */
#typed-text{color:var(--primary-red)}

/* Pricing Card Custom Hover Effects */
.pricing-btn{transition:all 0.3s ease}
.pricing-card:hover .pricing-btn{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.15)}

/* Template Card Rating Stars */
.template-card .fa-star{transition:color 0.2s ease}
.template-card:hover .fa-star{color:#fbbf24!important}

/* WhatsApp Float Animation */
.whatsapp-float a{animation:bounce-slow 3s infinite}
@keyframes bounce-slow{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}

/* Testimonial Card Enhancement */
.testimonial-card .testimonial-avatar{transition:transform 0.3s ease}
.testimonial-card:hover .testimonial-avatar{transform:scale(1.1)}

/* FAQ Section Styles */
.faq-toggle{transition:all 0.3s ease}
.faq-toggle:hover{background-color:rgba(239,246,255,0.5)}
.faq-toggle i{transition:all 0.3s ease}
.faq-content{overflow:hidden}

/* Loading Performance Optimization */
.lazy-loading{opacity:0;transition:opacity 0.5s ease}
.lazy-loaded{opacity:1}

/* Critical CSS - Above the fold styles */
.hero-section{min-height:100vh}
.nav-links{display:none}
@media (min-width: 768px){
  .nav-links{display:flex}
}

/* Print styles for SEO */
@media print{
  .whatsapp-float,.mobile-menu-btn{display:none!important}
  .hero-section{min-height:auto}
}

/* Custom Gradient Text */
.gradient-text{background:linear-gradient(135deg,var(--primary-red),rgb(239,68,68));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Swiper Custom Navigation */
.swiper-button-next:after,.swiper-button-prev:after{font-size:20px!important;font-weight:800}
.swiper-pagination-bullet{background:var(--primary-red)!important;opacity:0.3!important}
.swiper-pagination-bullet-active{opacity:1!important}

/* Custom Scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:rgb(243,244,246)}
::-webkit-scrollbar-thumb{background:var(--primary-red);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgb(185,28,28)}

/* Loading Animation */
.loading{animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite}

/* Counter Animation */
.counter{display:inline-block}

/* Hero Stats Animation */
.hero-stats{animation:fadeInUp 0.8s ease-out 1s both}

/* Custom Button Effects */
.btn-gradient{background:linear-gradient(135deg,var(--primary-red),rgb(239,68,68));transition:all 0.3s ease}
.btn-gradient:hover{background:linear-gradient(135deg,rgb(185,28,28),var(--primary-red));transform:translateY(-2px);box-shadow:0 10px 30px rgba(220,38,38,0.3)}

/* Parallax Effect */
.parallax{transform:translateZ(0);will-change:transform}

/* AOS Custom Animations */
[data-aos="fade-up"]{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease,transform 0.6s ease}
[data-aos="fade-up"].aos-animate{opacity:1;transform:translateY(0)}
[data-aos="fade-left"]{opacity:0;transform:translateX(-30px);transition:opacity 0.6s ease,transform 0.6s ease}
[data-aos="fade-left"].aos-animate{opacity:1;transform:translateX(0)}
[data-aos="fade-right"]{opacity:0;transform:translateX(30px);transition:opacity 0.6s ease,transform 0.6s ease}
[data-aos="fade-right"].aos-animate{opacity:1;transform:translateX(0)}

/* Performance Optimizations */
.feature-card,.template-card,.pricing-card,.testimonial-card{will-change:transform;backface-visibility:hidden}

/* Custom Focus States - Remove residual clicks */
button:focus,a:focus{outline:none!important}
button:active,a:active{outline:none!important}
button,a{-webkit-tap-highlight-color:transparent!important}

/* Smooth Navigation - No Residuals */
.nav-link:focus,.nav-link:active{outline:none!important;background:none!important}
.nav-link.active{color:var(--primary-red)!important}

/* Print Styles */
@media print{.fixed,.absolute,.whatsapp-float{display:none!important}.bg-gradient-to-br,.bg-gradient-to-r{background:white!important;color:black!important}}

/* High Contrast Mode Support */
@media (prefers-contrast: high){.text-gray-600{color:rgb(75,85,99)!important}.text-gray-500{color:rgb(107,114,128)!important}}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}

/* Dark Mode Support (Future) */
@media (prefers-color-scheme: dark){.dark-mode-ready{filter:brightness(0.9)}}

/* Mobile Optimizations */
@media (max-width: 768px){
.container{padding-left:1rem;padding-right:1rem}
.text-5xl{font-size:2.5rem}
.text-4xl{font-size:2rem}

/* Optimize floating elements for mobile */
.animate-float{animation-duration:3s;animation-timing-function:ease-in-out}

/* Hide decorative floating backgrounds on mobile */
.absolute.bg-red-100,.absolute.bg-red-200,.absolute.bg-yellow-200,.absolute.bg-white\/10{display:none!important}

/* Floating response cards mobile optimization */
.hero-section .animate-float{max-width:160px!important;padding:0.5rem!important}
.hero-section .animate-float .text-sm{font-size:0.75rem!important}
.hero-section .animate-float .text-xs{font-size:0.625rem!important}
.hero-section .animate-float .w-10{width:1.5rem!important;height:1.5rem!important}
.hero-section .animate-float .w-8{width:1.5rem!important;height:1.5rem!important}

/* Prevent horizontal overflow */
.relative .absolute{max-width:calc(100vw - 2rem)!important}
}

/* Touch Optimizations - Remove tap highlights */
*{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

/* Allow text selection for content */
p,span,h1,h2,h3,h4,h5,h6{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.hero-mockup,.template-card img{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}}

/* Custom Selection */
::selection{background:var(--primary-red);color:white}
::-moz-selection{background:var(--primary-red);color:white}