/**
 * PollHive - frontend stylesheet (poll widget on the site's public pages).
 * All selectors are scoped under .pollhive- prefixed classes so they cannot leak
 * into, or be overridden by, other theme/plugin styles on the page.
 *
 * Every color/radius/spacing/shadow/typography value below is a CSS custom
 * property generated by Pollhive_Design::generate_css() from the active
 * design preset + the site's branding settings (Settings > Design), and
 * injected once via wp_add_inline_style() on this stylesheet's own handle -
 * this file never hardcodes a design value itself, only references the
 * token and a same-as-default fallback so the widget still renders sanely
 * if the generated block is ever missing. Dark-mode color swaps are handled
 * entirely by that same generated block re-defining these custom properties
 * under [data-theme="dark"] / prefers-color-scheme - this file does not
 * carry its own separate dark-mode color rules.
 */

.pollhive-poll-wrapper {
  --pollhive-radius-sm: var(--pollhive-radius-input, 6px);
  --pollhive-radius-md: var(--pollhive-radius-button, 8px);
  --pollhive-radius-lg: var(--pollhive-radius-card, 10px);
  box-sizing: border-box;
  max-width: 640px;
  margin: 0 0 2em;
  padding: var(--pollhive-card-padding, 20px);
  background: var(--pollhive-card-bg, #ffffff);
  border: var(--pollhive-border-width, 1px) solid var(--pollhive-card-border, #dcdcde);
  border-radius: var(--pollhive-radius-lg);
  box-shadow: var(--pollhive-shadow-card, none);
  font-family: var(--pollhive-font-family, inherit);
  font-size: var(--pollhive-font-size-body, 14px);
  line-height: var(--pollhive-line-height, 1.5);
  color: var(--pollhive-text-color, #2c3338);
}

.pollhive-poll-wrapper * {
  box-sizing: border-box;
}

.pollhive-poll-header .pollhive-poll-title {
  margin: 0 0 0.35em;
  font-size: var(--pollhive-font-size-sub, 1.25em);
  font-weight: var(--pollhive-heading-weight, 700);
  color: var(--pollhive-heading-color, #1d2327);
}

.pollhive-poll-description {
  margin: 0 0 1em;
  color: var(--pollhive-muted-color, #646970);
  font-size: 0.95em;
}

.pollhive-poll-closed-notice {
  display: inline-block;
  margin-bottom: 1em;
  padding: 0.25em 0.75em;
  background: var(--pollhive-warning-bg, #fcf0d8);
  color: var(--pollhive-warning-color, #996800);
  border-radius: var(--pollhive-radius-sm);
  font-size: 0.85em;
}

.pollhive-notice {
  padding: 0.75em 1em;
  border-radius: var(--pollhive-radius-sm);
  background: var(--pollhive-neutral-bg, #f0f0f1);
  color: var(--pollhive-text-color, #2c3338);
  font-size: 0.9em;
}

.pollhive-notice-info {
  background: var(--pollhive-accent-soft, #f2f1fc);
  color: var(--pollhive-accent-dark, #4a44b0);
}

.pollhive-notice-error {
  background: var(--pollhive-danger-bg, #fbe9e9);
  color: var(--pollhive-danger-color, #b32d2e);
}

.pollhive-notice a {
  text-decoration: underline;
}

/* Options - text style */
.pollhive-options {
  list-style: none;
  margin: 0 0 1.25em;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.pollhive-options-list-text .pollhive-option label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.65em 0.9em 0.65em 2.6em;
  border: 1px solid var(--pollhive-card-border, #dcdcde);
  border-radius: var(--pollhive-radius-md);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.pollhive-options-list-text .pollhive-option label:focus-within {
  border-color: var(--pollhive-accent);
  outline: 2px solid var(--pollhive-accent);
  outline-offset: 2px;
}

.pollhive-options-list-text .pollhive-option label:hover {
  border-color: var(--pollhive-muted-color, #646970);
  background-color: var(--pollhive-neutral-bg, #f0f0f1);
}

.pollhive-option.pollhive-option-selected label {
  border-color: var(--pollhive-accent);
  background-color: var(--pollhive-accent-soft, #f2f1fc);
}

.pollhive-poll-wrapper .pollhive-options input[type="radio"],
.pollhive-poll-wrapper .pollhive-options input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none;
}

/* Custom circle indicator - rendered entirely in CSS so option selection is
   always visible even if the active theme hides native radio inputs. */
.pollhive-options-list-text .pollhive-option label::before {
  content: "";
  position: absolute;
  left: 0.9em;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid var(--pollhive-muted-color, #646970);
  border-radius: 50%;
  background: var(--pollhive-card-bg, #fff);
  box-sizing: border-box;
}

.pollhive-options-list-text .pollhive-option.pollhive-option-selected label::before {
  border-color: var(--pollhive-accent);
}

/* Scoped to the text-list layout, matching ::before above - unscoped,
   this generated a "content" on every selected option label including
   image-grid cards, where it rendered as a stray filled dot with nothing
   to visually contain it. */
.pollhive-options-list-text .pollhive-option.pollhive-option-selected label::after {
  content: "";
  position: absolute;
  left: 0.9em;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pollhive-options-list-text .pollhive-option.pollhive-option-selected label::after {
  background-image: radial-gradient(var(--pollhive-accent) 40%, transparent 44%);
}

.pollhive-options-list-text .pollhive-option input[type="radio"],
.pollhive-options-list-text .pollhive-option input[type="checkbox"] {
  flex-shrink: 0;
  margin: 0;
}

.pollhive-option-label {
  flex: 1;
}

/* .pollhive-option-dot, .pollhive-option-selected-tag, .pollhive-option-image-check,
   and .pollhive-options-heading-row are additive markup used only by the
   single-poll page's own option layout - hidden by default here so every
   shortcode/Elementor rendering of this exact same template is visually
   unchanged. Revealed only under .pollhive-spp-widget below. */
.pollhive-option-dot,
.pollhive-option-selected-tag,
.pollhive-option-image-check,
.pollhive-options-heading-row,
.pollhive-view-results-link,
.pollhive-results-banner-sub,
.pollhive-results-heading-row {
  display: none;
}

.pollhive-option-label-row {
  display: contents;
}

.pollhive-vote-actions {
  display: flex;
  gap: 0.6em;
}

/* Options - image / contest grid style */
.pollhive-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1em;
}

.pollhive-options-grid .pollhive-option label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em;
  border: 2px solid var(--pollhive-card-border, #dcdcde);
  border-radius: var(--pollhive-radius-lg);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease;
}

.pollhive-options-grid .pollhive-option label:focus-within {
  border-color: var(--pollhive-accent);
  outline: 2px solid var(--pollhive-accent);
  outline-offset: 2px;
}

.pollhive-options-grid .pollhive-option label:hover {
  border-color: var(--pollhive-muted-color, #646970);
}

.pollhive-options-grid .pollhive-option.pollhive-option-selected label {
  border-color: var(--pollhive-accent);
}

.pollhive-options-grid .pollhive-option input[type="radio"],
.pollhive-options-grid .pollhive-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pollhive-option-image img {
  width: 100%;
  max-width: 160px;
  height: 140px;
  object-fit: cover;
  border-radius: var(--pollhive-radius-md);
  display: block;
  /* Suppresses the browser-native image hover affordances (Edge's visual
     search/copy/download corner icon, Chrome's "search image" icon, the
     drag ghost, iOS's press-and-hold callout) - the image is purely
     decorative here (its own text label already conveys the option name),
     and clicking it must still register as a normal option selection.
     pointer-events: none makes the browser skip the <img> during hit-
     testing entirely, so a click "on" the image resolves to its wrapping
     <span>/<label> instead - our click handling already works via
     .closest() from whatever the actual event target turns out to be, so
     this doesn't change what a click does, only which browser affordances
     the image itself can trigger. */
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

.pollhive-vote-button {
  display: inline-block;
  padding: 0.6em 1.4em;
  background: var(--pollhive-accent);
  color: #fff;
  border: none;
  border-radius: var(--pollhive-radius-md);
  box-shadow: var(--pollhive-shadow-button-primary, none);
  font-weight: var(--pollhive-heading-weight, 600);
  cursor: pointer;
  font-size: 0.95em;
}

.pollhive-vote-button:focus-visible {
  outline: 2px solid var(--pollhive-accent);
  outline-offset: 2px;
}

.pollhive-vote-button:hover {
  background: var(--pollhive-accent-dark, var(--pollhive-accent));
}

.pollhive-vote-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.pollhive-vote-message {
  margin-top: 0.75em;
  font-size: 0.9em;
}

.pollhive-vote-message.pollhive-success {
  color: var(--pollhive-success-color, #00a32a);
}

.pollhive-vote-message.pollhive-error {
  color: var(--pollhive-danger-color, #b32d2e);
}

.pollhive-show-vote-form-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--pollhive-card-bg, #fff) !important;
  border: 1px solid var(--pollhive-accent) !important;
  color: var(--pollhive-accent) !important;
  padding: 0.55em 1.3em !important;
  border-radius: var(--pollhive-radius-md) !important;
  font-weight: 600 !important;
  font-size: 0.9em !important;
  cursor: pointer !important;
  margin-top: 0;
  text-decoration: none !important;
  box-shadow: none !important;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.pollhive-show-vote-form-link:hover {
  background: var(--pollhive-accent) !important;
  color: #fff !important;
}

.pollhive-show-vote-form-link:focus-visible {
  outline: 2px solid var(--pollhive-accent) !important;
  outline-offset: 2px;
}
/* Results */
.pollhive-results-summary {
  margin-bottom: 0.75em;
  font-weight: 600;
  color: var(--pollhive-text-color, #2c3338);
}

.pollhive-results-list {
  list-style: none;
  margin: 0 0 1.25em;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9em;
}

.pollhive-result-row {
  padding: 0.5em 0;
}

.pollhive-result-winner .pollhive-result-label {
  font-weight: 700;
}

/* Winner/tie summary banner. Uses the same token system as everything else
   in this file - the accent-tinted "winner" treatment and the neutral "tie"
   treatment both come from the generated color block, so they automatically
   match whichever preset/branding is active and stay correct in dark mode. */
.pollhive-results-banner {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1em;
  padding: 0.7em 0.9em;
  border-radius: var(--pollhive-radius-md);
  font-size: 0.9em;
}

.pollhive-results-banner-winner {
  background: var(--pollhive-accent-soft, #f2f1fc);
  border: 1px solid var(--pollhive-accent-soft, #f2f1fc);
  color: var(--pollhive-accent-dark, #4a44b0);
}

.pollhive-results-banner-tie {
  background: var(--pollhive-neutral-bg, #f0f0f1);
  border: 1px solid var(--pollhive-card-border, #dcdcde);
  color: var(--pollhive-text-color, #2c3338);
}

.pollhive-results-banner-icon {
  font-size: 1.15em;
  line-height: 1;
  flex-shrink: 0;
}

.pollhive-results-banner-text {
  font-weight: 700;
  color: inherit;
}

.pollhive-result-winner-icon {
  margin-right: 0.15em;
}

.pollhive-result-tied-badge {
  color: var(--pollhive-muted-color, #646970);
  font-size: 0.8em;
  font-weight: 600;
  margin-left: 0.4em;
}

.pollhive-result-label-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.3em;
}

.pollhive-result-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: var(--pollhive-radius-sm);
}

.pollhive-result-label {
  flex: 1;
  font-size: 0.95em;
}

.pollhive-your-vote-badge {
  color: var(--pollhive-accent);
  font-size: 0.8em;
  font-weight: 600;
  margin-left: 0.4em;
}

.pollhive-result-percent {
  font-weight: 700;
  color: var(--pollhive-heading-color, #1d2327);
}

.pollhive-progress-bar-track {
  width: 100%;
  height: var(--pollhive-progress-height, 10px);
  background: var(--pollhive-card-border, #dcdcde);
  border-radius: var(--pollhive-radius-sm);
  overflow: hidden;
}

.pollhive-progress-bar-fill {
  height: 100%;
  background: var(--pollhive-accent);
  border-radius: var(--pollhive-radius-sm);
  transition: width 0.4s ease;
}

.pollhive-result-winner .pollhive-progress-bar-fill {
  background: var(--pollhive-success-color, #00a32a);
}

.pollhive-result-count {
  display: block;
  margin-top: 0.25em;
  font-size: 0.8em;
  color: var(--pollhive-muted-color, #646970);
}

/* Results / Pie Chart tabs - mutually exclusive views, never both visible.
   Only rendered at all when results_display_mode is "both" and there are
   votes to chart (see results.php). */
.pollhive-results-view-toggle {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  margin-left: auto;
  gap: 0.5em;
  margin-bottom: 1em;
}

.pollhive-results-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  margin: 0;
  padding: 0.5em 1.2em;
  border: 1px solid var(--pollhive-card-border, #dcdcde);
  background: var(--pollhive-card-bg, #fff);
  color: var(--pollhive-text-color, #2c3338);
  border-radius: var(--pollhive-radius-badge, 999px);
  cursor: pointer;
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: none;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
}

.pollhive-results-view-btn.is-active {
  background: var(--pollhive-accent);
  color: #fff;
  border-color: var(--pollhive-accent);
}

.pollhive-results-view-btn:focus-visible {
  outline: 2px solid var(--pollhive-accent);
  outline-offset: 2px;
}

.pollhive-pie-chart-area {
  margin-top: 0.5em;
}

.pollhive-pie-chart-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.pollhive-chart-canvas-wrapper {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
}

.pollhive-chart-canvas {
  width: 100% !important;
  max-height: 320px;
}

/* Custom legend (name, %, vote count) that replaces Chart.js's own built-in
   one everywhere (turned off in pollhive.js) - stacked below the chart by
   default here, a plain dotted-leader list consistent with the rest of the
   shortcode/Elementor design system. The single-poll page overrides this to
   a side-by-side chart-left/legend-right composition below. */
.pollhive-pie-legend {
  list-style: none;
  margin: 0.5em 0 0;
  padding: 0;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.pollhive-pie-legend-item {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.15em 0.3em;
  border-radius: var(--pollhive-radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pollhive-pie-legend-item:hover,
.pollhive-pie-legend-item.pollhive-pie-legend-active {
  background: var(--pollhive-neutral-bg, #f0f0f1);
}

.pollhive-pie-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.pollhive-pie-legend-label {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-weight: 600;
  white-space: nowrap;
  color: var(--pollhive-text-color, #2c3338);
}

.pollhive-pie-legend-dots {
  flex: 1;
  border-bottom: 2px dotted var(--pollhive-card-border, #dcdcde);
  margin: 0 0.2em 0.25em;
  min-width: 10px;
}

.pollhive-pie-legend-stats {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--pollhive-muted-color, #646970);
  white-space: nowrap;
}

/* Winner gets a stronger accent color + bold weight + crown, deliberately
   no glow/shadow - kept to the same subtle-emphasis language as the
   progress list's winner row below. */
.pollhive-pie-legend-winner .pollhive-pie-legend-label {
  color: var(--pollhive-accent);
  font-weight: 800;
}

.pollhive-pie-legend-winner-icon {
  line-height: 1;
}

/* Loading state */
.pollhive-poll-wrapper.pollhive-is-loading {
  opacity: 0.6;
  pointer-events: none;
}

@media (max-width: 600px) {
  .pollhive-poll-wrapper {
    padding: 1em;
  }

  .pollhive-vote-button {
    display: block;
    width: 100%;
    text-align: center;
  }

  .pollhive-show-vote-form-link {
    display: flex !important;
    width: 100%;
  }
}

/* Social share. Per-platform hover colors (Facebook/X/WhatsApp/LinkedIn) are
   deliberately left as literal brand colors, not design tokens - they
   identify an external company's own brand, not a PollHive style choice,
   and re-theming them via the accent color would misrepresent those brands. */
.pollhive-share {
  margin-top: 1.5em;
  padding-top: 1.25em;
  border-top: 1px solid var(--pollhive-card-border, #dcdcde);
}

.pollhive-share-trigger-wrap {
  position: relative;
  display: inline-block;
}

.pollhive-share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.45em 0.95em;
  border-radius: var(--pollhive-radius-badge, 999px);
  border: 1px solid var(--pollhive-card-border, #dcdcde);
  background: var(--pollhive-card-bg, #fff);
  color: var(--pollhive-text-color, #2c3338);
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.pollhive-share-trigger:hover {
  background: var(--pollhive-neutral-bg, #f0f0f1);
}

.pollhive-share-trigger:focus-visible {
  outline: 2px solid var(--pollhive-accent);
  outline-offset: 2px;
}

.pollhive-share-icon {
  display: inline-flex;
  width: 15px;
  height: 15px;
}

.pollhive-share-icon svg {
  width: 100%;
  height: 100%;
}

/**
 * Share dialog: one modal design used consistently everywhere results.php
 * renders (Single Poll Page, shortcodes, Elementor, and any future Related
 * Polls/Archive share triggers) - a deliberate exception to the rule that
 * Single Poll Page-specific restyling stays scoped. Unlike the inline
 * results panel, this is an overlay that detaches from the page the moment
 * it opens, so one consistent treatment reads as intentional dialog chrome
 * rather than a mismatch with the surrounding widget. Values match the
 * approved Claude Design file's Share Modal exactly.
 */
.pollhive-share-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 43, 0.28);
  backdrop-filter: blur(2px);
}

.pollhive-share-backdrop[hidden] {
  display: none;
}

.pollhive-share-popover {
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  width: 270px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 24px 48px rgba(20, 20, 43, 0.28);
}

.pollhive-share-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pollhive-share-popover-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #14142b;
}

.pollhive-share-close {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #736d87;
  cursor: pointer;
  padding: 2px 4px;
}

.pollhive-share-close:hover {
  color: #14142b;
}

.pollhive-share-close:focus-visible {
  outline: 2px solid var(--pollhive-accent);
  outline-offset: 2px;
}

.pollhive-share-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #14142b;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.pollhive-share-btn:hover {
  background: color-mix(in srgb, var(--pollhive-accent) 10%, white);
}

.pollhive-share-btn:focus-visible {
  outline: 2px solid var(--pollhive-accent);
  outline-offset: -2px;
}

.pollhive-share-facebook:hover {
  background: #1877f2;
  color: #fff;
}

.pollhive-share-twitter:hover {
  background: #000000;
  color: #fff;
}

.pollhive-share-whatsapp:hover {
  background: #25d366;
  color: #fff;
}

.pollhive-share-linkedin:hover {
  background: #0a66c2;
  color: #fff;
}

.pollhive-share-copy:hover {
  background: var(--pollhive-accent);
  color: #fff;
}

/**
 * Single-poll page shell. Deliberately styled against the approved Claude
 * Design reference mockup ("PollHive - Single Poll Page"), NOT the
 * Listivo token system used by shortcodes/the Elementor widget elsewhere -
 * this page has its own, separate accent/typography scale by explicit
 * product decision. Everything here is scoped under .pollhive-single-poll-page
 * / .pollhive-spp-widget so shortcode and Elementor rendering of the exact
 * same poll.php/results.php templates elsewhere on the site are completely
 * unaffected (verified: those files were not edited beyond additive,
 * base-hidden markup). Font: a refined system stack, with "Inter" named
 * first so it's used automatically if already present on the visitor's
 * system/browser, with zero network request either way - no CDN, no
 * self-hosted font file added in this phase.
 */
/* The theme's own content container can be a CSS grid built for its
   #primary/#secondary two-column layout (Astra: .ast-container is
   display:grid). Our routing template (route-single-poll.php) never
   provides that markup, so without an explicit width this wrapper's grid
   track shrinks to its content's max-content size and the grid's default
   justify-content:start pins the whole page against the left edge instead
   of leaving room for .pollhive-single-poll-page's own margin:auto to center
   it. Forcing this wrapper to fill its parent's full width is what lets
   the existing centering below actually take effect. */
.pollhive-route-single-poll {
  width: 100%;
}

.pollhive-single-poll-page {
  /* Aliases the same theme-detected accent Pollhive_Design::generate_css()
     already injects at :root (--pollhive-accent) - single source of truth,
     so the single-poll-page's own card design and the base widget/Elementor
     styling never drift out of sync with each other or the active theme. */
  --pf-accent: var(--pollhive-accent);
  --pf-accent-soft: color-mix(in srgb, var(--pf-accent) 10%, white);
  --pf-ink: #14142b;
  --pf-muted: #6b7280;
  --pf-faint: #736d87;
  --pf-border: #f0eef7;
  --pf-border-soft: #f4f2fa;
  --pf-card-bg: #ffffff;
  box-sizing: border-box;
  /* !important: Astra's own block-width enforcement
     (.entry-content[data-ast-blocks-layout] > *) targets any direct child
     of a post's content area with a higher-specificity rule, which would
     otherwise silently shrink this to the theme's configured content width
     whenever a [pollhive] shortcode sits directly in post/page content -
     this only matters when the surrounding column is wider than 760px, so
     it never fights the container's own narrower width when there is one. */
  max-width: 760px !important;
  margin: 0 auto;
  padding: 44px 20px 64px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}


.pollhive-single-poll-page * {
  box-sizing: border-box;
}

/* --pf-* is this section's own alias namespace for the shared --pollhive-*
   tokens (see .pollhive-single-poll-page above) - it only aliased the accent
   color, leaving --pf-ink/--pf-muted/--pf-faint/--pf-border/--pf-border-soft
   and .pollhive-spp-card's background hardcoded to light-mode values. That
   meant the outer page card stayed light while the poll widget nested
   inside it (.pollhive-poll-wrapper, styled directly from --pollhive-* here)
   switched to dark under prefers-color-scheme/[data-theme="dark"] - the
   same selectors Pollhive_Design::generate_css() already uses to swap
   --pollhive-heading-color/--pollhive-muted-color/--pollhive-card-border/
   --pollhive-card-bg to their dark values, reused here so both halves of
   the page change together instead of splitting into a light shell around
   a dark widget. */
@media (prefers-color-scheme: dark) {
  .pollhive-poll-wrapper:not([data-theme]), .pollhive-single-poll-page:not([data-theme]) {
    --pf-ink: var(--pollhive-heading-color);
    --pf-muted: var(--pollhive-muted-color);
    --pf-faint: var(--pollhive-muted-color);
    --pf-border: var(--pollhive-card-border);
    --pf-border-soft: var(--pollhive-card-border);
    --pf-card-bg: var(--pollhive-card-bg);
  }
}
.pollhive-poll-wrapper[data-theme="dark"], .pollhive-single-poll-page[data-theme="dark"] {
  --pf-ink: var(--pollhive-heading-color);
  --pf-muted: var(--pollhive-muted-color);
  --pf-faint: var(--pollhive-muted-color);
  --pf-border: var(--pollhive-card-border);
  --pf-border-soft: var(--pollhive-card-border);
  --pf-card-bg: var(--pollhive-card-bg);
}

.pollhive-spp-card {
  background: var(--pf-card-bg, #fff);
  border: 1px solid var(--pf-border);
  border-radius: 22px;
  box-shadow:
    0 1px 2px rgba(20, 20, 43, 0.05),
    0 10px 20px -10px rgba(20, 20, 43, 0.08),
    0 32px 56px -24px rgba(20, 20, 43, 0.15);
  overflow: hidden;
}

.pollhive-spp-header {
  padding: 34px 36px 22px;
  text-align: center;
  border-bottom: 1px solid var(--pf-border-soft);
}

.pollhive-spp-category {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pf-accent);
  background: var(--pf-accent-soft);
  padding: 4px 11px;
  border-radius: 20px;
  margin-bottom: 18px;
}

.pollhive-spp-title {
  font-size: 33px;
  font-weight: 800;
  color: var(--pf-ink);
  margin: 0 0 14px;
  letter-spacing: -0.025em;
  line-height: 1.22;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.pollhive-spp-description {
  font-size: 15px;
  color: var(--pf-muted);
  max-width: 460px;
  margin: 0 auto 22px;
}

.pollhive-spp-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--pf-border-soft);
}

.pollhive-spp-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background: #f3f2f7;
  color: #6b7280;
}

.pollhive-spp-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.pollhive-spp-status-active {
  background: #eafbef;
  color: #0d9a4f;
}

.pollhive-spp-status-scheduled {
  background: #fdf3e6;
  color: #b8720d;
}

.pollhive-spp-status-closed {
  background: #f3f2f7;
  color: #6b7280;
}

.pollhive-spp-stat-divider {
  width: 1px;
  height: 28px;
  background: var(--pf-border);
  flex-shrink: 0;
}

.pollhive-spp-stat {
  text-align: center;
}

.pollhive-spp-stat-value {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--pf-ink);
  line-height: 1.1;
}

.pollhive-spp-stat-label {
  display: block;
  font-size: 10.5px;
  color: var(--pf-faint);
  font-weight: 600;
  margin-top: 2px;
}

/* Reuses the same amber already used for the "Scheduled" status pill,
   rather than introducing a new color, so the one warm accent on this
   otherwise all-purple/neutral page stays consistent site-wide. */
.pollhive-spp-stat-trending .pollhive-spp-stat-value {
  color: #b8720d;
}

.pollhive-spp-widget {
  padding: 26px 36px 32px;
}

/* The widget's own title/description are already shown, larger, in
   .pollhive-spp-header above - hide the duplicate without touching the
   markup shortcodes/the Elementor widget still rely on elsewhere. */
.pollhive-spp-widget .pollhive-poll-header .pollhive-poll-title,
.pollhive-spp-widget .pollhive-poll-header .pollhive-poll-description {
  display: none;
}

.pollhive-spp-widget .pollhive-poll-wrapper {
  max-width: none;
  margin: 0;
  border: none;
  padding: 0;
  box-shadow: none;
  font-family: inherit;
}

.pollhive-spp-widget .pollhive-options-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pollhive-spp-widget .pollhive-options-heading {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pf-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pollhive-spp-widget .pollhive-options-multi-badge {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pf-faint);
  background: #f3f2f7;
  padding: 3px 9px;
  border-radius: 8px;
}

/* Vote options - flex-row circle-indicator model, matching the reference
   exactly. Reveals the .pollhive-option-dot/-selected-tag markup that's
   hidden by default above, and overrides the option label's box model
   (the shortcode/Elementor version keeps its own absolute-corner-dot
   layout untouched - this is a scoped override, not a global rename). */
.pollhive-spp-widget .pollhive-options-list-text .pollhive-option {
  margin-bottom: 10px;
}

.pollhive-spp-widget .pollhive-options-list-text .pollhive-option:last-child {
  margin-bottom: 0;
}

.pollhive-spp-widget .pollhive-options-list-text .pollhive-option label {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 17px;
  border: 2px solid #ecebf3;
  background: #fff;
  border-radius: 13px;
  margin-bottom: 0;
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.pollhive-spp-widget .pollhive-options-list-text .pollhive-option label::before,
.pollhive-spp-widget .pollhive-options-list-text .pollhive-option label::after {
  display: none;
}

.pollhive-spp-widget .pollhive-options-list-text .pollhive-option label:hover {
  border-color: color-mix(in srgb, var(--pf-accent) 40%, white);
  background: color-mix(in srgb, var(--pf-accent) 3%, white);
}

.pollhive-spp-widget .pollhive-option.pollhive-option-selected label {
  border-color: var(--pf-accent);
  background: var(--pf-accent-soft);
}

.pollhive-spp-widget .pollhive-option-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #d8d3fa;
  background: #fff;
  flex-shrink: 0;
  transform: scale(1);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.14s ease, background-color 0.14s ease;
}

.pollhive-spp-widget .pollhive-option.pollhive-option-selected .pollhive-option-dot {
  border-color: var(--pf-accent);
  background: var(--pf-accent);
  transform: scale(1.05);
}

.pollhive-spp-widget .pollhive-option.pollhive-option-selected .pollhive-option-dot::after {
  content: "\2713";
  color: #fff;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1;
}

.pollhive-spp-widget .pollhive-option-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--pf-ink);
  flex: 1;
}

.pollhive-spp-widget .pollhive-option.pollhive-option-selected .pollhive-option-label {
  font-weight: 700;
}

.pollhive-spp-widget .pollhive-option.pollhive-option-selected .pollhive-option-selected-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--pf-accent);
  flex-shrink: 0;
}

.pollhive-spp-widget .pollhive-options {
  margin-bottom: 0;
}

/* Image option cards - fixed 2-column grid, matching the reference exactly
   (the shortcode/Elementor version keeps its own auto-fit multi-column
   grid untouched - this is a scoped override, not a global rename). */
.pollhive-spp-widget .pollhive-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.pollhive-spp-widget .pollhive-options-grid .pollhive-option-dot,
.pollhive-spp-widget .pollhive-options-grid .pollhive-option-selected-tag {
  display: none;
}

/* Wins over the higher-specificity text-list "Selected" tag rule
   (.pollhive-spp-widget .pollhive-option.pollhive-option-selected .pollhive-option-selected-tag)
   by carrying one more class in the chain - the redundant text label is
   fully removed from the image-grid layout, the check badge alone
   communicates selection now. */
.pollhive-spp-widget .pollhive-options-grid .pollhive-option.pollhive-option-selected .pollhive-option-selected-tag {
  display: none;
}

.pollhive-spp-widget .pollhive-options-grid .pollhive-option label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  padding: 10px;
  border: 2px solid #ecebf3;
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.14s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.pollhive-spp-widget .pollhive-options-grid .pollhive-option label:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--pf-accent) 40%, white);
  box-shadow: 0 10px 22px rgba(20, 20, 43, 0.12);
}

.pollhive-spp-widget .pollhive-options-grid .pollhive-option label:hover .pollhive-option-image img {
  transform: scale(1.04);
}

.pollhive-spp-widget .pollhive-options-grid .pollhive-option.pollhive-option-selected label {
  border-color: var(--pf-accent);
  outline: 3px solid var(--pf-accent);
  outline-offset: -3px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--pf-accent) 18%, transparent);
}

.pollhive-spp-widget .pollhive-options-grid .pollhive-option-image {
  position: relative;
  /* Hero image: taller and closer to a natural photo ratio than the old
     fixed 100px strip, so object-fit: cover crops far less of the
     original composition while still filling the card edge-to-edge. */
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: #f0eef7;
}

.pollhive-spp-widget .pollhive-options-grid .pollhive-option-image img {
  width: 100%;
  /* The base (shortcode/Elementor) rule for this same element caps it at
     max-width: 160px - a different property than width, so setting
     width: 100% here never overrode it. Reset explicitly, otherwise the
     image renders capped at 160px inside this scope's wider (auto-sized)
     card, leaving a visible gap instead of filling the container. */
  max-width: none;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.25s ease;
}

.pollhive-spp-widget .pollhive-options-grid .pollhive-option-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
}

.pollhive-spp-widget .pollhive-options-grid .pollhive-option-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pf-ink);
  flex: 1;
}

/* Floating badge over the image's top-right corner. The check-icon stays
   in its existing DOM position (inside .pollhive-option-label-row, after
   the image) - no markup change - it's simply lifted out of flow and
   pinned to the nearest positioned ancestor, .pollhive-option label, which
   the rule below promotes to position: relative. Because the label has
   10px padding and the image is its first child, top/right offsets here
   land the badge right on the image's corner, overlapping it slightly. */
.pollhive-spp-widget .pollhive-options-grid .pollhive-option label {
  position: relative;
}

.pollhive-spp-widget .pollhive-options-grid .pollhive-option-image-check {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pf-accent);
  color: var(--pf-accent);
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(20, 20, 43, 0.18);
}

.pollhive-spp-widget .pollhive-options-grid .pollhive-option-image-check::after {
  content: "\2713";
}

.pollhive-spp-widget .pollhive-options-grid .pollhive-option.pollhive-option-selected .pollhive-option-image-check {
  display: flex;
}

@media (max-width: 480px) {
  .pollhive-spp-widget .pollhive-options-grid {
    grid-template-columns: 1fr;
  }
}

.pollhive-spp-widget .pollhive-vote-actions {
  margin-top: 22px;
  gap: 10px;
  align-items: stretch;
  height: 46px;
}

/* The .pollhive-share wrapper's base rule (line ~539) carries a border-top +
   margin-top/padding-top meant for its shortcode/Elementor placement, where
   it sits below other content as its own block. Dropped into this flex
   action row unmodified, that border rendered as a stray divider line and
   the margin pushed it out of vertical alignment with its siblings - reset
   it to a plain stretched flex item here. */
.pollhive-spp-widget .pollhive-vote-actions .pollhive-share,
.pollhive-spp-widget .pollhive-vote-actions-standalone .pollhive-share {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  height: 100%;
  display: flex;
}

.pollhive-spp-widget .pollhive-vote-button {
  flex: 0 1 128px;
  min-width: 104px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pf-accent) 90%, white), color-mix(in srgb, var(--pf-accent) 88%, black));
  padding: 0 18px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 800;
  box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--pf-accent) 45%, transparent);
  transition: box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), filter 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.pollhive-spp-widget .pollhive-vote-button:hover {
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--pf-accent) 55%, transparent);
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.pollhive-spp-widget .pollhive-vote-button:active,
.pollhive-spp-widget .pollhive-view-results-link:active {
  transform: scale(0.97);
}

.pollhive-spp-widget .pollhive-vote-button:focus-visible,
.pollhive-spp-widget .pollhive-view-results-link:focus-visible {
  outline: 2.5px solid var(--pf-accent);
  outline-offset: 2px;
}

.pollhive-spp-widget .pollhive-view-results-link {
  flex: 1 1 auto;
  min-width: 120px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f2f7;
  color: #14142b;
  padding: 0 16px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 1px 2px rgba(20, 20, 43, 0.04);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.pollhive-spp-widget .pollhive-view-results-link:hover {
  background: #ecebf3;
}

/* Post-vote action hierarchy swap: once a vote exists, View Results is the
   more likely next action, so it takes over the primary (accent-colored,
   shadowed) treatment and the vote-submit button ("Change Vote" at this
   point) drops to the secondary (tint, no shadow) treatment. Only applied
   via these modifier classes, added in poll.php when $has_voted is true -
   the first-time-voter state (Vote primary / View Results secondary)
   above is untouched. */
.pollhive-spp-widget .pollhive-vote-button.pollhive-action-secondary {
  background: #f3f2f7;
  color: #14142b;
  box-shadow: 0 1px 2px rgba(20, 20, 43, 0.04);
}

.pollhive-spp-widget .pollhive-vote-button.pollhive-action-secondary:hover {
  background: #ecebf3;
  box-shadow: 0 1px 2px rgba(20, 20, 43, 0.04);
  transform: none;
  filter: none;
}

.pollhive-spp-widget .pollhive-view-results-link.pollhive-action-primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pf-accent) 90%, white), color-mix(in srgb, var(--pf-accent) 88%, black));
  color: #fff;
  box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--pf-accent) 45%, transparent);
}

.pollhive-spp-widget .pollhive-view-results-link.pollhive-action-primary:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pf-accent) 90%, white), color-mix(in srgb, var(--pf-accent) 88%, black));
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--pf-accent) 55%, transparent);
  filter: brightness(1.05);
}

/* Share trigger inside the Vote/Results action rows becomes a small square
   icon-only button here, matching the reference exactly - the trigger
   BUTTON itself (unlike the modal it opens, which is intentionally global)
   stays scoped, consistent with every other action-row control on this
   page. The modal it opens is unaffected - already global from an earlier
   phase. */
.pollhive-spp-widget .pollhive-vote-actions .pollhive-share-trigger-wrap,
.pollhive-spp-widget .pollhive-vote-actions-standalone .pollhive-share-trigger-wrap {
  display: flex;
  height: 100%;
}

.pollhive-spp-widget .pollhive-vote-actions .pollhive-share-trigger,
.pollhive-spp-widget .pollhive-vote-actions-standalone .pollhive-share-trigger {
  flex: 0 0 46px;
  width: 46px;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: none;
  background: #f3f2f7;
  color: #3c3752;
  box-shadow: 0 1px 2px rgba(20, 20, 43, 0.04);
}

.pollhive-spp-widget .pollhive-vote-actions .pollhive-share-trigger:hover,
.pollhive-spp-widget .pollhive-vote-actions-standalone .pollhive-share-trigger:hover {
  background: #ecebf3;
}

.pollhive-spp-widget .pollhive-vote-actions .pollhive-share-label,
.pollhive-spp-widget .pollhive-vote-actions-standalone .pollhive-share-label {
  display: none;
}

/* Results Experience - scoped to the single-poll page only (approved
   decision: shortcodes/Elementor keep their existing, internally-consistent
   Listivo-styled results panel; restyling this globally would put a purple
   results panel directly beneath a blue vote form in the same widget card
   everywhere else on the site). */
.pollhive-spp-widget .pollhive-results-banner {
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  margin-bottom: 20px;
}

.pollhive-spp-widget .pollhive-results-banner-winner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pf-accent) 10%, white), color-mix(in srgb, var(--pf-accent) 4%, white));
  border-color: color-mix(in srgb, var(--pf-accent) 15%, white);
  color: inherit;
}

.pollhive-spp-widget .pollhive-results-banner-tie {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pf-accent) 10%, white), color-mix(in srgb, var(--pf-accent) 4%, white));
  border-color: color-mix(in srgb, var(--pf-accent) 15%, white);
  color: inherit;
}

.pollhive-spp-widget .pollhive-results-banner-icon {
  font-size: 22px;
}

.pollhive-spp-widget .pollhive-results-banner-text-wrap {
  display: flex;
  flex-direction: column;
}

.pollhive-spp-widget .pollhive-results-banner-text {
  font-size: 13.5px;
  font-weight: 800;
  color: #14142b;
}

.pollhive-spp-widget .pollhive-results-banner-sub {
  display: block;
  font-size: 12px;
  color: #8f8aa0;
  font-weight: 600;
  margin-top: 2px;
}

.pollhive-spp-widget .pollhive-results-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.pollhive-spp-widget .pollhive-results-heading {
  font-size: 13.5px;
  font-weight: 700;
  color: #736d87;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pollhive-spp-widget .pollhive-results-list {
  gap: 14px;
}

.pollhive-spp-widget .pollhive-result-row {
  padding: 0;
}

.pollhive-spp-widget .pollhive-result-label {
  font-size: 14.5px;
  color: #14142b;
}

.pollhive-spp-widget .pollhive-result-winner .pollhive-result-label {
  font-weight: 700;
}

.pollhive-spp-widget .pollhive-result-percent {
  font-size: 16px;
  font-weight: 800;
  color: #6b7280;
}

.pollhive-spp-widget .pollhive-result-winner .pollhive-result-percent {
  color: var(--pf-accent);
}

.pollhive-spp-widget .pollhive-progress-bar-track {
  height: 11px;
  border-radius: 6px;
  background: #f0eef7;
}

.pollhive-spp-widget .pollhive-progress-bar-fill {
  border-radius: 6px;
  /* Lighter tint of the accent hue (not the full accent) so the winner's
     full-strength fill below reads as visibly stronger by contrast,
     without needing a shadow/glow to make the point. */
  background: color-mix(in srgb, var(--pf-accent) 37%, white);
}

.pollhive-spp-widget .pollhive-result-winner .pollhive-progress-bar-fill {
  /* Deliberately no box-shadow/glow here - "subtle emphasis only" per
     spec. Deeper than the standard accent (matches the button hover
     shade already used elsewhere in this design system) plus the crown
     icon and bold label/percent above are what carry the emphasis. */
  background: color-mix(in srgb, var(--pf-accent) 88%, black);
}

.pollhive-spp-widget .pollhive-result-count {
  font-size: 11.5px;
  color: #736d87;
}

/* Selected-row background treatment - the row you voted on gets a soft
   accent-tinted card of its own (border + fill), scannable without
   reading every row's text, matching the "chip" language already used
   for status pills elsewhere on this page. */
.pollhive-spp-widget .pollhive-result-row.pollhive-result-selected {
  background: color-mix(in srgb, var(--pf-accent) 10%, white);
  border: 1px solid color-mix(in srgb, var(--pf-accent) 20%, white);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 0 -10px;
}

.pollhive-spp-widget .pollhive-your-vote-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--pf-accent);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pollhive-spp-widget .pollhive-results-view-toggle {
  width: fit-content;
  margin-left: auto;
  background: #f3f2f7;
  border-radius: 9px;
  padding: 3px;
  gap: 0;
  margin-bottom: 16px;
}

.pollhive-spp-widget .pollhive-results-view-btn {
  border: none;
  border-radius: 7px;
  padding: 6px 15px;
  font-size: 12px;
  background: transparent;
  color: #736d87;
}

.pollhive-spp-widget .pollhive-results-view-btn.is-active {
  background: #fff;
  color: #14142b;
  box-shadow: 0 1px 3px rgba(20, 20, 43, 0.12);
}

.pollhive-spp-widget .pollhive-pie-chart-area {
  margin-top: 4px;
}

/* Chart-left/legend-right composition - the base (stacked) layout above
   leaves large empty side margins on this page's wider card; putting the
   legend beside the chart fills that space and reads as one balanced
   block instead of a small centered circle floating in whitespace. */
.pollhive-spp-widget .pollhive-pie-chart-layout {
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.pollhive-spp-widget .pollhive-chart-canvas-wrapper {
  max-width: 190px;
  flex: 0 0 190px;
  margin: 0;
}

.pollhive-spp-widget .pollhive-chart-canvas {
  max-height: 190px;
}

.pollhive-spp-widget .pollhive-pie-legend {
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
  gap: 12px;
  margin-top: 0;
}

.pollhive-spp-widget .pollhive-pie-legend-item {
  padding: 4px 6px;
  border-radius: 8px;
}

.pollhive-spp-widget .pollhive-pie-legend-item:hover,
.pollhive-spp-widget .pollhive-pie-legend-item.pollhive-pie-legend-active {
  background: #f3f2f7;
}

.pollhive-spp-widget .pollhive-pie-legend-label {
  font-size: 13.5px;
  color: #14142b;
}

.pollhive-spp-widget .pollhive-pie-legend-dots {
  border-bottom-color: #ecebf3;
}

.pollhive-spp-widget .pollhive-pie-legend-stats {
  font-size: 12px;
  color: #6b7280;
}

.pollhive-spp-widget .pollhive-pie-legend-winner .pollhive-pie-legend-label {
  color: var(--pf-accent);
}

.pollhive-spp-widget .pollhive-pie-legend-winner .pollhive-pie-legend-stats {
  color: #14142b;
  font-weight: 800;
}

@media (max-width: 480px) {
  .pollhive-spp-widget .pollhive-pie-chart-layout {
    flex-direction: column;
  }

  .pollhive-spp-widget .pollhive-chart-canvas-wrapper {
    margin: 0 auto;
  }
}

.pollhive-spp-widget .pollhive-show-vote-form-link {
  flex: 1;
  background: #f3f2f7 !important;
  color: #14142b !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: none !important;
}

.pollhive-spp-widget .pollhive-show-vote-form-link:hover {
  background: #ecebf3 !important;
  color: #14142b !important;
}

.pollhive-spp-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 420px;
  margin: 16px auto 0;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--pf-border);
  border-radius: 12px;
  font-size: 12px;
  color: #8f8aa0;
  font-weight: 600;
  text-align: center;
}

