/* MapNative.com - Main Stylesheet */
/* Color Palette Variables - Semantic Names */
:root {
    /* Primary brand color - Ocean Blue */
    --primary: #0077B6;
    --primary-light: #4A9FD1;

    /* Accent color - Sunset Coral */
    --accent: #FF6B6B;
    --accent-light: #FF8E8E;

    /* Secondary accent - Golden Sand */
    --secondary: #FFD166;
    --secondary-light: #FFD980;

    /* Supporting accent - Forest Green */
    --success: #06A77D;
    --success-light: #4AB896;

    /* Three levels of "yes" responses */
    --yes-must: #06A77D;        /* Must see! - strongest commitment */
    --yes-must-light: #4AB896;  /* Lighter variant for gradients */
    --yes-strong: #5ED9A4;     /* Great to see! - strong preference */
    --yes-strong-light: #7EE4B8; /* Lighter variant for gradients */
    --yes-maybe: #A8E6CF;       /* If there's time - casual interest */
    --yes-maybe-light: #B8F0D8; /* Lighter variant for gradients */

    /* Background - Cloud White */
    --background: #F9FAFB;

    /* Text and contrast - Stone Gray */
    --text-primary: #4B4B4B;
    --text-secondary: #6B6B6B;
    --text-muted: #8B8B8B;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--background);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
header {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    padding: 1rem 2rem;
    box-shadow: 0 2px 10px rgba(0, 119, 182, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* User info grouping */
header #profileImage,
header p,
header a[href="/logout"] {
    display: inline-block;
    vertical-align: middle;
}

header #profileImage {
    margin-right: 0.5rem;
}

header p {
    margin: 0 1rem 0 0;
    font-weight: 500;
}

header h1 {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
}

header h1 a {
    color: inherit;
    text-decoration: none;
    display: block;
}

/* Header logo styling */
.header-logo {
    height: 50px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.header-logo:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

header h1 a:hover {
    color: inherit;
    text-decoration: none;
}

header a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

header a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

#profileImage {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid white;
}

/* Column Container */
.column-container {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    padding: 2rem;
}

/* Main Content Layout */
main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    min-width: 0; /* Allows flex item to shrink below content size */
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

body > main {
    padding: 2rem;
}

/* Search Component */
search {
    display: block;
}

search form {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: white;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 119, 182, 0.1);
}

search input[type="text"] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: var(--background);
}

search input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

search button {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

search button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

search button img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

/* City Autocomplete Styles */
search form {
    position: relative;
}

.suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    max-height: 200px;
    overflow-y: auto;
}

.suggestion-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover,
.suggestion-item.active {
    background-color: var(--primary-light);
    color: white;
}

.suggestion-name {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.suggestion-country {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.suggestion-item:hover .suggestion-name,
.suggestion-item.active .suggestion-name {
    color: white;
}

.suggestion-item:hover .suggestion-country,
.suggestion-item.active .suggestion-country {
    color: rgba(255, 255, 255, 0.8);
}

/* Forms */
form {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 119, 182, 0.1);
}

/* Dual Container - For any two-column layout */
.dual-container {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: flex-start;
    padding: 2rem;
}

.dual-container > * {
    flex: 1;
}

.dual-container form {
    margin: 0;
}

fieldset {
    border: none;
    padding: 0;
}

legend {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--secondary);
}

label {
    display: block;
    margin: 1rem 0 0.5rem 0;
    font-weight: 500;
    color: var(--text-primary);
}

label.required::after {
    content: " *";
    color: var(--accent);
}

input[type="text"],
input[type="password"],
input[type="email"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: var(--background);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

input[type="submit"],
button[type="submit"] {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 119, 182, 0.3);
}

search > form input[type="text"],
search > form button[type="submit"] {
    margin-top: 0;
}

/* Sections */
section {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 119, 182, 0.1);
    position: relative;
}

section h2 {
    color: var(--primary);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    display: inline-block;
}

