/* =====================================================================
   MOTOR SITE AIRBNB · quartos.css
   Simulador "Quantos vão?": controle deslizante e cartões dos quartos.
   Pensado para seção de fundo ESCURO (cartões com borda clara).
   Os quartos e camas vêm do site/dados/casa.json.
   Visual de UMA casa: mude no site/css/casa.css do cliente, não aqui.
   ===================================================================== */

/* ---------- 1. controle "Pessoas no grupo" ---------- */
.ctrl{background:rgba(255,246,232,.08);border-radius:var(--m-raio);padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.ctrl label{font-weight:700;font-size:18px;display:flex;justify-content:space-between;align-items:baseline}
.ctrl output{font-family:var(--m-display);font-size:48px;color:var(--m-acento);line-height:1}
.ctrl input[type=range]{width:100%;accent-color:var(--m-acento);height:32px}
.ctrl p{font-size:15px;opacity:.85}

/* ---------- 2. quartos ---------- */
.mapa-q{display:grid;gap:12px;margin-top:clamp(28px,4vw,44px)}
.q{border-radius:16px;padding:20px;background:rgba(255,246,232,.06);border:2px solid rgba(255,246,232,.12);display:flex;flex-direction:column;gap:10px;transition:border-color .4s,background-color .4s}
/* quarto com alguém dormindo */
/* PARA MUDAR: cor do quarto ocupado e das bolinhas acesas = --m-acento (no casa.css) */
.q.uso{border-color:var(--m-acento);background:color-mix(in srgb,var(--m-acento) 12%,transparent)}
.q .nome-q{font-family:var(--m-display);font-size:26px;line-height:1.2}
.q .camas{font-size:15px;opacity:.85}
.q .tem{font-size:14px;opacity:.75}

/* ---------- 3. camas: cada bolinha é um lugar ---------- */
.leitos{display:flex;flex-wrap:wrap;gap:8px}
.leito{height:30px;border-radius:8px;border:2px solid rgba(255,246,232,.4);display:flex;gap:4px;align-items:center;justify-content:center;padding:0 6px}
.leito.casal{width:66px}.leito.solteiro,.leito.colchao,.leito.sofa{width:38px}
.leito.colchao{border-style:dashed}
.leito i{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,246,232,.3);transition:background-color .3s,border-color .3s,transform .3s}
.leito i.on{background:var(--m-acento);border-color:var(--m-acento);transform:scale(1.1)}
/* legenda abaixo dos quartos; no computador (760px+) os quartos ficam em 3 colunas */
.legenda-q{display:flex;flex-wrap:wrap;gap:18px;font-size:14px;opacity:.8;margin-top:14px}
@media (min-width:760px){.mapa-q{grid-template-columns:repeat(3,1fr)}}