/* style.css */

/* --- Global & Base Styles (Light Theme) --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #F7FAFC; /* Very light gray/off-white for background */
    color: #2D3748; /* Dark gray for main text */
    min-height: 100vh;
    padding: 2rem; /* Existing padding */
    padding-top: 7rem; /* Increased padding to prevent content from going under sticky nav */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main-container {
    max-width: 1200px; /* Increased max-width for better use of space */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* Space between sections */
}

/* Specific styling for the country stats page container */
.main-container.country-stats-page {
    padding-top: 2rem; /* Add some top padding specific to this page */
}

/* --- Top Navigation Bar --- */
.top-nav {
    position: fixed; /* Make the navbar sticky */
    top: 0; /* Pin it to the top */
    width: 100%; /* Make it span the full width */
    /* max-width: 1200px; Removed to allow full width */
    background-color: #FFFFFF; /* Ensure it has a background when sticky */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Add a subtle shadow for depth */
    z-index: 1000; /* Ensure it stays on top of other content */
    display: flex;
    justify-content: space-between; /* Space between left (logo) and right (nav/search) */
    align-items: center;
    padding: 1rem 2rem; /* Increased horizontal padding */
    /* margin-bottom: 2rem; removed as it's fixed */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    /* border-radius: 0 0 1rem 1rem; Removed to have sharp bottom corners */
}

.nav-left {
    flex-shrink: 0; /* Don't shrink logo */
}

.logo-link {
    display: block; /* Ensure the image inside can be block-level */
}

/* Updated logo size and shape to be automatic */
.website-logo {
    max-height: 60px; /* Max height to ensure it fits nav */
    width: auto; /* Adjust width automatically based on aspect ratio */
    /* border-radius: 0.75rem; Removed */
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); Removed */
    /* transition: transform 0.2s ease-in-out; Removed */
}
.website-logo:hover {
    transform: none; /* Override previous hover to remove scale effect */
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Space between nav links and search */
    flex-wrap: wrap; /* Allow elements to wrap */
    justify-content: flex-end; /* Align to the right if wrapping occurs */
    margin-left: auto; /* Push to the right */
}

.nav-links {
    display: flex;
    gap: 1.5rem; /* Space between individual nav links */
}

.nav-link {
    color: #4A5568; /* Dark gray for links */
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 0.8rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.nav-link:hover {
    background-color: #E2E8F0; /* Light gray background on hover */
    color: #2D3748;
}

.search-bar-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    padding: 0.6rem 1rem;
    padding-right: 2.5rem; /* Space for icon */
    border: 1px solid #CBD5E0; /* Light gray border */
    border-radius: 9999px; /* Fully rounded */
    font-size: 0.9rem;
    color: #2D3748;
    background-color: #FFFFFF;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    width: 300px; /* Increased fixed width */
}
.search-input:focus {
    outline: none;
    border-color: #63B3ED; /* Blue border on focus */
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2); /* Soft blue shadow */
}
.search-input::placeholder {
    color: #A0AEC0;
}

.search-icon {
    position: absolute;
    right: 1rem;
    color: #A0AEC0; /* Light gray icon */
    pointer-events: none; /* Allows clicks to pass through to input */
}

/* Style for datalist suggestions - basic styling, browser-dependent */
datalist {
    position: absolute;
    background-color: white;
    border: 1px solid #E2E8F0;
    border-radius: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 100; /* Ensure it's on top */
}

datalist option {
    padding: 0.5rem 1rem;
    cursor: pointer;
}

datalist option:hover {
    background-color: #F0F4F8; /* Light hover background */
}


