/* ==========================================================================
   VN Codes — Custom 9:16 video player + template detail layout
   ========================================================================== */

/* ============ PLAYER SHELL ============ */
.player{
  position:relative;width:100%;aspect-ratio:9/16;
  border-radius:var(--r-lg);overflow:hidden;
  background:#07070d;border:1px solid var(--line-2);
  box-shadow:var(--lift-3),0 0 90px -30px rgba(124,92,255,.85);
  transform-style:preserve-3d;
  user-select:none;
}
.player__stage{position:relative;width:100%;height:100%;perspective:1000px}

/* Imported templates store a YouTube link, not a raw mp4 — swap the whole
   custom-control player for a plain embed when that is what we have. */
.yt-embed{position:absolute;inset:0;display:none;background:#000}
.yt-embed__frame{position:absolute;inset:0;pointer-events:none}
.yt-embed__frame iframe,.yt-embed__frame div{width:100%;height:100%;border:0}
/* the iframe itself intercepts clicks so YouTube's own UI never shows through
   a stray tap — every real interaction goes through our own controls below */
.yt-embed__mask{
  position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;
  transition:opacity .4s ease;
}
.yt-embed__mask.is-hidden{opacity:0;pointer-events:none}

/* the button covers the whole video body (minus the control strip) so a
   tap anywhere toggles play/pause — only the inner span is the visible circle */
.yt-embed__big{
  position:absolute;inset:0 0 34px;z-index:2;display:grid;place-items:center;
  background:transparent;border:0;
}
.yt-embed__big-ico{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(12px);color:#fff;box-shadow:var(--lift-2);
  transition:opacity .25s var(--ease),scale .3s var(--ease-back);
}
.yt-embed__big-ico svg{width:22px;height:22px}
.yt-embed.is-playing .yt-embed__big-ico{opacity:0;scale:.7}
.yt-embed.is-playing .yt-embed__big:hover .yt-embed__big-ico{opacity:1;scale:1}

.yt-embed__ctl{
  position:absolute;inset:auto 10px 10px;z-index:3;display:flex;align-items:center;gap:.5rem;
}
.yt-embed__bar{position:relative;flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.28);cursor:pointer}
.yt-embed__fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:var(--grad);box-shadow:0 0 8px rgba(124,92,255,.7)}
.yt-embed__mute{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:rgba(0,0,0,.45);color:#fff;backdrop-filter:blur(6px);
}
.yt-embed__mute svg{width:14px;height:14px}

/* wide enough to cover the source clip's avatar + channel-name text, not
   just the circular part — the video itself paints that, not YouTube UI */
.yt-embed__brand{
  position:absolute;top:6px;left:6px;z-index:2;
  height:58px;display:flex;align-items:center;
  pointer-events:none;transition:opacity .6s ease;
}
.yt-embed__brand.is-hidden{opacity:0}
.yt-embed__brand img{height:100%;width:auto;display:block}
.player.is-youtube video,
.player.is-youtube .player__poster,
.player.is-youtube .player__big,
.player.is-youtube .player__spin,
.player.is-youtube .player__flash,
.player.is-youtube .player__hint,
.player.is-youtube .player__ctl{display:none}
.player.is-youtube .yt-embed{display:block}
.player video{width:100%;height:100%;object-fit:cover;background:#07070d;display:block}
.player__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .5s var(--ease),scale .8s var(--ease);
}
.player.is-started .player__poster{opacity:0;scale:1.06;pointer-events:none}

/* big centre play */
.player__big{
  position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:6;
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(14px);box-shadow:var(--lift-3),0 0 44px rgba(124,92,255,.5);
  transition:opacity .35s var(--ease),scale .45s var(--ease-back);
}
.player__big::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);animation:ping 2.6s var(--ease) infinite;
}
@keyframes ping{to{transform:scale(1.5);opacity:0}}
.player__big svg{width:28px;height:28px;margin-left:4px}
.player__big:hover{scale:1.08}
.player.is-playing .player__big{opacity:0;scale:.6;pointer-events:none}