/* Location Entries */
locationentry {
    display: block;
    padding: 1.5rem;
    margin: 1rem 0;
    background: var(--background);
    border-radius: 10px;
    border-left: 4px solid var(--success);
    transition: all 0.3s ease;
    position: relative;
}

locationentry:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(6, 167, 125, 0.1);
}

locationentry h3 {
    color: var(--primary);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

locationentry p {
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 3rem; /* Add space for the controls */
}

/* Location Controls */
locationcontrols {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-direction: row;
    align-items: center;
}

locationcontrols p {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
    padding: 0;
    display: inline-block;
}

locationcontrols button {
    background: linear-gradient(135deg, var(--yes-maybe), var(--yes-maybe-light));
    color: var(--text-primary);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(168, 230, 207, 0.3);
    border: 1px solid rgba(56, 180, 139, 0.2);
    min-width: 120px;
    text-align: center;
}

locationcontrols button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(168, 230, 207, 0.4);
}

/* Three levels of "yes" responses */
locationcontrols button.yes-emphatic {
    background: linear-gradient(135deg, var(--yes-must), var(--yes-must-light));
    color: white;
    box-shadow: 0 2px 8px rgba(6, 167, 125, 0.3);
    border: 1px solid rgba(6, 167, 125, 0.3);
}

locationcontrols button.yes-emphatic:hover {
    box-shadow: 0 4px 15px rgba(6, 167, 125, 0.4);
}

locationcontrols button.yes-strong {
    background: linear-gradient(135deg, var(--yes-strong), var(--yes-strong-light));
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(56, 180, 139, 0.3);
    border: 1px solid rgba(56, 180, 139, 0.3);
}

locationcontrols button.yes-strong:hover {
    box-shadow: 0 4px 15px rgba(56, 180, 139, 0.4);
}

locationcontrols button.yes {
    background: linear-gradient(135deg, var(--yes-maybe), var(--yes-maybe-light));
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(168, 230, 207, 0.3);
    border: 1px solid rgba(56, 180, 139, 0.2);
}

locationcontrols button.yes:hover {
    box-shadow: 0 4px 15px rgba(168, 230, 207, 0.4);
}

/* Details/Summary */
details {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 119, 182, 0.1);
}

summary {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* Full-width image in details content */
details img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 0.25rem;
}

/* Image media container */
imagemedia {
    display: block;
    position: relative;
}

/* Author and license info overlaid on images */
imagemedia a {
    position: absolute;
    bottom: 0.25rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
    background-color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

imagemedia a:hover {
    color: var(--primary);
    text-decoration: underline;
    background-color: rgba(255, 255, 255, 0.95);
}

/* Author on the left */
imagemedia a:first-of-type {
    left: 0.25rem;
}

/* License on the right */
imagemedia a:last-of-type {
    right: 0.25rem;
}

details p {
    margin-top: 1rem;
    color: var(--text-primary);
    line-height: 1.6;
}

/* Page Controls */
pagecontrols {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--background);
    border-radius: 20px;
    position: absolute;
    top: 2rem;
    right: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 119, 182, 0.1);
}

pagecontrols a {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
    color: var(--text-primary);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 500;
    transition: all 0.3s ease;
}

pagecontrols a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 209, 102, 0.3);
}

/* Navigation */
nav#top_nav {
    background: white;
    padding: 1rem 2rem;
    border-bottom: 2px solid var(--secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

nav a {
    color: var(--text-primary);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    transition: all 0.3s ease;
    font-weight: 500;
}

nav a:hover {
    background-color: var(--primary);
    color: white;
    transform: translateY(-2px);
}

.nav-item-dropdown {
    position: relative;
}

.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.nav-item-dropdown:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu li {
    list-style: none;
}

.submenu a {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 0;
    margin: 0;
}

.submenu a:hover {
    background-color: var(--background);
    color: var(--primary);
}


/* Aside - Filters Sidebar */
aside {
    background: white;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 119, 182, 0.1);
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 2rem;
}

