/* Extracted from templates/index.html; styles the home favorites section without changing markup. */
    /* Center any fixed-width child in .cc-main */
    .cc-main > .centered {
      margin-left: auto;
      margin-right: auto;
    }
/* =========================
   Favorites section — LIGHT (match dashboard tiles)
   ========================= */

#favorites-section{
  margin-top: 16px;
  margin-bottom: var(--section-gap);
  animation: slideInFromTop 0.6s ease-out forwards;
}

/* --- Integrated title row (inside the tile) --- */
.fav-title-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  padding: 8px 10px;
  border-bottom: 0.5px solid var(--border-subtle);

  background: var(--surface-1);
}

.fav-title{
  color: var(--text-main);
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.fav-count{
  color: var(--text-muted);
  font-size: 0.78rem;
}


/* Flat tile surface (no heavy gradient/shadow) */
.fav-list{
  background: var(--surface-1);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}

/* Empty state: compact */
.fav-empty{
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 10px 12px;
}

/* Rows feel like “weatherbox strip”: flat + divider lines */
.fav-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 8px 10px;
  cursor: pointer;
  color: var(--text-body);

  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.06);

  transition: background 120ms ease;
}
.fav-row:first-child{ border-top: none; }

.fav-row:hover{
  background: rgba(255,255,255,0.03);
}

/* Text: slightly lighter than before */
.fav-row .suggestion-text{ min-width: 0; }
.fav-row .suggestion-primary{
  font-weight: 600;
  font-size: 0.95rem;
}
.fav-row .suggestion-secondary{
  color: var(--text-muted);
  opacity: 1;
  font-size: 0.82rem;
}

/* Star button: smaller + less “blocky” */
.fav-row .fav-star{
  width: 30px;
  height: 30px;
  border-radius: 2px;

  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);

  color: var(--text-main);
  opacity: 0.9;
}
.fav-row .fav-star:hover{
  opacity: 1;
  background: rgba(106,79,179,0.14);
  border-color: rgba(106,79,179,0.28);
}
.fav-row .fav-star svg{
  width: 16px;
  height: 16px;
}