/* ===========================================
   CUSTOM SCROLLBAR STYLES
   Uses CSS custom properties for light/dark mode
   Classes: .custom-scrollbar, .scroll-y, .scrollbar-hide
   =========================================== */

/* Scrollbar color tokens */
:root {
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;
  --scrollbar-track: #f1f5f9;
}

.dark {
  --scrollbar-thumb: #475569;
  --scrollbar-thumb-hover: #64748b;
  --scrollbar-track: #1e293b;
}

/* Shared scrollbar mixin via class */
.custom-scrollbar,
.scroll-y {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.custom-scrollbar::-webkit-scrollbar,
.scroll-y::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track,
.scroll-y::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.scroll-y::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.scroll-y::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Utility for vertical scrolling */
.scroll-y {
  overflow-y: auto;
}

/* Hide scrollbars for mobile tab navigation */
.scrollbar-hide {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}
/* ===========================================
   PRISM.JS DARK MODE OVERRIDES
   prism-tomorrow theme has gray (#2d2d2d) background
   that clashes with our dark UI. Force to match.
   =========================================== */

.dark pre[class*="language-"],
.dark :not(pre) > code[class*="language-"] {
  background: #1e2736 !important; /* matches markdowney-prose dark pre */
}

.dark code[class*="language-"] .token.comment,
.dark code[class*="language-"] .token.prolog,
.dark code[class*="language-"] .token.doctype,
.dark code[class*="language-"] .token.cdata {
  color: #6b7280; /* gray-500 */
}

.dark code[class*="language-"] .token.punctuation {
  color: #9ca3af; /* gray-400 */
}

.dark code[class*="language-"] .token.property,
.dark code[class*="language-"] .token.tag,
.dark code[class*="language-"] .token.boolean,
.dark code[class*="language-"] .token.number,
.dark code[class*="language-"] .token.constant,
.dark code[class*="language-"] .token.symbol {
  color: #f9a8d4; /* pink-300 */
}

.dark code[class*="language-"] .token.selector,
.dark code[class*="language-"] .token.string,
.dark code[class*="language-"] .token.char,
.dark code[class*="language-"] .token.builtin {
  color: #6ee7b7; /* emerald-300 */
}

.dark code[class*="language-"] .token.operator,
.dark code[class*="language-"] .token.entity,
.dark code[class*="language-"] .token.url,
.dark code[class*="language-"] .token.variable {
  color: #fbbf24; /* amber-400 */
}

.dark code[class*="language-"] .token.atrule,
.dark code[class*="language-"] .token.attr-value,
.dark code[class*="language-"] .token.keyword {
  color: #93c5fd; /* blue-300 */
}

.dark code[class*="language-"] .token.function,
.dark code[class*="language-"] .token.class-name {
  color: #c4b5fd; /* violet-300 */
}

.dark code[class*="language-"],
.dark code[class*="language-"] * {
  text-shadow: none !important; /* kill prism-tomorrow text shadows */
}

/* Inline code in dark mode */
.dark .prose :not(pre) > code {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e5e7eb !important;
}

/* Agent Tools Code Viewer - Override Prism font size */
[data-tool-viewer-target="code"] {
  font-size: 0.75rem !important;
  line-height: 1;
}
/* ===========================================
   PROSE CONTENT STYLING
   For markdown content (bug reports, comments, etc.)
   No @apply - explicit CSS for reliability
   =========================================== */

/* Inline code — long file paths get per-element scroll instead of pushing the parent wide */
.prose code {
  background-color: rgb(229 231 235);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: rgb(31 41 55);
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  vertical-align: bottom;
  white-space: nowrap;
}
/* Inside table cells, wrap instead of scroll — cells can't be width-bounded reliably */
.prose td code {
  white-space: normal;
  word-break: break-all;
}
.dark .prose code {
  background-color: rgb(55 65 81);
  color: rgb(229 231 235);
}

/* Code blocks */
.prose pre {
  background-color: rgb(17 24 39);
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1rem 0;
}
.prose pre code {
  background-color: transparent;
  padding: 0;
  color: rgb(243 244 246);
  font-size: 0.875rem;
  line-height: 1.625;
}

/* Links - keep word-wrap, let Tailwind utilities control color */
.prose a {
  overflow-wrap: break-word;
}

/* Headings */
.prose h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgb(17 24 39);
  margin: 1.5rem 0 0.75rem;
}
.prose h3 {
  font-size: 1rem;
  font-weight: 600;
  color: rgb(17 24 39);
  margin: 1rem 0 0.5rem;
}
.dark .prose h2,
.dark .prose h3 { color: white; }

/* Lists */
.prose ul, .prose ol {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
}
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li {
  margin-bottom: 0.375rem;
  padding-left: 0.25rem;
  color: rgb(55 65 81);
}
.dark .prose li { color: rgb(209 213 219); }

/* Paragraphs */
.prose p {
  margin-bottom: 0.75rem;
  color: rgb(55 65 81);
}
.dark .prose p { color: rgb(209 213 219); }

/* Horizontal rule */
.prose hr {
  margin: 1.5rem 0;
  border-color: rgb(229 231 235);
}
.dark .prose hr { border-color: rgb(55 65 81); }

/* Bold text */
.prose strong {
  font-weight: 600;
  color: rgb(17 24 39);
}
.dark .prose strong { color: white; }

