:root{
  --gjp-layout-title-color: #e5c6ff;
  --gjp-card-title-color: #e5c6ff;
  --gjp-results-color: #79ffb2;

  --gjp-card-bg: #1f2730;
  --gjp-button-bg: #9b4bff;
  --gjp-button-text: #ffffff;
  --gjp-winner-border: #f2b21a;
  --gjp-text-color: #e6eef8;
  --gjp-font-title: inherit;
  --gjp-font-body: inherit;
  --gjp-font-button: inherit;
}

/* General */
.gjp-poll-layout { background: transparent; padding: 8px 0 24px; color: var(--gjp-text-color); font-family: var(--gjp-font-body); }
.gjp-layout-title { text-align:left; color:var(--gjp-layout-title-color); font-size:18px; margin: 6px 0 12px; font-weight:800; font-family: var(--gjp-font-title); }

/* Grid default (cards) */
.gjp-layout-grid { display:flex; flex-wrap:nowrap; gap:20px; justify-content:flex-start; align-items:flex-start; overflow-x:auto; padding-bottom:6px; }

/* Card base */
.gjp-layout-card { width:220px; flex:0 0 220px; background:var(--gjp-card-bg); border-radius:8px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,0.45); border:1px solid rgba(0,0,0,0.20); display:flex; flex-direction:column; position:relative; transition:transform .18s ease, box-shadow .18s ease; }
.gjp-layout-card:hover { transform:translateY(-6px); box-shadow:0 14px 30px rgba(0,0,0,0.5); }

/* Media */
.gjp-card-media { position:relative; height:260px; overflow:hidden; background:#0f1720; display:flex; align-items:center; justify-content:center; }
.gjp-card-image { width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1; }
.gjp-card-image--placeholder { width:100%; height:100%; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08)); }

/* Body */
.gjp-card-body { padding:12px; display:flex; flex-direction:column; gap:8px; flex-grow:1; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.55)); color:var(--gjp-text-color); }
.gjp-card-title { margin:0; font-size:15px; color: var(--gjp-card-title-color); font-weight:700; line-height:1.2; }

/* Action / vote */
.gjp-card-action { margin-top:auto; display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.gjp-vote-button { width:100%; padding:10px 12px; border-radius:6px; background:var(--gjp-button-bg); color:var(--gjp-button-text); border:none; font-weight:800; cursor:pointer; }
.gjp-done-button { width:100%; padding:10px 12px; border-radius:6px; background:#21a366; color:#ffffff; border:none; font-weight:800; cursor:default; }

/* Progress & results */
.gjp-progress { width:100%; height:8px; background:rgba(255,255,255,0.06); border-radius:6px; overflow:hidden; margin:8px 0 6px; }
.gjp-progress-fill { height:100%; background:linear-gradient(90deg,var(--gjp-layout-title-color), #6b21a8); width:0%; transition:width 800ms ease; border-radius:6px; }
.gjp-results-line { text-align:center; color:var(--gjp-results-color); margin-top:6px; font-weight:800; font-size:14px; background: rgba(0,0,0,0.18); padding:6px 8px; border-radius:6px; }

/* Winner aura (yellow) and user-voted (green) */
.gjp-layout-card.winner { box-shadow: 0 0 0 3px rgba(242,178,26,0.95), 0 20px 40px rgba(0,0,0,0.4); border-color: var(--gjp-winner-border); }
.gjp-layout-card.gjp-user-voted { box-shadow: 0 0 0 3px rgba(33,163,102,0.95); border-color: rgba(33,163,102,0.9); }
.gjp-layout-card.winner.gjp-user-voted { box-shadow: 0 0 0 3px rgba(242,178,26,0.95), 0 20px 40px rgba(0,0,0,0.4); border-color: var(--gjp-winner-border); }

/* Compact layout (thumb left, title right) */
.gjp-layout-compact .gjp-layout-grid { display:block; }
.gjp-layout-compact .gjp-layout-card { display:flex; flex-direction:row; width:100%; height:88px; padding:0; background:transparent; border-radius:6px; box-shadow:none; border:1px solid rgba(0,0,0,0.08); margin-bottom:10px; }
.gjp-layout-compact .gjp-card-media { width:110px; min-width:110px; height:88px; padding:0; border-radius:6px 0 0 6px; overflow:hidden; }
.gjp-layout-compact .gjp-card-body { padding:8px 12px; display:flex; flex-direction:row; align-items:center; gap:12px; background:var(--gjp-card-bg); border-radius:0 6px 6px 0; flex:1; }
.gjp-layout-compact .gjp-card-title { font-size:14px; }

/* Compact-hover: overlay button appears on thumbnail hover; progress bar larger and left-aligned */
.gjp-layout-compact-hover .gjp-layout-grid { display:block; }
.gjp-layout-compact-hover .gjp-layout-card { display:flex; flex-direction:row; width:100%; min-height:92px; padding:0; background:transparent; border-radius:6px; border:1px solid rgba(0,0,0,0.08); margin-bottom:12px; }
.gjp-layout-compact-hover .gjp-card-media { width:110px; min-width:110px; height:92px; padding:0; border-radius:6px 0 0 6px; overflow:hidden; position:relative; }
.gjp-layout-compact-hover .gjp-card-body { padding:8px 12px; display:flex; flex-direction:column; justify-content:center; gap:8px; background:var(--gjp-card-bg); border-radius:0 6px 6px 0; flex:1; }

/* thumbnail overlay vote button - hidden by default, shown on hover (compact-hover) */
.gjp-layout-compact-hover .gjp-thumb-vote { position:absolute; left:8px; bottom:8px; z-index:40; padding:8px 10px; border-radius:6px; background: rgba(155,75,255,0.95); color:#fff; border:none; cursor:pointer; display:none; font-weight:800; }
.gjp-layout-compact-hover .gjp-card-media:hover .gjp-thumb-vote { display:block; }

/* Progress bar styles for compact-hover: longer and aligned under title area */
.gjp-layout-compact-hover .gjp-progress { height:10px; margin:6px 0 4px; width:85%; }
.gjp-layout-compact-hover .gjp-results-line { text-align:left; padding:4px 6px; font-size:13px; background:transparent; }

/* Hide legacy winner badge */
.gjp-winner-badge { display:none; }

/* Global results */
.gjp-global-results { text-align:center; color:var(--gjp-results-color); margin-top:10px; font-weight:700; display:none; }

/* Aspect 16:9 support for cards */
.gjp-aspect-16x9 .gjp-card-media { position:relative; padding-top:56.25%; height:auto; }
.gjp-aspect-16x9 .gjp-card-media img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }

/* Responsive */
@media (max-width:700px) {
  .gjp-layout-compact .gjp-layout-card, .gjp-layout-compact-hover .gjp-layout-card { flex-direction:column; height:auto; }
  .gjp-layout-compact .gjp-card-media, .gjp-layout-compact-hover .gjp-card-media { width:100%; height:140px; min-width: auto; border-radius:6px 6px 0 0; }
  .gjp-layout-compact .gjp-card-body, .gjp-layout-compact-hover .gjp-card-body { border-radius:0 0 6px 6px; }
}