/**
 * BICO Controle — Pill-formulier
 *
 * Standalone, geen Bootstrap vereist.
 * Pakt automatisch de themakleuren op als --primary / --color-muted beschikbaar zijn
 * (bico-wp thema). Valt anders terug op de hardcoded standaardwaarden.
 *
 * Overschrijfbaar vanuit elk thema via:
 *   --bico-primary     (default: var(--primary, #10293e))
 *   --bico-color-muted (default: var(--color-muted, #64748b))
 */

:root {
    --bico-primary:     var(--primary, #10293e);
    --bico-color-muted: var(--color-muted, #64748b);
}

.bico-sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}

.bico-pill-form {
    margin:        0 auto;
    width:         400px;
    display:       flex;
    align-items:   center;
    gap:           0;
    height:        74px;
    padding:       10px 10px 10px 18px;
    border-radius: 9999px;
    background:    #fff;
    border:        1px solid rgba(15, 23, 42, 0.10);
    box-shadow:    0 10px 24px rgba(15, 23, 42, 0.10);
    overflow:      hidden;
}

.bico-pill-badge {
    flex:          0 0 auto;
    margin-right:  14px;
    display:       grid;
    place-items:   center;
    color:         var(--bico-primary);
    font-weight:   700;
    letter-spacing: 0.4px;
}

.bico-pill-input {
    flex:       1 1 auto;
    border:     0;
    outline:    0;
    line-height: 1;
    padding:    0;
    background: transparent;
    color:      var(--bico-primary);
    min-width:  0;
    font-size:  1rem;
}

.bico-pill-input::placeholder {
    color:   var(--bico-color-muted);
    opacity: 1;
}

.bico-pill-btn {
    flex:          0 0 auto;
    height:        100%;
    padding:       0 20px;
    border:        0;
    background:    var(--bico-primary);
    color:         #fff;
    font-weight:   700;
    border-radius: 9999px;
    cursor:        pointer;
    outline:       0;
    font-size:     0.9375rem;
    transition:    filter 0.15s ease;
}

.bico-pill-btn:focus-visible {
    box-shadow: 0 0 0 4px rgba(16, 41, 62, 0.12);
}

.bico-pill-btn:hover {
    filter: brightness(1.05);
}

.bico-pill-btn:active {
    filter: brightness(0.98);
}

.bico-pill-form:focus-within {
    border-color: rgba(16, 41, 62, 0.30);
    box-shadow:   0 10px 24px rgba(15, 23, 42, 0.12), 0 0 0 4px rgba(16, 41, 62, 0.12);
}

@media (max-width: 720px) {
    .bico-pill-form {
        width:   100%;
        height:  66px;
        padding: 8px 8px 8px 14px;
    }

    .bico-pill-btn {
        padding: 0 16px;
    }
}

/**
 * Backwards-compat aliassen voor de unprefixed klassen (.pill-*)
 * uit het bico-wp thema (template-parts/general/form.php).
 * Te verwijderen zodra dat bestand uit het thema is gewist.
 */
.sr-only        { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.pill-form      { margin: 0 auto; width: 400px; display: flex; align-items: center; gap: 0; height: 74px; padding: 10px 10px 10px 18px; border-radius: 9999px; background: #fff; border: 1px solid rgba(15,23,42,0.10); box-shadow: 0 10px 24px rgba(15,23,42,0.10); overflow: hidden; }
.pill-form:focus-within { border-color: rgba(16,41,62,0.30); box-shadow: 0 10px 24px rgba(15,23,42,0.12), 0 0 0 4px rgba(16,41,62,0.12); }
.pill-badge     { flex: 0 0 auto; margin-right: 14px; display: grid; place-items: center; color: var(--bico-primary); font-weight: 700; letter-spacing: 0.4px; }
.pill-input     { flex: 1 1 auto; border: 0; outline: 0; line-height: 1; padding: 0; background: transparent; color: var(--bico-primary); min-width: 0; font-size: 1rem; }
.pill-input::placeholder { color: var(--bico-color-muted); opacity: 1; }
.pill-btn       { flex: 0 0 auto; height: 100%; padding: 0 20px; border: 0; background: var(--bico-primary); color: #fff; font-weight: 700; border-radius: 9999px; cursor: pointer; outline: 0; font-size: 0.9375rem; transition: filter 0.15s ease; }
.pill-btn:focus-visible { box-shadow: 0 0 0 4px rgba(16,41,62,0.12); }
.pill-btn:hover  { filter: brightness(1.05); }
.pill-btn:active { filter: brightness(0.98); }

@media (max-width: 720px) {
    .pill-form { height: 66px; padding: 8px 8px 8px 14px; width: 100%; }
    .pill-btn  { padding: 0 16px; }
}