/*
 * V2 Podcast Global Widget — canonical design reference.
 *
 * Mirrors the design tokens already shipped in assets/css/realisons-v2.css
 * for .r-v2__mini-player and adds the placement guard rails so the widget
 * does not collide with the WordPress admin bar, the V2 footer, the cookie
 * banner, the offer banner, or scrollable mobile content. Selectors are
 * scoped to .r-v2-podcast-global-widget so this stylesheet stays inert
 * outside the module instance.
 *
 * Enqueued globally by realisons-divi-extension.php after realisons-v2.css.
 */

.r-v2-podcast-global-widget {
  position: fixed;
  right: auto;
  bottom: calc(var(--r-footer-h) + var(--r-section-gap));
  left: var(--r-gutter-sm);
  z-index: var(--r-z-overlay);
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: center;
  gap: calc(var(--r-section-gap) / 2);
  width: max-content;
  max-width: calc(100vw - (var(--r-gutter-sm) * 2));
  padding: calc(var(--r-section-gap) / 2);
  border: calc(var(--r-section-gap) / 12) solid var(--r-separator);
  border-radius: var(--r-radius-input);
  background: var(--r-bg);
  box-shadow: var(--r-neu-card);
  color: var(--r-text-body);
}

/* When the WordPress admin bar is present, the chrome-measure script pushes
   --r-admin-bar-h on :root. We honor that to keep the widget below it. */
body.admin-bar .r-v2-podcast-global-widget {
  bottom: calc(var(--r-footer-h) + var(--r-section-gap));
}

/* Honor the hidden HTML attribute so toggling visibility from JS or PHP
   does not require additional CSS work. */
.r-v2-podcast-global-widget[hidden] {
  display: none;
}

.r-v2-podcast-global-widget .r-v2__mini-player-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--r-section-gap) * 3);
  height: calc(var(--r-section-gap) * 3);
  padding: 0;
  border: 0;
  border-radius: var(--r-radius-btn);
  background: var(--r-bg);
  box-shadow: var(--r-neu-btn-sm);
  color: var(--r-teal-dark);
  cursor: pointer;
}

.r-v2-podcast-global-widget .r-v2__mini-player-toggle[aria-pressed="true"] {
  color: var(--r-teal);
}

.r-v2-podcast-global-widget .r-v2__mini-player-icon {
  width: 0;
  height: 0;
  margin-left: calc(var(--r-section-gap) / 4);
  border-block: calc(var(--r-section-gap) / 2) solid transparent;
  border-left: calc(var(--r-section-gap) * 0.85) solid currentColor;
}

.r-v2-podcast-global-widget .r-v2__mini-player-toggle[aria-pressed="true"] .r-v2__mini-player-icon {
  width: var(--r-section-gap);
  height: var(--r-section-gap);
  margin-left: 0;
  border: 0;
  border-inline: calc(var(--r-section-gap) / 4) solid currentColor;
}

.r-v2-podcast-global-widget .r-v2__mini-player-open,
.r-v2-podcast-global-widget .r-v2__mini-player-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--r-section-gap) * 3);
  height: calc(var(--r-section-gap) * 3);
  border: 0;
  border-radius: var(--r-radius-btn);
  background: var(--r-bg);
  box-shadow: var(--r-neu-btn-sm);
  color: var(--r-teal-dark);
  cursor: pointer;
  text-decoration: none;
}

.r-v2-podcast-global-widget .r-v2__mini-player-open:focus-visible,
.r-v2-podcast-global-widget .r-v2__mini-player-close:focus-visible {
  outline: calc(var(--r-section-gap) / 6) solid var(--r-teal);
  outline-offset: calc(var(--r-section-gap) / 6);
}

/* Mobile: tuck the widget above the footer + safe-area, never overlap
   the cookie banner or the offer ribbon. */
@media (width < 768px) {
  .r-v2-podcast-global-widget {
    right: var(--r-gutter-sm);
    width: auto;
    bottom: calc(var(--r-footer-h) + var(--r-section-gap) + env(safe-area-inset-bottom, 0px));
  }
}

/* Suppress whenever the cookie banner or offer ribbon is open and would
   otherwise collide. JS sets data-r-v2-mini-suppressed on body. */
body[data-r-v2-mini-suppressed="1"] .r-v2-podcast-global-widget {
  display: none;
}