/**
 * SkankRadio Core — core.css v1.0.0
 *
 * Consolidated stylesheet for all 10 SkankRadio front-end widgets.
 * Widget styles are namespaced by class prefix so there are no conflicts:
 *
 *   .srt-*           Trending widget (includes v1.9 mobile viewport breakout)
 *   .sr-card, .sr-*  Voting widget
 *   .sr-battle-*     Battle widget
 *   .sr-rankings-*   Rankings widget
 *   .srb-*           Browse widget
 *   .srmt-*          Mobile Trending widget
 *   .sr-acct-*       Membership Account widget
 *   .sr-billing-*    Membership Billing widget
 *   .sr-cancel-*     Membership Cancel widget
 *   .sr-confirm-*    Membership Confirmation widget
 *
 * Section sourced from each widget's original .css file.
 */


/* ====================================================================== */
/* ELEMENTOR WIDGET-CONTAINER WIDTH OVERRIDES (1.2.17)                     */
/* ====================================================================== */

/**
 * Force every SkankRadio content widget's Elementor wrapper chain to fill
 * 100% of its parent column width. Without this, the theme's default
 * widget-container styles (Hello Elementor, etc.) cap widget width below
 * what the section's "Boxed at NNNN px" Content Width setting allocates,
 * producing the symptom: "I set the section to Boxed 1800px but my widget
 * still renders at ~1140-1200px."
 *
 * The membership widgets (account/billing/cancel/confirmation) already have
 * equivalent overrides further down — this block extends the same pattern
 * to the five content widgets.
 *
 * If you DO want a widget to be capped (e.g. center it and limit its line
 * length), set "Content Width: Boxed at <whatever>" on the parent Section
 * in Elementor, NOT inside the widget's own CSS. That way every widget
 * obeys the section setting consistently.
 */
.elementor-widget-skankradio_trending,
.elementor-widget-skankradio_trending .elementor-widget-container,
.elementor-widget-skankradio_voting,
.elementor-widget-skankradio_voting .elementor-widget-container,
.elementor-widget-skankradio_battle,
.elementor-widget-skankradio_battle .elementor-widget-container,
.elementor-widget-skankradio_rankings,
.elementor-widget-skankradio_rankings .elementor-widget-container,
.elementor-widget-skankradio_browse,
.elementor-widget-skankradio_browse .elementor-widget-container,
.elementor-widget-skankradio_mobile_trending,
.elementor-widget-skankradio_mobile_trending .elementor-widget-container,
.elementor-widget-skankradio_upload,
.elementor-widget-skankradio_upload .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
}


/* ====================================================================== */
/* TRENDING (v1.9 — includes mobile viewport breakout fix)                  */
/* ====================================================================== */

/**
 * SkankRadio Trending Widget — trending.css v1.9
 * Save as UTF-8 (NO BOM).
 *
 * v1.9: Mobile viewport breakout. The mobile media query now forces the
 *       trending widget to span the full viewport width regardless of any
 *       parent Elementor container that may be constraining it narrower
 *       than viewport (the right-shift bug we couldn't track down). Uses
 *       the standard "left:50% + margin-left:-50vw + width:100vw" pattern.
 *       Also forces the grid and cards to full width with !important to
 *       override any inherited width constraints.
 *
 * v1.8: text-decoration: none on .srt-buy-btn so the Free · Download anchor
 *       variant (introduced in trending.js v1.4) doesn't render underlined.
 *
 * v1.7: nudge buy label up 1.5px to fix optical centering (font-metrics).
 *
 * v1.6: vertically center buy button label via inline-flex.
 *
 * v1.5: lock right-side columns (buy / genre / score) to fixed widths so
 *       they align across cards regardless of title length. Info column
 *       now flex-grows to fill remaining space.
 *
 * v1.4: style WooCommerce's injected "View cart" link (.added_to_cart)
 *       so it matches site palette and has breathing room from the buy button.
 *
 * Color palette:
 *   bg #0a0a0a, card #1a1a1a, gold #F9AB03, green #16bc0e, text #ffffff
 *
 * Site button style (from site facts):
 *   green bg, 2px orange border, 10px radius, 4px/16px padding, white text
 *   hover: orange bg, green border, white text
 */

#skankradio-trending {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  font-family: inherit;
  color: #ffffff;
  box-sizing: border-box;
}

#skankradio-trending *,
#skankradio-trending *::before,
#skankradio-trending *::after {
  box-sizing: border-box;
}

#skankradio-trending .srt-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  color: #888;
  font-size: 14px;
}

#skankradio-trending .srt-loading__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 32px;
}

#skankradio-trending .srt-loading__bars span {
  display: block;
  width: 5px;
  background: #F9AB03;
  border-radius: 2px;
  animation: srt-bar-bounce 1s ease-in-out infinite;
}

#skankradio-trending .srt-loading__bars span:nth-child(1) { animation-delay: 0s;    height: 12px; }
#skankradio-trending .srt-loading__bars span:nth-child(2) { animation-delay: 0.15s; height: 20px; }
#skankradio-trending .srt-loading__bars span:nth-child(3) { animation-delay: 0.30s; height: 32px; }
#skankradio-trending .srt-loading__bars span:nth-child(4) { animation-delay: 0.45s; height: 20px; }
#skankradio-trending .srt-loading__bars span:nth-child(5) { animation-delay: 0.60s; height: 12px; }

@keyframes srt-bar-bounce {
  0%, 100% { transform: scaleY(0.5); opacity: 0.6; }
  50%      { transform: scaleY(1);   opacity: 1;   }
}

#skankradio-trending .srt-empty,
#skankradio-trending .srt-error {
  text-align: center;
  padding: 48px 24px;
  color: #ccc;
  font-size: 15px;
}

#skankradio-trending .srt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
}

#skankradio-trending .srt-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: #1a1a1a;
  border: 2px solid #16bc0e;
  border-radius: 12px;
  box-shadow:
    0 0 10px rgba(22, 188, 14, 0.35),
    0 0 24px rgba(22, 188, 14, 0.15);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  min-height: 100px;
}

#skankradio-trending .srt-card:hover {
  box-shadow:
    0 0 16px rgba(22, 188, 14, 0.55),
    0 0 40px rgba(22, 188, 14, 0.25);
}

#skankradio-trending .srt-card_cover {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
}

#skankradio-trending .srt-card_cover-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 2px solid #ffffff;
  border-radius: 8px;
  display: block;
}

#skankradio-trending .srt-card_cover-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  color: #16bc0e;
  font-size: 32px;
  line-height: 1;
}

#skankradio-trending .srt-card_play {
  flex: 0 0 auto;
}

#skankradio-trending .srt-play-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid #16bc0e;
  border-radius: 50%;
  background: transparent;
  color: #16bc0e;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
  position: relative;
}

#skankradio-trending .srt-play-btn:hover {
  border-color: #F9AB03;
  transform: scale(1.05);
}

#skankradio-trending .srt-play-btn:focus-visible {
  outline: 2px solid #F9AB03;
  outline-offset: 2px;
}

#skankradio-trending .srt-play-btn_img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}

#skankradio-trending .srt-play-btn_img--pause { display: none; }
#skankradio-trending .srt-play-btn.is-playing .srt-play-btn_img--play  { display: none; }
#skankradio-trending .srt-play-btn.is-playing .srt-play-btn_img--pause { display: block; }

#skankradio-trending .srt-play-btn_icon {
  width: 60%;
  height: 60%;
  display: block;
}
#skankradio-trending .srt-play-btn_icon--pause { display: none; }
#skankradio-trending .srt-play-btn.is-playing .srt-play-btn_icon--play  { display: none; }
#skankradio-trending .srt-play-btn.is-playing .srt-play-btn_icon--pause { display: block; }

#skankradio-trending .srt-card_info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

#skankradio-trending .srt-card_title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #F9AB03;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#skankradio-trending .srt-card_artist {
  margin: 0;
  font-size: 13px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#skankradio-trending .srt-card_genre {
  align-self: flex-start;
  display: inline-block;
  margin-top: 2px;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #F9AB03;
  border: 1px solid #F9AB03;
  border-radius: 999px;
  background: rgba(249, 171, 3, 0.08);
  white-space: nowrap;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#skankradio-trending .srt-card_score {
  flex: 0 0 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

#skankradio-trending .srt-card_score-value {
  font-size: 22px;
  font-weight: 700;
  color: #16bc0e;
  line-height: 1;
}

#skankradio-trending .srt-card_score-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #888;
}

/* ---------- BUY BUTTON ---------- */

#skankradio-trending .srt-card_buy {
  flex: 0 0 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#skankradio-trending .srt-buy-btn_label {
  display: inline-block;
  transform: translateY(-1px);
}

#skankradio-trending .srt-buy-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #F9AB03;
  border-radius: 8px;
  background: #16bc0e;
  color: #ffffff;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  min-height: 30px;
  line-height: 1;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#skankradio-trending .srt-buy-btn:hover:not(:disabled):not(.is-added):not(.is-error) {
  background: #F9AB03;
  border-color: #16bc0e;
  color: #ffffff;
  transform: translateY(-1px);
}

#skankradio-trending .srt-buy-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

#skankradio-trending .srt-buy-btn:disabled {
  cursor: default;
  opacity: 0.85;
}

#skankradio-trending .srt-buy-btn.is-loading {
  background: #0d0d0d;
  color: #F9AB03;
  border-color: #F9AB03;
}

#skankradio-trending .srt-buy-btn.is-added {
  background: #F9AB03;
  border-color: #16bc0e;
  color: #0d0d0d;
}

#skankradio-trending .srt-buy-btn.is-error {
  background: #5a1a1a;
  border-color: #ff6b6b;
  color: #ffffff;
}

/* ---------- VIEW CART LINK (injected by WooCommerce after add-to-cart) ---------- */

#skankradio-trending .srt-card_buy a.added_to_cart,
#skankradio-trending a.added_to_cart {
  color: #F9AB03 !important;
  margin-left: 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  align-self: center;
}

#skankradio-trending .srt-card_buy a.added_to_cart:hover,
#skankradio-trending a.added_to_cart:hover {
  color: #16bc0e !important;
  text-decoration: underline;
}

@media (max-width: 900px) {
  /* Viewport breakout — escape any constrained parent Elementor container.
     This forces the trending widget to span actual viewport width on mobile
     regardless of how narrow its parent is. */
  #skankradio-trending {
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 16px 12px !important;
    box-sizing: border-box !important;
  }

  #skankradio-trending .srt-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #skankradio-trending .srt-card {
    padding: 10px 14px;
    gap: 12px;
    flex-wrap: wrap;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #skankradio-trending .srt-card_cover,
  #skankradio-trending .srt-card_cover-img {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  #skankradio-trending .srt-play-btn {
    width: 40px;
    height: 40px;
  }

  #skankradio-trending .srt-card_genre {
    display: none;
  }

  #skankradio-trending .srt-buy-btn {
    font-size: 13px;
    padding: 4px 12px;
    min-height: 32px;
  }
}


/* ====================================================================== */
/* VOTING */
/* ====================================================================== */

/**
 * SkankRadio Voting Widget — voting.css
 * Save as UTF-8 (NO BOM).
 */

body {
  margin: 0;
  background: #0d0d0d;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  color: #fff;
}

.sr-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px;
}

.sr-page_heading {
  margin: 0 0 24px;
  font-size: 28px;
  font-weight: 700;
  color: #F9AB03;
  letter-spacing: 0.5px;
}

/* === Voting widget container ===
 * margin-bottom: forces vertical breathing room between this widget and the
 * next section (Battlezone, etc.) so they never visually crowd or overlap.
 * Override at the bottom of this block specifically targets the case where
 * a parent Elementor section has a fixed Min Height set in the editor for
 * desktop — on narrower viewports the stacked card grows taller than that
 * fixed height and the following section ends up overlapping. */
#skankradio-app {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 40px;
  font-family: inherit;
  color: #ffffff;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

/* Clear any fixed Elementor parent height around the voting widget at
 * tablet/mobile breakpoints so the widget's content can drive its own
 * height instead of being clipped by a desktop-tuned Min Height. */
@media (max-width: 1024px) {
  .elementor-section:has(#skankradio-app),
  .elementor-element:has(> #skankradio-app),
  .e-con:has(#skankradio-app),
  .e-con:has(> #skankradio-app) {
    min-height: 0 !important;
    height: auto !important;
  }
  #skankradio-app {
    margin-bottom: 60px;
  }
}

#skankradio-app *,
#skankradio-app *::before,
#skankradio-app *::after {
  box-sizing: border-box;
}

#skankradio-app .sr-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  color: #888;
  font-size: 14px;
}

#skankradio-app .sr-loading__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 32px;
}

#skankradio-app .sr-loading__bars span {
  display: block;
  width: 5px;
  background: #F9AB03;
  border-radius: 2px;
  animation: sr-bar-bounce 1s ease-in-out infinite;
}

#skankradio-app .sr-loading__bars span:nth-child(1) { animation-delay: 0s;    height: 12px; }
#skankradio-app .sr-loading__bars span:nth-child(2) { animation-delay: 0.15s; height: 20px; }
#skankradio-app .sr-loading__bars span:nth-child(3) { animation-delay: 0.30s; height: 32px; }
#skankradio-app .sr-loading__bars span:nth-child(4) { animation-delay: 0.45s; height: 20px; }
#skankradio-app .sr-loading__bars span:nth-child(5) { animation-delay: 0.60s; height: 12px; }

@keyframes sr-bar-bounce {
  0%, 100% { transform: scaleY(0.5); opacity: 0.6; }
  50%      { transform: scaleY(1);   opacity: 1;   }
}

#skankradio-app .sr-empty,
#skankradio-app .sr-error,
#skankradio-app .sr-all-voted {
  text-align: center;
  padding: 48px 24px;
  color: #ccc;
  font-size: 15px;
}

#skankradio-app .sr-all-voted p {
  font-size: 17px;
  color: #fff;
  margin-bottom: 20px;
}

