/* Sets the primary font for the entire website and improves text spacing */
body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
}

/* Enable smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar for a more modern feel in WebKit browsers (Chrome, Safari) */
::-webkit-scrollbar { 
    width: 8px; 
}
::-webkit-scrollbar-track { 
    background: #1e293b; /* Dark track for the scrollbar */
}
::-webkit-scrollbar-thumb { 
    background: #334155; /* The draggable scrolling handle */
    border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: #475569; /* Color of the handle on hover */
}

/* Utility class to hide sections of the page for the single-page navigation */
.hidden-page { 
    display: none; 
}

/* --- Animation Keyframes --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Animation Utility Classes --- */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Adds a smooth fade-in effect to all pages when they are displayed */
.page {
    animation: fadeInUp 0.6s ease-out;
}


/* --- FAQ Section Styling (Smooth Slide Animation) --- */
details summary {
    list-style: none; /* Remove default marker */
    display: flex;
    align-items: center;
    cursor: pointer;
}
details summary::-webkit-details-marker {
    display: none; /* Hide default marker for Safari */
}
details summary::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid currentColor; /* Use currentColor to match text color */
    margin-right: 0.75rem;
    transition: transform 0.2s ease-in-out;
}

details[open] > summary::before {
    transform: rotate(90deg);
}

details .faq-content {
    display: grid;
    grid-template-rows: 0fr; /* Start with content collapsed */
    transition: grid-template-rows 0.3s ease-out;
}

details[open] .faq-content {
    grid-template-rows: 1fr; /* Expand to full height */
}

.faq-content > div {
    overflow: hidden;
}


/* --- Modal/Popup Styling --- */
#info-modal.hidden {
    display: none;
}
#info-modal {
    display: flex; /* Use flex for centering */
}

/* --- Base Pricing Card Styling --- */
.pricing-card-v2 {
    @apply bg-white dark:bg-slate-800 rounded-2xl shadow-lg flex flex-col justify-between overflow-hidden transition-all duration-300 ease-out;
}
.pricing-card-v2:hover {
    @apply transform -translate-y-2 shadow-2xl;
}
.pricing-card-v2.popular {
    @apply ring-2 ring-blue-500;
}
.pricing-card-v2 .p-8 {
    @apply flex-grow;
}
.card-header-pro {
    @apply bg-blue-500 text-white font-semibold p-2 text-center;
}
.card-header-lifetime {
    @apply bg-purple-600 text-white font-semibold p-2 text-center;
}

/* --- Enhanced Pricing Section Styling --- */
.pricing-header {
    min-height: 140px; /* Ensures all headers are the same height for alignment */
}

.feature-list {
    list-style: none;
    padding-left: 0;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    line-height: 1.5;
    color: #475569; /* text-slate-600 */
}

.dark .feature-list li {
    color: #94a3b8; /* dark:text-slate-400 */
}

.feature-list li i {
    font-size: 1.25rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

/* Styling for the "COMING SOON" badge */
.badge {
    margin-left: auto;
    align-self: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    background-color: #fef9c3; /* yellow-100 */
    color: #a16207; /* yellow-700 */
    border: 1px solid #fde047; /* yellow-400 */
    flex-shrink: 0; /* Prevents the badge from wrapping to a new line */
}

.dark .badge {
    background-color: #422006; /* A darker yellow for dark mode */
    color: #fef08a; /* A lighter yellow text for dark mode */
    border-color: #ca8a04;
}