/**
 * Gnarly Booking Engine - Copyright (c) 2025 Brand Wars LLC
 * Licensed under proprietary license. See LICENSE.txt for details.
 */

/* Map container */
.hostapi-map {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 8px;
    overflow: hidden;
    z-index: 1;
}

/* Map popup styling */
.hostapi-map-popup {
    width: 260px;
    max-width: 260px;
    font-family: Arial, sans-serif;
    text-align: left;
}

/* Full-width hero image flush to the top edges of the popup card. The
   negative margins pull the image out past the popup content padding so it
   spans the full card width and sits at the very top. */
/* Carousel wrapper bleeds to the full card width and sits flush at the top;
   it is the positioning context for the arrows. */
.hostapi-map-popup__carousel {
    position: relative;
    width: calc(100% + 24px);
    margin: -12px -12px 10px -12px;
    height: 150px;
    overflow: hidden;
}

/* High specificity + !important to override theme/Leaflet img rules that
   constrain images inside popups (e.g. .leaflet-popup-content img { width:auto }). */
.leaflet-popup-content .hostapi-map-popup .hostapi-map-popup__image,
.hostapi-map-popup img.hostapi-map-popup__image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 150px !important;
    object-fit: cover !important;
    margin: 0 !important;
    border-radius: 0 !important;
    float: none !important;
}

/* Carousel slide visibility. The rule above uses display:block !important to
   beat theme/Leaflet img rules, which ALSO beats an inline display:none — so
   we cannot hide inactive slides with inline styles. Hide them with an equally
   !important class that the cycle JS toggles. Stack all slides in the same
   spot so only the active one shows. */
.leaflet-popup-content .hostapi-map-popup .hostapi-map-popup__image,
.hostapi-map-popup img.hostapi-map-popup__image {
    position: absolute;
    top: 0;
    left: 0;
}
.leaflet-popup-content .hostapi-map-popup .hostapi-map-popup__image.is-hidden,
.hostapi-map-popup img.hostapi-map-popup__image.is-hidden {
    display: none !important;
}

/* Carousel arrows over the image. */
.hostapi-map-popup__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #222;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    z-index: 5;
}
.hostapi-map-popup__nav:hover { background: #fff; }
/* The carousel is 24px wider than the popup content (full-bleed: it overhangs
   12px on each side via the negative margin above). Offset the arrows by that
   12px so they sit ~8px inside the VISIBLE popup edge instead of being clipped
   (the right/next arrow was landing partly off-screen). */
/* The carousel overhangs the popup content by 12px on each side (full-bleed
   image via negative margins). Arrows are positioned within the carousel, so the
   RIGHT arrow needs an extra ~24px inset to land the same visible distance from
   the popup edge as the LEFT arrow (otherwise it pokes past the right edge). */
.hostapi-map-popup__nav--prev { left: 20px; }
.hostapi-map-popup__nav--next { right: 44px; }

/* Content block sits below the full-width image and stacks vertically. */
.hostapi-map-popup__content {
    display: block;
}
/* Truncate a long title to one line with an ellipsis so it never overflows the
   narrow popup or pushes the layout. */
.hostapi-map-popup__content > a {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #222;
    margin-bottom: 2px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Close (X) button — sits on top of the hero image, so give it a solid
   light background + border to stay visible. */
.leaflet-container a.leaflet-popup-close-button {
    top: 8px !important;
    right: 8px !important;
    width: 26px !important;
    height: 26px !important;
    line-height: 24px !important;
    font-size: 18px !important;
    color: #222 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    z-index: 1000;
}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
    background: #fff !important;
    color: #000 !important;
}

/* Make leaflet popups look nicer */
.leaflet-popup-content-wrapper {
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}

.leaflet-popup-content {
    margin: 0;
    padding: 12px;
    width: 260px !important;
}

/* Container for navigation controls */
.hostapi-map-nav-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    display: flex;
    gap: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 5px;
}

/* Base styles for navigation buttons */
.hostapi-map-nav-button {
    background-color: #2c3e50;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

/* View button - slightly different style to distinguish it */
.hostapi-map-view-button {
    background-color: #2c3e50;
}

/* Previous/Next button styling */
.hostapi-map-prev-button,
.hostapi-map-next-button {
    background-color: #34495e;
}

/* Hover effects */
.hostapi-map-nav-button:hover {
    transform: translateY(-1px);
    background-color: #1a252f;
}

/* Active state for pressing the button */
.hostapi-map-nav-button:active {
    transform: translateY(1px);
}

/* Highlighted listing in the listing view */
.hostapi-listing-highlighted {
    background-color: rgba(255, 236, 179, 0.3);
    border-left: 3px solid #f39c12;
    transition: background-color 0.3s ease;
}

/* Responsive adjustments for mobile */
@media (max-width: 767px) {
    .hostapi-map-nav-controls {
        top: 50px; /* Position below map zoom controls on mobile */
        right: 5px;
    }
    
    .hostapi-map-nav-button {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* Extremely small screens */
@media (max-width: 375px) {
    .hostapi-map-nav-button span {
        display: none; /* Hide text on very small screens, show only icons */
    }
}