/* Blockquotes */
.prose blockquote {
  border-left: 4px solid rgb(209 213 219);
  padding-left: 1rem;
  font-style: italic;
  color: rgb(75 85 99);
  margin: 1rem 0;
}
.dark .prose blockquote {
  border-left-color: rgb(75 85 99);
  color: rgb(156 163 175);
}

/* Tables */
.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgb(229 231 235);
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.prose th {
  background-color: rgb(249 250 251);
  color: rgb(17 24 39);
  font-weight: 600;
  text-align: left;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid rgb(229 231 235);
  border-right: 1px solid rgb(229 231 235);
  font-size: 0.625rem;
  line-height: 1.25rem;
}
.prose th:last-child { border-right: none; }
.prose td {
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid rgb(229 231 235);
  border-right: 1px solid rgb(229 231 235);
  color: rgb(55 65 81);
  font-size: 0.625rem;
  line-height: 1.25rem;
}
.prose td:last-child { border-right: none; }
.prose tr:last-child td { border-bottom: none; }
.dark .prose table {
  border-color: rgb(55 65 74 / 0.3);
}
.dark .prose th {
  background-color: rgb(31 41 55 / 0.5);
  color: rgb(243 244 246);
  border-color: rgb(55 65 74 / 0.3);
}
.dark .prose td {
  background-color: rgb(31 41 55 / 0.3);
  color: rgb(209 213 219);
  border-color: rgb(55 65 74 / 0.3);
}

/* ===========================================
   VIDEO COMPONENT - 3D perspective + hover tilt
   =========================================== */

/* Scale to 50% on md+ screens */
@media (min-width: 768px) {
  .markdowney-video {
    max-width: 50%;
  }
}

/* Perspective stage - creates 3D space */
.markdowney-video-stage {
  perspective: 800px;
  perspective-origin: 50% 50%;
}

/* The card that tilts */
.markdowney-video-card {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateY(0deg) rotateX(0deg);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.8s ease;
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.08),
    0 10px 20px -5px rgb(0 0 0 / 0.12),
    0 0 0 1px rgb(0 0 0 / 0.04);
}

.markdowney-video-card:hover {
  transform: rotateY(-3deg) rotateX(2deg) scale(1.01);
  box-shadow:
    0 8px 16px -4px rgb(0 0 0 / 0.12),
    0 20px 40px -8px rgb(0 0 0 / 0.16),
    0 0 0 1px rgb(0 0 0 / 0.06);
}

/* Dark mode shadow */
.dark .markdowney-video-card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.3),
    0 10px 20px -5px rgb(0 0 0 / 0.4),
    0 0 0 1px rgb(255 255 255 / 0.05);
}
.dark .markdowney-video-card:hover {
  box-shadow:
    0 8px 16px -4px rgb(0 0 0 / 0.4),
    0 20px 40px -8px rgb(0 0 0 / 0.5),
    0 0 0 1px rgb(255 255 255 / 0.08);
}

/* The video player fills the card */
.markdowney-video-player {
  display: block;
  width: 100%;
  border-radius: 0.75rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .markdowney-video-card {
    transform: none;
    transition: none;
  }
  .markdowney-video-card:hover {
    transform: none;
  }
}

/* ===========================================
   ANIMATED ICONS
   CSS animations for Lucide icons via icon_tag helper
   Usage: icon_tag("bell", animate: :ring, loop: true)
   =========================================== */

/* Ring/shake - bell notification effect */
@keyframes icon-ring {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-12deg); }
  30% { transform: rotate(10deg); }
  40% { transform: rotate(-8deg); }
  50% { transform: rotate(6deg); }
  60% { transform: rotate(-4deg); }
  70% { transform: rotate(2deg); }
  80% { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

/* Pulse - heartbeat/attention effect */
@keyframes icon-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.85; }
}
/* Progress circle soft ping - 0% incomplete items */
@keyframes progress-ping {
  0% { transform: scale(1); opacity: 0.5; }
  75%, 100% { transform: scale(1.5); opacity: 0; }
}
.progress-circle-ping {
  animation: progress-ping 2.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Bounce - playful bounce */
@keyframes icon-bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-20%); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-10%); }
}

/* Spin - loading/processing */
@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Wiggle - playful side-to-side */
@keyframes icon-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

/* Float - gentle hovering effect */
@keyframes icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8%); }
}

