/* ===================================================================
   bb-search.css – MietPortalo Suchmodul
   Alle Werte per CSS-Variablen aus frontend.php
=================================================================== */

/* =====================================================================
   Dynamic BB-Search CSS Variables
   ===================================================================== */

.mp-search-form {
    background: var(--mp-bg);

    border-style: var(--mp-border-style);
    border-color: var(--mp-border-color);
    border-width: var(--mp-bw-top) var(--mp-bw-right) var(--mp-bw-bottom) var(--mp-bw-left);
    border-radius: var(--mp-br-tl) var(--mp-br-tr) var(--mp-br-br) var(--mp-br-bl);

    padding-top: var(--mp-pad-top);
    padding-right: var(--mp-pad-right);
    padding-bottom: var(--mp-pad-bottom);
    padding-left: var(--mp-pad-left);

    box-shadow: var(--mp-shadow);
}

/* Button */
.mp-search-btn {
    background: var(--mp-btn-bg);
    color: var(--mp-btn-color);
    border-radius: var(--mp-btn-radius);
}

.mp-search-btn:hover {
    background: var(--mp-btn-bg-hover);
    color: var(--mp-btn-color-hover);
}
.mp-search-form:hover {
    border-color: var(--mp-border-color-h);
}

/* ============================================================
   Formularbox
============================================================ */

.mp-search-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;

    width: 100%;
    max-width: 600px;
    margin: 0 auto;

    background: var(--mp-bg, transparent);

    border-style: var(--mp-border-style, none);
    border-color: var(--mp-border-color, transparent);
    border-width:
        var(--mp-bw-top, 0)
        var(--mp-bw-right, 0)
        var(--mp-bw-bottom, 0)
        var(--mp-bw-left, 0);

    border-radius:
        var(--mp-br-tl, 0)
        var(--mp-br-tr, 0)
        var(--mp-br-br, 0)
        var(--mp-br-bl, 0);

    padding:
        var(--mp-pad-top, 5px)
        var(--mp-pad-right, 5px)
        var(--mp-pad-bottom, 5px)
        var(--mp-pad-left, 5px);

    box-shadow: var(--mp-shadow, none);
}

/* Hover Rand */
.mp-search-form:hover {
    border-color: var(--mp-border-color-h, var(--mp-border-color));
}

/* ============================================================
   Breite der Felder
============================================================ */

.mp-search-form .mp-search-row {
    flex: 1 1 0;
    min-width: 0;
}

.mp-search-form .mp-search-row:last-child {
    flex: 0 0 auto;
}

/* ============================================================
   Inputs
============================================================ */

.mp-search-input,
.mp-search-location {
    width: 100%;
    padding: 12px 12px;

    border: none;
    border-bottom: 2px solid var(--mp-input-border, #ccc);

    background: transparent;
    font-size: 15px;
    outline: none;
    transition: border-color 0.25s ease;
}

.mp-search-input:focus,
.mp-search-location:focus {
    border-bottom-color: var(--mp-input-focus, #006699);
}

/* ============================================================
   Button
============================================================ */

.mp-search-btn {
    flex: 0 0 120px !important;
    background: var(--mp-btn-bg, var(--color-1)) !important;
    color: var(--mp-btn-color, #fff) !important;
    border: none !important;
    border-radius: var(--mp-btn-radius, 6px) !important;
    padding: 10px !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: background 0.25s ease, color 0.25s ease !important;
    overflow: hidden;
}

.mp-search-btn:hover {
    background: var(--mp-btn-bg-hover, var(--color-2)) !important;
    color: var(--mp-btn-color-hover, #fff) !important;
}

/* ============================================================
   Layout horizontal
============================================================ */

.mp-search--horizontal .mp-search-btn {
    margin-left: auto;
}

/* ============================================================
   Layout stacked
============================================================ */

.mp-search--stacked {
    flex-direction: column;
    gap: 14px;
}

.mp-search--stacked .mp-search-row {
    width: 100%;
}

.mp-search--stacked .mp-search-input,
.mp-search--stacked .mp-search-location {
    width: 100%;
    padding: 14px 12px;
}

.mp-search--stacked .mp-search-btn {
    width: 100%;
    padding: 14px 0 !important;
    text-align: center;
}

/* ============================================================
   Mobile
============================================================ */

@media (max-width: 600px) {

    .mp-search--horizontal {
        flex-direction: column;
        gap: 14px;
    }

    .mp-search-form .mp-search-row,
    .mp-search-form .mp-search-btn {
        width: 100%;
        margin-left: 0;
    }
}

/* ============================================================
   Autocomplete Highlight
============================================================ */

.mp-search-autocomplete .mp-ac-item.mp-ac-active {
    background: #eee;
}

.mp-search-autocomplete .mp-ac-item .mp-ac-highlight {
    font-weight: 700;
    color: var(--color-1);
}