.pollhive-spp-trust-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--pf-accent);
  display: inline-block;
  flex-shrink: 0;
}

.pollhive-spp-related {
  margin-top: 48px;
}

.pollhive-spp-related-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}

.pollhive-spp-related-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--pf-ink);
}

.pollhive-spp-related-sub {
  font-size: 12.5px;
  color: var(--pf-faint);
}

.pollhive-spp-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.pollhive-spp-related-card {
  background: #fff;
  border: 1px solid var(--pf-border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(20, 20, 43, 0.04), 0 6px 16px rgba(20, 20, 43, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease;
}

.pollhive-spp-related-card:hover,
.pollhive-spp-related-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 22px rgba(20, 20, 43, 0.1);
  border-color: color-mix(in srgb, var(--pf-accent) 20%, white);
}

.pollhive-spp-related-card:focus-visible {
  outline: 2.5px solid var(--pf-accent);
  outline-offset: 2px;
}

.pollhive-spp-related-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pollhive-spp-related-status {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 8px;
}

.pollhive-spp-related-status-active {
  color: #0d9a4f;
  background: #eafbef;
}

.pollhive-spp-related-status-scheduled {
  color: #b8720d;
  background: #fdf3e6;
}

.pollhive-spp-related-status-closed {
  color: #6b7280;
  background: #f3f2f7;
}

.pollhive-spp-related-type {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--pf-faint);
}

