/* assets/css/select.css — combobox de búsqueda para <select> (público / storefront).
   Copia exacta del bloque del mismo nombre en includes/panel_skin.php (panel del vendedor),
   para poder usarlo en páginas públicas sin cargar el resto del skin del panel.
   Si se corrige un estilo aquí, replicar el cambio también en panel_skin.php (y viceversa). */
/* ── Select con búsqueda (combobox) — ver assets/js/app.js:ikMakeSelectSearchable ── */
.ik-select { position: relative; width: 100%; }
.ik-select-native { position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; padding: 0 !important; border: 0 !important; }
.ik-select-trigger {
    width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer;
    background: #f9f0e0; border: 1.5px solid transparent; border-radius: .75rem; padding: .72rem .9rem .72rem 1rem;
    font-size: .875rem; color: #9a8262; min-height: 46px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.ik-select-trigger:hover { background: #f6ebd6; }
.ik-select-trigger:focus-visible, .ik-select.is-open .ik-select-trigger { outline: none; background: #fff; border-color: #1D2530; box-shadow: 0 0 0 3px rgba(29,37,48,.12); }
.ik-select.has-value .ik-select-trigger { color: #2a1e0e; font-weight: 600; }
.ik-select.is-invalid .ik-select-trigger { border-color: #ba1a1a; box-shadow: 0 0 0 3px rgba(186,26,26,.12); }
.ik-select.is-disabled .ik-select-trigger { opacity: .55; cursor: not-allowed; }
.ik-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik-select-caret { flex-shrink: 0; color: #8a7660; transition: transform .18s; }
.ik-select.is-open .ik-select-caret { transform: rotate(180deg); color: #1D2530; }
.ik-select-clear { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; color: #8a7660; background: rgba(0,0,0,.06); }
.ik-select-clear:hover { background: rgba(186,26,26,.14); color: #ba1a1a; }
.ik-select-clear[hidden] { display: none; }

.ik-select-backdrop { position: fixed; inset: 0; z-index: 9998; background: rgba(20,14,6,0); pointer-events: none; transition: background .16s; }
.ik-select-panel {
    position: fixed; z-index: 9999; background: #fff; border: 1px solid #e4d6bd; border-radius: 12px; overflow: hidden;
    box-shadow: 0 14px 40px rgba(42,30,14,.20), 0 2px 6px rgba(42,30,14,.08);
    opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: top center; transition: opacity .14s, transform .14s;
}
.ik-select-panel.is-flipped { transform-origin: bottom center; transform: translateY(6px) scale(.985); }
.ik-select-panel.is-open { opacity: 1; transform: none; }
.ik-select-sheet-head { display: none; }
.ik-select-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 46px; border-bottom: 1px solid #efe4d0; background: #fdf8ef; color: #9a8262; }
.ik-select-search input { flex: 1; min-width: 0; height: 100%; border: none !important; background: transparent !important; outline: none !important; box-shadow: none !important; font-size: 13.5px; color: #2a1e0e; padding: 0; }
.ik-select-search input::placeholder { color: #a99672; }
.ik-select-list { overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.ik-select-group-label { padding: 10px 10px 4px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #a0703a; }
.ik-select-group:not(:first-child) { border-top: 1px solid #f3eadb; margin-top: 4px; }
.ik-select-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; color: #323544; cursor: pointer; }
.ik-select-option[hidden], .ik-select-group[hidden], .ik-select-empty[hidden] { display: none; }
.ik-select-option.is-active { background: #f6ecda; }
.ik-select-option.is-selected { color: #1D2530; font-weight: 700; }
.ik-select-option.is-disabled { opacity: .45; cursor: not-allowed; }
.ik-select-text { flex: 1; min-width: 0; }
.ik-select-option mark { background: #f4d9a8; color: inherit; border-radius: 3px; padding: 0 1px; }
.ik-select-check { flex-shrink: 0; color: #AB733C; opacity: 0; }
.ik-select-option.is-selected .ik-select-check { opacity: 1; }
.ik-select-empty { padding: 22px 12px; text-align: center; font-size: 12.5px; color: #9a8262; }

/* Móvil: el panel se muestra como hoja inferior (bottom sheet) con fondo atenuado */
@media (max-width: 640px) {
    .ik-select-backdrop.is-open { pointer-events: auto; background: rgba(20,14,6,.45); }
    .ik-select-panel.is-sheet {
        left: 0 !important; right: 0; bottom: 0 !important; top: auto !important; width: 100% !important;
        border-radius: 18px 18px 0 0; border: none; transform: translateY(100%); opacity: 1; transition: transform .22s cubic-bezier(.2,.8,.2,1);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .ik-select-panel.is-sheet.is-open { transform: none; }
    .ik-select-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
    .ik-select-sheet-head::before { content: ''; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: #dccdb1; }
    .ik-select-sheet-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #5c4530; }
    .ik-select-sheet-close { width: 30px; height: 30px; border-radius: 50%; border: none; background: #f3eadb; font-size: 18px; line-height: 1; color: #5c4530; }
    .ik-select-list { max-height: 52vh !important; }
    .ik-select-option { padding: 13px 12px; }
}