/* Kasutame Elementori globaalseid muutujaid */
:root {
    --xfm-primary: var(--e-global-color-primary, #A802F0);
    --xfm-secondary: var(--e-global-color-secondary, #6E3AFF);
    --xfm-text: var(--e-global-color-text, #2D1E78);
    --xfm-bg-glass: rgba(255, 255, 255, 0.65);
    --xfm-border: rgba(255, 255, 255, 0.4);
    --xfm-gradient: linear-gradient(135deg, var(--xfm-primary) 0%, var(--xfm-secondary) 100%);

    --xfm-font-head: var(--e-global-typography-secondary-font-family, 'Poppins'), sans-serif;
    --xfm-font-body: var(--e-global-typography-text-font-family, 'Rubik'), sans-serif;
}

/* Hide volume slider on iOS (iOS doesn't allow programmatic volume control anyway) */
@supports (-webkit-touch-callout: none) {
    .xfm-volume-inline {
        display: none !important;
    }
}

.xfm-archive-wrapper {
    max-width: 100%;
    margin: 0 auto;
    font-family: var(--xfm-font-body);
    color: var(--xfm-text);
    /* Define Container */
    container-type: inline-size;
    container-name: xfm-main;
}

.xfm-archive-wrapper * {
    box-sizing: border-box;
}

/* --- Player Card --- */
.xfm-player-card {
    display: grid;
    display: grid;
    grid-template-columns: minmax(8.125rem, 17.5rem) 1fr;
    /* 130px -> 8.125rem, 280px -> 17.5rem */
    /* Allow cover art to shrink more (down to 130px) */
    gap: 2rem;
    padding: 2rem;
    border-radius: 1.5rem;
    background: var(--xfm-bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--xfm-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
    align-items: center;
    /* GPU optimization for blur */
    transform: translateZ(0);
    will-change: transform;
}

.xfm-cover-art {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.xfm-cover-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xfm-player-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Increased specificity to ensure margins are zero */
#xfm-archive-wrapper .xfm-player-title {
    font-family: var(--xfm-font-head);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--xfm-text);
}

#xfm-archive-wrapper .xfm-player-host {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--xfm-text);
    opacity: 0.6;
    margin: 0 !important;
}

.xfm-player-date {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--xfm-text);
    opacity: 0.6;
    margin-bottom: 1rem;
}

/* ============================================
   CUSTOM PROGRESS BAR - Knob-less / Filled style
   ============================================ */
.xfm-progress-container {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.xfm-progress-container span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--xfm-text);
    opacity: 0.6;
    min-width: 42px;
    font-variant-numeric: tabular-nums;
}

#xfm-cur-time {
    text-align: right;
}

#xfm-dur-time {
    text-align: left;
}

/* Common Slider Style */
.xfm-slider,
.xfm-slider-mini {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: rgba(45, 30, 120, 0.1);
    cursor: pointer;
    outline: none;
    position: relative;
    /* Gradient handled by JS for progress fill */
    background-image: linear-gradient(90deg, var(--xfm-primary), var(--xfm-secondary));
    background-size: 0% 100%;
    background-repeat: no-repeat;
}

.xfm-slider {
    flex-grow: 1;
}

.xfm-slider-mini {
    width: 80px;
}

/* Thumb - invisible but clickable area */
.xfm-slider::-webkit-slider-thumb,
.xfm-slider-mini::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    /* Center thumb vertically relative to track height (6px) */
    margin-top: -3px;
}

/* Firefox Thumb */
.xfm-slider::-moz-range-thumb,
.xfm-slider-mini::-moz-range-thumb {
    height: 12px;
    width: 12px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

/* Firefox Track (fallback if JS gradient doesn't work perfectly, but we rely on JS) */
.xfm-slider::-moz-range-track,
.xfm-slider-mini::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: transparent;
    /* JS handles background on input */
}

/* ============================================
   CONTROLS
   ============================================ */
.xfm-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    /* Default: ALLOW wrap (mobile) */
    justify-content: flex-start;
    justify-content: flex-start;
    min-width: min-content;
}

/* Desktop/Tablet: Prevent wrapping - using Container Query */
@container xfm-main (min-width: 40.1rem) {
    .xfm-controls {
        flex-wrap: nowrap;
    }
}