/* Pop - scale entrance */
@keyframes icon-pop {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Shake - horizontal shake */
@keyframes icon-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Tada - attention-grabbing entrance */
@keyframes icon-tada {
  0% { transform: scale(1) rotate(0deg); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Animation classes - single play */
.icon-animate-ring { animation: icon-ring 0.8s ease-in-out; }
.icon-animate-pulse { animation: icon-pulse 0.6s ease-in-out; }
.icon-animate-bounce { animation: icon-bounce 0.6s ease-in-out; }
.icon-animate-spin { animation: icon-spin 1s linear; }
.icon-animate-wiggle { animation: icon-wiggle 0.5s ease-in-out; }
.icon-animate-float { animation: icon-float 2s ease-in-out; }
.icon-animate-pop { animation: icon-pop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.icon-animate-shake { animation: icon-shake 0.6s ease-in-out; }
.icon-animate-tada { animation: icon-tada 0.8s ease-in-out; }

/* Loop modifier - continuous animation */
.icon-animate-ring.icon-loop { animation: icon-ring 1.5s ease-in-out infinite; }
.icon-animate-pulse.icon-loop { animation: icon-pulse 1.5s ease-in-out infinite; }
.icon-animate-bounce.icon-loop { animation: icon-bounce 1s ease-in-out infinite; }
.icon-animate-spin.icon-loop { animation: icon-spin 1s linear infinite; }
.icon-animate-wiggle.icon-loop { animation: icon-wiggle 1s ease-in-out infinite; }
.icon-animate-float.icon-loop { animation: icon-float 3s ease-in-out infinite; }
.icon-animate-shake.icon-loop { animation: icon-shake 1s ease-in-out infinite; }
.icon-animate-tada.icon-loop { animation: icon-tada 1.5s ease-in-out infinite; }

/* Hover modifier - animate on hover only */
.icon-animate-hover { animation: none !important; }
.icon-animate-hover:hover.icon-animate-ring { animation: icon-ring 0.8s ease-in-out; }
.icon-animate-hover:hover.icon-animate-pulse { animation: icon-pulse 0.6s ease-in-out; }
.icon-animate-hover:hover.icon-animate-bounce { animation: icon-bounce 0.6s ease-in-out; }
.icon-animate-hover:hover.icon-animate-spin { animation: icon-spin 1s linear; }
.icon-animate-hover:hover.icon-animate-wiggle { animation: icon-wiggle 0.5s ease-in-out; }
.icon-animate-hover:hover.icon-animate-float { animation: icon-float 2s ease-in-out; }
.icon-animate-hover:hover.icon-animate-pop { animation: icon-pop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.icon-animate-hover:hover.icon-animate-shake { animation: icon-shake 0.6s ease-in-out; }
.icon-animate-hover:hover.icon-animate-tada { animation: icon-tada 0.8s ease-in-out; }

/* Viewport modifier - animate when scrolled into view */
.icon-animate-viewport {
  animation-play-state: paused;
}
.icon-animate-viewport.icon-in-view {
  animation-play-state: running;
}

/* Confidence Bar Breathing Animation — subtle width pulse when < 100% */
@keyframes confidence-breathing {
  0%, 100% { transform: scaleX(1); }
  25% { transform: scaleX(1.03); }
  50% { transform: scaleX(0.97); }
  75% { transform: scaleX(1.02); }
}

.confidence-bar-breathing {
  animation: confidence-breathing 2.5s ease-in-out infinite;
  transform-origin: left;
}

/* Loading state animations */
@keyframes loading-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.35; }
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

/* ===========================================
   LOGO MARQUEE - Infinite horizontal scroll
   =========================================== */
@keyframes logo-cloud-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.logo-cloud-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: logo-cloud-scroll 200s linear infinite;
  will-change: transform;
}

.logo-cloud-track:hover {
  animation-play-state: paused;
}

.logo-cloud-img {
  height: 2rem;
  max-width: 120px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  filter: grayscale(1);
  opacity: 0.4;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.logo-cloud-img:hover {
  filter: none;
  opacity: 1;
}

@media (min-width: 640px) {
  .logo-cloud-track { gap: 4rem; }
  .logo-cloud-img { height: 2.5rem; max-width: 140px; }
}

/* Dark mode: invert to white by default, show original color on hover */
:is(.dark) .logo-cloud-img {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.45;
}
:is(.dark) .logo-cloud-img:hover {
  filter: none;
  opacity: 1;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .logo-cloud-track { animation: none; }
  #call_bar { transition-duration: 0s !important; }
}

/* ===========================================
   PRODUCT CARD EFFECTS
   3D tilt, parallax wrappers, hover glow
   =========================================== */
.perspective-cards {
  perspective: 1200px;
}

.card-3d {
  transition: transform 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99), box-shadow 0.5s ease;
  will-change: transform;
  transform-style: preserve-3d;
}

.card-parallax-wrapper {
  transition: transform 0.1s linear;
  will-change: transform;
}

/* ===========================================
   LOGO CLOUD - Click-to-color effect
   =========================================== */
.logo-cloud-active {
  filter: grayscale(0) !important;
  opacity: 1 !important;
  transform: scale(1.15);
}

/* ===========================================
   AI SHIMMER - Thinking text gradient sweep
   =========================================== */
@keyframes ai-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.ai-shimmer {
  background: linear-gradient(
    90deg,
    #9ca3af 0%,
    #9ca3af 35%,
    #6b7280 50%,
    #9ca3af 65%,
    #9ca3af 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ai-shimmer 2s ease-in-out infinite;
}
@media (prefers-color-scheme: dark) {
  .ai-shimmer {
    background: linear-gradient(
      90deg,
      #6b7280 0%,
      #6b7280 35%,
      #d1d5db 50%,
      #6b7280 65%,
      #6b7280 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Signing field pulse - yellow glow for "sign here" indicators */
@keyframes signing-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.25); }
  50% { box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.12); }
}
/* ===========================================
   SHEPHERD.JS TOUR STYLING
   Matches native <dialog> / ModalComponent pattern

   Shepherd CDN uses high-specificity selectors like
   .shepherd-has-title .shepherd-content .shepherd-header (0,3,0)
   so we match or exceed that with our overrides.
   =========================================== */

/* ---- Entrance animation ---- */
@keyframes shepherd-fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.shepherd-element {
  animation: shepherd-fade-in 200ms ease-out;
}

/* ---- Overlay ---- */
.shepherd-modal-overlay-container {
  fill: rgba(0, 0, 0, 0.6);
}

/* ---- Highlighted target element ---- */
.shepherd-target {
  position: relative;
  z-index: 10000;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 20px 8px rgba(59, 130, 246, 0.3);
  border-radius: 0.5rem;
}

/* ---- Tooltip element ---- */
.shepherd-element {
  background: white;
  border: 1px solid rgb(229 231 235); /* gray-200 */
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  max-width: 360px;
  z-index: 10001; /* Above .shepherd-target (10000) so tooltip isn't covered */
}

/* ---- Arrow ---- */
.shepherd-element .shepherd-arrow::before {
  background: rgb(249 250 251) !important; /* gray-50, matches header */
  border-color: rgb(229 231 235) !important; /* gray-200 */
}

/* ---- Content wrapper ---- */
.shepherd-element .shepherd-content {
  background: white;
  border-radius: 0.5rem;
}

/* ---- Header (specificity 0,3,0 to match Shepherd CDN) ---- */
.shepherd-has-title .shepherd-content .shepherd-header {
  background: rgb(249 250 251); /* gray-50 */
  border-bottom: 1px solid rgb(229 231 235); /* gray-200 */
  padding: 0.875rem 1.25rem;
  border-radius: 0.5rem 0.5rem 0 0;
}

.shepherd-element .shepherd-content .shepherd-title {
  color: rgb(17 24 39); /* gray-900 */
  font-weight: 600;
  font-size: 1.125rem; /* text-lg */
  line-height: 1.5;
}

/* ---- Cancel (X) icon ---- */
.shepherd-element .shepherd-cancel-icon {
  color: rgb(156 163 175); /* gray-400 */
  transition: color 0.15s ease;
}
.shepherd-element .shepherd-cancel-icon:hover {
  color: rgb(75 85 99); /* gray-600 */
}

/* ---- Body text ---- */
.shepherd-element .shepherd-content .shepherd-text {
  color: rgb(75 85 99); /* gray-600 */
  padding: 1rem 1.25rem;
  font-size: 0.875rem; /* text-sm */
  line-height: 1.6;
}

/* ---- Footer ---- */
.shepherd-element .shepherd-content .shepherd-footer {
  background: white;
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid rgb(243 244 246); /* gray-100 */
  border-radius: 0 0 0.5rem 0.5rem;
  gap: 0.75rem;
}

/* ---- Buttons ---- */
.shepherd-element .shepherd-button {
  background: rgb(243 244 246); /* gray-100 */
  color: rgb(55 65 81); /* gray-700 */
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.15s ease;
}
.shepherd-element .shepherd-button:hover {
  background: rgb(229 231 235); /* gray-200 */
}

/* Primary action (last button) */
.shepherd-element .shepherd-footer .shepherd-button:last-child {
  background: rgb(37 99 235); /* blue-600 */
  color: white;
}
.shepherd-element .shepherd-footer .shepherd-button:last-child:hover {
  background: rgb(29 78 216); /* blue-700 */
}

/* Secondary button (first, not last - "Back" / "Skip") */
.shepherd-element .shepherd-footer .shepherd-button:first-child:not(:last-child) {
  background: rgb(243 244 246);
  color: rgb(55 65 81);
}
.shepherd-element .shepherd-footer .shepherd-button:first-child:not(:last-child):hover {
  background: rgb(229 231 235);
}

/* ==== Centered modal variant (welcome, search, earnings) ==== */
/* .shepherd-centered is toggled on .shepherd-element per step via when.show() */
.shepherd-element.shepherd-centered {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-width: 28rem; /* max-w-md */
}
.shepherd-element.shepherd-centered .shepherd-header,
.shepherd-has-title .shepherd-content .shepherd-element.shepherd-centered .shepherd-header,
.shepherd-element.shepherd-centered .shepherd-content .shepherd-header {
  background: transparent;
  border-bottom: none;
  padding-bottom: 0;
  text-align: center;
}
.shepherd-element.shepherd-centered .shepherd-content .shepherd-text {
  text-align: center;
}
.shepherd-element.shepherd-centered .shepherd-content .shepherd-footer {
  justify-content: center;
  border-top: none;
}
.shepherd-element.shepherd-centered .shepherd-arrow {
  display: none;
}

/* ==== DARK MODE ==== */
.dark .shepherd-modal-overlay-container {
  fill: rgba(0, 0, 0, 0.7);
}

.dark .shepherd-target {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15), 0 0 20px 8px rgba(59, 130, 246, 0.25);
}

.dark .shepherd-element {
  background: rgb(31 41 55); /* gray-800 */
  border-color: rgb(55 65 81); /* gray-700 */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

.dark .shepherd-element .shepherd-arrow::before {
  background: rgb(17 24 39) !important; /* gray-900 */
  border-color: rgb(55 65 81) !important;
}

.dark .shepherd-element .shepherd-content {
  background: rgb(31 41 55);
}

.dark .shepherd-has-title .shepherd-content .shepherd-header {
  background: rgb(17 24 39); /* gray-900 */
  border-bottom-color: rgb(55 65 81);
}

.dark .shepherd-element .shepherd-content .shepherd-title {
  color: white;
}

.dark .shepherd-element .shepherd-cancel-icon {
  color: rgb(156 163 175);
}
.dark .shepherd-element .shepherd-cancel-icon:hover {
  color: white;
}

.dark .shepherd-element .shepherd-content .shepherd-text {
  color: rgb(156 163 175); /* gray-400 */
}

.dark .shepherd-element .shepherd-content .shepherd-footer {
  background: rgb(31 41 55);
  border-top-color: rgb(55 65 81);
}

.dark .shepherd-element .shepherd-button {
  background: rgb(55 65 81); /* gray-700 */
  color: rgb(209 213 219); /* gray-300 */
}
.dark .shepherd-element .shepherd-button:hover {
  background: rgb(75 85 99);
}

.dark .shepherd-element .shepherd-footer .shepherd-button:last-child {
  background: rgb(59 130 246); /* blue-500 */
  color: white;
}
.dark .shepherd-element .shepherd-footer .shepherd-button:last-child:hover {
  background: rgb(37 99 235);
}

.dark .shepherd-element .shepherd-footer .shepherd-button:first-child:not(:last-child) {
  background: rgb(55 65 81);
  color: rgb(209 213 219);
}
.dark .shepherd-element .shepherd-footer .shepherd-button:first-child:not(:last-child):hover {
  background: rgb(75 85 99);
  color: white;
}

/* Dark centered header stays transparent */
.dark .shepherd-element.shepherd-centered .shepherd-content .shepherd-header {
  background: transparent;
}
/* ===========================================
   APPLICATION CSS - Core styles only.
   Domain-specific CSS is split into partials:
     _scrollbars.css  - scrollbar theming
     _prism.css       - code highlighting overrides
     _prose.css       - markdown/prose content
     _animations.css  - icon & loading animations
     _shepherd.css    - tour popup styling
   =========================================== */

/*





 */

/* Smooth scrolling for anchor links.
   height: auto overrides Google Translate's inline height: 100% which
   constrains html to viewport height and can break position: sticky. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  height: auto !important;
}

/* Joe's Color System */
:root {
  --nav-height: 64px;
  --joe-success: #22c55e;
  --joe-warning: #f59e0b;
  --joe-danger: #ef4444;
  --joe-info: #3b82f6;
  --joe-light: #d1d5db;
}

/* Semantic Flash Message Classes */
.alert-success {
  @apply bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800/30 text-green-800 dark:text-green-200 px-4 py-3 rounded-md mb-4;
}

.alert-error {
  @apply bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/30 text-red-800 dark:text-red-200 px-4 py-3 rounded-md mb-4;
}

.alert-warning {
  @apply bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800/30 text-yellow-800 dark:text-yellow-200 px-4 py-3 rounded-md mb-4;
}

.alert-info {
  @apply bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800/30 text-blue-800 dark:text-blue-200 px-4 py-3 rounded-md mb-4;
}

/* Navbar opacity - matches mobile menu when open (CSS-only, no JS needed) */
#mainNav:has(#mobileMenu:not(.hidden)) {
  background-color: rgb(255 255 255 / 0.9);
}
.dark #mainNav:has(#mobileMenu:not(.hidden)) {
  background-color: rgb(31 41 55 / 0.9);
}

/* Fonts - Lexend (body) + Outfit (headings) */
header, h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', Arial, sans-serif;
  font-weight: 700;
}
.dark header, .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: white;
}
body {
  font-family: 'Lexend', Arial, sans-serif;
  font-weight: 400;
}

