/* ============================================================
   GrowCRM Product Tour — Native Design Language
   Aligned with GrowCRM default theme:
   Primary: #20aee3 | Headings: #455a64 | Body: #526066
   Font: Montserrat (300/400/500/600)
   ============================================================ */

/* --- Welcome Overlay --- */
.onb-welcome-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.50);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9990;
  display: flex; align-items: center; justify-content: center;
  animation: onbFadeIn .2s ease;
}

/* --- Welcome Card --- */
.onb-welcome-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 2.25rem 2rem;
  max-width: 480px; width: 90%;
  box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.03);
  text-align: center;
  animation: onbSlideUp .3s cubic-bezier(0.16,1,0.3,1);
  font-family: "Montserrat",-apple-system,BlinkMacSystemFont,sans-serif;
}
.onb-welcome-card .onb-w-emoji {
  font-size: 2.75rem; display: block; margin-bottom: .5rem;
}
.onb-welcome-card h2 {
  font-size: 1.35rem; font-weight: 500; margin: 0 0 .4rem;
  color: #455a64; letter-spacing: -0.01em;
}
.onb-welcome-card .onb-w-sub {
  color: #526066; font-size: .875rem; line-height: 1.6;
  margin: 0 0 1.5rem; font-weight: 300;
}
.onb-welcome-card .onb-w-stats {
  display: flex; justify-content: center; gap: 1.75rem;
  margin-bottom: 1.5rem;
}
.onb-welcome-card .onb-w-stat { text-align: center; }
.onb-welcome-card .onb-w-stat-val {
  font-size: 1.45rem; font-weight: 600; color: #20aee3;
}
.onb-welcome-card .onb-w-stat-lbl {
  font-size: .7rem; color: #64748b; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
}
.onb-welcome-card .onb-w-actions {
  display: flex; gap: .65rem; justify-content: center; flex-wrap: wrap;
}

/* --- Buttons (native GrowCRM style) --- */
.onb-btn-primary {
  background: #20aee3; color: #fff; border: none;
  padding: .7rem 1.8rem; border-radius: 4px;
  font-weight: 500; font-size: .875rem; cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
  font-family: "Montserrat",sans-serif;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.onb-btn-primary:hover {
  background: #1586b0; box-shadow: 0 2px 8px rgba(32,174,227,0.25);
}
.onb-btn-ghost {
  background: transparent; color: #455a64;
  border: 1px solid #cbd5e1; padding: .7rem 1.5rem;
  border-radius: 4px; font-weight: 400; font-size: .85rem;
  cursor: pointer; transition: all .15s ease;
  font-family: "Montserrat",sans-serif;
}
.onb-btn-ghost:hover {
  border-color: #20aee3; color: #1586b0; background: rgba(32,174,227,0.04);
}

/* ============================================================
   Driver.js Popover — Native GrowCRM Card Style
   ============================================================ */
.driver-popover {
  border-radius: 8px !important;
  padding: 1.1rem 1.2rem !important;
  box-shadow: 0 10px 35px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04) !important;
  border: 1px solid #e2e8f0 !important;
  max-width: 290px !important; min-width: 200px !important;
  background: #fff !important;
  font-family: "Montserrat",sans-serif !important;
}
.driver-popover-arrow { border-top-color: #fff !important; }

/* Popover title */
.driver-popover-title {
  font-size: .85rem !important; font-weight: 500 !important;
  margin-bottom: .1rem !important; color: #455a64 !important;
  line-height: 1.35 !important; font-family: "Montserrat",sans-serif !important;
}
/* Popover description */
.driver-popover-description {
  font-size: .78rem !important; line-height: 1.55 !important;
  color: #526066 !important; margin-bottom: .75rem !important;
  font-weight: 300 !important;
}
.driver-popover-description strong { color: #455a64; font-weight: 500; }

/* Footer */
.driver-popover-footer {
  display: flex; align-items: center; gap: .35rem;
}
.driver-popover-progress-text {
  font-size: .7rem; color: #94a3b8; margin-right: auto;
  font-weight: 500; font-family: "Montserrat",sans-serif;
}

/* Next button — native primary */
.driver-popover-next-btn {
  background: #20aee3 !important; color: #fff !important;
  border: none !important; font-weight: 500 !important;
  border-radius: 4px !important; padding: .4rem .9rem !important;
  font-size: .78rem !important;
  font-family: "Montserrat",sans-serif !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
  transition: background .15s ease !important;
}
.driver-popover-next-btn:hover {
  background: #1586b0 !important;
}

/* Previous button — native ghost */
.driver-popover-prev-btn {
  background: transparent !important; color: #455a64 !important;
  border: 1px solid #cbd5e1 !important; border-radius: 4px !important;
  padding: .38rem .8rem !important; font-size: .78rem !important;
  font-family: "Montserrat",sans-serif !important;
}
.driver-popover-prev-btn:hover {
  border-color: #20aee3 !important; color: #1586b0 !important;
}
.driver-popover-close-btn {
  color: #94a3b8 !important; font-size: .95rem !important;
}

/* Overlay — subtle, lets product show through */
.driver-overlay {
  background: rgba(15,23,42,0.45) !important;
}

/* ============================================================
   Step Counter Badge
   ============================================================ */
.onb-phase-badge {
  display: inline-block;
  font-size: .7rem; font-weight: 500;
  padding: .15rem .55rem; border-radius: 3px;
  margin-bottom: .35rem;
  background: rgba(32,174,227,0.08); color: #1586b0;
  font-family: "Montserrat",sans-serif;
}

/* ============================================================
   Rocket Button (top bar)
   ============================================================ */
#topnav-onboarding-tour-icon {
  transition: transform .2s ease;
  cursor: pointer;
}
#topnav-onboarding-tour-icon:hover { transform: scale(1.20); }
#topnav-onboarding-tour-icon.onb-rocket-pulse {
  animation: onbRocketPulse .8s ease;
}
@keyframes onbRocketPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.35); }
}

/* ============================================================
   Confetti
   ============================================================ */
.onb-confetti-c {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
}
.onb-confetti-p {
  position: absolute; width: 10px; height: 10px;
  animation: onbConfettiFall 3.5s ease-out forwards;
}
@keyframes onbConfettiFall {
  0%   { transform: translateY(-10vh) rotate(0) scale(1); opacity: 1; }
  100% { transform: translateY(110vh) rotate(900deg) scale(.15); opacity: 0; }
}

/* ============================================================
   Animations
   ============================================================ */
@keyframes onbFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes onbSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 640px) {
  .onb-welcome-card { padding: 1.5rem 1.25rem; }
  .onb-welcome-card h2 { font-size: 1.15rem; }
  .driver-popover {
    max-width: 92vw !important; padding: 1rem !important;
  }
}