/* WageeIncome Global Styles */
:root {
  --color-primary: #FFFFFF; /* Primary White */
  --color-text: #1E293B; /* Deep Slate */
  --color-accent: #0D9488; /* Teal Accent */
  --color-brand: #6366F1; /* Ninetiinine Suite Electric Violet */
}

body { 
    font-family: 'Inter', sans-serif; 
    overflow-x: hidden; 
}

.fade-in { 
    animation: fadeIn 0.5s ease-in-out; 
    will-change: transform, opacity; 
}
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.number-input::-webkit-outer-spin-button, 
.number-input::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.number-input { 
    -moz-appearance: textfield; 
}

.prose-content h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; color: #1E293B; }
.prose-content h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.75rem; color: #334155; }
.prose-content p { margin-bottom: 1.25rem; line-height: 1.75rem; color: #475569; }
.prose-content ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.prose-content li { margin-bottom: 0.5rem; color: #475569; }
.prose-content blockquote { border-left: 4px solid #6366F1; padding-left: 1rem; font-style: italic; color: #64748b; margin: 1.5rem 0; }
.dark .prose-content h2, .dark .prose-content h3 { color: #f1f5f9; }
.dark .prose-content p, .dark .prose-content li { color: #cbd5e1; }

/* Modal Animation */
#blogModal { transition: opacity 0.3s ease; will-change: opacity; }
#blogModal > div { transition: transform 0.3s ease; will-change: transform; }

/* Ad Container Styling */
/* Transparent and borderless. Collapses to 0px height if the ad is blocked. */
.ad-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
    background: transparent;
    border: none;
}