/* ================================================
   FANCY CSS3 TOOLTIPS - Complete Stylesheet
   ================================================ */

/* Example Tooltip */
/* <div class="tooltip-trigger">
    Hover me
    <div class="tooltip tooltip-bottom tooltip-red tooltip-lg">
        Facebook Style Search<br>Friends using jQuery
    </div>
</div> */

/* ===== TOOLTIP TRIGGER CONTAINER ===== */
.tooltip-trigger {
    position: relative;
    cursor: pointer;
    display: inline-block;
    transition: all 0.3s ease;
}

/* ===== BASE TOOLTIP STYLES ===== */
.tooltip {
    position: absolute;
    background: #333;
    color: white;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}

.tooltip-trigger:hover .tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ===== TOP TOOLTIP ===== */
.tooltip-top {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    margin-bottom: 10px;
}

.tooltip-trigger:hover .tooltip-top {
    transform: translateX(-50%) translateY(-15px);
}

.tooltip-top::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #333;
}

/* ===== BOTTOM TOOLTIP ===== */
.tooltip-bottom {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    margin-top: 10px;
}

.tooltip-trigger:hover .tooltip-bottom {
    transform: translateX(-50%) translateY(15px);
}

.tooltip-bottom::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-bottom-color: #333;
}

/* ===== LEFT TOOLTIP ===== */
.tooltip-left {
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    margin-right: 10px;
    white-space: normal;
    width: 150px;
}

.tooltip-trigger:hover .tooltip-left {
    transform: translateY(-50%) translateX(-15px);
}

.tooltip-left::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-left-color: #333;
}

/* ===== RIGHT TOOLTIP ===== */
.tooltip-right {
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    margin-left: 10px;
    white-space: normal;
    width: 150px;
}

.tooltip-trigger:hover .tooltip-right {
    transform: translateY(-50%) translateX(15px);
}

.tooltip-right::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-right-color: #333;
}

/* ===== COLOR THEMES ===== */

/* BLUE */
.tooltip-blue {
    background: #2c5aa0;
}

.tooltip-blue.tooltip-top::after {
    border-top-color: #2c5aa0;
}

.tooltip-blue.tooltip-bottom::before {
    border-bottom-color: #2c5aa0;
}

.tooltip-blue.tooltip-left::after {
    border-left-color: #2c5aa0;
}

.tooltip-blue.tooltip-right::before {
    border-right-color: #2c5aa0;
}

/* RED */
.tooltip-red {
    background: #c41e3a;
}

.tooltip-red.tooltip-top::after {
    border-top-color: #c41e3a;
}

.tooltip-red.tooltip-bottom::before {
    border-bottom-color: #c41e3a;
}

.tooltip-red.tooltip-left::after {
    border-left-color: #c41e3a;
}

.tooltip-red.tooltip-right::before {
    border-right-color: #c41e3a;
}

/* GREEN */
.tooltip-green {
    background: #2d7f3a;
}

.tooltip-green.tooltip-top::after {
    border-top-color: #2d7f3a;
}

.tooltip-green.tooltip-bottom::before {
    border-bottom-color: #2d7f3a;
}

.tooltip-green.tooltip-left::after {
    border-left-color: #2d7f3a;
}

.tooltip-green.tooltip-right::before {
    border-right-color: #2d7f3a;
}

/* ORANGE */
.tooltip-orange {
    background: #c86a2a;
}

.tooltip-orange.tooltip-top::after {
    border-top-color: #c86a2a;
}

.tooltip-orange.tooltip-bottom::before {
    border-bottom-color: #c86a2a;
}

.tooltip-orange.tooltip-left::after {
    border-left-color: #c86a2a;
}

.tooltip-orange.tooltip-right::before {
    border-right-color: #c86a2a;
}

/* PURPLE */
.tooltip-purple {
    background: #6f42c1;
}

.tooltip-purple.tooltip-top::after {
    border-top-color: #6f42c1;
}

.tooltip-purple.tooltip-bottom::before {
    border-bottom-color: #6f42c1;
}

.tooltip-purple.tooltip-left::after {
    border-left-color: #6f42c1;
}

.tooltip-purple.tooltip-right::before {
    border-right-color: #6f42c1;
}

/* PINK */
.tooltip-pink {
    background: #e83e8c;
}

.tooltip-pink.tooltip-top::after {
    border-top-color: #e83e8c;
}

.tooltip-pink.tooltip-bottom::before {
    border-bottom-color: #e83e8c;
}

.tooltip-pink.tooltip-left::after {
    border-left-color: #e83e8c;
}

.tooltip-pink.tooltip-right::before {
    border-right-color: #e83e8c;
}

/* CYAN */
.tooltip-cyan {
    background: #17a2b8;
}

.tooltip-cyan.tooltip-top::after {
    border-top-color: #17a2b8;
}

.tooltip-cyan.tooltip-bottom::before {
    border-bottom-color: #17a2b8;
}

.tooltip-cyan.tooltip-left::after {
    border-left-color: #17a2b8;
}

.tooltip-cyan.tooltip-right::before {
    border-right-color: #17a2b8;
}

/* DARK */
.tooltip-dark {
    background: #343a40;
}

.tooltip-dark.tooltip-top::after {
    border-top-color: #343a40;
}

.tooltip-dark.tooltip-bottom::before {
    border-bottom-color: #343a40;
}

.tooltip-dark.tooltip-left::after {
    border-left-color: #343a40;
}

.tooltip-dark.tooltip-right::before {
    border-right-color: #343a40;
}

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

/* Small Tooltip (default) */
.tooltip-sm {
    padding: 8px 12px;
    font-size: 12px;
}

/* Large Tooltip */
.tooltip-lg {
    font-size: 14px;
    padding: 15px 20px;
    width: 200px;
    white-space: normal;
    text-align: center;
}

/* Extra Large Tooltip */
.tooltip-xl {
    font-size: 15px;
    padding: 18px 25px;
    width: 250px;
    white-space: normal;
    text-align: center;
}

/* ===== UTILITY CLASSES ===== */

/* No Arrow */
.tooltip-no-arrow.tooltip-top::after,
.tooltip-no-arrow.tooltip-bottom::before,
.tooltip-no-arrow.tooltip-left::after,
.tooltip-no-arrow.tooltip-right::before {
    display: none;
}

/* Always Visible (for debugging) */
.tooltip-always-visible {
    opacity: 1;
    visibility: visible;
}

/* Animation Variations */
@keyframes tooltip-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes tooltip-scale-up {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.tooltip-animate-fade {
    animation: tooltip-fade-in 0.3s ease;
}

.tooltip-animate-scale {
    animation: tooltip-scale-up 0.3s ease;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .tooltip {
        padding: 10px 14px;
        font-size: 12px;
    }
    
    .tooltip-lg,
    .tooltip-xl {
        width: 150px;
        font-size: 12px;
        padding: 10px 15px;
    }
    
    .tooltip-left,
    .tooltip-right {
        width: 120px;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    .tooltip {
        transition: none;
    }
    
    .tooltip-trigger:hover .tooltip {
        transform: none;
    }
}