@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Avada-proof scoping */
#vcm-nowplaying,
#vcm-nowplaying *{
  box-sizing:border-box !important;
  font-family:Inter,system-ui,sans-serif !important;
}

/* =========
   BASE (desktop-first, like your backup)
   Key change: REMOVE min-width:960px (that breaks mobile/tablet)
   ========= */
#vcm-nowplaying{
  width:100%;
  max-width:1480px;
  margin:0 auto;
  position:relative;
  padding-top:56px;
  /* avoid Avada clipping */
  overflow:visible;
}

/* Card */
#vcm-nowplaying .vcm-card{
  position:relative;
  border-radius:18px;
  padding:18px 18px 16px;
  background:linear-gradient(90deg,#ff6a00,#f6b07a,#00bcd4);
  box-shadow:0 12px 34px rgba(0,0,0,.14);
  overflow:visible;
}

/* Cover (3D tilt) */
#vcm-nowplaying .vcm-cover{
  width:92px;
  height:92px;
  position:absolute;
  top:-38px;
  left:18px;
  border-radius:14px;
  background:#fff center/cover no-repeat;
  box-shadow:0 20px 40px rgba(0,0,0,.34), 0 6px 14px rgba(0,0,0,.18);
  transform:perspective(900px) rotateX(8deg) rotateZ(-6deg);
  transition:transform .25s ease;
}
#vcm-nowplaying .vcm-cover:hover{
  transform:perspective(900px) rotateX(5deg) rotateZ(-3deg);
}

/* Layout */
#vcm-nowplaying .vcm-row{
  display:flex;
  align-items:center;
  gap:14px;
}
#vcm-nowplaying .vcm-info{
  padding-left:110px;
  flex:1;
  min-width:0;
}

#vcm-nowplaying .vcm-brand{
  display:flex;
  align-items:center;
  gap:8px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  color:rgba(255,255,255,.95);
}

#vcm-nowplaying .vcm-dot{
  width:8px;height:8px;border-radius:50%;
  background:#ff2d2d;
  box-shadow:0 0 0 4px rgba(255,45,45,.18);
  animation:vcmPulse 1.4s infinite;
}
@keyframes vcmPulse{
  0%{opacity:1}
  50%{opacity:.5}
  100%{opacity:1}
}

#vcm-nowplaying .vcm-line{
  margin-top:6px;
  font-size:13px;
  color:white;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#vcm-nowplaying .vcm-track{
  margin-top:8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:baseline;
}
#vcm-nowplaying .vcm-track .vcm-label{
  font-size:13px;
  color:white;
  white-space:nowrap;
}
#vcm-nowplaying .vcm-track .vcm-value{
  font-size:13px;
  color:white;
  min-width:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

#vcm-nowplaying .vcm-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

/* Buttons (hard reset against Avada) */
#vcm-nowplaying .vcm-btn{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:0 !important;
  outline:0 !important;
  cursor:pointer !important;
  background:#fff !important;
  color:#111 !important;
  padding:0 !important;
  margin:0 !important;
  text-decoration:none !important;
  font-weight:800 !important;
  box-shadow:0 10px 22px rgba(0,0,0,.14) !important;
}

/* Play button: perfect circle + center */
#vcm-nowplaying .vcm-btn-play{
  width:46px !important;
  height:46px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  user-select:none !important;
  background:rgba(255,255,255,.98) !important;
}

/* SVG icon inside play button */
#vcm-nowplaying .vcm-btn-play svg{
  width:20px !important;
  height:20px !important;
  display:block !important;
  fill:#1a1a1a !important;
}

/* Schedule pill */
#vcm-nowplaying .vcm-btn-schedule{
  height:46px !important;
  border-radius:999px !important;
  padding:0 14px !important;
  font-size:13px !important;
  font-weight:900 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}

/* Range */
#vcm-nowplaying .vcm-range{
  width:140px !important;
  height:46px !important;
  accent-color:#ff6a00 !important;
}

