/* Monetization UI (scoped)
   These rules are intentionally scoped to avoid impacting the rest of the site.
*/

/* Keep header actions on one line */
body.page-home .topbar__inner,
body.page-member .topbar__inner,
body.page-monetization .topbar__inner{
  flex-wrap: nowrap;
}

body.page-home .topbar__actions,
body.page-member .topbar__actions,
body.page-monetization .topbar__actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  min-width:0;
}

/* Desktop/mobile helper labels (homepage only) */
body.page-home .only-mobile{ display:none; }

/* Home topbar buttons (Upgrade / Monetised / My Account / URL Upload)
   Designed to match the compact style shown in the user's reference.
*/
body.page-home .topbar__actions{
  display:flex;
  align-items:center;
  gap: 12px;
}

body.page-home .topbar-btn{
  appearance:none;
  border: 0;
  background: transparent;
  /* Home topbar sits on a dark background */
  color: rgba(255,255,255,.92);
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  /* Use a weight available on all pages to avoid the navbar looking
     "bolder" after visiting pages that load extra font weights. */
  font-weight: 600;
  font-size: 15px;
  text-decoration:none;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, filter .15s ease;
}
body.page-home .topbar-btn:hover{ background: rgba(255,255,255,.06); }
body.page-home .topbar-btn:active{ transform: translateY(1px); }
body.page-home .topbar-btn i{ font-size: 16px; line-height: 1; }

