.premium-tooltip {
    --ags-tooltip-bg: linear-gradient(180deg, rgba(28, 39, 56, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    --ags-tooltip-bg-solid: #182334;
    --ags-tooltip-border: rgba(203, 213, 225, 0.16);
    --ags-tooltip-text: #f8fafc;
    --ags-tooltip-shadow:
        0 14px 32px rgba(15, 23, 42, 0.22),
        0 3px 10px rgba(15, 23, 42, 0.16);
    /* Keep animation here opacity-only. Bootstrap/Popper writes positioning via
       transform on the tooltip container; overriding it breaks placement. */
    /* Must exceed context menu z-index (9500) so tooltips inside menus render above. */
    z-index: 9600 !important;
    letter-spacing: 0.01em;
    filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.14));
    animation: tooltip-pop-in 0.14s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes tooltip-pop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.premium-tooltip .tooltip-inner {
    background: var(--ags-tooltip-bg) !important;
    color: var(--ags-tooltip-text) !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    font-size: 12.75px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums;
    text-shadow: none !important;
    box-shadow: var(--ags-tooltip-shadow) !important;
    border: 1px solid var(--ags-tooltip-border) !important;
    max-width: min(280px, calc(100vw - 24px)) !important;
    white-space: normal !important;
    text-align: left !important;
    word-break: break-word !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Scale the inner box instead of the outer tooltip so Popper's transform
       positioning remains intact. */
    animation: tooltip-inner-pop-in 0.14s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes tooltip-inner-pop-in {
    from { transform: translateY(2px) scale(0.96); }
    to { transform: translateY(0) scale(1); }
}

.premium-tooltip .tooltip-arrow {
    filter: drop-shadow(0 3px 4px rgba(15, 23, 42, 0.14));
}

/* Fiecare plasare are doar propria bordură colorată; celelalte rămân
   transparente (necesar pentru triunghiul CSS să arate corect). */
.premium-tooltip.bs-tooltip-top .tooltip-arrow::before,
.premium-tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: var(--ags-tooltip-bg-solid) !important;
}

.premium-tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.premium-tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: var(--ags-tooltip-bg-solid) !important;
}

.premium-tooltip.bs-tooltip-start .tooltip-arrow::before,
.premium-tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-left-color: var(--ags-tooltip-bg-solid) !important;
}

.premium-tooltip.bs-tooltip-end .tooltip-arrow::before,
.premium-tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-right-color: var(--ags-tooltip-bg-solid) !important;
}

@media (prefers-reduced-motion: reduce) {
    .premium-tooltip,
    .premium-tooltip .tooltip-inner {
        animation: none !important;
    }
}

.ags-tooltip-wrapper {
    display: inline-block;
    vertical-align: middle;
}