.app-main {
  width: 100%;
}
.main {
  position: relative;
}
.main .title-spin {
  text-align: center;
  position: absolute;
  top: 163px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 1200px;
  display: block;

  font-weight: 300 !important;
}
.main .title-spin-subtitle {
  font-weight: 600;
  font-size: 32px;
  font-family: "Alexandira";
}
.main .title-spin-heading {
  display: block;
  font-family: "Alexandira";
  display: block;
  font-size: 52px;
  font-weight: 600 !important;
  line-height: 1.3;
}
.main .title-spin-description {
  display: block;
  font-size: 16px;
  font-weight: 300;
  text-align: center;
  font-family: "Alexandira";
}
.main .title-spin-button {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.main .title-spin .m {
  opacity: 60%;
}
.vagisan-wheel-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

/* Crossfade background layers */
.vagisan-bg-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0;
  transition: opacity 400ms ease;
  z-index: 0;
}

.vagisan-bg-layer.active {
  opacity: 1;
}

/* Wheel Mask - Container để cắt nửa wheel */
.wheel-mask {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 1140px;
  display: flex;
  justify-content: center;
  align-items: flex-end; /* Căn wheel xuống dưới để chỉ hiện nửa trên */
}

/* Flip Card Container */
.flip-card {
  width: 280px;
  height: 400px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  /* Counter-rotate nội dung bên trong để giữ text/button thẳng, nhưng card container vẫn xoay theo cung tròn */
  transform: rotate(calc(-1 * var(--inner-rotation, 0deg)));
}

.flip-card.flip-enabled:hover .flip-card-inner,
.circular-card.flip-enabled:hover .flip-card-inner {
  transform: rotate(calc(-1 * var(--inner-rotation, 0deg))) rotateY(180deg);
}

/* Card faces */
.flip-card-front,
.flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); */
}

/* Front card */
.flip-card-front {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.flip-card-front::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-10px, -10px) rotate(1deg);
  }
}

.flip-card-front span:first-child {
  display: none;
}

.flip-card-front span:nth-child(2) {
  font-size: 24px;
  font-weight: 400;
  color: #f8bbd9;
  line-height: 1.3;
  text-align: center;
  margin-top: 20px;
  z-index: 1;
  position: relative;
}

.flip-card-front span:nth-child(2) strong {
  font-weight: 700;
  font-size: 28px;
}

.flip-card-front span:nth-child(3) {
  font-size: 14px;
  font-weight: 400;
  color: #f8bbd9;
  text-align: center;
  margin-bottom: 20px;
  z-index: 1;
  position: relative;
}

/* Back card */
.flip-card-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  position: relative;
}
.flip-card-back .button-container {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
  border-radius: 16px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.flip-card-back {
  position: relative;
}
.flip-card-back .button-detail {
  position: absolute;
  width: 179px;
  height: 32px;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  transform: translateX(-50%);
}

.flip-card-back::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
}

/* Icon styling */
.vagisan-wheel-container .icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
  z-index: 1;
  position: relative;
}

.vagisan-wheel-container .icon-top {
  width: 12px;
  height: 12px;
  background: #6b46c1;
  border-radius: 50%;
  margin-bottom: 3px;
}

.vagisan-wheel-container .icon-middle {
  width: 20px;
  height: 4px;
  background: #f59e0b;
  border-radius: 2px;
  margin-bottom: 3px;
}

.vagisan-wheel-container .icon-bottom {
  width: 8px;
  height: 8px;
  background: #6b46c1;
  border-radius: 50%;
}

/* Description text */
.description {
  font-size: 12px;
  color: #8b2b6b;
  text-align: center;
  margin: 0 0 10px 0;
  line-height: 1.4;
  z-index: 1;
  position: relative;
}

/* Product image */
.product-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  width: 60%;
}