/* Adesso-style section labels (eyebrow text) */
.eyebrow, .section-label {
  color: #2ABC99;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.75rem;
  font-weight: 600;
}
.dark .eyebrow, .dark .section-label {
  color: #2ABC99;
}

/* ============================================
   MARKDOWNEY PROSE - Guide page markdown content
   Single source of truth for .md -> HTML styling.
   Tailwind's prose plugin is NOT used here;
   explicit CSS avoids dark-mode gaps and specificity wars.
   ============================================ */

.markdowney-prose {
  max-width: none;
  line-height: 1.75;
  color: #374151;           /* gray-700 */
}
.dark .markdowney-prose {
  color: #d1d5db;           /* gray-300 */
}

/* --- Compact variant (chat context — tighter spacing than full-page guides) --- */
.markdowney-prose-compact { line-height: 1.5; font-size: 0.875rem; }
.markdowney-prose-compact p { margin-bottom: 0.5rem; }
.markdowney-prose-compact h1 { font-size: 1.125rem; margin: 1rem 0 0.5rem; }
.markdowney-prose-compact h2 { font-size: 1rem; margin: 0.75rem 0 0.375rem; border-bottom: none; padding-bottom: 0; }
.markdowney-prose-compact h3 { font-size: 0.9375rem; margin: 0.625rem 0 0.25rem; }
.markdowney-prose-compact ul, .markdowney-prose-compact ol { margin: 0.375rem 0; }
.markdowney-prose-compact li { margin-bottom: 0.125rem; }
.markdowney-prose-compact table { font-size: 0.75rem; }

