/* ═══════════════════════════════════════════════════════════════
   SahiHisab — Product tour popover skin (Driver.js)
   Scoped to .sh-tour-popover so it never affects Munim's own tours.
   Light + dark aware, mobile-friendly, sits above the bottom nav.
   No !important.
   ═══════════════════════════════════════════════════════════════ */

/* Popover box */
.driver-popover.sh-tour-popover {
  --sh-tour-accent: #0288D1;
  background: #ffffff;
  color: #0F2A43;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(2, 12, 27, 0.28), 0 4px 14px rgba(2, 12, 27, 0.14);
  padding: 18px 18px 14px;
  max-width: 320px;
  font-family: 'DM Sans', system-ui, sans-serif;
}

.driver-popover.sh-tour-popover .driver-popover-title {
  font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0F2A43;
  margin-bottom: 6px;
}

.driver-popover.sh-tour-popover .driver-popover-description {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #51677C;
}

/* Arrow follows the surface colour */
.driver-popover.sh-tour-popover .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: #ffffff; }
.driver-popover.sh-tour-popover .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: #ffffff; }
.driver-popover.sh-tour-popover .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: #ffffff; }
.driver-popover.sh-tour-popover .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: #ffffff; }

/* Footer: progress + buttons */
.driver-popover.sh-tour-popover .driver-popover-footer { margin-top: 14px; gap: 8px; }

.driver-popover.sh-tour-popover .driver-popover-progress-text {
  font-size: 0.72rem;
  font-weight: 700;
  color: #93A7BC;
}

.driver-popover.sh-tour-popover .driver-popover-navigation-buttons { gap: 8px; }

.driver-popover.sh-tour-popover button.driver-popover-next-btn,
.driver-popover.sh-tour-popover button.driver-popover-prev-btn {
  text-shadow: none;
  border-radius: 10px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 16px;
  min-height: 38px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

/* Primary (Next / Done) */
.driver-popover.sh-tour-popover button.driver-popover-next-btn {
  background: var(--sh-tour-accent);
  color: #ffffff;
}
.driver-popover.sh-tour-popover button.driver-popover-next-btn:hover {
  background: #0277BD;
}

/* Secondary (Back) */
.driver-popover.sh-tour-popover button.driver-popover-prev-btn {
  background: #F1F6FA;
  color: #0F2A43;
  border-color: #E2E8F0;
}
.driver-popover.sh-tour-popover button.driver-popover-prev-btn:hover {
  background: #E7EFF5;
}

/* Close (×) */
.driver-popover.sh-tour-popover button.driver-popover-close-btn {
  color: #93A7BC;
  transition: color 160ms ease;
}
.driver-popover.sh-tour-popover button.driver-popover-close-btn:hover {
  color: #0F2A43;
}

/* Mobile: keep the popover readable and away from the floating nav. */
@media (max-width: 480px) {
  .driver-popover.sh-tour-popover {
    max-width: calc(100vw - 28px);
    padding: 16px 16px 12px;
  }
}

/* ── Dark mode ── */
body.dark-mode .driver-popover.sh-tour-popover,
[data-theme="dark"] .driver-popover.sh-tour-popover,
.dark .driver-popover.sh-tour-popover {
  --sh-tour-accent: #29B6F6;
  background: #0B2034;
  color: #E1F5FE;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.4);
}
body.dark-mode .driver-popover.sh-tour-popover .driver-popover-title,
[data-theme="dark"] .driver-popover.sh-tour-popover .driver-popover-title,
.dark .driver-popover.sh-tour-popover .driver-popover-title { color: #ffffff; }
body.dark-mode .driver-popover.sh-tour-popover .driver-popover-description,
[data-theme="dark"] .driver-popover.sh-tour-popover .driver-popover-description,
.dark .driver-popover.sh-tour-popover .driver-popover-description { color: rgba(179, 229, 252, 0.72); }
body.dark-mode .driver-popover.sh-tour-popover button.driver-popover-prev-btn,
[data-theme="dark"] .driver-popover.sh-tour-popover button.driver-popover-prev-btn,
.dark .driver-popover.sh-tour-popover button.driver-popover-prev-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #E1F5FE;
  border-color: rgba(129, 212, 250, 0.18);
}
body.dark-mode .driver-popover.sh-tour-popover button.driver-popover-next-btn,
[data-theme="dark"] .driver-popover.sh-tour-popover button.driver-popover-next-btn,
.dark .driver-popover.sh-tour-popover button.driver-popover-next-btn { color: #04263b; }
/* Dark-mode arrow colours */
body.dark-mode .driver-popover.sh-tour-popover .driver-popover-arrow-side-left.driver-popover-arrow,
[data-theme="dark"] .driver-popover.sh-tour-popover .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: #0B2034; }
body.dark-mode .driver-popover.sh-tour-popover .driver-popover-arrow-side-right.driver-popover-arrow,
[data-theme="dark"] .driver-popover.sh-tour-popover .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: #0B2034; }
body.dark-mode .driver-popover.sh-tour-popover .driver-popover-arrow-side-top.driver-popover-arrow,
[data-theme="dark"] .driver-popover.sh-tour-popover .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: #0B2034; }
body.dark-mode .driver-popover.sh-tour-popover .driver-popover-arrow-side-bottom.driver-popover-arrow,
[data-theme="dark"] .driver-popover.sh-tour-popover .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: #0B2034; }