/*
 * TGM LCM — Sticky bottom-bar player.
 *
 * Layout: fixed to viewport bottom, full width, slides up when revealed.
 * Internal grid: artwork | meta | controls | waveform | volume | upgrade | close.
 * Collapses on narrow viewports — drops the volume + upgrade chips,
 * stacks waveform under meta.
 */

.tgm-lcm-player {
    position: fixed;
    /* Dock just above the bottom app bar (theme.css owns --tgm-lcm-appbar-h). */
    inset: auto 0 var(--tgm-lcm-appbar-h, 58px) 0;
    z-index: 100000;
    background: var(--tgm-lcm-surface);
    border-top: 1px solid var(--tgm-lcm-border-strong);
    color: var(--tgm-lcm-text);
    font-family: var(--tgm-lcm-font);
    transform: translateY(100%);
    transition: transform 0.24s ease;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4);
}

.tgm-lcm-player.is-open {
    transform: translateY(0);
}

.tgm-lcm-player-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 16px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative; /* anchor for the mobile close-button corner */
}
/* Desktop/tablet order: title+rating (left) · transport (center) · waveform
   (right) · volume · close. meta + wave both grow equally so the heart sits
   centered between them, with the waveform to its right. (Mobile overrides
   the order below to stack.) */
.tgm-lcm-player-art      { flex: 0 0 auto;  order: 0; }
.tgm-lcm-player-meta     { flex: 0 1 auto;  order: 1; min-width: 0; }
/* auto margins center the transport with EVEN gaps on both sides; the gaps
   shrink as the title/waveform need more room (adapts to title length). */
.tgm-lcm-player-controls { flex: 0 0 auto;  order: 2; margin: 0 auto; }
.tgm-lcm-player-wave     { flex: 0 1 380px; order: 3; min-width: 0; }
.tgm-lcm-player-volume   { flex: 0 0 auto;  order: 4; }
.tgm-lcm-player-upgrade  { order: 5; }
.tgm-lcm-player-close    { flex: 0 0 auto;  order: 6; }

/* Artwork thumbnail — back on the far left (Mike). Hidden on mobile below. */
.tgm-lcm-player-art {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: var(--tgm-lcm-radius-sm);
    overflow: hidden;
}

.tgm-lcm-player-artwork {
    width: 100%;
    height: 100%;
    background-color: var(--tgm-lcm-bg);
    background-size: cover;
    background-position: center;
}

/* Title + status */
.tgm-lcm-player-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.tgm-lcm-player-title {
    color: var(--tgm-lcm-text);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tgm-lcm-player-title:hover {
    color: var(--tgm-lcm-accent);
}

.tgm-lcm-player-status {
    color: var(--tgm-lcm-text-muted);
    font-size: 12px;
    min-height: 14px;
}

/* In-player rating — the display widget injected via the track-URL REST. */
.tgm-lcm-player-rating { margin-top: 3px; }
.tgm-lcm-player-rating:empty { display: none; }

/* Controls */
.tgm-lcm-player-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tgm-lcm-player-btn {
    background: transparent;
    border: 0;
    color: var(--tgm-lcm-text);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
}

.tgm-lcm-player-btn:hover {
    background: var(--tgm-lcm-surface-2);
    color: var(--tgm-lcm-accent);
}

/* Prev/Next when there's nothing to skip to (lone-track queue). */
.tgm-lcm-player-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.tgm-lcm-player-btn:disabled:hover {
    background: transparent;
    color: var(--tgm-lcm-text);
}

.tgm-lcm-player-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Labeled Prev/Next — a pill with the icon + a word, so a non-technical
   audience reads exactly what each control does (shuffle/repeat removed). */
.tgm-lcm-player-btn--labeled {
    width: auto;
    border-radius: 18px;
    padding: 0 14px;
    gap: 6px;
}
.tgm-lcm-player-btn-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Kadence paints a blue background on button :focus/:active that bleeds into
   our transport buttons (and hides the orange is-active state). Nuke it and
   own these states ourselves. Mirrors the heart's reset block. */
.tgm-lcm-player-btn:focus,
.tgm-lcm-player-btn:active {
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    color: var(--tgm-lcm-accent) !important;
}
.tgm-lcm-player-btn:focus:not(:focus-visible) {
    outline: none !important;
}
.tgm-lcm-player-btn:focus-visible {
    outline: 2px solid #8a2433 !important; /* burgundy, never the browser blue */
    outline-offset: 2px;
}

/* Shuffle + repeat toggles: when active, FILL the (already round) button so the
   on-state is unmistakable — a bare colour swap was invisible on the golden
   theme (active #fff vs idle #fff8ec on the gold bar). Repeat is now a simple
   on/off that loops the current song; the "1" overlay says "this one track".
   !important so the active state wins over Kadence's button color/focus. */
.tgm-lcm-player-toggle.is-active {
    color: var(--tgm-lcm-accent-text) !important;
    background: var(--tgm-lcm-accent) !important;
}
.tgm-lcm-player-repeat { position: relative; }
.tgm-lcm-player-repeat.is-active::after {
    content: "1";
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    color: currentColor; /* follows the icon → contrasts with the filled pill */
}

/* Transport play/pause — the brand heart mark (background image), with
   the baked-in "flow" animation. Swaps to the pause heart while playing.
   Theme-button styles nuked so GeneratePress hover-grey can't bleed in. */
.tgm-lcm-player-play-heart,
.tgm-lcm-player-play-heart:hover,
.tgm-lcm-player-play-heart:focus,
.tgm-lcm-player-play-heart:active {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
}

.tgm-lcm-player-play-heart {
    position: relative;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}
/* The heart is a real <img> (not a CSS background) so swapping play↔pause
   repaints reliably — no stale paint on the filtered/animated layer. */
.tgm-lcm-player-play-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none; /* clicks fall through to the button */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
}