.pollhive-spp-related-poll-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--pf-ink);
  line-height: 1.4;
  /* Clamped to 2 lines with matching min-height so a one-line title and a
     two-line title occupy identical vertical space - otherwise everything
     below (bars, footer) would start at a different y-position per card. */
  min-height: calc(14.5px * 1.4 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pollhive-spp-related-bars {
  /* Matches the height of 2 bar-rows even when a poll only has 1 option
     (the only case top_options can render fewer than 2 rows), so the
     footer below still lands at the same position across every card in
     the grid regardless of how many options a given poll has. */
  min-height: 62px;
}

.pollhive-spp-related-bar-row {
  margin-bottom: 7px;
}

.pollhive-spp-related-bar-row:last-child {
  margin-bottom: 0;
}

.pollhive-spp-related-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 3px;
}

.pollhive-spp-related-bar-track {
  height: 5px;
  background: var(--pf-border);
  border-radius: 3px;
  overflow: hidden;
}

.pollhive-spp-related-bar-fill {
  height: 100%;
  background: color-mix(in srgb, var(--pf-accent) 60%, white);
  border-radius: 3px;
}

.pollhive-spp-related-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  border-top: 1px solid #f6f5fa;
  /* Pins the footer to the bottom of the card's flex column regardless of
     how much (or little) content sits above it, so footers line up across
     every card in the grid instead of trailing directly after whatever
     content happened to end above them. */
  margin-top: auto;
}

