/* ==========================================================================
   RADIOS.PRO — CLEAN MONOCHROME (TRUE BLACK / TRUE WHITE) + STATIC WAVE BG
   Zero Pill/Rectangular Borders · Zero Gradients · Horizontal Blurred Cards
   ========================================================================== */

:root,
html[data-theme="dark"],
body.rp-theme-dark {
  --rp-bg: #000000;
  --rp-bg-elev: #0c0c10;
  --rp-surface: #121217;
  --rp-surface-hover: #1a1a22;
  --rp-text: #ffffff;
  --rp-text-muted: rgba(255, 255, 255, 0.68);
  --rp-text-dim: rgba(255, 255, 255, 0.45);
  --rp-contrast-bg: #ffffff;
  --rp-contrast-fg: #000000;
  --rp-header-bg: rgba(0, 0, 0, 0.94);
  --rp-wave-1: rgba(255, 255, 255, 0.028);
  --rp-wave-2: rgba(255, 255, 255, 0.042);
  --rp-wave-3: rgba(255, 255, 255, 0.018);
  --rp-wave-stroke: rgba(255, 255, 255, 0.055);
  --rp-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.5);
  --rp-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.72);
}

html[data-theme="light"],
body.rp-theme-light {
  --rp-bg: #ffffff;
  --rp-bg-elev: #f5f6f8;
  --rp-surface: #eff1f5;
  --rp-surface-hover: #e5e8ef;
  --rp-text: #000000;
  --rp-text-muted: rgba(0, 0, 0, 0.66);
  --rp-text-dim: rgba(0, 0, 0, 0.45);
  --rp-contrast-bg: #000000;
  --rp-contrast-fg: #ffffff;
  --rp-header-bg: rgba(255, 255, 255, 0.96);
  --rp-wave-1: rgba(0, 0, 0, 0.026);
  --rp-wave-2: rgba(0, 0, 0, 0.04);
  --rp-wave-3: rgba(0, 0, 0, 0.018);
  --rp-wave-stroke: rgba(0, 0, 0, 0.055);
  --rp-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.07);
  --rp-shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.13);
}

/* --------------------------------------------------------------------------
   1. GLOBAL BASE & STATIC PROTON-INSPIRED WAVE BACKGROUND
   -------------------------------------------------------------------------- */
html,
body.rp-body {
  background-color: var(--rp-bg) !important;
  background-image: none !important;
  color: var(--rp-text) !important;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.22s ease, color 0.22s ease;
}

/* Static layered wave background inspired by PROton header waves (no animation on Home) */
.rp-static-waves {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--rp-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='rgba(128,128,140,0.08)' stroke-width='1.2' d='M0,180 C320,260 620,90 960,190 C1200,260 1350,140 1440,170 M0,340 C380,240 720,420 1080,310 C1260,255 1360,330 1440,300 M0,520 C300,610 680,430 1040,540 C1240,600 1360,490 1440,520 M0,710 C420,620 780,790 1140,680 C1300,635 1380,700 1440,675'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

.rp-static-waves__layer {
  position: absolute;
  left: -20%;
  right: -20%;
  pointer-events: none;
  border-radius: 46% 54% 0 0;
}

.rp-static-waves__layer--1 {
  top: 8%;
  height: 92%;
  background: var(--rp-wave-1);
  transform: rotate(-2deg);
}

.rp-static-waves__layer--2 {
  top: 28%;
  height: 75%;
  background: var(--rp-wave-2);
  border-radius: 52% 44% 0 0;
  transform: rotate(1.5deg);
}

.rp-static-waves__layer--3 {
  top: 54%;
  height: 55%;
  background: var(--rp-wave-3);
  border-radius: 42% 58% 0 0;
  transform: rotate(-1deg);
}

header.rp-header,
main,
footer.rp-footer {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   2. FAST SPLASH SCREEN (#rp-splash) — Larger Logo, Zero Delay
   -------------------------------------------------------------------------- */
.rp-splash {
  background: var(--rp-bg) !important;
  transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

.rp-splash__logo-wrap {
  width: 156px !important;
  height: 156px !important;
}

.rp-splash__logo {
  width: 148px !important;
  height: auto !important;
  border-radius: 0 !important;
  border: none !important;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
}

.rp-splash__ring {
  border: none !important;
  background: radial-gradient(circle, rgba(128, 128, 128, 0.22) 0%, transparent 70%) !important;
}

/* --------------------------------------------------------------------------
   3. SVG MICRO-ANIMATIONS ON HOVER / ACTIVE (MOUSE)
   -------------------------------------------------------------------------- */
@keyframes rpSvgWigglePop {
  0%   { transform: scale(1) rotate(0deg); }
  35%  { transform: scale(1.22) rotate(-10deg); }
  70%  { transform: scale(1.16) rotate(8deg); }
  100% { transform: scale(1.14) rotate(0deg); }
}

@keyframes rpSvgHeartbeat {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.32); }
  60%  { transform: scale(0.94); }
  100% { transform: scale(1.16); }
}

@keyframes rpSvgSpinPop {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.24) rotate(22deg); }
  100% { transform: scale(1.14) rotate(12deg); }
}