/* --- Headings --- */
.markdowney-prose h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2rem 0 1rem;
  color: #111827;
}
.markdowney-prose h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1.5rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
  color: #111827;
  scroll-margin-top: 5rem;
}
.markdowney-prose h3 {
  font-size: 1.125rem;
  font-weight: 500;
  margin: 1rem 0 0.5rem;
  color: #111827;
  scroll-margin-top: 5rem;
}
.dark .markdowney-prose h1,
.dark .markdowney-prose h2,
.dark .markdowney-prose h3 {
  color: #f3f4f6;           /* gray-100 */
}
.dark .markdowney-prose h2 {
  border-bottom-color: rgba(255,255,255,0.1);
}

/* --- Heading anchors (GitHub-style) --- */
.markdowney-heading-anchor {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.markdowney-heading-link {
  color: inherit;
  text-decoration: none;
}
.markdowney-heading-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #d1d5db;
}
.markdowney-anchor-link {
  opacity: 0;
  color: #9ca3af;
  transition: opacity 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 4px;
}
.markdowney-heading-anchor:hover .markdowney-anchor-link,
.markdowney-anchor-link:focus {
  opacity: 1;
}
.markdowney-anchor-link:hover {
  color: #4b5563;
  background: #f3f4f6;
}
.dark .markdowney-anchor-link:hover {
  color: #d1d5db;
  background: rgba(255,255,255,0.1);
}