.pollhive-spp-related-meta {
  font-size: 12.5px;
  color: var(--pf-faint);
  font-weight: 600;
}

.pollhive-spp-related-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pf-accent);
}

@media (max-width: 640px) {
  .pollhive-spp-header {
    padding: 24px 20px 18px;
  }

  .pollhive-spp-widget {
    padding: 18px 20px 24px;
  }

  .pollhive-spp-title {
    font-size: 24px;
  }

  .pollhive-spp-stats {
    gap: 11px;
  }

  .pollhive-spp-widget .pollhive-vote-actions {
    flex-direction: column;
    height: auto;
  }

  /* .pollhive-vote-button/.pollhive-view-results-link have no explicit height
     of their own - in the desktop row layout above, align-items:stretch on
     the parent (plus its fixed height:46px) is what actually gives them
     their height. Once the row becomes a column here, that cross-axis
     stretch applies to width instead (which width:100% below already
     covers) and their real height collapses to their text's own line-height
     (~13px) - a button that's still readable but far under a tappable
     target size. Give them the same explicit 46px every other action in
     this row uses. */
  .pollhive-spp-widget .pollhive-vote-button,
  .pollhive-spp-widget .pollhive-view-results-link {
    width: 100%;
    height: 46px;
    flex-basis: auto;
  }

  /* .pollhive-share-trigger-wrap/-trigger size themselves via flex-basis:46px
     + height:100% of the row, which only makes sense while
     .pollhive-vote-actions is a 46px-tall row (the desktop layout above).
     Once it becomes a column here, that same flex-basis applies to the
     vertical main axis instead, and height:100% resolves against an
     undefined auto-height parent - collapsing the button down to its icon's
     own content height (~15px) instead of a tappable 46px square. Reset
     both axes explicitly so it becomes a full-width row matching the other
     two stacked buttons, same as it would if it just inherited them. */
  .pollhive-spp-widget .pollhive-vote-actions .pollhive-share-trigger-wrap,
  .pollhive-spp-widget .pollhive-vote-actions-standalone .pollhive-share-trigger-wrap {
    width: 100%;
    height: 46px;
    flex: 0 0 auto;
  }

  .pollhive-spp-widget .pollhive-vote-actions .pollhive-share-trigger,
  .pollhive-spp-widget .pollhive-vote-actions-standalone .pollhive-share-trigger {
    width: 100%;
    height: 46px;
    flex: 0 0 auto;
  }

  .pollhive-spp-related-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Poll Archive - [pollhive_archive] shortcode. Also, indirectly, the
   default "Polls" page: Pollhive_Settings::resolve_or_create_archive_page()
   creates a real WP Page whose entire content is just this shortcode, so
   this one block styles both at once. Self-contained token set (--pa-*)
   rather than reusing the single-poll-page's --pf-* variables, since
   those only exist inside .pollhive-single-poll-page and this archive can
   be embedded on any page. Matches the approved Claude Design reference
   ("PollHive - Archive.dc.html") values directly.
   ============================================================ */
.pollhive-polls-archive {
  --pa-ink: #14142b;
  --pa-muted: #6b7280;
  --pa-faint: #736d87;
  --pa-border: #f0eef7;
  /* Aliases the same theme-detected accent Pollhive_Design::generate_css()
     injects at :root (--pollhive-accent) - see the matching comment on
     .pollhive-single-poll-page's --pf-accent. */
  --pa-accent: var(--pollhive-accent);
  --pa-accent-soft: color-mix(in srgb, var(--pa-accent) 10%, white);
  box-sizing: border-box;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.pollhive-polls-archive *,
.pollhive-polls-archive *::before,
.pollhive-polls-archive *::after {
  box-sizing: border-box;
}

.pollhive-archive-header {
  text-align: center;
  margin-bottom: 28px;
}

.pollhive-archive-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--pa-ink);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.pollhive-archive-subtitle {
  font-size: 14.5px;
  color: var(--pa-muted);
  margin: 0;
}

.pollhive-archive-mobile-filter-bar {
  display: none;
  margin-bottom: 16px;
}

.pollhive-archive-drawer-open {
  flex: 1;
  background: #fff;
  border: 1px solid #e9e6f3;
  padding: 11px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pa-ink);
  cursor: pointer;
}

