/* Custom Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
/* @import "tailwindcss"; */

:root {
    --trust-blue: #2563EB;
    --emerald-green: #10B981;
    --slate-grey: #475569;
}

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

/* Hide all page sections by default */
.page-section {
    display: none;
}

/* Show active page section */
.page-section.active {
    display: block;
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, var(--trust-blue) 0%, var(--emerald-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero Calendar Animation */
.calendar-visual {
    animation: float 6s ease-in-out infinite;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }

.fade-in-up {
    animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(1deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

.glow-card {
    position: relative;
    z-index: 10;
}

.glow-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #3b82f6, #10b981, #3b82f6, #6366f1);
    background-size: 400% 400%;
    z-index: -1;
    border-radius: inherit;
    filter: blur(8px);
    opacity: 0.15;
    animation: glow-gradient 6s linear infinite;
}

@keyframes glow-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-pulse-subtle {
    animation: pulse-subtle 4s ease-in-out infinite;
}

@keyframes pulse-subtle {
    0%, 100% { transform: scale(1.05); }
    50% { transform: scale(1.08); }
}

/* Chatbot Button Pulse */
#chatbot-toggle {
    animation: pulse-shadow 3s infinite;
}

@keyframes pulse-shadow {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* Chat Window Transitions */
#chat-window {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 400px;
    max-height: 700px;
    height: calc(100vh - 120px);
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(20px) scale(0.95);
    opacity: 0;
}

#chat-window.open {
    display: flex;
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Mobile specific chatbot sizing */
@media (max-width: 640px) {
    #chat-window {
        width: 100% !important;
        height: 100% !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        top: 0 !important;
        border-radius: 0 !important;
        max-height: none !important;
    }
    
    #chatbot-toggle {
        width: 56px !important;
        height: 56px !important;
    }
}

/* Accessibility: Larger buttons for touch */
#chat-send {
    min-width: 44px;
    min-height: 44px;
}

#chat-input {
    font-size: 16px !important; /* Prevent iOS zoom on focus */
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* App Store Badge Hover */
.h-12 {
    transition: transform 0.2s ease;
}

.h-12:hover {
    transform: translateY(-2px);
}

/* Benefit Card Hover Effect */
.benefit-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Service Category Box Hover Effect */
.service-box {
    transition: all 0.3s ease;
}

.service-box:hover {
    transform: scale(1.02);
    background-color: white;
    border-color: var(--trust-blue);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Modal Animation */
@keyframes modal-enter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-modal-enter {
    animation: modal-enter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Marquee Animation */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes fade-in-right {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in-left {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-fade-in-right {
    animation: fade-in-right 0.3s ease-out forwards;
}

.animate-fade-in-left {
    animation: fade-in-left 0.3s ease-out forwards;
}

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* Image Hover Effect in SEO Template */
.seo-image-container {
    overflow: hidden;
    border-radius: 2.5rem;
}

.seo-image-container img {
    transition: transform 0.5s ease;
}

.seo-image-container:hover img {
    transform: scale(1.1);
}