/* style.css */

body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

.container {
    /* display: flex; -- Removed */
    max-width: 800px; /* Adjusted max-width, can be changed */
    margin: 20px auto;
    padding: 15px 25px; /* Added more horizontal padding */
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px; /* Optional: added rounded corners */
}

.content {
    padding: 10px; /* Adjusted padding */
    /* flex: 1; -- Removed */
    /* order: 2; -- Removed */
}

/* Center the main title */
.content h1 {
    color: #0056b3;
    text-align: center;
    margin-bottom: 0.5em; /* Adjusted margin */
}

/* Center the introductory paragraph right below H1 */
.content h1 + p {
    text-align: center;
    font-size: 1.1em; /* Maintain previous size */
    color: #555;     /* Maintain previous color */
    margin-bottom: 25px; /* Maintain previous margin */
    /* Add any other specific styles if needed */
}

.world-pop-info {
    text-align: center;
    font-size: 1.1em; /* Slightly larger than normal text */
    color: #444; /* Slightly different color */
    margin-bottom: 10px; /* Space before the main title */
}
.world-pop-info strong {
    font-weight: 600;
    color: #0056b3; /* Match title color */
}

/* --- Logo Styling --- */
#logo {
    display: block;
    max-width: 200px; /* Adjusted size */
    height: auto;
    margin: 10px auto 15px auto; /* Adjusted margin */
}

#selected-population {
    font-weight: 600; /* Makes it semi-bold/bold */
    color: #0056b3; /* Example: Use a distinct color (like the heading blue) */
    background-color: #e9f5ff;
    padding: 0 4px;
    border-radius: 3px;
}

.input-section {
    margin-bottom: 25px;
    padding: 20px;
    background-color: #e9ecef;
    border-radius: 5px;
}

.input-section label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.input-section input[type="date"],
.input-section select { /* Keep styles for original select as fallback */
    /* width: calc(100% - 22px); <<< REMOVE or comment out this calc */
    width: 100%; /* <<< USE width 100% */
    padding: 10px;
    margin-bottom: 15px; /* <<< We might adjust this later if needed */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* <<< ENSURE this is here */
    font-size: 1rem;
    line-height: 1.5;
    height: 40px;
}

.input-section button {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    /* --- >>> ADD THIS <<< --- */
    /* Add space above the button to prevent overlap */
    margin-top: 15px; /* Start with the same value as input margin-bottom */
}

.input-section button:hover {
    background-color: #0056b3;
}

.results-section {
    margin-top: 30px; /* Increased spacing */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f8f9fa;
}

.results-section h2, .results-section h3 {
     text-align: center;
     margin-bottom: 15px;
}

.results-section p {
    text-align: center; /* Center result paragraphs */
    margin-bottom: 10px;
    font-size: 1.1em;
}


.results-section strong {
    color: #dc3545;
    font-weight: 600; /* Slightly bolder */
}

.results-section ul {
    list-style: none;
    padding: 0;
    max-width: 400px; /* Limit width of stats list */
    margin: 15px auto; /* Center the list */
    text-align: left; /* Align text inside list items left */
}

.results-section li {
    margin-bottom: 8px; /* Increased spacing */
    font-size: 1.0em;
    padding-left: 10px;
    border-left: 3px solid #007bff; /* Added a visual marker */
}
.results-section li span {
    font-weight: bold; /* Make stat values bold */
    color: #333;
}


.results-section hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #eee;
}

.quip {
    font-style: italic;
    font-size: 1.2em; /* Slightly larger */
    text-align: center;
    margin-top: 20px;
    color: #5a5a5a;
    padding: 10px;
}

/* Specific styling for the life expectancy quip if needed */
.le-quip {
    font-size: 1.1em; /* Slightly smaller than the age quip */
    color: #17a2b8; /* A different color, maybe teal/cyan */
    margin-top: 5px; /* Reduced top margin */
    margin-bottom: 15px; /* Space before the final hr */
    padding: 5px;
}
.le-quip span { /* Style the span inside if needed */
     font-weight: 500; /* Semi-bold */
}

/* --- NEW: Birthday Message Styling --- */
.birthday-message {
    text-align: center;
    font-size: 1.3em; /* Make it larger */
    font-weight: bold;
    color: #856404; /* Darker yellow/brown for text */
    background-color: #fff9e6; /* Lighter, festive yellow */
    padding: 12px 18px; /* Slightly more padding */
    border-radius: 8px; /* Slightly more rounded */
    margin: 20px auto; /* More margin */
    border: 2px dashed #ffc107; /* Amber dashed border */
    max-width: 80%; /* Limit width slightly */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Add a subtle shadow */
    /* Add transition for potential future hover effects */
    transition: transform 0.2s ease;
}

/* Optional: Add a slight hover effect */
.birthday-message:hover {
    transform: scale(1.02); /* Slightly enlarge on hover */
}
/* --- End Birthday Message Styling --- */

/* --- Choices.js Adjustments --- */
/* Target the container Choices.js creates */
.choices {
    margin-bottom: 15px; /* Match other input margin */
    font-size: 1rem; /* Match date input */
    line-height: 1.5; /* Match date input */
    height: 40px; /* Match date input */
    width: 100%;
    box-sizing: border-box;
    /* display: flex; // Don't use flex on outer container for now */
    /* align-items: center; */
}