/* --- Paragraphs --- */
.markdowney-prose p {
  margin-bottom: 1rem;
}

/* --- Links --- */
.markdowney-prose a:not(.markdowney-heading-link):not(.markdowney-anchor-link) {
  color: #2563eb;           /* blue-600 */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.markdowney-prose a:not(.markdowney-heading-link):not(.markdowney-anchor-link):hover {
  color: #1d4ed8;
}
.dark .markdowney-prose a:not(.markdowney-heading-link):not(.markdowney-anchor-link) {
  color: #60a5fa;           /* blue-400 */
}
.dark .markdowney-prose a:not(.markdowney-heading-link):not(.markdowney-anchor-link):hover {
  color: #93bbfd;
}

/* --- Bold --- */
.markdowney-prose strong {
  font-weight: 600;
  color: #111827;
}
.dark .markdowney-prose strong {
  color: #f9fafb;           /* gray-50 */
}

/* --- Lists --- */
.markdowney-prose ul { list-style-type: disc;    margin: 1rem 0; padding-left: 1.5rem; }
.markdowney-prose ol { list-style-type: decimal; margin: 1rem 0; padding-left: 1.5rem; }
.markdowney-prose li {
  margin-bottom: 0.25rem;
  padding-left: 0.25rem;
}

/* --- Task list checkboxes --- */
.markdowney-prose li.markdowney-task {
  list-style: none;
  margin-left: -1.25rem;
}
.markdowney-checkbox {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  vertical-align: middle;
  accent-color: #10b981;
  pointer-events: none;
}

/* --- Inline code --- */
.markdowney-prose code {
  background-color: #f3f4f6;   /* gray-100 */
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #1f2937;
}
.dark .markdowney-prose code {
  background-color: rgba(255,255,255,0.08);
  color: #e5e7eb;
}
.dark .markdowney-prose pre code {
  background-color: transparent;   /* no stripe - pre bg handles it */
}

/* --- Code blocks --- */
.markdowney-prose pre {
  background-color: #111827;   /* gray-900 */
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1rem 0;
  transition: background-color 0.15s ease;
}
.markdowney-prose pre:hover {
  background-color: #0c1220;
}
.dark .markdowney-prose pre {
  background-color: #1e2736;   /* lighter than gray-900 - readable contrast */
  border: 1px solid rgba(255,255,255,0.06);
}
.dark .markdowney-prose pre:hover {
  background-color: #242f3f;
}
.markdowney-prose pre code {
  background-color: transparent;
  padding: 0;
  color: #f3f4f6;
  font-size: 0.875rem;
  line-height: 1.4;   /* tighter than prose - no big gaps between lines */
}

/* --- Blockquotes --- */
.markdowney-prose blockquote {
  border-left: 4px solid #d1d5db;
  padding-left: 1rem;
  font-style: italic;
  color: #6b7280;
  margin: 1rem 0;
}
.dark .markdowney-prose blockquote {
  border-left-color: #4b5563;
  color: #9ca3af;
}

/* --- Horizontal rules --- */
.markdowney-prose hr {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid #e5e7eb;
}
.dark .markdowney-prose hr {
  border-top-color: rgba(255,255,255,0.1);
}

/* --- Images --- */
.markdowney-prose img {
  max-width: 100%;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

/* Markdowney tables - rounded, borderless, hover rows */
.markdowney-table {
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  margin: 1.5rem 0;
}

.dark .markdowney-table {
  border-color: rgba(255, 255, 255, 0.1);
}

.markdowney-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 !important;
}

.markdowney-table thead {
  background: #f9fafb;
}

.dark .markdowney-table thead {
  background: rgba(255, 255, 255, 0.04);
}

.markdowney-table .markdowney-th {
  padding: 0.625rem 1rem;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: #6b7280;
  border: none !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.dark .markdowney-table .markdowney-th {
  color: #9ca3af;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.markdowney-table .markdowney-td {
  padding: 0.625rem 1rem;
  border: none !important;
  border-bottom: 1px solid #f3f4f6 !important;
  color: #374151;
}

.dark .markdowney-table .markdowney-td {
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
  color: #d1d5db;
}

.markdowney-table .markdowney-tr:last-child .markdowney-td {
  border-bottom: none !important;
}

.markdowney-table tbody .markdowney-tr {
  transition: background-color 0.15s ease;
}

.markdowney-table tbody .markdowney-tr:hover {
  background: #f9fafb;
}

.dark .markdowney-table tbody .markdowney-tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Markdowney table scroll wrapper */
.markdowney-table-scroll {
  overflow-x: auto;
}

/* Markdowney header icons */
.markdowney-th-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 0.375rem;
}