aside h3 {
    color: var(--primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-bottom: 2px solid var(--secondary);
    padding-bottom: 0.5rem;
}

aside p {
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 1rem;
}

/* Filter Groups */
.filter-group {
    margin-bottom: 1.5rem;
}

.filter-group h4 {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.filter-group label {
    display: block;
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.filter-group input[type="checkbox"],
.filter-group input[type="radio"] {
    margin-right: 0.5rem;
    accent-color: var(--primary);
}

.filter-group select {
    width: 100%;
    padding: 0.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background-color: var(--background);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.filter-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

.filter-group input[type="range"] {
    width: 100%;
    margin: 0.5rem 0;
    accent-color: var(--primary);
}

.filter-group .range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Footer */
footer {
    background: var(--text-primary);
    color: white;
    padding: 1rem 2rem;
    margin-top: auto;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    min-height: 80px;
}

footer h1 {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}

footer h3 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

footer .footer-section {
    flex: 1;
}

footer .footer-left {
    text-align: left;
}

footer .footer-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

footer .footer-right {
    text-align: right;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

footer address {
    font-style: normal;
    font-size: 0.9rem;
    line-height: 1.2;
}

footer address p {
    margin-bottom: 0.1rem;
}

footer address p:last-child {
    margin-bottom: 0;
}

footer a {
    color: white;
    text-decoration: none;
}

footer a:hover {
    color: white;
    text-decoration: underline;
}

/* Social Media Section */
footer .social-media h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    font-weight: 500;
    color: white;
}

footer .social-links {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

footer .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

footer .social-links a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

footer .social-icon {
    width: 20px;
    height: 20px;
    fill: white;
    transition: all 0.3s ease;
}

footer .social-links a:hover .social-icon {
    transform: scale(1.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    header {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
    }

    header h1 {
        font-size: 1.5rem;
    }

    .header-logo {
        height: 40px;
        max-width: 150px;
    }

    body > main {
        padding: 1rem;
    }

    .column-container {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem; /* Reduce padding on mobile */
    }

    aside {
        width: 100%;
        position: static;
        order: -1; /* Show filters above content on mobile */
    }

    .dual-container {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem; /* Reduce padding on mobile */
    }

    search form {
        flex-direction: column;
        gap: 1rem;
    }

    search input[type="text"] {
        width: 100%;
    }

    search button {
        width: 100%;
        border-radius: 25px;
        height: auto;
        padding: 0.75rem 1rem;
    }

    nav#top_nav {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
    }

    .nav-left,
    .nav-right {
        flex-wrap: wrap;
        justify-content: center;
    }

    form,
    section {
        padding: 1.5rem;
    }

    pagecontrols {
        position: static;
        margin: 1rem 0;
        justify-content: center;
    }

    /* Mobile adjustments for location controls */
    locationcontrols {
        position: static;
        margin-top: 1rem;
        align-items: stretch;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
    }

    locationcontrols button {
        flex: 1;
        min-width: auto;
        font-size: 0.8rem;
        padding: 0.6rem 0.8rem;
    }

    locationentry p {
        margin-bottom: 1rem;
    }

    /* Footer responsive adjustments */
    footer {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        align-items: center;
        min-height: auto;
        padding: 1rem;
    }

    footer .footer-left,
    footer .footer-center,
    footer .footer-right {
        text-align: center;
        justify-content: center;
        width: 100%;
    }

    footer .social-links {
        gap: 0.75rem;
    }

    footer .social-links a {
        width: 36px;
        height: 36px;
    }

    footer .social-icon {
        width: 18px;
        height: 18px;
    }

    /* Error message responsive adjustments */
    .error-message {
        padding: 1rem 1.5rem;
        margin: 1rem 0;
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .error-icon {
        font-size: 1.5rem;
    }

    .error-text p {
        font-size: 0.95rem;
    }

    .error-link {
        align-self: center;
        padding: 0.6rem 1.2rem;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 1.3rem;
    }

    .header-logo {
        height: 35px;
        max-width: 120px;
    }

    form,
    section {
        padding: 1rem;
    }

    legend {
        font-size: 1.3rem;
    }

    section h2 {
        font-size: 1.3rem;
    }
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Location Controls Button Selection States */
locationcontrols button {
    outline: none;
    position: relative;
    transition: all 0.3s ease;
}

/* Loading state */
locationcontrols button.loading {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

/* Selected state */
locationcontrols button.selected {
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.3);
}

/* Unselected state when one is selected - Modern browsers with :has() support */
locationcontrols:has(.selected) button:not(.selected) {
    opacity: 0.4;
    filter: grayscale(0.8);
    transform: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Disable hover effects on unselected buttons - Modern browsers with :has() support */
locationcontrols:has(.selected) button:not(.selected):hover {
    transform: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Fallback for browsers without :has() support - JavaScript will add this class */
locationcontrols.has-selection button:not(.selected) {
    opacity: 0.4;
    filter: grayscale(0.8);
    transform: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

locationcontrols.has-selection button:not(.selected):hover {
    transform: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Specific styling for each button type when selected */
locationcontrols button.yes-emphatic.selected {
    background: linear-gradient(135deg, var(--yes-must), var(--yes-must-light));
    color: white;
    box-shadow: 0 0 0 3px rgba(6, 167, 125, 0.4), 0 2px 8px rgba(6, 167, 125, 0.3);
}

locationcontrols button.yes-strong.selected {
    background: linear-gradient(135deg, var(--yes-strong), var(--yes-strong-light));
    color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(56, 180, 139, 0.4), 0 2px 8px rgba(56, 180, 139, 0.3);
}

locationcontrols button.yes.selected {
    background: linear-gradient(135deg, var(--yes-maybe), var(--yes-maybe-light));
    color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(168, 230, 207, 0.4), 0 2px 8px rgba(168, 230, 207, 0.3);
}

/* Error Message Styling */
.error-message {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border: 2px solid var(--accent);
    border-radius: 15px;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.2);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.error-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    fill: white;
}

.error-text {
    flex: 1;
}

.error-text p {
    color: white;
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}

.error-link {
    color: var(--accent);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    background-color: white;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 500;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.error-link:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Load More Button Styling */
#loadMoreBtn {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 119, 182, 0.3);
    margin: 20px auto;
    display: block;
    min-width: 140px;
}

#loadMoreBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 119, 182, 0.4);
}

#loadMoreBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 119, 182, 0.3);
}

#loadMoreBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 119, 182, 0.2);
}

#loadMoreContainer {
    text-align: center;
    margin: 20px 0;
}

/* Popular Destinations Section */
.popular-destinations {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Medium devices (tablets) - 2 per row */
@media (min-width: 768px) {
    .popular-destinations {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large devices (desktops) - 3 per row */
@media (min-width: 1024px) {
    .popular-destinations {
        grid-template-columns: repeat(3, 1fr);
    }
}

.destination-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.destination-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.destination-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.destination-image imagemedia {
    width: 100%;
    height: 100%;
    display: block;
}

.destination-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.destination-info {
    padding: 1.25rem;
}

.destination-card h3 {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    transition: color 0.2s ease;
}

.destination-card:hover h3 {
    color: var(--primary);
}

.destination-card .country {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Attribution links within destination cards - override imagemedia styles */
.destination-card imagemedia .attribution-link {
    position: absolute !important;
    bottom: 0.25rem !important;
    font-size: 0.7rem !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    z-index: 10 !important;
}

.destination-card imagemedia .attribution-link:hover {
    color: var(--primary) !important;
    text-decoration: underline !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Author on the left */
.destination-card imagemedia .attribution-link:first-of-type {
    left: 0.25rem !important;
}

/* License on the right */
.destination-card imagemedia .attribution-link:last-of-type {
    right: 0.25rem !important;
}