.xfm-btn-control,
.xfm-btn-main {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.xfm-btn-control {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(45, 30, 120, 0.08);
}

.xfm-btn-control svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: var(--xfm-text);
    transition: all 0.2s ease;
}

.xfm-btn-control:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.08);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.xfm-btn-control:hover svg {
    fill: var(--xfm-primary);
}

.xfm-btn-control:active {
    transform: scale(0.95);
}

/* Main Play/Pause Button - vähem varju, parem värv */
.xfm-btn-main {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--xfm-gradient);
    box-shadow: 0 4px 15px rgba(168, 2, 240, 0.25);
}

.xfm-btn-main:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(168, 2, 240, 0.35);
}

.xfm-btn-main:active {
    transform: scale(0.95);
}

.xfm-btn-main svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: #fff;
    margin-left: 3px;
}

.xfm-btn-main .icon-pause {
    margin-left: 0;
}

/* ============================================
   VOLUME - Inline with controls
   ============================================ */
.xfm-volume-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding-left: 1rem;
    border-left: 1px solid rgba(45, 30, 120, 0.08);
}

.xfm-btn-volume {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.xfm-btn-volume svg {
    fill: var(--xfm-text);
    opacity: 0.5;
    transition: all 0.2s ease;
}

.xfm-btn-volume:hover {
    background: rgba(255, 255, 255, 0.5);
}

.xfm-btn-volume:hover svg {
    opacity: 1;
    fill: var(--xfm-primary);
}



/* ============================================
   PLAYLIST
   ============================================ */
.xfm-list-container {
    background: var(--xfm-bg-glass);
    border-radius: 1.5rem;
    border: 1px solid var(--xfm-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    /* GPU optimization for blur */
    transform: translateZ(0);
    will-change: transform;
}

.xfm-list-header {
    padding: 2rem;
    /* Unified desktop padding (matches card) */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.xfm-list-header h3 {
    font-family: var(--xfm-font-head);
    font-size: 1.4rem;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    margin: 0;
    color: var(--xfm-text);
}

.xfm-filters {
    display: flex;
    gap: 1rem;
}

.xfm-filters select {
    padding: 0.6rem 2.5rem 0.6rem 1rem;
    border-radius: 0.8rem;
    border: 1px solid rgba(45, 30, 120, 0.15);
    background: rgba(255, 255, 255, 0.8);
    color: var(--xfm-text);
    font-family: var(--xfm-font-body);
    font-weight: 500;
    cursor: pointer;
    outline: none;
    /* Custom dropdown arrow positioning */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%232D1E78'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 16px;
}

.xfm-playlist {
    max-height: 600px;
    overflow-y: auto;
}

.xfm-track {
    display: grid;
    grid-template-columns: 3.5rem 1fr auto;
    /* Last col auto sizing */
    gap: 0.8rem;
    padding: 1rem 2rem;
    /* Unified desktop padding (matches card) */
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    cursor: pointer;
    transition: background 0.2s;
}

.xfm-track:hover {
    background: rgba(255, 255, 255, 0.4);
}

.xfm-track.active {
    background: rgba(255, 255, 255, 0.7);
}

.xfm-track.hidden {
    display: none;
}

.xfm-track-img {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.8rem;
    overflow: hidden;
    background: #fff;
}

.xfm-track-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xfm-track-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Allow shrinking */
    overflow: hidden;
}

.xfm-track-meta {
    font-size: 0.85rem;
    opacity: 0.7;
}

.xfm-track-title {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xfm-track-show {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--xfm-primary);
    color: var(--xfm-primary);
}

.xfm-track-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Main cover transition */
#xfm-main-cover {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

/* Track Play Button */
.xfm-track-play-btn {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.xfm-track-play-btn svg {
    width: 1.6rem !important;
    height: 1.6rem !important;
    min-width: 1.6rem;
    /* Safety */
    min-height: 1.6rem;
    /* Safety */
    fill: var(--xfm-text);
}

.xfm-track-play-btn .track-icon-play {
    margin-left: 2px;
}

.xfm-track-play-btn .track-icon-pause {
    margin-left: 0;
}

.xfm-track-play-btn:hover {
    background: var(--xfm-primary);
    border-color: transparent;
    transform: scale(1.08);
    box-shadow: 0 3px 10px rgba(168, 2, 240, 0.25);
}

.xfm-track-play-btn:hover svg {
    fill: #fff;
}

/* Share (Jaga) Button */
.xfm-share-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--xfm-primary);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    outline: none;
}

.xfm-share-btn svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: var(--xfm-primary);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.xfm-share-btn:hover {
    background: rgba(168, 2, 240, 0.08);
}

.xfm-share-btn.copied:hover {
    background: rgba(45, 30, 120, 0.08);
}

.xfm-share-btn:hover svg {
    transform: scale(1.15);
}

.xfm-share-btn.copied {
    color: #2D1E78;
    background: rgba(45, 30, 120, 0.08);
    outline: none;
}

.xfm-share-btn.copied svg {
    fill: #2D1E78;
}

.xfm-track.active .xfm-track-play-btn {
    background: var(--xfm-primary);
    border-color: transparent;
}

.xfm-track.active .xfm-track-play-btn svg {
    fill: #fff;
}

/* ============================================
   STICKY PLAYER
   ============================================ */
.xfm-sticky-player {
    position: fixed;
    top: 3.6rem;
    /* Header height offset */
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 9999;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-150%);
    transition: transform 0.3s ease-in-out;
    display: none;
}

