:root {
  --dt-blue: #0066ff;
  --dt-blue-glow: #00f0ff;

  --dt-red: #ff2a2a;
  --dt-red-soft: rgba(255, 42, 42, 0.3);

  --dt-white: #ffffff;
}

/* ===================== */
/* 🔥 MAIN LAYOUT */
/* ===================== */
.main-layout {
  display: flex;
  gap: 20px;
  margin: 20px;
}

.left-panel { width: 70%; }
.right-panel { width: 30%; }


/* ===================== */
/* 🔥 WAVE LIST */
/* ===================== */
.wave-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* ===================== */
/* 🔥 ROW */
/* ===================== */
.wave-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}


/* ===================== */
/* 🔥 LEFT (COVER + BTN) */
/* ===================== */
.wave-left {
  display: flex;
  align-items: center;
}

.wave-cover-wrap {
  position: relative;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

.wave-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}


/* ===================== */
/* ▶ PLAY BUTTON */
/* ===================== */
.wave-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  color: var(--dt-white);

  border: none;
  border-radius: 50%;

  font-size: 18px;
  font-weight: bold;

  cursor: pointer;
  z-index: 10;

  transition: all 0.25s ease;
}

/* 🔥 HOVER — BLUE + RED DNA */
.wave-play:hover {
  background: radial-gradient(
    circle,
    rgba(0, 102, 255, 0.25),
    rgba(255, 42, 42, 0.25)
  );

  box-shadow:
    0 0 12px var(--dt-blue-glow),
    0 0 20px var(--dt-red-soft);

  transform: translate(-50%, -50%) scale(1.1);
}


/* CLICK FEEDBACK */
.wave-play:active {
  transform: translate(-50%, -50%) scale(0.95);
}


/* ===================== */
/* 🧾 INFO */
/* ===================== */
.wave-info {
  min-width: 140px;
  width: 180px;
}

.wave-title {
  font-size: 13px;
  font-weight: 600;
}

.wave-meta {
  font-size: 11px;
  opacity: 0.7;
}


/* ===================== */
/* 🌊 WAVE */
/* ===================== */
.wave-bar {
  flex: 1;
  min-width: 120px;
  height: 40px;
  position: relative;
}

/* 🔥 CRITICAL FIX */
.wave-bar canvas {
  pointer-events: none;
}


/* ===================== */
/* 💰 ACTIONS */
/* ===================== */
.wave-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.wave-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 12px;
}

.old-price {
  position: relative;
  color: rgba(255, 255, 255, 0.35); /* softer but visible */
  font-size: 13px;
  font-weight: 500;

  text-decoration: none; /* remove default ugly line */
}

/* 🔥 CUSTOM STRIKE (brand red glow) */
.old-price::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;

  background: linear-gradient(
    90deg,
    transparent,
    #ff003c,
    #ff003c,
    transparent
  );

  box-shadow:
    0 0 6px rgba(255, 0, 60, 0.6);

  transform: translateY(-50%);
}


.new-price {
  color: #00eaff;
  font-weight: 700;
  font-size: 15px;

  text-shadow:
    0 0 6px rgba(0, 234, 255, 0.6),
    0 0 12px rgba(0, 234, 255, 0.4);
}


/* subtle hover glow */
.wave-row:hover .new-price {
  text-shadow:
    0 0 6px rgba(0,240,255,0.6),
    0 0 12px rgba(255,42,42,0.3);
}


.wave-download {
  border: none;

  background: rgba(255,255,255,0.05);
  color: #fff;

  padding: 6px 10px;
  border-radius: 6px;

  cursor: pointer;

  transition: all 0.25s ease;
}

/* 🔥 subtle hover (clean, not loud) */
.wave-download:hover {
  background: rgba(0, 102, 255, 0.15);

  box-shadow:
    0 0 6px rgba(0,240,255,0.4);

  transform: translateY(-1px);
}
.wave-play:hover {
  background: radial-gradient(
    circle,
    rgba(0,102,255,0.18),
    rgba(255,42,42,0.18)
  );

  box-shadow:
    0 0 8px rgba(0,240,255,0.5);

  transform: translate(-50%, -50%) scale(1.05);
}
/* ===============================
📱 MAIN LAYOUT MOBILE FIX (REAL)
=============================== */
@media (max-width: 768px) {

  /* 🔥 STACK PANELS */
  .main-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  /* 🔥 FULL WIDTH PANELS */
  .left-panel,
  .right-panel {
    width: 100% !important;
  }

  /* 🔥 ORDER (IMPORTANT) */
  .left-panel {
    order: 1;
  }

  .right-panel {
    order: 2;
    margin-top: 20px;
  }

}
/* ===============================
📱 WAVE ACTION FIX (DOWNLOAD INSIDE)
=============================== */

