/* =====================================================================
   wc-ringtones.css
   Stile replicato 1:1 dal vecchio child wallpaperscentral-child/style.css
   Usato sia per l'archivio /phone-ringtones che per il single ringtones.
   ===================================================================== */
.wc-pageinfo h2 {margin:0;}

/* Descrizione in page_info */
.wc-pageinfo-desc{
  color: #000;
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 16px 0;
}

.wc-pageinfo-desc a {
  color: #ff4081;   /* scegli il colore che preferisci */
}

.wc-pageinfo-desc a:hover {
  text-decoration: underline; /* opzionale */
}

 
/************************************************ */
.wc-rings-wrap{
  margin: 10px auto 28px auto;
}
.wc-rings-header{ margin-bottom: 12px; }
.wc-rings-title{
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 8px;
}

/* ---------- Trending ---------- */
.wc-trending{ margin-top: 10px; }
.wc-trending-head{
  display:flex; align-items:center; justify-content:space-between;
  margin: 8px 0 10px;
}
.wc-trending-head h2{ font-size:22px; margin:0; }

/* wrapper slider + frecce, no overflow */
.wc-trending-wrap{
  position: relative;
  overflow: hidden;          /* evita allargamento pagina */
  padding-inline: 6px;       /* respiro per le frecce */
}

/* riga trending con scroll orizzontale + snap */
.wc-trending-row{
  display:flex;
  gap:32px;
  overflow-x:auto;
  padding: 0 4px 30px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid #e5e5ea;
}
.wc-trending-row::-webkit-scrollbar{ display:none; }
.wc-trending-row.dragging{ cursor:grabbing; }
.wc-trending-row.no-snap{ scroll-snap-type:none !important; }

/* card */
.trend-card{
  position:relative;
  min-width:145px;
  scroll-snap-align:center;
}
.trend-card:not(:first-child)::before{
  content:"";
  position:absolute; left:-16px; top:6px; bottom:6px;
  width:1px; background:#E5E5EA;
}