/* buffering spinner */
.player__spin{
  position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:7;
  width:44px;height:44px;border-radius:50%;
  border:3px solid rgba(255,255,255,.18);border-top-color:#fff;
  animation:spin .8s linear infinite;opacity:0;transition:opacity .25s;
}
.player.is-waiting .player__spin{opacity:1}
.player.is-waiting .player__big{opacity:0}
@keyframes spin{to{rotate:360deg}}

/* transient tap feedback */
.player__flash{
  position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:8;
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
}
.player__flash svg{width:26px;height:26px}
.player__flash.is-on{animation:flash .6s var(--ease) forwards}
@keyframes flash{0%{opacity:1;scale:.7}100%{opacity:0;scale:1.5}}

/* ============ CONTROL BAR ============ */
.player__ctl{
  position:absolute;inset:auto 0 0 0;z-index:9;padding:14px 14px 12px;
  background:linear-gradient(to top,rgba(4,4,10,.92),rgba(4,4,10,.55) 55%,transparent);
  opacity:0;translate:0 12px;
  transition:opacity .3s var(--ease),translate .3s var(--ease);
}
.player:hover .player__ctl,.player.is-paused .player__ctl,.player:focus-within .player__ctl,.player.show-ctl .player__ctl{opacity:1;translate:0}

/* scrubber */
.scrub{position:relative;height:18px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.scrub__track{position:relative;width:100%;height:4px;border-radius:99px;background:rgba(255,255,255,.24);overflow:hidden;transition:height .2s var(--ease)}
.scrub:hover .scrub__track{height:7px}
.scrub__buf{position:absolute;inset:0 auto 0 0;width:0;background:rgba(255,255,255,.3)}
.scrub__fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--grad);box-shadow:0 0 14px rgba(124,92,255,.8)}
.scrub__knob{
  position:absolute;top:50%;left:0;translate:-50% -50%;
  width:13px;height:13px;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.7);
  scale:0;transition:scale .2s var(--ease-back);
}
.scrub:hover .scrub__knob,.scrub.is-dragging .scrub__knob{scale:1}
.scrub__tip{
  position:absolute;bottom:calc(100% + 8px);left:0;translate:-50% 0;
  padding:.22rem .5rem;border-radius:7px;font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;
  background:rgba(10,10,20,.94);border:1px solid var(--line-2);box-shadow:var(--lift-2);
  opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap;
}
.scrub:hover .scrub__tip,.scrub.is-dragging .scrub__tip{opacity:1}

.player__row{display:flex;align-items:center;gap:.35rem;margin-top:.35rem}
.pbtn{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  color:#fff;opacity:.86;flex:none;
  transition:background .22s,opacity .22s,transform .22s var(--ease-back);
}
.pbtn:hover{background:rgba(255,255,255,.14);opacity:1;transform:translateY(-1px)}
.pbtn svg{width:17px;height:17px}
.pbtn--play svg{width:19px;height:19px}
.player__time{
  font-size:.76rem;font-weight:600;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.82);margin-inline:.3rem .1rem;letter-spacing:-.01em;
}
.player__spacer{margin-left:auto}
.player__rate{
  padding:.3rem .55rem;border-radius:8px;font-size:.74rem;font-weight:800;
  color:#fff;opacity:.86;transition:background .22s,opacity .22s;
}
.player__rate:hover{background:rgba(255,255,255,.14);opacity:1}

/* volume: expands on hover */
.vol{display:flex;align-items:center}
.vol__slider{
  width:0;opacity:0;height:4px;margin-left:0;border-radius:99px;cursor:pointer;
  appearance:none;background:rgba(255,255,255,.28);
  transition:width .3s var(--ease),opacity .25s,margin-left .3s var(--ease);
}
.vol:hover .vol__slider,.vol__slider:focus-visible{width:64px;opacity:1;margin-left:.4rem}
.vol__slider::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.6)}
.vol__slider::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}

