:root {
      --dock-w: 320px;
      --dock-h: 180px;
      --dock-gap: 16px;
      --radius: 14px;
      --shadow: 0 10px 24px rgba(0,0,0,.25);
      --speed: 150ms;
    }

    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    }


    .bg-ytfp{ padding: 30px 30px; background: var(--global-bg-header); color: #fff; }

    .ytfp { position: relative; max-width: 460px; margin: 0px auto; }
    .ytfp__frameWrap {
      position: relative;
      width: 100%;
      background: #000;
      border-radius: var(--radius);
      overflow: hidden;
      transition: all var(--speed) ease;
      aspect-ratio: 16 / 9;
    }
    .ytfp iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

    /* DESKTOP: mini-player fixo no canto */
    .ytfp.is-docked .ytfp__frameWrap {
      position: fixed;
      width: var(--dock-w);
      height: var(--dock-h);
      right: var(--dock-gap);
      bottom: var(--dock-gap);
      z-index: 9999;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    /* MOBILE: mini-player centralizado com a mesma largura do player original */
    @media (max-width: 767.98px) {

      .ytfp { margin-top: 40px; margin-bottom: -8px; }

      .ytfp.is-docked .ytfp__frameWrap {
        left: 50%;
        transform: translateX(-50%);
        width: var(--inline-w, 90vw);
        height: auto;
        aspect-ratio: 16 / 9;
        bottom: var(--dock-gap);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        right: auto;
      }
      /* reserva de espaço somente quando há player dockado */
      body.has-docked { padding-bottom: calc(var(--inline-h, 56.25vw) + var(--dock-gap) + 12px); }
    }

    .ytfp__controls {
      position: absolute;
      top: 6px;
      right: 6px;
      display: flex;
      gap: 6px;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--speed) ease;
      z-index: 2;
    }
    .ytfp.is-docked .ytfp__controls { opacity: 1; pointer-events: auto; }

    .ytfp__btn {
      appearance: none; border: 0; border-radius: 999px; padding: 8px 10px;
      background: rgba(0,0,0,.55); color: #fff; cursor: pointer;
    }
    .ytfp__btn:hover { background: rgba(0,0,0,.7); }
    .ytfp__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }


@media screen and (max-width: 500px){

    .bg-ytfp{ margin-bottom: -57px; }

}