/* assets/pp-frontend.css */
.wppp-browser{ display:grid; gap:14px; }
.wppp-top{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.wppp-top label{ display:flex; align-items:center; gap:8px; }
.wppp-episodes{ border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px; background:var(--pp-list-bg, var(--pp-bg)); color:var(--pp-list-fg, var(--pp-fg)); }
.wppp-list .item{ padding:10px; border-bottom:1px solid rgba(255,255,255,.08); cursor:pointer; display:flex; justify-content:space-between; gap:10px; }
.wppp-list .item:last-child{ border-bottom:none; }
.wppp-list .item:hover{ background:color-mix(in srgb, var(--pp-list-fg, #ffffff) 6%, transparent); }
.wppp-list .title{ font-weight:500; }
.wppp-list .meta{ opacity:.7; color:var(--pp-muted, #a5a5b0); font-size:12px; white-space:nowrap; }


/* Footer row (counter + Load more) */
.wppp-footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; }
.wppp-more{ border:none; padding:8px 14px; border-radius:999px; background:var(--pp-more-bg, var(--pp-fill, #5a7cff)); color:var(--pp-more-fg, #fff); cursor:pointer; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.wppp-more:hover{ filter:brightness(.95); }
.wppp-more[hidden]{ display:none !important; }

/* Controls row: hamburger + prev/next */
.wppp-controls{ display:flex; align-items:center; justify-content:center; gap:18px; padding:8px 0 6px; }
.wppp-toggle{ width:38px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.15); background:transparent; cursor:pointer; display:grid; place-items:center; }
.wppp-burger{ display:block; width:18px; height:2px; background:var(--pp-ctrl, var(--pp-fg, #fff)); position:relative; }
.wppp-burger::before, .wppp-burger::after{ content:''; position:absolute; left:0; right:0; height:2px; background:var(--pp-ctrl, var(--pp-fg, #fff)); }
.wppp-burger::before{ top:-6px; } .wppp-burger::after{ top:6px; }

.wppp-skip button{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.15); background:transparent; color:var(--pp-ctrl,var(--pp-fg,#fff)); font-size:14px; cursor:pointer; }
.wppp-skip button:hover{ background:color-mix(in srgb, var(--pp-fg, #fff) 10%, transparent); }

/* Collapsed state */
.wppp-browser.is-collapsed .wppp-list{ display:none; }
.wppp-browser.is-collapsed .wppp-footer{ display:none; }
.wppp-browser.is-collapsed .wppp-search-area{ display:none; }


/* Make player and list same width inside browser */
.wppp-browser .pp-audio-player{ width:100%; max-width:100%; }
.wppp-browser .wppp-episodes{ width:100%; }

/* Put hamburger between Prev and Next */
.wppp-controls{ display:flex; align-items:center; justify-content:center; gap:14px; }
.wppp-prev{ order:1; }
.wppp-toggle{ order:2; }
.wppp-next{ order:3; }


/* Force player and list to share exact width */
.wppp-browser > * { width:100%; }
.wppp-browser .pp-audio-player{ max-width:none; width:100%; }
.wppp-browser .wppp-episodes{ width:100%; }

/* Make prev | hamburger | next align in one row */
.wppp-controls{ display:flex; align-items:center; justify-content:center; gap:14px; }
.wppp-controls .wppp-skip{ display:contents; } /* expose prev/next as direct flex items */
.wppp-prev{ order:1; }
.wppp-toggle{ order:2; }
.wppp-next{ order:3; }


/* Mobile gutter alignment: give the player the same side space as the list */
@media (max-width: 768px){
  .wppp-browser .pp-audio-player{ margin-left:16px; margin-right:16px; }
}


/* Mobile: pad the entire widget so player & list align exactly */
@media (max-width: 768px){
  .wppp-browser{ padding-left:16px; padding-right:16px; }
  .wppp-browser .pp-audio-player{ margin-left:0; margin-right:0; }
}


/* Mobile alignment v3: use equal margins on both player and list; remove inner browser padding */
@media (max-width: 768px){
  .wppp-browser{ padding-left:0 !important; padding-right:0 !important; }
  .pp-audio-player{ margin-left:16px !important; margin-right:16px !important; margin-bottom:8px; }
  .wppp-episodes{ margin-left:16px !important; margin-right:16px !important; margin-top:0 !important; }
}


/* === Unified gutters + tighter stack === */
.wppp-browser .pp-audio-player{
  margin-left:16px; margin-right:16px;       /* same side space as list */
  padding-left:18px; padding-right:18px;     /* extra inner room so waveform/slider don't hug edges */
  margin-bottom:10px;                        /* reduce the gap to the list */
}
.wppp-browser .wppp-episodes{
  margin-left:16px; margin-right:16px;
  margin-top:0;
}

/* Keep the same on mobile */
@media (max-width: 768px){
  .wppp-browser{ padding-left:0 !important; padding-right:0 !important; }
  .wppp-browser .pp-audio-player{ margin-left:16px !important; margin-right:16px !important; }
  .wppp-browser .wppp-episodes{ margin-left:16px !important; margin-right:16px !important; }
}


/* Hard align player & list (desktop + mobile) */
.wppp-browser .pp-audio-player,
.wppp-browser .wppp-episodes{
  margin-left:16px; margin-right:16px;
  width:auto; max-width:calc(100% - 32px);
}
.wppp-browser .pp-audio-player{ margin-bottom:8px; padding-left:18px; padding-right:18px; }


/* Force theme-agnostic color for prev/next arrows using the 'Controls Icons' color */
.wppp-controls .wppp-skip button{
  background:transparent !important;
  color:var(--pp-ctrl, var(--pp-fg,#fff)) !important;
}
.wppp-controls .wppp-prev,
.wppp-controls .wppp-next{
  color:var(--pp-ctrl, var(--pp-fg,#fff)) !important;
}


/* === Controls Icons color (strong) === */
.wppp-controls .wppp-skip button{
  background:transparent !important;
  color:var(--pp-ctrl, var(--pp-fg,#fff)) !important;
}
.wppp-controls .wppp-skip button span,
.wppp-controls .wppp-skip button i{ 
  color:var(--pp-ctrl, var(--pp-fg,#fff)) !important;
}
.wppp-controls .wppp-skip button svg,
.wppp-controls .wppp-skip button svg *{
  fill:var(--pp-ctrl, var(--pp-fg,#fff)) !important;
  stroke:var(--pp-ctrl, var(--pp-fg,#fff)) !important;
}
.wppp-controls .wppp-prev,
.wppp-controls .wppp-next{
  color:var(--pp-ctrl, var(--pp-fg,#fff)) !important;
}


/* === Prev/Next hard color fix — covers pseudo-element triangles too === */
.wppp-controls .wppp-prev::before{
  border-right-color: var(--pp-ctrl, var(--pp-fg,#fff)) !important;
}
.wppp-controls .wppp-next::before{
  border-left-color: var(--pp-ctrl, var(--pp-fg,#fff)) !important;
}
/* If theme uses mask/background SVGs */
.wppp-controls .wppp-skip button{ -webkit-mask-image: none; mask-image: none; }
/* Fallback: force glyph color */
.wppp-controls .wppp-skip button,
.wppp-controls .wppp-skip button *{ color:var(--pp-ctrl, var(--pp-fg,#fff)) !important; }


/* === FINAL: ensure prev/next triangles honor --pp-ctrl across themes === */
.wppp-controls .wppp-prev::before,
.wppp-controls .wppp-prev::after{
  border-right-color: var(--pp-ctrl, var(--pp-fg,#fff)) !important;
}
.wppp-controls .wppp-next::before,
.wppp-controls .wppp-next::after{
  border-left-color: var(--pp-ctrl, var(--pp-fg,#fff)) !important;
}
/* Icon fonts / dashicons / spans / svgs */
.wppp-controls .wppp-skip button .dashicons,
.wppp-controls .wppp-skip button i,
.wppp-controls .wppp-skip button span,
.wppp-controls .wppp-skip button svg,
.wppp-controls .wppp-skip button svg *{
  color:var(--pp-ctrl, var(--pp-fg,#fff)) !important;
  fill:var(--pp-ctrl, var(--pp-fg,#fff)) !important;
  stroke:var(--pp-ctrl, var(--pp-fg,#fff)) !important;
}


/* own icons fallback (if runtime blocked) */
.wppp-controls .wppp-skip button::before,
.wppp-controls .wppp-skip button::after{ display:none!important; }
.wppp-controls .wppp-skip button{ background:transparent!important; -webkit-mask-image:none!important; mask-image:none!important; }
.wppp-controls .wppp-skip button svg.wppp-icon{ width:18px;height:18px;display:inline-block;vertical-align:middle; }
.wppp-controls .wppp-skip button svg.wppp-icon polygon{ fill:var(--pp-ctrl, var(--pp-fg,#fff)); stroke:var(--pp-ctrl, var(--pp-fg,#fff)); }
/* id marker */ .wppp-own-icons-fallback{} 

/* Unified panel: wraps player + episodes + controls */
.wppp-panel{
  border:1px solid var(--pp-border, rgba(255,255,255,.08));
  border-radius:14px;
  background: var(--pp-list-bg, var(--pp-bg));
  color: var(--pp-list-fg, var(--pp-fg));
  padding: 12px 12px 6px;
}
.wppp-panel .pp-audio-player{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 8px 0 !important;
}
.wppp-panel .wppp-episodes{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wppp-panel .wppp-controls{
  padding: 10px 4px 4px;
  display:flex; align-items:center; justify-content:center; gap:18px;
  border-top: 1px solid color-mix(in srgb, var(--pp-list-fg, #ffffff) 10%, transparent);
  margin-top: 8px;
}

/* Search area (collapsible) */
.wppp-search-area{margin:10px 0 6px 0}
.wppp-search-heading{font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;opacity:.8;margin:8px 0 2px}
.wppp-feed-title{font-size:1.6rem;font-weight:700;line-height:1.1;margin:0 0 8px}
.wppp-search-wrap{flex:1 1 260px;min-width:200px}
.wppp-search{width:100%;padding:10px 12px;border:1px solid var(--pp-border,rgba(255,255,255,.25));border-radius:12px;background:var(--wppfa_search_bg, rgba(255,255,255,.06));color:var(--pp-fg,#fff);outline:none}
.wppp-search::placeholder{opacity:.8}


/* Hide the old feed/series dropdown (replaced by hamburger menu) */
.wppp-browser .wppp-top{ display:none !important; }

/* Ensure our hamburger looks like the skip buttons (white chip) */
.pp-ctrl-row .pp-feeds{
  background:#ffffff !important;
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.pp-ctrl-row .pp-feeds .pp-burger, .pp-burger::before, .pp-burger::after{ background: var(--pp-feed-icon, var(--pp-ctrl, var(--pp-fill))); }
.pp-feeds-pop{ color: var(--pp-feed-fg, var(--pp-fg)); }

/* Feed selector symbol */
.pp-feed-symbol{ display:inline-block; font-size:16px; line-height:1; color: var(--pp-ctrl, var(--pp-fill)); padding:0 6px; }


/* Feed selector box */
.pp-ctrl-row .pp-feedbox{ background:transparent; border:none; box-shadow:none; padding:0; }
.pp-ctrl-row .pp-feedbox .pp-feeds{
  background: transparent !important;
  color: inherit;
  border: none;
  box-shadow: none;
}

/* Text button style */
.pp-ctrl-row .pp-feed-textbtn{
  font-weight:600;
  padding: 6px 12px;
}

/* Burger icon (3 bars), inherits --pp-ctrl */
.pp-burger, .pp-burger::before, .pp-burger::after{
  display:block; width:16px; height:2px; background: var(--pp-ctrl, var(--pp-fill)); content:'';
}
.pp-burger{ position:relative; }
.pp-burger::before{ position:absolute; top:-5px; left:0; }
.pp-burger::after{ position:absolute; top:5px; left:0; }

/* Popover coloring */
.pp-feeds-pop{ background: var(--pp-feed-pop-bg, var(--pp-feed-bg, #fff));
  color: var(--pp-feed-fg, var(--pp-fg));
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  padding: 8px;
}


/* Feed selector chip + colors */
.pp-ctrl-row .pp-feedbox{ background:transparent; border:none; box-shadow:none; padding:0; }

/* Text button */
.pp-ctrl-row .pp-feed-textbtn{
  font-weight:600;
  padding: 6px 12px;
  background: var(--pp-feed-btn, transparent);
  color: var(--pp-feed-fg, var(--pp-fg));
  border-radius: 10px;
}

/* Icon button default (uses a small pill if feed_btn set) */
.pp-ctrl-row .pp-feeds:not(.pp-feed-textbtn){
  padding: 6px 10px;
  background: var(--pp-feed-btn, transparent) !important;
  border-radius: 10px;
  box-shadow: none;
}

/* Burger icon (3 bars) */
.pp-burger, .pp-burger::before, .pp-burger::after{
  display:block; width:16px; height:2px; background: var(--pp-feed-icon, var(--pp-ctrl, var(--pp-fill))); content:'';
}
.pp-burger{ position:relative; }
.pp-burger::before{ position:absolute; top:-5px; left:0; }
.pp-burger::after{ position:absolute; top:5px; left:0; }

/* Popover background/text colors */
.pp-feeds-pop{ background: var(--pp-feed-pop-bg, var(--pp-feed-bg, #fff));
  color: var(--pp-feed-fg, var(--pp-fg));
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  padding: 8px;
}


/* Finalize feed icon color: make all three bars use --pp-feed-icon */
.pp-ctrl-row .pp-feeds .pp-burger,
.pp-burger,
.pp-burger::before,
.pp-burger::after{
  background: var(--pp-feed-icon, var(--pp-ctrl, var(--pp-fill))) !important;
}


/* Chevron for collapse toggle (minimal, isolated) */
.wppp-toggle .wppp-chevron{ display:grid; place-items:center; }
.wppp-toggle .wppp-chevron svg{ width:16px; height:16px; display:block; }
.wppp-toggle[aria-expanded="true"] .wppp-chevron svg{ transform: rotate(180deg); }