/* --- Header Section (for index.html) --- */
.header-section {
    margin-bottom: 3rem;
    text-align: center;
    background: linear-gradient(135deg, #E0F2F7, #B2EBF2); /* Light, subtle gradient */
    padding: 2.5rem 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.main-title {
    font-size: 4.5rem;
    font-weight: 900;
    letter-spacing: -0.07em;
    color: #1A202C;
    text-shadow: 3px 3px 10px rgba(0,0,0,0.15);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.subtitle {
    font-size: 1.6rem;
    font-weight: 600;
    color: #2C5282;
    margin-top: 0.5rem;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.08);
    margin-bottom: 2rem;
}

.website-context {
    max-width: 700px;
    margin: 0 auto 2.5rem auto;
    font-size: 1.15rem;
    color: #4A5568;
    line-height: 1.6;
}
.website-context p:first-child {
    font-weight: 500;
}
.website-context p:last-child {
    font-style: italic;
}

.support-nation-btn {
    display: inline-block;
    padding: 1.2rem 2.8rem;
    background: linear-gradient(45deg, #4299E1, #3182CE);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1.3rem;
    border-radius: 9999px;
    box-shadow: 0 8px 20px rgba(66, 153, 225, 0.3);
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    transform: scale(1);
    margin-top: 1.5rem;
}

.support-nation-btn:hover {
    background: linear-gradient(45deg, #3182CE, #2B6CB0);
    transform: scale(1.03) translateY(-2px);
    box-shadow: 0 10px 25px rgba(66, 153, 225, 0.4);
}

.support-nation-btn:active {
    transform: scale(0.98);
}


/* --- Loading Spinner --- */
.loading-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 50;
    transition: opacity 0.5s ease;
}
.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #3182CE;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}
.loading-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4A5568;
    margin-top: 1rem;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Custom Scrollbar (Light Theme Adaptation) --- */
.custom-scrollbar::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #E2E8F0;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #CBD5E0;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #A0AEC0;
}

/* --- Section Titles --- */
.section-title-top-contributors,
.section-title-patriots-charge {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #2D3748;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.08);
    position: relative;
    padding-bottom: 0.5rem;
}

.section-title-top-contributors::after,
.section-title-patriots-charge::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: #3182CE;
    border-radius: 2px;
}


/* --- Podium Showcase Section --- */
.podium-section {
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-top: 2rem;
}

.podium-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 320px; /* Increased height to accommodate larger podium spots and button */
    gap: 10rem;
    position: relative;
    padding-bottom: 70px; /* Increased space for the button below podium blocks */
}

.podium-spot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Pushes content and block to the bottom */
    position: relative; /* Context for absolute positioning of button */
    width: 180px; /* Increased width to utilize more horizontal space */
    /* No transform on .podium-spot itself for hover effect on bar */
    cursor: default; /* Default cursor for the whole spot, pointer for button */
    z-index: 10;
    overflow: visible; /* Ensure button can go outside block */
}
.podium-spot.spot-1 { order: 2; z-index: 12; }
.podium-spot.spot-2 { order: 1; z-index: 11; }
.podium-spot.spot-3 { order: 3; z-index: 11; }

/* Apply transform to clickable area, not whole spot */
.podium-clickable-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 1; /* Allows it to take available height */
    width: 100%; /* Ensure it spans the width of the spot */
    cursor: pointer; /* Change cursor for the clickable area */
    transition: transform 0.3s ease-out; /* Smooth transition for this element */
}
.podium-clickable-area:hover {
    transform: translateY(-8px); /* Moves the bar and content up */
}


.podium-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 0.5rem; /* Reduced margin to lessen white space */
    position: relative;
    z-index: 20;
    padding-top: 2rem; /* Increased padding at top of content to ensure gold medal room */
}

.podium-medal-rank {
    margin-bottom: 0.2rem; /* Adjusted margin */
}