.pollhive-archive-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

/* Sidebar */
.pollhive-archive-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--pa-border);
  border-radius: 14px;
  padding: 20px;
}

.pollhive-archive-sidebar-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--pa-ink);
  margin-bottom: 14px;
}

.pollhive-archive-sidebar-divider {
  height: 1px;
  background: #f4f2fa;
  margin: 16px 0;
}

.pollhive-archive-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  cursor: pointer;
  text-decoration: none !important;
}

.pollhive-archive-filter-label {
  font-size: 13px;
  font-weight: 500;
  color: #3c3752;
}

.pollhive-archive-filter-row.is-active .pollhive-archive-filter-label {
  font-weight: 800;
  color: var(--pa-accent);
}

.pollhive-archive-filter-count {
  font-size: 11.5px;
  color: #b3aec3;
}

.pollhive-archive-tag-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pollhive-archive-tag-pill {
  padding: 5px 11px;
  border-radius: 16px;
  font-size: 11.5px;
  font-weight: 600;
  background: #f3f2f7;
  color: #3c3752;
  text-decoration: none !important;
  transition: background-color 0.15s ease;
}

.pollhive-archive-tag-pill:hover {
  background: #efedf8;
}

.pollhive-archive-tag-pill.is-active {
  background: var(--pa-accent);
  color: #fff;
}

