.bet-input-modal-backdrop {
  display: none;

  &.is-open {
    display: block;
  }
}

.bet-input-modal {
  position: fixed;
  right: 0;
  bottom: 64px;
  left: 0;
  z-index: 111;

  display: grid;
  gap: 16px;

  padding: 24px 16px;

  border-radius: 16px 16px 0px 0px;
  background: var(--bg-color);

  transform: translateY(100%);
  transition: transform 0.3s;

  &.is-open {
    transform: translateY(0);
  }

  .heading {
    > span {
      color: #000;
      text-align: center;
      font-family: Mulish;
      font-size: 18px;
      font-style: normal;
      font-weight: 800;
      line-height: 20px; /* 111.111% */
      letter-spacing: 0.018px;
    }

    > .modal-close-btn {
      top: -25px !important;
    }
  }

  .bet-input-details {
    display: grid;
    padding: 16px 0px;
    gap: 8px;

    .title {
      color: rgba(0, 0, 0, 0.8);
      font-family: Mulish;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 16px; /* 114.286% */
      letter-spacing: 0.1px;

      &.win {
        font-weight: 700;
      }
    }

    .amount {
      color: rgba(0, 0, 0, 0.8);
      text-align: right;
      font-family: Poppins;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 16px; /* 114.286% */
      letter-spacing: 0.1px;

      &.win {
        font-weight: 700;
      }
    }

    .close-icon-btn {
      display: flex;
      padding: 0;
      margin: 0;
      right: 16px;
      top: 14px;
      border: none;
      background: none;

      > svg {
        fill: #505760;
      }
    }

    .tokens > button span {
      color: #000;
      text-align: center;
      font-family: Mulish;
      font-size: 12.151px;
      font-style: normal;
      font-weight: 800;
      letter-spacing: 0.087px;
    }
  }
}

.bet-amount {
  display: flex;
  height: 48px;
  width: 100%;
  padding: 0px 16px;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  align-self: stretch;

  color: var(--Colors-Gray-Gray-500, #505760);
  font-family: Mulish;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;

  border-radius: 8px;
  border: 1px solid var(--Colors-Gray-Gray-100, #cbced2);
  background-color: var(--Colors-Base-White, #fff);
}

.dark-mode .bet-amount {
  color: var(--Colors-Gray-Gray-200, #bcbfc3);

  border-radius: 8px;
  background-color: #333;
}

.dark-mode .bet-input-modal {
  background: #1d1d1d;

  .heading {
    > span {
      color: var(--Colors-Base-White, #fff);
    }
  }

  .bet-input-details {
    .title {
      color: var(--Colors-Gray-Gray-200, #bcbfc3);
      font-family: Mulish;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 16px; /* 114.286% */
      letter-spacing: 0.1px;

      &.win {
        font-weight: 700;
      }
    }

    .amount {
      color: var(--Colors-Gray-Gray-200, #bcbfc3);
      text-align: right;
      font-family: Poppins;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 16px; /* 114.286% */
      letter-spacing: 0.1px;

      &.win {
        font-weight: 700;
      }
    }

    .close-icon-btn {
      > svg {
        fill: #8e9399;
      }
    }
  }
}

/* Ball Selection Styles */
.ball-selection {
  margin: 10px 0;
  padding: 10px 5px;
  background-color: var(--bg-color);
  border-radius: 8px;
}

.ball-checkbox {
  position: relative;
  margin: 3px;
}

.ball-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.ball-label {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.2s;
}

.ball-image-container {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.2s;
}

.ball-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all 0.2s;
}

.ball-input:checked + .ball-label .ball-image-container {
  transform: scale(1.1);
  box-shadow: 0 0 8px var(--green-500);
  background-color: var(--green-500);
}

.ball-input:checked + .ball-label .ball-image {
  filter: brightness(1.1);
}

.ball-input:checked + .ball-label::after {
  content: "✓";
  position: absolute;
  bottom: -5px;
  font-size: 12px;
  font-weight: bold;
  color: #28a745;
}