/* ── Region picker (País → CCAA → Provincia → Municipio) ──────────── */
.livesic-region-picker{
    --lv-rp-border:var(--lv-border,#e2e8f0);
    --lv-rp-accent:var(--lv-accent,#2563eb);
    --lv-rp-surface:var(--lv-surface,#fff);
    --lv-rp-ink:var(--lv-ink,#0f172a);
    --lv-rp-muted:var(--lv-muted,#64748b);
    --lv-rp-radius:var(--lv-radius-sm,10px);
    display:flex;flex-direction:column;gap:10px
}
.livesic-region-picker.is-inline{flex-direction:row;flex-wrap:wrap;gap:10px}
.livesic-region-picker .livesic-region-field{margin:0;display:flex;flex-direction:column;gap:4px;flex:1 1 200px;min-width:0;position:relative}
.livesic-region-picker .livesic-region-field label{font-size:12px;font-weight:600;color:var(--lv-rp-ink);letter-spacing:.02em}

/* Inputs y selects: look “lv-input” unificado */
.livesic-region-picker .livesic-region-field select,
.livesic-region-picker .livesic-region-field input[type="text"]{
    width:100%;box-sizing:border-box;
    padding:11px 14px;
    border:1.5px solid var(--lv-rp-border);
    border-radius:var(--lv-rp-radius);
    background:var(--lv-rp-surface);
    font-size:14px;color:var(--lv-rp-ink);
    transition:border-color .15s,box-shadow .15s;
    outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;
    font-family:inherit;line-height:1.3;
    min-height:42px
}
.livesic-region-picker .livesic-region-field select{
    padding-right:36px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5 6 6.5l5-5' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat!important;background-position:right 14px center;background-size:12px 8px;
    cursor:pointer
}
.livesic-region-picker .livesic-region-field select:focus,
.livesic-region-picker .livesic-region-field input[type="text"]:focus{
    border-color:var(--lv-rp-accent);
    box-shadow:0 0 0 3px rgba(37,99,235,.12)
}
.livesic-region-picker .livesic-region-field select[disabled],
.livesic-region-picker .livesic-region-field input[disabled]{
    opacity:.55;cursor:not-allowed;background-color:#f8fafc
}
.livesic-region-picker .livesic-region-field input::placeholder{color:var(--lv-rp-muted)}

/* ── Ciudad = campo PRINCIPAL ─────────────────────────────────────────
   Va el primero (ver partials/region-picker.blade.php) y se marca en azul para que
   se vea que es el que hay que rellenar: al elegir una sugerencia se autocompletan
   país, CCAA y provincia.
   Se prefija con :root para ganar en especificidad a los overrides de contexto
   (.lv-search en livesic-spotify.css, .livesic-map-filters-panel en livesic.css y el
   bloque oscuro de livesic-theme.css, todos con 4-5 clases). livesic-regions.css se
   carga DESPUÉS que ellos, así que a igualdad de especificidad manda esta regla.
   ⚠️ Solo border-color/box-shadow: nunca el atajo `background` sobre estos campos. */
/* En los layouts en línea (is-inline flex, o grid en market/filtros del mapa) la ciudad
   ocupa SU PROPIA FILA arriba del todo, y el resto de campos envuelve por debajo.
   `flex` lo ignora un contenedor grid y `grid-column` uno flex → una sola regla vale
   para ambos. `:root` para ganar a `.lv-search__location .livesic-region-field`
   (livesic-spotify.css) y a `.lv-onboarding .livesic-region-field` (completar-perfil). */
:root .livesic-region-picker .livesic-region-field--city{
    flex:1 1 100%;
    grid-column:1 / -1
}

:root .livesic-region-picker .livesic-region-field--city input[type="text"][data-livesic-region-role="municipio"]{
    border-color:var(--lv-theme-primary,#2563eb);
    box-shadow:var(--lv-theme-focus,0 0 0 3px rgba(37,99,235,.18))
}
:root .livesic-region-picker .livesic-region-field--city input[type="text"][data-livesic-region-role="municipio"]:focus{
    border-color:var(--lv-theme-primary,#2563eb);
    box-shadow:var(--lv-theme-focus,0 0 0 3px rgba(37,99,235,.18)),0 0 0 1px var(--lv-theme-primary,#2563eb)
}
:root .livesic-region-picker .livesic-region-field--city label{
    color:var(--lv-theme-primary,#2563eb)
}

/* Combobox municipio con autocomplete */
.livesic-region-combobox{position:relative;display:block}

/* El dropdown se portaliza al <body> con position:fixed — evita clipping */
.livesic-region-suggestions{
    margin:0;padding:4px;
    list-style:none;
    background:var(--lv-surface,#fff);
    border:1px solid var(--lv-border,#e2e8f0);
    border-radius:12px;
    box-shadow:0 16px 40px rgba(15,23,42,.14),0 2px 8px rgba(15,23,42,.06);
    max-height:320px;overflow-y:auto;
    z-index:100000;
    font-family:inherit
}
.livesic-region-suggestions[hidden]{display:none}
/* El dropdown portalizado debe quedar POR ENCIMA de los modales (.lv-ev-modal-backdrop
   usa z-index:2147483050); si no, las sugerencias se renderizan detrás del modal y no se ven. */
.livesic-region-suggestions--portal{position:fixed;z-index:2147483647}

.livesic-region-suggestion{
    display:flex;flex-direction:column;gap:2px;
    padding:9px 12px;cursor:pointer;
    border-radius:8px;
    transition:background .12s
}
.livesic-region-suggestion:hover,
.livesic-region-suggestion--active{background:#f1f5f9}
.livesic-region-suggestion__name{font-size:14px;font-weight:600;color:var(--lv-ink,#0f172a);line-height:1.2}
.livesic-region-suggestion__meta{font-size:11px;color:var(--lv-muted,#64748b);line-height:1.2}

/* Detección del autorrelleno del navegador: :-webkit-autofill dispara esta
   animación vacía y livesic-regions.js la escucha (animationstart) para
   autorrellenar CCAA/provincia u ofrecer sugerencias. Regla aparte a propósito:
   en navegadores sin :-webkit-autofill se invalida sola sin afectar al resto. */
@keyframes livesic-autofill-detect{from{}to{}}
[data-livesic-region-picker] input[data-livesic-region-role="municipio"]:-webkit-autofill{
    animation-name:livesic-autofill-detect;
    animation-duration:.01s
}