:root{
  /*buttons - cores e estilos*/
  --wa-button-color: #4d4c4c;
  --wa-button-hover-color: #313131;
  --wa-button-icon-color: #dddddd;
  --wa-button-hover-icon-color: #dddddd;
  
  /*container do sticky player - cores e estilos*/
  --wa-container-color: #000000;
  --wa-container-border-color: #2e2e2e;
  --wa-container-border-width: 0px;
  --wa-container-border-style: none;
  --wa-container-border-radius: 0px;
  --wa-container-padding: 10px;
  --wa-container-box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
  --wa-container-transition: transform 0.3s ease-in-out;
  --wa-container-gap: 10px;   
  
  /*waveform - cores e estilos*/  
  --wa-waveform-height: 40px; 
  --wa-waveform-width: 100%;
  
 /*container dos componentes do player - cores e estilos*/
  --wa-container-components-width: 100%;
  --wa-container-components-padding: 10px; 
}

/* Main CSS styles for Waverse Audio Player - Frontend */



/* Styles for the sticky player container */
.waverse-sticky-player-container {
    position: fixed;
    justify-content: center;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    justify-content: center;
    background-color: var(--wa-container-color);
    padding: var(--wa-container-padding);
    box-shadow: var(--wa-container-box-shadow);
    opacity: 1;
    transition: transform var(--wa-container-transition), opacity var(--wa-container-transition);

    /* border customization */
    border-width: var(--wa-container-border-width);
    border-style: var(--wa-container-border-style);
    border-radius: var(--wa-container-border-radius);
    border-color: transparent;
   
}

.waverse-sticky-player-container.is-hidden {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
}

.waverse-sticky-player-container .player-container {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    max-width: var(--wa-container-components-width);
}

.waverse-sticky-player-container .player-controls {


    gap: 10px;
}

.waverse-sticky-player-container .player {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0;
}

.waverse-sticky-player-container .player-volume {


    gap: 10px;
    position: relative;
}

/* Waveform specific container (ensure it's targeted by JS) */
#wa-frontend-waveform {
    display: grid;
    place-items: inline-flex;
    flex-grow: 1;
    width: var(--wa-waveform-width);


    height: var(--wa-waveform-height); /* Default height, can be overridden by JS options */
    margin: 0 8px;
    background-color: transparent; /* color of waveform container */
    overflow: hidden; /* keep bars inside */
}

.wa-player-minimize {
    position: absolute;
    top: -20px;
    width: 15px;
    height: 15px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: background 0.2s;
    z-index: 20;
}
.wa-player-minimize:hover { background: rgba(255,255,255,0.35); }
.waverse-sticky-player-container.is-minimized { transform: translateY(100%); }
.waverse-sticky-player-container.is-minimized .player-container { display: none; }


#wa-frontend-waveform canvas {
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;

}

.waverse-sticky-player-container .player-button {
    background: var(--wa-button-color);
    border-radius: 25px;
    border: 0px solid transparent;
    color: var(--wa-button-icon-color);
    width: 32px;
    height: 32px;
    cursor: pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.waverse-sticky-player-container .player-button:hover {
    color: var(--wa-button-hover-icon-color);
    background: var(--wa-button-hover-color);
    border: none;
}

.waverse-sticky-player-container .player-button.is-hidden {
    display: none;
}

/* Support both SVG (.icon-volume-*) and Dashicons */
.player-button-mute .icon-volume-off,
.player-button-mute .dashicons-controls-volumeoff{display:none!important;}
.player-button-mute.is-muted .icon-volume-on,
.player-button-mute.is-muted .dashicons-controls-volumeon{display:none!important;}
.player-button-mute.is-muted .icon-volume-off,
.player-button-mute.is-muted .dashicons-controls-volumeoff{display:inline-flex!important;}

/* Hide unused Stop button for now */
.waverse-sticky-player-container .player-button-stop{display:none;}

.wa-icon{display:inline-flex;align-items:center;justify-content:center;}
.wa-icon svg{display:block;fill:currentColor;width:1em;height:1em;}
.waverse-trigger-player{min-width:40px;justify-content:center;cursor:pointer;user-select:none;}
.waverse-trigger-player.is-disabled{cursor:not-allowed;opacity:.5;pointer-events:none;}
.waverse-trigger-player .icon-pause{display:none;}
.waverse-trigger-player.is-playing .icon-play{display:none;}
.waverse-trigger-player.is-playing .icon-pause{display:inline-flex;}

/* ===== Loading State para botões de Play ===== */
.waverse-trigger-player .icon-loading{display:none;}
.waverse-trigger-player.is-loading .icon-play,
.waverse-trigger-player.is-loading .icon-pause{display:none;}
.waverse-trigger-player.is-loading .icon-loading{display:inline-flex;}

/* Spinner de carregamento simples */
@keyframes wa-spinner-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.wa-spinner {
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  border-top: 2px solid #ffffff;
  width: 1em;
  height: 1em;
  animation: wa-spinner-rotate 1s linear infinite;
}

/* ===== Custom WA Volume Slider (vertical) ===== */
.wa-volume-slider{
  position:absolute;
  bottom:110%; /* above mute button */
  left:50%;
  transform:translateX(-50%);
  width:32px;            /* wider hit area */
  height:100px;           /* taller slider */
  display:flex;
  align-items:center;
  padding:6px 12px;       /* space around track */
  box-sizing:border-box;
  background:var(--wa-button-hover-color,rgba(0,0,0,.9));
  border-radius:5px;
}
.wa-volume-track{
  position:relative;
  width:6px;              /* thinner track */
  height:100%;
  margin:0 auto;
  background:var(--wa-slider-track,#808080);
  border-radius:3px;
  cursor:pointer;
}
.wa-volume-track::before{
  content:'';
  position:absolute;
  inset:-10px; /* 10px padding around */
}
.wa-volume-fill{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  background:var(--wa-slider-fill,#ffffff);
  border-radius:inherit;
}
.wa-volume-handle{
  position:absolute;
  left:50%;
  transform:translate(-50%,50%);
  width:14px;
  height:14px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 3px rgba(0,0,0,.5);
}
.wa-volume-slider{
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
}
.player-volume.is-open .wa-volume-slider{
  opacity:1;
}
.wa-volume-track, .wa-volume-handle{
  pointer-events:auto;
}


/* ============== Waverse Audio Post Cards ================ */

/* Ensure image link sits below overlay but above base */
.waverse-post-card a{
  position:relative;
  z-index:0;
  display:block;
}

.waverse-post-card{
  border-radius:var(--wa-img-radius,0);
  overflow:hidden;
  position:relative;
}
/* Overlay removido */


.waverse-post-btn-wrap{
  pointer-events:none;
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2; /* keep overlay above image */
  }

.waverse-post-card.has-overlay{
  position:relative;
}
.waverse-trigger-player{
  position:relative;
  pointer-events:auto;
}
.waverse-trigger-player::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  transition:background-color .3s, opacity .3s;
}