/* While a track plays, the heart is "alive" — gentle heartbeat (on the img). */
.tgm-lcm-player-play-heart.is-playing .tgm-lcm-player-play-img {
    transform-origin: center;
    animation: tgm-lcm-heartbeat 1.5s ease-in-out infinite;
}

.tgm-lcm-player-play-heart:hover {
    transform: scale(1.07);
}

.tgm-lcm-player-play-heart:focus-visible {
    outline: 2px solid var(--tgm-lcm-accent) !important;
    outline-offset: 3px !important;
}

/* The v3 heart is static art; its motion is the CSS heartbeat
   (@keyframes tgm-lcm-heartbeat in theme.css) — continuous on the hero,
   on-hover on cards, and while-playing here on the transport. */

/* Waveform */
.tgm-lcm-player-wave {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tgm-lcm-player-waveform {
    width: 100%;
    /* wavesurfer sets internal height; height here is mostly a hint */
    height: 40px;
}

.tgm-lcm-player-times {
    display: flex;
    justify-content: space-between;
    font-family: var(--tgm-lcm-font-mono);
    font-size: 11px;
    color: var(--tgm-lcm-text-muted);
}

/* Volume */
.tgm-lcm-player-volume {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--tgm-lcm-text-muted);
}

.tgm-lcm-player-volume svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Fully custom range so the native (light) track doesn't show on the dark
   bar — thin dark track + accent thumb. */
.tgm-lcm-player-volume-input {
    -webkit-appearance: none !important; /* beat Kadence/WP form styling */
    appearance: none !important;
    width: 84px;
    height: 4px;
    background: transparent !important; /* the track pseudo carries the color */
    cursor: pointer;
    outline: none;
}
.tgm-lcm-player-volume-input::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: #4a4e57; /* light charcoal — muted, not white */
}
.tgm-lcm-player-volume-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -4.5px; /* center the 13px thumb on the 4px track */
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--tgm-lcm-accent);
    border: 0;
    cursor: pointer;
}
.tgm-lcm-player-volume-input::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: #4a4e57;
}
.tgm-lcm-player-volume-input::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--tgm-lcm-accent);
    border: 0;
    cursor: pointer;
}

/* Preview countdown + upgrade CTA */
.tgm-lcm-player-upgrade {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(212, 168, 74, 0.12);
    border: 1px solid rgba(212, 168, 74, 0.5);
    color: var(--tgm-lcm-accent);
    padding: 6px 12px;
    border-radius: var(--tgm-lcm-radius);
    font-size: 13px;
}