/* ─── CARD: 4-column flex row, fills section width ─── */
#skankradio-app .sr-card {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 28px !important;
  padding: 16px 50px !important;
  height: 232px !important;
  max-height: 232px !important;
  width: 100% !important;
  margin: 0 auto !important;
  background: #1a1a1a;
  border: 2px solid #16bc0e;
  border-radius: 12px;
  box-shadow:
    0 0 10px rgba(22, 188, 14, 0.35),
    0 0 24px rgba(22, 188, 14, 0.15);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  box-sizing: border-box;
}

#skankradio-app .sr-card:hover {
  box-shadow:
    0 0 16px rgba(22, 188, 14, 0.55),
    0 0 40px rgba(22, 188, 14, 0.25);
}

#skankradio-app .sr-card--voted { opacity: 0.75; }

/* 1. Cover */
#skankradio-app .sr-card_cover {
  flex: 0 0 200px !important;
  width: 200px !important;
  height: 200px !important;
  align-self: center !important;
  display: block;
}
#skankradio-app .sr-card_cover-img {
  width: 200px !important;
  height: 200px !important;
  object-fit: cover !important;
  border: 2px solid #ffffff;
  border-radius: 10px;
  display: block;
}
#skankradio-app .sr-card_cover-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  color: #16bc0e;
  font-size: 64px;
  line-height: 1;
}

/* 2. Play button */
#skankradio-app .sr-card_play {
  flex: 0 0 auto !important;
  align-self: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#skankradio-app .sr-play-btn {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid #16bc0e;
  border-radius: 50%;
  background: transparent;
  color: #16bc0e;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

#skankradio-app .sr-play-btn:hover {
  background: #16bc0e;
  color: #000;
  transform: scale(1.05);
}

#skankradio-app .sr-play-btn_icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
#skankradio-app .sr-play-btn_icon--pause { display: none; }
#skankradio-app .sr-play-btn.is-playing .sr-play-btn_icon--play  { display: none; }
#skankradio-app .sr-play-btn.is-playing .sr-play-btn_icon--pause { display: block; }

#skankradio-app .sr-play-btn_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
#skankradio-app .sr-play-btn_img--pause { display: none; }
#skankradio-app .sr-play-btn.is-playing .sr-play-btn_img--play  { display: none; }
#skankradio-app .sr-play-btn.is-playing .sr-play-btn_img--pause { display: block; }

/* 3. Info column — scores stacked over title over artist, vertically centered */
#skankradio-app .sr-card_info {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 6px !important;
  min-width: 0 !important;
  align-self: center !important;
}

#skankradio-app .sr-card_info .sr-card_scores {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 4px 0 !important;
}

#skankradio-app .sr-card_score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 44px;
  font-weight: 600;
  line-height: 1.1;
}

#skankradio-app .sr-card_score-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #888;
}

#skankradio-app .sr-card_score-value {
  font-size: 18px;
  font-weight: 700;
}

#skankradio-app .sr-card_score-up    .sr-card_score-value { color: #16bc0e; }
#skankradio-app .sr-card_score-down  .sr-card_score-value { color: #ff4444; }
#skankradio-app .sr-card_score-total .sr-card_score-value { color: #ffffff; }

#skankradio-app .sr-card_title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #F9AB03;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#skankradio-app .sr-card_artist {
  margin: 0;
  font-size: 15px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 4. Genre — flexible, sits between info and buttons */
#skankradio-app .sr-card_genre {
  flex: 0 0 auto !important;
  align-self: center !important;
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #F9AB03;
  border: 1px solid #F9AB03;
  border-radius: 999px;
  background: rgba(249, 171, 3, 0.08);
  white-space: nowrap;
}

/* 5. Fire/Meh buttons */
#skankradio-app .sr-card_actions {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  align-self: center !important;
  gap: 8px !important;
}

#skankradio-app .sr-card_vote-buttons {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
}

#skankradio-app .sr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, filter 0.15s ease;
}

#skankradio-app .sr-btn:hover  { transform: translateY(-1px); filter: brightness(1.08); }
#skankradio-app .sr-btn:active { transform: translateY(0);    filter: brightness(0.95); }
#skankradio-app .sr-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

#skankradio-app .sr-btn--fire { background: #16bc0e; color: #000; }
#skankradio-app .sr-btn--trash { background: #F9AB03; color: #000; }

#skankradio-app .sr-btn_icon  { font-size: 16px; line-height: 1; display: inline-block; }
#skankradio-app .sr-btn img.sr-btn_icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}
#skankradio-app .sr-btn_label { line-height: 1; }

/* Vote feedback overlay */
#skankradio-app .sr-feedback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #000;
  background: rgba(22, 188, 14, 0.92);
  animation: sr-feedback-in 0.9s ease forwards;
  pointer-events: none;
  z-index: 5;
}

#skankradio-app .sr-feedback--trash {
  background: rgba(249, 171, 3, 0.92);
}

@keyframes sr-feedback-in {
  0%   { opacity: 0; transform: scale(0.92); }
  20%  { opacity: 1; transform: scale(1);    }
  80%  { opacity: 1; transform: scale(1);    }
  100% { opacity: 0; transform: scale(1.04); }
}

/* Mobile — collapse to single column */
@media (max-width: 900px) {
  #skankradio-app .sr-card {
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    padding: 16px !important;
    gap: 14px !important;
  }

  #skankradio-app .sr-card_cover,
  #skankradio-app .sr-card_cover-img {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  #skankradio-app .sr-card_info {
    align-items: center !important;
    text-align: center !important;
  }

  #skankradio-app .sr-card_title,
  #skankradio-app .sr-card_artist {
    white-space: normal !important;
  }

  #skankradio-app .sr-card_vote-buttons {
    width: 100% !important;
  }

  #skankradio-app .sr-btn {
    flex: 1 1 0 !important;
  }
}


/* ====================================================================== */
/* BATTLE */
/* ====================================================================== */

/**
 * SkankRadio Battle Widget — battle.css
 * Single unified card layout with column dividers.
 * Save as UTF-8 (NO BOM).
 */

#skankradio-battle-app {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #ffffff;
  box-sizing: border-box;
}
#skankradio-battle-app *, #skankradio-battle-app *::before, #skankradio-battle-app *::after {
  box-sizing: border-box;
}

/* ── Loading ─────────────────────────────────────────────── */
.sr-battle-loading {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 48px 24px; color: #ffffff; font-size: 14px;
}
.sr-battle-loading .sr-loading__bars {
  display: flex; align-items: flex-end; gap: 4px; height: 32px;
}
.sr-battle-loading .sr-loading__bars span {
  display: block; width: 5px; background: #F9AB03; border-radius: 2px;
  animation: sr-bar-bounce 1s ease-in-out infinite;
}
.sr-battle-loading .sr-loading__bars span:nth-child(1){animation-delay:0s;height:12px}
.sr-battle-loading .sr-loading__bars span:nth-child(2){animation-delay:.15s;height:20px}
.sr-battle-loading .sr-loading__bars span:nth-child(3){animation-delay:.30s;height:32px}
.sr-battle-loading .sr-loading__bars span:nth-child(4){animation-delay:.45s;height:20px}
.sr-battle-loading .sr-loading__bars span:nth-child(5){animation-delay:.60s;height:12px}
@keyframes sr-bar-bounce {
  0%,100%{transform:scaleY(.5);opacity:.6} 50%{transform:scaleY(1);opacity:1}
}

