/* =========================================================
   WP Interactive Polls - Frontend
   ======================================================= */
.red-text {
  color: #cf0000;
  font-size: 12px;
}
.wpp-poll {
  width: 100%;
  position: relative;
}

.wpp-poll.is-loading {
  opacity: 0.85;
  pointer-events: none;
}

.wpp-q {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.wpp-sub {
  text-align: center;
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 16px;
}

.wpp-msg {
  margin-top: 10px;
  font-size: 12px;
}

.wpp-msg.is-error { color: #c00; }
.wpp-msg.is-success { color: #1a7f37; }

.wpp-foot {
  margin-top: 12px;
  text-align: right;
  font-size: 12px;
  opacity: 0.85;
}

.wpp-votes {
  display: inline-block;
}
.wpp-votes-section {
    text-align: left;
}

/* =========================================================
   Template 1 (Horizontal / Wide)
   ======================================================= */

.wpp-wide {
  background: #fff;
  border-radius: 10px;
  padding: 22px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
}

.wpp-wide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 720px) {
  .wpp-wide-grid {
    grid-template-columns: 1fr;
  }
}

/* Bars */
.wpp-wide .wpp-bar {
  position: relative;
  border: 0;
  background: var(--wpp-t1-poll-bar-bg, var(--wpp-t1-bar, var(--wpp-bar, #e3e3e3)));
  border-radius: 6px;
  min-height: 54px;
  width: 100%;
  text-align: left;
  padding: 0;
  overflow: hidden;
}

.wpp-wide .wpp-bar--vote {
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.12s ease;
}

.wpp-wide .wpp-bar--vote:hover {
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}

.wpp-wide .wpp-bar--vote:active {
  transform: translateY(0px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.wpp-wide .wpp-bar-inner,
.wpp-wide .wpp-bar-label,
.wpp-wide .wpp-bar-meta {
  position: relative;
  z-index: 2;
}

.wpp-wide .wpp-bar-label {
  display: inline-block;
  padding: 18px 16px;
  font-size: 12px;
  font-weight: 400;
  color: var(--wpp-t1-accent-text, var(--wpp-accent-text, #ffffff)) !important;
}

.wpp-wide .wpp-bar--result .wpp-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 16px;
}

.wpp-wide .wpp-bar--result .wpp-bar-label {
  padding: 0;
  font-size: 12px;
  opacity: 0.9;
}

.wpp-wide .wpp-bar-meta {
  font-size: 12px;
  font-weight: 400;
}

/* Result fill */
.wpp-wide .wpp-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  /* Results bar fill color (Template 1)
     - Results Bar Color: --wpp-t1-results-bar
     - Fallback to legacy accent vars
  */
  background: var(--wpp-t1-results-bar, var(--wpp-t1-accent, var(--wpp-accent, #12294b)));
  transition: width 600ms ease;
}

/* Results container background/text */
.wpp-wide-results .wpp-bar--result {
  background: var(--wpp-t1-poll-bar-bg, var(--wpp-t1-bar, var(--wpp-bar, #e3e3e3)));
}

.wpp-wide-results .wpp-bar--result .wpp-bar-label,
.wpp-wide-results .wpp-bar--result .wpp-bar-meta {
  color: var(--wpp-t1-results-text, var(--wpp-t1-accent-text, var(--wpp-accent-text, #ffffff))) !important;
}

.wpp-wide-results .wpp-bar-fill {
  border-radius: 6px;
}

/* "My vote" bar fill override */
.wpp-wide-results .wpp-bar--result.wpp-bar--me .wpp-bar-fill {
  background: var(--wpp-t1-voted-bar, var(--wpp-t1-results-bar, var(--wpp-t1-accent, var(--wpp-accent, #12294b))));
}

/* "My vote" result bar text */
.wpp-wide .wpp-bar.wpp-bar--result.wpp-bar--me * {
  color: var(--wpp-t1-voted-text, var(--wpp-t1-results-text, var(--wpp-t1-accent-text-hover, var(--wpp-accent-text-hover, #ffffff)))) !important;
}

/* Hover result bar text */
.wpp-wide .wpp-bar.wpp-bar--result:hover * {
  /* color: var(--wpp-t1-poll-bar-text-hover, var(--wpp-t1-accent-text-hover, var(--wpp-accent-text-hover, #ffffff))) !important; */
}

/* "Other votes" bar fill override */
.wpp-wide-results .wpp-bar--result .wpp-bar-fill {
  background: var(--wpp-t1-results-bar, var(--wpp-t1-results-bar, var(--wpp-t1-accent, var(--wpp-accent, #12294b))));
}

/* Hover / Focus (Template 1 only) */
.wpp-wide button.wpp-bar:hover,
.wpp-wide button.wpp-bar:focus,
.wpp-wide button.wpp-bar:active{
  background: var(--wpp-t1-poll-bar-hover, var(--wpp-t1-accent-hover, var(--wpp-accent-hover, #0b4ea2))) !important;
  border: none !important;
  color: var(--wpp-t1-poll-bar-text-hover, var(--wpp-t1-accent-text-hover, var(--wpp-accent-text-hover, #ffffff))) !important;
}
/* .wpp-wide button.wpp-bar.wpp-bar--vote:hover {
  background: var(--wpp-t1-poll-bar-hover, var(--wpp-t1-accent-hover, var(--wpp-accent-hover, #0b4ea2))) !important;
  border: none !important;
  color: var(--wpp-t1-poll-bar-text-hover, var(--wpp-t1-accent-text-hover, var(--wpp-accent-text-hover, #ffffff))) !important;
} */

/* .wpp-wide .wpp-bar:hover *,
.wpp-wide .wpp-bar:focus *,
.wpp-wide .wpp-bar:active *, */
.wpp-wide .wpp-bar.wpp-bar--vote:hover span,
.wpp-wide .wpp-bar.wpp-bar--vote:focus span,
.wpp-wide .wpp-bar.wpp-bar--vote:active span {
  color: var(--wpp-t1-poll-bar-text-hover, var(--wpp-t1-accent-text-hover, var(--wpp-accent-text-hover, #ffffff))) !important;
}

/* Prevent text selection on bars/buttons */
.wpp-wide .wpp-bar,
.wpp-wide .wpp-btn--primary,
.wpp-wide .wpp-btn-primary,
.wpp-wide .wpp-btn-outline {
  -webkit-user-select: none;
  user-select: none;
}

/* =========================================================
   Template 2 (Card / Square)
   ======================================================= */

.wpp-card {
  max-width: 100%;
  background: #fff;
  border-radius: 10px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.06);
}

.wpp-card .wpp-q {
  text-align: left;
  font-size: 22px;
}

.wpp-card .wpp-sub {
  text-align: left;
  margin-bottom: 14px;
}

.wpp-choice-list {
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
}

.wpp-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.35;
  cursor: pointer;
}

.wpp-card .wpp-choice,
.wpp-card .wpp-choice-label {
  color: var(--wpp-t2-poll-text, #1f2937) !important;
}

.wpp-card .wpp-choice input[type="radio"] {
  margin-top: 2px;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wpp-card .wpp-choice .wpp-choice-radio {
  height: 16px;
  width: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  display: inline-grid;
  place-content: center;
  background: #fff;
  flex: 0 0 16px;
}

.wpp-card .wpp-choice .wpp-choice-radio::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.12s ease-in-out;
  background: var(--wpp-t2-poll-radio, var(--wpp-t2-accent, var(--wpp-accent, #0b4ea2))) !important;
}

.wpp-card .wpp-choice input[type="radio"]:checked + .wpp-choice-radio::after {
  transform: scale(1);
}

.wpp-actions {
  margin-top: 10px;
}

.wpp-actions-section {
  display: grid;
  grid-template-columns: 80% 20%;
}

.wpp-btn {
  appearance: none;
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  border: 1px solid transparent;
}

/* =========================================================
   Template 1 buttons (Wide)
   ======================================================= */

.wpp-wide .wpp-btn {
  appearance: none;
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  border: 1px solid transparent;
}

/* Template 1 primary button */
.wpp-poll .wpp-wide .wpp-btn-primary {
  background: var(--wpp-t1-btn-bg, var(--wpp-btn-bg, #0b4ea2)) !important;
  color: var(--wpp-t1-btn-text, var(--wpp-btn-text, #ffffff)) !important;
}

/* Template 1 primary hover */
.wpp-poll .wpp-wide .wpp-btn-primary:hover,
.wpp-poll .wpp-wide .wpp-btn-primary:focus {
  background: var(--wpp-t1-btn-hover-bg, var(--wpp-t1-btn-bg, var(--wpp-btn-hover-bg, #083b7a))) !important;
  color: var(--wpp-t1-btn-hover-text, var(--wpp-t1-btn-text, var(--wpp-btn-hover-text, #ffffff))) !important;
}

/* Template 1 outline button (View Results) */
.wpp-poll .wpp-wide .wpp-btn-outline {
  background: transparent !important;
  border-color: var(--wpp-t1-btn-bg, var(--wpp-btn-bg, #0b4ea2)) !important;
  color: var(--wpp-t1-btn-bg, var(--wpp-btn-bg, #0b4ea2)) !important;
}

.wpp-poll .wpp-wide .wpp-btn-outline:hover,
.wpp-poll .wpp-wide .wpp-btn-outline:focus {
  background: var(--wpp-t1-btn-hover-bg, var(--wpp-t1-btn-bg, var(--wpp-btn-hover-bg, #083b7a))) !important;
  color: var(--wpp-t1-btn-hover-text, var(--wpp-t1-btn-text, var(--wpp-btn-hover-text, #ffffff))) !important;
}


/* Template 2 buttons */
.wpp-card .wpp-btn-primary {
  background: var(--wpp-t2-btn-bg, var(--wpp-btn-bg, #0b4ea2)) !important;
  color: var(--wpp-t2-btn-text, var(--wpp-btn-text, #ffffff)) !important;
}

.wpp-card .wpp-btn-primary:hover {
  background: var(--wpp-t2-btn-hover-bg, var(--wpp-t2-btn-bg, var(--wpp-btn-hover-bg, #083b7a))) !important;
  color: var(--wpp-t2-btn-hover-text, var(--wpp-t2-btn-text, var(--wpp-btn-hover-text, #ffffff))) !important;
}

.wpp-card .wpp-btn-outline {
  background: transparent;
  border-color: var(--wpp-t2-btn-bg, var(--wpp-btn-bg, #0b4ea2)) !important;
  color: var(--wpp-t2-btn-bg, var(--wpp-btn-bg, #0b4ea2)) !important;
}

.wpp-card .wpp-btn-outline:hover,
.wpp-card .wpp-btn-outline:focus {
  background: var(--wpp-t2-btn-hover-bg, var(--wpp-t2-btn-bg, var(--wpp-btn-hover-bg, #083b7a))) !important;
  color: var(--wpp-t2-btn-hover-text, var(--wpp-t2-btn-text, var(--wpp-btn-hover-text, #ffffff))) !important;
}

/* Prevent text selection on card buttons */
.wpp-card .wpp-btn-primary,
.wpp-card .wpp-btn-outline {
  -webkit-user-select: none;
  user-select: none;
}

/* Template 2 results rows */
.wpp-results-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.wpp-rrow {
  display: block;
  grid-template-columns: 1fr 1.2fr auto;
  gap: 10px;
  align-items: center;
}

.wpp-rlabel {
  font-size: 12px;
  opacity: 0.95;
}

.wpp-card .wpp-rbar {
  height: 15px;
  border-radius: 0;
  background: var(--wpp-t2-bar, var(--wpp-bar, #e3e3e3));
  overflow: hidden;
}

.wpp-card-results .wpp-rrow:hover .wpp-rbar {
  background: var(--wpp-t2-bar-hover, var(--wpp-t2-bar, var(--wpp-bar, #e3e3e3)));
}

.wpp-card .wpp-rfill {
  height: 100%;
  width: 0%;
  background: var(--wpp-t2-accent, var(--wpp-accent, #0b4ea2));
  transition: width 600ms ease;
}

.wpp-card-results .wpp-rlabel,
.wpp-card-results .wpp-rpct {
  color: var(--wpp-t2-accent-text, var(--wpp-accent-text, #333333));
}

.wpp-card-results .wpp-rrow--me .wpp-rfill {
  background: var(--wpp-t2-voted-bar, var(--wpp-t2-accent, var(--wpp-accent, #0b4ea2)));
}

.wpp-card-results .wpp-rrow--me .wpp-rlabel,
.wpp-card-results .wpp-rrow--me .wpp-rpct {
  color: var(--wpp-t2-voted-text, var(--wpp-t2-accent-text-hover, var(--wpp-accent-text-hover, #ffffff)));
}

.wpp-rpct {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.9;
  margin-top: 5px;
}

/* Template 1: voted row text override */
.wpp-poll[data-template="1"] .wpp-wide .wpp-bar--result.wpp-bar--me .wpp-bar-label,
.wpp-poll[data-template="1"] .wpp-wide .wpp-bar--result.wpp-bar--me .wpp-bar-meta{
  color: var(--wpp-t1-voted-text, var(--wpp-t1-accent-text-hover, var(--wpp-accent-text-hover, #fff))) !important;
}