/* assets/css/logicasa-map.css
 * Logicasa – guide cantons : dropdowns + modal vote + étoiles
 */

/* --- Pickers (dropdowns) --- */
.lg-canton-pickers{
  display:flex;
  gap:12px;
  align-items:stretch;
  margin-bottom:14px;
}

.lg-picker{ position:relative; flex:1; min-width:0; }

.lg-picker__btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}

.lg-picker__btn[disabled]{ opacity:.55; cursor:not-allowed; }

.lg-picker__left{ display:flex; align-items:center; gap:10px; min-width:0; }
.lg-picker__label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.lg-picker__blason-wrap img{
  width:22px;
  height:22px;
  object-fit:contain;
  display:block;
}

.lg-picker__menu{
  position:absolute;
  z-index:999;
  top:calc(100% + 8px);
  left:0;
  right:0;
  max-height:320px;
  overflow:auto;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.lg-picker__item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:none;
  border:0;
  text-align:left;
  cursor:pointer;
}

.lg-picker__item:hover{ background:rgba(0,0,0,.04); }

/* --- Quartiers panel --- */
.lg-quartiers-panel{
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}

.lg-quartiers-panel__head{
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,.08);
  font-weight:600;
}

.lg-quartiers-panel__body{ padding:10px 12px; }

/* --- Modal vote --- */
.lg-modal[hidden]{ display:none; }
.lg-modal{ position:fixed; inset:0; z-index:9999; }
.lg-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.lg-modal__panel{ position:relative; width:min(560px, 92vw); margin:10vh auto; background:#fff; border-radius:16px; padding:16px 16px 14px; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.lg-modal__close{ position:absolute; top:10px; right:12px; border:0; background:none; font-size:22px; cursor:pointer; }

.lg-modal__actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
.lg-modal__msg{ margin-top:10px; font-size:14px; }

/* --- Stars --- */
.lg-stars{ display:flex; gap:6px; margin:14px 0; }
.lg-star{ font-size:28px; border:0; background:none; cursor:pointer; color:#cfcfcf; padding:4px; line-height:1; }
.lg-star.is-on{ color:#f5c400; }

/* Buttons fallback (si pas de design system) */
.lg-btn{ border:1px solid rgba(0,0,0,.14); padding:10px 12px; border-radius:10px; background:#fff; cursor:pointer; }
.lg-btn--primary{ background:#111; color:#fff; border-color:#111; }
.lg-btn[disabled]{ opacity:.55; cursor:not-allowed; }