/**
 * VeriEats public-facing CSS.
 *
 * Scoped to .vfk-* classes to avoid collisions with theme/other plugin
 * styles. Custom CSS properties (--vfk-map-height, --vfk-map-mobile-height) are
 * set inline per-shortcode via the wrapper style attribute.
 */

.vfk-map-wrap {
    width: 100%;
    margin: 16px 0;
    position: relative; /* anchor for overlay controls */
}

.vfk-map {
    width: 100%;
    height: var(--vfk-map-height, 600px);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: #e5e7eb;
}

@media (max-width: 640px) {
    .vfk-map {
        height: var(--vfk-map-mobile-height, 70vh);
        border-radius: 4px;
    }
}

.vfk-map__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #586069;
    font-style: italic;
    pointer-events: none;
}

.vfk-map-error {
    padding: 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #b32d2e;
    font-size: 14px;
}

/* ─── Overlay controls (v2.0) ────────────────────────────────────────
 * The filter panel, search box, and legend button sit on top of the
 * map via absolute positioning. The map's parent (.vfk-map-wrap) is
 * the positioning anchor.
 */

.vfk-overlay {
    position: absolute;
    z-index: 5;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
}
.vfk-overlay--search {
    top: 12px;
    right: 60px; /* leave room for Google's zoom controls */
    padding: 6px;
    width: 240px;
}
.vfk-overlay--filters-btn {
    bottom: 24px;
    left: 12px;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    transition: background .12s;
    border: none;
    color: #1f2937;
}
.vfk-overlay--filters-btn:hover {
    background: #f1f5f9;
}

@media (max-width: 640px) {
    .vfk-overlay--search { width: 180px; right: 50px; }
}

/* Removed in v2.0.1: the floating top-left filter panel was merged
 * into the Filters button's InfoWindow (see .vfk-iw--filters below)
 * to free up screen real estate.
 */