/* Trending */
body.page-home .topbar-btn--trend i{ color: #ff7a18; }

/* Status (Monetised) — keep the check on the left */
body.page-home .topbar-btn--status i{ color: #34d399; }

/* Upgrade */
body.page-home .topbar-btn--upgrade{
  color: var(--link);
  position: relative;
}
body.page-home .topbar-btn--upgrade i{ color: #f6c343; }
/* little red spark lines (decorative) */
body.page-home .topbar-btn--upgrade .upgrade-spark{
  position:absolute;
  right:-2px;
  top:-2px;
  width: 16px;
  height: 16px;
  pointer-events:none;
}
body.page-home .topbar-btn--upgrade .upgrade-spark::before,
body.page-home .topbar-btn--upgrade .upgrade-spark::after{
  content:"";
  position:absolute;
  width: 2px;
  height: 9px;
  background: #ff4d4f;
  border-radius: 2px;
  opacity: .95;
}
body.page-home .topbar-btn--upgrade .upgrade-spark::before{ right:3px; top:0px; transform: rotate(22deg); }
body.page-home .topbar-btn--upgrade .upgrade-spark::after{ right:9px; top:3px; transform: rotate(-18deg); }

/* My Account dropdown */
body.page-home .topbar-btn--account{
  color: rgba(255,255,255,.92);
}
body.page-home .topbar-btn--account.dropdown-toggle::after{
  margin-left: 3px;
  opacity: .8;
}

/* Upload from a website (top menu) */
body.page-home .topbar-btn--upload{
  color: rgba(255,255,255,.92);
}

/* Member page: use the same topbar button design as the homepage */
body.page-member .topbar__actions{
  display:flex;
  align-items:center;
  gap: 12px;
}

body.page-member .topbar-btn{
  appearance:none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.92);
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  /* Keep weight consistent across the site (same reason as homepage) */
  font-weight: 600;
  font-size: 15px;
  text-decoration:none;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, filter .15s ease;
}
body.page-member .topbar-btn:hover{ background: rgba(255,255,255,.06); }
body.page-member .topbar-btn:active{ transform: translateY(1px); }
body.page-member .topbar-btn i{ font-size: 16px; line-height: 1; }

body.page-member .topbar-btn--trend i{ color: #ff7a18; }
body.page-member .topbar-btn--status i{ color: #34d399; }

body.page-member .topbar-btn--upgrade{
  color: var(--link);
  position: relative;
}
body.page-member .topbar-btn--upgrade i{ color: #f6c343; }
body.page-member .topbar-btn--upgrade .upgrade-spark{ position:absolute; right:-2px; top:-2px; width:16px; height:16px; pointer-events:none; }
body.page-member .topbar-btn--upgrade .upgrade-spark::before,
body.page-member .topbar-btn--upgrade .upgrade-spark::after{ content:""; position:absolute; width:2px; height:9px; background:#ff4d4f; border-radius:2px; opacity:.95; }
body.page-member .topbar-btn--upgrade .upgrade-spark::before{ right:3px; top:0px; transform: rotate(22deg); }
body.page-member .topbar-btn--upgrade .upgrade-spark::after{ right:9px; top:3px; transform: rotate(-18deg); }

body.page-member .topbar-btn--account{ color: rgba(255,255,255,.92); }
body.page-member .topbar-btn--account.dropdown-toggle::after{ margin-left: 3px; opacity: .8; }

/* Upload from a website button (homepage top menu)
   - Desktop: "Upload from a website"
   - Mobile: "URL Upload"
*/
body.page-home .website-upload-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
body.page-home .website-upload-label--mobile{ display:none; }

@media (max-width: 768px){
  /* Tighter spacing between topbar buttons on mobile */
  body.page-home .topbar__actions{ gap: 6px; }

  /* Generic desktop/mobile helpers */
  body.page-home .only-desktop{ display:none !important; }
  body.page-home .only-mobile{ display:inline !important; }

  /* Slightly tighter topbar buttons */
  body.page-home .topbar-btn{ padding: 7px 8px; font-size: 14px; }

  /* Mobile: keep My Account caret closer */
  body.page-home .topbar-btn--account.dropdown-toggle::after{ margin-left: 2px; }

  /* Mobile: Trending shows icon only (hide the word) */

  body.page-home .topbar-btn--trend{ gap:0; }

  /* Website upload label swap */
  body.page-home .website-upload-btn{ padding:8px 10px; }
  body.page-home .website-upload-label--desktop{ display:none; }
  body.page-home .website-upload-label--mobile{ display:inline; }
}

/* =========================
   Member page topbar (same look as home)
   ========================= */
body.page-member .topbar__actions{
  display:flex;
  align-items:center;
  gap: 12px;
}

body.page-member .topbar-btn{
  appearance:none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.92);
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  text-decoration:none;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, filter .15s ease;
}
body.page-member .topbar-btn:hover{ background: rgba(255,255,255,.06); }
body.page-member .topbar-btn:active{ transform: translateY(1px); }
body.page-member .topbar-btn i{ font-size: 16px; line-height: 1; }

body.page-member .topbar-btn--trend i{ color: #ff7a18; }
body.page-member .topbar-btn--status i{ color: #34d399; }
body.page-member .topbar-btn--upgrade{ color: var(--link); position: relative; }
body.page-member .topbar-btn--upgrade i{ color: #f6c343; }
body.page-member .topbar-btn--upgrade .upgrade-spark{ position:absolute; right:-2px; top:-2px; width:16px; height:16px; pointer-events:none; }
body.page-member .topbar-btn--upgrade .upgrade-spark::before,
body.page-member .topbar-btn--upgrade .upgrade-spark::after{ content:""; position:absolute; width:2px; height:9px; background:#ff4d4f; border-radius:2px; opacity:.95; }
body.page-member .topbar-btn--upgrade .upgrade-spark::before{ right:3px; top:0px; transform: rotate(22deg); }
body.page-member .topbar-btn--upgrade .upgrade-spark::after{ right:9px; top:3px; transform: rotate(-18deg); }

body.page-member .topbar-btn--account.dropdown-toggle::after{ margin-left: 3px; opacity: .8; }

@media (max-width: 768px){
  body.page-member .topbar__actions{ gap: 6px; }
  body.page-member .topbar-btn{ padding: 7px 8px; font-size: 14px; }
  body.page-member .topbar-btn--account.dropdown-toggle::after{ margin-left: 2px; }
  body.page-member .topbar-btn--trend span{ display:none; }
  body.page-member .topbar-btn--trend{ gap:0; }
}

/* Monetization page: ensure card uses theme variables */
body.page-monetization .monet-card{
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

body.page-monetization .monet-card h1,
body.page-monetization .monet-card h2,
body.page-monetization .monet-card h3,
body.page-monetization .monet-card p,
body.page-monetization .monet-card li,
body.page-monetization .monet-card label,
body.page-monetization .monet-card .small-muted{
  color: var(--text) !important;
}

body.page-monetization .monet-card .small-muted{ color: var(--muted) !important; }

body.page-monetization .monet-card input,
body.page-monetization .monet-card textarea{
  background: var(--surface2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

body.page-monetization .monet-card input::placeholder,
body.page-monetization .monet-card textarea::placeholder{
  color: rgba(156,163,175,.85) !important;
}