/* Show logic handled by JS class 'visible' */
.xfm-sticky-player.visible {
    transform: translateY(0);
}

.xfm-sticky-progress {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.05);
}

#xfm-sticky-bar {
    height: 100%;
    width: 0%;
    background: var(--xfm-gradient);
    transition: width 0.1s linear;
}

.xfm-sticky-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    gap: 0.5rem;
}

.xfm-sticky-left {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    overflow: hidden;
    flex-grow: 1;
    /* Take available space */
}

#xfm-sticky-cover {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    transition: opacity 0.3s ease;
}

.xfm-sticky-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-right: 0.5rem;
}

#xfm-sticky-title {
    font-family: var(--xfm-font-head);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--xfm-text);
}

/* Sticky Controls Container */
.xfm-sticky-controls {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-shrink: 0;
}

/* Main Sticky Play Button */
.xfm-btn-sticky {
    background: none;
    border: none;
    cursor: pointer;
    width: 44px;
    /* Increased size */
    height: 44px;
    /* Increased size */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--xfm-gradient);
    color: #fff;
    flex-shrink: 0;
    padding: 0;
}

.xfm-btn-sticky svg {
    width: 24px;
    /* Increased icon size */
    height: 24px;
    /* Increased icon size */
    fill: #fff;
}

.xfm-btn-sticky .icon-play {
    margin-left: 2px;
}

/* Mini Buttons (Next/Prev) */
.xfm-btn-sticky-mini {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--xfm-primary);
    opacity: 0.8;
}

.xfm-btn-sticky-mini svg {
    width: 1.5rem;
    /* 24px */
    height: 1.5rem;
    /* 24px */
    fill: currentColor;
}

/* Hide sticky on desktop if preferred, or show only when scrolled. 
   User asked "telos" (on phone), so we can limit to max-width */
