/* Telecom Voucher — unified Bootstrap 5 tooltips (app-wide)
 * Refined for premium SaaS aesthetics: high z-index, readable typography, and theme-inverted colors.
 */

.tooltip {
  --bs-tooltip-zindex: 2000;
  --bs-tooltip-max-width: 220px;
  --bs-tooltip-padding-x: 0.6rem;
  --bs-tooltip-padding-y: 0.35rem;
  --bs-tooltip-font-size: 0.725rem; /* Compact, readable font size */
  --bs-tooltip-color: #ffffff;      /* White text on dark bg (Light Mode) */
  --bs-tooltip-bg: #0f172a;         /* Deep slate bg (Light Mode) */
  --bs-tooltip-border-radius: 6px;
  --bs-tooltip-opacity: 1;
  font-family: var(--tv-font-sans, 'Tajawal', sans-serif);
}

.tooltip .tooltip-inner {
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  word-break: break-word;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Dark Mode: White smoke background with dark text for maximum contrast/premium feel */
html[data-theme="dark"] .tooltip {
  --bs-tooltip-bg: #f8fafc; /* White smoke (Slate 50) */
  --bs-tooltip-color: #0f172a; /* Deep slate text */
}

html[data-theme="dark"] .tooltip .tooltip-inner {
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Modifier from JS (customClass) */
.tooltip.tv-tooltip {
  transition: opacity 0.15s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .tooltip.fade {
    transition: none;
  }
}