.podium-rank {
    font-size: 2.8rem;
    font-weight: 800;
    color: #ECC94B;
    margin-bottom: 0.2rem; /* Adjusted margin */
    position: relative;
    z-index: 20;
    line-height: 1; /* Tighter line height for rank */
}
.podium-spot.spot-2 .podium-rank { color: #A0AEC0; }
.podium-spot.spot-3 .podium-rank { color: #B59C7D; }


.podium-flag {
    width: 90px; /* Increased flag width */
    height: 60px;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    margin-bottom: 0.5rem; /* Adjusted margin */
    transition: transform 0.2s ease-out;
}
.podium-spot:hover .podium-flag {
    transform: scale(1.1);
}

.podium-country-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2D3748;
    margin-bottom: 0.15rem; /* Adjusted margin */
    white-space: nowrap;
    overflow: hidden; /* Hide overflow if name is too long */
    text-overflow: ellipsis; /* Add ellipsis for long names */
}

.podium-support-amount {
    font-size: 1.125rem;
    font-weight: 700;
    color: #4CAF50;
    margin-bottom: 0.5rem; /* Adjusted margin */
}


.podium-block-container {
    position: relative;
    width: 100%;
    height: 100%; /* Will be overridden by JS for height animation */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    z-index: 10;
}

.podium-block {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Actual height set by JS */
    border-radius: 0.75rem 0.75rem 0 0;
    box-shadow: inset 0 5px 15px rgba(0,0,0,0.1);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: height 0.8s ease-out, transform 0.8s ease-out;
    border: 1px solid rgba(0,0,0,0.1);
    z-index: 5;
}

/* Podium block gradients */
.podium-block.bg-gradient-1 { background: linear-gradient(to top, #FFD700, #FFEA00); }
.podium-block.bg-gradient-2 { background: linear-gradient(to top, #C0C0C0, #E0E0E0); }
.podium-block.bg-gradient-3 { background: linear-gradient(to top, #CD7F32, #E6AF6D); }


.podium-support-btn {
    position: absolute; /* Position relative to .podium-spot */
    bottom: -60px; /* Adjusted to maintain consistent level below bars with more padding */
    left: 50%;
    transform: translateX(-50%); /* Base transform for centering */
    padding: 0.6rem 1.2rem;
    background-color: #3182CE;
    color: #FFFFFF;
    font-weight: 600;
    border-radius: 9999px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; /* Smooth transition for scale */
    border: none;
    cursor: pointer;
    font-size: 1rem;
    z-index: 15;
    white-space: nowrap; /* Prevent text wrapping */
}
.podium-support-btn:hover {
    background-color: #2B6CB0;
    transform: translateX(-50%) scale(1.05); /* Grow on hover, maintain center */
}


/* --- Carousel Section (for index.html) --- */
.carousel-section {
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    padding: 2rem;
    text-align: center;
}

.carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative;
}

.carousel-items-container {
    display: flex;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 1.25rem;
    padding: 0.5rem;
    width: calc(100% - 80px);
}

.carousel-item {
    flex: 0 0 auto;
    width: 160px;
    background-color: #F7FAFC;
    border-radius: 0.75rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    border: 1px solid #E2E8F0;
    position: relative; /* Needed for absolute positioning of the rank and arrow */
}
.carousel-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Performance Arrow Styling */
.performance-arrow-container {
    position: absolute;
    top: 8px; /* Adjust as needed */
    right: 8px; /* Adjust as needed */
    z-index: 10;
}

.performance-arrow {
    font-size: 1.2rem; /* Size of the arrow icon */
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: transform 0.2s ease-in-out;
}

.performance-arrow.arrow-up {
    color: #28a745; /* Green for up */
    background-color: rgba(40, 167, 69, 0.1); /* Light green background */
}

.performance-arrow.arrow-down {
    color: #dc3545; /* Red for down */
    background-color: rgba(220, 53, 69, 0.1); /* Light red background */
}

.performance-arrow.arrow-no-change {
    color: #6c757d; /* Gray for no change */
    background-color: rgba(108, 117, 125, 0.1); /* Light gray background */
}

.performance-arrow:hover {
    transform: scale(1.2); /* Slightly enlarge on hover */
}


.carousel-rank {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background-color: #3182CE;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.4rem;
    border-radius: 0.3rem;
    z-index: 5;
}

.carousel-flag {
    width: 60px;
    height: 40px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 0.75rem;
    margin-top: 1.5rem; /* Push flag down to make space for rank badge */
}

.carousel-country-name {
    font-weight: 600;
    color: #2D3748;
    margin-bottom: 0.25rem;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carousel-support-amount {
    font-weight: 700;
    color: #4CAF50;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.carousel-support-btn {
    padding: 0.4rem 0.8rem;
    background-color: #3182CE;
    color: #FFFFFF;
    font-weight: 600;
    border-radius: 9999px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
}
.carousel-support-btn:hover {
    background-color: #2B6CB0;
    transform: translateY(-1px);
}

.carousel-nav-btn {
    background-color: #CBD5E0;
    color: #4A5568;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}
.carousel-nav-btn:hover {
    background-color: #A0AEC0;
    transform: scale(1.05);
}
.carousel-nav-btn i {
    font-size: 1.25rem;
}

/* --- Footer Styling --- */
footer {
    padding-top: 1rem;
}

.footer-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5rem;
}

.footer-image-container {
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
}

.footer-image {
    width: auto;
    max-width: 150px;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    display: block;
    margin: 0 auto;
}

/* Social Media Icons */
.social-icons {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.social-icon-link {
    font-size: 1.8rem;
    color: #4A5568;
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.social-icon-link:hover {
    color: #3182CE;
    transform: translateY(-3px) scale(1.1);
}


/* --- View All Button (Consistent on all pages) --- */
/* This section is retained but the button is removed from HTML
.view-all-button-container {
    width: 100%;
    text-align: center;
}
.view-all-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(to right, #3182CE, #63B3ED);
    color: #FFFFFF;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    border: none;
    cursor: pointer;
    width: 100%;
    max-width: 400px;
    text-decoration: none;
}
.view-all-button:hover {
    background: linear-gradient(to right, #2B6CB0, #4C81CC);
    transform: translateY(-3px);
}
.view-all-button:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(66, 153, 225, 0.5);
}
*/

/* --- Country Stats Page Specific Styles --- */
.country-header-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 3rem;
    background-color: #FFFFFF;
    padding: 2.5rem;
    border-radius: 1rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 800px;
}

.country-header-flag {
    width: 120px;
    height: 80px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    margin-bottom: 1.5rem;
    border: 2px solid #E2E8F0;
}

.country-header-name {
    font-size: 3.5rem;
    font-weight: 800;
    color: #2D3748;
    line-height: 1.1;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.08);
}

.stats-cards-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    width: 100%;
    max-width: 1000px;
    margin-bottom: 3rem;
}

.stats-card {
    background-color: #FFFFFF;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease-in-out;
    border: 1px solid #E2E8F0;
}
.stats-card:hover {
    transform: translateY(-5px);
}

.stats-icon {
    font-size: 2.5rem;
    color: #4299E1;
    margin-bottom: 1rem;
}

.stats-label {
    font-size: 0.95rem;
    color: #718096;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stats-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: #2D3748;
    word-break: break-all;
}

.comments-section {
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    padding: 2rem;
    text-align: center;
    margin-bottom: 3rem;
}

.comments-carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative;
}

.comments-carousel-container {
    display: flex;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 1.5rem;
    padding: 0.5rem;
    width: calc(100% - 80px);
}

.comment-item {
    flex: 0 0 auto;
    width: 300px;
    background-color: #F7FAFC;
    border-radius: 0.75rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    border: 1px solid #E2E8F0;
}

.comment-text {
    font-size: 1.05rem;
    color: #2D3748;
    line-height: 1.5;
    margin-bottom: 1rem;
    font-style: italic;
}

.comment-author {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4A5568;
    margin-top: auto;
    margin-bottom: 0.25rem;
}

.comment-timestamp {
    font-size: 0.8rem;
    color: #718096;
}

/* --- Custom Message Box for Alerts --- */
.custom-message-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    border: 1px solid #CBD5E0;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    padding: 2rem;
    text-align: center;
    z-index: 1000; /* Ensure it's on top of everything */
    max-width: 400px;
    width: 90%;
}
.custom-message-box p {
    font-size: 1.1rem;
    color: #2D3748;
    margin-bottom: 1.5rem;
}
.custom-message-box-close {
    background-color: #3182CE;
    color: #FFFFFF;
    padding: 0.8rem 1.5rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s ease-in-out;
}
.custom-message-box-close:hover {
    background-color: #2B6CB0;
}

/* Styles for global_listing.html */

#leaderboard-section {
    width: 100%;
    max-width: 1200px; /* Match .main-container */
    margin: 0 auto; /* Center it */
}

/* In style.css */
#leaderboard-container.leaderboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    width: 100%; /* Ensure it takes full available width */
    box-sizing: border-box; /* Prevent padding/margin issues */
}

/* Leaderboard Card - based on carousel-item styling */
.leaderboard-card {
/*    flex: 0 0 auto; */ /* Keep card size consistent */
/*    width: 200px; */
    background-color: #F7FAFC;
    border-radius: 0.75rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    border: 1px solid #E2E8F0;
    position: relative;
}

.leaderboard-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Reuse rank badge style */
.leaderboard-card .carousel-rank {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background-color: #3182CE;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.4rem;
    border-radius: 0.3rem;
    z-index: 5;
}

/* Arrow positioning */
.leaderboard-card .performance-arrow-container {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

/* Styles for contribute.html */
#contribute-section {
    max-width: 600px;
    margin: 2rem auto;
    text-align: center;
    padding-top: 5rem; /* Account for fixed header */
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #2D3748;
    margin-bottom: 1.5rem;
}

.contribute-flag {
    max-width: 120px;
    height: auto;
    margin: 1rem auto;
}

.contribute-label {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: #4A5568;
    margin-bottom: 0.5rem;
}

.contribute-input {
    width: 100%;
    max-width: 300px;
    padding: 0.8rem;
    font-size: 1rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

.contribute-input:focus {
    outline: none;
    border-color: #3182CE;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
}

#contribute-message {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 500;
}

/* New styles for dropdown */
#country-dropdown-container {
    margin-bottom: 1rem;
}

#country-select {
    width: 100%;
    max-width: 300px;
    padding: 0.8rem;
    font-size: 1rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.5rem;
    background-color: #FFFFFF;
    color: #4A5568;
    box-sizing: border-box;
    appearance: none; /* Remove default browser styling */
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201L6%206L11%201%22%20stroke%3D%22%234A5568%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 8px;
}