@media (min-width: 769px) {
    .xfm-sticky-player {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .xfm-sticky-player {
        display: block;
        /* But still hidden by transform */
    }
}

@media (max-width: 768px) {
    .xfm-sticky-player {
        display: block;
        /* But still hidden by transform */
    }
}

/* LAYOUT: Tablet/Mobile (Container < 640px / 40rem) */
@container xfm-main (max-width: 40rem) {
    .xfm-player-card {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
        padding: 1.5rem;
        /* Unified padding @ 768px */
        border-radius: 1.2rem;
        margin-bottom: 1rem;
        /* Reduced margin on mobile */
    }

    .xfm-cover-art {
        width: 100%;
        max-width: 12.5rem;
        /* 200px */
        /* Responsive cover art */
        aspect-ratio: 1/1;
        margin: 0 auto;
        border-radius: 1rem;
    }

    .xfm-controls {
        justify-content: center;
    }

    .xfm-volume-inline {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }

    .xfm-list-header {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 1.5rem;
        /* Align with card padding */
    }

    .xfm-filters {
        flex-direction: column;
    }

    .xfm-list-container {
        border-radius: 1.2rem;
    }

    .xfm-track {
        padding: 0.8rem 1.5rem;
        /* Align with card padding */
        grid-template-columns: 3rem 1fr auto;
        /* Last col auto */
        gap: 0.8rem;
    }

    .xfm-track-action {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .xfm-track-img {
        width: 3rem;
        height: 3rem;
    }

    .xfm-player-title {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
}



/* Extra small screens (Container < 420px / 26.25rem) */
@container xfm-main (max-width: 26.25rem) {
    .xfm-player-card {
        padding: 1rem;
        /* Unified padding @ 420px */
        gap: 1rem;
        border-radius: 1rem;
    }

    .xfm-cover-art {
        max-width: 9.375rem;
        /* 150px */
        /* Responsive cover art */
    }

    .xfm-player-title {
        font-size: 1.1rem;
    }

    .xfm-btn-main {
        width: 3.25rem;
        /* 52px */
        height: 3.25rem;
    }

    .xfm-btn-control {
        width: 2.25rem;
        /* ~36px */
        height: 2.25rem;
    }

    .xfm-list-container {
        border-radius: 1rem;
    }

    .xfm-list-header {
        padding: 0.8rem 1rem;
        /* Align with card padding */
    }

    .xfm-list-header h3 {
        font-size: 1.1rem;
    }

    .xfm-track {
        padding: 0.6rem 1rem;
        /* Align with card padding */
        grid-template-columns: 2.5rem 1fr auto;
        /* Last col auto */
        gap: 0.5rem;
    }

    .xfm-track-action {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .xfm-track-img {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.5rem;
    }

    .xfm-track-title {
        font-size: 0.9rem;
    }

    .xfm-track-meta {
        font-size: 0.75rem;
    }

    .xfm-track-play-btn {
        width: 2.2rem;
        height: 2.2rem;
    }

    .xfm-track-play-btn svg {
        width: 1.1rem !important;
        height: 1.1rem !important;
        min-width: 1.1rem;
        min-height: 1.1rem;
    }

    .xfm-filters select {
        padding: 0.5rem 2rem 0.5rem 0.8rem;
        font-size: 0.85rem;
    }
}



/* Extremely small screens (Container < 360px / 22.5rem) */
@container xfm-main (max-width: 22.5rem) {
    .xfm-player-card {
        padding: 0.8rem;
        gap: 0.8rem;
        border-radius: 0.8rem;
    }

    .xfm-cover-art {
        width: 7.5rem;
        /* 120px */
    }

    .xfm-player-title {
        font-size: 1rem;
    }

    .xfm-btn-main {
        width: 3rem;
        /* 48px */
        height: 3rem;
        min-width: 3rem;
        /* Prevent squashing */
        min-height: 3rem;
    }

    .xfm-btn-main svg {
        width: 1.625rem;
        /* 26px */
        height: 1.625rem;
    }

    .xfm-btn-control {
        width: 2rem;
        /* 32px */
        height: 2rem;
    }

    .xfm-btn-control svg {
        width: 1.25rem;
        /* 20px */
        height: 1.25rem;
    }

    .xfm-progress-container span {
        font-size: 0.7rem;
        min-width: 2.25rem;
        /* 36px */
    }

    .xfm-list-container {
        border-radius: 0.8rem;
    }

    .xfm-list-header {
        padding: 0.6rem;
    }

    .xfm-list-header h3 {
        font-size: 1rem;
    }

    .xfm-track {
        padding: 0.5rem 0.8rem;
        /* Align with card padding */
        grid-template-columns: 2.2rem 1fr auto;
        /* Last col auto */
        gap: 0.4rem;
    }

    .xfm-track-action {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .xfm-track-img {
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 0.4rem;
    }

    .xfm-track-title {
        font-size: 0.85rem;
    }

    .xfm-track-meta {
        font-size: 0.7rem;
    }

    .xfm-track-play-btn {
        width: 1.8rem;
        height: 1.8rem;
        min-width: 1.8rem;
        /* Fix oval shape */
        min-height: 1.8rem;
        /* Fix oval shape */
    }

    .xfm-track-play-btn svg {
        width: 0.9rem !important;
        height: 0.9rem !important;
        min-width: 0.9rem;
        min-height: 0.9rem;
    }

    .xfm-filters select {
        padding: 0.4rem 1.8rem 0.4rem 0.6rem;
        font-size: 0.8rem;
        background-position: right 0.5rem center;
        background-size: 14px;
    }

    .xfm-controls {
        gap: 0.5rem;
    }

    .xfm-volume-inline {
        display: none;
        /* Hide volume on very small screens */
    }
}

/* ============================================
   BUTTON STYLES (Using ID for maximum specificity)
   ============================================ */

/* --- Main Player Card Buttons --- */

/* Control Buttons (Prev/Next) - Default and Hover */
#xfm-archive-wrapper .xfm-btn-control {
    background-color: rgba(255, 255, 255, 0.5) !important;
    color: var(--xfm-text) !important;
}

#xfm-archive-wrapper .xfm-btn-control:hover,
#xfm-archive-wrapper .xfm-btn-control:focus {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: var(--xfm-primary) !important;
    transform: scale(1.05);
}

/* Main Play/Pause Button - Default and Hover */
#xfm-archive-wrapper .xfm-btn-main {
    background-color: #fff !important;
    color: var(--xfm-text) !important;
}

#xfm-archive-wrapper .xfm-btn-main:hover,
#xfm-archive-wrapper .xfm-btn-main:focus {
    background-color: #fff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    transform: scale(1.05);
}

/* Volume Button */
#xfm-archive-wrapper .xfm-btn-volume:hover,
#xfm-archive-wrapper .xfm-btn-volume:focus {
    color: var(--xfm-primary) !important;
    background-color: transparent !important;
}