/* make row layout controlled */
.wave-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 10px; /* 🔥 prevent edge clipping */
}

/* keep actions inside */
.wave-actions {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-left: auto; /* 🔥 pushes to right INSIDE */
}

/* fix download button */
.wave-download {
  width: 34px;
  height: 34px;

  border-radius: 8px;
  border: none;

  background: rgba(255,255,255,0.06);
  color: #00f0ff;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: 0.25s;
}

/* hover */
.wave-download:hover {
  background: #00f0ff;
  color: #000;
}

/* 🔥 MOBILE EDGE FIX */
@media (max-width: 768px) {
  .wave-row {
    padding-right: 14px;
  }

  .wave-actions {
    gap: 6px;
  }

  .wave-download {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}
/* ===============================
🔥 HARD FIX — KEEP EVERYTHING INSIDE
=============================== */

/* prevent row overflow */
.wave-row {
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* 🔥 stops spill */
}

/* make waveform not push layout */
.wave-bar {
  flex: 1;
  min-width: 0; /* 🔥 CRITICAL */
}

/* fix actions alignment */
.wave-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0; /* 🔥 prevents pushing out */
}

/* tighten price block */
.wave-price {
  white-space: nowrap;
}

/* download button INSIDE */
.wave-download {
  flex-shrink: 0;
}

/* MOBILE PERFECT ALIGN */
@media (max-width: 768px) {
  .wave-row {
    padding-right: 12px;
  }
}
/* ===============================
🔥 FORCE WAVE TO EXPAND LEFT
=============================== */

.wave-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 🔥 shrink left side */
.wave-left {
  flex: 0 0 60px; /* fixed small */
}

.wave-info {
  flex: 0 0 120px; /* 🔥 limit text width */
  overflow: hidden;
}

/* 🔥 WAVE TAKES REMAINING SPACE */
.wave-bar {
  flex: 1;              /* takes all free space */
  min-width: 0;         /* REQUIRED */
  margin-left: -10px;   /* 🔥 pulls it closer */
}

/* 🔥 keep actions tight */
.wave-actions {
  flex: 0 0 auto;
  margin-left: 6px;
}
/* IMAGE WRAP */
.card-image-wrap {
  position: relative;
}

/* PLAY BUTTON (SAME AS FEATURED STYLE) */
.overlay-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 50px;
  height: 50px;
  border-radius: 50%;

  border: none;
  background: rgba(0,0,0,0.6);
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 10;

  opacity: 0;
  transition: 0.25s ease;
}

/* SHOW */
.card-image-wrap:hover .overlay-play {
  opacity: 1;
}

/* MOBILE ALWAYS VISIBLE */
@media (max-width: 768px) {
  .overlay-play {
    opacity: 1;
  }
}
.wave-row.active {
  background: rgba(255, 0, 60, 0.08);
  border-left: 3px solid #ff003c;
}

.wave-bar canvas {
  filter: drop-shadow(0 0 8px rgba(255, 0, 60, 0.5));
}
/* ===============================
🧱 SAFE SCROLL SPACE (FINAL FIX)
=============================== */

body {
  padding-bottom: 120px; /* enough space for player */
}

/* mobile */
@media (max-width: 768px) {
  body {
    padding-bottom: 100px;
  }
}
body.licence-page #waveList .wave-row:not(.explore-row){
    display: none !important;
}
/* ===============================
   🔍 ARSENAL SEARCH BAR
   =============================== */
.arsenal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 20px;
  position: relative;
}

.arsenal-header h2 {
  margin: 0;
  white-space: nowrap;
}

.arsenal-search {
  position: relative;
  flex: 1;
  max-width: 400px;
  
}

#beatSearch {
  width: 100%;
  height: 42px;
  padding: 1px 16px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: all.2s;
  font-family: 'Poppins', sans-serif;
}

#beatSearch:focus {
  border-color: #ff003c;
  box-shadow: 0 0 0 3px rgba(255, 0, 60, 0.1);
}