.bottle {
  width: 60px;
  height: 80px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px 8px 4px 4px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.bottle-lid {
  width: 100%;
  height: 12px;
  background: white;
  border-radius: 4px 4px 0 0;
  position: relative;
}

.bottle-lid::after {
  content: "OLLY";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 6px;
  color: #9ca3af;
  font-weight: 600;
}

.bottle-label {
  width: 100%;
  height: 50px;
  background: #8b2b6b;
  position: relative;
  margin-top: 2px;
}

.label-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 2px solid white;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.label-text {
  font-size: 6px;
  color: white;
  font-weight: 600;
  line-height: 1;
}

.label-text-french {
  font-size: 4px;
  color: white;
  font-weight: 400;
  line-height: 1;
}

.raspberry {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #dc2626;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.raspberry.left {
  left: 5px;
}

.raspberry.right {
  right: 5px;
}

.gummies {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: 40px;
}

.gummy {
  width: 4px;
  height: 4px;
  background: #8b2b6b;
  border-radius: 50%;
}

/* Product info */
.product-info {
  text-align: center;
  margin-bottom: 15px;
  z-index: 1;
  position: relative;
  margin-top: 10px;
}

.product-info h3 {
  font-size: 14px;
  color: #8b2b6b;
  margin: 0 0 5px 0;
  font-weight: 600;
}

.price {
  font-size: 16px;
  color: #8b2b6b;
  font-weight: 700;
}

.button-container {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* Add to cart button */
.add-to-cart {
  background: #d7005a;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
  z-index: 1;
  position: relative;
  width: 100%;
  margin: 0px auto;
}

.add-to-cart:hover {
  background: #7a2560;
}

/* Circular Layout Styles */
.circular-container {
  position: relative;
  width: 1400px;
  height: 1400px;
  margin: 0 auto;
  transform: translateY(50%); /* Đẩy wheel xuống để chỉ hiện nửa trên */
}

.circular-card {
  cursor: pointer;
  position: absolute;
  width: 270px;
  height: 335px;
  /* width: 251px;
  height: 393px; */
  top: 50%;
  left: 50%;
  transform-origin: center;
  transition: transform 0.3s ease;
}
/* .flip-enabled{
  width: 251px;
  height: 420px;
} */

/* Dynamic positioning - sẽ được set bằng JavaScript */
/* Bỏ counter-rotation để card xoay theo cung tròn tự nhiên */
.circular-card {
  transform: translate(-50%, -50%) rotate(var(--card-rotation, 0deg))
    translateY(-600px);
}

/* Hover effect cho circular cards - chỉ áp dụng cho cards ở nửa trên */
.circular-card:hover {
  z-index: 10;
}

/* Tự động flip card index === 0 sau khi spin xong */
.circular-card.auto-flip .flip-card-inner {
  transform: rotate(calc(-1 * var(--inner-rotation, 0deg))) rotateY(180deg) !important;
}

/* Disable hover cho cards ở nửa dưới (bị ẩn) - chỉ disable scale effect, vẫn cho phép flip */
/* .circular-card:nth-child(n+6):hover {
  transform: translate(-50%, -50%) rotate(var(--card-rotation, 0deg)) translateY(-600px) !important;
  z-index: 1;
} */

/* Đảm bảo flip effect hoạt động cho tất cả cards */
/* .circular-card.flip-enabled:nth-child(n+6):hover .flip-card-inner {
  transform: rotate(calc(-1 * var(--inner-rotation, 0deg))) rotateY(180deg);
} */

/* Responsive design */
@media (max-width: 768px) {
  .wheel-mask {
    width: 1200px;
    height: 600px;
  }

  .circular-container {
    width: 1200px;
    height: 1200px;
  }

  .circular-card {
    width: 200px;
    height: 280px;
  }

  .circular-card:nth-child(1) {
    transform: translate(-50%, -50%) rotate(0deg) translateY(-500px)
      rotate(0deg);
  }

  .circular-card:nth-child(2) {
    transform: translate(-50%, -50%) rotate(45deg) translateY(-500px)
      rotate(-45deg);
  }

  .circular-card:nth-child(3) {
    transform: translate(-50%, -50%) rotate(90deg) translateY(-500px)
      rotate(-90deg);
  }

  .circular-card:nth-child(4) {
    transform: translate(-50%, -50%) rotate(135deg) translateY(-500px)
      rotate(-135deg);
  }

  .circular-card:nth-child(5) {
    transform: translate(-50%, -50%) rotate(180deg) translateY(-500px)
      rotate(-180deg);
  }

  .circular-card:nth-child(6) {
    transform: translate(-50%, -50%) rotate(225deg) translateY(-500px)
      rotate(-225deg);
  }

  .circular-card:nth-child(7) {
    transform: translate(-50%, -50%) rotate(270deg) translateY(-500px)
      rotate(-270deg);
  }

  .circular-card:nth-child(8) {
    transform: translate(-50%, -50%) rotate(315deg) translateY(-500px)
      rotate(-315deg);
  }
}

@media (max-width: 480px) {
  .wheel-mask {
    width: 1000px;
    height: 500px;
  }

  .circular-container {
    width: 1000px;
    height: 1000px;
  }

  .circular-card {
    width: 150px;
    height: 200px;
  }

  .circular-card:nth-child(1) {
    transform: translate(-50%, -50%) rotate(0deg) translateY(-400px)
      rotate(0deg);
  }

  .circular-card:nth-child(2) {
    transform: translate(-50%, -50%) rotate(45deg) translateY(-400px)
      rotate(-45deg);
  }

  .circular-card:nth-child(3) {
    transform: translate(-50%, -50%) rotate(90deg) translateY(-400px)
      rotate(-90deg);
  }

  .circular-card:nth-child(4) {
    transform: translate(-50%, -50%) rotate(135deg) translateY(-400px)
      rotate(-135deg);
  }

  .circular-card:nth-child(5) {
    transform: translate(-50%, -50%) rotate(180deg) translateY(-400px)
      rotate(-180deg);
  }

  .circular-card:nth-child(6) {
    transform: translate(-50%, -50%) rotate(225deg) translateY(-400px)
      rotate(-225deg);
  }

  .circular-card:nth-child(7) {
    transform: translate(-50%, -50%) rotate(270deg) translateY(-400px)
      rotate(-270deg);
  }

  .circular-card:nth-child(8) {
    transform: translate(-50%, -50%) rotate(315deg) translateY(-400px)
      rotate(-315deg);
  }
}

.mask-overlay {
  display: flex;
  width: 400px;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  color: white;
}

/* Navigation buttons styling */
.button-left,
.button-right {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #d7005a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid rgba(215, 0, 90, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.button-left:hover,
.button-right:hover {
  background: #d7005a;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.button-left:active,
.button-right:active {
  transform: scale(0.95);
}

.button-left svg,
.button-right svg {
  transition: transform 0.2s ease;
}

.button-left:hover svg,
.button-right:hover svg {
  transform: scale(1.1);
}

/* Wheel Center - Tâm của vòng quay */
.wheel-center {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 20;
}

.wheel-center-button {
  width: 420px;
  height: 60px;
  background: #b10242;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
}
.wheel-center-button-container {
  width: 360px;
  height: 60px;
  position: absolute;
  top: -420px;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: white;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  z-index: 1;
  position: relative;
}
.wheel-center-button-button {
  width: 30px;
  height: 30px;
  background: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #d7005a;
}

/* 
.wheel-center-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 20%, rgba(139, 43, 107, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(160, 58, 122, 0.1) 0%, transparent 50%);
  animation: centerFloat 4s ease-in-out infinite;
} */

@keyframes centerFloat {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-5px, -5px) rotate(1deg);
  }
}

.wheel-center-button:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.wheel-center-button:active {
  transform: scale(0.95);
}

.spin-text {
  font-size: 18px;
  font-weight: 700;
  color: white;
  z-index: 1;
  position: relative;
  text-align: center;
}

/* .wheel-pointer {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 25px solid white;
  margin-top: -10px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  z-index: 21;
} */

/* Animation cho wheel khi quay */
.wheel-spinning .circular-card {
  animation: wheelSpin 8s cubic-bezier(0.17, 0.67, 0.12, 0.99) forwards;
  will-change: transform;
  animation-fill-mode: forwards;
}

/* Animation cho inner rotation để counter-rotate khi wheel spin */
.wheel-spinning .circular-card .flip-card-inner {
  animation: innerSpin 8s cubic-bezier(0.17, 0.67, 0.12, 0.99) forwards;
  will-change: transform;
  animation-fill-mode: forwards;
}

/* Animation cho wheel khi stepping (navigation buttons) */
.wheel-stepping .circular-card {
  animation: wheelSpin 0.4s ease-in-out forwards;
  will-change: transform;
  animation-fill-mode: forwards;
}

.wheel-stepping .circular-card .flip-card-inner {
  animation: innerSpin 0.4s ease-in-out forwards;
  will-change: transform;
  animation-fill-mode: forwards;
}

@keyframes innerSpin {
  0% {
    transform: rotate(calc(-1 * var(--start-inner-rotation, 0deg)));
  }
  100% {
    transform: rotate(calc(-1 * var(--end-inner-rotation, 0deg)));
  }
}

@keyframes wheelSpin {
  0% {
    transform: translate(-50%, -50%) rotate(var(--start-rotation, 0deg))
      translateY(-600px);
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--end-rotation, 0deg))
      translateY(-600px);
  }
}

