/**
 * inloff — Places autocomplete (desplegable de marca)
 *
 * Estilo del menú de sugerencias que renderiza `inloff-places.js`. Se ancla al
 * <body> con position:fixed (lo posiciona el JS sobre el input), por eso las
 * reglas cuelgan de `.inloff-ac-menu` a nivel global, no dentro de un scope.
 *
 * Paleta alineada con el checkout: navy #1B2B4B, cream #F8F4ED, línea #E8E1D4,
 * oro #C9A86A, texto muted #6b7590.
 *
 * @package inloff-theme
 * @version 1.0.0
 */

.inloff-ac-menu {
    z-index: 100000;
    background: #FFFFFF;
    border: 1px solid #E8E1D4;
    border-radius: 12px;
    box-shadow: 0 12px 34px -10px rgba(27, 43, 75, 0.22), 0 2px 8px -2px rgba(27, 43, 75, 0.10);
    padding: 6px;
    max-height: min(52vh, 340px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    font-family: inherit;
    animation: inloff-ac-in 0.14s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes inloff-ac-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .inloff-ac-menu { animation: none; }
}

.inloff-ac-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 46px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: #1B2B4B;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.inloff-ac-item:hover,
.inloff-ac-item.is-active {
    background: #F8F4ED;
}

.inloff-ac-pin {
    flex: 0 0 auto;
    color: #C9A86A;
    margin-top: 1px;
}

.inloff-ac-item__txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.inloff-ac-item__main {
    font-size: 15.5px;
    font-weight: 500;
    color: #1B2B4B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inloff-ac-item__sec {
    font-size: 12.5px;
    color: #6b7590;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inloff-ac-attr {
    padding: 7px 12px 4px;
    margin-top: 2px;
    border-top: 1px solid #F0EBE0;
    font-size: 10.5px;
    letter-spacing: 0.3px;
    color: #909090;
    text-align: right;
    user-select: none;
}

/* iOS: 16px reales en el input evitan el zoom automático al enfocar. El input
   lo estiliza el checkout/EPO; aquí solo garantizamos el menú legible en móvil. */
@media (max-width: 600px) {
    .inloff-ac-item__main { font-size: 16px; }
    .inloff-ac-item { min-height: 48px; }
}