/* The vote labels and selected state still come from the original component. */
#app .lottery .rectangle.social-vote-card .c_u_item {
  box-sizing: border-box;
  min-height: clamp(92px, 29vw, 118px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid rgba(255, 255, 255, .7);
  color: #252126;
}

#app .lottery .rectangle.social-vote-card .c_u_item img {
  width: clamp(42px, 13vw, 62px) !important;
  height: clamp(42px, 13vw, 62px) !important;
  flex: none;
  object-fit: contain;
}

#app .lottery .rectangle.social-vote-card .c_u_item .text_k {
  width: 100%;
  color: #252126 !important;
  font-size: clamp(12px, 3.4vw, 16px);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

#app .lottery .rectangle.social-vote-card.active .c_u_item {
  box-shadow: inset 0 0 0 2px #cf9b69;
}

/* Preserve the component's selected state.  The original card component
   marks selected options with a dark card, warm text, a gold border, and its
   corner check mark.  The base icon treatment above must not turn selected
   cards back into white unselected cards. */
#app .lottery .rectangle.social-vote-card.active .c_u_item {
  background: #212121 !important;
  border: 2px solid #766350 !important;
  color: #f3c7a2 !important;
  box-shadow: none;
}

#app .lottery .rectangle.social-vote-card.active .c_u_item .text_k {
  color: #f3c7a2 !important;
}

/* Vue re-renders can drop the helper class from cards after a click.  Scope
   the same layout to the stable vote-card container so every option keeps
   the same icon-over-label arrangement before and after selection. */
#app .lottery .sumValueTwoSides .c_u_item {
  box-sizing: border-box;
  min-height: clamp(92px, 29vw, 118px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid rgba(255, 255, 255, .7);
  color: #252126;
}

#app .lottery .sumValueTwoSides .c_u_item img {
  width: clamp(42px, 13vw, 62px) !important;
  height: clamp(42px, 13vw, 62px) !important;
  flex: none;
  object-fit: contain;
}

#app .lottery .sumValueTwoSides .c_u_item .text_k {
  width: 100%;
  color: #252126 !important;
  font-size: clamp(12px, 3.4vw, 16px);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

#app .lottery .sumValueTwoSides .rectangle.active .c_u_item {
  background: #212121 !important;
  border: 2px solid #766350 !important;
  color: #f3c7a2 !important;
  box-shadow: none;
}

#app .lottery .sumValueTwoSides .rectangle.active .c_u_item .text_k {
  color: #f3c7a2 !important;
}

/* Desktop vote summary: match the voting page's 520px content width.  The
   selected-vote panel lives inside that transformed bar, so
   applying the page-level left/right gutters a second time shrinks it to
   roughly 300px and makes the input/submit controls overflow.  Reset the
   nested panel to the bar's full content width and place it directly above
   the bar.  The mobile layout keeps the original full-width behavior. */
@media (min-width: 521px) {
  #app:has(> .lottery) .bottom-bar[data-v-e71ca208] {
    width: min(100vw, 520px) !important;
    max-width: 520px !important;
  }

  #app .bottom-bar .wrapper_box[data-v-e71ca208] {
    left: 0 !important;
    right: 0 !important;
    bottom: 100% !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  #app .bottom-bar .wrapper_box[data-v-e71ca208] .box_main {
    width: 100%;
    box-sizing: border-box;
  }

  #app .bottom-bar .wrapper_box[data-v-e71ca208] .part_input {
    min-width: 0;
  }

  #app .bottom-bar .wrapper_box[data-v-e71ca208] .amount-wrapper {
    min-width: 0;
  }
}