/* Recently played */
#vcm-nowplaying .vcm-recent{
  margin-top:10px;
  color:white;
  font-size:11px;
}
#vcm-nowplaying .vcm-recent-title{
  font-weight:900;
  color:white;
  margin-bottom:4px;
}
#vcm-nowplaying .vcm-recent-item{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===== Modal overlay (BODY level) ===== */
.vcm-overlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(0,0,0,.62) !important;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:2147483647 !important;
  isolation:isolate;
}
.vcm-overlay.show{display:flex !important;}

.vcm-modal{
  position:relative;
  z-index:2147483647 !important;
  width:min(920px, 100%);
  max-height:85vh;
  overflow:auto;
  background:#fff;
  border-radius:16px;
  box-shadow:0 26px 70px rgba(0,0,0,.36);
}

.vcm-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.vcm-modal-title{
  font-weight:900;
  color:#00BCD4;
}

.vcm-modal-close{
  width:38px;height:38px;
  border-radius:50%;
  border:0;
  background:#ff6600;
  cursor:pointer;
  font-size:18px;
}

.vcm-modal-body{
  padding:12px 16px 18px;
  color:#00BCD4;
}

.vcm-day{ margin-top:12px; font-weight:900; }

.vcm-slot{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:8px 10px;
  border-radius:10px;
  margin-top:6px;
  background:#f7f7f7;
}

.vcm-slot.current{
  background:#ff6600;
  border:1px solid rgba(255,106,0,.25);
}

.vcm-time{ font-variant-numeric:tabular-nums; color:#333; }
.vcm-name{ font-weight:800; color:#111; }

/* Inline schedule full width */
#vcm-schedule-inline{
  width:100% !important;
  max-width:none !important;
  margin:16px 0 0 !important;
}
#vcm-schedule-inline .vcm-modal{
  width:100% !important;
  max-width:none !important;
  max-height:none !important;
}

/* =========================================================
   RESPONSIVE (fix iPhone/iPad without ruining desktop)
   ========================================================= */

/* Tablet & below: allow controls to wrap and text to break */
@media (max-width: 1024px){
  #vcm-nowplaying{
    max-width:none;            /* let Avada container decide */
    padding-top:52px;
    padding-left:0;
    padding-right:0;
  }

  #vcm-nowplaying .vcm-controls{
    flex-wrap:wrap;            /* key for iPad portrait */
    justify-content:flex-end;
    row-gap:10px;
  }

  /* Let lines wrap on smaller widths */
  #vcm-nowplaying .vcm-line{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
}

/* Mobile portrait */
@media (max-width: 640px){
  /* Stop absolute cover from causing overlap/clipping */
  #vcm-nowplaying{
    padding-top:18px;
  }

  #vcm-nowplaying .vcm-cover{
    position:relative;
    top:auto;
    left:auto;
    margin:0 0 12px 0;
    width:92px;
    height:92px;
  }

  #vcm-nowplaying .vcm-row{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  #vcm-nowplaying .vcm-info{
    padding-left:0;
  }

  /* Controls: keep them neat, but do NOT force Schedule full width */
  #vcm-nowplaying .vcm-controls{
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  #vcm-nowplaying .vcm-range{
    flex:1 1 220px;
    min-width:180px;
    width:auto !important;
  }

  #vcm-nowplaying #vcm-scheduleBtn{
    width:auto !important;
    min-width:140px;
  }
}

/* iPhone landscape / short height: force stacked layout so nothing gets cut off */
@media (max-height: 430px) and (orientation: landscape){
  #vcm-nowplaying{
    padding-top:12px;
  }

  #vcm-nowplaying .vcm-cover{
    position:relative;
    top:auto;
    left:auto;
    margin:0 0 10px 0;
    width:76px;
    height:76px;
  }

  #vcm-nowplaying .vcm-row{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  #vcm-nowplaying .vcm-info{
    padding-left:0;
  }

  #vcm-nowplaying .vcm-controls{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}

/* Extra Avada safety: never let parent clip the widget */
#vcm-nowplaying,
#vcm-nowplaying .vcm-card{
  height:auto !important;
  overflow:visible !important;
}

/* === iOS/iPadOS: hide volume slider (iOS does not reliably honor JS volume control) === */
#vcm-nowplaying.vcm-ios #vcm-volume{
  display:none !important;
}