:root {
  --plyr-color-main: #266434;
}

.zf-audio-wrapper {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    padding: 8px 10px;
    border-radius: 10px;
    margin: 15px 0;
    position: relative;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transition: all .25s ease-in-out;
}

/* HEADER */

.zf-audio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 10px;
}

.zf-audio-title {
    font-size: 16px;
    opacity: .9;
}

/* CLOSE BUTTON — hidden by default */

.zf-audio-wrapper .zf-audio-close {
    display: none !important;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    opacity: .6;
    transition: .2s;
    line-height: 1;
}

.zf-audio-wrapper .zf-audio-close:hover {
    opacity: 1;
}

/* SHOW CLOSE ONLY IN PiP MODE */

.zf-audio-wrapper.sticky .zf-audio-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* PiP MODE */

.zf-audio-wrapper.sticky {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 380px;
    max-width: 95vw;
    overflow: hidden;
    z-index: 9999;
    animation: fadeIn .3s ease-in-out;
}

/* SCROLL FIX */

.zf-audio-wrapper.sticky .zf-audio-container {
    max-height: 230px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* PLYR FIX */

.zf-audio-wrapper.sticky .plyr {
    width: 100% !important;
    max-width: 100% !important;
}

/* CONTROLS ROW FIX */

.zf-audio-wrapper.sticky .plyr__controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* === TIMELINE CENTER FIX === */
.zf-audio-wrapper.sticky .plyr__progress {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* TIME LABEL FIX */

.zf-audio-wrapper.sticky .plyr__time {
    font-size: 12px;
    opacity: .8;
}

/* VOLUME SLIDER */

.zf-audio-wrapper.sticky .plyr__volume {
    padding: 0 4px !important;
    display: flex;
    align-items: center;
}

.zf-audio-wrapper.sticky .plyr__volume input[type="range"] {
    max-width: 60px !important;
    height: 4px !important;
    border-radius: 3px !important;
    overflow: hidden;
}

/* === REMOVE BUTTON BLUE HIGHLIGHT === */
.zf-audio-wrapper .plyr button:focus,
.zf-audio-wrapper .plyr button:active,
.zf-audio-wrapper .plyr button:hover,
.zf-audio-wrapper .plyr__control:focus,
.zf-audio-wrapper .plyr__control:active,
.zf-audio-wrapper .plyr__control:hover {
    outline: none !important;
    box-shadow: none !important;
}

/* === ANDROID TAP HIGHLIGHT FIX (only inside audio) === */
.zf-audio-wrapper .plyr * {
    -webkit-tap-highlight-color: transparent !important;
}

/* === THICKER TIMELINE === */
.plyr__progress input[type="range"] {
    height: 6px !important;
    border-radius: 4px !important;
}

/* ANIMATION */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === MOBILE PiP FIX === */

@media (max-width: 768px) {

    .zf-audio-wrapper.sticky {
        left: 50% !important;
        right: auto !important;
        bottom: 12px !important;
        transform: translateX(-50%) !important;
        width: 92vw !important;
        max-width: 92vw !important;
        border-radius: 12px;
    }

    .zf-audio-wrapper.sticky .zf-audio-container {
        padding: 6px 8px;
    }

    .zf-audio-wrapper.sticky .plyr__controls {
        gap: 4px;
    }

    .zf-audio-wrapper.sticky .plyr__volume input[type="range"] {
        max-width: 80px !important;
    }
}

/* === iPhone SAFE AREA notch fix === */

@supports(padding: max(0px)) {
    .zf-audio-wrapper.sticky {
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }
}

/* === Android overscroll bounce fix === */

body {
    overscroll-behavior-y: contain;
}