/* Search panel internals */
.vfk-search__input {
    width: 100%;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 13px;
    box-sizing: border-box;
}
.vfk-search__input:focus {
    outline: 2px solid #5ABEB2;
    outline-offset: -1px;
}
.vfk-search__results {
    list-style: none;
    margin: 4px 0 0 0;
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
}
.vfk-search__results:empty {
    display: none;
}
.vfk-search__result {
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
}
.vfk-search__result:hover,
.vfk-search__result--active {
    background: #eef7f5;
}
.vfk-search__result img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.vfk-search__result-text {
    flex: 1;
    min-width: 0;
}
.vfk-search__result-name {
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vfk-search__result-meta {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* InfoWindow content (rendered inside Google Maps' native InfoWindow) */
.vfk-iw {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 280px;
    line-height: 1.4;
}
.vfk-iw__header {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px;
}
.vfk-iw__logo {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #f1f5f9;
}
.vfk-iw__heading {
    flex: 1;
    min-width: 0;
}
.vfk-iw__name {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 2px 0;
    word-wrap: break-word;
}
.vfk-iw__types {
    font-size: 12px;
    color: #586069;
    margin: 0;
}
.vfk-iw__address {
    font-size: 12px;
    color: #374151;
    margin: 4px 0 6px 0;
    line-height: 1.35;
}

/* v2.7.0: review aggregate row — stars + numeric avg + count, linked
 * to the public reviews page. Sits at the top of the body, just below
 * the name/badges header, before address. */
.vfk-iw__reviews {
    font-size: 12px;
    margin: 4px 0 6px 0;
    line-height: 1.35;
}
.vfk-iw__reviews-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: inherit;
}
.vfk-iw__reviews-link:hover {
    text-decoration: underline;
}
.vfk-iw__reviews-value {
    font-weight: 600;
    color: #1f2937;
}
.vfk-iw__reviews-count {
    color: #6b7280;
}
.vfk-iw__reviews-empty {
    color: #9ca3af;
    font-style: italic;
}

/* Stars overlay (used in both InfoWindow + public reviews page) */
.vfk-stars {
    position: relative;
    display: inline-block;
    font-size: 1.05em;
    line-height: 1;
    color: #d1d5db;
    /* v2.7.1: see note in vfk-reviews.css — letter-spacing creates
     * visually-segmented groups at the fill boundary. */
    letter-spacing: 0;
}
.vfk-stars__bg,
.vfk-stars__fg {
    display: inline-block;
}
.vfk-stars__fg {
    position: absolute;
    top: 0;
    left: 0;
    color: #f59e0b;
    overflow: hidden;
    white-space: nowrap;
}

/* v2.5.0: schedule line — appears for active/upcoming rows, between
 * the address and the directions button. Permanent rows skip it (the
 * "Permanent" badge already says it). Emoji icon + label in one row;
 * label may wrap if the date+time string is long. Aligns with the
 * other body-text rows (font-size 12px, dark gray, light line-height). */
.vfk-iw__schedule {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 12px;
    color: #374151;
    margin: 0 0 6px 0;
    line-height: 1.35;
}
.vfk-iw__schedule-icon {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1;
}

/* "Get directions" link — sits on its own line below the address.
 * Layout matches the configured marker-link items below it (small icon
 * + label, left-aligned, clickable row).
 */
.vfk-iw__directions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #1a73e8;
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 4px;
    /* Side margin gives the focus outline (2px ring + 2px offset = 4px
     * outside the element box) room to draw inside the InfoWindow's
     * content area — without it the left edge of the focus ring is
     * clipped by the InfoWindow's padding. */
    margin: 0 4px 8px 4px;
    transition: background 0.12s;
}
.vfk-iw__directions:hover {
    background: #e8f0fe;
    color: #174ea6;
}
.vfk-iw__directions:focus {
    outline: 2px solid #5ABEB2;
    outline-offset: 2px;
}
.vfk-iw__directions-icon {
    flex-shrink: 0;
    display: block;
}
.vfk-iw__directions-label {
    line-height: 1;
}
/* v6.52.0: phone (tap-to-call) link — same visual treatment as directions. */
.vfk-iw__phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #1a73e8;
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 4px;
    margin: 0 4px 8px 4px;
    transition: background 0.12s;
}
.vfk-iw__phone:hover {
    background: #e8f0fe;
    color: #174ea6;
}
.vfk-iw__phone:focus {
    outline: 2px solid #5ABEB2;
    outline-offset: 2px;
}
.vfk-iw__phone-icon {
    flex-shrink: 0;
    display: block;
}
.vfk-iw__phone-label {
    line-height: 1;
}
.vfk-iw__kind-badge {
    display: inline-block;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    font-weight: 500;
}
.vfk-iw__kind-badge--upcoming {
    background: #fef3c7;
    color: #92400e;
}
.vfk-iw__kind-badge--permanent {
    background: #dbeafe;
    color: #1e40af;
}
.vfk-iw__kind-badge--featured {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    box-shadow: 0 1px 2px rgba(217, 119, 6, 0.2);
}
.vfk-iw__kind-badge--active {
    /* no badge — current is the implicit default */
    display: none;
}
.vfk-iw__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid #e5e7eb;
    padding-top: 8px;
}
.vfk-iw__links a {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #0B8276;
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.12s;
}
.vfk-iw__links a:hover {
    background: #eef7f5;
    color: #086357;
}
.vfk-iw__links .emoji {
    font-size: 16px;
    line-height: 1;
}

/* Combined filter + legend (rendered inside the shared InfoWindow,
 * opened via the Filters button in bottom-left). Each row is a label
 * containing a checkbox, icon, type name, and count — clicking the
 * checkbox toggles visibility; the icon doubles as a legend reference.
 */
.vfk-iw--filters {
    min-width: 200px;
}
.vfk-iw__filters-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px 0;
}
.vfk-iw__filters-hint {
    font-size: 11px;
    color: #6b7280;
    margin: 0 0 8px 0;
}
.vfk-iw__filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vfk-iw__filter-list li {
    display: flex;
    align-items: center;
}
.vfk-iw__filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex: 1;
    padding: 3px 4px;
    border-radius: 4px;
    transition: background 0.1s;
}
.vfk-iw__filter-row:hover {
    background: #f8fafc;
}
.vfk-iw__filter-row input[type=checkbox] {
    margin: 0;
    flex-shrink: 0;
}
.vfk-iw__filter-row img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.vfk-iw__filter-label {
    color: #1f2937;
    font-size: 13px;
    flex: 1;
}
.vfk-iw__filter-count {
    color: #9ca3af;
    font-size: 11px;
    margin-left: auto;
    padding-left: 4px;
}

/* ─────────────────────────────────────────────────────────────────
 *  v6.1.0: Business-list pane
 *  Side-by-side with the map on desktop; stacked below on mobile.
 *  Visual style approximates the screenshot reference (dark
 *  rounded card list) but inherits the host theme's color tokens
 *  where possible so it doesn't clash with light themes.
 * ───────────────────────────────────────────────────────────── */

.vfk-map-wrap {
    /* On desktop, give the map+list a flex layout. Mobile falls back
     * to block stacking via media query below. */
    display: block;
    position: relative;
}

