/* Tour Custom Styles
   This app uses Bootstrap Tour (or compatible) which may render the tour UI as a .popover
   with various class combinations. These rules aggressively target common tour markup.
*/

/* ===== Container (Popover) ===== */
.popover.tour,
.popover.tour-modern,
.tour.tour-modern,
.tour.popover,
.popover[class*="tour"],
div.tour {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow:
    0 20px 60px rgba(102, 126, 234, 0.40),
    0 8px 24px rgba(0, 0, 0, 0.15) !important;
  padding: 0 !important;
  max-width: 420px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif !important;
  overflow: hidden !important;
  animation: tourSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Hide arrow (Bootstrap popover arrow) */
.popover.tour > .arrow,
.popover.tour-modern > .arrow,
.tour.popover > .arrow,
.popover[class*="tour"] > .arrow,
div.tour > .arrow {
  display: none !important;
}

/* ===== Header / Title ===== */
.popover.tour .popover-title,
.popover.tour-modern .popover-title,
.tour.popover .popover-title,
.popover[class*="tour"] .popover-title,
div.tour .popover-title {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  padding: 18px 22px 10px !important;
  letter-spacing: -0.4px !important;
}

/* Custom template header wrapper (from help-tour.js) */
.popover.tour .tour-header,
.popover.tour-modern .tour-header,
.tour.tour-modern .tour-header,
.tour.popover .tour-header,
.popover[class*="tour"] .tour-header {
  position: relative !important;
}

.popover.tour .tour-close,
.popover.tour-modern .tour-close,
.tour.tour-modern .tour-close,
.tour.popover .tour-close,
.popover[class*="tour"] .tour-close {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.popover.tour .tour-close:hover,
.popover.tour-modern .tour-close:hover,
.tour.tour-modern .tour-close:hover,
.tour.popover .tour-close:hover,
.popover[class*="tour"] .tour-close:hover {
  color: #ffffff !important;
}

/* ===== Body / Content ===== */
.popover.tour .popover-content,
.popover.tour-modern .popover-content,
.tour.popover .popover-content,
.popover[class*="tour"] .popover-content,
div.tour .popover-content {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  padding: 12px 22px 18px !important;
}

/* ===== Footer / Navigation ===== */
.popover.tour .popover-navigation,
.popover.tour-modern .popover-navigation,
.tour.popover .popover-navigation,
.popover[class*="tour"] .popover-navigation,
div.tour .popover-navigation {
  background: rgba(0, 0, 0, 0.14) !important;
  padding: 14px 18px 18px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
}

.popover.tour .tour-btn-group,
.popover.tour-modern .tour-btn-group,
.tour.tour-modern .tour-btn-group,
.tour.popover .tour-btn-group,
.popover[class*="tour"] .tour-btn-group {
  display: flex !important;
  gap: 10px !important;
}

/* ===== Buttons (works for both default Bootstrap Tour and our template) ===== */
.popover.tour .btn,
.popover.tour-modern .btn,
.tour.popover .btn,
.popover[class*="tour"] .btn,
div.tour .btn {
  border-radius: 10px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
}

/* Prev */
.popover.tour .btn[data-role="prev"],
.popover.tour-modern .btn[data-role="prev"],
.tour.popover .btn[data-role="prev"],
.popover[class*="tour"] .btn[data-role="prev"],
.popover.tour .tour-btn-prev,
.popover.tour-modern .tour-btn-prev,
.tour.tour-modern .tour-btn-prev {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

.popover.tour .btn[data-role="prev"]:hover,
.popover.tour-modern .btn[data-role="prev"]:hover,
.tour.popover .btn[data-role="prev"]:hover,
.popover[class*="tour"] .btn[data-role="prev"]:hover,
.popover.tour .tour-btn-prev:hover,
.popover.tour-modern .tour-btn-prev:hover,
.tour.tour-modern .tour-btn-prev:hover {
  background: rgba(255, 255, 255, 0.32) !important;
  transform: translateY(-1px) !important;
}

/* Next */
.popover.tour .btn[data-role="next"],
.popover.tour-modern .btn[data-role="next"],
.tour.popover .btn[data-role="next"],
.popover[class*="tour"] .btn[data-role="next"],
.popover.tour .tour-btn-next,
.popover.tour-modern .tour-btn-next,
.tour.tour-modern .tour-btn-next {
  background: #ffffff !important;
  color: #5b64d8 !important;
}

.popover.tour .btn[data-role="next"]:hover,
.popover.tour-modern .btn[data-role="next"]:hover,
.tour.popover .btn[data-role="next"]:hover,
.popover[class*="tour"] .btn[data-role="next"]:hover,
.popover.tour .tour-btn-next:hover,
.popover.tour-modern .tour-btn-next:hover,
.tour.tour-modern .tour-btn-next:hover {
  background: #f3f4ff !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
  transform: translateY(-1px) !important;
}

/* End/Skip */
.popover.tour .btn[data-role="end"],
.popover.tour-modern .btn[data-role="end"],
.tour.popover .btn[data-role="end"],
.popover[class*="tour"] .btn[data-role="end"],
.popover.tour .tour-btn-skip,
.popover.tour-modern .tour-btn-skip,
.tour.tour-modern .tour-btn-skip {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  padding: 9px 14px !important;
}

.popover.tour .btn[data-role="end"]:hover,
.popover.tour-modern .btn[data-role="end"]:hover,
.tour.popover .btn[data-role="end"]:hover,
.popover[class*="tour"] .btn[data-role="end"]:hover,
.popover.tour .tour-btn-skip:hover,
.popover.tour-modern .tour-btn-skip:hover,
.tour.tour-modern .tour-btn-skip:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  text-decoration: none !important;
}

/* Disabled */
.popover.tour .btn.disabled,
.popover.tour-modern .btn.disabled,
.tour.popover .btn.disabled,
.popover[class*="tour"] .btn.disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* Backdrop */
.tour-backdrop {
  background: rgba(0, 0, 0, 0.65) !important;
  opacity: 1 !important;
}

@keyframes tourSlideIn {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}