.markdowney-th-svg {
  width: 0.875rem;
  height: 0.875rem;
  color: #9ca3af;
}

.dark .markdowney-th-svg {
  color: #6b7280;
}

/* Markdowney table cell overflow fix */
.markdowney-table .markdowney-td {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Markdowney mobile - compact scrollable table */
@media (max-width: 639px) {
  .markdowney-table {
    margin: 1rem 0;
    border-radius: 0.5rem;
  }

  .markdowney-table table {
    min-width: max-content;
  }

  .markdowney-table .markdowney-th {
    padding: 0.5rem 0.625rem;
    font-size: 0.6875rem;
    white-space: nowrap;
  }

  .markdowney-table .markdowney-td {
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  .markdowney-table .markdowney-td code {
    font-size: 0.75rem;
  }

  .markdowney-table .markdowney-td a {
    white-space: nowrap;
  }
}

/* Markdowney emoji -> animated icon inline replacement */
.markdowney-emoji-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: text-bottom;
  margin-right: 0.25rem;
}

.markdowney-emoji-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Slightly larger in h2 headings */
h2 .markdowney-emoji-icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

/* For dark mode, invert the calendar icon */
.dark input,
.dark select,
.dark textarea {
  color-scheme: dark;
}

/* Custom select dropdown styling with visible chevron */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem !important;
}

.dark select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Turbo Frame Error Styling (dark mode aware) */
.turbo-frame-error {
  @apply text-red-700 dark:text-red-300;
}

/* Google Translate - Hide ALL Google UI, we use our own custom toggle */

/* Fix body offset that Google Translate adds */
body.translated-ltr,
body.translated-rtl,
html.translated-ltr body,
html.translated-rtl body {
  top: 0 !important;
  position: static !important;
}

/* Prevent horizontal overflow from Google Translate elements.
   Use `clip` not `hidden` - hidden auto-computes overflow-y to auto (CSS spec),
   turning <html> into a scroll container that breaks position: sticky.
   `clip` prevents overflow without creating a scroll container. */
html.translated-ltr,
html.translated-rtl {
  overflow-x: clip;
}

/* Hide ALL Google Translate UI - banner, toolbar, widget, spinner, everything */
.goog-te-banner-frame,
.skiptranslate:not(body),
.goog-te-spinner-pos,
.goog-te-footer,
#google_translate_element,
#google_translate_element_hidden,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
[class*="goog-te-gadget"],
[class*="VIpgJd-ZVi9od-aZ2wEe"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Icon defaults - only apply when no explicit color class is present */
.icon:not([class*="text-"]) {
  @apply text-gray-600 dark:text-gray-400;
}

/* Lucide icon placeholder - prevents flash of blank icons before JS loads */
i[data-lucide] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: currentColor;
  opacity: 0.12;
  border-radius: 0.25rem;
  vertical-align: middle;
}

/* Once Lucide converts to SVG, show the real icon */
svg[data-lucide] {
  background: transparent;
  opacity: 1;
}

/* Three-state dark mode icon visibility (controlled by data-theme-mode on <html>) */
.theme-icon-light, .theme-icon-dark, .theme-icon-system { display: none; }
html[data-theme-mode="light"] .theme-icon-light { display: block; }
html[data-theme-mode="dark"] .theme-icon-dark { display: block; }
html[data-theme-mode="system"] .theme-icon-system { display: block; }
html:not([data-theme-mode]) .theme-icon-light { display: block; }

/* Dialog Modal Centering & Animation
   showModal() puts <dialog> in the browser's top layer with native centering (margin: auto).
   IMPORTANT: No `transform` on the open state — transform creates a containing block that
   breaks position:fixed tooltips inside the dialog. Opacity-only animation. */
dialog[data-controller="dialog"],
dialog[data-dialog-target="modal"] {
  z-index: 60;
  overflow: visible;  /* Override browser default overflow:auto — prevents clipping tooltips.
                         Inner <main class="scroll-y"> handles content scrolling. */
  transition: opacity 200ms ease-out;
}

dialog[data-controller="dialog"]:not(.dialog-open),
dialog[data-dialog-target="modal"]:not(.dialog-open) {
  opacity: 0;
}

dialog[data-controller="dialog"].dialog-open,
dialog[data-dialog-target="modal"].dialog-open {
  opacity: 1;
}

dialog[data-controller="dialog"].dialog-closing,
dialog[data-dialog-target="modal"].dialog-closing {
  opacity: 0;
}

/* Tooltips moved into dialog by MutationObserver need position:fixed so they
   use viewport coords (not dialog-relative) and don't cause overflow scrollbars. */
dialog .joe-tooltip {
  position: fixed !important;
}

/* Clean FAQ details markers */
details summary {
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

/* ===========================================
   LOADING STATE (aria-busy)
   Usage: element.setAttribute('aria-busy', 'true')
   =========================================== */
[aria-busy="true"]:not(html):not(body) {
  position: relative;
  pointer-events: none;
}

[aria-busy="true"]:not(html):not(body) > * {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

[aria-busy="true"][data-loading-pulse] > * {
  animation: loading-pulse 1.5s ease-in-out infinite;
}

/* Loading spinner overlay (opt-in with data-loading-spinner) */
[aria-busy="true"][data-loading-spinner]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  border: 2px solid rgb(209 213 219);
  border-top-color: rgb(59 130 246);
  border-radius: 50%;
  animation: loading-spin 0.6s linear infinite;
  z-index: 10;
}

.dark [aria-busy="true"][data-loading-spinner]::after {
  border-color: rgb(75 85 99);
  border-top-color: rgb(96 165 250);
}

/* ===========================================
   CUSTOM RANGE SLIDER
   Modern, accessible range input with brand teal accent
   =========================================== */
.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.75rem;
  border-radius: 9999px;
  background: rgb(229 231 235);
  cursor: pointer;
  outline: none;
}