/* ── Empty / all-voted ───────────────────────────────────── */
.sr-battle-empty, .sr-battle-all-voted {
  text-align: center; padding: 48px 24px; color: #ffffff; font-size: 15px;
}
.sr-battle-all-voted p { font-size: 17px; color: #fff; margin-bottom: 20px; }

/* ── Wrap ────────────────────────────────────────────────── */
.sr-battle-wrap {
  width: 100%; max-width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; gap: 24px;
}

/* ── Single unified card ─────────────────────────────────── */
.sr-battle-5col {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  background: #1a1a1a;
  border: 2px solid #16bc0e;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(22,188,14,0.2), 0 0 40px rgba(22,188,14,0.08);
  overflow: hidden;
}

/* ── Columns ─────────────────────────────────────────────── */
.sr-battle-col {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.sr-battle-col--scorecard {
  flex: 2 1 0;
}
.sr-battle-col--card {
  flex: 3 1 0;
  border-left: 1px solid #2a2a2a;
  border-right: 1px solid #2a2a2a;
}
.sr-battle-col--vs {
  flex: 0 0 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #2a2a2a;
  border-right: 1px solid #2a2a2a;
}
.sr-battle-vs {
  transform: translateY(14px);
}
.sr-battle-col--scorecard:last-child {
  border-left: 1px solid #2a2a2a;
}

/* ── Scorecard ───────────────────────────────────────────── */
.sr-scorecard {
  padding: 28px 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.sr-scorecard--empty { justify-content: center; color: #ffffff; }

.sr-scorecard_battle-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: #ffffff; width: 100%; text-align: center;
}

.sr-scorecard_cover {
  width: 160px; height: 160px; object-fit: cover;
  border-radius: 8px; border: 2px solid #ffffff; display: block;
  flex-shrink: 0;
}
.sr-scorecard_cover--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: #0d0d0d; color: #16bc0e; font-size: 40px;
  border-radius: 8px; border: 2px solid #ffffff;
  width: 160px; height: 160px; flex-shrink: 0;
}

.sr-scorecard_info {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center; width: 100%;
}
.sr-scorecard_title {
  margin: 0; font-size: 14px; font-weight: 700;
  color: var(--accent, #16bc0e); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.sr-scorecard_artist { margin: 0; font-size: 12px; color: #ffffff; }
.sr-scorecard_genre {
  display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: #F9AB03;
  border: 1px solid #F9AB03; border-radius: 999px; background: rgba(249,171,3,.08);
  white-space: nowrap;
}

.sr-scorecard_stats {
  display: flex; flex-direction: row; justify-content: space-around;
  width: 100%; gap: 8px;
}
.sr-scorecard_stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1;
}
.sr-scorecard_stat-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: #ffffff;
}
.sr-scorecard_stat-value { font-size: 24px; font-weight: 900; line-height: 1; }

.sr-scorecard_bar-wrap {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.sr-scorecard_bar {
  width: 100%; height: 8px; background: #333333;
  border-radius: 999px; overflow: hidden;
}
.sr-scorecard_bar-fill {
  height: 100%; border-radius: 999px; transition: width 0.6s ease; min-width: 4px;
}
.sr-scorecard_pct { font-size: 13px; font-weight: 700; color: #ffffff; }

/* ── VS badge ────────────────────────────────────────────── */
.sr-battle-vs {
  display: flex; align-items: center; justify-content: center;
}
.sr-battle-vs_text {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: #F9AB03; color: #000;
  font-size: 18px; font-weight: 900; letter-spacing: 1px;
  border: 2px solid #ffffff;
  box-shadow: 0 0 16px rgba(249,171,3,0.5);
}

/* ── Battle card ─────────────────────────────────────────── */
.sr-battle-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 28px 20px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  width: 100%;
  transition: background 0.2s ease;
}
.sr-battle-card:hover { background: rgba(22,188,14,0.04); }
.sr-battle-card--empty { justify-content: center; color: #ffffff; }

/* ── Cover ───────────────────────────────────────────────── */
.sr-battle-card_cover { width: 100%; display: flex; justify-content: center; }
.sr-battle-card_cover-img {
  width: 160px; height: 160px; object-fit: cover;
  border: 2px solid #ffffff; border-radius: 10px; display: block;
  flex-shrink: 0;
}
.sr-battle-card_cover-img--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: #0d0d0d; color: #16bc0e; font-size: 64px;
  line-height: 1; width: 160px; height: 160px;
  border: 2px solid #ffffff; border-radius: 10px;
}

/* ── Play btn ────────────────────────────────────────────── */
.sr-battle-card_play { display: flex; align-items: center; justify-content: center; }
.sr-battle-play-btn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  width: 58px; height: 58px; padding: 0;
  border: 2px solid #16bc0e; border-radius: 50%;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #16bc0e; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s, transform .2s;
  overflow: hidden;
}
.sr-battle-play-btn::-moz-focus-inner { border: 0; padding: 0; }
.sr-battle-play-btn:focus,
.sr-battle-play-btn:active {
  background: transparent !important;
  background-color: transparent !important;
  outline: none;
}
.sr-battle-play-btn:focus-visible {
  outline: 2px solid #F9AB03;
  outline-offset: 2px;
}
.sr-battle-play-btn:hover { border-color: #F9AB03; transform: scale(1.05); }
.sr-battle-play-btn .sr-play-btn_img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  background: transparent !important;
}
.sr-battle-play-btn .sr-play-btn_img--pause { display:none; }
.sr-battle-play-btn.is-playing .sr-play-btn_img--play  { display:none; }
.sr-battle-play-btn.is-playing .sr-play-btn_img--pause { display:block; }
.sr-battle-play-btn .sr-play-btn_icon { width:24px; height:24px; fill:#16bc0e; }
.sr-battle-play-btn .sr-play-btn_icon--pause { display:none; }
.sr-battle-play-btn.is-playing .sr-play-btn_icon--play  { display:none; }
.sr-battle-play-btn.is-playing .sr-play-btn_icon--pause { display:block; }

/* ── Card info ───────────────────────────────────────────── */
.sr-battle-card_info {
  display:flex; flex-direction:column; align-items:center;
  gap:6px; text-align:center; width:100%;
}
.sr-battle-card_title { margin:0; font-size:18px; font-weight:700; color:#F9AB03; line-height:1.2; }
.sr-battle-card_artist { margin:0; font-size:13px; color:#ffffff; }
.sr-battle-card_genre {
  display:inline-block; padding:3px 10px; font-size:10px; font-weight:700;
  letter-spacing:.8px; text-transform:uppercase; color:#F9AB03;
  border:1px solid #F9AB03; border-radius:999px; background:rgba(249,171,3,.08);
  white-space:nowrap;
}

/* ── Vote btn ────────────────────────────────────────────── */
.sr-battle-card_action { width:100%; display:flex; justify-content:center; margin-top:auto; }
.sr-battle-btn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; padding:12px 20px; border:none; border-radius:8px;
  font-size:15px; font-weight:700; font-family:inherit; cursor:pointer;
  white-space:nowrap; transition:transform .15s, filter .15s, background .2s;
}
.sr-battle-btn::-moz-focus-inner { border: 0; padding: 0; }
.sr-battle-btn:hover  { transform:translateY(-1px); filter:brightness(1.08); }
.sr-battle-btn:active { transform:translateY(0);    filter:brightness(.95); }
.sr-battle-btn[disabled] { opacity:.5; cursor:not-allowed; transform:none; filter:none; }
.sr-battle-btn--vote { width:100%; background:#16bc0e; color:#000000; font-size:15px; }
.sr-battle-btn--vote:hover:not([disabled]) { background:#F9AB03; color:#000000; }
.sr-battle-btn--reset { background:#16bc0e; color:#000000; font-size:15px; padding:14px 32px; }
.sr-battle-btn--next {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color:#ffffff;
  border:1px solid #333333;
  font-size:14px;
}
.sr-battle-btn--next:hover,
.sr-battle-btn--next:focus,
.sr-battle-btn--next:active {
  background: transparent !important;
  background-color: transparent !important;
  color:#ffffff;
  border-color:#16bc0e;
}

/* ── Vote feedback overlay ───────────────────────────────── */
.sr-battle-feedback {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:32px; font-weight:800; color:#000;
  background:rgba(22,188,14,.92);
  animation:sr-feedback-in .9s ease forwards;
  pointer-events:none; z-index:5;
}
@keyframes sr-feedback-in {
  0%  {opacity:0;transform:scale(.92)}
  20% {opacity:1;transform:scale(1)}
  80% {opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.04)}
}

/* ── Next nav ────────────────────────────────────────────── */
.sr-battle-nav { display:flex; justify-content:center; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sr-battle-5col { flex-direction: column; }
  .sr-battle-col--card,
  .sr-battle-col--scorecard {
    flex: none; width: 100%;
    border-left: none !important; border-right: none !important;
    border-top: 1px solid #2a2a2a;
  }
  .sr-battle-col--vs {
    flex: none; padding: 12px 0;
    border-left: none !important; border-right: none !important;
    border-top: 1px solid #2a2a2a;
  }
}


/* ====================================================================== */
/* BATTLE — CREATE YOUR OWN (1.4.0)                                        */
/* ====================================================================== */

/**
 * Picker rendered below the battle card so visitors can pick any two tracks
 * from the library and start a battle between them. Default collapsed; click
 * the toggle to expand.
 *
 * Structure:
 *   .sr-battle-create
 *     .sr-battle-create_toggle        — header button (collapse/expand)
 *     .sr-battle-create_panel         — body, hidden when collapsed
 *       .sr-battle-create_pickers     — two search inputs + VS divider
 *         .sr-battle-create_field × 2
 *         .sr-battle-create_vs
 *       .sr-battle-create_error       — validation message
 *       .sr-battle-create_actions     — Start Battle button
 */
.sr-battle-create {
  margin-top: 18px;
  background: #1a1a1a;
  border: 2px solid #16bc0e;
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(22, 188, 14, 0.25);
  overflow: hidden;
  font-family: inherit;
  color: #ffffff;
  box-sizing: border-box;
}

.sr-battle-create .sr-battle-create_toggle,
.sr-battle-create .sr-battle-create_toggle:hover,
.sr-battle-create .sr-battle-create_toggle:focus,
.sr-battle-create .sr-battle-create_toggle:focus-visible,
.sr-battle-create .sr-battle-create_toggle:active,
.sr-battle-create .sr-battle-create_toggle:visited {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  outline: none !important;
}

.sr-battle-create_toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  color: #F9AB03;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.sr-battle-create_toggle:hover,
.sr-battle-create_toggle:focus-visible {
  color: #ffffff;
}

.sr-battle-create_toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.sr-battle-create_panel {
  padding: 6px 20px 20px;
  border-top: 1px solid rgba(22, 188, 14, 0.25);
}

.sr-battle-create_pickers {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 16px;
  margin-top: 14px;
}

.sr-battle-create_field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sr-battle-create_field-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #F9AB03;
}

.sr-battle-create .sr-battle-create_input,
.sr-battle-create input.sr-battle-create_input {
  width: 100% !important;
  padding: 10px 12px !important;
  background: #0d0d0d !important;
  background-color: #0d0d0d !important;
  background-image: none !important;
  border: 1px solid #ffffff !important;
  border-radius: 5px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease;
}

.sr-battle-create .sr-battle-create_input::placeholder,
.sr-battle-create input.sr-battle-create_input::placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}
.sr-battle-create .sr-battle-create_input::-webkit-input-placeholder,
.sr-battle-create input.sr-battle-create_input::-webkit-input-placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}
.sr-battle-create .sr-battle-create_input::-moz-placeholder,
.sr-battle-create input.sr-battle-create_input::-moz-placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}
.sr-battle-create .sr-battle-create_input:-ms-input-placeholder,
.sr-battle-create input.sr-battle-create_input:-ms-input-placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}

.sr-battle-create .sr-battle-create_input:focus,
.sr-battle-create input.sr-battle-create_input:focus {
  outline: none !important;
  border-color: #16bc0e !important;
  box-shadow: none !important;
}

.sr-battle-create_vs {
  font-size: 18px;
  font-weight: 700;
  color: #F9AB03;
  letter-spacing: 1px;
  padding: 0 4px 10px;
}

.sr-battle-create_error {
  margin: 10px 0 0;
  color: #ff8a3d;
  font-size: 13px;
}

.sr-battle-create_actions {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

/* Start Battle — site-standard outline button. Maximum-aggression overrides
   so the theme's button defaults can't reach in. The disabled state uses a
   softer fade (text-only) instead of opacity-on-everything, so the green
   border and white text are clearly visible even before the user has picked
   both tracks. */
html body .sr-battle-create .sr-battle-create_start,
html body .sr-battle-create button.sr-battle-create_start,
html body .sr-battle-create .sr-battle-create_start:hover,
html body .sr-battle-create button.sr-battle-create_start:hover,
html body .sr-battle-create .sr-battle-create_start:focus,
html body .sr-battle-create button.sr-battle-create_start:focus,
html body .sr-battle-create .sr-battle-create_start:focus-visible,
html body .sr-battle-create .sr-battle-create_start:active,
html body .sr-battle-create .sr-battle-create_start:visited,
html body .sr-battle-create .sr-battle-create_start:disabled,
html body .sr-battle-create button.sr-battle-create_start:disabled {
  appearance: none !important;
  -webkit-appearance: none !important;
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 2px solid #16bc0e !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 8px 28px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  font-family: inherit !important;
  min-height: 40px !important;
  line-height: 1 !important;
  outline: none !important;
  opacity: 1 !important;
}

html body .sr-battle-create .sr-battle-create_start:hover:not(:disabled),
html body .sr-battle-create button.sr-battle-create_start:hover:not(:disabled),
html body .sr-battle-create .sr-battle-create_start:focus-visible:not(:disabled) {
  border-color: #F9AB03 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transform: translateY(-1px);
}

html body .sr-battle-create .sr-battle-create_start:disabled,
html body .sr-battle-create button.sr-battle-create_start:disabled {
  /* Softer disabled treatment — keep the green border + white text visible
     so the user can see the button's true colors before enabling it. Just
     dim the text slightly and disable the cursor. */
  color: rgba(255, 255, 255, 0.6) !important;
  cursor: not-allowed !important;
  transform: none !important;
}

@media (max-width: 700px) {
  .sr-battle-create_pickers {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sr-battle-create_vs {
    text-align: center;
    padding: 4px 0;
  }
  .sr-battle-create_field {
    width: 100%;
  }
}


/* ====================================================================== */
/* RANKINGS */
/* ====================================================================== */

/**
 * SkankRadio Rankings Widget — rankings2.css v1.1
 * Save as UTF-8 (NO BOM).
 *
 * v1.1: rank badge replaces medal emojis; FA icons replace 🔥 / 😐 / trophy.
 */

/* ── Force all text white inside rankings app ───────────── */
#skankradio-rankings-app * {
  color: inherit;
}
#skankradio-rankings-app .sr-rank-number,
#skankradio-rankings-app .sr-rankings-bar-label,
#skankradio-rankings-app .sr-rankings-row_stat-label,
#skankradio-rankings-app .sr-rankings-empty,
#skankradio-rankings-app .sr-rankings-loading p {
  color: #ffffff !important;
}

#skankradio-rankings-app {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #ffffff;
  box-sizing: border-box;
}
#skankradio-rankings-app *, #skankradio-rankings-app *::before, #skankradio-rankings-app *::after {
  box-sizing: border-box;
}

/* ── Remove any default widget borders/lines ─────────────── */
.elementor-widget-skankradio_rankings,
.elementor-widget-skankradio_rankings .elementor-widget-container {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ── Loading ─────────────────────────────────────────────── */
.sr-rankings-loading {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 48px 24px; color: #ffffff; font-size: 14px;
}
.sr-rankings-loading .sr-loading__bars {
  display: flex; align-items: flex-end; gap: 4px; height: 32px;
}
.sr-rankings-loading .sr-loading__bars span {
  display: block; width: 5px; background: #F9AB03; border-radius: 2px;
  animation: sr-bar-bounce 1s ease-in-out infinite;
}
.sr-rankings-loading .sr-loading__bars span:nth-child(1){animation-delay:0s;height:12px}
.sr-rankings-loading .sr-loading__bars span:nth-child(2){animation-delay:.15s;height:20px}
.sr-rankings-loading .sr-loading__bars span:nth-child(3){animation-delay:.30s;height:32px}
.sr-rankings-loading .sr-loading__bars span:nth-child(4){animation-delay:.45s;height:20px}
.sr-rankings-loading .sr-loading__bars span:nth-child(5){animation-delay:.60s;height:12px}
@keyframes sr-bar-bounce {
  0%,100%{transform:scaleY(.5);opacity:.6} 50%{transform:scaleY(1);opacity:1}
}

/* ── Empty ───────────────────────────────────────────────── */
.sr-rankings-empty {
  text-align: center; padding: 48px 24px; color: #ffffff; font-size: 15px;
}

/* ── Wrap ────────────────────────────────────────────────── */
.sr-rankings-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Track row ───────────────────────────────────────────── */
.sr-rankings-row {
  display: grid;
  /* v1.16.5: added trailing 110px column for the buy/free-download button. */
  grid-template-columns: 64px 88px 1fr 110px 220px 220px 130px;
  align-items: center;
  padding: 18px 24px;
  background: #1a1a1a;
  border: 2px solid #16bc0e;
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  gap: 0;
  box-shadow: 0 0 10px rgba(22,188,14,0.2);
}
.sr-rankings-row:hover {
  border-color: #16bc0e;
  box-shadow: 0 0 20px rgba(22,188,14,0.35);
}
.sr-rankings-row--top {
  border-color: #F9AB03;
  box-shadow: 0 0 12px rgba(249,171,3,0.25);
}
.sr-rankings-row--top:hover {
  box-shadow: 0 0 24px rgba(249,171,3,0.45);
}

/* ── Rank badge (numbered circle) ────────────────────────── */
.sr-rankings-row_rank {
  display: flex; align-items: center; justify-content: center;
}
#skankradio-rankings-app .sr-rank-badge {
  width: 40px; height: 40px;
  min-width: 40px; min-height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  border: 2px solid;
  line-height: 1;
  box-sizing: border-box;
}
#skankradio-rankings-app .sr-rank-badge--gold {
  background: #F9AB03;
  border-color: #F9AB03;
  color: #000000 !important;
  box-shadow: 0 0 10px rgba(249,171,3,0.5);
}
#skankradio-rankings-app .sr-rank-badge--silver {
  background: #C0C0C0;
  border-color: #C0C0C0;
  color: #000000 !important;
  box-shadow: 0 0 8px rgba(192,192,192,0.4);
}
#skankradio-rankings-app .sr-rank-badge--bronze {
  background: #CD7F32;
  border-color: #CD7F32;
  color: #000000 !important;
  box-shadow: 0 0 8px rgba(205,127,50,0.4);
}
#skankradio-rankings-app .sr-rank-badge--default {
  background: transparent;
  border-color: #16bc0e;
  color: #ffffff !important;
}

/* ── Cover ───────────────────────────────────────────────── */
.sr-rankings-row_cover-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 0 10px;
}
.sr-rankings-row_cover {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 6px; border: 2px solid #ffffff; display: block;
}
.sr-rankings-row_cover--placeholder {
  width: 64px; height: 64px; border-radius: 6px;
  background: #0d0d0d; border: 2px solid #ffffff;
  display: flex; align-items: center; justify-content: center;
  color: #16bc0e; font-size: 26px;
}

/* ── Info ────────────────────────────────────────────────── */
.sr-rankings-row_info {
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0; padding: 0 18px;
}
.sr-rankings-row_title {
  margin: 0; font-size: 16px; font-weight: 700; color: #F9AB03;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-rankings-row_artist {
  margin: 0; font-size: 13px; color: #ffffff;
}
.sr-rankings-row_genre {
  display: inline-block; padding: 2px 8px; font-size: 10px;
  font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: #F9AB03; border: 1px solid #F9AB03; border-radius: 999px;
  background: rgba(249,171,3,.08); white-space: nowrap; align-self: flex-start;
}

/* ── Score bar ───────────────────────────────────────────── */
.sr-rankings-row_bar-wrap {
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#skankradio-rankings-app .sr-rankings-bar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #ffffff !important;
}
.sr-rankings-bar {
  width: 100%; height: 8px; background: #2a2a2a;
  border-radius: 999px; overflow: hidden;
}
.sr-rankings-bar_fill {
  height: 100%; border-radius: 999px;
  transition: width 0.6s ease; min-width: 4px;
}