.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}

.search-dropdown.active {
  display: block;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid #1e293b;
  transition: background.15s;
}

.search-item:hover {
  background: #1e293b;
}

.search-item img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
}

.search-item-info {
  flex: 1;
}

.search-item-title {
  font-size: 14px;
  color: #fff;
  font-weight: 600;
}

.search-item-meta {
  font-size: 12px;
  color: #64748b;
}

@media (max-width: 768px) {
 .arsenal-header {
    flex-direction: column;
    align-items: flex-start;
  }
 .arsenal-search {
    max-width: 100%;
  }
}
.toggle-fixed {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0;
}

.toggle-fixed::-webkit-scrollbar {
  display: none;
}

.arsenal-bar-title {
  font-family: 'Orbitron', sans-serif; /* Already loaded */
  font-size: 16px;
  font-weight: 700;
  color: #00f0ff; /* Cyan glow like DOPE TONE */
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.7); /* Glow */
}

.filter-capsule {
  flex-shrink: 0;
  font-family: 'Poppins', sans-serif; /* Your existing font */
}
/* Arsenal inner locks filter width to track width */
.arsenal-inner {
  width: 100%;
  max-width: 100%;
}

/* Filter bar = exactly waveList width */
.arsenal-inner .view-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 16px 0;
  padding: 10px 10px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  flex-wrap: nowrap; /* never stack */
}

/* Pills scroll horizontally */
.arsenal-inner .toggle-fixed {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.arsenal-inner .toggle-fixed::-webkit-scrollbar { display: none; }

/* Search stays pinned right, never drops */
.arsenal-inner .arsenal-search {
  flex: 0 0 220px;
  position: relative;
  margin-left: auto;
}

.arsenal-inner #beatSearch {
  width: 100%;
  height: 36px;
  padding: 0 14px;
  background: rgba(255,255,255,0.06);
  border: none;
  border-radius: 8px;
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  font-family: 'Poppins', sans-serif;
}

/* Mini screen: search shrinks, pills keep scrolling */
@media (max-width: 768px) {
  .arsenal-inner .arsenal-search {
    flex: 0 0 120px; /* compact, no height increase */
  }
  .arsenal-inner #beatSearch {
    font-size: 12px;
  }
  .arsenal-bar-title {
    font-size: 14px;
    letter-spacing: 1px;
  }
}

/* Extra small: icon-only search */
@media (max-width: 480px) {
  .arsenal-inner .arsenal-search {
    flex: 0 0 38px;
  }
  .arsenal-inner #beatSearch::placeholder {
    color: transparent;
  }
  .arsenal-inner #beatSearch {
    padding: 0 10px;
  }
  /* expands on focus */
  .arsenal-inner #beatSearch:focus {
    position: absolute;
    right: 0;
    width: 220px;
    background: #0f172a;
    z-index: 20;
    box-shadow: 0 0 0 2px rgba(255, 0, 60, 0.15);
  }
}
/* ===============================
   ARSENAL BAR - SLIM + FLUSH WIDTH
   =============================== */
.arsenal-inner,
.arsenal-section,
#waveList {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Bar = exact track width */
.arsenal-section .view-toggle,
.arsenal-inner .view-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  
  width: 100% !important;
  max-width: 100%;
  height: 42px;
  min-height: 42px;
  
  padding: 0 12px !important;   /* 12px matches your .wave-row padding */
  margin: 0 0 12px 0 !important;
  
  box-sizing: border-box;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* pills */
.arsenal-section .toggle-fixed,
.arsenal-inner .toggle-fixed {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.toggle-fixed::-webkit-scrollbar { display: none; }

.arsenal-bar-title,
.filter-capsule {
  margin: 0 !important;
  line-height: 1;
}

/* search flush right */
.arsenal-section .arsenal-search,
.arsenal-inner .arsenal-search {
  flex: 0 0 220px;
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: auto;
}

#beatSearch {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  margin: 0 !important;
  box-sizing: border-box;
}

