/* Rentalmatch - demo "correlazione": chips di necessita che si accendono e
   card che si riordinano (FLIP) con i Match % aggiornati. */
.rm-corr-demo { max-width: 640px; margin: 40px auto 0; }
.rm-corr-needs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 26px; }
.rm-corr-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.16); color: rgba(234,246,255,0.62); font-size: 0.92rem; font-weight: 600;
  background: rgba(255,255,255,0.04); transition: all .4s ease; }
.rm-corr-chip svg { opacity: 0.55; width: 20px; height: 20px; filter: saturate(0.4); transition: opacity .4s ease, filter .4s ease; }
.rm-corr-chip.is-on { border-color: rgba(255, 167, 102,0.55); color: #b8f8de; background: rgba(255, 167, 102,0.10);
  box-shadow: 0 0 18px rgba(255, 167, 102,0.12); }
.rm-corr-chip.is-on svg { opacity: 1; filter: saturate(1) drop-shadow(0 2px 5px rgba(0,0,0,0.35)); }
.rm-corr-cards { display: flex; flex-direction: column; gap: 12px; }
.rm-corr-card { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center;
  gap: 4px 14px; padding: 16px 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .4s ease, box-shadow .4s ease; }
.rm-corr-card.is-best { border-color: rgba(255, 167, 102,0.5); box-shadow: 0 8px 30px rgba(255, 167, 102,0.10); }
.rm-corr-name { font-size: 0.98rem; font-weight: 600; color: rgba(234,246,255,0.92); }
.rm-corr-score { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #ffa766; grid-row: span 2; }
.rm-corr-bar { display: block; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.10); overflow: hidden; }
.rm-corr-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #21b07c, #ffa766);
  transition: width .55s cubic-bezier(0.4, 0, 0.2, 1); }
.rm-corr-caption { text-align: center; margin: 22px 0 26px; font-size: 0.92rem; color: rgba(234,246,255,0.62); }
@media (max-width: 640px) { .rm-corr-card { padding: 13px 16px; } }