/**
 * Strict searchable combobox for the specialty field.
 *
 * Deliberately minimal. This renders inside the WooCommerce checkout and the public
 * booking pages of arbitrary themes, and the Helper's copy runs on partner shops that
 * cannot be tested from here — so the SEARCH INPUT IS NEVER STYLED. It keeps whatever
 * width, height, border, font and focus ring the theme already gives its inputs; only
 * the popup, which no theme knows about, is drawn here.
 *
 * Colours use currentColor and system tokens rather than CertFlow brand values for the
 * same reason: the popup has to sit convincingly inside someone else's design.
 */

.cfh-combo {
    position: relative;
}

/* The search box inherits the theme's input styling. Only guarantee full width, since
   it replaces an input that was full width in every one of our layouts. */
.cfh-combo > .cfh-combo-search {
    width: 100%;
    box-sizing: border-box;
}

.cfh-combo-menu {
    position: absolute;
    z-index: 9999; /* above WooCommerce's own overlays and sticky order-review panels */
    top: 100%;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 4px 0;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    color: #1e1e1e;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    text-align: left;
}

.cfh-combo-menu[hidden] {
    display: none;
}

.cfh-combo-opt {
    padding: 8px 12px;
    margin: 0;
    cursor: pointer;
    line-height: 1.4;
    /* A long specialty must stay readable rather than being clipped. */
    overflow-wrap: break-word;
}

.cfh-combo-opt.is-active,
.cfh-combo-opt:hover {
    background: rgba(0, 0, 0, 0.07);
}

.cfh-combo-empty {
    padding: 8px 12px;
    margin: 0;
    opacity: 0.65;
    cursor: default;
}

/* Respect a dark theme rather than punching a white rectangle into it. */
@media (prefers-color-scheme: dark) {
    .cfh-combo-menu {
        background: #1f1f1f;
        color: #f0f0f0;
        border-color: rgba(255, 255, 255, 0.22);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    }

    .cfh-combo-opt.is-active,
    .cfh-combo-opt:hover {
        background: rgba(255, 255, 255, 0.12);
    }
}