/* ===========================
   THEME VARIABLES
   =========================== */
:root {
  --tour-primary: #2563eb; /* biru SibiTrans */
  --tour-bg-light: #ffffff;
  --tour-bg-dark: #0b1220;
  --tour-text-light: #0f172a; /* <-- perbaiki typo sebelumnya */
  --tour-text-dark: #e6edf7;
  --tour-arrow: 14px;          /* ukuran isi panah (sebelumnya 8px) */
  --tour-arrow-stroke: 18px;   /* ukuran stroke putih (lebih besar sedikit) */

}

/* Hitung warna efektif berdasarkan tema */
body.theme-dark,
body.dark,
[data-theme="dark"] {
  --tour-bg: var(--tour-bg-dark);
  --tour-text: var(--tour-text-dark);
}
body:not(.theme-dark):not(.dark):not([data-theme="dark"]) {
  --tour-bg: var(--tour-bg-light);
  --tour-text: var(--tour-text-light);
}

/* ===========================
   OVERLAY (tanpa blur, sedikit gelap)
   =========================== */
.driver-overlay {
  background: rgba(2, 6, 23, 0) !important; /* readable, fokus ke popover */
  backdrop-filter: none !important;
}

/* ===========================
   POPOVER (ukuran & keterbacaan)
   =========================== */
.driver-popover {
  background: var(--tour-bg) !important;
  color: var(--tour-text) !important;
  max-width: 460px !important;
  padding: 20px 22px !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.35) !important;
}

.driver-popover-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  margin: 0 0 8px !important;
}

.driver-popover-description {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  opacity: 0.9;
}

.driver-popover-footer {
  margin-top: 14px !important;
  gap: 12px !important;
}

.driver-popover-progress-text {
  margin-right: auto !important;
  font-size: 0.8rem !important;
  color: var(--tour-text) !important;
  opacity: 0.65;
}

.driver-popover-close-btn {
  opacity: 0.8;
  transition: opacity 0.2s;
}
.driver-popover-close-btn:hover {
  opacity: 1;
}

/* ===========================
   BUTTONS (pill + kontras)
   =========================== */
.driver-popover .driver-popover-btn {
  border-radius: 9999px !important;
  padding: 9px 16px !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
}

.driver-popover .driver-popover-next-btn {
  color: #fff !important;
  background: linear-gradient(135deg, var(--tour-primary), #1e40af) !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35) !important;
}
.driver-popover .driver-popover-next-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.driver-popover .driver-popover-prev-btn {
  background: transparent !important;
  color: var(--tour-text) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}
.driver-popover .driver-popover-prev-btn:hover {
  background: rgba(148, 163, 184, 0.12) !important;
}

/* ===========================
   HIGHLIGHT (ring tebal + pulse)
   =========================== */
.driver-highlighted-element {
  box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.95),
    0 14px 34px rgba(37, 99, 235, 0.25) !important;
  animation: ringPulse 1.4s ease-out infinite;
}

@keyframes ringPulse {
  0% {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.9),
      0 12px 30px rgba(37, 99, 235, 0.25);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(37, 99, 235, 0),
      0 12px 30px rgba(37, 99, 235, 0.25);
  }
}

/* ===========================
   ARROWS (ikuti background)
   =========================== */
.driver-popover-arrow {
  position: relative;
  z-index: 2;

}

.driver-popover[data-position^="right"] .driver-popover-arrow::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-right-color: var(--tour-bg);
}
.driver-popover[data-position^="left"] .driver-popover-arrow::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left-color: var(--tour-bg);
}
.driver-popover[data-position^="top"] .driver-popover-arrow::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 20px;
  border: 8px solid transparent;
  border-top-color: var(--tour-bg);
}
.driver-popover[data-position^="bottom"] .driver-popover-arrow::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 20px;
  border: 8px solid transparent;
  border-bottom-color: var(--tour-bg);
}

