/* PollMaster Pro v2 – Frontend */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ── Centering wrapper ── */
.pmp-widget-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 24px 0;
}

.pmp-widget {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: #fff;
  border: 2px solid #e0e7ff;
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 4px 28px rgba(99,102,241,.1);
}

/* ── Image ── */
.pmp-widget-image {
  width: 100%;
  max-height: 200px;
  overflow: hidden;
}
.pmp-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Body ── */
.pmp-widget-body { padding: 22px 24px; }

/* ── Header row ── */
.pmp-widget-header { display:flex; align-items:center; gap:7px; margin-bottom:12px; }
.pmp-widget-label  { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#6366f1; }
.pmp-closed-badge  { margin-left:auto; background:#fee2e2; color:#991b1b; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; }
.pmp-live-badge    { margin-left:auto; background:#dcfce7; color:#166534; font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:999px; letter-spacing:.03em; }

/* ── Title / Desc ── */
.pmp-widget-title { font-size:16px; font-weight:700; color:#1e1b4b; margin:0 0 6px; line-height:1.4; }
.pmp-widget-desc  { font-size:13px; color:#6b7280; margin:0 0 18px; line-height:1.5; }

/* ── Options ── */
.pmp-options { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }

.pmp-option-label {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  font-size: 14px; color: #374151; font-weight: 500;
  user-select: none;
}
.pmp-option-label:hover { border-color:#6366f1; background:#fafafe; }
.pmp-option-label input[type=radio],
.pmp-option-label input[type=checkbox] { display:none; }
.pmp-option-label:has(input:checked) { border-color:#6366f1; background:#eef2ff; }
.pmp-option-label:has(input:checked) .pmp-option-text { color:#4338ca; font-weight:600; }

.pmp-option-custom-input {
  width:18px; height:18px; flex-shrink:0;
  border:2px solid #d1d5db; border-radius:50%;
  transition:all .15s; position:relative;
}
.pmp-option-label:has(input[type=checkbox]) .pmp-option-custom-input { border-radius:5px; }
.pmp-option-label:has(input:checked) .pmp-option-custom-input { border-color:#6366f1; background:#6366f1; }
.pmp-option-label:has(input:checked) .pmp-option-custom-input::after {
  content:''; position:absolute; inset:3px;
  background:#fff; border-radius:50%;
}
.pmp-option-label:has(input[type=checkbox]:checked) .pmp-option-custom-input::after {
  inset:0; border-radius:3px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ── Vote button ── */
.pmp-vote-btn {
  width:100%; padding:12px; background:#6366f1; color:#fff;
  border:none; border-radius:10px; font-size:15px; font-weight:700;
  font-family:inherit; cursor:pointer; transition:background .15s, transform .1s;
}
.pmp-vote-btn:hover { background:#4f46e5; }
.pmp-vote-btn:active { transform:scale(.98); }
.pmp-vote-btn:disabled { opacity:.6; cursor:default; }
.pmp-vote-error { color:#dc2626; font-size:13px; margin-top:8px; }
.pmp-already-voted { color:#059669; font-weight:600; font-size:14px; margin-top:10px; }

/* ── Results ── */
.pmp-results { margin-top:18px; }
.pmp-res-row { margin-bottom:14px; }
.pmp-res-meta { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.pmp-res-label { font-size:13.5px; font-weight:600; color:#1e1b4b; }
.pmp-res-pct   { font-size:13px; font-weight:700; color:#6366f1; }
.pmp-res-track { background:#f3f4f6; border-radius:999px; height:10px; overflow:hidden; margin-bottom:2px; }
.pmp-res-fill  { background:linear-gradient(90deg,#6366f1,#8b5cf6); border-radius:999px; height:100%; transition:width .5s cubic-bezier(.4,0,.2,1); }
.pmp-res-votes { font-size:12px; color:#9ca3af; }

/* ── Results footer (total + refresh/realtime) ── */
.pmp-results-footer { display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:12px; border-top:1px solid #f3f4f6; flex-wrap:wrap; gap:8px; }
.pmp-total-votes { font-size:12.5px; color:#6b7280; }

.pmp-refresh-btn {
  background:none; border:1.5px solid #c7d2fe; color:#6366f1;
  border-radius:7px; padding:5px 12px; font-size:12.5px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:.15s;
}
.pmp-refresh-btn:hover { background:#eef2ff; border-color:#6366f1; }
.pmp-refresh-btn.spinning { opacity:.6; pointer-events:none; }

.pmp-realtime-indicator { display:flex; align-items:center; gap:6px; font-size:12px; color:#059669; }
.pmp-rt-dot { width:7px; height:7px; background:#4ade80; border-radius:50%; animation:pmp-pulse 1.5s infinite; }
@keyframes pmp-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

/* ── Error ── */
.pmp-error { color:#dc2626; font-size:14px; }

/* ── Responsive ── */
@media (max-width:500px) {
  .pmp-widget-body { padding:16px; }
  .pmp-widget-title { font-size:15px; }
}