.dark .range-slider {
  background: rgb(55 65 81);
}

.range-slider::-webkit-slider-runnable-track {
  height: 0.75rem;
  border-radius: 9999px;
  background: transparent;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: #2EC4A6;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  margin-top: -0.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  background: #009476;
}

.range-slider::-webkit-slider-thumb:active {
  transform: scale(1.05);
}

.dark .range-slider::-webkit-slider-thumb {
  border-color: rgb(31 41 55);
  background: #2EC4A6;
}

.range-slider::-moz-range-track {
  height: 0.75rem;
  border-radius: 9999px;
  background: rgb(229 231 235);
}

.dark .range-slider::-moz-range-track {
  background: rgb(55 65 81);
}

.range-slider::-moz-range-thumb {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: #2EC4A6;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.range-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  background: #009476;
}

.dark .range-slider::-moz-range-thumb {
  border-color: rgb(31 41 55);
  background: #2EC4A6;
}

.range-slider:focus-visible {
  outline: 2px solid #2EC4A6;
  outline-offset: 2px;
}

.dark .range-slider:focus-visible {
  outline-color: #2EC4A6;
}

/* ===========================================
   GOOGLE PLACES AUTOCOMPLETE
   =========================================== */
.pac-container {
  border-radius: 0.5rem;
  border: 1px solid rgb(229 231 235);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  margin-top: 4px;
  font-family: inherit;
  z-index: 10000;
}

.pac-item {
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  border-top: 1px solid rgb(243 244 246);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.pac-item:first-child {
  border-top: none;
}

.pac-item:hover,
.pac-item-selected {
  background: rgb(243 244 246);
}

.pac-item-query {
  font-weight: 500;
  color: rgb(17 24 39);
}

.pac-matched {
  font-weight: 600;
}

.pac-icon {
  margin-right: 0.5rem;
}

.dark .pac-container {
  background: rgb(31 41 55);
  border-color: rgb(55 65 81);
}

.dark .pac-item {
  border-color: rgb(55 65 81);
  color: rgb(229 231 235);
}

.dark .pac-item:hover,
.dark .pac-item-selected {
  background: rgb(55 65 81);
}

.dark .pac-item-query {
  color: rgb(243 244 246);
}

/* ===========================================
   JODIT WYSIWYG - Dark Theme Overrides
   Only target editors instantiated with Jodit's dark theme.
   Some admin editors intentionally stay light even when the app
   is in dark mode, so global .dark .jodit-* overrides are wrong.
   =========================================== */
.dark .jodit-container.jodit_theme_dark {
  background: rgb(31 41 55) !important;
  border-color: rgb(55 65 81) !important;
  color: rgb(229 231 235) !important;
}

.dark .jodit-container.jodit_theme_dark .jodit-toolbar__box,
.dark .jodit-container.jodit_theme_dark .jodit-toolbar-editor-collection,
.dark .jodit-container.jodit_theme_dark .jodit-ui-group,
.dark .jodit-container.jodit_theme_dark .jodit-status-bar {
  background: rgb(31 41 55) !important;
  border-color: rgb(55 65 81) !important;
}

.dark .jodit-container.jodit_theme_dark .jodit-toolbar__box {
  border-bottom: 1px solid rgb(55 65 81) !important;
}

.dark .jodit-container.jodit_theme_dark .jodit-ui-group_line_true:not(:last-child) {
  border-right: 1px solid rgb(75 85 99) !important;
}

.dark .jodit-container.jodit_theme_dark .jodit-toolbar-button__button {
  color: rgb(209 213 219) !important;
  border-radius: 0.375rem;
}

.dark .jodit-container.jodit_theme_dark .jodit-toolbar-button__button:hover,
.dark .jodit-container.jodit_theme_dark .jodit-toolbar-button__button[aria-pressed="true"],
.dark .jodit-container.jodit_theme_dark .jodit-toolbar-button.jodit-toolbar-button_active .jodit-toolbar-button__button {
  background: rgb(55 65 81) !important;
  color: rgb(243 244 246) !important;
}

.dark .jodit-container.jodit_theme_dark .jodit-toolbar-button__icon svg,
.dark .jodit-container.jodit_theme_dark .jodit-toolbar-button__icon svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

.dark .jodit-container.jodit_theme_dark .jodit-workplace,
.dark .jodit-container.jodit_theme_dark .jodit-wysiwyg,
.dark .jodit-container.jodit_theme_dark .jodit-source__mirror {
  background: rgb(17 24 39) !important;
}

.dark .jodit-container.jodit_theme_dark .jodit-wysiwyg,
.dark .jodit-container.jodit_theme_dark .jodit-source__mirror {
  color: rgb(229 231 235) !important;
}

.dark .jodit-container.jodit_theme_dark .jodit-placeholder {
  color: rgb(107 114 128) !important;
}