/* Main column */
.pollhive-archive-main {
  flex: 1;
  min-width: 0;
}

.pollhive-archive-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.pollhive-archive-results-count {
  font-size: 13px;
  color: var(--pa-faint);
  font-weight: 600;
}

.pollhive-archive-sort-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pollhive-archive-sort-pill {
  padding: 7px 13px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #e9e6f3;
  background: #fff;
  color: #3c3752;
  text-decoration: none !important;
  transition: all 0.15s ease;
}

.pollhive-archive-sort-pill.is-active {
  border-color: var(--pa-accent);
  background: var(--pa-accent-soft);
  color: var(--pa-accent);
}

/* Card grid */
.pollhive-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.pollhive-archive-card {
  background: #fff;
  border: 1px solid var(--pa-border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(20, 20, 43, 0.04), 0 6px 14px rgba(20, 20, 43, 0.05);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 11px;
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease;
}

.pollhive-archive-card:hover,
.pollhive-archive-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(20, 20, 43, 0.1);
  border-color: color-mix(in srgb, var(--pa-accent) 20%, white);
}

.pollhive-archive-card:focus-visible {
  outline: 2.5px solid var(--pa-accent);
  outline-offset: 2px;
}

.pollhive-archive-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pollhive-archive-card-status {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 8px;
}