.rp-svg-icon,
.radio-card svg,
.rp-header svg,
.rp-hero svg,
.rp-footer svg,
.rp-music-player svg {
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease, opacity 0.2s ease !important;
  transform-origin: center center;
  will-change: transform;
}

a:hover .rp-svg-icon,
button:hover .rp-svg-icon,
.rp-header-link:hover svg,
.rp-login-btn:hover svg,
.search-btn:hover svg,
.rp-hero-discover:hover svg,
.load-more-button:hover svg,
.radio-category-load-more-btn:hover svg,
.radio-category-header:hover .rp-cat-svg,
.rp-seo-radios-list a:hover svg,
.rp-seo-guide-link:hover svg {
  animation: rpSvgWigglePop 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

.rp-theme-toggle:hover svg {
  animation: rpSvgSpinPop 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

.radio-favorite-btn:hover svg,
.music-radio-favorite:hover svg,
.music-radio-favorite:hover i {
  animation: rpSvgHeartbeat 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

.radio-play-btn:hover svg {
  transform: scale(1.2) translateX(1px) !important;
}

a:active .rp-svg-icon,
button:active .rp-svg-icon,
.radio-play-btn:active svg,
.radio-favorite-btn:active svg {
  transform: scale(0.88) !important;
}

/* --------------------------------------------------------------------------
   4. HEADER — Large Readable Logo, Zero Pill Borders, Bottom Bar Active/Hover
   -------------------------------------------------------------------------- */
.rp-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 84px !important;
  padding: 10px clamp(20px, 4vw, 48px) !important;
  background: var(--rp-header-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: none !important;
  box-shadow: none !important;
}

.rp-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Much larger, clearly readable logo */
.rp-brand > img,
body.rp-home.rp-in-hero-view .rp-brand > img {
  height: 74px !important;
  width: auto !important;
  max-width: 240px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  transition: transform 0.22s ease !important;
}

html[data-theme="light"] .rp-brand > img,
body.rp-theme-light .rp-brand > img {
  filter: none !important;
}

.rp-brand:hover > img {
  transform: scale(1.04) !important;
}

.rp-brand > span,
body.rp-home.rp-in-hero-view .rp-brand > span {
  display: none !important;
}

.rp-brand > span em {
  font-style: normal !important;
  font-weight: 900 !important;
  color: var(--rp-text) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.rp-header-links,
.rp-header-nav {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.rp-header-link,
.rp-header-link.rp-brand-shop,
.rp-header-link--btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 4px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--rp-text-muted) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: color 0.18s ease !important;
}

/* Highlight active/hovered links via crisp bottom underline bar (no pill border) */
.rp-header-link::after,
.rp-header-link.rp-brand-shop::after,
.rp-header-link--btn::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  background: var(--rp-text) !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.rp-header-link:hover,
.rp-header-link:focus-visible,
.rp-header-link.rp-brand-shop:hover,
.rp-header-link--btn:hover {
  color: var(--rp-text) !important;
  background: transparent !important;
  border: none !important;
  transform: none !important;
}

.rp-header-link:hover::after,
.rp-header-link:focus-visible::after,
.rp-header-link.rp-brand-shop:hover::after,
.rp-header-link--btn:hover::after {
  transform: scaleX(1) !important;
}

.rp-auth {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

/* Theme Toggle Button — borderless, clean surface */
.rp-theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  border: none !important;
  background: var(--rp-surface) !important;
  color: var(--rp-text) !important;
  font-family: inherit !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color 0.18s ease, transform 0.18s ease !important;
}

.rp-theme-toggle:hover {
  background: var(--rp-surface-hover) !important;
  transform: translateY(-1px) !important;
}

/* Login Button — solid monochrome contrast, zero gradient, zero border */
.rp-login-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  background: var(--rp-contrast-bg) !important;
  background-image: none !important;
  color: var(--rp-contrast-fg) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
}

.rp-login-btn:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px) !important;
  color: var(--rp-contrast-fg) !important;
}

/* --------------------------------------------------------------------------
   5. HERO, SEARCH & 3D GLOBE LOADED FROM THE START + "EXPLORAR NO MAPA" BELOW
   -------------------------------------------------------------------------- */
