/* ---------- Searchable dropdown (combo.js) ---------- */

.wk-combo-wrap {
    position: relative;
    display: inline-block;
}

.wk-combo-wrap .wk-combo-wrap { display: contents; } /* safety, no double wrap */

/* base look for selects that carry no styling class of their own */
.wk-combo-input--bare {
    width: 100%;
    padding: .6rem 1.9rem .6rem .8rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: #fff;
    color: #1f2937;
    font: inherit;
    font-size: .9rem;
    box-sizing: border-box;
}

.wk-combo-input {
    padding-right: 1.9rem !important;
    cursor: pointer;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d6b64' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .7rem center !important;
}

.wk-combo-input::placeholder {
    color: var(--faint, #94a29b);
}

.wk-combo-input:disabled {
    background-color: var(--line-3, #eef1ef) !important;
    cursor: not-allowed;
}

.wk-combo {
    /* portal: fixed to the viewport, coordinates set by combo.js */
    position: fixed;
    width: max-content;
    max-width: 340px;
    z-index: 15000;

    max-height: 240px;
    overflow-y: auto;
    padding: .25rem;

    background: #fff;
    border: 1px solid var(--line, #e5e9e7);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16, 35, 26, .14);

    scrollbar-width: thin;
    scrollbar-color: #dfe7e2 transparent;
}

.wk-combo::-webkit-scrollbar { width: 6px; }
.wk-combo::-webkit-scrollbar-thumb { background: #dfe7e2; border-radius: 999px; }

.wk-combo__item {
    padding: .45rem .65rem;
    border-radius: 7px;

    color: var(--ink-2, #2a3a33);
    font-size: .82rem;
    white-space: nowrap;

    cursor: pointer;
}

.wk-combo__item:hover,
.wk-combo__item.is-active {
    background: var(--success-bg, #e7f6ee);
    color: var(--emerald-2, #0a7a4b);
}

.wk-combo__empty {
    padding: .5rem .65rem;
    color: var(--faint, #94a29b);
    font-size: .8rem;
}

/* ---------- Phone: dial code + digits (phone.js) ---------- */

.wk-phone {
    position: relative;
    display: flex;
    gap: .5rem;
}

.wk-phone__code {
    flex: 0 0 7.5rem;
}

.wk-phone__num {
    flex: 1 1 auto;
    min-width: 0;
}

.wk-phone__carrier {
    display: none;
}