/* ===========================
   VARIAN: RING PUTIH DI POPOVER
   (gunakan class 'tour-sibitrans' pada popover)
   =========================== */
.tour-sibitrans.driver-popover::before {
  display: none !important;
}
.driver-popover,
.tour-sibitrans.driver-popover{
  overflow: visible !important;
}

.tour-sibitrans.driver-popover {
  /* ring putih sebagai "border" + shadow */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92),
    0 18px 40px rgba(2, 6, 23, 0.35) !important;
}

/* versi light: ring lebih soft */
body:not(.theme-dark):not(.dark):not([data-theme="dark"])
  .tour-sibitrans.driver-popover {
  box-shadow: 0 0 0 1.5px rgba(15, 23, 42, 0.2),
    0 18px 40px rgba(2, 6, 23, 0.12) !important;
}

/* arrow ber-border putih (double layer) */
.tour-sibitrans.driver-popover[data-position^="right"]
  .driver-popover-arrow::before,
.tour-sibitrans.driver-popover[data-position^="left"]
  .driver-popover-arrow::before,
.tour-sibitrans.driver-popover[data-position^="top"]
  .driver-popover-arrow::before,
.tour-sibitrans.driver-popover[data-position^="bottom"]
  .driver-popover-arrow::before {
  content: "";
  position: absolute;
  border: 10px solid transparent;
}
.tour-sibitrans.driver-popover[data-position^="right"]
  .driver-popover-arrow::before {
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: rgba(255, 255, 255, 0.92);
}
.tour-sibitrans.driver-popover[data-position^="right"]
  .driver-popover-arrow::after {
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--tour-bg);
}

.tour-sibitrans.driver-popover[data-position^="left"]
  .driver-popover-arrow::before {
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: rgba(255, 255, 255, 0.92);
}
.tour-sibitrans.driver-popover[data-position^="left"]
  .driver-popover-arrow::after {
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--tour-bg);
}

.tour-sibitrans.driver-popover[data-position^="top"]
  .driver-popover-arrow::before {
  top: -10px;
  left: 20px;
  border-top-color: rgba(255, 255, 255, 0.92);
}
.tour-sibitrans.driver-popover[data-position^="top"]
  .driver-popover-arrow::after {
  top: -8px;
  left: 20px;
  border-top-color: var(--tour-bg);
}

.tour-sibitrans.driver-popover[data-position^="bottom"]
  .driver-popover-arrow::before {
  bottom: -10px;
  left: 20px;
  border-bottom-color: rgba(255, 255, 255, 0.92);
}
.tour-sibitrans.driver-popover[data-position^="bottom"]
  .driver-popover-arrow::after {
  bottom: -8px;
  left: 20px;
  border-bottom-color: var(--tour-bg);
}

/* ===========================
   MOBILE
   =========================== */
@media (max-width: 480px) {
  .driver-popover {
    max-width: 92vw !important;
    padding: 18px !important;
  }
}

/* ===========================
   THEME "driverjs-theme" (tombol hitam)
   =========================== */
.driver-popover.driverjs-theme button,
.driver-popover.driverjs-theme .driver-popover-btn {
  flex: 1;
  text-align: center;
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #000 !important;
  text-shadow: none !important;
  font-size: 14px !important;
  padding: 5px 8px !important;
  border-radius: 6px !important;
}
.driver-popover.driverjs-theme .driver-popover-footer {
  display: flex;
  gap: 8px;
}
.driver-popover.driverjs-theme .driver-popover-btn:hover {
  filter: brightness(1.06);
}
.driver-popover.driverjs-theme .driver-popover-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
body.theme-dark .driver-popover.driverjs-theme .driver-popover-btn,
body.dark .driver-popover.driverjs-theme .driver-popover-btn,
[data-theme="dark"] .driver-popover.driverjs-theme .driver-popover-btn {
  background-color: #111 !important;
  border-color: #2a2a2a !important;
}