@media (min-width: 768px) {
    .vfk-map-wrap {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 0;
        align-items: stretch;
    }
    .vfk-map-wrap--list-hidden {
        grid-template-columns: 1fr;
    }
}

.vfk-list {
    background: #1f2937;
    color: #e5e7eb;
    border-radius: 0 8px 8px 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Match the map's height so the two render the same vertical span
     * on desktop. */
    max-height: var(--vfk-map-height, 600px);
}

@media (max-width: 767px) {
    .vfk-list {
        border-radius: 0 0 8px 8px;
        max-height: 50vh;
    }
}

.vfk-map-wrap--list-hidden .vfk-list {
    /* Don't display:none the whole pane — that would hide the toggle
     * button too, leaving users no way to recover the list. Instead
     * shrink to zero-width and hide the body; the toggle button is
     * repositioned to float over the map (see below). */
    width: 0;
    min-width: 0;
    background: transparent;
    border: none;
}
.vfk-map-wrap--list-hidden .vfk-list__head {
    background: transparent;
    border-bottom: none;
    padding: 0;
}
.vfk-map-wrap--list-hidden .vfk-list__title,
.vfk-map-wrap--list-hidden .vfk-list__count,
.vfk-map-wrap--list-hidden .vfk-list__body {
    display: none;
}

.vfk-list__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #374151;
    background: #111827;
    flex-shrink: 0;
}

.vfk-list__toggle {
    background: transparent;
    border: 1px solid #4b5563;
    color: #e5e7eb;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}
.vfk-list__toggle:hover {
    background: #374151;
}

.vfk-list__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #f3f4f6;
    flex: 1;
    line-height: 1.2;
}

.vfk-list__count {
    font-size: 12px;
    color: #9ca3af;
    flex-shrink: 0;
}

.vfk-list__body {
    overflow-y: auto;
    flex: 1;
    padding: 10px;
}

.vfk-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vfk-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #111827;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    outline: none;
}
.vfk-list__item:hover,
.vfk-list__item:focus {
    background: #1e293b;
    transform: translateY(-1px);
}
.vfk-list__item:focus-visible {
    box-shadow: 0 0 0 2px #60a5fa;
}

.vfk-list__media {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: #374151;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vfk-list__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vfk-list__thumb--icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.vfk-list__info {
    flex: 1;
    min-width: 0; /* allow text truncation inside flex item */
}

.vfk-list__name {
    font-size: 14px;
    font-weight: 600;
    color: #f3f4f6;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vfk-list__featured {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #fbbf24;
    background: rgba( 251, 191, 36, 0.15 );
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.vfk-list__meta {
    font-size: 12px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.vfk-list__rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #fbbf24;
    font-weight: 600;
}
.vfk-list__rating-star {
    font-size: 13px;
}
.vfk-list__rating-value {
    color: #f3f4f6;
}
.vfk-list__rating-count {
    color: #9ca3af;
    font-weight: 400;
    font-size: 11px;
}
.vfk-list__rating--empty {
    color: #6b7280;
    font-style: italic;
    font-weight: 400;
}

.vfk-list__type {
    color: #9ca3af;
}

.vfk-list__loading,
.vfk-list__empty {
    list-style: none;
    padding: 18px 14px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
}

/* When list is hidden via the toggle button on desktop, give the
 * map the full width back. */
.vfk-map-wrap--list-hidden .vfk-map {
    border-radius: 8px;
}

/* Floating "show list" button when list is hidden (so users can
 * always recover the list, even after toggling off). Position
 * top-right of the map. */
.vfk-map-wrap--list-hidden .vfk-list__toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    display: flex !important;
    background: rgba( 17, 24, 39, 0.92 );
    color: #e5e7eb;
}

/* ─────────────────────────────────────────────────────────────────
 *  v6.1.1: light-theme list variant — applied when the map style is
 *  a light-toned preset (silver, retro, pale_dawn, default). The
 *  default class is dark (matches the v6.1.0 baseline + the original
 *  screenshot reference), so a light-theme class only needs override
 *  rules. Anything not listed here inherits the dark base.
 *
 *  Note: structure-only rules (sizing, layout, hover, focus rings,
 *  flex behavior) intentionally stay shared between themes.
 * ───────────────────────────────────────────────────────────── */

