/* Styles for the "Listen On The App" button */
.listen-on-app-btn {
  font-family: "Courier New", Courier, monospace;
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 8px 12px;
  border: 1px solid;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Theme-specific hover styles */

/* Classic Terminal */
.style-classic-terminal .listen-on-app-btn {
  background-color: #000;
  color: #00ff00;
  border-color: #00ff00;
}

.style-classic-terminal .listen-on-app-btn:hover {
  background-color: #333;
  color: #fff;
}

/* Coder Core */
.style-coder-core .listen-on-app-btn {
  background-color: #1e1e1e;
  color: #6ac441;
  border-color: #6ac441;
}

.style-coder-core .listen-on-app-btn:hover {
  background-color: #8bb174;
  color: #1e1e1e;
}

/* Figma Design */
.style-figma-design .listen-on-app-btn {
  background-color: #fff;
  color: #0066cc;
  border-color: #0066cc;
}

.style-figma-design .listen-on-app-btn:hover {
  background-color: #0066cc;
  color: #fff;
}

/* LCD Display */
.style-lcd-display .listen-on-app-btn {
  background-color: #1a1a2e;
  color: #e94560;
  border-color: #e94560;
}

.style-lcd-display .listen-on-app-btn:hover {
  background-color: #e94560;
  color: #1a1a2e;
}

/* Modern Terminal */
.style-modern-terminal .listen-on-app-btn {
  background-color: #0c0c0c;
  color: #00ff00;
  border-color: #00ff00;
}

.style-modern-terminal .listen-on-app-btn:hover {
  background-color: #333;
  color: #fff;
}

/* Paper Card */
.style-paper-card .listen-on-app-btn {
  background-color: #fff8f4;
  color: #494949;
  border-color: #000;
}

.style-paper-card .listen-on-app-btn:hover {
  background-color: #f0f0f0;
  color: #000;
}

/* Vintage Typewriter */
.style-vintage-typewriter .listen-on-app-btn {
  background-color: #fef9e7;
  color: #3e2723;
  border-color: #8b4513;
}

.style-vintage-typewriter .listen-on-app-btn:hover {
  background-color: #8b4513;
  color: #fef9e7;
}