/* Target the visible input-like element */
.choices__inner {
    /* Use flex for vertical centering */
    display: flex;
    align-items: center;
    /* Adjust padding to match date input (approx 10px) AND center */
    /* Need padding-left/right for text, remove top/bottom for flex centering */
    padding: 0 10px;
    width: 100%;
    height: 100%; /* Make inner fill outer height */
    background-color: #fff; /* Match date input background */
    border: 1px solid #ccc; /* Match date input border */
    border-radius: 4px; /* Match date input border-radius */
    font-size: inherit; /* Inherit from .choices */
    line-height: inherit; /* Inherit from .choices */
    min-height: unset; /* Remove default min-height */
    box-sizing: border-box;
    overflow: hidden;
}

/* Style the currently selected item text */
.choices__list--single .choices__item {
    /* Ensure item takes full width and remove default padding */
    width: 100%;
    padding: 0;
    line-height: inherit; /* Let flexbox handle alignment */
}

/* Style the input field within Choices.js when searching */
.choices__input {
    /* Basic reset for consistency */
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    line-height: inherit;
    font-size: inherit;
    border: none !important;
    box-shadow: none !important;
}

/* Adjust dropdown list appearance */
.choices__list--dropdown {
    z-index: 10;
    border: 1px solid #ccc; /* Match border */
    border-top: none;
    border-radius: 0 0 4px 4px;
    margin-top: -1px;
}

/* Adjust highlighted item */
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #e9ecef;
    color: #333;
}

/* Style disabled options (divider) */
.choices__list--dropdown .choices__item--disabled {
    color: #888;
    font-style: italic;
    text-align: center;
    cursor: default;
    background-color: #f8f9fa !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* ============================================= */
/* === Desktop Enhancements (Tablet & Up) === */
/* ============================================= */
@media (min-width: 769px) {

    body {
        /* Add a very subtle gradient background for desktop */
        background-image: linear-gradient(to bottom, #f8f9fa, #e9ecef);
        font-size: 16px; /* Slightly larger base font */
    }

    .container {
        max-width: 900px; /* Wider container on desktop */
        padding: 25px 40px; /* More padding */
    }

    .content h1 {
         font-size: 2.5em; /* Larger title */
    }

    #logo {
        max-width: 280px; /* Larger logo on desktop */
        margin-bottom: 25px;
    }

    .input-section {
        /* Slightly enhance card appearance */
         box-shadow: 0 1px 3px rgba(0,0,0,0.05);
         background-color: #ffffff; /* Make input white like results on desktop */
         border-color: #dbe2e8;
    }

     .results-section {
        /* Add a subtle shadow to results card */
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        padding: 25px;
     }

     .results-section ul {
         max-width: 500px; /* Allow stats list to be wider */
     }

     .quip {
         padding: 20px;
         font-size: 1.25em;
     }

     .le-quip {
        font-size: 1.15em;
    }

} /* End of Media Query */

/* --- Share Section Styles --- */
.share-section {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px; 
    border-top: 1px solid #eee; /* Add separator line */
}

.share-section h3 {
    margin-bottom: 15px;
    color: #333;
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: 15px; /* Space between buttons */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

.share-btn {
    display: inline-flex; /* Use flex to align icon and text */
    align-items: center;
    gap: 8px; /* Space between icon and text */
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.2s ease, opacity 0.2s ease;
    text-decoration: none; /* Remove underline for potential future links */
}

.share-btn svg {
    width: 20px; /* Adjust icon size */
    height: 20px;
    vertical-align: middle;
}

.share-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px); /* Slight lift effect */
}

.share-btn.twitter {
    background-color: #1DA1F2; 
}

.share-btn.facebook {
    background-color: #1877F2; 
}

.share-btn.whatsapp {
    background-color: #25D366;
}

.share-btn.linkedin {
    background-color: #0A66C2;
}

.share-btn.reddit {
    background-color: #FF4500;
}

.share-btn.telegram {
    background-color: #26A5E4;
}

.share-btn.sms {
    background-color: #4CAF50; /* Generic green, varies by OS */
}

.share-btn.email {
    background-color: #888888; /* Neutral grey */
}

.share-btn.copy-link {
    background-color: #6c757d; /* Grey color for copy */
}

.share-btn.copy-link svg {
    stroke: white; /* Make copy icon lines white */
}

.copy-link-message {
    margin-top: 15px;
    color: green;
    font-weight: bold;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .container {
        margin: 10px auto;
        padding: 10px 15px; /* Adjusted padding */
    }
     .content h1 {
        font-size: 1.8em; /* Adjust title size */
     }
     .results-section ul {
         max-width: 95%; /* Allow list to be wider on mobile */
     }
     /* Adjust height slightly for mobile if needed */

    /* Remove commented-out mobile overrides */

    /* Add mobile styles for Choices.js if needed */
    .choices {
        height: 38px; /* Match potential mobile height */
    }
    .choices__inner {
        padding: 0 8px; /* Adjust padding for mobile */
    }
    .choices,
    .choices__inner,
    .choices__input {
         font-size: 0.95rem; /* Match potential mobile font size */
    }
}