.vfk-list.vfk-list--theme-light {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
}
.vfk-list--theme-light .vfk-list__head {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.vfk-list--theme-light .vfk-list__toggle {
    background: transparent;
    border: 1px solid #d1d5db;
    color: #4b5563;
}
.vfk-list--theme-light .vfk-list__toggle:hover {
    background: #f3f4f6;
}
.vfk-list--theme-light .vfk-list__title {
    color: #111827;
}
.vfk-list--theme-light .vfk-list__count {
    color: #6b7280;
}
.vfk-list--theme-light .vfk-list__item {
    background: #f9fafb;
    border: 1px solid transparent;
}
.vfk-list--theme-light .vfk-list__item:hover,
.vfk-list--theme-light .vfk-list__item:focus {
    background: #ffffff;
    border-color: #e5e7eb;
}
.vfk-list--theme-light .vfk-list__media {
    background: #e5e7eb;
}
.vfk-list--theme-light .vfk-list__name {
    color: #111827;
}
.vfk-list--theme-light .vfk-list__featured {
    /* Slightly stronger gold against the lighter background. */
    color: #b45309;
    background: rgba( 251, 191, 36, 0.18 );
}
.vfk-list--theme-light .vfk-list__meta {
    color: #6b7280;
}
.vfk-list--theme-light .vfk-list__rating {
    color: #d97706;
}
.vfk-list--theme-light .vfk-list__rating-value {
    color: #111827;
}
.vfk-list--theme-light .vfk-list__rating-count {
    color: #6b7280;
}
.vfk-list--theme-light .vfk-list__rating--empty {
    color: #9ca3af;
}
.vfk-list--theme-light .vfk-list__type {
    color: #6b7280;
}
.vfk-list--theme-light .vfk-list__loading,
.vfk-list--theme-light .vfk-list__empty {
    color: #6b7280;
}
/* Floating toggle when list is hidden — light variant */
.vfk-map-wrap--list-hidden .vfk-list--theme-light .vfk-list__toggle {
    background: rgba( 255, 255, 255, 0.95 );
    border: 1px solid #d1d5db;
    color: #4b5563;
}

/* ─────────────────────────────────────────────────────────────────
 *  v6.1.2: Filters panel as a positioned DOM overlay.
 *  Anchored to the bottom-left of the map container, popping up
 *  above the Filters button. Replaces the geographic InfoWindow
 *  previously used, which drifted with map pan/zoom.
 * ───────────────────────────────────────────────────────────── */

.vfk-overlay--filters-panel {
    position: absolute;
    /* Sits just above the Filters button (button is bottom: 24px,
     * roughly 36px tall including its padding → start panel ~ 70px
     * from bottom to leave a small visual gap). */
    bottom: 70px;
    left: 12px;
    max-width: 320px;
    /* Cap height so very long type lists scroll inside the panel
     * rather than overflowing the map. Subtract the offset and a
     * little breathing room from the map's CSS-var height. */
    max-height: calc( var(--vfk-map-height, 600px) - 100px );
    overflow-y: auto;
    padding: 14px 16px;
    z-index: 6; /* sits above the button (z: 5) */
    color: #1f2937;
    /* The inner HTML still uses .vfk-iw / .vfk-iw__* classes from
     * the legacy InfoWindow markup — keep their styles working in
     * this new container. The inner card no longer needs its own
     * background since the panel itself provides it. */
}
.vfk-overlay--filters-panel .vfk-iw {
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
}
.vfk-overlay--filters-panel[hidden] {
    /* Honor the hidden attribute even when other rules set display. */
    display: none !important;
}

@media (max-width: 640px) {
    .vfk-overlay--filters-panel {
        /* On small screens, give the panel a bit more width but stay
         * pinned to the left edge so it never overflows the map. */
        max-width: calc( 100% - 24px );
        max-height: calc( var(--vfk-map-mobile-height, 70vh) - 100px );
    }
}

/* ── v6.42.0: CTA button row below the map (per-embed sets) ───────────
   Rendered by VFK_LocationsMap_Shortcode::render_button_row(). The
   .vfk-map-buttons__btn class provides the default look; any per-button
   "Custom CSS" set in the admin is applied inline and overrides this. */
.vfk-map-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: stretch;
    margin: 14px 0 0;
    padding: 4px 0;
}
.vfk-map-buttons__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    background: #2d6a4f;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid rgba( 0, 0, 0, 0.08 );
    transition: background 0.15s ease, transform 0.05s ease;
    cursor: pointer;
}
.vfk-map-buttons__btn:hover,
.vfk-map-buttons__btn:focus {
    background: #1b4332;
    color: #fff;
    text-decoration: none;
}
.vfk-map-buttons__btn:active {
    transform: translateY( 1px );
}
.vfk-map-buttons__emoji {
    font-size: 16px;
    line-height: 1;
}
@media ( max-width: 600px ) {
    .vfk-map-buttons {
        gap: 8px;
    }
    .vfk-map-buttons__btn {
        padding: 9px 13px;
        font-size: 13px;
    }
}