/* static/css/main.css */

/* Custom styles on top of Tailwind */
.btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200;
}

.btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-800 hover:bg-gray-300;
}
.btn-how-it-works {
    display: inline-block;
    background-color: #3182ce; /* Changed to a more vibrant blue */
    color: white;
    padding: 14px 28px; /* Increased padding for better visibility */
    border-radius: 8px; /* Slightly rounder corners */
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem; /* Slightly larger font */
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
}

.btn-how-it-works:hover {
    background-color: #2b6cb0; /* Darker blue on hover */
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); /* Enhanced shadow on hover */
}

.btn-how-it-works-secondary {
    background-color: transparent;
    border: 1px solid #3182ce; /* Changed border color to match primary */
    color: #3182ce; /* Changed text color to match primary */
}

.btn-how-it-works-secondary:hover {
    background-color: rgba(49, 130, 206, 0.1); /* Very light blue background on hover */
}

.btn-how-it-works-block {
    display: block;
    width: 100%;
    margin-top: 20px;
}

.card {
    @apply bg-white rounded-lg shadow-md p-6;
}

.form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

.alert {
    @apply p-4 rounded-lg mb-4;
}

.alert-success {
    @apply bg-green-100 text-green-800 border border-green-200;
}

.alert-error {
    @apply bg-red-100 text-red-800 border border-red-200;
}

/* Navigation */
.nav-link {
    @apply px-4 py-2 text-gray-700 hover:text-blue-600 transition-colors duration-200;
}

/* Dashboard components */
.dashboard-card {
    @apply bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-200;
}

.stat-value {
    @apply text-3xl font-bold text-gray-900;
}

.stat-label {
    @apply text-sm text-gray-500;
}

/* Subscription pricing tables */
.pricing-card {
    @apply bg-white rounded-lg shadow-lg p-6 border-2 border-transparent hover:border-blue-500 transition-all duration-200;
}

.pricing-popular {
    @apply border-blue-500 transform -translate-y-2;
}

/* Profile section */
.profile-section {
    @apply space-y-6 max-w-2xl mx-auto;
}

/* FAQ accordions */
.faq-question {
    @apply text-lg font-medium text-gray-900 cursor-pointer hover:text-blue-600;
}

.faq-answer {
    @apply mt-2 text-gray-600;
}




.prose {
    @apply text-gray-800;
}

.prose h1 {
    @apply text-3xl font-bold mb-4 mt-6;
}

.prose h2 {
    @apply text-2xl font-semibold mb-3 mt-5;
}

.prose h3 {
    @apply text-xl font-medium mb-2 mt-4;
}

.prose p {
    @apply mb-4 leading-relaxed;
}

.prose ul {
    @apply list-disc pl-5 mb-4;
}

.prose ol {
    @apply list-decimal pl-5 mb-4;
}

.prose li {
    @apply mb-1;
}

.prose blockquote {
    @apply border-l-4 border-gray-300 pl-4 italic my-4;
}

.prose code {
    @apply bg-gray-100 rounded px-1;
}

.prose pre {
    @apply bg-gray-100 p-4 rounded-lg mb-4 overflow-x-auto;
}

@keyframes slideIn {
    from {
        transform: translate(0, 100%);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translate(0, 0);
        opacity: 1;
    }

    to {
        transform: translate(0, 100%);
        opacity: 0;
    }
}

.animate-slideIn {
    animation: slideIn 0.3s ease-out forwards;
}

.animate-slideOut {
    animation: slideOut 0.3s ease-in forwards;
}

@keyframes slideInFromTop {
    0% {
        transform: translate(-50%, -100%);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

.fixed.bg-white {
    animation: slideInFromTop 0.3s ease-out forwards;
}

/* ADDITIONAL STYLES FOR LOVEBIRD LANDING PAGE */
/* These styles are additions only and don't modify existing styles */

/* Lovebird dark theme variants */
.card-dark {
    @apply bg-gray-900 rounded-lg shadow-md p-6 border border-gray-800;
}

.card-featured {
    @apply border-2 border-blue-500 relative;
}

/* Step components */
.step-number {
    @apply w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center font-bold mb-4;
}

/* Feature list */
.feature-list {
    @apply space-y-4 mb-8;
}

.feature-item {
    @apply flex items-start;
}

.feature-icon {
    @apply h-6 w-6 text-blue-400 mr-2 flex-shrink-0;
}

.feature-text {
    @apply text-gray-300;
}

/* Pricing components */
.price-display {
    @apply text-3xl font-bold text-blue-400 mb-2;
}

.price-period {
    @apply text-lg text-gray-400 font-normal;
}

.plan-footnote {
    @apply text-sm text-gray-400 italic mt-4;
}

/* Guarantee section */
.guarantee-box {
    @apply max-w-3xl mx-auto mt-12 bg-gray-800 bg-opacity-50 rounded-lg p-6 border border-gray-700 text-center;
}

.guarantee-checkmark {
    @apply text-2xl text-green-400 mb-2;
}

/* Dark theme elements */
.bg-gradient-dark {
    @apply bg-gradient-to-r from-gray-900 to-gray-800;
}

.border-subtle {
    @apply border border-gray-700;
}

/* Custom animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Dark theme text utilities */
.text-dark-primary {
    @apply text-white;
}

.text-dark-secondary {
    @apply text-gray-300;
}

.text-dark-muted {
    @apply text-gray-400;
}

/* Fixed responsive adjustments specifically for landing page */
@media (max-width: 768px) {
    .landing-grid {
        @apply gap-6;
    }

    .landing-btn {
        @apply w-full mb-2;
    }
}

/* Legal Document Styling */
.legal-document {
    @apply text-gray-800 leading-relaxed;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    line-height: 1.7;
}

.legal-document h1 {
    @apply text-4xl font-bold text-gray-900 mb-8 mt-0 pb-4 border-b border-gray-200;
}

.legal-document h2 {
    @apply text-2xl font-semibold text-gray-900 mb-6 mt-12;
}

.legal-document h3 {
    @apply text-xl font-semibold text-gray-800 mb-4 mt-8;
}

.legal-document h4 {
    @apply text-lg font-medium text-gray-800 mb-3 mt-6;
}

.legal-document p {
    @apply mb-6 text-gray-700;
    font-size: 16px;
}

.legal-document ul, .legal-document ol {
    @apply mb-6 pl-6;
}

.legal-document ul {
    @apply list-disc;
}

.legal-document ol {
    @apply list-decimal;
}

.legal-document li {
    @apply mb-2 text-gray-700;
    font-size: 16px;
}

.legal-document li > ul, .legal-document li > ol {
    @apply mt-2 mb-2;
}

.legal-document blockquote {
    @apply border-l-4 border-blue-500 pl-6 py-2 my-6 bg-gray-50 text-gray-700 italic;
}

.legal-document strong, .legal-document b {
    @apply font-semibold text-gray-900;
}

.legal-document em, .legal-document i {
    @apply italic;
}

.legal-document code {
    @apply bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono;
}

.legal-document pre {
    @apply bg-gray-100 p-4 rounded-lg my-6 overflow-x-auto;
}

.legal-document pre code {
    @apply bg-transparent p-0;
}

.legal-document a {
    @apply text-blue-600 hover:text-blue-800 underline;
}

.legal-document hr {
    @apply border-gray-300 my-8;
}

.legal-document table {
    @apply w-full border-collapse border border-gray-300 my-6;
}

.legal-document th, .legal-document td {
    @apply border border-gray-300 px-4 py-2 text-left;
}

.legal-document th {
    @apply bg-gray-100 font-semibold;
}