/*
Theme Name: BookingFixR
Theme URI: https://yourwebsite.com
Author: Your Name
Author URI: https://yourwebsite.com
Description: A WordPress theme for BookingFixR booking management system
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bookingfixr
*/

body {
            font-family: 'Inter', sans-serif;
            background-color: #0A192F; /* Deep Navy */
            color: #CCD6F6; /* Light Gray */
            line-height: 1.6;
            overflow-x: hidden; /* Prevent horizontal scroll from animations */
        }
        .bg-primary {
            background-color: #0A192F;
        }
        .bg-secondary {
            background-color: #172A45; /* Slightly Lighter Blue */
        }
        .text-accent {
            color: #64FFDA; /* Electric Green/Cyan */
        }
        .border-accent {
            border-color: #64FFDA;
        }
        .ai-gradient-text {
            background: linear-gradient(45deg, #64FFDA, #A6E1FA); /* Cyan to Light Blue */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
        }
        .btn-primary {
            background-color: #64FFDA;
            color: #0A192F;
            font-weight: 700;
            padding: 0.75rem 2rem;
            border-radius: 9999px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(100, 255, 218, 0.4);
        }
        .btn-primary:hover {
            background-color: #4CAF9D; /* Slightly darker green */
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(100, 255, 218, 0.6);
        }
        .btn-secondary {
            background-color: #172A45;
            color: #64FFDA;
            font-weight: 600;
            padding: 0.75rem 2rem;
            border-radius: 9999px;
            border: 1px solid #64FFDA;
            transition: all 0.3s ease;
        }
        .btn-secondary:hover {
            background-color: #64FFDA;
            color: #0A192F;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(100, 255, 218, 0.4);
        }

        /* Background Animation for Hero */
        .hero-animation-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
            opacity: 0.1; /* Subtle effect */
        }
        .booking-icon {
            position: absolute;
            font-size: 3rem; /* Larger icons */
            color: #A6E1FA; /* Lighter blue for icons */
            animation: float 20s infinite ease-in-out;
            opacity: 0; /* Start hidden */
            filter: blur(1px); /* Soft blur */
        }

        @keyframes float {
            0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100vh) translateX(50vw) rotate(360deg); opacity: 0; }
        }

        /* Delay animations for different icons */
        .booking-icon:nth-child(1) { animation-delay: 0s; left: 10%; }
        .booking-icon:nth-child(2) { animation-delay: 5s; left: 30%; font-size: 4rem; }
        .booking-icon:nth-child(3) { animation-delay: 10s; left: 50%; }
        .booking-icon:nth-child(4) { animation-delay: 15s; left: 70%; font-size: 3.5rem; }
        .booking-icon:nth-child(5) { animation-delay: 20s; left: 90%; }
        .booking-icon:nth-child(6) { animation-delay: 25s; left: 20%; font-size: 4.2rem; }
        .booking-icon:nth-child(7) { animation-delay: 30s; left: 80%; }
        .booking-icon:nth-child(8) { animation-delay: 35s; left: 40%; font-size: 3.8rem; }


        /* FAQ specific styles */
        .faq-item {
            background-color: #172A45; /* Secondary background */
            border: 1px solid rgba(100, 255, 218, 0.2); /* Accent border with opacity */
            border-radius: 0.5rem;
            margin-bottom: 1rem;
            overflow: hidden;
            transition: all 0.3s ease-in-out;
        }
        .faq-item summary {
            padding: 1rem 1.5rem;
            cursor: pointer;
            font-weight: 600;
            color: #64FFDA; /* Accent color for question */
            display: flex;
            justify-content: space-between;
            align-items: center;
            outline: none; /* Remove default focus outline */
        }
        .faq-item summary::-webkit-details-marker {
            display: none; /* Hide default marker */
        }
        .faq-item summary:hover {
            background-color: rgba(100, 255, 218, 0.05); /* Subtle hover effect */
        }
        .faq-item summary svg {
            transition: transform 0.3s ease-in-out;
        }
        .faq-item[open] summary svg {
            transform: rotate(180deg);
        }
        .faq-item-content {
            padding: 0 1.5rem 1rem;
            color: #CCD6F6; /* Light text for answer */
            border-top: 1px solid rgba(100, 255, 218, 0.1); /* Subtle separator */
        }

        /* Pricing Table */
        .pricing-card {
            background-color: #172A45;
            border-radius: 0.75rem;
            padding: 2rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .pricing-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
        }
        .pricing-card.featured {
            border: 2px solid #64FFDA;
            box-shadow: 0 10px 30px rgba(100, 255, 218, 0.3);
        }
        .pricing-card.featured:hover {
            box-shadow: 0 15px 40px rgba(100, 255, 218, 0.5);
        }

        /* Video Section Specific Styles */
        .video-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
            height: 0;
            overflow: hidden;
            border-radius: 0.75rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            border: 2px solid rgba(100, 255, 218, 0.5);
        }
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }