/* Open button */
.tvpe-open-picker {
  padding: 10px 14px;
  margin-bottom: 15px;
background: #f5f5f5;  
    color: #000000;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    font-size: 16px;
}
.tvpe-open-picker:hover {
  background: rgb(183, 212, 55);
}
/* Overlay */
.tvpe-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 999999;
}

/* Modal */
.tvpe-modal {
  background: #fff;
  max-width: 640px;
  margin: 5vh auto;
  padding: 20px 24px;
  border-radius: 10px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.tvpe-close {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
}

/* Channel list */
.tvpe-channel-list {
  overflow-y: auto;
  margin: 20px 0 10px;
  border-top: 1px solid #eee;
}

/* Row like TVGuide */
.tvpe-channel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

/* Label text */
.tvpe-channel-row span {
  flex: 1;
  margin-left: 12px;
  font-size: 15px;
}

/* Hide native checkbox */
.tvpe-channel-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Custom checkbox */
.tvpe-channel-row::after {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid #cfd3da;
  background: #fff;
  transition: all .15s ease;
}

/* Checked state */
.tvpe-channel-row input:checked + span::after {
  display: none;
}

.tvpe-channel-row input:checked ~ ::after {
  display: none;
}

/* Using :has() for modern browsers */
.tvpe-channel-row:has(input:checked)::after {
    background: #b7d437;
    border-color: #b7d437;
    /* Brug unicode i stedet for selve tegnet */
    content: '\2713'; 
    color: #1f2d3d;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover */
.tvpe-channel-row:hover {
  background: #f7f8fa;
}

/* Actions */
.tvpe-actions {
  text-align: right;
  margin-top: 16px;
}
.tvpe-picker-button-wrap {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
button.tvpe-apply {
    background: #f5f5f5;
    color: #1f2d3d;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    font-size: 16px;
}
button.tvpe-apply:hover {
  background: rgb(183, 212, 55);
}