/*
 * MWFewoManager
 *
 * @author Küstenweb GmbH <info@mwfewomanager.de>
 * @copyright mwfewomanager.de
 */

:root {
    --placepicker-surface: var(--color-surface, #fff);
    --placepicker-text: var(--color-text, #222);
    --placepicker-border: var(--border-color, #ddd);
    --placepicker-radius: var(--border-radius, 8px);
    --placepicker-shadow: var(--shadow-card, 0 4px 16px rgba(0,0,0,.1));

    --placepicker-max-width: 320px;
    --placepicker-gap: 0.5rem;
    --placepicker-padding: 0.5rem 0.75rem;
    --placepicker-item-padding: 0.5rem 0.75rem;
    --placepicker-hover-bg: color-mix(in srgb, var(--placepicker-border) 35%, var(--placepicker-surface));
    --placepicker-scrollbar-thumb: color-mix(in srgb, var(--placepicker-border) 60%, var(--placepicker-surface));
    --placepicker-muted: var(--color-muted, #6b7280);
    --placepicker-z-index: 1000;
}

/* =========================================================
   GRUNDLAYOUT
   ========================================================= */
.placepicker-results {
    position: absolute;
    width: 100%;
    max-width: var(--placepicker-max-width, 320px);
    max-height: 50vh;
    overflow-y: auto;

    background: var(--placepicker-surface);
    border: 1px solid var(--placepicker-border);
    border-radius: var(--placepicker-radius);
    box-shadow: var(--placepicker-shadow);

    left: 0;
    z-index: var(--placepicker-z-index);

    overflow-x: hidden;
    animation: fadeInPlacepicker var(--placepicker-animation-duration, 0.18s) ease-out;
}


@media (min-width: 820px) {
    .placepicker-results {
        max-height: 400px;
    }
}

/* =========================================================
   EMPTY STATE
   ========================================================= */
.placepicker-results .no-results {
    color: var(--placepicker-muted);
}

/* =========================================================
   RESULT ITEM
   ========================================================= */
.placepicker-results .result-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding: var(--placepicker-item-padding);
    color: var(--placepicker-text);
}

/* =========================================================
   INTERACTION STATES
   ========================================================= */
.placepicker-results .result-item:hover,
.placepicker-results .result-item--active {
    background: var(--placepicker-hover-bg);
}

/* =========================================================
   SCROLLBAR
   ========================================================= */
.placepicker-results::-webkit-scrollbar {
    width: 6px;
}

.placepicker-results::-webkit-scrollbar-thumb {
    background: var(--placepicker-scrollbar-thumb);
    border-radius: 4px;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 600px) {
    .placepicker-results {
        max-height: 260px;
        border-radius: var(--placepicker-radius);
    }
}

@keyframes fadeInPlacepicker {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}