.vv-vision {border:1px solid #ddd; padding:15px; margin:15px 0;}
.vv-header {display:grid; grid-template-rows:auto auto auto; row-gap:10px; margin-bottom:20px;}

.vv-cell.vv-video iframe {width:100%; height:auto; display:block;}
.vv-cell.vv-tags {
  flex: 0 0 20% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.125rem !important;
  text-align: left !important;
}
.vv-cell.vv-vote {text-align:center;}
.vv-up, .vv-down {border:none; background:none; font-size:2.2rem; cursor:pointer; margin:0 10px;}
.vv-counts {margin-top:8px; font-size:0.9rem; color:#555;}


.vv-status.fulfilled {color:green;}

.vv-iframe-container{position:relative;width:100%;padding-bottom:56.25%;}
.vv-iframe-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;}


/* Highlight active vote */
.vv-cell.vv-vote .vv-up.active, .vv-cell.vv-vote .vv-up.active i {
  color: green;
}
.vv-cell.vv-vote .vv-down.active, .vv-cell.vv-vote .vv-down.active i {
  color: red;
}

/* --- VISION VOTE 2.0.4: Small inline FA icons only --- */
.vv-cell.vv-vote {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.vv-cell.vv-vote button {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  font-size: 1.2rem !important;
  color: #666;
}
.vv-cell.vv-vote button i {
  font-size: 1.2rem;
}
.vv-cell.vv-vote .vv-up-count,
.vv-cell.vv-vote .vv-down-count {
  font-size: 0.9rem;
  margin-left: 0.25rem;
  color: #333;
}
.vv-cell.vv-vote .vv-up.active,
.vv-cell.vv-vote .vv-up.active i {
  color: green;
}
.vv-cell.vv-vote .vv-down.active,
.vv-cell.vv-vote .vv-down.active i {
  color: red;
}
.vv-cell.vv-vote .vv-counts {
  margin-left: auto;
  font-size: 0.85rem;
  color: #555;
}
/* Hide percent bar/status inline for now */



/* Restore percent bar and status */



/* VisionVote 2.0.6: Inline vote icons + status */
.vv-cell.vv-vote {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vv-votes-inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.vv-votes-inline button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 1.2rem;
  color: #666;
  cursor: pointer;
}
.vv-votes-inline button:hover {
  color: #0073e6;
}
.vv-votes-inline .vv-up-count,
.vv-votes-inline .vv-down-count {
  margin-left: 0.25rem;
  font-size: 0.9rem;
  color: #333;
}
.vv-votes-inline .vv-counts {
  margin-left: auto;
  font-size: 0.9rem;
  color: #555;
}
.vv-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #555;
}
.vv-status .fa-check {
  color: green;
}
.vv-status .fa-clock {
  color: gray;
}


/* VisionVote 2.0.8: video container fix and prompt styling */
.vv-cell.vv-video {
  height: auto !important;
  padding-bottom: 1rem !important;
  overflow: hidden !important;
}
.vv-prompt {
  font-size: 0.9rem;
  font-style: italic;
  color: #666;
  margin-bottom: 0.5rem;
}


/* VisionVote 2.1.0: Flexbox layout for responsive display */
.vv-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}
.vv-cell {
  flex: 1 1 100% !important;
}
@media (min-width: 768px) {
  .vv-cell.vv-video,
  .vv-cell.vv-tags,
  .vv-cell.vv-vote {
    flex: 0 0 33.333% !important;
  }
}
.vv-cell.vv-video {
  height: auto !important;
  overflow: hidden !important;
  padding-bottom: 1rem !important;
}
.vv-cell.vv-tags {
  flex: 0 0 20% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.125rem !important;
  text-align: left !important;
}
.vv-cell.vv-vote {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}


/* VisionVote 2.1.1: Tags inline & flex ordering */
.vv-cell.vv-video {
  order: 1;
}
.vv-cell.vv-tags {
  flex: 0 0 20% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.125rem !important;
  text-align: left !important;
}
.vv-cell.vv-tags span {
  margin: 0 !important;
  padding: 0 !important;
}
.vv-prompt {
  order: 3;
}
.vv-cell.vv-vote {
  order: 4;
}

/* video auto height */
.vv-iframe-container iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9;
}


/* VisionVote 2.1.2: Desktop video/tags/vote widths */

@media (min-width: 769px) {
  .vv-cell.vv-video {
    flex: 0 0 40% !important;
  }
  .vv-cell.vv-tags {
  flex: 0 0 20% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.125rem !important;
  text-align: left !important;
}
  .vv-cell.vv-vote {
  flex: 0 0 40% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

  .vv-cell.vv-tags {
  flex: 0 0 20% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.125rem !important;
  text-align: left !important;
}
  .vv-cell.vv-vote {
  flex: 0 0 40% !important;
  }
}

/* Ensure iframe scales */
.vv-iframe-container iframe {
  width: 100% !important;
  height: auto !important;
}


/* VisionVote 2.1.4: Adjust tag gap and enforce prompt position */
@media (min-width: 769px) {
  .vv-cell.vv-tags {
  flex: 0 0 20% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.125rem !important;
  text-align: left !important;
}
}

/* Ensure prompt and vote children ordering */
.vv-cell.vv-vote {
  display: flex !important;
  flex-direction: column !important;
}
.vv-cell.vv-vote > .vv-prompt {
  order: 1 !important;
  margin-bottom: 0.5rem !important;
}
.vv-cell.vv-vote > .vv-votes-inline {
  order: 2 !important;
}
.vv-cell.vv-vote > .vv-status {
  order: 3 !important;
  margin-top: 0.25rem !important;
}

/* Mobile: prompt above votes (already under vote cell) */

/* VisionVote 2.1.5: Mobile full-width tags and vote */

@media (max-width: 768px) {
  .vv-cell.vv-tags,
  .vv-cell.vv-vote {
    width: 100% !important;
  }
}


/* VisionVote 2.1.6-final Layout Start */
/* Use flexbox */
.vv-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}

/* Desktop layout */
@media (min-width: 769px) {
  .vv-cell.vv-video {
    flex: 0 0 40% !important;
  }
  .vv-cell.vv-tags {
  margin-top: 8px !important;
  flex: 0 0 20% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.125rem !important;
  text-align: left !important;
}
  .vv-cell.vv-vote {
  flex: 0 0 40% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* Mobile / Tablet layout */
@media (max-width: 768px) {
  .vv-grid {
    flex-direction: column !important;
  }
  .vv-cell.vv-video,
  .vv-cell.vv-tags,
  .vv-cell.vv-vote {
  flex: 0 0 40% !important;
  }
  .vv-cell.vv-tags {
  flex: 0 0 20% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.125rem !important;
  text-align: left !important;
}
  .vv-cell.vv-vote {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* Ensure responsive iframe */
.vv-iframe-container iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
}
/* VisionVote 2.1.6-final Layout End */


/* VisionVote 2.1.7: video container height auto */
.vv-cell.vv-video {
  height: auto !important;
}

.vv-iframe-container iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
}


/* VisionVote 2.1.9 Layout */
/* Hide <br> in tags, use gap for spacing */
.vv-cell.vv-tags br {
  display: none !important;
}

@media (min-width: 769px) {
  /* Kontener trzech kolumn: video / tags / vote */
  .vv-grid {
    display: flex !important;
    flex-wrap: nowrap !important;         /* nie zawijaj kolumn */
    align-items: flex-start !important;   /* wyrównaj do góry, wszystkie na tej samej linii */
    gap: 1rem !important;
  }

  /* Video: 40% */
  .vv-cell.vv-video {
	order: 1 !important;
    flex: 0 0 40% !important;
  }

  /* Tagi: 20%, pionowo, jeden pod drugim, mały gap */
  .vv-cell.vv-tags {
	order: 2 !important;
    flex: 0 0 20% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.125rem !important;
    text-align: left !important;
    justify-content: flex-start !important;
    /* wyłącz <br> jeżeli w kodzie HTML wciąż się pojawia */
  }
  .vv-cell.vv-tags br {
    display: none !important;
  }

  /* Głosowanie: 40%, prompt u góry */
  .vv-cell.vv-vote {
	order: 3 !important;
    flex: 0 0 40% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  /* upewnij się, że .vv-prompt jest wstawiony PRZED .vv-votes-inline w HTML */
}

/* === VisionVote Video Responsive === */
.vv-cell.vv-video,
.vv-iframe-container {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
}
.vv-iframe-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16/9 !important;
}

/* Mobile: full width, tags horizontal */
@media (max-width: 768px) {
  .vv-grid {
    flex-direction: column !important;
  }
  .vv-cell.vv-video,
  .vv-cell.vv-tags,
  .vv-cell.vv-vote {
    flex: 0 0 100% !important;
  }
    /* Wideo pierwsze */
  .vv-cell.vv-video {
    order: 1 !important;
  }
  .vv-cell.vv-tags {
	order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  .vv-cell.vv-vote {
	order: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* Responsive iframe */
.vv-cell.vv-video,
.vv-iframe-container {
  height: auto !important;
}
.vv-iframe-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16/9 !important;
}
/* === TAGI: identyczna typografia jak licznik głosów  =================== */
/* reguła globalna – obowiązuje w każdej szerokości ekranu --------------- */
.vv-cell.vv-tags,
.vv-cell.vv-tags span {           /* każdy #tag, niezależnie od znacznika */
  font-size: 0.9rem !important;   /*  ↔  .vv-up-count / .vv-down-count     */
  color: #333 !important;         /*  ↔  kolor licznika                   */
  font-family: inherit !important;
  line-height: 1.3;
}

/* jeżeli w części mobile nadpisujesz .vv-cell.vv-tags, powtórz regułę ---- */
@media (max-width: 768px){
  .vv-cell.vv-tags,
  .vv-cell.vv-tags span{
    font-size: 0.9rem !important;
    color:#333 !important;
  }
}
/* ====================================================================== */