#country-select:focus {
    outline: none;
    border-color: #3182CE;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
}

#country-select:invalid {
    color: #718096; /* Placeholder color for "Choose a country" */
}

#country-select option {
    color: #4A5568;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .top-nav {
        flex-direction: column;
        gap: 1rem;
        padding: 0.5rem 0;
        align-items: center;
    }
    .nav-left {
        width: 100%;
        text-align: center;
    }
    .nav-right {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        flex-direction: column;
        gap: 0.8rem;
    }
    .nav-links {
        gap: 1rem;
        justify-content: center;
    }
    .search-input {
        width: 100%;
        max-width: 250px;
    }

    .main-title {
        font-size: 2.8rem;
    }
    .subtitle {
        font-size: 1.2rem;
    }
    .website-context {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    .support-nation-btn {
        padding: 0.8rem 1.8rem;
        font-size: 1rem;
    }
    .section-title-top-contributors,
    .section-title-patriots-charge {
        font-size: 1.75rem;
        margin-bottom: 2.5rem;
    }
    .podium-section {
        padding-top: 1.5rem;
    }
    .podium-container {
        height: 280px;
        gap: 1rem;
    }
    .podium-spot {
        width: 100px;
    }
    .podium-rank {
        font-size: 2.2rem;
    }
    .podium-flag {
        width: 60px;
        height: 40px;
    }
    .podium-country-name, .podium-support-amount {
        font-size: 0.95rem;
    }
    .podium-support-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    .carousel-items-container {
        width: calc(100% - 60px);
    }
    .carousel-item {
        width: 140px;
        padding: 0.8rem;
    }
    .carousel-flag {
        width: 50px;
        height: 35px;
    }
    .carousel-country-name, .carousel-support-amount {
        font-size: 0.85rem;
    }
    .carousel-support-btn {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
    }
    .carousel-nav-btn {
        width: 35px;
        height: 35px;
    }
    .carousel-nav-btn i {
        font-size: 1.25rem;
    }
    .view-all-button {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }

    /* Country Stats Page Specific Styles */
    .country-header-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 3rem;
        background-color: #FFFFFF;
        padding: 2.5rem;
        border-radius: 1rem;
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        width: 100%;
        max-width: 800px;
    }

    .country-header-flag {
        width: 90px;
        height: 60px;
    }
    .country-header-name {
        font-size: 2.5rem;
    }
    .stats-cards-section {
        grid-template-columns: 1fr;
    }
    .stats-icon {
        font-size: 2rem;
    }
    .stats-label {
        font-size: 0.85rem;
    }
    .stats-value {
        font-size: 1.8rem;
    }
    .comments-section {
        width: 100%;
        background-color: #FFFFFF;
        border-radius: 1rem;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        padding: 2rem;
        text-align: center;
        margin-bottom: 3rem;
    }

    .comments-carousel-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        position: relative;
    }

    .comments-carousel-container {
        display: flex;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        gap: 1.5rem;
        padding: 0.5rem;
        width: calc(100% - 80px);
    }

    .comment-item {
        flex: 0 0 auto;
        width: 300px;
        background-color: #F7FAFC;
        border-radius: 0.75rem;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        border: 1px solid #E2E8F0;
    }

    .comment-text {
        font-size: 1.05rem;
        color: #2D3748;
        line-height: 1.5;
        margin-bottom: 1rem;
        font-style: italic;
    }

    .comment-author {
        font-size: 0.9rem;
        font-weight: 600;
        color: #4A5568;
        margin-top: auto;
        margin-bottom: 0.25rem;
    }

    .comment-timestamp {
        font-size: 0.8rem;
        color: #718096;
    }

    /* --- Custom Message Box for Alerts --- */
    .custom-message-box {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #FFFFFF;
        border: 1px solid #CBD5E0;
        border-radius: 0.75rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        padding: 2rem;
        text-align: center;
        z-index: 1000; /* Ensure it's on top of everything */
        max-width: 400px;
        width: 90%;
    }
    .custom-message-box p {
        font-size: 1.1rem;
        color: #2D3748;
        margin-bottom: 1.5rem;
    }
    .custom-message-box-close {
        background-color: #3182CE;
        color: #FFFFFF;
        padding: 0.8rem 1.5rem;
        border-radius: 9999px;
        border: none;
        cursor: pointer;
        font-weight: 600;
        transition: background-color 0.2s ease-in-out;
    }
    .custom-message-box-close:hover {
        background-color: #2B6CB0;
    }

}