.omfm-mandala {
  position: relative;
  width: 56px;
  height: 56px;
  display: inline-block;
}

.omfm-mandala .ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid #FF6B35;
  animation: omfm-rotate 25s linear infinite;
  box-sizing: border-box;
}

.omfm-mandala .ring:nth-child(1) { width: 54px; height: 54px; border-color: #FF6B35; animation-duration: 30s; }
.omfm-mandala .ring:nth-child(2) { width: 44px; height: 44px; border-color: #FF8E53; animation-duration: 25s; animation-direction: reverse; }
.omfm-mandala .ring:nth-child(3) { width: 34px; height: 34px; border-color: #FFB45A; animation-duration: 20s; }
.omfm-mandala .ring:nth-child(4) { width: 24px; height: 24px; border-color: #FF6B35; animation-duration: 15s; animation-direction: reverse; }

.omfm-mandala .petals {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  animation: omfm-rotate 40s linear infinite reverse;
}

.omfm-mandala .petal {
  position: absolute;
  width: 6px;
  height: 12px;
  background: linear-gradient(45deg, #FF8E53, #FFB45A);
  border-radius: 50%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center 25px;
  opacity: 0.85;
}

.omfm-mandala .petal:nth-child(1)  { transform: translateX(-50%) rotate(0deg); }
.omfm-mandala .petal:nth-child(2)  { transform: translateX(-50%) rotate(30deg); }
.omfm-mandala .petal:nth-child(3)  { transform: translateX(-50%) rotate(60deg); }
.omfm-mandala .petal:nth-child(4)  { transform: translateX(-50%) rotate(90deg); }
.omfm-mandala .petal:nth-child(5)  { transform: translateX(-50%) rotate(120deg); }
.omfm-mandala .petal:nth-child(6)  { transform: translateX(-50%) rotate(150deg); }
.omfm-mandala .petal:nth-child(7)  { transform: translateX(-50%) rotate(180deg); }
.omfm-mandala .petal:nth-child(8)  { transform: translateX(-50%) rotate(210deg); }
.omfm-mandala .petal:nth-child(9)  { transform: translateX(-50%) rotate(240deg); }
.omfm-mandala .petal:nth-child(10) { transform: translateX(-50%) rotate(270deg); }
.omfm-mandala .petal:nth-child(11) { transform: translateX(-50%) rotate(300deg); }
.omfm-mandala .petal:nth-child(12) { transform: translateX(-50%) rotate(330deg); }

.omfm-mandala .center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 900;
  font-size: 10px;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.35);
  box-shadow: none;
  z-index: 2;
}

@keyframes omfm-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .omfm-mandala .ring,
  .omfm-mandala .petals {
    animation: none !important;
  }
}

/* Override old logo background from index.html */
.logo-icon{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Remove outer ring stroke */
.omfm-mandala .ring:nth-child(1){
  border: 0 !important;
}

.play-btn-small{
  background: transparent !important;
  box-shadow: none !important;
}

.omfm-mandala--play{
  width: 100%;
  height: 100%;
}

.omfm-mandala--play .ring:nth-child(1){
  border: 0 !important;
}

.omfm-mandala--play .center-icon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.45);
}

.omfm-mandala--play .center-icon i{
  font-size: 14px;
  line-height: 1;
}

/* Play button: transparent when paused, highlighted when playing */
.play-btn-small{
  background: transparent !important;
  box-shadow: none !important;
}

.play-btn-small.is-playing{
  background: var(--gradient) !important;
  box-shadow: 0 0 20px rgba(255,107,53,.35) !important;
}