/* --- Responsive Styles --- */
@media (max-width: 1024px) {

    #list-view-toggle-btn,
    #list-view-sidebar {
        display: none;
    }
}

@media (min-width: 1025px) {

    #list-view-toggle-btn,
    #list-view-sidebar {
        display: flex;
        /* Show these elements on desktop */
    }

    body.list-view-open #search-container {
        transform: translateX(calc(-50% + 180px));
        /* 360px sidebar / 2 */
    }

    body.list-view-open .add-place-button {
        left: 380px;
        /* 360px + 20px */
    }

    body.list-view-open #map {
        left: 360px;
        width: calc(100% - 360px);
    }

    body.list-view-open .home-link-desktop {
        left: 375px;
        /* 360px sidebar + 15px offset */
    }

    body.list-view-open #list-view-toggle-btn {
        left: 375px;
        /* 360px sidebar + 15px offset */
    }
}

@media (max-width: 768px) {
    .home-link-desktop {
        display: none;
    }

    .home-link-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #555;
        font-size: 18px;
        text-decoration: none;
        padding: 0 15px;
        border-right: 1px solid #e0e0e0;
        align-self: stretch;
        transition: color 0.2s, background-color 0.2s;
    }

    #search-container {
        top: calc(15px + env(safe-area-inset-top));
        left: calc(15px + env(safe-area-inset-left));
        right: calc(15px + env(safe-area-inset-right));
        width: auto;
        transform: none;
        /* Reset transform for mobile layout */
        max-width: none;
        /* Allow it to be full-width */
    }

    .bottom-right-controls {
        bottom: calc(20px + env(safe-area-inset-bottom));
        right: calc(20px + env(safe-area-inset-right));
    }

    .locate-me-button {
        width: 44px;
        height: 44px;
    }

    .locate-me-button svg {
        width: 24px;
        height: 24px;
    }

    .add-place-button {
        padding: 12px 18px;
        font-size: 15px;
        bottom: calc(20px + env(safe-area-inset-bottom));
        left: calc(20px + env(safe-area-inset-left));
    }

    .instruction-banner {
        max-width: calc(100vw - 30px);
        font-size: 14px;
        padding: 10px 15px;
        box-sizing: border-box;
    }

    .instruction-banner.visible {
        /* Ensure this applies correctly with JS animation */
        top: calc(75px + env(safe-area-inset-top));
        /* Below search bar */
    }

    #place-modal #place-form {
        padding: 0;
    }

    #place-modal .modal-content {
        /* Make modal fullscreen on mobile */
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    #fullscreen-details-overlay .popup-name {
        font-size: 24px;
    }

    #fullscreen-swiper-container .swiper-pagination {
        /* Adjust for safe area on mobile */
        bottom: calc(15px + env(safe-area-inset-bottom)) !important;
    }

    #fullscreen-details-overlay {
        /* Adjust padding to leave space for pagination and safe area */
        padding-bottom: calc(50px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 480px) {

    /* Further adjustments for smaller phones */
    #search-input {
        font-size: 14px;
    }



    .search-icon {
        padding: 0 12px;
    }

    #fullscreen-details-overlay .popup-name {
        font-size: 20px;
        margin-bottom: 5px;
    }

    #fullscreen-details-overlay .popup-footer {
        padding-top: 5px;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    #fullscreen-details-overlay .popup-links,
    #fullscreen-details-overlay .popup-offers {
        max-width: 100%;
        justify-content: center;
    }
}

