/*!
 * Hint.css - Modern Edition (2025)
 * Final Version with Positional Fixes + RTL Support
 */

[data-hint],
[aria-label][class*="hint--"] {
  position: relative;
  display: inline-block;
}

[data-hint]::after,
[data-hint]::before,
[aria-label][class*="hint--"]::after,
[aria-label][class*="hint--"]::before {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s;
  z-index: 999999;
}

[data-hint]:hover::after,
[data-hint]:hover::before,
[data-hint]:focus::after,
[data-hint]:focus::before,
[aria-label][class*="hint--"]:hover::after,
[aria-label][class*="hint--"]:hover::before,
[aria-label][class*="hint--"]:focus::after,
[aria-label][class*="hint--"]:focus::before {
  visibility: visible;
  opacity: 1;
}

[data-hint]::after,
[aria-label][class*="hint--"]::after {
  content: attr(data-hint);
  background: #2d2d2d;
  color: #fff;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
  max-width: 280px;
  word-wrap: break-word;
}

[aria-label][class*="hint--"]::after {
  content: attr(aria-label);
}

[data-hint=""]::after,
[data-hint=""]::before,
[aria-label=""]::after,
[aria-label=""]::before {
  display: none !important;
}

/* Color variants */
.hint--error::after    { background: #e74c3c; }
.hint--info::after     { background: #3498db; }
.hint--warning::after  { background: #f39c12; }
.hint--success::after  { background: #27ae60; }

/* Arrow color for each direction */
.hint--error.hint--top::before,
.hint--error.hint--top-left::before,
.hint--error.hint--top-right::before    { border-top-color: #e74c3c; }
.hint--error.hint--bottom::before,
.hint--error.hint--bottom-left::before,
.hint--error.hint--bottom-right::before { border-bottom-color: #e74c3c; }
.hint--error.hint--left::before         { border-left-color: #e74c3c; }
.hint--error.hint--right::before        { border-right-color: #e74c3c; }

/* Same pattern for info / warning / success ... */
.hint--info.hint--top::before,
.hint--info.hint--top-left::before,
.hint--info.hint--top-right::before    { border-top-color: #3498db; }
.hint--info.hint--bottom::before,
.hint--info.hint--bottom-left::before,
.hint--info.hint--bottom-right::before { border-bottom-color: #3498db; }
.hint--info.hint--left::before         { border-left-color: #3498db; }
.hint--info.hint--right::before        { border-right-color: #3498db; }

/* Warning */
.hint--warning.hint--top::before,
.hint--warning.hint--top-left::before,
.hint--warning.hint--top-right::before    { border-top-color: #f39c12; }
.hint--warning.hint--bottom::before,
.hint--warning.hint--bottom-left::before,
.hint--warning.hint--bottom-right::before { border-bottom-color: #f39c12; }
.hint--warning.hint--left::before         { border-left-color: #f39c12; }
.hint--warning.hint--right::before        { border-right-color: #f39c12; }

/* Success */
.hint--success.hint--top::before,
.hint--success.hint--top-left::before,
.hint--success.hint--top-right::before    { border-top-color: #27ae60; }
.hint--success.hint--bottom::before,
.hint--success.hint--bottom-left::before,
.hint--success.hint--bottom-right::before { border-bottom-color: #27ae60; }
.hint--success.hint--left::before         { border-left-color: #27ae60; }
.hint--success.hint--right::before        { border-right-color: #27ae60; }

/* ===============================
   MAIN DIRECTIONS
   =============================== */

.hint--top::before,
.hint--top::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.hint--top::before { margin-bottom: -12px; }
.hint--top:hover::before,
.hint--top:focus::before { transform: translateX(-50%) translateY(-8px); }
.hint--top:hover::after,
.hint--top:focus::after   { transform: translateX(-50%) translateY(-8px); }

.hint--bottom::before,
.hint--bottom::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.hint--bottom::before { margin-top: -12px; }
.hint--bottom:hover::before,
.hint--bottom:focus::before { transform: translateX(-50%) translateY(8px); }
.hint--bottom:hover::after,
.hint--bottom:focus::after   { transform: translateX(-50%) translateY(8px); }

.hint--left::before,
.hint--left::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.hint--left::before { margin-right: -12px; }
.hint--left:hover::before,
.hint--left:focus::before { transform: translateY(-50%) translateX(-8px); }
.hint--left:hover::after,
.hint--left:focus::after   { transform: translateY(-50%) translateX(-8px); margin-right: 8px; }

.hint--right::before,
.hint--right::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.hint--right::before { margin-left: -12px; }
.hint--right:hover::before,
.hint--right:focus::before { transform: translateY(-50%) translateX(8px); }
.hint--right:hover::after,
.hint--right:focus::after   { transform: translateY(-50%) translateX(8px); margin-left: 8px; }

/* ===============================
   TOP-LEFT / TOP-RIGHT
   =============================== */

.hint--top-left::before,
.hint--top-left::after {
  bottom: 100%;
  left: 0;
  transform: translateY(0);
}

.hint--top-left::after { transform: translateY(-8px); }

.hint--top-left:hover::after,
.hint--top-left:hover::before {
  transform: translateY(-12px);
}

.hint--top-right::before,
.hint--top-right::after {
  bottom: 100%;
  right: 0;
  transform: translateY(0);
}

.hint--top-right::after { transform: translateY(-8px); }

.hint--top-right:hover::after,
.hint--top-right:hover::before {
  transform: translateY(-12px);
}

/* ===============================
   BOTTOM-LEFT / BOTTOM-RIGHT
   =============================== */

.hint--bottom-left::before,
.hint--bottom-left::after {
  top: 100%;
  left: 0;
  transform: translateY(0);
}

.hint--bottom-left::after { transform: translateY(8px); }

.hint--bottom-left:hover::after,
.hint--bottom-left:hover::before {
  transform: translateY(12px);
}

.hint--bottom-right::before,
.hint--bottom-right::after {
  top: 100%;
  right: 0;
  transform: translateY(0);
}

.hint--bottom-right::after { transform: translateY(8px); }

.hint--bottom-right:hover::after,
.hint--bottom-right:hover::before {
  transform: translateY(12px);
}

/* ===============================
   RTL SUPPORT
   =============================== */

:root[dir="rtl"] .hint--top-left::before,
:root[dir="rtl"] .hint--top-left::after,
:root[dir="rtl"] .hint--bottom-left::before,
:root[dir="rtl"] .hint--bottom-left::after {
  left: auto;
  right: 0;
}

:root[dir="rtl"] .hint--top-right::before,
:root[dir="rtl"] .hint--top-right::after,
:root[dir="rtl"] .hint--bottom-right::before,
:root[dir="rtl"] .hint--bottom-right::after {
  right: auto;
  left: 0;
}

/* ===============================
   SIZES
   =============================== */

.hint--small::after  { width: 90px; }
.hint--medium::after { width: 180px; }
.hint--large::after  { width: 320px; }
.hint--small::after,
.hint--medium::after,
.hint--large::after { white-space: normal; }

.hint--rounded::after { border-radius: 12px; }

/* No animation */
.hint--no-animate::after,
.hint--no-animate::before { transition-duration: 0s !important; }

/* Bounce animation */
.hint--bounce::after,
.hint--bounce::before {
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.71, 1.7, 0.77, 1.24);
}

/* Always visible */
[aria-label][class*="hint--always"]::after {
  opacity: 1;
  visibility: visible;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  [data-hint]::after,
  [aria-label][class*="hint--"]::after {
    background: rgba(30,30,30,0.95);
    color: #eee;
    border: 1px solid rgba(255,255,255,0.08);
  }
}