/* ── Vote stats ──────────────────────────────────────────── */
.sr-rankings-row_stats {
  display: flex; flex-direction: row; gap: 16px;
  justify-content: stretch; align-items: center;
}
.sr-rankings-row_stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
#skankradio-rankings-app .sr-rankings-row_stat-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: #ffffff !important; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 14px;
  line-height: 1;
}
.sr-rankings-row_stat-value {
  font-size: 24px; font-weight: 900; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  height: 26px;
}
.sr-green { color: #16bc0e; }
.sr-red   { color: #ff4444; }

/* ── Stat label icons (inline SVG since 1.15.0) ─────────── */
#skankradio-rankings-app .sr-rankings-row_stat-label .sr-icon {
  vertical-align: -2px;
  margin-right: 2px;
  color: #F9AB03; /* default — overridden per-stat below */
}
#skankradio-rankings-app .sr-rankings-row_stat:nth-child(1) .sr-icon { color: #16BC0E; } /* fire = upvotes = green */
#skankradio-rankings-app .sr-rankings-row_stat:nth-child(2) .sr-icon { color: #F9AB03; } /* trash = downvotes = orange */
#skankradio-rankings-app .sr-rankings-row_stat:nth-child(3) .sr-icon { color: #F9AB03; } /* star = score = orange */
#skankradio-rankings-app .sr-rankings-row_battles .sr-icon            { color: #F9AB03; } /* trophy */

/* ── Battle wins ─────────────────────────────────────────── */
.sr-rankings-row_battles {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.sr-rankings-row_battles-value {
  font-size: 24px; font-weight: 900; color: #F9AB03; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  height: 26px;
}

/* ── Buy / Free-download button (v1.16.6) ───────────────── */
.sr-rankings-row_buy {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}

#skankradio-rankings-app .srr-buy-btn_label {
  display: inline-block;
  transform: translateY(-1px);
}

#skankradio-rankings-app .srr-buy-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #F9AB03;
  border-radius: 8px;
  background: #16bc0e;
  color: #ffffff;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  min-height: 30px;
  line-height: 1;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#skankradio-rankings-app .srr-buy-btn:hover:not(:disabled):not(.is-added):not(.is-error) {
  background: #F9AB03;
  border-color: #16bc0e;
  color: #ffffff;
  transform: translateY(-1px);
}

#skankradio-rankings-app .srr-buy-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

#skankradio-rankings-app .srr-buy-btn:disabled {
  cursor: default;
  opacity: 0.85;
}

#skankradio-rankings-app .srr-buy-btn.is-loading {
  background: #0d0d0d;
  color: #F9AB03;
  border-color: #F9AB03;
}

#skankradio-rankings-app .srr-buy-btn.is-added {
  background: #F9AB03;
  border-color: #16bc0e;
  color: #0d0d0d;
}

#skankradio-rankings-app .srr-buy-btn.is-error {
  background: #5a1a1a;
  border-color: #ff6b6b;
  color: #ffffff;
}

/* WooCommerce's injected "View cart" link after add-to-cart.
   Styling block mirrors trending/browse so whatever cart-added banner
   system is watching for this class catches the rankings instance too. */
#skankradio-rankings-app .sr-rankings-row_buy a.added_to_cart,
#skankradio-rankings-app a.added_to_cart {
  color: #F9AB03 !important;
  margin-left: 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  align-self: center;
}

#skankradio-rankings-app .sr-rankings-row_buy a.added_to_cart:hover,
#skankradio-rankings-app a.added_to_cart:hover {
  color: #16bc0e !important;
  text-decoration: underline;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sr-rankings-row {
    grid-template-columns: 44px 60px 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 8px; padding: 12px;
  }
  .sr-rankings-row_buy      { grid-column: 1/-1; justify-content: stretch; }
  .sr-rankings-row_buy .srr-buy-btn,
  .sr-rankings-row_buy a.srr-buy-btn { width: 100%; }
  .sr-rankings-row_bar-wrap { grid-column: 1/-1; }
  .sr-rankings-row_stats    { grid-column: 1/-1; justify-content: space-around; }
  .sr-rankings-row_battles  { grid-column: 1/-1; flex-direction: row; gap: 8px; }
}


/* ====================================================================== */
/* BROWSE */
/* ====================================================================== */

/**
 * SkankRadio Browse Widget — browse.css v1.0
 * Save as UTF-8 (NO BOM).
 *
 * Card design cloned from trending.css v1.7. Adds pagination control styles.
 *
 * Color palette:
 *   bg #0a0a0a, card #1a1a1a, gold #F9AB03, green #16bc0e, text #ffffff
 *
 * Site button style:
 *   green bg, 2px orange border, 10px radius, 4px/16px padding, white text
 *   hover: orange bg, green border, white text
 */

#skankradio-browse {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  font-family: inherit;
  color: #ffffff;
  box-sizing: border-box;
}

#skankradio-browse *,
#skankradio-browse *::before,
#skankradio-browse *::after {
  box-sizing: border-box;
}

#skankradio-browse .srb-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  color: #888;
  font-size: 14px;
}

#skankradio-browse .srb-loading__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 32px;
}

#skankradio-browse .srb-loading__bars span {
  display: block;
  width: 5px;
  background: #F9AB03;
  border-radius: 2px;
  animation: srb-bar-bounce 1s ease-in-out infinite;
}

#skankradio-browse .srb-loading__bars span:nth-child(1) { animation-delay: 0s;    height: 12px; }
#skankradio-browse .srb-loading__bars span:nth-child(2) { animation-delay: 0.15s; height: 20px; }
#skankradio-browse .srb-loading__bars span:nth-child(3) { animation-delay: 0.30s; height: 32px; }
#skankradio-browse .srb-loading__bars span:nth-child(4) { animation-delay: 0.45s; height: 20px; }
#skankradio-browse .srb-loading__bars span:nth-child(5) { animation-delay: 0.60s; height: 12px; }

@keyframes srb-bar-bounce {
  0%, 100% { transform: scaleY(0.5); opacity: 0.6; }
  50%      { transform: scaleY(1);   opacity: 1;   }
}

#skankradio-browse .srb-empty,
#skankradio-browse .srb-error {
  text-align: center;
  padding: 48px 24px;
  color: #ccc;
  font-size: 15px;
}

#skankradio-browse .srb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
}

#skankradio-browse .srb-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: #1a1a1a;
  border: 2px solid #16bc0e;
  border-radius: 12px;
  box-shadow:
    0 0 10px rgba(22, 188, 14, 0.35),
    0 0 24px rgba(22, 188, 14, 0.15);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  min-height: 100px;
}

#skankradio-browse .srb-card:hover {
  box-shadow:
    0 0 16px rgba(22, 188, 14, 0.55),
    0 0 40px rgba(22, 188, 14, 0.25);
}

#skankradio-browse .srb-card_cover {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
}

#skankradio-browse .srb-card_cover-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 2px solid #ffffff;
  border-radius: 8px;
  display: block;
}

#skankradio-browse .srb-card_cover-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  color: #16bc0e;
  font-size: 32px;
  line-height: 1;
}

#skankradio-browse .srb-card_play {
  flex: 0 0 auto;
}

#skankradio-browse .srb-play-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid #16bc0e;
  border-radius: 50%;
  background: transparent;
  color: #16bc0e;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
  position: relative;
}

#skankradio-browse .srb-play-btn:hover {
  border-color: #F9AB03;
  transform: scale(1.05);
}

#skankradio-browse .srb-play-btn:focus-visible {
  outline: 2px solid #F9AB03;
  outline-offset: 2px;
}

#skankradio-browse .srb-play-btn_img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}

#skankradio-browse .srb-play-btn_img--pause { display: none; }
#skankradio-browse .srb-play-btn.is-playing .srb-play-btn_img--play  { display: none; }
#skankradio-browse .srb-play-btn.is-playing .srb-play-btn_img--pause { display: block; }

#skankradio-browse .srb-play-btn_icon {
  width: 60%;
  height: 60%;
  display: block;
}
#skankradio-browse .srb-play-btn_icon--pause { display: none; }
#skankradio-browse .srb-play-btn.is-playing .srb-play-btn_icon--play  { display: none; }
#skankradio-browse .srb-play-btn.is-playing .srb-play-btn_icon--pause { display: block; }

#skankradio-browse .srb-card_info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

#skankradio-browse .srb-card_title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #F9AB03;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#skankradio-browse .srb-card_artist {
  margin: 0;
  font-size: 13px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#skankradio-browse .srb-card_genre {
  align-self: flex-start;
  display: inline-block;
  margin-top: 2px;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #F9AB03;
  border: 1px solid #F9AB03;
  border-radius: 999px;
  background: rgba(249, 171, 3, 0.08);
  white-space: nowrap;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#skankradio-browse .srb-card_score {
  flex: 0 0 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

#skankradio-browse .srb-card_score-value {
  font-size: 22px;
  font-weight: 700;
  color: #16bc0e;
  line-height: 1;
}

#skankradio-browse .srb-card_score-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #888;
}

/* ---------- BUY BUTTON ---------- */

#skankradio-browse .srb-card_buy {
  flex: 0 0 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#skankradio-browse .srb-buy-btn_label {
  display: inline-block;
  transform: translateY(-1px);
}

#skankradio-browse .srb-buy-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #F9AB03;
  border-radius: 8px;
  background: #16bc0e;
  color: #ffffff;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  min-height: 30px;
  line-height: 1;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#skankradio-browse .srb-buy-btn:hover:not(:disabled):not(.is-added):not(.is-error) {
  background: #F9AB03;
  border-color: #16bc0e;
  color: #ffffff;
  transform: translateY(-1px);
}

#skankradio-browse .srb-buy-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

#skankradio-browse .srb-buy-btn:disabled {
  cursor: default;
  opacity: 0.85;
}

#skankradio-browse .srb-buy-btn.is-loading {
  background: #0d0d0d;
  color: #F9AB03;
  border-color: #F9AB03;
}

#skankradio-browse .srb-buy-btn.is-added {
  background: #F9AB03;
  border-color: #16bc0e;
  color: #0d0d0d;
}

#skankradio-browse .srb-buy-btn.is-error {
  background: #5a1a1a;
  border-color: #ff6b6b;
  color: #ffffff;
}

/* ---------- VIEW CART LINK (injected by WooCommerce after add-to-cart) ---------- */

#skankradio-browse .srb-card_buy a.added_to_cart,
#skankradio-browse a.added_to_cart {
  color: #F9AB03 !important;
  margin-left: 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  align-self: center;
}

#skankradio-browse .srb-card_buy a.added_to_cart:hover,
#skankradio-browse a.added_to_cart:hover {
  color: #16bc0e !important;
  text-decoration: underline;
}

/* ---------- PAGINATION ---------- */

#skankradio-browse .srb-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  padding: 8px 0;
}

#skankradio-browse .srb-page-btn {
  appearance: none;
  -webkit-appearance: none;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 2px solid #F9AB03;
  border-radius: 10px;
  background: #16bc0e;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  line-height: 1;
}

#skankradio-browse .srb-page-btn:hover:not(:disabled):not(.is-current) {
  background: #F9AB03;
  border-color: #16bc0e;
  color: #ffffff;
  transform: translateY(-1px);
}

#skankradio-browse .srb-page-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

#skankradio-browse .srb-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#skankradio-browse .srb-page-btn.is-current {
  background: #F9AB03;
  border-color: #16bc0e;
  color: #0d0d0d;
  cursor: default;
}

#skankradio-browse .srb-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 38px;
  color: #888;
  font-weight: 700;
  user-select: none;
}

@media (max-width: 900px) {
  /* Viewport breakout — escape any constrained parent Elementor container.
     Mirrors the trending widget fix at line 426. Without this the browse
     grid inherits the section's horizontal padding, which on /browse/
     was offsetting the cards ~98px to the right. */
  #skankradio-browse {
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 16px 12px !important;
    box-sizing: border-box !important;
  }

  #skankradio-browse .srb-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #skankradio-browse .srb-card {
    padding: 10px 14px;
    gap: 12px;
    flex-wrap: wrap;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #skankradio-browse .srb-card_cover,
  #skankradio-browse .srb-card_cover-img {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  #skankradio-browse .srb-play-btn {
    width: 40px;
    height: 40px;
  }

  #skankradio-browse .srb-card_genre {
    display: none;
  }

  #skankradio-browse .srb-buy-btn {
    font-size: 13px;
    padding: 4px 12px;
    min-height: 32px;
  }

  #skankradio-browse .srb-page-btn {
    min-width: 34px;
    height: 34px;
    font-size: 13px;
    padding: 0 10px;
  }
}


/* ====================================================================== */
/* MOBILE TRENDING */
/* ====================================================================== */

/**
 * SkankRadio Mobile Trending Widget — mobile-trending.css v1.0
 * Save as UTF-8 (NO BOM).
 *
 * Designed for narrow screens. The container uses the "viewport breakout"
 * technique to force full screen width regardless of any parent Elementor
 * container that might be constrained narrower than viewport. This is the
 * fix for the right-shift issue we couldn't track down on iOS Safari.
 *
 * Color palette:
 *   bg #0a0a0a, card #1a1a1a, gold #F9AB03, green #16bc0e, text #ffffff
 *
 * Site button style:
 *   green bg, 2px orange border, 10px radius, white text
 *   hover: orange bg, green border, white text
 */

/* ==========================================================
   VIEWPORT BREAKOUT — escape any constrained parent container
   ========================================================== */

.srmt-wrap {
  width: 100%;
  display: block;
  clear: both;
}

#skankradio-mobile-trending {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
  padding: 16px 12px;
  box-sizing: border-box;
  font-family: inherit;
  color: #ffffff;
}

#skankradio-mobile-trending *,
#skankradio-mobile-trending *::before,
#skankradio-mobile-trending *::after {
  box-sizing: border-box;
}

/* ==========================================================
   LOADING / EMPTY / ERROR STATES
   ========================================================== */

#skankradio-mobile-trending .srmt-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px;
  color: #888;
  font-size: 13px;
}

#skankradio-mobile-trending .srmt-loading__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 28px;
}

#skankradio-mobile-trending .srmt-loading__bars span {
  display: block;
  width: 5px;
  background: #F9AB03;
  border-radius: 2px;
  animation: srmt-bar-bounce 1s ease-in-out infinite;
}

