/**
 * File: assets/polls-frontend.css
 * Description: Minimal styles for poll UI, results, and modals.
 */

/* --- Poll wrapper / general --- */
.pvs-poll-wrap {
  max-width: 800px;
  margin: 24px auto;
  background: #fff;
  padding: 20px 22px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.pvs-featured { margin: 10px 0 20px; }
.pvs-help { margin: 8px 0 12px; color: #444; }
.pvs-left { text-align: left; }

.pvs-actions {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.pvs-status { padding: 12px; background: #fff3cd; border: 1px solid #ffeeba; }
.pvs-loading { color: #666; }

.pvs-options .pvs-opt { display: block; margin: 6px 0; }
.pvs-poll-wrap .pvs-options li { margin: 6px 0; } /* tighten spacing if list elements used */

/* --- Results / chart --- */
.pvs-results { margin-top: 20px; }
.pvs-results-header { margin-bottom: 10px; font-size: 16px; }
.pvs-chart-wrap { position: relative; height: 420px; max-width: 800px; }

/* --- Inline alert (fallback if modal missing) --- */
.pvs-alert {
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0 16px;
  font-size: 14px;
  line-height: 1.4;
}
.pvs-alert-success {
  background: #e6ffed;
  border: 1px solid #b7f5c3;
  color: #114d23;
}

/* --- Modals --- */
.pvs-modal {
  position: fixed;
  inset: 0;
  display: none;                 /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

/* Hide when aria-hidden="true"; force-hide wins over theme CSS */
.pvs-modal[aria-hidden="true"] { display: none !important; }

/* Visible state toggled by JS */
.pvs-modal.is-open { display: flex !important; }

/* Dim overlay (clickable if you wire it) */
.pvs-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}

/* Dialog */
.pvs-modal__dialog {
  position: relative;
  text-align: center;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  z-index: 1; /* above overlay */
}

.pvs-modal__dialog h3 { margin-top: 0; }
.pvs-modal .pvs-note { color: #666; font-size: 15px; margin-top: 10px; text-align: left; }

/* Close button (the “×” icon in the corner) */
.pvs-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* Confirmation modal tweaks */
#pvs-confirm-modal .button-primary { margin-top: 12px; }

.pvs-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.pvs-modal { z-index: 999999; }

:root {
  /* Bar colors */
  --pvs-bar-bg: #dc2626;        /* red-600 */
  --pvs-bar-border: #991b1b;    /* red-800 */

  /* Label colors */
  --pvs-label-bg: #dc2626;      /* red background */
  --pvs-label-text: #ffffff;   /* white text */
}