/* 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 */
}

/* --- CORRECTED PRICING CARD STYLING --- */
.pricing-card-v2 {
    background-color: #ffffff;
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: all 0.3s ease-out;
}

.dark .pricing-card-v2 {
    background-color: #1e293b; /* dark:bg-slate-800 */
}

.pricing-card-v2:hover {
    transform: translateY(-0.5rem); /* transform -translate-y-2 */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
}

/* --- Popular Plan Highlighting --- */
.pricing-card-v2.popular {
    /* ring-2 ring-blue-500 */
    box-shadow: 0 0 0 2px #3b82f6, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    background-color: rgba(59, 130, 246, 0.05); /* Translucent blue highlight */
}
.dark .pricing-card-v2.popular {
    background-color: rgba(59, 130, 246, 0.1); /* Slightly more opaque for dark mode */
}
.pricing-card-v2.popular:hover {
     /* Combine hover and popular styles */
    transform: translateY(-0.5rem);
    box-shadow: 0 0 0 2px #3b82f6, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* --- Pro Plan Highlighting --- */
.pricing-card-v2.pro-plan {
    box-shadow: 0 0 0 2px #9333ea, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    background-color: rgba(147, 51, 234, 0.05); /* Translucent purple highlight */
}
.dark .pricing-card-v2.pro-plan {
    background-color: rgba(147, 51, 234, 0.1);
}
.pricing-card-v2.pro-plan:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 0 0 2px #9333ea, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}


.pricing-card-v2 .p-8 {
    flex-grow: 1; /* flex-grow */
}

/* --- Card Header Styling --- */
.card-header-pro {
    background-color: #2563eb; /* bg-blue-600 */
    color: #ffffff; /* text-white */
    font-weight: 700; /* font-bold */
    padding: 0.75rem; /* p-3 */
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em; /* tracking-widest */
    font-size: 0.75rem; /* text-xs */
}
.card-header-lifetime {
    background-color: #9333ea; /* bg-purple-600 */
    color: #ffffff; /* text-white */
    font-weight: 600; /* font-semibold */
    padding: 0.5rem; /* p-2 */
    text-align: 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: center;
    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;
    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;
}