.tgm-lcm-player-upgrade[hidden] { display: none; }

.tgm-lcm-player-countdown {
    color: var(--tgm-lcm-accent);
    font-family: var(--tgm-lcm-font-mono);
}

.tgm-lcm-player-upgrade-link {
    color: var(--tgm-lcm-accent-text);
    background: var(--tgm-lcm-accent);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--tgm-lcm-radius-sm);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

.tgm-lcm-player-upgrade-link:hover {
    background: var(--tgm-lcm-accent-hover);
    color: var(--tgm-lcm-accent-text);
}

.tgm-lcm-player-close {
    color: var(--tgm-lcm-text-muted);
}

/* ── No-preview gate (gated visitor tapped a track with no preview) ──
   An in-flow flex item (order 3) that grows to fill the row between the title
   and the close button, so the message + CTA sit centered like the mockup. */
.tgm-lcm-player-gate {
    flex: 1 1 auto;
    order: 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 2px 8px;
}
.tgm-lcm-player-gate[hidden] { display: none; }

.tgm-lcm-player-gate-msg {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--tgm-lcm-text);
}

.tgm-lcm-player-gate-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.tgm-lcm-player-gate-cta {
    display: inline-block;
    background: #fffdf7;
    color: #2c2410;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 28px;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.05s ease;
}
.tgm-lcm-player-gate-cta:hover { background: #fff; }
.tgm-lcm-player-gate-cta:active { transform: translateY(1px); }

.tgm-lcm-player-gate-login {
    color: var(--tgm-lcm-text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.tgm-lcm-player-gate-login[hidden] { display: none; }
.tgm-lcm-player-gate-login:hover { text-decoration: underline; }

/* When gated, the transport/wave/volume/rating have nothing to act on — hide
   them so the message + CTA take center stage (matches the approved mockup). */
.tgm-lcm-player.is-gated .tgm-lcm-player-wave,
.tgm-lcm-player.is-gated .tgm-lcm-player-volume,
.tgm-lcm-player.is-gated .tgm-lcm-player-controls,
.tgm-lcm-player.is-gated .tgm-lcm-player-upgrade,
.tgm-lcm-player.is-gated .tgm-lcm-player-rating,
.tgm-lcm-player.is-gated .tgm-lcm-player-status,
.tgm-lcm-player.is-gated .tgm-lcm-player-art { display: none; }

/* Hidden helper for [hidden] attribute when the shell is invisible */
.tgm-lcm-player[hidden] { display: none; }

/* SPA-lite loading state — cursor flips to loading during the fetch
   so the user knows their click registered while we swap content. */
body.tgm-lcm-spa-loading,
body.tgm-lcm-spa-loading * {
    cursor: progress !important;
}

/* Body bottom-padding (so neither the app bar nor the open player covers
   page-bottom content / the footer) now lives in theme.css and is driven by a
   JS-toggled `body.tgm-lcm-player-open` class — the old `:has()` rule here was
   ignored by Firefox/Waterfox, which is why the player covered the footer there. */

/* Responsive — narrow viewports drop the volume + upgrade chips,
   keep transport + waveform front and center. */
/* Phone: stack like the mockup — title + rating, then waveform, then the
   transport row centered. Volume hides (OS handles it); close goes corner. */
@media (max-width: 680px) {
    .tgm-lcm-player-inner {
        flex-wrap: wrap;
        gap: 8px 12px;
        padding: 10px 12px 12px;
    }
    .tgm-lcm-player-meta     { flex: 1 1 100%; order: 1; padding-right: 38px; }
    .tgm-lcm-player-wave     { flex: 1 1 100%; order: 2; }
    .tgm-lcm-player-controls { flex: 1 1 100%; order: 3; justify-content: center; gap: 18px; }
    .tgm-lcm-player-volume   { display: none; }
    .tgm-lcm-player-art      { display: none; } /* mockup keeps mobile thumb-less */
    .tgm-lcm-player-controls { margin: 0; }
    .tgm-lcm-player-close    { position: absolute; top: 8px; right: 10px; order: 0; }
}