/* =========================================================
   Gymsessed Reusable Native-Style Dial Picker
   ========================================================= */

.gys-app-shell .gys-dial-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
}

.gys-app-shell .gys-dial-box {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    #181818 !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 26px !important;
  padding: 12px !important;
  overflow: hidden !important;
  min-height: 286px !important;
}

.gys-app-shell .gys-dial-label {
  color: var(--gys-text-soft) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 12px !important;
}

.gys-app-shell [data-gys-dial] {
  min-height: 220px !important;
}

.gys-app-shell .gys-dial {
  width: 100% !important;
  height: 220px !important;
  position: relative !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  outline: none !important;
  cursor: grab !important;
}

.gys-app-shell .gys-dial.is-dragging {
  cursor: grabbing !important;
}

.gys-app-shell .gys-dial-window {
  width: 100% !important;
  height: 220px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at center, rgba(173, 255, 0, 0.13), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    rgba(0, 0, 0, 0.24) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.gys-app-shell .gys-dial-track {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  z-index: 2 !important;
  transition: transform 0.24s cubic-bezier(0.18, 0.9, 0.22, 1) !important;
  will-change: transform !important;
}

.gys-app-shell .gys-dial-track.no-transition,
.gys-app-shell .gys-dial.is-dragging .gys-dial-track {
  transition: none !important;
}

.gys-app-shell .gys-dial-item,
.gys-app-shell button.gys-dial-item {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(245, 245, 245, 0.28) !important;
  font-family: var(--gys-font) !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  line-height: 44px !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer !important;
  transform: scale(0.78) !important;
  opacity: 0.56 !important;
  transition:
    color 0.12s ease,
    opacity 0.12s ease,
    transform 0.12s ease,
    font-size 0.12s ease !important;
}

.gys-app-shell .gys-dial-item:hover,
.gys-app-shell button.gys-dial-item:hover {
  background: transparent !important;
  color: rgba(245, 245, 245, 0.62) !important;
  box-shadow: none !important;
}

.gys-app-shell .gys-dial-item[data-distance="1"] {
  color: rgba(245, 245, 245, 0.68) !important;
  transform: scale(0.9) !important;
  opacity: 0.82 !important;
}

.gys-app-shell .gys-dial-item[data-distance="2"] {
  color: rgba(245, 245, 245, 0.43) !important;
  transform: scale(0.82) !important;
  opacity: 0.62 !important;
}

.gys-app-shell .gys-dial-item[data-distance="3"] {
  color: rgba(245, 245, 245, 0.24) !important;
  transform: scale(0.74) !important;
  opacity: 0.44 !important;
}

.gys-app-shell .gys-dial-item.is-active,
.gys-app-shell button.gys-dial-item.is-active {
  color: var(--gys-primary) !important;
  font-size: 32px !important;
  font-weight: 950 !important;
  transform: scale(1) !important;
  opacity: 1 !important;
  text-shadow: 0 0 20px rgba(173, 255, 0, 0.38) !important;
}

.gys-app-shell .gys-dial-selection {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  top: 50% !important;
  height: 48px !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
  border-radius: 18px !important;
  background:
    linear-gradient(90deg, rgba(173, 255, 0, 0.03), rgba(173, 255, 0, 0.12), rgba(173, 255, 0, 0.03)) !important;
  border-top: 1px solid rgba(173, 255, 0, 0.32) !important;
  border-bottom: 1px solid rgba(173, 255, 0, 0.32) !important;
  pointer-events: none !important;
}

.gys-app-shell .gys-dial-selection::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 72px !important;
  height: 72px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 999px !important;
  background: rgba(173, 255, 0, 0.055) !important;
  filter: blur(12px) !important;
}

.gys-app-shell .gys-dial-fade {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 76px !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

.gys-app-shell .gys-dial-fade-top {
  top: 0 !important;
  background:
    linear-gradient(180deg, rgba(16, 16, 16, 0.98), rgba(16, 16, 16, 0)) !important;
}

.gys-app-shell .gys-dial-fade-bottom {
  bottom: 0 !important;
  background:
    linear-gradient(0deg, rgba(16, 16, 16, 0.98), rgba(16, 16, 16, 0)) !important;
}

.gys-app-shell .gys-dial:focus .gys-dial-window {
  border-color: rgba(173, 255, 0, 0.38) !important;
  box-shadow: 0 0 0 3px rgba(173, 255, 0, 0.08) !important;
}

@media (max-width: 390px) {
  .gys-app-shell .gys-dial-group {
    gap: 9px !important;
  }

  .gys-app-shell .gys-dial-box {
    padding: 10px !important;
    min-height: 270px !important;
  }

  .gys-app-shell .gys-dial,
  .gys-app-shell .gys-dial-window,
  .gys-app-shell [data-gys-dial] {
    height: 208px !important;
    min-height: 208px !important;
  }

  .gys-app-shell .gys-dial-item.is-active,
  .gys-app-shell button.gys-dial-item.is-active {
    font-size: 29px !important;
  }
}

/* Compact reps dials inside active workout set cards */
.gys-app-shell .gys-live-reps-dial-wrap .gys-dial-item,
.gys-app-shell .gys-live-reps-dial-wrap button.gys-dial-item {
  font-size: 16px !important;
}

.gys-app-shell .gys-live-reps-dial-wrap .gys-dial-item.is-active,
.gys-app-shell .gys-live-reps-dial-wrap button.gys-dial-item.is-active {
  font-size: 24px !important;
}