/* Webflow: initial hidden until IX */
@media (min-width: 992px) {
  html.w-mod-js:not(.w-mod-ix) [data-w-id="298c28df-80f9-7246-a59c-8402adc61155"] {
    opacity: 0;
  }
  html.w-mod-js:not(.w-mod-ix) [data-w-id="298c28df-80f9-7246-a59c-8402adc61157"] {
    opacity: 0;
  }
  html.w-mod-js:not(.w-mod-ix) [data-w-id="e07e103f-530d-8463-3402-1ddf9d5ccaa7"] {
    opacity: 0;
  }
}

:root {
  font-size: 16px;
  --ultra-large: calc(50px + (155 - 50) * (100vw - 320px) / (1920 - 320));
  --h1: calc(40px + (48 - 19) * (100vw - 320px) / (1920 - 320));
  --h2: calc(24px + (40 - 16) * (100vw - 320px) / (1920 - 320));
  --h3: calc(18px + (24 - 16) * (100vw - 320px) / (1920 - 320));
  --p: calc(15px + (20 - 16) * (100vw - 320px) / (1920 - 320));
  --p-tiny: calc(12px + (16 - 14) * (100vw - 320px) / (1920 - 320));
  --footer: calc(10px + (14 - 10) * (100vw - 320px) / (1920 - 320));
}
.ms-ultra-large {
  font-size: var(--ultra-large);
  line-height: 1;
}
.ms-h1 {
  font-size: var(--h1);
  line-height: 1.1;
}
.ms-h2 {
  font-size: var(--h2);
  line-height: 1.3;
}
.ms-h3 {
  font-size: var(--h3);
  line-height: 1.3;
}
.ms-p {
  font-size: var(--p);
  line-height: 1.2;
}
.ms-p-tiny {
  font-size: var(--p-tiny);
  line-height: 1.2;
}
.ms-footer {
  font-size: var(--footer);
  line-height: 1;
}
html,
body {
  max-width: 100vw;
}
.w-slider-dot.w-active {
  background-color: #fff;
  width: 1.9rem !important;
  opacity: 1;
}
.w-slider-dot {
  width: 0.8rem !important;
  height: 0.35rem !important;
  border-radius: 2px;
  opacity: 0.5;
}
.vote-ranking {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
/* One row for vote-main + choiceText below, left-aligned */
.vote-ranking .vote-ranking-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  text-align: left;
  row-gap: 0.3rem;
}
.vote-ranking .vote-ranking-item .vote-main {
  align-items: center;
}
.vote-ranking .vote-ranking-item .vote-choice-text {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: left;
  align-self: flex-start;
  font-size: var(--p-tiny);
  line-height: 1.3;
  color: #4a353d;
  word-break: break-word;
  display: none;
}
/* Error message — aligned with vote-main / vote bar */
.vote-ranking-msg {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 1rem 0.7rem 0.85rem;
  background: linear-gradient(160deg, #fffafc 0%, #fff3f9 55%, #ffeef6 100%);
  border: 1px solid rgba(202, 99, 146, 0.4);
  border-left: 3px solid #ca6392;
  border-radius: 0.5rem;
  color: #4a353d;
  box-shadow: 0 1px 3px rgba(202, 99, 146, 0.12);
}
/* % label + bar — percentage left of the track */
.vote-ranking .vote-bar-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 0.5rem;
}
.vote-ranking .vote-bar-pct {
  flex: 0 0 auto;
  min-width: 2.6rem;
  text-align: right;
  font-size: var(--p-tiny);
  font-weight: 600;
  color: #ca6392;
  line-height: 1;
  letter-spacing: 0.02em;
}
.vote-ranking .vote-bar-track {
  flex: 1;
  min-width: 0;
  min-height: 25px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}
/* Width follows % — heart at end of fill, moves with the bar */
.vote-ranking .vote-bar-seg {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  min-height: 25px;
  box-sizing: border-box;
}
/* 0%: still room to place the heart */
.vote-ranking .vote-bar-seg--zero {
  min-width: 28px;
}
.vote-ranking .vote-bar-seg .vote-bar {
  flex: 1 1 0;
  min-width: 0;
  min-height: 23px;
  height: 23px;
  width: auto;
  max-width: 100%;
  /* flex can glitch overflow/filter on children — reassert per theme */
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  isolation: isolate;
  transform: translateZ(0);
}
/* Webflow IX does not bind nodes injected after load — mimic a-11 (loop) for .vote-bar.special */
.vote-ranking .vote-bar {
  position: relative;
  max-width: 100%;
}
/* Blur + radial from theme — restated: keyframes / flex often drop some properties */
.vote-ranking .vote-bar > .vote-bar.special {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 100%;
  box-sizing: border-box;
  border-bottom-style: none;
  z-index: 1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0);
  background-image: radial-gradient(
    circle,
    rgba(245, 216, 218, 0) 30%,
    #ca6392 50%,
    rgba(245, 216, 218, 0) 70%
  );
  will-change: left, opacity;
  animation: voteBarSpecialShine 2.5s ease-in-out infinite;
}
@keyframes voteBarSpecialShine {
  0% {
    left: 0;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 20px);
    opacity: 1;
  }
}
/* Mimic a-10 (loop) — heart overlaps bar edge like the original theme */
.vote-ranking .vote-bar-seg .vote-heart {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  margin-left: -1.1rem;
  width: 25px;
  height: 25px;
  transform-origin: 50% 50%;
  animation: voteHeartPulse 1s ease-in-out infinite;
}
.vote-ranking .vote-bar-seg .vote-heart img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@keyframes voteHeartPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
/* Vote ranking loading — while waiting for the API */
.vote-ranking-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  color: #4a353d;
  font-size: var(--p);
  line-height: 1.3;
}
.vote-ranking-loading .vote-ranking-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid rgba(202, 99, 146, 0.25);
  border-top-color: #ca6392;
  border-radius: 50%;
  animation: voteRankingSpin 0.75s linear infinite;
  flex-shrink: 0;
}
@keyframes voteRankingSpin {
  to {
    transform: rotate(360deg);
  }
}

select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}