/* STAGING: place search + favourites (places.js) */

/* the two extra buttons at the bottom of the right control column */
.place-ctrl .map-ctrl-label svg {
  width: 18px; height: 18px;
  fill: none; stroke: #e5e7eb; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.place-ctrl.place-ctrl-on { border-color: #38bdf8; filter: brightness(1.2); }
#placeFavBtn.place-ctrl-on .map-ctrl-label svg { fill: #fde047; stroke: #fde047; }

/* popovers (left of their button) */
.place-pop {
  position: fixed;
  z-index: 1005;                 /* over the menu (1000) and Top snow (1001/1002 on phones) */
  display: flex; flex-direction: column;
  overflow: hidden;
  color: #e5e7eb;
  background: linear-gradient(135deg, rgba(15,23,42,0.97), rgba(30,64,175,0.96));
  border: 1px solid rgba(148,163,184,0.6);
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
  font-size: 13px;
}
.place-pop[hidden] { display: none !important; }
.place-search-row, .place-pop-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 10px;
  border-bottom: 1px solid rgba(148,163,184,0.25);
}
.place-pop-head { font-weight: 700; padding: 8px 6px 8px 12px; }
.place-pop-head span { flex: 1; }
.place-search-row input {
  flex: 1; min-width: 0;
  height: 30px; padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(2,6,23,0.55);
  color: #f1f5f9; font-size: 14px; outline: none;
}
.place-search-row input:focus { border-color: #38bdf8; }
.place-search-row input::-webkit-search-cancel-button { display: none; }
.place-pop-close {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 999px;
  border: none; background: transparent; color: #cbd5e1; font-size: 20px; line-height: 1; cursor: pointer;
}
.place-pop-close:hover { background: rgba(148,163,184,0.18); color: #fff; }
.place-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; }
.place-list:empty { display: none; }
.place-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 10px; cursor: pointer;
}
.place-row:hover, .place-row.is-active { background: rgba(56,189,248,0.14); }
.place-ico { flex: 0 0 auto; width: 18px; text-align: center; font-size: 14px; }
.place-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.place-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-sub { font-size: 11.5px; color: #9fb3d1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-fav, .chart-fav, .ts-fav {
  flex: 0 0 auto;
  border: none; background: transparent; cursor: pointer;
  color: #cbd5e1; font-size: 17px; line-height: 1; padding: 2px 3px;
}
.place-fav.is-on, .chart-fav.is-on, .ts-fav.is-on { color: #fde047; }
.place-fav:hover, .chart-fav:hover, .ts-fav:hover { color: #fde047; }
.place-page, .chart-page, .ts-page {
  flex: 0 0 auto; color: #7dd3fc; text-decoration: none; font-weight: 700; font-size: 14px; padding: 2px 3px;
}
.place-page:hover, .chart-page:hover, .ts-page:hover { color: #fff; }
/* favourites: let the forecast summary wrap instead of being cut */
#placeFavList .place-sub { white-space: normal; line-height: 1.3; }
.place-hint { padding: 10px 12px 12px; color: #9fb3d1; font-size: 12px; line-height: 1.4; }
.place-hint[hidden] { display: none; }
.place-star-inline { color: #fde047; }

/* Top snow rows: small star / page link on the country line */
.ts-country .ts-fav { font-size: 13px; padding: 0 2px 0 6px; vertical-align: -1px; }
.ts-country .ts-page { font-size: 12px; padding: 0 2px; }

/* chart header: star (+ resort page link) before the close button */
.chart-place-tools { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; margin-right: 4px; }
.chart-place-tools[hidden] { display: none; }
.chart-place-tools .chart-page {
  font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 2px 8px; margin-left: 2px;
  border: 1px solid rgba(125, 211, 252, 0.6); border-radius: 999px;
}
.chart-place-tools .chart-page:hover { background: rgba(56, 189, 248, 0.18); }
.chart-place-tools .cp-short { display: none; }

/* phones: the two buttons sit in a bar right of the "Top snow" button (placed by
   places.js; same layering as that button: over the menu, under an open chart) */
.place-bar { display: none; }
@media (max-width: 768px) {
  .place-bar {
    position: absolute;
    top: 60px;                       /* = #topSnowToggle (style.css) */
    left: calc(var(--app-gutter, 10px) + 104px);
    z-index: 1001;
    display: flex;
    gap: 6px;
  }
  .place-bar[hidden] { display: none; }
  body.chart-open .place-bar { z-index: 39; }
  .place-bar .place-ctrl {
    width: 34px; height: 32px; min-width: 0; margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 64, 175, 0.96));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  }
  .place-bar .place-ctrl .map-ctrl-label { display: inline-flex; }
  .place-bar .place-ctrl .map-ctrl-label svg { width: 17px; height: 17px; }
  .place-bar .place-ctrl.place-ctrl-on { border-color: #38bdf8; }
  .chart-place-tools .cp-long { display: none; }
  .chart-place-tools .cp-short { display: inline; }
  .chart-place-tools .chart-page { font-size: 12.5px; padding: 3px 8px; }
}

@media (max-width: 768px) {
  .place-pop { font-size: 13.5px; }
  .place-row { padding: 8px 8px 8px 10px; }
  .place-fav, .chart-fav { font-size: 19px; padding: 4px 5px; }
  .place-page { font-size: 16px; padding: 4px 5px; }
}