/* ============================================
   TOOLTIP SYSTEM - Reusable Classes
   ============================================
   USAGE: <span class="tooltip-wrapper"><span class="tooltip-icon"></span><span class="tooltip-content">Text</span></span>
   MODIFIERS: tooltip-top, tooltip-right, tooltip-left, tooltip-dark, tooltip-primary, tooltip-wide, tooltip-compact, sm-w
   ============================================ */

/* Base Structure */
.tooltip-wrapper {
    position: relative;
    display: inline-block;
    pointer-events: auto;
}




/* Tooltip Content Base */
.tooltip-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 1000;
    background: #fff;
    color: #333;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 250px;
    max-width: 350px;
    font-size: 13px;
    line-height: normal !important;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    pointer-events: none;
    word-wrap: break-word;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
}

.tooltip-content.sm-w {
    min-width: 180px;
    max-width: 200px;
}

/* Arrow */
.tooltip-content::before {
    content: '';
    position: absolute;
    border: 8px solid transparent;
    border-bottom-color: #fff;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    /* filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.05)); */
}

/* Hover State */
.tooltip-wrapper:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Position Variants */
.tooltip-content.tooltip-top {
    bottom: calc(100% + 10px);
    top: auto;
    transform: translateX(-50%) translateY(5px);
}

.tooltip-content.tooltip-top::before {
    border-bottom-color: transparent;
    border-top-color: #fff;
    top: auto;
    bottom: -8px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.05));
}

.tooltip-wrapper:hover .tooltip-content.tooltip-top {
    transform: translateX(-50%) translateY(0);
}

.tooltip-content.tooltip-right {
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-5px);
}

.tooltip-content.tooltip-right::before {
    border-bottom-color: transparent;
    border-right-color: #fff;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
}

.tooltip-wrapper:hover .tooltip-content.tooltip-right {
    transform: translateY(-50%) translateX(0);
}

.tooltip-content.tooltip-left {
    right: calc(100% + 10px);
    left: auto;
    top: 50%;
    transform: translateY(-50%) translateX(5px);
}

.tooltip-content.tooltip-left::before {
    border-bottom-color: transparent;
    border-left-color: #fff;
    right: -8px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
}

.tooltip-wrapper:hover .tooltip-content.tooltip-left {
    transform: translateY(-50%) translateX(0);
}

/* Corner Position Variants */
.tooltip-content.tooltip-top-left {
    bottom: calc(100% + 10px);
    top: auto;
    left: -16px;
    transform: translateY(5px);
}

.tooltip-content.tooltip-top-left::before {
    border-bottom-color: transparent;
    border-top-color: #fff;
    top: auto;
    bottom: -16px;
    left: 16px;
    transform: none;
}

.tooltip-wrapper:hover .tooltip-content.tooltip-top-left {
    transform: translateY(0);
}

.tooltip-content.tooltip-top-right {
    bottom: calc(100% + 10px);
    top: auto;
    right: 0;
    left: auto;
    transform: translateY(5px);
}

.tooltip-content.tooltip-top-right::before {
    border-bottom-color: transparent;
    border-top-color: #fff;
    top: auto;
    bottom: -8px;
    right: 16px;
    left: auto;
    transform: none;
}

.tooltip-wrapper:hover .tooltip-content.tooltip-top-right {
    transform: translateY(0);
}

.tooltip-content.tooltip-bottom-left {
    top: calc(100% + 10px);
    bottom: auto;
    left: -16px;
    transform: translateY(-5px);
}

.tooltip-content.tooltip-bottom-left::before {
    top: -16px;
    bottom: auto;
    left: 16px;
    transform: none;
}

.tooltip-wrapper:hover .tooltip-content.tooltip-bottom-left {
    transform: translateY(0);
}

.tooltip-content.tooltip-bottom-right {
    top: calc(100% + 10px);
    bottom: auto;
    right: 0;
    left: auto;
    transform: translateY(-5px);
}

.tooltip-content.tooltip-bottom-right::before {
    top: -8px;
    bottom: auto;
    right: 16px;
    left: auto;
    transform: none;
}

.tooltip-wrapper:hover .tooltip-content.tooltip-bottom-right {
    transform: translateY(0);
}