/* --- Track List Play Buttons --- */
#xfm-archive-wrapper .xfm-track-play-btn {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

#xfm-archive-wrapper .xfm-track-play-btn:hover {
    background-color: var(--xfm-primary) !important;
    color: #fff !important;
}

#xfm-archive-wrapper .xfm-track.active .xfm-track-play-btn {
    background-color: var(--xfm-primary) !important;
}

#xfm-archive-wrapper .xfm-track.active .xfm-track-play-btn svg,
#xfm-archive-wrapper .xfm-track-play-btn:hover svg {
    fill: #fff !important;
}

/* --- Sticky Player Buttons --- */

/* Sticky Play Button - Always gradient */
#xfm-archive-wrapper .xfm-btn-sticky {
    background-image: var(--xfm-gradient) !important;
    background-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(168, 2, 240, 0.3) !important;
}

#xfm-archive-wrapper .xfm-btn-sticky:hover,
#xfm-archive-wrapper .xfm-btn-sticky:focus,
#xfm-archive-wrapper .xfm-btn-sticky:active {
    background-image: var(--xfm-gradient) !important;
    background-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(168, 2, 240, 0.4) !important;
    transform: scale(1.05);
}

/* Sticky Mini Buttons (Prev/Next) - Muted by default, bright on hover */
#xfm-archive-wrapper .xfm-btn-sticky-mini {
    color: var(--xfm-secondary) !important;
    opacity: 0.6 !important;
    background-color: transparent !important;
}

#xfm-archive-wrapper .xfm-btn-sticky-mini:hover,
#xfm-archive-wrapper .xfm-btn-sticky-mini:focus {
    color: var(--xfm-primary) !important;
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
    transform: scale(1.15);
}

/* ============================================
   RESTORE & FIX SPECIFIC BUTTONS
   ============================================ */

/* Track Play Button (List) */
.xfm-archive-wrapper .xfm-track-play-btn:hover,
.xfm-archive-wrapper .xfm-track.active .xfm-track-play-btn {
    background-color: var(--xfm-primary) !important;
    color: #fff !important;
}

/* Sticky Play Button - Always Gradient */
.xfm-archive-wrapper .xfm-btn-sticky,
.xfm-archive-wrapper .xfm-btn-sticky:hover,
.xfm-archive-wrapper .xfm-btn-sticky:focus,
.xfm-archive-wrapper .xfm-btn-sticky:active {
    background-image: var(--xfm-gradient) !important;
    background-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(168, 2, 240, 0.3) !important;
}

