/* pone.la — custom overrides (loaded after the theme).
   Onboarding screens + mobile fixes. Keep all project-specific CSS here. */

/* ---------- Simple onboarding pages (join / create / share / auth) ---------- */
.simple-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
  box-sizing: border-box;
}
.simple-brand { margin-bottom: 18px; }
.simple-card-wrap { width: 100%; max-width: 420px; }
.simple-card { border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.simple-card .panel-body { padding: 24px; }
.simple-title { margin: 0 0 6px; font-weight: 700; }
.simple-foot { margin-top: 18px; }
.simple-foot a { margin: 0 4px; }

/* Big, centered, monospaced code entry */
.code-input {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .35em;
  font-weight: 700;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
}

/* "o" divider */
.simple-divider {
  position: relative;
  text-align: center;
  margin: 18px 0;
  color: #9aa0a6;
}
.simple-divider:before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  border-top: 1px solid #e6e6e6;
}
.simple-divider span {
  position: relative;
  background: #fff;
  padding: 0 12px;
}

/* Share screen: code badge + QR */
.code-badge {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: .25em;
  margin: 8px 0 16px;
  padding: 12px;
  background: #f5f6f8;
  border-radius: 10px;
  word-break: break-all;
}
.qr-box {
  display: flex;
  justify-content: center;
  margin: 8px auto 4px;
}
.qr-box img, .qr-box canvas { display: block; }

/* Comfortable tap targets on touch screens */
.btn-lg, .btn-block { min-height: 48px; }

/* Legal pages: wider, top-aligned, readable */
.simple-page.legal { justify-content: flex-start; }
.simple-card-wrap.legal-wide { max-width: 760px; }
.legal-wide .panel-body { padding: 28px; }
.legal-wide h1 { font-size: 26px; font-weight: 700; }
.legal-wide h2 { font-size: 19px; font-weight: 700; margin-top: 24px; }
.legal-wide p, .legal-wide li { line-height: 1.6; }

/* ---------- Mobile fixes for the existing screens ---------- */

/* Explore feed + console queue: 2-up on phones instead of 3 cramped tiles */
@media (max-width: 480px) {
  #exploreFeed > .col-xs-4,
  #queueList > .col-xs-4 {
    width: 50%;
  }
  .item .btn-playpause,
  .item .removeFromQueueBtn {
    padding: 8px 14px;
  }
}

/* Now-playing progress bar (console) — tap to seek */
.np-progress { max-width: 520px; margin: 6px 0 14px; }
.np-bar {
  position: relative;
  height: 12px;
  background: rgba(0,0,0,.15);
  border-radius: 6px;
  cursor: pointer;
}
.np-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: #1c202b;
  border-radius: 6px;
  transition: width .25s linear;
}
.np-time { font-size: 12px; color: #8a8f98; margin-top: 4px; }
.playPauseBtn { min-width: 42px; }

/* Full-screen "tap to start" overlay (mobile console) — provides the gesture mobile
   browsers require before audio can play. */
.tap-to-start {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2000;
  background: rgba(20, 22, 28, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tap-to-start-inner { padding: 24px; }
.tap-to-start .fa { font-size: 76px; margin-bottom: 16px; opacity: .95; }
.tap-to-start-text { font-size: 24px; font-weight: 700; }
.tap-to-start-sub { font-size: 14px; opacity: .7; margin-top: 6px; }

/* Console video stage. Mobile (iOS/Android) won't play a 0-size/hidden video, so the
   active player must be a real, visible size there. Desktop plays hidden fine, so we
   collapse it to keep the audio-only look. */
.yt-stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 8px auto;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.yt-stage > div, .yt-stage iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
  opacity: 0;
}
.yt-stage .yt-on { opacity: 1; z-index: 1; }
@media (min-width: 768px) {
  /* Desktop: collapse the stage (player still plays hidden) for the audio-only feel. */
  .yt-stage { max-width: 1px; height: 1px; padding-bottom: 0; margin: 0 auto; opacity: 0; }
}

/* "Crossfade…" indicator while two songs overlap */
.xfade-indicator {
  font-size: 12px;
  font-weight: 600;
  color: #16a085;
  margin-left: 10px;
  vertical-align: middle;
  animation: xfadePulse 1s ease-in-out infinite;
}
@keyframes xfadePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Queue item actions (play now / play next / remove) */
.queue-actions { margin-top: 6px; }
.queue-actions .btn { margin: 0 3px 3px 0; }

/* Inline search ("Poné música" page) */
#top-search-terms .btn { margin: 2px 4px 2px 0; }
#searchResults { border-bottom: 1px solid #eee; padding-bottom: 12px; margin-bottom: 16px; }

/* The whole song card is the tap target (not just the image) */
.songCard { cursor: pointer; }
.songCard .item-media-content { cursor: pointer; }
.songCard .item-title { color: inherit; }
.songCard:hover { opacity: .92; }
.songCard.song-added { opacity: .45; }

/* "Most played" play-count badge */
#top5List .item { position: relative; }
#top5List .top-count {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.55);
  border-radius: 10px;
  padding: 1px 8px;
  line-height: 1.6;
}
#top5List .top-count .fa { font-size: 9px; margin-right: 2px; }

/* Don't pin the sidebar on top of content on small screens — let it stack */
@media (max-width: 991px) {
  [data-ui-jp="stick_in_parent"] {
    position: static !important;
    bottom: auto !important;
    top: auto !important;
  }
  .console-sidebar { margin-top: 8px; }
}