/* AJAX Overlay Styles */
.ajax-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000; /* above most Bootstrap components */
    background: rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all; /* blocks clicks */
}

.ajax-overlay__content {
    background: #fff;
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.2);
    text-align: center;
    min-width: 180px;
}


/* Force primary hover/active colors */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible {
    background-color: #30adad !important;
    border-color: #2ea3a3 !important;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary {
    background-color: #2ea3a3 !important;
    border-color: #288f8f !important;
}

/* Optional: focus ring */
.btn-primary:focus,
.btn-primary:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(57, 204, 204, .35) !important;
}


/* quick search */


:root {
    /* "Habeco-like" neutral + red accent (adjust to match your real theme) */
    --hb-accent: #c4141a;
    --hb-dark: #1f2937;
    --hb-muted: #6b7280;
    --hb-border: rgba(17,24,39,.10);
    --hb-bg: #ffffff;
    --hb-soft: #f6f7f9;
}

body {
    background: var(--hb-soft);
    color: var(--hb-dark);
}

a {
    color: inherit;
    text-decoration: none;
}

/* Top bar */
.topbar {
    background: #111827;
    color: rgba(255,255,255,.92);
    font-size: .9rem;
}

    .topbar a {
        color: rgba(255,255,255,.92);
    }

        .topbar a:hover {
            color: #fff;
            text-decoration: underline;
        }

/* Header */
.site-header {
    background: var(--hb-bg);
    border-bottom: 1px solid var(--hb-border);
}

.brand {
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--hb-accent);
    font-size: 1.25rem;
}

.pill-link {
    padding: .35rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--hb-border);
    background: #fff;
    font-size: .9rem;
}

    .pill-link:hover {
        border-color: rgba(17,24,39,.18);
    }

/* Search */
.search-wrap {
    position: relative;
    max-width: 760px;
    width: 100%;
}

.search-input {
    height: 46px;
    border-radius: 999px;
    padding-left: 44px;
    padding-right: 14px;
    border: 1px solid var(--hb-border);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    background: #fff;
}

    .search-input:focus {
        box-shadow: 0 10px 24px rgba(0,0,0,.10);
        border-color: rgba(17,24,39,.18);
    }

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hb-muted);
    pointer-events: none;
}

.clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--hb-muted);
    display: none;
    padding: .35rem .5rem;
    border-radius: 999px;
}

    .clear-btn:hover {
        background: rgba(17,24,39,.06);
        color: var(--hb-dark);
    }

/* Dropdown panel */
.qs-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 2000;
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--hb-border);
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
    overflow: hidden;
    display: none;
}

    .qs-panel.show {
        display: block;
    }

.qs-section-title {
    padding: .65rem .9rem .45rem;
    font-size: .78rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--hb-muted);
    background: #fff;
}

.qs-item {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .6rem .9rem;
    cursor: pointer;
}

    .qs-item:hover, .qs-item.active {
        background: rgba(196,20,26,.08);
    }

    .qs-item .lead {
        width: 22px;
        text-align: center;
        color: var(--hb-muted);
        flex: 0 0 auto;
    }

    .qs-item .thumb {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        border: 1px solid rgba(0,0,0,.06);
        overflow: hidden;
        flex: 0 0 auto;
        background: #f3f4f6;
        display: grid;
        place-items: center;
    }

        .qs-item .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

    .qs-item .meta {
        min-width: 0;
        flex: 1;
    }

    .qs-item .title {
        font-weight: 700;
        font-size: .95rem;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .qs-item .sub {
        font-size: .84rem;
        color: var(--hb-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .qs-item .right {
        text-align: right;
        flex: 0 0 auto;
        white-space: nowrap;
    }

.qs-price {
    font-weight: 800;
    color: var(--hb-dark);
}

.qs-badge {
    font-size: .72rem;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 999px;
    padding: .15rem .5rem;
    color: var(--hb-muted);
    background: #fff;
}

.qs-footer {
    border-top: 1px solid var(--hb-border);
    padding: .7rem .9rem;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

.btn-hb {
    background: var(--hb-accent);
    border-color: var(--hb-accent);
    border-radius: 999px;
    padding: .45rem 1.0rem;
}

    .btn-hb:hover {
        filter: brightness(.95);
    }

.btn-soft {
    border-radius: 999px;
    padding: .45rem 1.0rem;
}

/* Content placeholder */
.hero {
    background: #fff;
    border: 1px solid var(--hb-border);
    border-radius: 18px;
    padding: 1.2rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}