/* Layout for Elementor */
.lucky-wheel-page-container {
  display: flex;
  align-items: center;
  gap: 30px;
}
.lucky-wheel-page-container .form-column {
  flex: 1 1 40%;
}
.lucky-wheel-page-container .wheel-column {
  flex: 1 1 60%;
}
@media (max-width: 880px) {
  .lucky-wheel-page-container {
    flex-direction: column;
  }
}

/* Wheel Styles */
#lwt-container-wrapper {
  --wheel-size: 450px;
  max-width: var(--wheel-size);
  margin: 40px auto;
  font-family: "Vazirmatn", sans-serif;
}
#lwt-main-container {
  position: relative;
  margin-bottom: 20px;
}
#lwt-pointer-container {
  position: absolute;
  width: 15%;
  height: 18%;
  top: -9%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}
#lwt-pointer-container img {
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.2));
}
#lwt-wheel-container {
  position: relative;
  width: 100%;
  padding-top: 100%;
  height: 0;
}
#lwt-static-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.2),
    inset 2px 2px 8px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
#lwt-static-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.lwt-static-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: calc(var(--wheel-size) / 2 * -0.97);
  background-color: #000000;
  border-radius: 50%;
  transform-origin: 5px calc(var(--wheel-size) / 2 * 0.97);
}
#lwt-wheel-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 97%;
  height: 97%;
  transform: translate(-50%, -50%);
}
#lwt-canvas {
  width: 100%;
  height: 100%;
}
#lwt-center-image-container {
  position: absolute;
  width: 25%;
  height: 25%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
}
#lwt-center-image-container img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.1));
}
#lwt-message {
  margin: 20px auto;
  padding: 15px;
  border-radius: 8px;
  width: 100%;
  text-align: center;
}
#lwt-message.success {
  background-color: #d4edda;
  color: #155724;
}
#lwt-message.error,
.lwt-error-message {
  background-color: #f8d7da;
  color: #721c24;
}
.ltr {
  direction: ltr;
  text-align: left;
}