/* cover quadrata */
.trend-cover{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:18px;
  overflow:hidden;
  background:#f3f4f6;
  box-shadow: inset 0 8px 20px rgba(0,0,0,.06);
}
.trend-cover img,
.trend-fallback{ width:100%; height:100%; object-fit:cover; display:block; }
.trend-fallback{ background: radial-gradient(120% 120% at 0% 0%, #ffd1dc 0%, #b5f3ff 45%, #ffd3a2 100%); }

/* Play/Pause liquid glass (Fontello icon) */
.glass-btn,
.trend-play{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:999px; border:0;
  display:grid; place-items:center; cursor:pointer;
  background: rgba(255,255,255,.22);
  box-shadow:
    0 4px 20px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -8px 18px rgba(255,255,255,.18);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color:#fff;
  transition: background .18s, box-shadow .22s, transform .08s, color .18s;
}
.trend-play:hover{
  background: rgba(255,255,255,.35);
  box-shadow:
    0 8px 26px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -10px 22px rgba(255,255,255,.22);
}
.trend-play:active{ transform: translate(-50%,-50%) scale(.97); }
.trend-play i{ font-size:22px; line-height:1; }

/* meta sotto la cover */
.trend-meta-row{
  display:grid;
  grid-template-columns: 1fr 44px;
  gap:10px; align-items:center; margin-top:8px;
}
.trend-info{ min-width:0; }
.trend-title{
  display:block; font-weight:700; color:#111; text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.trend-title:hover{ text-decoration:underline; }
/* ellipsis su una sola riga */
.trend-sub{
  font-size:13px; color:#8e8e93; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:100%;
}

/* Bottone download tondo */
.trend-dl-btn{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:#f2f4f7; color:#FA2C56; text-decoration:none;
  transition: background .15s;
}
.trend-dl-btn:hover{ background:#e9ecf1; }
.trend-dl-btn .icon-cloud-download{ font-size:18px; line-height:1; }

/* ---------- Frecce Liquid Glass ---------- */
.cards-arrow,
.wc-trending-arrow{
  position:absolute;
  transform:translateY(-50%);
  z-index:5;
  width:48px; height:48px; border-radius:999px; border:0;
 background: rgb(47 47 47 / 22%);
  box-shadow:
    0 4px 20px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -8px 18px rgba(255,255,255,.18);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  display:inline-flex; align-items:center; justify-content:center;
  line-height:0; cursor:pointer;
  transition: opacity .28s, transform .20s, background .18s, box-shadow .22s, color .18s;
  color: rgba(0,0,0,.72);
  opacity: .95;
}
.wc-trending-arrow--left{ left: 6px; }
.wc-trending-arrow--right{ right: 6px; }
.cards-arrow:hover,
.wc-trending-arrow:hover{
  background: rgba(255,255,255,.35);
  box-shadow:
    0 8px 26px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -10px 22px rgba(255,255,255,.22);
  color:#fff; opacity:1;
}
.wc-trending-arrow:active{ transform: translateY(-50%) scale(.96); }
.wc-trending-arrow.is-hidden{ opacity:0; pointer-events:none; transform:translateY(-50%) scale(.94); }
.wc-trending-arrow i{ font-size:22px; line-height:1; }

/* Fallback quando il blur non è supportato */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .cards-arrow,
  .trend-play{
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 4px 18px rgba(0,0,0,.12);
  }
}

/* ---------- Lista principale ---------- */
.wc-rings-list{ display:flex; flex-direction:column; margin-top:16px; }
/* Layout split 2 colonne (desktop), 1 colonna su mobile */
.wc-rings-list.is-split{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
.wc-rings-list.is-split .wc-rings-col{display:flex;flex-direction:column;min-width:0}
@media (max-width:768px){.wc-rings-list.is-split{grid-template-columns:1fr;column-gap:0}}
.ring-item{
  display:flex; align-items:center; gap:14px;
  padding:14px 0; border-bottom:1px solid rgba(0,0,0,0.06);
}
/* Play/Pause Fontello (lista) */
.ring-play{
  all:unset; cursor:pointer;
  width:44px; height:44px; border-radius:999px;
  display:grid; place-items:center;
  background:#FA2C56; color:#fff;
  transition: transform .08s ease-in-out, opacity .15s, background .15s;
}
.ring-play:hover{ opacity:.92; }
.ring-play:active{ transform:scale(.97); }
.ring-play.is-playing{ background:#6c6c6c; }
.ring-play i{ font-size:18px; line-height:1; }

.ring-meta{ flex:1 1 auto; min-width:0; padding: 3px 0 3px 0;}
.ring-title{
  display:inline-block; font-weight:700; font-size:16px; line-height:1.25;
  color:#111; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ring-title:hover{ text-decoration:underline; }
.ring-sub{ font-size:13px; color:#8e8e93; margin-top:0px; }

/* Stile pulsanti coerente col tema (vedi .wc-creator-hero__follow, btn--ghost). */
.ring-download{
  display:inline-flex; align-items:center; gap:6px;
  padding:9.5px 18.5px; border-radius:10px;
  background:#fff; color:var(--wc-brand, #DC1842);
  border:1.5px solid var(--wc-brand, #DC1842);
  font:700 14.5px/1 -apple-system, "SF Pro Text", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .15s ease, box-shadow .2s ease;
}
.ring-download:hover{
  background:var(--wc-brand, #DC1842); color:#fff;
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(var(--wc-brand-rgb,220,24,66), .2);
}

/* ---------- Paginazione ---------- */
.wc-rings-pagination{
  display:flex; justify-content:center; gap:6px;
  margin:18px 0 6px;
}
.wc-rings-pagination .page-numbers{
  display:inline-block; min-width:36px; height:36px; line-height:36px;
  padding:0 10px; text-align:center; border-radius:10px;
  background:#f5f6f8; color:#111; text-decoration:none;
  font-weight:600; font-size:14px;
}
.wc-rings-pagination .page-numbers.current{ background:#111; color:#fff; }
.wc-rings-pagination .page-numbers:hover{ background:#e9ecf1; }

/* ---------- Modale download ---------- */
.wc-modal[aria-hidden="true"]{ display:none; }
.wc-modal{ position:fixed; inset:0; z-index:99999; display:grid; place-items:center; }
.wc-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.4); }
.wc-modal-card{
  position:relative; width:min(560px,92vw);
  background:#fff; border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  padding:22px 22px 18px;
}
.wc-modal-title{ margin:0 0 8px; font-size:20px; }
.wc-modal-text{ color:#333; margin:0 0 16px; line-height:1.5; }
.wc-modal-actions{ display:flex; justify-content:flex-end; gap:8px; }
.wc-modal-btn{
  all:unset; cursor:pointer; padding:10px 14px; border-radius:10px; background:#111; color:#fff; font-weight:600;
}
.wc-modal-close{
  position:absolute; top:8px; right:10px;
  all:unset; cursor:pointer; font-size:28px; line-height:1; padding:4px 8px; color:#888;
  opacity:0;
}
.wc-modal-close:hover{ color:#111; background: unset;}

/* ---------- Accessibilità focus ---------- */
.trend-title:focus-visible,
.ring-title:focus-visible,
.trend-dl-btn:focus-visible,
.ring-download:focus-visible,
.trend-play:focus-visible,
.ring-play:focus-visible,
.wc-trending-arrow:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(0,143,255,.5);
  border-radius:12px;
}

/* ---------- Effetto shake ---------- */
@keyframes wc-shake {
  0% { transform: translateZ(0) }
  25% { transform: translate(-2px, 0) rotate(-2deg) }
  50% { transform: translate(2px, 0) rotate(2deg) }
  75% { transform: translate(-1px, 0) rotate(-1deg) }
  100% { transform: translateZ(0) }
}
.wc-shake { animation: wc-shake 250ms ease-in-out; }

/* ---------- Responsive ---------- */
@media (max-width: 560px){
  .trend-play{ width:48px; height:48px; }
  .trend-dl-btn{ width:42px; height:42px; }
  .ring-play{ width:40px; height:40px; }
  .ring-title{ font-size:15px; }
  .ring-sub{ font-size:12px; }
}


/* Strato icone sovrapposte e centrate */
.trend-play, .ring-play { position: relative; }
.trend-play .icon-layer,
.ring-play  .icon-layer{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* box quadrato per normalizzare eventuali bearing diversi */
  width: 100%;
  height: 100%;
  pointer-events: none;
  padding-left: 3px;
}

/* dimensione icone */
.trend-play i, .ring-play i {
  font-size: 22px;           /* trending */
  line-height: 1;
}
.ring-play i { font-size: 18px; }  /* lista */

/* stato base: mostra PLAY, nasconde PAUSA */
.icon--pause { opacity: 0; transform: scale(.9); transition: opacity .12s, transform .12s; }
.icon--play  { opacity: 1; transform: scale(1);  transition: opacity .12s, transform .12s; }

/* quando è in riproduzione → mostra PAUSA */
.trend-play.is-playing .icon--pause,
.ring-play.is-playing  .icon--pause { opacity: 1; transform: scale(1);     padding-left: 0px;}
.trend-play.is-playing .icon--play,
.ring-play.is-playing  .icon--play  { opacity: 0; transform: scale(.9); }

/* micro-regolazione (se vuoi perfezionare l’ottico) */
.trend-play .icon--play  i,
.ring-play  .icon--play  i { transform: translateX(var(--nudge-play-x, 0));}
.trend-play .icon--pause i,
.ring-play  .icon--pause i { transform: translateX(var(--nudge-pause-x, 0)); }
/* esempio: :root { --nudge-play-x: 0.5px; } se ti sembra ancora leggermente spostata */

/* Assicurati che la cover sia il contenitore di riferimento */
.trend-cover{ position: relative; }

/* Il bottone deve stare SOPRA all'immagine e ricevere i click */
.trend-cover img{ display:block; pointer-events: none; }  /* l’immagine non intercetta i click */
.trend-play{
  z-index: 3;                   /* <<— sale sopra alla cover */
}

/* Per sicurezza (se qualche stile globale azzera il background) */
.trend-cover > .trend-play{
  background: rgba(255,255,255,.22);
  color:#fff;
}

/* Le icone Fontello dentro il bottone: colore visibile sempre */
.trend-play i{ color:#fff; }


/* Il contenitore fa da stacking context locale */
.trend-cover{
  position: relative;
  isolation: isolate;           /* <-- evita interferenze esterne con z-index */
}

/* L'immagine non deve intercettare i click */
.trend-cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events: none;         /* <-- i click “passano” al bottone */
}

/* Il bottone sta sopra e non modifica il layout */
.trend-play{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;                   /* <-- sopra all’immagine */
}

/* Se qualche stile globale sovrascrive il fondo, ribadiscilo */
.trend-cover > .trend-play{
  background: rgba(255,255,255,.22);
  color:#fff;
}

/* Icone fontello sempre bianche/centrate */
.trend-play i{ color:#fff; line-height:1; }

/* ===== Mobile / small tablet (≤ 560px) ===== */
/* ===== Mobile layout: 3 colonne perfette ===== */
@media (max-width: 560px){

  /* un po’ di respiro ai lati per evitare tagli */
  .wc-rings-wrap{
    padding: 0;
  }

  /* grid a 3 colonne: play | testo fluido | download */
  .wc-rings-list .ring-item{
    display: grid;
    grid-template-columns: 44px 1fr auto; /* auto per i bottoni */
    align-items: center;
    gap: 12px;
    padding: 14px 0;              /* niente padding destro che spinge fuori */
  }

  /* colonna sinistra: play */
  .wc-rings-list .ring-play{
    grid-column: 1;
    width: 44px; height: 44px;
    flex: none;                   /* non comprimere */
  }

  /* colonna centrale: titolo + sottotitolo */
  .wc-rings-list .ring-meta{
    grid-column: 2;
    min-width: 0;                 /* abilita text-overflow */
    margin: 0;                    /* toglie margini che rubano spazio */
  }
  .wc-rings-list .ring-title{
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
        display: block;
    padding-right: 10px;
  }
  .wc-rings-list .ring-sub{
    font-size: 12px;
        white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* colonna destra: download (strettamente contenuto) */
  .wc-rings-list .ring-download{
    grid-column: 3;
    flex: none;                   /* non farlo restringere in modo strano */
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
    max-width: 38vw;              /* non può mai uscire dal viewport */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* se vuoi stringerlo ancora su dispositivi molto stretti */
  @media (max-width: 360px){
    .wc-rings-list .ring-download{
      max-width: 44vw;
      font-size: 12px;
      padding: 6px 8px;
    }
  }
}

/* Overlay scurente sulle cover */
.trend-cover {
  position: relative;
  overflow: hidden;
}

.trend-cover img {
  display: block;
  width: 100%;
  height: auto;
}

/* layer nero semitrasparente sopra l'immagine */
.trend-cover::after {
  content: "";
  position: absolute;
  inset: 0; /* top, right, bottom, left = 0 */
  background: rgba(0,0,0,0.15); /* 0.35 = 35% nero, puoi regolare */
  pointer-events: none; /* non blocca i click */
  z-index: 1;
}

/* play button sopra l’overlay */
.trend-cover .trend-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



/************************************************
UPLOAD MODAL 
************************************************/ 

/* ─────────────────────────────────────────────────────────
   Layout 2-col (main + sidebar) per pagina archive ringtones.
   Replica della regola di single.css per garantire grid anche
   quando single.css non è enqueued (case 'page').
   ───────────────────────────────────────────────────────── */
.wc-main .wc-single-layout {
    display: grid;
    grid-template-columns: 1fr var(--wc-sidebar-w, 320px);
    gap: var(--wc-sp-xl, 32px);
    padding: 0;
    align-items: start;
}
.wc-main .wc-single-layout__main { min-width: 0; }
.wc-main .wc-single-layout__sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 40px;
}
@media (max-width: 1024px) {
    .wc-main .wc-single-layout { grid-template-columns: 1fr; }
}

/* Main column come card bianca (stile single post) */
.wc-ringtones-page .wc-home-layout__main{
    background:var(--wc-surface);
    border:1px solid var(--wc-border-soft);
    border-radius:var(--wc-radius);
    padding:32px;
    box-shadow:var(--wc-shadow-sm)
}
@media(max-width:640px){
    .wc-ringtones-page .wc-home-layout__main{padding:20px 16px}
}