/* Content Typography */
.tooltip-content h4,
.tooltip-content h5,
.tooltip-content h6 {
    margin: 0 0 8px;
    font-weight: 600;
    color: #1a1a1a;
    font-size: 14px;
}

.tooltip-content p {
    margin: 0 0 8px;
    color: #555;
}

.tooltip-content p:last-child,
.tooltip-content li:last-child {
    margin-bottom: 0;
}

.tooltip-content ul,
.tooltip-content ol {
    margin: 8px 0;
    padding-left: 20px;
}

.tooltip-content li {
    margin-bottom: 6px;
    color: #555;
}

/* Theme: Dark */
.tooltip-content.tooltip-dark {
    background: #2c3e50;
    color: #fff;
}

.tooltip-content.tooltip-dark::before {
    border-bottom-color: #2c3e50;
}

.tooltip-content.tooltip-dark.tooltip-top::before {
    border-bottom-color: transparent;
    border-top-color: #2c3e50;
}

.tooltip-content.tooltip-dark.tooltip-right::before {
    border-bottom-color: transparent;
    border-right-color: #2c3e50;
}

.tooltip-content.tooltip-dark.tooltip-left::before {
    border-bottom-color: transparent;
    border-left-color: #2c3e50;
}

.tooltip-content.tooltip-dark.tooltip-top-left::before,
.tooltip-content.tooltip-dark.tooltip-top-right::before {
    border-bottom-color: transparent;
    border-top-color: #2c3e50;
}

.tooltip-content.tooltip-dark h4,
.tooltip-content.tooltip-dark h5,
.tooltip-content.tooltip-dark h6 {
    color: #fff;
}

.tooltip-content.tooltip-dark p,
.tooltip-content.tooltip-dark li {
    color: #e0e0e0;
}

/* Theme: Black */
.tooltip-content.tooltip-black {
    background: #000;
    color: #fff;
}

.tooltip-content.tooltip-black::before {
    border-bottom-color: #000;
}

.tooltip-content.tooltip-black.tooltip-top::before {
    border-bottom-color: transparent;
    border-top-color: #000;
}

.tooltip-content.tooltip-black.tooltip-right::before {
    border-bottom-color: transparent;
    border-right-color: #000;
}

.tooltip-content.tooltip-black.tooltip-left::before {
    border-bottom-color: transparent;
    border-left-color: #000;
}

.tooltip-content.tooltip-black.tooltip-top-left::before,
.tooltip-content.tooltip-black.tooltip-top-right::before {
    border-bottom-color: transparent;
    border-top-color: #000;
}

.tooltip-content.tooltip-black h4,
.tooltip-content.tooltip-black h5,
.tooltip-content.tooltip-black h6 {
    color: #fff;
}

.tooltip-content.tooltip-black p,
.tooltip-content.tooltip-black li {
    color: #e0e0e0;
}

/* Theme: Primary */
.tooltip-content.tooltip-primary {
    background: #007bff;
    color: #fff;
}

.tooltip-content.tooltip-primary::before {
    border-bottom-color: #007bff;
}

.tooltip-content.tooltip-primary.tooltip-top::before {
    border-bottom-color: transparent;
    border-top-color: #007bff;
}

.tooltip-content.tooltip-primary.tooltip-right::before {
    border-bottom-color: transparent;
    border-right-color: #007bff;
}

.tooltip-content.tooltip-primary.tooltip-left::before {
    border-bottom-color: transparent;
    border-left-color: #007bff;
}

.tooltip-content.tooltip-primary.tooltip-top-left::before,
.tooltip-content.tooltip-primary.tooltip-top-right::before {
    border-bottom-color: transparent;
    border-top-color: #007bff;
}

/* Size Variants */
.tooltip-content.tooltip-wide {
    min-width: 350px;
    max-width: 500px;
}

.tooltip-content.tooltip-compact {
    padding: 8px 12px;
    font-size: 12px;
    min-width: 180px;
}

/* Responsive */
@media (max-width: 768px) {
    .tooltip-content {
        min-width: 200px;
        max-width: 280px;
        font-size: 12px;
        padding: 10px 12px;
    }

    .tooltip-content.tooltip-wide {
        min-width: 250px;
        max-width: 320px;
    }
}