html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    min-height: 100vh;
}

/* Ensure proper footer positioning */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-main {
    flex: 1;
}

/* Remove extra spacing on mobile */
@media (max-width: 1279px) {
    body {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Ensure no extra space after footer */
footer {
    margin-bottom: 0 !important;
}



/* Compact calculation boxes - remove unnecessary spacing */
.bg-white.shadow-lg.rounded-xl {
    padding: 1rem !important;
    margin-bottom: 1.5rem !important;
}

/* Compact form spacing */
form .space-y-6 > * + * {
    margin-top: 1rem !important;
}

form .space-y-4 > * + * {
    margin-top: 0.75rem !important;
}

/* Compact grid gaps */
.grid.gap-8 {
    gap: 1.5rem !important;
}

.grid.gap-6 {
    gap: 1rem !important;
}

.grid.gap-4 {
    gap: 0.75rem !important;
}

/* Compact margins for calculation elements */
.mb-8 {
    margin-bottom: 1.5rem !important;
}

.mb-6 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 0.75rem !important;
}

.mt-8 {
    margin-top: 1.5rem !important;
}

.mt-6 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 0.75rem !important;
}

/* Compact padding for result boxes */
.bg-indigo-50,
.bg-purple-50,
.bg-blue-50,
.bg-green-50 {
    padding: 1rem !important;
}

/* Compact label spacing */
label.block {
    margin-bottom: 0.25rem !important;
}

/* Compact button spacing */
button[type="submit"] {
    margin-top: 1rem !important;
}

/* Remove excessive padding from prose content */
.prose {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Compact article spacing */
article {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

main.app-main {
    padding-top: 2rem !important;
}

/* Fix footer bottom spacing - remove any margin/padding after footer */
footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure body doesn't have extra bottom spacing */
body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* Hard stop: never allow visual gap under footer */
body > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
html, body {
    height: auto;
    padding-bottom: 0 !important; /* Force override Google AdSense padding */
    min-height: 100vh;
}
/* Google Anchor Ad Spacing Fix */
.google-auto-placed, 
.adsbygoogle-noablate {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* Ensure ads don't overflow on mobile */
.ad-container, ins.adsbygoogle {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
iframe[id^="google_ads_iframe"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
body > div[style*="height"][style*="bottom"] {
     /* Often Google adds a spacer div at the bottom */
     display: none !important;
     height: 0 !important;
}
footer {
    margin-top: 0 !important;
}



/* Remove any extra spacing from the last elements */
main.app-main > *:last-child {
    margin-bottom: 0 !important;
}



/* Ensure main content doesn't have bottom margin */
main.app-main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Force remove any bottom spacing from all elements */
* {
    box-sizing: border-box;
}

/* Ensure the last child of main has no bottom margin */
main.app-main > *:last-child,
main.app-main > *:last-child > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}



/* Custom scrollbar for dropdown menus */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Firefox scrollbar */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

/* Hide Google Offerwall / Rewarded Ads / Fullscreen Overlays / Funding Choices */
#goog_fullscreen_ad,
.google-auto-placed .ap_container,
iframe[name^="google_fc_"],
iframe[src*="fundingchoices"],
.fc-ab-root,
.fc-dialog-container,
.fc-dialog-overlay,
.fc-dialog,
.fc-choice-dialog,
.fc-consent-root,
#credential_picker_container,
div[id^="google_rewarded_"],
div[class^="google_rewarded_"],
google-fc-dialog,
.google-fc-dialog,
div[style*="z-index: 2147483647"],
div[style*="z-index: 2000000000"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -9999 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

html, body {
    overflow: auto !important; /* Prevent scroll lock from Google Ads */
    position: static !important; /* Prevent body lock */
}

/* Fix Search Input Z-Index to prevent overlay issues */
#heroSearchInput {
    position: relative;
    z-index: 50 !important;
}

/* Ensure Search Results are above everything else */
#searchResults {
    z-index: 1001 !important;
}

/* Fix Header Z-Index explicitly */
header.sticky {
    z-index: 1000 !important;
}

/* Restored Component Classes */
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-input, .form-select, .form-textarea {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    padding: 0.75rem 1rem;
    color: #111827;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: #6366f1;
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #4f46e5;
    color: white;
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
}

.btn-primary:hover {
    background-color: #4338ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.card {
    background-color: white;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
    display: block;
    transition: all 0.2s;
}

.card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}


/* Enhanced Input Visibility */
.form-input, select, input[type='text'], input[type='number'], input[type='email'], textarea {
    border: 2px solid #94a3b8 !important; /* Darker border (slate-400) for high visibility */
    background-color: #f8fafc !important; /* Slight off-white background (slate-50) */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease-in-out !important;
    color: #0f172a !important; /* Darker text */
}

.form-input:focus, select:focus, input:focus, textarea:focus {
    border-color: #4f46e5 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.2) !important; /* Larger shadow ring */
    outline: none !important;
}

/* Enhanced Card Visibility for Category Pages */
.card {
    background-color: #ffffff;
    border: 2px solid #cbd5e1 !important; /* Thicker and darker border (slate-300) */
    border-radius: 1rem; /* More rounded */
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.card:hover {
    border-color: #4f46e5;
    background-color: #f5f7ff; /* Very light blue tint on hover */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Deeper shadow */
    transform: translateY(-4px); /* Higher lift */
}

.card h2 {
    color: #1e293b; /* Slate 800 */
}

.card p {
    color: #475569; /* Slate 600 */
}