/* Hiệu ứng pulse cho card được chọn */
@keyframes cardPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(var(--end-rotation, 0deg))
      translateY(-600px) scale(1);
    /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); */
  }
  50% {
    transform: translate(-50%, -50%) rotate(var(--end-rotation, 0deg))
      translateY(-600px) scale(1.1);
    /* box-shadow: 0 0 30px rgba(139, 43, 107, 0.6), 0 8px 32px rgba(0, 0, 0, 0.2); */
  }
}

/* Hiệu ứng cho nút spin khi đang quay */
.wheel-center-button.spinning {
  animation: buttonPulse 0.5s ease-in-out infinite alternate;
}

@keyframes buttonPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  }
  100% {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  }
}

/* Responsive cho wheel center */
@media (max-width: 768px) {
  .wheel-center-button {
    width: 100px;
    height: 100px;
  }

  .spin-text {
    font-size: 16px;
    letter-spacing: 1px;
  }

  .wheel-pointer {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 20px solid white;
  }
}

@media (max-width: 480px) {
  .wheel-center-button {
    width: 80px;
    height: 80px;
  }

  .spin-text {
    font-size: 14px;
    letter-spacing: 1px;
  }

  .wheel-pointer {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 16px solid white;
  }
}

/* CSS cho card classes sẽ được tạo động bởi JavaScript */

/* Thêm CSS animation cho các hiệu ứng */
@keyframes pointerBlink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

/* Hiệu ứng glow cho pointer khi có kết quả */
.wheel-pointer.result {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3))
    drop-shadow(0 0 10px rgba(139, 43, 107, 0.8));
}