/* Custom Driver.js styling for MASO */

/* Main popover styling */
.driver-popover {
  background: white !important;
  border-radius: 12px !important;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  max-width: 450px !important;
  z-index: 99999 !important;
}

.driver-popover-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
  margin-bottom: 12px !important;
}

.driver-popover-description {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #4b5563 !important;
}

/* Button styling */
.driver-popover-next-btn,
.driver-popover-done-btn {
  background: #14b8a6 !important;
  color: white !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
  letter-spacing: 0.3px !important;
}

.driver-popover-next-btn:hover,
.driver-popover-done-btn:hover {
  background: #0d9488 !important;
}

.driver-popover-prev-btn,
.driver-popover-close-btn {
  color: #6b7280 !important;
  border: none !important;
  background: transparent !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

.driver-popover-prev-btn:hover,
.driver-popover-close-btn:hover {
  background: #f3f4f6 !important;
}

/* Progress bar */
.driver-popover-progress-text {
  color: #6b7280 !important;
  font-size: 13px !important;
}

/* Overlay */
.driver-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
  z-index: 99998 !important;
}

/* Highlighted element */
.driver-active-element,
.driver-highlighted-element {
  box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.4) !important;
  border-radius: 8px !important;
  z-index: 99999 !important;
}

/* Arrow */
.driver-popover-arrow {
  border-color: white !important;
}

.driver-popover-arrow-side-top {
  border-top-color: white !important;
}

.driver-popover-arrow-side-bottom {
  border-bottom-color: white !important;
}

.driver-popover-arrow-side-left {
  border-left-color: white !important;
}

.driver-popover-arrow-side-right {
  border-right-color: white !important;
}

/* Footer */
.driver-popover-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid #e5e7eb !important;
}

/* Navigation buttons container */
.driver-popover-navigation-btns {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

/* Close button positioning */
.driver-popover-close-btn {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
