/* =========================================================
   RALLISMUSIC - TRACK CARD V3 (specifica definitiva)
   Riga 1: titolo full
   Riga 2: 2 colonne (cover sx / contenuti dx con 2a-2b-2c)
   Riga 3: toolbar full
   ========================================================= */

.rm-track-card.rm-track-card--v3{
  position: relative;
  width: 100%;
  border-radius: 22px;
  background: rgba(18,18,18,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  overflow: hidden;
  padding: 14px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
}

/* Righe */
.rm-card-row{ width: 100%; }
.rm-card-row--title{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.rm-card-title-link{
  display:inline-block;
  color: rgba(255,255,255,0.95);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: clamp(16px, 3.8vw, 22px);
  line-height: 1.15;
}
.rm-card-title-link:hover{ text-decoration: underline; }

/* Riga 2: 2 colonne */
.rm-card-row--main{
  display:grid;
  grid-template-columns: 132px 1fr;
  gap: 14px;
  align-items: center;
  justify-items: center;
}

/* Colonna SX: cover 1:1 centrata */
.rm-card-col--left{
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.rm-card-cover-link{
  display:block;
  width: 100%;
  max-width: 132px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.rm-card-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Colonna DX: 2a,2b,2c tutte centrate */
.rm-card-col--right{
  width: 100%;
  display:grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
  justify-items: center;
  align-items: center;
  text-align:center;
}

/* 2a: meta line, compatta e (quasi sempre) su una riga */
.rm-card-meta{
  width: 100%;
  font-weight: 800;
  color: rgba(255,255,255,0.90);
  font-size: clamp(12px, 3.2vw, 15px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2b: iconcine (3-5), coerenti */
.rm-card-icons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
}

.rm-card-ico{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 26px rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.92);
  text-decoration:none;
}
.rm-card-ico i{
  font-size: 14px;
  transform: translateY(0.2px);
}

/* varianti (solo micro rifiniture, senza cambiare la palette globale) */
.rm-card-ico--yt i{ font-size: 15px; }
.rm-card-ico--mic i{ font-size: 13px; }
.rm-card-ico--lic i{ font-size: 15px; opacity: .9; }
.rm-card-ico--stock i{ font-size: 14px; opacity: .9; }

/* 2c: tags su UNA riga, max 3 (tagliati se lunghi) */
.rm-card-tags{
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.rm-card-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(244,162,75,0.28);
  background: rgba(0,0,0,0.22);
  color: rgba(255,179,102,0.98);
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
  max-width: 34%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Riga 3: toolbar full-width come footer */
.rm-card-row--actions{
  width: 100%;
}
.rm-card-actions{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(244,162,75,0.24);
  box-shadow: 0 16px 34px rgba(0,0,0,0.55);
}

/* Bottoni toolbar: uniformi */
.rm-card-action{
  height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  letter-spacing: .3px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
}

.rm-card-action i{ font-size: 15px; }
.rm-card-action:hover{ background: rgba(255,255,255,0.06); }

/* integra rm-like-btn dentro toolbar senza rompere il tuo css inline */
.rm-card-actions .rm-like-btn{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  height: 44px;
}
.rm-card-actions .rm-like-btn.is-liked i{
  color: rgba(255,120,140,1);
}

/* Responsivo */
@media (max-width: 720px){
  .rm-card-row--main{
    grid-template-columns: 118px 1fr;
  }
  .rm-card-cover-link{ max-width: 118px; }
}

@media (max-width: 520px){
  .rm-track-card.rm-track-card--v3{
    padding: 12px;
    border-radius: 20px;
    gap: 10px;
  }

  /* su mobile: cover sopra o resta 2-col? -> tu vuoi comunque coerente:
     Qui la manteniamo 2-col ma più compatta */
  .rm-card-row--main{
    grid-template-columns: 108px 1fr;
    gap: 12px;
  }
  .rm-card-cover-link{ max-width: 108px; border-radius: 16px; }

  .rm-card-meta{
    font-size: 12px; /* più piccolo per tenere la riga unica */
  }

  .rm-card-ico{
    width: 32px;
    height: 32px;
  }

  .rm-card-actions{
    padding: 9px 10px;
  }
  .rm-card-action{
    height: 42px;
    min-width: 42px;
    padding: 0 12px;
  }
}

/* Se vuoi “centrato totale” anche nella griglia desktop */
@media (min-width: 900px){
  .rm-card-row--main{
    grid-template-columns: 150px 1fr;
  }
  .rm-card-cover-link{ max-width: 150px; }
}/* =========================================================
   RALLISMUSIC - TRACK CARD V3 (specifica definitiva)
   Riga 1: titolo full
   Riga 2: 2 colonne (cover sx / contenuti dx con 2a-2b-2c)
   Riga 3: toolbar full
   ========================================================= */

.rm-track-card.rm-track-card--v3{
  position: relative;
  width: 100%;
  border-radius: 22px;
  background: rgba(18,18,18,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  overflow: hidden;
  padding: 14px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
}

/* Righe */
.rm-card-row{ width: 100%; }
.rm-card-row--title{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.rm-card-title-link{
  display:inline-block;
  color: rgba(255,255,255,0.95);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: clamp(16px, 3.8vw, 22px);
  line-height: 1.15;
}
.rm-card-title-link:hover{ text-decoration: underline; }

/* Riga 2: 2 colonne */
.rm-card-row--main{
  display:grid;
  grid-template-columns: 132px 1fr;
  gap: 14px;
  align-items: center;
  justify-items: center;
}

/* Colonna SX: cover 1:1 centrata */
.rm-card-col--left{
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.rm-card-cover-link{
  display:block;
  width: 100%;
  max-width: 132px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.rm-card-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Colonna DX: 2a,2b,2c tutte centrate */
.rm-card-col--right{
  width: 100%;
  display:grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
  justify-items: center;
  align-items: center;
  text-align:center;
}

/* 2a: meta line, compatta e (quasi sempre) su una riga */
.rm-card-meta{
  width: 100%;
  font-weight: 800;
  color: rgba(255,255,255,0.90);
  font-size: clamp(12px, 3.2vw, 15px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2b: iconcine (3-5), coerenti */
.rm-card-icons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
}

.rm-card-ico{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 26px rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.92);
  text-decoration:none;
}
.rm-card-ico i{
  font-size: 14px;
  transform: translateY(0.2px);
}

/* varianti (solo micro rifiniture, senza cambiare la palette globale) */
.rm-card-ico--yt i{ font-size: 15px; }
.rm-card-ico--mic i{ font-size: 13px; }
.rm-card-ico--lic i{ font-size: 15px; opacity: .9; }
.rm-card-ico--stock i{ font-size: 14px; opacity: .9; }

/* 2c: tags su UNA riga, max 3 (tagliati se lunghi) */
.rm-card-tags{
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.rm-card-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(244,162,75,0.28);
  background: rgba(0,0,0,0.22);
  color: rgba(255,179,102,0.98);
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
  max-width: 34%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Riga 3: toolbar full-width come footer */
.rm-card-row--actions{
  width: 100%;
}
.rm-card-actions{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(244,162,75,0.24);
  box-shadow: 0 16px 34px rgba(0,0,0,0.55);
}

/* Bottoni toolbar: uniformi */
.rm-card-action{
  height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  letter-spacing: .3px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
}

.rm-card-action i{ font-size: 15px; }
.rm-card-action:hover{ background: rgba(255,255,255,0.06); }

/* integra rm-like-btn dentro toolbar senza rompere il tuo css inline */
.rm-card-actions .rm-like-btn{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  height: 44px;
}
.rm-card-actions .rm-like-btn.is-liked i{
  color: rgba(255,120,140,1);
}

/* Responsivo */
@media (max-width: 720px){
  .rm-card-row--main{
    grid-template-columns: 118px 1fr;
  }
  .rm-card-cover-link{ max-width: 118px; }
}

@media (max-width: 520px){
  .rm-track-card.rm-track-card--v3{
    padding: 12px;
    border-radius: 20px;
    gap: 10px;
  }

  /* su mobile: cover sopra o resta 2-col? -> tu vuoi comunque coerente:
     Qui la manteniamo 2-col ma più compatta */
  .rm-card-row--main{
    grid-template-columns: 108px 1fr;
    gap: 12px;
  }
  .rm-card-cover-link{ max-width: 108px; border-radius: 16px; }

  .rm-card-meta{
    font-size: 12px; /* più piccolo per tenere la riga unica */
  }

  .rm-card-ico{
    width: 32px;
    height: 32px;
  }

  .rm-card-actions{
    padding: 9px 10px;
  }
  .rm-card-action{
    height: 42px;
    min-width: 42px;
    padding: 0 12px;
  }
}

/* Se vuoi “centrato totale” anche nella griglia desktop */
@media (min-width: 900px){
  .rm-card-row--main{
    grid-template-columns: 150px 1fr;
  }
  .rm-card-cover-link{ max-width: 150px; }
}
/* =========================================================
   RM - Card icons colors (PATCH ONLY)
   Non tocca player o layout globale
   ========================================================= */

/* Spunta 1 (gold/cream) */
.rm-card-ico--lic1{
  color: rgba(246, 213, 140, 0.98);
  border-color: rgba(246, 213, 140, 0.35);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.55),
    0 0 0 1px rgba(246, 213, 140, 0.22) inset,
    0 0 18px rgba(246, 213, 140, 0.18);
}

/* Spunta 2 (olive/yellow-green) */
.rm-card-ico--lic2{
  color: rgba(196, 216, 120, 0.98);
  border-color: rgba(196, 216, 120, 0.33);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.55),
    0 0 0 1px rgba(196, 216, 120, 0.20) inset,
    0 0 18px rgba(196, 216, 120, 0.16);
}

/* Spunta 3 (green/teal) */
.rm-card-ico--lic3{
  color: rgba(118, 214, 170, 0.98);
  border-color: rgba(118, 214, 170, 0.32);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.55),
    0 0 0 1px rgba(118, 214, 170, 0.18) inset,
    0 0 18px rgba(118, 214, 170, 0.15);
}

/* Package (layer) */
.rm-card-ico--pkg{
  color: rgba(255, 179, 102, 0.98);
  border-color: rgba(255, 179, 102, 0.34);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255, 179, 102, 0.22) inset,
    0 0 18px rgba(255, 179, 102, 0.18);
}

/* YouTube */
.rm-card-ico--yt{
  color: rgba(255, 92, 92, 0.98);
  border-color: rgba(255, 92, 92, 0.34);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255, 92, 92, 0.18) inset,
    0 0 18px rgba(255, 92, 92, 0.14);
}

/* ==============================
   TRACK GRID: desktop 2 colonne
   ============================== */

/* Mobile: 1 colonna */
#rmTracksGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* Tablet: 2 colonne */
@media (min-width: 720px){
  #rmTracksGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop grande: RESTA 2 colonne (non 4) */
@media (min-width: 1100px){
  #rmTracksGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================
   MENU MOBILE: hamburger -> X
   + overlay + scroll lock
   ============================ */

.rm-hamburger{
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.rm-hamburger span{
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  margin: 0;             /* IMPORTANT: annulla il margin 5px 0 */
  top: 50%;
  transform-origin: center;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
  border-radius: 2px;
}

.rm-hamburger span:nth-child(1){ top: calc(50% - 8px); }
.rm-hamburger span:nth-child(2){ top: 50%; }
.rm-hamburger span:nth-child(3){ top: calc(50% + 8px); }

/* Stato aperto: X */
.rm-hamburger.active span:nth-child(1){
  top: 50%;
  transform: rotate(45deg);
}
.rm-hamburger.active span:nth-child(2){
  opacity: 0;
  transform: scaleX(0.2);
}
.rm-hamburger.active span:nth-child(3){
  top: 50%;
  transform: rotate(-45deg);
}

/* Overlay (serve solo se metti #rmNavOverlay nel header) */
.rm-nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 99; /* rm-header è 100, quindi overlay sotto header e sotto nav se nav è dentro header */
  opacity: 0;
  transition: opacity .25s ease;
}

.rm-nav-overlay.open{
  opacity: 1;
}

/* Scroll lock quando menu aperto */
html.rm-menu-open,
body.rm-menu-open{
  overflow: hidden;
  touch-action: none;
}