/* ============================================
   Hospitable Connect — Map Search
   Themed from the same --hc-* variables as the
   rest of the plugin, so changing the Zenith
   gold in one place restyles the map too.
   ============================================ */

.hc-split {
    --hc-map-height: calc(100vh - var(--hc-header-offset, 80px));
    --hc-list-width: 58%;
    --hc-marker-bg: var(--hc-bg, #fff);
    --hc-marker-text: var(--hc-text, #333);
    --hc-marker-active-bg: var(--hc-primary, #c4a265);
    --hc-marker-active-text: #fff;

    position: relative;
    display: grid;
    grid-template-columns: var(--hc-list-width) 1fr;
    gap: 0;
    align-items: start;
}

/* The standalone layout gets its own breathing room; inside Divi the row
   already controls the outer spacing. */
.hc-split--standalone {
    max-width: 100%;
}

.hc-split__list {
    min-width: 0;
    padding: 0 24px 40px 0;
}

.hc-split__map {
    min-width: 0;
    position: relative;
}

/* --- Results bar ---------------------------------------------------- */

.hc-results-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0 20px;
}

.hc-results-bar__count {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--hc-text, #333);
}

.hc-results-bar__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.hc-dates {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.hc-dates__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--hc-text-light, #777);
}

.hc-dates__field input {
    font: inherit;
    font-size: 0.875rem;
    color: var(--hc-text, #333);
    padding: 8px 10px;
    border: 1px solid var(--hc-border, #e0e0e0);
    border-radius: var(--hc-radius, 8px);
    background: var(--hc-bg, #fff);
    min-height: 40px;
}

.hc-dates__field input:focus-visible {
    outline: 2px solid var(--hc-primary, #c4a265);
    outline-offset: 1px;
}

.hc-dates__clear {
    font: inherit;
    font-size: 0.8rem;
    background: none;
    border: none;
    color: var(--hc-text-light, #777);
    text-decoration: underline;
    cursor: pointer;
    padding: 8px 4px;
}

.hc-dates__clear:hover {
    color: var(--hc-primary, #c4a265);
}

.hc-move-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--hc-text, #333);
    cursor: pointer;
    user-select: none;
    padding: 8px 12px;
    border: 1px solid var(--hc-border, #e0e0e0);
    border-radius: var(--hc-radius, 8px);
    background: var(--hc-bg, #fff);
}

.hc-move-toggle__input {
    accent-color: var(--hc-primary, #c4a265);
    width: 16px;
    height: 16px;
    margin: 0;
}

/* --- Cards (standalone layout only) --------------------------------- */

.hc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

/* Tokens render flat and in whatever order the Card Layout specifies, so
   spacing lives on the individual pieces rather than on a container gap. */
.hc-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--hc-radius, 8px);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hc-card__media {
    display: block;
    position: relative;
    aspect-ratio: 20 / 19;
    overflow: hidden;
    border-radius: var(--hc-radius, 8px);
    background: var(--hc-bg-light, #f9f9f9);
    margin-bottom: 10px;
}

.hc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.hc-card:hover .hc-card__media img {
    transform: scale(1.04);
}

.hc-card__media-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ececec 0%, #f7f7f7 100%);
}

.hc-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hc-card__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
}

.hc-card__title a {
    color: var(--hc-text, #333);
    text-decoration: none;
}

.hc-card__title a:hover {
    color: var(--hc-primary, #c4a265);
}

.hc-card__location,
.hc-card__specs,
.hc-card__excerpt,
.hc-card__amenities {
    margin: 0 0 2px;
    font-size: 0.85rem;
    color: var(--hc-text-light, #777);
}

.hc-card__amenities {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hc-card__spec + .hc-card__spec::before {
    content: ' · ';
}

.hc-card__price {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: var(--hc-text, #333);
    min-height: 1.3em;
}

.hc-card__button {
    display: inline-block;
    margin-top: 10px;
    padding: 9px 16px;
    font-size: 0.85rem;
    text-decoration: none;
    border-radius: var(--hc-radius, 8px);
    background: var(--hc-primary, #c4a265);
    color: #fff;
    transition: background 0.15s ease;
}

.hc-card__button:hover {
    background: var(--hc-primary-hover, #b08d4f);
    color: #fff;
}

.hc-card__price strong {
    font-weight: 700;
}

.hc-card__price-unit {
    color: var(--hc-text-light, #777);
    font-weight: 400;
}

/* Shared card states — these also apply to Divi-designed cards, because the
   JS puts the same classes on whatever element it resolved as the card. */

.hc-card--hover,
.hc-is-mapped.hc-card--hover {
    box-shadow: 0 0 0 2px var(--hc-primary, #c4a265);
    border-radius: var(--hc-radius, 8px);
}

.hc-card--active,
.hc-is-mapped.hc-card--active {
    box-shadow: 0 0 0 2px var(--hc-primary, #c4a265);
    border-radius: var(--hc-radius, 8px);
}

@keyframes hc-flash {
    0%   { box-shadow: 0 0 0 0 rgba(196, 162, 101, 0.55); }
    100% { box-shadow: 0 0 0 14px rgba(196, 162, 101, 0); }
}

.hc-card--flash {
    animation: hc-flash 1s ease-out;
}

.hc-card--pricing [data-hc-price] {
    opacity: 0.45;
}

/* Divi gives its columns and loop items a display value of their own, which
   beats the UA stylesheet's [hidden] rule. Bounds filtering has to win against
   that, so it gets an explicit override rather than relying on the attribute. */
.hc-card--filtered {
    display: none !important;
}

/* --- Empty state ---------------------------------------------------- */

.hc-empty {
    padding: 48px 0;
    text-align: center;
}

.hc-empty__title {
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--hc-text, #333);
}

.hc-empty__sub {
    margin: 0 0 20px;
    color: var(--hc-text-light, #777);
}

.hc-empty__reset {
    font: inherit;
    font-size: 0.9rem;
    padding: 12px 20px;
    border: 1px solid var(--hc-text, #333);
    border-radius: var(--hc-radius, 8px);
    background: transparent;
    color: var(--hc-text, #333);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.hc-empty__reset:hover {
    background: var(--hc-primary, #c4a265);
    border-color: var(--hc-primary, #c4a265);
    color: #fff;
}

/* --- Map ------------------------------------------------------------ */

.hc-map {
    position: relative;
    width: 100%;
    /* The fallback matters: --hc-map-height is declared on .hc-split, and the
       map must still have a height if that class was left off the Divi row. */
    height: var(--hc-map-height, calc(100vh - 80px));
    border-radius: var(--hc-radius, 8px);
    overflow: hidden;
    background: var(--hc-bg-light, #f9f9f9);
}

.hc-map--sticky {
    position: sticky;
    top: var(--hc-header-offset, 80px);
}

.hc-map__canvas {
    width: 100%;
    height: 100%;
}

.hc-map__search-area {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 500;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 12px 20px;
    border: none;
    border-radius: 999px;
    background: var(--hc-text, #333);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.hc-map__search-area:hover {
    background: var(--hc-primary, #c4a265);
}

.hc-map__close {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 500;
    font: inherit;
    font-size: 0.85rem;
    padding: 10px 16px;
    border: none;
    border-radius: 999px;
    background: var(--hc-bg, #fff);
    color: var(--hc-text, #333);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* --- Markers -------------------------------------------------------- */

/* Leaflet sizes divIcons via inline styles; these resets let the pill size
   itself to its own text instead. */
.leaflet-marker-icon.hc-marker {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: transparent;
    border: none;
    transform-origin: center bottom;
}

.hc-marker__label {
    display: inline-block;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--hc-marker-bg, #fff);
    color: var(--hc-marker-text, #333);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.14s ease, background-color 0.14s ease, color 0.14s ease;
    cursor: pointer;
}

.hc-marker:hover .hc-marker__label,
.hc-marker--hover .hc-marker__label {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--hc-text, #333);
    color: #fff;
}

.hc-marker--active .hc-marker__label {
    background: var(--hc-marker-active-bg, #c4a265);
    color: var(--hc-marker-active-text, #fff);
    border-color: var(--hc-marker-active-bg, #c4a265);
    transform: translate(-50%, -50%) scale(1.1);
}

.hc-marker--unavailable .hc-marker__label {
    background: var(--hc-unavailable, #e8e8e8);
    color: var(--hc-text-light, #777);
    text-decoration: line-through;
}

.leaflet-marker-icon.hc-marker:focus-visible .hc-marker__label {
    outline: 2px solid var(--hc-primary, #c4a265);
    outline-offset: 2px;
}

/* --- Popup ---------------------------------------------------------- */

.hc-popup-wrap .leaflet-popup-content-wrapper {
    padding: 0;
    overflow: hidden;
    border-radius: var(--hc-radius, 8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.hc-popup-wrap .leaflet-popup-content {
    margin: 0;
    width: auto !important;
}

.hc-popup-wrap .leaflet-popup-tip {
    box-shadow: none;
}

.hc-popup {
    display: block;
    text-decoration: none;
    color: var(--hc-text, #333);
}

.hc-popup__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--hc-bg-light, #f9f9f9);
}

.hc-popup__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hc-popup__body {
    display: block;
    padding: 10px 12px 12px;
}

.hc-popup__title {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 2px;
}

.hc-popup__specs {
    display: block;
    font-size: 0.8rem;
    color: var(--hc-text-light, #777);
}

.hc-popup__price {
    display: block;
    font-size: 0.85rem;
    margin-top: 6px;
}

/* --- Mobile map toggle ---------------------------------------------- */

.hc-map-toggle {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 900;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 12px 20px;
    border: none;
    border-radius: 999px;
    background: var(--hc-text, #333);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* --- Responsive ----------------------------------------------------- */

@media (max-width: 900px) {
    .hc-split {
        grid-template-columns: 1fr;
    }

    .hc-split__list {
        padding-right: 0;
    }

    /* On small screens the map becomes a full-screen overlay rather than a
       cramped column, matching the reference behaviour. */
    .hc-split__map {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: none;
        background: var(--hc-bg, #fff);
    }

    .hc-split--map-open .hc-split__map {
        display: block;
    }

    .hc-split--map-open {
        overflow: hidden;
    }

    .hc-map,
    .hc-map--sticky {
        position: absolute;
        inset: 0;
        height: 100%;
        border-radius: 0;
        top: 0;
    }

    .hc-map-toggle:not([hidden]) {
        display: inline-flex;
    }

    .hc-split--map-open .hc-map-toggle {
        display: none;
    }

    .hc-results-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .hc-cards {
        grid-template-columns: 1fr;
    }

    .hc-dates {
        width: 100%;
    }

    .hc-dates__field {
        flex: 1;
    }
}

/* --- Accessibility -------------------------------------------------- */

.hc-skip-map:focus {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 2000;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    padding: 12px 18px;
    background: var(--hc-text, #333);
    color: #fff;
    border-radius: var(--hc-radius, 8px);
}

@media (prefers-reduced-motion: reduce) {
    .hc-card,
    .hc-card__media img,
    .hc-marker__label {
        transition: none;
    }

    .hc-card--flash {
        animation: none;
    }
}

/* --- Uploaded marker graphics --------------------------------------- */

/* Image markers size themselves from the upload dimensions, so the pill
   resets above must not apply. */
.leaflet-marker-icon.hc-marker--image {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.hc-marker__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.14s ease, filter 0.14s ease;
    transform-origin: center bottom;
    pointer-events: none;
}

.hc-marker--image:hover .hc-marker__img,
.hc-marker--image.hc-marker--hover .hc-marker__img,
.hc-marker--image.hc-marker--active .hc-marker__img {
    transform: scale(1.18);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}

.hc-marker--image.hc-marker--unavailable .hc-marker__img {
    filter: grayscale(1);
    opacity: 0.55;
}

/* Price caption sitting under an image marker. */
.hc-marker__caption {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 3px;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--hc-marker-bg, #fff);
    color: var(--hc-marker-text, #333);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.hc-marker--image.hc-marker--active .hc-marker__caption {
    background: var(--hc-marker-active-bg, #c4a265);
    color: var(--hc-marker-active-text, #fff);
    border-color: var(--hc-marker-active-bg, #c4a265);
}