/* --- Hover styles for non-touch devices --- */
@media (hover: hover) {
    .home-link-mobile:hover {
        background-color: #f0f0f0;
        color: var(--primary-color);
    }

    .offer-filter-button:hover:not(.disabled) {
        background-color: #e9ecef;
        border-color: #ced4da;
        color: #212529;
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
    }

    .offer-filter-button.active:hover {
        background-color: #006b94;
        border-color: #005270;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) inset;
        color: white;
    }

    .validated-filter-button.active:hover {
        background-color: #218838;
        border-color: #1e7e34;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) inset;
        color: white;
    }

    .filter-logic-button:hover:not(.active) {
        background-color: #e9ecef;
    }

    #clear-all-filters-btn:hover:not(:disabled) {
        background-color: #f0f0f0;
        color: #111;
    }

    .custom-popup-content .swiper-button-next:hover,
    .custom-popup-content .swiper-button-prev:hover {
        /* Scoped */
        color: #fff;
    }

    .action-item:hover .action-icon {
        /* Applies if .action-item is hovered, not just icon */
        color: #c0d8f0;
        transform: scale(1.15);
    }

    /* Keep original menu visibility on .action-item.active, hover can just be visual enhancement */
    /* .action-item:hover .action-menu {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
        transform: translateX(-50%) translateY(0);
    } */

    .action-menu a:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }

    .popup-fullsize-icon:hover {
        background-color: rgba(0, 0, 0, 0.8);
        transform: scale(1.1);
    }

    .custom-popup-close-btn:hover {
        background-color: rgba(0, 0, 0, 0.8);
        transform: scale(1.1);
    }

    .locate-me-button:hover:not(:disabled) {
        background-color: #f4f4f4;
    }

    .add-place-button:hover:not(:disabled) {
        background-color: #006b94;
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    }



    #search-suggestions li:hover {
        /* generic hover for non-active suggestions */
        background-color: #f0f0f0;
    }

    #search-suggestions li.filtered-out:hover {
        /* specific hover for filtered out items */
        opacity: 1;
    }

    .confirm-actions button:hover {
        background-color: #006b94;
    }

    .confirm-actions button.confirm-no:hover {
        background-color: #616161;
    }


    .add-place-button.cancel:hover {
        background-color: #c0392b;
    }

    #fullscreen-close-button:hover {
        background-color: rgba(0, 0, 0, 0.7);
        transform: scale(1.1);
    }

    #fullscreen-swiper-container .swiper-button-next:hover,
    #fullscreen-swiper-container .swiper-button-prev:hover {
        color: #fff;
    }

    #add-place-modal #image-uploader-container.dragover {
        /* This is not a hover, but a state */
        /* border-color: var(--primary-color);
        background-color: #f0f8ff; */
    }

    #add-place-modal .image-preview-item .delete-btn:hover {
        background-color: var(--danger-color);
        transform: scale(1.1);
    }

    #add-place-modal #image-upload-btn:hover {
        background-color: #f8f8f8;
    }

    #add-place-modal-close:hover {
        color: #333;
    }

    .add-place-nav-btn:hover:not(:disabled) {
        background-color: #e0e6e8;
        color: #34495e;
    }

    .add-place-nav-btn.primary:hover:not(:disabled) {
        background-color: #006b94;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .form-offer-item:hover:not(.active) {
        background-color: #0078A8;
        /* Simulate active style on hover */
        color: white;
        border-color: #005c82;
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
    }

    .form-offer-item.active:hover {
        /* Darken if already active */
        background-color: #006b94;
        border-color: #005270;
        transform: none;
        /* Reset transform from non-active hover */
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) inset;
    }


    #suggest-edit-modal-close:hover {
        color: #333;
    }

    .suggestion-category-btn:hover {
        background-color: #e9ecef;
        border-color: #ced4da;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

    .suggest-edit-nav-btn:hover {
        background-color: #e0e6e8;
        color: #34495e;
    }

    .suggest-edit-submit-btn:hover:not(:disabled),
    .suggest-edit-close-btn:hover {
        background-color: #006b94;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .home-link-desktop:hover {
        transform: scale(1.1);
        color: var(--primary-color);
        background-color: #f0f8ff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    #list-view-toggle-btn:hover {
        background-color: #f0f8ff;
        color: #0078A8;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        transform: translateY(-50%) scale(1.1);
    }

    .list-view-item:hover {
        /* General hover for list items if not active */
        background-color: #f0f8ff;
    }

    #coach-mark-skip:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    #coach-mark-next:hover {
        background-color: #006b94;
    }
}