/* Header Text Strip Design styling */
.MainBombay .bombay-title-header {
  background-color: #ffff66;
  color: #800000;
  font-weight: 900;
  padding: 10px;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  align-items: center;
}

.MainBombay .bombay-chart-btn {
  font-weight: bold;
  padding: 2px 14px;
  font-size: 14px;
}

/* --- ISOLATION CONTAINER BASE --- */
.MainBombay .wheel-fixed-frame {
  position: relative;
  width: 220px;
  height: 220px;
}

/* --- THE RUNNING ENGINE: CHAKRA SPINNING WHEEL --- */
.MainBombay .authentic-spinning-wheel {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;

  /* Precision Color Distribution matching your video asset sequence perfectly */
  background: conic-gradient(
    #fa13fa 0deg 36deg,
    /* Magenta Pink (0) */ #1314fb 36deg 72deg,
    /* Deep Purple-Blue (1) */ #10fbfa 72deg 108deg,
    /* Cyan Sky Blue (2) */ #fb1414 108deg 144deg,
    /* Bright Red (3) */ #fbfa13 144deg 180deg,
    /* Yellow (4) */ #fa13fa 180deg 216deg,
    /* Magenta Pink (5) */ #1314fb 216deg 252deg,
    /* Deep Purple-Blue (6) */ #10fbfa 252deg 288deg,
    /* Cyan Sky Blue (7) */ #fb1414 288deg 324deg,
    /* Bright Red (8) */ #fbfa13 324deg 360deg /* Yellow (9) */
  );

  /* Linear smooth 12s loop operation sequence */
  animation: continuousChakraRotation 7s linear infinite;
}

/* Stops wheel loop rotation instantly when user hovers cursor over it */
.MainBombay .wheel-fixed-frame:hover .authentic-spinning-wheel {
  animation-play-state: paused;
}

/* --- CENTRAL BADGE SHELL CORE OVERLAY (FIXED STILL) --- */
.MainBombay .static-center-badge {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #fc9;
    border-radius: 50%;
    top: 51%;
    left: 54%;
    transform: translate(-50%, -50%);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.MainBombay .inner-badge-text {
  font-weight: 900;
  color: #000080;
  font-size: 23px;
  font-style: normal;
}

/* --- ABSOLUTE NUMERIC DIGIT POSITIONING ENGINE --- */
.MainBombay .digit-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.MainBombay .digit-text {
  font-weight: 900;
  font-size: 24px;
  color: #000000;
  margin-top: 12px;
  display: inline-block;
  font-style: normal;
}
/* Dynamic Trigonometric Angular Rotations aligning numbers right in the center of slices */
.MainBombay .p0 {
  transform: rotate(18deg);
}
.MainBombay .p1 {
  transform: rotate(54deg);
}
.MainBombay .p2 {
  transform: rotate(90deg);
}
.MainBombay .p3 {
  transform: rotate(126deg);
}
.MainBombay .p4 {
  transform: rotate(162deg);
}
.MainBombay .p5 {
  transform: rotate(198deg);
}
.MainBombay .p6 {
  transform: rotate(234deg);
}
.MainBombay .p7 {
  transform: rotate(270deg);
}
.MainBombay .p8 {
  transform: rotate(306deg);
}
.MainBombay .p9 {
  transform: rotate(342deg);
}

/* --- CHAKRA ROTATION TRANSFORMATION TIMELINE KEYFRAMES --- */
@keyframes continuousChakraRotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