.pollhive-archive-card-status-active {
  color: #0d9a4f;
  background: #eafbef;
}

.pollhive-archive-card-status-scheduled {
  color: #b8720d;
  background: #fdf3e6;
}

.pollhive-archive-card-status-closed {
  color: #6b7280;
  background: #f3f2f7;
}

.pollhive-archive-card-type {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--pa-faint);
}

.pollhive-archive-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--pa-ink);
  line-height: 1.4;
  /* Matches .pollhive-spp-related-poll-title's treatment: clamped to 2 lines
     with a matching min-height, so a one-line title and a two-line title
     occupy identical vertical space - otherwise the bars/footer below
     would start at a different y-position per card, misaligning cards
     across the same grid row. */
  min-height: calc(15px * 1.4 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pollhive-archive-card-bar-row {
  margin-bottom: 7px;
}

.pollhive-archive-card-bar-row:last-child {
  margin-bottom: 0;
}

.pollhive-archive-card-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--pa-muted);
  font-weight: 600;
  margin-bottom: 3px;
}

.pollhive-archive-card-bar-track {
  height: 5px;
  background: var(--pa-border);
  border-radius: 3px;
  overflow: hidden;
}

.pollhive-archive-card-bar-fill {
  height: 100%;
  background: color-mix(in srgb, var(--pa-accent) 60%, white);
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.pollhive-archive-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  border-top: 1px solid #f6f5fa;
}

