/* Style untuk footer credit */
.footer-credit {
  margin-top: 10px;
  margin-bottom: 0px;
  padding-bottom: 0px;
  font-size: 13px;
  color: #777;
}
/* Style untuk pesan error dan link alternatif di bawah player */
.info-error {
  margin-top: 10px;
  font-size: 14px;
  color: #ccc;
}
.alt-link {
  color: #4cc3ff;
}
body {
      background: #111;
      color: #fff;
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 30px;
    }

    #searchInput:-webkit-autofill {
     background-color: #2c2c2c !important;
     -webkit-box-shadow: 0 0 0px 1000px #2c2c2c inset !important;
     -webkit-text-fill-color: #fff !important;
    }

    .combo-wrapper,
    .reminder-container {
      max-width: 320px;
      flex: 1 1 0;
      background: #222;
      border-radius: 8px;
      border: 1px solid #333;
      padding: 12px 14px 14px 14px;
      margin: 0;
      box-shadow: 0 2px 8px #0004;
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
    }

    .combo-wrapper {
      max-width: 320px;
      flex: 1 1 0;
      min-width: 0;
    }

    .search-wrapper {
      position: relative;
    }

    #searchInput {
      background: #2c2c2c;
      color: #fff;
      font-size: 15px;
      padding: 8px 34px 8px 8px;
      border: none;
      border-bottom: 0.5px solid #444;
      border-radius: 5px 5px 0 0;
      outline: none;
      width: 100%;
      box-sizing: border-box;
    }

    .clear-btn {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      padding: 0;
      line-height: 1;
    }

    #channelList {
      max-height: 75px;
      max-height: 100%;
      overflow-y: auto;
      background: #2c2c2c;
      border-top: 1px solid #444;
      border-radius: 0 0 4px 4px;
      scrollbar-width: thin;
      scrollbar-color: #888 #000;
    }

    #channelList::-webkit-scrollbar {
      width: 8px;
    }

    #channelList::-webkit-scrollbar-track {
      background: #000;
    }

    #channelList::-webkit-scrollbar-thumb {
      background-color: #888;
      border-radius: 4px;
    }

    .channel-item {
      padding: 4px 10px;
      font-size: 14px;
      line-height: 1.2;
      color: #fff;
      text-align: left;
      cursor: pointer;
    }

    .channel-item:hover { background: #444; }

    .media-wrapper {
      flex: 3 1 0;
      min-width: 0;
      margin: 0;
      border-radius: 8px;
      border: 1px solid #333;
      box-shadow: 0 2px 8px #0004;
      background: #000;
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
    }

    .info-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #555;
      border-bottom: 1px solid #333;
      padding: 2px 10px;
      font-size: 14px;
      color: white;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }


    video {
      width: 100%;
      min-height: 390px;
      background: #000;
      display: block;
      max-width: 100%;
      max-height: 100%;
    }

    .media-wrapper:fullscreen video,
    .media-wrapper:-webkit-full-screen video,
    video:fullscreen,
    video:-webkit-full-screen {
      width: 100vw !important;
      height: 100vh !important;
      max-width: 100vw !important;
      max-height: 100vh !important;
      object-fit: contain;
      background: #000;
      display: block;
    }

    .timeline-bar {
      width: 100%;
      height: 4px;
      background: #333;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      margin: 2px 0;
    }

    .timeline-buffered {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: #ff69b4;
      width: 0%;
      z-index: 0;
    }

    .timeline-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: #4cc3ff;
      width: 0%;
      z-index: 1;
    }

    .controls-advanced {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #555;
      border-top: 1px solid #333;
      padding: 0px 10px;
      width: 100%;
      box-sizing: border-box;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
    }

    .controls-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .controls-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .controls-left button,
    .controls-right button,
    .controls-left input[type="range"] {
      background: none;
      border: none;
      color: white;
      font-size: 18px;
      cursor: pointer;
    }

    .controls-left input[type="range"] {
      width: 80px;
      height: 4px;
      accent-color: #4cc3ff;
    }

    .media-wrapper:fullscreen .controls-advanced,
    .media-wrapper:fullscreen .timeline-bar,
    .media-wrapper:fullscreen .info-bar,
    .media-wrapper:-webkit-full-screen .controls-advanced,
    .media-wrapper:-webkit-full-screen .timeline-bar,
    .media-wrapper:-webkit-full-screen .info-bar {
      display: none !important;
    }
    h1 {
       font-size: 24px;
       margin-top: -20px;
       margin-bottom: 20px;
    }

    .btn-refresh {
  background: none;
  border: none;
  border-radius: 50%;
  padding: 2px;
  margin-left: 8px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.btn-refresh:hover {
  background: #444;
}
.main-flex {
  display: flex;
  align-items: stretch; /* Ubah dari flex-start ke stretch */
  gap: 24px;
  height: 100%;
}

.combo-wrapper,
.reminder-container {
  height: 430px;   /* Atur tinggi manual */
}

.media-wrapper {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.combo-wrapper {
  flex: 1 1 0;
  max-width: 320px; /* Batas maksimum opsional */
  min-width: 0;
}

.media-wrapper {
  flex: 3 1 0;
  min-width: 0;
}

.reminder-container {
  flex: 1 1 0;
  max-width: 320px;
  min-width: 0;
  background: #222;
  border-radius: 8px;
  border: 1px solid #333;
  padding: 12px 14px 14px 14px;
  margin: 0;
  box-shadow: 0 2px 8px #0004;
  display: flex;
  flex-direction: column;
  min-height: 430px;
  height: 100%;
}

.reminder-container h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  color: #eb1c0d;
  font-weight: bold;
  letter-spacing: 0.5px;
 
}

.pengingat {
  background: linear-gradient(90deg, #23272f 60%, #2a2f3a 100%);
  border-radius: 10px 10px 6px 6px;
  border: 1px solid #333;
  padding: 18px 16px 12px 16px;
  margin-bottom: 12px;
  box-shadow: 0 4px 16px #0003;
  color: #fff;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.pengingat h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #4cc3ff;
  text-shadow: 0 2px 8px #0006;
  display: flex;
  align-items: center;
  gap: 8px;
}



.reminder-list {
  background: linear-gradient(90deg, #232323 60%, #232b3b 100%);
  border-radius: 8px;
  border: 1px solid #333;
  padding: 16px 16px 12px 16px;
  box-shadow: 0 2px 8px #0002;
  color: #000;
  width: 100%;
  box-sizing: border-box;
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.reminder-list ul {
  margin: 0;
  padding-left: 18px;
  list-style: disc inside;
}

.reminder-list li {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.5;
  transition: color 0.2s;
  position: relative;
}

.reminder-list li:last-child {
  margin-bottom: 0;
}

.reminder-list li::marker {
  color: #4cc3ff;
}

.reminder-today {
      background: #ffeaea;
      border: 1px solid #ff4d4d;
      border-radius: 6px;
      padding: 8px 12px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      font-weight: bold;
    }
    .reminder-normal {
      background: #f7f7f7;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 8px 12px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
    }
    .bell {
      color: #ff4d4d;
      font-size: 0.3em;
      margin-right: 8px;
    }
    #list {
      font-size: small;
    }

.btn-ganti-channel:hover {
  background: #4cc3ff;
  color: #fff;
  border-color: #0077b6;
}

/* Scrollbar untuk daftar pengingat */
#list, .reminder-list {
  scrollbar-width: thin;
  scrollbar-color: #888 #000;
}

#list::-webkit-scrollbar,
.reminder-list::-webkit-scrollbar {
  width: 8px;
}

#list::-webkit-scrollbar-track,
.reminder-list::-webkit-scrollbar-track {
  background: #000;
}

#list::-webkit-scrollbar-thumb,
.reminder-list::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

#autoRetryBtn.auto-on {
  background: #ff4d4d;
  color: #fff;
  border-color: #ff4d4d;
}
#autoRetryBtn.auto-off {
  background: #e0e0e0;
  color: #888;
  border-color: #bbb;
}

@media (max-width: 900px) {
  .main-flex {
    flex-direction: column;
  }

.combo-wrapper,
.media-wrapper,
.reminder-container {
    margin-top: 0px!important;
    margin-bottom: 0px!important;
  }

  .combo-wrapper {
    order: 1;
    max-width: 100%;
    
  }
  .media-wrapper {
    order: 2;
    max-width: 100%;
    margin-left: 0px;
    margin-right: 0px;
  }

  video {
  width: 100%;
  min-height: 180px;
;
  }

  .reminder-container {
    order: 3;
    max-width: 100%;
    align-items: stretch;
    min-height: 400px;
  }

  .reminder-list {
    flex: unset !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    overflow-y: visible !important;
  }

  .pengingat, .reminder-list {
    padding: 12px 8px;
  }
  .combo-wrapper {
    min-height: 130px;
  }

  .media-wrapper,
  .reminder-container {
    height: auto !important;
    min-height: auto !important;
  }

  .media-wrapper:fullscreen,
  .media-wrapper:-webkit-full-screen {
    background: #000 !important;
    border: none !important;
    box-shadow: none !important;
  }
}