/* ==========================================================================
   Chords page tools: metronome, auto-scroll, stage mode, chord diagrams,
   favorites. Loaded only on single Chords pages - see functions.php.
   Uses the same CSS variables as css/single-song.css (--song-accent etc.).
   ========================================================================== */

.song-page__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.song-page__tool-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--song-bg, #fff);
	border: 1px solid var(--song-border, #e5e7eb);
	color: var(--song-text, #1a1a1a);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.song-page__tool-btn:hover {
	border-color: var(--song-accent, #3454d1);
}

.song-page__tool-btn.is-active {
	background: var(--song-accent, #3454d1);
	border-color: var(--song-accent, #3454d1);
	color: #fff;
}

.tool-panel {
	margin-top: 10px;
	padding: 14px 16px;
	border: 1px solid var(--song-border, #e5e7eb);
	border-radius: 10px;
	background: #fafbfc;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* The [hidden] attribute is supposed to force display:none, but a class
   selector (.tool-panel above) and an attribute selector ([hidden]) carry
   the same CSS specificity - so without this explicit override, the browser
   lets .tool-panel's "display: flex" win and the panel shows up open by
   default instead of staying collapsed until its toggle button is clicked. */
.tool-panel[hidden] {
	display: none !important;
}

.tool-panel__label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--song-text-muted, #6b7280);
	width: 100%;
}

.tool-panel button {
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid var(--song-border, #e5e7eb);
	background: #fff;
	color: var(--song-text, #1a1a1a);
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.tool-panel button:hover {
	border-color: var(--song-accent, #3454d1);
	color: var(--song-accent, #3454d1);
}

/* Metronome */

#metronomeBpm {
	font-weight: 700;
	min-width: 70px;
	text-align: center;
}

.metronome-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--song-border, #e5e7eb);
	transition: background 0.05s, transform 0.05s;
}

.metronome-dot.is-beat {
	background: var(--song-accent, #3454d1);
	transform: scale(1.3);
}

/* Auto-scroll */

#autoscrollSpeedLabel {
	font-weight: 700;
	min-width: 45px;
}

/* Floating up/down/stop controls shown while auto-scroll is running, pinned
   to the right edge so they stay reachable no matter how far the page has
   scrolled. */

.autoscroll-floating {
	position: fixed;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 900;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.autoscroll-floating[hidden] {
	display: none !important;
}

.autoscroll-floating__btn {
	-webkit-appearance: none;
	appearance: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--song-border, #e5e7eb);
	background: var(--song-bg, #fff);
	color: var(--song-accent, #3454d1);
	font-size: 18px;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}

.autoscroll-floating__btn:hover {
	background: var(--song-accent, #3454d1);
	color: #fff;
}

.autoscroll-floating__btn--toggle {
	font-size: 14px;
	background: var(--song-accent, #3454d1);
	color: #fff;
}

.autoscroll-floating__btn--toggle:hover {
	background: var(--song-text, #1a1a1a);
}

.autoscroll-floating__close {
	-webkit-appearance: none;
	appearance: none;
	align-self: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--song-border, #e5e7eb);
	background: var(--song-bg, #fff);
	color: var(--song-text-muted, #6b7280);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

.autoscroll-floating__close:hover {
	color: var(--song-text, #1a1a1a);
}

@media (max-width: 480px) {
	.autoscroll-floating {
		right: 10px;
	}
	.autoscroll-floating__btn {
		width: 40px;
		height: 40px;
	}
}

/* Favorites */

.favorites-panel__list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	width: 100%;
}

.favorites-panel__list li {
	border-bottom: 1px solid var(--song-border, #e5e7eb);
}

.favorites-panel__list li:last-child {
	border-bottom: none;
}

.favorites-panel__list a {
	display: block;
	padding: 8px 0;
	color: var(--song-text, #1a1a1a);
	text-decoration: none;
	font-size: 14px;
}

.favorites-panel__list a:hover {
	color: var(--song-accent, #3454d1);
}

.favorites-panel__empty {
	color: var(--song-text-muted, #6b7280);
	font-size: 13px;
	padding: 8px 0;
}

#favoritesCount {
	background: rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	padding: 1px 6px;
	font-size: 11px;
}

.song-page__tool-btn:not(.is-active) #favoritesCount {
	background: var(--song-chip-bg, #f3f4f6);
	color: var(--song-text-muted, #6b7280);
}

/* Chord diagrams */

.chord-diagram-popover {
	position: absolute;
	z-index: 1000;
	background: #fff;
	border: 1px solid var(--song-border, #e5e7eb);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 14px;
	width: 160px;
	text-align: center;
}

.chord-diagram-popover__close {
	position: absolute;
	top: 6px;
	right: 8px;
	border: none;
	background: none;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--song-text-muted, #6b7280);
	padding: 4px;
}

.chord-diagram-popover__name {
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 6px;
	color: var(--song-accent, #3454d1);
}

.chord-diagram-popover__note {
	font-size: 11px;
	color: var(--song-text-muted, #6b7280);
	margin-top: 6px;
}

.chord-diagram__svg {
	width: 100%;
	height: auto;
	color: var(--song-text, #1a1a1a);
}

.chord-diagram__line {
	stroke: var(--song-text, #1a1a1a);
	stroke-width: 1;
	opacity: 0.6;
}

.chord-diagram__barre {
	stroke: var(--song-accent, #3454d1);
	stroke-width: 10;
	stroke-linecap: round;
	opacity: 0.25;
}

.chord-diagram__dot {
	fill: var(--song-accent, #3454d1);
}

.chord-diagram__open {
	fill: none;
	stroke: var(--song-accent, #3454d1);
	stroke-width: 1.5;
}

.chord-diagram__marker-text {
	font-size: 11px;
	text-anchor: middle;
	fill: var(--song-text-muted, #6b7280);
}

.chord-diagram__fret-label {
	font-size: 10px;
	text-anchor: end;
	fill: var(--song-text-muted, #6b7280);
}

.song-page__body .chord {
	cursor: pointer;
}

/* Stage mode: strip everything but the chord content itself, enlarge text
   for reading at a distance (phone propped on a stand). */

body.stage-mode .main-header,
body.stage-mode #menu,
body.stage-mode .mobile-nav-overlay,
body.stage-mode .song-page__sidebar,
body.stage-mode .song-page__ad,
body.stage-mode .song-page__search,
body.stage-mode .discover-more,
body.stage-mode .song-page__related,
body.stage-mode .song-page__tags,
body.stage-mode .song-page__cta,
body.stage-mode .godsmusic-text-align-center,
body.stage-mode .whatsapp-cta {
	display: none !important;
}

body.stage-mode {
	background: #fff !important;
}

body.stage-mode .song-page-layout {
	max-width: 900px;
	padding-top: 12px;
}

body.stage-mode .song-page__article {
	border: none;
	padding: 0;
}

body.stage-mode .song-page__body {
	font-size: 24px;
	line-height: 2.1;
}

body.stage-mode .song-page__tools {
	position: sticky;
	top: 0;
	background: #fff;
	padding: 10px 0;
	z-index: 10;
	border-bottom: 1px solid var(--song-border, #e5e7eb);
}

@media (max-width: 480px) {
	body.stage-mode .song-page__body {
		font-size: 20px;
		line-height: 1.9;
	}
}

/* Sticky "Join our WhatsApp Channel" banner, bottom-right. Sits lower than
   .autoscroll-floating (which is vertically centered), so the two don't
   overlap even when both are showing at once. */

.whatsapp-cta {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 950;
	display: flex;
	align-items: center;
	background: #25d366;
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
	padding: 4px;
	max-width: calc(100vw - 32px);
}

.whatsapp-cta__link {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	padding: 4px 14px 4px 4px;
}

.whatsapp-cta__icon {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #128c3e;
	display: flex;
	align-items: center;
	justify-content: center;
}

.whatsapp-cta__icon svg {
	width: 20px;
	height: 20px;
}

.whatsapp-cta__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.whatsapp-cta__text strong {
	color: #fff;
	font-size: 13px;
}

.whatsapp-cta__text span {
	color: rgba(255, 255, 255, 0.9);
	font-size: 11px;
}

.whatsapp-cta__close {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.3);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	margin-left: 4px;
}

.whatsapp-cta__close:hover {
	background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 480px) {
	.whatsapp-cta {
		right: 10px;
		bottom: 10px;
	}
	.whatsapp-cta__text span {
		display: none;
	}
}