/* ==========================================================================
   CONVERTMASTER PRO — TOOLTIP SYSTEM (tooltips.css)
   CSS-only tooltips for icon-only buttons. Keyboard and hover accessible.
   Desktop-only: hidden on touch devices. Dark/light theme aware.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base tooltip — any element with data-tooltip gets a tooltip
   -------------------------------------------------------------------------- */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px) scale(0.94);
  
  /* Appearance */
  background: var(--tooltip-bg, #0f172a);
  color: var(--tooltip-text, #f8fafc);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-sans, system-ui, sans-serif);
  line-height: 1.2;
  white-space: nowrap;
  padding: 0.32rem 0.65rem;
  border-radius: 6px;
  pointer-events: none;
  
  /* Visibility */
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
  
  /* Layer */
  z-index: 99997;
  
  /* Subtle shadow */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* Tooltip arrow (caret) */
[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--tooltip-bg, #0f172a);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
  z-index: 99997;
}

/* Show on hover and keyboard focus */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s;
}

/* Arrow on focus/hover */
[data-tooltip]:focus-visible::before,
[data-tooltip]:hover::before {
  transform: translateX(-50%) translateY(0);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s;
}

/* --------------------------------------------------------------------------
   Theme-aware colors
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  --tooltip-bg: #1e293b;
  --tooltip-text: #f1f5f9;
}

[data-theme="dark"] {
  --tooltip-bg: #334155;
  --tooltip-text: #f8fafc;
}

/* --------------------------------------------------------------------------
   Viewport edge corrections — tooltip-left and tooltip-right variants
   -------------------------------------------------------------------------- */
[data-tooltip-pos="left"]::after {
  left: auto;
  right: calc(100% + 8px);
  bottom: 50%;
  transform: translateY(50%) translateX(-4px) scale(0.94);
}
[data-tooltip-pos="left"]::before {
  left: auto;
  right: calc(100% + 0px);
  bottom: 50%;
  border-top-color: transparent;
  border-left-color: var(--tooltip-bg, #0f172a);
  transform: translateY(50%);
}
[data-tooltip-pos="left"]:hover::after,
[data-tooltip-pos="left"]:focus-visible::after {
  transform: translateY(50%) translateX(0) scale(1);
}
[data-tooltip-pos="left"]:hover::before,
[data-tooltip-pos="left"]:focus-visible::before {
  transform: translateY(50%);
}

[data-tooltip-pos="right"]::after {
  left: calc(100% + 8px);
  right: auto;
  bottom: 50%;
  transform: translateY(50%) translateX(4px) scale(0.94);
}
[data-tooltip-pos="right"]::before {
  left: calc(100% + 0px);
  right: auto;
  bottom: 50%;
  border-top-color: transparent;
  border-right-color: var(--tooltip-bg, #0f172a);
  transform: translateY(50%);
}
[data-tooltip-pos="right"]:hover::after,
[data-tooltip-pos="right"]:focus-visible::after {
  transform: translateY(50%) translateX(0) scale(1);
}

[data-tooltip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px) scale(0.94);
}
[data-tooltip-pos="bottom"]::before {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: var(--tooltip-bg, #0f172a);
  transform: translateX(-50%) translateY(-4px);
}
[data-tooltip-pos="bottom"]:hover::after,
[data-tooltip-pos="bottom"]:focus-visible::after {
  transform: translateX(-50%) translateY(0) scale(1);
}
[data-tooltip-pos="bottom"]:hover::before,
[data-tooltip-pos="bottom"]:focus-visible::before {
  transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   Header Action Controls Tooltips — Forced Bottom Alignment (No Cutoff)
   For Language Selector, Favorites, and Light/Dark Mode Theme Toggle buttons.
   -------------------------------------------------------------------------- */
.header-actions [data-tooltip]::after,
.header-actions .action-btn[data-tooltip]::after,
.header-actions .lang-dropdown-trigger[data-tooltip]::after,
.header-actions .theme-toggle-btn[data-tooltip]::after {
  bottom: auto;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px) scale(0.94);
  z-index: 99999;
  pointer-events: auto;
}

.header-actions [data-tooltip]::before,
.header-actions .action-btn[data-tooltip]::before,
.header-actions .lang-dropdown-trigger[data-tooltip]::before,
.header-actions .theme-toggle-btn[data-tooltip]::before {
  bottom: auto;
  top: calc(100% + 2px);
  left: 50%;
  border-top-color: transparent;
  border-bottom-color: var(--tooltip-bg, #0f172a);
  transform: translateX(-50%) translateY(-4px);
  z-index: 99999;
  pointer-events: auto;
}

.header-actions [data-tooltip]:hover::after,
.header-actions [data-tooltip]:focus-visible::after,
.header-actions .action-btn[data-tooltip]:hover::after,
.header-actions .action-btn[data-tooltip]:focus-visible::after,
.header-actions .lang-dropdown-trigger[data-tooltip]:hover::after,
.header-actions .lang-dropdown-trigger[data-tooltip]:focus-visible::after,
.header-actions .theme-toggle-btn[data-tooltip]:hover::after,
.header-actions .theme-toggle-btn[data-tooltip]:focus-visible::after {
  transform: translateX(-50%) translateY(0) scale(1);
}

.header-actions [data-tooltip]:hover::before,
.header-actions [data-tooltip]:focus-visible::before,
.header-actions .action-btn[data-tooltip]:hover::before,
.header-actions .action-btn[data-tooltip]:focus-visible::before,
.header-actions .lang-dropdown-trigger[data-tooltip]:hover::before,
.header-actions .lang-dropdown-trigger[data-tooltip]:focus-visible::before,
.header-actions .theme-toggle-btn[data-tooltip]:hover::before,
.header-actions .theme-toggle-btn[data-tooltip]:focus-visible::before {
  transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   Touch device exclusion — no tooltips on mobile/tablet touch interfaces
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  [data-tooltip]::after,
  [data-tooltip]::before {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — instant show/hide, no animation
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-tooltip]::after,
  [data-tooltip]::before {
    transition: opacity 0ms, visibility 0ms;
  }
}