#skankradio-mobile-trending .srmt-loading__bars span:nth-child(1) { animation-delay: 0s;    height: 10px; }
#skankradio-mobile-trending .srmt-loading__bars span:nth-child(2) { animation-delay: 0.15s; height: 18px; }
#skankradio-mobile-trending .srmt-loading__bars span:nth-child(3) { animation-delay: 0.30s; height: 28px; }
#skankradio-mobile-trending .srmt-loading__bars span:nth-child(4) { animation-delay: 0.45s; height: 18px; }
#skankradio-mobile-trending .srmt-loading__bars span:nth-child(5) { animation-delay: 0.60s; height: 10px; }

@keyframes srmt-bar-bounce {
  0%, 100% { transform: scaleY(0.5); opacity: 0.6; }
  50%      { transform: scaleY(1);   opacity: 1;   }
}

#skankradio-mobile-trending .srmt-empty,
#skankradio-mobile-trending .srmt-error {
  text-align: center;
  padding: 32px 16px;
  color: #ccc;
  font-size: 14px;
}

/* ==========================================================
   GRID — single column stack, full viewport width
   ========================================================== */

#skankradio-mobile-trending .srmt-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 100%;
}

/* ==========================================================
   CARD — predictable 3-column grid, no flex-wrap juggling
   ========================================================== */

#skankradio-mobile-trending .srmt-card {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #1a1a1a;
  border: 2px solid #16bc0e;
  border-radius: 12px;
  box-shadow:
    0 0 8px rgba(22, 188, 14, 0.35),
    0 0 20px rgba(22, 188, 14, 0.15);
  width: 100%;
  max-width: 100%;
  transition: box-shadow 0.3s ease;
}

#skankradio-mobile-trending .srmt-card:hover {
  box-shadow:
    0 0 14px rgba(22, 188, 14, 0.55),
    0 0 32px rgba(22, 188, 14, 0.25);
}

/* Cover with play button overlay - column 1 */
#skankradio-mobile-trending .srmt-card_cover-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

#skankradio-mobile-trending .srmt-card_cover-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 2px solid #ffffff;
  border-radius: 8px;
  display: block;
}

#skankradio-mobile-trending .srmt-card_cover-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  color: #16bc0e;
  font-size: 28px;
  line-height: 1;
}

/* Play button overlays the cover */
#skankradio-mobile-trending .srmt-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  padding: 0;
  border: 2px solid #16bc0e;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #16bc0e;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

#skankradio-mobile-trending .srmt-play-btn:hover {
  border-color: #F9AB03;
  background: rgba(0, 0, 0, 0.8);
}

#skankradio-mobile-trending .srmt-play-btn:focus-visible {
  outline: 2px solid #F9AB03;
  outline-offset: 2px;
}

#skankradio-mobile-trending .srmt-play-btn_img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  display: block;
}

#skankradio-mobile-trending .srmt-play-btn_img--pause { display: none; }
#skankradio-mobile-trending .srmt-play-btn.is-playing .srmt-play-btn_img--play  { display: none; }
#skankradio-mobile-trending .srmt-play-btn.is-playing .srmt-play-btn_img--pause { display: block; }

#skankradio-mobile-trending .srmt-play-btn_icon {
  width: 50%;
  height: 50%;
  display: block;
}
#skankradio-mobile-trending .srmt-play-btn_icon--pause { display: none; }
#skankradio-mobile-trending .srmt-play-btn.is-playing .srmt-play-btn_icon--play  { display: none; }
#skankradio-mobile-trending .srmt-play-btn.is-playing .srmt-play-btn_icon--pause { display: block; }

/* Info column - title, artist - column 2 */
#skankradio-mobile-trending .srmt-card_info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

#skankradio-mobile-trending .srmt-card_title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #F9AB03;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#skankradio-mobile-trending .srmt-card_artist {
  margin: 0;
  font-size: 13px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right column - score above buy button - column 3 */
#skankradio-mobile-trending .srmt-card_right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  min-width: 88px;
}

#skankradio-mobile-trending .srmt-card_score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1;
}

#skankradio-mobile-trending .srmt-card_score-value {
  font-size: 18px;
  font-weight: 700;
  color: #16bc0e;
  line-height: 1;
}

#skankradio-mobile-trending .srmt-card_score-label {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  margin-top: 3px;
}

/* Buy button */
#skankradio-mobile-trending .srmt-buy-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #F9AB03;
  border-radius: 10px;
  background: #16bc0e;
  color: #ffffff;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  min-height: 30px;
  line-height: 1;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#skankradio-mobile-trending .srmt-buy-btn:hover:not(:disabled):not(.is-added):not(.is-error) {
  background: #F9AB03;
  border-color: #16bc0e;
  color: #ffffff;
}

#skankradio-mobile-trending .srmt-buy-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

#skankradio-mobile-trending .srmt-buy-btn:disabled {
  cursor: default;
  opacity: 0.85;
}

#skankradio-mobile-trending .srmt-buy-btn.is-loading {
  background: #0d0d0d;
  color: #F9AB03;
  border-color: #F9AB03;
}

#skankradio-mobile-trending .srmt-buy-btn.is-added {
  background: #F9AB03;
  border-color: #16bc0e;
  color: #0d0d0d;
}

#skankradio-mobile-trending .srmt-buy-btn.is-error {
  background: #5a1a1a;
  border-color: #ff6b6b;
  color: #ffffff;
}

/* View cart link injected by WC after add-to-cart */
#skankradio-mobile-trending a.added_to_cart {
  color: #F9AB03 !important;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  display: block;
  text-align: center;
  margin-top: 4px;
}

#skankradio-mobile-trending a.added_to_cart:hover {
  color: #16bc0e !important;
  text-decoration: underline;
}


/* ====================================================================== */
/* ACCOUNT */
/* ====================================================================== */

/**
 * SkankRadio Membership Account — account.css v2.0
 */
#skankradio-account-app {
  width: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #ffffff; box-sizing: border-box; background: transparent;
}
#skankradio-account-app *, #skankradio-account-app *::before, #skankradio-account-app *::after { box-sizing: border-box; }
.elementor-widget-skankradio_account,
.elementor-widget-skankradio_account .elementor-widget-container { width: 100% !important; max-width: 100% !important; }