.pollhive-archive-card-meta {
  font-size: 12.5px;
  color: var(--pa-faint);
  font-weight: 600;
}

.pollhive-archive-card-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pa-accent);
}

/* Empty state */
.pollhive-archive-empty {
  background: #fff;
  border: 1px dashed color-mix(in srgb, var(--pa-accent) 20%, white);
  border-radius: 16px;
  padding: 56px 20px;
  text-align: center;
}

.pollhive-archive-empty-icon {
  font-size: 32px;
  margin-bottom: 14px;
}

.pollhive-archive-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--pa-ink);
  margin-bottom: 6px;
}

.pollhive-archive-empty-desc {
  font-size: 13px;
  color: var(--pa-faint);
  margin-bottom: 16px;
}

.pollhive-archive-empty-action {
  display: inline-block;
  background: var(--pa-accent);
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
}

/* Pagination - paginate_links() core markup, styled to match */
.pollhive-archive-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.pollhive-archive-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #e9e6f3;
  background: #fff;
  color: #3c3752;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
}

.pollhive-archive-pagination .page-numbers.current {
  background: var(--pa-accent);
  border-color: var(--pa-accent);
  color: #fff;
}

.pollhive-archive-pagination .page-numbers.dots {
  border: none;
  background: none;
}

/* Mobile filter drawer */
.pollhive-archive-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 43, 0.3);
  z-index: 100060;
  display: flex;
  align-items: flex-end;
}

.pollhive-archive-drawer-backdrop[hidden] {
  display: none;
}

.pollhive-archive-drawer {
  background: #fff;
  width: 100%;
  border-radius: 20px 20px 0 0;
  padding: 22px 22px 32px;
  max-height: 75vh;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  animation: pollhive-archive-drawer-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pollhive-archive-drawer-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.pollhive-archive-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.pollhive-archive-drawer-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--pa-ink);
}

.pollhive-archive-drawer-close {
  background: #f3f2f7;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  color: var(--pa-ink);
  cursor: pointer;
}

.pollhive-archive-drawer-section-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--pa-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.pollhive-archive-drawer-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.pollhive-archive-drawer-pill {
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 700;
  background: #f3f2f7;
  color: #3c3752;
  text-decoration: none !important;
}

.pollhive-archive-drawer-pill.is-active {
  background: var(--pa-accent);
  color: #fff;
}

.pollhive-archive-drawer-show-results {
  width: 100%;
  background: var(--pa-accent);
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 900px) {
  .pollhive-archive-sidebar {
    display: none;
  }

  .pollhive-archive-mobile-filter-bar {
    display: flex;
  }
}

@media (max-width: 640px) {
  .pollhive-archive-grid {
    grid-template-columns: 1fr;
  }

  .pollhive-archive-title {
    font-size: 22px;
  }
}

/* ============================================================
   Reduced motion: collapse every decorative animation/transition
   (hover lifts, image zooms, drawer slide-in, animated bar widths)
   for users whose OS asks for less motion. Functional visibility
   changes (show/hide) are untouched - only movement is removed.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pollhive-poll-wrapper *,
  .pollhive-single-poll-page *,
  .pollhive-polls-archive *,
  .pollhive-archive-drawer-backdrop *,
  .pollhive-share *,
  .pollhive-share-backdrop * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .pollhive-spp-widget .pollhive-options-grid .pollhive-option label:hover,
  .pollhive-spp-widget .pollhive-vote-button:hover,
  .pollhive-spp-related-card:hover,
  .pollhive-archive-card:hover {
    transform: none;
  }

  .pollhive-spp-widget .pollhive-options-grid .pollhive-option label:hover .pollhive-option-image img {
    transform: none;
  }
}