/* fullscreen adjustments */
.player:fullscreen{aspect-ratio:auto;width:100%;height:100%;border-radius:0;border:0}
.player:fullscreen video{object-fit:contain}

/* muted-autoplay hint chip */
.player__hint{
  position:absolute;top:12px;right:12px;z-index:9;
  display:flex;align-items:center;gap:.4rem;padding:.34rem .7rem;border-radius:var(--r-pill);
  background:rgba(0,0,0,.6);border:1px solid var(--line-2);backdrop-filter:blur(10px);
  font-size:.72rem;font-weight:700;
  transition:opacity .3s;
}
.player__hint svg{width:13px;height:13px}
.player.is-unmuted .player__hint{opacity:0;pointer-events:none}

/* ============ DETAIL LAYOUT ============ */
.detail{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.detail__media{position:sticky;top:96px}
.detail__thumbs{display:flex;gap:.55rem;margin-top:.9rem}
.detail__thumbs button{
  flex:1;aspect-ratio:9/16;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);opacity:.55;
  transition:opacity .3s,border-color .3s,transform .3s var(--ease-back);
}
.detail__thumbs button:hover{opacity:.9;transform:translateY(-3px)}
.detail__thumbs button[aria-selected="true"]{opacity:1;border-color:var(--violet);box-shadow:var(--glow-v)}
.detail__thumbs img{width:100%;height:100%;object-fit:cover}

.detail h1{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-block:.7rem .8rem}
.detail__byline{font-size:.83rem;color:var(--ink-3);margin-top:-.4rem}
.detail__stats{display:flex;gap:1.4rem;flex-wrap:wrap;padding-block:1rem;color:var(--ink-2);font-size:.88rem}
.detail__stats b{color:var(--ink)}
.detail__stats svg{width:15px;height:15px;flex:none;vertical-align:-2px}

.buybox{padding:22px;border-radius:var(--r-lg);margin-block:1.4rem}
.buybox--sm{padding:16px}
.buybox--sm .buybox__price strong{font-size:1.7rem}
.buybox--sm .buybox__banner{padding:.55rem .75rem;font-size:.78rem;margin-top:.7rem}
.buybox--sm .buybox__actions{margin-top:.85rem;gap:.5rem}
.buybox--sm .buybox__actions .btn{flex-basis:140px;padding:.65rem 1rem;font-size:.85rem}
.buybox--sm .buybox__actions .icon-btn{width:38px;height:38px}
.buybox__price{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.buybox__price strong{font-size:2.4rem;font-weight:800;letter-spacing:-.045em;line-height:1}
.buybox__price s{color:var(--ink-3);font-size:1rem}
.buybox__price .off{
  padding:.24rem .6rem;border-radius:var(--r-pill);font-size:.74rem;font-weight:800;
  background:rgba(34,211,238,.16);color:var(--cyan);border:1px solid rgba(34,211,238,.35);
}
.buybox__banner{
  display:flex;gap:.55rem;align-items:center;margin-top:1rem;padding:.7rem .9rem;
  border-radius:var(--r-sm);background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);
  color:#0d7a54;font-size:.85rem;font-weight:600;
}
.buybox__banner svg{width:16px;height:16px;flex:none}
.buybox__actions{display:flex;align-items:center;gap:.7rem;margin-top:1.2rem;flex-wrap:wrap}
.buybox__actions .btn{flex:1 1 160px}
.buybox__actions .icon-btn[aria-pressed="true"]{color:var(--violet);border-color:rgba(124,92,255,.4);background:rgba(124,92,255,.08)}
.buybox__note{margin-top:.9rem;font-size:.8rem;color:var(--ink-3);display:flex;gap:.5rem;align-items:center}
.buybox__note svg{width:15px;height:15px;color:var(--cyan);flex:none}

/* ---- feature bullets: two columns of small icon + label ---- */
.feature-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.2rem;margin-top:1.6rem;
}
.feature-grid div{display:flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--ink-2)}
.feature-grid svg{width:17px;height:17px;color:var(--violet);flex:none}