/* Loading */
.sr-acct-loading { display:flex; flex-direction:column; align-items:center; gap:16px; padding:80px 24px; color:#ffffff; font-size:14px; }
.sr-loading__bars { display:flex; align-items:flex-end; gap:4px; height:32px; }
.sr-loading__bars span { display:block; width:5px; background:#F9AB03; border-radius:2px; animation:sr-bar-bounce 1s ease-in-out infinite; }
.sr-loading__bars span:nth-child(1){animation-delay:0s;height:12px}
.sr-loading__bars span:nth-child(2){animation-delay:.15s;height:20px}
.sr-loading__bars span:nth-child(3){animation-delay:.30s;height:32px}
.sr-loading__bars span:nth-child(4){animation-delay:.45s;height:20px}
.sr-loading__bars span:nth-child(5){animation-delay:.60s;height:12px}
@keyframes sr-bar-bounce { 0%,100%{transform:scaleY(.5);opacity:.6} 50%{transform:scaleY(1);opacity:1} }

/* Outer card */
.sr-acct-outer { width:100%; max-width:1600px; margin:0 auto; background:#1a1a1a; border:2px solid #16bc0e; border-radius:16px; overflow:hidden; }

/* Gated */
.sr-acct-gated { text-align:center; padding:80px 24px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.sr-acct-gated-icon { font-size:48px; }
.sr-acct-gated h2   { font-size:24px; font-weight:700; color:#F9AB03; margin:0; }
.sr-acct-gated p    { color:#ffffff; margin:0; font-size:15px; }
.sr-acct-login-btn  {
  display:inline-block; padding:12px 28px; background:#16bc0e; border:2px solid #F9AB03; border-radius:10px;
  color:#ffffff; font-size:14px; font-weight:600; text-decoration:none; text-transform:uppercase;
  transition:background .2s, border-color .2s, color .2s;
}
.sr-acct-login-btn:hover { background:#F9AB03; border-color:#16bc0e; color:#16bc0e; text-decoration:none; }

/* Hero */
.sr-acct-hero { display:flex; gap:0; border-bottom:1px solid rgba(255,255,255,.1); flex-wrap:wrap; }
.sr-acct-avatar-wrap { display:flex; align-items:center; gap:28px; padding:48px 56px; flex:1; min-width:320px; border-right:1px solid rgba(255,255,255,.08); }
.sr-acct-avatar { width:110px; height:110px; border-radius:50%; border:2px solid #F9AB03; object-fit:cover; flex-shrink:0; }
.sr-acct-identity { display:flex; flex-direction:column; gap:6px; }
.sr-acct-displayname { font-size:22px; font-weight:700; color:#ffffff; line-height:1.2; }
.sr-acct-fullname    { font-size:15px; color:#ffffff; }
.sr-acct-email       { font-size:14px; color:#ffffff; }
.sr-acct-since       { font-size:13px; color:#ffffff; margin-top:2px; }

/* Plan */
.sr-acct-plan-wrap { display:flex; align-items:center; padding:48px 56px; min-width:320px; }
.sr-acct-plan-card { width:100%; }
.sr-plan-label  { font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:#ffffff; margin-bottom:10px; font-weight:600; }
.sr-plan-name   { font-size:22px; font-weight:700; color:#ffffff; margin-bottom:6px; line-height:1.2; }
.sr-plan-active .sr-plan-name { color:#F9AB03; }
.sr-plan-expiry { font-size:14px; color:#ffffff; margin-bottom:24px; }
.sr-plan-actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:20px; }
.sr-plan-msg    { font-size:13px; margin-top:12px; min-height:18px; display:block; color:#ffffff; }

/* All buttons */
.sr-plan-btn, .sr-save-btn {
  padding:12px 28px; background:#16bc0e; border:2px solid #F9AB03; border-radius:10px;
  color:#ffffff; font-size:14px; font-weight:600; text-decoration:none; text-transform:uppercase;
  letter-spacing:0; cursor:pointer; display:inline-block; font-family:inherit;
  transition:background .2s, color .2s, border-color .2s; line-height:1;
}
.sr-plan-btn:hover, .sr-save-btn:hover { background:#F9AB03; border-color:#16bc0e; color:#16bc0e; text-decoration:none; }
.sr-save-btn:disabled { opacity:.45; cursor:not-allowed; }
.sr-btn-upgrade { background:#16bc0e; border-color:#F9AB03; color:#ffffff; }
.sr-btn-billing { background:#1a1a1a; border-color:#F9AB03; color:#F9AB03; }
.sr-btn-billing:hover { background:#F9AB03; color:#1a1a1a; }
.sr-btn-cancel  { background:transparent; border-color:#666; color:#999; }
.sr-btn-cancel:hover { background:#3a1a1a; border-color:#a33; color:#ff6b6b; }

/* Tabs */
.sr-acct-tabs { display:flex; border-bottom:1px solid rgba(255,255,255,.1); padding:0 48px; gap:8px; flex-wrap:wrap; overflow:visible; }
.sr-tab-btn {
  background:transparent !important; border:2px solid #16bc0e !important; border-radius:10px !important;
  color:#ffffff !important; font-size:13px; font-weight:700; padding:12px 24px; cursor:pointer;
  margin:16px 0 16px; transition:border-color .15s, color .15s; text-transform:uppercase;
  letter-spacing:.8px; white-space:nowrap; font-family:inherit; display:inline-flex; align-items:center; gap:8px;
}
.sr-tab-btn:hover, .sr-tab-btn.sr-tab-active { border-color:#F9AB03 !important; color:#ffffff !important; }
.sr-tab-hidden { display:none !important; }
.sr-track-count { background:rgba(249,171,3,.2); color:#F9AB03; font-size:11px; padding:2px 8px; border-radius:20px; font-weight:800; }

/* Section */
.sr-acct-section { padding:56px; }
.sr-section-title {
  font-size:22px; font-weight:700; color:#ffffff; text-transform:uppercase;
  letter-spacing:1px; margin-bottom:36px; padding-bottom:16px; border-bottom:2px solid #16bc0e;
}

/* Form */
.sr-form-row { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.sr-form-group { margin-bottom:28px; }
.sr-form-label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:#ffffff; margin-bottom:10px; font-weight:700; }
.sr-form-input {
  width:100%; background:rgba(255,255,255,.05); border:2px solid #ffffff; border-radius:8px;
  color:#ffffff; font-size:15px; padding:14px 16px; transition:border-color .2s, background-color .2s; font-family:inherit;
}
.sr-form-input:hover    { background:rgba(255,255,255,.05); border-color:#ffffff; }
.sr-form-input:focus    { outline:none; border-color:#F9AB03; background:rgba(255,255,255,.07); }
/* Defeat Chrome / Edge / Safari autofill background + text color.
   The 30px inset box-shadow paints over the browser's hard-coded
   autofill yellow/white. text-fill-color paints typed text. The huge
   transition delay prevents the autofill background from re-asserting
   on hover or repaint. */
.sr-form-input:-webkit-autofill,
.sr-form-input:-webkit-autofill:hover,
.sr-form-input:-webkit-autofill:focus,
.sr-form-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  transition: background-color 9999s ease-in-out 0s;
  border: 2px solid #ffffff;
}
.sr-form-input:-webkit-autofill:focus {
  border-color: #F9AB03 !important;
}
.sr-input-readonly      { opacity:.45; cursor:not-allowed; }
.sr-form-textarea       { resize:vertical; min-height:110px; }
.sr-form-hint           { font-size:12px; color:#ffffff; margin-top:8px; display:block; }
.sr-form-actions        { display:flex; align-items:center; gap:20px; margin-top:16px; }
.sr-save-msg            { font-size:14px; font-weight:600; }

/* Tracks */
.sr-tracks-list { display:flex; flex-direction:column; }
.sr-track-row { display:flex; align-items:center; gap:20px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.sr-track-row:last-child { border-bottom:none; }
.sr-track-num   { font-size:16px; font-weight:700; color:#ffffff; min-width:32px; text-align:center; }
.sr-track-info  { flex:1; min-width:0; }
.sr-track-title { font-size:16px; font-weight:700; color:#ffffff; }
.sr-track-meta  { font-size:14px; color:#ffffff; margin-top:4px; }
.sr-track-right { flex-shrink:0; }
.sr-track-status { font-size:12px; font-weight:700; text-transform:uppercase; padding:5px 14px; border-radius:20px; letter-spacing:.5px; }
.sr-status-publish { background:rgba(22,188,14,.15); color:#16bc0e; }
.sr-status-pending { background:rgba(249,171,3,.15); color:#F9AB03; }
.sr-status-draft   { background:rgba(255,255,255,.1); color:#ffffff; }
.sr-no-tracks { text-align:center; padding:56px 24px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.sr-no-tracks-icon { font-size:44px; }
.sr-no-tracks p    { color:#ffffff; margin:0; font-size:16px; }

/* Password tab */
.sr-pw-desc { color:#ffffff; font-size:16px; line-height:1.7; margin:0 0 32px; }

/* Footer */
.sr-acct-footer { border-top:1px solid rgba(255,255,255,.08); padding:28px 56px; text-align:right; }
.sr-logout-link { font-size:13px; font-weight:600; color:#ffffff; text-decoration:none; transition:color .2s; letter-spacing:.5px; text-transform:uppercase; }
.sr-logout-link:hover { color:#ff4444; }

@media (max-width:900px) {
  .sr-acct-avatar-wrap { padding:28px 24px; border-right:none; border-bottom:1px solid rgba(255,255,255,.08); }
  .sr-acct-plan-wrap   { padding:28px 24px; }
  .sr-acct-section     { padding:28px 24px; }
  .sr-acct-tabs        { padding:0 16px; }
  .sr-form-row         { grid-template-columns:1fr; }
  .sr-acct-footer      { padding:20px 24px; text-align:center; }
}


/* ====================================================================== */
/* BILLING */
/* ====================================================================== */

/**
 * SkankRadio Membership Billing — billing.css v2.0
 */
#skankradio-billing-app{width:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#ffffff;box-sizing:border-box;}
#skankradio-billing-app *,#skankradio-billing-app *::before,#skankradio-billing-app *::after{box-sizing:border-box;}
.elementor-widget-skankradio_billing,.elementor-widget-skankradio_billing .elementor-widget-container{width:100%!important;max-width:100%!important;}
.sr-billing-outer{width:100%;max-width:1600px;margin:0 auto;background:#1a1a1a;border:2px solid #16bc0e;border-radius:16px;overflow:hidden;}
.sr-billing-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:80px 24px;color:#ffffff;font-size:14px;}
.sr-loading__bars{display:flex;align-items:flex-end;gap:4px;height:32px;}
.sr-loading__bars span{display:block;width:5px;background:#F9AB03;border-radius:2px;animation:sr-bar-bounce 1s ease-in-out infinite;}
.sr-loading__bars span:nth-child(1){animation-delay:0s;height:12px}.sr-loading__bars span:nth-child(2){animation-delay:.15s;height:20px}.sr-loading__bars span:nth-child(3){animation-delay:.30s;height:32px}.sr-loading__bars span:nth-child(4){animation-delay:.45s;height:20px}.sr-loading__bars span:nth-child(5){animation-delay:.60s;height:12px}
@keyframes sr-bar-bounce{0%,100%{transform:scaleY(.5);opacity:.6}50%{transform:scaleY(1);opacity:1}}
.sr-billing-gated{text-align:center;padding:80px 24px;display:flex;flex-direction:column;align-items:center;gap:16px;}
.sr-billing-gated-icon{font-size:48px;}.sr-billing-gated h2{font-size:24px;font-weight:700;color:#F9AB03;margin:0;}.sr-billing-gated p{color:#ffffff;margin:0;}
.sr-billing-btn{display:inline-block;padding:12px 28px;background:#16bc0e;border:2px solid #F9AB03;border-radius:10px;color:#ffffff;font-size:14px;font-weight:600;text-decoration:none;text-transform:uppercase;transition:background .2s,border-color .2s,color .2s;}
.sr-billing-btn:hover{background:#F9AB03;border-color:#16bc0e;color:#16bc0e;text-decoration:none;}
.sr-billing-btn--outline{background:transparent;border-color:#16bc0e;color:#ffffff;}
.sr-billing-btn--outline:hover{background:#F9AB03;border-color:#16bc0e;color:#16bc0e;}
.sr-billing-hero{display:flex;gap:0;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.08);}
.sr-billing-plan{flex:1;min-width:280px;padding:48px 56px;border-right:1px solid rgba(255,255,255,.08);}
.sr-billing-plan-label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#ffffff;margin-bottom:8px;font-weight:600;}
.sr-billing-plan-name{font-size:26px;font-weight:700;color:#F9AB03;margin-bottom:8px;}
.sr-billing-plan-amount{font-size:18px;font-weight:600;color:#ffffff;margin-bottom:24px;}
.sr-billing-plan-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
.sr-billing-address{flex:1;min-width:240px;padding:48px 56px;display:flex;flex-direction:column;gap:6px;}
.sr-billing-address-label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#ffffff;margin-bottom:8px;font-weight:600;}
.sr-billing-address-line{font-size:15px;color:#ffffff;line-height:1.5;}
.sr-billing-section{padding:48px 56px;}
.sr-billing-section-title{font-size:22px;font-weight:700;color:#ffffff;text-transform:uppercase;letter-spacing:1px;margin-bottom:28px;padding-bottom:16px;border-bottom:2px solid #16bc0e;}
.sr-orders-header{display:grid;grid-template-columns:160px 1fr 120px 120px;gap:0;padding:12px 20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#ffffff;border-bottom:1px solid rgba(255,255,255,.1);}
.sr-order-row{display:grid;grid-template-columns:160px 1fr 120px 120px;align-items:center;gap:0;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.05);transition:background .15s;}
.sr-order-row:last-child{border-bottom:none;}.sr-order-row:hover{background:rgba(255,255,255,.03);}
.sr-order-date{font-size:14px;color:#ffffff;}.sr-order-desc{font-size:15px;font-weight:600;color:#ffffff;display:flex;flex-direction:column;gap:4px;}.sr-order-code{font-size:12px;color:#ffffff;font-weight:400;}
.sr-order-amount{font-size:16px;font-weight:700;color:#F9AB03;}
.sr-order-badge{font-size:11px;font-weight:700;text-transform:uppercase;padding:4px 12px;border-radius:20px;letter-spacing:.5px;display:inline-block;}
.sr-status-success{background:rgba(22,188,14,.15);color:#16bc0e;}.sr-status-pending{background:rgba(249,171,3,.15);color:#F9AB03;}
.sr-no-orders{text-align:center;padding:48px 24px;display:flex;flex-direction:column;align-items:center;gap:16px;}
.sr-no-orders span{font-size:40px;}.sr-no-orders p{color:#ffffff;margin:0;font-size:16px;}
@media(max-width:900px){.sr-billing-plan{padding:28px 24px;border-right:none;border-bottom:1px solid rgba(255,255,255,.08);}.sr-billing-address,.sr-billing-section{padding:28px 24px;}.sr-orders-header{display:none;}.sr-order-row{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:8px;}}


/* ====================================================================== */
/* CANCEL */
/* ====================================================================== */

/**
 * SkankRadio Membership Cancel — cancel.css v2.0
 */
#skankradio-cancel-app{width:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#ffffff;box-sizing:border-box;}
#skankradio-cancel-app *,#skankradio-cancel-app *::before,#skankradio-cancel-app *::after{box-sizing:border-box;}
.elementor-widget-skankradio_cancel,.elementor-widget-skankradio_cancel .elementor-widget-container{width:100%!important;max-width:100%!important;}
.sr-cancel-outer{width:100%;max-width:1600px;margin:0 auto;background:#1a1a1a;border:2px solid #16bc0e;border-radius:16px;overflow:hidden;}
.sr-cancel-hero{text-align:center;padding:72px 48px 56px;border-bottom:1px solid rgba(255,255,255,.08);}
.sr-cancel-icon{font-size:56px;margin-bottom:20px;line-height:1;}
.sr-cancel-title{font-size:clamp(24px,3vw,36px);font-weight:700;color:#ffffff;margin:0 0 16px;line-height:1.2;}
.sr-cancel-sub{font-size:17px;color:#ffffff;margin:0 auto 32px;max-width:600px;line-height:1.6;}
.sr-cancel-sub strong{color:#F9AB03;}
.sr-cancel-consequences{padding:40px 56px;border-bottom:1px solid rgba(255,255,255,.08);}
.sr-cancel-consequences-title{font-size:22px;font-weight:700;color:#ffffff;text-transform:uppercase;letter-spacing:1px;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #ff4444;}
.sr-cancel-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;}
.sr-cancel-list li{font-size:15px;color:#ffffff;padding:14px 0 14px 32px;position:relative;border-bottom:1px solid rgba(255,255,255,.05);}
.sr-cancel-list li:last-child{border-bottom:none;}
.sr-cancel-list li::before{content:'✕';position:absolute;left:0;color:#ff4444;font-weight:700;font-size:14px;}
.sr-cancel-actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;padding:48px;}
.sr-cancel-btn{display:inline-block;padding:14px 32px;background:#16bc0e;border:2px solid #F9AB03;border-radius:10px;color:#ffffff;font-size:15px;font-weight:600;text-decoration:none;text-transform:uppercase;letter-spacing:0;cursor:pointer;font-family:inherit;transition:background .2s,border-color .2s,color .2s;}
.sr-cancel-btn:hover{background:#F9AB03;border-color:#16bc0e;color:#16bc0e;text-decoration:none;}
.sr-cancel-btn--outline{background:transparent;border-color:#16bc0e;color:#ffffff;}
.sr-cancel-btn--outline:hover{background:#F9AB03;border-color:#16bc0e;color:#16bc0e;}
.sr-cancel-btn--danger{background:transparent;border-color:#ff4444;color:#ff4444;}
.sr-cancel-btn--danger:hover{background:#ff4444;border-color:#ff4444;color:#ffffff;}
.sr-cancel-btn--danger:disabled{opacity:.5;cursor:not-allowed;}
.sr-cancel-msg{text-align:center;padding:0 48px 32px;font-size:14px;font-weight:600;min-height:24px;}
@media(max-width:700px){.sr-cancel-hero{padding:48px 24px 40px;}.sr-cancel-consequences{padding:28px 24px;}.sr-cancel-actions{padding:32px 24px;flex-direction:column;align-items:center;}}


/* ====================================================================== */
/* CONFIRMATION */
/* ====================================================================== */

/**
 * SkankRadio Membership Confirmation — confirmation.css v2.0
 */
#skankradio-confirmation-app {
  width:100%; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#ffffff; box-sizing:border-box;
}
#skankradio-confirmation-app *,#skankradio-confirmation-app *::before,#skankradio-confirmation-app *::after{box-sizing:border-box;}
.elementor-widget-skankradio_confirmation,.elementor-widget-skankradio_confirmation .elementor-widget-container{width:100%!important;max-width:100%!important;}

.sr-confirm-outer { width:100%; max-width:1600px; margin:0 auto; background:#1a1a1a; border:2px solid #16bc0e; border-radius:16px; overflow:hidden; }

.sr-confirm-hero { text-align:center; padding:72px 48px 56px; border-bottom:1px solid rgba(255,255,255,.08); }
.sr-confirm-icon  { font-size:64px; margin-bottom:24px; line-height:1; }
.sr-confirm-title { font-size:clamp(28px,4vw,42px); font-weight:700; color:#F9AB03; margin:0 0 16px; line-height:1.2; }
.sr-confirm-sub   { font-size:18px; color:#ffffff; margin:0 auto; max-width:600px; line-height:1.6; }
.sr-confirm-sub strong { color:#F9AB03; }

.sr-confirm-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:rgba(255,255,255,.06); }
.sr-confirm-step  { background:#1a1a1a; padding:48px 40px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; transition:background .2s; }
.sr-confirm-step:hover { background:#202020; }
.sr-step-icon  { font-size:40px; line-height:1; }
.sr-step-title { font-size:20px; font-weight:700; color:#ffffff; text-transform:uppercase; letter-spacing:.5px; }
.sr-step-desc  { font-size:15px; color:#ffffff; line-height:1.6; flex-grow:1; }

.sr-confirm-btn {
  display:inline-block; padding:12px 28px; background:#16bc0e; border:2px solid #F9AB03; border-radius:10px;
  color:#ffffff; font-size:14px; font-weight:600; text-decoration:none; text-transform:uppercase;
  transition:background .2s, border-color .2s, color .2s; margin-top:8px;
}
.sr-confirm-btn:hover { background:#F9AB03; border-color:#16bc0e; color:#16bc0e; text-decoration:none; }

.sr-confirm-footer { text-align:center; padding:28px 48px; font-size:14px; color:#ffffff; border-top:1px solid rgba(255,255,255,.08); line-height:1.6; }
.sr-confirm-footer a { color:#F9AB03; text-decoration:underline; }
.sr-confirm-footer a:hover { color:#ffffff; }

@media(max-width:700px){.sr-confirm-hero{padding:48px 24px 40px;}.sr-confirm-step{padding:36px 24px;}.sr-confirm-footer{padding:24px;}}

/* =====================================================================
 * v1.2.9 — Site styling
 *
 * Cover art:
 *   - Battle widget large cards: 2px white border, 10px radius
 *   - Battle widget scorecards (side):  2px white border, 10px radius
 *   - Rankings rows:             1px white border, 10px radius
 *
 * Buttons (every site button EXCEPT track selection / play / tab buttons):
 *   - Default: transparent bg, 2px green  #16bc0e border, white text
 *   - Hover:   transparent bg, 2px orange #F9AB03 border, white text
 *
 * Outline-only style applied globally — Elementor buttons, WC buttons,
 * SkankRadio widget buttons, account widget action buttons all use the
 * same look. Tab buttons (.sr-tab-btn) keep their own active/inactive
 * state styling. Play/pause buttons keep their existing icon styling.
 *
 * v1.2.9 also adds a Cancel Membership link to the account widget footer.
 * =================================================================== */

/* --- Cover art borders + radius --- */
.sr-battle-card_cover-img,
.sr-scorecard_cover {
	border: 2px solid #fff !important;
	border-radius: 10px !important;
}
.sr-rankings-row_cover {
	border: 1px solid #fff !important;
	border-radius: 10px !important;
}

/* --- Site button style: default state (outline only) --- */
.sr-btn--fire,
.sr-btn--trash,
.sr-battle-btn,
.sr-battle-btn--vote,
.sr-battle-btn--reset,
.srt-buy-btn,
.sr-buy-btn,
.srr-buy-btn,
.srl-buy-btn,
.srb-buy-btn,
.srmt-buy-btn,
.sr-acct-login-btn,
.sr-save-btn,
.sr-plan-btn,
.sr-cancel-btn,
.sr-billing-btn,
.sr-confirm-btn,
.elementor-button,
.elementor-button-link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button {
	background-color: transparent !important;
	background-image: none !important;
	color: #ffffff !important;
	border: 2px solid #16bc0e !important;
	border-radius: 6px;
	transition: color 0.18s ease, border-color 0.18s ease;
}

/* --- Site button style: hover state (color swap) --- */
.sr-btn--fire:hover,
.sr-btn--trash:hover,
.sr-battle-btn:hover,
.sr-battle-btn--vote:hover,
.sr-battle-btn--reset:hover,
.srt-buy-btn:hover,
.sr-buy-btn:hover,
.srr-buy-btn:hover,
.srl-buy-btn:hover,
.srb-buy-btn:hover,
.srmt-buy-btn:hover,
.sr-acct-login-btn:hover,
.sr-save-btn:hover,
.sr-plan-btn:hover,
.sr-cancel-btn:hover,
.sr-billing-btn:hover,
.sr-confirm-btn:hover,
.elementor-button:hover,
.elementor-button-link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover {
	background-color: transparent !important;
	color: #ffffff !important;
	border-color: #F9AB03 !important;
}

/* --- Account widget footer: Cancel link sits to the LEFT of Log Out.
 *     Footer is text-align:right, so left-floating margin spaces the cancel
 *     link from the logout link. --- */
.sr-acct-footer .sr-cancel-link {
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
	text-decoration: none;
	letter-spacing: .5px;
	text-transform: uppercase;
	margin-right: 24px;
	transition: color .2s;
}
.sr-acct-footer .sr-cancel-link:hover {
	color: #F9AB03;
}

/* --- Track selection / play-pause buttons left untouched (icon buttons).
 *     Tab buttons (.sr-tab-btn) also untouched — they have their own
 *     active/inactive state styling that we want to preserve. --- */

/* =====================================================================
 * v1.2.14 — Cart flyout: dark panel + readable contents
 *
 * The Elementor menu-cart widget defaults to a white/light panel
 * background, which made our white-text rule from earlier invisible
 * (white-on-white). Two-part fix:
 *
 *   1. Force the cart panel itself to a dark background that matches
 *      the rest of the site's dark UI.
 *   2. Force product names, quantities, totals, and buttons to white
 *      text on top of that dark background.
 *
 * Also styles placeholder thumbnails so they don't look broken when a
 * product has no featured image (current state for migrated tracks
 * until cover-art URLs are imported into the media library).
 * =================================================================== */

/* Cart flyout panel: dark background */
.elementor-menu-cart__container,
.elementor-menu-cart__main,
.elementor-menu-cart__main .woocommerce-mini-cart,
.elementor-menu-cart__main .widget_shopping_cart_content,
.elementor-menu-cart__main .widget_shopping_cart {
	background: #1a1a1a !important;
	color: #ffffff !important;
}

/* Cart flyout: text — links, quantity, total — all white */
.elementor-menu-cart__main .woocommerce-mini-cart a,
.elementor-menu-cart__main .woocommerce-mini-cart .quantity,
.elementor-menu-cart__main .woocommerce-mini-cart__total,
.elementor-menu-cart__main .woocommerce-mini-cart__total .amount,
.elementor-menu-cart__main .woocommerce-mini-cart__total strong,
.elementor-menu-cart__main .product_list_widget a,
.elementor-menu-cart__main .product_list_widget .quantity,
.elementor-menu-cart__main .widget_shopping_cart_content a,
.elementor-menu-cart__main .widget_shopping_cart_content .quantity,
.elementor-menu-cart__main .widget_shopping_cart_content .total,
.elementor-menu-cart__main .widget_shopping_cart_content .total .amount {
	color: #ffffff !important;
}

/* Cart flyout: remove-item ("X") link — orange so it stands out as a delete affordance */
.elementor-menu-cart__main .remove,
.elementor-menu-cart__main .remove_from_cart_button {
	color: #F9AB03 !important;
}

/* Cart flyout: subtotal label color */
.elementor-menu-cart__main .total {
	color: #ffffff !important;
	border-top: 1px solid rgba(255,255,255,0.12);
	padding-top: 12px;
}

/* Cart flyout: View Cart / Checkout buttons — site outline style */
.elementor-menu-cart__main .woocommerce-mini-cart__buttons .button,
.elementor-menu-cart__main .buttons .button,
.widget_shopping_cart_content .buttons .button {
	background-color: transparent !important;
	background-image: none !important;
	color: #ffffff !important;
	border: 2px solid #16bc0e !important;
	border-radius: 6px !important;
	transition: color 0.18s ease, border-color 0.18s ease;
}
.elementor-menu-cart__main .woocommerce-mini-cart__buttons .button:hover,
.elementor-menu-cart__main .buttons .button:hover,
.widget_shopping_cart_content .buttons .button:hover {
	background-color: transparent !important;
	color: #ffffff !important;
	border-color: #F9AB03 !important;
}

/* Cart flyout: placeholder thumbnails — styled border so they look intentional */
.elementor-menu-cart__main .product_list_widget li img,
.elementor-menu-cart__main .widget_shopping_cart .product_list_widget li img,
.widget_shopping_cart_content .product_list_widget li img {
	border: 1px solid #fff !important;
	border-radius: 6px !important;
	background: #1f1f1f;
}

/* =============================================================
 * SWPM Login Form Styling — v1.4.6
 * Spec: white labels with breathing room; transparent inputs
 * with white text; remember-me white text + custom transparent
 * checkbox with white border and white check; submit button
 * and links centered; links green by default, orange on hover.
 * Aggressive !important + html-body prefix on everything to
 * win against Elementor/theme defaults.
 * ============================================================= */

html body .swpm-login-widget-form {
	width: 100% !important;
	max-width: 540px !important;
	margin: 0 auto !important;
	padding: 32px 32px !important;
	color: #ffffff !important;
	text-align: center !important;
	border: 2px solid #16bc0e !important;
	border-radius: 10px !important;
	background-color: #1a1a1a !important;
	box-shadow: 0 0 24px rgba(22, 188, 14, 0.12) !important;
	box-sizing: border-box !important;
}

html body #swpm-login-form {
	display: block !important;
	width: 100% !important;
}

html body .swpm-login-widget-form .swpm-login-form-inner {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
}

/* Labels — WHITE, left-aligned, breathing room above and below */
html body .swpm-login-widget-form .swpm-username-label,
html body .swpm-login-widget-form .swpm-username-label *,
html body .swpm-login-widget-form .swpm-password-label,
html body .swpm-login-widget-form .swpm-password-label * {
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-align: left !important;
}
html body .swpm-login-widget-form .swpm-username-label,
html body .swpm-login-widget-form .swpm-password-label {
	margin: 18px 0 10px 0 !important;
	padding: 0 !important;
	display: block !important;
}

html body .swpm-login-widget-form .swpm-username-input,
html body .swpm-login-widget-form .swpm-password-input {
	width: 100% !important;
	text-align: left !important;
}

/* Inputs — TRANSPARENT bg, WHITE text, 1px white border */
html body .swpm-login-widget-form input[type="text"],
html body .swpm-login-widget-form input[type="password"],
html body .swpm-login-widget-form input[type="email"],
html body .swpm-login-widget-form input.swpm-text-field,
html body .swpm-login-widget-form input.swpm-username-field,
html body .swpm-login-widget-form input.swpm-password-field,
html body .swpm-login-widget-form #swpm_user_name,
html body .swpm-login-widget-form #swpm_password {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	background-color: transparent !important;
	background-image: none !important;
	color: #ffffff !important;
	border: 1px solid #ffffff !important;
	border-radius: 6px !important;
	padding: 12px 14px !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color 0.18s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
}

/* Focus — green border */
html body .swpm-login-widget-form input[type="text"]:focus,
html body .swpm-login-widget-form input[type="password"]:focus,
html body .swpm-login-widget-form input[type="email"]:focus,
html body .swpm-login-widget-form input.swpm-text-field:focus,
html body .swpm-login-widget-form #swpm_user_name:focus,
html body .swpm-login-widget-form #swpm_password:focus {
	border-color: #16bc0e !important;
	box-shadow: 0 0 0 2px rgba(22, 188, 14, 0.18) !important;
}

/* Browser autofill — Chrome injects a cream/blue bg and dark text by default
 * and won't honor background-color:transparent. The fix is the inset
 * box-shadow trick combined with -webkit-text-fill-color and a long
 * transition delay. We match the card bg (#1a1a1a) so the autofilled
 * field reads as visually transparent against the card. */
html body .swpm-login-widget-form input:-webkit-autofill,
html body .swpm-login-widget-form input:-webkit-autofill:hover,
html body .swpm-login-widget-form input:-webkit-autofill:focus,
html body .swpm-login-widget-form input:-webkit-autofill:active,
html body .swpm-login-widget-form input:-internal-autofill-selected,
html body .swpm-login-widget-form input:-internal-autofill-previewed {
	-webkit-text-fill-color: #ffffff !important;
	-webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
	box-shadow: 0 0 0 1000px #1a1a1a inset !important;
	transition: background-color 9999s ease-in-out 0s !important;
	caret-color: #ffffff !important;
	-webkit-background-clip: text !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 1px solid #ffffff !important;
	color: #ffffff !important;
	font-size: 15px !important;
}

/* Remember Me — white text, custom transparent checkbox */
html body .swpm-login-widget-form .swpm-remember-me {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px !important;
	color: #ffffff !important;
	font-size: 14px !important;
	margin: 14px 0 18px 0 !important;
	text-align: left !important;
}
html body .swpm-login-widget-form .swpm-remember-me label,
html body .swpm-login-widget-form .swpm-remember-me span {
	color: #ffffff !important;
	cursor: pointer !important;
	margin: 0 !important;
	font-weight: normal !important;
}

/* Custom checkbox — transparent bg, white border, white check on checked */
html body .swpm-login-widget-form .swpm-remember-me input[type="checkbox"] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	width: 16px !important;
	height: 16px !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 1px solid #ffffff !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	flex-shrink: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}
html body .swpm-login-widget-form .swpm-remember-me input[type="checkbox"]:checked {
	background-color: transparent !important;
	border-color: #ffffff !important;
}
html body .swpm-login-widget-form .swpm-remember-me input[type="checkbox"]:checked::after {
	content: "" !important;
	position: absolute !important;
	left: 4px !important;
	top: 0 !important;
	width: 5px !important;
	height: 10px !important;
	border: solid #ffffff !important;
	border-width: 0 2px 2px 0 !important;
	transform: rotate(45deg) !important;
	display: block !important;
}

/* Submit button section — centered */
html body .swpm-login-widget-form .swpm-login-submit {
	text-align: center !important;
	margin: 8px 0 14px 0 !important;
	display: block !important;
	width: 100% !important;
}

/* Submit button — auto width, centered, green border, hover orange */
html body .swpm-login-widget-form .swpm-login-submit input[type="submit"],
html body .swpm-login-widget-form input[type="submit"] {
	display: inline-block !important;
	width: auto !important;
	min-width: 200px !important;
	max-width: 100% !important;
	background-color: transparent !important;
	background-image: none !important;
	color: #ffffff !important;
	border: 2px solid #16bc0e !important;
	border-radius: 6px !important;
	padding: 10px 32px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: border-color 0.18s ease, color 0.18s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 auto !important;
	box-shadow: none !important;
}
html body .swpm-login-widget-form .swpm-login-submit input[type="submit"]:hover,
html body .swpm-login-widget-form input[type="submit"]:hover {
	background-color: transparent !important;
	border-color: #F9AB03 !important;
	color: #F9AB03 !important;
}

/* Forgot Password / Join Us links — centered, green normal, orange hover */
html body .swpm-login-widget-form .swpm-forgot-pass-link,
html body .swpm-login-widget-form .swpm-join-us-link {
	text-align: center !important;
	margin: 6px 0 !important;
	font-size: 14px !important;
	color: #16bc0e !important;
}
html body .swpm-login-widget-form .swpm-forgot-pass-link a,
html body .swpm-login-widget-form .swpm-join-us-link a {
	color: #16bc0e !important;
	text-decoration: none !important;
	transition: color 0.18s ease !important;
}
html body .swpm-login-widget-form .swpm-forgot-pass-link a:hover,
html body .swpm-login-widget-form .swpm-join-us-link a:hover,
html body .swpm-login-widget-form .swpm-forgot-pass-link a:focus,
html body .swpm-login-widget-form .swpm-join-us-link a:focus {
	color: #F9AB03 !important;
	text-decoration: none !important;
}

/* Action message — centered, soft red for errors */
html body .swpm-login-widget-form .swpm-login-action-msg {
	margin-top: 10px !important;
	color: #ff6b6b !important;
	font-size: 14px !important;
	text-align: center !important;
}
html body .swpm-login-widget-form .swpm-login-action-msg:empty,
html body .swpm-login-widget-form .swpm-before-login-submit-section:empty {
	display: none !important;
}

/* =============================================================
 * Hello Elementor theme header/footer fallback suppression — v1.4.13
 * Hello Elementor's header.php / footer.php still output even when the
 * Elementor Pro Theme Builder header is hidden on a page via Page Settings.
 * That leaks an unstyled site-title link (renders as the default browser
 * link color = pink/magenta) and "All rights reserved" footer text.
 * Since the Theme Builder header is our actual header on every page, we
 * suppress the theme fallback site-wide.
 * ============================================================= */

body > .site-header,
body header.site-header,
body > .site-footer,
body footer.site-footer,
body .site-branding,
body .site-title,
body .site-description,
body .site-info,
body .site-navigation {
	display: none !important;
}

/* =============================================================
 * SWPM Logged-In Profile View — v1.4.15
 * Real classes (from page inspect): wrapper is .swpm-login-widget-logged.
 * Rows have universal .swpm-logged-label / .swpm-logged-value classes.
 * Logout uses .swpm-logged-logout-link (not .swpm-logout-link).
 * ============================================================= */

html body .swpm-login-widget-logged {
	width: 100% !important;
	max-width: 540px !important;
	margin: 0 auto !important;
	padding: 32px 32px !important;
	color: #ffffff !important;
	text-align: center !important;
	border: 2px solid #16bc0e !important;
	border-radius: 10px !important;
	background-color: #1a1a1a !important;
	box-shadow: 0 0 24px rgba(22, 188, 14, 0.12) !important;
	box-sizing: border-box !important;
}

html body .swpm-login-widget-logged .swpm-logged-username,
html body .swpm-login-widget-logged .swpm-logged-status,
html body .swpm-login-widget-logged .swpm-logged-membership,
html body .swpm-login-widget-logged .swpm-logged-expiry {
	margin: 0 0 14px 0 !important;
}

/* Labels — white, uppercase, small letter-spaced */
html body .swpm-login-widget-logged .swpm-logged-label {
	color: #ffffff !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	margin: 0 0 4px 0 !important;
	display: block !important;
}

/* Values — white, regular */
html body .swpm-login-widget-logged .swpm-logged-value {
	color: #ffffff !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	margin: 0 !important;
	display: block !important;
}

/* Edit Profile + Logout — green default, orange hover, centered */
html body .swpm-login-widget-logged .swpm-edit-profile-link,
html body .swpm-login-widget-logged .swpm-logged-logout-link {
	margin: 10px 0 0 0 !important;
	font-size: 15px !important;
	text-align: center !important;
	display: block !important;
}
html body .swpm-login-widget-logged .swpm-edit-profile-link a,
html body .swpm-login-widget-logged .swpm-logged-logout-link a {
	color: #16bc0e !important;
	text-decoration: none !important;
	font-weight: 500 !important;
	transition: color 0.18s ease !important;
}
html body .swpm-login-widget-logged .swpm-edit-profile-link a:hover,
html body .swpm-login-widget-logged .swpm-logged-logout-link a:hover {
	color: #F9AB03 !important;
	text-decoration: none !important;
}

/* The empty spacer div between rows and links */
html body .swpm-login-widget-logged .swpm-margin-bottom-10 {
	margin-bottom: 6px !important;
}

/* =========================================================================
 * Phase 5 — Login widget styles ([skankradio_login])
 * Matches existing sr-acct-* / sr-form-* aesthetic for visual continuity.
 * =========================================================================*/

.sr-login-outer {
	max-width: 480px;
	margin: 48px auto;
	padding: 0 16px;
	font-family: inherit;
}
.sr-login-card {
	background: #1a1a1a;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 16px;
	padding: 40px 32px;
	box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.sr-login-banner {
	background: rgba(22, 188, 14, .12);
	border: 1px solid rgba(22, 188, 14, .35);
	color: #16bc0e;
	border-radius: 8px;
	padding: 10px 14px;
	margin: 0 0 18px;
	font-size: 13px;
	text-align: center;
}
.sr-login-title {
	font-size: 26px;
	font-weight: 700;
	color: #F9AB03;
	margin: 0 0 6px;
	text-align: center;
}
.sr-login-sub {
	color: #cccccc;
	margin: 0 0 24px;
	text-align: center;
	font-size: 14px;
}
.sr-login-form .sr-form-group { margin-bottom: 14px; }
.sr-login-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #cccccc;
	font-size: 13px;
	margin: 4px 0 18px;
	cursor: pointer;
}
.sr-login-remember input[type="checkbox"] {
	accent-color: #16bc0e;
	width: 16px;
	height: 16px;
}
/* Sign In page — hide the theme-rendered page title (the H1 above
   the sign-in card is redundant since the card has its own title).
   Targets the most common title selectors across Hello Elementor,
   stock WP themes, and Elementor's page-title widget. */
body.sr-page-login .entry-title,
body.sr-page-login .page-title,
body.sr-page-login h1.entry-title,
body.sr-page-login .elementor-page-title,
body.sr-page-login .elementor-page-title .elementor-heading-title,
body.sr-page-login header.entry-header,
body.sr-page-login .post-header,
body.sr-page-artist-profile .entry-title,
body.sr-page-artist-profile .page-title,
body.sr-page-artist-profile h1.entry-title,
body.sr-page-artist-profile .elementor-page-title,
body.sr-page-artist-profile .elementor-page-title .elementor-heading-title,
body.sr-page-artist-profile header.entry-header,
body.sr-page-artist-profile .post-header,
body.sr-page-contact .entry-title,
body.sr-page-contact .page-title,
body.sr-page-contact h1.entry-title,
body.sr-page-contact .elementor-page-title,
body.sr-page-contact .elementor-page-title .elementor-heading-title,
body.sr-page-contact header.entry-header,
body.sr-page-contact .post-header,
body.sr-page-rankings .entry-title,
body.sr-page-rankings .page-title,
body.sr-page-rankings h1.entry-title,
body.sr-page-rankings .elementor-page-title,
body.sr-page-rankings .elementor-page-title .elementor-heading-title,
body.sr-page-rankings header.entry-header,
body.sr-page-rankings .post-header {
	display: none !important;
}

/* Sign In button. !important on background and box-shadow defeats
   Elementor / Hello Elementor / generic button:hover rules that
   otherwise paint a magenta fill on hover via higher CSS specificity. */
.sr-login-btn,
.sr-login-btn:hover,
.sr-login-btn:focus,
.sr-login-btn:active {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
}
.sr-login-btn {
	display: block;
	width: 100%;
	color: #ffffff !important;
	border: 2px solid #16bc0e !important;
	border-radius: 10px !important;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}
.sr-login-btn:hover {
	border-color: #F9AB03 !important;
	color: #F9AB03 !important;
}
.sr-login-btn:disabled { opacity: .45; cursor: not-allowed; }
.sr-login-error {
	min-height: 18px;
	margin-top: 12px;
	font-size: 13px;
	color: #ff4444;
	text-align: center;
}
.sr-login-msg {
	min-height: 18px;
	margin-top: 12px;
	font-size: 13px;
	text-align: center;
}
.sr-login-links {
	margin-top: 22px;
	text-align: center;
	font-size: 13px;
	color: #888888;
}
.sr-login-links a {
	color: #16bc0e;
	text-decoration: none;
	font-weight: 500;
}
.sr-login-links a:hover { color: #F9AB03; text-decoration: none; }
.sr-login-sep { margin: 0 8px; color: #555555; }

@media (max-width: 540px) {
	.sr-login-outer { margin: 24px auto; }
	.sr-login-card { padding: 28px 20px; }
	.sr-login-title { font-size: 22px; }
}

/* =====================================================================
   CONTACT FORM (1.10.2) — [skankradio_contact]
   Mirrors the login card envelope (#1a1a1a, rounded, padded) but with
   a wider landscape proportion and a 2-up grid for Name + Email so
   the form reads horizontally rather than as a tall narrow column.
   Reuses .sr-form-input / .sr-form-label / .sr-login-btn from the
   login form for inputs and the submit button.
   ===================================================================== */
.sr-contact-outer {
	max-width: 760px;
	margin: 48px auto;
	padding: 0 16px;
	font-family: inherit;
}
.sr-contact-card {
	background: #1a1a1a;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 16px;
	padding: 40px 44px;
	box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.sr-contact-title {
	font-size: 26px;
	font-weight: 700;
	color: #F9AB03;
	margin: 0 0 6px;
	text-align: center;
	line-height: 1.2;
}
.sr-contact-sub {
	color: #cccccc;
	margin: 0 0 28px;
	text-align: center;
	font-size: 14px;
}
.sr-contact-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
/* Two-column row for Name + Email. Collapses to single column under 600px. */
.sr-contact-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.sr-contact-form .sr-form-textarea {
	min-height: 140px;
	resize: vertical;
	font-family: inherit;
	line-height: 1.5;
}
.sr-form-helper {
	display: block;
	margin-top: 6px;
	color: #888;
	font-size: 12px;
	font-style: italic;
	line-height: 1.4;
}
.sr-form-actions {
	margin-top: 8px;
	display: flex;
	justify-content: flex-end;
}
.sr-form-actions .sr-login-btn {
	min-width: 200px;
}
.sr-contact-msg {
	margin-top: 12px;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14px;
	min-height: 1em;
	text-align: center;
}
.sr-contact-msg:empty {
	display: none;
}
.sr-contact-msg-success {
	background: rgba(22, 188, 14, 0.12);
	border: 1px solid rgba(22, 188, 14, 0.35);
	color: #16BC0E;
}
.sr-contact-msg-error {
	background: rgba(249, 171, 3, 0.12);
	border: 1px solid rgba(249, 171, 3, 0.35);
	color: #F9AB03;
}
@media (max-width: 600px) {
	.sr-contact-outer { margin: 24px auto; }
	.sr-contact-card { padding: 28px 20px; }
	.sr-contact-title { font-size: 22px; }
	.sr-contact-row { grid-template-columns: 1fr; gap: 18px; }
	.sr-contact-form { gap: 16px; }
	.sr-contact-form .sr-form-textarea { min-height: 110px; }
	.sr-form-actions { justify-content: stretch; }
	.sr-form-actions .sr-login-btn { width: 100%; }
}

/* =====================================================================
   BROWSE CARD LINK STYLING (1.12.0)
   Cover image and track title now link to /track/{slug}/ detail page.
   Subtle hover treatment so the affordance is clear without competing
   with the play/buy buttons.
   ===================================================================== */
.srb-card_cover-link {
	display: block;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s ease, opacity 0.18s ease;
}
.srb-card_cover-link:hover { opacity: 0.85; }
.srb-card_cover-link:focus-visible {
	outline: 2px solid #16BC0E;
	outline-offset: 2px;
}
.srb-card_title-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease;
}
.srb-card_title-link:hover { color: #F9AB03; }
.srb-card_title-link:focus-visible {
	outline: 2px solid #16BC0E;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Artist name link on browse cards (1.13.0) */
.srb-card_artist-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.18s ease, border-color 0.18s ease;
}
.srb-card_artist-link:hover {
	color: #F9AB03;
	border-bottom-color: #F9AB03;
}
.srb-card_artist-link:focus-visible {
	outline: 2px solid #16BC0E;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Artist profile navigation in account widget (1.13.2) */
.sr-acct-profile-links {
	margin-top: 8px;
}
.sr-acct-profile-link {
	display: inline-block;
	padding: 6px 16px;
	background: transparent;
	color: #ffffff;
	border: 2px solid #16BC0E;
	border-radius: 50px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.18s ease, border-color 0.18s ease;
}
.sr-acct-profile-link:hover {
	color: #F9AB03;
	border-color: #F9AB03;
}
.sr-artist-profile-cta {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	margin-bottom: 24px;
	background: rgba(22, 188, 14, 0.06);
	border: 1px solid rgba(22, 188, 14, 0.3);
	border-radius: 10px;
	flex-wrap: wrap;
}
.sr-artist-profile-cta-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.sr-artist-profile-cta-text strong {
	color: #F9AB03;
	font-size: 15px;
	font-weight: 700;
}
.sr-artist-profile-cta-text span {
	color: #bbb;
	font-size: 13px;
}
.sr-artist-profile-cta-btn {
	display: inline-block;
	padding: 10px 22px;
	background: transparent;
	color: #ffffff;
	border: 2px solid #16BC0E;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color 0.18s ease, border-color 0.18s ease;
}
.sr-artist-profile-cta-btn:hover {
	color: #F9AB03;
	border-color: #F9AB03;
}

/* =============================================================
 * Cart "Proceed to Checkout" button — global outlined button
 * style (1.16.3): transparent bg, 2px #16BC0E border, 10px
 * radius, white text; #F9AB03 border on hover, white text.
 * High-specificity override of the post-1935 kit rule that
 * was painting it solid green. Express-pay buttons (Amazon /
 * Google Pay / Link) are a separate block and NOT targeted.
 * ============================================================= */
/* The conflicting rule lives in the Elementor kit (post-1935) custom CSS:
   body.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block
   .wc-block-cart__submit-button { background-color:#16BC0E !important;
   border:2px solid #F9AB03 !important; } — specificity (0,3,1), !important.
   The selectors below add the <a> element + the .contained class so they
   are (0,4,2) and win the cascade. Block cart first, classic cart second. */
body.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block a.wc-block-cart__submit-button.contained,
body.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block a.wc-block-cart__submit-button,
body.woocommerce-cart a.wc-block-cart__submit-button.contained,
body.woocommerce .wc-proceed-to-checkout a.checkout-button {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 2px solid #16BC0E !important;
	border-radius: 10px !important;
	color: #ffffff !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: border-color 0.18s ease, color 0.18s ease !important;
}
body.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block a.wc-block-cart__submit-button.contained:hover,
body.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block a.wc-block-cart__submit-button.contained:focus,
body.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block a.wc-block-cart__submit-button:hover,
body.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block a.wc-block-cart__submit-button:focus,
body.woocommerce-cart a.wc-block-cart__submit-button.contained:hover,
body.woocommerce-cart a.wc-block-cart__submit-button.contained:focus,
body.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce .wc-proceed-to-checkout a.checkout-button:focus {
	background: transparent !important;
	background-color: transparent !important;
	border-color: #F9AB03 !important;
	color: #ffffff !important;
}