.rp-hero {
  position: relative !important;
  padding: 12px clamp(16px, 4vw, 40px) 6px !important;
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

.rp-hero-orbs,
.rp-hero-primary::before {
  display: none !important;
}

.rp-hero-content {
  position: relative !important;
  z-index: 3 !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.rp-hero-title {
  font-size: clamp(1.6rem, 3.1vw, 2.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  color: var(--rp-text) !important;
  margin: 0 auto 4px !important;
  text-shadow: none !important;
}

.rp-hero-tagline {
  font-size: clamp(0.88rem, 1.2vw, 0.98rem) !important;
  font-weight: 400 !important;
  color: var(--rp-text-muted) !important;
  max-width: 600px !important;
  margin: 0 auto 12px !important;
  line-height: 1.45 !important;
}

.rp-hero-primary {
  margin-top: 4px !important;
}

/* Search & Filters — Zero circular/pill borders, zero gradients */
.rp-hero-search.figma-search {
  padding: 4px 0 0 !important;
}

.rp-hero-search .figma-search-inner {
  max-width: 720px !important;
  margin: 0 auto !important;
  display: block !important;
}

.rp-hero-search .figma-search-controls {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 720px !important;
  max-height: 220px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.figma-search-controls .search-pill,
.search-pill {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  padding: 5px 6px 5px 18px !important;
  border-radius: 10px !important;
  background: var(--rp-surface) !important;
  border: none !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.figma-search-controls .search-pill:hover,
.search-pill:hover {
  background: var(--rp-surface-hover) !important;
  border: none !important;
}

.figma-search-controls .search-pill:focus-within,
.search-pill:focus-within {
  background: var(--rp-surface-hover) !important;
  border: none !important;
  /* Active focus indicator: crisp bottom bar instead of pill border */
  box-shadow: inset 0 -2.5px 0 var(--rp-text) !important;
}

.figma-search-controls .search-pill input[type="search"],
.search-pill input[type="search"] {
  flex: 1 1 auto !important;
  height: 100% !important;
  padding: 0 8px 0 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--rp-text) !important;
  font-size: 0.98rem !important;
  font-weight: 500 !important;
}

.figma-search-controls .search-pill input[type="search"]::placeholder,
.search-pill input[type="search"]::placeholder {
  color: var(--rp-text-dim) !important;
}

.figma-search-controls .search-btn,
.search-btn {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  margin-right: 0 !important;
  border-radius: 8px !important;
  background: var(--rp-contrast-bg) !important;
  background-image: none !important;
  color: var(--rp-contrast-fg) !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
}

.figma-search-controls .search-btn:hover,
.search-btn:hover {
  opacity: 0.88 !important;
  transform: scale(1.03) !important;
}

.figma-search-controls .search-filters,
.search-filters {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

.figma-search-controls .search-filters select,
.figma-search-controls .search-filters input,
.search-filters select,
.search-filters input {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  background-color: var(--rp-surface) !important;
  border: none !important;
  color: var(--rp-text) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

html[data-theme="light"] .figma-search-controls .search-filters select,
body.rp-theme-light .figma-search-controls .search-filters select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
}

.figma-search-controls .search-filters select:hover,
.figma-search-controls .search-filters input:hover,
.search-filters select:hover,
.search-filters input:hover {
  background-color: var(--rp-surface-hover) !important;
  border: none !important;
}

.figma-search-controls .search-filters select:focus,
.figma-search-controls .search-filters input:focus,
.search-filters select:focus,
.search-filters input:focus {
  background-color: var(--rp-surface-hover) !important;
  border: none !important;
  box-shadow: inset 0 -2.5px 0 var(--rp-text) !important;
}

.figma-search-controls .search-filters input::placeholder,
.search-filters input::placeholder {
  color: var(--rp-text-dim) !important;
}

/* 3D Globe Stage — Starts retracted to emphasize the radios right away, expands on "Explorar no mapa" */
.rp-globe-stage {
  position: relative !important;
  width: 100% !important;
  max-width: 720px !important;
  margin: 6px auto 2px !important;
  z-index: 2 !important;
}

.rp-globe-canvas,
.rp-globe-canvas.is-ready {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 165px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: none !important;
  transition: height 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.rp-hero.is-discovery-mode .rp-globe-stage {
  max-width: 880px !important;
  margin: 12px auto 6px !important;
}

.rp-hero.is-discovery-mode .rp-globe-canvas,
.rp-hero.is-discovery-mode .rp-globe-canvas.is-ready {
  height: 480px !important;
}

/* Map starts in Black & White (grayscale) and gains full color when clicked / in discovery mode */
.rp-globe-canvas canvas {
  cursor: pointer !important;
  filter: grayscale(1) saturate(0) contrast(1.08) !important;
  transition:
    filter 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html[data-theme="light"] .rp-globe-canvas canvas,
body.rp-theme-light .rp-globe-canvas canvas {
  filter: grayscale(1) saturate(0) brightness(1.32) contrast(0.92) !important;
}

.rp-hero.is-discovery-mode .rp-globe-canvas canvas,
.rp-globe-canvas.is-colored canvas {
  cursor: grab !important;
  filter: grayscale(0) saturate(1) contrast(1) !important;
}

html[data-theme="light"] .rp-hero.is-discovery-mode .rp-globe-canvas canvas,
html[data-theme="light"] .rp-globe-canvas.is-colored canvas,
body.rp-theme-light .rp-hero.is-discovery-mode .rp-globe-canvas canvas,
body.rp-theme-light .rp-globe-canvas.is-colored canvas {
  filter: grayscale(0) saturate(1.12) brightness(1.1) contrast(1.02) !important;
}

.rp-hero.is-discovery-mode .rp-globe-canvas canvas:active,
.rp-globe-canvas.is-colored canvas:active {
  cursor: grabbing !important;
}

/* Daytime 2D region map in Light Mode */
html[data-theme="light"] .rp-region-map-canvas,
body.rp-theme-light .rp-region-map-canvas {
  background: #dbeafe !important;
}

html[data-theme="light"] .rp-region-map-canvas .leaflet-tile-pane,
body.rp-theme-light .rp-region-map-canvas .leaflet-tile-pane {
  filter: none !important;
}

/* "Explorar no mapa" right below the Globe View */
.rp-hero-secondary {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

.rp-globe-user-info,
.rp-globe-user-info-text {
  color: var(--rp-text-muted) !important;
  font-weight: 500 !important;
  font-size: 0.78rem !important;
  margin: 0 !important;
}

.rp-hero-discover {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  background: var(--rp-surface) !important;
  border: none !important;
  color: var(--rp-text) !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

.rp-hero-discover:hover,
.rp-hero-discover[aria-pressed="true"] {
  background: var(--rp-contrast-bg) !important;
  color: var(--rp-contrast-fg) !important;
  border: none !important;
  transform: translateY(-1px) !important;
}

/* Globe controls inside canvas — borderless & monochrome (no purple) */
.rp-globe-controls button,
.rp-globe-zoom {
  border: none !important;
  border-radius: 8px !important;
}

.rp-globe-ctrl-unfocus,
.rp-globe-ctrl-rotate.is-active,
.rp-globe-ctrl-unfocus:hover,
.rp-globe-ctrl-rotate.is-active:hover {
  background: var(--rp-contrast-bg) !important;
  background-image: none !important;
  color: var(--rp-contrast-fg) !important;
  border: none !important;
}

.rp-globe-ctrl-unfocus::before,
.rp-globe-ctrl-rotate::before {
  display: none !important;
}

/* --------------------------------------------------------------------------
   6. CATEGORY SECTIONS & HORIZONTAL BLURRED HERO STATION CARDS
   -------------------------------------------------------------------------- */
.radio-grid-section,
body.rp-home #radio-grid-section {
  max-width: 1380px !important;
  margin: 0 auto !important;
  padding: 6px clamp(16px, 4vw, 44px) 64px !important;
}

.radio-grid {
  margin-top: 8px !important;
}

.radio-category-section {
  margin-bottom: 42px !important;
}

.radio-category-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px 16px !important;
  margin-bottom: 18px !important;
  padding-bottom: 8px !important;
  border: none !important;
}

.radio-category-header .category-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: clamp(1.22rem, 2vw, 1.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--rp-text) !important;
  margin: 0 !important;
}

.radio-category-header .category-title .rp-cat-svg {
  color: var(--rp-text) !important;
  flex-shrink: 0;
}

.radio-category-header .category-detail {
  width: 100% !important;
  margin: 2px 0 0 !important;
  font-size: 0.85rem !important;
  color: var(--rp-text-muted) !important;
}

.radio-category-see-all {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 2px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--rp-text-muted) !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.radio-category-see-all:hover {
  color: var(--rp-text) !important;
}

/* Grid tailored for Horizontal Station Cards */
.radio-category-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

@media (max-width: 1180px) {
  .radio-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 700px) {
  .radio-category-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .search-filters {
    grid-template-columns: 1fr !important;
  }
  .rp-globe-canvas,
  .rp-globe-canvas.is-ready {
    height: 145px !important;
  }
  .rp-hero.is-discovery-mode .rp-globe-canvas,
  .rp-hero.is-discovery-mode .rp-globe-canvas.is-ready {
    height: 360px !important;
  }
  .rp-brand > img {
    height: 52px !important;
  }
  .rp-brand > span {
    font-size: 1.25rem !important;
  }
}

/* STATION CARD — Blurred Hero Window Backdrop + Horizontal Layout + Larger Icon */
.radio-card {
  position: relative !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: var(--rp-shadow-sm) !important;
  height: auto !important;
  min-height: 120px !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.26s ease !important;
  isolation: isolate;
}

.radio-card::before {
  display: none !important;
}

/* Blurred background version of the station's logo */
.radio-card .rp-card-blurred-bg {
  position: absolute !important;
  inset: -24px !important;
  background-size: cover !important;
  background-position: center !important;
  filter: blur(22px) saturate(175%) brightness(0.68) !important;
  transform: scale(1.22) !important;
  z-index: 0 !important;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease !important;
  pointer-events: none !important;
}

/* Dark frosted window scrim over the blurred logo so horizontal text is always legible */
.radio-card .rp-card-window-frost {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(10px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(135%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transition: background-color 0.25s ease !important;
}

.radio-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--rp-shadow-lg) !important;
  border: none !important;
}

.radio-card:hover .rp-card-blurred-bg {
  transform: scale(1.3) !important;
  filter: blur(18px) saturate(200%) brightness(0.78) !important;
}

/* Active/Playing station highlighted via solid left indicator bar (no border box) */
.radio-card.playing {
  box-shadow: inset 5px 0 0 #ffffff, var(--rp-shadow-lg) !important;
}

/* Horizontal row inside station card */
.radio-card .rp-card-row {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
}

/* Larger station icon on the left */
.radio-card .rp-card-avatar {
  width: 88px !important;
  height: 88px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 6px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.radio-card:hover .rp-card-avatar {
  transform: scale(1.05) !important;
}

.radio-card .rp-card-logo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  display: block !important;
}

/* Station Name & Info aligned horizontally beside the icon (override legacy position:absolute) */
.radio-card .radio-info,
.radio-card .radio-info.rp-card-body {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  gap: 4px !important;
}

.radio-card .radio-name-link {
  position: static !important;
  text-decoration: none !important;
  color: #ffffff !important;
  display: block !important;
  width: 100% !important;
}

.radio-card .radio-name {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  line-height: 1.24 !important;
  color: #ffffff !important;
  margin: 0 !important;
  text-align: left !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
}

.radio-card .rp-card-location-wrap {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  max-width: 100% !important;
}

.radio-card .rp-pin-svg {
  position: static !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
  opacity: 0.88 !important;
}

.radio-card .radio-location {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.radio-card .rp-card-segment {
  position: static !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 2px 0 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* Action buttons on the right of the horizontal row — borderless */
.radio-card .rp-card-actions {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.radio-card .radio-favorite-btn {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.36) !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.radio-card .radio-favorite-btn:hover {
  background: rgba(0, 0, 0, 0.62) !important;
}

.radio-card .radio-play-btn {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #000000 !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, background-color 0.2s ease !important;
}

.radio-card .radio-play-btn:hover {
  transform: scale(1.07) !important;
}

.radio-card.playing .radio-play-btn {
  background: #000000 !important;
  color: #ffffff !important;
}

.radio-card.playing .radio-play-btn svg path,
.radio-card.playing .radio-play-btn svg rect {
  fill: #ffffff !important;
}

/* Category Load More & Pagination Buttons — borderless, zero gradient */
.radio-category-load-more-btn,
.load-more-button {
  border-radius: 8px !important;
  background: var(--rp-surface) !important;
  background-image: none !important;
  border: none !important;
  color: var(--rp-text) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.radio-category-load-more-btn:hover,
.load-more-button:hover {
  background: var(--rp-contrast-bg) !important;
  color: var(--rp-contrast-fg) !important;
  transform: translateY(-2px) !important;
}

/* --------------------------------------------------------------------------
   7. SEO RADIOS & GUIDE SECTIONS — Borderless Clean Surface
   -------------------------------------------------------------------------- */
.rp-seo-radios,
.rp-seo-guide {
  max-width: 1300px !important;
  margin: 28px auto !important;
  padding: 28px clamp(20px, 3.5vw, 38px) !important;
  border-radius: 14px !important;
  background: var(--rp-bg-elev) !important;
  border: none !important;
  box-shadow: none !important;
}

.rp-seo-radios-heading,
.rp-seo-guide h2 {
  color: var(--rp-text) !important;
  font-weight: 800 !important;
}

.rp-seo-radios-lead,
.rp-seo-guide p,
.rp-seo-guide li {
  color: var(--rp-text-muted) !important;
}

.rp-seo-radios-list a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  background: var(--rp-surface) !important;
  border: none !important;
  color: var(--rp-text) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease, transform 0.18s ease !important;
}

.rp-seo-radios-list a:hover {
  background: var(--rp-contrast-bg) !important;
  color: var(--rp-contrast-fg) !important;
  transform: translateY(-1px) !important;
}

.rp-seo-guide-link {
  display: inline-flex !important;
  align-items: center !important;
  padding: 11px 20px !important;
  border-radius: 8px !important;
  background: var(--rp-contrast-bg) !important;
  background-image: none !important;
  color: var(--rp-contrast-fg) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: none !important;
}

/* --------------------------------------------------------------------------
   8. FLOATING MUSIC PLAYER & FOOTER — Borderless, Solid Contrast
   -------------------------------------------------------------------------- */
.music-player.rp-music-player {
  background: var(--rp-surface) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: var(--rp-shadow-lg) !important;
  color: var(--rp-text) !important;
}

.music-player .music-title,
.music-player .music-title-text {
  color: var(--rp-text) !important;
}

.music-player .music-artist,
.music-player .music-station {
  color: var(--rp-text-muted) !important;
}

.rp-footer {
  background: var(--rp-bg-elev) !important;
  border: none !important;
  color: var(--rp-text-muted) !important;
}

.rp-footer-title,
.rp-footer-brand {
  color: var(--rp-text) !important;
}

.rp-footer-col a {
  color: var(--rp-text-muted) !important;
  border: none !important;
}

.rp-footer-col a:hover {
  color: var(--rp-text) !important;
}

/* PROton Floating Action Button — Clean Headphones/Audio-Wave SVG */
.proton-fab {
  width: 58px !important;
  height: 58px !important;
  border-radius: 16px !important;
  border: none !important;
  background: var(--rp-contrast-bg) !important;
  background-image: none !important;
  color: var(--rp-contrast-fg) !important;
  box-shadow: var(--rp-shadow-lg) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.24s ease !important;
}

.proton-fab::before,
.proton-fab::after {
  display: none !important;
}

.proton-fab:hover {
  transform: translateY(-3px) scale(1.05) !important;
}

.proton-fab__svg {
  width: 26px !important;
  height: 26px !important;
  stroke: currentColor !important;
}

.proton-fab:hover .proton-fab__svg {
  animation: rpSvgWigglePop 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

/* --------------------------------------------------------------------------
   9. RADIO DETAIL PAGE (/radio/:id) — Horizontal Identity Hero with Larger Icon
   -------------------------------------------------------------------------- */
.radio-detail-page {
  background: transparent !important;
}

.radio-detail-page .rd-card {
  background: var(--rp-bg-elev) !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: var(--rp-shadow-sm) !important;
  color: var(--rp-text) !important;
}

.radio-detail-page .rd-col-identity {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.radio-detail-page .rp-rd-blurred-bg {
  position: absolute !important;
  inset: -30px !important;
  background-size: cover !important;
  background-position: center !important;
  filter: blur(28px) saturate(170%) brightness(0.55) !important;
  transform: scale(1.2) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.radio-detail-page .rp-rd-window-frost {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.52) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.radio-detail-page .rd-identity-flex {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 24px !important;
  text-align: left !important;
}

.radio-detail-page .rd-logo-wrap.radio-detail-logo-wrapper {
  width: 132px !important;
  height: 132px !important;
  flex-shrink: 0 !important;
  border-radius: 16px !important;
  border: none !important;
  padding: 8px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
}

.radio-detail-page .rd-identity-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}

.radio-detail-page .rd-col-identity .rd-title,
.radio-detail-page .rd-col-identity .rd-title-text {
  color: #ffffff !important;
  text-align: left !important;
}

.radio-detail-page .rd-col-identity .rd-slogan,
.radio-detail-page .rd-col-identity .rd-meta-line,
.radio-detail-page .rd-col-identity .rd-description-inline,
.radio-detail-page .rd-col-identity .rd-description-inline p,
.radio-detail-page .rd-col-identity .rd-description-inline h2 {
  color: rgba(255, 255, 255, 0.86) !important;
  text-align: left !important;
}

.radio-detail-page .rd-title,
.radio-detail-page .rd-title-text,
.radio-detail-page h1,
.radio-detail-page h2,
.radio-detail-page h3 {
  color: var(--rp-text) !important;
}

.radio-detail-page p,
.radio-detail-page .rd-meta-line,
.radio-detail-page .rd-slogan {
  color: var(--rp-text-muted) !important;
}

@media (max-width: 640px) {
  .radio-detail-page .rd-identity-flex {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .radio-detail-page .rd-logo-wrap.radio-detail-logo-wrapper {
    width: 96px !important;
    height: 96px !important;
  }
}

/* =========================================================================
   EXPLORAR NO MAPA — globo em tela cheia
   ========================================================================= */
html.rp-globe-fullscreen,
html.rp-globe-fullscreen body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.rp-globe-fullscreen .rp-hero .rp-globe-stage {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  background: radial-gradient(ellipse at 50% 45%, #0b1626 0%, #03060c 72%, #000 100%) !important;
  animation: rp-globe-fs-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="light"] body.rp-globe-fullscreen .rp-hero .rp-globe-stage,
body.rp-theme-light.rp-globe-fullscreen .rp-hero .rp-globe-stage {
  background: radial-gradient(ellipse at 50% 45%, #eef4fb 0%, #d9e4f1 75%, #cfdbea 100%) !important;
}

@keyframes rp-globe-fs-in {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: none; }
}

body.rp-globe-fullscreen .rp-hero .rp-globe-canvas,
body.rp-globe-fullscreen .rp-hero .rp-globe-canvas.is-ready {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  transition: none !important;
}

/* Botão "Voltar à busca" vira um botão flutuante no topo */
body.rp-globe-fullscreen .rp-hero .rp-hero-discover {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
  right: 16px !important;
  z-index: 1002 !important;
  gap: 2px;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: rgba(10, 14, 24, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: background-color 0.15s ease, transform 0.15s ease !important;
}
body.rp-globe-fullscreen .rp-hero .rp-hero-discover:hover {
  background: rgba(30, 38, 56, 0.9) !important;
  transform: translateY(-1px);
}

/* Localização do utilizador como selo no topo esquerdo */
body.rp-globe-fullscreen .rp-hero .rp-globe-user-info:not([hidden]) {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
  left: 16px !important;
  z-index: 1002 !important;
  max-width: calc(100vw - 220px);
  padding: 10px 14px !important;
  border-radius: 999px !important;
  background: rgba(10, 14, 24, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.rp-globe-fullscreen .rp-globe-controls {
  left: 16px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
}

/* O palco fixo vive dentro de main/hero, que criam contextos de empilhamento:
   sobe-os enquanto o globo estiver em tela cheia (cobre header e grid). */
body.rp-globe-fullscreen main,
body.rp-globe-fullscreen .rp-hero {
  z-index: 1000 !important;
}
body.rp-globe-fullscreen .rp-hero {
  position: relative !important;
}

/* Elementos flutuantes do site não competem com o globo/mapa em tela cheia */
body.rp-globe-fullscreen .proton-fab,
body.rp-region-open .proton-fab,
body.rp-globe-fullscreen .radiospro-wa-toast,
body.rp-region-open .radiospro-wa-toast {
  visibility: hidden !important;
}

/* =========================================================================
   MAPA DA REGIÃO — tela cheia
   ========================================================================= */
.rp-region-map-overlay {
  z-index: 1100 !important;
  padding: 0 !important;
  background: #050a12 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: rp-region-fade-in 0.18s ease !important;
}

.rp-region-map-card {
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.rp-region-map-body {
  position: absolute !important;
  inset: 0 !important;
}

.rp-region-map-canvas {
  min-height: 0 !important;
}

/* Cabeçalho flutuante sobre o mapa */
.rp-region-map-header {
  position: absolute !important;
  top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
  left: 16px !important;
  z-index: 1001 !important;
  max-width: min(440px, calc(100vw - 96px));
  padding: 12px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  background: rgba(8, 13, 22, 0.78) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.rp-region-map-title { font-size: 16px !important; line-height: 1.25; }
.rp-region-map-meta:empty { display: none; }

.rp-region-map-close {
  position: absolute !important;
  top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
  right: 16px !important;
  z-index: 1002 !important;
  width: 46px !important;
  height: 46px !important;
  font-size: 26px !important;
  border-radius: 50% !important;
  background: rgba(8, 13, 22, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* Carregamento discreto (não bloqueia o mapa, que já aparece por baixo) */
.rp-region-map-loading {
  inset: auto auto calc(env(safe-area-inset-bottom, 0px) + 24px) 50% !important;
  transform: translateX(-50%);
  z-index: 1001 !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: rgba(8, 13, 22, 0.86) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  font-size: 13px !important;
  white-space: nowrap;
}

.rp-region-map-canvas .leaflet-bottom.leaflet-right {
  margin-bottom: env(safe-area-inset-bottom, 0px);
}
.rp-region-map-canvas .leaflet-control-zoom {
  margin: 0 16px 24px 0 !important;
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}
.rp-region-map-canvas .leaflet-control-zoom a {
  width: 42px !important;
  height: 42px !important;
  line-height: 42px !important;
  font-size: 20px !important;
}

html[data-theme="light"] .rp-region-map-overlay,
body.rp-theme-light .rp-region-map-overlay {
  background: #dbeafe !important;
}
html[data-theme="light"] .rp-region-map-header,
html[data-theme="light"] .rp-region-map-loading,
html[data-theme="light"] .rp-region-map-close,
body.rp-theme-light .rp-region-map-header,
body.rp-theme-light .rp-region-map-loading,
body.rp-theme-light .rp-region-map-close {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}
html[data-theme="light"] .rp-region-map-title,
body.rp-theme-light .rp-region-map-title { color: #0f172a !important; }
html[data-theme="light"] .rp-region-map-meta,
html[data-theme="light"] .rp-region-map-loading,
body.rp-theme-light .rp-region-map-meta,
body.rp-theme-light .rp-region-map-loading { color: #475569 !important; }

@media (max-width: 640px) {
  .rp-region-map-overlay { padding: 0 !important; }
  .rp-region-map-card { height: 100dvh !important; border-radius: 0 !important; }
  .rp-region-map-header { padding: 10px 14px !important; max-width: calc(100vw - 88px); }
  .rp-region-map-title { font-size: 14px !important; }
  body.rp-globe-fullscreen .rp-hero .rp-hero-discover { padding: 9px 14px !important; font-size: 13px !important; }
  body.rp-globe-fullscreen .rp-hero .rp-globe-user-info:not([hidden]) { max-width: calc(100vw - 190px); font-size: 12px !important; }
}

/* =========================================================================
   JOGO EM DESTAQUE — placar compacto + "Ouça ao vivo em"
   ========================================================================= */
.jogo-destaque-section {
  background: var(--rp-surface) !important;
  color: var(--rp-text) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
html[data-theme="light"] .jogo-destaque-section,
body.rp-theme-light .jogo-destaque-section { border-color: rgba(0, 0, 0, 0.06); }

.jogo-destaque-section .category-title { color: var(--rp-text) !important; }
.jogo-destaque-section .category-detail { color: var(--rp-text-muted) !important; }

.jogo-destaque-card {
  display: grid !important;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 20px !important;
  align-items: stretch;
  margin-top: 16px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
.jogo-destaque-card + .jogo-destaque-card {
  padding-top: 20px !important;
  border-top: 1px solid rgba(127, 127, 127, 0.16) !important;
}

.jogo-board {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 20px 20px;
  border-radius: 16px;
  color: #fff;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(34, 197, 94, 0.22) 0%, transparent 55%),
    linear-gradient(160deg, #0f2a1c 0%, #0b1712 55%, #070d0a 100%);
  border: 1px solid rgba(74, 222, 128, 0.16);
  overflow: hidden;
}
/* linhas de campo discretas */
.jogo-board::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  transform: translate(-50%, -38%);
  pointer-events: none;
}

.jogo-topline {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.jogo-live-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation: none !important;
}
.jogo-live-badge.is-live { background: #e11d48 !important; }
.jogo-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.jogo-live-badge.is-live .jogo-live-dot { animation: jogo-live-pulse 1.4s ease-in-out infinite; }
@keyframes jogo-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}

.jogo-competicao {
  min-width: 0;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jogo-times {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start !important;
  gap: 12px !important;
}

.jogo-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.jogo-time-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  flex-shrink: 0;
}
.jogo-time-logo .time-logo {
  width: 100% !important;
  height: 100% !important;
  padding: 8px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-sizing: border-box;
}
.time-logo-fallback {
  font-size: 22px;
  font-weight: 800;
  color: #0b1712;
}
.jogo-time .time-nome {
  max-width: 100%;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.jogo-centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 72px;
}
.jogo-hora {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #facc15;
  line-height: 1;
}
.jogo-versus {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1;
}

.jogo-radios-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.jogo-radios-wrap[hidden] { display: none; }

.jogo-radios-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rp-text-muted);
}
.jogo-radios-count {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.16);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--rp-text-muted);
}

.jogo-radios {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
}

/* Card compacto da rádio dentro do jogo: logo menor → nome inteiro visível */
.jogo-radios .radio-card.radio-card-compact {
  min-height: 0 !important;
  height: auto !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
}
.jogo-radios .radio-card-compact .rp-card-row { gap: 12px !important; }
.jogo-radios .radio-card-compact .rp-card-avatar {
  width: 56px !important;
  height: 56px !important;
  padding: 4px !important;
  border-radius: 10px !important;
}
.jogo-radios .radio-card-compact .radio-name {
  font-size: 15px !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 2 !important;
  overflow-wrap: anywhere;
}
.jogo-radios .radio-card-compact .radio-location { font-size: 12px !important; }
.jogo-radios .radio-card-compact .rp-card-segment { display: none !important; }
.jogo-radios .radio-card-compact .rp-card-actions { gap: 6px !important; }
.jogo-radios .radio-card-compact .radio-favorite-btn {
  width: 34px !important;
  height: 34px !important;
}
.jogo-radios .radio-card-compact .radio-play-btn {
  width: 42px !important;
  height: 42px !important;
}

@media (max-width: 900px) {
  .jogo-destaque-card { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .jogo-destaque-section {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 18px 14px !important;
    border-radius: 18px !important;
  }
  .jogo-board { padding: 16px; gap: 14px; }
  .jogo-time-logo { width: 60px; height: 60px; }
  .jogo-centro { height: 60px; }
  .jogo-hora { font-size: 19px; }
  .jogo-time .time-nome { font-size: 14px !important; }
  .jogo-radios { grid-template-columns: minmax(0, 1fr) !important; }
}