/* Lupo Rooms — barra de búsqueda estilo Airbnb (home).
   Pill con segmentos Destino · Fechas · Viajeros · Buscar + popups
   (calendario de rango de 2 meses, duración en meses, contador de viajeros).
   Identidad visual Lupo. Acompaña a lupo-search-bar.js. */

/* La pill exterior reutiliza .v4-search (inicio.php). Aquí solo segmentos/popups. */
.lsb { position: relative; }

/* ── Segmentos ── */
.lsb-seg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 6px 18px;
    border-left: 1px solid var(--clr-lupo-dark, #ebd9ba);
    background: transparent;
    border-top: 0; border-right: 0; border-bottom: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 999px;
    transition: background .15s;
    flex-shrink: 0;
}
.lsb-seg:hover { background: rgba(184,31,34,.05); }
.lsb-seg.is-active { background: var(--clr-lupo-lighter, #fefbf5); box-shadow: inset 0 0 0 1px var(--clr-lupo-dark, #ebd9ba); }
.lsb-label {
    font-size: 11px; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; color: #777;
}
.lsb-value { font-size: 14px; font-weight: 600; color: var(--clr-dark, #070a12); white-space: nowrap; }
.lsb-value.is-empty { color: #989898; font-weight: 500; }

/* ── Popups ── */
.lsb-pop {
    position: absolute;
    top: calc(100% + 12px);
    z-index: 1200;
    background: #fff;
    border: 1px solid var(--clr-lupo-dark, #ebd9ba);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
    padding: 18px;
    font-family: "Montserrat", sans-serif;
}
.lsb-pop[hidden] { display: none; }
.lsb-pop-dates  { left: 50%; transform: translateX(-50%); width: 720px; max-width: 94vw; }
.lsb-pop-guests { right: 8px; width: 300px; max-width: 92vw; }

/* ── Calendario (2 meses) ── */
.lsb-cal-nav { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.lsb-cal-months { display: flex; gap: 28px; }
.lsb-month { flex: 1; min-width: 0; }
.lsb-month-title { text-align: center; font-weight: 700; font-size: 15px; color: #1c1917; text-transform: capitalize; margin-bottom: 10px; }
.lsb-nav {
    position: absolute; top: 0;
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border: 1px solid #ece9e4; border-radius: 9px;
    background: var(--clr-lupo-lighter, #fefbf5); color: var(--clr-lupo-red, #b81f22);
    cursor: pointer; font-size: 18px;
}
.lsb-nav:hover:not(:disabled) { background: var(--clr-lupo-light, #f3eee2); }
.lsb-nav:disabled { color: #d6d3d1; cursor: default; background: #faf9f7; }
.lsb-nav-prev { left: 0; }
.lsb-nav-next { right: 0; }

.lsb-dows, .lsb-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.lsb-dow { text-align: center; font-size: 11px; font-weight: 700; color: #a8a29e; text-transform: uppercase; padding: 4px 0; }
.lsb-day {
    display: flex; align-items: center; justify-content: center;
    height: 40px; border: 0; background: transparent; border-radius: 9px;
    font-family: inherit; font-size: 14px; color: #1c1917; cursor: pointer;
}
.lsb-day.is-blank { visibility: hidden; cursor: default; }
.lsb-day:hover:not(:disabled):not(.is-edge) { background: var(--clr-lupo-light, #f3eee2); }
.lsb-day:disabled { color: #d6d3d1; cursor: not-allowed; background: transparent; }
.lsb-day.is-today { font-weight: 800; }
.lsb-day.is-in-range { background: var(--clr-lupo-light, #f3eee2); border-radius: 0; }
.lsb-day.is-edge {
    background: var(--clr-lupo-red, #b81f22); color: #fff; font-weight: 700;
}
.lsb-day.is-edge-start { border-radius: 9px 0 0 9px; }
.lsb-day.is-edge-end   { border-radius: 0 9px 9px 0; }
.lsb-day.is-edge-single { border-radius: 9px; }
/* Vista previa al pasar el ratón eligiendo la salida */
.lsb-day.is-range-preview { background: var(--clr-lupo-light, #f3eee2); border-radius: 0; }
.lsb-day.is-preview { box-shadow: inset 0 0 0 2px var(--clr-lupo-red, #b81f22); border-radius: 9px; font-weight: 700; }

/* ── Duración en meses ── */
.lsb-durations { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0ece3; align-items: center; }
.lsb-dur-label { font-size: 12px; font-weight: 700; color: #555; margin-right: 4px; }
.lsb-chip {
    border: 1.5px solid #d9ccb8; background: #fff; color: #444;
    border-radius: 20px; padding: 7px 14px; font-size: 13px; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.lsb-chip:hover { border-color: var(--clr-lupo-red, #b81f22); color: var(--clr-lupo-red, #b81f22); }
.lsb-chip.is-active { border-color: var(--clr-lupo-red, #b81f22); background: var(--clr-lupo-red, #b81f22); color: #fff; }

.lsb-pop-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.lsb-clear { background: none; border: 0; color: #555; font-family: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 6px 4px; }

/* ── Viajeros ── */
.lsb-guests-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px; }
.lsb-guests-info .t { font-size: 15px; font-weight: 700; color: #1c1917; }
.lsb-guests-info .s { font-size: 12.5px; color: #78716c; margin-top: 2px; }
.lsb-stepper { display: flex; align-items: center; gap: 14px; }
.lsb-step-btn {
    width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #c9bfae;
    background: #fff; color: #444; font-size: 20px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-family: inherit;
}
.lsb-step-btn:hover:not(:disabled) { border-color: var(--clr-lupo-red, #b81f22); color: var(--clr-lupo-red, #b81f22); }
.lsb-step-btn:disabled { opacity: .35; cursor: not-allowed; }
.lsb-step-val { min-width: 24px; text-align: center; font-size: 16px; font-weight: 700; color: #1c1917; }

/* ── Responsive: la pill pasa a columna (≤860, regla existente de .v4-search) ── */
@media (max-width: 860px) {
    .lsb-seg { border-left: 0; border-bottom: 1px solid var(--clr-lupo-dark, #ebd9ba); border-radius: 0; padding: 12px 6px; }
    .lsb-value { white-space: normal; }
    .lsb-pop-dates, .lsb-pop-guests { left: 0; right: 0; transform: none; width: auto; max-width: none; }
    .lsb-cal-months { flex-direction: column; gap: 18px; }
}