/* ============================================================================
   PGQuizPopup — PlaylistGOATS quiz funnel component
   Exact playlistgoats.com marketing brand language. Canonical file: served by
   the Flask app at /static/quiz-popup.css and loaded cross-origin by the
   static marketing site. No dependencies.
   ========================================================================== */

/* ---- modal shell ---- */
.pgq-overlay{position:fixed;inset:0;z-index:10000;background:rgba(8,11,17,.93);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:pgqIn .25s ease}
.pgq-overlay[hidden]{display:none!important}
.pgq-panel{background:#121823;border:1px solid #273140;border-radius:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.22);
  max-width:620px;width:100%;max-height:92vh;max-height:92dvh;overflow-y:auto;
  position:relative;animation:pgqUp .3s ease}
@keyframes pgqIn{from{opacity:0}to{opacity:1}}
@keyframes pgqUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- full-bleed page mode (/quiz) ---- */
.pgq-page{background:#080b11;min-height:70vh;border:1px solid #273140;border-radius:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.22);
  max-width:640px;margin:24px auto;overflow:hidden;position:relative}

/* ---- header / progress ---- */
.pgq-top{padding:20px 24px 0}
.pgq-progress{height:8px;background:#1d2a3d;border-radius:99px;overflow:hidden}
.pgq-progress>div{height:100%;width:0;background:#f2d84f;border-radius:99px;transition:width .5s ease}
.pgq-count{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#83adfb;margin-top:10px}
.pgq-eyebrow{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#83adfb}
.pgq-eyebrow.feat{color:#f2d84f}

/* ---- body / questions ---- */
.pgq-body{padding:24px;min-height:360px;font-family:"Work Sans",ui-sans-serif,system-ui,sans-serif}
.pgq-q{font-family:"Work Sans",ui-sans-serif,system-ui,sans-serif;font-weight:800;
  font-size:clamp(22px,4.5vw,28px);line-height:1.15;letter-spacing:-.06em;
  color:#f7f8fb;margin:14px 0 20px}
.pgq-opt{display:block;width:100%;text-align:left;background:#181f2b;
  border:1px solid #39465a;color:#f7f8fb;border-radius:10px;
  padding:15px 16px;margin:0 0 10px;font-size:16px;font-weight:500;
  font-family:"Work Sans",ui-sans-serif,system-ui,sans-serif;
  cursor:pointer;transition:border-color .15s,transform .1s,background-color .15s}
.pgq-opt:hover{border-color:#3d7cff}
.pgq-opt:active{transform:translateY(1px)}
.pgq-opt.picked{border-color:#3d7cff;background:#1c2740}
.pgq-field{width:100%;box-sizing:border-box;background:#121823;border:1px solid #39465a;
  color:#f7f8fb;border-radius:16px;padding:14px 16px;font-size:16px;min-height:110px;
  font-family:"Work Sans",ui-sans-serif,system-ui,sans-serif;font-weight:500;resize:vertical}
.pgq-field::placeholder{color:#778293}
.pgq-field:focus{outline:none;border-color:#3d7cff;box-shadow:0 0 0 4px rgba(61,124,255,.13)}
.pgq-btn{display:inline-block;background:#3d7cff;color:#fff;border:1px solid #3d7cff;
  border-radius:10px;min-height:48px;padding:12px 28px;
  font-weight:800;font-size:16px;font-family:"Work Sans",ui-sans-serif,system-ui,sans-serif;
  cursor:pointer;margin-top:14px;transition:background-color .16s,transform .1s;text-decoration:none}
.pgq-btn:hover{background:#4c86ff;border-color:#4c86ff}
.pgq-btn:active{transform:translateY(1px)}
.pgq-btn:disabled{opacity:.5;cursor:default}
.pgq-back{background:none;border:none;color:#a5afbe;font-size:14px;cursor:pointer;
  margin-top:16px;text-decoration:underline;font-family:"Work Sans",ui-sans-serif,system-ui,sans-serif}
.pgq-back:hover{color:#f7f8fb}
.pgq-close{position:absolute;top:10px;right:12px;background:none;border:none;color:#778293;
  font-size:24px;cursor:pointer;line-height:1;padding:8px;z-index:2}
.pgq-close:hover{color:#f7f8fb}
.pgq-saved{font-size:12px;color:#778293;margin:6px 0 0}
.pgq-fade{animation:pgqFade .35s ease}
@keyframes pgqFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- G.O.A.T. host ---- */
.pgq-goatrow{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pgq-goatface{width:52px;height:52px;flex:0 0 52px;border-radius:50%;background:#181f2b;
  border:1px solid #39465a;display:flex;align-items:center;justify-content:center;color:#f2d84f}
.pgq-goatface svg{width:34px;height:34px}
.pgq-goatsays{background:#181f2b;border:1px solid #39465a;border-radius:4px 14px 14px 14px;
  padding:10px 14px;font-size:15px;color:#f7f8fb;
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:500}

/* ---- analysis beat ---- */
.pgq-analysis{text-align:center;padding:40px 20px}
.pgq-analysis .pgq-goatface{width:76px;height:76px;margin:0 auto 18px;animation:pgqPulse 1.2s ease-in-out infinite}
.pgq-analysis .pgq-goatface svg{width:50px;height:50px}
@keyframes pgqPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.pgq-aline{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:500;
  font-size:19px;color:#f2d84f;min-height:30px}
.pgq-note{font-size:13px;color:#a5afbe;margin-top:18px}

/* ---- floating trigger button ---- */
.pgq-float{position:fixed;right:20px;bottom:20px;z-index:9999;
  background:#3d7cff;color:#fff;border:1px solid #3d7cff;border-radius:10px;
  min-height:48px;padding:12px 18px;
  font-family:"Work Sans",ui-sans-serif,system-ui,sans-serif;font-weight:800;font-size:15px;
  cursor:pointer;box-shadow:0 8px 28px rgba(0,0,0,.35);
  transition:background-color .16s,transform .1s}
.pgq-float:hover{background:#4c86ff;border-color:#4c86ff}
.pgq-float:active{transform:translateY(1px)}
@media (max-width:560px){.pgq-float{right:12px;bottom:12px;left:12px;text-align:center}}

/* ---- hand-drawn brand annotations ---- */
.marker-circle{display:inline-block;border:4px solid #f2d84f;
  border-radius:47% 53% 48% 52%/54% 44% 56% 46%;
  transform:rotate(-2.5deg);padding:.02em .22em;margin:0 .08em;line-height:1.25}
.pgq-ed{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:500;color:#f2d84f}