/* Sticky Mini Buttons (Next/Prev) 
   User asked to swap colors. 
   Let's make them clearly Primary by default, and slightly different on hover.
*/
.xfm-archive-wrapper .xfm-btn-sticky-mini {
    color: var(--xfm-primary) !important;
    opacity: 1 !important;
    /* Full visibility by default */
}

.xfm-archive-wrapper .xfm-btn-sticky-mini:hover,
.xfm-archive-wrapper .xfm-btn-sticky-mini:focus {
    color: var(--xfm-secondary) !important;
    /* Change color on hover */
    background-color: rgba(0, 0, 0, 0.05) !important;
    /* Subtle bg on hover */
    transform: scale(1.1);
}

/* Main Play/Pause Button (Card) */
.xfm-archive-wrapper .xfm-play-pause-btn {
    background-color: #fff !important;
}

.xfm-archive-wrapper .xfm-play-pause-btn:hover,
.xfm-archive-wrapper .xfm-play-pause-btn:focus {
    background-color: #fff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    transform: scale(1.05);
}

/* Control Buttons (Card Prev/Next) */
.xfm-archive-wrapper .xfm-control-btn:hover,
.xfm-archive-wrapper .xfm-control-btn:focus {
    background-color: rgba(255, 255, 255, 0.8) !important;
    color: var(--xfm-primary) !important;
}

/* 
   Re-apply our specific styles with even higher specificity or just same level but defined AFTER.
   Using !important here effectively overrides the reset above because they are both specific, 
   but specific class usually wins or order matters.
*/

/* Play buttons (Track & Main) */
.xfm-archive-wrapper .xfm-track-play-btn:hover,
.xfm-archive-wrapper .xfm-track.active .xfm-track-play-btn {
    background-color: var(--xfm-primary) !important;
    color: #fff !important;
    background-image: none !important;
}

/* Sticky Play Button */
.xfm-archive-wrapper .xfm-btn-sticky,
.xfm-archive-wrapper .xfm-btn-sticky:hover,
.xfm-archive-wrapper .xfm-btn-sticky:focus {
    background-image: var(--xfm-gradient) !important;
    background-color: transparent !important;
    color: #fff !important;
}

/* Sticky Mini Buttons */
.xfm-archive-wrapper .xfm-btn-sticky-mini:hover,
.xfm-archive-wrapper .xfm-btn-sticky-mini:focus {
    background-color: transparent !important;
    color: var(--xfm-primary) !important;
    box-shadow: none !important;
}

/* Main Play/Pause Button */
.xfm-archive-wrapper .xfm-play-pause-btn:hover,
.xfm-archive-wrapper .xfm-play-pause-btn:focus {
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Control Buttons (Prev/Next) */
.xfm-archive-wrapper .xfm-control-btn:hover,
.xfm-archive-wrapper .xfm-control-btn:focus {
    background-color: rgba(255, 255, 255, 0.8) !important;
    background-image: none !important;
    color: var(--xfm-primary) !important;
}


/* ============================================
   JAGA NUPU PARANDUS (Globaalse #c36 ülekirjutamine)
   ============================================ */

/* Tühistame globaalse hover/focus stiili ja anname õige tausta ning teksti värvi */
.xfm-archive-wrapper button.xfm-share-btn:hover,
.xfm-archive-wrapper button.xfm-share-btn:focus {
    /* Kui soovid õrna lillat tausta, kasuta seda: */
    background-color: rgba(168, 2, 240, 0.08) !important; 
    
    /* Kui soovid selle asemel täiesti lumivalget tausta, 
       kustuta ülemine rida ja eemalda kommentaarid alt: */
    /* background-color: #ffffff !important; */
    
    color: var(--xfm-primary) !important;
    text-decoration: none !important;
}

/* Veendume, et ka ikoon (SVG) muudab hoverides värvi õigeks */
.xfm-archive-wrapper button.xfm-share-btn:hover svg,
.xfm-archive-wrapper button.xfm-share-btn:focus svg {
    fill: var(--xfm-primary) !important;
}