/* ---- mini "how it works" recap, inline on the detail page ---- */
.mini-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1.8rem}
.mini-steps div{padding:.9rem .8rem;border-radius:var(--r-sm);background:var(--bg-3)}
.mini-steps__n{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--grad);color:#fff;font-size:.72rem;font-weight:800;margin-bottom:.4rem;
}
.mini-steps b{display:block;font-size:.83rem;margin-bottom:.15rem}
.mini-steps small{font-size:.72rem;color:var(--ink-3)}

.qr-card{display:flex;gap:18px;align-items:center;padding:18px;border-radius:var(--r-md)}
.qr-card img{width:104px;height:104px;border-radius:12px;flex:none;box-shadow:var(--lift-2)}
.qr-card h4{font-size:1rem;margin-bottom:.3rem}
.qr-card p{font-size:.84rem;color:var(--ink-2)}
.code-pill{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:.7rem;
  padding:.5rem .8rem;border-radius:var(--r-sm);
  background:rgba(124,92,255,.07);border:1px dashed var(--line-2);color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;letter-spacing:.04em;
}
.code-pill button{color:var(--ink-3);display:grid;place-items:center;transition:color .25s}
.code-pill button:hover{color:var(--ink)}
.code-pill svg{width:15px;height:15px}

.spec-list{display:grid;gap:.1rem;margin-top:1rem}
.spec-list div{display:flex;gap:1rem;padding:.72rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.spec-list dt{color:var(--ink-3);min-width:130px}
.spec-list dd{color:var(--ink);font-weight:600}

@media (max-width:900px){
  .detail{grid-template-columns:1fr}
  .detail__media{position:static;max-width:320px;margin-inline:auto;width:100%}
}
@media (max-width:520px){
  .feature-grid{grid-template-columns:1fr}
  .mini-steps{grid-template-columns:1fr}
  .detail__media{max-width:240px}
}

/* ============ QR POPUP ============ */
.qr-modal{
  position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.qr-modal.is-open{opacity:1;pointer-events:auto}
.qr-modal__scrim{position:absolute;inset:0;background:rgba(20,14,32,.55);backdrop-filter:blur(10px)}
.qr-modal__card{
  position:relative;width:min(92vw,340px);padding:30px 26px 26px;text-align:center;
  border-radius:var(--r-xl);background:linear-gradient(165deg,var(--card-a),var(--card-b));
  border:1px solid var(--line);box-shadow:var(--lift-3);
  transform:scale(.92) translateY(14px);transition:transform .35s var(--ease-back);
}
.qr-modal.is-open .qr-modal__card{transform:none}
.qr-modal__close{position:absolute;top:12px;right:12px}
.qr-modal__card img{width:200px;height:200px;margin:6px auto 16px;border-radius:14px;box-shadow:var(--lift-2)}
.qr-modal__card h4{font-size:1.05rem;margin-bottom:.4rem}
.qr-modal__card p{font-size:.85rem;color:var(--ink-2);margin-bottom:1rem}
.qr-modal__card .code-pill{margin:0}

/* ============ REEL LIGHTBOX ============ */
.lightbox{
  position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  padding:20px;background:rgba(4,4,9,.86);backdrop-filter:blur(16px);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox__inner{
  width:min(94vw,392px);transform:scale(.9) translateY(18px);
  transition:transform .45s var(--ease-back);
}
.lightbox.is-open .lightbox__inner{transform:none}
.lightbox__bar{display:flex;align-items:center;gap:.6rem;margin-top:1rem}
.lightbox__bar h3{font-size:1.02rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lightbox__close{position:absolute;top:16px;right:16px}
.lightbox__nav{position:absolute;top:50%;translate:0 -50%;display:none}
@media (min-width:900px){.lightbox__nav{display:grid}.lightbox__nav--prev{left:24px}.lightbox__nav--next{right:24px}}

.player__poster{pointer-events:none;z-index:2}
.player__stage>video{position:absolute;inset:0}