/* Base theme */
:root {
  --bg: #202020;
  --text: #ffffff;
  --card-bg: #2a2a2a;
  --card-border: #2f2f2f;
  --card-border-hover: #3a3a3a;

  /* Accent (green) used across selections and button */
  --accent: #2ea62e;          /* primary accent */
  --accent-strong: #217821;   /* darker variant */
  --accent-shadow: rgba(46, 166, 46, 0.30);
  --accent-shadow-soft: rgba(46, 166, 46, 0.15);
}

body{
    background-color: var(--bg);
    color: var(--text);
}
h1{
    color: #30ff30;
    text-align: center;
}

/* Selectable vote item (label) */
.vote_item {
    /* existing shape spacing merged with new layout */
    margin: 10px;
    border-radius: 10px;

    /* new layout + visuals */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    min-height: 110px;                 /* keeps the visual height you had */
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Hide the checkbox but keep it accessible for screen readers and keyboard */
.vote_item > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
}

/* Hover feedback */
.vote_item:hover {
    border-color: var(--card-border-hover);
    box-shadow: 0 0 0 2px var(--accent-shadow-soft);
}

/* Selected state using modern :has support */
.vote_item:has(> input[type="checkbox"]:checked) {
    background-color: #173e17;       /* dark green tint for dark bg */
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-shadow);
}

/* Fallback selected state when JS adds .is-selected */
.vote_item.is-selected {
    background-color: #173e17;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-shadow);
}

/* Keyboard focus ring */
.vote_item:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Title and image layout */
.vote_title {
    font-weight: 600;
    color: var(--text);
    flex: 1;                 /* push the image to the right */
}

/* Replace float/right with flex-friendly alignment */
.vote_item img {
    margin-left: auto;
    max-width: 100px;
    max-height: 100px;
    border-radius: 8px;
    object-fit: cover;
}

/* Button: full width */
.btn-full {
  display: block;
  width: 100%;
}

/* Button color harmonized with accent */
.btn-primary.custom-color {
  background-color: var(--accent);
  border-color: #299229;
  color: #fff;
}
.btn-primary.custom-color:hover,
.btn-primary.custom-color:focus {
  background-color: #299229;
  border-color: #247f24;
}
.btn-primary.custom-color:active {
  background-color: var(--accent-strong);
  border-color: #1e6d1e;
}

.center-text {
    text-align: center;
}