/* make sure tracks have no stray margin */
.wave-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}
/* ===============================
🔥 MOBILE EDGE FIX – WAVESURFER WIDTH
=============================== */
@media (max-width: 768px) {

  /* 1. Kill the big page margins on mobile */
  .main-layout {
    margin: 0 !important;
    padding: 0 8px !important; /* 8px edge gap total, not 40px */
    gap: 16px !important;
  }

  /* 2. Make the list + rows use full width */
  .left-panel,
  .wave-list {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 3. Tighten each track row */
  .wave-row {
    padding: 10px 8px !important; /* was 12px 14px */
    gap: 8px !important;
    margin: 0 0 8px 0 !important;
  }

  /* 4. Shrink left stuff so wave gets the space */
  .wave-left {
    flex: 0 0 50px !important; /* cover + btn */
  }

  .wave-info {
    flex: 0 0 100px !important; /* title + BPM */
    min-width: 0 !important;
  }

  .wave-actions {
    flex: 0 0 auto !important;
    margin-left: 6px !important;
  }

  /* 5. CRITICAL – let wavesurfer expand */
  .wave-bar {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-left: 0 !important; /* removes that -10px pull */
  }
}
.wave-play svg,
.wave-download svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: block;
}
.wave-play { line-height: 1; }
.wave-download svg { width: 16px; height: 16px; }
@media (max-width: 768px) {
  .wave-download svg { width: 14px; height: 14px; }
}
.wave-play svg {
  width: 22px !important; /* was 1em = 18px */
  height: 22px !important;
  fill: currentColor;
  display: block;
}
.wave-play {
  width: 40px !important; /* bigger tap target */
  height: 40px !important;
  line-height: 1;
}
.wave-download svg { 
  width: 16px; 
  height: 16px; 
  fill: currentColor;
  display: block;
}
@media (max-width: 768px) {
  .wave-play svg {
    width: 20px !important;
    height: 20px !important;
  }
  .wave-download svg { 
    width: 14px; 
    height: 14px; 
  }
}
.wave-bar{
    cursor:pointer;
    pointer-events:auto;
}

.wave-bar canvas{
    pointer-events:auto;
}
/* 🔥 BIGGER PLAY ICONS - DESKTOP */
.wave-play {
  width: 48px !important;
  height: 48px !important;
}
.wave-play svg {
  width: 28px !important;
  height: 28px !important;
}

#gpPlay, #mpPlay {
  width: 52px !important;
  height: 52px !important;
}
#gpPlay svg, #mpPlay svg {
  width: 32px !important;
  height: 32px !important;
}

/* 🔥 BIGGER PLAY ICONS - MOBILE */
@media (max-width: 768px) {
  .wave-play {
    width: 44px !important;
    height: 44px !important;
  }
  .wave-play svg {
    width: 26px !important;
    height: 26px !important;
  }
  
  #gpPlay, #mpPlay {
    width: 48px !important;
    height: 48px !important;
  }
  #gpPlay svg, #mpPlay svg {
    width: 30px !important;
    height: 30px !important;
  }
}
/* 🔥 FINAL BOSS PLAY ICONS - MASSIVE */
.wave-play {
  width: 56px !important;
  height: 56px !important;
}
.wave-play svg {
  width: 36px !important;
  height: 36px !important;
}

#gpPlay, #mpPlay {
  width: 60px !important;
  height: 60px !important;
}
#gpPlay svg, #mpPlay svg {
  width: 40px !important;
  height: 40px !important;
}

/* 🔥 MOBILE - STILL HUGE */
@media (max-width: 768px) {
  .wave-play {
    width: 52px !important;
    height: 52px !important;
  }
  .wave-play svg {
    width: 32px !important;
    height: 32px !important;
  }
  
  #gpPlay, #mpPlay {
    width: 56px !important;
    height: 56px !important;
  }
  #gpPlay svg, #mpPlay svg {
    width: 36px !important;
    height: 36px !important;
  }
}
/* 🔥 BUTTON SIZE STAYS, HOVER BG SHRINKS */
.wave-cover-wrap {
  position: relative;
  overflow: hidden !important;
  border-radius: 8px !important;
}

.wave-play {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: transparent !important;
  border: none !important;
  z-index: 10 !important;
  /* keep your current button size - don't change this */
}

/* Hover BG as pseudo-element - control size here */
.wave-play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0); /* hidden by default */
  width: 70% !important; /* 🔥 SMALLER BG - adjust this % */
  height: 70% !important; /* 🔥 SMALLER BG - adjust this % */
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  transition: transform 0.2s ease !important;
  z-index: -1 !important;
}

.wave-play:hover::before {
  transform: translate(-50%, -50%) scale(1); /* show on hover */
}

.wave-play svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.9)) !important;
}